:root { color-scheme: light dark; --card: rgba(127,127,127,.22); --line: rgba(127,127,127,.35); }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: inherit; }
.wrap { max-width: 860px; margin: 0 auto; padding: 16px; display: grid; gap: 12px; }
header { display:flex; justify-content: space-between; align-items: center; gap: 12px; }
h1 { margin:0; font-size: 20px; }
.muted { opacity:.75; font-size: 12px; }
.card { border:1px solid var(--line); border-radius: 14px; padding: 12px; display:grid; gap: 10px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row.spread { justify-content: space-between; }
button, input, select { font: inherit; }
button { padding: 10px 12px; border-radius: 12px; border:1px solid var(--line); background: transparent; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background: rgba(127,127,127,.18); }
button.ghost { background: transparent; }
button.danger { border-color: rgba(255, 99, 99, .55); }
input, select { padding: 10px 12px; border-radius: 12px; border:1px solid var(--line); background: transparent; width: 100%; }
label { display:grid; gap:6px; font-size: 12px; opacity:.85; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

video { width: 100%; border-radius: 12px; background:#000; }
pre { margin:0; white-space: pre-wrap; word-break: break-word; }

.list { display:grid; gap: 10px; }
.totp { border:1px solid var(--line); border-radius: 14px; padding: 10px; display:grid; gap: 8px; }
.totp-top { display:flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.totp-title { font-weight: 650; font-size: 14px; }
.totp-meta { opacity:.75; font-size: 12px; margin-top: 2px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 30px; letter-spacing: 2px; }
.bar { height: 6px; border-radius: 999px; border:1px solid var(--line); overflow:hidden; }
.bar > div { height: 100%; width: 0%; background: rgba(127,127,127,.55); }
.actions { display:flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.handle { cursor: grab; padding: 6px 10px; border-radius: 10px; border:1px dashed var(--line); user-select:none; }
.dragging { opacity: .6; }

dialog { border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(720px, calc(100% - 24px)); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.modal { padding: 12px; display:grid; gap: 10px; }
.modal h2 { margin:0; font-size: 16px; }
.hr { height:1px; background: var(--line); }