/* NixFleet UI layer v1 (04.11.2026) — shared polish on top of each page's own styles.
   Brand colours stay the same (navy #1b2150, yellow #fbb51a, pink→orange gradient).
   Only typography, depth (shadows), radii, motion and focus states are unified here.
   Remove the <link> to roll back a page. */

/* ---------- fonts (self-hosted: faster, works offline in the app) ---------- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/manrope-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/manrope-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"NixHead";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"NixHead";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"NixHead";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-cyrillic-900-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"NixHead";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"NixHead";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"NixHead";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/montserrat-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-thai-thai-400-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/noto-sans-thai-thai-600-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-thai-thai-700-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

:root{
  --nx-body:"Manrope","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --nx-head:"NixHead","Montserrat","Noto Sans Thai",system-ui,sans-serif;
  --nx-r-card:20px; --nx-r-ctl:14px;
  --nx-sh-1:0 1px 2px rgba(16,22,58,.05),0 2px 6px rgba(16,22,58,.05);
  --nx-sh-2:0 1px 2px rgba(16,22,58,.05),0 6px 16px -4px rgba(16,22,58,.10),0 18px 40px -16px rgba(16,22,58,.18);
  --nx-sh-y:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(0,0,0,.08) inset,0 6px 18px -6px rgba(240,138,46,.55);
  --nx-ring:0 0 0 3px rgba(251,181,26,.45);
  --nx-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- typography ---------- */
html,body{font-family:var(--nx-body)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
body,input,select,textarea,button{font-feature-settings:"tnum" 1,"ss01" 1}
h1,h2,h3,.hero h1,header b{font-family:var(--nx-head)!important;letter-spacing:-.012em}
h1{letter-spacing:-.02em;line-height:1.18}
header b,header b span{letter-spacing:.09em}
.meta,small,.sub{letter-spacing:.005em}
::selection{background:rgba(251,181,26,.35)}

/* ---------- depth: cards, panels ---------- */
.card{border-radius:var(--nx-r-card)!important;box-shadow:var(--nx-sh-2)!important;border:1px solid rgba(16,22,58,.05)}
.card .card{box-shadow:var(--nx-sh-1)!important}
.card.hero{overflow:hidden}

/* ---------- controls ---------- */
.btn,button.btn,a.btn{border-radius:var(--nx-r-ctl)!important;transition:transform .12s var(--nx-ease),box-shadow .2s var(--nx-ease),background-color .2s,filter .2s;will-change:transform}
.btn:active,button:active{transform:scale(.975)}
.btn.y,button.y,a.btn.y{background:linear-gradient(180deg,#ffc845 0%,#fbb51a 55%,#f4a30c 100%)!important;border-color:#f2a20d!important;box-shadow:var(--nx-sh-y)}
.btn.y:hover{filter:brightness(1.04)}
.btn.dark{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -10px rgba(27,33,80,.7)}
.btn.wa{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 18px -8px rgba(37,211,102,.6)}
.btn:not(.y):not(.dark):not(.wa):not(.o){box-shadow:var(--nx-sh-1)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--nx-ring)!important}
input.in,select.in,textarea.in,input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{border-radius:var(--nx-r-ctl);transition:border-color .2s,box-shadow .2s}
input.in:focus,select.in:focus,textarea.in:focus{border-color:#fbb51a!important;box-shadow:var(--nx-ring)!important;outline:none}

/* ---------- pills, tabs, notes ---------- */
.tabs button,.seg button,.badge,.tag,.cb{transition:background-color .2s,color .2s,box-shadow .2s}
.tabs button[aria-pressed="true"],.seg button[aria-pressed="true"]{box-shadow:0 6px 16px -8px rgba(27,33,80,.7)}
.note{border-radius:14px!important;border:1px solid rgba(0,0,0,.04)}
.line{border-bottom-color:rgba(16,22,58,.10)!important}
.sum{border-radius:16px!important;box-shadow:0 10px 24px -12px rgba(27,33,80,.65);background:linear-gradient(135deg,#1b2150 0%,#262d6b 100%)!important}

/* ---------- header: glassy, sticky-friendly ---------- */
header{box-shadow:0 6px 20px -12px rgba(10,14,40,.6)}
header .lg,header img{box-shadow:0 0 0 2px rgba(255,255,255,.18),0 4px 10px -4px rgba(0,0,0,.5)}

/* ---------- images ---------- */
.card img,.shot img,.cmp img{border-radius:inherit}

/* ---------- page moods: <html data-ui="light"> / <html data-ui="dark"> ---------- */
html[data-ui=light]{min-height:100%;background:radial-gradient(900px 340px at 85% -120px,rgba(240,138,46,.13),transparent 70%),radial-gradient(800px 320px at 0% -140px,rgba(230,23,122,.08),transparent 70%),linear-gradient(180deg,#f4f6fb 0%,#eaeef5 100%) fixed!important}
html[data-ui=light] body{background:transparent!important}
html[data-ui=light] .card{background:linear-gradient(180deg,#fff 0%,#fdfdff 100%)}
html[data-ui=light] h1,html[data-ui=light] h2{color:#1b2150}
html[data-ui=light] .card h2{font-size:18px}
html[data-ui=dark]{min-height:100%;background:#1b2150!important}
html[data-ui=dark] body{background:transparent!important}
html[data-ui=dark] .card,html[data-ui=dark] a[class*=role],html[data-ui=dark] .role{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -18px rgba(0,0,0,.65)!important}
html[data-ui=dark] header{background:#1b2150!important;-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
/* app start screen role cards */
html[data-ui=dark] a.r{border-radius:22px!important;transition:transform .12s var(--nx-ease);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -20px rgba(0,0,0,.7)!important}
html[data-ui=dark] a.r:active{transform:scale(.98)}
html[data-ui=dark] a.r.ag{background:linear-gradient(135deg,#ffcb4a 0%,#fbb51a 45%,#f39a1c 100%)!important;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 44px -18px rgba(240,138,46,.75)!important}
html[data-ui=dark] a.r.cr{background:rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset!important}
html[data-ui=dark] a.r i{filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
html[data-ui=dark] a.r b{font-family:var(--nx-head);letter-spacing:-.01em}

/* iPhone notch / Dynamic Island: header content never hides under the status bar (app + home-screen mode) */
header.top{padding-top:env(safe-area-inset-top)!important}
html[data-ui] body>header:not(.top){padding-top:max(12px,calc(env(safe-area-inset-top) + 6px))!important}

/* status tags never break inside (courier cards) — the row wraps instead */
.tag{white-space:nowrap}
.card>div[style*="justify-content:space-between"]{flex-wrap:wrap;row-gap:6px}