/* portal stylesheet — matches portal.bugonia.org (live reference)
   Inter font, red brand color, shadcn-style card with 4px radius, very tight.
*/

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
html { font-family: 'JetBrains Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
@supports (font-variation-settings: normal) { html { font-family: 'JetBrains Mono', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } }

@font-face {
  font-family: 'Kabisat';
  src: url('/fonts/kabisat-demo.italic-tall.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root{
  --bg:#fcfcfc;
  --card:#ffffff;
  --muted:#f3f3f3;
  --muted-hover:#ededed;
  --border:#e2e2e2;
  --input:#e2e2e2;
  --foreground:#4a2c2a;
  --muted-foreground:#7a5c57;
  --primary:#141414;
  --primary-foreground:#fcfcfc;
  --brand:#8b0000;
  --brand-hover:#6b0000;
  --brand-soft:rgba(139,0,0,0.10);
  --link:var(--brand);
  --destructive:#e40014;
  --good:#2e7d32;
  --mid:#a16207;
  --bad:#b91c1c;
  --radius:4px;
  --scrim:rgba(20,20,20,0.45);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#fff;color:var(--foreground);
  font:12px/1.5 'JetBrains Mono','Inter',sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;
  min-height:calc(var(--vh, 100vh));display:flex;flex-direction:column;
  overflow-x:hidden;
  visibility:hidden;
}
body.is-ready{visibility:visible}
.shell,.menu-root,.foot,#modal-root,#toasts{position:relative;z-index:1}
::selection{background:color-mix(in oklch,var(--brand) 30%,transparent)}
:focus-visible{outline:1px solid var(--brand);outline-offset:2px;border-radius:2px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* ── brand ── */
.brand-word{font-family:'Kabisat';font-weight:normal;color:var(--brand);letter-spacing:0;line-height:1.4;text-align:center;overflow:visible;white-space:nowrap;max-width:100%;width:max-content;margin:0 auto;padding:.6rem 1.2rem;box-sizing:border-box}
.brand-word a{color:inherit;text-decoration:none;display:inline;position:relative}
.brand-word a:hover{color:inherit}
.brand-hero{font-size:clamp(26px,6.6vw,48px);margin:0;display:inline}

/* dot above the i (logo + tagline) */
.brand-word a.i-dot::before{content:"";position:absolute;left:50%;top:-0.18em;width:0.16em;height:0.16em;background:var(--brand);border-radius:50%;transform:translateX(-50%)}
.brand-word a.i-dot{padding-top:.05em}
/* strike through the t (logo + tagline) */
.brand-word a.t-cut::after{content:"";position:absolute;left:-0.05em;right:-0.05em;top:50%;height:0.06em;background:var(--brand);transform:translateY(-50%)}

/* tagline glyph marks: t-strike + i-dot */
.brand-tagline{font-family:'Kabisat',sans-serif;font-size:clamp(13px,3.4vw,18px);font-weight:normal;color:var(--brand);letter-spacing:.04em;line-height:1.2;margin-top:8px;opacity:.75;white-space:nowrap;text-align:center}
.brand-tagline .t-cut{position:relative;display:inline-block}
.brand-tagline .t-cut::after{content:"";position:absolute;left:-0.05em;right:-0.05em;top:50%;height:0.07em;background:var(--brand);transform:translateY(-50%);border-radius:1px}
.brand-tagline .i-dot{position:relative;display:inline-block}
.brand-tagline .i-dot::before{content:"";position:absolute;left:50%;top:-0.32em;width:0.18em;height:0.18em;background:var(--brand);border-radius:50%;transform:translateX(-50%)}

.brand-login{font-size:clamp(40px,10vw,52px);font-family:'Kabisat';line-height:1.4;overflow:visible;white-space:nowrap;text-align:center;width:max-content;margin:0 auto;padding:.6rem 1.2rem;box-sizing:border-box}

/* ── home landing ── */
.home-centered{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:0;overflow:visible;width:100%}
.brand-tagline{font-family:'Kabisat',sans-serif;font-size:clamp(13px,3.4vw,18px);font-weight:normal;color:var(--brand);letter-spacing:.04em;line-height:1.2;margin-top:8px;opacity:.75;white-space:nowrap;text-align:center}
.login-link{font:14px/1 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--foreground);text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:0}
.login-link:hover{color:var(--brand)}

/* ── floating account menu ── */
.menu-root{position:fixed;top:14px;right:14px;z-index:120}
.user-pill{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--muted-foreground);font:11px 'JetBrains Mono','Inter',sans-serif;background:var(--card);transition:background .15s,color .15s,border-color .15s}
.user-pill:hover{background:var(--muted);color:var(--foreground)}
.av-sm{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:9px 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:#fff;background:var(--brand);overflow:hidden;flex-shrink:0}
.nav-btn{font:11px 'JetBrains Mono','Inter',sans-serif;font-weight:400;color:var(--muted-foreground);background:none;border:none;cursor:pointer;padding:4px 8px;transition:color .15s,background .15s;text-decoration:none;line-height:1.4;display:inline-flex;align-items:center;height:24px;border-radius:4px}
.nav-btn:hover{color:var(--foreground);background:var(--muted)}
.nav-btn.active{color:var(--foreground);background:var(--muted)}
.hidden{display:none!important}

/* ── main shell ── */
.shell{flex:1;width:100%;max-width:min(88%,460px);margin:0 auto;padding:2.5rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1rem}

/* ── hero / heading ── */
.hero{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
.hero h1{font:13px/1.4 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--foreground);letter-spacing:-.01em;margin:0}
.hero p{font:12px/1.6 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);letter-spacing:-.005em}
.section-h{font:11px/1 'JetBrains Mono','Inter',sans-serif;font-weight:500;letter-spacing:0;color:var(--muted-foreground);margin-top:1.25rem;margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem;border-bottom:1px solid var(--border);text-transform:none}
.section-h .hint{font:11px 'JetBrains Mono','Inter',sans-serif;font-weight:400;color:var(--muted-foreground);opacity:.7}

/* ── service list (cards) ── */
.svc-list{display:flex;flex-direction:column;gap:6px}
.svc-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:4px;background:var(--card);transition:background .12s,border-color .12s;cursor:pointer;text-decoration:none;color:inherit;position:relative}
.svc-card:hover{background:var(--muted);border-color:color-mix(in oklch,var(--border) 60%,var(--muted-foreground))}
.svc-card:active{transform:translateY(0.5px)}
.svc-card.off{opacity:.5;cursor:not-allowed}
.svc-icon{font-size:14px;color:var(--muted-foreground);width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.svc-icon svg{width:14px;height:14px;stroke-width:1.75}
.svc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svc-name{font:13px/1.2 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--brand);letter-spacing:-.01em}
.svc-desc{font:11px/1.3 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-arrow{color:var(--muted-foreground);opacity:.5;transition:color .15s,opacity .15s;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px}
.svc-arrow svg{width:12px;height:12px;stroke-width:2}
.svc-card:hover .svc-arrow{color:var(--brand);opacity:1}

/* ── empty / hint ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;font:11px/1.6 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);text-align:center;gap:6px;padding:24px 12px;border:1px dashed var(--border);border-radius:4px}
.empty strong{font-weight:500;color:var(--foreground)}
.hint{font:11px/1.5 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);letter-spacing:-.005em}

/* ── buttons ── */
.btn{font:11px/1 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--muted-foreground);background:none;border:1px solid var(--border);cursor:pointer;padding:6px 12px;transition:all .12s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:4px;height:30px;letter-spacing:-.005em}
.btn:hover{color:var(--foreground);background:var(--muted)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:color-mix(in oklch,var(--primary) 90%,black);color:var(--primary-foreground);border-color:color-mix(in oklch,var(--primary) 90%,black)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.btn-danger{color:var(--destructive);border-color:color-mix(in oklch,var(--destructive) 30%,transparent)}
.btn-danger:hover{background:var(--destructive);color:#fff;border-color:var(--destructive)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--muted);border-color:transparent}
.btn-sm{height:24px;padding:3px 8px;font-size:10px}
.btn-lg{height:36px;padding:8px 16px;font-size:12px}
.btn .ic{width:13px;height:13px;stroke-width:2}

/* ── login form ── */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 24px);padding:24px}
.login-card{width:280px;max-width:100%;display:flex;flex-direction:column;gap:14px}
.login-card .sub{font:12px/1.6 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);margin-top:-4px}
.login-card label{font:10px/1 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--muted-foreground);letter-spacing:0;display:flex;flex-direction:column;gap:5px}
.login-card input{font:13px/1.4 'JetBrains Mono','Inter',sans-serif;font-weight:400;padding:7px 10px;border:1px solid var(--input);color:var(--foreground);background:var(--card);border-radius:4px;transition:border-color .15s,box-shadow .15s;width:100%}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.login-card .btn{width:100%;justify-content:center;height:34px;font-size:12px}
.login-card .err{font:11px 'JetBrains Mono','Inter',sans-serif;color:var(--destructive);text-align:center;min-height:14px}

/* totp enroll */
.totp-enroll{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.totp-enroll .qr{display:flex;justify-content:center;padding:16px;background:#fff;border:1px solid var(--border);border-radius:4px}
.totp-enroll .qr svg{width:180px;height:180px;display:block}
.totp-enroll .secret{font:10px 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);background:var(--muted);padding:8px 10px;border-radius:4px;text-align:center;word-break:break-all}

/* ── modal ── */
.modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:72px 16px 32px;overflow-y:auto}
.modal.hidden{display:none}
.modal-box{background:var(--card);border:1px solid var(--border);width:480px;max-width:100%;max-height:calc(100vh - 104px);overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.18);border-radius:6px}
.modal-sm{width:360px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.modal-head h2{font:13px/1.4 'JetBrains Mono','Inter',sans-serif;font-weight:500;letter-spacing:-.01em}
.modal-x{font:18px/1 'JetBrains Mono','Inter',sans-serif;color:var(--muted-foreground);background:none;border:none;cursor:pointer;padding:2px 8px;transition:color .15s;border-radius:4px}
.modal-x:hover{color:var(--foreground);background:var(--muted)}
.modal-box form{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.modal-box label{font:10px/1 'JetBrains Mono','Inter',sans-serif;font-weight:500;color:var(--muted-foreground);display:flex;flex-direction:column;gap:5px;letter-spacing:0}
.modal-box input,.modal-box select,.modal-box textarea{font:12px/1.4 'JetBrains Mono','Inter',sans-serif;font-weight:400;padding:6px 10px;border:1px solid var(--input);color:var(--foreground);background:var(--card);border-radius:4px;width:100%;font-family:inherit}
.modal-box textarea{resize:vertical;min-height:60px}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.modal-actions{display:flex;gap:8px;align-items:center;padding-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spacer{flex:1}

/* ── tables (admin) ── */
.t-table{width:100%;border-collapse:collapse;font:11px/1.5 'JetBrains Mono','Inter',sans-serif;color:var(--foreground)}
.t-table thead th{font-size:10px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted-foreground);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.t-table td{padding:8px 10px;vertical-align:middle;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-table tr:last-child td{border-bottom:none}
.t-table tr:hover td{background:var(--muted)}
.t-table .col-when{width:120px}
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:4px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.page-head h1{font:15px/1.4 'JetBrains Mono','Inter',sans-serif;font-weight:500;letter-spacing:-.01em;margin:0}

/* dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,0.12);z-index:120;padding:4px;display:flex;flex-direction:column;gap:1px}
.dropdown-menu .dd-item{padding:7px 10px;font:11px 'JetBrains Mono','Inter',sans-serif;color:var(--foreground);cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:8px;text-decoration:none;background:none;border:none;width:100%;text-align:left}
.dropdown-menu .dd-item:hover{background:var(--muted)}
.dropdown-menu .dd-item .key{margin-left:auto;color:var(--muted-foreground);font-size:10px;letter-spacing:.02em}
.dropdown-menu .dd-item.danger{color:var(--destructive)}
.dropdown-menu .dd-sep{height:1px;background:var(--border);margin:4px 2px}

/* toasts */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--border);color:var(--foreground);font:11px 'JetBrains Mono','Inter',sans-serif;padding:8px 14px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.12);animation:toast-in .2s ease;pointer-events:auto}
.toast.err{border-color:var(--destructive);color:var(--destructive)}
.toast.ok{border-color:var(--good);color:var(--good)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── footer ── */
.foot{display:flex;align-items:center;justify-content:center;padding:4px 1rem;flex-shrink:0;background:#000;font:10px/1 'JetBrains Mono','Inter',sans-serif;color:#a88d8a;letter-spacing:0;min-height:18px}
.foot a{color:var(--muted-foreground);text-decoration:none}
.foot a:hover{color:var(--foreground);text-decoration:underline}

/* responsive */
@media (max-width:480px){
  .shell{padding:1.5rem 1rem 3rem}
  .modal-box .row2{grid-template-columns:1fr}
}
body,.btn,.modal-box,.svc-card,.login-card input,.user-pill,.dropdown-menu,.t-table td,.t-table th{transition:background-color .2s ease,color .2s ease,border-color .2s ease}