/* ============================================================ SHIDA · SHIneray Dealer Assistance — Demo design system Light Control-Tower · Shineray red/charcoal · brand-native ============================================================ */ :root{ /* brand */ --red:#EF3340; --red-600:#D4212E; --red-050:#FDECEC; --char:#2D2926; --char-900:#1E1B18; --char-700:#3A3532; /* ink */ --ink:#221F1D; --ink-2:#6E6863; --ink-3:#9A938C; /* surfaces */ --page:#F1F1EF; --card:#FFFFFF; --card-2:#FAFAF9; --line:rgba(45,41,38,.11); --line-2:rgba(45,41,38,.06); /* status */ --ok:#2E9E6B; --ok-bg:#E7F4EE; --warn:#B9791A; --warn-bg:#FAF0DC; --bad:#C8353F; --bad-bg:#FBEAEB; --info:#3A6EA5; --info-bg:#E9F0F7; --neutral:#6E6863; --neutral-bg:#EFEDEA; /* sidebar (charcoal) */ --sb:#211E1C; --sb-2:#2A2724; --sb-line:rgba(255,255,255,.08); --sb-ink:#EAE7E3; --sb-ink-2:#A29B94; --sb-ink-3:#726B65; --radius:14px; --radius-sm:10px; --radius-pill:999px; --shadow:0 1px 2px rgba(30,27,24,.04), 0 4px 18px rgba(30,27,24,.05); --shadow-lg:0 18px 50px rgba(30,27,24,.14); --ring:0 0 0 3px rgba(239,51,64,.28); --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:'Sora','Inter',system-ui,sans-serif; --font-cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; --font-mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,Consolas,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); color:var(--ink); background:var(--page); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } :lang(zh), .zh{font-family:var(--font-cjk)} /* inline bilingual snippets (complements data-i18n): toggled by */ html[lang=es] .i-zh{display:none} html[lang=zh] .i-es{display:none} .i-zh{font-family:var(--font-cjk)} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none} ::selection{background:rgba(239,51,64,.18)} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} /* fade the shell in once JS assembles it (avoids flash) */ body:not(.ready){opacity:0} body.ready{opacity:1;transition:opacity .25s ease} /* ============ ambient background ============ */ .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5} .ambient::before{width:620px;height:620px;left:-160px;top:-220px; background:radial-gradient(circle at 30% 30%,rgba(239,51,64,.10),transparent 62%); animation:drift1 82s ease-in-out infinite} .ambient::after{width:560px;height:560px;right:-160px;bottom:-200px; background:radial-gradient(circle at 60% 60%,rgba(45,41,38,.10),transparent 62%); animation:drift2 96s ease-in-out infinite} @keyframes drift1{50%{transform:translate(60px,50px) scale(1.08)}} @keyframes drift2{50%{transform:translate(-50px,-40px) scale(1.06)}} @media (prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none}} /* ============ app shell ============ */ .app{position:relative;z-index:1;display:grid;grid-template-columns:254px 1fr;min-height:100vh} .sidebar{ background:var(--sb);color:var(--sb-ink);border-right:1px solid var(--sb-line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .sb-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px} .sb-mark{width:38px;height:38px;border-radius:11px;flex:none; background:linear-gradient(150deg,var(--red),var(--red-600)); display:grid;place-items:center;box-shadow:0 6px 16px rgba(239,51,64,.35)} .sb-mark svg{width:21px;height:21px} .sb-brand .name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.02em;color:#fff;line-height:1} .sb-brand .sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-3);margin-top:3px} .sb-portal{margin:2px 14px 12px;padding:9px 12px;border-radius:var(--radius-sm); background:var(--sb-2);border:1px solid var(--sb-line);display:flex;align-items:center;gap:9px} .sb-portal .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none; background:rgba(239,51,64,.16);color:#ff8a92} .sb-portal .ic svg{width:15px;height:15px} .sb-portal .t1{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sb-ink-3)} .sb-portal .t2{font-size:13px;font-weight:600;color:var(--sb-ink);line-height:1.25} .sb-nav{flex:1;overflow-y:auto;padding:4px 12px 12px} .sb-nav::-webkit-scrollbar{width:6px} .sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px} .sb-sec{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--sb-ink-3); padding:14px 12px 6px} .sb-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px; color:var(--sb-ink-2);font-size:13.5px;font-weight:500;position:relative; transition:background .12s,color .12s;margin-bottom:1px} .sb-link svg{width:18px;height:18px;flex:none;opacity:.85} .sb-link:hover{background:rgba(255,255,255,.05);color:var(--sb-ink)} .sb-link.active{background:rgba(255,255,255,.07);color:#fff} .sb-link.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px; border-radius:0 3px 3px 0;background:var(--red)} .sb-link.active svg{opacity:1;color:#ff7a83} .sb-link .tag{margin-left:auto;font-size:9px;font-weight:600;letter-spacing:.04em; padding:2px 7px;border-radius:var(--radius-pill);background:rgba(255,255,255,.09);color:var(--sb-ink-2)} .sb-link .tag.f{background:rgba(239,51,64,.16);color:#ff8a92} .sb-foot{border-top:1px solid var(--sb-line);padding:12px 14px;display:flex;align-items:center;gap:10px} .sb-user{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center; font-weight:700;font-size:13px;color:#fff;background:linear-gradient(150deg,#4a4540,#2f2b28); border:1px solid var(--sb-line)} .sb-foot .u1{font-size:13px;font-weight:600;color:var(--sb-ink);line-height:1.2} .sb-foot .u2{font-size:11px;color:var(--sb-ink-3)} .sb-foot .out{margin-left:auto;color:var(--sb-ink-3);padding:6px;border-radius:8px} .sb-foot .out:hover{color:#ff7a83;background:rgba(255,255,255,.05)} .sb-foot .out svg{width:17px;height:17px;display:block} /* ============ content column ============ */ .content{display:flex;flex-direction:column;min-width:0} .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px; padding:0 32px;height:64px;background:rgba(241,241,239,.82);backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .tb-crumb{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px} .tb-crumb b{color:var(--ink-2);font-weight:600} .tb-crumb .sep{opacity:.5} .tb-search{margin-left:8px;flex:1;max-width:340px;display:flex;align-items:center;gap:9px; padding:8px 13px;border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line);color:var(--ink-3)} .tb-search svg{width:15px;height:15px;flex:none} .tb-search input{border:none;background:none;outline:none;font-size:13px;color:var(--ink);width:100%} .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px} .tb-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2); border:1px solid var(--line);background:var(--card);position:relative;transition:.12s} .tb-btn:hover{color:var(--ink);border-color:rgba(45,41,38,.2)} .tb-btn svg{width:18px;height:18px} .tb-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%; background:var(--red);border:2px solid var(--card)} /* language switch */ .lang{display:flex;align-items:center;background:var(--card);border:1px solid var(--line); border-radius:var(--radius-pill);padding:3px;gap:2px} .lang button{padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600; color:var(--ink-3);transition:.14s;line-height:1.3} .lang button.on{background:var(--char);color:#fff} .lang button.zh{font-family:var(--font-cjk)} .hamb{display:none} /* main scroll region */ .view{flex:1;padding:28px 32px 56px;max-width:1360px;width:100%;margin:0 auto} /* ============ page header ============ */ .phead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px} .phead h1{font-family:var(--font-display);font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.05} .phead .lede{color:var(--ink-2);font-size:14px;margin-top:7px;max-width:640px} .phead .actions{display:flex;gap:10px;align-items:center} /* ============ buttons ============ */ .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px; font-size:13.5px;font-weight:600;transition:.14s;border:1px solid transparent;white-space:nowrap} .btn svg{width:16px;height:16px} .btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(239,51,64,.24)} .btn-primary:hover{background:var(--red-600);transform:translateY(-1px)} .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:rgba(45,41,38,.22);background:var(--card-2)} .btn-dark{background:var(--char);color:#fff} .btn-dark:hover{background:var(--char-900)} .btn-sm{padding:6px 12px;font-size:12.5px;border-radius:9px} /* ============ cards / grid ============ */ .grid{display:grid;gap:18px} .g-4{grid-template-columns:repeat(4,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-2{grid-template-columns:repeat(2,1fr)} .span-2{grid-column:span 2} .mb{margin-bottom:18px} .mb-l{margin-bottom:28px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .card-p{padding:22px} .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 20px;border-bottom:1px solid var(--line-2)} .card-h h3{font-size:15px;font-weight:700;letter-spacing:-.01em} .card-h .hint{font-size:12px;color:var(--ink-3)} .card-b{padding:20px} /* entry stagger */ .enter{opacity:0;transform:translateY(8px);animation:enter .4s ease forwards} @keyframes enter{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.enter{animation:none;opacity:1;transform:none}} /* ============ KPI tiles ============ */ .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden;transition:.16s} .kpi:hover{border-color:rgba(45,41,38,.18);box-shadow:var(--shadow-lg)} .kpi .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px; background:var(--neutral-bg);color:var(--ink-2)} .kpi .ico svg{width:18px;height:18px} .kpi.accent .ico{background:var(--red-050);color:var(--red-600)} .kpi .klabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .kpi .kval{font-family:var(--font-display);font-size:31px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-top:6px} .kpi .kval .u{font-size:15px;font-weight:600;color:var(--ink-3);margin-left:3px} .kpi .ktrend{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;margin-top:9px} .kpi .ktrend.up{color:var(--ok)} .kpi .ktrend.down{color:var(--bad)} .kpi .ktrend.flat{color:var(--ink-3)} .kpi .ktrend svg{width:13px;height:13px} .kpi .kfoot{font-size:11.5px;color:var(--ink-3);margin-top:2px} /* ============ tables ============ */ .tbl-wrap{overflow-x:auto} table.tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl thead th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)} .tbl thead th.num{text-align:right} .tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--line-2);color:var(--ink);vertical-align:middle} .tbl tbody tr{transition:background .12s} .tbl tbody tr:hover{background:var(--card-2)} .tbl tbody tr:last-child td{border-bottom:none} .tbl td.num{text-align:right;font-variant-numeric:tabular-nums} .tbl .mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:-.01em;color:var(--ink-2)} .tbl .strong{font-weight:600;color:var(--ink)} .num2{font-family:var(--font-display);font-weight:700;font-size:15px} .num2 .u{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:2px} .cellhead{display:flex;align-items:center;gap:11px} .thumb{width:40px;height:30px;border-radius:6px;flex:none;display:grid;place-items:center; background:var(--neutral-bg);color:var(--ink-3);font-size:9px;font-weight:700;letter-spacing:.03em;overflow:hidden} .thumb.red{background:var(--char);color:#fff} .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:11px;font-weight:700;color:#fff} /* ============ badges / status ============ */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600; padding:3px 10px 3px 8px;border-radius:var(--radius-pill);line-height:1.5;white-space:nowrap} .badge .d{width:6px;height:6px;border-radius:50%;flex:none} .badge.ok{background:var(--ok-bg);color:#1c7a4f} .badge.ok .d{background:var(--ok)} .badge.warn{background:var(--warn-bg);color:#8a5a10} .badge.warn .d{background:var(--warn)} .badge.bad{background:var(--bad-bg);color:#a5262f} .badge.bad .d{background:var(--bad)} .badge.info{background:var(--info-bg);color:#2c567f} .badge.info .d{background:var(--info)} .badge.neutral{background:var(--neutral-bg);color:var(--ink-2)} .badge.neutral .d{background:var(--ink-3)} .badge.accent{background:var(--red-050);color:var(--red-600)} .badge.accent .d{background:var(--red)} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.03em; padding:3px 9px;border-radius:var(--radius-pill);background:var(--neutral-bg);color:var(--ink-2)} .pill.phase{background:var(--char);color:#fff} .pill.f1{background:#EAF3EE;color:#1c7a4f}.pill.f2{background:#EEF1F6;color:#3a5a86} .pill.f3{background:#F5EEF6;color:#7a4a86}.pill.f0{background:#F1EEEA;color:#6a5a4a} /* ============ mini charts ============ */ .chart{width:100%} .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px} .legend .li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)} .legend .sw{width:10px;height:10px;border-radius:3px;flex:none} .bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px} .bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .bars .bar{width:100%;max-width:34px;border-radius:6px 6px 0 0;background:var(--char);position:relative;transition:height .5s ease} .bars .bar.a{background:var(--red)} .bars .bar.g{background:rgba(45,41,38,.16)} .bars .cl{font-size:11px;color:var(--ink-3);font-weight:500} /* progress */ .prog{height:7px;border-radius:5px;background:var(--neutral-bg);overflow:hidden} .prog>span{display:block;height:100%;border-radius:5px;background:var(--char)} .prog>span.a{background:var(--red)} .prog>span.ok{background:var(--ok)}.prog>span.warn{background:var(--warn)} /* list rows */ .rows{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-2)} .row:last-child{border-bottom:none} .row .rt{font-weight:600;font-size:13.5px}.row .rs{font-size:12px;color:var(--ink-3)} .row .rright{margin-left:auto;text-align:right} /* ============ stub / en-desarrollo ============ */ .stub{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); padding:52px 40px;text-align:center;position:relative;overflow:hidden} .stub::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(45,41,38,.02) 22px 44px)} .stub .si{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto 20px; background:var(--red-050);color:var(--red-600);position:relative} .stub .si svg{width:30px;height:30px} .stub h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em;position:relative} .stub p{color:var(--ink-2);font-size:14px;max-width:520px;margin:10px auto 0;position:relative} .stub .planned{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px;position:relative} .stub .planned .chip{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--card-2); border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 13px;display:flex;align-items:center;gap:7px} .stub .planned .chip svg{width:13px;height:13px;color:var(--ink-3)} .stub .phasebar{display:inline-flex;align-items:center;gap:9px;margin-top:24px;position:relative; padding:8px 16px;border-radius:var(--radius-pill);background:var(--char);color:#fff;font-size:12.5px;font-weight:600} .stub .phasebar .d{width:7px;height:7px;border-radius:50%;background:var(--red)} /* skeleton preview (partial displays) */ .sk{display:flex;flex-direction:column;gap:11px;margin-top:26px;max-width:560px; margin-left:auto;margin-right:auto;position:relative;opacity:.7} .sk .ln{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--neutral-bg),#f3f1ee,var(--neutral-bg)); background-size:200% 100%;animation:shim 1.6s linear infinite} .sk .ln.s{width:60%}.sk .ln.m{width:82%} @keyframes shim{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.sk .ln{animation:none}} /* ============ demo ribbon ============ */ .demo-flag{position:fixed;z-index:60;left:50%;bottom:16px;transform:translateX(-50%); display:flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--radius-pill); background:rgba(33,30,28,.92);color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.02em; box-shadow:var(--shadow-lg);backdrop-filter:blur(6px)} .demo-flag .d{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none; box-shadow:0 0 0 0 rgba(239,51,64,.5);animation:pulse 2.4s infinite} @keyframes pulse{50%{box-shadow:0 0 0 6px rgba(239,51,64,0)}} @media (prefers-reduced-motion:reduce){.demo-flag .d{animation:none}} /* helpers */ .muted{color:var(--ink-3)} .sec{color:var(--ink-2)} .rt-red{color:var(--red-600)} .flex{display:flex;align-items:center;gap:10px}.between{justify-content:space-between} .wrap{flex-wrap:wrap}.gap-s{gap:6px}.mt{margin-top:14px}.mt-l{margin-top:22px} .right{margin-left:auto}.tar{text-align:right}.nowrap{white-space:nowrap} /* ============ responsive ============ */ @media (max-width:1120px){ .g-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .app{grid-template-columns:1fr} .sidebar{position:fixed;left:0;top:0;width:280px;z-index:80;transform:translateX(-100%); transition:transform .25s ease;box-shadow:var(--shadow-lg)} body.nav-open .sidebar{transform:none} .scrim{position:fixed;inset:0;background:rgba(20,18,16,.4);z-index:70;opacity:0;visibility:hidden;transition:.2s} body.nav-open .scrim{opacity:1;visibility:visible} .hamb{display:grid} .view{padding:22px 18px 48px}.topbar{padding:0 18px} .g-3,.g-2,.span-2{grid-template-columns:1fr;grid-column:auto} .tb-search{display:none} } @media (min-width:901px){.scrim{display:none}}