/* =========================================================
   ANC Shop — UI v2 | شیک، مرتب، سبک
   ========================================================= */
@font-face{
  font-family:"Vazirmatn";
  src:url("/static/Vazirmatn-Regular.ttf") format("truetype");
  font-display:swap;
}
:root{
  --bg1:#070d1a; --bg2:#0b1220;
  --card:rgba(15,23,42,.9);
  --line:#1e293b; --line2:#334155;
  --text:#e5e7eb; --muted:#94a3b8;
  --brand:#38bdf8; --brand2:#818cf8;
  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --grad:linear-gradient(135deg,var(--brand),var(--brand2));
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Vazirmatn",Tahoma,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(56,189,248,.35);}

/* ---------- پس‌زمینه متحرک (سبک و GPU) ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(600px 320px at 18% 18%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(520px 280px at 82% 28%, rgba(129,140,248,.12), transparent 60%),
    radial-gradient(700px 360px at 50% 85%, rgba(34,197,94,.07), transparent 60%);
  animation:bgmove 16s ease-in-out infinite alternate;
}
@keyframes bgmove{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-28px,18px,0) scale(1.06);}
  100%{transform:translate3d(22px,-14px,0) scale(1);}
}
body::after{
  content:""; position:fixed; left:0; right:0; top:-640px; bottom:0;
  z-index:-1; pointer-events:none; opacity:.4; will-change:transform;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.25), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,.22), transparent),
    radial-gradient(2px 2px at 90% 85%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,.2), transparent);
  background-size:640px 640px; background-repeat:repeat;
  animation:stars 70s linear infinite;
}
@keyframes stars{ from{transform:translate3d(0,0,0);} to{transform:translate3d(0,640px,0);} }

/* ---------- هدر: تک‌خطی و اسکرول‌شونده ---------- */
header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:4px;
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(2,6,23,.8);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
header a{
  color:var(--muted); text-decoration:none; font-size:13.5px;
  padding:8px 13px; border-radius:999px; flex:0 0 auto;
  transition:background .2s ease, color .2s ease;
}
header a:hover{color:var(--text); background:rgba(56,189,248,.12);}
header a:active{transform:scale(.96);}
.brand{
  font-weight:800; font-size:17px; letter-spacing:.5px;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--brand);
  margin-inline-end:10px;
}

/* ---------- چیدمان ---------- */
main{max-width:1080px; margin:0 auto; padding:20px 16px calc(30px + env(safe-area-inset-bottom));}
h1{font-size:21px; font-weight:800; margin:14px 0 12px; display:flex; align-items:center; gap:10px;}
h1::before{content:""; width:5px; height:24px; border-radius:4px; background:var(--grad); flex:0 0 auto;}
h2{font-size:17px; font-weight:700; margin:24px 0 10px;}
h3{font-size:15px; margin:0 0 8px; font-weight:700;}

.card,.box{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin:12px 0;
  box-shadow:var(--shadow);
}
.card{transition:transform .25s ease, border-color .25s ease;}
.card:hover{transform:translateY(-4px); border-color:var(--line2);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.grid .card{margin:0; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px;}
@media (max-width:520px){ .grid{grid-template-columns:1fr 1fr; gap:10px;} .grid .card{padding:12px;} }
@media (max-width:380px){ .grid{grid-template-columns:1fr;} }

/* ---------- کارت محصول ---------- */
.prod h3{margin:0; font-size:15px;}
.price-tag{
  font-size:17px; font-weight:800; color:var(--brand);
  background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25);
  padding:6px 16px; border-radius:999px;
}
.price-tag span{font-size:11px; color:var(--muted); font-weight:400;}

/* ---------- دکمه‌ها ---------- */
button,.btn{
  display:inline-block; border:none; cursor:pointer;
  padding:10px 20px; border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700;
  color:#04121f; background:var(--grad);
  box-shadow:0 8px 22px rgba(56,189,248,.25);
  transition:transform .15s ease, filter .2s ease;
  text-decoration:none; text-align:center;
}
button:hover,.btn:hover{filter:brightness(1.12);}
button:active,.btn:active{transform:scale(.96);}
button:disabled{filter:grayscale(.7); opacity:.5; box-shadow:none; cursor:not-allowed;}

/* ---------- فرم‌ها ---------- */
label{display:block; margin:12px 0; font-size:13.5px; color:var(--muted);}
input,select,textarea{
  display:block; width:100%; max-width:460px; margin-top:6px;
  padding:11px 14px; font-size:16px; font-family:inherit;
  color:var(--text); background:#0a1120;
  border:1px solid var(--line2); border-radius:12px;
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(56,189,248,.2);
}
input[type=file]{padding:9px;}
input[type=radio],input[type=checkbox]{display:inline-block; width:auto; margin-inline-end:6px; accent-color:var(--brand);}

/* ---------- جدول ---------- */
.tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:14px;
  margin:12px 0; background:var(--card);
}
table{width:100%; border-collapse:collapse; min-width:560px;}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; font-size:13px;}
th{color:var(--muted); font-size:12px; background:rgba(2,6,23,.5);}
tr:last-child td{border-bottom:none;}

/* ---------- pre و کپی ---------- */
pre{
  background:#020617; color:#d1d5db; padding:12px;
  border-radius:12px; border:1px solid var(--line);
  overflow:auto; white-space:pre-wrap; word-break:break-word;
  font-size:12.5px; direction:ltr; text-align:left;
  -webkit-overflow-scrolling:touch;
}
.prewrap{position:relative; margin:10px 0;}
.prewrap pre{margin:0;}
.copybtn{
  position:absolute; top:8px; right:8px;
  padding:5px 12px; font-size:12px; border-radius:8px;
  background:rgba(56,189,248,.15); color:var(--brand); box-shadow:none;
}
.copybtn:hover{background:rgba(56,189,248,.28);}

/* ---------- توست ---------- */
#toasts{
  position:fixed; top:calc(12px + env(safe-area-inset-top)); right:0; left:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:200; pointer-events:none; padding:0 16px;
}
.flash{
  pointer-events:auto; max-width:560px; width:100%;
  background:var(--grad); color:#04121f; font-weight:700;
  padding:12px 16px; border-radius:14px; box-shadow:var(--shadow);
  font-size:14px; white-space:pre-line;
  animation:toastIn .45s cubic-bezier(.2,.9,.3,1.2) both;
}
.flash.out{animation:toastOut .4s ease both;}
@keyframes toastIn{from{opacity:0; transform:translateY(-16px) scale(.96);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(-12px) scale(.97);}}

/* ---------- انیمیشن ورود ---------- */
.reveal{opacity:0; transform:translateY(18px);}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease;}

/* ---------- خوش‌آمدگویی ---------- */
#welcomeOverlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fadeInOv .3s ease both;
}
.welcomeCard{
  text-align:center; background:var(--card); border:1px solid var(--line2);
  padding:26px 46px; border-radius:22px; box-shadow:var(--shadow);
  animation:popIn .55s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes popIn{from{opacity:0; transform:scale(.8) translateY(12px);} to{opacity:1; transform:none;}}
@keyframes fadeInOv{from{opacity:0;} to{opacity:1;}}
#welcomeOverlay.hide{opacity:0; transition:opacity .5s ease; pointer-events:none;}

/* ---------- متفرقه ---------- */
details summary{cursor:pointer; color:var(--brand); font-size:13px; padding:4px 0;}
.small{font-size:12px; color:var(--muted);}
a{color:var(--brand);}
footer a{margin:0 8px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}