:root, .admin-body {
  --bg: #f5f6fa;
  --surface: #fff;
  --surface2: #f0f2f8;
  --line: #e3e7ef;
  --text: #20283f;
  --muted: #67738b;
  --primary: #6554d9;
  --primary2: #5141bc;
  --sidebar-width: 252px;
  color-scheme: light;
}
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body > header { background: #151d34; }
body :is(.panel, .card, .hero, .metric, .table-wrap) { box-shadow: 0 3px 12px #24335604; }
body :is(input, textarea, select) { background: #fff; color: var(--text); border-color: var(--line); }
body :is(button, .button) { background: var(--primary); color: #fff; }
body a { color: var(--primary); }
body > header a { color: #fff; }
body .hero { padding: 36px; background: linear-gradient(115deg, #edeafa, #fff); }
body .stats span { background: #f3f4f9; }
html[data-theme="dark"] .admin-body { --bg:#0e1117; --surface:#171a22; --surface2:#222733; --line:#303643; --text:#eef1f6; --muted:#9da7b9; color-scheme:dark; }
html[data-theme="dark"] .admin-body :is(input,textarea,select){background:#11141a;color:var(--text);border-color:#3b424f}
html[data-theme="dark"] .admin-body :is(.page-head h1,.page-title-row h1,.admin-body main>h1){color:var(--text)!important}
html[data-theme="dark"] .admin-body :is(label,.bot-setting-section label,.admin-topbar .workspace-label){color:#c3c8d3!important}
html[data-theme="dark"] .admin-body :is(.panel .panel,.compact-disclosure,.quick-actions a){background:var(--surface)!important;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .admin-body :is(th,td){color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .admin-body th{background:#20242c;color:#adb5c4}
html[data-theme="dark"] .admin-body tr:hover td{background:#1e222b}
html[data-theme="dark"] .admin-body .secondary{background:var(--surface2)!important;color:var(--text)!important;border-color:#3b424f!important}
html[data-theme="dark"] .admin-body .admin-topbar a{color:#dce2ef}
html[data-theme="dark"] .admin-body .section-tabs{background:var(--surface2)}
.theme-toggle{margin-left:auto;margin-right:14px!important;min-height:34px!important;padding:6px 10px!important;background:#27314a!important;color:#fff!important}
.service-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}.service-grid h2{margin-top:0}.service-list{display:grid;gap:10px}.service-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}.service-card.urgent{border-color:#e05b67}.service-card.soon{border-color:#e5b94d}.service-title{display:flex;align-items:center;gap:8px;font-size:18px}.service-title small{color:var(--muted);font-size:12px}.service-card>b{display:block;margin-top:10px;color:var(--primary)}.service-card p{color:var(--muted);margin:6px 0}.service-card form{margin-top:10px}@media(max-width:900px){.service-grid{grid-template-columns:1fr}}
.service-result{display:block;margin-top:8px;color:var(--muted)}.service-result.login_required{color:#e5b94d}.service-result.error{color:#e05b67}.service-result.ok{color:#45c995}
.brand-mark { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: #a99bff; color: #17213d; font-size: 24px; font-weight: 800; letter-spacing: -.08em; }
.admin-body .admin-nav { background: #151d34; border: 0; gap: 23px; padding: 24px 14px 18px; }
.admin-body .admin-nav .admin-nav-heading { display: flex; align-items: center; gap: 10px; padding: 0 6px 25px; border-color: #2b334a; }
.admin-body .admin-nav-heading strong { font-size: 18px; letter-spacing: -.04em; color: #fff; white-space: nowrap; }
.admin-body .admin-nav-heading small { font-size: 11px; color: #99a5c1; }
.admin-body .admin-nav nav { gap: 4px; }
.admin-body .nav-label { font-size: 10px; letter-spacing: .12em; color: #96a3c2; margin: 0 12px 9px; }
.admin-body .admin-nav nav a, .admin-body .admin-nav .nav-danger { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 13px; color: #bdc7dd; border-radius: 9px; }
.admin-body .admin-nav a:hover { background: #242f4b; color: #fff; }
.admin-body .admin-nav a.active { background: #303557; color: #dfd9ff; box-shadow: none; }
.nav-current { margin-left: auto; width: 5px; height: 5px; background: #b6aaff; border-radius: 50%; }
.nav-icon { display: inline-block; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; mask: var(--nav-shape) center / contain no-repeat; -webkit-mask: var(--nav-shape) center / contain no-repeat; }
.icon-overview { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.icon-products, .icon-inventory { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7Z M3 7l9 5 9-5 M12 12v10 M7 4.8l10 5.5'/%3E%3C/svg%3E"); }
.icon-orders { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 3h14v19l-3-2-4 2-4-2-3 2Z M8 8h8 M8 12h8 M8 16h4'/%3E%3C/svg%3E"); }
.icon-users, .icon-admin { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M3 22v-3a7 7 0 0 1 14 0v3 M17 4a4 4 0 0 1 0 7 M19 14a7 7 0 0 1 3 5v3'/%3E%3C/svg%3E"); }
.icon-coupons { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 4h18v5a3 3 0 0 0 0 6v5H3v-5a3 3 0 0 0 0-6Z M9 16l6-8'/%3E%3Ccircle cx='9' cy='8' r='1'/%3E%3Ccircle cx='15' cy='16' r='1'/%3E%3C/svg%3E"); }
.icon-partner { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m9 15 6-6 M8 11l-3 3a4 4 0 0 0 5 6l4-4 M16 13l3-3a4 4 0 0 0-5-6l-4 4'/%3E%3C/svg%3E"); }
.icon-payment { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='M2 9h20 M6 15h5'/%3E%3C/svg%3E"); }
.icon-bot { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='4' y='7' width='16' height='14' rx='4'/%3E%3Cpath d='M12 7V2 M9 13v2 M15 13v2 M1 12v5 M23 12v5'/%3E%3C/svg%3E"); }
.icon-notifications { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m3 10 18-6v16L3 14Z M6 15l2 7h4l-2-6 M21 2v20'/%3E%3C/svg%3E"); }
.icon-logout { --nav-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M10 3H3v18h7 M8 12h14 m-5-5 5 5-5 5'/%3E%3C/svg%3E"); }
.admin-body .nav-bottom { border-color: #2b334a; }
.admin-body .nav-bottom small { color: #99a5c1; }
.admin-body .admin-nav .nav-danger { color: #efb1b8; }
.admin-body .admin-topbar { height: 70px; background: #ffffffed; backdrop-filter: blur(12px); padding-inline: 32px; border-color: var(--line); }
.admin-body .admin-topbar a { color: #4e5b76; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; }
.admin-body .workspace-label { color: #65718b; font-size: 12px; }
.workspace-label span { margin-inline: 10px; color: #b3bbcc; }
.admin-body main { padding: 30px 32px 48px; }
.admin-body .page-head, .admin-body .page-title-row { margin-bottom: 25px; }
.admin-body .page-head h1, .admin-body .page-title-row h1, .admin-body main > h1 { color: #20283f; font-size: clamp(23px, 2.2vw, 30px); font-weight: 730; letter-spacing: -.045em; }
.admin-body .eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin: 0 0 9px; }
.admin-body .page-head p.muted { font-size: 13px; }
.admin-body :is(.panel, .card, .table-wrap, .inventory-product) { border-radius: 13px; border-color: var(--line); box-shadow: 0 3px 12px #24335603; }
.admin-body .panel { padding: 24px; margin-bottom: 18px; }
.admin-body .panel .panel { box-shadow: none; padding: 16px; background: #fafbfe; }
.admin-body :is(.button, button, .btn) { color: #fff; border-radius: 8px; font-weight: 600; font-size: 13px; }
.admin-body .secondary { background: #fff !important; color: #46536c !important; border: 1px solid #dce1eb !important; }
.admin-body .danger { background: #fff0f1 !important; color: #b33e50 !important; border-color: #f0cdd3 !important; }
.admin-body .text-link { color: var(--primary); }
.admin-body :is(input, textarea, select) { background: #fff; color: var(--text); border: 1px solid #dce1eb; border-radius: 8px; padding: 10px 12px; }
.admin-body :is(input, textarea, select):focus { border-color: #9687e8; box-shadow: 0 0 0 3px #6554d911; }
.admin-body input::placeholder, .admin-body textarea::placeholder { color: #8792a8; }
.admin-body :is(label, .bot-setting-section label) { color: #46536c; font-size: 13px; }
.admin-body :is(th, td) { border-color: #e9edf3; padding: 14px 16px; color: var(--text); }
.admin-body th { background: #f8f9fc; color: #72809a; font-size: 11px; letter-spacing: .04em; }
.admin-body tr:hover td { background: #fafaff; }
.admin-body .table-wrap { max-width: 100%; }
.admin-body .table-wrap :is(td, th) { overflow-wrap: anywhere; }
.admin-body .status-badge.available, .admin-body .live-pill { background: #e9f6f0; color: #23765b; border: 1px solid #d1e9df; }
.admin-body .status-badge.pending { background: #fff5df; color: #91631e; }
.admin-body .status-badge.sold { background: #f1f2f7; color: #69748b; }
.admin-body .ok, .admin-body .notice.success { background: #e9f6f0; color: #256f55; border: 1px solid #cde6db; padding: 12px 16px; border-radius: 9px; }
.admin-body .error, .admin-body .notice.error { background: #fff0f2; color: #aa374b; border: 1px solid #f0d1d9; }
.admin-body .dashboard-metrics { gap: 14px; }
.admin-body .metric { background: #fff; min-height: 112px; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.admin-body .metric::before { display: none; }
.admin-body .metric span { color: #6a7790; font-size: 12px; text-transform: none; letter-spacing: 0; }
.admin-body .metric b { font-size: clamp(23px, 2vw, 30px); color: #27314b; }
.admin-body .metric:first-child { background: #eeebff; border-color: #dfd9fc; }
.admin-body .metric:first-child b { color: #5a48c6; }
.admin-body .metric-icon { display: block; position: absolute; right: 18px; top: 18px; font-size: 17px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 25px; }
.quick-actions a { display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--line); background: #fff; border-radius: 11px; text-decoration: none; }
.quick-actions a > span:nth-child(2) { flex: 1; }
.quick-actions b { display: block; font-size: 13px; }
.quick-actions small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.quick-actions a:hover { border-color: #b8acee; }
.admin-body .dashboard-grid { gap: 20px; margin-top: 26px; }
.admin-body .config-panel { order: 3; }
.admin-body .config-panel summary { overflow-wrap: anywhere; }
.admin-body .rank { background: #eeebfb; color: #6c58cc; }
.admin-body .config-checks { margin-top: 18px; }
.admin-body summary { cursor: pointer; color: #3d4965; font-weight: 600; }
.admin-body details[open] > summary { margin-bottom: 18px; }
.compact-disclosure { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.compact-disclosure p { color: var(--muted); }
.admin-body .section-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 5px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 11px; background: #eceef5; position: static; }
.admin-body .section-tabs a { display: block; text-decoration: none; font-size: 12px; font-weight: 600; color: #65718b; padding: 10px 15px; background: transparent; border: 0; border-radius: 7px; }
.admin-body .section-tabs a:hover { color: #5541bb; background: #f6f5fd; }
.admin-body .section-tabs a.active { background: #fff; color: #5948c5; box-shadow: 0 2px 5px #2836530c; }
.settings-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.admin-body .settings-columns .panel { margin: 0; }
.admin-body #stock-alerts > form, .admin-body #purchase-alerts { max-width: 960px; }
.admin-body .form-stack > small { margin-bottom: 14px; line-height: 1.65; }
.admin-body .form-stack > button { align-self: flex-start; }
.admin-body .lookup-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.admin-body .lookup-form label { flex: 1 1 250px; }
.admin-body .lookup-form input { margin-bottom: 0; }
.admin-body .inventory-summary { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-block: 4px 14px; }
.admin-body .inventory-product { flex: 0 0 230px; padding: 14px 16px; }
.admin-body .inventory-product.active { background: #f1eefe; border-color: #c1b7f0; box-shadow: none; }
.admin-body .inventory-table .inventory-action-head { background: #f8f9fc; }
.admin-body .product-price, .admin-body .product-detail-icons legend, .admin-body .partner-price-preview output { color: #6351ce; }
.admin-body :is(.partner-price-preview, .product-description-editor, .bot-content-group, .bot-content-group summary, .product-detail-icons, .toggle-row label) { background: #f8f9fc; color: var(--text); border-color: var(--line); }
.admin-body .description-language-tabs button.active { background: var(--primary); color: #fff; }
.admin-body :is(.message-editor-shell, .premium-emoji-fields label, .notification-tip, .file-field, .buy-button-card, .notification-job, .job-stats div, .notification-button-fields) { background: #f8f9fc; border-color: var(--line); color: var(--text); }
.admin-body .bot-control-actions { padding: 12px 0; border-top: 1px solid var(--line); background: var(--bg); }
.admin-body .bot-control-layout.tabs-ready > .bot-setting-section { grid-row: 1; }
.admin-body :is(.telegram-preview-card, .preview-telegram-card) { background: #172336; color: #e5edf8; border-color: #283951; }
.admin-body :is(.telegram-preview-card, .preview-telegram-card) :is(h2, h3, b, strong, .eyebrow) { color: #e5edf8; }
.admin-body .telegram-preview-caption { color: #bdc9dd; }
.admin-body .product-create > summary { color: #6351ce; }
.admin-body .product-create { padding: 0; }
.admin-body .product-create > summary { background: #f8f7fe; font-size: 17px; }
.admin-body .modal-plus { background: #e9e4fd; color: var(--primary); }
.admin-body .product-preview { background: #eef1f7; }
.admin-body .product-preview :is(h3, p) { color: #67738b; }
.admin-body .preview-product-button :is(strong, b) { color: #f4f7fb; }
.admin-body .product-editor > summary .product-price { color: #6351ce; }
.admin-body .product-modal-footer .secondary { background: #fff !important; }
.admin-body .hide-action { background: #edf2fc !important; color: #446592 !important; }
.admin-body .show-action { background: #e6f6ee !important; color: #227355 !important; }
.admin-body .edit-action { background: #eeeafa !important; color: #6351bb !important; }
.admin-body .delete-action { background: #fff0f2 !important; color: #b03c50 !important; }
.admin-body .job-main > p { color: #68758d; }
.admin-body .message-editor-toolbar button { background: #fff; border-color: var(--line); color: var(--text); }
.admin-body .danger-zone h2 { color: #b33e50; }
.admin-body .login-card { max-width: 440px; padding: 36px; margin-top: 65px; }
.login-card .brand-mark { margin-bottom: 22px; }
.login-card h1 { margin-top: 6px; }
.login-card form { margin-top: 26px; }
.login-card button { width: 100%; margin-top: 10px; }
.admin-body .bot-setting-section, .admin-body details[id] { scroll-margin-top: 100px; }
@media (max-width: 1200px) {
  .settings-columns { grid-template-columns: 1fr; }
  .quick-actions { gap: 10px; }
  .quick-actions a { padding: 13px; }
  .quick-actions small { display: none; }
}
@media (max-width: 900px) {
  .admin-body .admin-nav { position: fixed; inset: 70px auto 0 0; height: calc(100dvh - 70px); width: min(290px, 86vw); box-shadow: 20px 0 55px #17233b38; padding: 22px 14px; }
  .admin-body .admin-nav nav { grid-template-columns: 1fr; }
  .admin-body .nav-bottom { margin-top: auto; }
  .admin-body .admin-topbar { height: 70px; padding-inline: 18px; }
  .admin-body main { padding: 24px 18px 40px; }
  .admin-body .quick-actions { grid-template-columns: 1fr; gap: 8px; }
  .quick-actions small { display: block; }
}
@media (max-width: 600px) {
  .admin-body .panel { padding: 18px; }
  .admin-body .section-tabs { gap: 3px; }
  .admin-body .section-tabs a { padding: 10px; font-size: 11px; }
  .admin-body .metric { padding: 16px; }
  .admin-body .metric-icon { display: none; }
  .admin-body .metric b { font-size: 22px; overflow-wrap: anywhere; }
  .admin-body .login-card { margin-top: 25px; padding: 26px; }
  .admin-body .page-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Chú Bé Ngây Ngô — refreshed neon glass visual system */
:root {
  --cb-bg: #070913;
  --cb-surface: rgba(17, 21, 39, .84);
  --cb-surface-strong: #111629;
  --cb-line: rgba(138, 158, 255, .2);
  --cb-text: #f4f7ff;
  --cb-muted: #9da8c7;
  --cb-cyan: #55e7ff;
  --cb-violet: #9b7bff;
  --cb-pink: #ff77c8;
  --cb-gold: #ffd166;
}

html, body { min-height: 100%; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(85, 231, 255, .12), transparent 32rem),
    radial-gradient(circle at 88% 16%, rgba(155, 123, 255, .14), transparent 32rem),
    linear-gradient(135deg, #070913 0%, #0b1020 46%, #080a14 100%);
  color: var(--cb-text);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  z-index: -1;
}
body > header {
  background: rgba(8, 11, 25, .82);
  border-bottom: 1px solid rgba(138, 158, 255, .18);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.brand, .workspace-label { display: inline-flex; align-items: center; gap: 10px; }
.brand-mini-mark, .brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #07101d;
  background: linear-gradient(135deg, var(--cb-cyan), var(--cb-violet) 54%, var(--cb-pink));
  box-shadow: 0 0 20px rgba(85, 231, 255, .35), 0 0 32px rgba(155, 123, 255, .2);
  font-weight: 900;
  letter-spacing: -.08em;
}
.brand-mini-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 10px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; font-size: 15px; }
.brand-mark::after, .brand-mini-mark::after { content: ''; position: absolute; inset: -2px; border: 1px solid rgba(255,255,255,.42); border-radius: inherit; animation: cb-pulse 2.8s ease-in-out infinite; }
main { position: relative; }
body :is(.panel, .card, .hero, .metric, .table-wrap) {
  background: linear-gradient(145deg, rgba(20, 26, 49, .9), rgba(12, 16, 31, .9));
  border-color: var(--cb-line);
  box-shadow: 0 20px 50px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04);
}
body :is(.button, button) {
  background: linear-gradient(110deg, var(--cb-cyan), var(--cb-violet) 55%, var(--cb-pink));
  color: #080b17;
  border: 0;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(85, 231, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body :is(.button, button):hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.08); box-shadow: 0 12px 32px rgba(155, 123, 255, .3); }
body :is(input, textarea, select) { background: rgba(7, 10, 22, .8); color: var(--cb-text); border-color: var(--cb-line); }
body :is(input, textarea, select):focus { border-color: var(--cb-cyan); box-shadow: 0 0 0 3px rgba(85,231,255,.12), 0 0 22px rgba(85,231,255,.1); outline: 0; }
body a { color: var(--cb-cyan); }
body .muted { color: var(--cb-muted); }
body .hero { position: relative; overflow: hidden; }
.storefront-hero { min-height: 320px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.storefront-hero h1 { max-width: 680px; font-size: clamp(34px, 6vw, 70px); line-height: .98; letter-spacing: -.065em; background: linear-gradient(105deg, #fff, #a9eaff 45%, #d2b9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.storefront-hero p:not(.eyebrow) { max-width: 570px; color: var(--cb-muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ghost-button { display: inline-flex; align-items: center; padding: 11px 16px; border: 1px solid var(--cb-line); border-radius: 10px; text-decoration: none; color: var(--cb-text)!important; background: rgba(255,255,255,.04); }
.hero-orbit { position: relative; display: grid; place-items: center; width: 230px; height: 230px; flex: 0 0 230px; border-radius: 50%; background: radial-gradient(circle, rgba(85,231,255,.18), rgba(155,123,255,.06) 45%, transparent 68%); }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(85,231,255,.42); border-radius: 50%; box-shadow: 0 0 28px rgba(85,231,255,.2); animation: cb-spin 9s linear infinite; }
.hero-orbit::after { inset: 36px; border-color: rgba(255,119,200,.44); animation-direction: reverse; animation-duration: 6s; }
.hero-orbit span { z-index: 1; font-size: 38px; font-weight: 950; color: #fff; text-shadow: 0 0 20px var(--cb-cyan); }
.hero-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cb-cyan); box-shadow: 0 0 16px 5px var(--cb-cyan); animation: cb-float 3s ease-in-out infinite; }
.hero-orbit i:nth-of-type(1) { top: 20px; left: 82px; } .hero-orbit i:nth-of-type(2) { right: 24px; bottom: 72px; background: var(--cb-pink); box-shadow: 0 0 16px 5px var(--cb-pink); animation-delay: -.9s; } .hero-orbit i:nth-of-type(3) { left: 35px; bottom: 42px; background: var(--cb-violet); box-shadow: 0 0 16px 5px var(--cb-violet); animation-delay: -1.7s; }
.product-card { position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.product-card::before, .login-card::before, .admin-body .panel::before, .admin-body .metric::before { content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--cb-angle, 0deg), transparent 0 32%, var(--cb-cyan), var(--cb-violet), transparent 62% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cb-border 5s linear infinite; opacity: .55; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(85,231,255,.48); box-shadow: 0 18px 55px rgba(85,231,255,.12); }
.admin-body .admin-topbar, .admin-body .admin-nav { background: rgba(8, 11, 25, .9); border-color: rgba(138,158,255,.18); }
.admin-body .admin-topbar { box-shadow: 0 10px 35px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.admin-body .admin-nav-heading strong { background: linear-gradient(90deg, #fff, var(--cb-cyan), #d3c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.admin-body .admin-nav a:hover { background: rgba(85,231,255,.08); color: #fff; }
.admin-body .admin-nav a.active { background: linear-gradient(90deg, rgba(85,231,255,.13), rgba(155,123,255,.14)); color: #b7f7ff; box-shadow: inset 3px 0 var(--cb-cyan), 0 0 24px rgba(85,231,255,.06); }
.admin-body .metric { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(24,31,59,.94), rgba(12,16,32,.94)); }
.admin-body .metric span { color: #a6b5dd; }
.admin-body .metric b { color: #fff; text-shadow: 0 0 18px rgba(85,231,255,.2); }
.admin-body .quick-actions a { background: rgba(17,22,42,.86); border-color: var(--cb-line); transition: transform .2s ease, border-color .2s ease; }
.admin-body .quick-actions a:hover { transform: translateY(-3px); border-color: var(--cb-cyan); }
.admin-body .table-wrap { overflow: auto; }
.login-card { position: relative; overflow: hidden; }
.eyebrow { color: var(--cb-cyan)!important; }
@keyframes cb-border { to { --cb-angle: 360deg; } }
@keyframes cb-pulse { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes cb-spin { to { transform: rotate(360deg); } }
@keyframes cb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@property --cb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@media (max-width: 720px) { .storefront-hero { display: block; } .hero-orbit { margin: 30px auto 0; width: 180px; height: 180px; } .storefront-hero h1 { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms!important; animation-iteration-count: 1!important; transition-duration: .001ms!important; } }

/* Keep the existing admin theme switch usable with the new visual layer. */
.admin-body :is(.panel, .metric) { position: relative; }
html[data-theme="light"] .admin-body {
  --cb-bg: #f4f7ff;
  --cb-surface: rgba(255,255,255,.92);
  --cb-surface-strong: #fff;
  --cb-line: rgba(88, 105, 180, .18);
  --cb-text: #20283f;
  --cb-muted: #67738b;
  --bg: #f4f7ff;
  --surface: #fff;
  --surface2: #eef2fb;
  --line: #dfe5f2;
  --text: #20283f;
  --muted: #67738b;
  background: linear-gradient(135deg, #f4f7ff 0%, #eef6ff 48%, #fdf5ff 100%);
  color: var(--cb-text);
  color-scheme: light;
}
html[data-theme="light"] .admin-body::before { opacity: .14; background-image: linear-gradient(rgba(85, 112, 190, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(85, 112, 190, .08) 1px, transparent 1px); }
html[data-theme="light"] .admin-body .admin-topbar,
html[data-theme="light"] .admin-body .admin-nav { background: rgba(255,255,255,.82); border-color: rgba(88,105,180,.16); }
html[data-theme="light"] .admin-body .admin-nav a { color: #53617c; }
html[data-theme="light"] .admin-body .admin-nav a:hover { background: rgba(85, 160, 255, .1); color: #253153; }
html[data-theme="light"] .admin-body .admin-nav a.active { color: #3e55bd; background: linear-gradient(90deg, rgba(85,231,255,.16), rgba(155,123,255,.14)); }
html[data-theme="light"] .admin-body :is(.panel, .card, .metric, .table-wrap, .quick-actions a) { background: rgba(255,255,255,.88); color: var(--cb-text); }
html[data-theme="light"] .admin-body :is(input, textarea, select) { background: #fff; color: var(--cb-text); border-color: #d5dced; }
html[data-theme="light"] .admin-body th { background: #edf2fb; color: #56627b; }
html[data-theme="light"] .admin-body td { color: #26314a; }
html[data-theme="light"] .admin-body tr:hover td { background: #f2f6ff; }
html[data-theme="light"] .admin-body .secondary { background: #eef2fb !important; color: #394866 !important; border-color: #d5dced !important; }