:root{
  --accent:#6c5ce7;--accent-rgb:108,92,231;--accent-dark:#5145c7;--ink:#172033;--muted:#6d778d;--line:#e6e9f0;--soft:#f5f6fa;--card:#fff;--good:#15966f;--warn:#d88a22;--bad:#d94f5c;--sidebar:#111827;--shadow:0 14px 40px rgba(28,35,55,.08);--radius:16px
}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--soft)}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;padding:22px 16px;background:linear-gradient(180deg,#111827 0%,#0d1423 100%);color:#fff;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 25px}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--accent);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 8px 20px rgba(var(--accent-rgb),.28);overflow:hidden;flex:0 0 auto}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand strong,.brand span{display:block}.brand strong{font-size:15px}.brand span{font-size:11px;color:#909bb1;margin-top:2px}.mobile-close{display:none;margin-left:auto;color:#fff}.sidebar nav{display:grid;gap:5px}.nav-link{width:100%;display:flex;gap:12px;align-items:center;border:0;background:transparent;color:#9aa5ba;padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer;font-weight:650;font-size:13px;transition:.18s}.nav-link span{width:18px;text-align:center;font-size:16px}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.09);color:#fff}.nav-link.active{box-shadow:inset 3px 0 var(--accent)}.sidebar-footer{margin-top:auto;padding:16px 8px 2px;display:grid;gap:12px}.sidebar-footer a{color:#98a3b8;font-size:11px;text-decoration:none}.sidebar-footer a:hover{color:#fff}.demo-status{display:flex;gap:9px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:16px}.demo-status strong,.demo-status small{display:block;font-size:11px}.demo-status small{color:#7d89a1;margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:#38d39f;box-shadow:0 0 0 4px rgba(56,211,159,.12);margin-top:4px}.main{grid-column:2;min-width:0}.topbar{min-height:102px;padding:22px clamp(20px,4vw,52px);background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:15;backdrop-filter:blur(16px)}.page-heading{min-width:0}.page-heading h1{font-size:24px;letter-spacing:-.6px;margin:3px 0 3px}.page-heading p{margin:0;color:var(--muted);font-size:12px}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:9px;font-weight:800;color:var(--accent)}.topbar-actions{margin-left:auto;display:flex;gap:9px;flex:0 0 auto}.content{padding:28px clamp(20px,4vw,52px) 60px;max-width:1540px;margin:0 auto}.grid{display:grid;gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:22px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{padding:20px;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;inset:auto -20px -36px auto;width:90px;height:90px;border-radius:50%;background:rgba(var(--accent-rgb),.06)}.stat-label{font-size:11px;font-weight:700;color:var(--muted)}.stat-value{font-size:29px;font-weight:800;letter-spacing:-1px;margin:8px 0 4px}.stat-meta{font-size:10px;color:var(--muted)}.stat-meta.up{color:var(--good)}.stat-meta.down{color:var(--warn)}.dashboard-grid{grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);margin-top:16px;align-items:start}.compact-stack{gap:16px}.card-title{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}.card-title h2{margin:0 0 4px;font-size:15px;letter-spacing:-.2px}.card-title p{margin:0;color:var(--muted);font-size:11px}.spacer{margin-left:auto}.btn,.icon-btn,.link-btn,.quick-card,.mini-row,.record-card,.check-btn,.icon-action{cursor:pointer}.btn{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-size:11px;font-weight:750;transition:.16s;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 7px 16px rgba(var(--accent-rgb),.2)}.btn.primary:hover{background:var(--accent-dark)}.btn.secondary{background:#fff;border-color:var(--line);color:var(--ink)}.btn.secondary:hover{border-color:#cdd2de;background:#fafbfc}.btn.danger{color:#fff;background:var(--bad);margin-top:16px}.btn.small{padding:8px 10px;font-size:10px}.icon-btn{width:36px;height:36px;border:0;background:transparent;border-radius:9px;display:grid;place-items:center}.icon-btn:hover{background:rgba(0,0,0,.05)}.menu-btn{display:none}.link-btn{border:0;background:transparent;padding:0;color:var(--accent);font-weight:750;font-size:11px;text-align:left}.link-btn:hover{text-decoration:underline}.pill{display:inline-flex;align-items:center;border-radius:99px;padding:5px 8px;background:#f0f2f6;color:#596378;font-size:9px;font-weight:750;white-space:nowrap}.pill.good{background:#e8f7f1;color:var(--good)}.pill.warn{background:#fff5e6;color:var(--warn)}.pill.bad{background:#fdecef;color:var(--bad)}.sub{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.5}.person{display:flex;align-items:center;gap:10px;min-width:0}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--accent-rgb),.11);color:var(--accent);font-size:9px;font-weight:800;flex:0 0 auto}.avatar.large{width:46px;height:46px;font-size:12px}.avatar.square{border-radius:10px}.empty{padding:34px 16px;text-align:center;color:var(--muted);display:grid;gap:6px;font-size:11px}.empty strong{color:var(--ink);font-size:13px}.toolbar{display:flex;align-items:center;gap:9px;margin-bottom:15px;flex-wrap:wrap}.search-wrap{min-width:220px;flex:1}.search-wrap input,.field,select,textarea{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:10px 11px;font-size:11px;outline:none;transition:.15s}.search-wrap input:focus,.field:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}select{width:auto;min-width:110px;color-scheme:light}.split-view{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.table-card{overflow:hidden}.desktop-table{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:11px}.data-table th{text-align:left;padding:12px 14px;background:#fafbfc;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.6px}.data-table td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:middle}.data-table tbody tr:hover{background:#fbfbfd}.detail-panel{padding:21px;position:sticky;top:124px}.detail-panel h2{font-size:17px;margin:12px 0 2px}.detail-heading h2{margin:0}.detail-list{display:grid;margin:20px 0}.detail-item{padding:11px 0;border-top:1px solid var(--line);display:grid;gap:4px}.detail-item span{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}.detail-item strong{font-size:11px;line-height:1.45;overflow-wrap:anywhere}.detail-actions{display:flex;gap:8px}.detail-actions .btn:last-child{flex:1}.mobile-records{display:none}.mini-list{display:grid}.mini-row,.record-card{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:9px 2px;text-align:left;border-top:1px solid var(--line)}.mini-row:first-child,.record-card:first-child{border-top:0}.mini-row:hover,.record-card:hover{background:#fafbfc}.mini-row span:nth-child(2),.record-card span:nth-child(2){min-width:0;flex:1}.mini-row strong,.mini-row small,.record-card strong,.record-card small{display:block}.mini-row strong,.record-card strong{font-size:11px;color:var(--ink)}.mini-row small,.record-card small{font-size:9px;color:var(--muted);margin-top:2px}.mini-row b,.record-card b{color:var(--muted)}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-card{border:1px solid var(--line);background:#fff;border-radius:11px;padding:13px;text-align:left;display:grid;gap:4px}.quick-card:hover{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.025)}.quick-card strong{font-size:11px;color:var(--ink)}.quick-card span{font-size:9px;color:var(--muted)}.task-list{display:grid}.task-row{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--line)}.task-row:first-child{border-top:0}.task-row.done .task-copy strong{text-decoration:line-through;color:var(--muted)}.check-btn{width:24px;height:24px;border:1px solid #d3d8e2;background:#fff;border-radius:7px;color:#fff;font-size:12px}.task-row.done .check-btn{background:var(--good);border-color:var(--good)}.task-icon{width:28px;height:28px;border-radius:8px;background:rgba(var(--accent-rgb),.09);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:800}.task-copy{min-width:0}.task-copy strong{font-size:11px}.icon-action{border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:750;padding:6px}.danger-text{color:var(--bad)}.report-grid{grid-template-columns:1fr 1fr;margin-top:16px}.bar-list{display:grid;gap:14px}.bar-row{display:grid;grid-template-columns:90px minmax(0,1fr) 24px;align-items:center;gap:10px;font-size:10px}.bar-row strong{overflow:hidden;text-overflow:ellipsis}.bar-row b{text-align:right}.bar-track{height:8px;background:#eef0f5;border-radius:99px;overflow:hidden}.bar-track span{display:block;height:100%;min-width:3px;background:linear-gradient(90deg,var(--accent),#9b8df2);border-radius:99px}.report-summary{margin-top:16px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.report-summary h2{margin:6px 0;font-size:18px}.report-summary p{margin:0;color:var(--muted);font-size:11px}.donut{--progress:0;width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--progress)*1%),#eceef3 0);display:grid;place-content:center;text-align:center;position:relative;flex:0 0 auto}.donut:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}.donut strong,.donut span{z-index:1}.donut strong{font-size:20px}.donut span{font-size:9px;color:var(--muted)}.settings-grid{grid-template-columns:1fr 1fr}.logo-preview{min-height:105px;border:1px dashed #cfd4de;border-radius:12px;background:#fafbfc;display:grid;place-items:center;margin-bottom:18px}.logo-preview .brand-mark{width:54px;height:54px}.form-group{display:grid;gap:6px;margin-bottom:12px}.form-group label{font-size:10px;font-weight:750}.color-row{display:grid;grid-template-columns:46px 1fr;gap:8px}.color-row input[type=color]{width:46px;height:38px;border:1px solid var(--line);padding:3px;background:#fff;border-radius:8px}.toggle-row{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line)}.toggle-row:first-of-type{border-top:0}.toggle-row strong{font-size:11px}.toggle{width:39px;height:22px;border:0;border-radius:99px;background:#cfd4de;padding:3px;cursor:pointer;flex:0 0 auto}.toggle:before{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}.toggle.on{background:var(--accent)}.toggle.on:before{transform:translateX(17px)}.how-hero{padding:clamp(28px,5vw,56px);border-radius:20px;background:linear-gradient(135deg,#111827,#1d2640);color:#fff;position:relative;overflow:hidden}.how-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-70px;top:-90px;background:radial-gradient(circle,rgba(var(--accent-rgb),.45),transparent 68%)}.how-hero h2{font-size:clamp(28px,4vw,44px);max-width:720px;letter-spacing:-1.7px;line-height:1.08;margin:10px 0 14px;position:relative;z-index:1}.how-hero p{max-width:690px;color:#bbc3d3;line-height:1.7;font-size:12px;margin:0 0 20px;position:relative;z-index:1}.how-hero .btn{position:relative;z-index:1}.how-grid{grid-template-columns:repeat(4,1fr);margin-top:18px}.feature-card{padding:20px;box-shadow:none}.feature-icon{width:34px;height:34px;border-radius:10px;background:rgba(var(--accent-rgb),.1);color:var(--accent);display:grid;place-items:center;font-weight:800}.feature-card h3{font-size:13px;margin:15px 0 7px}.feature-card p{font-size:10px;line-height:1.65;color:var(--muted);margin:0}.relationship{padding:28px;margin-top:18px}.relationship-flow{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}.relation-node{padding:16px 22px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:800;background:#fafbfc}.relation-arrow{color:var(--accent);font-size:20px}.center-note{text-align:center;margin-top:18px}.upgrade{margin-top:18px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:20px}.upgrade h2{margin:6px 0;font-size:20px}.upgrade p{margin:0;color:var(--muted);font-size:11px;max-width:750px;line-height:1.6}.modal-backdrop{position:fixed;inset:0;background:rgba(8,12,22,.52);z-index:50;display:none;place-items:center;padding:18px;backdrop-filter:blur(3px)}.modal-backdrop.open{display:grid}.modal{width:min(640px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.24)}.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{font-size:19px;margin:4px 0 0}.modal-body{padding:22px}.modal-actions{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.form-grid .full{grid-column:1/-1}.toast-region{position:fixed;right:20px;bottom:20px;z-index:70;display:grid;gap:8px}.toast{background:#172033;color:#fff;padding:11px 14px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:11px;animation:toast-in .2s ease}.sidebar-scrim{display:none}@keyframes toast-in{from{opacity:0;transform:translateY(6px)}}
@media(max-width:1120px){.stats-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr 1fr}.split-view{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:820px){.app-shell{display:block}.main{grid-column:auto}.sidebar{transform:translateX(-100%);transition:.2s;box-shadow:20px 0 50px rgba(0,0,0,.22)}.sidebar.open{transform:none}.sidebar.open+.sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}.mobile-close,.menu-btn{display:grid}.topbar{padding:16px 18px;min-height:88px}.content{padding:20px 16px 48px}.topbar-actions .secondary{display:none}.split-view{grid-template-columns:1fr}.detail-panel{position:static}.settings-grid,.report-grid{grid-template-columns:1fr}.desktop-table{display:none}.mobile-records{display:block;padding:8px 14px}.table-card{overflow:visible}.how-grid{grid-template-columns:1fr 1fr}.task-row{grid-template-columns:28px 30px minmax(0,1fr) auto}.task-row>.pill{grid-column:3}.task-row .icon-action{grid-row:2}.task-row .danger-text{grid-column:4}.upgrade{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.page-heading p{display:none}.page-heading h1{font-size:19px}.topbar-actions .btn{font-size:0;padding:10px}.topbar-actions .btn:after{content:"＋";font-size:16px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:16px}.stat-value{font-size:24px}.toolbar{align-items:stretch}.search-wrap{flex-basis:100%}.toolbar select{flex:1}.toolbar .btn{flex:1}.card-pad{padding:17px}.quick-grid{grid-template-columns:1fr 1fr}.how-grid{grid-template-columns:1fr}.how-hero{padding:30px 22px}.how-hero h2{font-size:30px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.report-summary{align-items:flex-start}.donut{width:82px;height:82px}.task-row{grid-template-columns:26px minmax(0,1fr) auto;gap:8px}.task-icon{display:none}.task-copy{grid-column:2/-1}.task-row>.pill{grid-column:2}.task-row .icon-action{grid-row:auto;grid-column:auto}.task-row .danger-text{grid-column:auto}.detail-actions{flex-direction:column}.relationship-flow{flex-direction:column}.relation-arrow{transform:rotate(90deg)}}