/* =====================================================================
   کارتابل کارکنان — طراحی SPA (الهام‌گرفته از داشبوردهای مدرن: کارت‌های گرد، رنگ بنفش، کارت تیره، یادداشت زرد)
   فونت: استعداد (نسخه متغیر با ارقام فارسی)
   ===================================================================== */
@font-face {
    font-family: 'Estedad';
    src: url('/fonts/estedad-fd-var.woff2') format('woff2-variations'), url('/fonts/estedad-fd-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg: #e9ebf1;
    --canvas: #f5f6fb;
    --surface: #fff;
    --text: #1b1d29;
    --muted: #7b8095;
    --line: #eceef5;
    --primary: #6a5ae0;
    --primary-d: #5646c9;
    --primary-soft: #efedfd;
    --dark: #111216;
    --yellow: #fdd35c;
    --yellow-soft: #fff0bd;
    --green: #1fb86a;
    --orange: #f08a00;
    --red: #e5484d;
    --blue: #2f8cff;
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --shadow: 0 1px 2px rgba(20, 22, 40, .04), 0 6px 20px rgba(20, 22, 40, .04);
    --side-w: 218px;
    --dock-w: 318px;
    --fs: 13px;

    /* نام‌های قدیمی که داخل Viewها استفاده شده‌اند */
    --st-primary: var(--primary);
    --st-primary-dark: var(--primary-d);
    --st-danger: var(--red);
    --st-warn: #b36b00;
    --st-muted: var(--muted);
    --st-border: var(--line);
    --st-text: var(--text);
    --st-bg: var(--canvas);
}

* { box-sizing: border-box; }
html { font-size: var(--fs); }

body {
    margin: 0;
    font-family: 'Estedad', Tahoma, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; font-size: 1rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-d); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.5; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px dashed var(--line); margin: 16px 0; }
small { font-size: .85em; }
code { background: var(--canvas); padding: 1px 6px; border-radius: 6px; font-size: .92em; direction: ltr; unicode-bidi: embed; }
.ltr { direction: ltr; text-align: left; }

svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================ پوسته برنامه ============================ */
.app {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr) 0;
    min-height: calc(100vh - 28px);
    margin: 14px;
    background: var(--surface);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden; overflow: clip; /* clip تا sticky پنل چت کار کند */
    transition: grid-template-columns .25s ease;
}
.app.dock-open { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--dock-w); }

/* ----- نوار کناری ----- */
.st-side {
    display: flex; flex-direction: column; gap: 4px;
    padding: 22px 14px 16px;
    background: var(--surface);
    min-height: 100%;
    position: sticky; top: 0; align-self: start; height: calc(100vh - 28px); overflow-y: auto;
}
.st-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; color: var(--text); font-weight: 800; font-size: 1.2rem; }
.st-brand:hover { color: var(--text); }
.st-logo { width: 34px; height: 34px; border-radius: 12px; background: var(--primary); display: grid; place-items: center; color: #fff; }
.st-logo.img, .lb-mark.img { background: #fff; padding: 2px; box-shadow: 0 1px 6px rgba(120, 30, 40, .15); }
.st-logo.img img, .lb-mark.img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.st-logo svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
.st-brand small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); margin-top: -4px; }
.st-nav-title { font-size: .72rem; color: var(--muted); letter-spacing: .3px; padding: 14px 10px 4px; }
.st-nav a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 13px;
    color: #343848; font-weight: 500;
    transition: background .15s, color .15s;
}
.st-nav a:hover { background: var(--canvas); color: var(--text); }
.st-nav a.active { background: var(--primary-soft); color: var(--primary-d); font-weight: 700; }
.st-nav a .st-count { margin-inline-start: auto; }
.st-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.st-side-foot a, .st-side-foot button.st-navbtn {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 12px; border-radius: 13px; border: 0; background: none; cursor: pointer; color: #343848; font-weight: 500; text-align: right;
}
.st-side-foot a:hover, .st-side-foot button.st-navbtn:hover { background: var(--canvas); }
.st-side-foot .logout { color: var(--red); }
.st-side-foot form { margin: 0; }

/* ----- بخش میانی ----- */
.st-center { background: var(--canvas); min-width: 0; display: flex; flex-direction: column; border-radius: 24px 0 0 24px; }
.st-top {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px 4px;
}
.st-iconbtn.st-menu-btn { display: none; }
.st-search { flex: 1; max-width: 560px; position: relative; margin: 0; }
.st-search input {
    width: 100%; height: 42px; padding: 0 44px 0 16px;
    border: 1px solid var(--line); background: var(--surface); border-radius: 99px; color: var(--text);
}
.st-search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.st-search .ic { position: absolute; inset-inline-start: 16px; top: 12px; color: var(--muted); }
.st-top-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.st-iconbtn {
    position: relative; width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line); color: var(--text);
    display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.st-iconbtn:hover { background: var(--primary-soft); color: var(--primary-d); }
.st-iconbtn .st-count { position: absolute; top: -4px; inset-inline-start: -4px; margin: 0; }
.st-user-chip { display: flex; align-items: center; gap: 10px; padding-inline-start: 12px; border-inline-start: 1px solid #d9dcea; margin-inline-start: 4px; }
.st-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #b7aef7, var(--primary)); color: #fff; font-weight: 700;
    display: grid; place-items: center; font-size: .95rem;
}
.st-user-chip b { display: block; font-size: .95rem; line-height: 1.3; }
.st-user-chip small { color: var(--muted); display: block; font-size: .75rem; line-height: 1.3; }
.st-user-chip a { color: inherit; }

.st-page { padding: 14px 24px 28px; min-width: 0; flex: 1; }
.st-page.loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.st-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: right; z-index: 999; transition: transform .3s; }
.st-progress.on { transform: scaleX(.75); }
.st-progress.done { transform: scaleX(1); opacity: 0; transition: transform .15s, opacity .3s .15s; }

/* ----- پنل چت‌روم (همیشه در دسترس) ----- */
.st-dock {
    background: var(--surface); overflow: hidden; min-width: 0;
    display: flex; flex-direction: column;
    border-inline-end: 1px solid var(--line);
    height: calc(100vh - 28px); height: calc(100dvh - 28px); position: sticky; top: 14px; align-self: start;
}
.app:not(.dock-open) .st-dock { visibility: hidden; }
.st-dock-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; }
.st-dock-head h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.st-dock-head select {
    height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--canvas); max-width: 150px;
}
.st-dock-head select[hidden], .st-nav a[hidden], .st-dock-people[hidden] { display: none; }
.st-dock-tabs { display: flex; gap: 4px; margin: 0 14px 6px; padding: 3px; background: var(--bg, #f4f4fb); border-radius: 12px; }
.st-dock-tabs button { flex: 1; border: 0; background: transparent; padding: 7px 8px; border-radius: 9px; font: inherit; font-weight: 600; color: var(--muted, #6b7280); cursor: pointer; }
.st-dock-tabs button.on { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(60, 50, 120, .12); }
.st-dock-people { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 14px; }
.st-dock-people input[type=search] { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; background: #fff; box-sizing: border-box; }
.st-dock-plist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.st-person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 0; background: transparent; padding: 8px; border-radius: 12px; cursor: pointer; font: inherit; }
.st-person:hover, .st-person:focus-visible { background: var(--bg, #f4f4fb); outline: none; }
.st-person-av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.st-person-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.st-person-tx b { font-size: .9rem; }
.st-person-tx small { color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dock.show-people .st-dock-msgs, .st-dock.show-people .st-dock-form, .st-dock.show-people .st-dock-err { display: none; }
.st-dock-msgs { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.st-dock-msgs .st-chat-msg { max-width: 88%; }
.st-dock-form { display: flex; gap: 8px; padding: 10px 14px 14px; align-items: flex-end; }
.st-dock-form textarea {
    flex: 1; resize: none; max-height: 110px; min-height: 42px; padding: 10px 14px; border: 1px solid var(--line);
    background: var(--canvas); border-radius: 22px; line-height: 1.6;
}
.st-dock-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; background: #fff; }
.st-dock-form button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.st-dock-form button:disabled { opacity: .5; }
.st-dock-err { color: var(--red); font-size: .8rem; padding: 0 16px 6px; min-height: 0; }
.st-dock-fab {
    position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 40;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(106, 90, 224, .4); display: none; place-items: center;
}
.st-dock-fab .st-count { position: absolute; top: -4px; inset-inline-start: -4px; }

/* ----- صفحه‌های بدون پوسته (ورود/تغییر رمز) ----- */
body.bare { display: grid; place-items: start center; min-height: 100vh; padding: 40px 16px; background: var(--bg); }
.st-bare { width: 100%; max-width: 440px; }
.st-bare-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-weight: 800; font-size: 1.25rem; }

/* ============================ صفحه ورود ============================ */
body.login {
    background: radial-gradient(900px 500px at 85% -10%, #ffd9d4 0%, transparent 60%), radial-gradient(800px 500px at 0% 110%, #ffe1cf 0%, transparent 60%), #ffe9e4;
    display: grid; place-items: center; min-height: 100vh; padding: 24px;
}
.login-main { width: min(1040px, 100%); }
.login-card {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px;
    background: #fff; border-radius: 30px; padding: 22px; box-shadow: 0 30px 80px rgba(224, 110, 110, .2);
}
.login-art { position: relative; background: #ffe4dd; border-radius: 24px; min-height: 540px; overflow: hidden; display: grid; place-items: center; }
.login-svg { width: min(100%, 420px); height: auto; display: block; }
.login-brand { position: absolute; top: 20px; inset-inline-start: 22px; z-index: 1; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.2rem; color: #d63b4a; }
.login-brand b { color: #d63b4a; }
.login-brand .lb-mark { width: 30px; height: 30px; border-radius: 10px; background: #ff7b7b; display: grid; place-items: center; }
.login-brand .lb-mark svg { width: 17px; height: 17px; fill: #fff; }
.login-side { padding: 26px 34px 20px; display: flex; flex-direction: column; justify-content: center; max-width: 460px; width: 100%; margin-inline: auto; }
.login-side h1 { font-size: 2rem; font-weight: 800; text-align: center; margin: 0 0 4px; color: #131626; }
.login-sub { text-align: center; color: var(--muted); margin: 0 0 20px; }
.login-close {
    position: absolute; top: 22px; inset-inline-end: 26px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: #131626;
}
.login-close:hover { background: #f5f1f1; color: #131626; }
.login-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.seg { display: flex; background: #f4f5fa; border-radius: 99px; padding: 4px; margin-bottom: 8px; }
.seg button { flex: 1; height: 36px; border: 0; background: transparent; border-radius: 99px; cursor: pointer; color: #5a5f78; font-weight: 600; }
.seg button.active { background: #fff; color: #131626; box-shadow: 0 1px 6px rgba(20, 22, 40, .1); }
.login-side label { display: block; margin: 16px 0 6px; font-weight: 700; color: #131626; }
.fld {
    display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; background: #fff;
    border: 1.5px solid #d9dbe8; border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.fld:focus-within { border-color: #f0a13c; box-shadow: 0 0 0 4px rgba(240, 161, 60, .15); }
.fld > svg { width: 20px; height: 20px; fill: none; stroke: #4a4f66; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 100%; color: var(--text); padding: 0; border-inline-start: 1px solid #d9dbe8; padding-inline-start: 12px; }
.fld input.otp { letter-spacing: 6px; font-size: 1.2rem; text-align: center; padding-inline-start: 0; border: 0; }
.fld .eye { border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; color: #4a4f66; }
.fld .eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.login-btn {
    width: 100%; height: 50px; margin-top: 24px; border: 0; border-radius: 12px; cursor: pointer;
    background: #ff7b7b; color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 8px 22px rgba(255, 123, 123, .35);
    transition: background .15s, transform .05s;
}
.login-btn:hover { background: #f26565; }
.login-btn:active { transform: translateY(1px); }
.login-note { text-align: center; color: var(--muted); font-size: .85rem; margin: 14px 0 0; }
.login-note a { color: #c9791a; text-decoration: underline; }
.login-foot { text-align: center; color: #131626; font-size: .88rem; margin: 26px 0 0; }
@media (max-width: 860px) {
    body.login { padding: 12px; place-items: start center; }
    .login-card { grid-template-columns: minmax(0, 1fr); padding: 14px; border-radius: 24px; gap: 8px; }
    .login-art { min-height: 0; height: 200px; align-items: end; }
    .login-svg { width: auto; height: 168px; margin-inline-start: 18%; }
    .login-brand { font-size: .95rem; top: 14px; }
    .login-side { padding: 14px 8px 8px; }
    .login-side h1 { font-size: 1.6rem; }
}

/* ============================ کارت و اجزا ============================ */
.st-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.st-card > h2:first-child, .st-card > h3:first-child { margin-top: 0; }
.st-narrow { max-width: 440px; margin-inline: auto; }
.st-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.st-muted { color: var(--muted); font-size: .88rem; }
.st-pre { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }

.st-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.st-toolbar h2 { font-size: 1.35rem; }
.st-toolbar form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.st-toolbar .grow, .grow { flex: 1; min-width: 0; }

/* دکمه‌ها (گِرد، مثل «Join Now») */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 20px; border: 0; border-radius: 99px; cursor: pointer;
    background: var(--primary); color: #fff; font-weight: 600; white-space: nowrap;
    transition: background .15s, transform .05s;
}
.st-btn:hover { background: var(--primary-d); color: #fff; }
.st-btn:active { transform: translateY(1px); }
.st-btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.st-btn.secondary:hover { background: var(--primary-soft); color: var(--primary-d); }
.st-btn.danger { background: var(--red); }
.st-btn.danger:hover { background: #c93a3f; }
.st-btn.dark { background: var(--dark); }
.st-btn.dark:hover { background: #2a2c36; }
.st-btn.small { height: 30px; padding: 0 14px; font-size: .92rem; }
.st-btn:disabled { opacity: .55; cursor: default; }
.st-linkbtn { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0; font: inherit; }
.st-linkbtn:hover { color: var(--primary-d); text-decoration: underline; }
.st-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.st-actions form { margin: 0; }

/* فرم‌ها */
.st-form label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: .92rem; }
.st-form input[type=text], .st-form input[type=password], .st-form input[type=tel], .st-form input[type=url], .st-form input[type=number],
.st-form input[type=file], .st-form select, .st-form textarea,
.st-inline-form input[type=text], .st-inline-form input[type=number], .st-inline-form select, .st-toolbar input, .st-toolbar select,
.st-cat-form input[type=text] {
    width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text);
}
.st-form select[multiple] { height: auto; padding: 8px; }
.st-form textarea { height: auto; min-height: 110px; padding: 10px 14px; resize: vertical; line-height: 1.7; }
.st-form input[type=file] { padding: 7px 10px; height: auto; background: var(--canvas); }
.st-form input:focus, .st-form select:focus, .st-form textarea:focus, .st-inline-form input:focus, .st-inline-form select:focus,
.st-toolbar input:focus, .st-toolbar select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.st-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.st-inline-form input[type=text], .st-inline-form input[type=number], .st-inline-form select, .st-toolbar input, .st-toolbar select { width: auto; height: 36px; }
.st-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.st-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.st-check label { margin: 0; font-weight: 400; }

.st-alert { padding: 10px 16px; border-radius: var(--r-md); margin-bottom: 14px; }
.st-alert.error { background: #fdecec; color: #b3262c; }
.st-alert.info { background: var(--primary-soft); color: var(--primary-d); }

/* جدول‌ها */
.st-table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.st-table { width: 100%; border-collapse: collapse; background: transparent; }
.st-table th { padding: 11px 14px; text-align: right; font-size: .82rem; font-weight: 600; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line); white-space: nowrap; }
.st-table td { padding: 11px 14px; text-align: right; border-bottom: 1px dashed var(--line); vertical-align: top; }
.st-table tr:last-child td { border-bottom: 0; }
.st-table tbody tr:hover { background: #fafaff; }
.st-card .st-table-wrap { box-shadow: none; border: 0; }

/* برچسب‌ها و شمارنده */
.st-badge { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: .78rem; background: #eef0f6; color: #4b5068; white-space: nowrap; font-weight: 500; }
.st-badge.New { background: #e3efff; color: #1f6fe0; }
.st-badge.InProgress { background: #fff1d1; color: #b36b00; }
.st-badge.WaitingRequester { background: #ffe4d4; color: #b4430f; }
.st-badge.Resolved { background: #dff6ea; color: #14814a; }
.st-badge.Closed { background: #eef0f6; color: var(--muted); }
.st-badge.Urgent { background: #fde0e1; color: #c0282e; }
.st-badge.High { background: #fff1d1; color: #b36b00; }
.st-badge.off { background: #eef0f6; color: var(--muted); }
.st-count { display: inline-block; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; text-align: center; line-height: 19px; font-weight: 600; }
.st-count[hidden] { display: none; }
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c5c9d8; }
.st-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(31, 184, 106, .18); }

/* تب‌های گِرد */
.st-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.st-tabs-scroll { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: thin; }
.st-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: #454a60; white-space: nowrap; font-weight: 500; }
.st-tab:hover { background: var(--primary-soft); color: var(--primary-d); }
.st-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.st-tab.active .st-count { background: rgba(255, 255, 255, .3); }

.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.st-list li:last-child { border-bottom: 0; }
.st-unread { background: var(--primary-soft); border-radius: 10px; padding-inline: 10px !important; }

/* ============================ داشبورد ============================ */
.dash { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { .dash { grid-template-columns: minmax(0, 1fr) 300px; } }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-main .st-card, .dash-side .st-card { margin: 0; }

.hero {
    position: relative; overflow: hidden; border-radius: 24px; padding: 26px 30px; color: #fff;
    background: linear-gradient(120deg, #6a5ae0 0%, #7d6cf0 55%, #8d7ff3 100%);
}
.hero small { letter-spacing: 1.5px; opacity: .85; font-size: .75rem; }
.hero h2 { color: #fff; font-size: 1.7rem; line-height: 1.5; margin: 6px 0 18px; max-width: 480px; font-weight: 800; }
.hero p { opacity: .9; max-width: 460px; margin-bottom: 18px; }
.hero .st-btn { background: var(--dark); }
.hero .st-btn.secondary { background: rgba(255, 255, 255, .18); border: 0; color: #fff; }
.hero svg.sp { position: absolute; inset-inline-start: 30px; top: 10px; width: 210px; height: 210px; fill: rgba(255, 255, 255, .22); stroke: none; }
.hero svg.sp2 { inset-inline-start: 190px; top: 100px; width: 90px; height: 90px; fill: rgba(255, 255, 255, .18); }

.welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.welcome h2 { margin: 0 0 2px; font-size: 1.5rem; }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* کاشی‌های سامانه‌ها (لانچر) */
.launch { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.launch-item[hidden] { display: none; }
.launch-tile {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
    background: var(--canvas); border: 1px solid transparent; color: var(--text); min-width: 0;
    transition: background .15s, transform .12s, box-shadow .15s, border-color .15s;
}
.launch-tile:hover { background: #fff; border-color: #d6d1fb; box-shadow: 0 8px 22px rgba(106, 90, 224, .12); transform: translateY(-2px); color: var(--text); }
.launch-tile.off { opacity: .55; }
.lt-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; flex: none; }
.lt-ico.c0 { background: #ece9ff; color: #5a49d6; } .lt-ico.c1 { background: #e1efff; color: #1b72dc; }
.lt-ico.c2 { background: #dcf5e8; color: #14814a; } .lt-ico.c3 { background: #ffeed2; color: #cc7400; }
.lt-ico.c4 { background: #fde6f3; color: #cc2f9a; } .lt-ico.c5 { background: #d9f4f2; color: #0b8a82; }
.lt-ico.c6 { background: #fde2e3; color: #c8323a; } .lt-ico.c7 { background: #fff3c4; color: #a37900; }
.launch-item { position: relative; }
.launch-tile { padding-inline-end: 46px; cursor: pointer; }
.lt-new {
    position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: #a3a8bf; transition: background .15s, color .15s;
}
.lt-new:hover { background: var(--primary-soft); color: var(--primary-d); }
.lt-new svg { width: 16px; height: 16px; }
.ltr-host { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* پاپ‌آپ سامانه‌ها */
body.sys-open { overflow: hidden; }
.sysmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(20, 22, 40, .55); backdrop-filter: blur(3px); }
.sysmodal[hidden] { display: none; }
.sysmodal-box { width: min(1240px, 100%); height: min(88vh, 900px); background: #fff; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); }
.sysmodal-box.full { width: 100%; height: 100%; border-radius: 16px; }
.sysmodal-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.sysmodal-head .lt-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 1.05rem; }
.sys-id { flex: 1; min-width: 0; line-height: 1.4; }
.sys-id b { display: block; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-id small { display: block; color: var(--muted); font-size: .8rem; }
.sys-actions { display: flex; align-items: center; gap: 8px; }
.sys-actions .st-iconbtn { width: 36px; height: 36px; }
.sysmodal-body { position: relative; flex: 1; background: var(--canvas); min-height: 0; }
#sys-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#sys-frame[hidden] { display: none; }
.sys-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); z-index: 1; background: var(--canvas); }
.sys-loading[hidden] { display: none; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d9dbe8; border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sys-blocked { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; z-index: 2; background: var(--canvas); }
.sys-blocked[hidden] { display: none; }
.sys-blocked svg { width: 54px; height: 54px; color: #b9bdd3; stroke-width: 1.4; }
.sys-blocked p { max-width: 460px; color: #4b5068; margin: 6px 0 14px; }
.sys-hint {
    position: absolute; bottom: 14px; inset-inline: 12px; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px);
    background: #1b1d29; color: #fff; padding: 10px 16px; border-radius: 22px; z-index: 3; font-size: .9rem;
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: center; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.sys-hint .st-linkbtn { color: #c9c4ff; }
.sys-hint .st-linkbtn:hover { color: #fff; }
.sys-hint[hidden] { display: none; }
@media (max-width: 760px) {
    .sysmodal { padding: 0; }
    .sysmodal-box { width: 100%; height: 100%; border-radius: 0; }
    .sys-actions .st-btn { padding: 0 10px; font-size: .8rem; }
    #sys-full { display: none; }
}

/* ----- پنجرهٔ کشویی اعلان‌ها ----- */
.st-notif-pop { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; width: min(360px, calc(100vw - 24px)); background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(40, 30, 100, .22); z-index: 60; overflow: hidden; }
.st-notif-pop[hidden] { display: none; }
@media (max-width: 720px) { .st-notif-pop { position: fixed; top: 70px; inset-inline: 12px; width: auto; } }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.np-list { max-height: 360px; overflow-y: auto; }
.np-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid #f1f0f8; line-height: 1.6; }
.np-item:hover { background: #f7f6fd; }
.np-item.unread { background: #f1edff; }
.np-item.unread .np-title::before { content: "● "; color: var(--primary); }
.np-item small, .np-empty { color: var(--muted, #6b7280); }
.np-empty { padding: 18px; text-align: center; }
.np-more { display: block; text-align: center; padding: 10px; font-weight: 600; color: var(--primary); text-decoration: none; }
/* ----- کارتابل آموزشی ----- */
.tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.tr-stat { background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 6px rgba(60, 50, 120, .07); }
.tr-stat b { font-size: 1.5rem; color: var(--primary); line-height: 1.3; }
.tr-stat span { color: var(--muted, #6b7280); font-size: .8rem; }
.tr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tr-course { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 18px; padding: 16px; text-decoration: none; color: inherit; box-shadow: 0 1px 6px rgba(60, 50, 120, .07); transition: transform .15s, box-shadow .15s; }
.tr-course:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60, 50, 120, .14); }
.tr-next { font-size: .82rem; color: var(--primary); }
.tr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.tr-sessions { display: flex; flex-direction: column; gap: 8px; }
.tr-session { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: #f7f6fd; }
.tr-session.live { background: #e8f8ee; outline: 1px solid #8fd6a9; }
.tr-session.past { opacity: .6; }
.tr-when { display: flex; flex-direction: column; min-width: 110px; line-height: 1.5; }
.tr-when span { font-size: .8rem; color: var(--muted, #6b7280); }
.tr-what { flex: 1; min-width: 180px; display: flex; flex-direction: column; line-height: 1.6; }
.tr-act { display: flex; align-items: center; gap: 8px; }
.tr-sform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tr-sform input, .tr-sform select { border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font: inherit; background: #fff; }
.tr-sform input.ltr { direction: ltr; min-width: 200px; flex: 1; }
.st-badge.warn { background: #fff4d6; color: #8a5a00; }
button.launch-tile.locked { border: 0; font: inherit; text-align: start; width: 100%; cursor: pointer; opacity: .78; }
button.launch-tile.locked .lt-ico { filter: grayscale(.7); }
button.launch-tile.locked:hover { opacity: 1; }
button.launch-tile.locked.pending, button.launch-tile.locked:disabled { cursor: default; opacity: .6; }
.lock-ic { width: 18px; height: 18px; flex: none; stroke: var(--muted, #6b7280); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ext-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border-radius: 14px; background: #f1edff; color: #3b2f8f; font-size: .85rem; }
.ext-banner[hidden], .sys-ext[hidden] { display: none; }
.ext-banner > span { flex: 1; min-width: 200px; line-height: 1.7; }
.sys-ext { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #f1edff; color: #3b2f8f; font-size: .82rem; }
.ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.ext-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lt-ico.has-img { background: #fff; border: 1px solid var(--line); padding: 7px; }
.lt-ico.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icon-edit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.icon-edit .lt-ico { width: 46px; height: 46px; }
.lt-txt { flex: 1; min-width: 0; line-height: 1.5; }
.lt-txt b { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-txt small { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-go { color: #b3b7c9; width: 16px; height: 16px; }
.launch-tile:hover .lt-go { color: var(--primary); }
.launch-admin { font-size: .8rem; padding: 3px 8px 0; display: flex; gap: 10px; align-items: center; }
.systems .launch { margin-top: 2px; }

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tile { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--text); }
.tile:hover { color: var(--text); border-color: #d6d1fb; }
.tile .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.tile .ico.pink { background: #fde8f5; color: #d63aa5; }
.tile .ico.blue { background: #e4f1ff; color: #1f7ae0; }
.tile .ico.green { background: #def6ea; color: #14814a; }
.tile .ico.orange { background: #fff0d6; color: #d17a00; }
.tile small { color: var(--muted); display: block; line-height: 1.4; }
.tile b { font-size: 1.15rem; display: block; line-height: 1.4; }

.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 0; }
.sec-head h3 { margin: 0; font-size: 1.15rem; }
.hscroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.news-card {
    flex: 0 0 260px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    padding: 14px; box-shadow: var(--shadow); color: var(--text); display: flex; flex-direction: column; gap: 6px;
}
.news-card:hover { color: var(--text); border-color: #d6d1fb; }
.news-card .tag { align-self: flex-start; padding: 1px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-d); font-size: .75rem; font-weight: 600; }
.news-card .t { font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .d { color: var(--muted); font-size: .8rem; margin-top: auto; border-top: 1px dashed var(--line); padding-top: 8px; }

.note-card { background: var(--yellow); border-radius: 22px; overflow: hidden; color: #3a2d00; }
.note-card .nh { background: var(--yellow-soft); padding: 12px 18px; font-weight: 700; letter-spacing: .3px; display: flex; justify-content: space-between; align-items: center; }
.note-card .nb { padding: 14px 18px 16px; }
.note-card .nb h4 { margin: 0 0 6px; font-size: 1.05rem; }
.note-card .nb p { margin: 0 0 10px; }
.note-card a.st-btn { background: #3a2d00; color: #fff; }
.note-card .meta { opacity: .65; font-size: .8rem; margin-top: 8px; }

.dark-card { background: var(--dark); color: #fff; border-radius: 24px; padding: 18px 20px; }
.dark-card h3 { color: #fff; font-weight: 500; font-size: 1rem; opacity: .9; margin: 0; }
.dark-card .big { font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin: 4px 0 12px; }
.dark-card .big sup { font-size: .8rem; color: #35e08a; font-weight: 600; margin-inline-start: 6px; }
.dark-card .plate { background: #1a1b21; border-radius: 16px; padding: 14px 12px 10px; }
.vbars { display: flex; align-items: flex-end; justify-content: space-around; gap: 6px; height: 120px; }
.vbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.vbars .col i { display: block; width: 100%; max-width: 34px; border-radius: 8px; min-height: 4px; background: #2dd2ff; }
.vbars .col i.alt { background: #4b4d57; }
.vbars .col span { font-size: .68rem; color: #8b8e9c; }

.stat-card { text-align: center; }
.ring { --p: 0; position: relative; width: 120px; height: 120px; margin: 4px auto 10px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), #e9e8f8 0); display: grid; place-items: center; }
.ring::before { content: ''; position: absolute; inset: 9px; background: var(--surface); border-radius: 50%; }
.ring b { position: relative; font-size: 1.6rem; font-weight: 800; }
.mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 10px 6px 0; background: var(--primary-soft); border-radius: 16px; margin-top: 12px; }
.mini-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.mini-bars i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: #c9c3f7; min-height: 4px; }
.mini-bars i.hi { background: var(--primary); }
.mini-bars span { font-size: .65rem; color: var(--muted); padding-bottom: 3px; }

.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row .who { flex: 1; min-width: 0; line-height: 1.4; }
.team-row .who b { display: block; font-size: .95rem; }
.team-row .who small { color: var(--muted); }
.team-row .st-avatar { width: 38px; height: 38px; font-size: .85rem; position: relative; }
.team-row .st-avatar .st-dot { position: absolute; bottom: 0; inset-inline-end: 0; border: 2px solid #fff; width: 11px; height: 11px; }

.quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-links a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--canvas); color: var(--text); font-weight: 500; min-width: 0; }
.quick-links a:hover { background: var(--primary-soft); color: var(--primary-d); }
.quick-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; color: var(--text); }
.sched-item:hover { color: var(--text); border-color: #d6d1fb; }
.sched-item .date { width: 48px; height: 48px; border-radius: 12px; background: var(--canvas); display: grid; place-items: center; text-align: center; line-height: 1.2; flex: none; }
.sched-item .date small { font-size: .65rem; color: var(--muted); display: block; }
.sched-item .date b { font-size: 1.1rem; }
.sched-item .info { flex: 1; min-width: 0; }
.sched-item .info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================ چت و پیام‌ها ============================ */
.st-chat { height: 420px; overflow-y: auto; padding: 12px; background: var(--canvas); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; }
.st-chat-msg { position: relative; max-width: 75%; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line); }
.st-chat-msg.mine { align-self: flex-start; background: var(--primary); border-color: var(--primary); color: #fff; border-radius: 16px 16px 4px 16px; }
.st-chat-msg.mine .meta { color: rgba(255, 255, 255, .75); }
.st-chat-msg.theirs { align-self: flex-end; }
.st-chat-msg .meta { font-size: .72rem; color: var(--muted); margin-bottom: 1px; }
.st-chat-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-chat-msg.deleted { opacity: .6; font-style: italic; }
.st-msg-del { position: absolute; top: 3px; inset-inline-end: 8px; font-size: .7rem; color: var(--red); display: none; text-decoration: none; }
.st-chat-msg.mine .st-msg-del { color: #ffd9da; }
.st-chat-msg:hover .st-msg-del { display: inline; }
.st-chat-msg .meta a { margin-inline-end: 6px; color: inherit; text-decoration: underline; }
.st-chat-form { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.st-chat-form textarea { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px; resize: vertical; min-height: 46px; background: #fff; }

.st-msg { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 10px; background: #fff; }
.st-msg.internal { background: #fff8e0; border-color: #f4dc8a; }
.st-msg header { font-size: .8rem; color: var(--muted); margin-bottom: 4px; }

/* ============================ صفحه‌های مخصوص ============================ */
.st-ticket { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.st-ticket-side .st-card, .st-ticket-main .st-card { margin-bottom: 14px; }
.st-timeline { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.st-event { font-size: .82rem; color: var(--muted); padding: 2px 12px; border-inline-start: 3px solid #dcdff0; }
.st-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.st-file img { max-width: 160px; max-height: 120px; border-radius: 10px; border: 1px solid var(--line); display: block; margin-bottom: 4px; }
.st-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: .92rem; }
.st-dl dt { color: var(--muted); }
.st-dl dd { margin: 0; }
.st-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 8px; }
.st-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-stars label { font-size: 1.8rem; color: #d5d8e6; cursor: pointer; margin: 0; line-height: 1; }
.st-stars input:checked ~ label, .st-stars label:hover, .st-stars label:hover ~ label { color: #f5a800; }
.st-stars input:focus-visible + label { outline: 2px solid var(--primary); border-radius: 4px; }
.st-filter { padding: 12px 16px; }
.st-pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 14px 0; }
.st-bulk { background: var(--primary-soft); border-radius: 14px; padding: 8px 14px; margin-bottom: 10px; }
.st-bulk[hidden] { display: none; }
.st-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 14px; overflow-x: auto; align-items: start; }
.st-board-col { background: #eceef7; border-radius: 20px; padding: 12px; min-width: 230px; }
.st-board-col h3 { margin: 0 0 10px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
.st-board-card { background: #fff; border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
.st-board-card.overdue { outline: 2px solid var(--red); }
.st-board-card select { height: 30px !important; font-size: .85rem; }
.st-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; overflow-x: auto; padding-bottom: 4px; }
.st-bar-group { display: flex; flex-direction: column; align-items: center; flex: 1 0 22px; height: 100%; justify-content: flex-end; }
.st-bar-pair { display: flex; align-items: flex-end; gap: 2px; height: 130px; width: 100%; justify-content: center; }
.st-bar-pair i { display: block; width: 8px; min-height: 1px; border-radius: 4px 4px 0 0; }
.st-bar-group span { font-size: .62rem; color: var(--muted); margin-top: 4px; direction: ltr; }
.st-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.st-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow); }
.st-stat b { display: block; font-size: 1.6rem; color: var(--primary); line-height: 1.4; }
.st-stat span { color: var(--muted); font-size: .85rem; }
.st-admin-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.st-admin-tile { display: block; color: var(--text); margin: 0; }
.st-admin-tile:hover { color: var(--text); border-color: #d6d1fb; }
.st-admin-tile b { display: block; font-size: 1.6rem; color: var(--primary); }
.st-admin-tile span { font-weight: 700; }
.st-admin-tile small { display: block; color: var(--muted); margin-top: 4px; }
.st-rooms { display: block; }
.st-help { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.st-ai { position: sticky; top: 12px; margin: 0; }
.st-doc h3 { margin: 0 0 4px; }
.st-footer { text-align: center; color: var(--muted); font-size: .75rem; padding: 6px 0 18px; }

/* ============================ واکنش‌گرا ============================ */
@media (max-width: 1180px) {
    .app.dock-open { grid-template-columns: var(--side-w) minmax(0, 1fr) 0; }
    .app.dock-open .st-dock {
        position: fixed; top: 14px; inset-inline-start: 14px; width: min(var(--dock-w), calc(100vw - 28px)); height: calc(100vh - 28px);
        z-index: 60; border-radius: 22px; box-shadow: 0 20px 60px rgba(20, 22, 40, .25); border: 1px solid var(--line); visibility: visible;
    }
    .st-dock-fab { display: grid; }
}
@media (max-width: 900px) {
    :root { --fs: 13px; }
    .app, .app.dock-open { grid-template-columns: minmax(0, 1fr); margin: 0; border-radius: 0; min-height: 100vh; }
    .st-center { border-radius: 0; }
    .st-side {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: 260px; z-index: 70; height: 100vh;
        transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; box-shadow: 0 0 60px rgba(20, 22, 40, .3);
    }
    body.side-open .st-side { transform: none; visibility: visible; transition: transform .22s ease; }
    .st-scrim { position: fixed; inset: 0; background: rgba(20, 22, 40, .45); z-index: 65; display: none; }
    body.side-open .st-scrim { display: block; }
    .st-iconbtn.st-menu-btn { display: grid; }
    .st-top { padding: 12px 14px 0; }
    .st-user-chip div { display: none; }
    .st-page { padding: 12px 14px 24px; }
    .st-ticket, .st-help { grid-template-columns: minmax(0, 1fr); }
    .st-ai { position: static; }
    .st-board { grid-template-columns: repeat(4, 240px); }
    .hero { padding: 20px; }
    .hero h2 { font-size: 1.35rem; }
    .app.dock-open .st-dock { top: 0; inset-inline-start: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
}
@media (max-width: 640px) {
    .st-chat-msg { max-width: 90%; }
    .st-table th, .st-table td { padding: 8px 9px; }
    .st-search { display: none; }
    .st-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =====================================================================
   یکدست‌سازی ظاهر: مقیاس فاصله‌ها، آیکن‌ها، عنوان‌ها، دکمه‌ها، جدول‌ها (آخرین لایه)
   ===================================================================== */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; }

.ic { flex: none; }
.st-btn .ic, .st-linkbtn .ic, .page-ic .ic, .card-ic .ic, .stat-ic .ic, .st-empty .ic, .np-item .ic {
    width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px;
}

/* محتوای صفحه */
#app-main { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
@media (max-width: 720px) { #app-main { padding: var(--sp-4) var(--sp-3) var(--sp-6); } }

/* عنوان صفحه */
.st-toolbar { gap: var(--sp-3); margin-bottom: var(--sp-5); align-items: center; }
.st-toolbar h2 { font-size: 1.3rem; line-height: 1.5; }
.page-title { display: flex; align-items: center; gap: var(--sp-3); }
.page-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: inline-grid; place-items: center; flex: none; }
.page-ic .ic { width: 22px; height: 22px; }

/* کارت‌ها */
.st-card { padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-5); border-radius: 22px; }
.st-card > h3:first-child { margin-bottom: var(--sp-4); }
.card-title { display: flex; align-items: center; gap: var(--sp-3); }
.card-ic { width: 32px; height: 32px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: inline-grid; place-items: center; flex: none; }
.card-ic .ic { width: 18px; height: 18px; }
.st-card h4 { margin: var(--sp-5) 0 var(--sp-3); }
.st-card > :last-child { margin-bottom: 0; }

/* دکمه‌ها */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 38px; padding: 0 var(--sp-4); }
.st-btn.small { min-height: 32px; height: auto; padding: 0 var(--sp-3); gap: 6px; }
.st-btn.small .ic { width: 15px; height: 15px; }
.st-linkbtn { display: inline-flex; align-items: center; gap: 5px; }
.st-actions { margin-top: var(--sp-5); gap: var(--sp-3); }
.st-inline-form { gap: var(--sp-3); }

/* فرم‌ها */
.st-form label { margin: var(--sp-4) 0 6px; }
.st-form label:first-child { margin-top: 0; }
.st-form .st-check, .st-check { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.st-check label { margin: 0; font-weight: 500; }

/* پیام‌ها و حالت خالی */
.st-alert { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); border-radius: 14px; }
.st-alert.ok { background: #e8f8ee; color: #14814a; }
.st-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--muted); }
.st-empty .ic { width: 30px; height: 30px; opacity: .55; stroke-width: 1.6; }

/* جدول و فهرست */
.st-table th { padding: var(--sp-3) var(--sp-4); }
.st-table td { padding: var(--sp-3) var(--sp-4); vertical-align: middle; }
.st-table td .st-btn, .st-table td form { margin: 0; }
.st-list li { padding: var(--sp-3) 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.st-list li > :first-child { min-width: 0; }
.st-badge { padding: 3px 11px; line-height: 1.6; }

/* تب‌ها */
.st-tabs { gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* کارتابل آموزشی */
.tr-stats { gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tr-stat { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: 20px; }
.tr-stat > div { display: flex; flex-direction: column; line-height: 1.5; }
.stat-ic { width: 46px; height: 46px; border-radius: 15px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.stat-ic .ic { width: 22px; height: 22px; }
.stat-ic.green { background: #e3f6ea; color: #14814a; } .stat-ic.amber { background: #fff1d1; color: #b36b00; } .stat-ic.blue { background: #e3efff; color: #1f6fe0; }
.tr-cols { gap: var(--sp-5); }
.tr-session { padding: var(--sp-3) var(--sp-4); gap: var(--sp-4); border-radius: 16px; }
.tr-grid { gap: var(--sp-4); }
.tr-course { padding: var(--sp-5); gap: var(--sp-2); }
.tr-sform { gap: var(--sp-2); padding: var(--sp-3) 0; }

/* آدرس‌ها و IP با ارقام لاتین خوانا (فونت اصلی ارقام را فارسی نشان می‌دهد و ۱۷۲.۱۶.۲۰.۳۵ گمراه‌کننده است) */
input.ltr, .ltr-host, .ltr, code, .st-form input[name=url] { font-family: "Segoe UI", Consolas, Tahoma, monospace; direction: ltr; text-align: left; letter-spacing: .01em; }

/* نقش‌ها و دسترسی‌ها */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.st-form label.perm-item, .perm-item { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-3); border-radius: 14px; background: #f7f6fd; font-weight: 500; cursor: pointer; }
.perm-item input { margin-top: 5px; flex: none; }
.perm-item span { display: flex; flex-direction: column; line-height: 1.6; }
.perm-item small { color: var(--muted); font-size: .78rem; }
.role-chip { border: 0; background: var(--primary-soft); color: var(--primary-d); border-radius: 99px; padding: 3px 12px; margin: 0 0 4px 6px; font: inherit; font-size: .82rem; cursor: pointer; }
.role-chip:hover { background: #fde0e1; color: #c0282e; }

/* کاشی سامانه‌ها */
.launch { gap: var(--sp-3); }
.ext-banner { margin-bottom: var(--sp-4); }