:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body,html{margin:0;padding:0;background:#f6f8fa;font-family:Segoe UI,Roboto,Arial,sans-serif;min-height:100vh;width:100%;color:#000;height:100%;overflow-y:auto}.header-banner{background:linear-gradient(90deg,#4f8cff,#6ed6ff);width:100%;padding:36px 0 20px;box-sizing:border-box;margin-bottom:40px;border-radius:0 0 24px 24px;box-shadow:0 4px 16px #0001;text-align:center}.header-title{margin:0;color:#000;font-size:2.2rem;font-weight:700;letter-spacing:2px;line-height:1.3;background:linear-gradient(15deg,#fff 0% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.page{display:flex;justify-content:center;align-items:flex-start;gap:40px;padding:40px 0;width:100vw;max-width:100vw;margin:0;box-sizing:border-box;height:calc(100vh - 140px);overflow-y:auto}.form-panel,.preview-panel{flex:1 1 0;background:#fff;border-radius:18px;padding:32px 28px;box-sizing:border-box;box-shadow:0 2px 16px #0002;min-width:320px;max-width:600px;margin-bottom:24px;color:#000;height:90%}.page{align-items:stretch}.preview-panel{overflow-y:auto}.form-panel h1,.preview-panel h2,.preview-panel h3{margin-top:20px;margin-bottom:10px;font-size:1.3rem;color:#1a237e;font-weight:600;letter-spacing:1px}label{display:block;font-weight:500;margin-top:18px;margin-bottom:4px;color:#000;letter-spacing:.5px}input,select{width:100%;padding:10px 12px;margin-top:6px;border-radius:8px;border:1.5px solid #d0d7de;font-size:1rem;background:#f7fafc;box-sizing:border-box;margin-bottom:12px;transition:border .2s;color:#000}input:focus,select:focus{border:1.5px solid #4f8cff;outline:none}.drop-area{margin-top:20px;border:2px dashed #4f8cff;border-radius:12px;padding:32px 0;text-align:center;background:#f0f6ff;color:#4f8cff;cursor:pointer;transition:background .2s,border .2s}.drop-area:hover{background:#e3f0ff;border-color:#1a73e8}.drop-area p{font-weight:700;font-size:1.1rem;margin:0;color:#4f8cff}.drop-area small{display:block;margin-top:6px;font-size:.95em;color:#888}.preview-panel p{margin:6px 0;font-size:1.05rem;color:#000;background:#f7fafc;border-radius:8px;padding:8px 12px}.error{background:#ffeaea;color:#e74c3c;padding:12px;border-radius:8px;margin-top:10px;font-weight:600;border:1px solid #ffbdbd}.upload-btn{display:block;margin:24px auto 0;padding:12px 28px;background:linear-gradient(90deg,#4f8cff,#6ed6ff);color:#fff;border:none;font-weight:600;border-radius:8px;font-size:1.1rem;cursor:pointer;box-shadow:0 2px 8px #4f8cff22;transition:background .2s,box-shadow .2s}.upload-btn:disabled{background:#b0c8e8;color:#fff;cursor:not-allowed;box-shadow:none}.upload-btn:not(:disabled):hover{background:linear-gradient(90deg,#357ae8,#4f8cff);box-shadow:0 4px 16px #4f8cff33}.zip-diff,.zip-comparison,.zip-raw,.database-panel{margin-top:2rem;background:#f6f8fa;padding:1.2rem 1rem;border-radius:12px;color:#000;box-shadow:0 1px 6px #0001}.zip-diff h3,.zip-comparison h3,.zip-raw h3,.database-panel h3{margin-top:1rem;color:#1976d2;font-size:1.1rem;font-weight:600}.zip-diff ul,.zip-comparison ul,.zip-raw ul{padding-left:1.5rem;margin:0}ul{color:#000}.scroll-box{max-height:180px;overflow-y:auto;border:1px solid #e0e6ed;padding:10px;margin-bottom:16px;border-radius:8px;background:#fff;color:#000}.scroll-box ul{margin:0;padding-left:20px}.scroll-box li{font-family:monospace;font-size:14px;color:#000}.modern-success{color:#2ecc40;font-weight:600}.modern-error{color:#e74c3c;font-weight:600}.modern-warning{color:#ff9800;font-weight:600}.modern-wait{color:#888;font-style:italic}@media (max-width: 900px){.page{flex-direction:column;gap:24px;align-items:stretch;padding:24px 4vw;width:100vw;max-width:100vw}.form-panel,.preview-panel{max-width:100%;min-width:unset;margin-bottom:24px}}@keyframes blink-wait{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.animated-wait{animation:blink-wait 1s infinite}.spinner{display:inline-block;width:22px;height:22px;border:3px solid #b3d1f7;border-top:3px solid #4f8cff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}