/* ============================================================ Mclever Enterprise University — Design tokens & components Palette: "Indigo Momentum" (v0.6, MV req 2026-08-18) — indigo→violet gradient system, Plus Jakarta Sans headings + Inter body, full dark-mode support via html[data-theme="dark"]. Per-role accent colors are still layered on top at runtime (see meu-shell.js ROLES[].ac / .acDark) — these tokens are the shared chrome + the default/fallback accent before a role is known. Forked from WINVOSYS WMS token base (JAL-WINVOSYS-REFERENCE-INDEX.md). ============================================================ */ /* Self-hosted fonts (was a Google Fonts @import — swapped to local files so the demo loads instantly and works with no internet access, e.g. on a plant network or an offline handoff). Both are variable-font files that cover the full weight range declared below. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/Inter-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:600 800;font-display:swap;src:url('fonts/PlusJakartaSans-latin.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;} :root{ --accent:#4f46e5; --accent-dark:#4338ca; --accent-soft:#eef0fe; --accent-border:#cfd0fa; --navy-1:#1b3e78; --navy-2:#1c4386; --hero-1:#4f46e5; --hero-2:#7c3aed; --green:#10b981; --green-strong:#0ea472; --green-soft:#e6faf3; --green-border:#b9f0da; --green-text:#0a7a55; --amber:#f59e0b; --amber-soft:#fef3e0; --amber-border:#fbdfa8; --amber-text:#92600a; --red:#ef4444; --red-soft:#fdedec; --red-border:#f6c6c3; --red-text:#b42318; --purple:#7643cc; --purple-soft:#f1e9fb; --purple-border:#d6c3f0; --gold:#eab308; --gold-soft:#fdf7de; --gold-border:#f3d98a; --ink:#161a2e; --ink-2:#3c4258; --muted:#6b7290; --muted-2:#9599b3; --line:#e6e7f2; --line-soft:#f0f1f9; --bg:#f5f6fb; --card:#ffffff; --card-soft:#fafaff; --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(23,20,80,.05),0 2px 8px rgba(23,20,80,.06); --shadow-lg:0 12px 28px rgba(23,20,80,.14); --grad-btn:linear-gradient(135deg,#4f46e5,#7c3aed); --grad-btn-hover:linear-gradient(135deg,#4338ca,#6d28d9); --grad-icon:linear-gradient(135deg,#eef0fe,#f3e8ff); --grad-gold:linear-gradient(135deg,#fde68a,#f59e0b); --grad-hero:linear-gradient(120deg,#4f46e5 0%,#7c3aed 55%,#c026d3 130%); --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.09),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.07),transparent),#f5f6fb; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --font-h:'Plus Jakarta Sans',Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-b:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --sidebar-w:248px; --topbar-h:56px; } html[data-theme="dark"]{ --accent:#6f68ef; --accent-dark:#5b52e8; --accent-soft:#1b1f3d; --accent-border:#38397a; --hero-1:#4338ca; --hero-2:#7c3aed; --green:#34d399; --green-strong:#22b881; --green-soft:#0f2b23; --green-border:#175c46; --green-text:#5eead4; --amber:#fbbf24; --amber-soft:#332108; --amber-border:#7a4e0a; --amber-text:#fcd34d; --red:#f87171; --red-soft:#341014; --red-border:#7f1d1d; --red-text:#fca5a5; --purple:#a78bfa; --purple-soft:#211b3d; --purple-border:#453a7a; --gold:#facc15; --gold-soft:#2b2408; --gold-border:#7a5f0a; --ink:#eef0fb; --ink-2:#c3c7de; --muted:#8b90ac; --muted-2:#666c8c; --line:#232a44; --line-soft:#1b2137; --bg:#0b0e1c; --card:#131829; --card-soft:#171d33; --shadow:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 14px 32px rgba(0,0,0,.55); --grad-btn:linear-gradient(135deg,#6f68ef,#9333ea); --grad-btn-hover:linear-gradient(135deg,#5b52e8,#7e22ce); --grad-icon:linear-gradient(135deg,#1b1f3d,#2a1b45); --grad-gold:linear-gradient(135deg,#facc15,#b45309); --grad-hero:linear-gradient(120deg,#4338ca 0%,#7c3aed 55%,#a21caf 130%); --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.16),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.14),transparent),#0b0e1c; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{color-scheme:light} html[data-theme="dark"]{color-scheme:dark} body{font-family:var(--font-b);background:var(--grad-bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease} h1,h2,h3,h4{font-family:var(--font-h)} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} button{font-family:inherit;cursor:pointer} code,.mono{font-family:var(--mono);font-size:12.5px} /* ---------- App frame ---------- */ .app{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:visible;transition:width .18s ease,min-width .18s ease} /* ---------- Sidebar collapse (icon-only rail + hover tooltips) ---------- */ html.sidebar-collapsed{--sidebar-w:66px} .sb-collapse{position:absolute;top:18px;right:-11px;width:22px;height:22px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:10px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:10} .sb-collapse:hover{background:var(--accent-soft);color:var(--accent)} html.sidebar-collapsed .sb-collapse .jic{transform:rotate(180deg)} html.sidebar-collapsed .sb-logo{justify-content:center;padding:14px 8px} html.sidebar-collapsed .sb-logo>div:last-child{display:none} html.sidebar-collapsed .sb-group{display:none} html.sidebar-collapsed .sb-item{justify-content:center;padding:9px;position:relative} html.sidebar-collapsed .sb-item .lbl{display:none} html.sidebar-collapsed .sb-item .cnt{position:absolute;top:5px;right:5px;width:8px;height:8px;min-width:0;padding:0;font-size:0;border-radius:50%} html.sidebar-collapsed .sb-mod{justify-content:center;padding:6px;position:relative} html.sidebar-collapsed .sb-mod .lbl{display:none} html.sidebar-collapsed .sb-switch{padding:9px;position:relative;display:flex;justify-content:center;align-items:center;gap:0} html.sidebar-collapsed .sb-switch .lbl{display:none} html.sidebar-collapsed .sb-item:hover:after, html.sidebar-collapsed .sb-mod:hover:after, html.sidebar-collapsed .sb-switch:hover:after{ content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px; background:var(--ink);color:var(--bg);padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600; white-space:nowrap;box-shadow:var(--shadow-lg);z-index:100;pointer-events:none} html.sidebar-collapsed .sb-item:hover:before, html.sidebar-collapsed .sb-mod:hover:before, html.sidebar-collapsed .sb-switch:hover:before{ content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px; border:6px solid transparent;border-right-color:var(--ink);z-index:100;pointer-events:none} .sb-logo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)} .sb-logo .mark{width:34px;height:34px;border-radius:9px;background:var(--grad-btn);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.5px;font-family:var(--font-h);box-shadow:var(--shadow)} .sb-logo .t1{font-weight:800;font-size:14.5px;letter-spacing:.2px;font-family:var(--font-h)} .sb-logo .t1 .lt{color:#93b6ee} .sb-logo .t2{font-size:10.5px;color:var(--muted)} .sb-nav{flex:1;padding:10px 12px 4px} .sb-group{margin:14px 4px 6px;font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--muted-2);text-transform:uppercase} .sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:13.5px;margin-bottom:2px} .sb-item .ic{width:18px;text-align:center;font-size:14px;opacity:.85} .sb-item:hover{background:var(--line-soft);text-decoration:none} .sb-item.active{background:var(--grad-btn);color:#fff;font-weight:600;box-shadow:var(--shadow)} .sb-item.active .ic{opacity:1} .sb-item .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px} .sb-item.active .cnt{background:rgba(255,255,255,.25)} .sb-foot{padding:12px;border-top:1px solid var(--line-soft)} .sb-switch{display:block;text-align:center;border:1px solid var(--accent-border);color:var(--accent);border-radius:var(--r-sm);padding:9px 10px;font-weight:600;font-size:13px;background:var(--card)} .sb-switch:hover{background:var(--accent-soft);text-decoration:none} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:40} .tb-module{background:var(--grad-btn);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.4px;border-radius:99px;padding:5px 14px;font-family:var(--font-h)} .tb-plant{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-weight:600;font-size:13px;color:var(--ink-2);background:var(--card)} .tb-right{margin-left:auto;display:flex;align-items:center;gap:14px} .tb-live{display:flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid var(--green-border);color:var(--green-text);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:600} .tb-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite} .tb-theme{position:relative;width:32px;height:32px;border-radius:50%;font-size:15px;color:var(--ink-2);background:var(--line-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .tb-theme:hover{background:var(--accent-soft);color:var(--accent)} .tb-bell{position:relative;font-size:17px;color:var(--ink-2);background:none;border:none} .tb-bell .n{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 5px} .tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-btn);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;border:none;font-family:var(--font-h)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .content{padding:18px 24px 90px;max-width:1560px;width:100%} .crumb{font-size:12px;color:var(--muted);margin-bottom:10px} .crumb b{color:var(--ink-2);font-weight:600} .page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap} .page-head h1{font-family:var(--font-h);font-size:25px;font-weight:800;letter-spacing:-.3px;color:var(--ink)} .page-head .sub{color:var(--muted);font-size:13.5px;margin-top:3px} .page-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-sm);padding:8px 15px;font-size:13px;font-weight:600;border:1px solid transparent;white-space:nowrap;transition:filter .15s,transform .1s} .btn:not([disabled]):hover{filter:brightness(1.05)} .btn:not([disabled]):active{transform:translateY(1px)} .btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow)} .btn-primary:hover{background:var(--grad-btn-hover);filter:none} .btn-green{background:linear-gradient(135deg,var(--green-strong),var(--green));color:#fff;box-shadow:var(--shadow)} .btn-amber{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:var(--shadow)} .btn-red{background:linear-gradient(135deg,var(--red),#b91c1c);color:#fff;box-shadow:var(--shadow)} .btn-outline{background:var(--card);color:var(--ink-2);border-color:var(--line)} .btn-outline:hover{background:var(--line-soft)} .btn-outline-accent{background:var(--card);color:var(--accent);border-color:var(--accent-border)} .btn-outline-accent:hover{background:var(--accent-soft)} .btn-ghost{background:none;color:var(--muted);border:none} .btn-lg{padding:13px 26px;font-size:15px;border-radius:10px} .btn-sm{padding:4px 10px;font-size:12px;border-radius:7px} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ---------- Cards ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .card-p{padding:16px 18px} .card-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-soft);font-weight:700;font-size:14px;font-family:var(--font-h)} .card-h .hint{font-weight:500;color:var(--muted);font-size:12.5px;font-family:var(--font-b)} .card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center} .grid{display:grid;gap:14px} /* ---------- Alert banners ---------- */ .banner{display:flex;gap:12px;border-radius:10px;padding:12px 16px;margin-bottom:12px;border:1px solid;border-left-width:4px;font-size:13px} .banner .bi{font-size:15px;margin-top:1px} .banner b.title{display:block;font-size:13.5px;margin-bottom:2px} .banner .close{margin-left:auto;background:none;border:none;color:inherit;opacity:.5;font-size:15px} .banner .act{font-weight:600} .banner-red{background:var(--red-soft);border-color:var(--red-border);border-left-color:var(--red);color:var(--red-text)} .banner-amber{background:var(--amber-soft);border-color:var(--amber-border);border-left-color:var(--amber);color:var(--amber-text)} .banner-blue{background:var(--accent-soft);border-color:var(--accent-border);border-left-color:var(--accent);color:var(--accent)} .banner-green{background:var(--green-soft);border-color:var(--green-border);border-left-color:var(--green);color:var(--green-text)} /* ---------- KPI cards ---------- */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:16px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:13px 15px;position:relative;overflow:hidden} .kpi:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-btn)} .kpi .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px} .kpi .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--grad-icon);color:var(--accent)} .kpi .num{font-family:var(--font-h);font-size:24px;font-weight:800;letter-spacing:-.5px} .kpi .num small{font-size:13px;font-weight:600;color:var(--muted);font-family:var(--font-b)} .kpi .lbl{color:var(--muted);font-size:12.5px;margin-top:1px} .kpi .delta{font-size:11.5px;font-weight:600;margin-top:6px} .kpi .delta.up{color:var(--green)} .kpi .delta.down{color:var(--red)} .kpi .delta.flat{color:var(--muted)} .info-i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);color:var(--muted-2);font-size:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--card);cursor:help;position:relative;font-style:normal} .info-i:hover .tip{display:block} .info-i .tip{display:none;position:absolute;top:20px;right:-8px;z-index:60;background:#161a2e;color:#e2e8f0;border-radius:8px;padding:9px 12px;width:230px;font-size:11.5px;line-height:1.5;text-align:left;box-shadow:var(--shadow-lg)} /* ---------- Chips & badges ---------- */ .chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:600;border:1px solid transparent} .chip-green{background:var(--green-soft);color:var(--green-text);border-color:var(--green-border)} .chip-amber{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-border)} .chip-red{background:var(--red-soft);color:var(--red-text);border-color:var(--red-border)} .chip-blue{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)} .chip-purple{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-border)} .chip-gray{background:var(--line-soft);color:var(--muted)} .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor} /* Packaging state chips (Jaleca-specific) */ .st-sealed{background:var(--green-soft);color:var(--green-text);border-color:var(--green-border)} .st-opened{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)} .st-partial{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-border)} .st-loose{background:var(--line-soft);color:var(--muted)} /* ---------- Filter bar ---------- */ .filterbar{display:flex;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:16px} .f-field{display:flex;flex-direction:column;gap:4px;min-width:150px} .f-field label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px} .f-field select,.f-field input{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;font-family:inherit;background:var(--card);color:var(--ink)} .f-field select:focus,.f-field input:focus{outline:2px solid var(--accent-border)} /* ---------- Tables ---------- */ .tbl-wrap{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{background:var(--card-soft);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle} .tbl tr:hover td{background:var(--card-soft)} .tbl tr.row-amber td{background:var(--amber-soft)} .tbl tr.row-red td{background:var(--red-soft)} .tbl tr.row-green td{background:var(--green-soft)} .tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums} .tbl .id-link{font-weight:600} .tbl-foot{padding:10px 14px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line-soft)} /* ---------- Tabs ---------- */ .tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:14px;overflow-x:auto} .tab{border:none;background:none;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap} .tab:hover{color:var(--ink-2)} .tab.active{color:var(--accent);border-bottom-color:var(--accent)} .tab .cnt{background:var(--line-soft);color:var(--ink-2);border-radius:99px;font-size:11px;padding:1px 7px;margin-left:5px;font-weight:700} .tab.warn .cnt{background:var(--amber-soft);color:var(--amber-text)} /* ---------- Stat strip (map header style) ---------- */ .statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px} .stat .v{font-size:21px;font-weight:800} .stat .k{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-top:1px} .stat .bar{height:4px;border-radius:99px;background:var(--line-soft);margin-top:7px;overflow:hidden} .stat .bar i{display:block;height:100%;border-radius:99px} /* ---------- Bin grid (warehouse map) ---------- */ .bin{border:1.5px solid;border-radius:8px;padding:6px 7px;font-size:10.5px;text-align:center;cursor:pointer;background:var(--card);min-width:76px} .bin .bc{font-weight:700;font-size:10.5px} .bin .bi2{color:var(--muted);font-size:10px} .bin .bq{font-weight:700;font-size:11px} .bin-available{border-color:#86dd8f;background:#f2fcf3;color:#166534} .bin-occupied{border-color:#7fa8ec;background:#eff4fe;color:#1e40af} .bin-reserved{border-color:#eec37a;background:#fdf7e7;color:#92600a} .bin-full{border-color:#f19a9a;background:#fdf0f0;color:#991b1b} .bin-quarantine{border-color:#c4a7ee;background:#f6f0fd;color:#6b21a8} .bin-na{border-color:var(--line);background:#f5f6f8;color:var(--muted-2)} .bin.target{border-width:2.5px;border-color:var(--accent);animation:binpulse 1.5s infinite} @keyframes binpulse{0%,100%{box-shadow:0 0 0 0 rgba(15,90,207,.35)}50%{box-shadow:0 0 0 6px rgba(15,90,207,0)}} /* ---------- Detail side panel ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .panel .p-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-soft);font-weight:800;font-size:15px} .p-sec{padding:12px 16px;border-bottom:1px solid var(--line-soft)} .p-sec .p-t{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:8px} .kv{display:flex;justify-content:space-between;gap:10px;padding:3.5px 0;font-size:13px} .kv .k{color:var(--muted)} .kv .v{font-weight:600;text-align:right} /* ---------- Hero card ---------- */ .hero{background:var(--grad-hero);color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:14px;position:relative;overflow:hidden} .hero:after{content:'';position:absolute;inset:0;background:radial-gradient(420px 200px at 92% -30%,rgba(255,255,255,.22),transparent)} .hero>*{position:relative;z-index:1} .hero h2{font-family:var(--font-h);font-size:20px;font-weight:800;margin-bottom:9px} .hero .meta{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;opacity:.95} .hero .meta b{font-weight:700} /* ---------- Instruction card ---------- */ .instruct{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:var(--r);padding:15px 18px;margin-bottom:14px} .instruct .i-t{color:var(--accent);font-weight:700;font-size:13.5px;margin-bottom:10px;font-family:var(--font-h)} .i-step{display:flex;gap:11px;margin-bottom:9px;font-size:13.5px;align-items:flex-start} .i-step .n{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--grad-btn);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px} .i-note{display:flex;gap:9px;background:var(--accent-soft);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--accent);margin-top:10px} /* ---------- Sticky footer ---------- */ .sticky-foot{position:fixed;left:var(--sidebar-w);right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,23,42,.06);display:flex;align-items:center;gap:12px;padding:11px 24px;z-index:50;font-size:12.5px;color:var(--muted)} .sticky-foot .acts{margin-left:auto;display:flex;gap:9px} /* ---------- Demo scenarios box ---------- */ .demo-box{border:1.5px dashed var(--accent-border);background:var(--accent-soft);border-radius:var(--r);padding:14px 16px;margin-top:16px} .demo-box .d-t{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin-bottom:10px} .demo-box .btns{display:flex;gap:9px;flex-wrap:wrap} /* ---------- Charts (hand-drawn, no libs) ---------- */ .donut{position:relative;width:150px;height:150px;border-radius:50%;margin:0 auto} .donut .hole{position:absolute;inset:22%;background:var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center} .donut .hole .hv{font-size:19px;font-weight:800} .donut .hole .hk{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .legend{display:flex;flex-direction:column;gap:6px;font-size:12.5px} .legend .li{display:flex;align-items:center;gap:8px} .legend .sw{width:10px;height:10px;border-radius:3px} .legend .lv{margin-left:auto;font-weight:700} .hbar{display:flex;flex-direction:column;gap:9px} .hbar .hb{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:10px;font-size:12.5px} .hbar .track{height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden} .hbar .track i{display:block;height:100%;border-radius:99px} .hbar .hv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums} /* ---------- Timeline (traceability) ---------- */ .timeline{position:relative;padding-left:30px} .timeline:before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--accent-border)} .tl-ev{position:relative;padding:0 0 18px 6px} .tl-ev .tdot{position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--grad-btn);border:3px solid var(--accent-soft)} .tl-ev .t-when{font-size:11.5px;color:var(--muted);font-weight:600} .tl-ev .t-title{font-weight:700;font-size:13.5px;margin:2px 0} .tl-ev .t-desc{font-size:12.5px;color:var(--ink-2)} .tl-ev .t-chips{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap} /* ---------- Modals / drawers ---------- */ .overlay{position:fixed;inset:0;background:rgba(8,10,20,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px} .modal{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:min(560px,94vw);max-height:88vh;overflow-y:auto} .modal .m-h{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line-soft);font-weight:800;font-size:15.5px;font-family:var(--font-h)} .modal .m-b{padding:16px 20px} .modal .m-f{display:flex;justify-content:flex-end;gap:9px;padding:13px 20px;border-top:1px solid var(--line-soft)} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:74px;right:22px;z-index:99;background:var(--ink);color:#f1f5f9;border-radius:10px;padding:12px 17px;font-size:13px;box-shadow:var(--shadow-lg);max-width:380px;display:flex;gap:9px;align-items:flex-start;animation:toastin .25s ease} .toast.ok{border-left:4px solid var(--green-strong)} .toast.err{border-left:4px solid var(--red)} .toast.warn{border-left:4px solid #f59e0b} @keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} /* ---------- Forms ---------- */ .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px} .fg{display:flex;flex-direction:column;gap:5px;min-width:0} .fg label{font-size:11.5px;font-weight:700;color:var(--muted)} .fg input,.fg select,.fg textarea{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;font-size:13.5px;font-family:inherit;background:var(--card);color:var(--ink);width:100%;min-width:0;max-width:100%} .fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid var(--accent-border)} .fg .ro{background:var(--bg);color:var(--ink-2)} /* ---------- Misc ---------- */ .pill-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px} .note-assume{font-size:11.5px;color:var(--amber-text);background:var(--amber-soft);border:1px solid var(--amber-border);border-radius:8px;padding:7px 11px;display:inline-flex;gap:7px;align-items:flex-start} .sec-title{font-size:15px;font-weight:800;margin:20px 0 10px} .muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right} .w-100{width:100%} .mt-8{margin-top:8px}.mt-14{margin-top:14px}.mb-14{margin-bottom:14px} .flex{display:flex;align-items:center;gap:10px} .progress{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden} .progress i{display:block;height:100%;border-radius:99px;background:var(--grad-btn)} .avatar-sm{width:26px;height:26px;border-radius:50%;background:var(--grad-icon);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;font-family:var(--font-h)} .gauge{width:170px;margin:0 auto;text-align:center} .qr-slot{width:54px;height:54px;border:1.5px dashed var(--muted-2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted-2);text-align:center} /* ---------- Landing (indigo momentum portal) ---------- */ .landing-wrap{min-height:100vh;background:linear-gradient(160deg,#0b0e2e,#1e1b4b 45%,#3730a3 85%,#6d28d9 140%);color:#e2e8f0;display:flex;flex-direction:column;align-items:center;padding:52px 20px 40px;position:relative;overflow:hidden} .landing-wrap:before{content:'';position:absolute;inset:0;background:radial-gradient(900px 500px at 85% -10%,rgba(192,38,211,.18),transparent),radial-gradient(700px 420px at 5% 10%,rgba(79,70,229,.22),transparent)} .landing-wrap>*{position:relative;z-index:1} .land-logo{display:flex;align-items:center;gap:14px} .land-logo .mark{width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;font-family:var(--font-h)} .land-logo h1{font-family:var(--font-h);font-size:30px;font-weight:800;color:#fff;letter-spacing:.5px} .land-logo h1 .lt{color:#c4b5fd} .land-sub{color:#c7d0f0;margin-top:6px;font-size:14.5px} .land-client{margin-top:14px;font-size:13px;color:#a5b0e0} .land-pills{display:flex;gap:10px;margin:22px 0 30px;flex-wrap:wrap;justify-content:center} .land-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 15px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px} .land-pill .dot{width:7px;height:7px;border-radius:50%} .land-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:1180px;width:100%} .land-card{background:var(--card);color:var(--ink);border-radius:16px;padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)} .land-card .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:13px} .land-card .mod{font-size:10.5px;font-weight:800;letter-spacing:1.1px;color:var(--muted)} .land-card h3{font-family:var(--font-h);font-size:18px;font-weight:800;margin:3px 0 8px} .land-card p{font-size:12.5px;color:var(--ink-2);margin-bottom:12px} .land-card ul{list-style:none;margin:0 0 16px;display:flex;flex-direction:column;gap:6px} .land-card li{font-size:12.5px;display:flex;gap:8px;align-items:flex-start} .land-card li:before{content:'✓';color:var(--green);font-weight:800} .land-card.queued{opacity:.75;background:var(--bg)} .land-card.queued li:before{content:'•';color:var(--muted-2)} .land-foot{margin-top:30px;font-size:12px;color:#a5b0e0;text-align:center} /* ---------- Demo flow guide (float button + panel — SQ Portal reference style) ---------- */ .flow-fab{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--grad-btn);color:#fff;font-size:19px;font-weight:800;border:none;box-shadow:0 8px 22px rgba(79,70,229,.42);z-index:70;display:flex;align-items:center;justify-content:center} .flow-fab:hover{filter:brightness(1.08)} .flow-fab .fdot{position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#4ade80;border:2px solid #fff} .flow-panel{position:fixed;right:20px;bottom:78px;width:342px;max-height:min(76vh,660px);overflow-y:auto;background:var(--card);border-radius:16px;box-shadow:0 18px 48px rgba(15,23,42,.28);z-index:69;padding:18px;display:none;border:1px solid var(--line)} .flow-panel.open{display:block} body:has(.sticky-foot) .flow-fab{bottom:78px} body:has(.sticky-foot) .flow-panel{bottom:136px} .fp-title{display:flex;gap:9px;align-items:center;font-weight:800;font-size:14.5px;margin-bottom:5px;color:var(--ink);font-family:var(--font-h)} .fp-title .fic{color:var(--accent);font-size:15px} .fp-intro{font-size:12px;color:var(--muted);margin-bottom:13px;line-height:1.55} .fp-sub{font-size:12.5px;font-weight:600;color:var(--accent-dark);margin-bottom:8px;line-height:1.4} .fp-back{font-size:12px;color:var(--accent);cursor:pointer;margin-bottom:9px;display:inline-block;font-weight:600} .fstep{display:flex;gap:10px;padding:10px 11px;border-radius:12px;margin-bottom:6px;border:1.5px solid transparent} .fstep.pick:hover{background:var(--line-soft);cursor:pointer} .fstep.active{background:var(--accent-soft);border-color:var(--accent)} .fstep .fn{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px} .fstep.active .fn{background:var(--grad-btn);border-color:var(--accent);color:#fff} .fstep.done .fn{background:var(--green-soft);border-color:var(--green-border);color:var(--green-text)} .fstep .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .fstep .ft{font-weight:600;font-size:12.5px;margin:3px 0 2px;color:var(--ink);line-height:1.4} .fstep .fsub{font-size:11px;color:var(--muted);margin:0 0 3px;line-height:1.4} .fstep .fc{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.6px} .fstep .fact{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap} .you-chip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:var(--accent);letter-spacing:.4px} .you-chip:before{content:'●';font-size:8px} .fp-foot{display:flex;gap:8px;margin-top:13px} /* ---------- Elegant icon set (CSS mask, currentColor) — replaces all emoji ---------- */ .jic{display:inline-block;width:1.06em;height:1.06em;vertical-align:-0.14em;background:currentColor;-webkit-mask:var(--i) no-repeat center/contain;mask:var(--i) no-repeat center/contain;flex:none} .jic-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")} .jic-block{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.8 5.8l12.4 12.4'/%3E%3C/svg%3E")} .jic-box{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5Z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")} .jic-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")} .jic-check-circle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-5.5'/%3E%3C/svg%3E")} .jic-clipboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 5V3h6v2'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E")} .jic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} .jic-dot{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='none'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E")} .jic-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")} .jic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z'/%3E%3C/svg%3E")} .jic-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E")} .jic-ship{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17h18l-2 4H5Z'/%3E%3Cpath d='M6 17V9h12v8'/%3E%3Cpath d='M12 9V5h4'/%3E%3C/svg%3E")} .jic-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E")} .jic-factory{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M4 21V10l5 3v-3l5 3V6h6v15'/%3E%3C/svg%3E")} .jic-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5'/%3E%3Cpath d='M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5'/%3E%3C/svg%3E")} .jic-gear{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1'/%3E%3C/svg%3E")} .jic-chart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7 17V9'/%3E%3Cpath d='M12 17V5'/%3E%3Cpath d='M17 17v-6'/%3E%3C/svg%3E")} .jic-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E")} .jic-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 6.3'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E")} .jic-building{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3Cpath d='M11 21v-3h2v3'/%3E%3C/svg%3E")} .jic-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11.2 12H12v5'/%3E%3C/svg%3E")} .jic-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4.5 4.5'/%3E%3C/svg%3E")} .jic-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='7' width='14' height='9'/%3E%3Cpath d='M15 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3C/svg%3E")} .jic-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E")} .jic-route{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='19' cy='18' r='2.4'/%3E%3Cpath d='M7.4 6H15a4 4 0 0 1 0 8H9a4 4 0 0 0 0 8h7.6'/%3E%3C/svg%3E")} .jic-db{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='2.8'/%3E%3Cpath d='M4 5v14c0 1.6 3.6 2.8 8 2.8s8-1.2 8-2.8V5'/%3E%3Cpath d='M4 12c0 1.6 3.6 2.8 8 2.8s8-1.2 8-2.8'/%3E%3C/svg%3E")} .jic-gauge{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19a9 9 0 1 1 15 0'/%3E%3Cpath d='M12 14l3.5-4.5'/%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3C/svg%3E")} .jic-inbox{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13 5.5 5h13L22 13v6H2Z'/%3E%3Cpath d='M2 13h6l2 3h4l2-3h6'/%3E%3C/svg%3E")} .jic-layers{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5Z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5'/%3E%3C/svg%3E")} .jic-list-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 1.5 1.5L7 5'/%3E%3Cpath d='m3 12 1.5 1.5L7 11'/%3E%3Cpath d='m3 18 1.5 1.5L7 17'/%3E%3Cpath d='M10 6h11'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='M10 18h11'/%3E%3C/svg%3E")} .jic-swap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13'/%3E%3Cpath d='m14 4 3 3-3 3'/%3E%3Cpath d='M20 17H7'/%3E%3Cpath d='m10 14-3 3 3 3'/%3E%3C/svg%3E")} .jic-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")} .jic-check-square{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E")} .jic-archive-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='5'/%3E%3Cpath d='M5 8v13h14V8'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='m9 14 3 3 3-3'/%3E%3C/svg%3E")} .jic-stamp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3c0 2 1 3 1 5H7a2 2 0 0 0-2 2v3h14v-3a2 2 0 0 0-2-2h-3c0-2 1-3 1-5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E")} .jic-printer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5'/%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Cpath d='M7 14h10v7H7Z'/%3E%3C/svg%3E")} .jic-scan{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")} .jic-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.3.9-4.5 4.4 1 6.1L12 17l-5.5 3 1-6.1L3 9.5l6.3-.9Z'/%3E%3C/svg%3E")} .jic-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h13l-2.5 4L18 12H5'/%3E%3C/svg%3E")} /* ---------- v2.0 module switcher (sidebar foot) ---------- */ .sb-mod{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:2px} .sb-mod:hover{background:var(--line-soft);text-decoration:none} .sb-mod.active{background:var(--accent-soft);color:var(--accent-dark)} .sb-mod .mdot{width:8px;height:8px;min-width:8px;border-radius:50%} /* ============================================================ v2.2 — card-level layman help ("?" per kartu, Fungsi + Metode) + baseline vertical rhythm so every page keeps a tidy 14px beat ============================================================ */ #jal-page>*+*{margin-top:14px} .hlp{width:21px;height:21px;border-radius:50%;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none;font-style:normal;user-select:none} .hlp:hover,.hlp.pin{background:var(--accent);color:#fff;border-color:var(--accent)} .card-h .hlp{margin-left:auto} .card-h [style*="margin-left:auto"]~.hlp,.card-h .flex~.hlp{margin-left:8px} #jal-hlp-pop{position:fixed;z-index:96;width:316px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(15,23,42,.16);padding:13px 15px;font-size:12.2px;line-height:1.6;color:var(--ink-2);display:none} #jal-hlp-pop.show{display:block} #jal-hlp-pop .ht{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);margin:0 0 3px;display:flex;align-items:center;gap:6px} #jal-hlp-pop .ht .jic{font-size:12px} #jal-hlp-pop .hb{margin:0 0 10px} #jal-hlp-pop .hb:last-child{margin-bottom:0} /* ===== MEU additions — LMS icon set (Lucide-style outline, mask technique) ===== */ .jic-book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E")} .jic-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 8l6 4-6 4V8z'/%3E%3C/svg%3E")} .jic-grad{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E")} .jic-trophy{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v6a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M7 6H4a2 2 0 0 0 2 5'/%3E%3Cpath d='M17 6h3a2 2 0 0 1-2 5'/%3E%3C/svg%3E")} .jic-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")} .jic-msg{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z'/%3E%3C/svg%3E")} .jic-award{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5L7.5 22l4.5-3 4.5 3-1.5-7.5'/%3E%3C/svg%3E")} .jic-note{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E")} .jic-monitor{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E")} .jic-vr{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3l-2-2h-4l-2 2H5a2 2 0 0 1-2-2V8z'/%3E%3Ccircle cx='8' cy='11' r='1'/%3E%3Ccircle cx='16' cy='11' r='1'/%3E%3C/svg%3E")} .jic-map{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14'/%3E%3Cpath d='M15 6v14'/%3E%3C/svg%3E")} .jic-library{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4v16H4z'/%3E%3Cpath d='M10 4h4v16h-4z'/%3E%3Cpath d='M16.5 4.6l3.9 1-4 15.5-3.9-1z'/%3E%3C/svg%3E")} .jic-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2.4M12 19.6V22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M2 12h2.4M19.6 12H22M4.9 19.1l1.7-1.7M17.4 6.6l1.7-1.7'/%3E%3C/svg%3E")} .jic-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a7 7 0 0 0 11 11z'/%3E%3C/svg%3E")} .jic-chevron-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")} /* ===== MEU additions — generic input + empty state ===== */ .inp{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;background:var(--card);color:var(--ink);min-width:170px} .inp:focus{outline:2px solid var(--accent-border)} .empty{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:52px 20px;text-align:center} .empty .e-art{width:84px;height:84px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .empty h3{margin:0 0 6px;font-size:19px;color:var(--accent)} /* ===== MEU additions — card spacing rhythm (neatness pass, MV req) ===== .card gets a default inner padding; .card-h stretches back to the card edges (negative margin) so headers stay full-bleed with a divider; tables inside cards go edge-to-edge; consistent 14px vertical rhythm. */ .card{padding:20px 22px} .card>.card-h{margin:-20px -22px 16px;padding:14px 22px} .card>.card-h+.tbl-wrap{margin-top:-16px} .card>.tbl-wrap{margin-left:-22px;margin-right:-22px} .card>.tbl-wrap:last-child{margin-bottom:-20px} .card+.card{margin-top:16px} .card>.sb-group:first-child{margin-top:0} .card .kv{padding:6px 0} .tbl th:first-child,.tbl td:first-child{padding-left:22px} .tbl th:last-child,.tbl td:last-child{padding-right:22px} /* ===== MEU additions — joyful gamification skin (dashboard rail, D21) ===== Mencolok tapi tetap enterprise: gradasi hangat, medali, shimmer badge, race track, count-up. Semua motion dimatikan oleh prefers-reduced-motion. */ @keyframes meu-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} @keyframes meu-shimmer{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}} @keyframes meu-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}} @keyframes meu-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes meu-flick{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(7deg) scale(1.15)}} .gami-hero{background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 55%,#7c5cff 130%);border-radius:12px;color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden;margin-bottom:12px} .gami-hero:after{content:'';position:absolute;top:0;bottom:0;width:46%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);animation:meu-shimmer 4.5s ease-in-out infinite} .gami-hero .av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none} .medal{border-radius:12px;padding:10px 8px;text-align:center;color:#fff;position:relative;overflow:hidden;animation:meu-pop .5s ease both} .medal .rk{font-size:21px;font-weight:900;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.18)} .medal .lb{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.92;margin-top:2px} .medal.gold{background:linear-gradient(150deg,#f6b73c,#e08b00)} .medal.silver{background:linear-gradient(150deg,#b9c2cf,#8d99ab)} .medal.bronze{background:linear-gradient(150deg,#d99862,#b06b34)} .medal.blue{background:linear-gradient(150deg,#4f8bff,#2456d6)} .medal .dl{position:absolute;top:5px;right:6px;font-size:9px;font-weight:900;background:rgba(255,255,255,.28);border-radius:99px;padding:1.5px 6px} .badge-chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 11px;font-size:11px;font-weight:800;color:#7a4b00;background:linear-gradient(135deg,#ffe9b8,#ffd166);border:1px solid #f3c04a;position:relative;overflow:hidden;animation:meu-pop .5s ease both} .badge-chip:after{content:'';position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);animation:meu-shimmer 3.8s ease-in-out infinite} .badge-chip .jic{font-size:13px} .badge-lock{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 11px;font-size:11px;font-weight:700;color:var(--muted);background:var(--line-soft);border:1px dashed var(--line)} .gap-pulse{animation:meu-pulse 1.8s ease-in-out infinite} .cert-float .jic{animation:meu-float 2.6s ease-in-out infinite} .flame{display:inline-block;animation:meu-flick 1s ease-in-out infinite;transform-origin:50% 85%} .race-track{position:relative;height:48px;border-radius:99px;background:linear-gradient(90deg,var(--line-soft),#eef3ff);border:1px solid var(--line);margin:10px 0 4px} .race-track .lane{position:absolute;left:6px;right:6px;top:50%;height:5px;transform:translateY(-50%);border-radius:99px;background:repeating-linear-gradient(90deg,#d7dee9 0 12px,transparent 12px 20px)} .race-track .fin{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px} .race-run{position:absolute;transform:translate(-50%,-50%);width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:900;color:#fff;border:2px solid #fff;box-shadow:0 3px 8px rgba(15,23,42,.25);transition:left 1.1s cubic-bezier(.22,.9,.35,1.1)} .race-run.me{background:var(--accent);z-index:2;top:66%} .race-run.rival{background:#8d99ab;top:34%} .skill-cell{animation:meu-pop .45s ease both} .bar-anim div div{transition:width 1s cubic-bezier(.25,.8,.35,1)} .numpop{animation:meu-pop .6s ease both} @media (prefers-reduced-motion: reduce){ .gami-hero:after,.badge-chip:after{animation:none;display:none} .medal,.badge-chip,.skill-cell,.numpop{animation:none} .gap-pulse,.cert-float .jic,.flame{animation:none} .race-run,.bar-anim div div{transition:none} } @keyframes meu-radar{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}} .radar-cur{animation:meu-radar .9s cubic-bezier(.25,.8,.35,1.1) both;transform-origin:center;transform-box:fill-box} /* ===== MEU additions — reusable image-upload field (Question Bank / Reward Master Data) ===== */ .img-field{display:flex;align-items:center;gap:12px} .img-prev{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;font-size:22px;color:var(--muted)} .img-prev img{width:100%;height:100%;object-fit:cover;display:block} .img-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .img-thumb{width:34px;height:34px;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;color:var(--muted)} .img-thumb img{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion: reduce){.radar-cur{animation:none}} /* ===== MEU additions — card contrast pass (MV req 2026-08-19: "ada card yg warnanya sama dengan background" — .card's border/shadow were too faint against --bg, and card-soft-filled boxes (image previews above) were nearly indistinguishable from a white .card). Strengthens the SAME shared classes used across every page — additive override only, no base rule edited, no layout/color-scheme change. ===== */ html:not([data-theme="dark"]) .card,html:not([data-theme="dark"]) .kpi,html:not([data-theme="dark"]) .filterbar,html:not([data-theme="dark"]) .statstrip,html:not([data-theme="dark"]) .panel{border-color:#aab0cc} /* MV follow-up 2026-08-19: "border color di card nya terlalu mencolok" — fair, #aab0cc against the near-white #f8f8f9 background lands at 2.14:1, the strongest/heaviest border this project has ever shipped (every prior round topped out around 1.4-1.5:1). Toned down to the SAME hex already used for --line (#c3c7de, the ordinary divider color) — 1.67:1 vs white card, still clearly a visible hairline (nowhere near the 1.10:1 "invisible" bug this whole saga started from), just no longer heavier than a normal divider. */ html:not([data-theme="dark"]) .card,html:not([data-theme="dark"]) .kpi,html:not([data-theme="dark"]) .filterbar,html:not([data-theme="dark"]) .statstrip,html:not([data-theme="dark"]) .panel{border-color:#c3c7de} .card,.kpi,.filterbar,.statstrip,.panel{box-shadow:0 1px 3px rgba(23,20,80,.07),0 3px 10px rgba(23,20,80,.08)} html[data-theme="dark"] .card,html[data-theme="dark"] .kpi,html[data-theme="dark"] .filterbar,html[data-theme="dark"] .statstrip,html[data-theme="dark"] .panel{box-shadow:var(--shadow)} /* ===== MEU additions — card contrast pass 2 (MV follow-up 2026-08-19: "kenapa warna card nya masih sama dengan background layout web ya?" — the pass above only touched the 5 shared classes .card/.kpi/.filterbar/.statstrip/.panel. A full grep across every page turned up ~25 more bespoke "boxed container" classes (.chp, .crs-card, .mc-card, .cb-chp, .qb-item, .syl-card, .vd-chp, .sm-wrap, .flow-sec, .pr-card, .cert-card, .art-card, .sch-item, .qz-row, .empty, .type-tile, .tb-plant, .funnel .f-it, etc.) that all share the same underlying pattern — border:1px solid var(--line) on a var(--card) (or unset/inherited) background, with NO box-shadow — and --line itself (#e6e7f2) is only ~10 RGB units off --bg's #f5f6fb, so every one of these boxes read as flush with the page. Root-cause fix: darken --line itself for light mode (affects every bordered box app-wide in one place, not a per-class whack-a-mole), PLUS extend the same shadow treatment from pass 1 to the actual list of boxed-container classes found. Additive override only — no base rule edited, no layout/color-scheme change. ===== */ html:not([data-theme="dark"]){--line:#d7d9ec} /* MV question 2026-08-19: "kenapa tidak putih saja warna card nya" — .card was ALREADY pure white (#ffffff); the real gap was the PAGE background (#f5f6fb) sitting only ~10 RGB units off white, so a white card had almost nothing to contrast against no matter how much border/shadow was tuned. Aesthetic call: keep cards pure white (a clean white card reads best against a visibly distinct, gently tinted page background — that's the standard enterprise-dashboard pattern, e.g. Notion/Linear/Jira all do this rather than white-on-white), and deepen the page background itself so the contrast is real and doesn't depend on shadow tricks. Deepened --bg/--grad-bg base from #f5f6fb to #eceef5 (~2x the previous delta from white) — still a soft, professional near-white, not gray.*/ html:not([data-theme="dark"]){--bg:#e3e6f0;--grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.10),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.08),transparent),#e3e6f0} /* MV follow-up 2026-08-19: "warnanya kurang kontras... card berwarna putih seperti sidebar" — .card and .sidebar both already read var(--card) = pure #ffffff (confirmed identical, not a bug), so the ask is really "make the page-vs-card gap unmistakable". Deepened --bg again (#eceef5 -> #e3e6f0, now ~3x the ORIGINAL delta from white) and trimmed the card shadow's spread slightly so it doesn't read as a gray tint bleeding into the white fill at the edges — the white itself should look crisp, not muddied. */ .card,.kpi,.filterbar,.statstrip,.panel{box-shadow:0 1px 2px rgba(23,20,80,.04),0 2px 6px rgba(23,20,80,.04)} /* MV: "warnanya kurang cerah putih" — .card fill is already #ffffff (max brightness); what was dulling it was the dark border (#d7d9ec) + heavier shadow both reading as gray at the card's edge. Lightened the card border to a near-invisible #eef0f8 and cut shadow opacity further — the page background (now a real, deepened #e3e6f0) does the contrast work, so the card itself can stay crisp, bright white with only a hairline edge instead of a visibly gray frame. */ .chp,.crs-card,.mc-card,.cb-chp,.qb-item,.syl-card,.syl-course-row,.vd-chp,.sm-wrap, .flow-sec,.fw-legend,.pr-card,.cert-card,.art-card,.sch-item,.qz-row,.empty,.type-tile, .tb-plant,.funnel .f-it,.sub-box,.lvl-box,.land-card{box-shadow:0 1px 2px rgba(23,20,80,.05),0 2px 7px rgba(23,20,80,.06)} html[data-theme="dark"] .chp,html[data-theme="dark"] .crs-card,html[data-theme="dark"] .mc-card, html[data-theme="dark"] .cb-chp,html[data-theme="dark"] .qb-item,html[data-theme="dark"] .syl-card, html[data-theme="dark"] .syl-course-row,html[data-theme="dark"] .vd-chp,html[data-theme="dark"] .sm-wrap, html[data-theme="dark"] .flow-sec,html[data-theme="dark"] .fw-legend,html[data-theme="dark"] .pr-card, html[data-theme="dark"] .cert-card,html[data-theme="dark"] .art-card,html[data-theme="dark"] .sch-item, html[data-theme="dark"] .qz-row,html[data-theme="dark"] .empty,html[data-theme="dark"] .type-tile, html[data-theme="dark"] .funnel .f-it,html[data-theme="dark"] .sub-box,html[data-theme="dark"] .lvl-box, html[data-theme="dark"] .land-card{box-shadow:none} /* ===== MEU additions — data-driven contrast + spacing pass (MV req 2026-08-19: "jangan lupa perahatikan padding dan margin serta contrast warna yang diberikan dari background, background layout dan pemilihan warna border dan warna font. buat semenarik dan seindah mungkin untuk kelas LMS Enterprise University") Root cause found by MEASURING actual WCAG contrast ratios instead of eyeballing screenshots (the method used in all 4 prior contrast rounds above, which is why the same complaint kept resurfacing in new forms): after 4 rounds of "lighten the border so the card stays crisp white", the card border color (#eef0f8) had drifted to only a 1.10:1 ratio against the page background (#e3e6f0) — visually invisible, so the card boundary depended entirely on a near-transparent box-shadow (opacity .04-.06). Page bg vs white card was itself only 1.25:1. --muted (#6b7290) measured 3.80:1 on --bg — FAILS WCAG AA (4.5:1) for normal body text. --muted-2 (#9599b3) measured 2.81:1 on --card / 2.25:1 on --bg — FAILS badly, unreadable for anything but large/decorative text. Fix — verified target ratios (relative-luminance formula), all AA-passing where text is involved: --bg #e3e6f0 -> #d2d6e3 (white card vs bg: 1.25 -> 1.45) border #eef0f8 -> #aab0cc (border vs bg: 1.10 -> 1.48; vs white card: 2.14) --line #d7d9ec -> #c3c7de (divider vs white card: 1.40 -> 1.67) --muted #6b7290 -> #525973 (vs white: 6.92 AA-pass; vs bg: 4.77 AA-pass) --muted-2 #9599b3 -> #747a99 (vs white: 4.21; vs bg: 2.90 — decorative/small use only, per existing usage in this codebase) Ink hierarchy stays correctly stepped: --ink 17.19 > --ink-2 9.94 > --muted 6.92 > --muted-2 4.21 (all measured against white --card). Additive override only — no base :root rule edited, no layout/color-scheme change, dark mode untouched. ===== */ html:not([data-theme="dark"]){ --bg:#d2d6e3; --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.11),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.09),transparent),#d2d6e3; --line:#c3c7de; --muted:#525973; --muted-2:#747a99; } /* MV follow-up 2026-08-19: "backgeound layoutnya apakah tidak terlalu gelap warna abunya?" — fair catch. --bg above (#d2d6e3, 67% brightness) was pushed that deep because in the PRIOR 4 rounds the card border was nearly invisible (1.10:1), so background darkness was the ONLY lever available to separate a white card from the page. Now that the border itself is properly fixed (1.10:1 -> 1.48:1, a real visible line), the background no longer has to carry the whole contrast burden alone — it can afford to be lighter while the border does more of the work. Lightened --bg one step: #d2d6e3 -> #d8dce8 (67% -> 72% brightness; white-card contrast 1.45:1 -> 1.37:1, still clearly separated, just less gray/heavy). */ html:not([data-theme="dark"]){ --bg:#d8dce8; --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.10),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.08),transparent),#d8dce8; } /* MV follow-up 2026-08-19: exact swatch supplied ("gunakan warna ini untuk layout background di light mode") — sampled hex #f8f8f9 (94% brightness, near-white). This is deliberately much lighter than the two rounds above (white-card fill contrast drops to only 1.06:1 — nearly the same "invisible fill" situation that started this whole contrast saga). Accepted anyway because card definition no longer depends on the fill delta: the card BORDER itself is now a real visible line (#aab0cc, fixed earlier this round, 1.10:1 -> 1.48:1), and that same border reads even more clearly against this near-white bg (2.02:1). Clean near-white canvas + a visible hairline border is the standard Linear/Notion-style pattern — valid as long as the border keeps doing its job, which it now does. */ html:not([data-theme="dark"]){ --bg:#f8f8f9; --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.07),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.05),transparent),#f8f8f9; } /* ===== MEU additions — page canvas / component padding pass (same MV req above) ===== Roomier breathing room across the shared chrome so the app reads less cramped next to the deepened background — .card's own padding was already bumped earlier in this file (16px 18px -> 20px 22px); this extends the same +4px/+2px rhythm to the other shared surface classes that share the page. */ .kpi{padding:16px 18px} .content{padding:22px 26px 90px} .filterbar{padding:14px 18px} .modal .m-h{padding:17px 22px} .modal .m-b{padding:20px 22px} /* ===== MEU additions — background/border reverted to ORIGINAL values (MV feedback 2026-08-19: sent 2 reference screenshots saying "design yang ini lebih terlihat menarik dikarenakan background layout warnanya lebih menarik dan border color card nya lebih soft"). Sampled the exact pixels from those screenshots: bg ~#f4f5fb, border ~#e6e7f2 — this is, measurably, the ORIGINAL pre-saga WINVOSYS-inherited :root values (--bg:#f5f6fb, --line:#e6e7f2, .card border via plain var(--line), no separate border-color override), from BEFORE any of the many contrast rounds above ever ran. Flagging the tension honestly rather than silently reverting: by the numbers this is LOWER contrast than every round above (border-vs-white-card only 1.23:1, vs 1.67:1 in the immediately preceding round) — it's the same bg/border combination that originally triggered "kenapa warna card nya masih sama dengan background" several rounds back. MV chose this direction anyway after seeing the tradeoff explained, so applying it as an explicit, final override — not because the numbers say it's "more correct", but because the aesthetic call belongs to MV and the measured tradeoff was disclosed first. Kept UNCHANGED from the accessibility work above: --muted/--muted-2 (these were genuine WCAG AA text-contrast failures, unrelated to the bg/border aesthetic question — reverting them would reintroduce actually-unreadable text that nobody asked to bring back). Dark mode untouched throughout. */ html:not([data-theme="dark"]){ --bg:#f5f6fb; --grad-bg:radial-gradient(1100px 560px at 12% -12%,rgba(124,58,237,.09),transparent),radial-gradient(900px 480px at 100% 0%,rgba(79,70,229,.07),transparent),#f5f6fb; --line:#e6e7f2; } html:not([data-theme="dark"]) .card,html:not([data-theme="dark"]) .kpi,html:not([data-theme="dark"]) .filterbar,html:not([data-theme="dark"]) .statstrip,html:not([data-theme="dark"]) .panel{border-color:var(--line)} /* ===== MEU additions — narrow-viewport shell (Tahap 5, 2026-08-19). FLOW-SPEC's WF-008 requires the Live Quiz PLAYER page to work at 390px — real participants join from their own phones while the host page stays on a classroom projector. Testing that at 390px surfaced a pre-existing, app-wide gap: meu-tokens.css had NO @media breakpoint anywhere before this block, so the full 248px expanded sidebar was forced on every viewport, including phones — on a 390px screen that left barely 140px for content, visibly cutting off the very tiles this feature depends on. Rather than inventing a new mobile nav pattern, this reuses the EXISTING icon-only collapsed-sidebar treatment above (already shipped, already used via the manual collapse toggle) — same rules, just applied by a media query instead of gated on the .sidebar-collapsed class, so nothing about the visual language changes, only when it kicks in. This is a site-wide fix (every one of the 54 pages benefits on a phone-width screen), not something scoped only to the two new Live Quiz pages. */ @media(max-width:760px){ :root{--sidebar-w:66px} /* :root (specificity 0,1,0) — must match the original :root{--sidebar-w:248px} at the top of this file, not a plain `html` selector (0,0,1), which loses that specificity tie regardless of source order and silently fails to override */ .sb-logo{justify-content:center;padding:14px 8px} .sb-logo>div:last-child{display:none} .sb-group{display:none} .sb-item{justify-content:center;padding:9px;position:relative} .sb-item .lbl{display:none} .sb-item .cnt{position:absolute;top:5px;right:5px;width:8px;height:8px;min-width:0;padding:0;font-size:0;border-radius:50%} .sb-mod{justify-content:center;padding:6px;position:relative} .sb-mod .lbl{display:none} .sb-switch{padding:9px;position:relative;display:flex;justify-content:center;align-items:center;gap:0} .sb-switch .lbl{display:none} .sb-item:hover:after,.sb-mod:hover:after,.sb-switch:hover:after{ content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px; background:var(--ink);color:var(--bg);padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600; white-space:nowrap;box-shadow:var(--shadow-lg);z-index:100;pointer-events:none} .sb-item:hover:before,.sb-mod:hover:before,.sb-switch:hover:before{ content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px; border:6px solid transparent;border-right-color:var(--ink);z-index:100;pointer-events:none} .sb-collapse{display:none} /* manual toggle is meaningless once width is media-query-driven */ .content{padding:14px 12px 90px} .tb-plant,.tb-live{display:none} /* plant selector + live clock — desktop chrome, not needed to operate the app on a phone */ .page-head h1{font-size:20px} .kpi-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} } /* ===== MEU additions — mobile-overflow fixes (Tahap 7 QA sweep, 2026-08-20). The 390px sweep found real horizontal-scroll bugs: pages whose grid-template-columns collapses to a single "1fr" track below their own breakpoint still overflowed, because a bare 1fr grid track keeps an implicit min-width:auto (the min-content size of whatever is inside it) — so a card with any non-wrapping content pushes the whole page wider than the viewport even though it visually looks single-column. Forcing minmax(0,1fr) removes that implicit floor. Card-header toolbar rows (.card-h .right — several buttons pinned to the right) had the same shape of bug: a flex row with no wrap, so a 3rd/4th button pushed past 390px. !important is required on the grid overrides because course-detail's .cd-grid and transcript's .tr-grid define their own later, equal-specificity collapse rule inside each page's own inline