/* NOKOS.MY.ID visual alignment based on the supplied dark-blue UI sketch.
   This is a visual layer only: it does not add product/API/database features. */
:root { --nn-bg:#06111f; --nn-panel:#0a1b2d; --nn-panel2:#0d2237; --nn-line:#1b3853; --nn-blue:#087cff; --nn-cyan:#16c8ff; --nn-text:#e9f4ff; --nn-muted:#9cb3c9; }
html,body { background-color:var(--nn-bg); }
body { color:var(--nn-text); }
::selection { background:rgba(0,132,255,.35); color:#fff; }
.nm-page { background:radial-gradient(ellipse at 50% -10%,rgba(0,122,255,.13),transparent 48%),#06111f; }
.nm-nav { background:rgba(4,14,26,.9)!important; border-bottom:1px solid rgba(83,160,226,.17)!important; backdrop-filter:blur(18px); }
.nm-brand,.nm-links a,.nm-footer a { color:#d9eaff; }
.nm-logo { filter:drop-shadow(0 0 8px rgba(0,170,255,.25)); }
.nm-btn.primary,.btn-primary,.nx-primary { background:linear-gradient(135deg,#087cff,#0758df)!important; border-color:#138bff!important; box-shadow:0 5px 20px rgba(0,113,255,.2); }
.nm-btn.ghost { background:rgba(9,30,50,.72)!important; border-color:#285170!important; }
.nm-hero { background:radial-gradient(ellipse at 78% 44%,rgba(0,133,255,.16),transparent 35%),transparent!important; }
.nm-kicker,.nm-tag { color:#51caff!important; }
.nm-hero-copy h1 { color:#f0f8ff!important; letter-spacing:-.045em; }
.nm-hero-copy h1 span { color:#16b9ff!important; }
.nm-trust span,.nm-stat,.nm-feature,.nm-service,.nm-blog-card,.nm-faq details,.nm-cta,.nm-flow,.nm-notify { background:linear-gradient(145deg,rgba(10,31,51,.94),rgba(5,19,33,.96))!important; border-color:rgba(65,139,192,.2)!important; }
.nm-service.active { border-color:#1599ff!important; box-shadow:0 0 0 1px rgba(21,153,255,.18),0 0 20px rgba(0,123,255,.1); }
.nm-section.alt { background:rgba(6,19,33,.7)!important; }
.nm-phone { border-color:#1678bd!important; box-shadow:0 0 60px rgba(0,113,255,.16)!important; }
.nm-footer { background:#040d17!important; border-top:1px solid rgba(83,160,226,.15)!important; }
/* Authenticated dashboard surfaces */
.app-shell,.dashboard-shell,.sidebar,.main-content,.page-content { color:var(--nn-text); }
.sidebar,.app-sidebar { background:#061423!important; border-color:var(--nn-line)!important; }
.card,.stat-card,.panel,.modal,.order-card,.balance-card,.nx-panel,.nx-card { background:linear-gradient(145deg,#0b1c2e,#071525)!important; border-color:var(--nn-line)!important; }
.form-input,.form-select,.form-textarea,input,select,textarea { border-color:#244762; }
button,a { -webkit-tap-highlight-color:transparent; }
.nn-wa-float { position:fixed; z-index:9999; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; padding:10px 15px 10px 11px; border:1px solid rgba(75,225,157,.5); border-radius:16px; background:linear-gradient(135deg,#0a8f62,#08734f); color:#fff!important; text-decoration:none!important; box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 24px rgba(16,185,129,.15); font-size:12px; line-height:1.3; }
.nn-wa-float b,.nn-wa-float small { display:block; }
.nn-wa-float b { font-size:13px; }
.nn-wa-float small { opacity:.88; font-size:10px; margin-top:2px; }
.nn-wa-mark { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);font-size:20px; }
.nn-wa-float:hover { transform:translateY(-2px);filter:brightness(1.08); }
@media(max-width:640px){ .nn-wa-float{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:9px 12px 9px 9px;border-radius:14px}.nn-wa-mark{width:29px;height:29px}.nm-hero-copy h1{font-size:clamp(2.25rem,11vw,3.6rem)} }