/* ── Dashboard layout v9.1 ────────────────────────────────────────────── */
#dashboard.active ~ #footer-gate { display:none; }
#dashboard { display:none; padding-top:var(--nav-h); height:100vh; overflow:hidden; }
#dashboard.active { display:flex; flex-direction:column; }
.dash-body { display:flex; flex:1; overflow:hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
#sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--dark-sidebar);
  border-right:1px solid rgba(255,255,255,0.07);
  height:100%; overflow-y:auto; overflow-x:hidden;
  padding:0 0 40px; display:flex; flex-direction:column;
  transition:transform 0.3s var(--ease);
}
.sidebar-sort-bar {
  display:flex; align-items:center; gap:3px;
  padding:10px 10px 8px; flex-wrap:wrap; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-sort-label {
  font-size:0.56rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,0.2); margin-right:2px;
}
.sidebar-sort-btn {
  font-size:0.62rem; font-weight:600; color:rgba(255,255,255,0.3);
  background:none; border:1px solid rgba(255,255,255,0.1);
  cursor:pointer; padding:2px 8px; border-radius:20px;
  transition:all 0.15s; font-family:var(--font-body);
}
.sidebar-sort-btn:hover { color:rgba(255,255,255,0.65); border-color:rgba(255,255,255,0.22); }
.sidebar-sort-btn.active { background:rgba(18,169,157,0.12); border-color:rgba(18,169,157,0.3); color:var(--peacock-light); }
.sidebar-section-label {
  font-size:0.57rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.27); padding:0 12px; margin:14px 0 4px;
}
.sidebar-divider { height:1px; background:rgba(255,255,255,0.06); margin:6px 0; }
.sidebar-item {
  display:flex; align-items:center; gap:9px; padding:8px 12px;
  cursor:pointer; border-radius:7px; margin:1px 6px;
  transition:background 0.15s; min-width:0;
}
.sidebar-item:hover { background:rgba(255,255,255,0.07); }
.sidebar-item.active { background:rgba(13,107,99,0.3); }
.sidebar-item.active .si-label { color:#fff; }
.sidebar-item.soon { opacity:0.42; cursor:default; }
/* WhatsApp sidebar item */
.sidebar-item-wa { border-left:2px solid rgba(37,211,102,0.35); padding-left:10px; }
.sidebar-item-wa:hover { background:rgba(37,211,102,0.06); }
.si-icon { font-size:1.05rem; flex-shrink:0; width:22px; text-align:center; line-height:1; color:#fff; }
.si-text { min-width:0; flex:1; overflow:hidden; }
.si-label { font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-tagline { font-size:0.6rem; color:rgba(255,255,255,0.36); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.si-badge { font-size:0.52rem; font-weight:700; color:var(--peacock-light); border:1px solid rgba(18,169,157,0.28); border-radius:4px; padding:2px 5px; margin-left:auto; flex-shrink:0; }
.si-wa-badge { font-size:0.52rem; font-weight:700; color:#25D366; border:1px solid rgba(37,211,102,0.3); border-radius:4px; padding:2px 5px; margin-left:auto; flex-shrink:0; }

/* ── SIDEBAR OVERLAY ─────────────────────────────────────────────── */
.sidebar-overlay { display:none; position:fixed; inset:0; z-index:900; background:rgba(4,13,26,0.6); }
.sidebar-overlay.open { display:block; }

/* ── IFRAME PANE ─────────────────────────────────────────────────── */
.iframe-pane { flex:1; position:relative; overflow:hidden; background:var(--warm-bg); min-width:0; }

/* ── DESKTOP HOME GRID ───────────────────────────────────────────── */
.dash-home-grid { flex:1; overflow-y:auto; overflow-x:hidden; background:#060E0D; padding:28px 32px 60px; }
.dhg-header { margin-bottom:28px; }
.dhg-greeting { font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:#F0EAD6; margin-bottom:4px; }
.dhg-sub { font-size:0.8rem; color:rgba(216,240,236,0.36); margin-bottom:12px; }
.dhg-resume-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(13,107,99,0.18); border:1px solid rgba(18,169,157,0.25);
  color:var(--peacock-light); border-radius:20px;
  padding:5px 14px; font-size:0.76rem; font-weight:600;
  cursor:pointer; font-family:var(--font-body); transition:background 0.15s;
}
.dhg-resume-chip:hover { background:rgba(13,107,99,0.32); }
.dhg-section { margin-bottom:32px; }
.dhg-cat-label {
  font-size:0.59rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--peacock-light); margin-bottom:12px; padding-bottom:5px;
  border-bottom:1px solid rgba(18,169,157,0.12);
}
.dhg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:10px; }
.dhg-card {
  background:#0D1A18; border:1px solid rgba(18,169,157,0.08);
  border-radius:12px; padding:14px 10px 12px;
  cursor:pointer; text-align:center; position:relative;
  transition:border-color 0.15s, background 0.15s, transform 0.12s;
}
.dhg-card:hover { border-color:rgba(18,169,157,0.35); background:#0F2220; transform:translateY(-2px); }
.dhg-card-last { border-color:rgba(18,169,157,0.32); background:rgba(13,107,99,0.1); }
.dhg-card-last-badge {
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-size:0.54rem; font-weight:700; white-space:nowrap;
  background:var(--peacock); color:#D8F0EC; padding:2px 8px; border-radius:10px;
}
.dhg-card-icon { font-size:1.5rem; margin-bottom:6px; line-height:1; }
.dhg-card-name { font-size:0.78rem; font-weight:600; color:#D8F0EC; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dhg-card-cost { font-size:0.65rem; color:rgba(18,169,157,0.52); }
/* WA card */
.dhg-card-wa { border-color:rgba(37,211,102,0.15); }
.dhg-card-wa:hover { border-color:rgba(37,211,102,0.45); background:rgba(37,211,102,0.04); }
.dhg-wa-tag { color:#25D366; font-weight:700; }

/* ── MOBILE GRID ─────────────────────────────────────────────────── */
#mobile-grid { display:none; overflow-y:auto; background:#060E0D; padding-bottom:80px; }
#mobile-grid.visible { display:block; }
.mobile-grid-header { padding:16px 16px 0; }
.mobile-grid-title { font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:#F0EAD6; margin-bottom:2px; }
.mobile-grid-sub { font-size:0.76rem; color:rgba(216,240,236,0.35); }
.mobile-cat-pills {
  display:flex; gap:6px; overflow-x:auto; padding:10px 16px 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mobile-cat-pills::-webkit-scrollbar { display:none; }
.mob-cat-pill {
  flex-shrink:0; font-size:0.7rem; font-weight:600; white-space:nowrap;
  padding:5px 12px; border-radius:20px; border:1px solid rgba(18,169,157,0.2);
  color:rgba(216,240,236,0.48); background:transparent;
  cursor:pointer; font-family:var(--font-body); transition:all 0.15s;
}
.mob-cat-pill:hover { color:rgba(216,240,236,0.8); border-color:rgba(18,169,157,0.4); }
.mob-cat-pill.active { background:rgba(18,169,157,0.13); border-color:var(--peacock-light); color:var(--peacock-light); }
#product-grid-cards { padding:6px 12px 0; }
.mob-grid-cat-label { font-size:0.57rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(18,169,157,0.48); padding:14px 3px 5px; }
.mob-product-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px; }
.product-card {
  background:#0D1A18; border:1px solid rgba(18,169,157,0.08);
  border-radius:10px; padding:12px 8px 10px;
  cursor:pointer; transition:all 0.18s; text-align:center;
}
.product-card:hover { border-color:rgba(18,169,157,0.3); background:#0F2220; }
.product-card.soon { opacity:0.42; cursor:default; }
.product-card.soon:hover { border-color:rgba(18,169,157,0.08); background:#0D1A18; }
.product-card.last-used-card { border-color:rgba(18,169,157,0.28); background:rgba(13,107,99,0.08); }
/* WA mobile card */
.product-card-wa { border-color:rgba(37,211,102,0.18); }
.product-card-wa:hover { border-color:rgba(37,211,102,0.45); background:rgba(37,211,102,0.04); }
.card-icon { font-size:1.3rem; margin-bottom:5px; color:#F0EAD6; }
.card-label { font-size:0.72rem; font-weight:600; color:#D8F0EC; margin-bottom:2px; }
.card-tagline { font-size:0.6rem; color:rgba(216,240,236,0.4); line-height:1.3; }
.card-soon-badge { display:inline-block; margin-top:4px; font-size:0.54rem; font-weight:600; color:rgba(255,255,255,0.28); border:1px solid rgba(255,255,255,0.1); border-radius:4px; padding:1px 6px; }

/* ── MOBILE FULL-SCREEN PRODUCT VIEW ────────────────────────────── */
#mobile-product-view { display:none; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:400; flex-direction:column; background:transparent; }
#mobile-product-view.open { display:flex; }
.mobile-product-nav { display:none !important; }
#mobile-product-iframe { flex:1; width:100%; border:none; display:block; min-height:0; }
#nav-app-back { display:none; align-items:center; gap:8px; }
#nav-app-back.visible { display:flex; }
.btn-nav-back { background:transparent; border:none; color:var(--peacock-light); font-family:var(--font-body); font-size:0.8rem; font-weight:500; cursor:pointer; padding:4px 8px 4px 2px; display:flex; align-items:center; gap:4px; white-space:nowrap; }
#nav-app-label { font-family:var(--font-display); font-size:0.95rem; font-weight:500; color:rgba(255,255,255,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }

/* ── COMPACT FOOTER ──────────────────────────────────────────────── */
#footer-dash { background:var(--dark); border-top:1px solid rgba(255,255,255,0.05); flex-shrink:0; }
@media(max-width:767px){ #footer-dash { display:none; } }
.compact-footer { max-width:1000px; margin:0 auto; padding:14px 20px; display:flex; flex-direction:column; gap:5px; text-align:center; }
.cf-copy { font-size:0.69rem; color:rgba(255,255,255,0.2); }
.cf-disclaimer { font-size:0.67rem; color:rgba(255,255,255,0.14); }
.cf-contact { font-size:0.69rem; color:rgba(255,255,255,0.28); display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; }
.cf-contact a { color:rgba(255,255,255,0.35); text-decoration:none; transition:color 0.15s; }
.cf-contact a:hover { color:var(--peacock-light); }
.cf-sep { color:rgba(255,255,255,0.1); }
.mobile-footer { margin-top:24px; padding:16px 0 8px; border-top:1px solid rgba(255,255,255,0.06); text-align:center; }
.mobile-footer .mf-text { font-size:0.67rem; color:rgba(255,255,255,0.25); line-height:1.6; }
.mobile-footer a { color:rgba(255,255,255,0.3); text-decoration:none; }
.mobile-footer a:hover { color:var(--peacock-light); }

/* ── CATEGORY ACCENT TINTING ─────────────────────────────────────────
   One brand, four accents. Each category group carries data-acc; cards keep
   their exact layout — only colour usage unifies onto the shared --acc-*
   palette (vars.css). Non-category sorts (A–Z / most-used) stay neutral. */
[data-acc="oracle"] { --cat: var(--acc-oracle); --cat-soft: var(--acc-oracle-soft); --cat-line: rgba(155,108,240,0.14); }
[data-acc="gold"]   { --cat: var(--acc-gold);   --cat-soft: var(--acc-gold-soft);   --cat-line: rgba(200,134,26,0.14); }
[data-acc="rose"]   { --cat: var(--acc-rose);   --cat-soft: var(--acc-rose-soft);   --cat-line: rgba(224,106,147,0.14); }
[data-acc="teal"]   { --cat: var(--acc-teal);   --cat-soft: var(--acc-teal-soft);   --cat-line: rgba(18,169,157,0.14); }

/* Desktop home grid */
.dhg-section[data-acc] .dhg-cat-label { color: var(--cat); border-bottom-color: var(--cat-line); }
.dhg-section[data-acc] .dhg-card { border-color: var(--cat-soft); }
.dhg-section[data-acc] .dhg-card:hover { border-color: var(--cat); }
.dhg-section[data-acc] .dhg-card-cost { color: var(--cat); opacity: 0.72; }
.dhg-section[data-acc] .dhg-card-last { border-color: var(--cat); background: var(--cat-soft); }
.dhg-section[data-acc] .dhg-card-last-badge { background: var(--cat); color: var(--midnight); }
/* WhatsApp cards keep their green identity even inside an accent group */
.dhg-section[data-acc] .dhg-card-wa { border-color: rgba(37,211,102,0.15); }
.dhg-section[data-acc] .dhg-card-wa:hover { border-color: rgba(37,211,102,0.45); }
.dhg-section[data-acc] .dhg-card-wa .dhg-card-cost { color: #25D366; opacity: 1; }

/* Sidebar (category sort only) */
.sidebar-section-label[data-acc] { color: var(--cat); opacity: 0.85; }
.sidebar-item[data-acc].active { background: var(--cat-soft); }

/* Mobile grid */
.mob-grid-cat-label[data-acc] { color: var(--cat); }
.mob-product-row[data-acc] .product-card { border-color: var(--cat-soft); }
.mob-product-row[data-acc] .product-card:hover { border-color: var(--cat); }
.mob-product-row[data-acc] .product-card.last-used-card { border-color: var(--cat); background: var(--cat-soft); }
.mob-product-row[data-acc] .product-card-wa { border-color: rgba(37,211,102,0.18); }

/* ── PLACE AUTOCOMPLETE ──────────────────────────────────────────── */
.place-autocomplete-wrap { position:relative; }
.place-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200; background:#1A2E2C; border:1px solid rgba(18,169,157,0.35); border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.place-option { padding:10px 14px; font-size:0.84rem; font-family:var(--font-body); color:#D8F0E8; cursor:pointer; line-height:1.4; transition:background 0.12s; border-bottom:1px solid rgba(18,169,157,0.1); }
.place-option:last-child { border-bottom:none; }
.place-option:hover, .place-option.active { background:rgba(18,169,157,0.18); color:#fff; }
.place-option-loading,.place-option-empty { color:rgba(216,240,232,0.45); cursor:default; font-style:italic; }
.place-option-loading:hover,.place-option-empty:hover { background:transparent; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:767px){
  .dash-body { display:none !important; }
  #sidebar { display:flex !important; position:fixed; top:0; bottom:0; left:0; width:280px; height:100% !important; z-index:910; transform:translateX(-100%); transition:transform 0.3s var(--ease); padding-top:calc(var(--nav-h) + 12px); overflow-y:auto; overflow-x:hidden; }
  #sidebar.open { transform:translateX(0); }
  .hamburger { display:block; }
}
@media(min-width:768px){
  #dashboard.active .dash-body { display:flex; }
  #mobile-grid { display:none !important; }
  #mobile-product-view { display:none !important; }
  #sidebar { position:fixed; top:var(--nav-h); left:0; bottom:0; width:var(--sidebar-w); height:auto !important; z-index:1; transform:none !important; }
  .iframe-pane { margin-left:var(--sidebar-w); }
  .dash-home-grid { margin-left:var(--sidebar-w); }
}
@media(max-width:600px){
  #mobile-product-view { top:112px; }
  #sidebar { padding-top:128px; }
  #mobile-grid.visible { position:fixed; top:112px; left:0; right:0; bottom:0; overflow-y:auto; z-index:350; }
}
@media(max-width:360px){ .mob-product-row { grid-template-columns:repeat(2,1fr); } }