:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0d1117; color: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 0%, #172b3d, transparent 40%), #0d1117; }
.topbar, main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.topbar { padding: 30px 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 5vw, 42px); letter-spacing: -.04em; }
.eyebrow { color: #59d7c4; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.user, .toolbar, .dialog-actions, .dialog-head { display: flex; align-items: center; gap: 12px; }
.toolbar { margin: 20px 0; }
button, .primary-button { border-radius: 12px; border: 0; padding: 11px 16px; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
.primary-button { background: #59d7c4; color: #071311; }
.ghost { color: #dce6ee; background: #1b2530; }
.danger { background: #742b35; color: #fff; margin-right: auto; }
.status-card, .link-card, dialog { background: rgba(20, 29, 39, .92); border: 1px solid #2b3b4a; box-shadow: 0 18px 60px rgba(0,0,0,.25); }
.status-card { border-radius: 18px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.status-card small { display: block; color: #91a2b2; margin-top: 3px; }
#sync-dot { width: 12px; height: 12px; border-radius: 50%; background: #e3ad4f; box-shadow: 0 0 0 5px rgba(227,173,79,.15); }
#sync-dot.ok { background: #59d78e; box-shadow: 0 0 0 5px rgba(89,215,142,.15); }
#sync-dot.error { background: #ef6876; box-shadow: 0 0 0 5px rgba(239,104,118,.15); }
.link-list { display: grid; gap: 12px; padding-bottom: 50px; }
.link-card { border-radius: 16px; padding: 18px; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(260px, 2fr) 232px; align-items: center; gap: 18px; }
/* Actions keep a fixed slot in every row and stay visible: a disabled control
   never collapses, so rows never reflow and buttons never move under the cursor. */
.actions { display: flex; gap: 8px; justify-content: flex-end; }
button[disabled] { opacity: .42; cursor: not-allowed; }
.path { color: #7ee9d8; font: 750 17px ui-monospace, SFMono-Regular, monospace; }
.target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9c7d3; }
.meta { color: #768898; font-size: 12px; margin-top: 6px; }
dialog { color: #f4f7fb; width: min(680px, calc(100% - 24px)); border-radius: 20px; padding: 0; }
dialog::backdrop { background: rgba(2,8,13,.82); backdrop-filter: blur(4px); }
#editor-form { padding: 24px; }
.dialog-head { justify-content: space-between; }
label { display: grid; gap: 7px; margin: 14px 0; color: #afbdc9; font-size: 13px; }
input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #344759; background: #0f1821; color: #fff; font: inherit; }
fieldset { border: 1px solid #2b3b4a; border-radius: 14px; margin: 20px 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge-preview { min-height: 60px; display: flex; align-items: center; margin: 10px 0; }
.badge-preview img { max-width: 100%; }
.dialog-actions { margin-top: 20px; justify-content: flex-end; }
.error { min-height: 20px; color: #ff8d98; }
.login-page { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(480px, 100%); padding: 38px; border-radius: 24px; background: #141d27; border: 1px solid #2b3b4a; }
.login-card p:not(.eyebrow) { color: #a8b8c5; margin: 20px 0 30px; }
@media (max-width: 700px) { .link-card { grid-template-columns: 1fr; gap: 8px; } .actions { justify-content: flex-start; } .grid { grid-template-columns: 1fr; } .topbar { align-items: flex-start; } }