:root{
  --bg:#0b0f1a;
  --card:#0e1424cc;
  --muted:#b8b8c7;
  --text:#f3f2ff;
  --primary:#9146FF;     /* Twitch Purple */
  --accent:#A970FF;      /* Light Purple */
  --accent2:#772ce8;     /* Deep Twitch */
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 20% -20%,#1a1440 0%, transparent 60%), radial-gradient(900px 600px at 110% 20%, #2a0b59 0%, transparent 55%), var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial}
a{color:var(--accent);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.mt-2{margin-top:12px}.mt-4{margin-top:24px}.mt-6{margin-top:36px}
.nav{position:sticky;top:0;backdrop-filter:blur(10px);background:linear-gradient(180deg, rgba(10,12,24,.9), rgba(10,12,24,.6));border-bottom:1px solid var(--border);z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.brand .logo{display:inline-flex;width:24px;height:24px;background:linear-gradient(135deg,var(--accent),var(--primary));border-radius:6px;box-shadow:0 0 18px rgba(145,70,255,.55);transform:rotate(45deg)}
.menu{display:flex;gap:16px;align-items:center}
.menu .btn{margin-left:8px}

.hero{padding:44px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(145,70,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 40px rgba(0,0,0,.4)}
.title{font-size:54px;line-height:1.05;margin:0}
.subtitle{opacity:.95;margin-top:10px;font-size:18px}
.actions{margin-top:22px;display:flex;gap:12px}
.glow{background:linear-gradient(90deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(169,112,255,.45)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:14px;border:1px solid var(--border);color:var(--text);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));box-shadow:0 4px 20px rgba(0,0,0,.35);transition:.2s transform, .2s box-shadow}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--accent)); border:0; box-shadow:0 6px 28px rgba(145,70,255,.55), 0 0 44px rgba(169,112,255,.28)}

.card{padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.35)}
.glass{backdrop-filter: blur(10px); background: var(--glass)}

.form{display:grid;gap:10px;margin-top:12px}
.form input{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);outline:none}
.form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(145,70,255,.18)}

.alert{background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.3);padding:10px;border-radius:12px;margin-bottom:8px}
.muted{color:var(--muted)}
.user{opacity:.9;margin-right:8px;font-size:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr}
.gap-4{gap:16px}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr} .hero{padding:28px} .title{font-size:40px} }

.product{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.product .name{font-weight:700}
.product .price{font-size:20px}
.product .row{display:flex;gap:10px}
.product .ghost{opacity:.8}

.footer{border-top:1px solid var(--border);margin-top:48px;padding:24px 0;color:var(--muted)}

.balance{font-size:32px;font-weight:800;margin-top:10px}
.list{margin:0;padding-left:18px}
.max-w-sm{max-width:420px}.max-w-lg{max-width:700px}.mx-auto{margin-left:auto;margin-right:auto}
.w-full{width:100%}

/* === Layout with Twitch-like chat on the right === */
.layout{display:grid;grid-template-columns: 1fr 350px; gap:18px; align-items:start}
@media (max-width: 900px){ .layout{grid-template-columns: 1fr} }

.twitch-chat{position:sticky; top:76px; height: calc(100vh - 120px); display:flex; flex-direction:column}
.chat-header{display:flex; align-items:center; justify-content:space-between; font-weight:800; letter-spacing:.3px; margin-bottom:8px}
.chat-messages{flex:1; overflow:auto; border:1px solid var(--border); border-radius:14px; padding:10px; background:rgba(7,9,18,.55);flex:1; overflow:auto; border:1px solid var(--border); border-radius:14px; padding:10px; background:rgba(7,9,18,.55)}
.chat-input-row{display:flex; gap:8px; margin-top:10px}
.chat-input-row input{flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:10px; padding:10px; color:var(--text)}

.msg{display:flex; align-items:baseline; gap:6px; padding:4px 0; font-size:14px; line-height:1.25}
.msg .badge{font-size:10px; padding:3px 6px; border-radius:6px; background:linear-gradient(135deg, var(--accent2), var(--primary)); box-shadow:0 0 12px rgba(145,70,255,.35)}
.msg .nick{font-weight:800}
.msg .text{opacity:.95}
.msg .emoji{filter: drop-shadow(0 0 6px rgba(169,112,255,.4));}
.time{opacity:.55; font-size:11px}

.pill{font-size:11px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04)}

/* Keep chat lines on a single row and prevent stretching */
.msg{white-space:nowrap; overflow:hidden}
.msg .text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg .nick{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}


/* Announcement banner */
.announce{position:sticky; top:0; z-index:20; background:linear-gradient(90deg, rgba(145,70,255,.95), rgba(169,112,255,.95)); color:white; font-weight:800; padding:10px 16px; text-align:center; border-bottom:1px solid var(--border); box-shadow:0 6px 24px rgba(0,0,0,.35)}
.hidden{display:none}
.announce .close{margin-left:12px; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:2px 8px; cursor:pointer}

/* Fixed-height chat */
.chat-messages{height:420px; overflow:auto}


/* === Product cards === */
.product-card{ display:flex; flex-direction:column; gap:10px; }
.product-card .prod-img{ width:100%; height:160px; object-fit:cover; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.product-card .cats{ display:flex; gap:6px; flex-wrap:wrap; }
.product-card .price{ font-weight:700; font-size:20px; margin-top:6px; }
.product-card .prod-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.product-card .prod-controls .qty{ display:flex; align-items:center; gap:8px; }
.product-card .prod-controls input[type="number"]{ width:80px; }
.product-card .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.actions .btn{ margin:0 !important; } /* avoid weird margins */



/* === Maintenance state === */
.product-card.maintenance{
  opacity:.55;
  filter: grayscale(0.4) brightness(0.8);
  position:relative;
}
.product-card .maint-badge{
  position:absolute;
  top:12px; right:12px;
  background: rgba(255,215,0,.12);
  color:#ffd700;
  border:1px solid rgba(255,215,0,.35);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  display:flex; align-items:center; gap:6px;
  box-shadow:0 6px 24px rgba(255,215,0,.18);
}
.product-card .maint-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background:#ffd700;
  box-shadow:0 0 10px #ffd700, 0 0 20px rgba(255,215,0,.8);
  display:inline-block;
}
.product-card .actions .btn.disabled{
  opacity:.6; cursor:not-allowed; filter:grayscale(1);
}



/* Orders status pills */
.pill.pending{ background: rgba(255, 193, 7, .15); color:#ffc107; border:1px solid rgba(255,193,7,.35); }
.pill.processing{ background: rgba(0,123,255,.15); color:#69b1ff; border:1px solid rgba(0,123,255,.35); }
.pill.complete{ background: rgba(40,167,69,.15); color:#28a745; border:1px solid rgba(40,167,69,.35); }
.pill.canceled{ background: rgba(220,53,69,.15); color:#dc3545; border:1px solid rgba(220,53,69,.35); }

/* Order status tracker */
.order-status{ display:flex; gap:10px; margin:12px 0; }
.order-status .step{ padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.12); opacity:.6; }
.order-status .step.active{ opacity:1; border-style:solid; }
.order-status .step.canceled{ color:#dc3545; border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.08); }

/* Admin orders board */
.board .col{ min-height: 260px; }
.order-card{ background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); padding:12px; border-radius:16px; margin-bottom:10px; }
.order-card .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn.success{ background: linear-gradient(135deg,#37d67a,#28a745); color:#111; }
.btn.danger{ background: linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; }



/* === Orders (Dashboard) === */
#orders-card .legend { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.order-row { display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.order-row:last-child { border-bottom: none; }

/* Colors requested */
.pill.pending{ background: rgba(255, 193, 7, .12); color:#ffc107; border:1px solid rgba(255,193,7,.4); }
.pill.processing{ background: rgba(0, 123, 255, .12); color:#69b1ff; border:1px solid rgba(0,123,255,.4); }
.pill.canceled{ background: rgba(220, 53, 69, .12); color:#ff6b81; border:1px solid rgba(220,53,69,.45); }
.pill.complete{ background: rgba(40, 167, 69, .12); color:#2fd27e; border:1px solid rgba(40,167,69,.45); }



/* === Admin Orders Screenshot Style === */
.status-title{
  font-size: 42px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; margin: 10px 12px 20px;
  text-shadow: 0 6px 30px rgba(169,112,255,.35);
  color: #e5d4ff;
}
.kanban .lane{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px;
}
.lane-title{
  font-size: 28px; font-weight: 900; text-transform: uppercase;
  margin-bottom: 10px; color: #e5d4ff; text-shadow: 0 4px 22px rgba(169,112,255,.35);
}
.lane-body{ min-height: 360px; }
.modal{ position: fixed; inset: 0; display:flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 50; }
.modal.hidden{ display:none; }
.order-card.small{ background: rgba(0,0,0,.2); }



/* === Link Modal (safe) === */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:99999; }
.modal-backdrop.hidden{ display:none; }
.modal-card{ width:min(520px,92vw); background:rgba(20,20,30,.92); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-card h3{ margin:0 0 8px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.input-url{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; outline:none; }
.input-url:focus{ border-color: rgba(169,112,255,.75); box-shadow:0 0 0 3px rgba(169,112,255,.15); }
.btn.success{ background:#19c27d; color:#0b0f14; }
.btn.success:hover{ filter:brightness(1.05); }
body.modal-open{ overflow:hidden; }


.pill-channel{ display:inline-block; padding:.15rem .5rem; border:1px solid rgba(169,112,255,.4); border-radius:999px; background:rgba(169,112,255,.12); color:#cda8ff; }


/* === Purchase success overlay === */
#purchase-overlay{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter: blur(6px); }
#purchase-overlay.show{ display:flex; }
#purchase-overlay .card{ background:rgba(20,20,30,.96); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:22px 24px; max-width:560px; width:min(560px,92vw); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#purchase-overlay .title{ font-size:20px; margin-bottom:8px; }
#purchase-overlay .msg{ opacity:.92; margin-bottom:16px; }
#purchase-overlay .order{ font-weight:600; letter-spacing:.2px; }
body.modal-open{ overflow:hidden; }


.viewer-controls input[type=range]{ width: 280px; max-width: 90%; }
.viewer-controls .form-inline{ margin: 6px 0; }

.muted.small{ font-size: 12px; opacity: .85; display:block; }


/* === Scrollable lists for clarity === */
/* Admin > Vedi cancellati modal: constrain and scroll */
#modal-canceled .modal-content{ width:min(760px,94vw); max-height:80vh; display:flex; flex-direction:column; }
#modal-canceled #list-canceled{ flex:1 1 auto; max-height:60vh; overflow-y:auto; padding-right:8px; margin-top:8px; border-top:1px solid var(--border); }

/* Dashboard > I tuoi ordini: make the list scrollable */
#orders-card .orders-list{ max-height:360px; overflow-y:auto; padding-right:8px; }
@media (max-width: 600px){
  #orders-card .orders-list{ max-height:50vh; }
}



/* === Thin purple scrollbars for canceled modal & dashboard orders === */
/* Firefox */
#modal-canceled #list-canceled,
#orders-card .orders-list{
  scrollbar-width: thin;
  scrollbar-color: var(--accent2) rgba(255,255,255,0.06);
}

/* WebKit/Blink */
#modal-canceled #list-canceled::-webkit-scrollbar,
#orders-card .orders-list::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
#modal-canceled #list-canceled::-webkit-scrollbar-track,
#orders-card .orders-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
#modal-canceled #list-canceled::-webkit-scrollbar-thumb,
#orders-card .orders-list::-webkit-scrollbar-thumb{
  background: var(--accent2); /* Deep purple */
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.06); /* creates a slimmer look */
  background-clip: padding-box;
}
#modal-canceled #list-canceled::-webkit-scrollbar-thumb:hover,
#orders-card .orders-list::-webkit-scrollbar-thumb:hover{
  background: var(--accent); /* Lighter purple on hover */
}


/* === Thin purple scrollbar for chat messages === */
#modal-canceled #list-canceled,
#orders-card .orders-list,
.chat-messages{
  scrollbar-width: thin;
  scrollbar-color: var(--accent2) rgba(255,255,255,0.06);
}

#modal-canceled #list-canceled::-webkit-scrollbar,
#orders-card .orders-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
#modal-canceled #list-canceled::-webkit-scrollbar-track,
#orders-card .orders-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
#modal-canceled #list-canceled::-webkit-scrollbar-thumb,
#orders-card .orders-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb{
  background: var(--accent2);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.06);
  background-clip: padding-box;
}
#modal-canceled #list-canceled::-webkit-scrollbar-thumb:hover,
#orders-card .orders-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover{
  background: var(--accent);
}

/* highlight focused product */
.focus-highlight{ outline: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(169,112,255,.35); border-radius: 16px; }

/* Hours slider (violet) 1-24h */
.viewer-hours-slider { width: 100%; accent-color: #a970ff; }
.viewer-hours-slider::-webkit-slider-thumb { border-radius: 50%; }
.viewer-hours-slider::-moz-range-thumb { border-radius: 50%; }

/* --- Hours slider (violet 1..24h) --- */
.hours-slider-wrap { margin: 8px 0 4px; }
.hours-line { display:flex; align-items:center; gap:10px; }
.hours-label { font-size:14px; color: var(--muted); min-width: 40px; }
.hours-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #a970ff, #6e45e2);
  outline: none; opacity: 0.95; transition: opacity .2s;
}
.hours-slider:hover { opacity: 1; }
.hours-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #a970ff; border: 2px solid white; box-shadow: 0 0 0 3px rgba(169,112,255,.35);
  cursor: pointer;
}
.hours-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #a970ff; border: 2px solid white; box-shadow: 0 0 0 3px rgba(169,112,255,.35);
  cursor: pointer;
}
.hours-val { min-width: 36px; text-align:right; }

/* ---- Hours inline control ---- */
.hours-inline{ display:flex; align-items:center; gap:8px; }
.h-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px;
  background:#222; color:#fff; font-weight:700; font-size:12px; letter-spacing:0.5px;
}
.range-pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background: linear-gradient(90deg, #a970ff, #6e45e2);
  color:#fff; font-weight:600; font-size:12px;
}
.hours-number{ padding:6px 8px; border-radius:10px; border:1px solid #3a3a3a; background:#121212; color:#fff; }
.hours-number:focus{ outline:none; border-color:#a970ff; box-shadow:0 0 0 3px rgba(169,112,255,.25); }