:root{--bg:#f5f7fb;--panel:#fff;--panel2:#f9fafb;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--primary:#635bff;--primary2:#8b5cf6;--green:#0f9f6e;--red:#e34d59;--amber:#d98b16;--shadow:0 12px 34px rgba(17,24,39,.08);--radius:18px}
html[data-theme="dark"]{--bg:#0b0f17;--panel:#111827;--panel2:#171f2e;--text:#f5f7fb;--muted:#9ca3af;--line:#263244;--primary:#8b7cff;--primary2:#a78bfa;--shadow:0 16px 40px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--panel);border-right:1px solid var(--line);padding:22px 16px;z-index:20;display:flex;flex-direction:column;gap:22px}.brand{display:flex;align-items:center;gap:12px;padding:0 6px}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 10px 25px rgba(99,91,255,.25)}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:11px;margin-top:2px}.side-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 9px}.sidebar nav{display:grid;gap:4px;overflow:auto}.nav-item{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:11px;font-size:14px;font-weight:650}.nav-item span{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}.nav-item:hover,.nav-item.active{color:var(--text);background:var(--panel2)}.nav-item.active{box-shadow:inset 3px 0 0 var(--primary)}.sidebar-card{margin-top:auto;border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:12px;display:flex;gap:9px;align-items:center}.sidebar-card strong,.sidebar-card small{display:block}.sidebar-card small{font-size:11px;color:var(--muted);margin-top:2px}.dot-live{width:9px;height:9px;border-radius:50%;background:#16c784;box-shadow:0 0 0 5px rgba(22,199,132,.12)}.main{margin-left:248px;padding:0 28px 48px}.topbar{height:76px;display:flex;align-items:center;gap:10px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);z-index:15}.search{flex:1;max-width:720px;height:44px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:0 12px;box-shadow:0 2px 8px rgba(17,24,39,.03)}.search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:14px}.search kbd,.command-search kbd{font-size:10px;border:1px solid var(--line);background:var(--panel2);border-radius:5px;padding:2px 5px;color:var(--muted)}.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.hero{border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 85% 10%,rgba(99,91,255,.14),transparent 35%),var(--panel);padding:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}.hero h1{font-size:clamp(31px,4vw,56px);letter-spacing:-.045em;line-height:.98;margin:12px 0}.hero p{max-width:660px;color:var(--muted);margin:0;line-height:1.6}.hero-stats{display:flex;gap:10px}.hero-stats div{min-width:96px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}.hero-stats strong,.hero-stats span{display:block}.hero-stats strong{font-size:22px}.hero-stats span{font-size:10px;color:var(--muted);margin-top:2px}.app-filter{display:flex;gap:8px;overflow:auto;padding:18px 0 4px}.app-filter a{white-space:nowrap;text-decoration:none;color:var(--muted);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700}.app-filter a.active{background:var(--text);color:var(--panel);border-color:var(--text)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:20px 2px 12px;font-size:13px;color:var(--muted)}.toolbar-actions{display:flex;gap:8px}.view-toggle{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--panel)}.view-toggle button{border:0;background:transparent;color:var(--muted);width:32px;height:28px;border-radius:7px;cursor:pointer}.view-toggle button.active{background:var(--panel2);color:var(--text)}.ghost-btn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:10px;padding:0 10px;cursor:pointer}.component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.component-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(17,24,39,.025);transition:.22s ease}.component-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.card-topline{height:42px;padding:10px 12px 0;display:flex;justify-content:space-between;align-items:center}.source-chip{font-size:10px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 8px}.favorite-btn{border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}.favorite-btn.active{color:#e84a7f}.preview{height:250px;padding:18px;display:grid;place-items:center;background:linear-gradient(180deg,var(--panel),var(--panel2));overflow:hidden}.card-body{padding:16px}.card-title-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.card-body h2{font-size:16px;margin:0}.badge{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--primary);background:rgba(99,91,255,.09);padding:5px 7px;border-radius:999px}.card-body p{font-size:12px;line-height:1.55;color:var(--muted);min-height:37px}.tags,.app-tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{font-size:10px;color:var(--muted)}.app-tags{margin:10px 0 6px}.app-tags span{font-size:9px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:3px 7px}.card-actions{display:flex;gap:8px;margin-top:14px}.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:9px 11px;font-size:11px;font-weight:750;cursor:pointer}.btn-primary{background:var(--text);color:var(--panel);border-color:var(--text)}.component-grid.list{display:grid;grid-template-columns:1fr}.component-grid.list .component-card{display:grid;grid-template-columns:42px 350px 1fr}.component-grid.list .card-topline{grid-column:1}.component-grid.list .preview{height:210px}.no-results{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted)}.no-results div{font-size:42px}.no-results h2{color:var(--text)}.no-results a{color:var(--primary);font-weight:700}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111827;color:#fff;border-radius:999px;padding:9px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:rgba(8,12,20,.62);backdrop-filter:blur(8px);z-index:80;padding:22px;overflow:auto}.modal-backdrop[hidden]{display:none}.modal{max-width:1020px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.28);overflow:hidden}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head small,.modal-head strong{display:block}.modal-head small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.playground-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}.device-tabs{display:flex;gap:4px}.device-tabs button,.code-tabs button{border:0;background:transparent;color:var(--muted);padding:7px 9px;border-radius:8px;font-size:11px;cursor:pointer}.device-tabs button.active,.code-tabs button.active{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}.playground-toolbar label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:8px}.playground-stage{min-height:390px;padding:40px;display:grid;place-items:center;background:#f5f7fb;transition:.2s}.playground-stage.tone-1{background:#e8ecf4}.playground-stage.tone-2{background:#111827}.modal-content{width:100%;max-width:720px;transition:.2s}.modal-content.device-tablet{max-width:560px}.modal-content.device-mobile{max-width:360px}.modal-content .preview{height:330px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}.code-panel{border-top:1px solid var(--line)}.code-tabs{display:flex;gap:6px;padding:10px 14px 0}pre{margin:0;padding:15px 18px 20px;overflow:auto;font-size:12px;color:#d6e0ff;background:#0b1020}#codeNotes{padding:10px 18px 20px;color:var(--muted);font-size:12px;line-height:1.6}.mobile-only{display:none}
/* demo components */
.demo-kpi,.demo-status,.demo-booking,.demo-vehicle,.demo-student{width:100%;max-width:340px;display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.demo-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(99,91,255,.11);color:var(--primary);font-size:22px}.demo-kpi small,.demo-kpi span,.demo-status small,.demo-status span,.demo-booking small,.demo-booking span,.demo-vehicle small,.demo-vehicle span,.demo-student small,.demo-student span{display:block;color:var(--muted);font-size:10px}.demo-kpi strong{display:block;font-size:28px;margin:2px 0}.positive{color:var(--green)!important}.demo-bento{width:100%;max-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.demo-bento>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.demo-bento .bento-big{grid-column:1/-1;padding:18px;background:linear-gradient(135deg,rgba(99,91,255,.12),transparent),var(--panel)}.demo-bento small,.demo-bento span,.demo-bento strong{display:block}.demo-bento small,.demo-bento span{font-size:10px;color:var(--muted)}.demo-bento strong{font-size:24px;margin:3px 0}.demo-mini-chart{width:100%;max-width:350px;border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:18px;display:flex;align-items:flex-end;justify-content:space-between}.demo-mini-chart small,.demo-mini-chart span{display:block;font-size:10px;color:var(--muted)}.demo-mini-chart strong{font-size:28px}.demo-mini-chart svg{width:150px;color:var(--primary)}.demo-ring{display:flex;align-items:center;gap:14px}.ring{--p:78;width:92px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--line) 0);position:relative}.ring:after{content:"";position:absolute;inset:9px;background:var(--panel);border-radius:50%}.ring span{position:relative;z-index:1;font-weight:900}.demo-ring small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.demo-stat-list{width:100%;max-width:340px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:6px 14px}.demo-stat-list>div{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);font-size:11px}.demo-stat-list>div:last-child{border-bottom:0}.demo-stat-list span{color:var(--muted)}.demo-stat-list em{font-style:normal;color:var(--green);font-size:9px}.demo-table{width:100%;max-width:430px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--panel)}.demo-table .tr{display:grid;grid-template-columns:1.4fr 1fr .7fr;padding:9px 12px;border-bottom:1px solid var(--line);font-size:10px}.demo-table .tr:last-child{border:0}.demo-table .head{background:var(--panel2);font-weight:800;color:var(--muted)}.pill{display:inline-block;font-size:9px;border-radius:999px;padding:4px 7px}.pill.ok{color:var(--green);background:rgba(15,159,110,.1)}.pill.wait{color:var(--amber);background:rgba(217,139,22,.1)}.pill.danger{color:var(--red);background:rgba(227,77,89,.1)}.demo-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.demo-chips button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:8px 10px;font-size:10px}.demo-chips button.is-active{background:var(--text);color:var(--panel);border-color:var(--text)}.demo-chips b{opacity:.6;margin-left:3px}.demo-empty{text-align:center}.demo-empty div{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 10px;border-radius:15px;background:var(--panel);border:1px solid var(--line);font-size:22px}.demo-empty strong,.demo-empty span{display:block}.demo-empty span{font-size:10px;color:var(--muted);margin:5px}.demo-empty button,.demo-drop button{border:0;background:var(--text);color:var(--panel);border-radius:9px;padding:8px 10px;font-size:10px;font-weight:800}.demo-timeline{width:100%;max-width:320px}.demo-timeline>div{position:relative;padding:4px 0 16px 24px;border-left:1px solid var(--line);font-size:10px}.demo-timeline i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--primary);left:-5px;top:5px;box-shadow:0 0 0 4px rgba(99,91,255,.1)}.demo-timeline strong,.demo-timeline span{display:block}.demo-timeline span{color:var(--muted);margin-top:2px}.demo-floating{width:100%;max-width:340px}.demo-floating label{display:block;position:relative}.demo-floating input{width:100%;padding:17px 12px 8px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);outline:0}.demo-floating label span{position:absolute;left:12px;top:6px;font-size:9px;color:var(--muted)}.demo-floating small{display:block;color:var(--green);font-size:9px;margin-top:6px}.demo-otp{display:flex;gap:7px}.demo-otp input{width:40px;height:48px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;text-align:center;font-weight:900;font-size:18px;outline:0}.demo-otp input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,91,255,.1)}.demo-stepper{display:flex;align-items:flex-start;gap:5px}.demo-stepper>div{text-align:center;min-width:58px}.demo-stepper b{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;margin:auto;border:1px solid var(--line);background:var(--panel);font-size:10px}.demo-stepper span{display:block;font-size:9px;color:var(--muted);margin-top:5px}.demo-stepper i{width:48px;border-top:2px solid var(--line);margin-top:15px}.demo-stepper .done b,.demo-stepper .active b{border-color:var(--primary);background:var(--primary);color:#fff}.demo-drop{width:100%;max-width:360px;text-align:center;border:1.5px dashed var(--line);border-radius:16px;padding:24px;background:var(--panel)}.demo-drop div{font-size:26px;color:var(--primary)}.demo-drop strong,.demo-drop span{display:block}.demo-drop span{font-size:10px;color:var(--muted);margin:5px 0 12px}.demo-segmented{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px}.demo-segmented button{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:8px;font-size:10px;font-weight:700}.demo-segmented button.active{background:var(--panel);color:var(--text);box-shadow:0 2px 5px rgba(0,0,0,.08)}.status-dot{width:11px;height:11px;border-radius:50%;background:#17c784;box-shadow:0 0 0 5px rgba(23,199,132,.12)}.demo-status>div:nth-child(2){flex:1}.demo-status b{font-size:10px}.demo-toasts{display:grid;gap:8px;width:100%;max-width:350px}.toast-mini{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:11px;box-shadow:var(--shadow)}.toast-mini>b{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:10px}.toast-mini.success>b{color:var(--green);background:rgba(15,159,110,.1)}.toast-mini.info>b{color:var(--primary);background:rgba(99,91,255,.1)}.toast-mini strong,.toast-mini small{display:block}.toast-mini small{color:var(--muted);font-size:9px;margin-top:2px}.demo-skeleton{width:100%;max-width:330px;display:flex;gap:12px;align-items:center}.sk-avatar{width:48px;height:48px;border-radius:14px;background:var(--line);animation:pulse 1.4s infinite}.demo-skeleton>div:last-child{flex:1;display:grid;gap:7px}.demo-skeleton i{height:9px;border-radius:999px;background:var(--line);animation:pulse 1.4s infinite}.demo-skeleton i:nth-child(2){width:82%}.demo-skeleton i:nth-child(3){width:56%}.demo-success{text-align:center}.demo-success div{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:auto;background:rgba(15,159,110,.1);color:var(--green);font-size:26px}.demo-success strong,.demo-success span{display:block}.demo-success strong{margin-top:8px}.demo-success span{font-size:10px;color:var(--muted);margin-top:3px}.demo-command{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.demo-command>div{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:10px}.demo-command>div:last-child{border-bottom:0}.command-search{background:var(--panel2);color:var(--muted)}.demo-sidebar{height:190px;width:180px;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:10px;display:grid;align-content:start;gap:6px}.demo-sidebar>div:not(.brand-dot){padding:8px;border-radius:9px;font-size:10px;color:var(--muted)}.demo-sidebar>div.active{background:var(--panel2);color:var(--text);font-weight:800}.brand-dot{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:900;margin-bottom:8px}.demo-tabs{width:100%;max-width:360px}.demo-tabs>div{display:flex;gap:4px;border-bottom:1px solid var(--line)}.demo-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 10px;font-size:10px;border-bottom:2px solid transparent}.demo-tabs button.active{color:var(--text);border-color:var(--primary)}.demo-tabs section{padding:18px 2px}.demo-tabs strong,.demo-tabs span{display:block}.demo-tabs span{font-size:10px;color:var(--muted);margin-top:4px}.demo-phone{width:230px;height:190px;background:var(--panel);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}.phone-content{flex:1;display:grid;place-content:center;text-align:center}.phone-content span{font-size:9px;color:var(--muted)}.demo-bottom-nav{height:54px;border-top:1px solid var(--line);display:flex;justify-content:space-around}.demo-bottom-nav button{border:0;background:transparent;color:var(--muted);font-size:15px}.demo-bottom-nav span{display:block;font-size:8px;margin-top:2px}.demo-bottom-nav button.active{color:var(--primary)}.demo-kanban{width:100%;max-width:310px;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px;box-shadow:var(--shadow)}.kanban-top,.demo-kanban>div:last-child{display:flex;justify-content:space-between;align-items:center}.demo-kanban>strong{display:block;font-size:12px;margin-top:10px}.demo-kanban p{font-size:10px;color:var(--muted)}.avatar{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(99,91,255,.12);color:var(--primary);font-size:9px;font-weight:900}.room{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;background:rgba(99,91,255,.1);color:var(--primary);font-weight:900}.demo-booking>div:nth-child(2){flex:1}.demo-order{width:100%;max-width:300px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.demo-order header,.demo-order footer{display:flex;justify-content:space-between;padding:10px 12px;background:var(--panel2);font-size:10px}.demo-order>div{padding:9px 12px;border-top:1px solid var(--line);font-size:10px}.demo-order>div b{color:var(--primary);margin-right:6px}.demo-student>div:nth-child(2){flex:1}.avatar.student{width:42px;height:42px;border-radius:50%}.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:7px 0 4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:inherit}.demo-vehicle>div:nth-child(2){flex:1}.vehicle-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(15,159,110,.1);color:var(--green)}.signal{display:flex;align-items:flex-end;gap:2px}.signal i{width:3px;background:var(--green);border-radius:2px}.signal i:nth-child(1){height:7px}.signal i:nth-child(2){height:12px}.signal i:nth-child(3){height:17px}.demo-lead{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.demo-lead header{display:flex;align-items:center;gap:9px}.demo-lead header>div:nth-child(2){flex:1}.demo-lead header strong,.demo-lead header span{display:block}.demo-lead header span,.demo-lead footer{font-size:9px;color:var(--muted)}.demo-lead header>b{font-size:11px}.lead-stage{height:5px;background:var(--line);border-radius:999px;margin:12px 0}.lead-stage i{display:block;height:100%;background:var(--primary);border-radius:inherit}.demo-lead footer{display:flex;justify-content:space-between}.demo-counter{text-align:center}.demo-counter small,.demo-counter span{display:block;color:var(--muted);font-size:10px}.demo-counter strong{font-size:44px;letter-spacing:-.04em}.demo-shimmer{position:relative;overflow:hidden;border:0;border-radius:12px;padding:13px 18px;background:#111827;color:#fff;font-weight:800;box-shadow:0 10px 25px rgba(17,24,39,.16)}.demo-shimmer:after{content:"";position:absolute;inset:-80% auto -80% -40%;width:35%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 2.3s infinite}.demo-marquee{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.demo-marquee>div{display:flex;width:max-content;gap:22px;animation:marquee 10s linear infinite}.demo-marquee span{white-space:nowrap;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:9px 12px;font-size:10px}.demo-spotlight{position:relative;width:100%;max-width:330px;overflow:hidden;border:1px solid var(--line);background:#0f172a;color:#fff;border-radius:16px;padding:24px}.demo-spotlight .spot{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(139,124,255,.48),transparent 66%);left:var(--x,20%);top:var(--y,20%);transform:translate(-50%,-50%);pointer-events:none}.demo-spotlight>*:not(.spot){position:relative;z-index:1}.demo-spotlight small,.demo-spotlight strong,.demo-spotlight span{display:block}.demo-spotlight small{color:#a5b4fc}.demo-spotlight strong{font-size:20px;margin:5px 0}.demo-spotlight span{font-size:10px;color:#aab3c5}.demo-blur-reveal{animation:blurIn 1.1s both}.demo-blur-reveal span,.demo-blur-reveal strong{display:block}.demo-blur-reveal span{font-size:10px;color:var(--primary)}.demo-blur-reveal strong{font-size:26px;margin:5px 0}.demo-blur-reveal p{font-size:10px;color:var(--muted)}.demo-ai-thinking{display:flex;align-items:center;gap:12px}.ai-orb,.ai-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 20px rgba(99,91,255,.25)}.demo-ai-thinking strong{display:block;font-size:12px}.demo-ai-thinking span{display:flex;gap:3px;margin-top:6px}.demo-ai-thinking i{width:5px;height:5px;border-radius:50%;background:var(--primary);animation:bounce 1s infinite}.demo-ai-thinking i:nth-child(2){animation-delay:.15s}.demo-ai-thinking i:nth-child(3){animation-delay:.3s}.demo-ai-composer{width:100%;max-width:420px;border:1px solid var(--line);background:var(--panel);border-radius:17px;padding:11px;box-shadow:var(--shadow)}.demo-ai-composer textarea{border:0;outline:0;background:transparent;color:var(--text);resize:none;width:100%;min-height:64px}.demo-ai-composer>div{display:flex;align-items:center;gap:7px}.demo-ai-composer button{border:1px solid var(--line);background:var(--panel2);color:var(--text);width:30px;height:30px;border-radius:9px}.demo-ai-composer span{font-size:9px;color:var(--muted);margin-right:auto}.demo-ai-composer button.send{background:var(--text);color:var(--panel);border-color:var(--text)}.demo-ai-message{width:100%;max-width:410px;display:flex;gap:10px}.demo-ai-message>div:last-child{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:4px 15px 15px 15px;padding:13px}.demo-ai-message strong{font-size:10px}.demo-ai-message p{font-size:11px;line-height:1.5}.demo-ai-message footer{display:flex;gap:5px}.demo-ai-message button{border:0;background:var(--panel2);color:var(--muted);border-radius:7px;width:25px;height:25px}.demo-generation{width:100%;max-width:360px}.demo-generation header{display:flex;justify-content:space-between;font-size:11px}.demo-generation ol{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px;font-size:9px;color:var(--muted)}.demo-generation li.done{color:var(--green)}.demo-generation li.active{color:var(--primary)}.demo-sheet-wrap{width:250px;height:190px;border:1px solid var(--line);border-radius:22px;background:var(--panel);overflow:hidden;position:relative}.sheet-back{display:grid;place-items:center;height:100%;font-size:10px;color:var(--muted)}.demo-sheet{position:absolute;inset:auto 0 0;padding:7px 13px 12px;background:var(--panel);border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 30px rgba(17,24,39,.08)}.demo-sheet>i{display:block;width:32px;border-top:3px solid var(--line);margin:0 auto 8px}.demo-sheet strong{display:block;font-size:11px;margin-bottom:6px}.demo-sheet button{width:100%;text-align:left;border:0;background:var(--panel2);color:var(--text);border-radius:8px;padding:7px;margin-top:4px;font-size:9px}.demo-swipe{width:100%;max-width:360px;position:relative;border-radius:13px;overflow:hidden;background:#e85c68}.swipe-actions{position:absolute;inset:0 0 0 auto;display:flex}.swipe-actions button{width:48px;border:0;color:#fff;background:transparent}.swipe-row{position:relative;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px;transform:translateX(-48px)}.swipe-row>div:nth-child(2){flex:1}.swipe-row strong,.swipe-row span{display:block}.swipe-row span{font-size:9px;color:var(--muted);margin-top:2px}
@keyframes pulse{50%{opacity:.48}}@keyframes shimmer{0%{left:-40%}70%,100%{left:140%}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes blurIn{from{opacity:0;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}@keyframes bounce{50%{transform:translateY(-4px)}}
@media(max-width:1180px){.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{align-items:flex-start;flex-direction:column}.hero-stats{width:100%}.hero-stats div{flex:1}}
@media(max-width:820px){.sidebar{transform:translateX(-102%);transition:.2s}.sidebar.open{transform:none;box-shadow:20px 0 50px rgba(0,0,0,.2)}.main{margin-left:0;padding:0 14px 30px}.mobile-only{display:block}.topbar{height:66px}.hero{padding:25px}.hero-stats{overflow:auto}.component-grid{grid-template-columns:1fr}.component-grid.list .component-card{display:block}.preview{height:230px}.modal-backdrop{padding:0}.modal{min-height:100vh;border-radius:0}.playground-stage{padding:24px 12px}.playground-toolbar{gap:10px;overflow:auto}.search kbd{display:none}}

/* v0.3 AI-ready */
.ai-ready-bar{margin:0 0 1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.15rem;border:1px solid var(--border);background:var(--panel);border-radius:18px}.ai-ready-bar>div{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.ai-ready-bar span{color:var(--muted);font-size:.82rem}.ai-ready-bar .btn{text-decoration:none}.detail-page,.patterns-page{max-width:1180px;margin:auto;padding:2rem 1.25rem 4rem}.detail-back{display:inline-flex;margin-bottom:1.25rem;color:var(--muted);text-decoration:none}.detail-hero,.patterns-head{padding:1.5rem 0}.detail-hero{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.detail-hero h1,.patterns-head h1{font-size:clamp(2rem,5vw,4rem);margin:.35rem 0}.detail-hero p,.patterns-head p{color:var(--muted);max-width:760px}.detail-preview{min-height:360px;display:grid;place-items:center;border:1px solid var(--border);border-radius:24px;background:var(--panel);padding:2rem}.detail-preview .preview{width:min(720px,100%)}.detail-code{margin-top:1.25rem;border:1px solid var(--border);border-radius:20px;background:var(--panel);padding:1.25rem}.detail-code pre{overflow:auto;padding:1rem;border-radius:14px;background:var(--bg)}.detail-links{display:flex;gap:.75rem;flex-wrap:wrap}.detail-links a{color:var(--accent);text-decoration:none}.patterns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.pattern-card{border:1px solid var(--border);background:var(--panel);border-radius:22px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.pattern-card h2{margin:.55rem 0}.pattern-card p,.pattern-card small{color:var(--muted)}.pattern-components{display:flex;gap:.5rem;flex-wrap:wrap}.pattern-components a{padding:.45rem .65rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);font-size:.82rem}.pattern-card footer{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-top:auto}.pattern-card footer a{white-space:nowrap;text-decoration:none;color:var(--accent)}@media(max-width:760px){.ai-ready-bar,.detail-hero,.pattern-card footer{align-items:stretch;flex-direction:column}.patterns-grid{grid-template-columns:1fr}.detail-page,.patterns-page{padding:1.2rem .9rem 3rem}.detail-preview{padding:1rem;min-height:300px}}