:root{
  --bg:#e7e5da;--bg2:#d7dfd5;--panel:rgba(249,247,239,.88);--panel2:#f8f6ee;
  --line:#c8d0c7;--txt:#18232d;--muted:#62707a;--cyan:#1f726c;--violet:#b65338;
  --green:#2f765f;--red:#a83b42;--shadow:0 18px 45px rgba(30,47,49,.12);--r:18px;
}
*{box-sizing:border-box}
html,body,#root{min-height:100%}
body{
  color:var(--txt);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background:
    linear-gradient(90deg,rgba(24,35,45,.035) 1px,transparent 1px),
    linear-gradient(rgba(24,35,45,.035) 1px,transparent 1px),
    radial-gradient(circle at 82% 8%,rgba(182,83,56,.17),transparent 24rem),
    radial-gradient(circle at 7% 94%,rgba(31,114,108,.13),transparent 26rem),
    var(--bg);
  background-size:32px 32px,32px 32px,auto,auto,auto;
}
body:before,body:after,.shell:before,.shell:after{display:none!important}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.toggle:focus-visible{
  outline:3px solid rgba(182,83,56,.42);outline-offset:3px;
}
.shell{width:min(1440px,100%);padding:18px 22px 34px}
.glass{
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.login-wrap{padding:22px;background:linear-gradient(135deg,rgba(31,114,108,.08),transparent 45%)}
.login{width:min(480px,100%);padding:clamp(26px,5vw,42px);border-radius:26px}
.login:before,.card:before,.stat:before{display:none}
.brand{gap:13px}.orb{
  width:48px;height:48px;border-radius:14px;background:#1f726c;box-shadow:none;animation:none;
  position:relative;overflow:hidden;
}
.orb:before{content:"";position:absolute;inset:10px;border:2px solid #f5eddd;border-radius:50% 50% 50% 0;transform:rotate(-28deg)}
.orb:after{display:none}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em;color:#16242a}
h1{font-size:clamp(25px,4vw,33px)}h2{font-size:22px}.muted{color:var(--muted)}.hint{color:#586873}.hint strong{color:#1f5c58}
.field{margin:18px 0}.field label{color:#485862;font-size:10px;letter-spacing:.13em}
.input,select,textarea{
  border-color:#c3ccc3;background:#fffdf6;color:var(--txt);border-radius:10px;padding:12px 13px;
  box-shadow:inset 0 1px 2px rgba(30,47,49,.04);
}
.input:hover,select:hover,textarea:hover{border-color:#8eaaa2}
.input:focus,select:focus,textarea:focus{border-color:#1f726c;box-shadow:0 0 0 4px rgba(31,114,108,.13)}
textarea{min-height:112px}
.btn{
  min-height:42px;border-radius:10px;border-color:#b7c2b9;background:#f6f4eb;color:#1d3034;
  box-shadow:none;font-weight:800;letter-spacing:.01em;
}
.btn:before{display:none}.btn:hover{transform:translateY(-1px);background:#e9eee7;border-color:#719086;box-shadow:0 5px 13px rgba(30,47,49,.10)}
.primary{background:#1f726c;color:#f7f4e9;border-color:#1f726c;box-shadow:none;animation:none}
.primary:hover{background:#185d59;border-color:#185d59}.danger{background:#fff1ee;color:#8c3238;border-color:#e8bfba}.good{background:#e4f0e8;color:#245b48}
.topbar{height:auto;min-height:72px;margin-bottom:16px;padding:0 3px}.topbar>.btn{background:transparent}.layout{grid-template-columns:240px minmax(0,1fr);gap:16px}
.side{height:calc(100vh - 124px);padding:12px;border-radius:18px;background:#203239;border-color:#203239;box-shadow:0 18px 40px rgba(24,35,45,.17)}
.side:before{display:none}.nav{gap:4px}.nav button{color:#c9d5d2;border:1px solid transparent;border-radius:9px;padding:11px 10px;min-height:42px}
.nav button:before{display:none}.nav button:hover,.nav button.active{
  color:#fffaf0;background:#32655f;border-color:#46766e;box-shadow:none;transform:none;
}
.nav-icon{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:#e4b368}
.side-footer{color:#b7c8c4;border-color:#456158;line-height:1.55;margin-top:14px}.side-footer b{color:#f5e9cf}
.content{border-radius:18px;padding:clamp(18px,3vw,32px);background:rgba(249,247,239,.92)}
.content:before{display:none}.page-head{margin-bottom:25px}.page-head h2{margin-bottom:8px}.grid{gap:14px}.card{border-radius:14px;padding:22px;background:#fdfbf4;box-shadow:0 7px 18px rgba(30,47,49,.06)}.card:hover,.stat:hover{transform:none;border-color:#b9c7bf;box-shadow:0 7px 18px rgba(30,47,49,.06)}
.statgrid{gap:10px;margin:18px 0 22px}.stat{border-radius:13px;padding:16px;background:#fdfbf4;box-shadow:none;border-color:#cdd5cb}.stat:after{background:rgba(31,114,108,.08);filter:none}.stat b{font-family:Georgia,"Times New Roman",serif;font-size:22px;color:#1f5551}
.switch{padding:15px 0;border-color:#d9ded6}.switch b{font-size:14px;color:#26363b}.toggle{width:48px;height:27px;padding:0;appearance:none;background:#b8c1bb;border:1px solid #9daaa2}.toggle i{width:19px;height:19px;top:3px;left:3px;background:#fffdf6;box-shadow:0 1px 3px rgba(0,0,0,.2)}.toggle.on{background:#1f726c;border-color:#1f726c}.toggle.on i{left:24px}.section-chip,.pill{border-color:#c7d3ca;background:#edf2ea;color:#35645b;box-shadow:none}.notice{border-radius:10px;background:#edf4ef;border-color:#bdd8c8;color:#285b47}.error{background:#fff0ee;border-color:#e8c0bd;color:#8c3439}.success{background:#e7f3eb;border-color:#b8d9c3;color:#275f48}.dnsrow{align-items:center}.preview{border-radius:10px;background:#e9e7db;border-color:#c8d0c7}.actions{padding-top:5px;border-top:1px solid #d3d9d0}.mobile-overlay{background:rgba(20,34,38,.42);backdrop-filter:blur(2px)}
@media(max-width:800px){
  .shell{padding:10px 10px 24px}.topbar{min-height:60px}.topbar .brand .orb{width:40px;height:40px}.menu-btn{color:#1f726c;background:#f7f4eb!important;border-color:#c8d0c7}.side{top:68px;left:10px;bottom:10px;height:auto;border-radius:16px}.content{border-radius:16px;padding:18px}.card{padding:18px}.page-head{margin-bottom:19px}.topbar .btn{padding:9px 11px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Navigation stays reachable when the viewport is short, including landscape phones. */
:root{--brand-accent:#b6ef36}
.primary{background:var(--brand-accent);border-color:var(--brand-accent);color:#18232d}
.primary:hover{background:var(--brand-accent);border-color:var(--brand-accent);filter:brightness(.94)}
.nav button:hover,.nav button.active{background:color-mix(in srgb,var(--brand-accent) 22%,#203239);border-color:color-mix(in srgb,var(--brand-accent) 35%,#203239)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.toggle:focus-visible{outline-color:color-mix(in srgb,var(--brand-accent) 60%,#b65338)}
.brand-mark{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;
  overflow:hidden;background:#1f726c;border:1px solid rgba(255,255,255,.3);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:4px}
.brand-mark.logo-fallback:before{content:"";width:18px;height:18px;border:2px solid #f5eddd;border-radius:50% 50% 50% 0;transform:rotate(-28deg)}
.brand-mark.logo-fallback img{display:none}
.logo-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-upload label{display:inline-flex;align-items:center;justify-content:center}
.logo-upload input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.logo-upload .is-busy{opacity:.65;cursor:wait}
.logo-preview{height:190px;object-fit:contain;background:#e9e7db;padding:12px}
.side{
  height:calc(100vh - 124px);height:calc(100dvh - 124px);
  max-height:calc(100vh - 124px);max-height:calc(100dvh - 124px);
  min-height:0;overflow-y:auto!important;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
.nav{padding-bottom:4px}
.side-footer{padding-bottom:max(13px,env(safe-area-inset-bottom))}
.mobile-overlay{border:0;padding:0}
@media(max-width:800px){
  .brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  .side{
    top:68px;bottom:max(10px,env(safe-area-inset-bottom));
    height:auto!important;max-height:none!important;
    display:flex!important;flex-direction:column;
  }
  .side .nav{flex:0 0 auto}
  .side-footer{margin-top:auto}
  .mobile-overlay{display:block;position:fixed;inset:0;z-index:4;cursor:default}
  .side{z-index:5}
}
@media(max-width:800px) and (orientation:landscape){
  .shell{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .topbar{min-height:50px;margin-bottom:8px}
  .side{top:58px;bottom:max(8px,env(safe-area-inset-bottom))}
  .nav button{min-height:40px;padding-block:8px}
  .side-footer{font-size:10px;margin-top:8px}
}
@media(min-width:801px) and (max-height:620px){
  .shell{padding-top:12px;padding-bottom:12px}
  .topbar{min-height:58px;margin-bottom:10px}
  .side{top:12px;height:calc(100vh - 82px);height:calc(100dvh - 82px);max-height:calc(100vh - 82px);max-height:calc(100dvh - 82px)}
  .nav button{min-height:38px;padding-block:8px}
  .side-footer{font-size:10px}
}

/* Subtle motion never changes navigation geometry or hides scrollable items. */
@media(prefers-reduced-motion:no-preference){
  .page-head,.notice{animation:toxic-fade-in .3s ease-out both}
  .card,.stat{animation:toxic-fade-in .4s ease-out both}
  .stat:nth-child(2){animation-delay:.04s}
  .stat:nth-child(3){animation-delay:.08s}
  .stat:nth-child(4){animation-delay:.12s}
  .brand-mark{animation:toxic-brand-glow 5s ease-in-out infinite}
  .nav button{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
  .btn,.preview{transition:box-shadow .2s ease,filter .2s ease,transform .2s ease}
  .primary:hover{box-shadow:0 5px 18px color-mix(in srgb,var(--brand-accent) 22%,transparent)}
}
@keyframes toxic-fade-in{from{opacity:.4}to{opacity:1}}
@keyframes toxic-brand-glow{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 18px color-mix(in srgb,var(--brand-accent) 24%,transparent)}
}