:root{
  color-scheme: dark;
  --bg:#0f1115;
  --panel:#171a21;
  --panel2:#1c2030;
  --text:#e8eaf2;
  --muted:#9aa1b6;
  --line:rgba(255,255,255,.08);
  --accent:#ffd84a;
  --good:#4ade80;
  --bad:#fb7185;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,216,74,.18), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(99,102,241,.16), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:980px;margin:0 auto;padding:18px}
.admin-shell .container{
  max-width:1400px;
  width:100%;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:rgba(15,17,21,.55);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:5;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand-logo{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,216,74,.22);
  background:rgba(255,255,255,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.brand-logo-fallback{
  background:rgba(255,216,74,.18);
  font-weight:900;
  color:var(--accent);
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
}
.pill-dot{width:8px;height:8px;border-radius:999px;background:var(--bad)}
.pill-dot.ok{background:var(--good)}
.hero{
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,216,74,.16), rgba(255,255,255,.03));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-media{height:160px;background:rgba(0,0,0,.2);position:relative}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
}
.hero-body{padding:14px 16px}
.alert{
  border:1px solid rgba(251,113,133,.35);
  background:rgba(251,113,133,.12);
  color:#ffd2db;
  padding:12px 14px;
  border-radius:16px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.client-store-alert{
  margin-bottom:12px;
}
.client-store-alert[hidden]{
  display:none;
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:18px 0 10px;
}
.section-title h2{margin:0;font-size:16px;letter-spacing:.2px}
.card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.product{
  display:grid;
  grid-template-columns: 1fr 108px;
  gap:12px;
  padding:12px;
  align-items:stretch;
}
.product h3{margin:0 0 6px;font-size:14px}
.product p{margin:0;color:var(--muted);font-size:12px;line-height:1.35;max-height:2.8em;overflow:hidden}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.price{font-weight:800;color:var(--good)}
.btn{
  appearance:none;border:0;
  background:rgba(255,216,74,.14);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,216,74,.25);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(1.08)}
.btn.primary{
  background:linear-gradient(180deg, rgba(255,216,74,.9), rgba(255,216,74,.65));
  border-color:rgba(255,216,74,.55);
  color:#1a1400;
}
.btn.danger{
  background:rgba(251,113,133,.12);
  border-color:rgba(251,113,133,.35);
  color:#ffd2db;
}
.thumb{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-action{
  appearance:none;
  padding:0;
  cursor:pointer;
}
.hero-media-button{
  appearance:none;
  width:100%;
  padding:0;
  border:0;
  cursor:pointer;
}
.modal-open{overflow:hidden}
.image-modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:20px;
}
.image-modal[hidden]{display:none}
.image-modal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.82);
  cursor:pointer;
}
.image-modal-dialog{
  position:relative;
  z-index:1;
  width:min(92vw, 720px);
  max-height:90vh;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(18,20,26,.96);
  box-shadow:var(--shadow);
}
.image-modal-dialog img{
  width:100%;
  max-height:90vh;
  object-fit:contain;
  background:#090b10;
}
.image-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(15,17,21,.72);
  color:var(--text);
  cursor:pointer;
  font-size:24px;
  line-height:1;
}
.contact-modal{
  position:fixed;
  inset:0;
  z-index:41;
  display:grid;
  place-items:center;
  padding:20px;
}
.contact-modal[hidden]{display:none}
.contact-modal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.82);
  cursor:pointer;
}
.contact-modal-dialog{
  position:relative;
  z-index:1;
  width:min(92vw, 520px);
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(18,20,26,.96);
  box-shadow:var(--shadow);
}
.contact-modal-body{
  display:grid;
  gap:12px;
  padding:22px;
}
.contact-modal-body h2{
  margin:0;
  font-size:20px;
}
.contact-item{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.contact-item-label{
  color:var(--muted);
  font-size:12px;
}
.contact-item-link{
  color:inherit;
}
.contact-item-link:hover{
  text-decoration:underline;
}
.admin-logo-upload{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:16px;
  align-items:start;
}
.admin-store-logo-preview{
  width:120px;
  height:120px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:42px;
  font-weight:900;
  color:var(--accent);
}
.admin-store-logo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.admin-hero-preview{
  width:100%;
  max-width:220px;
  height:120px;
  border-radius:18px;
  font-size:18px;
}
.admin-store-status-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 0 4px;
}
.admin-store-status-text{
  display:grid;
  gap:10px;
}
.row{display:flex;gap:10px;align-items:center}
.muted{color:var(--muted)}
.totals{display:grid;gap:8px;padding:12px}
.totals .line{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}
.totals .line strong{color:var(--text)}
.totals .grand{font-size:15px}
input,select,textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  color:var(--text);
  outline:none;
}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:rgba(255,255,255,.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239aa1b6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
  padding-right:40px;
}
option,
optgroup{
  background-color:rgba(255,255,255,.04);
  color:var(--text);
}
.custom-select-native{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
}
.custom-select{
  position:relative;
  width:100%;
}
.custom-select-button{
  width:100%;
  min-height:46px;
  padding:12px 40px 12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-align:left;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  position:relative;
}
.custom-select-button::after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239aa1b6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
}
.custom-select-button:disabled{
  cursor:not-allowed;
  opacity:.7;
}
.custom-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:30;
  display:none;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.custom-select.open .custom-select-menu{display:grid;gap:4px}
.custom-select-option{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-align:left;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
}
.custom-select-option:hover,
.custom-select-option.is-selected{
  background:rgba(255,255,255,.04);
}
.custom-select-option:disabled{
  color:var(--muted);
  opacity:.6;
  cursor:not-allowed;
}
label{display:block;color:var(--muted);font-size:12px;margin:12px 0 6px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nav-bottom{
  position:sticky;
  bottom:0;
  background:rgba(15,17,21,.75);
  border-top:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-inner{display:flex;justify-content:space-around;gap:8px;padding:10px 12px}
.tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
}
.tab.active{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.admin-nav{
  position:sticky;top:0;align-self:start;
  height:100vh;
  border-right:1px solid var(--line);
  background:rgba(15,17,21,.55);
  backdrop-filter: blur(10px);
  padding:18px;
}
.admin-nav a{display:block;padding:10px 12px;border-radius:14px;color:var(--muted);border:1px solid transparent}
.admin-nav a.active{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.04)}
.admin-nav-group{margin-top:18px;display:grid;gap:6px}
.admin-nav-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 4px 12px}
.admin-grid-2{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}
.admin-page{display:grid;gap:14px}
.admin-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.admin-title{display:grid;gap:6px}
.admin-title h1{margin:0;font-size:22px;line-height:1.1}
.admin-title p{margin:0;color:var(--muted);font-size:13px}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat-card{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px}
.stat-card strong{display:block;font-size:22px;line-height:1;margin-top:8px}
.stat-card span{display:block;color:var(--muted);font-size:12px}
.admin-card{padding:16px}
.admin-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.admin-card-header h2{margin:0;font-size:16px}
.admin-card-header p{margin:6px 0 0;color:var(--muted);font-size:12px}
.admin-form-grid{display:grid;gap:12px}
.admin-inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-list{display:grid;gap:12px}
.admin-grouped-list{gap:16px}
.admin-category-group{
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.admin-category-group-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.admin-category-group-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.admin-category-group-header strong{
  display:block;
  font-size:15px;
}
.admin-category-group-header span{
  color:var(--muted);
  font-size:12px;
}
.admin-list-item{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.admin-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.admin-item-title{display:grid;gap:4px}
.admin-item-title strong{font-size:15px}
.admin-item-title span{font-size:12px;color:var(--muted)}
.admin-badge-row{display:flex;gap:8px;flex-wrap:wrap}
.admin-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted);background:rgba(255,255,255,.03)}
.admin-badge.ok{color:#d8ffe6;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)}
.admin-badge.off{color:#ffd2db;border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.1)}
.admin-soft-divider{height:1px;background:var(--line);margin:14px 0}
.admin-empty{padding:18px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}
.admin-price{font-size:16px;font-weight:800;color:var(--good)}
.product-admin-card{display:grid;gap:14px}
.product-admin-card.is-dragging{
  opacity:.55;
  border-color:rgba(255,216,74,.5);
  background:rgba(255,216,74,.06);
}
.product-admin-head{display:flex;gap:14px;align-items:flex-start}
.product-admin-summary{
  cursor:pointer;
  padding:4px 0;
}
.product-admin-summary .btn{
  position:relative;
  z-index:1;
}
.product-drag-handle{
  appearance:none;
  flex:0 0 38px;
  width:38px;
  height:76px;
  border:1px dashed var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  cursor:grab;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:20px;
  letter-spacing:-2px;
}
.product-drag-handle:active{
  cursor:grabbing;
}
.product-drag-handle span{
  pointer-events:none;
}
.admin-sort-status{
  font-size:12px;
  color:var(--muted);
}
.admin-sort-status[data-tone="success"]{
  color:var(--good);
}
.admin-sort-status[data-tone="error"]{
  color:var(--bad);
}
.product-admin-details{
  display:grid;
  gap:14px;
}
.product-admin-details[hidden]{
  display:none !important;
}
.product-admin-card.is-collapsed .product-admin-head{
  margin-bottom:0;
}
.product-admin-media{
  width:76px;height:76px;flex:0 0 76px;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
}
.product-admin-media img{width:100%;height:100%;object-fit:cover}
.product-admin-placeholder{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.product-customization-list{display:grid;gap:12px;margin-top:6px}
.product-option-list{display:grid;gap:8px;margin-top:12px}
.product-option-row{
  display:grid;
  grid-template-columns:18px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.product-option-row input[type="checkbox"],
.product-option-row input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  accent-color:var(--accent);
}
.product-option-row strong{font-size:12px;color:var(--good)}
.payment-inline-card{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.payment-inline-card[hidden]{
  display:none !important;
}
.payment-inline-card label{
  display:block;
  margin-bottom:6px;
}
.product-purchase-bar{
  position:sticky;
  bottom:12px;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(15,17,21,.92);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.product-purchase-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:13px;
}
.product-purchase-summary strong{
  color:var(--good);
  font-size:18px;
}
.cart-addon-list{display:grid;gap:6px;margin-top:10px}
.cart-addon-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:12px;
}
.product-customization-admin{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px dashed var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.product-customization-admin-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.product-customization-admin-head h3{margin:0;font-size:15px}
.product-customization-admin-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.product-customization-admin-groups{display:grid;gap:12px}
.customization-group-card{
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.customization-group-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.customization-group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}
.customization-group-grid > :first-child{
  grid-column:span 2;
}
.customization-options-wrap{
  display:grid;
  gap:10px;
  padding-top:4px;
}
.customization-options-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.customization-option-list{display:grid;gap:10px}
.customization-option-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.customization-option-row > :first-child{
  grid-column:span 2;
}
.customization-option-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:52px;
}
.board{display:grid;grid-template-columns:repeat(3, minmax(240px, 1fr));gap:12px}
.col{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);overflow:hidden}
.col h3{margin:0;padding:12px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.order-card{padding:12px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.order-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.badge{font-size:11px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .btn{padding:8px 10px;border-radius:12px;font-size:12px}
@media (max-width: 860px){
  .admin-shell{grid-template-columns:1fr}
  .admin-nav{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .admin-grid-2{grid-template-columns:1fr}
  .admin-header{align-items:flex-start;flex-direction:column}
  .admin-stats{grid-template-columns:1fr}
  .admin-logo-upload{grid-template-columns:1fr}
  .admin-store-status-card{align-items:flex-start;flex-direction:column}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end}
  .admin-category-group-header{align-items:flex-start;flex-direction:column}
  .product-admin-head{flex-direction:column}
  .product-drag-handle{width:100%;height:38px}
  .product-customization-admin-head,
  .customization-group-top,
  .customization-options-head{flex-direction:column;align-items:stretch}
  .customization-group-grid,
  .customization-option-row{grid-template-columns:1fr}
  .customization-group-grid > :first-child,
  .customization-option-row > :first-child{grid-column:auto}
  .customization-option-actions{justify-content:stretch;min-height:0}
  .customization-option-actions .btn{width:100%}
  .board{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
}