/* BrandCraft v0.7 — توکن‌های طراحی. همه‌ی رنگ‌ها/فونت/گردی از تنظیمات سایت و ترجیح بازدیدکننده روی <html> ست می‌شوند. */
:root {
  --p0:#4f46e5; --a0:#14b8a6; --primary:#4f46e5; --accent:#14b8a6; --link:var(--primary); --heading:inherit;
  --bg:#eceef7; --fg:#1b1f33; --muted:#626889; --surface:#ffffff; --line:rgba(70,78,140,.18);
  --blur:20px; --sat:185%;
  --glass-rgb:255,255,255; --glass-a:.5; --glass-edge:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,1);
  --shadow:0 16px 40px -12px rgba(36,40,100,.26), 0 2px 8px rgba(36,40,100,.07);
  --shadow-lift:0 22px 50px -14px rgba(36,40,100,.32), 0 6px 14px rgba(36,40,100,.1);
  --r:1rem; --r-lg:calc(var(--r) * 1.35); --r-sm:calc(var(--r) * .65);
  --maxw:78rem; --sidew:15.5rem;
  --font:Vazirmatn,Vazir,Tahoma,"Segoe UI",system-ui,sans-serif;
}
html.dark {
  --bg:#0d0e14; --fg:#dde0e9; --muted:#9aa1b4; --surface:#1b1e27; --line:rgba(255,255,255,.1);
  --glass-rgb:30,33,44; --glass-a:.5; --glass-edge:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.14);
  --shadow:0 18px 44px -12px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35);
  --shadow-lift:0 26px 56px -14px rgba(0,0,0,.72), 0 6px 16px rgba(0,0,0,.4); color-scheme:dark;
}
@keyframes bc-in { from { opacity:0; transform:translateY(.6rem); } to { opacity:1; transform:none; } }
/* فقط روی عناصر ثابت (هدر/فوتر/ستون‌ها/کارت‌ها) انیمیشن ورود اجرا شود؛ روی drawer و lookpanel هرگز — چون transform آن‌ها برای باز/بسته‌شدن استفاده می‌شود و این انیمیشن با ست‌کردن transform:none آن‌ها را برای همیشه باز نگه می‌دارد. */
@media (prefers-reduced-motion:no-preference) { .hdr.glass, .ftr.glass, .side.glass, .card.glass { animation:bc-in .45s cubic-bezier(.16,1,.3,1) both; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
body { margin:0; font-family:var(--font); line-height:1.9; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; }
body.lock { overflow:hidden; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
h1,h2,h3 { color:var(--heading); line-height:1.5; }

/* پس‌زمینه‌ی نوری رنگی: بدون آن شیشه چیزی برای محو‌کردن ندارد */
.bgfx { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(44rem 34rem at 90% -6%, color-mix(in srgb,var(--p0) 34%,transparent), transparent 70%),
    radial-gradient(40rem 32rem at 2% 42%, color-mix(in srgb,var(--a0) 28%,transparent), transparent 70%),
    radial-gradient(38rem 30rem at 74% 110%, color-mix(in srgb,color-mix(in srgb,var(--p0),var(--a0)) 26%,transparent), transparent 70%); }
html.dark .bgfx { opacity:.55; } html.nofx .bgfx { display:none; }
.shell { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

/* شیشه: رنگ‌مایه‌ی گرادیانی + محوشدگی و اشباع + لبه‌ی روشن و برجسته‌ی بالا */
.glass {
  background:linear-gradient(145deg, rgba(var(--glass-rgb), calc(var(--glass-a) + .18)), rgba(var(--glass-rgb), var(--glass-a)) 55%, rgba(var(--glass-rgb), calc(var(--glass-a) - .06)) 100%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border:1px solid var(--glass-edge); box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(var(--glass-rgb),.04);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
html.noglass .glass { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass { background:var(--surface); } }
.grow { flex:1; }

/* قلتک (اسکرول‌بار) شیشه‌ای، هماهنگ با رنگ‌مایه‌ی شیشه‌ی تم */
* { scrollbar-width:thin; scrollbar-color:rgba(var(--glass-rgb), calc(var(--glass-a) + .25)) transparent; }
::-webkit-scrollbar { width:.7rem; height:.7rem; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, rgba(var(--glass-rgb), calc(var(--glass-a) + .32)), rgba(var(--glass-rgb), calc(var(--glass-a) + .08)));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border:1px solid var(--glass-edge); border-radius:999px; box-shadow:inset 0 1px 0 var(--glass-hi);
}
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg, rgba(var(--glass-rgb), calc(var(--glass-a) + .5)), rgba(var(--glass-rgb), calc(var(--glass-a) + .2))); }
::-webkit-scrollbar-corner { background:transparent; }
html.noglass { scrollbar-color:var(--line) transparent; }
html.noglass ::-webkit-scrollbar-thumb { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--line); border-color:transparent; box-shadow:none; }

/* ۴: هدر */
.hdr { position:sticky; top:.6rem; z-index:20; width:min(100% - 1.2rem, var(--maxw)); margin:.6rem auto 0; padding:.5rem .75rem; display:flex; align-items:center; gap:.55rem; border-radius:var(--r-lg); transition:box-shadow .25s ease, padding .25s ease, top .25s ease; }
.hdr.scrolled { box-shadow:var(--shadow-lift), inset 0 1px 0 var(--glass-hi); padding-top:.38rem; padding-bottom:.38rem; }
.hdr a:not(.btn), .ftr a, .drawer a:not(.btn), .side a:not(.btn) { color:inherit; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.15rem; }
.brand:hover { text-decoration:none; }
.logo { height:2.2rem; width:auto; border-radius:.6rem; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; color:inherit; cursor:pointer; transition:background .15s; }
.iconbtn:hover, .iconbtn[aria-expanded=true] { background:rgba(128,128,128,.16); } .ico { display:inline-flex; vertical-align:middle; }

/* دکمه‌ها */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.42rem 1.05rem; border:1px solid transparent; border-radius:var(--r-sm); color:#fff !important; font:inherit; font-weight:500; cursor:pointer; text-decoration:none !important;
  background:var(--btn-bg, linear-gradient(135deg,var(--p0),var(--a0))); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px color-mix(in srgb,var(--btn-c,var(--p0)) 55%,transparent); transition:transform .15s, box-shadow .15s, filter .15s; }
.btn:hover { transform:translateY(-1px); filter:brightness(1.06); } .btn:active { transform:none; }
.btn.btn-ghost { background:transparent; color:inherit !important; border-color:var(--line); box-shadow:none; filter:none; } .btn.btn-ghost:hover { background:rgba(128,128,128,.14); }
.btn.v-outline { background:transparent; color:var(--btn-c,var(--primary)) !important; border:2px solid var(--btn-c,var(--primary)); box-shadow:none; }
.btn.v-soft { background:color-mix(in srgb,var(--btn-c,var(--primary)) 16%,transparent); color:var(--btn-c,var(--primary)) !important; box-shadow:none; }
.btn.v-glass { background:rgba(var(--glass-rgb),var(--glass-a)); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat)); color:var(--fg) !important; border-color:var(--glass-edge); }
.btn.s-sm { padding:.2rem .7rem; font-size:.85rem; } .btn.s-lg { padding:.7rem 1.7rem; font-size:1.15rem; border-radius:var(--r); } .btn.full { width:100%; }
.btn.danger { background:#b94a48; }

/* ۱ ، ۲ ، ۳: ستون راست، محتوا، ستون چپ (در RTL ستون اول سمت راست است) */
.layout { flex:1; width:min(100% - 1.2rem, var(--maxw)); margin:.9rem auto; display:grid; gap:.9rem; align-items:start; }
.layout.c11 { grid-template-columns:var(--sidew) minmax(0,1fr) var(--sidew); }
.layout.c10 { grid-template-columns:var(--sidew) minmax(0,1fr); }
.layout.c01 { grid-template-columns:minmax(0,1fr) var(--sidew); }
.layout.c00 { grid-template-columns:minmax(0,1fr); }
main { min-width:0; }
.side { position:sticky; top:5.3rem; max-height:calc(100vh - 6.5rem); overflow:auto; padding:1rem; border-radius:var(--r-lg); }
.side h2, .side h3 { margin:.1em 0 .4em; font-size:1.05rem; }
.slinks { list-style:none; margin:.5rem 0 0; padding:0; } .slinks a { display:block; padding:.35rem .6rem; border-radius:var(--r-sm); } .slinks a:hover { background:rgba(128,128,128,.14); text-decoration:none; }

/* ۵: فوتر */
.ftr { width:min(100% - 1.2rem, var(--maxw)); margin:0 auto .8rem; padding:1.4rem 1.5rem 1rem; border-radius:var(--r-lg); font-size:.92rem; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.2rem; }
.ftr ul { list-style:none; margin:0; padding:0; } .copy { text-align:center; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); opacity:.85; }

.card { border-radius:var(--r); padding:1.2rem; } .center { text-align:center; padding:2.2rem 1.2rem; }
.card.glass:not(.stat) { transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.stack > * + * { margin-top:1.1rem; } .stack-s > * + * { margin-top:.6rem; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .grid3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.75rem; }
.input { width:100%; padding:.5rem .8rem; border-radius:var(--r-sm); border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 88%,transparent); color:inherit; font:inherit; transition:border-color .15s, box-shadow .15s; }
.input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 28%,transparent); }
.input.sm { width:7rem; } input[type=color] { width:2.6rem; height:2.2rem; padding:0; border:1px solid var(--line); border-radius:.5rem; background:none; cursor:pointer; }
input[type=range] { width:100%; accent-color:var(--primary); }
label.f { display:block; font-size:.85rem; color:var(--muted); } label.chk { display:flex; gap:.4rem; align-items:center; cursor:pointer; }
.err { color:#e5645f; } .ok { color:#3fae72; } small { opacity:.78; } .muted { color:var(--muted); }
h1.t { font-size:2.1rem; font-weight:800; margin:.2em 0; } h2.t { font-size:1.45rem; font-weight:700; margin:.2em 0; } hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
blockquote { margin:0; border-right:4px solid var(--accent); padding-right:1rem; font-style:italic; }
img,video { max-width:100%; border-radius:var(--r); } table { width:100%; border-collapse:collapse; } td,th { border:1px solid var(--line); padding:.5rem; text-align:right; }
.scroll { overflow-x:auto; } .pre { white-space:pre-line; margin:0; }
.blk { overflow:hidden; } .pagewrap { padding:1.5rem; border-radius:var(--r-lg); background-size:cover; background-position:center; }

/* پنل ظاهر (برای بازدیدکننده) */
.lookpanel { position:fixed; top:4.7rem; left:.6rem; z-index:45; width:min(21rem, 100vw - 1.2rem); max-height:calc(100vh - 6rem); overflow:auto; padding:1rem; border-radius:var(--r-lg); }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; padding:.25rem; border:1px solid var(--line); border-radius:var(--r-sm); }
.seg-b { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.3rem; border:0; border-radius:calc(var(--r-sm) - 2px); background:transparent; color:inherit; font:inherit; cursor:pointer; }
.seg-b.on { background:linear-gradient(135deg,var(--p0),var(--a0)); color:#fff; }
.swatches { display:flex; flex-wrap:wrap; gap:.5rem; }
.sw { width:2.2rem; height:2.2rem; border-radius:50%; border:2px solid var(--glass-edge); cursor:pointer; padding:0; transition:transform .15s; } .sw:hover { transform:scale(1.1); }
.sw[aria-pressed=true] { outline:2px solid var(--fg); outline-offset:2px; }

/* منوی کشویی */
.ovl { position:fixed; inset:0; z-index:40; background:rgba(8,10,16,.5); opacity:0; pointer-events:none; transition:opacity .25s; } .ovl.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:.6rem; bottom:.6rem; right:.6rem; z-index:50; width:min(20rem, 86vw); padding:1rem; overflow-y:auto; transform:translateX(110%); transition:transform .28s ease; border-radius:var(--r-lg); }
.drawer.open { transform:none; }
.mtree { list-style:none; margin:0; padding:0; } .mtree .mtree { padding-right:1rem; border-right:2px solid var(--line); margin-right:.4rem; }
.mrow { display:flex; align-items:center; } .mlink { flex:1; display:block; padding:.45rem .6rem; border-radius:var(--r-sm); } .mlink:hover { background:rgba(128,128,128,.14); text-decoration:none; }
.mtog { border:0; background:transparent; color:inherit; cursor:pointer; padding:.3rem; transition:transform .2s; } .mtog.open { transform:rotate(180deg); }

/* ورود */
.auth { display:grid; max-width:30rem; margin:1rem auto; border-radius:var(--r-lg); overflow:hidden; } .auth.withimg { grid-template-columns:1fr 1fr; max-width:56rem; }
.auth-img img { width:100%; height:100%; object-fit:cover; border-radius:0; display:block; } .authform { padding:1.7rem; align-self:center; }
.pw { position:relative; } .pw .input { padding-left:2.8rem; } .pw .iconbtn { position:absolute; left:.3rem; top:50%; transform:translateY(-50%); width:2rem; height:2rem; border:0; }

/* مدیریت */
.tabs { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1rem; padding:.3rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(var(--glass-rgb),.35); width:fit-content; max-width:100%; }
.tab { padding:.35rem 1rem; border-radius:var(--r-sm); border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; } .tab:hover { background:rgba(128,128,128,.14); }
.tab.on { background:linear-gradient(135deg,var(--p0),var(--a0)); color:#fff; }
.admin { display:grid; grid-template-columns:16rem 1fr; gap:1rem; } .item { display:block; width:100%; text-align:right; padding:.5rem; border:0; border-radius:var(--r-sm); background:transparent; color:inherit; font:inherit; cursor:pointer; } .item:hover,.item.on { background:rgba(128,128,128,.16); }
.block { border:1px solid var(--line); border-radius:var(--r); padding:.75rem; } details > summary { cursor:pointer; color:var(--muted); font-size:.9rem; }
/* ویرایشگر صفحه: پیش‌نمایش سمت چپ، فرم ویرایش سمت راست (در RTL ستون اول سمت راست است) */
.editorgrid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.preview-pane { position:sticky; top:5.3rem; max-height:calc(100vh - 6.5rem); overflow:auto; }
.resize-row input[type=range] { accent-color:var(--primary); }
@media (max-width:1100px) {
  .editorgrid { grid-template-columns:minmax(0,1fr); }
  .preview-pane { position:static; max-height:none; order:-1; }
}
.stat { text-align:center; padding:1rem; } .stat b { display:block; font-size:2rem; color:var(--primary); }
/* مربع‌های اطلاعاتی شناور (بلوک «cards») — شیشه‌ای، با هاور ظریف و لینک اختیاری */
.cardsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:1rem; }
.infosq { display:block; text-align:center; padding:1.4rem 1rem; color:inherit !important; text-decoration:none !important; cursor:default; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.infosq b { display:block; font-size:1.9rem; font-weight:800; color:var(--primary); line-height:1.2; margin-bottom:.3rem; letter-spacing:-.02em; }
.infosq span { color:var(--muted); font-size:.92rem; }
a.infosq { cursor:pointer; }
a.infosq:hover, a.infosq:focus-visible { transform:translateY(-.3rem) scale(1.015); box-shadow:var(--shadow-lift), inset 0 1px 0 var(--glass-hi); border-color:color-mix(in srgb,var(--primary) 45%,var(--glass-edge)); }
.infosq:active { transform:translateY(-.1rem) scale(1); }
/* برجسته‌سازی کارت‌های تعاملی عمومی (مانند دکمه‌ی CTA و کارت‌ها) */
/* قاب چند عکسی (بلوک «gallery») — چند عکس کنار هم در یک قاب شیشه‌ای، هرکدام با متن زیرش */
.gallery.card { padding:1rem; }
.galgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1rem; }
.galitem { margin:0; text-align:center; }
.galitem img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.galitem a:has(img) { display:block; } .galitem a:has(img):hover img, .galitem img:hover { transform:translateY(-.25rem) scale(1.02); box-shadow:var(--shadow-lift); }
.galitem figcaption, .galitem .galcap { display:block; margin-top:.5rem; font-size:.88rem; color:var(--muted); }
.galitem .galcap:hover { color:var(--primary); text-decoration:underline; }
.btn.cta { background:linear-gradient(135deg,var(--p0),var(--a0)); position:relative; overflow:hidden; }
.btn.cta::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-120%); transition:transform .6s ease; }
.btn.cta:hover::after { transform:translateX(120%); }
.thumb { max-height:5rem; border-radius:var(--r-sm); } .mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(7rem,1fr)); gap:.6rem; max-height:60vh; overflow:auto; }
.mitem { aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); cursor:pointer; padding:0; color:inherit; } .mitem img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.modal-ovl { position:fixed; inset:0; z-index:90; background:rgba(8,10,16,.6); display:flex; align-items:center; justify-content:center; padding:1rem; } .modal { width:min(46rem,100%); background:var(--surface); }

@media (max-width:980px) {
  .layout[class] { grid-template-columns:minmax(0,1fr); } .side { position:static; max-height:none; } .side-menu { display:none; }
}
@media (max-width:760px) { .admin,.grid2,.auth.withimg { grid-template-columns:1fr; } .auth-img { display:none; } .hide-sm { display:none !important; } .hdr { top:.3rem; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* ویترین (بلوک «showcase») — هر مورد یک کارت شیشه‌ای واحد: عکس بالا و متن زیرش، بدون خط و فاصله‌ی جداکننده */
.showcase { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem; }
.shcard { display:flex; flex-direction:column; padding:.55rem; overflow:hidden; text-align:center; color:inherit !important; text-decoration:none !important; cursor:default; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.shpic { display:block; width:100%; max-width:100%; aspect-ratio:1/1; object-fit:cover; border:0 !important; box-shadow:none !important; border-radius:calc(var(--r) - .25rem); }
.shtxt { padding:.85rem .5rem .55rem; }
.shcard .shtitle { display:block; font-size:1.45rem; font-weight:400; color:var(--primary); line-height:1.3; margin-bottom:.3rem; }
.shcard .shsub { display:block; color:var(--muted); font-size:.95rem; }
a.shcard { cursor:pointer; }
a.shcard:hover, a.shcard:focus-visible { transform:translateY(-.3rem) scale(1.015); box-shadow:var(--shadow-lift), inset 0 1px 0 var(--glass-hi); border-color:color-mix(in srgb,var(--primary) 45%,var(--glass-edge)); }
/* وقتی رنگ متن برای بلوک/هدر/فوتر/ستون تنظیم شود، همه‌ی متن‌های داخلش (عنوان، برچسب، لینک، زیرنویس…) همان رنگ را می‌گیرند */
.hasfg :is(h1,h2,h3,p,b,span,small,li,figcaption,blockquote,td,th,.galcap,a:not(.btn):not(:hover):not(:focus-visible)) { color:inherit; }
.hasbold :is(h1,h2,h3,p,b,span,small,li,figcaption,blockquote,td,th,.galcap,a:not(.btn)) { font-weight:800; }