/* KaiOpen v3 — official identity on top of the live week1 homepage.
   Loaded last. Keeps week1's structure; maps its tokens onto the Visual Identity Guide:
   Deep Navy #0B1F3B · Royal Blue #0B6EF6 · Ocean Cyan #00C6E8 · Bright Teal #22D3C5 · Violet #6A2CFF,
   typeface Plus Jakarta Sans. One gradient per screen: the hero headline accent only. */
:root{
  --ko3-navy:#0B1F3B;--ko3-royal:#0B6EF6;--ko3-cyan:#00C6E8;--ko3-teal:#22D3C5;--ko3-violet:#6A2CFF;
  --ko3-grad:linear-gradient(100deg,#6A2CFF 0%,#0B6EF6 38%,#00C6E8 72%,#22D3C5 100%);
  --bg:#06111F;--surface:#0B1F3B;--raised:#112A4D;--ink:#EEF4FC;--muted:#A3B5CC;--line:#1D3557;
  --accent:#00C6E8;--blue:#0B6EF6;--radius:16px;
  --ko-bg:#06111F;--ko-surface:#0B1F3B;--ko-raised:#112A4D;--ko-ink:#EEF4FC;--ko-muted:#A3B5CC;--ko-line:#1D3557;--ko-accent:#00C6E8;
  --ko3-btn:#0B6EF6;--ko3-btn-hover:#2A82FF;--ko3-shadow:0 18px 50px rgba(0,0,0,.35);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme=light]{
  --bg:#F5F8FC;--surface:#FFFFFF;--raised:#EAF1FA;--ink:#0B1F3B;--muted:#4A5B76;--line:#D6E0EC;
  --accent:#0B6EF6;--blue:#0B6EF6;
  --ko-bg:#F5F8FC;--ko-surface:#FFFFFF;--ko-raised:#EAF1FA;--ko-ink:#0B1F3B;--ko-muted:#4A5B76;--ko-line:#D6E0EC;--ko-accent:#0B6EF6;
  --ko3-shadow:0 14px 40px rgba(11,31,59,.10);
}
body,button,input,select,textarea{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
::selection{background:var(--ko3-royal);color:#fff}

/* Header: official logo, light/dark variant */
.header{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand:has(> .ko-logo){display:inline-flex;align-items:center;font-size:0;letter-spacing:0;flex:none}
.ko-logo{display:block;height:38px;width:auto}
.ko-logo-light{display:none}
:root[data-theme=light] .ko-logo-dark{display:none}
:root[data-theme=light] .ko-logo-light{display:block}
/* Header row: one line, one height (40px), one radius. Secondary links live in the ☰ menu. */
.header-inner{gap:16px;min-height:76px}
.desktop-nav{display:flex;align-items:center;gap:2px;margin:0 auto;font-size:14px;font-weight:500;flex-wrap:nowrap}
.desktop-nav a{white-space:nowrap;padding:9px 12px;border-radius:10px;line-height:1}
.desktop-nav a:hover{background:var(--raised);color:var(--ink)}
.id-account-links,.controls{display:flex;align-items:center;gap:8px;flex:none}
.id-account-links a,.control{display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;min-width:40px;padding:0 14px;white-space:nowrap;line-height:1;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);transition:border-color .2s,background .2s}
.id-account-links a:hover,.control:hover{border-color:var(--accent)}
.id-account-links a:last-child{background:var(--ko3-btn);border-color:var(--ko3-btn);color:#fff}
.id-account-links a:last-child:hover{background:var(--ko3-btn-hover);border-color:var(--ko3-btn-hover)}
.controls button.control,.controls a.control[href="search.html"]{padding:0;width:40px}
.id-account-links a[href*="area=donate"],.controls a.control:not([href="search.html"]){display:none}
.menu-button{display:inline-flex}
.mobile-nav{padding-top:8px}
.mobile-nav a{border-radius:10px}
.mobile-nav a:hover{background:var(--raised)}
/* account.css hides the text nav below 1200px (☰ takes over): push the buttons right there. */
@media (max-width:1200px){.id-account-links{margin-left:auto}}
@media (max-width:600px){.id-account-links a:not(:last-child){display:none}}
@media (max-width:420px){.header-inner{gap:6px}.id-account-links,.controls{gap:6px}.id-account-links a,.control{height:36px;min-height:36px;min-width:36px;padding:0 10px;font-size:12px}.controls button.control{width:36px;padding:0}.ko-logo{height:26px}.header .header-inner{padding-left:16px;padding-right:16px}.id-account-links a{padding:0 8px}}
/* Very narrow phones: language switch moves out of the bar (VI is the default). */
@media (max-width:370px){#language{display:none}}

/* Type: brand weights, readable sizes */
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--accent)}
.hero h1{font-weight:700;letter-spacing:-.045em;font-size:clamp(38px,4.9vw,72px)}
.hero h1 span{background:var(--ko3-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17px;max-width:470px;line-height:1.7}
.hero-meta{font-size:11px;font-weight:500}
.dot{background:var(--ko3-teal)}
.section-heading h2,h2.big,.vision-intro h2{font-weight:700;letter-spacing:-.035em}
.section-heading>p{font-size:15px;line-height:1.7;max-width:400px}
.index,.hero-bottom{font-size:11px}

/* Buttons: solid Royal Blue primary; the gradient stays on the headline */
.button{border-radius:12px;font-size:13px;font-weight:600;padding:13px 20px;transition:background .2s,border-color .2s,transform .2s}
.button:hover{transform:translateY(-1px)}
.button.primary{background:var(--ko3-btn);border-color:var(--ko3-btn);color:#fff}
.button.primary:hover{background:var(--ko3-btn-hover);border-color:var(--ko3-btn-hover)}

/* Hero art glow in brand blue */
.hero-art:after{background:radial-gradient(ellipse,rgba(11,110,246,.22),transparent 65%)}
.art-label{font-family:inherit}

/* Ecosystem map */
.map-layout,.apps-grid,.knowledge-grid{border-radius:20px;overflow:hidden}
.map-canvas{background:radial-gradient(ellipse at 50% 45%,rgba(11,110,246,.14),transparent 70%)}
.network{color:var(--ko3-royal);opacity:.45}
.node{border-radius:14px;background:var(--surface);transition:border-color .2s,background .2s,transform .2s}
.node:hover{transform:translate(-50%,calc(-50% - 2px))}
.node:hover,.node[aria-pressed=true]{border-color:var(--ko3-cyan);background:var(--raised)}
.node[aria-pressed=true]:after{background:var(--ko3-cyan)}
.node strong{font-size:12px;font-weight:700}
.node small{font-size:10px}
.map-center{border-color:var(--ko3-royal)}
.map-detail h3{font-weight:700;letter-spacing:-.02em}
.map-detail p{font-size:14px;line-height:1.7}
.status{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ko3-teal)}
:root[data-theme=light] .status{color:#0A8F84}
.source-note{font-size:12px}

/* Apps hub (Estimate, Master Build, Office) */
.app-card{transition:background .2s}
.app-card:hover{background:var(--raised)}
.app-card.featured{background:linear-gradient(150deg,var(--raised),var(--surface))}
.app-card h3{font-weight:700;letter-spacing:-.02em}
.app-card p{font-size:14px;line-height:1.7}
.mini-estimate{border-radius:12px;background:var(--bg)}
.mini-estimate b{font-weight:700}
.mini-bars i{background:var(--ko3-royal);opacity:.85;border-radius:3px 3px 0 0}
.mini-bars i:nth-child(2n){background:var(--ko3-cyan)}
.app-glyph{color:var(--ko3-royal)}
.app-card.master-build-card{border-radius:20px}
.master-build-symbol{color:var(--ko3-cyan);border-radius:16px}

/* Knowledge, community, vision */
.knowledge-card h3,.community-item h3,.roadmap h3{font-weight:700;letter-spacing:-.01em}
.knowledge-card p,.community-item p,.roadmap p,.vision-intro p,.community>div>p{font-size:14px;line-height:1.7}
.knowledge-card .number{font-size:12px;font-weight:600}
.text-link{font-size:13px;font-weight:600}
.pill{font-size:10px;font-weight:600;border-radius:999px}
.arrow{border-radius:999px}
.community-item>span{color:var(--ko3-cyan)}
.roadmap small{font-size:11px;font-weight:700;color:var(--ko3-teal)}
:root[data-theme=light] .roadmap small{color:#0A8F84}
.vision{background:radial-gradient(ellipse at 100% 0,rgba(106,44,255,.12),transparent 55%)}
.technical{border-radius:14px}

/* Footer */
.footer p,.footer-links{font-size:13px}
.footer-bottom{font-size:11px}
.modal{border-radius:20px}

/* Phone: links in the header (Office, Note, Trợ giúp, search) already sit in the ☰ menu. */
@media (max-width:600px){.ko-logo{height:30px}.controls a.control{display:none}.header-inner{gap:10px}}
@media (prefers-reduced-motion:reduce){.button,.node{transition:none}.button:hover,.node:hover{transform:none}}

/* ===== Other page families (v3 rollout) ===== */

/* Account, help, search, content, membership, admin: week1 tokens already mapped above. */
.id-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.id-nav a{white-space:nowrap;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted)}
.id-nav a:hover,.id-nav a[aria-current]{background:var(--raised);color:var(--ink)}
header.header-inner{min-height:76px}
@media (max-width:600px){.id-nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none}.id-nav::-webkit-scrollbar{display:none}.id-nav a{padding:8px 10px;font-size:13px}}
.id-main h1,main h1{letter-spacing:-.035em}

/* Academy + CME course pages (body.cme): same palette, light/dark via data-appearance. */
body.cme{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:#06111F;color:#EEF4FC;--panel:#0B1F3B;--line:#1D3557;--muted:#A3B5CC;--accent:#00C6E8}
html[data-appearance=light] body.cme{background:#F5F8FC;color:#0B1F3B;--panel:#FFFFFF;--line:#D6E0EC;--muted:#4A5B76;--accent:#0B6EF6}
body.cme>header{position:sticky;top:0;z-index:10;max-width:none;min-height:76px;padding-top:14px;padding-bottom:14px;background:color-mix(in srgb,#06111F 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-appearance=light] body.cme>header{background:color-mix(in srgb,#F5F8FC 82%,transparent)}
body.cme header nav{align-items:center;gap:4px}
body.cme header nav a{text-decoration:none;white-space:nowrap;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted)}
body.cme header nav a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:inherit}
body.cme .official-brand img{background:none;padding:0;border-radius:0;width:auto;height:38px;max-height:none}
body.cme h1{font-weight:700;letter-spacing:-.04em}
body.cme h1 em{background:var(--ko3-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body.cme h2,body.cme h3{letter-spacing:-.02em}
body.cme .eyebrow{color:var(--accent)}
body.cme .button{background:var(--ko3-btn);color:#fff;border-radius:12px;padding:13px 22px}
body.cme .button:hover{background:var(--ko3-btn-hover)}
body.cme .card,body.cme details,body.cme .notice,body.cme .hero-panel,body.cme .empty,body.cme .slide-note{border-radius:16px}
body.cme .card{transition:transform .2s,border-color .2s}
body.cme a.card:hover{transform:translateY(-2px)}
body.cme .hero-panel{background:linear-gradient(140deg,#112A4D,#0B1F3B)}
html[data-appearance=light] body.cme .hero-panel{background:linear-gradient(140deg,#EAF3FF,#F4FBFE)}
body.cme .flow span{border-color:var(--line)}
body.cme figure img,body.cme .course-cover img{border-radius:12px}
body.cme .slide-index a{border-radius:8px}
body.cme .notice{border-left-color:var(--ko3-cyan)}
body.cme .lesson-layout aside nav a{border-radius:8px}
body.cme .lesson-layout aside nav a[aria-current]{border-left:0;box-shadow:inset 3px 0 0 var(--accent)}
@media print{body.cme{background:#fff;color:#000;--panel:#fff;--line:#aaa;--muted:#333}body.cme>header{position:static}}

/* MS Project course (body.ko-academy, --ko-* tokens). */
body.ko-academy{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body.ko-academy a{color:var(--ko-accent)}
body.ko-academy header{min-height:76px;background:color-mix(in srgb,var(--ko-bg) 82%,transparent);border-color:var(--ko-line)}
body.ko-academy header a{white-space:nowrap}
body.ko-academy .brand{color:inherit}
body.ko-academy .eyebrow,body.ko-academy .lesson-meta{color:var(--ko-accent)}
body.ko-academy aside nav a{color:var(--ko-muted);border-radius:8px}
body.ko-academy aside nav a:hover,body.ko-academy aside nav a:focus-visible{background:var(--ko-raised);color:var(--ko-ink)}
body.ko-academy .hero{border-color:var(--ko-line)}
body.ko-academy h1{letter-spacing:-.04em}

/* Course pages: course.css forces `.official-brand img{display:block}`; restate the light/dark logo switch. */
.official-brand .ko-logo-light{display:none}
:root[data-theme=light] .official-brand .ko-logo-dark,html[data-appearance=light] .official-brand .ko-logo-dark{display:none}
:root[data-theme=light] .official-brand .ko-logo-light,html[data-appearance=light] .official-brand .ko-logo-light{display:block}
/* MS Project on phones: the 1-column grid and 2-column lesson list must be allowed to shrink (was 545px wide). */
@media (max-width:850px){body.ko-academy .layout{grid-template-columns:minmax(0,1fr)}body.ko-academy aside{min-width:0}body.ko-academy aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}body.ko-academy aside nav a{min-width:0;overflow-wrap:anywhere}body.ko-academy aside nav a span{flex:none;white-space:nowrap}}
/* CME header on phones: logo + 3 links must fit; the link row scrolls instead of pushing the page wider. */
@media (max-width:560px){body.cme>header{gap:10px;padding-left:16px;padding-right:16px}body.cme header nav{min-width:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}body.cme header nav::-webkit-scrollbar{display:none}body.cme header nav a{padding:8px 8px;font-size:13px}body.cme .official-brand .ko-logo{height:28px}}