#appShell {
  --ink:#202534; --muted:#737b8b; --line:#e8eaf0; --purple:#6853d8; --radius:12px;
  color:var(--ink); background:#f7f8fa; font-size:13px;
}
#appShell.shell { grid-template-columns:236px minmax(0,1fr); min-height:100dvh; background:#f7f8fa; transition:grid-template-columns .2s ease; }
#appShell .side { position:sticky; top:0; margin:0; height:100dvh; min-height:0; padding:22px 12px 14px; border:0; border-inline-end:1px solid var(--line); border-radius:0; background:#fff; box-shadow:none; overflow-y:auto; overflow-x:hidden; }
#appShell .logo { gap:10px; padding:0 9px 26px; min-height:62px; }
#appShell .logo-mark { flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:var(--purple); box-shadow:none; font-size:20px; }
#appShell .logo strong { font-size:16px; }
#appShell .logo small { font-size:10px; color:var(--muted); white-space:nowrap; }
#appShell .nav { gap:5px; }
#appShell .nav button { position:relative; min-height:43px; width:100%; padding:10px 12px; gap:10px; border:0; border-radius:9px; color:#667080; background:transparent; box-shadow:none; font-size:12px; font-weight:400; transition:background .15s,color .15s; }
#appShell .nav button::before,#appShell .nav button::after { display:none; }
#appShell .nav button:hover { background:#f6f7fa; color:var(--ink); transform:none; }
#appShell .nav button.active { background:#f0edfc; color:#604bc9; font-weight:700; box-shadow:none; border:0; }
#appShell .nav .icon { flex:0 0 20px; width:20px; height:20px; display:grid; place-items:center; background:none; box-shadow:none; border-radius:0; color:inherit; }
#appShell .nav svg { width:19px; height:19px; }
#appShell .nav button b { margin-inline-start:auto; margin-inline-end:0; min-width:20px; padding:1px 6px; background:#f0f1f5; color:#737b8b; border-radius:5px; font-size:10px; }
#appShell .side-bottom { margin-top:auto; padding:18px 10px 0; border-color:var(--line); border-radius:0; background:none; font-size:10px; line-height:1.9; }
#appShell .app { width:100%; max-width:1580px; min-width:0; margin:0 auto; padding:22px 28px 36px; }
#appShell .top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:0 0 22px; margin:0; border:0; }
#appShell .title h1 { font-size:19px; line-height:1.6; font-weight:700; letter-spacing:0; }
#appShell .title p { font-size:11px; margin:3px 0 0; color:var(--muted); }
#appShell .top-actions { flex-wrap:nowrap; gap:7px; }
#appShell .btn,#appShell .icon-btn { min-height:36px; padding:8px 12px; border-radius:8px; font-size:11px; box-shadow:none; transition:background .15s,border-color .15s; }
#appShell .icon-btn { display:inline-grid; place-items:center; width:36px; padding:0; color:#687082; border:1px solid var(--line); background:#fff; }
#appShell .icon-btn svg { width:19px; height:19px; }
#appShell .mobile-menu { display:inline-grid; }
#appShell .panel-menu-close { display:none; }
#appShell .btn:hover { transform:none; box-shadow:none; filter:brightness(.98); }
#appShell .primary { background:var(--purple); color:#fff; border:1px solid var(--purple); }
#appShell .ghost { background:#fff; border:1px solid var(--line); color:#555e70; }
#appShell .danger { background:#fff8f8; color:#b94a59; border:1px solid #f1dfe2; }
#appShell :is(button,a,input,select,textarea):focus-visible { outline:3px solid #a79be9; outline-offset:3px; }
#appShell .hero { display:block; min-height:0; padding:20px 22px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; box-shadow:none; overflow:visible; }
#appShell .hero::before,#appShell .hero::after,#appShell .hero-art { display:none; }
#appShell .hero-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:22px; max-width:none; }
#appShell .hero .badge { grid-column:1; justify-self:start; border:0; padding:0; margin:0 0 6px; background:transparent!important; color:var(--purple)!important; font-size:10px; }
#appShell .hero h2 { grid-column:1; margin:0; font-size:18px; line-height:1.7; letter-spacing:0; }
#appShell .hero p { grid-column:1; margin:6px 0 0; font-size:11px; line-height:1.9; color:var(--muted); max-width:620px; }
#appShell .hero .btn { grid-column:2; grid-row:1/4; white-space:nowrap; background:#f4f1ff!important; color:var(--purple)!important; border:1px solid #e8e1ff; }
#appShell .metrics { gap:12px; margin:16px 0; grid-template-columns:repeat(4,minmax(0,1fr)); }
#appShell .metric { min-height:94px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:none; transition:none; }
#appShell .metric:hover { transform:none; box-shadow:none; }
#appShell .metric::after { display:none; }
#appShell .metric span { font-size:11px; color:var(--muted); }
#appShell .metric strong { font-size:25px; font-weight:700; color:var(--ink); margin-top:6px; letter-spacing:0; line-height:1.3; }
#appShell .dash-grid { grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr); gap:16px; align-items:start; }
#appShell .card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:none; backdrop-filter:none; }
#appShell .card h3 { font-size:13px; letter-spacing:0; }
#appShell .card-head { gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #f0f1f5; }
#appShell .card-head .btn { padding:6px 10px; border-radius:7px; min-height:32px; font-size:10px; }
#appShell .stores-grid { gap:14px; }
#appShell .store-list { gap:12px; }
#appShell #recentStores .store-card { display:block; padding:14px; border-radius:9px; border:1px solid #eceef3; background:#fff; box-shadow:none; }
#appShell .store-card h3 { font-size:13px; margin-bottom:5px; }
#appShell .store-card p { font-size:11px; line-height:2; overflow-wrap:anywhere; }
#appShell .store-card p b { font-weight:400; color:#5b6372; }
#appShell .chip { margin:10px 0; padding:3px 8px; border-radius:6px; font-size:10px; background:#f2f3f7; color:#626b7c; }
#appShell .store-actions { gap:7px; margin-top:5px; }
#appShell #recentStores .store-card .store-actions { margin-top:4px; }
#appShell .store-actions .btn { padding:7px 9px; min-height:34px; font-size:10px; }
#appShell .quick { gap:8px; }
#appShell .quick button { min-height:44px; display:flex; align-items:center; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#626b7c; font-size:11px; font-weight:400; box-shadow:none; }
#appShell .quick button::after { content:'←'; margin-inline-start:auto; color:#9299a7; }
#appShell .quick button:hover { background:#f8f7fc; transform:none; box-shadow:none; }
#appShell .page-head { margin:0 0 17px; }
#appShell .page-head h2 { font-size:17px; }
#appShell .page-head p { font-size:11px; line-height:1.9; }
#appShell .toolbar { margin:12px 0; }
#appShell .toolbar input,#appShell .field input,#appShell .field select,#appShell .field textarea { border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:12px; min-width:0; }
#appShell .toolbar input { max-width:520px; }
#appShell .plans { gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
#appShell .plan { padding:17px; }
#appShell .plan h3 { font-size:15px; }
#appShell .notice { border-radius:8px; font-size:11px; }
#appShell [hidden] { display:none!important; }
@media(min-width:951px) {
  #appShell.sidebar-collapsed { grid-template-columns:76px minmax(0,1fr); }
  #appShell.sidebar-collapsed .side { padding-inline:10px; }
  #appShell.sidebar-collapsed .logo { justify-content:center; padding-inline:0; }
  #appShell.sidebar-collapsed .logo > span:not(.logo-mark),#appShell.sidebar-collapsed .nav button > span:not(.icon),#appShell.sidebar-collapsed .side-bottom { display:none; }
  #appShell.sidebar-collapsed .nav button { justify-content:center; padding:11px; gap:0; }
  #appShell.sidebar-collapsed .nav button b { position:absolute; inset-inline-start:0; top:1px; font-size:8px; min-width:14px; padding:0 3px; }
}
@media(max-width:1100px) and (min-width:951px) {
  #appShell .app { padding-inline:20px; }
  #appShell .dash-grid { grid-template-columns:minmax(0,1fr); }
  #appShell .hero-copy { grid-template-columns:minmax(0,1fr); }
  #appShell .hero .btn { grid-column:1; grid-row:auto; justify-self:start; margin-top:12px; }
}
@media(max-width:950px) {
  #appShell.shell { grid-template-columns:minmax(0,1fr); }
  #appShell .side { position:fixed; z-index:60; inset-block:0; inset-inline-start:0; width:260px; max-width:85vw; height:100dvh; margin:0; border-radius:0; transform:translateX(105%); visibility:hidden; transition:transform .2s ease,visibility .2s; box-shadow:none; }
  #appShell .side.open { transform:translateX(0); visibility:visible; box-shadow:-12px 0 40px #20253418; }
  #appShell .panel-menu-close { display:inline-grid; margin-inline-start:auto; flex-shrink:0; }
  #appShell .menu-backdrop { display:none; position:fixed; inset:0; z-index:59; background:#20253455; backdrop-filter:blur(2px); }
  #appShell .menu-backdrop.open { display:block; }
  #appShell .app { padding:18px 20px 30px; }
  #appShell .dash-grid { grid-template-columns:minmax(0,1fr) minmax(220px,.75fr); }
}
@media(max-width:700px) {
  #appShell .dash-grid,#appShell .stores-grid,#appShell .settings-grid { grid-template-columns:minmax(0,1fr); }
  #appShell .hero-copy { grid-template-columns:minmax(0,1fr); }
  #appShell .hero .btn { grid-column:1; grid-row:auto; justify-self:start; margin-top:12px; }
  #appShell .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media(max-width:560px) {
  #appShell .app { padding:15px 12px 26px; }
  #appShell .top { gap:9px; padding-bottom:18px; }
  #appShell .title h1 { font-size:15px; }
  #appShell .title p { font-size:10px; line-height:1.7; }
  #appShell .top-actions { gap:5px; }
  #appShell .top-actions .btn { padding-inline:9px; }
  #appShell .hero { min-height:0; padding:17px; border-radius:11px; }
  #appShell .hero h2 { font-size:16px; }
  #appShell .hero p { font-size:11px; }
  #appShell .metric { min-height:87px; padding:14px; border-radius:10px; }
  #appShell .metric strong { font-size:23px; }
  #appShell .card { padding:14px; border-radius:11px; }
}
#appShell .nav button.active .icon { background:transparent; color:inherit; box-shadow:none; }
#appShell .top-actions .btn,#appShell .top-actions .icon-btn { border-radius:8px; box-shadow:none; }
#appShell .hero .btn { border-radius:8px; padding:9px 13px; box-shadow:none; }
#appShell .side-bottom { border:0; border-top:1px solid var(--line); }
#appShell #recentStores .store-card { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:5px; align-items:center; }
#appShell #recentStores .store-card > h3 { grid-column:1; margin:0; }
#appShell #recentStores .store-card > p:first-of-type { grid-column:2; grid-row:1; text-align:left; }
#appShell #recentStores .store-card > p:nth-of-type(2) { grid-column:1; grid-row:2; }
#appShell #recentStores .store-card > .chip { grid-column:2; grid-row:2; justify-self:end; margin:0; }
#appShell #recentStores .store-card .store-actions { grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; }
@media(max-width:560px) {
  #appShell #recentStores .store-card .store-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) { --ink:#202534; --muted:#737b8b; --line:#e8eaf0; --purple:#6853d8; background:#20253455; backdrop-filter:blur(3px); }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .modal { padding:22px; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 60px #20253418; }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .modal-head h2 { font-size:17px; }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .btn { min-height:36px; padding:8px 12px; border-radius:8px; font-size:12px; box-shadow:none; }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .primary { background:var(--purple); }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) :is(input:not([type=checkbox]),select,textarea) { border-radius:8px; padding:10px 12px; }
:is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .card { padding:15px; border-radius:10px; box-shadow:none; }
@media(max-width:560px) {
  :is(#platformMessageEditor,#renewalLayer,#todayVisitorsDialog) .modal { padding:17px; max-height:90dvh; overflow:auto; }
}
#appShell .dashboard-stores { width:100%; }
@media(min-width:1101px) { #appShell #dashboard #metrics { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#appShell #dashboard .hero { border-color:#e7e2f7; border-radius:16px; background:linear-gradient(120deg,#fff 38%,#f5f2ff 100%); box-shadow:0 8px 24px #53439c0a; }
#appShell #dashboard .hero .badge { letter-spacing:.02em; }
#appShell #dashboard .hero .btn { border-radius:10px; }
#appShell #dashboard .metric { border-color:#e9e8f3; border-radius:15px; box-shadow:0 6px 20px #30304d08; }
#appShell #dashboard .metric span { color:#6e7084; }
#appShell #dashboard .metric strong { color:#40347b; }
#appShell #dashboard .dashboard-stores { border-color:#e9e8f3; border-radius:16px; box-shadow:0 8px 24px #30304d08; }
#appShell #dashboard .card-head h3 { font-size:14px; }
#appShell #dashboard .store-table-scroll { border-radius:11px; }
#appShell #dashboard .subscriber-table thead th { background:#f7f5fd; color:#665c82; }
#appShell #dashboard .subscriber-table tbody tr:hover > * { background:#f8f6ff; }
#appShell #dashboard :is(button,a):focus-visible { outline:2px solid #6853d8; outline-offset:2px; }
#appShell .store-table-host { display:block; min-width:0; }
#appShell .store-table-scroll { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--line); border-radius:9px; scrollbar-width:thin; }
#appShell .subscriber-table { width:100%; min-width:920px; border-collapse:separate; border-spacing:0; text-align:right; font-size:12px; }
#appShell .subscriber-table caption.table-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#appShell .subscriber-table th,#appShell .subscriber-table td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; line-height:1.8; }
#appShell .subscriber-table thead th { background:#f8f9fc; color:#737b8b; font-weight:400; font-size:11px; white-space:nowrap; }
#appShell .subscriber-table tbody tr:last-child > * { border-bottom:0; }
#appShell .subscriber-table tbody tr:hover > * { background:#faf9fe; }
#appShell .subscriber-table .store-row-number { width:44px; color:var(--muted); text-align:center; font-size:11px; }
#appShell .subscriber-table .store-name-cell { min-width:140px; max-width:210px; font-weight:700; overflow-wrap:anywhere; background:#fff; }
#appShell .subscriber-table .store-name-cell,#appShell .subscriber-table thead th:nth-child(2) { position:sticky; inset-inline-start:0; z-index:1; border-inline-end:1px solid #f0f1f5; }
#appShell .subscriber-table thead th:nth-child(2) { z-index:2; }
#appShell .subscriber-table .store-domain { display:grid; margin-top:5px; font-size:10px; font-weight:400; color:var(--muted); line-height:1.8; }
#appShell .subscriber-table td[dir=ltr] { text-align:right; white-space:nowrap; }
#appShell .subscriber-table .chip { white-space:nowrap; margin:0; font-size:10px; }
#appShell .subscriber-table .store-operations { width:222px; min-width:222px; }
#appShell .subscriber-table .store-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:202px; gap:5px; margin:0; }
#appShell .subscriber-table .store-actions .btn { min-height:31px; padding:6px; font-size:10px; line-height:1.65; border-radius:6px; }
#appShell .subscriber-table .store-table-empty { text-align:center; color:var(--muted); padding:28px; }
#appShell .store-table-hint { display:none; font-size:10px; color:var(--muted); margin:9px 0 0; line-height:1.8; }
#appShell .store-table-summary { margin:0 0 12px; font-size:11px; color:var(--muted); }
#appShell .store-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:15px; }
#appShell .store-pagination:empty { display:none; }
#appShell .store-pagination .btn { min-width:34px; min-height:32px; padding:6px 10px; font-size:11px; }
#appShell .store-pagination [aria-current=page] { background:var(--purple); border-color:var(--purple); color:#fff; }
#appShell .pagination-gap { color:var(--muted); padding:0 3px; }
@media(max-width:1200px) { #appShell .store-table-hint { display:block; } }
@media(max-width:700px) {
  #appShell .subscriber-stores-card,#appShell .dashboard-stores { padding:12px; }
  #appShell .subscriber-table { min-width:850px; font-size:11px; }
  #appShell .subscriber-table th,#appShell .subscriber-table td { padding:10px 8px; }
  #appShell .subscriber-table .store-name-cell { min-width:125px; max-width:150px; }
  #appShell .subscriber-table .store-name-cell,#appShell .subscriber-table thead th:nth-child(2) { position:static; }
  #appShell .store-pagination { gap:5px; }
  #appShell .store-pagination .btn { min-width:32px; padding:6px 8px; }
}
@media(prefers-reduced-motion:reduce) {
  #appShell,#appShell * { transition:none!important; animation:none!important; }
}
#appShell .support-toolbar { display:flex; gap:10px; margin:0 0 16px; }
#appShell .support-toolbar input,#appShell .support-toolbar select,#appShell .support-actions select,#appShell #supportReply { font:inherit; color:var(--ink); background:#fff; border:1px solid #e1e6f0; border-radius:10px; padding:10px 12px; }
#appShell .support-toolbar input { flex:1; min-width:0; }
#appShell .support-layout { display:grid; grid-template-columns:minmax(230px, 320px) minmax(0, 1fr); gap:16px; align-items:start; }
#appShell .support-list,#appShell .support-detail { background:#fff; border:1px solid #e8ebf3; border-radius:15px; padding:14px; }
#appShell .support-list { display:grid; gap:8px; max-height:70vh; overflow:auto; }
#appShell .support-item { text-align:right; font:inherit; width:100%; border:1px solid #edf0f5; background:#fafbfe; border-radius:10px; padding:12px; cursor:pointer; display:grid; gap:8px; color:var(--muted); font-size:11px; }
#appShell .support-item.selected { border-color:#a99bf3; background:#f5f2ff; }
#appShell .support-item-head,#appShell .support-detail-head,#appShell .support-message-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#appShell .support-item strong,#appShell .support-detail h3 { color:var(--ink); overflow-wrap:anywhere; }
#appShell .support-badge { flex-shrink:0; background:#f0edff; color:#6450bb; border-radius:99px; padding:5px 9px; font-size:10px; }
#appShell .support-detail h3 { margin:0 0 6px; font-size:15px; }
#appShell .support-detail-head p,#appShell .support-message-head { color:var(--muted); font-size:11px; }
#appShell .support-thread { display:grid; gap:10px; margin:16px 0; max-height:50vh; overflow:auto; }
#appShell .support-message { background:#f7f8fc; border-radius:12px; padding:12px; min-width:0; }
#appShell .support-message.is-platform { background:#f2efff; }
#appShell .support-message p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; font-size:13px; }
#appShell .support-attachments { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; }
#appShell #supportReplyForm { display:grid; gap:10px; font-size:12px; }
#appShell #supportReply { width:100%; resize:vertical; box-sizing:border-box; }
#appShell .support-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media(max-width:700px) { #appShell .support-layout { grid-template-columns:1fr; } #appShell .support-list { max-height:260px; } #appShell .support-toolbar { flex-wrap:wrap; } #appShell .support-toolbar input { min-width:180px; } }
.visitors-table-hint { color:#66758c; font-size:12px; line-height:1.8; margin:8px 0; }
.visitors-table-wrap { max-width:100%; overflow-x:auto; border:1px solid #e8ebf3; border-radius:12px; }
.visitors-table { width:100%; min-width:850px; border-collapse:collapse; text-align:right; font-size:12px; }
.visitors-table th,.visitors-table td { padding:12px 10px; border-bottom:1px solid #edf0f5; white-space:nowrap; }
.visitors-table th { background:#f7f8fc; color:#68758a; font-weight:600; }
.visitors-table tbody tr:last-child td { border-bottom:0; }
.visitors-table td small { display:block; margin-top:4px; color:#7b8798; }
.visitors-table-wrap + .store-actions { margin-top:14px; }