/* تعریف ظاهر و چیدمان بخش پنل */
@font-face { font-family: Vazir; src: url('/fonts/Vazir.woff2') format('woff2'); font-display: swap; }
/* تعریف ظاهر و چیدمان بخش پنل */
@font-face { font-family: Vazir; src: url('/fonts/Vazir-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
/* تعریف ظاهر و چیدمان بخش پنل */
:root { --bg:#f5f6fa; --surface:#fff; --text:#202637; --muted:#7a8396; --line:#e8ebf2; --accent:#6658df; --soft:#eeebff; --green:#138c75; --red:#cf4865; --shadow:0 8px 36px #18213e06; color-scheme:light; }
/* تعریف ظاهر و چیدمان بخش پنل */
:root[data-theme=dark] { --bg:#12141c; --surface:#1b1e29; --text:#edf0f8; --muted:#969eb3; --line:#2c3040; --accent:#a59bff; --soft:#302a50; --green:#5bd6af; --red:#fb859c; --shadow:0 8px 36px #0002; color-scheme:dark; }
/* تعریف ظاهر و چیدمان بخش پنل */
* { box-sizing:border-box; }
/* تعریف ظاهر و چیدمان بخش پنل */
body { margin:0; font:14px/1.9 Vazir,Tahoma,sans-serif; background:var(--bg); color:var(--text); }
/* تعریف ظاهر و چیدمان بخش پنل */
button,input,select,textarea { font:inherit; }
/* تعریف ظاهر و چیدمان بخش پنل */
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
/* تعریف ظاهر و چیدمان بخش پنل */
button { cursor:pointer; border:0; border-radius:11px; padding:10px 17px; background:var(--accent); color:var(--surface); transition:opacity .15s,transform .15s; }
/* تعریف ظاهر و چیدمان بخش پنل */
button:hover { opacity:.86; }
/* تعریف ظاهر و چیدمان بخش پنل */
button:disabled { opacity:.5; cursor:wait; }
/* تعریف ظاهر و چیدمان بخش پنل */
button.secondary { background:var(--soft); color:var(--accent); }
/* تعریف ظاهر و چیدمان بخش پنل */
button.danger { background:transparent; color:var(--red); border:1px solid var(--line); }
/* تعریف ظاهر و چیدمان بخش پنل */
button.ghost { background:transparent; color:var(--muted); }
/* تعریف ظاهر و چیدمان بخش پنل */
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
/* تعریف ظاهر و چیدمان بخش پنل */
input,select,textarea { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:11px 13px; border-radius:10px; outline:none; }
/* تعریف ظاهر و چیدمان بخش پنل */
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
/* تعریف ظاهر و چیدمان بخش پنل */
textarea { min-height:130px; resize:vertical; }
/* تعریف ظاهر و چیدمان بخش پنل */
label { display:block; font-size:12px; margin:15px 0 6px; color:var(--muted); }
/* تعریف ظاهر و چیدمان بخش پنل */
h1,h2,h3,p { margin-top:0; }
/* تعریف ظاهر و چیدمان بخش پنل */
h1 { font-size:25px; letter-spacing:-.7px; margin-bottom:5px; }
/* تعریف ظاهر و چیدمان بخش پنل */
h2 { font-size:17px; }
/* تعریف ظاهر و چیدمان بخش پنل */
h3 { font-size:14px; }
/* تعریف ظاهر و چیدمان بخش پنل */
a { color:var(--accent); text-decoration:none; }
/* تعریف ظاهر و چیدمان بخش پنل */
.muted,small { color:var(--muted); }
/* تعریف ظاهر و چیدمان بخش پنل */
.layout { display:grid; grid-template-columns:242px minmax(0,1fr); min-height:100vh; }
/* تعریف ظاهر و چیدمان بخش پنل */
.sidebar { background:var(--surface); border-left:1px solid var(--line); padding:30px 20px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
/* تعریف ظاهر و چیدمان بخش پنل */
.brand { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:bold; padding:0 8px 30px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.logo { display:grid; place-items:center; width:43px; height:43px; background:var(--soft); color:var(--accent); border-radius:14px; font-size:24px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.brand small { display:block; font-size:10px; font-weight:normal; }
/* تعریف ظاهر و چیدمان بخش پنل */
.nav { display:flex; flex-direction:column; gap:7px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.nav button { text-align:right; background:transparent; color:var(--muted); padding:12px 16px; display:flex; gap:12px; align-items:center; }
/* تعریف ظاهر و چیدمان بخش پنل */
.nav button.active { background:var(--soft); color:var(--accent); font-weight:bold; }
/* تعریف ظاهر و چیدمان بخش پنل */
.nav span { width:20px; font-size:19px; text-align:center; }
/* تعریف ظاهر و چیدمان بخش پنل */
.sidebar footer { margin-top:auto; border-top:1px solid var(--line); padding-top:20px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.main { padding:30px 42px; max-width:1550px; width:100%; min-width:0; margin:0 auto; align-self:start; }
/* تعریف ظاهر و چیدمان بخش پنل */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; gap:12px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.topbar p { margin:0; font-size:12px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.toolbar { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
/* تعریف ظاهر و چیدمان بخش پنل */
.avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:var(--soft); font-weight:bold; }
/* تعریف ظاهر و چیدمان بخش پنل */
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:25px; box-shadow:var(--shadow); margin-bottom:20px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.stat { padding:22px; position:relative; }
/* تعریف ظاهر و چیدمان بخش پنل */
.stat .value { display:block; font-size:32px; line-height:1.6; font-weight:bold; margin-top:12px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.stat .icon { float:left; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--soft); color:var(--accent); }
/* تعریف ظاهر و چیدمان بخش پنل */
.grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.grid.equal { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
/* تعریف ظاهر و چیدمان بخش پنل */
.grid > *, .card, .sidebar, .nav { min-width:0; }
/* تعریف ظاهر و چیدمان بخش پنل */
.sectionhead { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.sectionhead h2 { margin:0; }
/* تعریف ظاهر و چیدمان بخش پنل */
.tablewrap { overflow:auto; }
/* تعریف ظاهر و چیدمان بخش پنل */
table { border-collapse:collapse; width:100%; white-space:nowrap; text-align:right; }
/* تعریف ظاهر و چیدمان بخش پنل */
th { font-size:11px; color:var(--muted); font-weight:normal; background:var(--bg); }
/* تعریف ظاهر و چیدمان بخش پنل */
th,td { padding:13px; border-bottom:1px solid var(--line); }
/* تعریف ظاهر و چیدمان بخش پنل */
td { font-size:12px; }
/* تعریف ظاهر و چیدمان بخش پنل */
td button { padding:6px 11px; font-size:11px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.badge { background:var(--soft); color:var(--accent); padding:3px 9px; border-radius:7px; font-size:11px; display:inline-block; }
/* تعریف ظاهر و چیدمان بخش پنل */
.badge.green { background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green); }
/* تعریف ظاهر و چیدمان بخش پنل */
.badge.red { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); }
/* تعریف ظاهر و چیدمان بخش پنل */
.empty { padding:35px 15px; text-align:center; color:var(--muted); }
/* تعریف ظاهر و چیدمان بخش پنل */
.empty strong { color:var(--text); display:block; margin:10px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.formrow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.actions { margin-top:22px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* تعریف ظاهر و چیدمان بخش پنل */
.help { color:var(--muted); font-size:11px; margin:9px 0 0; }
/* تعریف ظاهر و چیدمان بخش پنل */
.notice { border-right:3px solid var(--accent); background:var(--soft); padding:14px 18px; border-radius:8px; font-size:12px; margin-bottom:20px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.preview { background:var(--bg); border:1px dashed var(--line); border-radius:14px; padding:24px; min-height:240px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.bubble { white-space:pre-wrap; overflow-wrap:anywhere; border-radius:14px 14px 3px 14px; background:var(--soft); padding:13px 17px; margin:8px 0; max-width:85%; }
/* تعریف ظاهر و چیدمان بخش پنل */
.bubble.out { background:var(--bg); border:1px solid var(--line); margin-right:auto; border-radius:14px 14px 14px 3px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.bubble p { margin-bottom:5px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.bubble small { font-size:10px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.chat { height:390px; overflow:auto; padding:8px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.chat img,.chat video { max-width:100%; max-height:220px; border-radius:8px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.userslist { max-height:610px; overflow:auto; }
/* تعریف ظاهر و چیدمان بخش پنل */
.userrow { width:100%; display:flex; justify-content:space-between; text-align:right; padding:14px; margin:5px 0; color:var(--text); background:var(--bg); }
/* تعریف ظاهر و چیدمان بخش پنل */
.userrow.selected { background:var(--soft); color:var(--accent); }
/* تعریف ظاهر و چیدمان بخش پنل */
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.price { font-size:26px; font-weight:bold; margin:20px 0; }
/* تعریف ظاهر و چیدمان بخش پنل */
.login { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginart { padding:80px; background:var(--soft); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginart h1 { font-size:42px; max-width:440px; line-height:1.7; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginart p { max-width:350px; color:var(--muted); }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginart .logo { width:75px; height:75px; background:var(--surface); font-size:40px; margin-bottom:40px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginbox { display:flex; align-items:center; justify-content:center; padding:40px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginbox form { width:100%; max-width:340px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginbox button[type=submit] { width:100%; margin-top:24px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.loginbox h2 { font-size:26px; }
/* تعریف ظاهر و چیدمان بخش پنل */
.themefloat { position:fixed; left:25px; top:22px; }
/* تعریف ظاهر و چیدمان بخش پنل */
#toast { position:fixed; left:25px; bottom:25px; z-index:99; background:var(--text); color:var(--surface); padding:12px 22px; border-radius:12px; max-width:90vw; box-shadow:0 8px 35px #0002; display:none; }
/* تعریف ظاهر و چیدمان بخش پنل */
#toast.show { display:block; }
/* تعریف ظاهر و چیدمان بخش پنل */
dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:20px; padding:28px; width: min(520px,92vw); max-height:90vh; overflow:auto; }
/* تعریف ظاهر و چیدمان بخش پنل */
dialog::backdrop { background:#10142180; backdrop-filter:blur(4px); }
/* تعریف ظاهر و چیدمان بخش پنل */
.ltr { direction:ltr; text-align:left; }
/* تعریف ظاهر و چیدمان بخش پنل */
@media(max-width:1100px) { .stats,.plans { grid-template-columns:1fr 1fr; } .main { padding:25px; } .layout { grid-template-columns:205px minmax(0,1fr); } .grid { grid-template-columns:1fr; } }
/* تعریف ظاهر و چیدمان بخش پنل */
@media(max-width:700px) { .layout { display:block; } .sidebar { position:relative; height:auto; padding:15px; border-bottom:1px solid var(--line); } .brand { padding-bottom:12px; } .nav { flex-direction:row; overflow:auto; } .nav button { white-space:nowrap; padding:8px 12px; font-size:12px; } .sidebar footer { display:none; } .main { padding:20px 15px; } .topbar { margin-bottom:22px; } h1 { font-size:20px; } .stats { gap:10px; } .stat { padding:16px; } .stat .value { font-size:27px; } .card { padding:18px; } .grid.equal,.formrow { grid-template-columns:1fr; } .login { display:block; } .loginart { display:none; } .loginbox { min-height:100vh; padding:30px; } .plans { gap:10px; } }

/* نمایش پیشرفت آپلود و امکان لغو روی موبایل و دسکتاپ */
.upload-progress{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;font-size:12px;color:var(--muted);margin-top:10px}
/* نمایش نوار پیشرفت بدون خروج از عرض فرم */
.upload-progress progress{width:100%;height:8px;accent-color:var(--accent)}

/* گروه انتخاب با کارت‌های نرم و سازگار با پوسته */
.choice-group{border:0;padding:0;margin:22px 0;min-width:0}.choice-group legend{font-weight:700;margin-bottom:12px}.choice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;border:1px solid var(--line);background:var(--bg);border-radius:20px}.choice-card{position:relative;display:flex;align-items:flex-start;gap:9px;margin:0!important;padding:14px 10px;border:1px solid transparent;border-radius:15px;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}.choice-card:has(input:checked){background:var(--surface);border-color:var(--accent);box-shadow:0 3px 12px #0000000a}.choice-card input{width:17px;height:17px;flex:0 0 17px;margin:5px 0 0;padding:0;accent-color:var(--accent)}.choice-card strong{display:block;font-size:12px}.choice-card small{display:block;font-size:10px;color:var(--muted);line-height:1.8;margin-top:4px}.choice-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}.source-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
/* جست‌وجو و نمایش کاربران انتخاب‌شده */
.recipient-results{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:14px;margin:12px 0}.recipient-option{display:flex;gap:12px;align-items:center;padding:10px 14px;margin:0;border-bottom:1px solid var(--line);cursor:pointer}.recipient-option input{width:18px;height:18px;accent-color:var(--accent)}.recipient-option small{display:block;color:var(--muted)}.recipient-tags{display:flex;flex-wrap:wrap;gap:6px}.recipient-tags button{font-size:11px;padding:5px 10px}.actions #recipient-search{flex:1;min-width:120px}.choice-card:has(input:disabled){opacity:.65;cursor:wait}
/* حفظ خوانایی گزینه‌ها روی موبایل و پنهان‌سازی بخش غیرفعال */
[hidden]{display:none!important}@media(max-width:600px){.choice-cards{grid-template-columns:1fr}.choice-card{padding:10px 12px}.choice-card strong{font-size:13px}.choice-card small{font-size:11px}.source-cards{grid-template-columns:1fr}}