/**
 * پنل آروان — استایل اپلیکیشن موبایل (PWA SPA).
 *
 * موبایل‌اول، راست‌به‌چپ، با توکن‌های طراحی افزونه:
 * پس‌زمینه #eef1f5، متن #1f2733، گرادیان سرمه‌ای #22364e→#10202f،
 * رنگ تأکید کهربایی #ffb321، کارت سفید شعاع ۱۶ و سایه نرم.
 *
 * همه انتخابگرها اسکوپ .aa-pwa- هستند؛ تنها ریشه اپ بدون پیشوند است
 * (.aa-pwa-app). کامپوننت‌های شناور (توست، شیت، مودال) به body
 * اضافه می‌شوند و ریشه‌های خودشان را دارند.
 */

/* ---------------- توکن‌های طراحی ---------------- */

.aa-pwa-app,
.aa-pwa-toasts,
.aa-pwa-toast,
.aa-pwa-sheet-root,
.aa-pwa-modal-root {
    --aa-pwa-bg: #eef1f5;
    --aa-pwa-text: #1f2733;
    --aa-pwa-muted: #6b7686;
    --aa-pwa-navy-1: #22364e;
    --aa-pwa-navy-2: #10202f;
    --aa-pwa-accent: #ffb321;
    --aa-pwa-accent-dark: #f0a413;
    --aa-pwa-card: #ffffff;
    --aa-pwa-border: #e7eaef;
    --aa-pwa-field-bg: #fbfcfe;
    --aa-pwa-radius: 16px;
    --aa-pwa-radius-sm: 12px;
    --aa-pwa-shadow: 0 2px 10px rgba(31, 39, 51, .05);
    --aa-pwa-gradient: linear-gradient(135deg, #22364e 0%, #10202f 100%);
    --aa-pwa-success: #1e9e5a;
    --aa-pwa-error: #d64545;
    --aa-pwa-pending: #ffb321;
    --aa-pwa-header-h: 58px;
    --aa-pwa-nav-h: 62px;
}

/* ---------------- ریشه‌های شناور: تایپوگرافی (F2) ----------------
   توست/شیت/مودال به body اضافه می‌شوند و خارج از اسکوپ .aa-pwa-app
   هستند؛ فونت و تایپوگرافی پایه باید مستقیماً روی ریشه‌ها اعمال شود. */

.aa-pwa-toasts,
.aa-pwa-sheet-root,
.aa-pwa-modal-root {
    font-family: Vazirmatn, Tahoma, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.9;
    color: var(--aa-pwa-text);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* F3: کنترل‌های فرم داخل اورلی‌ها — هم‌عرض کادر، بدون سرریز */
.aa-pwa-sheet-root input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.aa-pwa-sheet-root select,
.aa-pwa-sheet-root textarea,
.aa-pwa-modal-root input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.aa-pwa-modal-root select,
.aa-pwa-modal-root textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 12px;
}

/* فلش سلکت داخل اورلی‌ها بعد از بازنویسی padding بازیابی می‌شود */
.aa-pwa-sheet-root select.aa-pwa-input,
.aa-pwa-modal-root select.aa-pwa-input {
    padding-left: 34px;
}

/* بدنه شیت/مودال: بدون سرریز افقی */
.aa-pwa-sheet-root .aa-pwa-sheet-body,
.aa-pwa-modal-root .aa-pwa-modal {
    overflow-x: hidden;
}

/* ---------------- ریشه اپ و تایپوگرافی پایه ---------------- */

.aa-pwa-app {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--aa-pwa-bg);
    color: var(--aa-pwa-text);
    direction: rtl;
    text-align: right;
    font-family: Vazirmatn, Tahoma, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.aa-pwa-app *,
.aa-pwa-app *::before,
.aa-pwa-app *::after {
    box-sizing: border-box;
}

.aa-pwa-app button {
    font-family: inherit;
    cursor: pointer;
}

.aa-pwa-app h1,
.aa-pwa-app h2,
.aa-pwa-app h3 {
    margin: 0;
}

/* F1: فاصله سرتیترها از محتوا — ریست h1..h3 بالا مارجین کارت‌تایتل‌ها را
   می‌خورد؛ با اولویت بیشتر بازیابی می‌شود (اسکوپ اپ + کلاس). */
.aa-pwa-app .aa-pwa-card-title {
    margin: 0 0 12px;
}

.aa-pwa-app .aa-pwa-success-title {
    margin: 0 0 8px;
}

/* اتریبیوت hidden نباید توسط display کلاس‌ها بازنویسی شود */
.aa-pwa-app [hidden],
.aa-pwa-toast[hidden] {
    display: none !important;
}

/* ---------------- هدر ثابت ---------------- */

.aa-pwa-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 900;
    background: var(--aa-pwa-gradient);
    color: #fff;
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 2px 12px rgba(16, 32, 47, .28);
}

.aa-pwa-header-bar {
    max-width: 560px;
    margin: 0 auto;
    height: var(--aa-pwa-header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}

.aa-pwa-hbtn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.aa-pwa-hbtn:hover {
    background: rgba(255, 255, 255, .22);
}

.aa-pwa-hbtn svg {
    width: 17px;
    height: 17px;
}

.aa-pwa-back-btn {
    background: transparent;
}

.aa-pwa-back-btn:hover {
    background: rgba(255, 255, 255, .14);
}

.aa-pwa-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: var(--aa-pwa-accent);
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- ناحیه محتوا ---------------- */

.aa-pwa-content {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(var(--aa-pwa-header-h) + env(safe-area-inset-top) + 14px) 14px calc(var(--aa-pwa-nav-h) + env(safe-area-inset-bottom) + 22px);
}

/* ---------------- ناوبری پایین ---------------- */

.aa-pwa-nav {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 900;
    background: var(--aa-pwa-card);
    border-top: 1px solid var(--aa-pwa-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(31, 39, 51, .07);
}

.aa-pwa-nav-bar {
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--aa-pwa-nav-h);
}

.aa-pwa-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.aa-pwa-nav-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--aa-pwa-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: color .2s ease;
}

.aa-pwa-nav-ic {
    display: inline-flex;
}

.aa-pwa-nav-ic svg {
    width: 21px;
    height: 21px;
}

.aa-pwa-nav-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--aa-pwa-muted);
    white-space: nowrap;
    transition: color .2s ease;
}

.aa-pwa-nav-item.is-active .aa-pwa-nav-btn,
.aa-pwa-nav-item.is-active .aa-pwa-nav-btn .aa-pwa-nav-ic {
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-nav-item.is-active .aa-pwa-nav-label {
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-nav-item.is-active .aa-pwa-nav-btn .aa-pwa-nav-ic svg {
    color: var(--aa-pwa-accent-dark);
}

/* دکمه مرکزی ارسال — دایره برجسته کهربایی */
.aa-pwa-nav-item--center {
    position: relative;
}

.aa-pwa-nav-compose {
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border: 4px solid var(--aa-pwa-card);
    border-radius: 50%;
    background: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(240, 164, 19, .45);
    transition: background .2s ease, transform .15s ease;
}

.aa-pwa-nav-compose:hover {
    background: var(--aa-pwa-accent-dark);
}

.aa-pwa-nav-compose:active {
    transform: translateY(1px);
}

.aa-pwa-nav-compose svg {
    width: 22px;
    height: 22px;
}

.aa-pwa-nav-item--center.is-active .aa-pwa-nav-compose {
    background: var(--aa-pwa-navy-1);
    color: var(--aa-pwa-accent);
    border-color: var(--aa-pwa-card);
}

.aa-pwa-nav-item--center.is-active .aa-pwa-nav-label {
    color: var(--aa-pwa-navy-1);
}

/* ---------------- کارت پایه ---------------- */

.aa-pwa-card {
    background: var(--aa-pwa-card);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius);
    box-shadow: var(--aa-pwa-shadow);
    padding: 16px;
    margin-bottom: 14px;
}

.aa-pwa-card-title {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 12px;
}

.aa-pwa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.aa-pwa-card-head .aa-pwa-card-title {
    margin: 0;
}

.aa-pwa-link-btn {
    border: 0;
    background: transparent;
    color: var(--aa-pwa-accent-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 0;
}

.aa-pwa-link-btn:hover {
    color: var(--aa-pwa-navy-1);
}

/* ---------------- دکمه‌ها ---------------- */

.aa-pwa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 11px 16px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}

.aa-pwa-btn:active {
    transform: translateY(1px);
}

.aa-pwa-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.aa-pwa-btn-ic {
    display: inline-flex;
}

.aa-pwa-btn-ic svg {
    width: 16px;
    height: 16px;
}

.aa-pwa-btn-accent {
    background: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-2);
}

.aa-pwa-btn-accent:hover {
    background: var(--aa-pwa-accent-dark);
    color: var(--aa-pwa-navy-2);
}

.aa-pwa-btn-navy {
    background: var(--aa-pwa-gradient);
    color: #fff;
}

.aa-pwa-btn-navy:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(16, 32, 47, .3);
}

.aa-pwa-btn-ghost {
    background: transparent;
    border-color: var(--aa-pwa-border);
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-btn-ghost:hover {
    border-color: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-1);
    background: #fffaf0;
}

.aa-pwa-btn-danger-ghost {
    background: transparent;
    border-color: #f2cfcf;
    color: var(--aa-pwa-error);
}

.aa-pwa-btn-danger-ghost:hover {
    background: #fdf1f1;
    color: var(--aa-pwa-error);
}

.aa-pwa-btn-danger {
    background: var(--aa-pwa-error);
    color: #fff;
}

.aa-pwa-btn-danger:hover {
    background: #b93a3a;
    color: #fff;
}

.aa-pwa-btn-text {
    background: transparent;
    color: var(--aa-pwa-muted);
}

.aa-pwa-btn-text:hover {
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 10px;
}

.aa-pwa-btn-block {
    display: flex;
    width: 100%;
}

.aa-pwa-btn-next {
    min-width: 46%;
}

/* ---------------- فرم‌ها ---------------- */

.aa-pwa-form {
    display: block;
}

.aa-pwa-field {
    display: block;
    margin-bottom: 14px;
}

.aa-pwa-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--aa-pwa-text);
    margin-bottom: 6px;
}

.aa-pwa-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--aa-pwa-text);
    background: var(--aa-pwa-field-bg);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.aa-pwa-input::placeholder {
    color: #a6afbd;
}

.aa-pwa-input:focus {
    border-color: var(--aa-pwa-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 179, 33, .22);
}

.aa-pwa-input[disabled] {
    opacity: .6;
    background: #f2f4f8;
    cursor: not-allowed;
}

textarea.aa-pwa-input {
    min-height: 96px;
    resize: vertical;
    line-height: 1.9;
}

select.aa-pwa-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 34px;
}

.aa-pwa-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.aa-pwa-hint {
    display: block;
    font-size: 11px;
    color: var(--aa-pwa-muted);
    line-height: 1.8;
    margin-top: 4px;
}

.aa-pwa-gap {
    height: 16px;
}

.aa-pwa-gap-sm {
    height: 8px;
}

/* ---------------- کنترل سگمنت ---------------- */

.aa-pwa-seg {
    display: flex;
    background: #f1f4f9;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 3px;
    gap: 3px;
}

.aa-pwa-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--aa-pwa-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.aa-pwa-seg-btn.is-active {
    background: var(--aa-pwa-card);
    color: var(--aa-pwa-navy-1);
    box-shadow: 0 1px 4px rgba(31, 39, 51, .12);
}

/* ---------------- چیپ‌ها ---------------- */

.aa-pwa-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aa-pwa-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: 999px;
    background: var(--aa-pwa-card);
    color: var(--aa-pwa-text);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    min-height: 34px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.aa-pwa-chip-btn:hover {
    border-color: var(--aa-pwa-accent);
}

.aa-pwa-chip-btn.is-active {
    background: var(--aa-pwa-navy-1);
    border-color: var(--aa-pwa-navy-1);
    color: #fff;
}

.aa-pwa-chip-btn--bool .aa-pwa-chip-check,
.aa-pwa-chip-btn .aa-pwa-chip-check {
    display: none;
    width: 13px;
    height: 13px;
}

.aa-pwa-chip-btn.is-active .aa-pwa-chip-check {
    display: inline-flex;
}

.aa-pwa-chip-btn .aa-pwa-chip-check svg {
    width: 13px;
    height: 13px;
}

.aa-pwa-chip-btn--bool.is-active {
    background: #fff4d9;
    border-color: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-chip-btn--mono {
    direction: rtl;
    font-family: Vazirmatn, Tahoma, monospace;
}

/* ---------------- ردیف‌های لیست ---------------- */

.aa-pwa-list {
    display: block;
}

.aa-pwa-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--aa-pwa-border);
    background: transparent;
    text-align: right;
    color: var(--aa-pwa-text);
    transition: background .15s ease;
}

.aa-pwa-row:last-child {
    border-bottom: 0;
}

button.aa-pwa-row:hover {
    background: #f7f9fc;
}

.aa-pwa-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aa-pwa-row-title {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-pwa-row-sub {
    font-size: 11px;
    color: var(--aa-pwa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-pwa-row-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #f1f4f9;
    color: var(--aa-pwa-navy-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-row-icon svg {
    width: 17px;
    height: 17px;
}

.aa-pwa-row-chev {
    flex: 0 0 auto;
    color: #b7bfcc;
    display: inline-flex;
}

.aa-pwa-row-chev svg {
    width: 16px;
    height: 16px;
}

.aa-pwa-admission {
    flex: 0 0 auto;
    background: #f1f4f9;
    border: 1px solid var(--aa-pwa-border);
    color: var(--aa-pwa-navy-1);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    direction: ltr;
    white-space: nowrap;
}

.aa-pwa-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aa-pwa-border);
}

.aa-pwa-dot-warn {
    background: var(--aa-pwa-pending);
    box-shadow: 0 0 0 3px rgba(255, 179, 33, .25);
}

.aa-pwa-icon-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: 10px;
    background: var(--aa-pwa-card);
    color: var(--aa-pwa-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.aa-pwa-icon-btn svg {
    width: 14px;
    height: 14px;
}

.aa-pwa-icon-btn:hover {
    color: var(--aa-pwa-navy-1);
    border-color: var(--aa-pwa-accent);
}

.aa-pwa-icon-btn--danger:hover {
    color: var(--aa-pwa-error);
    border-color: var(--aa-pwa-error);
    background: #fdf1f1;
}

.aa-pwa-tip-actions {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 6px;
}

/* ---------------- خانه ---------------- */

.aa-pwa-greet {
    padding: 4px 2px 12px;
}

.aa-pwa-greet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.aa-pwa-greet-title {
    font-size: 19px;
    font-weight: 800;
}

.aa-pwa-greet-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--aa-pwa-muted);
}

.aa-pwa-role-chip {
    display: inline-block;
    background: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-2);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.aa-pwa-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.aa-pwa-stat-card {
    background: var(--aa-pwa-card);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius);
    box-shadow: var(--aa-pwa-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.aa-pwa-stat-card--link {
    border: 0;
    text-align: center;
    cursor: pointer;
}

.aa-pwa-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--aa-pwa-navy-1);
    line-height: 1.4;
}

.aa-pwa-stat-label {
    font-size: 12px;
    color: var(--aa-pwa-muted);
}

.aa-pwa-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.aa-pwa-quick {
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    color: var(--aa-pwa-text);
    padding: 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.aa-pwa-quick:hover {
    border-color: #f3d492;
    background: #fffaf0;
    transform: translateY(-1px);
}

.aa-pwa-quick-ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--aa-pwa-gradient);
    color: var(--aa-pwa-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-quick-ic svg {
    width: 18px;
    height: 18px;
}

.aa-pwa-quick-label {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* ---------------- جستجوی خودروها ---------------- */

.aa-pwa-search-box {
    position: relative;
    margin-bottom: 10px;
}

.aa-pwa-search-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a6afbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}

/* ---------------- کارت نصب PWA ---------------- */

.aa-pwa-install-card--compact {
    padding: 13px 14px;
}

.aa-pwa-install-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.aa-pwa-install-head .aa-pwa-card-title {
    margin: 0;
}

.aa-pwa-install-text {
    font-size: 12px;
    color: var(--aa-pwa-muted);
    margin: 0 0 12px;
}

.aa-pwa-install-status {
    font-size: 11px;
    color: var(--aa-pwa-muted);
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--aa-pwa-border);
}

.aa-pwa-ios-hint {
    background: #f6f8fb;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--aa-pwa-text);
    margin-top: 4px;
}

/* ---------------- استپر ویزارد ---------------- */

.aa-pwa-stepper {
    display: flex;
    background: var(--aa-pwa-card);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius);
    box-shadow: var(--aa-pwa-shadow);
    padding: 12px 8px;
    margin-bottom: 14px;
}

.aa-pwa-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
}

.aa-pwa-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f4f9;
    border: 1px solid var(--aa-pwa-border);
    color: var(--aa-pwa-muted);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.aa-pwa-step-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--aa-pwa-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.aa-pwa-step.is-active .aa-pwa-step-num {
    background: var(--aa-pwa-accent);
    border-color: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-2);
}

.aa-pwa-step.is-active .aa-pwa-step-label {
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-step.is-done .aa-pwa-step-num {
    background: var(--aa-pwa-navy-1);
    border-color: var(--aa-pwa-navy-1);
    color: #fff;
}

.aa-pwa-wizard-nav {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.aa-pwa-wizard-nav .aa-pwa-btn-ghost {
    flex: 1 1 0;
}

.aa-pwa-wizard-nav .aa-pwa-btn-next {
    flex: 2 1 0;
}

/* ---------------- پلاک ---------------- */

.aa-pwa-plate {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f6f8fb;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 8px;
}

.aa-pwa-plate-input {
    width: 46px;
    min-height: 40px;
    text-align: center;
    padding: 6px 4px;
    font-weight: 700;
}

.aa-pwa-plate-md {
    width: 58px;
}

.aa-pwa-plate-letter {
    width: 58px;
    min-height: 40px;
    padding: 6px 4px;
    padding-left: 24px;
    text-align: center;
    font-weight: 700;
}

.aa-pwa-plate-iran {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--aa-pwa-navy-1);
    border-top: 2px solid var(--aa-pwa-navy-1);
    padding: 2px 6px 0;
}

.aa-pwa-plate-preview {
    margin-top: 8px;
    background: #fffaf0;
    border: 1px dashed #f3d492;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: var(--aa-pwa-navy-1);
    min-height: 38px;
}

/* ---------------- موفقیت ثبت خودرو ---------------- */

.aa-pwa-success {
    padding-top: 12px;
}

.aa-pwa-success-card {
    text-align: center;
    padding: 28px 18px;
}

.aa-pwa-success-ic {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e8f7ef;
    color: var(--aa-pwa-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-success-ic svg {
    width: 34px;
    height: 34px;
}

.aa-pwa-success-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 8px;
}

.aa-pwa-success-admission {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f6f8fb;
    border: 1px solid var(--aa-pwa-border);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.aa-pwa-success-admission-label {
    font-size: 12px;
    color: var(--aa-pwa-muted);
}

.aa-pwa-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------------- ارسال به کانال ---------------- */

.aa-pwa-send-info {
    padding: 12px 16px;
}

.aa-pwa-send-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aa-pwa-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.aa-pwa-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--aa-pwa-border);
    border-radius: 10px;
    background: var(--aa-pwa-field-bg);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.aa-pwa-gallery-item.is-selected {
    border-color: var(--aa-pwa-accent);
    box-shadow: 0 0 0 3px rgba(255, 179, 33, .3);
}

.aa-pwa-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aa-pwa-gallery-default {
    border-style: dashed;
}

.aa-pwa-gallery-def-ic {
    color: var(--aa-pwa-muted);
    display: inline-flex;
}

.aa-pwa-gallery-def-ic svg {
    width: 20px;
    height: 20px;
}

.aa-pwa-gallery-def-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--aa-pwa-muted);
    text-align: center;
    padding: 0 2px;
    line-height: 1.5;
}

.aa-pwa-gallery-empty {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--aa-pwa-muted);
    background: #f6f8fb;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

/* ---------------- کامپوز ---------------- */

.aa-pwa-type-chips .aa-pwa-chip-btn.is-active {
    background: var(--aa-pwa-accent);
    border-color: var(--aa-pwa-accent-dark);
    color: var(--aa-pwa-navy-2);
}

.aa-pwa-attach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.aa-pwa-attach {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--aa-pwa-field-bg);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 9px 11px;
}

.aa-pwa-attach-ic {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--aa-pwa-gradient);
    color: var(--aa-pwa-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-attach-ic svg {
    width: 15px;
    height: 15px;
}

.aa-pwa-attach-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: right;
}

.aa-pwa-attach-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--aa-pwa-muted);
}

.aa-pwa-attach-done .aa-pwa-attach-status {
    color: var(--aa-pwa-success);
}

.aa-pwa-attach-error {
    border-color: #f2cfcf;
    background: #fdf4f4;
}

.aa-pwa-attach-error .aa-pwa-attach-status {
    color: var(--aa-pwa-error);
}

.aa-pwa-attach-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: #f1f4f9;
    color: var(--aa-pwa-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-attach-remove:hover {
    background: #fdf1f1;
    color: var(--aa-pwa-error);
}

.aa-pwa-attach-remove svg {
    width: 12px;
    height: 12px;
}

.aa-pwa-btnrows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.aa-pwa-btnrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aa-pwa-btnrow-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
}

.aa-pwa-btnrow-fields .aa-pwa-input:first-child {
    flex: 1 1 40%;
}

.aa-pwa-btnrow-fields .aa-pwa-input:last-child {
    flex: 1 1 60%;
}

/* ---------------- لیست انتخاب مقصد ---------------- */

.aa-pwa-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.aa-pwa-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    padding: 11px 12px;
    text-align: right;
    color: var(--aa-pwa-text);
    transition: border-color .2s ease, background .2s ease;
}

.aa-pwa-check-row.is-active {
    border-color: var(--aa-pwa-accent);
    background: #fffaf0;
}

.aa-pwa-check-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--aa-pwa-border);
    background: #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-check-box svg {
    width: 13px;
    height: 13px;
}

.aa-pwa-check-row.is-active .aa-pwa-check-box {
    background: var(--aa-pwa-accent);
    border-color: var(--aa-pwa-accent-dark);
    color: var(--aa-pwa-navy-2);
}

.aa-pwa-check-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

.aa-pwa-target-chips {
    margin-bottom: 10px;
}

/* ---------------- تاریخچه ---------------- */

.aa-pwa-history-tabs {
    margin-bottom: 14px;
}

.aa-pwa-status-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.aa-pwa-status-sent {
    background: #e8f7ef;
    color: var(--aa-pwa-success);
}

.aa-pwa-status-error {
    background: #fdf0f0;
    color: var(--aa-pwa-error);
}

.aa-pwa-status-pending,
.aa-pwa-status-scheduled {
    background: #fff4d9;
    color: #8a6207;
}

.aa-pwa-history-detail .aa-pwa-caption-box {
    background: var(--aa-pwa-field-bg);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.aa-pwa-media-info {
    font-size: 12px;
    color: var(--aa-pwa-muted);
}

.aa-pwa-error-box {
    background: #fdf0f0;
    border: 1px solid #f2cfcf;
    border-radius: var(--aa-pwa-radius-sm);
    color: var(--aa-pwa-error);
    font-size: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
    word-break: break-word;
}

/* ---------------- نتایج ارسال ---------------- */

.aa-pwa-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.aa-pwa-result {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 11px 12px;
    border: 1px solid var(--aa-pwa-border);
    background: var(--aa-pwa-field-bg);
}

.aa-pwa-result-ok {
    background: #eefaf3;
    border-color: #c9ecd9;
}

.aa-pwa-result-err {
    background: #fdf0f0;
    border-color: #f2cfcf;
}

.aa-pwa-result-ic {
    flex: 0 0 auto;
    margin-top: 2px;
    display: inline-flex;
}

.aa-pwa-result-ok .aa-pwa-result-ic {
    color: var(--aa-pwa-success);
}

.aa-pwa-result-err .aa-pwa-result-ic {
    color: var(--aa-pwa-error);
}

.aa-pwa-result-ic svg {
    width: 17px;
    height: 17px;
}

.aa-pwa-result-body {
    flex: 1 1 auto;
    min-width: 0;
}

.aa-pwa-result-title {
    font-size: 13px;
    font-weight: 700;
}

.aa-pwa-result-msg {
    font-size: 12px;
    color: var(--aa-pwa-muted);
    word-break: break-word;
}

/* ---------------- تیپ‌ها ---------------- */

.aa-pwa-tip-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--aa-pwa-border);
}

.aa-pwa-tip-parent .aa-pwa-tip-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--aa-pwa-navy-1);
}

.aa-pwa-tip-children {
    border-bottom: 1px solid var(--aa-pwa-border);
    padding: 2px 12px 6px 0;
    margin-right: 8px;
    border-right: 2px solid #f1f4f9;
}

.aa-pwa-tip-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed #eef1f5;
}

.aa-pwa-tip-child:last-child {
    border-bottom: 0;
}

.aa-pwa-tip-child .aa-pwa-tip-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-pwa-tip-price {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--aa-pwa-accent-dark);
    white-space: nowrap;
}

.aa-pwa-tip-image {
    width: 86px;
    height: 86px;
    border-radius: var(--aa-pwa-radius-sm);
    border: 1px solid var(--aa-pwa-border);
    overflow: hidden;
    background: var(--aa-pwa-field-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-tip-image--empty {
    border-style: dashed;
}

.aa-pwa-tip-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aa-pwa-tip-image-ph {
    color: #b7bfcc;
    display: inline-flex;
}

.aa-pwa-tip-image-ph svg {
    width: 26px;
    height: 26px;
}

/* ---------------- تردها ---------------- */

.aa-pwa-threads-hint {
    color: #8a6207;
    background: #fff4d9;
    border: 1px solid #f3d492;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 8px 12px;
    margin: 0 0 12px;
}

/* ---------------- قالب بندی ---------------- */

.aa-pwa-template-text {
    font-family: Vazirmatn, Tahoma, monospace;
    font-size: 12.5px;
    letter-spacing: .2px;
}

.aa-pwa-badge {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f4f9;
    color: var(--aa-pwa-muted);
    white-space: nowrap;
}

.aa-pwa-badge-accent {
    background: var(--aa-pwa-accent);
    color: var(--aa-pwa-navy-2);
}

/* ---------------- بیشتر ---------------- */

.aa-pwa-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aa-pwa-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--aa-pwa-gradient);
    color: var(--aa-pwa-accent);
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(16, 32, 47, .28);
}

.aa-pwa-profile-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.aa-pwa-profile-name {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.aa-pwa-menu {
    padding: 4px 16px;
}

.aa-pwa-menu-item {
    padding: 13px 2px;
}

.aa-pwa-version {
    text-align: center;
    font-size: 11px;
    color: #8b95a5;
    margin: 18px 0 0;
}

/* ---------------- توست ---------------- */

.aa-pwa-toasts {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    right: 0;
    left: 0;
    z-index: 100010;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    padding: 0 16px;
}

.aa-pwa-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    background: var(--aa-pwa-navy-2);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--aa-pwa-radius-sm);
    box-shadow: 0 6px 20px rgba(16, 32, 47, .35);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}

.aa-pwa-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.aa-pwa-toast-ic {
    flex: 0 0 auto;
    display: inline-flex;
}

.aa-pwa-toast-ic svg {
    width: 16px;
    height: 16px;
}

.aa-pwa-toast-msg {
    min-width: 0;
    word-break: break-word;
}

.aa-pwa-toast-success .aa-pwa-toast-ic {
    color: #4fd68c;
}

.aa-pwa-toast-error .aa-pwa-toast-ic {
    color: #ff8484;
}

.aa-pwa-toast-info .aa-pwa-toast-ic {
    color: var(--aa-pwa-accent);
}

/* ---------------- شیت پایین‌صفحه ---------------- */

.aa-pwa-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.aa-pwa-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 47, .48);
    opacity: 0;
    transition: opacity .25s ease;
}

.aa-pwa-backdrop.is-open {
    opacity: 1;
}

.aa-pwa-sheet {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    max-width: 560px;
    max-height: 84vh;
    background: var(--aa-pwa-card);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(16, 32, 47, .25);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .28s ease;
    padding-bottom: env(safe-area-inset-bottom);
}

.aa-pwa-sheet.is-open {
    transform: translateY(0);
}

.aa-pwa-sheet-handle {
    flex: 0 0 auto;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #dfe4ec;
    margin: 10px auto 0;
}

.aa-pwa-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--aa-pwa-border);
}

.aa-pwa-sheet-title {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-pwa-sheet-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: #f1f4f9;
    color: var(--aa-pwa-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-sheet-close:hover {
    background: #fdf1f1;
    color: var(--aa-pwa-error);
}

.aa-pwa-sheet-close svg {
    width: 14px;
    height: 14px;
}

.aa-pwa-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 18px;
}

.aa-pwa-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aa-pwa-sheet-action {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    padding: 12px 13px;
    text-align: right;
    color: var(--aa-pwa-text);
    font-size: 13px;
    font-weight: 700;
    transition: border-color .2s ease, background .2s ease;
}

.aa-pwa-sheet-action:hover {
    border-color: var(--aa-pwa-accent);
    background: #fffaf0;
}

.aa-pwa-sheet-action-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--aa-pwa-gradient);
    color: var(--aa-pwa-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-sheet-action-ic svg {
    width: 16px;
    height: 16px;
}

.aa-pwa-sheet-action-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------- مودال تأیید ---------------- */

.aa-pwa-modal-root {
    position: fixed;
    inset: 0;
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.aa-pwa-modal {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--aa-pwa-card);
    border-radius: var(--aa-pwa-radius);
    box-shadow: 0 12px 40px rgba(16, 32, 47, .3);
    padding: 20px 18px 16px;
    opacity: 0;
    transform: scale(.94) translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}

.aa-pwa-modal.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.aa-pwa-modal-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}

.aa-pwa-modal-text {
    font-size: 13px;
    color: var(--aa-pwa-muted);
    margin: 0 0 18px;
    word-break: break-word;
}

.aa-pwa-modal-actions {
    display: flex;
    gap: 10px;
}

.aa-pwa-modal-actions .aa-pwa-btn {
    flex: 1 1 0;
}

/* ---------------- اسپینر و اسکلتون ---------------- */

.aa-pwa-spinner {
    width: 26px;
    height: 26px;
    margin: 16px auto;
    border-radius: 50%;
    border: 3px solid #e3e8ef;
    border-top-color: var(--aa-pwa-accent);
    animation: aa-pwa-spin .8s linear infinite;
}

@keyframes aa-pwa-spin {
    to {
        transform: rotate(360deg);
    }
}

.aa-pwa-skel-list {
    display: flex;
    flex-direction: column;
}

.aa-pwa-skel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--aa-pwa-border);
}

.aa-pwa-skel-row:last-child {
    border-bottom: 0;
}

.aa-pwa-skel {
    border-radius: 7px;
    background: linear-gradient(90deg, #edf0f5 25%, #f6f8fb 50%, #edf0f5 75%);
    background-size: 200% 100%;
    animation: aa-pwa-shimmer 1.3s ease-in-out infinite;
    height: 12px;
    flex: 1 1 auto;
}

.aa-pwa-skel-chip {
    flex: 0 0 auto;
    width: 56px;
    height: 22px;
    border-radius: 999px;
}

.aa-pwa-skel-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.aa-pwa-skel-lg {
    height: 14px;
    width: 70%;
}

@keyframes aa-pwa-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ---------------- حالت خالی و خطا ---------------- */

.aa-pwa-empty {
    text-align: center;
    padding: 30px 14px;
}

.aa-pwa-empty-ic {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #f1f4f9;
    color: #b7bfcc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-empty-ic svg {
    width: 24px;
    height: 24px;
}

.aa-pwa-empty-text {
    font-size: 13px;
    color: var(--aa-pwa-muted);
    margin: 0;
}

.aa-pwa-error-card {
    text-align: center;
    padding: 26px 18px;
}

.aa-pwa-error-ic {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fdf0f0;
    color: var(--aa-pwa-error);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-error-ic svg {
    width: 26px;
    height: 26px;
}

.aa-pwa-error-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}

.aa-pwa-error-text {
    font-size: 12.5px;
    color: var(--aa-pwa-muted);
    margin: 0 0 16px;
    word-break: break-word;
}

/* ---------------- رپرهای صفحه‌ها ---------------- */

.aa-pwa-home,
.aa-pwa-compose,
.aa-pwa-tips,
.aa-pwa-more {
    display: block;
}

.aa-pwa-tree {
    display: block;
}

.aa-pwa-car-row,
.aa-pwa-history-row,
.aa-pwa-menu-item {
    cursor: pointer;
}

.aa-pwa-logout-btn {
    color: #ffd9d9;
}

.aa-pwa-logout-btn:hover {
    background: rgba(214, 69, 69, .35);
}

.aa-pwa-pick-label {
    min-width: 0;
}

.aa-pwa-wizard-steps {
    display: block;
}

.aa-pwa-wizard-step {
    display: block;
}

select.aa-pwa-select {
    appearance: none;
    -webkit-appearance: none;
}

textarea.aa-pwa-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.9;
}

/* ---------------- ویزارد: گروه‌های فرم ---------------- */

.aa-pwa-form-group {
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius);
    background: #fff;
    padding: 14px 12px 4px;
    margin-bottom: 14px;
}

.aa-pwa-group-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--aa-pwa-navy-1);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--aa-pwa-border);
}

/* فیلد تیپ تخت + دکمه «+ تیپ جدید» */
.aa-pwa-tip-select-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.aa-pwa-tip-select-row .aa-pwa-select {
    flex: 1 1 auto;
    min-width: 0;
}

.aa-pwa-tip-add-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------------- ویزارد: رسانه (شاخص/گالری/ویدیو) ---------------- */

.aa-pwa-media-single {
    width: 112px;
    height: 112px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-media-single--empty {
    border-style: dashed;
}

.aa-pwa-media-single-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aa-pwa-media-ph {
    color: #b7bfcc;
    display: inline-flex;
}

.aa-pwa-media-ph svg {
    width: 26px;
    height: 26px;
}

.aa-pwa-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.aa-pwa-thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.aa-pwa-thumb-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--aa-pwa-border);
    border-radius: 10px;
    background: var(--aa-pwa-field-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aa-pwa-thumb-remove {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    background: rgba(16, 32, 47, .72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.aa-pwa-thumb-remove--row {
    position: static;
    flex: 0 0 auto;
    background: #f1f4f9;
    color: var(--aa-pwa-muted);
}

.aa-pwa-thumb-remove:hover {
    background: var(--aa-pwa-error);
    color: #fff;
}

.aa-pwa-thumb-remove svg {
    width: 12px;
    height: 12px;
}

.aa-pwa-thumb-empty {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--aa-pwa-muted);
    background: #f6f8fb;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

.aa-pwa-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aa-pwa-video-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--aa-pwa-field-bg);
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    padding: 9px 11px;
}

.aa-pwa-video-row-ic {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--aa-pwa-gradient);
    color: var(--aa-pwa-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-video-row-ic svg {
    width: 15px;
    height: 15px;
}

.aa-pwa-video-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: right;
}

/* ---------------- ویزارد: ایرادات ---------------- */

.aa-pwa-defect-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.aa-pwa-defect-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    padding: 10px 12px;
}

.aa-pwa-defect-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid var(--aa-pwa-border);
    background: #fff;
}

span.aa-pwa-defect-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7bfcc;
}

span.aa-pwa-defect-thumb svg {
    width: 20px;
    height: 20px;
}

.aa-pwa-defect-main {
    flex: 1 1 auto;
    min-width: 0;
}

.aa-pwa-defect-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.aa-pwa-defect-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--aa-pwa-text);
    word-break: break-word;
}

.aa-pwa-badge-sev-minor {
    background: #e8f7ef;
    color: #187a44;
}

.aa-pwa-badge-sev-repair {
    background: #fff4d9;
    color: #8a6207;
}

.aa-pwa-badge-sev-replace {
    background: #fdf0f0;
    color: #b93a3a;
}

.aa-pwa-badge-sev-fault {
    background: #ece9f7;
    color: #5a4b9e;
}

.aa-pwa-defect-imgbox {
    width: 86px;
    height: 86px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aa-pwa-defect-imgbox--empty {
    border-style: dashed;
}

.aa-pwa-defect-imgbox-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------- ویزارد: کارشناسی رنگ ---------------- */

.aa-pwa-paint-locked {
    background: #fff4d9;
    border: 1px solid #f3d492;
    color: #8a6207;
    border-radius: var(--aa-pwa-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    margin: 0 0 10px;
}

.aa-pwa-paint-stage {
    position: relative;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: #f6f8fb;
    overflow: hidden;
    cursor: crosshair;
    margin-bottom: 12px;
    display: block;
    width: 100%;
}

.aa-pwa-paint-stage svg {
    width: 100%;
    height: auto;
    display: block;
}

.aa-pwa-paint-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aa-pwa-paint-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(16, 32, 47, .4);
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: transform .15s ease;
}

.aa-pwa-paint-marker:hover {
    transform: scale(1.15);
}

.aa-pwa-paint-statuses {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aa-pwa-paint-status {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--aa-pwa-border);
    border-radius: var(--aa-pwa-radius-sm);
    background: var(--aa-pwa-field-bg);
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--aa-pwa-text);
    text-align: right;
    transition: border-color .2s ease, background .2s ease;
}

.aa-pwa-paint-status.is-active {
    border-color: var(--aa-pwa-accent);
    background: #fffaf0;
}

.aa-pwa-paint-status-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(31, 39, 51, .2);
}

.aa-pwa-paint-status-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

/* ---------------- صفحه‌های بزرگ‌تر ---------------- */

@media (min-width: 480px) {
    .aa-pwa-quick-grid {
        gap: 10px;
    }

    .aa-pwa-gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------------- کاهش حرکت ---------------- */

@media (prefers-reduced-motion: reduce) {
    .aa-pwa-sheet,
    .aa-pwa-modal,
    .aa-pwa-backdrop,
    .aa-pwa-toast {
        transition: none;
    }

    .aa-pwa-spinner,
    .aa-pwa-skel {
        animation: none;
    }
}