/* Workora theme D (navy + emerald + gold) - marketplace look.
   Loaded LAST (after nexa-app.css and nexa-ui.css). Colours/fonts live in the tokens at the top of nexa-ui.css.
   To go back to the old look: restore docs/original-ui-before-theme-d/* and remove the nexa-theme.css <link> from the two layouts. */

/* ---------- base ---------- */
html{color-scheme:var(--scheme)}
body{font-size:16px;line-height:1.6;background:var(--bg)!important;color:var(--ink)}
h1,h2,h3,h4,.f-display{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;color:var(--strong)}
.serif{font-style:normal;font-weight:800;letter-spacing:-.02em}
.sec-h .serif,.hero-h .serif{color:var(--b)!important}
::selection{background:var(--a);color:#fff}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}
a,button{-webkit-tap-highlight-color:transparent}
.mono{font-family:var(--f-body)}

/* soft background (no neon blobs in light) */
.bg-fx{background:linear-gradient(180deg,rgb(var(--pri)/.07) 0,transparent 520px)}
.bg-fx i{display:none}
.bg-fx::after{display:none}
html[data-theme="dark"] .bg-fx{background:radial-gradient(900px circle at 80% -10%,rgb(var(--pri)/.14),transparent 60%)}

/* ---------- headings / text helpers ---------- */
.hero-h{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.sec-h{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.12;letter-spacing:-.025em}
.grad{background:linear-gradient(95deg,var(--navy),var(--a-d) 60%,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .grad{background:linear-gradient(95deg,#fff,#6EE7B7 55%,#12B76A);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mute);font-size:1.08rem;line-height:1.7}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:.76rem;letter-spacing:.07em;color:var(--pri-t);background:rgb(var(--pri)/.1);border-color:rgb(var(--pri)/.28)}
.eyebrow::before{background:var(--a);box-shadow:none}
.stat b{color:var(--strong)}

/* ---------- navigation ---------- */
.topbar-pub{background:var(--navy);color:#B8C4D8;border-bottom:0}
.topbar-pub a:hover{color:#fff}
.nav{top:0;margin:0;max-width:none;padding:0;background:var(--bar-bg);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.nav-in{max-width:1200px;margin:0 auto;padding:12px 22px;border:0;border-radius:0;background:transparent;backdrop-filter:none}
.logo{font-weight:800;color:var(--strong)}
.logo b{position:relative;width:28px;height:28px;border-radius:8px;background:var(--a);animation:none}
.logo b::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--navy);border:2px solid #fff;box-sizing:border-box}
.logo .wm{font-style:normal}
.logo span{background:none;-webkit-text-fill-color:currentColor;color:var(--a)}
.links a,.links button{color:var(--soft);border-radius:8px;font-weight:600;font-size:.9rem;white-space:nowrap;padding:8px 9px;transition:background .2s,color .2s}
.nav-in{gap:14px}
.links .btn{padding:10px 18px;font-size:.9rem}
.links a:hover,.links a.on{color:var(--pri-t);background:rgb(var(--pri)/.1)}
.links .btn,.links .btn:hover{border-radius:10px}
.links .btn-p,.links .btn-p:hover{color:#fff!important;background:var(--a)}
.links .btn-p:hover{background:var(--a-d)}
.links .btn-g{color:var(--strong)}
.dd-menu{border-radius:12px;box-shadow:var(--shadow-md);border:1px solid var(--line);backdrop-filter:none}
.dd-menu a{border-radius:8px!important}
.burger{border-radius:10px;background:var(--surface)}
.drawer a,.drawer button{font-size:2rem}
.drawer a:hover{color:var(--a)}

/* theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:inline-grid;place-items:center;font-size:1.05rem;line-height:1;color:var(--strong);transition:background .2s,border-color .2s,transform .2s}
.theme-toggle:hover{border-color:var(--a);background:rgb(var(--pri)/.08);transform:translateY(-1px)}
.tt-sun{display:none}.tt-moon{display:inline}
html[data-theme="dark"] .tt-sun{display:inline}html[data-theme="dark"] .tt-moon{display:none}
.drawer .drawer-tt{width:max-content;display:flex;align-items:center;gap:10px;font-family:var(--f-body)!important;font-size:1rem!important;font-weight:600;padding:10px 16px!important;border:1px solid var(--line);border-radius:10px;margin-bottom:14px;height:auto}

/* ---------- buttons ---------- */
.btn{border-radius:10px;padding:13px 24px;font-weight:600;letter-spacing:0;transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:10px 18px}
.btn-xs{padding:7px 14px;font-size:.8rem}
.btn-p{background:var(--a);color:#fff!important;box-shadow:0 1px 2px rgba(11,122,75,.3)}
.btn-p:hover{background:var(--a-d);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgb(var(--pri)/.55)}
.btn-g{background:var(--surface);border:1px solid rgb(var(--fg)/.2);color:var(--strong)}
.btn-g:hover{background:rgb(var(--pri)/.08);border-color:var(--a);color:var(--pri-t);transform:translateY(-1px)}
.btn-danger,.btn-ok{border-radius:10px}
.icon-btn{border-radius:10px;background:var(--surface)}
.icon-btn:hover{background:rgb(var(--pri)/.08);border-color:var(--a)}

/* ---------- surfaces ---------- */
.glass,.panel,.stat-card,.gcard{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:none}
.card{border-radius:16px;padding:26px}
.card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(var(--pri)/.1),transparent 45%)}
.card:hover{transform:translateY(-4px);border-color:rgb(var(--pri)/.55);box-shadow:var(--shadow-md)}
.panel{border-radius:16px}
.stat-card{border-radius:14px}
a.stat-card:hover{border-color:rgb(var(--pri)/.55);box-shadow:var(--shadow-md)}
.stat-card small{letter-spacing:.06em}
.gcard{border-radius:16px}
.gcard:hover{border-color:rgb(var(--pri)/.55);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.pf-card,.quote,.team-card,.logo-tile,.faq-item{transition:transform .3s,box-shadow .3s,border-color .3s}
.pf-card{border-radius:16px}
.pf-card:hover,.quote:hover,.team-card:hover{box-shadow:var(--shadow-md);border-color:rgb(var(--pri)/.4)}
.pf-card:hover{transform:translateY(-4px)}
.logo-tile{border-radius:14px}
.logo-tile:hover{border-color:rgb(var(--pri)/.4)}
.quote,.team-card{border-radius:16px}
.faq-item,.faq details{border-radius:14px}
.faq-item:hover,.faq details:hover{border-color:rgb(var(--pri)/.4)}
.auth-card{border-radius:20px;box-shadow:var(--shadow-md)}
.ico{background:rgb(var(--pri)/.12);border:1px solid rgb(var(--pri)/.25);border-radius:12px}
.gcard .thumb,.pf-card .pf-img,.cover-box{background:linear-gradient(135deg,rgb(var(--pri)/.22),rgb(var(--sec)/.16))}
.empty{border-radius:16px;background:var(--surface)}
.empty h3{color:var(--strong)}
.map-embed,.map-frame{border-radius:16px}
.callout{border-radius:14px;background:rgb(var(--pri)/.08);border-color:rgb(var(--pri)/.3)}
.avatar{background:linear-gradient(135deg,var(--a),var(--a-d));color:#fff}
.team-card .ph{background:linear-gradient(135deg,var(--a),var(--a-d));color:#fff}
.stars{color:var(--gold)}
.progress{background:rgb(var(--fg)/.1)}
.progress>i{background:linear-gradient(90deg,var(--a),var(--gold))}
.bar{background:linear-gradient(90deg,var(--a),var(--gold))}
.price{color:var(--strong)}

/* hero slider */
.sl,.slider{border-radius:20px;box-shadow:var(--shadow-md)}
.sl-slide:not(.plain),.slide{color:#fff}
.sl-slide:not(.plain) .hero-h,.slide .hero-h{color:#fff}
.sl-slide:not(.plain) .lead,.slide .lead{color:rgba(255,255,255,.88)!important}
.sl-slide.plain .lead{color:var(--soft)!important}
.sl-slide.plain .shade{display:none}
.sl-nav{background:rgba(11,27,51,.55);padding:6px 10px;border-radius:999px}
.sl-nav button{border-radius:50%}

/* ---------- CTA + footer (dark navy blocks in both themes) ---------- */
.cta{border-radius:24px;background:radial-gradient(700px circle at 50% 0%,rgb(var(--pri)/.38),transparent 62%),var(--navy);border:0;color:#fff;box-shadow:var(--shadow-lg)}
.cta .sec-h,.cta h2,.cta h3{color:#fff}
.cta .lead{color:#C3CEE0!important}
.cta .btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.foot{background:var(--navy);color:#A9B7CE;border-top:0}
html[data-theme="dark"] .foot{background:#050B16;border-top:1px solid var(--line)}
.foot .logo{color:#fff}
.foot a{transition:color .2s}
.foot a:hover{color:#fff}
.foot-grid h4{color:#fff}
.foot-bottom{border-top-color:rgba(255,255,255,.14)}
.foot .muted{color:#A9B7CE}

/* ---------- portal / admin shell ---------- */
.side{background:var(--side-bg);border-right:1px solid var(--line)}
.side-nav a{border-radius:10px;color:var(--soft)}
.side-nav a:hover{background:rgb(var(--pri)/.08);color:var(--pri-t)}
.side-nav a.on{background:rgb(var(--pri)/.12);color:var(--pri-t);box-shadow:inset 3px 0 0 var(--a)}
.side-role{border-radius:10px}
.side-foot{border-radius:12px}
.topbar{background:var(--bar-bg);box-shadow:var(--shadow-sm)}
.topbar .crumb b{color:var(--strong)}

/* ---------- tables, forms ---------- */
.tbl th{font-family:var(--f-body);font-weight:600;letter-spacing:.05em}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgb(var(--pri)/.05)}
.tbl-wrap{border-radius:12px}
.input,.select,.textarea{background:var(--surface);border:1px solid rgb(var(--fg)/.2);border-radius:10px}
.input:hover,.select:hover,.textarea:hover{border-color:rgb(var(--fg)/.38)}
.input:focus,.select:focus,.textarea:focus{background:var(--surface);border-color:var(--a);box-shadow:0 0 0 3px rgb(var(--pri)/.2)}
.field>label,.field>.lbl{color:var(--strong);font-weight:600}
.check{color:var(--soft)}
.check input{accent-color:var(--a)}
.input[type=file]::file-selector-button{border-radius:8px;background:rgb(var(--pri)/.12);color:var(--pri-t)}
.field .err{color:var(--err-t)}
.tabs a.on,.tabs button.on{border-color:var(--a);color:var(--pri-t)}
.pager a,.pager span{border-radius:10px;background:var(--surface)}
.pager a:hover{background:rgb(var(--pri)/.1);color:var(--pri-t)}
.filter-pills a{background:var(--surface)}
.filter-pills a.on,.filter-pills a:hover{background:var(--a);color:#fff;border-color:var(--a)}
.chip{background:var(--surface-2);color:var(--soft)}
.badge{background:var(--surface-2)}
.badge.b-green{background:rgb(var(--pri)/.12)}
.b-blue{color:var(--info-t);background:rgba(23,92,211,.1);border-color:rgba(23,92,211,.3)}
.alert-info{color:var(--info-t);background:rgba(23,92,211,.08);border-color:rgba(23,92,211,.3)}
.b-violet{color:#6941C6;background:rgba(105,65,198,.1);border-color:rgba(105,65,198,.3)}
html[data-theme="dark"] .b-violet{color:#C4B5FD;background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.4)}
html[data-theme="dark"] .b-blue,html[data-theme="dark"] .alert-info{background:rgba(147,197,253,.1);border-color:rgba(147,197,253,.32)}
.alert{border-radius:12px}
.msg{border-radius:14px}
.lesson-list a{border-radius:10px}
.lesson-list a:hover{background:rgb(var(--pri)/.08);color:var(--pri-t)}
.lesson-list a.on{color:var(--pri-t)}

/* ---------- gentle motion ---------- */
.rv{transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{transform:none}
.flash{background:rgb(var(--pri)/.1);color:var(--ok-t);border-color:rgb(var(--pri)/.35)}

/* ---------- home: "start as" role cards ---------- */
.role-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.role-card{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgb(var(--pri)/.55)}
.role-card .ico{margin-bottom:8px}
.role-card h3{font-size:1.3rem}
.role-card p{color:var(--mute);font-size:.96rem;line-height:1.6}
.role-card .go{margin-top:auto;padding-top:10px;font-weight:600;color:var(--pri-t)}
.role-card:hover .go{text-decoration:underline}
@media(max-width:820px){.role-strip{grid-template-columns:1fr}}

/* ---------- print: always light, no navy blocks ---------- */
@media print{
  html[data-theme="dark"]{--bg:#fff;--surface:#fff;--surface-2:#f1f4f8;--ink:#0B1B33;--strong:#0B1B33;--soft:#33425B;--mute:#5B6B82;--mute2:#6B7A90;--line:rgba(11,27,51,.15);--fg:11 27 51;--scheme:light}
  .theme-toggle{display:none!important}
}