
:root{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,sans-serif;color:#1c2a39;background:#f4f6f9}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#0b1d32;color:#d7e2ef;padding:24px 14px;position:sticky;top:0;height:100vh;flex-shrink:0}.brand{display:flex;gap:10px;align-items:center;padding:0 10px 27px;font-weight:800;color:white;font-size:19px}.mark{background:linear-gradient(135deg,#20c2b9,#d4ae54);padding:9px;border-radius:12px;color:#081729}.brand small{display:block;font-weight:400;font-size:11px;color:#91a6ba}.navbtn{display:flex;width:100%;align-items:center;gap:13px;background:transparent;border:0;color:#b9cadc;text-align:left;border-radius:9px;padding:13px 12px;margin:3px 0}.navbtn:hover,.navbtn.active{background:#1c3856;color:white}.navbtn.active{border-left:3px solid #d4ae54}.sidefoot{position:absolute;bottom:20px;left:20px;right:20px;font-size:12px;color:#a5b7cc;border-top:1px solid #2d4259;padding-top:15px}.workspace{flex:1;min-width:0}.topbar{height:74px;background:#fff;border-bottom:1px solid #e2e8ef;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar .right{display:flex;gap:12px;align-items:center}.tag{display:inline-flex;gap:5px;align-items:center;border-radius:100px;padding:5px 9px;font-size:11px;font-weight:700;background:#eef2f7;color:#516478}.tag.gold{background:#f8efda;color:#876016}.tag.teal{background:#e0f4f0;color:#08786f}.tag.red{background:#fbe6e5;color:#b63a3a}.tag.blue{background:#eaf1fb;color:#365c9b}.main{padding:30px 34px;max-width:1600px;margin:auto}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}h1{font-size:27px;margin:0 0 6px;letter-spacing:-.7px}h2{font-size:17px;margin:0 0 14px}h3{font-size:14px;margin:0 0 10px}.sub{color:#708092;margin:0;font-size:13px;line-height:1.6}.btn{background:#fff;color:#233a4e;border:1px solid #d8e1ea;padding:10px 14px;border-radius:9px;font-weight:650;font-size:13px}.btn:hover{border-color:#bd9344}.btn.primary{background:#0e3047;color:white;border-color:#0e3047}.btn.gold{background:#cba34a;border-color:#cba34a;color:#16273a}.btn.sm{padding:7px 10px;font-size:12px}.btn.danger{color:#b12f35}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.card{background:white;border:1px solid #e0e7ed;border-radius:13px;padding:21px;box-shadow:0 3px 15px #1c324307}.kpi .value{font-size:27px;font-weight:800;margin:6px 0;color:#152c44}.kpi .label{font-size:12px;color:#718193}.split{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;color:#78899b;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:12px 10px;border-bottom:1px solid #e6edf2}td{padding:15px 10px;border-bottom:1px solid #edf1f5;font-size:13px;vertical-align:middle}tr:last-child td{border-bottom:0}tr[data-open]{cursor:pointer}tr[data-open]:hover{background:#f8fafc}.strong{font-weight:750;color:#223449}.muted{color:#8090a0}.filters{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}.field{padding:10px 12px;border:1px solid #d5dfe7;border-radius:9px;background:#fff;color:#203248;min-width:0}.search{min-width:240px;flex:1}.empty{padding:42px 20px;text-align:center;color:#8190a0}.task{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #edf1f5}.task:last-child{border-bottom:0}.task-main{flex:1;min-width:0}.task-title{font-size:13px;font-weight:730}.task-meta{font-size:12px;color:#718193;margin-top:5px}.accountgrid{grid-template-columns:minmax(0,2fr) minmax(285px,1fr)}.stack{display:grid;gap:16px}.kv{display:grid;grid-template-columns:125px 1fr;gap:10px;font-size:13px;padding:9px 0;border-bottom:1px solid #edf1f4}.kv span:first-child{color:#8391a0}.tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid #e5ebf1;margin-bottom:17px;padding-bottom:9px}.tab{background:transparent;border:0;padding:9px 13px;color:#718295;border-radius:8px;font-size:13px;font-weight:650}.tab.active{color:#183752;background:#eaf0f5}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.formgroup{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#607185;font-weight:650}.formgroup.full{grid-column:1/-1}.formgroup input,.formgroup select,.formgroup textarea{width:100%;padding:10px 11px;border:1px solid #d8e1e9;border-radius:8px;background:white;color:#1c3145}.formgroup textarea{min-height:94px;resize:vertical}.modalshade{position:fixed;inset:0;background:#061624a8;display:grid;place-items:center;padding:15px;z-index:10}.modal{width:min(660px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:16px;padding:26px;box-shadow:0 25px 80px #0004}.modalhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modalhead h2{margin-bottom:3px}.modalactions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.iconbtn{border:0;background:#eff3f7;border-radius:8px;padding:7px 11px}.toast{position:fixed;bottom:20px;right:20px;background:#153b4d;color:white;border-radius:10px;padding:13px 18px;box-shadow:0 10px 30px #07152544;z-index:20;font-size:13px}.note{background:#f7f1df;padding:12px;border:1px solid #e9d9a6;border-radius:9px;color:#705721;font-size:12px;line-height:1.6}.small{font-size:12px}.progress{background:#edf1f4;height:7px;border-radius:20px;overflow:hidden}.progress b{display:block;background:#17a69d;height:100%}.bullet{padding:10px 0;border-bottom:1px solid #edf1f5;font-size:13px;line-height:1.6}.bullet:last-child{border-bottom:0}.sectioncap{font-size:11px;letter-spacing:.08em;color:#8b9aaa;font-weight:800;text-transform:uppercase;margin-bottom:12px}@media(max-width:1000px){.sidebar{width:76px}.sidebar .txt,.brand .word,.sidefoot{display:none}.navbtn{justify-content:center}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.accountgrid{grid-template-columns:1fr}}@media(max-width:650px){.shell{display:block}.sidebar{position:relative;width:100%;height:auto;display:flex;align-items:center;padding:8px;overflow:auto;gap:4px}.brand{padding:0 8px}.sidebar nav{display:flex;flex:1}.navbtn{width:auto;padding:10px}.topbar{padding:0 15px;height:58px}.main{padding:22px 15px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.formgrid{grid-template-columns:1fr}.formgroup.full{grid-column:auto}.topbar .right .tag{display:none}h1{font-size:22px}}

/* v2 additions */
textarea{line-height:1.55} .modal{max-height:91vh;overflow-y:auto} .tabs{flex-wrap:wrap} .tabs .tab{white-space:nowrap} .formgrid .full textarea{width:100%} .kv small{font-size:11px;color:#8190a1} @media(max-width:800px){.tabs{gap:4px}}

/* V3 GUIDED EXPERIENCE */
:root{--navy:#0b2039;--gold:#cba34a;--line:#dfe7ee}
.sidebar{width:268px;padding:22px 13px;box-shadow:5px 0 22px #102d4510;z-index:7}.brand{border-bottom:1px solid #29415a;padding-bottom:20px;margin-bottom:19px}.sidebar nav{display:grid;gap:4px}.navbtn{min-height:45px;position:relative}.navbtn .txt{font-size:13px}.navbtn.active{background:#294360;border-left:0;box-shadow:inset 3px 0 #d3ad54}.navbtn:focus-visible,.btn:focus-visible,.tab:focus-visible{outline:3px solid #cba34a;outline-offset:2px}
.navsection{color:#88a5bf;text-transform:uppercase;font-size:10px;letter-spacing:.13em;font-weight:800;margin:18px 12px 6px}.sidefoot{position:static;margin:28px 9px 0;padding-top:15px;line-height:1.6}.sidebar{height:100vh;overflow-y:auto}.workspace{background:#f5f7fa}.topbar{height:auto;min-height:75px;padding:12px 32px;flex-wrap:wrap}.breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:#64788e}.crumb{border:0;background:none;color:#315571;font-size:12px;cursor:pointer;padding:5px 0}.crumb.current{font-weight:750;color:#142d47}.crumbsep{color:#b3bfcc}.top-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.main{padding-top:22px}.introbar{background:#fff;border:1px solid #e1e8f0;border-radius:14px;padding:16px 20px;margin-bottom:20px;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}.introbar strong{color:#163a51}.introbar p{font-size:12px;color:#718295;margin:3px 0 0}.howto{border:1px solid #e7d9b4;background:#fff9e9;border-radius:12px;padding:17px 19px;margin:0 0 20px}.howto h3{font-size:14px;color:#654d19}.howto p{margin:5px 0 11px;font-size:13px;color:#536476}.howto .btn{margin-right:8px}.journey{background:#fff;border:1px solid #dde7ef;border-radius:14px;padding:19px;margin-bottom:17px}.journeyhead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:16px}.journeyhead h2{margin:0}.journeysteps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.journeystep{background:#f4f7f9;border:1px solid #e3e9ef;border-radius:9px;padding:11px 6px;color:#51667a;text-align:center;font-size:11px;font-weight:700;min-width:0}.journeystep .round{display:block;width:23px;height:23px;line-height:22px;border-radius:50%;background:#e5edf3;margin:0 auto 7px}.journeystep.done .round{background:#d7eee9;color:#08766d}.journeystep.done{border-color:#b5ded4}.journeystep.current{background:#fff8e6;border-color:#d7ad51;color:#573d0b;box-shadow:0 0 0 1px #d7ad5160}.journeystep.current .round{background:#cba34a;color:#fff}.nextpanel{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;background:#102b43;color:#fff;border-radius:13px;padding:19px 23px;margin:16px 0}.nextpanel h3{color:#e7ba59;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.nextpanel p{margin:7px 0 0;color:#e5edf5;font-size:14px}.nextpanel .btn{background:#d1aa57;border-color:#d1aa57;color:#162a3a}.nextpanel .btn:hover{background:#e5c377}.hintline{color:#718296;font-size:12px;margin-top:8px}.mobilemenu{display:none}.compact{font-size:12px}.account-select{max-width:220px}.starter{border:1px solid #d7e3eb;background:#f6fafc;border-radius:12px;padding:18px;margin-bottom:16px}.starter h2{margin-bottom:6px}
@media(max-width:1050px){.sidebar{width:245px}.sidebar .txt,.brand .word,.sidefoot{display:block}.navbtn{justify-content:flex-start}.split,.accountgrid{grid-template-columns:1fr}.journeysteps{grid-template-columns:repeat(4,1fr)}}
@media(max-width:740px){.shell{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(310px,86vw);height:100vh;transform:translateX(-105%);transition:transform .2s ease;display:block;overflow:auto;padding:20px 13px}.sidebar.open{transform:translateX(0)}.sidebar nav{display:grid}.navbtn{width:100%;justify-content:flex-start}.sidebar .txt,.brand .word,.sidefoot{display:block}.mobilemenu{display:inline-flex}.menuveil{position:fixed;inset:0;background:#03132199;z-index:6}.topbar{padding:12px 15px}.main{padding:16px 12px}.journeysteps{grid-template-columns:repeat(2,1fr)}.journeystep{padding:8px 4px}.account-select{max-width:140px}.introbar{padding:12px}.heading h1{font-size:23px}.top-meta .tag{display:inline-flex!important}}

/* v4: teach by doing */
.demo-banner{background:linear-gradient(120deg,#102d4a,#21455e);border-radius:14px;padding:18px 22px;color:white;margin:0 0 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.demo-banner strong{font-size:16px}.demo-banner p{margin:6px 0 0;color:#cad8e4;font-size:12px;max-width:690px;line-height:1.6}
.demo-banner .btn{background:#e0b758;color:#102438;border-color:#e0b758}
.learning{background:#fff;border:1px solid #dce6ef;border-radius:14px;padding:20px;margin:18px 0;box-shadow:0 4px 17px #1634520a}
.learning h2{margin:0 0 5px}.learning ol{margin:9px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.learning li{min-width:0}.learning li button{min-height:95px;text-align:left;width:100%;background:#f7f9fc;border:1px solid #dfE7ef;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;justify-content:flex-start;color:#243b51}
.learning li button.on{background:#fff8e9;border:2px solid #c89d42;padding:9px}.learning li button .num{height:23px;width:23px;display:grid;place-items:center;border-radius:50%;background:#e3eaf2;font-size:11px;font-weight:800}
.learning li button.on .num{background:#c9a251;color:#1b2e3e}.learning li button .stepname{font-weight:750;font-size:12px}.learning .teach{background:#eff5f9;border-left:4px solid #d0a54b;padding:18px 19px;border-radius:10px;margin-top:13px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.learning .teach b{display:block;font-size:15px;margin-bottom:5px}.learning .teach p{margin:0 0 7px;font-size:13px;line-height:1.6;color:#43576a}.learning .teach small{font-size:11px;color:#748598}.learning .teach .btn{flex-shrink:0}
.demo-card{border-left:4px solid #d3ae55}.demo-card .example-label{font-size:11px;color:#8a691e;font-weight:800;letter-spacing:.08em}
@media(max-width:1100px){.learning ol{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.learning ol{grid-template-columns:repeat(2,minmax(0,1fr))}.learning .teach{display:block}.learning .teach .btn{margin-top:12px}.demo-banner{display:block}.demo-banner .btn{margin-top:12px}}

/* ===== V5 additions ===== */
.authwrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0b1d32,#163a51);padding:20px}
.authcard{width:min(440px,100%);background:#fff;border-radius:16px;padding:30px;box-shadow:0 25px 80px #0006}
.authlogo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;color:#0b1d32;margin-bottom:18px}
.authlogo small{display:block;font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6a7d90}
.authlogo .mark{background:linear-gradient(135deg,#2ABFBF,#D4AF37);padding:10px 13px;border-radius:12px;color:#081729}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.bcol{background:#eef2f6;border:2px solid transparent;border-radius:12px;padding:10px;min-height:220px}
.bcol.over{border-color:#D4AF37;background:#fbf4de}
.bhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kcard{background:#fff;border:1px solid #dfe7ee;border-radius:10px;padding:11px;margin-bottom:9px;cursor:grab;box-shadow:0 2px 8px #1c324308}
.kcard:active{cursor:grabbing}
.linkbtn{background:none;border:0;padding:0;font-weight:750;color:#163a51;font-size:14px;text-align:left}
.linkbtn:hover{text-decoration:underline}
.kmove{width:100%;margin-top:8px;padding:6px 8px;font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.formgroup input[type=checkbox]{width:auto}
code{background:#eef2f6;padding:2px 6px;border-radius:5px;font-size:12px}
@media(max-width:900px){.grid[style*="230px"]{grid-template-columns:1fr!important}}
