:root {
    --bg: #0b0f14;
    --panel: #111623;
    --text: #ecf2ff;
    --muted: #9db0c8;
    --accent: #5aa2ff;
    --accent-2: #2f7bff;
    --border: #223147;
    --shadow: 0 20px 60px rgba(0,0,0,.45);
}
* { box-sizing: border-box }
html, body { height: 100% }
body {
    margin: 0;
    font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
    color: var(--text);
    background: radial-gradient(1600px 900px at 50% -10%, #1b2642 0%, var(--bg) 55%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* background */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none }
.grid {
    position: absolute; inset: -10%;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.8), transparent);
}
.orb { position: absolute; filter: blur(40px); opacity: .25 }
.orb-1 { width: 420px; height: 420px; background: #4da3ff; top: 10%; left: 5% }
.orb-2 { width: 380px; height: 380px; background: #9b59b6; bottom: 8%; right: 8% }
.orb-3 { width: 300px; height: 300px; background: #f39c12; top: 35%; right: 20% }
/* layout */
.shell { max-width: 980px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2 }
header.shell { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 8px }
.brand { display: flex; align-items: center; gap: 12px }
.title { font-weight: 700; letter-spacing: .2px }
.logo { color: var(--accent-2) }
.hero { margin: 26px 0 18px }
.hero h1 { margin: 0 0 6px; font-size: 28px }
.hero .sub { margin: 0; color: var(--muted) }
.panel {
    background: linear-gradient(180deg, rgba(18,24,38,.85), rgba(10,14,25,.9));
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
    overflow: hidden;
}
.panel-body { padding: 18px }
.panel-foot { padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px }
/* picker */
.picker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.file-name { color: var(--muted) }
.file-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.file-input::-webkit-file-upload-button {
    color: #071022; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    border: none; border-radius: 8px; padding: 8px 12px; margin-right: 10px; cursor: pointer;
}
/* buttons */
.btn {
    appearance: none; border: 1px solid var(--border); background: #0f1628b8; color: var(--text);
    padding: 10px 14px; border-radius: 12px; cursor: pointer;
    transition: transform .06s ease, filter .2s ease, background .2s ease, border-color .2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.btn:hover { transform: translateY(-1px); border-color: #334060; background: #0f1a2e }
.btn:active { transform: none }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none }
.btn.primary { border-color: transparent; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); color: #071022; font-weight: 700; }
.btn-ic { display: inline-flex; vertical-align: middle; margin-right: 8px }
.actions { display: flex; gap: 10px; margin: 12px 0 }
.status { color: var(--muted); min-height: 18px; margin: 8px 0 4px; font-size: 14px }
/* log */
.log-wrap { margin-top: 8px }
.log-head { color: var(--muted); font-size: 13px; margin-bottom: 6px }
.log-box {
    background: #0b1222; border: 1px solid var(--border); border-radius: 12px; padding: 12px;
    min-height: 160px; max-height: 360px; overflow: auto; white-space: pre-wrap;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: 13px; color: #cfe1ff;
}
/* spinner */
.spinner { display: flex; align-items: center; gap: 12px; padding: 10px 0 }
.spinner.hidden { display: none }
.wheel {
    width: 24px; height: 24px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.14); border-top-color: #5aa2ff;
    animation: spin .9s linear infinite;
}
.spin-text { color: var(--muted) }
@keyframes spin { to { transform: rotate(360deg) } }
/* util */
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }