:root{
  --bg:#0f1115; --panel:#151922; --text:#e8eef7; --muted:#94a3b8;
  --accent:#60a5fa; --ok:#22c55e; --err:#ef4444; --chip:#1f2937; --border:#232a36;
}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.appbar{position:sticky;top:0;background:#0c1118;border-bottom:1px solid var(--border);padding:14px 16px;z-index:2}
.title{font-weight:600}
.view{display:none;max-width:720px;margin:10px auto;padding:0 12px}
.view.active{display:block}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);margin:10px 0}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field input,.field textarea{background:#0e141c;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px;outline:none}
.actions{display:flex;gap:8px}
button{background:var(--accent);border:none;color:#071019;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.filebtn{display:inline-flex;background:#0e141c;border:1px dashed var(--border);border-radius:12px;padding:10px 14px;color:var(--muted);cursor:pointer}
.toggle{display:flex;align-items:center;gap:8px;margin:10px 0;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px}
.item .meta{color:var(--muted);font-size:.9em}
.badge{display:inline-flex;gap:6px;align-items:center;background:#7f1d1d;color:#fecaca;padding:2px 8px;border-radius:999px;font-size:.8em;margin-left:6px}
.msg{margin-top:10px;color:var(--muted)}
.hide{display:none}

.tabs{position:fixed;left:0;right:0;bottom:0;background:#0c1118;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;z-index:2}
.tabs button{background:#111723;color:var(--muted)}
.tabs button.active{background:var(--accent);color:#071019}

#result .photo{width:100%;height:220px;background:#0b0f15;border-radius:12px;overflow:hidden;margin-bottom:8px}
#result .photo img{width:100%;height:100%;object-fit:cover}
.kv{display:grid;grid-template-columns:40% 60%;gap:6px}
.kv div{background:#0e141c;border:1px solid var(--border);padding:8px;border-radius:10px}
.kv .k{color:#9fb2c7}
.kv .v{color:#e6f0ff}

.loader{position:fixed;inset:0;background:rgba(8,11,16,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
.spinner{width:64px;height:64px;border-radius:50%;border:6px solid #1f2937;border-top-color:#60a5fa;animation:spin 1s linear infinite}
.loader-text{margin-top:10px;color:#9fb2c7}
@keyframes spin{to{transform:rotate(360deg)}}