.shell { grid-template-columns: 228px minmax(0, 1fr); background: #F6F7FB; }
.side { background: #080B16; color: #e8eaf2; width: 228px; height: 100vh; position: sticky; top: 0; overflow: hidden; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.side .brand { color: #fff; letter-spacing: .12em; display: flex; align-items: center; gap: 8px; }
.side nav a { justify-content: flex-start; gap: 12px; font-size: 14px; color: rgba(255,255,255,.72); }
.side nav a svg { width: 20px; height: 20px; flex: 0 0 20px; }
.side nav a span { flex: 1; text-align: left; min-width: 0; }
.side nav a b { margin-left: auto; flex: 0 0 auto; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: #EF4444; color: #fff; font-size: 11px; display: grid; place-items: center; }
.bell-wrap .icon { position: relative; }
.side nav a { border-radius: 12px; color: rgba(255,255,255,.78); }
.side nav a[aria-current="page"] { background: linear-gradient(100deg, #60A5FA, #4F46E5 55%, #7C3AED); color: #fff; }
.help { margin-top: auto; display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: #12182b; color: #fff; text-decoration: none; }
.help span, .help em { color: rgba(255,255,255,.65); font-style: normal; font-size: 13px; }
.top { background: transparent; border: 0; gap: 10px; position: sticky; top: 0; z-index: 5; }
.search-btn { flex: 1; max-width: 520px; height: 42px; border-radius: 12px; border: 1px solid #E7E9F0; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; color: #667085; cursor: pointer; }
.search-btn kbd { font-size: 12px; }
.new-btn { height: 42px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(100deg, #60A5FA, #4F46E5); cursor: pointer; padding: 0 14px; }
.menu { position: absolute; top: 48px; right: 0; min-width: 220px; background: #fff; border: 1px solid #E7E9F0; border-radius: 14px; padding: 8px; box-shadow: 0 12px 30px rgba(15,23,42,.08); z-index: 8; }
.menu a, .menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.new-wrap, .bell-wrap { position: relative; }
.notes { width: 280px; }
.notes .unread { font-weight: 700; }
.who em { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { max-width: 1560px; padding: 20px 24px 48px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.side nav a:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.06); }
.side nav a svg { opacity: .9; }
.side nav a[aria-current="page"] svg { opacity: 1; }
.user-wrap { position: relative; }
.who { border: 0; background: transparent; cursor: pointer; padding: 0; }
.progress { height: 8px; background: #E7E9F0; border-radius: 99px; overflow: hidden; margin: 8px 0 14px; }
.progress span { display: block; height: 100%; background: #4F46E5; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #E7E9F0; border-radius: 14px; }
.step p { margin: 2px 0 0; color: #667085; font-size: 14px; }
.step-mark { width: 28px; height: 28px; border-radius: 99px; border: 1px solid #E7E9F0; display: grid; place-items: center; }
.step.is-done .step-mark { background: #10B981; color: #fff; border-color: #10B981; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.summary a, .attention a { text-decoration: none; }
.summary a { background: #fff; border: 1px solid #E7E9F0; border-radius: 999px; padding: 6px 10px; }
.attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.level-critical a { color: #B91C1C; }
.level-warning a { color: #B45309; }
.empty { display: grid; gap: 6px; justify-items: start; padding: 8px 0; }
.empty p { margin: 0; color: #667085; }
.qa { display: grid; }
.dash-head { margin-bottom: 12px; }
.create-card { display: grid; align-content: center; gap: 4px; text-align: left; }
.dash-head, .dash-grid, .kpis, .quick { display: grid; gap: 14px; }
.dash-head { grid-template-columns: 1.4fr .8fr; align-items: stretch; margin-bottom: 16px; }
.dash-date { margin: 0; color: #667085; font-size: 14px; }
.create-card { text-align: left; border: 0; border-radius: 20px; padding: 18px; color: #fff; cursor: pointer; background: linear-gradient(120deg, #312e81, #4F46E5); }
.create-card span { display: block; color: rgba(255,255,255,.75); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 14px; text-decoration: none; display: grid; gap: 4px; }
.kpi strong { font-size: 24px; }
.kpi small, .kpi em, .kpi span { color: #667085; font-style: normal; font-size: 12px; }
.dash-grid { grid-template-columns: 1.1fr .9fr; margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.site-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; }
.site-row b { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: #4338ca; }
.site-row span, .site-row em { display: block; color: #667085; font-style: normal; font-size: 13px; }
.board { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 8px; overflow-x: auto; margin: 12px 0; }
.setup ol { margin: 0; padding-left: 18px; }
.palette { position: fixed; inset: 0; background: rgba(8,11,22,.45); display: grid; place-items: start center; padding-top: 12vh; z-index: 20; }
.palette[hidden] { display: none; }
.palette-card { width: min(640px, calc(100% - 24px)); background: #fff; border-radius: 16px; padding: 12px; }
.palette-card input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid #E7E9F0; padding: 0 12px; }
.palette a, .palette button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px; cursor: pointer; }
.palette [aria-selected="true"] { background: #eef2ff; }
.top { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid #E7E9F0; position: sticky; top: 0; z-index: 6; }
.content { max-width: 1560px; margin: 0 auto; padding: 24px 28px 48px; }
a.btn, button.btn { background: #4F46E5; color: #fff; border-radius: 12px; }
a.btn.ghost, button.btn.ghost { background: #fff; color: #111827; border: 1px solid #E4E7EC; }
button.new-btn { background: #4F46E5; color: #fff; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; }
.step-actions { display: flex; gap: 8px; align-items: center; }
.quick { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.qa { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; background: #fff; border: 1px solid #E4E7EC; border-radius: 16px; padding: 16px; text-decoration: none; }
.qa-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EEF2FF; color: #4F46E5; }
.qa-social .qa-icon { background: #FDF2F8; color: #BE185D; }
.qa-lead .qa-icon { background: #ECFDF5; color: #047857; }
.qa-project .qa-icon { background: #FFFBEB; color: #B45309; }
.qa-task .qa-icon { background: #EEF2FF; color: #4338CA; }
.qa strong { font-size: 14px; }
.qa em { font-style: normal; color: #667085; font-size: 13px; }
.menu-user { margin: 4px 8px 8px; }
.menu-user span { display: block; color: #667085; font-size: 13px; }
.create-card { position: relative; }
.create-card .arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.dash-head h1 { font-size: 32px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }
.shell.is-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.shell.is-collapsed .side { width: 72px; }
.shell.is-collapsed .side nav a { justify-content: center; padding: 0; }
.shell.is-collapsed .side nav a span, .shell.is-collapsed .side nav a b, .shell.is-collapsed .group, .shell.is-collapsed .side .word, .shell.is-collapsed .help span, .shell.is-collapsed .help em, .shell.is-collapsed .help strong { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.collapse-desk { display: inline-grid; }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .dash-head, .dash-grid, .quick { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .shell, .shell.is-collapsed { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; transform: translateX(-105%); z-index: 12; width: min(280px, 86vw); }
  .side.is-open { transform: none; }
  .collapse-desk { display: none; }
  .search-btn span { display: none; }
  .who em { display: none; }
  .kpis, .quick { grid-template-columns: 1fr; }
}
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan-card { background: #fff; border: 1px solid #E7E9F0; border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.plan-card.is-popular { border-color: #4F46E5; }
.plan-card .pill { width: fit-content; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #EEF2FF; color: #3730A3; }
.plan-grid[data-interval="month"] .price-year { display: none; }
.plan-grid[data-interval="year"] .price-month { display: none; }
.interval { display: flex; gap: 8px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #667085; margin: 0 0 6px; }
.web-head { align-items: start; }
.usage-card, .web-row, .note-card, .empty-web, .add-card { background: #fff; border: 1px solid #E7E9F0; border-radius: 16px; }
.usage-card { padding: 16px 18px; min-width: 220px; display: grid; gap: 6px; }
.web-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 18px 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs a { text-decoration: none; color: #344054; padding: 8px 10px; border-radius: 999px; }
.tabs a[aria-current="page"] { background: #EEF2FF; color: #3730A3; }
.web-list { display: grid; gap: 12px; }
.web-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; }
.web-preview { height: 102px; border-radius: 12px; background: #EEF2FF; display: grid; place-items: center; color: #3730A3; font-weight: 650; }
.web-actions, .empty-web, .add-card, .note-card { display: grid; gap: 8px; justify-items: start; }
.web-actions { padding-right: 4px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 12px; background: #F2F4F7; color: #344054; }
.badge-active { background: #ECFDF3; color: #067647; }
.badge-development { background: #EEF2FF; color: #3730A3; }
.badge-staging { background: #F4F3FF; color: #5925DC; }
.badge-maintenance { background: #FFFAEB; color: #B54708; }
.badge-archived, .badge-restricted { background: #F2F4F7; color: #475467; }
.btn.danger { background: #B42318; }
dialog { border: 0; border-radius: 16px; padding: 20px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(8, 11, 22, .45); }
.check { display: flex; gap: 8px; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) {
  .web-row { grid-template-columns: 1fr; }
  .web-preview { height: 140px; }
  .usage-card { min-width: 0; }
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 0; border-bottom: 1px solid #E7E9F0; }
td:last-child, th:last-child { text-align: right; }
.cal { display: grid; gap: 6px; margin: 12px 0; }
.cal-day { min-height: 84px; background: #fff; border: 1px solid #E7E9F0; border-radius: 12px; padding: 6px; display: grid; align-content: start; gap: 4px; }
.cal-day a { font-size: 12px; text-decoration: none; }
.cal-day.is-out { opacity: .45; }
.social-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1024px) {
  .social-layout { grid-template-columns: 1fr; }
}
.seo-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 14px; margin-top: 14px; }
.seo-grid.three { grid-template-columns: repeat(3, 1fr); }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (max-width: 1024px) {
  .seo-grid, .seo-grid.three { grid-template-columns: 1fr; }
}
.table-wrap { overflow-x: auto; }
.orders-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
@media (max-width: 1024px) {
  .orders-layout { grid-template-columns: 1fr; }
}
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { min-width: 220px; flex: 0 0 220px; background: #F8F9FC; border: 1px solid #E7E9F0; border-radius: 14px; padding: 10px; }
.studio-hero h1 { font-size: 40px; letter-spacing: -.03em; margin: 0; }
.studio-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 8px 0 14px; }
.studio-kpi { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; }
.studio-kpi small, .studio-kpi span { color: #667085; font-size: 13px; }
.studio-kpi strong { font-size: 32px; letter-spacing: -.04em; line-height: 1.1; }
.studio-split { display: grid; grid-template-columns: 1.45fr .85fr; gap: 14px; margin-bottom: 14px; }
.studio-card { background: #fff; border: 1px solid #ECEEF3; border-radius: 20px; padding: 18px 20px; }
.studio-card h2 { margin: 0; font-size: 18px; }
.studio-count { min-width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #F4F1FF; color: #5B4BDB; }
.studio-task { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #F0F1F5; margin: 0; }
.home-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #F0F1F5; text-decoration: none; color: inherit; }
.home-card b { width: 56px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #F4F1EA; }
.home-card em, .home-card i { display: block; color: #667085; font-style: normal; font-size: 13px; }
.home-card i { background: #F4F5F7; border-radius: 999px; padding: 4px 8px; }
@media (max-width: 1024px) {
  .studio-kpis, .studio-split { grid-template-columns: 1fr; }
  .studio-hero h1 { font-size: 32px; }
}