:root{--bg:#04060b;--panel:#0b101a;--panel2:#101622;--text:#f4f6fb;--muted:#7f899c;--muted2:#5e697d;--line:rgba(255,255,255,.09);--line2:rgba(143,153,255,.28);--accent:#7f8cff;--accent2:#b06cff;--green:#68dfa1;--shadow:0 28px 90px rgba(0,0,0,.38)}
:root[data-theme=light]{--bg:#f5f7fb;--panel:#fff;--panel2:#f1f4f9;--text:#101522;--muted:#5c6576;--muted2:#7a8393;--line:rgba(25,35,55,.1);--line2:rgba(84,95,225,.25);--accent:#5d68e9;--accent2:#8c5be0;--green:#178c5a;--shadow:0 25px 70px rgba(40,50,80,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:12px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:.3s}button,input,textarea,select{font:inherit}button,a{color:inherit}a{text-decoration:none}.brand{display:flex;align-items:center;gap:9px;font-weight:720;letter-spacing:-.03em}.brand>span:last-child span{color:var(--muted2)}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line2);background:linear-gradient(145deg,rgba(127,140,255,.15),rgba(176,108,255,.08))}.brand-mark img{width:22px;height:22px}.kicker,.side-title{font-size:8px;letter-spacing:.16em;font-weight:760;color:var(--muted2)}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:220px 1fr;background:radial-gradient(circle at 70% 0,rgba(110,125,255,.08),transparent 28%),var(--bg)}aside{border-right:1px solid var(--line);padding:20px 13px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px)}aside .brand{padding:7px 9px 28px}.side-title{padding:0 10px 8px}aside>a:not(.brand){display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;color:var(--muted);transition:.18s}aside>a:not(.brand):hover,aside>a.active{background:var(--panel2);color:var(--text);box-shadow:inset 2px 0 var(--accent)}aside>a:not(.brand):first-letter{color:var(--accent)}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:17px 10px;color:var(--muted2);font-size:8px}.side-bottom b{display:flex;align-items:center;gap:6px;color:var(--green);font-size:10px;margin:5px 0 15px}.side-bottom b i,.green-dot:before{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block}.side-bottom a{color:var(--muted)}main{width:min(1180px,100%);padding:34px 40px;margin:auto}header{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}header h1{font-size:32px;letter-spacing:-.055em;margin:6px 0 2px}header p{margin:0;color:var(--muted);font-size:10px}.header-actions{display:flex;align-items:center;gap:7px}button,.view-public{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;transition:.18s}.view-public{display:inline-flex;align-items:center}.header-actions button:hover,.view-public:hover{border-color:var(--line2);color:var(--text);transform:translateY(-1px)}button.primary{border:0;background:linear-gradient(135deg,#6f7fff,#9a66e8);color:#fff;box-shadow:0 10px 26px rgba(103,117,255,.18)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stats>div{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.stats>div:after{content:"";position:absolute;right:-20px;bottom:-28px;width:80px;height:80px;border-radius:50%;background:rgba(127,140,255,.06);filter:blur(5px)}.stats span{display:block;color:var(--muted2);font-size:8px;letter-spacing:.12em}.stats b{display:block;font-size:24px;margin:7px 0 1px;letter-spacing:-.04em}.stats small{color:var(--muted2);font-size:9px}.green{color:var(--green)}.panel{margin-top:9px;padding:19px;background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 35px rgba(0,0,0,.06)}.panel-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.panel h2{font-size:16px;letter-spacing:-.035em;margin:5px 0 0}.table{border:1px solid var(--line);border-radius:9px;overflow:hidden}.row{display:grid;grid-template-columns:1.7fr 1fr 1fr 70px;gap:12px;align-items:center;padding:11px 12px;border-top:1px solid var(--line);color:var(--muted)}.row:first-child{border-top:0}.row b{color:var(--text);font-weight:600}.row em{font-style:normal;color:var(--green);font-size:9px}.row.head{background:var(--panel2);color:var(--muted2);font-size:8px;letter-spacing:.12em}.edit{padding:5px 9px;font-size:9px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dashboard-grid .panel{height:100%}label{display:block;color:var(--muted);font-size:9px;margin:12px 0}input,textarea,select{display:block;width:100%;margin-top:5px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;outline:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}textarea{height:94px;resize:vertical}.full{width:100%;margin-top:4px}.hint,.status{color:var(--muted2);font-size:9px;line-height:1.6}.draft-state,.adapter-badge{font-size:8px;color:var(--muted2);border:1px solid var(--line);padding:5px 8px;border-radius:999px}.adapter-badge{color:var(--green);border-color:rgba(104,223,161,.2)}.storage-top{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.storage-top b{color:var(--text)}.meter{height:6px;border-radius:999px;background:var(--panel2);margin:12px 0 7px;overflow:hidden}.meter i{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:inherit}.storage small{color:var(--muted2);font-size:8px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.mini-stats div{border:1px solid var(--line);border-radius:9px;padding:12px}.mini-stats b{display:block;font-size:17px}.mini-stats span{font-size:8px;color:var(--muted2)}.green-dot{display:flex;align-items:center;gap:6px;color:var(--green);font-size:8px}.api-box{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.api-box code{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:#aab2c2;font-size:9px}.api-box code b{color:var(--accent);font-weight:700;margin-right:5px}
.auth-page{min-height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--bg);position:relative}.auth-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 .7px,transparent .9px);background-size:90px 90px;opacity:.22}.auth-nebula{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(100,115,255,.13),transparent 65%);filter:blur(20px);top:-300px;left:50%;transform:translateX(-50%)}.auth-layout{width:min(1050px,calc(100% - 34px));display:grid;grid-template-columns:1fr 410px;gap:60px;align-items:center;position:relative;z-index:2}.auth-intro .brand{display:inline-flex}.intro-copy{margin-top:100px}.intro-copy h1{font-size:64px;line-height:.95;letter-spacing:-.065em;margin:16px 0 18px}.intro-copy h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}.intro-copy p{max-width:420px;color:var(--muted);font-size:13px}.system-line{display:flex;align-items:center;gap:8px;margin-top:90px;color:var(--muted2);font-size:8px;letter-spacing:.1em}.system-line i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.system-line b{color:var(--green);font-size:8px}.login-card{position:relative;padding:28px;border:1px solid var(--line2);border-radius:22px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(24px);box-shadow:var(--shadow);overflow:hidden}.login-card:after{content:"";position:absolute;width:240px;height:240px;right:-160px;bottom:-170px;border:1px solid rgba(127,140,255,.14);border-radius:50%}.login-orbit{height:95px;position:relative;display:grid;place-items:center;margin:-12px 0 8px}.login-planet{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#dce0ff,#707cff 35%,#1b2348 75%);box-shadow:0 0 50px rgba(100,115,255,.32)}.login-planet img{width:30px}.login-orbit i{position:absolute;width:140px;height:48px;border:1px solid rgba(145,155,255,.18);border-radius:50%;transform:rotate(-18deg)}.login-orbit i:last-child{width:170px;height:80px;transform:rotate(34deg);border-color:rgba(176,108,255,.14)}.login-head h2{font-size:23px;letter-spacing:-.045em;margin:6px 0}.login-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}.field{position:relative}.field>span{position:absolute;left:11px;top:10px;color:var(--muted2);font-size:12px}.field input{padding-left:33px;padding-right:38px}.field button{position:absolute;right:5px;top:5px;border:0;background:transparent;padding:6px;color:var(--muted2)}.login-options{display:flex;align-items:center;justify-content:space-between;color:var(--muted2);font-size:8px;margin:4px 0 15px}.check{display:flex;align-items:center;gap:6px;margin:0}.check input{width:auto;margin:0;accent-color:var(--accent)}.access-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:0;border-radius:9px;background:linear-gradient(135deg,#6879ff,#9c63e8);color:white;cursor:pointer;font-weight:700;box-shadow:0 12px 28px rgba(103,117,255,.2)}.access-btn:disabled{opacity:.65}.secure-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted2);font-size:8px;text-align:center}.back{display:block;margin-top:15px;text-align:center;color:var(--muted);font-size:9px}.back:hover{color:var(--text)}
/* CMS dashboard extensions (base) */
.admin-header,.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.admin-header{margin-bottom:32px}.admin-header h1{margin:0}.admin-tabs{display:flex;gap:8px;overflow:auto;padding:6px;margin-bottom:28px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.tab{white-space:nowrap}.tab.active{background:var(--panel2);color:var(--text);border-color:var(--line2);box-shadow:inset 0 -2px var(--accent)}.admin-section{display:none}.admin-section.active{display:block}.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:18px}.stat-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.stat-card strong{display:block;font-size:24px;margin-top:7px}.content-list{display:grid;gap:8px;margin-top:16px}.content-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.content-card h3{margin:0 0 4px;font-size:14px}.content-meta{color:var(--muted2);font-size:9px}.content-actions{display:flex;gap:6px;flex-shrink:0}.button-secondary{background:var(--panel2)}.editor-dialog{width:min(680px,calc(100% - 24px));border:1px solid var(--line2);border-radius:20px;padding:0;background:var(--bg);color:var(--text);box-shadow:var(--shadow)}.editor-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.editor-card{display:grid;gap:14px;padding:22px}.editor-card label{display:block;color:var(--muted);font-size:9px;margin:0}.editor-card input,.editor-card textarea,.editor-card select{margin-top:5px}.form-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:3px}.icon-button{padding:5px 10px;font-size:20px;line-height:1}

/* Mobile form polish (base) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}

/* =========================================================
   MOBILE LOGIN — single responsive system

   Two tiers:
   - Tablet (601–900px): the two-column desktop layout stacks
     into one column. Plenty of room, so the page may still
     scroll and the artwork stays.
   - Phone (<=600px, the 320–430px target): a dedicated compact
     composition. The page is pinned to the viewport height
     (100svh, no scroll) and every element is sized down until
     the login card and its button are guaranteed to fit,
     artwork removed entirely.
   Desktop (>900px) uses only the rules above this section.
   ========================================================= */
@media(max-width:900px){
  .auth-page{
    min-height:100svh;
    padding:calc(18px + env(safe-area-inset-top)) env(safe-area-inset-right) calc(30px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }
  .auth-layout{grid-template-columns:1fr;width:min(calc(100% - 24px),460px);gap:22px}
  .auth-intro{text-align:center}
  .auth-intro .intro-copy p{margin-inline:auto}
  .intro-copy{margin-top:30px}
  .intro-copy h1{font-size:clamp(44px,12vw,58px)}
  .system-line{justify-content:center;margin-top:22px;flex-wrap:wrap}
  .login-card{margin-top:5px;padding:22px;border-radius:18px}
  .field input,.field button{font-size:16px}
}

@media(max-width:600px){
  html,body{overflow-x:hidden}

  .auth-page{
    min-height:100svh;
    height:100svh;
    max-height:100svh;
    overflow:hidden;
    display:grid;
    place-items:center;
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(12px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
  }
  /* No giant decorative artwork on small screens */
  .auth-stars,.auth-nebula{display:none}

  .auth-layout{
    width:100%;
    max-width:390px;
    max-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  /* Compact intro: kicker + headline only, no paragraph/status line */
  .auth-intro{text-align:center;min-width:0}
  .auth-intro .brand{justify-content:center;gap:7px;font-size:11px}
  .auth-intro .brand-mark{width:28px;height:28px;border-radius:9px}
  .auth-intro .brand-mark img{width:18px;height:18px}
  .intro-copy{margin-top:4px}
  .intro-copy .kicker{font-size:6.5px}
  .intro-copy h1{font-size:clamp(26px,7.5vw,32px);line-height:.95;letter-spacing:-.06em;margin:6px 0 0}
  .intro-copy p,.system-line{display:none}

  /* Login card: no excessive empty space, sized to its content */
  .login-card{
    width:100%;
    max-width:360px;
    padding:16px 16px 13px;
    border-radius:16px;
    box-shadow:0 18px 55px rgba(0,0,0,.30);
  }
  .login-orbit{height:40px;margin:-4px 0 2px}
  .login-planet{width:38px;height:38px}
  .login-planet img{width:19px}
  .login-orbit i{width:80px;height:28px}
  .login-orbit i:last-child{width:98px;height:44px}

  .login-head .kicker{font-size:6.5px}
  .login-head h2{font-size:18px;line-height:1.05;margin:4px 0 2px}
  .login-head p{display:none}

  .login-card form label{font-size:8px;margin:6px 0}
  /* 16px minimum so iOS Safari never zooms on focus */
  .field input{
    min-height:40px;
    padding:8px 34px 8px 31px;
    margin-top:4px;
    font-size:16px;
    line-height:1.15;
    border-radius:8px;
  }
  .field>span{left:10px;top:10px;font-size:10px}
  .field button{right:3px;top:3px;min-width:34px;min-height:34px;padding:4px;font-size:10px}

  .login-options{margin:4px 0 7px;font-size:7px}
  .check{font-size:7px}
  .check input{min-height:16px;width:16px}

  .access-btn{min-height:44px;padding:9px 12px;border-radius:8px;font-size:10px}

  /* Secondary chrome that isn't essential to signing in */
  .secure-note,.back{display:none}
  .status{min-height:0;margin:4px 0 0;font-size:8px}
}

/* Very short phones (e.g. small devices in landscape, or older
   compact phones): compress once more, never scroll. */
@media (max-width:600px) and (max-height:700px){
  .auth-page{
    padding-top:calc(7px + env(safe-area-inset-top));
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
  }
  .intro-copy{margin-top:0}
  .intro-copy h1{font-size:24px}
  .login-card{padding:10px 13px}
  .login-orbit{height:32px;margin:-2px 0 1px}
  .login-planet{width:32px;height:32px}
  .login-planet img{width:16px}
  .login-card form label{margin:3px 0}
  .field input{min-height:37px}
  .login-options{margin:2px 0 5px}
  .access-btn{min-height:40px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Digital Warehouse: keep the page compact while allowing the link collection to grow. */
.links-grid,
.links-grid-container,
.links-list {
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Compact Archive cards on phones. */
@media (max-width: 600px) {
  .archive-grid,
  .archive-list,
  .links-grid,
  .links-grid-container,
  .links-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 58vh;
    padding-right: 2px;
  }

  .archive-card,
  .archive-item {
    min-width: 0;
    padding: 9px;
    border-radius: 12px;
  }

  .archive-card img,
  .archive-item img {
    max-height: 72px;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* iPhone notch / Dynamic Island / home-indicator safe areas. */
html {
  min-height: 100%;
  background: var(--bg, #08090d);
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media (max-width: 600px) {
  header,
  .navbar,
  .nav,
  .site-header {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  main,
  .page,
  .container {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}


/* Andova premium scrollbars */
:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 120, 255, .72) transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 120, 255, .72) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(178, 145, 255, .9), rgba(105, 78, 220, .82));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 12px rgba(120, 85, 255, .18);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(196, 168, 255, .98), rgba(122, 92, 235, .94));
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Compact internal warehouse/archive scrollers */
.links-grid,
.links-grid-container,
.links-list,
.archive-grid,
.archive-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 120, 255, .72) transparent;
}

.links-grid::-webkit-scrollbar,
.links-grid-container::-webkit-scrollbar,
.links-list::-webkit-scrollbar,
.archive-grid::-webkit-scrollbar,
.archive-list::-webkit-scrollbar {
  width: 7px;
}

.links-grid::-webkit-scrollbar-thumb,
.links-grid-container::-webkit-scrollbar-thumb,
.links-list::-webkit-scrollbar-thumb,
.archive-grid::-webkit-scrollbar-thumb,
.archive-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(190, 160, 255, .92), rgba(105, 78, 220, .84));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (prefers-color-scheme: light) {
  :root {
    scrollbar-color: rgba(105, 78, 220, .58) transparent;
  }

  * {
    scrollbar-color: rgba(105, 78, 220, .58) transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(142, 108, 235, .78), rgba(92, 66, 195, .68));
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 10px rgba(90, 65, 190, .12);
  }
}



/* FINAL MOBILE ORBIT / ZOOM FIX */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  zoom: 1 !important;
}
body {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: hidden !important;
  transform: none !important;
  zoom: 1 !important;
}
@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
  }

  /* Admin button: icon-first, no text/arrow clutter on small screens */
  .admin-button,
  a[href*="/admin"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 42px;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border-radius: 13px;
    font-size: 0 !important;
  }
  .admin-button::after,
  .admin-button span,
  a[href*="/admin"]::after,
  a[href*="/admin"] span {
    font-size: 0 !important;
  }
  .admin-button svg,
  a[href*="/admin"] svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Full-bleed Useful Orbit: the entire card is the touch target. */
  .useful-orbit,
  .orbit-viewport,
  .orbit-track-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y;
  }

  .orbit-track {
    display: flex !important;
    width: max-content !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 240ms cubic-bezier(.22,.7,.25,1);
    will-change: transform;
  }

  .orbit-card {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .orbit-card * {
    touch-action: pan-y;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .orbit-card {
    flex-basis: 50vw !important;
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
  }
}

/* Fancy compact Admin vector icon */
.admin-button .admin-icon,
.admin-button svg,
a[href*="/admin"] .admin-icon,
a[href*="/admin"] svg {
  color: currentColor;
  filter: drop-shadow(0 2px 7px rgba(130, 90, 240, .22));
}



/* FINAL TONIGHT TUNES */
@media (max-width: 900px) {
  /* Butter-smooth Useful Orbit */
  .useful-orbit,
  .orbit-viewport,
  .orbit-track-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .orbit-track {
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1) !important;
    will-change: transform;
  }
  .orbit-card {
    touch-action: pan-y;
    will-change: transform;
  }

  /* Admin pill: explicit text, dark/light friendly */
  .admin-button,
  a[href*="/admin"] {
    width: auto !important;
    min-width: 72px !important;
    height: 38px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: -.01em;
    color: var(--text, #fff) !important;
    background: color-mix(in srgb, var(--surface, #15161c) 92%, #8b6cff 8%) !important;
    border: 1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent) !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .admin-button:hover,
  a[href*="/admin"]:hover {
    border-color: color-mix(in srgb, #9b7cff 45%, transparent) !important;
  }
  .admin-button svg,
  a[href*="/admin"] svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Theme reveal: keep the origin attached to the logo, not the wordmark. */
  .theme-reveal,
  .theme-transition-origin {
    transform-origin: center center !important;
  }
}

/* Light-mode Admin pill */
[data-theme="light"] .admin-button,
[data-theme="light"] a[href*="/admin"] {
  color: #17131f !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(45,35,70,.12) !important;
  box-shadow: 0 5px 18px rgba(45,35,70,.10);
}



/* Final Admin pill label fix */
@media (max-width: 900px) {
  .admin-button,
  a[href*="/admin"] {
    color: var(--text, #ffffff) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
  }

  .admin-button::after,
  a[href*="/admin"]::after {
    content: "Admin" !important;
    display: inline !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: currentColor !important;
  }

  .admin-button span,
  a[href*="/admin"] span {
    display: inline !important;
    font-size: 13px !important;
    color: currentColor !important;
  }
}

[data-theme="light"] .admin-button,
[data-theme="light"] a[href*="/admin"] {
  color: #17131f !important;
}

[data-theme="dark"] .admin-button,
[data-theme="dark"] a[href*="/admin"] {
  color: #ffffff !important;
}


/* =========================================================
   ANDOVA LOGIN — FINAL PREMIUM COMPACT SYSTEM
   Scoped to .auth-page so the CMS remains untouched.
   ========================================================= */
.auth-page{
  min-height:100svh;
  width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  background:var(--bg);
}
.auth-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.auth-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.auth-glow-a{width:min(58vw,760px);height:min(58vw,760px);left:50%;top:-45%;transform:translateX(-50%);background:radial-gradient(circle,rgba(104,122,255,.16),transparent 68%)}
.auth-glow-b{width:420px;height:420px;right:-180px;bottom:-220px;background:radial-gradient(circle,rgba(166,101,232,.09),transparent 68%)}
.auth-grid{
  position:absolute;inset:-20%;
  opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);
}
.auth-dust{
  position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.2px);
  background-size:150px 150px;
  mask-image:radial-gradient(circle at 50% 35%,#000,transparent 72%);
}
[data-theme="light"] .auth-grid{opacity:.25;background-image:linear-gradient(rgba(20,30,55,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,55,.055) 1px,transparent 1px)}
[data-theme="light"] .auth-dust{opacity:.10;background-image:radial-gradient(circle,rgba(35,45,70,.7) 0 1px,transparent 1.2px)}

.auth-shell{
  width:min(100% - 32px, 390px);
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:2;
}
.auth-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  font-size:13px;
  font-weight:720;
  letter-spacing:-.035em;
}
.auth-brand>span:last-child span{color:var(--muted2)}
.auth-brand-mark{
  width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--line2);
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.auth-brand-mark img{width:19px;height:19px}

.login-card{
  width:100%;
  padding:23px;
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  border-radius:20px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(28px) saturate(125%);
  -webkit-backdrop-filter:blur(28px) saturate(125%);
  box-shadow:0 30px 90px rgba(0,0,0,.30),0 1px 0 rgba(255,255,255,.045) inset;
  position:relative;
  overflow:hidden;
}
.login-card:before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.login-card:after{
  content:"";position:absolute;width:220px;height:220px;right:-175px;bottom:-175px;
  border:1px solid rgba(127,140,255,.10);border-radius:50%;
  pointer-events:none;
}
.login-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}
.auth-kicker{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted2);font-size:7px;font-weight:760;letter-spacing:.15em;
}
.auth-kicker i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.auth-secure{color:var(--muted2);font-size:7px}

.login-head{margin-bottom:20px}
.login-head h1{font-size:28px;line-height:1;letter-spacing:-.055em;margin:0 0 7px}
.login-head p{font-size:10px;color:var(--muted);margin:0}

.login-label{display:block;margin:0 0 12px;color:var(--muted);font-size:8px;font-weight:600}
.field{position:relative;margin-top:5px}
.field>svg{
  position:absolute;left:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);
  fill:none;stroke:var(--muted2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.field input{
  width:100%;height:42px;margin:0;
  padding:0 12px 0 34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--panel2) 88%,transparent);
  color:var(--text);
  outline:none;
  font-size:13px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input::placeholder{color:var(--muted2)}
.field input:focus{
  border-color:color-mix(in srgb,var(--accent) 58%,transparent);
  box-shadow:0 0 0 3px rgba(127,140,255,.09);
  background:var(--panel2);
}
.password-toggle{
  position:absolute;right:5px;top:5px;
  height:32px;padding:0 8px;border:0;border-radius:7px;
  background:transparent;color:var(--muted2);font-size:8px;font-weight:650;
}
.password-toggle:hover{color:var(--text);background:rgba(255,255,255,.045)}
.login-options{display:flex;align-items:center;justify-content:space-between;margin:1px 0 14px;color:var(--muted2);font-size:8px}
.check{display:flex;align-items:center;gap:6px;margin:0}
.check input{width:13px;height:13px;margin:0;accent-color:var(--accent)}
.access-btn{
  width:100%;height:43px;display:flex;align-items:center;justify-content:space-between;
  padding:0 13px 0 15px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#6879ff,#9665df);
  color:#fff;cursor:pointer;font-size:10px;font-weight:720;
  box-shadow:0 12px 28px rgba(103,117,255,.19);
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
.access-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.access-btn:hover{transform:translateY(-1px);box-shadow:0 15px 34px rgba(103,117,255,.25)}
.access-btn:active{transform:translateY(0)}
.access-btn:disabled{opacity:.62;cursor:wait;transform:none}
.status{min-height:13px;margin:7px 0 0;color:var(--muted);font-size:8px;text-align:center}
.login-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:17px;padding-top:13px;border-top:1px solid var(--line);
  color:var(--muted2);font-size:7.5px;
}
.login-foot span{display:inline-flex;align-items:center;gap:5px}
.login-foot i{width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}
.login-foot a:hover{color:var(--text)}
.auth-footer{margin:14px 0 0;color:var(--muted2);font-size:7px;letter-spacing:.02em}
.auth-footer span{padding:0 5px;opacity:.45}

@media (max-width:900px){
  .auth-shell{width:min(100% - 32px,390px)}
  .auth-brand{margin-bottom:16px}
}
@media (max-width:600px){
  .auth-page{padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}
  .auth-glow-a{width:130vw;height:130vw;top:-70%}
  .auth-grid{background-size:42px 42px}
  .auth-dust{background-size:105px 105px}
  .auth-shell{width:min(100%,360px)}
  .auth-brand{font-size:11px;margin-bottom:12px}
  .auth-brand-mark{width:28px;height:28px;border-radius:9px}
  .auth-brand-mark img{width:17px;height:17px}
  .login-card{padding:18px 16px 15px;border-radius:17px}
  .login-top{margin-bottom:15px}
  .login-head{margin-bottom:16px}
  .login-head h1{font-size:25px}
  .login-label{margin-bottom:10px}
  .field input{height:42px;font-size:16px}
  .access-btn{height:42px}
  .login-foot{margin-top:14px;padding-top:11px}
  .auth-footer{margin-top:10px}
}
@media (max-width:600px) and (max-height:700px){
  .auth-brand{margin-bottom:8px}
  .login-card{padding:15px 14px 12px}
  .login-top{margin-bottom:11px}
  .login-head{margin-bottom:12px}
  .login-head h1{font-size:23px}
  .login-label{margin-bottom:8px}
  .field input{height:39px}
  .password-toggle{height:29px}
  .login-options{margin-bottom:10px}
  .access-btn{height:40px}
  .login-foot{margin-top:10px;padding-top:9px}
  .auth-footer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .access-btn,.field input{transition:none}
}

/* =========================================================
   ANDOVA LOGIN — RESPONSIVE ART-DIRECTION PASS
   Desktop, tablet and phone intentionally use different
   compositions while preserving the existing auth behaviour.
   ========================================================= */
.auth-page{background:
  radial-gradient(900px 520px at 18% 48%,rgba(92,105,255,.08),transparent 70%),
  radial-gradient(700px 520px at 88% 20%,rgba(170,100,235,.055),transparent 72%),var(--bg)}
.auth-shell{transition:width .3s ease,grid-template-columns .3s ease,gap .3s ease}
.auth-hero{display:none}

/* Large desktop: editorial two-column composition */
@media (min-width:1101px){
  .auth-shell{
    width:min(1120px,calc(100% - 72px));
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:110px;
    align-items:center;
  }
  .auth-hero{display:block;justify-self:start;max-width:560px;padding:8px 0 0}
  .hero-eyebrow{display:flex;align-items:center;gap:9px;color:var(--muted2);font-size:8px;font-weight:750;letter-spacing:.18em}
  .hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
  .auth-hero h1{margin:22px 0 18px;font-size:clamp(54px,5.2vw,78px);line-height:.91;letter-spacing:-.075em;font-weight:760}
  .auth-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}
  .auth-hero p{max-width:390px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}
  .hero-rule{display:flex;align-items:center;gap:12px;margin-top:70px;color:var(--muted2);font-size:7px;letter-spacing:.16em}
  .hero-rule span{width:54px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
  .login-card{padding:30px;border-radius:24px;box-shadow:0 38px 110px rgba(0,0,0,.36),0 1px 0 rgba(255,255,255,.05) inset}
  .auth-brand{grid-column:1/-1;position:absolute;top:-42px;left:0;margin:0}
  .auth-footer{grid-column:1/-1;position:absolute;bottom:-38px;left:0;margin:0}
  .login-head h1{font-size:30px}
}

/* Standard laptop / tablet: centered premium card, generous whitespace */
@media (min-width:601px) and (max-width:1100px){
  .auth-page{padding:32px}
  .auth-shell{width:min(560px,100%);gap:0}
  .auth-brand{margin-bottom:22px}
  .login-card{padding:30px;border-radius:23px}
  .login-top{margin-bottom:22px}
  .login-head{margin-bottom:22px}
  .login-head h1{font-size:31px}
  .field input{height:46px;font-size:13px}
  .access-btn{height:46px}
  .auth-footer{margin-top:18px}
}

/* Short desktop/laptop displays: reduce vertical rhythm without
   collapsing the desktop composition into the phone design. */
@media (min-width:1101px) and (max-height:760px){
  .auth-hero h1{font-size:56px;margin:16px 0 13px}
  .hero-rule{margin-top:42px}
  .login-card{padding:24px 28px}
  .login-top{margin-bottom:14px}
  .login-head{margin-bottom:15px}
  .login-label{margin-bottom:9px}
  .login-options{margin-bottom:11px}
  .login-foot{margin-top:12px;padding-top:10px}
}

/* Phone: intimate, centered, intentionally minimal */
@media (max-width:600px){
  .auth-page{background:
    radial-gradient(480px 330px at 50% -10%,rgba(105,120,255,.12),transparent 72%),var(--bg)}
  .auth-hero{display:none}
  .auth-shell{width:min(100%,380px)}
  .login-card{background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 24px 70px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.055) inset}
}

@media (prefers-reduced-motion:no-preference){
  .auth-hero{animation:authHeroIn .65s cubic-bezier(.2,.75,.2,1) both}
  .login-card{animation:authCardIn .65s cubic-bezier(.2,.75,.2,1) .05s both}
  @keyframes authHeroIn{from{opacity:0;transform:translate3d(-16px,8px,0)}to{opacity:1;transform:none}}
  @keyframes authCardIn{from{opacity:0;transform:translate3d(14px,10px,0) scale(.985)}to{opacity:1;transform:none}}
}

/* =========================================================
   ANDOVA LOGIN — MOBILE / TABLET PREMIUM PASS
   These breakpoints deliberately use different compositions.
   ========================================================= */

/* Tablet: elevated "device" composition with a quiet visual rail */
@media (min-width:601px) and (max-width:900px){
  .auth-page{
    padding:42px 28px;
    background:
      radial-gradient(620px 430px at 12% 12%,rgba(103,119,255,.13),transparent 70%),
      radial-gradient(560px 420px at 92% 88%,rgba(155,92,224,.09),transparent 72%),
      var(--bg);
  }
  .auth-shell{
    width:min(680px,100%);
    position:relative;
  }
  .auth-shell::before{
    content:"";
    position:absolute;
    left:-42px;right:-42px;top:8%;bottom:8%;
    border:1px solid rgba(255,255,255,.035);
    border-radius:38px;
    pointer-events:none;
  }
  .auth-brand{
    margin-bottom:25px;
    letter-spacing:-.035em;
  }
  .auth-brand-mark{
    width:36px;height:36px;border-radius:11px;
    box-shadow:0 10px 28px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.06);
  }
  .auth-brand-mark img{width:21px;height:21px}
  .login-card{
    position:relative;
    padding:34px 36px 27px;
    border-radius:26px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.035),transparent 28%),
      color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:
      0 34px 90px rgba(0,0,0,.38),
      0 1px 0 rgba(255,255,255,.07) inset,
      0 0 0 1px rgba(255,255,255,.025);
    overflow:hidden;
  }
  .login-card::after{
    content:"";
    position:absolute;
    width:260px;height:260px;
    right:-145px;top:-165px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(111,125,255,.16),transparent 68%);
    pointer-events:none;
  }
  .login-top{margin-bottom:25px}
  .login-head{margin-bottom:25px}
  .login-head h1{font-size:32px;letter-spacing:-.045em}
  .login-head p{font-size:11px}
  .login-label{margin-bottom:15px}
  .login-label>span{font-size:8px;letter-spacing:.09em}
  .field input{height:48px;border-radius:12px;padding-left:37px}
  .field>svg{left:12px;width:15px;height:15px}
  .password-toggle{right:6px;top:6px;height:36px;padding:0 10px;border-radius:8px}
  .login-options{margin:3px 0 17px;font-size:8.5px}
  .check{gap:7px}
  .check input{width:14px;height:14px}
  .access-btn{height:48px;border-radius:12px;padding:0 15px 0 16px;font-size:10px}
  .login-foot{margin-top:18px;padding-top:14px;font-size:8px}
  .auth-footer{margin-top:16px;font-size:7.5px}
}

/* Small tablet / large phone: card becomes more intimate */
@media (min-width:601px) and (max-width:740px){
  .auth-page{padding:32px 22px}
  .auth-shell{width:min(590px,100%)}
  .auth-shell::before{left:-22px;right:-22px;border-radius:32px}
  .login-card{padding:29px 30px 24px}
  .login-head h1{font-size:29px}
}

/* Phone: deliberately different from tablet — soft floating panel,
   stronger top identity, larger touch targets and less visual noise. */
@media (max-width:600px){
  .auth-page{
    min-height:100svh;
    padding:
      max(18px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left));
    align-items:flex-start;
    background:
      radial-gradient(430px 300px at 50% -7%,rgba(104,120,255,.16),transparent 70%),
      radial-gradient(360px 300px at 100% 72%,rgba(157,91,225,.065),transparent 72%),
      var(--bg);
  }
  .auth-page::after{
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 24%,transparent 78%,rgba(0,0,0,.08));
    pointer-events:none;
  }
  .auth-shell{
    width:min(100%,390px);
    margin:auto;
    position:relative;
    padding:8px 0 4px;
  }
  .auth-brand{
    align-self:center;
    margin:0 auto 22px;
    font-size:12px;
    letter-spacing:-.035em;
  }
  .auth-brand-mark{
    width:31px;height:31px;border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.06);
  }
  .auth-brand-mark img{width:18px;height:18px}
  .login-card{
    padding:21px 17px 16px;
    border-radius:21px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.035),transparent 25%),
      color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:
      0 28px 75px rgba(0,0,0,.38),
      0 1px 0 rgba(255,255,255,.07) inset,
      0 0 0 1px rgba(255,255,255,.025);
  }
  .login-top{margin-bottom:19px}
  .auth-kicker{font-size:7px;letter-spacing:.15em}
  .auth-secure{font-size:7px;padding:5px 7px;border-radius:7px}
  .login-head{margin-bottom:20px}
  .login-head h1{font-size:27px;letter-spacing:-.055em}
  .login-head p{margin-top:5px;font-size:10px;line-height:1.55}
  .login-label{margin-bottom:13px}
  .login-label>span{font-size:7.5px;letter-spacing:.08em}
  .field{margin-top:6px}
  .field input{
    height:46px;
    border-radius:12px;
    padding:0 12px 0 37px;
    font-size:16px;
  }
  .field>svg{left:12px;width:15px;height:15px}
  .password-toggle{
    right:5px;top:5px;height:36px;
    padding:0 10px;border-radius:8px;font-size:8px;
  }
  .login-options{
    margin:2px 0 16px;
    font-size:8px;
  }
  .check{gap:7px}
  .check input{width:14px;height:14px}
  .access-btn{
    height:47px;
    border-radius:12px;
    padding:0 14px 0 15px;
    font-size:10px;
    box-shadow:0 14px 30px rgba(103,117,255,.20);
  }
  .status{font-size:8px;min-height:13px}
  .login-foot{
    margin-top:15px;
    padding-top:12px;
    font-size:7.5px;
  }
  .auth-footer{margin-top:11px;font-size:7px}
}

/* Very narrow phones: preserve elegance instead of squeezing */
@media (max-width:380px){
  .auth-page{padding-left:11px;padding-right:11px}
  .auth-shell{width:100%;padding-top:3px}
  .auth-brand{margin-bottom:16px}
  .login-card{padding:18px 14px 14px;border-radius:19px}
  .login-top{margin-bottom:16px}
  .login-head{margin-bottom:17px}
  .login-head h1{font-size:25px}
  .login-label{margin-bottom:11px}
  .field input{height:44px}
  .access-btn{height:45px}
  .login-foot{margin-top:13px;padding-top:10px}
}

/* Landscape phones: keep the card compact and vertically centered */
@media (max-width:600px) and (orientation:landscape) and (max-height:520px){
  .auth-page{padding-top:12px;padding-bottom:12px}
  .auth-shell{max-width:500px;padding:0}
  .auth-brand{margin-bottom:10px}
  .login-card{padding:15px 18px 12px}
  .login-top{margin-bottom:10px}
  .login-head{margin-bottom:10px}
  .login-head h1{font-size:22px}
  .login-head p{display:none}
  .login-label{margin-bottom:8px}
  .field input{height:39px}
  .access-btn{height:40px}
  .login-foot{margin-top:9px;padding-top:8px}
  .auth-footer{display:none}
}


/* =========================================================
   ANDOVA FINAL BOTANICAL CONTROL ROOM PASS
   Scoped to auth and legacy admin selectors; behavior untouched.
   ========================================================= */
:root {
  --bot-bg: #0e130f;
  --bot-bg2: #151d16;
  --bot-panel: rgba(29,39,27,.78);
  --bot-panel2: #202c20;
  --bot-text: #f8f1e5;
  --bot-muted: #b1b3a7;
  --bot-dim: #747d6d;
  --bot-line: rgba(244,235,214,.14);
  --bot-line2: rgba(225,167,182,.34);
  --bot-leaf: #b0d18b;
  --bot-rose: #e4a3b5;
  --bot-deep: #955a78;
  --bot-gold: #efc981;
  --bot-green: #abd59d;
  --bot-shadow: 0 32px 110px rgba(0,0,0,.34);
}
:root[data-theme=light] {
  --bot-bg: #f3ecdf;
  --bot-bg2: #faf6ed;
  --bot-panel: rgba(255,252,244,.82);
  --bot-panel2: #fffdf8;
  --bot-text: #29251d;
  --bot-muted: #746e62;
  --bot-dim: #9b9488;
  --bot-line: rgba(60,52,39,.14);
  --bot-line2: rgba(158,98,117,.36);
  --bot-leaf: #5b875d;
  --bot-rose: #c37991;
  --bot-deep: #8d506c;
  --bot-gold: #ae7c3e;
  --bot-green: #4b9460;
  --bot-shadow: 0 28px 80px rgba(82,61,39,.13);
}

.auth-page {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 20%, color-mix(in srgb, var(--bot-leaf) 12%, transparent), transparent 34%),
    radial-gradient(ellipse at 88% 74%, color-mix(in srgb, var(--bot-rose) 12%, transparent), transparent 31%),
    linear-gradient(160deg, var(--bot-bg2), var(--bot-bg));
  color: var(--bot-text);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
.auth-page::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:radial-gradient(circle, color-mix(in srgb, var(--bot-gold) 48%, transparent) 0 1px, transparent 1.4px); background-size:120px 120px; mask-image:radial-gradient(circle at 50% 44%, #000, transparent 74%); }
.auth-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.auth-grid { opacity:.06; background-image:linear-gradient(color-mix(in srgb, var(--bot-line) 48%, transparent) 1px, transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--bot-line) 48%, transparent) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%); }
.auth-dust { opacity:.22; background-image:radial-gradient(circle, color-mix(in srgb, var(--bot-gold) 70%, transparent) 0 1px, transparent 1.25px); background-size:154px 154px; mask-image:radial-gradient(circle at 50% 35%,#000,transparent 72%); animation: botDust 18s linear infinite; }
@keyframes botDust { to { transform: translate3d(10px,-18px,0); } }
.auth-glow { filter: blur(76px); opacity:.40; }
.auth-glow-a { background: radial-gradient(circle, color-mix(in srgb, var(--bot-gold) 17%, transparent), transparent 69%); }
.auth-glow-b { background: radial-gradient(circle, color-mix(in srgb, var(--bot-rose) 15%, transparent), transparent 69%); }
.auth-mist { position:absolute; border-radius:50%; filter:blur(34px); opacity:.35; }
.auth-mist-a { width:510px; height:170px; left:-150px; bottom:8%; background:color-mix(in srgb, var(--bot-leaf) 15%, transparent); transform:rotate(-18deg); }
.auth-mist-b { width:420px; height:150px; right:-130px; top:12%; background:color-mix(in srgb, var(--bot-rose) 15%, transparent); transform:rotate(24deg); }
.auth-vine { position:absolute; width:390px; height:680px; border:1px solid color-mix(in srgb, var(--bot-leaf) 34%, transparent); border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; opacity:.42; }
.auth-vine-left { left:-270px; top:2%; transform:rotate(24deg); }
.auth-vine-right { right:-280px; bottom:-5%; transform:rotate(-27deg); border-color:color-mix(in srgb, var(--bot-rose) 28%, transparent); }
.auth-flower { position:absolute; width:112px; height:112px; opacity:.62; filter:drop-shadow(0 18px 24px rgba(0,0,0,.18)); }
.auth-flower-left { left:7%; bottom:8%; transform:rotate(-17deg) scale(.82); }
.auth-flower-right { right:6%; top:10%; transform:rotate(22deg) scale(.56); opacity:.35; filter:blur(1.5px); }
.auth-flower i { position:absolute; left:50%; top:50%; width:48px; height:76px; border:1px solid rgba(255,239,224,.23); border-radius:88% 12% 88% 12%; background:linear-gradient(145deg,color-mix(in srgb, var(--bot-rose) 70%, transparent),color-mix(in srgb, var(--bot-deep) 72%, transparent)); transform-origin:50% 88%; }
.auth-flower i:nth-child(1){transform:translate(-50%,-85%) rotate(0)} .auth-flower i:nth-child(2){transform:translate(-50%,-85%) rotate(90deg)} .auth-flower i:nth-child(3){transform:translate(-50%,-85%) rotate(180deg)} .auth-flower i:nth-child(4){transform:translate(-50%,-85%) rotate(270deg)}
.auth-flower b { position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 32% 26%,#ffe9aa,#d18756 49%,#633d4c); box-shadow:0 0 26px color-mix(in srgb, var(--bot-gold) 62%, transparent); transform:translate(-50%,-50%); }
.auth-petal { position:absolute; width:13px; height:22px; border:1px solid color-mix(in srgb, var(--bot-rose) 48%, transparent); border-radius:100% 0 100% 0; background:color-mix(in srgb, var(--bot-rose) 52%, transparent); }
.auth-petal-a { left:29%; top:18%; transform:rotate(26deg); } .auth-petal-b { right:20%; bottom:18%; transform:rotate(134deg) scale(.8); } .auth-petal-c { left:17%; top:62%; transform:rotate(202deg) scale(.62); }
.auth-brand { color:var(--bot-text); font-weight:800; letter-spacing:-.045em; }
.auth-brand>span:last-child span { color:var(--bot-dim); }
.auth-brand-mark { border-color:var(--bot-line2); background:linear-gradient(145deg,color-mix(in srgb, var(--bot-leaf) 28%, transparent),color-mix(in srgb, var(--bot-rose) 23%, transparent)); box-shadow:0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); }
.auth-hero h1 { font-family:'Manrope',ui-sans-serif,sans-serif; }
.auth-hero h1 em { font-family:'Playfair Display',Georgia,serif; font-style:italic; background:linear-gradient(100deg,var(--bot-leaf),var(--bot-rose),var(--bot-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-eyebrow, .auth-kicker, .auth-secure, .auth-footer, .login-foot { color:var(--bot-dim); font-family:'DM Mono',ui-monospace,monospace; }
.hero-eyebrow i, .auth-kicker i, .login-foot i { background:var(--bot-green); box-shadow:0 0 12px var(--bot-green); }
.hero-rule span { background:linear-gradient(90deg,var(--bot-rose),transparent); }
.login-card { border-color:var(--bot-line2); background:color-mix(in srgb,var(--bot-panel) 91%,transparent); box-shadow:var(--bot-shadow), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(28px) saturate(1.24); }
.login-card::before { background:linear-gradient(90deg,transparent,var(--bot-gold),transparent); opacity:.34; }
.login-card::after { border-color:color-mix(in srgb,var(--bot-rose) 24%, transparent); }
.login-head h1 { font-family:'Manrope',ui-sans-serif,sans-serif; letter-spacing:-.065em; }
.login-label { color:var(--bot-muted); font-family:'DM Mono',ui-monospace,monospace; }
.field input { border-color:var(--bot-line); background:color-mix(in srgb,var(--bot-panel2) 86%,transparent); color:var(--bot-text); }
.field input:focus { border-color:color-mix(in srgb,var(--bot-rose) 64%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--bot-rose) 13%,transparent); }
.field>svg { stroke:var(--bot-dim); }
.password-toggle { color:var(--bot-dim); }
.access-btn { background:linear-gradient(135deg,var(--bot-leaf),var(--bot-deep)); box-shadow:0 14px 32px color-mix(in srgb,var(--bot-deep) 26%,transparent); }
.access-btn:hover { box-shadow:0 18px 40px color-mix(in srgb,var(--bot-rose) 25%,transparent); }
.status { color:var(--bot-muted); }
.login-foot { border-color:var(--bot-line); }

@media (max-width:1100px) { .auth-flower-left { left:1%; bottom:4%; } .auth-flower-right { right:1%; top:8%; } }
@media (max-width:600px) {
  .auth-page { overflow:hidden; }
  .auth-vine-left, .auth-vine-right { opacity:.22; }
  .auth-flower-left { left:-36px; bottom:6%; transform:scale(.54) rotate(-22deg); opacity:.42; }
  .auth-flower-right { right:-40px; top:6%; transform:scale(.42) rotate(25deg); opacity:.25; }
  .auth-petal-a { left:12%; top:17%; } .auth-petal-b { right:9%; bottom:14%; } .auth-petal-c { display:none; }
  .auth-dust { background-size:112px 112px; }
  .login-card { border-radius:19px; }
  .field input { font-size:16px !important; }
}
@media (prefers-reduced-motion:reduce) { .auth-dust { animation:none; } }