/* ChopBeta dashboard UI (reference-style) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  --cb-brand:#F97316;
  --cb-brand-2:#EA580C;
  --cb-success:#16A34A;
  --cb-success-2:#15803D;
  /* Soft neumorphic canvas (warm-tinted, brand-friendly) */
  --cb-bg:#E9EDF3;
  --cb-surface:#EEF2F7;
  --cb-surface-2:#F7F9FC;
  --cb-text:#0F172A;
  --cb-muted:#64748B;
  --cb-border:rgba(148,163,184,.28);
  --cb-radius:14px;
  --cb-sidebar-w: 228px;
  --cb-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Neumorphism shadow pair */
  --cb-neu-dark: #C5CCD8;
  --cb-neu-light: #FFFFFF;
  --cb-shadow: 8px 8px 16px var(--cb-neu-dark), -8px -8px 16px var(--cb-neu-light);
  --cb-shadow-sm: 4px 4px 10px var(--cb-neu-dark), -4px -4px 10px var(--cb-neu-light);
  --cb-shadow-inset: inset 4px 4px 8px var(--cb-neu-dark), inset -4px -4px 8px var(--cb-neu-light);
  --cb-shadow-inset-sm: inset 2px 2px 5px var(--cb-neu-dark), inset -2px -2px 5px var(--cb-neu-light);
  --cb-topbar-bg: var(--cb-surface);
  --cb-topbar-border: transparent;
  /* Colored neu for brand buttons */
  --cb-brand-neu: #F97316;
  --cb-brand-neu-dark: #D45F0C;
  --cb-brand-neu-light: #FFB070;
  --cb-green-neu-dark: #128A3F;
  --cb-green-neu-light: #4ADE80;
}

html[data-theme='dark'],
body[data-theme='dark']{
  --cb-bg:#0F172A;
  --cb-surface:#1A2336;
  --cb-surface-2:#152033;
  --cb-text:#F3F4F6;
  --cb-muted:#9CA3AF;
  --cb-border:rgba(148,163,184,.18);
  --cb-neu-dark: #0A101C;
  --cb-neu-light: #243148;
  --cb-shadow: 8px 8px 18px var(--cb-neu-dark), -6px -6px 14px rgba(36,49,72,.55);
  --cb-shadow-sm: 4px 4px 10px var(--cb-neu-dark), -3px -3px 8px rgba(36,49,72,.5);
  --cb-shadow-inset: inset 4px 4px 10px var(--cb-neu-dark), inset -3px -3px 8px rgba(36,49,72,.45);
  --cb-shadow-inset-sm: inset 2px 2px 5px var(--cb-neu-dark), inset -2px -2px 5px rgba(36,49,72,.4);
  --cb-topbar-bg: var(--cb-surface);
  --cb-brand-neu-dark: #9A3E08;
  --cb-brand-neu-light: #F97316;
  --cb-green-neu-dark: #0B5C2C;
  --cb-green-neu-light: #16A34A;
}

html[data-theme='dark'],
html[data-theme='dark'] body{
  color-scheme: dark;
}
html[data-theme='light'],
html[data-theme='light'] body{
  color-scheme: light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--cb-font);
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(249,115,22,.08), transparent 50%),
    radial-gradient(800px 420px at 0% 100%, rgba(22,163,74,.06), transparent 48%),
    var(--cb-bg);
  color:var(--cb-text);
  -webkit-font-smoothing:antialiased;
}

.cb-app{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--cb-sidebar-w) 1fr;
}

/* Sidebar */
.cb-sidebar{
  padding:14px 10px;
  position:sticky;
  top:0;
  height:100vh;
  background: var(--cb-surface);
  border-right: none;
  box-shadow: 6px 0 14px rgba(197,204,216,.35);
  overflow-y:auto;
  z-index:40;
}
body[data-theme='dark'] .cb-sidebar{
  box-shadow: 6px 0 18px rgba(0,0,0,.45);
}
body[data-theme='dark'] .cb-brandlogo,
body[data-theme='dark'] .cb-mobilelogo,
body[data-theme='dark'] .cb-logo-preview{
  background: var(--cb-surface-2);
  border-color: var(--cb-border);
}
body[data-theme='dark'] .cb-pill{
  background: color-mix(in srgb, var(--cb-surface) 92%, transparent);
  box-shadow: var(--cb-shadow-sm);
}
body[data-theme='dark'] .cb-iconbtn{
  box-shadow: var(--cb-shadow-sm);
}
body[data-theme='dark'] .cb-search input{
  background: var(--cb-surface);
  color: var(--cb-text);
}
.cb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:22px;
  padding:10px 12px 18px;
}
.cb-brandlogo{
  width:170px;
  max-width:100%;
  height:auto;
  border-radius:10px;
  object-fit:contain;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
}
.cb-brand span{
  color:var(--cb-brand);
}
.cb-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px 6px;
}
.cb-navitem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--cb-text);
  border: none;
  background:transparent;
  transition: box-shadow .18s ease, background .18s ease, transform .15s ease;
}
.cb-navitem:hover{
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow-sm);
  transform: translateY(-1px);
}
.cb-navitem.is-active{
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow-sm);
  color: var(--cb-brand-2);
}
.cb-navicon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--cb-surface);
  border:1px solid var(--cb-border);
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
  font-size:16px;
}
.cb-navmeta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.cb-navtitle{font-weight:800; font-size:12px; letter-spacing:.5px; text-transform:uppercase}
.cb-navsub{font-size:12px; color:var(--cb-muted); margin-top:2px}
.cb-navitem.is-disabled{opacity:.55; pointer-events:none}

/* Main */
.cb-main{
  padding:18px 22px 36px;
  min-width:0;
  width:100%;
}
.cb-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  background: var(--cb-topbar-bg);
  border:1px solid var(--cb-topbar-border);
  border-radius:18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
  position:sticky;
  top:12px;
  z-index:30;
}
.cb-topleft{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.cb-toplogo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  letter-spacing:.2px;
  font-size:16px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--cb-border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 22px rgba(17,24,39,.05);
  white-space:nowrap;
}
.cb-toplogo img{
  width:22px;
  height:22px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(17,24,39,.10);
}
.cb-toplogo span{ color: var(--cb-brand); }
.cb-toplogo a{ color:inherit; text-decoration:none; }
.cb-toplogo small{ color: var(--cb-muted); font-weight:900; font-size:12px; margin-left:6px; }
.cb-search{
  flex:0 1 clamp(220px, 36vw, 380px);
  display:flex;
  align-items:center;
  gap:8px;
  background: color-mix(in srgb, var(--cb-surface) 88%, transparent);
  border:1px solid var(--cb-border);
  border-radius: 14px;
  padding:6px 12px;
  min-height:40px;
  box-shadow: 0 8px 22px rgba(17,24,39,.05);
  transition: all .2s ease;
}
.cb-search input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  flex:1;
  min-width:0;
  min-height:0;
  padding:6px 0;
  margin:0;
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  color:var(--cb-text);
  display:block;
  appearance:none;
  -webkit-appearance:none;
  resize:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cb-search input::-webkit-search-decoration,
.cb-search input::-webkit-search-cancel-button,
.cb-search input::-webkit-search-results-button{
  -webkit-appearance:none;
  appearance:none;
}
.cb-search:focus-within{
  border-color: rgba(255,122,0,.35);
  box-shadow: 0 10px 26px rgba(255,122,0,.12);
  background: color-mix(in srgb, var(--cb-surface) 96%, transparent);
}
.cb-mobilelogo{
  display:none;
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  box-shadow: 0 8px 22px rgba(17,24,39,.08);
}
.cb-top-actions{display:flex; align-items:center; gap:10px}
.cb-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--cb-border);
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 22px rgba(17,24,39,.05);
}
.cb-avatar{
  width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(255,209,102,.18));
  border:1px solid rgba(255,122,0,.25);
  font-weight:800;
  overflow:hidden;
  flex-shrink:0;
}
.cb-avatar.has-photo{
  color:transparent;
  background: #e5e7eb !important;
  border:none;
  position:relative;
  overflow:hidden;
  padding:0;
}
.cb-avatar.has-photo .cb-avatar-img,
.pic.has-photo .cb-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.pic.has-photo{
  padding:0;
  overflow:hidden;
  background:#e5e7eb !important;
  color:transparent;
}
.cb-iconbtn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--cb-border);
  background: color-mix(in srgb, var(--cb-surface) 88%, transparent);
  box-shadow: 0 8px 22px rgba(17,24,39,.05);
  cursor:pointer;
  box-sizing:border-box;
}
button.cb-iconbtn{display:grid;place-items:center;}
a.cb-iconbtn{color:inherit;text-decoration:none;display:inline-grid;place-items:center;}
.cb-iconbtn:hover{transform: translateY(-1px)}
.cb-notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  border:2px solid #fff;
  font-size:10px;
  font-weight:1000;
  line-height:1;
  display:none;
  place-items:center;
}

/* Account dropdown */
.cb-account{position:relative; display:flex; align-items:center;}
.cb-accountbtn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--cb-border);
  background: color-mix(in srgb, var(--cb-surface) 88%, transparent);
  box-shadow: 0 8px 22px rgba(17,24,39,.05);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
}
.cb-accountbtn:hover{transform: translateY(-1px)}
.cb-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width: 220px;
  background: color-mix(in srgb, var(--cb-surface) 96%, transparent);
  border:1px solid var(--cb-border);
  border-radius:16px;
  box-shadow: 0 18px 50px rgba(17,24,39,.16);
  padding:8px;
  z-index: 3000;
  display:none;
}
.cb-menu.is-open{display:block;}
.cb-menu a, .cb-menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--cb-text);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}
.cb-menu a:hover, .cb-menu button:hover{
  background: rgba(255,122,0,.10);
  border-color: rgba(255,122,0,.20);
}
.cb-menudiv{
  height:1px;
  background: var(--cb-border);
  margin:6px 2px;
}

.cb-header{
  padding: 18px 6px 16px;
}
.cb-h1{
  margin:0;
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}
.cb-sub{
  margin:8px 0 0;
  color:var(--cb-muted);
  font-weight:600;
  font-size:14px;
  line-height:1.55;
  max-width:62ch;
}

/* Cards + grid */
.cb-grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr .9fr;
  gap:16px;
  padding: 0 0 18px;
}
.cb-card{
  background: var(--cb-surface);
  border: none;
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding:14px 16px;
  min-width:0;
  transition: box-shadow .18s ease, transform .15s ease;
  position: relative;
  overflow: hidden;
}
.cb-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--cb-brand), color-mix(in srgb, var(--cb-success) 70%, var(--cb-brand)));
  opacity:.9;
  pointer-events:none;
}
.cb-card:hover{
  box-shadow: 10px 10px 20px var(--cb-neu-dark), -8px -8px 18px var(--cb-neu-light);
  transform: translateY(-1px);
}
.cb-card h3{
  margin:0 0 8px;
  font-size:14px;
  color: var(--cb-text);
  font-weight:800;
  letter-spacing:-.01em;
}
.cb-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.cb-stat{
  border: none;
  border-radius:12px;
  padding:8px 10px;
  background:var(--cb-surface);
  box-shadow: var(--cb-shadow-sm);
}
.cb-stat .k{font-size:12px;color:var(--cb-muted);font-weight:700}
.cb-stat .v{margin-top:6px;font-size:16px;font-weight:900}
.cb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:12px;
  padding:10px 15px;
  font-weight:700;
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(145deg, #FF8A2A 0%, var(--cb-brand) 45%, var(--cb-brand-2) 100%);
  box-shadow:
    5px 5px 12px rgba(212,95,12,.35),
    -4px -4px 10px rgba(255,176,112,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .18s ease, filter .15s ease;
  white-space:nowrap;
}
.cb-btn:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:
    6px 6px 14px rgba(212,95,12,.4),
    -5px -5px 12px rgba(255,176,112,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.cb-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 4px 4px 8px rgba(180,75,8,.45),
    inset -3px -3px 6px rgba(255,160,90,.25);
}
.cb-btn.secondary{
  background: linear-gradient(145deg, #34D399 0%, var(--cb-success) 50%, var(--cb-success-2) 100%);
  box-shadow:
    5px 5px 12px rgba(18,138,63,.32),
    -4px -4px 10px rgba(74,222,128,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.cb-btn.secondary:hover{
  box-shadow:
    6px 6px 14px rgba(18,138,63,.38),
    -5px -5px 12px rgba(74,222,128,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.cb-btn.secondary:active{
  box-shadow:
    inset 4px 4px 8px rgba(11,92,44,.4),
    inset -3px -3px 6px rgba(74,222,128,.2);
}
.cb-btn.ghost{
  background: var(--cb-surface);
  color:var(--cb-text);
  border: none;
  box-shadow: var(--cb-shadow-sm);
}
.cb-btn.ghost:hover{
  color: var(--cb-brand-2);
  box-shadow: 5px 5px 12px var(--cb-neu-dark), -5px -5px 12px var(--cb-neu-light);
  background: var(--cb-surface);
}
.cb-btn.ghost:active{
  box-shadow: var(--cb-shadow-inset-sm);
}

.cb-featurelist{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:12px;
  padding: 0 0 22px;
}
.cb-feature{
  background:var(--cb-surface);
  border:1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding:14px;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}
.cb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--cb-border);
}
.cb-badge.on{background:rgba(46,204,113,.12); border-color: rgba(46,204,113,.25)}
.cb-badge.off{background:rgba(239,68,68,.10); border-color: rgba(239,68,68,.22)}

/* Feature flag toggle (pill switch) */
.cb-switch{
  border:0;
  background:transparent;
  padding:2px;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.cb-switch:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.cb-switch:focus-visible{
  outline:2px solid var(--cb-brand);
  outline-offset:3px;
  border-radius:999px;
}
.cb-switch-track{
  position:relative;
  width:50px;
  height:28px;
  border-radius:999px;
  background: color-mix(in srgb, var(--cb-muted) 32%, var(--cb-border));
  border:1px solid var(--cb-border);
  box-shadow: inset 0 1px 3px rgba(17,24,39,.1);
  transition: background .2s ease, border-color .2s ease;
}
.cb-switch[aria-checked="true"] .cb-switch-track{
  background: linear-gradient(135deg, #2ECC71 0%, #1FBF62 100%);
  border-color: rgba(46,204,113,.5);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.25);
}
.cb-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background: var(--cb-surface);
  box-shadow: 0 2px 8px rgba(17,24,39,.22);
  transition: transform .2s ease;
  transform: translateX(0);
}
.cb-switch[aria-checked="true"] .cb-switch-thumb{
  transform: translateX(22px);
}

/* Feature title icons (emoji in branded tile — shared admin + user) */
.cb-feature-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  flex-shrink:0;font-size:22px;line-height:1;
  background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(46,204,113,.14));
  border:1px solid rgba(255,122,0,.24);
  box-shadow: 0 4px 14px rgba(17,24,39,.06);
}
body[data-theme='dark'] .cb-feature-ico{
  background: linear-gradient(135deg, rgba(255,122,0,.26), rgba(46,204,113,.15));
  border-color: rgba(255,122,0,.28);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.cb-feature-ico--sm{
  width:34px;height:34px;font-size:18px;border-radius:10px;
}
.cb-feature-ico--inline{
  display:inline-grid;vertical-align:middle;
  width:38px;height:38px;font-size:20px;
}
.cb-feature-ico--lg{
  width:50px;height:50px;font-size:26px;border-radius:14px;
}
.cb-card-title-row{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:6px;
}
.cb-card-title-row .cb-feature-ico{margin-top:1px;}
.cb-feature-ico--img{
  padding:2px;
  overflow:hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.cb-feature-ico--img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cb-ai-brand{
  width:36px;height:36px;object-fit:contain;display:block;
}

.cb-card-title-row h3{margin:0;flex:1;min-width:0;font-size:16px;line-height:1.3;font-weight:1000;}
.cb-feature-heading{
  display:flex;align-items:center;gap:10px;min-width:0;flex:1;
}

/* Mobile bottom nav */
.cb-bottomnav{
  display:none;
  position:fixed;
  left:10px;
  right:10px;
  bottom:10px;
  background: color-mix(in srgb, var(--cb-surface) 94%, transparent);
  border:1px solid var(--cb-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(17,24,39,.14);
  padding:8px 10px;
  z-index: 2000;
}
.cb-bottomnav a{
  flex:1;
  text-decoration:none;
  color:var(--cb-muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:800;
}
.cb-bottomnav .ico{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--cb-border);
  background:var(--cb-surface);
  color:var(--cb-text);
}
.cb-bottomnav--five a{
  font-size:10px;
  gap:3px;
}
.cb-bottomnav--five .ico{
  width:32px;height:32px;font-size:15px;border-radius:11px;
}
.cb-bottomnav a.is-active{color:var(--cb-brand-2)}
.cb-bottomnav a.is-active .ico{
  background: rgba(255,122,0,.12);
  border-color: rgba(255,122,0,.25);
}

@media (max-width: 1100px){
  .cb-grid{grid-template-columns: 1fr 1fr;}
  .cb-grid > .cb-card[style*="grid-column"],
  .cb-grid > .cb-panel{grid-column:1 / -1;}
}
@media (max-width: 980px){
  .cb-grid{grid-template-columns: 1fr; }
  .cb-search{flex:1; min-width:0;}
  .cb-mini{grid-template-columns:1fr;}
}
@media (max-width: 820px){
  .cb-app{grid-template-columns: 1fr;}
  .cb-sidebar{display:none;}
  .cb-main{padding:12px 12px 100px;}
  .cb-bottomnav{display:flex; gap:4px;}
  .cb-mobilelogo{display:block;}
  .cb-topbar{
    padding:8px 10px;
    top:8px;
    border-radius:14px;
  }
  .cb-top-actions{gap:8px;}
  .cb-accountbtn > div:nth-child(2),
  .cb-accountbtn > div:nth-child(3){display:none;}
  .cb-search{flex:1; padding:8px 10px;}
  .cb-search input{font-size:13px;}
  .cb-header{padding:14px 2px 12px;}
  .cb-h1{font-size:22px;}
  .cb-card{padding:14px;}
  .cb-jumpnav{top:64px;}
}

/* ========== Admin forms / settings polish ========== */
.cb-panel{
  background: color-mix(in srgb, var(--cb-surface) 97%, transparent);
  border:1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding:0;
  overflow:hidden;
  min-width:0;
  scroll-margin-top: 96px;
}
.cb-panel + .cb-panel{margin-top:14px;}
.cb-panel-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--cb-border);
  background:
    linear-gradient(135deg, rgba(249,115,22,.06), transparent 55%),
    color-mix(in srgb, var(--cb-surface) 98%, transparent);
}
.cb-panel-ico{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;font-size:20px;
  background: linear-gradient(145deg, rgba(249,115,22,.18), rgba(22,163,74,.10));
  border:1px solid rgba(249,115,22,.22);
  box-shadow: 0 6px 16px rgba(249,115,22,.08);
}
.cb-panel-head h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--cb-text);
}
.cb-panel-head p{
  margin:6px 0 0;
  color:var(--cb-muted);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}
.cb-panel-body{padding:16px 18px 18px;}
.cb-panel-body > :first-child{margin-top:0;}

.cb-settings{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0 0 24px;
  max-width:980px;
}

.cb-jumpnav{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 14px;
  margin:0 0 4px;
  position:sticky;
  top:72px;
  z-index:25;
  background: linear-gradient(180deg, rgba(248,250,252,.96) 60%, rgba(248,250,252,0));
  scrollbar-width:none;
}
.cb-jumpnav::-webkit-scrollbar{display:none;}
.cb-jumpnav a{
  flex:0 0 auto;
  text-decoration:none;
  color:var(--cb-muted);
  font-size:12px;
  font-weight:700;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--cb-border);
  background: var(--cb-surface);
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.cb-jumpnav a:hover,
.cb-jumpnav a:focus-visible{
  color:var(--cb-brand-2);
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.06);
  outline:none;
}

.cb-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.cb-label{
  font-size:12px;
  font-weight:700;
  color:var(--cb-muted);
  letter-spacing:.01em;
}
.cb-hint{
  margin:0;
  color:var(--cb-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
}
.cb-hint code,
.cb-panel-head code,
.cb-panel-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:11px;
  font-weight:700;
  padding:1px 5px;
  border-radius:6px;
  background: rgba(15,23,42,.05);
  border:1px solid var(--cb-border);
  color:var(--cb-text);
}
.cb-input,
.cb-textarea,
.cb-select,
.cb-file{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--cb-border);
  border-radius:12px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--cb-text);
  background: var(--cb-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-input:focus,
.cb-textarea:focus,
.cb-select:focus,
.cb-file:focus{
  outline:none;
  border-color: rgba(249,115,22,.45);
  box-shadow: 0 0 0 3px rgba(249,115,22,.14);
}
.cb-textarea{resize:vertical; min-height:96px; line-height:1.45;}
.cb-file{padding:10px; cursor:pointer;}

.cb-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.cb-form-grid--3{grid-template-columns:repeat(3, minmax(0,1fr));}
.cb-form-grid--1{grid-template-columns:1fr;}
.cb-span-2{grid-column:span 2;}
.cb-span-all{grid-column:1 / -1;}

.cb-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}
.cb-status{
  margin-top:10px;
  color:var(--cb-muted);
  font-weight:700;
  font-size:13px;
  line-height:1.4;
  min-height:1.2em;
}
.cb-status.is-ok{color:var(--cb-success);}
.cb-status.is-err{color:#DC2626;}

.cb-checkrow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--cb-border);
  background: color-mix(in srgb, var(--cb-surface) 88%, #F8FAFC);
}
.cb-checkrow input{margin-top:3px; accent-color: var(--cb-brand); width:16px; height:16px; flex-shrink:0;}

.cb-logo-row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
}
.cb-logo-preview{
  width:72px;height:72px;border-radius:18px;
  border:1px solid var(--cb-border);
  background:#fff;
  display:grid;place-items:center;overflow:hidden;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.cb-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;}
.cb-logo-meta{flex:1; min-width:180px;}
.cb-logo-meta strong{display:block; font-size:14px; font-weight:800;}
.cb-logo-meta span{display:block; margin-top:4px; color:var(--cb-muted); font-size:12px; font-weight:600; line-height:1.45;}
.cb-logo-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

.cb-section-title{
  margin:4px 0 0;
  font-size:13px;
  font-weight:800;
}
.cb-divider{
  height:1px;
  background:var(--cb-border);
  margin:16px 0;
  border:0;
}

.cb-live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--cb-muted);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid var(--cb-border);
}
.cb-live-pill::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--cb-muted);
}
.cb-live-pill.is-on{color:var(--cb-success); border-color:rgba(22,163,74,.28); background:rgba(22,163,74,.08);}
.cb-live-pill.is-on::before{background:var(--cb-success); box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.cb-live-pill.is-off{color:#DC2626; border-color:rgba(220,38,38,.22); background:rgba(220,38,38,.06);}
.cb-live-pill.is-off::before{background:#DC2626;}

.cb-scrollbox{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:240px;
  overflow:auto;
  padding:4px 2px;
  font-size:13px;
}

.cb-page-section{
  padding:0 0 8px;
}
.cb-page-section h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
}
.cb-page-section .cb-muted-line{
  color:var(--cb-muted);
  font-weight:600;
  font-size:13px;
}

@media (max-width: 720px){
  .cb-form-grid,
  .cb-form-grid--3{grid-template-columns:1fr;}
  .cb-span-2{grid-column:auto;}
  .cb-panel-head{padding:14px;}
  .cb-panel-body{padding:14px;}
  .cb-logo-row{align-items:flex-start;}
  .cb-logo-controls{width:100%;}
  .cb-logo-controls .cb-file{flex:1; min-width:0;}
  .cb-actions{width:100%;}
  .cb-actions .cb-btn{flex:1 1 auto;}
  .cb-accountbtn{padding:6px;}
}

@media (max-width: 480px){
  .cb-bottomnav{
    left:6px; right:6px; bottom:6px;
    padding:6px 4px;
    border-radius:14px;
  }
  .cb-bottomnav a{font-size:10px;}
  .cb-bottomnav .ico{width:30px;height:30px;font-size:14px;}
  .cb-jumpnav{gap:6px; padding-bottom:10px;}
  .cb-jumpnav a{padding:7px 10px; font-size:11px;}
}


.home-block-edit{
  border:1px solid var(--cb-border);
  border-radius:14px;
  padding:14px;
  background:var(--cb-surface);
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.home-block-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.home-block-moves{display:flex;gap:6px;flex-wrap:wrap;}
.home-block-moves .cb-btn{padding:8px 12px;}
.home-block-remove{color:#B91C1C !important;}

.cb-panel-head a{color:var(--cb-brand-2);font-weight:700;text-decoration:none;}
.cb-panel-head a:hover{text-decoration:underline;}


/* ========== Global compact neumorphism (admin settings language, sitewide) ========== */
.cb-main{ padding:12px 16px 28px; min-width:0; width:100%; }
.cb-brand{ font-size:20px; padding:6px 10px 12px; letter-spacing:-.02em; }
.cb-nav{ gap:4px; padding:4px; }
.cb-navicon{
  width:30px; height:30px; border-radius:9px; font-size:14px;
  background: var(--cb-surface);
  border: none;
  box-shadow: var(--cb-shadow-sm);
}
.cb-navitem.is-active .cb-navicon{
  background: linear-gradient(145deg, rgba(249,115,22,.18), rgba(22,163,74,.1));
  box-shadow: var(--cb-shadow-inset-sm);
}
.cb-navtitle{ font-size:11px; letter-spacing:.04em; }
.cb-navsub{ font-size:11px; }

.cb-topbar{
  padding:8px 10px !important;
  border-radius:14px !important;
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow-sm) !important;
  backdrop-filter: none !important;
}
.cb-search{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow-inset-sm) !important;
  border-radius: 12px !important;
  min-height: 36px !important;
}
.cb-search:focus-within{
  box-shadow: var(--cb-shadow-inset), 0 0 0 2px rgba(249,115,22,.18) !important;
  border-color: transparent !important;
}
.cb-iconbtn,
.cb-accountbtn{
  border: none !important;
  background: var(--cb-surface) !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.cb-iconbtn:hover,
.cb-accountbtn:hover{
  box-shadow: 5px 5px 12px var(--cb-neu-dark), -5px -5px 12px var(--cb-neu-light) !important;
}
.cb-iconbtn:active,
.cb-accountbtn:active{
  box-shadow: var(--cb-shadow-inset-sm) !important;
}
.cb-avatar{
  box-shadow: var(--cb-shadow-sm);
  border: none;
}
.cb-menu{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow) !important;
}
.cb-header{ padding:12px 2px 10px; }
.cb-h1{ font-size:clamp(20px, 2.4vw, 26px); letter-spacing:-.025em; }
.cb-sub{ margin-top:4px; font-size:13px; font-weight:600; }
.cb-grid{ gap:12px; padding:0 0 12px; }

.cb-panel{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow) !important;
  border-radius: var(--cb-radius) !important;
}
.cb-panel-head{
  background: linear-gradient(135deg, rgba(249,115,22,.07), transparent 55%), var(--cb-surface) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.18);
}
.cb-panel-ico{
  border: none !important;
  background: var(--cb-surface) !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.cb-panel-body{ padding:14px 16px 16px; }
.cb-panel-head{ padding:14px 16px 12px; }
.cb-panel + .cb-panel{ margin-top:12px; }

.cb-input,
.cb-textarea,
.cb-select,
.cb-file,
.cb-card select,
.cb-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cb-card textarea,
.cb-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cb-panel select,
.cb-panel textarea{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow-inset-sm) !important;
  border-radius: 12px !important;
}
.cb-input:focus,
.cb-textarea:focus,
.cb-select:focus,
.cb-card select:focus,
.cb-card input:focus,
.cb-card textarea:focus,
.cb-panel input:focus,
.cb-panel select:focus,
.cb-panel textarea:focus{
  box-shadow: var(--cb-shadow-inset-sm), 0 0 0 2px rgba(249,115,22,.2) !important;
}

.cb-checkrow{
  border: none !important;
  background: var(--cb-surface) !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.cb-checkrow:active{ box-shadow: var(--cb-shadow-inset-sm) !important; }

.cb-feature{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow-sm) !important;
  padding:12px !important;
  border-radius:12px !important;
}
.cb-feature:hover{
  box-shadow: var(--cb-shadow) !important;
  transform: translateY(-1px);
}

.cb-badge{
  border: none !important;
  box-shadow: var(--cb-shadow-sm);
  background: var(--cb-surface);
}
.cb-badge.on{
  background: color-mix(in srgb, var(--cb-success) 14%, var(--cb-surface));
  color: var(--cb-success-2);
}
.cb-badge.off{
  background: color-mix(in srgb, #DC2626 10%, var(--cb-surface));
}

.cb-switch-track{
  border: none !important;
  box-shadow: var(--cb-shadow-inset-sm) !important;
}
.cb-switch[aria-checked="true"] .cb-switch-track{
  background: linear-gradient(145deg, #34D399, var(--cb-success)) !important;
  box-shadow:
    inset 2px 2px 4px rgba(11,92,44,.25),
    3px 3px 8px rgba(18,138,63,.2) !important;
}
.cb-switch-thumb{
  box-shadow: 2px 2px 5px rgba(15,23,42,.2), -1px -1px 3px rgba(255,255,255,.7) !important;
}

.cb-bottomnav{
  background: var(--cb-surface) !important;
  border: none !important;
  box-shadow: var(--cb-shadow) !important;
  backdrop-filter: none !important;
}
.cb-bottomnav .ico{
  border: none !important;
  background: var(--cb-surface) !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.cb-bottomnav a.is-active .ico{
  background: linear-gradient(145deg, rgba(249,115,22,.16), rgba(22,163,74,.08)) !important;
  box-shadow: var(--cb-shadow-inset-sm) !important;
}

.cb-jumpnav a{
  border: none !important;
  background: var(--cb-surface) !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.cb-jumpnav a:hover,
.cb-jumpnav a:focus-visible{
  box-shadow: var(--cb-shadow) !important;
  color: var(--cb-brand-2) !important;
}

.cb-live-pill{
  border: none !important;
  box-shadow: var(--cb-shadow-sm);
  background: var(--cb-surface);
}
.cb-logo-preview{
  border: none !important;
  box-shadow: var(--cb-shadow-sm) !important;
}
.home-block-edit{
  border: none !important;
  box-shadow: var(--cb-shadow-sm) !important;
  background: var(--cb-surface) !important;
}

.cb-settings{ max-width: 920px; }