/* DROR brand for the console. Light is the default theme; html.dark switches to the dark one.
   Page templates keep using the same variable names (--bg, --surface, --blue ...). */
:root{
  --ink:#15172b; --brand:#4c63ab;
  --bg:#f4f5f9; --surface:#ffffff; --surface2:#eef0f6; --line:#e2e5ee;
  --text:#15172b; --muted:#555c7a; --blue:#4c63ab; --blue-d:#3d5192; --tint:rgba(76,99,171,.10);
  --green:#1f7a45; --red:#a3262f; --red-d:#7f1d24; --yellow:#8a5a00; --on-blue:#ffffff;
  --console-bg:#15172b; --console-text:#e5e8f4;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html.dark{
  --bg:#0f1122; --surface:#15172b; --surface2:#1f2240; --line:#2c3054;
  --text:#eef0f8; --muted:#a9aec6; --blue:#9aa9dc; --blue-d:#b7c2e8; --tint:rgba(154,169,220,.14);
  --green:#7fd6a0; --red:#f2a3a8; --red-d:#f7c3c6; --yellow:#f2c96b; --on-blue:#15172b;
  --console-bg:#0b0d1a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:0 24px;height:60px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.topbar a{color:#d8dcef}
.topbar a:hover{color:#fff}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none!important}
.logo img{height:26px;display:block}
.logo span{font-size:11px;font-weight:700;letter-spacing:.14em;color:#9aa9dc;border:2px solid #9aa9dc;border-radius:999px;padding:0 8px;line-height:18px}
.topbar .spacer{flex:1}
.topbar .user{color:#a9aec6;font-size:13px}
.topbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:var(--on-blue);border:2px solid var(--blue);border-radius:999px;padding:7px 18px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--blue)}
.btn.ghost:hover{background:var(--tint);border-color:var(--blue)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
html.dark .btn.danger{color:#15172b}
.btn.danger:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.small{padding:3px 12px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:default}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--ink);padding:20px;display:block;color:var(--text);transition:border-color .15s,transform .15s}
html.dark .tile{border-top-color:var(--blue)}
.tile:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-1px)}
.tile h3{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.tile p{margin:0;color:var(--muted);font-size:12.5px}
.avatar{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;margin-bottom:12px;border-radius:50%}
.sq{width:9px;height:9px;display:inline-block;vertical-align:middle;border-radius:50%}
.sq.ok{background:var(--green)}
.sq.warn{background:var(--yellow)}
.sq.down{background:var(--red)}
.badge{display:inline-block;font-size:12px;font-weight:600;background:var(--surface2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);padding:20px 24px;margin-bottom:16px}
.panel h2{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--text);padding-top:10px;border-top:4px solid var(--ink)}
html.dark .panel h2{border-top-color:var(--blue)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{color:var(--muted);font-weight:600;font-size:12px;text-align:right;padding:9px 10px;border-bottom:2px solid var(--text);white-space:nowrap}
table.data td{padding:10px;border-bottom:1px solid var(--line)}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:var(--tint)}
input,select,textarea{background:var(--surface);border:2px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit;font-size:13.5px;padding:8px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--tint)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
textarea{width:100%;resize:vertical}
.msgs{max-width:1180px;margin:16px auto 0;padding:0 24px}
.msg{padding:11px 16px;margin-bottom:8px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue)}
.msg.success{border-inline-start-color:var(--green)}
.msg.error{border-inline-start-color:var(--red)}
pre.console{background:var(--console-bg);color:var(--console-text);border:1px solid var(--line);padding:14px;font-family:var(--mono);font-size:12px;line-height:1.55;overflow-x:auto;direction:ltr;text-align:left;white-space:pre-wrap;max-height:60vh;overflow-y:auto;margin:0}
.meter{height:6px;background:var(--surface2);overflow:hidden;border-radius:999px}
.meter i{display:block;height:100%;background:var(--blue);border-radius:999px}
.meter i.hot{background:var(--red)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--surface2);padding:16px 18px}
.stat .k{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:6px}
.stat .v{font-size:20px;font-weight:700;letter-spacing:-.02em}

/* project switcher + tool nav */
.switcher{position:relative}
.switcher summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:600;color:#fff}
.switcher summary:hover{background:rgba(255,255,255,.1)}
.switcher summary::-webkit-details-marker{display:none}
.switcher .menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);min-width:220px;z-index:100;box-shadow:0 12px 30px -12px rgba(21,23,43,.4)}
.switcher .menu a{display:block;padding:10px 14px;font-size:13px;color:var(--text)}
.switcher .menu a:hover{background:var(--tint);text-decoration:none}
.toolnav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:24px;padding-bottom:12px;border-bottom:4px solid var(--ink)}
html.dark .toolnav{border-bottom-color:var(--blue)}
.toolnav a{padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);border-radius:999px}
.toolnav a:hover{color:var(--text);background:var(--surface2);text-decoration:none}
.toolnav a.active{color:var(--on-blue);background:var(--blue)}

/* headings */
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.pagehead .sub{color:var(--muted);font-size:13px}
.empty{color:var(--muted);text-align:center;padding:28px;font-size:13.5px}
.pageintro{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue);padding:16px 20px;margin-bottom:18px}
.pageintro h1{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.pageintro p{margin:0;color:var(--muted);font-size:13.5px;max-width:74ch;line-height:1.6}
.statusbar{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:15px;font-weight:600;margin-bottom:16px;border:1px solid var(--line);background:var(--surface)}
.statusbar.ok{border-inline-start:6px solid var(--green)}
.statusbar.warn{border-inline-start:6px solid var(--yellow)}
.statusbar.bad{border-inline-start:6px solid var(--red)}
code.inline{background:var(--surface2);padding:1px 7px;font-family:var(--mono);font-size:12px;direction:ltr;display:inline-block;border-radius:6px}
label{color:var(--muted);font-size:13px}

/* hero blocks used by some pages (features, secrets, deploy ...) */
.dror-hero{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue);position:relative;overflow:hidden}
.dror-hero::after{content:"";position:absolute;width:90px;aspect-ratio:1;background:var(--blue);opacity:.14;border-radius:0 0 100% 0;top:0;left:0;pointer-events:none}

/* standalone pages: login + 403 */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr minmax(0,480px);background:var(--surface)}
.auth .art{background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:44px}
.auth .art::before{content:"";position:absolute;width:min(50vw,600px);aspect-ratio:1;background:var(--brand);border-radius:0 0 100% 0;top:0;left:0}
.auth .art::after{content:"";position:absolute;width:min(28vw,340px);aspect-ratio:1;border-radius:50%;border:clamp(28px,3.6vw,52px) solid #fff;right:-8%;top:18%}
.auth .art p{position:relative;z-index:1;color:#fff;font-size:clamp(34px,4.4vw,68px);font-weight:700;letter-spacing:-.04em;line-height:.95;margin:0}
.auth .art p span{color:#9aa9dc}
.auth .panel2{padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center;background:var(--surface)}
.auth .panel2 img{height:38px;align-self:flex-start;margin-bottom:30px}
.auth h1{margin:0 0 6px;font-size:30px;letter-spacing:-.03em}
.auth .lead{color:var(--muted);margin:0 0 24px}
.auth form{display:grid;gap:12px}
.auth input{width:100%;min-height:46px}
.auth .btn{min-height:48px;font-size:15px;margin-top:4px}
.auth .err{background:#fde6e8;color:#a3262f;border-inline-start:6px solid #a3262f;padding:10px 14px;font-size:13.5px;font-weight:600}
html.dark .auth .panel2 .logo-light{display:block}
.auth .logo-dark{display:block}.auth .logo-light{display:none}
html.dark .auth .logo-dark{display:none}

@media(max-width:820px){
  .wrap{padding:16px}
  .topbar{padding:0 14px;gap:12px;height:auto;min-height:56px;flex-wrap:wrap;padding-block:8px}
  .auth{grid-template-columns:1fr}.auth .art{min-height:180px}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}
.auth label{display:grid;gap:6px;font-weight:600;color:var(--text);font-size:14px}
/* links inside running text are underlined (not color-only) */
p a:not(.btn),li a:not(.btn),.pageintro a:not(.btn),.empty a:not(.btn){text-decoration:underline;text-underline-offset:2px}