/* ============================================================ AEHI Control Center — v7 UNIFIED CONTENT UI (2.10.1) استودیوی محتوا + میزکار محتوای کیوسک: یک رندر کامل، بدون پرش ============================================================ */ /* ---------- ۰) فونت‌ها و زوم — قابل تنظیم از تنظیمات مالک ---------- */ :root { --v7-scale: .84; } html { font-size: 15px; zoom: .92; } body { font-size: calc(.95rem * var(--v7-scale)); } h1 { font-size: calc(1.35rem * var(--v7-scale)); } h2 { font-size: calc(1.15rem * var(--v7-scale)); } h3 { font-size: calc(1rem * var(--v7-scale)); } h4 { font-size: calc(.88rem * var(--v7-scale)); } .nav-item { font-size: calc(.84rem * var(--v7-scale)); padding: 9px 12px; } .panel-head h3, .panel-head p, .data-row b, .data-row small, .metric-card b, .metric-card span, .center-card b, .center-card small { letter-spacing: -0.01em; } .panel-head h3 { font-size: calc(.96rem * var(--v7-scale)); } .panel-head p { font-size: calc(.76rem * var(--v7-scale)); } .metric-card b { font-size: calc(1.25rem * var(--v7-scale)); } .metric-card span { font-size: calc(.72rem * var(--v7-scale)); } .badge { font-size: calc(.66rem * var(--v7-scale)); } .primary-button, .secondary-button, .danger-button, .row-button { font-size: calc(.78rem * var(--v7-scale)); padding: 7px 13px; } .eyebrow { font-size: calc(.6rem * var(--v7-scale)); letter-spacing: .12em; } .table-wrap th, .fleet-table th { font-size: calc(.7rem * var(--v7-scale)); } .table-wrap td, .fleet-table td { font-size: calc(.76rem * var(--v7-scale)); } #pageTitle { font-size: calc(1.08rem * var(--v7-scale)); } #pageEyebrow { font-size: calc(.6rem * var(--v7-scale)); } .brand small { font-size: calc(.56rem * var(--v7-scale)); } .topbar { padding: 10px 18px; } .sidebar { width: 216px; } .main-content { margin-inline-start: 216px; } .view { padding: 16px 18px; gap: 14px; } .modal { max-width: 560px; } .data-row { padding: 10px 12px; } input, select, textarea { font-size: calc(.8rem * var(--v7-scale)); } .clock { font-size: calc(.78rem * var(--v7-scale)); } /* ---------- ۴) تم روشن — ریشه‌ای: override متغیرهای اصلی ---------- */ [data-theme="light"] { color-scheme: light; --bg: #e9edf4; --surface: #ffffff; --surface-2: #f3f5fa; --border: rgba(23, 32, 55, .14); --text: #1e2740; --muted: #59647d; --shadow: 0 10px 30px rgba(23, 32, 55, .08); } [data-theme="light"] body { background: radial-gradient(circle at 85% -15%, rgba(91,113,255,.1), transparent 38%), radial-gradient(circle at 10% 100%, rgba(26,215,207,.07), transparent 30%), var(--bg); color: var(--text); } [data-theme="light"] .main-content, [data-theme="light"] .view, [data-theme="light"] b, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] label, [data-theme="light"] td, [data-theme="light"] th, [data-theme="light"] li, [data-theme="light"] p { color: var(--text); } [data-theme="light"] small, [data-theme="light"] .muted, [data-theme="light"] .panel-head p, [data-theme="light"] .data-row small { color: var(--muted); } [data-theme="light"] .data-row, [data-theme="light"] .panel, [data-theme="light"] section.panel, [data-theme="light"] .metric-card, [data-theme="light"] .center-card, [data-theme="light"] .operation-tile, [data-theme="light"] .package-card { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="light"] .sidebar { background: linear-gradient(180deg, #f8f9fc, #f1f3f8); border-inline-end: 1px solid var(--border); } [data-theme="light"] .topbar { background: #f8f9fc; border-bottom: 1px solid var(--border); } [data-theme="light"] .brand { color: var(--text); } [data-theme="light"] .brand small { color: var(--muted); } [data-theme="light"] .fleet-table th { color: var(--muted); background: var(--surface-2); } [data-theme="light"] .fleet-table td { border-color: rgba(23,32,55,.07); color: var(--text); } [data-theme="light"] .fleet-row:hover td { background: #f2f5fc; } [data-theme="light"] .modal { background: var(--surface); color: var(--text); border: 1px solid var(--border); } [data-theme="light"] .modal-layer { background: rgba(28,36,55,.45); } [data-theme="light"] .v5-lightbox { background: rgba(233,237,244,.97); } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff; color: var(--text); border-color: var(--border); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #98a1b5; } [data-theme="light"] .primary-button { background: #4f46e5; color: #fff; } [data-theme="light"] .secondary-button { background: #edf0f6; color: var(--text); border-color: rgba(23,32,55,.12); } [data-theme="light"] .secondary-button:hover { background: #e2e7f1; } [data-theme="light"] .danger-button { background: #fde9e7; color: #a92c1d; border-color: rgba(169,44,29,.25); } [data-theme="light"] .text-button { color: #4f46e5; } [data-theme="light"] .toast { background: #26314b; color: #fff; } [data-theme="light"] .nav-item { color: #46506a; } [data-theme="light"] .nav-item:hover { background: #eceff6; color: var(--text); } [data-theme="light"] .nav-item.active { background: rgba(79,70,229,.1); color: #4f46e5; } [data-theme="light"] .nav-item.active i { color: #4f46e5; } [data-theme="light"] .badge.online { background: rgba(16,152,105,.13); color: #0d8a62; } [data-theme="light"] .badge.offline { background: rgba(178,45,28,.11); color: #a92c1d; } [data-theme="light"] .badge.rooted, [data-theme="light"] .badge.pending { background: rgba(176,74,10,.12); color: #a05208; } [data-theme="light"] .empty-state { color: #46506a; } [data-theme="light"] .warning-note { color: #7d5406; background: #fbf3df; border-color: rgba(160,82,8,.22); } [data-theme="light"] .login-layer { background: linear-gradient(160deg, #e9edf4, #dce2ee); } [data-theme="light"] .login-card { background: #fbfcfe; color: var(--text); } [data-theme="light"] .v6-ripple { background: rgba(79,70,229,.28); } [data-theme="light"] .studio-empty, [data-theme="light"] .content-desk-empty { color: #46506a; background: #eff2f8; } [data-theme="light"] .v5-icon-btn { background: #edf0f6; border-color: var(--border); color: var(--text); } [data-theme="light"] .health-row, [data-theme="light"] .clock { color: var(--text); } [data-theme="light"] .language-button { background: #edf0f6; color: var(--text); } [data-theme="light"] .skeleton-card, [data-theme="light"] .v6-skeleton { background: linear-gradient(100deg, rgba(24,34,60,.05) 40%, rgba(24,34,60,.11) 50%, rgba(24,34,60,.05) 60%); background-size: 200% 100%; } [data-theme="light"] .reserved-creator { background: var(--surface); border-color: rgba(79,70,229,.25); } [data-theme="light"] .reserved-creator-grid input, [data-theme="light"] .reserved-creator-grid select, [data-theme="light"] .reserved-creator-grid textarea { background: #ffffff; border-color: var(--border); color: var(--text); } [data-theme="light"] .v7-creator-divider::after { background: rgba(23,32,55,.12); } /* ============================================================ نیازمند رسیدگی — کارت‌های گروهی هماهنگ با تم سایت ============================================================ */ .v7-attention-group { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,113,129,.22); background: linear-gradient(150deg, rgba(255,113,129,.10), rgba(255,113,129,.03) 45%, transparent); padding: 13px 14px 12px; margin-bottom: 12px; animation: v6Stagger .4s var(--v6-ease) both; } .v7-attention-group + .v7-attention-group { animation-delay: .06s; } .v7-attention-group::before { content: ''; position: absolute; inset-inline-start: 0; top: 14%; height: 72%; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #ff7181, #ff9f43); } .v7-attention-group header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .v7-attention-group header i { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,113,129,.16); } .v7-attention-group header i::after { content: '!'; color: #ff8a97; font-weight: 900; font-size: .95rem; } .v7-attention-group header b { font-size: .86rem; font-weight: 800; } .v7-attention-group header span { margin-inline-start: auto; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,113,129,.14); color: #ff8a97; white-space: nowrap; } .v7-attention-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; } .attention-kiosk { display: flex; flex-direction: column; gap: 3px; text-align: start; cursor: pointer; font: inherit; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 10px 13px; background: rgba(255,255,255,.045); color: inherit; position: relative; overflow: hidden; transition: transform .16s var(--v6-ease), border-color .16s, background .16s, box-shadow .16s; } .attention-kiosk::after { content: '→'; position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .16s, inset-inline-end .16s; color: var(--accent, #6f7cff); font-weight: 800; } .attention-kiosk:hover { border-color: var(--accent, #6f7cff); background: rgba(111,124,255,.09); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(111,124,255,.4); } .attention-kiosk:hover::after { opacity: 1; inset-inline-end: 9px; } .attention-kiosk b { font-size: .8rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 18px; } .attention-kiosk small { font-size: .71rem; opacity: .72; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 18px; } [data-theme="light"] .v7-attention-group { border-color: rgba(169,44,29,.2); background: linear-gradient(150deg, rgba(255,113,129,.08), rgba(255,113,129,.02) 45%, #fbfcfe); } [data-theme="light"] .v7-attention-group header span { background: rgba(178,45,28,.1); color: #a92c1d; } [data-theme="light"] .attention-kiosk { background: #ffffff; border-color: rgba(23,32,55,.1); } [data-theme="light"] .attention-kiosk:hover { border-color: #4f46e5; } /* ============================================================ v7.2 — تنظیمات مالک (لانچر + APK) + انیمیشن ============================================================ */ .v7-owner-launcher { border-radius: 18px; padding: 16px; background: linear-gradient(135deg, rgba(111,124,255,.14), rgba(42,216,212,.08)); border: 1px solid rgba(111,124,255,.28); } .v7-owner-launcher header h3 { margin: 3px 0 0; } .v7-zoom-bar { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; } .v7-zoom-bar > span { font-size: .76rem; opacity: .75; font-weight: 600; } .v7-owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; } .v7-owner-card { display: flex; align-items: center; gap: 10px; text-align: start; cursor: pointer; font: inherit; color: inherit; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 11px 12px; background: rgba(255,255,255,.05); transition: transform .16s var(--v6-ease), border-color .16s, box-shadow .16s; animation: v6Stagger .4s var(--v6-ease) both; } .v7-owner-card:nth-child(1) { animation-delay: .02s; } .v7-owner-card:nth-child(2) { animation-delay: .06s; } .v7-owner-card:nth-child(3) { animation-delay: .1s; } .v7-owner-card:nth-child(4) { animation-delay: .14s; } .v7-owner-card:nth-child(5) { animation-delay: .18s; } .v7-owner-card:nth-child(6) { animation-delay: .22s; } .v7-owner-card:hover { transform: translateY(-3px); border-color: var(--accent, #6f7cff); box-shadow: 0 10px 26px -12px rgba(111,124,255,.45); } .v7-owner-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: rgba(111,124,255,.16); color: var(--accent, #6f7cff); font-size: 1rem; } .v7-owner-card b { display: block; font-size: .8rem; } .v7-owner-card small { opacity: .6; font-size: .68rem; line-height: 1.5; display: block; } .v7-owner-card em { margin-inline-start: auto; opacity: .4; font-style: normal; } .v7-owner-card:hover em { opacity: 1; } .v7-apk-links, .v7-apk-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .v7-apk-links > b, .v7-apk-files > b { font-size: .8rem; opacity: .85; } .v7-apk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); } .v7-apk-row.broken { border-color: rgba(255,113,129,.5); } .v7-apk-row b { font-size: .78rem; } .v7-apk-row small { opacity: .6; font-size: .7rem; flex: 1; min-width: 140px; } .v7-apk-slug { font-family: monospace; font-size: .74rem; padding: 3px 8px; border-radius: 7px; background: rgba(111,124,255,.12); color: var(--accent, #6f7cff); } .v7-apk-actions { display: inline-flex; gap: 6px; align-items: center; } .v7-apk-form { padding: 12px; border-radius: 14px; border: 1px dashed rgba(111,124,255,.3); margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; } .v7-apk-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .v7-apk-form label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; opacity: .9; } .v7-apk-form input, .v7-apk-form select { min-height: 34px; } .v7-apk-upload { justify-content: center; } #ownerSettingsForm section { border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.028); padding: 14px 16px; margin-bottom: 12px; animation: v6Stagger .4s var(--v6-ease) both; } #ownerSettingsForm section h3 { margin: 0 0 6px; font-size: .92rem; } #ownerSettingsForm section p.muted { margin: 0 0 10px; font-size: .76rem; } #ownerSettingsForm section p.muted code { padding: 1px 6px; border-radius: 6px; background: rgba(111,124,255,.12); font-size: .7rem; } [data-theme="light"] .v7-owner-launcher { background: linear-gradient(135deg, rgba(79,70,229,.09), rgba(42,216,212,.06)); border-color: rgba(79,70,229,.25); } [data-theme="light"] .v7-zoom-bar { border-top-color: rgba(23,32,55,.1); } [data-theme="light"] .v7-owner-card { background: #ffffff; border-color: rgba(23,32,55,.1); color: var(--text); } [data-theme="light"] .v7-owner-card:hover { border-color: #4f46e5; } [data-theme="light"] .v7-apk-row { background: #ffffff; border-color: rgba(23,32,55,.1); } [data-theme="light"] .v7-apk-form { border-color: rgba(79,70,229,.3); } [data-theme="light"] #ownerSettingsForm section { background: #f9fafd; border-color: rgba(23,32,55,.09); } /* ---------- سبک کارت‌های فرم رزرو برای کل سایت ---------- */ input, select, textarea { border-radius: 10px; transition: border-color .15s, box-shadow .15s, background .15s; } input:focus, select:focus, textarea:focus { outline: 0 !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(111,124,255,.16) !important; } .panel, .center-card, .metric-card, .package-card, .operation-tile { border-radius: 16px; } .primary-button, .secondary-button, .danger-button, .row-button { border-radius: 11px; } .data-row { border-radius: 12px; } /* ---------- وضعیت آنلاین/آفلاین رنگی و پررنگ ---------- */ .v5-status { gap: 7px; } .v5-status.is-online { color: #17c983; font-weight: 800; } .v5-status.is-offline { color: #ff6b7a; font-weight: 800; } .v5-status.is-online .v5-dot { background: #17c983; box-shadow: 0 0 8px rgba(23,201,131,.6); } .v5-status.is-offline .v5-dot { background: #ff6b7a; box-shadow: 0 0 8px rgba(255,107,122,.5); } [data-theme="light"] .v5-status.is-online { color: #0d8a5c; } [data-theme="light"] .v5-status.is-offline { color: #c62a3a; } .v5-lastseen { font-weight: 600; } /* مصرف: دو ستون جدا — عامل و کل */ .usage-agent-cell { font-size: .76rem; font-weight: 700; color: var(--cyan); white-space: nowrap; } .usage-total-cell { font-size: .74rem; font-weight: 600; opacity: .8; white-space: nowrap; } [data-theme="light"] .usage-agent-cell { color: #0b8f8c; } .fleet-table td { vertical-align: middle; } [data-theme="light"] .fleet-row td { color: var(--text); } [data-theme="light"] .fleet-row .device-cell b { color: var(--text); } [data-theme="light"] .fleet-row .device-cell small { color: var(--muted); } [data-theme="light"] .category-location b { color: var(--text); } [data-theme="light"] .category-location small, [data-theme="light"] .v5-lastseen { color: var(--muted); } [data-theme="light"] .badge { color: #3a445c; } [data-theme="light"] .badge.rooted { color: #a05208; } [data-theme="light"] .badge.online { color: #0d8a62; } [data-theme="light"] .badge.offline { color: #a92c1d; } [data-theme="light"] .badge.settings-system, [data-theme="light"] .kiosk-edition-badge { color: #46506a; background: rgba(70,80,106,.12); } [data-theme="light"] .row-button.open-device { background: #4f46e5; color: #ffffff; border-color: transparent; } [data-theme="light"] .row-button.open-device svg { color: #ffffff; } [data-theme="light"] .v5-icon-btn.accent { background: rgba(79,70,229,.12); color: #4f46e5; border-color: rgba(79,70,229,.35); } [data-theme="light"] .v5-icon-btn.accent:hover { background: #4f46e5; color: #fff; } [data-theme="light"] .version-badge { color: var(--muted); } /* ---------- فوتر ---------- */ .control-footer { text-align: center; } .control-footer p { display: inline-flex; align-items: center; gap: 8px; justify-content: center; } /* ---------- ۱) کارت فایل/پوشه استودیو ---------- */ .v7-studio { display: flex; flex-direction: column; gap: 14px; } .v7-studio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(111,124,255,.12), rgba(42,216,212,.07)); border: 1px solid rgba(111,124,255,.22); } .v7-studio-head h3 { margin: 2px 0 4px; font-size: 1.12rem; } .v7-studio-head p { margin: 0; opacity: .7; font-size: .82rem; } .v7-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .v7-pathbar { display: flex; align-items: center; gap: 8px; font-size: .8rem; opacity: .75; } .v7-section-title { margin: 4px 0 2px; font-size: .85rem; opacity: .8; } .v7-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .v7-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); transition: transform .18s var(--v6-ease), box-shadow .18s var(--v6-ease), border-color .18s; } .v7-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(80,90,255,.35); z-index: 2; } .v7-card.selected { border-color: var(--accent, #6f7cff); box-shadow: 0 0 0 2px var(--accent, #6f7cff), 0 10px 26px -12px rgba(111,124,255,.5); } .v7-card.processing { opacity: .65; } .v7-folder .v7-card-thumb { display: grid; place-items: center; aspect-ratio: 16/10; background: rgba(240,180,77,.08); color: #f0b44d; } .v7-folder .v7-card-thumb svg { width: 34px; height: 34px; } .v7-card-select { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(10,14,25,.72); backdrop-filter: blur(6px); cursor: pointer; transition: background .15s; } .v7-card-select:hover { background: rgba(10,14,25,.95); } .v7-card-select input { position: absolute; opacity: 0; pointer-events: none; } .v7-card-select svg { width: 14px; height: 14px; opacity: 0; transition: opacity .12s; } .v7-card-select input:checked + span svg { opacity: 1; color: #43d692; } .v7-card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/10; border: 0; padding: 0; background: rgba(0,0,0,.3); cursor: zoom-in; overflow: hidden; } .v7-card-thumb img, .v7-card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .v7-card-thumb em { position: absolute; bottom: 6px; inset-inline-end: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-style: normal; background: rgba(10,14,25,.75); color: #fff; } .v7-card-fallback { display: grid; place-items: center; height: 100%; opacity: .4; } .v7-card-fallback svg { width: 30px; height: 30px; } .v7-card-body { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .v7-card-body b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v7-card-body small { opacity: .6; font-size: .7rem; } .v7-state { font-size: .68rem; font-weight: 700; } .v7-state.ready { color: #43d692; } .v7-state.pending { color: #ffc36b; } .v7-state.failed { color: #ff7181; } .v7-card-actions { display: flex; gap: 2px; padding: 4px 8px 8px; opacity: 0; transition: opacity .16s; } .v7-card:hover .v7-card-actions, .v7-card:focus-within .v7-card-actions { opacity: 1; } .v7-card-actions .text-button { font-size: .72rem; padding: 3px 6px; } /* ---------- ۲) dock انتخاب ---------- */ .v7-dock { position: sticky; bottom: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-radius: 14px; background: rgba(16,22,38,.92); backdrop-filter: blur(10px); border: 1px solid rgba(111,124,255,.3); opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .22s var(--v6-ease); } .v7-dock.has-items { opacity: 1; pointer-events: auto; transform: none; } .v7-dock-list { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; } .v7-dock-item { display: inline-flex; align-items: center; gap: 5px; max-width: 190px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; background: rgba(255,255,255,.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v7-dock-item button { border: 0; background: transparent; color: #ff7181; cursor: pointer; font-size: .85rem; padding: 0 2px; } .v7-dock-more { font-size: .72rem; opacity: .6; } .v7-dock-actions { display: flex; gap: 10px; align-items: center; } /* ---------- ۳) میزکار محتوا (حالت کامل‌شدهٔ v6) ---------- */ .v7-desk-panes { display: flex; flex-direction: column; } .v7-desk-publish { margin-top: 12px; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px dashed rgba(255,255,255,.16); } .v7-desk-publish label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; opacity: .85; } .v7-desk-publish input { min-width: 200px; } .content-queue-chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: rgba(111,124,255,.14); color: var(--accent, #6f7cff); font-size: .8rem; } .v7-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; } .v7-loading span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #6f7cff); display: inline-block; animation: v7Bounce 1s infinite ease-in-out; } .v7-loading span:nth-child(2) { animation-delay: .12s; } .v7-loading span:nth-child(3) { animation-delay: .24s; } .v7-loading span + span { margin-inline-start: 6px; } .v7-loading p { display: block; margin: 8px 0 0; opacity: .6; font-size: .84rem; } @keyframes v7Bounce { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } /* ---------- ۴) تم روشن ---------- */ [data-theme="light"] .v7-card { background: #fff; border-color: rgba(23,32,55,.1); } [data-theme="light"] .v7-card-select { background: rgba(255,255,255,.88); } [data-theme="light"] .v7-dock { background: rgba(255,255,255,.95); } [data-theme="light"] .v7-studio-head { background: linear-gradient(135deg, rgba(111,124,255,.09), rgba(42,216,212,.05)); } [data-theme="light"] .v7-desk-publish { background: rgba(0,0,0,.02); border-color: rgba(23,32,55,.13); } @media (max-width: 720px) { .v7-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } .v7-studio-head { flex-direction: column; } .v7-dock { position: fixed; inset-inline: 10px; bottom: 8px; z-index: 60; } } /* ============================================================ v7.1 — میزکار محتوای دوستونی + گروه‌های محتوایی استودیو ============================================================ */ /* ---------- ستون‌های میزکار ---------- */ .v7-desk-columns { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; align-items: start; } @media (max-width: 1020px) { .v7-desk-columns { grid-template-columns: 1fr; } } .v7-desk-col { border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .v7-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .v7-col-head > b { font-size: .88rem; } .v7-col-head small { opacity: .6; font-size: .72rem; } .v7-source-pills { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); } .v7-source-pills .desk-segment { font-size: .74rem; padding: 5px 12px; } .v7-hint { margin: 6px 2px 0; font-size: .72rem; opacity: .55; } /* گروه‌ها در کتابخانه */ .v7-group-list { display: flex; flex-direction: column; gap: 8px; } .v7-group-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .16s, background .16s, transform .16s; } .v7-group-card:hover { border-color: rgba(111,124,255,.45); transform: translateX(-2px); } .v7-group-card.active { border-color: var(--accent, #6f7cff); background: rgba(111,124,255,.1); } .v7-group-card input { position: absolute; opacity: 0; } .v7-group-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: rgba(111,124,255,.14); color: var(--accent, #6f7cff); font-size: 1rem; } .v7-group-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .v7-group-info b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v7-group-info small { opacity: .6; font-size: .7rem; } .v7-group-card em { font-size: .7rem; opacity: .65; font-style: normal; } .v7-group-card.active em { color: var(--accent, #6f7cff); opacity: 1; font-weight: 700; } /* صف نمایش */ .v7-queue-body { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; padding-inline-end: 2px; cursor: grab; } .v7-queue-body .content-queue-row { cursor: default; } .v7-queue-body .v4-drag-handle { cursor: grab; } /* کتابخانهٔ شبیه استودیو: درخت پوشه‌ها داخل ستون کتابخانهٔ میزکار محتوا */ .v7-slot-folder-tree { padding: 8px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.028); margin-bottom: 10px; } .v7-slot-folder-tree .v4-sidebar-title { margin-bottom: 4px; } .v7-slot-folder-tree .v8-tree-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 6px 8px; border-radius: 8px; color: inherit; background: transparent; border: 0; cursor: pointer; } .v7-slot-folder-tree .v8-tree-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v7-slot-folder-tree .v8-tree-item small { opacity: .55; font-size: .72rem; } .v7-slot-folder-tree .v8-tree-item:hover { background: rgba(90,140,255,.12); } .v7-slot-folder-tree .v8-tree-item.active { background: linear-gradient(135deg, rgba(47,123,255,.28), rgba(41,175,255,.18)); } /* جابه‌جایی صف با درگ: ردیف در حال کشیده + خط راهنمای جای رهاسازی */ .v7-queue-body .content-queue-row[draggable="true"] { cursor: grab; } .v7-queue-body .content-queue-row.v7-dragging { opacity: .45; outline: 2px dashed var(--accent, #6f7cff); } .v7-queue-body .content-queue-row.v7-drop-above { box-shadow: 0 -3px 0 0 var(--accent, #6f7cff); } .v7-queue-body .content-queue-row.v7-drop-below { box-shadow: 0 3px 0 0 var(--accent, #6f7cff); } /* ⏱ تنظیم زمان هر اسلاید صف — نشانگر کوچک کنار دکمه‌ها */ .v7-row-duration { min-width: 64px; font-size: 11px; letter-spacing: 0; } .v7-queue-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .v7-queue-body .v4-drag-handle:active { cursor: grabbing; } .v7-queue-footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); } .v7-publish-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .v7-publish-row label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; opacity: .85; } .v7-publish-row input { min-width: 150px; } .v7-publish-row small { width: 100%; opacity: .55; font-size: .7rem; } /* ---------- استودیو: گروه‌های محتوا ---------- */ .v7-groups-layout { display: grid; grid-template-columns: 250px 1fr; gap: 12px; align-items: start; } @media (max-width: 900px) { .v7-groups-layout { grid-template-columns: 1fr; } } .v7-groups-side { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); max-height: 64vh; overflow: auto; } .v7-group-nav { display: flex; align-items: center; gap: 10px; text-align: start; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 9px 10px; border-radius: 11px; transition: background .15s, border-color .15s; } .v7-group-nav:hover { background: rgba(255,255,255,.05); } .v7-group-nav.active { background: rgba(111,124,255,.12); border-color: rgba(111,124,255,.4); } .v7-group-nav > span:first-child { color: var(--accent, #6f7cff); } .v7-group-nav b { display: block; font-size: .82rem; } .v7-group-nav small { opacity: .6; font-size: .7rem; } .v7-groups-editor { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .v7-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(111,124,255,.1), rgba(42,216,212,.06)); border: 1px solid rgba(111,124,255,.2); } .v7-groups-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; } @media (max-width: 1020px) { .v7-groups-columns { grid-template-columns: 1fr; } } .v7-editor-picker, .v7-editor-sequence { border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .v7-editor-sequence .v7-seq-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; } .v7-picker-grid { max-height: 56vh; overflow: auto; } .v7-picker-item { cursor: pointer; position: relative; } .v7-picker-item input { display: none; } .v7-picker-check { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(10,14,25,.7); color: #43d692; font-weight: 700; font-size: .8rem; } .v7-targets { border-radius: 14px; border: 1px dashed rgba(111,124,255,.3); background: rgba(111,124,255,.05); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .v7-targets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 720px) { .v7-targets-grid { grid-template-columns: 1fr; } } .v7-targets-grid > div { display: flex; flex-direction: column; gap: 4px; max-height: 34vh; overflow: auto; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.03); } .v7-target-title { font-size: .78rem; margin: 2px 4px; opacity: .8; } .v7-target-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; cursor: pointer; font-size: .78rem; transition: background .13s; } .v7-target-row:hover { background: rgba(255,255,255,.05); } .v7-target-row input { accent-color: var(--accent, #6f7cff); } .v7-target-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v7-target-row small { opacity: .5; font-size: .68rem; } .v7-targets-actions { display: flex; justify-content: flex-start; } .v7-seq-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); } .v7-seq-row .v4-drag-handle { cursor: grab; opacity: .55; border: 0; background: transparent; color: inherit; font-size: 1rem; padding: 2px 4px; } .v7-seq-row .v4-drag-handle:active { cursor: grabbing; opacity: 1; } .v7-seq-row.drop-target { border-color: var(--accent, #6f7cff); background: rgba(111,124,255,.1); } .v7-seq-row.dragging { opacity: .5; } /* ---------- تم روشن (سطوح v7) ---------- */ [data-theme="light"] .v7-desk-col, [data-theme="light"] .v7-groups-side, [data-theme="light"] .v7-editor-picker, [data-theme="light"] .v7-editor-sequence { background: #f6f8fc; border-color: rgba(23,32,55,.09); } [data-theme="light"] .v7-group-card, [data-theme="light"] .v7-seq-row { background: #ffffff; border-color: rgba(23,32,55,.1); } [data-theme="light"] .v7-source-pills { background: rgba(0,0,0,.05); } [data-theme="light"] .v7-targets { background: rgba(111,124,255,.06); } [data-theme="light"] .v7-dock { background: rgba(255,255,255,.95); } /* ---------- دسته‌ها و عامل‌ها ---------- */ .v7-ui-cust-grid { display: flex; flex-direction: column; gap: 12px; } .v7-ui-cust-grid > label { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; font-weight: 600; } .v7-ui-cust-grid input { min-height: 36px; } .v7-tag-list { display: flex; flex-wrap: wrap; gap: 6px; } .v7-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .76rem; background: rgba(111,124,255,.12); border: 1px solid rgba(111,124,255,.3); } .v7-tag button { border: 0; background: transparent; color: var(--red); cursor: pointer; font-size: .9rem; padding: 0 2px; } .v7-check-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- صفحه‌بندی فایل‌ها ---------- */ .v7-media-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; padding: 8px 0; } .v7-media-pagination span { font-size: .76rem; opacity: .7; } .v7-media-pagination button:disabled { opacity: .4; cursor: not-allowed; } /* ---------- تیک انتخاب کیوسک — همیشه قابل کلیک و دیده‌شده ---------- */ .fleet-row .device-check { width: 17px; height: 17px; accent-color: var(--accent, #6f7cff); cursor: pointer; pointer-events: auto; position: relative; z-index: 3; transform: scale(1.15); } .fleet-row td:first-child { position: relative; z-index: 3; } /* ============================================================ صفحهٔ ورود مدرن + کپچای ریاضی ============================================================ */ .login-layer { display: grid; place-items: center; } .v7-login { width: min(400px, 92vw); padding: 34px 30px 24px !important; border-radius: 24px !important; background: linear-gradient(165deg, rgba(30,38,60,.96), rgba(16,22,38,.98)) !important; border: 1px solid rgba(111,124,255,.28) !important; box-shadow: 0 34px 90px -20px rgba(0,0,0,.65) !important; animation: v6ViewIn .4s var(--v6-ease) both; } .v7-login-hero { text-align: center; margin-bottom: 20px; } .v7-login-hero .brand-mark { width: 54px; height: 54px; font-size: 26px; border-radius: 17px; margin: 0 auto 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--cyan)); box-shadow: 0 12px 30px rgba(80,112,255,.4); } .v7-login-hero h2 { margin: 0 0 4px; font-size: 1.25rem; } .v7-login-hero p { margin: 0; opacity: .6; font-size: .8rem; } .v7-login form { display: flex; flex-direction: column; gap: 14px; } .v7-login label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; opacity: .9; } .v7-login input { min-height: 44px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: inherit; transition: border-color .15s, box-shadow .15s, background .15s; } .v7-login input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(111,124,255,.2) !important; background: rgba(255,255,255,.09); } .v7-login .full { width: 100%; min-height: 46px; font-size: .92rem; margin-top: 4px; } .v7-login .form-error { color: var(--red); font-size: .78rem; min-height: 18px; margin: 0; text-align: center; } .v7-login-foot { text-align: center; margin-top: 18px; opacity: .45; } .v7-captcha { padding: 12px; border-radius: 12px; background: rgba(111,124,255,.1); border: 1px dashed rgba(111,124,255,.4); } .v7-captcha > span { font-size: .8rem; display: block; margin-bottom: 8px; } .v7-captcha > span b { color: var(--cyan); font-size: .95rem; letter-spacing: 1px; } .v7-captcha input { width: 100%; } [data-theme="light"] .v7-login { background: linear-gradient(165deg, #ffffff, #f2f4fb) !important; border-color: rgba(79,70,229,.25) !important; box-shadow: 0 30px 70px -22px rgba(23,32,55,.3) !important; } [data-theme="light"] .v7-login input { background: #ffffff; border-color: rgba(23,32,55,.16); color: var(--text); } [data-theme="light"] .v7-login-foot { opacity: .55; } /* ---------- اسکرین‌شات جزئیات جایگاه + placeholderهای سیاه ---------- */ .slot-detail-shot { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(111,124,255,.06); } .slot-detail-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 12px; align-items: start; } @media (max-width: 720px) { .slot-detail-grid { grid-template-columns: 1fr; } } .shot-placeholder, .slot-shot, .shot-thumb { background: rgba(111,124,255,.08); color: rgba(111,124,255,.8); border: 1px dashed rgba(111,124,255,.35); display: grid; place-items: center; overflow: hidden; } .shot-placeholder { width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: 1px dashed rgba(255,255,255,.15); font-size: 1.2rem; } .shot-thumb, .slot-shot { aspect-ratio: 16/9; width: 64px; border-radius: 8px; } .shot-thumb img, .slot-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* خطای لود تصویر → جای placeholder به‌جای سیاهی */ img.shot-thumb, img.slot-shot, img.slot-detail-shot { transition: opacity .2s; } img.shot-thumb.on-error, img.slot-shot.on-error, img.slot-detail-shot.on-error { visibility: hidden; } /* ---------- کادر اسکرین‌شات صفحه کیوسک — دقیق و کامل داخل کادر ---------- */ .hero-shot-button { max-width: 420px !important; border-radius: 14px !important; overflow: hidden; } .hero-shot, .hero-shot-button img { width: 100% !important; height: auto !important; max-height: 260px !important; object-fit: cover !important; display: block !important; background: rgba(111,124,255,.06); } div.hero-shot.shot-placeholder { width: 100% !important; max-width: 420px; aspect-ratio: 16/9; height: auto !important; } /* ---------- 2.10.2: bulk bar, processing percent, error notes ---------- */ .v7-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 14px; margin: 10px 0; border: 1px dashed rgba(80,150,255,.45); border-radius: 12px; background: linear-gradient(135deg, rgba(41,120,255,.10), rgba(41,175,255,.06)); } .v7-bulk-bar b { font-size: .84rem; white-space: nowrap; } .v7-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; } .v7-bulk-bar .text-button { white-space: nowrap; } .v7-progress { display: flex; align-items: center; gap: 6px; margin-top: 4px; width: 100%; font-size: .7rem; font-weight: 700; color: #6fd1ff; } .v7-progress i { flex: 1; height: 5px; border-radius: 4px; display: block; background: linear-gradient(90deg, #2f7bff, #29afff); box-shadow: 0 0 6px rgba(47,123,255,.5); transition: width .5s ease; } .v7-fail-note { display: block; margin-top: 3px; color: #ff7181; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; cursor: help; } .studio-partial-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(255,190,80,.5); background: rgba(255,180,60,.10); color: #ffc36b; font-size: .84rem; } /* ===================== v8 STUDIO EXPLORER — Windows-style ===================== */ .v8-studio { display: flex; flex-direction: column; gap: 12px; } .v8-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid rgba(120,150,220,.18); border-radius: 14px; background: linear-gradient(180deg, rgba(30,42,70,.55), rgba(20,30,52,.45)); } [data-theme="light"] .v8-toolbar { background: #f4f7fd; border-color: #dde5f2; } .v8-crumb { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; flex-wrap: wrap; } .v8-crumb-sep { opacity: .45; } .v8-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .v8-tools .primary-button { padding: 8px 16px; display: inline-flex; align-items: center; gap: 7px; } /* چیدمان سه‌ستونی: درخت | گرید */ .v8-explorer { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 12px; align-items: start; } @media (max-width: 980px) { .v8-explorer { grid-template-columns: 1fr; } .v8-sidebar { position: static; max-height: 220px; } } .v8-sidebar { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid rgba(120,150,220,.16); border-radius: 14px; background: rgba(24,34,58,.5); max-height: calc(100vh - 120px); overflow: auto; } [data-theme="light"] .v8-sidebar { background: #fbfcfe; } .v8-tree-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .84rem; transition: background .15s ease; } .v8-tree-item i { display: inline-flex; width: 17px; height: 17px; opacity: .75; flex: none; } .v8-tree-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v8-tree-item small { opacity: .55; font-size: .72rem; } .v8-tree-item:hover { background: rgba(90,140,255,.12); } .v8-tree-item.active { background: linear-gradient(135deg, rgba(47,123,255,.28), rgba(41,175,255,.18)); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(90,150,255,.35); } /* گرید فایل‌ها */ .v8-main { position: relative; min-height: 320px; } .v8-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } .v8-folder-grid { margin-bottom: 14px; } .v8-folder-card { cursor: pointer; text-align: start; } .v8-file-card { cursor: pointer; transition: transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s ease, border-color .18s ease; } .v8-file-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 30px rgba(10,20,50,.35); z-index: 2; } .v8-file-card:focus-visible { outline: 2px solid #29afff; outline-offset: 2px; } .v8-file-card.selected { border-color: #2f7bff; box-shadow: 0 0 0 2px rgba(47,123,255,.35), 0 14px 30px rgba(10,20,50,.3); } .v8-file-card .v7-state { display: inline-block; margin-top: 4px; } /* اورلی کشیدن فایل روی گرید */ .v8-main.drag-over .v8-dropzone-overlay, .v8-dropzone-overlay.force-show { opacity: 1; pointer-events: auto; transform: scale(1); } .v8-dropzone-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; text-align: center; gap: 4px; border-radius: 16px; border: 3px dashed #2f7bff; background: rgba(18,32,64,.82); backdrop-filter: blur(3px); color: #fff; opacity: 0; pointer-events: none; transform: scale(.985); transition: opacity .18s ease, transform .18s ease; } .v8-dropzone-overlay b { font-size: 1.15rem; } .v8-dropzone-overlay small { opacity: .75; } /* نوار آپلود شناور پایین صفحه */ .v8-upload-tray { position: fixed; z-index: 320; inset-inline-start: 18px; bottom: 18px; width: min(400px, calc(100vw - 36px)); border-radius: 16px; border: 1px solid rgba(100,150,255,.3); overflow: hidden; background: rgba(16,26,48,.96); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(5,10,30,.5); animation: v8TrayIn .35s cubic-bezier(.2,.9,.3,1.25); } @keyframes v8TrayIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } } .v8-upload-tray header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg, rgba(47,123,255,.25), rgba(41,175,255,.12)); cursor: pointer; } .v8-upload-tray header b { font-size: .86rem; } .v8-upload-tray header span { background: #2f7bff; color: #fff; border-radius: 20px; padding: 1px 8px; font-size: .72rem; } .v8-upload-tray header small { opacity: .7; margin-inline-start: auto; } .v8-upload-rows { max-height: 260px; overflow: auto; display: flex; flex-direction: column; } .v8-upload-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 10px 14px; border-top: 1px solid rgba(120,150,220,.12); } .v8-up-info { min-width: 0; grid-column: 1 / -1; display: grid; gap: 2px; } .v8-up-info b { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v8-up-info small { opacity: .65; font-size: .72rem; } .v8-up-note.done { color: #43d692; opacity: 1; } .v8-up-note.failed { color: #ff7181; opacity: 1; } .v8-up-meter { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; } .v8-up-meter i { flex: 1; height: 6px; border-radius: 4px; display: block; background: linear-gradient(90deg,#2f7bff,#29afff); transition: width .3s ease; box-shadow: 0 0 8px rgba(47,123,255,.45); } .v8-up-meter.done i { background: linear-gradient(90deg,#2fd977,#43d692); box-shadow: 0 0 8px rgba(47,217,119,.4); } .v8-up-meter.failed i { background: linear-gradient(90deg,#b42318,#ff7181); } .v8-up-actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; } .v8-upload-tray footer { padding: 6px 14px; border-top: 1px solid rgba(120,150,220,.12); text-align: end; } /* پنل پیش‌نمایش کشویی سمت چپ */ .v8-preview-backdrop { position: fixed; inset: 0; z-index: 330; background: rgba(4,8,20,.45); opacity: 0; transition: opacity .25s ease; } .v8-preview-backdrop.open { opacity: 1; } .v8-preview-panel { position: fixed; z-index: 331; top: 0; bottom: 0; left: 0; width: min(430px, 92vw); background: linear-gradient(180deg, #16233f, #101a30); color: #eaf2ff; border-inline-end: 1px solid rgba(110,160,255,.25); box-shadow: 22px 0 60px rgba(4,10,26,.55); transform: translateX(-102%); transition: transform .32s cubic-bezier(.2,.85,.3,1); display: flex; flex-direction: column; } [data-theme="light"] .v8-preview-panel { background: linear-gradient(180deg,#fff,#f3f7ff); color: #17233d; } .v8-preview-panel.open { transform: none; } .v8-preview-panel header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(120,160,255,.15); } .v8-preview-panel header b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v8-preview-close { border: 0; background: rgba(255,255,255,.1); color: inherit; width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem; cursor: pointer; } .v8-preview-close:hover { background: rgba(255,110,120,.3); } .v8-preview-media { padding: 14px; background: #0a1222; min-height: 220px; display: grid; place-items: center; } .v8-preview-media video, .v8-preview-media img { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; } .v8-preview-media audio { width: 100%; } .v8-preview-link { display: grid; place-items: center; gap: 12px; padding: 30px 0; } .v8-preview-link span { font-size: 2.4rem; opacity: .6; } .v8-preview-empty { opacity: .7; padding: 30px 0; } .v8-preview-info { padding: 6px 16px; overflow: auto; flex: 1; } .v8-preview-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(130,160,220,.14); font-size: .82rem; } .v8-preview-row span { opacity: .6; flex: none; } .v8-preview-row b { text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v8-preview-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px; border-top: 1px solid rgba(120,160,255,.15); } .v8-preview-actions .secondary-button, .v8-preview-actions .danger-button { padding: 7px 12px; font-size: .78rem; } /* لودینگ v8 */ .v8-loading { display: grid; place-items: center; gap: 12px; padding: 44px 0; opacity: .8; } .v8-ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(90,140,255,.25); border-top-color: #2f9bff; animation: v8Spin .8s linear infinite; } @keyframes v8Spin { to { transform: rotate(360deg); } } /* دکمهٔ آپلود بدون فایل ورودی زشت */ .v8-tools label.primary-button { cursor: pointer; } .v8-file-card .v7-card-thumb { cursor: zoom-in; } .v8-file-card.processing .v7-card-thumb { cursor: default; } /* ---------- 2.10.4: tray close button + polish ---------- */ .v8-upload-tray header { user-select: none; } .v8-tray-close { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex: none; background: rgba(255,255,255,.08); } .v8-tray-close:hover { background: rgba(255,110,120,.35); } /* ---------- 2.10.5: card hover quick actions ---------- */ .v8-card-quick { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity .18s ease; z-index: 3; } .v8-file-card:hover .v8-card-quick, .v8-file-card:focus-within .v8-card-quick { opacity: 1; } .v8-card-quick .icon-button { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(10,18,38,.85); color: #cfe2ff; border: 1px solid rgba(120,160,255,.25); backdrop-filter: blur(6px); } .v8-card-quick .icon-button:hover { background: rgba(47,123,255,.5); color: #fff; } .v8-card-quick .icon-button.danger:hover { background: rgba(220,60,70,.65); color: #fff; } .v7-card-thumb { position: relative; overflow: hidden; } /* ---------- worker settings + guide ---------- */ .v7-worker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 6px; } .v7-worker-grid > span { display: grid; gap: 4px; font-size: .78rem; opacity: .85; } .v7-worker-grid input, .v7-worker-grid select { width: 100%; } .v7-worker-guide { grid-column: 1 / -1; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(41,120,255,.07); border: 1px solid rgba(90,140,255,.25); font-size: .78rem; line-height: 1.9; } .v7-worker-guide b { display: block; color: #7fb3ff; margin-top: 8px; } .v7-worker-guide b:first-child { margin-top: 0; } .v7-worker-guide em { color: #ffc36b; font-style: normal; font-weight: 700; } .v7-worker-guide code { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.35); color: #7be0a0; font-family: monospace; font-size: .78rem; } [data-theme="light"] .v7-worker-guide { background: #f2f7ff; border-color: #d8e4f7; } .v7-retry-btn { color: #ffc36b !important; font-size: .74rem !important; margin-top: 2px; } .v7-retry-btn:hover { color: #ffd97a !important; } /* ===== b2112: صف نمایش — ردیف‌های واضح‌تر با تامبنیل بزرگ‌تر + جابه‌جایی با درگ ===== */ .v7-queue-body { gap: 4px !important; max-height: calc(100vh - 225px) !important; scrollbar-width: thin; } .v7-queue-body .content-queue-row.v4-sequence-row { grid-template-columns: 16px 20px 64px minmax(0,1fr) auto !important; min-height: 0 !important; padding: 4px 6px !important; gap: 7px !important; border-radius: 8px !important; } .v7-queue-body .content-queue-row .content-media-thumb, .v7-queue-body .content-queue-row .v7-queue-thumb { width: 64px !important; height: 42px !important; aspect-ratio: auto !important; border-radius: 6px !important; } .v7-queue-body .content-queue-row .v7-queue-thumb em { font-size: 1.2rem; } .v7-queue-body .content-queue-row b { font-size: 11.5px !important; } .v7-queue-body .content-queue-row small { font-size: 9px !important; } .v7-queue-body .content-queue-number { width: 18px !important; height: 18px !important; font-size: 9px !important; border-radius: 5px !important; background: transparent !important; color: var(--v4-subtle, #7f9bb1) !important; } .v7-queue-body .content-queue-chip { display: none !important; } .v7-queue-body .icon-button { width: 26px !important; height: 26px !important; border-radius: 6px !important; font-size: 12px !important; } .v7-queue-body .icon-button.v7-row-duration { width: auto !important; padding: 0 7px !important; font-size: 10px !important; } .v7-queue-body .v4-drag-handle { width: 16px !important; height: 26px !important; opacity: .7; } .v7-queue-body .v4-drag-handle .v4-svg { width: 14px !important; height: 14px !important; } .v7-queue-body .content-queue-row:hover { border-color: var(--v4-accent, #6f7cff) !important; } /* ===== لینک‌ها: نشان آنلاین/آفلاین روی کارت‌ها ===== */ .content-link-mode { display: inline-block; width: max-content; padding: 3px 7px; border-radius: 999px; font-size: .61rem; font-weight: 800; } .content-link-mode.online { background: rgba(111,124,255,.14); color: #9aa4ff; } .content-link-mode.offline { background: rgba(55,212,146,.13); color: #70e8b1; } [data-theme="light"] .content-link-mode.online { background: rgba(111,124,255,.1); color: #4a56d6; } [data-theme="light"] .content-link-mode.offline { background: rgba(55,212,146,.12); color: #1f9a66; } /* ===== صفحه‌بندی عددی ۱ ۲ ۳ ۴ (بدون رفرش) ===== */ .v7-media-pagination { flex-wrap: wrap; } .v7-page-num { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; } .v7-page-num:hover:not(:disabled) { border-color: var(--accent, #6f7cff); background: rgba(111,124,255,.12); } .v7-page-num.current { background: var(--accent, #6f7cff); border-color: var(--accent, #6f7cff); color: #fff; cursor: default; } .v7-page-num:disabled { opacity: .38; cursor: not-allowed; } .v7-page-num.nav-arrow { font-size: .9rem; line-height: 1; } .v7-page-ellipsis { padding: 0 3px; opacity: .55; font-size: .74rem; } [data-theme="light"] .v7-page-num { border-color: rgba(23,32,55,.16); background: rgba(23,32,55,.03); } /* ===== کارت فشردهٔ کتابخانه (۴۸ فایل در هر قاب صفحه) ===== */ .v8-compact-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; } .v8-compact-grid .v7-card-thumb { aspect-ratio: 1/1; } .v8-compact-grid .v7-card-body { padding: 6px 8px 3px; gap: 2px; } .v8-compact-grid .v7-card-body b { font-size: .68rem; } .v8-compact-grid .v7-card-body small { font-size: .6rem; } .v8-compact-grid .v7-duration { display: none; } .v8-compact-grid .v8-card-quick .icon-button { width: 20px; height: 20px; font-size: 10px; } .v8-compact-grid .v7-state { font-size: .55rem; } .content-compact-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; } .content-compact-grid .content-media-thumb { height: 92px; } .content-compact-grid .content-media-caption { padding: 8px; gap: 3px; } .content-compact-grid .content-media-caption b { font-size: .68rem; } .content-compact-grid .content-media-caption small { font-size: .6rem; } .content-compact-grid .content-ready-state { font-size: .55rem; padding: 2px 5px; } @media(max-width:620px){ .v8-compact-grid, .content-compact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ===================== v11: تب‌بندی تنظیمات مالک + اتصال لحظه‌ای + پایش سرور ===================== */ .owner-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 18px;padding:5px;background:rgba(8,13,23,.45);border:1px solid var(--border);border-radius:14px} .owner-tab{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:all .2s ease} .owner-tab span{font-size:16px} .owner-tab:hover{color:#fff;background:rgba(111,124,255,.09);transform:translateY(-1px)} .owner-tab.active{color:#fff;background:linear-gradient(135deg,rgba(111,124,255,.28),rgba(42,216,212,.14));border-color:rgba(111,124,255,.45);box-shadow:0 6px 18px rgba(91,106,255,.18)} .owner-tabs .v7-owner-launcher{width:100%} .owner-live-panel{animation:ownerFade .3s ease} @keyframes ownerFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .transport-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border:1px solid rgba(111,124,255,.3);border-radius:14px;background:linear-gradient(130deg,rgba(111,124,255,.14),rgba(8,13,23,.4) 55%);margin-bottom:16px} .transport-hero h3{margin:0 0 6px;font-size:16px} .transport-state{padding:7px 14px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap} .transport-state.on{background:rgba(67,214,146,.14);color:var(--green);border:1px solid rgba(67,214,146,.4);box-shadow:0 0 14px rgba(67,214,146,.25)} .transport-state.off{background:rgba(142,154,177,.1);color:var(--muted);border:1px solid var(--border)} .transport-fields{margin:14px 0} .transport-cred-row{display:flex;gap:8px;margin:4px 0 10px} .transport-cred-row .settings-input{font-size:12px;color:#9fd8ff} .ok-note{display:block;margin:12px 0;font-size:12px;color:var(--green);border:1px solid rgba(67,214,146,.3);background:rgba(67,214,146,.08);padding:8px 11px;border-radius:8px} .server-gauge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:16px 0} .server-gauge-card{display:grid;justify-items:center;gap:10px;padding:20px 14px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(150deg,rgba(20,30,49,.9),rgba(11,17,30,.92));transition:transform .2s ease,border-color .2s ease} .server-gauge-card:hover{transform:translateY(-3px);border-color:rgba(111,124,255,.45)} .server-gauge-card h4{margin:0;font-size:13px;color:#c9d3ec} .server-gauge-card small{color:var(--muted);font-size:10.5px;text-align:center;line-height:1.7} .server-gauge{position:relative;width:96px;height:96px} .server-gauge svg{width:100%;height:100%} .server-gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-variant-numeric:tabular-nums} .server-gauge circle{transition:stroke-dashoffset .9s cubic-bezier(.25,.8,.3,1)} .uptime-value{font-size:21px;font-variant-numeric:tabular-nums;color:#cfe0ff} .server-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .server-chart-card{padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(8,13,23,.4)} .server-chart-card h4{margin:0 0 10px;font-size:12px;color:#bac5d9} .sparkline{position:relative;height:64px} .sparkline svg{width:100%;height:100%;display:block;overflow:visible} .spark-tip{position:absolute;inset-inline-end:4px;top:-2px;font-size:9.5px;font-style:normal;color:var(--muted)} .server-live-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--border);border-radius:12px;background:rgba(8,13,23,.4);font-size:13px} .server-live-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulseDot 1.6s ease-in-out infinite} @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} .fleet-metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:16px} .metric-mini{padding:14px;text-align:center;border:1px solid var(--border);border-radius:12px;background:rgba(8,13,23,.4)} .metric-mini span{display:block;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums} .metric-mini small{color:var(--muted);font-size:10.5px} .mqtt-live-chip{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:2px 8px;border-radius:99px;font-size:9.5px;font-weight:700;font-style:normal;letter-spacing:.4px;background:rgba(67,214,146,.13);color:var(--green);border:1px solid rgba(67,214,146,.35)} .mqtt-live-chip.off{background:rgba(142,154,177,.09);color:var(--muted);border-color:var(--border)} .v7-owner-card[data-v7-jump^="tab:"] .v7-owner-icon{color:var(--cyan)} @media(max-width:900px){.transport-hero{flex-direction:column}.server-gauge-grid{grid-template-columns:repeat(2,1fr)}} /* ===================== v8.1 OWNER SERVER PANEL — سرویس‌ها و فضای ذخیره‌سازی ===================== */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px} .svc-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--card,rgba(127,127,127,.04));animation:v7FadeUp .35s ease both} .svc-chip i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted);box-shadow:0 0 0 3px rgba(127,127,127,.12)} .svc-chip.ok i{background:#2fbf8f;box-shadow:0 0 0 3px rgba(47,191,143,.18);animation:svcPulse 2.4s ease-in-out infinite} .svc-chip.down i{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)} .svc-chip b{display:block;font-size:.82rem} .svc-chip small{color:var(--muted);font-size:.72rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px} .server-lower-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(300px,1.4fr);gap:12px;margin-top:12px} .stor-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--card,rgba(127,127,127,.03))} .stor-card h4{margin:0 0 8px;font-size:.85rem} .stor-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:.8rem} .stor-row:last-child{border-bottom:0} .stor-row b{font-variant-numeric:tabular-nums} @keyframes svcPulse{0%,100%{box-shadow:0 0 0 3px rgba(47,191,143,.15)}50%{box-shadow:0 0 0 6px rgba(47,191,143,.06)}} @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}.server-lower-grid{grid-template-columns:1fr}} /* ═══════════ 2.10.6 — داشبورد مالک: نوار سلامت سرور + انیمیشن کارت‌ها ═══════════ */ .owner-server-health{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;padding:13px 16px;border:1px solid rgba(47,191,143,.22);border-radius:14px;background:linear-gradient(120deg,rgba(23,42,36,.5),rgba(13,20,34,.75));animation:v7rise .35s ease} .osh-head{display:flex;align-items:center;gap:9px;font-size:12.5px} .osh-head b{font-size:13px} .osh-head .muted{font-size:11px} .osh-chips{display:flex;gap:14px;flex-wrap:wrap;flex:1;min-width:260px} .osh-chip{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;min-width:150px} .osh-label{grid-column:1/3;display:flex;align-items:center;gap:6px;font-size:11px;color:#c7d2ea} .osh-label i{width:8px;height:8px;border-radius:50%;animation:pulseDot 2.2s ease-in-out infinite} .osh-bar{grid-column:1/3;height:6px;border-radius:5px;background:rgba(8,13,25,.7);overflow:hidden} .osh-bar i{display:block;height:100%;border-radius:inherit;transition:width .8s cubic-bezier(.22,.8,.3,1)} .osh-val{grid-column:3;grid-row:2;font-size:11px;font-variant-numeric:tabular-nums;color:#e8eefc} .metric-card{animation:v7rise .4s ease backwards} .metric-card:nth-child(2){animation-delay:.05s}.metric-card:nth-child(3){animation-delay:.1s}.metric-card:nth-child(4){animation-delay:.15s}.metric-card:nth-child(5){animation-delay:.2s}.metric-card:nth-child(6){animation-delay:.25s} @keyframes v7rise{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}} @media(max-width:700px){.owner-server-health{gap:9px;padding:11px 12px}.osh-chips{min-width:0}} /* ═══════════ 2.10.7 — تب مدیریت دستورات مالک ═══════════ */ .cmd-manager .cmd-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0} .cmd-manager .cmd-filter-row .muted{font-size:11px} .cmd-table{margin-top:6px} .cmd-table td{font-size:12px} .cmd-table td b{display:block} .cmd-table td small{display:block;color:var(--muted);font-size:10px;margin-top:3px;direction:ltr;text-align:start} .cmdfam{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap;border:1px solid var(--border);color:var(--muted)} .cmdfam.fam-general{background:rgba(111,124,255,.12);color:#b9c4ff;border-color:rgba(111,124,255,.35)} .cmdfam.fam-a_kiosk{background:rgba(67,214,146,.12);color:#7fe6b4;border-color:rgba(67,214,146,.4)} .cmdfam.fam-farakiosk{background:rgba(255,195,107,.1);color:#ffd894;border-color:rgba(255,195,107,.4)} .cmdscope{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700} .cmdscope.org{background:rgba(166,121,255,.14);color:#cbb4ff} .cmdscope.pers{background:rgba(255,153,192,.1);color:#ffb8d2} .cmd-manager .cmd-over{min-width:170px} .cmd-manager tbody tr{transition:background .16s} .cmd-manager tbody tr:hover{background:rgba(111,124,255,.05)} .cmd-manager tbody tr[hidden]{display:none} @keyframes cmdRowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .cmd-manager tbody tr{animation:cmdRowIn .3s ease both} /* ═══════════ b2108: فیکس سراسری .hidden + ریدیزاین تب‌بندی تنظیمات مالک ═══════════ */ .hidden{display:none!important} /* — نوار تب‌های مالک با انیمیشن — */ .owner-tabs{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;padding:7px;background:linear-gradient(120deg,rgba(13,20,36,.85),rgba(9,14,26,.9));border:1px solid var(--border);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .owner-tab{position:relative;display:flex;align-items:center;gap:9px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-weight:600;padding:11px 18px;border-radius:11px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);overflow:hidden} .owner-tab:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(111,124,255,.16),rgba(42,216,212,.08));opacity:0;transition:opacity .22s} .owner-tab span{position:relative;font-size:17px;transition:transform .22s} .owner-tab:hover{color:#dfe6ff;transform:translateY(-1px)} .owner-tab:hover:before{opacity:.6} .owner-tab:hover span{transform:scale(1.12)} .owner-tab.active{color:#fff;border-color:rgba(111,124,255,.5);background:linear-gradient(135deg,rgba(111,124,255,.3),rgba(42,216,212,.14));box-shadow:0 8px 22px rgba(91,106,255,.25)} .owner-tab.active:before{opacity:1} @keyframes ownerPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .owner-panel-anim{animation:ownerPanelIn .3s cubic-bezier(.4,0,.2,1) both} /* — کارت‌های کنترل مالک (لانچر) — */ .v7-owner-launcher{margin-bottom:18px;padding:18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(42,216,212,.05));animation:ownerPanelIn .35s ease both} .v7-owner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:12px} .v7-owner-card{display:flex;align-items:flex-start;gap:11px;width:100%;padding:13px;border:1px solid var(--border);border-radius:13px;background:rgba(8,13,24,.5);color:var(--text);font:inherit;text-align:right;cursor:pointer;transition:all .2s ease} .v7-owner-card:hover{transform:translateY(-2px);border-color:rgba(111,124,255,.55);background:rgba(111,124,255,.1);box-shadow:0 10px 24px rgba(0,0,0,.25)} .v7-owner-card em{margin-inline-start:auto;font-style:normal;color:var(--muted);transition:transform .2s} .v7-owner-card:hover em{transform:translateX(-3px);color:var(--cyan)} .v7-owner-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,rgba(111,124,255,.22),rgba(42,216,212,.14));color:var(--cyan);font-size:16px;flex:none} .v7-owner-card b{display:block;font-size:12.5px} .v7-owner-card small{display:block;margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.6} .v7-zoom-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);color:var(--muted);font-size:11.5px} /* — شبکهٔ نمایش/غیب امکانات — */ .feature-visibility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px;margin-top:11px} .feature-visibility-grid .switch-row{justify-content:flex-start;cursor:pointer;transition:all .18s} .feature-visibility-grid .switch-row:hover{border-color:rgba(111,124,255,.5);background:rgba(111,124,255,.07);transform:translateY(-1px)} .feature-visibility-grid .switch-row input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer} /* — دکمهٔ ثابت «بازگشت به بالا» (نمای کیوسک‌ها/داشبورد) — */ .scroll-top-fab{position:fixed;bottom:26px;inset-inline-start:26px;z-index:900;width:44px;height:44px;border-radius:50%;border:1px solid rgba(111,124,255,.45);background:linear-gradient(135deg,rgba(111,124,255,.9),rgba(64,72,187,.9));color:#fff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 6px 22px rgba(10,14,30,.45);display:flex;align-items:center;justify-content:center;transition:transform .16s,opacity .16s;opacity:.92} .scroll-top-fab:hover{transform:translateY(-3px);opacity:1} .scroll-top-fab[hidden]{display:none} /* — نشان‌های heartbeat و MQTT در هدر کیوسک — */ .kiosk-heartbeat-badge,.kiosk-live-badge{margin-inline-start:6px;font-size:10.5px;padding:2px 9px;gap:4px} .kiosk-live-badge.pending{background:rgba(255,195,107,.14);color:var(--amber,#f2a33c);border-color:rgba(255,195,107,.4)} /* — جعبهٔ راهنمای داخل تب اتصال لحظه‌ای — */ .transport-help-box{border:1px solid var(--border);border-radius:10px;padding:10px 14px;background:rgba(255,255,255,.02)} .transport-help-box summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--primary)} .transport-help-box .transport-help-body{margin-top:8px;display:grid;gap:7px;font-size:12.5px;color:var(--muted)} .transport-help-box .transport-help-body b{color:var(--text)} /* ============================================================ AEHI THEME FIX LAYER — 2026-09-17 (css-theme-audit) ------------------------------------------------------------------ Load order: control-center-bundle.css -> v6 -> v7 (this file last = wins). Supports BOTH theme mechanisms used in the codebase: * body.theme-dark / body:not(.theme-dark) (bundle.css) * html[data-theme="dark"] / [data-theme="light"] (applyTheme + v6/v7) Only colour declarations are added here; no existing rule is removed. ============================================================ */ /* ---------- 0) token bridge: same light palette for the body-class mechanism ---------- */ body:not(.theme-dark) { color-scheme: light; --bg: #e9edf4; --surface: #ffffff; --surface-2: #f3f5fa; --border: rgba(23, 32, 55, .14); --text: #1e2740; --muted: #59647d; --shadow: 0 10px 30px rgba(23, 32, 55, .08); } body.theme-dark { color-scheme: dark; --bg: #070b14; --surface: #101827; --surface-2: #151f31; --border: rgba(162, 185, 224, .13); --text: #e9eefb; --muted: #8e9ab1; --shadow: 0 14px 30px rgba(0, 0, 0, .28); } /* ---------- 1) token-driven base: auto-adapts to light AND dark ---------- */ .panel, section.panel, .data-row, .modal, .alert-card, .toast, .switch-row, .table-wrap, .table-panel, .personal-fleet-table-wrap, .table-scroll, .settings-form section, .setting-section, .settings-card, .settings-panel, .metric-card, .center-card, .operation-tile, .package-card, .personal-device-card, .reserved-kiosk-card, .screenshot-card, .quick-command, .empty-state, .day-group h4, .v4-file-card, .owner-tab, .owner-tabs, .badge, .chip, .centered, .content-sync-card, .content-media-card, .content-live-preview, .content-queue-row, .content-desk-body, .content-publish-bar { background-color: var(--aehi-surface) !important; color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } .settings-input, .search-box, .filter-input, .content-search, .studio-library-search, .modal input, .modal select, .modal textarea { background-color: var(--aehi-input) !important; color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } .table-wrap table, .table-scroll table, .fleet-table, .center-operations-table, .data-list, .timeline-scroll { border-color: var(--aehi-border) !important; } .table-wrap thead th, .table-scroll thead th, thead th, .fleet-table th, .center-operations-table th, .studio-file-table-head { background-color: var(--aehi-surface-2) !important; color: var(--aehi-text-muted) !important; border-color: var(--aehi-border) !important; } .table-wrap td, .table-scroll td, .fleet-table td, .center-operations-table td, .data-list > *, .day-group h4 { color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } .primary-button { background-color: var(--aehi-accent) !important; border-color: var(--aehi-accent) !important; color: #fff !important; } .secondary-button, .filter-button, .row-button { background-color: var(--aehi-surface-2) !important; color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } .danger-button { background-color: rgba(251, 113, 133, .14) !important; border-color: rgba(251, 113, 133, .34) !important; color: #ffd3da !important; } .muted, small, .panel-head p, .metric-card span, .data-row small, .package-card span { color: var(--aehi-text-muted) !important; } /* ============================================================ 2) LIGHT MODE FIX Elements whose last winning rule hardcodes the DARK palette. ============================================================ */ :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-workspace, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-creator, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-slot-content-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-head, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-playlist-picker, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-direct-manager, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-link-builder, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-selection-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-mode-card, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-mode-picker label, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-media-card, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-order article, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-preview, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-control, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-basket, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-link, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-check, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-selection-list article, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-assignment-grid section, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-target, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-card-select, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-main, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-sidebar, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-selection-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-assignment, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-file-preview, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-tabs, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-folder-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-file-name .studio-file-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .device-file-preview-frame, :is(body:not(.theme-dark), html[data-theme="light"]) .center-lookup-choice, :is(body:not(.theme-dark), html[data-theme="light"]) .location-map-preview, :is(body:not(.theme-dark), html[data-theme="light"]) .pin-key, :is(body:not(.theme-dark), html[data-theme="light"]) .content-manager-head, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-toolbar, :is(body:not(.theme-dark), html[data-theme="light"]) .filters, :is(body:not(.theme-dark), html[data-theme="light"]) .device-kiosk-connection, :is(body:not(.theme-dark), html[data-theme="light"]) .owner-screenshot-policy, :is(body:not(.theme-dark), html[data-theme="light"]) .content-folder-chip, :is(body:not(.theme-dark), html[data-theme="light"]) .content-queue-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .content-preview-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .content-device-connection, :is(body:not(.theme-dark), html[data-theme="light"]) .content-publish-bar, :is(body:not(.theme-dark), html[data-theme="light"]) .desk-segment, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-group-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-owner-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-apk-row, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-desk-col, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-groups-side, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-editor-picker, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-editor-sequence, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-seq-row, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-targets-grid > div, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-dock-item, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-desk-publish, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-source-pills, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-login input, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-card-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-picker-check, :is(body:not(.theme-dark), html[data-theme="light"]) .owner-tabs, :is(body:not(.theme-dark), html[data-theme="light"]) .owner-server-health, :is(body:not(.theme-dark), html[data-theme="light"]) .server-gauge-card, :is(body:not(.theme-dark), html[data-theme="light"]) .osh-bar, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-upload-tray, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-preview-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-card-quick .icon-button, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-dropzone-overlay, :is(body:not(.theme-dark), html[data-theme="light"]) .transport-help-box, :is(body:not(.theme-dark), html[data-theme="light"]) .attention-kiosk, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-detail-shot, :is(body:not(.theme-dark), html[data-theme="light"]) .shot-placeholder { background: var(--aehi-surface) !important; border-color: var(--aehi-border) !important; } /* light: inputs nested in the creator / workspace panels */ :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-creator-grid input, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-creator-grid select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-actions input, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-actions select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-shared-playlist select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-link-form input, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-link-form select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-playlist-picker select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-direct-toolbar select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-selection-panel input, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-link-builder input, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-link-builder select, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-workspace input, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-workspace select, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-file-actions select, :is(body:not(.theme-dark), html[data-theme="light"]) .upload-card input, :is(body:not(.theme-dark), html[data-theme="light"]) .token-box, :is(body:not(.theme-dark), html[data-theme="light"]) .content-search input, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-library-search { background: var(--aehi-input) !important; color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } /* light: text that was hardcoded near-white (invisible on the light surface) */ :is(body:not(.theme-dark), html[data-theme="light"]) .phone-number, :is(body:not(.theme-dark), html[data-theme="light"]) .day-group h4, :is(body:not(.theme-dark), html[data-theme="light"]) .token-box, :is(body:not(.theme-dark), html[data-theme="light"]) .alert-layer .alert-card p, :is(body:not(.theme-dark), html[data-theme="light"]) .server-apk-inbox code, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-kiosk-icon, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-fleet-icon, :is(body:not(.theme-dark), html[data-theme="light"]) .playlist-item-meta b, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-source b, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-card-select, :is(body:not(.theme-dark), html[data-theme="light"]) .empty-state h3, :is(body:not(.theme-dark), html[data-theme="light"]) .empty-state, :is(body:not(.theme-dark), html[data-theme="light"]) .control-footer-brand, :is(body:not(.theme-dark), html[data-theme="light"]) .control-footer-orbit, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-creator, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-slot-content-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-content-workspace, :is(body:not(.theme-dark), html[data-theme="light"]) .content-manager-head h3, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-toolbar h3, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-library-search, :is(body:not(.theme-dark), html[data-theme="light"]) .content-desk, :is(body:not(.theme-dark), html[data-theme="light"]) .content-media-caption b, :is(body:not(.theme-dark), html[data-theme="light"]) .content-desk-empty b, :is(body:not(.theme-dark), html[data-theme="light"]) .content-queue-row b, :is(body:not(.theme-dark), html[data-theme="light"]) .content-playlist-row b, :is(body:not(.theme-dark), html[data-theme="light"]) .content-playlist-side b, :is(body:not(.theme-dark), html[data-theme="light"]) .content-device-connection h3, :is(body:not(.theme-dark), html[data-theme="light"]) .v4-type-badge, :is(body:not(.theme-dark), html[data-theme="light"]) .v4-card-actions .v4-icon-button, :is(body:not(.theme-dark), html[data-theme="light"]) .v5-lightbox-head, :is(body:not(.theme-dark), html[data-theme="light"]) .v5-lightbox button, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-preview-panel, :is(body:not(.theme-dark), html[data-theme="light"]) .v8-card-quick .icon-button, :is(body:not(.theme-dark), html[data-theme="light"]) .uptime-value, :is(body:not(.theme-dark), html[data-theme="light"]) .osh-val, :is(body:not(.theme-dark), html[data-theme="light"]) .scroll-top-fab, :is(body:not(.theme-dark), html[data-theme="light"]) .content-queue-number, :is(body:not(.theme-dark), html[data-theme="light"]) .content-media-select, :is(body:not(.theme-dark), html[data-theme="light"]) .muted-badge { color: var(--aehi-text) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .empty-state p, :is(body:not(.theme-dark), html[data-theme="light"]) .content-desk-empty, :is(body:not(.theme-dark), html[data-theme="light"]) .v5-lightbox-head { color: var(--aehi-text-muted) !important; } /* light: near-white borders that vanished on a white surface */ :is(body:not(.theme-dark), html[data-theme="light"]) .attention-kiosk, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-owner-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-apk-row, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-group-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-groups-side, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-desk-col, :is(body:not(.theme-dark), html[data-theme="light"]) #ownerSettingsForm section, :is(body:not(.theme-dark), html[data-theme="light"]) .content-desk-tabs, :is(body:not(.theme-dark), html[data-theme="light"]) .desk-segment, :is(body:not(.theme-dark), html[data-theme="light"]) .content-media-card, :is(body:not(.theme-dark), html[data-theme="light"]) .v5-icon-btn, :is(body:not(.theme-dark), html[data-theme="light"]) .permission-grid, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-detail-shot, :is(body:not(.theme-dark), html[data-theme="light"]) .v7-page-num, :is(body:not(.theme-dark), html[data-theme="light"]) .shot-placeholder { border-color: var(--aehi-border) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .shot-placeholder { border-style: dashed !important; } /* light: overlays + accent states */ :is(body:not(.theme-dark), html[data-theme="light"]) .modal-layer { background: rgba(15, 23, 42, .42) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .alert-layer { background: rgba(15, 23, 42, .5) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .studio-target:has(input:checked), :is(body:not(.theme-dark), html[data-theme="light"]) .slot-mode-picker label:has(input:checked) { border-color: var(--aehi-accent) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .owner-tab { color: var(--aehi-text-muted) !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .owner-tab:hover, :is(body:not(.theme-dark), html[data-theme="light"]) .owner-tab.active { color: var(--aehi-accent) !important; } /* ============================================================ 3) DARK MODE FIX Elements whose last winning rule hardcodes the LIGHT palette. ============================================================ */ :is(body.theme-dark, html[data-theme="dark"]) .slot-content-workspace, :is(body.theme-dark, html[data-theme="dark"]) .reserved-creator, :is(body.theme-dark, html[data-theme="dark"]) .reserved-slot-content-panel, :is(body.theme-dark, html[data-theme="dark"]) .slot-playlist-picker, :is(body.theme-dark, html[data-theme="dark"]) .slot-direct-manager, :is(body.theme-dark, html[data-theme="dark"]) .slot-link-builder, :is(body.theme-dark, html[data-theme="dark"]) .slot-selection-panel, :is(body.theme-dark, html[data-theme="dark"]) .slot-mode-card, :is(body.theme-dark, html[data-theme="dark"]) .slot-mode-picker label, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-media-card, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-order article, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-preview, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-control, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-basket, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-link, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-thumb, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-check, :is(body.theme-dark, html[data-theme="dark"]) .slot-selection-list article, :is(body.theme-dark, html[data-theme="dark"]) .studio-assignment-grid section, :is(body.theme-dark, html[data-theme="dark"]) .studio-target, :is(body.theme-dark, html[data-theme="dark"]) .device-file-preview-frame, :is(body.theme-dark, html[data-theme="dark"]) .content-media-thumb, :is(body.theme-dark, html[data-theme="dark"]) .content-queue-thumb, :is(body.theme-dark, html[data-theme="dark"]) .content-preview-thumb, :is(body.theme-dark, html[data-theme="dark"]) .content-publish-bar, :is(body.theme-dark, html[data-theme="dark"]) .content-folder-chip { background: var(--aehi-surface) !important; border-color: var(--aehi-border) !important; color: var(--aehi-text) !important; } :is(body.theme-dark, html[data-theme="dark"]) .studio-card-select { background: rgba(6, 16, 30, .88) !important; border-color: var(--aehi-border) !important; } :is(body.theme-dark, html[data-theme="dark"]) .v7-card-thumb, :is(body.theme-dark, html[data-theme="dark"]) .v7-picker-check { background: var(--aehi-surface-2) !important; } :is(body.theme-dark, html[data-theme="dark"]) .reserved-creator-grid input, :is(body.theme-dark, html[data-theme="dark"]) .reserved-creator-grid select, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-actions input, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-actions select, :is(body.theme-dark, html[data-theme="dark"]) .slot-shared-playlist select, :is(body.theme-dark, html[data-theme="dark"]) .slot-link-form input, :is(body.theme-dark, html[data-theme="dark"]) .slot-link-form select, :is(body.theme-dark, html[data-theme="dark"]) .slot-playlist-picker select, :is(body.theme-dark, html[data-theme="dark"]) .slot-direct-toolbar select, :is(body.theme-dark, html[data-theme="dark"]) .slot-selection-panel input, :is(body.theme-dark, html[data-theme="dark"]) .slot-link-builder input, :is(body.theme-dark, html[data-theme="dark"]) .slot-link-builder select, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-workspace input, :is(body.theme-dark, html[data-theme="dark"]) .slot-content-workspace select { background: var(--aehi-input) !important; color: var(--aehi-text) !important; border-color: var(--aehi-border) !important; } :is(body.theme-dark, html[data-theme="dark"]) .modal-layer { background: rgba(3, 4, 7, .79) !important; } :is(body.theme-dark, html[data-theme="dark"]) .alert-layer { background: rgba(4, 8, 18, .78) !important; } :is(body.theme-dark, html[data-theme="dark"]) .empty-state h3, :is(body.theme-dark, html[data-theme="dark"]) .content-manager-head h3, :is(body.theme-dark, html[data-theme="dark"]) .reserved-toolbar h3 { color: var(--aehi-text) !important; } :is(body.theme-dark, html[data-theme="dark"]) .empty-state p { color: var(--aehi-text-muted) !important; } /* ---------- 4) residual polish (audit follow-up) ---------- */ /* light: screenshot / preview frames must not keep the dark backdrop */ :is(body:not(.theme-dark), html[data-theme="light"]) .hero-shot, :is(body:not(.theme-dark), html[data-theme="light"]) .hero-shot-button, :is(body:not(.theme-dark), html[data-theme="light"]) .hero-shot-button img, :is(body:not(.theme-dark), html[data-theme="light"]) .shot-thumb, :is(body:not(.theme-dark), html[data-theme="light"]) .slot-shot, :is(body:not(.theme-dark), html[data-theme="light"]) .personal-list-shot, :is(body:not(.theme-dark), html[data-theme="light"]) .device-file-preview, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-preview-media, :is(body:not(.theme-dark), html[data-theme="light"]) .v42-source-preview, :is(body:not(.theme-dark), html[data-theme="light"]) .transfer-progress:before, :is(body:not(.theme-dark), html[data-theme="light"]) .studio-file-table-head { background: var(--aehi-surface-2) !important; border-color: var(--aehi-border) !important; } /* light: accent text needs a darker ink to stay readable */ :is(body:not(.theme-dark), html[data-theme="light"]) .danger-button { color: #b4233a !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .personal-nav > small { color: #a16207 !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .cmdfam.fam-farakiosk { color: #a16207 !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .v7-retry-btn:hover { color: #a16207 !important; } :is(body:not(.theme-dark), html[data-theme="light"]) .kiosk-edition-badge, :is(body:not(.theme-dark), html[data-theme="light"]) .reserved-fleet-row .kiosk-edition-badge { color: #047857 !important; } /* ═══ FIX: server monitoring gauge card layout ═══ */ .server-gauge-card h4{text-align:center;width:100%} .server-gauge-card small{text-align:center;line-height:1.6;max-width:220px} .server-gauge-grid{margin-top:16px;margin-bottom:16px} .server-chart-grid{margin-top:16px;margin-bottom:16px} .svc-grid{margin-bottom:16px} .server-lower-grid{margin-bottom:16px} .fleet-metrics-row .metric-mini{min-width:0;overflow:hidden} .fleet-metrics-row .metric-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:700px){.svc-grid{grid-template-columns:1fr}.server-gauge-grid{grid-template-columns:1fr}.fleet-metrics-row{grid-template-columns:repeat(2,1fr)}} /* ═══ FIX: user group headers ═══ */ .user-group-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin-top:16px;margin-bottom:4px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(130deg,rgba(111,124,255,.08),rgba(8,13,23,.35) 55%)} .user-group-header:first-child{margin-top:0} .user-group-header h4{margin:0;font-size:13px;color:#d0d8f0} .user-group-header h4 small{font-weight:400;color:var(--muted);font-size:11px} .user-group-header>small{color:var(--muted);font-size:11px;white-space:nowrap} /* Compact owner control panels: keep gauges, APK rows, and Persian copy inside the card. */ .o9-shell{font-size:12px} .o9-shell .o9-card{min-width:0;overflow:hidden} .o9-shell .o9-card-body,.o9-shell .owner-live-panel{min-width:0;overflow:hidden} .o9-shell .o9-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .o9-shell .o9-card h3,.o9-shell .o9-card h4{font-size:13px;line-height:1.5} .o9-shell .o9-card p,.o9-shell .o9-note,.o9-shell .muted{font-size:11px;line-height:1.8;overflow-wrap:anywhere} .o9-shell .server-gauge-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .o9-shell .server-gauge-card{padding:12px 8px;min-width:0} .o9-shell .server-gauge-card small{font-size:10px;overflow-wrap:anywhere} .o9-shell .server-chart-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .o9-shell .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .o9-shell .svc-chip{min-width:0;padding:8px} .o9-shell .svc-chip small{max-width:100%;font-size:10px} .o9-shell .table-wrap,.o9-shell .cmd-table{max-width:100%;overflow-x:auto} .o9-shell table{font-size:11px;min-width:620px} .o9-shell .package-card,.o9-shell .o9-retention-row{min-width:0} @media(max-width:1100px){.o9-shell .server-gauge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.o9-shell .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.o9-shell .server-gauge-grid,.o9-shell .server-chart-grid,.o9-shell .svc-grid{grid-template-columns:1fr}.o9-shell .o9-grid{grid-template-columns:1fr}.o9-shell .owner-tabs{overflow-x:auto;flex-wrap:nowrap}.o9-shell .owner-tab{white-space:nowrap;font-size:10px;padding:8px}} .owner-live-panel{max-width:100%;overflow:hidden} #ownerApkPanel .data-row,#ownerApkPanel .apk-row{min-width:0;overflow:hidden} #ownerApkPanel .data-row p,#ownerApkPanel small,#ownerApkPanel .muted{overflow-wrap:anywhere;line-height:1.7;font-size:10px} #ownerApkPanel .inline-actions{gap:6px} #ownerApkPanel .inline-actions button{font-size:10px;padding:7px 9px} #ownerServerPanel .server-live-head{font-size:11px;flex-wrap:wrap} #ownerServerPanel .server-live-head .muted{font-size:10px;overflow-wrap:anywhere}