/* Store/services/portfolio/admin pages — built entirely from style.css's
   existing tokens (--accent, --bg-*, .panel/.ghost-btn/.generate-btn, etc.)
   so these pages read as part of the same site, not a bolt-on. */

.site-nav{display:flex;gap:4px;flex:1 1 auto;justify-content:center;}
.site-nav a{padding:8px 14px;border-radius:6px;color:var(--text-1);text-decoration:none;font-size:13px;font-weight:600;font-family:var(--font-ui);transition:all .15s;}
.site-nav a:hover{color:var(--text-0);background:var(--bg-2);}
.site-nav a.active{color:var(--on-accent);background:var(--accent);}

.nav-dropdown{position:relative;}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--bg-2);border:1px solid var(--border);border-radius:8px;
  padding:6px;display:none;flex-direction:column;min-width:170px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);z-index:50;
}
.nav-dropdown-menu.open{display:flex;}
.nav-dropdown-menu a{padding:9px 12px;border-radius:6px;color:var(--text-1);text-decoration:none;font-size:12px;font-family:var(--font-ui);}
.nav-dropdown-menu a:hover{background:var(--bg-3);color:var(--accent);}

.store-page{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:28px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;}
.store-hero{text-align:center;padding:32px 20px 8px;}
.store-hero h1{font-family:var(--font-display);font-size:32px;margin:0 0 10px;}
.store-hero p{color:var(--text-1);font-size:14px;max-width:620px;margin:0 auto;}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px;}
.service-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .2s;}
.service-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),.15);}
.service-card .icon{font-size:32px;margin-bottom:12px;}
.service-card h3{font-family:var(--font-display);margin:0 0 8px;font-size:18px;}
.service-card p{color:var(--text-1);font-size:13px;line-height:1.6;margin:0 0 16px;}

.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:20px;}
.map-card{position:relative;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s;display:flex;flex-direction:column;}
.map-card-badge{position:absolute;top:10px;left:10px;z-index:2;}

/* --------------------------------------------------- stock & availability */
.jo-stock-badge{
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.2px; border:1px solid transparent;
}
.jo-stock-badge.jo-stock-low{ background:rgba(255,181,69,.16); color:var(--accent-warn); border-color:rgba(255,181,69,.35); }
.jo-stock-badge.jo-stock-out{ background:rgba(255,92,122,.14); color:var(--accent-danger); border-color:rgba(255,92,122,.35); }
.jo-stock-badge.jo-stock-unavailable{ background:rgba(138,144,162,.16); color:var(--text-2); border-color:rgba(138,144,162,.3); }
.jo-stock-badge.jo-stock-coming-soon{ background:rgba(108,182,255,.14); color:#6cb6ff; border-color:rgba(108,182,255,.35); }
.jo-stock-line{ font-size:11.5px; color:var(--text-2); margin-top:-4px; }
.jo-buy-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.jo-stock-section{ border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin:18px 0; background:var(--bg-2); }
.jo-stock-section h3{ font-family:var(--font-display); font-size:15px; margin:0 0 10px; }
.jo-stock-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-1); padding:5px 0; border-bottom:1px solid var(--border); }
.jo-stock-row:last-child{ border-bottom:none; }
.jo-stock-row b{ color:var(--text-0); }
.store-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0;}
.store-toolbar input[type="text"],.store-toolbar select{width:auto;min-width:160px;}
.category-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;}
.category-chip{padding:6px 14px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);cursor:pointer;}
.category-chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700;}
.store-theme .category-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--sp-text-dim);}
.store-theme .category-chip.active{background:var(--sp-gradient);color:var(--on-accent);border-color:transparent;}
.map-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 28px rgba(0,0,0,.4);}
.map-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-0);display:block;}
.map-card-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.map-card-title{font-family:var(--font-display);font-weight:700;font-size:16px;}
.map-card-desc{color:var(--text-1);font-size:12px;flex:1;}
.map-card-meta{display:flex;gap:10px;font-size:11px;color:var(--text-2);}
.map-card-by{font-size:11px;color:var(--text-2);}
.map-card-by a{color:var(--accent);text-decoration:none;}
.map-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--border);margin-top:6px;}
.map-card-price{font-family:var(--font-display);font-weight:700;color:var(--accent);font-size:16px;}
.map-card-actions{display:flex;gap:8px;}

.map-detail{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;margin-top:20px;}
.map-detail-gallery img.main{width:100%;border-radius:var(--radius);border:1px solid var(--border);aspect-ratio:16/9;object-fit:cover;display:block;}
.map-detail-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.map-detail-thumbs img{width:70px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--border);cursor:pointer;}
.map-detail-thumbs img.active{border-color:var(--accent);}
.map-detail-video{margin-top:16px;aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.map-detail-video iframe{width:100%;height:100%;border:0;}
.map-detail-info h1{font-family:var(--font-display);font-size:26px;margin:0 0 12px;}
.map-detail-price{font-size:28px;font-weight:700;color:var(--accent);font-family:var(--font-display);margin:12px 0;}
.map-detail-features{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:8px;}
.map-detail-features li{color:var(--text-1);font-size:13px;}
.map-detail-features li::before{content:'✓ ';color:var(--accent);font-weight:700;}

/* ---------------------------------------------------------------- reviews */
.star-rating .star{color:var(--border-hi);font-size:16px;}
.star-rating .star.filled{color:var(--accent);}
.star-rating.star-lg .star{font-size:24px;}
.star-rating-input .star-input-btn{background:none;border:none;font-size:24px;color:var(--border-hi);cursor:pointer;padding:2px;width:auto;}
.star-rating-input .star-input-btn.filled{color:var(--accent);}
.reviews-title{font-family:var(--font-display);margin:32px 0 16px;font-size:22px;}
.reviews-summary{display:flex;gap:32px;flex-wrap:wrap;align-items:center;padding:20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);}
.reviews-summary-score{text-align:center;}
.reviews-summary-num{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--accent);}
.reviews-summary-dist{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;}
.rating-dist-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-1);}
.rating-dist-bar{flex:1;height:8px;background:var(--bg-0);border-radius:4px;overflow:hidden;}
.rating-dist-fill{height:100%;background:var(--accent);}
.rating-dist-count{width:24px;text-align:right;}
.reviews-list{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.review-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.review-card-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.review-card-name{font-weight:700;font-size:13px;}
.review-card-date{font-size:11px;color:var(--text-2);}
.review-card-title{font-weight:700;margin-top:8px;font-size:14px;}
.review-card-body{color:var(--text-1);font-size:13px;line-height:1.6;margin:4px 0;}
.review-card-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.review-card-images img{width:80px;height:60px;object-fit:cover;border-radius:6px;}
.badge-pill.verified-purchase{font-size:9px;padding:3px 8px;margin-left:6px;}
.initials-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;}

/* -------------------------------------------------------- developer trust */
.developer-header{display:flex;gap:20px;align-items:center;padding:24px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);margin-top:20px;}
.developer-header .initials-avatar,.developer-header img{width:72px;height:72px;font-size:24px;border-radius:50%;object-fit:cover;}
.developer-stats{display:flex;gap:24px;margin-top:12px;flex-wrap:wrap;}
.developer-stats .stat{text-align:center;}
.developer-stats .stat .num{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--accent);}
.developer-stats .stat .label{font-size:11px;color:var(--text-2);text-transform:uppercase;}
.badge-pill.verified-dev{background:var(--success);color:var(--on-accent);}

.form-panel{max-width:560px;margin:24px auto 0;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.form-panel label{display:block;font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}
.form-panel input,.form-panel select,.form-panel textarea{width:100%;background:var(--bg-0);border:1px solid var(--border);color:var(--text-0);border-radius:6px;padding:10px;font-size:13px;font-family:var(--font-ui);box-sizing:border-box;}
.form-panel textarea{resize:vertical;}
.form-hint{font-size:11px;color:var(--text-2);margin-top:6px;}
.service-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;}
.service-type-picker button{padding:14px 8px;font-size:11px;}
.service-type-picker button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700;}

.admin-shell{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 52px);}
.admin-nav{background:var(--bg-1);border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:4px;}
.admin-nav button{text-align:left;width:100%;}
.admin-nav button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.admin-main{padding:24px;overflow-y:auto;}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px;}
.admin-stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.admin-stat-card .num{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--accent);}
.admin-stat-card .label{font-size:11px;color:var(--text-2);text-transform:uppercase;}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table th,.admin-table td{text-align:left;padding:10px;border-bottom:1px solid var(--border);}
.admin-table th{color:var(--text-2);font-size:11px;text-transform:uppercase;}
.status-badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;}
.status-new{background:rgba(var(--accent-rgb),.2);color:var(--accent);}
.status-in_progress{background:rgba(242,206,111,.18);color:#f2ce6f;}
.status-completed{background:rgba(61,255,160,.15);color:var(--success);}
.status-cancelled{background:rgba(255,92,122,.15);color:var(--accent-danger);}

.map-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.image-upload-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.image-upload-list .thumb{position:relative;width:80px;height:60px;}
.image-upload-list .thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px;border:1px solid var(--border);}
.image-upload-list .thumb button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--accent-danger);color:#fff;border:none;font-size:11px;cursor:pointer;line-height:1;padding:0;}
.image-upload-list .thumb.is-thumbnail img{border-color:var(--accent);border-width:2px;}

.empty-state{text-align:center;padding:40px 20px;color:var(--text-2);}

/* --------------------------------------------------------- admin audit log */
.severity-badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap;}
.severity-info{background:rgba(var(--accent-rgb),.15);color:var(--accent);}
.severity-warning{background:rgba(242,206,111,.18);color:#f2ce6f;}
.severity-high{background:rgba(255,92,122,.18);color:var(--accent-danger);}
.severity-critical{background:var(--accent-danger);color:#fff;}
.sensitive-flag{color:var(--accent-danger);font-weight:700;font-size:11px;margin-left:6px;}
.audit-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1000;overflow-y:auto;}
.audit-modal{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:640px;width:100%;}
.audit-diff{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.audit-diff .before{border-left:3px solid var(--accent-danger);padding-left:10px;}
.audit-diff .after{border-left:3px solid var(--success);padding-left:10px;}
.audit-diff .diff-label{font-size:11px;color:var(--text-2);text-transform:uppercase;margin-bottom:4px;}
.audit-widget-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.audit-widget-item:last-child{border-bottom:none;}
.audit-widget-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.audit-widget-item .meta{color:var(--text-2);font-size:11px;}

@media (max-width:860px){
  .map-detail{grid-template-columns:1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-nav{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);}
  .map-form-grid{grid-template-columns:1fr;}
}

/* ------------------------------------------------------ mobile topbar nav --
   Below 860px, .topbar-actions (lang/theme/sign-in/dashboard buttons) alone
   is often wider than the viewport, which — with .site-nav sharing the same
   flex row as a flex:1 shrinkable item — squeezes the entire nav to 0 width
   and pushes .topbar-actions past the screen edge instead of wrapping. Fix:
   collapse .site-nav into a hamburger-toggled dropdown (mobileNav.js injects
   the button and toggles .mobile-open) and let .topbar wrap what's left. */
@media (max-width:860px){
  .topbar{flex-wrap:wrap;height:auto;min-height:52px;row-gap:6px;padding:8px 12px;}
  .mobile-nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;font-size:18px;line-height:1;order:1;
  }
  .brand{order:0;}
  .topbar-actions{order:2;flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
  .site-nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:2px;background:var(--bg-1);border-top:1px solid var(--border);
    margin:8px -12px 0;padding:8px 12px;overflow-x:visible;
  }
  .site-nav.mobile-open{display:flex;}
  .site-nav a{padding:11px 14px;}
}
@media (min-width:861px){
  .mobile-nav-toggle{display:none;}
}

/* ============================================================================
   STORE THEME — applied only on the store/services/portfolio/admin pages
   (via the `.store-theme` class on #app). Layout modeled after
   uefncreator.space (near-black background, gradient CTAs, pill badges, bold
   Inter headlines, circular checkmark bullets) but recolored to the site's
   own gold accent (var(--accent)/var(--accent-2) from style.css) instead of
   that reference's purple, so it matches the 3D generator's palette.
============================================================================ */
.store-theme{
  /* These used to be their own hardcoded dark palette, independent of the
     Advanced Theme System's --bg-*/--text-* tokens — meaning every page
     using this class (nearly the whole site) silently ignored theme
     switching. Now they're just named aliases onto the real tokens, so this
     whole block re-colors correctly for all 8 themes with no other changes. */
  --sp-bg:var(--bg-0);
  --sp-purple:var(--accent);
  --sp-indigo:var(--accent-2);
  --sp-gradient:linear-gradient(to right, var(--sp-purple), var(--sp-indigo));
  --sp-card:var(--bg-1);
  --sp-border:var(--border);
  --sp-border-hover:rgba(var(--accent-rgb),.5);
  --sp-text:var(--text-0);
  --sp-text-dim:var(--text-1);
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(var(--accent-rgb),.18), transparent 60%),
    var(--sp-bg);
}
.store-theme .topbar{background:color-mix(in srgb, var(--bg-0) 70%, transparent);border-bottom:1px solid var(--sp-border);backdrop-filter:blur(8px);}
.store-theme .brand-logo{animation:none;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.6));}
.store-theme .brand-name,.store-theme .brand-sub{color:var(--sp-text);}

.store-theme .site-nav a{color:var(--sp-text-dim);font-family:'Inter',sans-serif;}
.store-theme .site-nav a:hover{color:var(--text-0);background:var(--bg-2);}
.store-theme .site-nav a.active{background:var(--sp-gradient);color:var(--on-accent);}

.store-theme .store-hero h1{font-family:'Inter',sans-serif;font-weight:800;color:var(--text-0);letter-spacing:-.5px;}
.store-theme .store-hero p{color:var(--sp-text-dim);}

.store-theme .badge-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.35);
  color:var(--accent-2);font-size:12px;font-weight:600;font-family:'Inter',sans-serif;
}

.store-theme .service-card,
.store-theme .map-card,
.store-theme .form-panel,
.store-theme .admin-stat-card,
.store-theme .audit-modal{
  background:var(--sp-card);border:1px solid var(--sp-border);border-radius:16px;
}
.store-theme .audit-diff .diff-label{color:var(--text-2);}
.store-theme .audit-widget-item{border-bottom:1px solid var(--sp-border);}
.store-theme .service-card:hover,.store-theme .map-card:hover{
  transform:translateY(-4px);border-color:var(--sp-border-hover);
  box-shadow:0 10px 32px rgba(var(--accent-rgb),.18);
}
.store-theme .service-card h3,.store-theme .map-card-title,.store-theme .map-detail-info h1,.store-theme .admin-main h2{
  font-family:'Inter',sans-serif;color:var(--text-0);
}
.store-theme .service-card p,.store-theme .map-card-desc,.store-theme .map-detail-info p{color:var(--sp-text-dim);}
.store-theme .map-card-price,.store-theme .map-detail-price{color:var(--accent-2);font-family:'Inter',sans-serif;}
.store-theme .map-card-meta,.store-theme .form-hint,.store-theme label{color:var(--text-2);}

.store-theme .map-detail-features{gap:10px;}
.store-theme .map-detail-features li{display:flex;align-items:center;gap:10px;color:var(--sp-text-dim);}
.store-theme .map-detail-features li::before{
  content:'✓';flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--sp-gradient);color:var(--on-accent);font-size:10px;font-weight:700;
}

.store-theme .generate-btn{
  background:var(--sp-gradient);color:var(--on-accent);border-radius:12px;font-family:'Inter',sans-serif;
  box-shadow:0 4px 20px rgba(var(--accent-rgb),.35);animation:none;
}
.store-theme .generate-btn:hover{box-shadow:0 6px 28px rgba(var(--accent-rgb),.55);transform:translateY(-1px);}
.store-theme .ghost-btn,.store-theme .icon-btn{
  background:var(--bg-2);border:1px solid var(--sp-border);color:var(--sp-text);
}
.store-theme .ghost-btn:hover,.store-theme .icon-btn:hover{background:var(--bg-3);color:var(--text-0);border-color:var(--border-hi);}
.store-theme .service-type-picker button.active{background:var(--sp-gradient);color:var(--on-accent);border-color:transparent;}

.store-theme input,.store-theme select,.store-theme textarea{
  background:var(--bg-2);border:1px solid var(--sp-border);color:var(--sp-text);
}
.store-theme input:focus,.store-theme select:focus,.store-theme textarea:focus{outline:none;border-color:var(--sp-purple);}
.store-theme select option{background:var(--bg-1);color:var(--sp-text);}

.store-theme .admin-nav{background:var(--bg-1);border-right:1px solid var(--sp-border);}
.store-theme .admin-nav button.active{background:var(--sp-gradient);color:var(--on-accent);border-color:transparent;}
.store-theme .admin-stat-card .num{font-family:'Inter',sans-serif;color:#fff;background:var(--sp-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.store-theme .admin-table th,.store-theme .admin-table td{border-bottom:1px solid var(--sp-border);color:var(--sp-text-dim);}
.store-theme .admin-table td{color:var(--sp-text);}
.store-theme .status-new{background:rgba(var(--accent-rgb),.18);color:var(--accent-2);}

.store-theme .empty-state{color:var(--sp-text-dim);}

.glow-cursor{position:relative;}
.glow-cursor__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:999;}