:root { --bg: #fff; --fg: #111; --muted: #666; --border: #e6e6e6; --primary: #111; }
* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; }
body.theme-dark { --bg:#111; --fg:#fff; --muted:#aaa; --border:#333; --primary:#4dabf7; }
body.theme-ocean { --bg:#ffffff; --fg:#0e1a2b; --muted:#5c6b7a; --border:#c9d4e3; --primary:#0b84ff; }
body.theme-sunset { --fg:#0f1a1f; --muted:#4b5a63; --border:#ffe2c5; --primary:#ff7a1f; background: linear-gradient(135deg,#fff6ea 0%,#ffe7d1 40%,#ffd1a1 100%); }
body.theme-neon { --fg:#eaffff; --muted:#a8d7d7; --border:#1b2a2a; --primary:#19e3c1; background: radial-gradient(1200px 600px at 20% 10%,#001a1f 0%,#001316 40%,#000b0d 100%); }
.topbar { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; z-index: 10; }
.brand { font-weight: 700; letter-spacing: 0.2px; font-family:"Space Mono", monospace; background: linear-gradient(90deg,var(--primary),#6ec1ff); -webkit-background-clip:text; background-clip:text; color: transparent; }
.icon-btn { background: transparent; border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; }
.container { padding: 16px; display: grid; gap: 16px; }
.card { background: rgba(255,255,255,0.65); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
body.theme-dark .card, body.theme-neon .card { background: rgba(10,14,16,0.5); }
h1, h2 { margin: 6px 0 10px; }
.muted { color: var(--muted); }
.form .field { display: grid; gap: 6px; margin-bottom: 12px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; }
.btn { border: 1px solid var(--border); background: #fff; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.btn.primary { background: linear-gradient(90deg,var(--primary), #6ec1ff); box-shadow: 0 6px 18px rgba(11,132,255,0.25); }
.btn:active { transform: scale(0.98); transition: transform 120ms ease; }
.passphrase-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-top: 8px; }
.consent { background: #f8f8f8; border: 1px dashed var(--border); padding: 10px; border-radius: 10px; margin-top: 12px; }
.site-list { display: grid; gap: 10px; }
.site-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.site-item .row { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; font-size: 13px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.stat-value { font-size: 22px; font-weight: 700; }
.log { margin-top: 12px; display: grid; gap: 8px; max-height: 40vh; overflow: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.log-entry { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.modal { border: none; padding: 0; width: 90vw; max-width: 560px; }
.modal::backdrop { background: rgba(0,0,0,0.3); }
.modal .modal-content { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.modal .modal-content.center { text-align: center; }
.modal .modal-scroll { max-height: 60vh; overflow: auto; margin: 8px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .form .row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar { backdrop-filter: blur(6px); }
}
@media (max-width: 640px) { .topbar { backdrop-filter: blur(6px); } }