:root { --navy:#07182d; --blue:#2864f0; --blue-dark:#174dcc; --ink:#111c2d; --muted:#667085; --line:#e5eaf1; --surface:#f6f8fb; color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; min-height:100%; }
body { background:var(--surface); color:var(--ink); font-family:'Vazirmatn',Tahoma,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.portal-shell { min-height:100vh; display:grid; grid-template-columns:minmax(390px,46%) 1fr; background:#fff; }
.brand-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:44px clamp(38px,5vw,76px); color:#fff; background:radial-gradient(circle at 12% 20%,rgba(40,100,240,.34),transparent 30%),radial-gradient(circle at 85% 80%,rgba(20,184,166,.16),transparent 28%),linear-gradient(145deg,#061426 0%,#0b2038 58%,#08182a 100%); }
.brand-panel::before,.brand-panel::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.07); border-radius:50%; }
.brand-panel::before { width:500px; height:500px; left:-250px; top:-170px; }
.brand-panel::after { width:360px; height:360px; right:-180px; bottom:-100px; }
.brand-mark,.mobile-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; }
.brand-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#3b82f6,#2455db); box-shadow:0 12px 30px rgba(36,85,219,.35); }
.brand-message { position:relative; z-index:1; max-width:560px; }
.availability { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:#b8c7d9; }
.availability i { width:8px; height:8px; border-radius:50%; background:#3dd9b3; box-shadow:0 0 0 5px rgba(61,217,179,.12); }
.brand-message h1 { margin:26px 0 20px; font-size:clamp(40px,5vw,68px); line-height:1.25; letter-spacing:-.04em; }
.brand-message p { margin:0; max-width:520px; color:#a9bbce; font-size:16px; line-height:2; }
.trust-row { position:relative; z-index:1; display:flex; gap:clamp(22px,4vw,54px); padding-top:28px; border-top:1px solid rgba(255,255,255,.09); }
.trust-row div { display:flex; flex-direction:column; gap:7px; }
.trust-row strong { font-size:17px; }
.trust-row span { color:#8ca2b8; font-size:11px; }
.auth-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:42px clamp(24px,6vw,96px); background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%); }
.mobile-brand { display:none; align-self:flex-start; margin-bottom:34px; }
.auth-card { width:min(100%,470px); }
.auth-card header { margin-bottom:30px; }
.eyebrow { display:inline-block; margin-bottom:11px; color:var(--blue); font-size:12px; font-weight:700; }
.auth-card h2 { margin:0; font-size:clamp(30px,3vw,42px); letter-spacing:-.035em; }
.auth-card header p { margin:12px 0 0; color:var(--muted); line-height:1.8; font-size:14px; }
.auth-card form { display:grid; gap:18px; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-card label { display:grid; gap:9px; color:#344054; font-size:13px; font-weight:700; }
.auth-card input:not([type='checkbox']),.auth-card select { width:100%; height:50px; padding:0 15px; border:1px solid var(--line); border-radius:12px; outline:none; background:#fff; color:var(--ink); transition:border-color .2s,box-shadow .2s; }
.auth-card input::placeholder { color:#a7b0bd; }
.auth-card input:focus,.auth-card select:focus { border-color:#8cadfa; box-shadow:0 0 0 4px rgba(40,100,240,.1); }
.label-row { display:flex; justify-content:space-between; align-items:center; }
.label-row button,.auth-card footer button { padding:0; border:0; background:none; color:var(--blue); font-size:12px; font-weight:700; }
.checkbox { display:flex!important; grid-template-columns:auto 1fr; align-items:start; font-weight:400!important; line-height:1.7; }
.checkbox input { margin-top:4px; accent-color:var(--blue); }
.primary-button { display:flex; align-items:center; justify-content:center; gap:12px; height:52px; margin-top:3px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; font-weight:700; box-shadow:0 13px 28px rgba(40,100,240,.22); transition:transform .2s,box-shadow .2s; }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(40,100,240,.27); }
.primary-button:disabled,.secondary-button:disabled { cursor:wait; opacity:.72; transform:none; }
.notice { margin:16px 0 0; padding:12px 14px; border-radius:10px; background:#eff6ff; color:#174dcc; font-size:12px; line-height:1.8; }
.error-notice { margin:16px 0 0; padding:12px 14px; border-radius:10px; background:#fff1f2; color:#b42318; font-size:12px; line-height:1.8; }
.otp-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#f8fbff; color:var(--muted); font-size:11px; line-height:1.7; }
.otp-actions button { flex:0 0 auto; padding:7px 10px; border:0; border-radius:9px; color:var(--blue); background:#eaf2ff; font-family:inherit; font-size:11px; font-weight:800; }
.otp-actions button:disabled { color:#8c9bae; background:#edf1f5; cursor:not-allowed; }
.auth-card footer { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:13px; }
.auth-card footer p { margin:0; }
.auth-card footer button { margin-right:5px; font-size:13px; }
.security-note { display:flex; align-items:center; gap:7px; margin:34px 0 0; color:#98a2b3; font-size:11px; }
.security-note span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#eef3f8; color:#667085; }
.success-card { width:min(100%,470px); padding:34px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(16,24,40,.08); }
.success-icon { display:grid; place-items:center; width:56px; height:56px; margin-bottom:24px; border-radius:18px; background:#eafbf5; color:#067a5b; font-size:26px; font-weight:700; }
.success-card h2 { margin:3px 0 10px; font-size:34px; }
.success-card>p { margin:0; color:var(--muted); font-size:14px; line-height:1.9; }
.success-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:26px 0; }
.success-grid div { display:flex; flex-direction:column; gap:7px; padding:15px; border-radius:13px; background:#f7f9fc; }
.success-grid strong { font-size:13px; }
.success-grid span { color:#7a8696; font-size:10px; }
.secondary-button { width:100%; height:48px; border:1px solid var(--line); border-radius:11px; background:#fff; color:#344054; font-weight:700; }
@media (max-width:900px) { .portal-shell{display:block}.brand-panel{display:none}.auth-panel{min-height:100svh;justify-content:flex-start;padding-top:28px}.mobile-brand{display:flex}.mobile-brand .brand-symbol{width:36px;height:36px;border-radius:11px}.auth-card{margin:auto 0;padding:32px 0 64px} }
@media (max-width:480px) { .auth-panel{padding-inline:20px}.two-columns,.success-grid{grid-template-columns:1fr}.auth-card h2{font-size:32px}.success-card{padding:26px} }

/* Customer dashboard */
.dashboard-app { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); background:#f3f6fb; }
.dashboard-sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:26px 18px 20px; color:#d9e4f3; background:radial-gradient(circle at 20% 0,rgba(50,111,238,.24),transparent 32%),linear-gradient(180deg,#091b34,#071426); box-shadow:16px 0 50px rgba(13,28,52,.08); }
.dashboard-logo { display:flex; align-items:center; gap:11px; padding:0 8px 26px; color:#fff; font-weight:800; font-size:17px; border-bottom:1px solid rgba(255,255,255,.08); }
.dashboard-logo .brand-symbol { width:38px; height:38px; border-radius:12px; }
.dashboard-nav { display:grid; gap:6px; margin-top:24px; }
.dashboard-nav button { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px; min-height:48px; padding:0 13px; border:0; border-radius:12px; color:#9eb0c7; background:transparent; text-align:right; font-size:13px; transition:.2s ease; }
.dashboard-nav button:hover { color:#fff; background:rgba(255,255,255,.06); }
.dashboard-nav button.active { color:#fff; background:linear-gradient(135deg,rgba(55,117,244,.95),rgba(40,91,207,.9)); box-shadow:0 12px 25px rgba(28,78,183,.22); }
.dashboard-nav button>span { display:grid; place-items:center; width:26px; height:26px; font-size:17px; }
.dashboard-nav button>b { min-width:23px; padding:2px 6px; border-radius:20px; color:#b9c8da; background:rgba(255,255,255,.08); text-align:center; font-size:10px; }
.dashboard-nav button.active>b { color:#fff; background:rgba(255,255,255,.17); }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-top:auto; padding:17px 9px; border-top:1px solid rgba(255,255,255,.08); }
.user-avatar,.profile-avatar { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#3977f3,#6a54e8); font-weight:800; }
.sidebar-user div { min-width:0; display:grid; gap:3px; }
.sidebar-user strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:12px; }
.sidebar-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8196af; font-size:9px; text-align:right; }
.sidebar-logout { height:40px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#aebed0; background:rgba(255,255,255,.035); font-size:12px; }
.sidebar-logout:hover { color:#fff; border-color:rgba(255,255,255,.2); }
.dashboard-main { min-width:0; padding:30px clamp(22px,3.4vw,54px) 54px; }
.dashboard-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.dashboard-kicker,.section-heading span { color:#7b8ba1; font-size:11px; }
.dashboard-topbar h1 { margin:4px 0 0; color:#172338; font-size:26px; letter-spacing:-.025em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.refresh-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid #e0e7f0; border-radius:12px; color:#64748b; background:#fff; font-size:19px; box-shadow:0 8px 22px rgba(36,55,82,.05); }
.refresh-button.spinning { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(-360deg); } }
.new-ticket-button,.section-action { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 17px; border:0; border-radius:11px; background:#2864f0; color:#fff; text-decoration:none; font-size:12px; font-weight:700; box-shadow:0 10px 24px rgba(40,100,240,.18); }
.mobile-dashboard-brand { display:none; align-items:center; gap:9px; }
.mobile-logout-button { display:none; height:38px; padding:0 11px; border:1px solid #e0e7f0; border-radius:11px; color:#6d7b8e; background:#fff; font-size:9px; }
.mobile-dashboard-brand .brand-symbol { width:36px; height:36px; border-radius:11px; }
.dashboard-loading { display:grid; place-items:center; min-height:420px; color:#7d8b9f; font-size:13px; }
.dashboard-loading span { width:42px; height:42px; margin-bottom:14px; border:3px solid #dce5f1; border-top-color:#2864f0; border-radius:50%; animation:spin .8s linear infinite; }
.dashboard-error { margin-bottom:18px; padding:13px 16px; border:1px solid #fecdd3; border-radius:12px; color:#a61b2b; background:#fff1f2; font-size:12px; line-height:1.8; }
.dashboard-section { animation:section-in .28s ease; }
@keyframes section-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.welcome-banner { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; min-height:150px; padding:28px 32px; border-radius:22px; color:#fff; background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.16),transparent 25%),linear-gradient(120deg,#123a82,#225fdd 60%,#3b7af3); box-shadow:0 20px 45px rgba(26,80,188,.2); }
.welcome-banner::after { content:''; position:absolute; left:-50px; bottom:-110px; width:240px; height:240px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.welcome-banner span { color:#c9dcff; font-size:12px; }
.welcome-banner h2 { margin:7px 0 6px; font-size:28px; }
.welcome-banner p { margin:0; color:#c7daf9; font-size:12px; }
.account-status { position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(255,255,255,.16); border-radius:30px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.account-status i { width:8px; height:8px; border-radius:50%; background:#55e7b0; box-shadow:0 0 0 5px rgba(85,231,176,.13); }
.account-status span { color:#fff; font-size:11px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.stat-card { display:grid; grid-template-columns:48px minmax(0,1fr) 18px; align-items:center; gap:12px; min-height:122px; padding:18px; border:1px solid #e4eaf2; border-radius:17px; background:#fff; text-align:right; box-shadow:0 10px 30px rgba(36,55,82,.055); transition:.2s ease; }
.stat-card:hover { transform:translateY(-2px); border-color:#d6e0ed; box-shadow:0 16px 38px rgba(36,55,82,.09); }
.stat-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; font-size:21px; }
.stat-card.blue .stat-icon { color:#2460e1; background:#eaf1ff; }.stat-card.violet .stat-icon{color:#7149d9;background:#f1ebff}.stat-card.amber .stat-icon{color:#c9790a;background:#fff4dd}.stat-card.green .stat-icon{color:#0a8a64;background:#e6f8f2}
.stat-card div { display:grid; gap:2px; min-width:0; }
.stat-card small { color:#748398; font-size:10px; }
.stat-card strong { color:#152238; font-size:26px; }
.stat-card em { overflow:hidden; color:#98a4b4; font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.stat-card>b { color:#9eabba; font-size:16px; }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dashboard-card,.data-card,.profile-card,.profile-details { border:1px solid #e4eaf2; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(36,55,82,.045); }
.dashboard-card { min-width:0; padding:20px; }
.dashboard-card>header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dashboard-card>header span { color:#8b98aa; font-size:9px; }
.dashboard-card>header h3 { margin:3px 0 0; color:#1c293c; font-size:15px; }
.dashboard-card>header button { border:0; color:#2864f0; background:none; font-size:10px; font-weight:700; }
.compact-list { display:grid; }
.compact-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:67px; border-top:1px solid #eef2f6; }
.compact-item:first-child { border-top:0; }
.compact-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; }.compact-icon.blue{color:#2864f0;background:#edf3ff}.compact-icon.amber{color:#b86b00;background:#fff5e5}
.compact-item>div { min-width:0; display:grid; gap:3px; }
.compact-item strong { overflow:hidden; color:#283548; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.compact-item small { overflow:hidden; color:#94a0b0; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.compact-amount { justify-items:end; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-heading h2 { margin:4px 0 0; color:#172338; font-size:24px; }
.internal-badge { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid #dfe7f2; border-radius:20px; color:#2864f0; background:#fff; font-size:9px; font-style:normal; font-weight:700; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.resource-card { padding:20px; border:1px solid #e1e8f1; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(36,55,82,.045); }
.resource-card>header { display:flex; align-items:center; justify-content:space-between; }
.resource-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#2864f0; background:#edf3ff; font-size:20px; }
.resource-title { margin:18px 0; }
.resource-title h3 { margin:0 0 5px; color:#1d2a3e; font-size:14px; }
.resource-title p { overflow:hidden; margin:0; color:#8694a7; font-size:10px; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.resource-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding-top:15px; border-top:1px solid #eef2f6; }
.resource-meta div { display:grid; gap:4px; }
.resource-meta span { color:#9aa5b4; font-size:8px; }
.resource-meta strong { overflow:hidden; color:#455268; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; width:max-content; min-height:24px; padding:3px 9px; border-radius:20px; color:#59687b; background:#eef2f6; font-size:8px; font-weight:700; white-space:nowrap; }
.status-active,.status-paid,.status-answered { color:#087a5d; background:#e6f8f2; }.status-unpaid,.status-overdue,.status-suspended { color:#b15f05; background:#fff1da; }.status-pending,.status-open,.status-customer-reply,.status-in-progress{color:#235fcf;background:#eaf1ff}.status-terminated,.status-cancelled,.status-closed,.status-fraud{color:#a83b48;background:#ffeaed}
.data-card { overflow:hidden; }
.responsive-table { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:right; }
th { padding:15px 18px; color:#8592a4; background:#f8fafc; font-size:9px; font-weight:700; white-space:nowrap; }
td { padding:17px 18px; border-top:1px solid #edf1f5; color:#4d5a6e; font-size:10px; white-space:nowrap; }
.domain-cell,.invoice-number { color:#1f2c40; font-weight:700; }
.table-empty { padding:30px; }
.ticket-list { display:grid; gap:10px; }
.ticket-card { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 20px; border:1px solid #e2e8f1; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(36,55,82,.04); text-align:right; transition:.2s ease; }
.ticket-card:hover { border-color:#cdd9e8; transform:translateY(-1px); box-shadow:0 13px 30px rgba(36,55,82,.07); }
.ticket-main { display:flex; align-items:center; gap:12px; min-width:0; }
.ticket-icon { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:13px; color:#2864f0; background:#edf3ff; font-size:20px; }
.ticket-main div { min-width:0; }
.ticket-main h3 { overflow:hidden; margin:0 0 5px; color:#263348; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ticket-main p { margin:0; color:#929eae; font-size:9px; }
.ticket-meta { display:flex; align-items:center; gap:12px; color:#8996a8; font-size:9px; white-space:nowrap; }
.profile-layout { display:grid; grid-template-columns:300px 1fr; gap:18px; }
.profile-card { display:flex; flex-direction:column; align-items:center; padding:35px 24px; text-align:center; }
.profile-avatar { width:74px; height:74px; border-radius:23px; font-size:25px; }
.profile-card h3 { margin:17px 0 5px; color:#1b293d; font-size:18px; }
.profile-card p { margin:0 0 16px; color:#8996a8; font-size:10px; }
.profile-details { display:grid; grid-template-columns:1fr 1fr; align-content:start; padding:10px 24px; }
.profile-details div { display:grid; gap:7px; padding:22px 8px; border-bottom:1px solid #edf1f5; }
.profile-details span { color:#919dae; font-size:9px; }
.profile-details strong { color:#344156; font-size:12px; }
.mobile-verification-label.verified { color:#087b62; }
.mobile-verification-label.unverified { color:#c23c46; }
.empty-state { display:grid; place-items:center; min-height:130px; color:#98a4b4; text-align:center; }
.empty-state>span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#f2f5f9; font-size:20px; }
.empty-state p { margin:9px 0 0; font-size:10px; }
.mobile-nav { display:none; }

/* Internal client-area actions */
.compact-button { width:100%; padding:0; border-right:0; border-left:0; border-bottom:0; background:transparent; text-align:right; }
.compact-button:hover { background:#fafcff; }
.card-action { width:100%; height:38px; margin-top:16px; border:1px solid #dce5f1; border-radius:10px; color:#2864f0; background:#f8fbff; font-size:10px; font-weight:700; }
.card-action:hover,.table-action:hover { border-color:#9ebbf8; background:#eef4ff; }
.table-action { height:32px; padding:0 12px; border:1px solid #dbe5f1; border-radius:9px; color:#2864f0; background:#fff; font-size:9px; font-weight:700; }
.service-cell { display:grid; gap:4px; min-width:170px; }
.service-cell strong { color:#1f2c40; font-size:10px; }
.service-cell small { color:#94a0b0; font-size:8px; }
.profile-form { margin-top:18px; padding:24px; border:1px solid #e4eaf2; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(36,55,82,.045); }
.profile-form>header { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #edf1f5; }
.profile-form>header span { color:#8a97a9; font-size:9px; }
.profile-form>header h3 { margin:4px 0 0; color:#263348; font-size:16px; }
.profile-form>header p { margin:0; color:#98a4b4; font-size:9px; }
.profile-form-grid,.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.profile-form label,.modal-form label { display:grid; gap:8px; color:#526075; font-size:10px; font-weight:700; }
.profile-form label.wide,.form-grid .wide { grid-column:1/-1; }
.profile-form input,.profile-form select,.modal-form input,.modal-form select,.modal-form textarea { width:100%; min-height:46px; padding:10px 13px; border:1px solid #dfe6ef; border-radius:11px; outline:none; color:#263348; background:#fbfcfe; transition:.2s; }
.profile-form input:focus,.profile-form select:focus,.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus { border-color:#8cadfa; box-shadow:0 0 0 4px rgba(40,100,240,.09); background:#fff; }
.modal-form textarea { min-height:130px; resize:vertical; line-height:1.9; }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid #edf1f5; }
.inline-message { margin:0 auto 0 0; color:#087a5d; font-size:10px; }
.primary-inline-button,.secondary-inline-button { min-height:42px; padding:0 18px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,#2864f0,#174dcc); font-size:10px; font-weight:700; box-shadow:0 9px 20px rgba(40,100,240,.15); }
.secondary-inline-button { color:#2864f0; background:#fff; border:1px solid #dbe5f1; box-shadow:none; }
.primary-inline-button:disabled,.secondary-inline-button:disabled { cursor:wait; opacity:.6; }
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(4,14,28,.58); backdrop-filter:blur(7px); }
.modal-card { display:flex; flex-direction:column; width:min(720px,100%); max-height:min(88vh,900px); overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:22px; background:#fff; box-shadow:0 35px 90px rgba(3,13,28,.3); animation:modal-in .22s ease; }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid #e9eef4; }
.modal-header span { color:#2864f0; font-size:9px; font-weight:700; }
.modal-header h2 { margin:4px 0 0; color:#19263a; font-size:20px; }
.modal-header button { display:grid; place-items:center; width:38px; height:38px; border:1px solid #e1e7ef; border-radius:11px; color:#718096; background:#f8fafc; font-size:24px; line-height:1; }
.modal-body { overflow:auto; padding:24px; }
.modal-loading { display:grid; place-items:center; min-height:220px; color:#8794a6; font-size:11px; }
.modal-notice { margin:14px 24px 0; padding:11px 13px; border-radius:10px; color:#174dcc; background:#edf4ff; font-size:10px; line-height:1.8; }
.modal-stack { display:grid; gap:18px; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.detail-grid>div { display:grid; gap:6px; min-width:0; padding:14px; border-radius:12px; background:#f7f9fc; }
.detail-grid span { color:#8d9aac; font-size:8px; }
.detail-grid strong { overflow:hidden; color:#344156; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.info-box,.warning-box { padding:14px 16px; border:1px solid #dbe7fa; border-radius:12px; color:#45617f; background:#f4f8ff; font-size:10px; line-height:1.9; }
.warning-box { border-color:#f9dfad; color:#8a5a0a; background:#fff9ec; }
.invoice-items { overflow:hidden; border:1px solid #e6ebf2; border-radius:14px; }
.invoice-items>h3 { margin:0; padding:14px 16px; color:#344156; background:#f8fafc; font-size:11px; }
.invoice-items>div:not(.empty-state) { display:flex; justify-content:space-between; gap:20px; padding:13px 16px; border-top:1px solid #edf1f5; color:#526075; font-size:9px; line-height:1.7; }
.invoice-items strong { flex:0 0 auto; color:#263348; }
.ticket-summary { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#7b899c; font-size:9px; }
.ticket-thread { display:grid; gap:10px; max-height:390px; overflow:auto; padding:4px; }
.ticket-message { width:min(88%,560px); padding:14px 16px; border-radius:15px; background:#f3f6fa; }
.ticket-message.client { margin-right:auto; color:#fff; background:linear-gradient(135deg,#2964ef,#2455d5); }
.ticket-message.customer { margin-left:auto; color:#fff; border-bottom-right-radius:5px; background:linear-gradient(135deg,#2964ef,#2455d5); box-shadow:0 8px 22px rgba(37,91,221,.16); }
.ticket-message.operator { margin-right:auto; border:1px solid #e2e8f0; border-bottom-left-radius:5px; color:#344156; background:#f6f8fb; }
.ticket-message header { display:flex; justify-content:space-between; gap:20px; margin-bottom:8px; font-size:8px; }
.ticket-message header time { opacity:.7; }
.ticket-message p { margin:0; white-space:pre-wrap; word-break:break-word; font-size:10px; line-height:1.9; }
.ticket-actor { display:flex; align-items:center; gap:7px; }
.actor-badge { padding:3px 7px; border-radius:999px; font-size:7px; font-weight:900; }
.ticket-message.customer .actor-badge { color:#1749b5; background:rgba(255,255,255,.9); }
.ticket-message.operator .actor-badge { color:#087b62; background:#def8ef; }
.ticket-attachments { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; padding-top:10px; border-top:1px solid rgba(130,149,175,.18); }
.ticket-attachment-button { padding:6px 9px; border:1px solid rgba(128,148,176,.22); border-radius:9px; color:inherit; background:rgba(255,255,255,.14); font-size:8px; }
.ticket-message.operator .ticket-attachment-button { color:#315fba; background:#fff; }
.ticket-rating { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px; padding-top:10px; border-top:1px solid #e3e9f1; color:#8491a3; font-size:8px; }
.rating-stars { display:flex; direction:ltr; gap:2px; }
.rating-stars button { padding:0; border:0; color:#c7d0dc; background:none; font-size:17px; line-height:1; }
.rating-stars button.active,.rating-stars button:hover { color:#f5a524; }
.attachment-hint { color:#8996a8; font-size:8px; font-weight:500; }
.server-access-toggle { display:flex!important; grid-column:1/-1; grid-template-columns:auto 1fr; align-items:center; padding:13px 15px; border:1px solid #dce5f0; border-radius:12px; background:#f8fbff; }
.server-access-toggle input { width:auto!important; min-height:auto!important; margin:0; accent-color:var(--blue); }
.server-access-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:16px; border:1px solid #dce5f0; border-radius:14px; background:#f8fafc; }
.server-access-warning { grid-column:1/-1; padding:11px 13px; border-radius:10px; color:#8a5911; background:#fff2d7; font-size:8px; line-height:1.9; }
.modal-form { display:grid; gap:14px; padding-top:17px; border-top:1px solid #e9eef4; }
.modal-form h3 { margin:0; color:#263348; font-size:13px; }
.domain-lock { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border:1px solid #e4eaf2; border-radius:13px; }
.domain-lock strong { color:#314056; font-size:11px; }
.domain-lock p { margin:5px 0 0; color:#8c99aa; font-size:9px; }
.content-refresh { height:38px; padding:0 14px; border:1px solid #dce5f1; border-radius:10px; color:#2864f0; background:#fff; font-size:9px; font-weight:700; }
.content-refresh:disabled { cursor:wait; opacity:.6; }
.content-loading { display:grid; place-items:center; min-height:300px; color:#8190a4; font-size:10px; }
.content-loading>span { width:34px; height:34px; margin-bottom:10px; border:3px solid #dce5f1; border-top-color:#2864f0; border-radius:50%; animation:spin .8s linear infinite; }
.content-loading p { margin:0; }
.content-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.content-grid>.empty-state { grid-column:1/-1; min-height:300px; border:1px solid #e4eaf2; border-radius:18px; background:#fff; }
.content-card { display:grid; align-content:start; min-height:230px; padding:20px; border:1px solid #e2e9f2; border-radius:17px; color:#344156; background:#fff; text-align:right; box-shadow:0 10px 28px rgba(36,55,82,.045); transition:.2s ease; }
.content-card:hover { transform:translateY(-2px); border-color:#c9d7e8; box-shadow:0 15px 34px rgba(36,55,82,.08); }
.content-card-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:13px; color:#2864f0; background:#edf3ff; font-size:17px; }
.content-card time { color:#8d9aac; font-size:8px; }
.content-card h3 { margin:8px 0; color:#263348; font-size:13px; line-height:1.8; }
.content-card p { display:-webkit-box; overflow:hidden; margin:0 0 16px; color:#7e8c9f; font-size:9px; line-height:1.9; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.content-card>strong { align-self:end; margin-top:auto; color:#2864f0; font-size:9px; }
.knowledge-meta { margin-bottom:4px; color:#8c99aa; font-size:8px; }
.content-search { display:flex; align-items:center; gap:9px; max-width:460px; height:46px; margin-bottom:18px; padding:0 14px; border:1px solid #dfe6ef; border-radius:12px; color:#8290a3; background:#fff; }
.content-search input { width:100%; border:0; outline:0; color:#344156; background:transparent; font-size:10px; }
.content-article { display:grid; gap:15px; }
.content-article time,.article-meta { color:#8b99ab; font-size:9px; }
.content-article p { margin:0; color:#445268; white-space:pre-wrap; word-break:break-word; font-size:11px; line-height:2.2; }

@media (max-width:1180px) { .stats-grid{grid-template-columns:1fr 1fr}.resource-grid{grid-template-columns:1fr 1fr}.overview-grid{grid-template-columns:1fr}.dashboard-app{grid-template-columns:230px minmax(0,1fr)} }
@media (max-width:820px) {
  .dashboard-app{display:block;padding-bottom:76px}.dashboard-sidebar{display:none}.dashboard-main{padding:18px 16px 30px}.dashboard-topbar{align-items:flex-start;margin-bottom:18px}.mobile-dashboard-brand{display:flex}.mobile-logout-button{display:block}.dashboard-topbar>div:nth-child(2){display:none}.new-ticket-button{height:38px;padding-inline:12px}.refresh-button{width:38px;height:38px}.welcome-banner{min-height:142px;padding:25px}.welcome-banner h2{font-size:24px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-height:108px;padding:14px;grid-template-columns:42px minmax(0,1fr)}.stat-card>b{display:none}.stat-icon{width:42px;height:42px}.resource-grid{grid-template-columns:1fr}.profile-layout{grid-template-columns:1fr}.profile-details{grid-template-columns:1fr 1fr}.mobile-nav{position:fixed;z-index:20;right:12px;bottom:10px;left:12px;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid rgba(220,228,239,.9);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 16px 40px rgba(24,42,70,.18);backdrop-filter:blur(12px)}.mobile-nav button{display:grid;place-items:center;gap:2px;height:48px;border:0;border-radius:12px;color:#8b98aa;background:none}.mobile-nav button span{font-size:16px}.mobile-nav button small{font-size:7px}.mobile-nav button.active{color:#2864f0;background:#edf3ff}.section-heading{align-items:flex-end}.section-heading h2{font-size:20px}.ticket-card{align-items:flex-start}.ticket-meta{display:grid;justify-items:end;gap:5px}}
@media (max-width:540px) { .stats-grid{gap:9px}.stat-card{grid-template-columns:38px minmax(0,1fr);gap:9px;min-height:102px;padding:12px}.stat-icon{width:38px;height:38px;border-radius:12px}.stat-card strong{font-size:22px}.welcome-banner{display:block}.account-status{width:max-content;margin-top:20px}.dashboard-card{padding:16px}.compact-item{grid-template-columns:36px minmax(0,1fr) auto}.compact-icon{width:34px;height:34px}.profile-details{grid-template-columns:1fr}.ticket-card{display:grid}.ticket-meta{display:flex;justify-content:flex-start}.resource-meta{grid-template-columns:1fr 1fr}.topbar-actions{gap:6px}.internal-badge{display:none}.profile-form{padding:17px}.profile-form>header{display:block}.profile-form>header p{margin-top:8px}.profile-form-grid,.form-grid,.detail-grid{grid-template-columns:1fr}.modal-backdrop{padding:10px}.modal-card{max-height:94vh;border-radius:18px}.modal-header,.modal-body{padding:18px}.ticket-message{width:94%}.domain-lock{align-items:flex-start;flex-direction:column}.section-action{height:36px;padding-inline:11px;font-size:9px} }

/* Professional visual system and themes */
[hidden] { display:none!important; }
html { background:#f4f7fb; }
body,.portal-shell,.auth-panel,.dashboard-main,.dashboard-card,.data-card,.resource-card,.profile-card,.profile-details,.profile-form,.modal-card,.stat-card,.ticket-card,input,select,textarea { transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease; }
.theme-toggle { position:relative; display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; padding:0; border:1px solid #dfe6ef; border-radius:13px; color:#58677b; background:rgba(255,255,255,.9); box-shadow:0 9px 25px rgba(32,52,80,.08); font-size:17px; }
.theme-toggle:hover { color:#2864f0; border-color:#b9caf0; transform:translateY(-1px); }
.theme-toggle:focus-visible,.auth-mode-tabs button:focus-visible,.refresh-button:focus-visible,.new-ticket-button:focus-visible,.mobile-logout-button:focus-visible { outline:3px solid rgba(40,100,240,.24); outline-offset:2px; }
.theme-sun { display:none; }
.theme-moon { display:block; }
.auth-theme-toggle { position:fixed; z-index:30; top:26px; left:28px; }
.portal-shell { grid-template-columns:minmax(420px,48%) 1fr; background:#f6f8fc; }
.brand-panel { isolation:isolate; padding:42px clamp(44px,5vw,82px); background:radial-gradient(circle at 16% 17%,rgba(58,112,255,.34),transparent 30%),radial-gradient(circle at 82% 78%,rgba(63,225,190,.14),transparent 30%),linear-gradient(150deg,#061326 0%,#09203d 52%,#07182d 100%); }
.brand-panel::before { width:620px; height:620px; left:-320px; top:-310px; border-color:rgba(111,158,255,.12); box-shadow:0 0 0 80px rgba(255,255,255,.015),0 0 0 160px rgba(255,255,255,.012); }
.brand-panel::after { width:430px; height:430px; right:-240px; bottom:-170px; border-color:rgba(73,215,186,.11); }
.brand-mark { font-size:16px; letter-spacing:-.02em; }
.brand-mark .brand-symbol { width:46px; height:46px; border-radius:15px; background:linear-gradient(145deg,#3f80ff,#2456dd); }
.brand-message { max-width:610px; }
.brand-message h1 { margin:24px 0 18px; font-size:clamp(38px,4.5vw,64px); line-height:1.35; }
.brand-message h1 em { color:#80aaff; font-style:normal; }
.brand-message p { max-width:560px; color:#afc0d5; font-size:14px; }
.brand-proof-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.brand-proof-grid>div { display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:11px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(255,255,255,.045); backdrop-filter:blur(10px); }
.brand-proof-grid>div>span { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#a9c5ff; background:rgba(78,129,240,.16); font-size:17px; }
.brand-proof-grid strong { color:#f7faff; font-size:11px; }
.brand-proof-grid small { color:#7f96b0; font-size:8px; }
.trust-row { gap:clamp(20px,3vw,42px); }
.auth-panel { position:relative; overflow:hidden; padding:92px clamp(28px,6vw,96px) 52px; background:radial-gradient(circle at 5% 15%,rgba(42,100,240,.08),transparent 25%),linear-gradient(160deg,#f9fbfe,#eef3f9); }
.auth-panel::before,.auth-panel::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
.auth-panel::before { width:360px; height:360px; right:-240px; top:-140px; border:1px solid rgba(40,100,240,.08); box-shadow:0 0 0 70px rgba(40,100,240,.025); }
.auth-panel::after { width:180px; height:180px; left:-100px; bottom:-100px; background:rgba(45,196,161,.06); }
.mobile-brand { position:relative; z-index:2; }
.auth-card { position:relative; z-index:2; width:min(100%,500px); padding:34px 38px 30px; border:1px solid rgba(216,225,236,.95); border-radius:27px; background:rgba(255,255,255,.94); box-shadow:0 28px 80px rgba(28,49,77,.12),0 2px 8px rgba(28,49,77,.035); backdrop-filter:blur(18px); }
.auth-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:25px; }
.auth-view-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; background:linear-gradient(145deg,#3979f7,#2458df); box-shadow:0 12px 27px rgba(40,100,240,.24); font-size:20px; font-weight:800; }
.auth-mode-tabs { display:flex; gap:4px; padding:4px; border:1px solid #e3e9f1; border-radius:12px; background:#f4f7fb; }
.auth-mode-tabs button { min-width:70px; height:34px; padding:0 13px; border:0; border-radius:9px; color:#8793a3; background:transparent; font-size:10px; font-weight:700; }
.auth-mode-tabs button.active { color:#245ad9; background:#fff; box-shadow:0 5px 15px rgba(31,54,86,.09); }
.auth-card header { margin-bottom:25px; }
.auth-card h2 { font-size:clamp(28px,3vw,38px); }
.auth-card header p { max-width:390px; font-size:12px; }
.auth-card form { gap:15px; }
.auth-card input:not([type='checkbox']),.auth-card select { height:54px; padding:0 16px; border-color:#dfe6ef; border-radius:13px; background:#f9fbfd; }
.auth-card input:not([type='checkbox']):hover,.auth-card select:hover { border-color:#cbd6e3; background:#fff; }
.primary-button { height:55px; margin-top:6px; border-radius:13px; background:linear-gradient(120deg,#3477f6,#2458dc 65%,#1848bf); box-shadow:0 15px 32px rgba(40,100,240,.24); }
.auth-card footer { margin-top:21px; padding-top:19px; }
.security-note { position:relative; z-index:2; margin-top:22px; }
.service-surface { min-height:300px; padding:18px; }
.service-surface .resource-grid { min-height:262px; }
.service-surface .resource-card { box-shadow:none; }
.empty-resource-grid { grid-template-columns:1fr; place-items:center; }
.empty-resource-grid .empty-state { width:100%; min-height:250px; }

/* Dark theme */
html[data-theme='dark'] { background:#07111f; }
html[data-theme='dark'] .theme-sun { display:block; }
html[data-theme='dark'] .theme-moon { display:none; }
html[data-theme='dark'] body { color:#dbe6f4; background:#07111f; }
html[data-theme='dark'] .theme-toggle { color:#f5c867; border-color:#263951; background:#102136; box-shadow:0 9px 25px rgba(0,0,0,.2); }
html[data-theme='dark'] .portal-shell { background:#07111f; }
html[data-theme='dark'] .auth-panel { background:radial-gradient(circle at 6% 15%,rgba(49,108,245,.13),transparent 26%),linear-gradient(160deg,#0a1626,#07111f); }
html[data-theme='dark'] .auth-card { border-color:#22354b; background:rgba(13,28,46,.94); box-shadow:0 32px 90px rgba(0,0,0,.35); }
html[data-theme='dark'] .auth-mode-tabs { border-color:#24374d; background:#0a1829; }
html[data-theme='dark'] .auth-mode-tabs button { color:#8193aa; }
html[data-theme='dark'] .auth-mode-tabs button.active { color:#8db2ff; background:#152a44; box-shadow:none; }
html[data-theme='dark'] .auth-card h2 { color:#f3f7fc; }
html[data-theme='dark'] .auth-card header p,html[data-theme='dark'] .auth-card footer,html[data-theme='dark'] .security-note { color:#8294aa; }
html[data-theme='dark'] .auth-card label { color:#b7c5d6; }
html[data-theme='dark'] .auth-card input:not([type='checkbox']),html[data-theme='dark'] .auth-card select { color:#e3ebf5; border-color:#24384f; background:#0a1828; }
html[data-theme='dark'] .auth-card input:not([type='checkbox']):hover,html[data-theme='dark'] .auth-card input:not([type='checkbox']):focus,html[data-theme='dark'] .auth-card select:hover,html[data-theme='dark'] .auth-card select:focus { border-color:#476da7; background:#0c1c30; }
html[data-theme='dark'] .auth-card footer { border-color:#22354b; }
html[data-theme='dark'] .notice { color:#a9c6ff; background:#122946; }
html[data-theme='dark'] .error-notice { color:#ffadb6; background:#3b1b27; }
html[data-theme='dark'] .otp-actions { border-color:#24384f; background:#0a1828; color:#91a2b7; }
html[data-theme='dark'] .otp-actions button { color:#b9d0ff; background:#18345c; }
html[data-theme='dark'] .dashboard-app,html[data-theme='dark'] .dashboard-main { background:#07111f; }
html[data-theme='dark'] .dashboard-sidebar { background:radial-gradient(circle at 20% 0,rgba(50,111,238,.2),transparent 31%),linear-gradient(180deg,#08172a,#050e1a); box-shadow:16px 0 50px rgba(0,0,0,.22); }
html[data-theme='dark'] .dashboard-topbar h1,html[data-theme='dark'] .section-heading h2 { color:#edf3fb; }
html[data-theme='dark'] .dashboard-kicker,html[data-theme='dark'] .section-heading span { color:#73869e; }
html[data-theme='dark'] .refresh-button,html[data-theme='dark'] .mobile-logout-button { color:#9aabc0; border-color:#24374d; background:#102136; box-shadow:none; }
html[data-theme='dark'] .internal-badge { color:#8db2ff; border-color:#2a4260; background:#102136; }
html[data-theme='dark'] .dashboard-card,html[data-theme='dark'] .data-card,html[data-theme='dark'] .resource-card,html[data-theme='dark'] .profile-card,html[data-theme='dark'] .profile-details,html[data-theme='dark'] .profile-form,html[data-theme='dark'] .stat-card,html[data-theme='dark'] .ticket-card { border-color:#1e3147; background:#0d1c2f; box-shadow:0 12px 34px rgba(0,0,0,.16); }
html[data-theme='dark'] .stat-card:hover,html[data-theme='dark'] .ticket-card:hover { border-color:#365271; box-shadow:0 17px 38px rgba(0,0,0,.24); }
html[data-theme='dark'] .stat-card strong,html[data-theme='dark'] .dashboard-card>header h3,html[data-theme='dark'] .resource-title h3,html[data-theme='dark'] .ticket-main h3,html[data-theme='dark'] .profile-card h3,html[data-theme='dark'] .profile-details strong { color:#dfebf8; }
html[data-theme='dark'] .stat-card small,html[data-theme='dark'] .stat-card em,html[data-theme='dark'] .compact-item small,html[data-theme='dark'] .resource-title p,html[data-theme='dark'] .ticket-main p,html[data-theme='dark'] .profile-card p,html[data-theme='dark'] .profile-details span { color:#778aa1; }
html[data-theme='dark'] .compact-item,html[data-theme='dark'] .resource-meta,html[data-theme='dark'] .profile-details div,html[data-theme='dark'] .profile-form>header,html[data-theme='dark'] .form-actions { border-color:#1d3046; }
html[data-theme='dark'] .compact-button:hover { background:#102238; }
html[data-theme='dark'] .compact-item strong,html[data-theme='dark'] .resource-meta strong { color:#c3d1e2; }
html[data-theme='dark'] th { color:#71859d; background:#0a1829; }
html[data-theme='dark'] td { color:#aab9cb; border-color:#1d3046; }
html[data-theme='dark'] .domain-cell,html[data-theme='dark'] .invoice-number { color:#dbe7f5; }
html[data-theme='dark'] .service-cell strong { color:#dbe7f5; }
html[data-theme='dark'] .service-cell small { color:#75889e; }
html[data-theme='dark'] .table-action,html[data-theme='dark'] .card-action { color:#8fb4ff; border-color:#294562; background:#10243c; }
html[data-theme='dark'] .profile-form>header h3 { color:#dce8f5; }
html[data-theme='dark'] .profile-form label,html[data-theme='dark'] .modal-form label { color:#aab9cb; }
html[data-theme='dark'] .profile-form input,html[data-theme='dark'] .profile-form select,html[data-theme='dark'] .modal-form input,html[data-theme='dark'] .modal-form select,html[data-theme='dark'] .modal-form textarea { color:#dce7f4; border-color:#263b52; background:#091829; }
html[data-theme='dark'] .profile-form input:focus,html[data-theme='dark'] .profile-form select:focus,html[data-theme='dark'] .modal-form input:focus,html[data-theme='dark'] .modal-form select:focus,html[data-theme='dark'] .modal-form textarea:focus { border-color:#4e75ac; background:#0b1c30; }
html[data-theme='dark'] .empty-state { color:#70849c; }
html[data-theme='dark'] .empty-state>span { background:#12243a; }
html[data-theme='dark'] .mobile-nav { border-color:#283c53; background:rgba(12,27,45,.95); box-shadow:0 16px 40px rgba(0,0,0,.32); }
html[data-theme='dark'] .mobile-nav button { color:#71859d; }
html[data-theme='dark'] .mobile-nav button.active { color:#9abaff; background:#17335a; }
html[data-theme='dark'] .modal-backdrop { background:rgba(1,7,14,.76); }
html[data-theme='dark'] .modal-card { color:#dbe6f3; border-color:#284058; background:#0d1c2f; box-shadow:0 35px 90px rgba(0,0,0,.55); }
html[data-theme='dark'] .modal-header { border-color:#20344a; }
html[data-theme='dark'] .modal-header h2,html[data-theme='dark'] .invoice-items>h3,html[data-theme='dark'] .modal-form h3,html[data-theme='dark'] .domain-lock strong { color:#e3edf8; }
html[data-theme='dark'] .modal-header button { color:#9aabc0; border-color:#2a3f57; background:#122338; }
html[data-theme='dark'] .detail-grid>div { background:#122338; }
html[data-theme='dark'] .detail-grid strong { color:#cfdae8; }
html[data-theme='dark'] .info-box { color:#9eb5cf; border-color:#294662; background:#10243c; }
html[data-theme='dark'] .warning-box { color:#e5bd73; border-color:#5c4827; background:#2b2418; }
html[data-theme='dark'] .invoice-items,html[data-theme='dark'] .domain-lock { border-color:#23384f; }
html[data-theme='dark'] .invoice-items>h3 { background:#0a1829; }
html[data-theme='dark'] .invoice-items>div:not(.empty-state) { color:#adbdce; border-color:#21354b; }
html[data-theme='dark'] .invoice-items strong { color:#e0e9f4; }
html[data-theme='dark'] .ticket-message.staff { color:#cbd8e6; background:#14263b; }
html[data-theme='dark'] .ticket-message.operator { color:#cbd8e6; border-color:#263a50; background:#14263b; }
html[data-theme='dark'] .ticket-message.operator .actor-badge { color:#85e2c8; background:#183c36; }
html[data-theme='dark'] .ticket-message.operator .ticket-attachment-button { color:#b8cdf6; border-color:#30465f; background:#0c1b2d; }
html[data-theme='dark'] .ticket-rating { border-color:#2a3d53; color:#8fa0b5; }
html[data-theme='dark'] .server-access-toggle,html[data-theme='dark'] .server-access-fields { border-color:#263b52; background:#0a192b; }
html[data-theme='dark'] .server-access-warning { color:#f1c77d; background:#382a13; }
html[data-theme='dark'] .mobile-verification-label.verified { color:#79dbc0; }
html[data-theme='dark'] .mobile-verification-label.unverified { color:#ff9da6; }
html[data-theme='dark'] .modal-form { border-color:#22364c; }
html[data-theme='dark'] .modal-notice { color:#a9c6ff; background:#153052; }
html[data-theme='dark'] .content-refresh,html[data-theme='dark'] .content-search { color:#8fb4ff; border-color:#29425d; background:#102136; }
html[data-theme='dark'] .content-search input { color:#dce7f4; }
html[data-theme='dark'] .content-loading { color:#74879e; }
html[data-theme='dark'] .content-loading>span { border-color:#263b52; border-top-color:#6899ff; }
html[data-theme='dark'] .content-card,html[data-theme='dark'] .content-grid>.empty-state { color:#b7c5d6; border-color:#1f3248; background:#0d1c2f; box-shadow:0 12px 30px rgba(0,0,0,.16); }
html[data-theme='dark'] .content-card:hover { border-color:#365471; box-shadow:0 16px 36px rgba(0,0,0,.24); }
html[data-theme='dark'] .content-card-icon { color:#8fb4ff; background:#17335a; }
html[data-theme='dark'] .content-card h3 { color:#e0e9f4; }
html[data-theme='dark'] .content-card p,html[data-theme='dark'] .content-article p { color:#9badc1; }
html[data-theme='dark'] .content-card>strong { color:#8fb4ff; }

@media (max-width:900px) {
  .auth-theme-toggle { top:22px; left:20px; }
  .auth-panel { padding-top:28px; background:radial-gradient(circle at 0 0,rgba(42,100,240,.09),transparent 30%),#f5f8fc; }
  .auth-card { margin:auto 0; padding:30px; }
  html[data-theme='dark'] .auth-panel { background:radial-gradient(circle at 0 0,rgba(42,100,240,.14),transparent 30%),#07111f; }
}
@media (max-width:1180px) { .content-grid{grid-template-columns:1fr 1fr} }
@media (max-width:820px) {
  .mobile-nav{grid-template-columns:repeat(7,minmax(0,1fr))}
  .mobile-nav button{min-width:0;padding-inline:2px}
}
@media (max-width:480px) {
  .auth-card { padding:24px 20px; border-radius:22px; }
  .auth-card-top { margin-bottom:22px; }
  .auth-view-icon { width:43px; height:43px; border-radius:13px; }
  .auth-mode-tabs button { min-width:61px; padding-inline:9px; }
  .auth-panel { padding-inline:14px; }
  .auth-theme-toggle { width:38px; height:38px; }
  .dashboard-topbar .new-ticket-button { display:none; }
  .content-grid { grid-template-columns:1fr; }
  .content-card { min-height:205px; }
}

/* Account types, knowledge categories and immutable usernames */
.account-type-selector { margin:0; padding:0; border:0; }
.account-type-selector legend { margin-bottom:9px; color:#344054; font-size:13px; }
.account-type-selector>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-type-selector label { position:relative; display:block; cursor:pointer; }
.account-type-selector input { position:absolute; opacity:0; pointer-events:none; }
.account-type-selector label>span { display:grid; gap:3px; min-height:66px; padding:12px 14px; border:1px solid #dfe6ef; border-radius:13px; background:#f9fbfd; transition:.2s ease; }
.account-type-selector label b { color:#344054; font-size:12px; }
.account-type-selector label small { color:#8a97a8; font-size:9px; }
.account-type-selector input:checked+span { border-color:#82a8ff; background:#f1f6ff; box-shadow:0 0 0 3px rgba(40,100,240,.09); }
.account-type-selector input:checked+span b { color:#245ad9; }
.account-type-selector input:focus-visible+span { outline:3px solid rgba(40,100,240,.2); outline-offset:2px; }
.company-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:15px; border:1px dashed #ced9e8; border-radius:16px; background:#f7faff; }
.company-fields .wide { grid-column:1/-1; }
.knowledge-categories { display:flex; gap:8px; margin:0 0 14px; padding:2px 0 8px; overflow-x:auto; scrollbar-width:thin; }
.knowledge-categories button { flex:0 0 auto; min-height:38px; padding:0 15px; border:1px solid #dce5f0; border-radius:999px; color:#607087; background:#fff; font-family:inherit; font-size:10px; font-weight:750; }
.knowledge-categories button:hover { color:#245ad9; border-color:#a9c1f5; }
.knowledge-categories button.active { color:#fff; border-color:#2864f0; background:linear-gradient(120deg,#3979f7,#2458df); box-shadow:0 8px 20px rgba(40,100,240,.18); }
.username-card { margin-top:20px; padding:24px; border:1px solid #e1e8f0; border-radius:19px; background:#fff; box-shadow:0 12px 36px rgba(27,48,76,.055); }
.username-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.username-card>header span { display:block; margin-bottom:5px; color:#2864f0; font-size:10px; font-weight:750; }
.username-card>header h3 { margin:0; color:#17243a; font-size:17px; }
.username-card>header p { margin:0; color:#8492a5; font-size:10px; }
.username-card form { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:12px; }
.username-card form label { display:grid; gap:7px; color:#526176; font-size:11px; }
.username-card form input { height:47px; padding:0 13px; border:1px solid #dce5ef; border-radius:11px; color:#18263b; background:#f9fbfd; font:inherit; }
.username-card form .primary-inline-button { height:47px; }
.username-locked { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #cfece3; border-radius:13px; background:#f1fbf8; }
.username-locked>span { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; color:#087f62; background:#dff6ef; font-weight:900; }
.username-locked div { display:grid; gap:3px; }
.username-locked small { color:#628277; font-size:9px; }
.username-locked strong { color:#11664f; font-size:14px; }
html[data-theme='dark'] .account-type-selector legend { color:#b7c5d6; }
html[data-theme='dark'] .account-type-selector label>span { border-color:#24384f; background:#0a1828; }
html[data-theme='dark'] .account-type-selector label b { color:#b7c5d6; }
html[data-theme='dark'] .account-type-selector label small { color:#72859d; }
html[data-theme='dark'] .account-type-selector input:checked+span { border-color:#406da9; background:#102642; box-shadow:0 0 0 3px rgba(70,121,211,.1); }
html[data-theme='dark'] .account-type-selector input:checked+span b { color:#98b9ff; }
html[data-theme='dark'] .company-fields { border-color:#29415d; background:#0a192a; }
html[data-theme='dark'] .knowledge-categories button { color:#8799af; border-color:#29415a; background:#102136; }
html[data-theme='dark'] .knowledge-categories button.active { color:#fff; border-color:#3b73e8; background:linear-gradient(120deg,#356fe8,#214fbd); }
html[data-theme='dark'] .username-card { border-color:#1e3147; background:#0d1c2f; box-shadow:0 12px 34px rgba(0,0,0,.16); }
html[data-theme='dark'] .username-card>header h3 { color:#e0eaf5; }
html[data-theme='dark'] .username-card>header p { color:#778aa1; }
html[data-theme='dark'] .username-card form label { color:#aab9cb; }
html[data-theme='dark'] .username-card form input { color:#dce7f4; border-color:#263b52; background:#091829; }
html[data-theme='dark'] .username-locked { border-color:#1c5748; background:#0b2b25; }
html[data-theme='dark'] .username-locked>span { color:#6de3c0; background:#123e34; }
html[data-theme='dark'] .username-locked small { color:#77a799; }
html[data-theme='dark'] .username-locked strong { color:#9cebd3; }
@media (max-width:620px) {
  .account-type-selector>div,.company-fields { grid-template-columns:1fr; }
  .company-fields .wide { grid-column:auto; }
  .username-card { padding:18px; }
  .username-card>header { display:block; }
  .username-card>header p { margin-top:7px; }
  .username-card form { grid-template-columns:1fr; }
}

/* Iran contact details and mandatory profile completion */
.auth-panel.registration-mode { justify-content:flex-start; padding-top:48px; padding-bottom:48px; }
.registration-contact { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; border:1px solid #dce5f0; border-radius:17px; background:#f7faff; }
.registration-contact .wide { grid-column:1/-1; }
.registration-contact label small,.profile-form label small { color:#8a97a8; font-size:9px; font-weight:500; }
.iran-country,.profile-country { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:0 15px; border:1px solid #dce5f0; border-radius:13px; background:#fff; }
.iran-country { grid-column:1/-1; }
.iran-country span,.profile-country span { color:#627188; font-size:11px; }
.iran-country strong,.profile-country strong { color:#18263a; font-size:12px; }
.profile-country { align-self:end; min-height:46px; background:#fbfcfe; }
.profile-completion-notice { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; padding:18px 20px; border:1px solid #ffd79b; border-radius:17px; color:#744b0d; background:#fff9ed; box-shadow:0 10px 28px rgba(157,102,17,.07); }
.profile-completion-notice>span { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:12px; color:#9a5d00; background:#ffedc9; font-size:19px; font-weight:900; }
.profile-completion-notice strong { display:block; margin-bottom:4px; color:#714509; font-size:13px; }
.profile-completion-notice p { margin:0 0 5px; color:#916b34; font-size:10px; line-height:1.8; }
.profile-completion-notice b { color:#8d5707; font-size:10px; }
.dashboard-nav button:disabled,.mobile-nav button:disabled,[data-open-section]:disabled { cursor:not-allowed; opacity:.38; filter:saturate(.5); }
.dashboard-nav button:disabled:hover,.mobile-nav button:disabled:hover { color:inherit; background:transparent; }
html[data-theme='dark'] .registration-contact { border-color:#29415d; background:#0a192a; }
html[data-theme='dark'] .iran-country,html[data-theme='dark'] .profile-country { border-color:#263b52; background:#091829; }
html[data-theme='dark'] .iran-country span,html[data-theme='dark'] .profile-country span { color:#8294aa; }
html[data-theme='dark'] .iran-country strong,html[data-theme='dark'] .profile-country strong { color:#dce7f4; }
html[data-theme='dark'] .profile-completion-notice { color:#f6cf8d; border-color:#6c4b1c; background:#2c2111; box-shadow:none; }
html[data-theme='dark'] .profile-completion-notice>span { color:#ffd58b; background:#533915; }
html[data-theme='dark'] .profile-completion-notice strong { color:#ffe0a8; }
html[data-theme='dark'] .profile-completion-notice p { color:#c6a977; }
html[data-theme='dark'] .profile-completion-notice b { color:#f3c97f; }
@media (max-width:620px) {
  .registration-contact { grid-template-columns:1fr; padding:13px; }
  .registration-contact .wide,.iran-country { grid-column:auto; }
}
@media (max-width:540px) {
  .server-access-fields { grid-template-columns:1fr; }
  .ticket-rating { align-items:flex-start; flex-direction:column; }
  .rating-stars button { font-size:20px; }
}

/* Visual refresh v10 */
:root {
  --panel-blue:#2563eb;
  --panel-blue-strong:#1d4ed8;
  --panel-cyan:#0ea5e9;
  --panel-green:#10b981;
  --panel-violet:#7c3aed;
  --panel-amber:#f59e0b;
  --panel-bg:#f5f7fb;
  --panel-card:rgba(255,255,255,.92);
  --panel-border:#e4eaf2;
  --panel-text:#172033;
  --panel-muted:#7a899e;
  --panel-shadow:0 12px 35px rgba(29,48,78,.065);
  --panel-shadow-hover:0 20px 46px rgba(29,48,78,.11);
}
html { scroll-behavior:smooth; }
body { font-family:'Vazirmatn',Tahoma,Arial,sans-serif; font-feature-settings:'ss01' 1,'tnum' 1; text-rendering:optimizeLegibility; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { font-family:inherit; }
::selection { color:#fff; background:#2563eb; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background-clip:padding-box; background:#c7d1df; }
::-webkit-scrollbar-track { background:transparent; }
.ui-icon { display:block; width:1.15em; height:1.15em; flex:0 0 auto; overflow:visible; }
[data-icon] { display:inline-grid; place-items:center; }

.dashboard-app { grid-template-columns:278px minmax(0,1fr); background:var(--panel-bg); }
.dashboard-sidebar { padding:24px 17px 18px; background:radial-gradient(circle at 20% 0,rgba(59,130,246,.26),transparent 31%),radial-gradient(circle at 90% 76%,rgba(14,165,233,.08),transparent 30%),linear-gradient(180deg,#0b1d36 0%,#071527 100%); box-shadow:14px 0 45px rgba(11,29,54,.11); }
.dashboard-logo { gap:12px; padding:1px 9px 23px; font-size:16px; letter-spacing:-.02em; }
.dashboard-logo .brand-symbol { width:42px; height:42px; border-radius:14px; box-shadow:0 10px 25px rgba(37,99,235,.3); }
.dashboard-nav { gap:5px; margin-top:20px; }
.dashboard-nav button { grid-template-columns:34px minmax(0,1fr) auto; min-height:52px; gap:9px; padding:0 11px; border-radius:14px; color:#9fb0c6; font-size:12px; font-weight:650; }
.dashboard-nav button>span { width:34px; height:34px; border:1px solid transparent; border-radius:10px; color:#8fa4bd; background:rgba(255,255,255,.035); font-size:17px; }
.dashboard-nav button:hover { background:rgba(255,255,255,.055); transform:translateX(-2px); }
.dashboard-nav button:hover>span { color:#dce9fa; background:rgba(255,255,255,.07); }
.dashboard-nav button.active { background:linear-gradient(135deg,#3478f6,#245bdc); box-shadow:0 12px 27px rgba(22,74,185,.28); }
.dashboard-nav button.active>span { color:#fff; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.13); }
.dashboard-nav button>b { min-width:24px; padding:3px 7px; font-size:9px; }
.sidebar-user { margin-top:auto; padding:18px 8px 13px; }
.user-avatar { width:44px; height:44px; border-radius:14px; box-shadow:0 9px 22px rgba(49,83,214,.23); }
.sidebar-user strong { font-size:11px; }
.sidebar-user small { font-size:8px; }
.sidebar-logout { display:flex; align-items:center; justify-content:center; gap:8px; height:43px; border-radius:12px; }
.sidebar-logout .ui-icon { width:16px; height:16px; }

.dashboard-main { min-height:100vh; padding:0 clamp(24px,3.5vw,58px) 58px; background:radial-gradient(circle at 5% 0,rgba(37,99,235,.045),transparent 24%),var(--panel-bg); }
.dashboard-topbar { position:sticky; z-index:12; top:0; min-height:96px; margin:0 calc(clamp(24px,3.5vw,58px) * -1) 26px; padding:22px clamp(24px,3.5vw,58px) 15px; border-bottom:1px solid rgba(220,228,238,.78); background:rgba(245,247,251,.86); backdrop-filter:blur(18px) saturate(150%); }
.dashboard-kicker { color:#8491a4; font-weight:600; }
.dashboard-topbar h1 { margin-top:5px; color:var(--panel-text); font-size:25px; font-weight:850; }
.topbar-actions { gap:9px; }
.theme-toggle,.refresh-button,.mobile-logout-button { border-color:#dfe6ef; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(28,48,78,.06); }
.theme-toggle .ui-icon,.refresh-button .ui-icon { width:18px; height:18px; }
.new-ticket-button,.section-action { gap:8px; height:44px; padding:0 18px; border-radius:12px; background:linear-gradient(135deg,#3478f6,#2457d8); box-shadow:0 11px 26px rgba(37,99,235,.22); }
.new-ticket-button:hover,.section-action:hover,.primary-inline-button:hover { transform:translateY(-1px); box-shadow:0 15px 31px rgba(37,99,235,.28); }
.new-ticket-button .ui-icon { width:16px; height:16px; stroke-width:2.2; }

.welcome-banner { min-height:162px; padding:31px 34px; border:1px solid rgba(255,255,255,.13); border-radius:24px; background:radial-gradient(circle at 8% 5%,rgba(255,255,255,.18),transparent 24%),radial-gradient(circle at 90% 110%,rgba(14,165,233,.38),transparent 38%),linear-gradient(120deg,#123879 0%,#1e57cb 57%,#2870ed 100%); box-shadow:0 22px 50px rgba(26,78,181,.19); }
.welcome-banner::before { content:''; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,transparent,#000); pointer-events:none; }
.welcome-banner>div { position:relative; z-index:1; }
.welcome-banner h2 { margin:8px 0 7px; font-size:29px; font-weight:850; }
.welcome-banner p { font-size:11px; }
.account-status { padding:10px 15px; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.12); box-shadow:inset 0 1px rgba(255,255,255,.12); }

.stats-grid { gap:16px; margin:19px 0; }
.stat-card { position:relative; overflow:hidden; grid-template-columns:52px minmax(0,1fr) 20px; min-height:128px; padding:19px; border-color:var(--panel-border); border-radius:19px; background:var(--panel-card); box-shadow:var(--panel-shadow); }
.stat-card::before { content:''; position:absolute; top:0; right:19px; left:19px; height:2px; border-radius:0 0 4px 4px; opacity:.75; }
.stat-card.blue::before{background:linear-gradient(90deg,transparent,var(--panel-blue),transparent)}
.stat-card.violet::before{background:linear-gradient(90deg,transparent,var(--panel-violet),transparent)}
.stat-card.amber::before{background:linear-gradient(90deg,transparent,var(--panel-amber),transparent)}
.stat-card.green::before{background:linear-gradient(90deg,transparent,var(--panel-green),transparent)}
.stat-card:hover { transform:translateY(-3px); border-color:#d3deeb; box-shadow:var(--panel-shadow-hover); }
.stat-icon { width:50px; height:50px; border-radius:15px; }
.stat-icon .ui-icon { width:23px; height:23px; }
.stat-card strong { font-size:27px; font-weight:850; letter-spacing:-.035em; }
.stat-card>b .ui-icon { width:17px; height:17px; }

.dashboard-card,.data-card,.resource-card,.profile-card,.profile-details,.profile-form,.username-card,.ticket-card,.content-card { border-color:var(--panel-border); background:var(--panel-card); box-shadow:var(--panel-shadow); }
.dashboard-card,.data-card,.profile-card,.profile-details { border-radius:20px; }
.dashboard-card { padding:21px; }
.dashboard-card>header { padding-bottom:13px; border-bottom:1px solid #edf1f6; }
.dashboard-card>header button { padding:6px 9px; border-radius:8px; }
.dashboard-card>header button:hover { background:#edf4ff; }
.compact-item { min-height:70px; border-color:#edf1f6; border-radius:11px; padding-inline:6px; }
.compact-button:hover { background:#f7f9fd; }
.compact-icon .ui-icon,.ticket-icon .ui-icon,.content-card-icon .ui-icon,.empty-state .ui-icon { width:20px; height:20px; }
.section-heading { margin-bottom:22px; }
.section-heading h2 { margin-top:5px; font-size:25px; font-weight:850; }
.internal-badge { min-height:36px; padding:0 13px; border-color:#dbe5f1; box-shadow:0 6px 18px rgba(32,52,82,.045); }
.data-card { border-radius:20px; }
th { padding:17px 20px; color:#7d8ca1; background:#f8fafd; font-size:9px; letter-spacing:.01em; }
td { padding:18px 20px; border-color:#edf1f6; font-size:10px; }
tbody tr { transition:background-color .18s ease; }
tbody tr:hover { background:#f9fbfe; }
.table-action,.card-action { min-height:34px; padding-inline:12px; border-radius:9px; }
.ticket-list { gap:11px; }
.ticket-card { padding:18px 20px; border-radius:17px; }
.ticket-card:hover { transform:translateY(-2px); box-shadow:var(--panel-shadow-hover); }
.ticket-icon { width:44px; height:44px; }
.content-card { border-radius:19px; }
.content-card-icon { width:45px; height:45px; border-radius:14px; }
.content-search { border-radius:13px; box-shadow:0 8px 22px rgba(31,50,78,.045); }
.content-search [data-icon] { color:#8795a8; }
.ticket-attachment-button { display:inline-flex; align-items:center; gap:6px; }
.ticket-attachment-button .ui-icon { width:14px; height:14px; }
.knowledge-meta span { display:inline-flex; align-items:center; gap:5px; }
.knowledge-meta .ui-icon { width:13px; height:13px; }
.profile-form input,.profile-form select,.modal-form input,.modal-form select,.modal-form textarea,.username-card form input { border-radius:12px; background:#fbfcfe; }
.profile-form input:focus,.profile-form select:focus,.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus,.username-card form input:focus { border-color:#82a8f4; box-shadow:0 0 0 4px rgba(37,99,235,.09); outline:none; }
.iran-country svg,.profile-country svg { width:32px; height:21px; }

html[data-theme='dark'] {
  --panel-bg:#07111f;
  --panel-card:rgba(13,28,47,.95);
  --panel-border:#1f334a;
  --panel-text:#edf4fc;
  --panel-muted:#8294aa;
  --panel-shadow:0 12px 34px rgba(0,0,0,.17);
  --panel-shadow-hover:0 20px 46px rgba(0,0,0,.27);
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb { background:#30445b; }
html[data-theme='dark'] .dashboard-main { background:radial-gradient(circle at 5% 0,rgba(48,111,247,.07),transparent 24%),var(--panel-bg); }
html[data-theme='dark'] .dashboard-topbar { border-color:rgba(31,51,74,.82); background:rgba(7,17,31,.84); }
html[data-theme='dark'] .dashboard-card>header { border-color:#1f3247; }
html[data-theme='dark'] .dashboard-card>header button:hover,html[data-theme='dark'] .compact-button:hover { background:#102238; }
html[data-theme='dark'] tbody tr:hover { background:#102136; }
html[data-theme='dark'] .stat-card::before { opacity:.55; }

@media (max-width:1180px) {
  .dashboard-app { grid-template-columns:238px minmax(0,1fr); }
  .dashboard-nav button { grid-template-columns:32px minmax(0,1fr) auto; padding-inline:9px; }
  .stats-grid { gap:12px; }
}
@media (max-width:820px) {
  .dashboard-main { padding:0 15px 30px; }
  .dashboard-topbar { min-height:77px; margin:0 -15px 18px; padding:16px 15px 12px; }
  .mobile-dashboard-brand .brand-symbol { box-shadow:0 8px 20px rgba(37,99,235,.22); }
  .mobile-logout-button { display:grid; place-items:center; width:38px; padding:0; }
  .mobile-logout-label { display:none; }
  .welcome-banner { min-height:145px; padding:25px; border-radius:20px; }
  .stats-grid { gap:10px; }
  .stat-card { min-height:110px; padding:14px; border-radius:16px; }
  .mobile-nav { right:10px; bottom:max(9px,env(safe-area-inset-bottom)); left:10px; gap:2px; padding:6px; border-radius:19px; }
  .mobile-nav button { height:51px; border-radius:13px; }
  .mobile-nav button span { font-size:18px; }
  .mobile-nav button .ui-icon { width:19px; height:19px; }
  .mobile-nav button small { font-size:7px; font-weight:650; }
}
@media (max-width:540px) {
  .welcome-banner h2 { font-size:23px; }
  .stat-card { grid-template-columns:40px minmax(0,1fr); }
  .stat-icon { width:40px; height:40px; }
  .stat-icon .ui-icon { width:19px; height:19px; }
  .dashboard-card,.data-card,.profile-card,.profile-details { border-radius:17px; }
  .mobile-nav { overflow-x:auto; grid-template-columns:repeat(7,minmax(55px,1fr)); scrollbar-width:none; }
  .mobile-nav::-webkit-scrollbar { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Product catalog and ordering */
.content-refresh { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.content-refresh .ui-icon { width:14px; height:14px; }
.store-toolbar { display:grid; gap:14px; margin-bottom:19px; }
.store-search { width:min(100%,560px); max-width:none; margin:0; }
.store-groups { display:flex; gap:8px; padding:2px 0 5px; overflow-x:auto; scrollbar-width:thin; }
.store-groups button { flex:0 0 auto; min-height:39px; padding:0 15px; border:1px solid #dce5f0; border-radius:999px; color:#607087; background:#fff; font-size:9px; font-weight:750; transition:.2s ease; }
.store-groups button:hover { color:#245ad9; border-color:#a9c1f5; transform:translateY(-1px); }
.store-groups button.active { color:#fff; border-color:#2864f0; background:linear-gradient(120deg,#3979f7,#2458df); box-shadow:0 8px 20px rgba(40,100,240,.18); }
.store-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.store-grid>.empty-state { grid-column:1/-1; min-height:280px; border:1px dashed #dce5ef; border-radius:20px; background:rgba(255,255,255,.62); }
.store-product-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:390px; padding:21px; border:1px solid var(--panel-border); border-radius:20px; background:var(--panel-card); box-shadow:var(--panel-shadow); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.store-product-card::before { content:''; position:absolute; top:0; right:0; left:0; height:3px; opacity:0; background:linear-gradient(90deg,#3b82f6,#06b6d4); transition:opacity .2s ease; }
.store-product-card:hover { transform:translateY(-3px); border-color:#cbd9e9; box-shadow:var(--panel-shadow-hover); }
.store-product-card:hover::before { opacity:1; }
.store-product-card.unavailable { opacity:.62; filter:saturate(.65); }
.store-product-card>header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.store-product-icon { display:grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border-radius:15px; color:#2864f0; background:linear-gradient(145deg,#edf4ff,#e3edff); }
.store-product-icon .ui-icon { width:23px; height:23px; }
.store-product-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.store-product-tags span { padding:5px 8px; border:1px solid #e2e9f2; border-radius:999px; color:#718096; background:#f8fafc; font-size:7px; font-weight:700; }
.store-product-title { margin:19px 0 14px; }
.store-product-title h3 { overflow:hidden; margin:0 0 8px; color:#18263a; font-size:15px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.store-product-title p { display:-webkit-box; overflow:hidden; min-height:53px; margin:0; color:#7e8da1; font-size:9px; line-height:1.9; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.store-product-price { display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 9px; margin-bottom:15px; padding:14px 15px; border:1px solid #e5ebf3; border-radius:14px; background:#f8fafd; }
.store-product-price small { color:#8997a9; font-size:8px; }
.store-product-price strong { grid-row:1/3; grid-column:2; color:#1d4ed8; font-size:17px; font-weight:900; direction:ltr; unicode-bidi:plaintext; }
.store-product-price span { color:#607087; font-size:8px; }
.store-product-price em { grid-column:1/-1; margin-top:5px; color:#a66a0a; font-size:7px; font-style:normal; }
.store-product-meta { display:grid; gap:7px; margin:0 0 17px; padding:0; color:#718096; list-style:none; }
.store-product-meta li { display:flex; align-items:center; gap:7px; font-size:8px; }
.store-product-meta .ui-icon { width:14px; height:14px; color:#7891b3; }
.store-order-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:auto; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,#3478f6,#2457d8); box-shadow:0 10px 23px rgba(37,99,235,.2); font-size:10px; font-weight:800; transition:.2s ease; }
.store-order-button:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(37,99,235,.27); }
.store-order-button:disabled { cursor:not-allowed; color:#8895a7; background:#e9eef4; box-shadow:none; transform:none; }
.store-order-button .ui-icon { width:16px; height:16px; }

.order-form { border-top:0; padding-top:0; }
.order-product-summary { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:13px; padding:16px; border:1px solid #dfe8f3; border-radius:15px; background:#f7faff; }
.order-product-summary>span { display:grid; place-items:center; width:52px; height:52px; border-radius:15px; color:#2864f0; background:#e8f0ff; }
.order-product-summary>span .ui-icon { width:25px; height:25px; }
.order-product-summary div { display:grid; gap:3px; min-width:0; }
.order-product-summary small { color:#6e83a0; font-size:8px; }
.order-product-summary strong { overflow:hidden; color:#1c2b40; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.order-product-summary p { margin:3px 0 0; color:#7e8ca0; font-size:8px; line-height:1.8; }
.order-fields { margin-top:2px; }
.order-total { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 17px; border:1px solid #d7e4f5; border-radius:14px; background:linear-gradient(120deg,#f7faff,#eef5ff); }
.order-total>div { display:grid; gap:4px; }
.order-total small { color:#385784; font-size:9px; font-weight:800; }
.order-total span { color:#8091a8; font-size:7px; }
.order-total strong { flex:0 0 auto; color:#1d4ed8; font-size:15px; font-weight:900; direction:ltr; unicode-bidi:plaintext; }
.order-terms { display:flex!important; grid-template-columns:auto 1fr; align-items:flex-start; gap:9px!important; padding:2px 1px; color:#66768a!important; font-size:8px!important; line-height:1.8; }
.order-terms input { flex:0 0 auto; width:16px!important; min-height:16px!important; margin-top:1px; padding:0!important; accent-color:#2864f0; }
.order-submit { display:flex; align-items:center; justify-content:center; gap:8px; min-height:47px; }
.order-submit .ui-icon { width:16px; height:16px; }
.order-success { display:grid; justify-items:center; padding:10px 0 4px; text-align:center; }
.order-success-icon { display:grid; place-items:center; width:62px; height:62px; margin-bottom:15px; border-radius:20px; color:#07815f; background:#e2f8f1; box-shadow:0 10px 25px rgba(10,138,100,.11); }
.order-success-icon .ui-icon { width:29px; height:29px; stroke-width:2.2; }
.order-success h3 { margin:0 0 7px; color:#17263a; font-size:20px; }
.order-success>p { margin:0 0 19px; color:#78889d; font-size:9px; }
.order-success .detail-grid { width:100%; text-align:right; }
.order-success .detail-grid strong { unicode-bidi:plaintext; }
.order-success-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:17px; }
.order-success-actions button { display:flex; align-items:center; justify-content:center; gap:7px; }
.order-success-actions .ui-icon { width:15px; height:15px; }

html[data-theme='dark'] .store-groups button { color:#8799af; border-color:#29415a; background:#102136; }
html[data-theme='dark'] .store-groups button.active { color:#fff; border-color:#3b73e8; background:linear-gradient(120deg,#356fe8,#214fbd); }
html[data-theme='dark'] .store-grid>.empty-state { border-color:#263b52; background:rgba(13,28,47,.75); }
html[data-theme='dark'] .store-product-title h3,html[data-theme='dark'] .order-product-summary strong,html[data-theme='dark'] .order-success h3 { color:#e3edf8; }
html[data-theme='dark'] .store-product-title p,html[data-theme='dark'] .store-product-meta,html[data-theme='dark'] .order-product-summary p,html[data-theme='dark'] .order-success>p { color:#8092a8; }
html[data-theme='dark'] .store-product-tags span { color:#8295ac; border-color:#263b51; background:#102136; }
html[data-theme='dark'] .store-product-icon { color:#92b6ff; background:linear-gradient(145deg,#17345b,#102944); }
html[data-theme='dark'] .store-product-price { border-color:#263b52; background:#0a192b; }
html[data-theme='dark'] .store-product-price strong,html[data-theme='dark'] .order-total strong { color:#9abaff; }
html[data-theme='dark'] .store-order-button:disabled { color:#64768c; background:#15263a; }
html[data-theme='dark'] .order-product-summary { border-color:#29415d; background:#0a192b; }
html[data-theme='dark'] .order-product-summary>span { color:#9abaff; background:#16345b; }
html[data-theme='dark'] .order-total { border-color:#29445f; background:linear-gradient(120deg,#0b1b2e,#102540); }
html[data-theme='dark'] .order-total small { color:#a8c1e8; }
html[data-theme='dark'] .order-terms { color:#91a3b9!important; }
html[data-theme='dark'] .order-success-icon { color:#73dfbd; background:#123c33; box-shadow:none; }
html[data-theme='dark'] .secondary-inline-button { color:#9abaff; border-color:#2a435f; background:#102136; }

@media (max-width:1180px) { .store-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) {
  .mobile-nav { grid-template-columns:repeat(9,minmax(58px,1fr)); overflow-x:auto; scrollbar-width:none; }
  .mobile-nav::-webkit-scrollbar { display:none; }
}

/* WHMCS captcha and customer downloads */
.captcha-field { display:grid; justify-items:center; gap:8px; min-height:62px; padding:12px; border:1px solid #dfe6ef; border-radius:14px; background:#f9fbfd; overflow:hidden; }
.captcha-field[hidden] { display:none; }
.captcha-field small { color:#77879a; font-size:10px; line-height:1.7; text-align:center; }
.captcha-field.error { border-color:#f0b8b8; background:#fff8f8; }
.captcha-field.error small { color:#c73e3e; }
#captcha-widget { max-width:100%; min-height:1px; }
.default-captcha-box { display:grid; grid-template-columns:minmax(150px,1fr) minmax(110px,.7fr) auto; align-items:center; gap:9px; width:100%; direction:ltr; }
.default-captcha-box img { display:block; width:100%; max-width:264px; height:58px; border:1px solid #d7e0eb; border-radius:10px; object-fit:cover; image-rendering:auto; background:#f5f8fc; }
.auth-card .default-captcha-answer { height:48px!important; padding:0 12px!important; text-align:center; text-transform:uppercase; letter-spacing:.16em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:16px; font-weight:800; }
.default-captcha-refresh { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:42px; padding:0 10px; border:1px solid #d9e3ef; border-radius:10px; color:#41617f; background:#fff; font-family:inherit; font-size:9px; font-weight:750; white-space:nowrap; }
.default-captcha-refresh .ui-icon { width:14px; height:14px; }
.default-captcha-refresh:hover { color:#245bdc; border-color:#a9c1f5; background:#f4f7ff; }
.download-categories { display:flex; gap:8px; margin-bottom:18px; padding-bottom:7px; overflow-x:auto; scrollbar-width:thin; }
.download-categories button { flex:0 0 auto; min-height:40px; padding:0 16px; border:1px solid #dce5f0; border-radius:999px; color:#607087; background:#fff; font-family:inherit; font-size:10px; font-weight:750; }
.download-categories button.active { color:#fff; border-color:#2864f0; background:linear-gradient(120deg,#3979f7,#2458df); box-shadow:0 8px 20px rgba(40,100,240,.18); }
.downloads-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.downloads-grid>.empty-state { grid-column:1/-1; min-height:300px; border:1px solid #e4eaf2; border-radius:20px; background:#fff; }
.download-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:15px; padding:20px; border:1px solid #e1e8f1; border-radius:20px; background:#fff; box-shadow:0 13px 32px rgba(31,54,86,.055); }
.download-file-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:17px; color:#2864f0; background:#edf3ff; }
.download-file-icon .ui-icon { width:27px; height:27px; }
.download-copy { min-width:0; }
.download-copy h3 { margin:8px 0 5px; color:var(--ink); font-size:15px; }
.download-copy p { margin:0; color:#7d8ba0; font-size:10px; line-height:1.8; }
.download-meta { display:flex; flex-wrap:wrap; gap:6px; }
.download-meta span { padding:4px 8px; border-radius:7px; color:#66788f; background:#f2f5f9; font-size:8px; font-weight:750; }
.download-meta .product-download-badge { color:#167555; background:#e9f8f1; }
.download-count { color:#95a2b3; font-size:8px; white-space:nowrap; }
.download-button { display:inline-flex; grid-column:2/4; align-items:center; justify-content:center; gap:7px; min-height:42px; border-radius:12px; color:#fff; background:linear-gradient(120deg,#3979f7,#2458df); font-size:11px; font-weight:800; text-decoration:none; }
.download-button .ui-icon { width:16px; height:16px; }
.download-button.locked,.download-button:disabled { cursor:not-allowed; color:#7d8da2; border:1px solid #dce4ee; background:#eef2f7; box-shadow:none; }
.email-verification-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; margin-bottom:18px; padding:17px 19px; border:1px solid #f3cf86; border-radius:18px; color:#70450a; background:linear-gradient(120deg,#fffaf0,#fff5dc); box-shadow:0 12px 30px rgba(151,99,17,.08); }
.email-verification-banner[hidden] { display:none; }
.email-verification-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:#9a5f06; background:#ffe9bc; }
.email-verification-icon .ui-icon { width:21px; height:21px; }
.email-verification-banner strong { display:block; margin-bottom:4px; color:#674008; font-size:12px; }
.email-verification-banner p { margin:0; color:#8d6a31; font-size:9px; line-height:1.8; }
.email-verification-banner small { display:block; margin-top:5px; color:#9a5f06; font-size:9px; font-weight:750; }
.email-verification-banner button { min-height:39px; padding:0 15px; border:0; border-radius:11px; color:#fff; background:#c17b0e; font-family:inherit; font-size:9px; font-weight:850; white-space:nowrap; }
.email-verification-banner button:disabled { cursor:not-allowed; opacity:.55; }
.email-verification-label.verified { color:#087b62; }
.email-verification-label.unverified { color:#b36b00; }
html[data-theme='dark'] .captcha-field { border-color:#24384f; background:#0a1828; }
html[data-theme='dark'] .captcha-field small { color:#8799af; }
html[data-theme='dark'] .default-captcha-box img { border-color:#2a4159; background:#eaf0f7; }
html[data-theme='dark'] .default-captcha-refresh { color:#9eb2ca; border-color:#2a4159; background:#102136; }
html[data-theme='dark'] .download-categories button { color:#8799af; border-color:#29415a; background:#102136; }
html[data-theme='dark'] .download-categories button.active { color:#fff; border-color:#3b73e8; background:linear-gradient(120deg,#356fe8,#214fbd); }
html[data-theme='dark'] .download-card,html[data-theme='dark'] .downloads-grid>.empty-state { border-color:#1f3248; background:#0d1c2f; box-shadow:0 12px 30px rgba(0,0,0,.16); }
html[data-theme='dark'] .download-copy h3 { color:#eef4fb; }
html[data-theme='dark'] .download-copy p,html[data-theme='dark'] .download-count { color:#7f91a7; }
html[data-theme='dark'] .download-meta span { color:#9badc2; background:#172a40; }
html[data-theme='dark'] .download-button.locked,html[data-theme='dark'] .download-button:disabled { color:#71849a; border-color:#294057; background:#14253a; }
html[data-theme='dark'] .email-verification-banner { color:#f0cf8e; border-color:#61451a; background:linear-gradient(120deg,#2b2112,#261c0d); box-shadow:none; }
html[data-theme='dark'] .email-verification-icon { color:#f3c46d; background:#4c3615; }
html[data-theme='dark'] .email-verification-banner strong { color:#ffe0a7; }
html[data-theme='dark'] .email-verification-banner p { color:#c5a775; }
html[data-theme='dark'] .email-verification-banner small { color:#f0be64; }
html[data-theme='dark'] .email-verification-banner button { background:#a9690b; }
html[data-theme='dark'] .email-verification-label.verified { color:#79dbc0; }
html[data-theme='dark'] .email-verification-label.unverified { color:#f2c06b; }
@media (max-width:1100px) { .downloads-grid{grid-template-columns:1fr} }
@media (max-width:480px) {
  .captcha-field { justify-items:start; padding:10px; }
  #captcha-widget { transform:scale(.88); transform-origin:right top; margin-bottom:-9px; }
  .default-captcha-box { grid-template-columns:1fr auto; width:112%; }
  .default-captcha-box img { grid-column:1/3; max-width:none; }
  .download-card { grid-template-columns:48px minmax(0,1fr); padding:16px; }
  .download-file-icon { width:48px; height:48px; border-radius:14px; }
  .download-count { grid-column:2; }
  .download-button { grid-column:1/3; }
  .email-verification-banner { grid-template-columns:auto minmax(0,1fr); padding:15px; }
  .email-verification-banner button { grid-column:1/3; width:100%; }
}
@media (max-width:620px) {
  .store-grid { grid-template-columns:1fr; }
  .store-product-card { min-height:360px; }
  .store-product-title p { min-height:auto; }
  .order-total { align-items:flex-start; flex-direction:column; gap:10px; }
  .order-success-actions { grid-template-columns:1fr; }
}

/* Live WHMCS tax quote */
.order-total.order-tax-quote { display:grid; align-items:stretch; gap:12px; }
.order-total-head { display:grid; gap:4px; }
.order-total-head small { color:#385784; font-size:9px; font-weight:800; }
.order-total-head span { color:#8091a8; font-size:7px; }
.order-tax-breakdown { overflow:hidden; border:1px solid #dbe5f2; border-radius:12px; background:rgba(255,255,255,.74); }
.order-tax-breakdown>div { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:39px; padding:8px 12px; border-top:1px solid #e8eef6; }
.order-tax-breakdown>div:first-child { border-top:0; }
.order-tax-breakdown span { color:#6f8097; font-size:8px; }
.order-tax-breakdown strong { color:#294363; font-size:10px; direction:ltr; unicode-bidi:plaintext; }
.order-tax-breakdown .grand-total { min-height:47px; background:#edf4ff; }
.order-tax-breakdown .grand-total span { color:#234f93; font-size:9px; font-weight:850; }
.order-tax-breakdown .grand-total strong { color:#1d4ed8; font-size:15px; font-weight:900; }
.order-tax-status { margin:0; color:#71849c; font-size:7px; line-height:1.8; }
.order-tax-status.error { color:#b42335; }
.order-tax-quote.loading .order-tax-breakdown { opacity:.72; }
html[data-theme='dark'] .order-tax-breakdown { border-color:#29415a; background:rgba(7,20,35,.52); }
html[data-theme='dark'] .order-tax-breakdown>div { border-color:#263b52; }
html[data-theme='dark'] .order-tax-breakdown span { color:#8fa0b5; }
html[data-theme='dark'] .order-tax-breakdown strong { color:#c5d3e4; }
html[data-theme='dark'] .order-tax-breakdown .grand-total { background:#132e50; }
html[data-theme='dark'] .order-tax-breakdown .grand-total span,html[data-theme='dark'] .order-tax-breakdown .grand-total strong { color:#a7c3ff; }
html[data-theme='dark'] .order-tax-status { color:#8295ac; }
html[data-theme='dark'] .order-tax-status.error { color:#ff9da6; }

/* cPanel API workspace */
.service-control-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px; border:1px solid #cfe0fb; border-radius:15px; background:linear-gradient(125deg,#f7faff,#edf4ff); }
.service-control-panel strong { color:#183a70; font-size:12px; }
.service-control-panel p { margin:5px 0 0; color:#71849f; font-size:8px; line-height:1.8; }
.service-control-panel button { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.service-control-panel .ui-icon { width:16px; height:16px; }
.cpanel-shell { display:grid; gap:17px; }
.cpanel-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; border-radius:18px; color:#fff; background:linear-gradient(125deg,#122d58,#174687 60%,#176cb3); box-shadow:0 14px 35px rgba(15,56,112,.2); }
.cpanel-hero::after { content:''; position:absolute; width:180px; height:180px; left:-70px; bottom:-110px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.cpanel-hero>div { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.cpanel-hero>div>span { display:grid; place-items:center; width:49px; height:49px; border:1px solid rgba(255,255,255,.17); border-radius:15px; background:rgba(255,255,255,.11); }
.cpanel-hero>div>span .ui-icon { width:24px; height:24px; }
.cpanel-hero small { color:#b9cdeb; font-size:8px; }
.cpanel-hero h3 { margin:3px 0; color:#fff; font-size:17px; }
.cpanel-hero p { margin:0; color:#c0d1e8; font-size:8px; direction:ltr; text-align:right; }
.cpanel-sso-button { position:relative; z-index:1; display:flex; align-items:center; gap:7px; min-height:42px; padding:0 14px; border:1px solid rgba(255,255,255,.18); border-radius:11px; color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(5px); font-size:9px; font-weight:800; }
.cpanel-sso-button:hover { background:rgba(255,255,255,.2); }
.cpanel-sso-button .ui-icon { width:15px; height:15px; }
.cpanel-success { padding:11px 14px; border:1px solid #bfe9dc; border-radius:11px; color:#07785c; background:#eafaf5; font-size:9px; }
.cpanel-gauges { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cpanel-gauge { display:flex; align-items:center; gap:15px; padding:16px; border:1px solid #dfe7f1; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(32,52,80,.055); }
.cpanel-gauge-ring { --usage:0deg; display:grid; place-items:center; flex:0 0 auto; width:76px; height:76px; border-radius:50%; background:conic-gradient(#2d6cf0 var(--usage),#e9eef6 0); }
.cpanel-gauge.violet .cpanel-gauge-ring { background:conic-gradient(#7458e8 var(--usage),#eceaf7 0); }
.cpanel-gauge-ring::before { content:''; grid-area:1/1; width:58px; height:58px; border-radius:50%; background:#fff; }
.cpanel-gauge-ring strong { z-index:1; grid-area:1/1; color:#263b59; font-size:12px; }
.cpanel-gauge>div:last-child { display:grid; gap:3px; min-width:0; }
.cpanel-gauge>div:last-child>span { color:#718197; font-size:8px; }
.cpanel-gauge>div:last-child>strong { overflow:hidden; color:#1c2e47; font-size:13px; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.cpanel-gauge>div:last-child>small { color:#93a0b1; font-size:7px; }
.cpanel-block { padding:17px; border:1px solid #e1e8f1; border-radius:17px; background:#fff; }
.cpanel-block>header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }
.cpanel-block>header h3 { margin:3px 0 0; color:#22334a; font-size:13px; }
.cpanel-block>header small { color:#8594a8; font-size:8px; }
.primary-inline-button.compact { display:flex; align-items:center; gap:6px; min-height:36px; padding-inline:12px; font-size:8px; }
.primary-inline-button.compact .ui-icon { width:14px; height:14px; }
.cpanel-quota-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.cpanel-quota-grid>.empty-state { grid-column:1/-1; min-height:120px; }
.cpanel-quota-card { display:grid; gap:11px; min-width:0; padding:12px; border:1px solid #e7edf4; border-radius:12px; background:#f9fbfd; }
.cpanel-quota-card>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cpanel-quota-card>div:first-child { justify-content:flex-start; }
.cpanel-quota-card>div:first-child>span { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#3269d3; background:#eaf2ff; }
.cpanel-quota-card .ui-icon { width:14px; height:14px; }
.cpanel-quota-card small,.cpanel-quota-card span { color:#7e8da1; font-size:7px; }
.cpanel-quota-card strong { overflow:hidden; color:#273950; font-size:10px; text-overflow:ellipsis; white-space:nowrap; direction:ltr; }
.cpanel-quota-card>i { position:relative; display:block; overflow:hidden; height:4px; border-radius:9px; background:#e6ebf2; }
.cpanel-quota-card>i::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--usage,0%); border-radius:inherit; background:linear-gradient(90deg,#2f73f3,#2a58ca); }
.cpanel-email-grid { display:grid; gap:8px; }
.cpanel-email-grid>.empty-state { min-height:130px; }
.cpanel-email-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border:1px solid #e6ecf3; border-radius:12px; background:#fbfcfe; }
.cpanel-email-card>div:first-child { display:flex; align-items:center; gap:10px; min-width:0; }
.cpanel-email-icon { display:grid; place-items:center; flex:0 0 auto; width:37px; height:37px; border-radius:11px; color:#2864ef; background:#eaf2ff; }
.cpanel-email-icon .ui-icon { width:17px; height:17px; }
.cpanel-email-card strong { display:block; overflow:hidden; color:#283a52; font-size:9px; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.cpanel-email-card small { color:#8796aa; font-size:7px; }
.cpanel-email-actions { display:flex; gap:5px; }
.cpanel-email-actions button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #dce5ef; border-radius:9px; color:#54719c; background:#fff; }
.cpanel-email-actions button.danger { color:#c43c4d; }
.cpanel-email-actions .ui-icon { width:14px; height:14px; }
.cpanel-connection { margin-top:12px; padding:0 13px; border:1px solid #e4eaf2; border-radius:12px; background:#f9fbfd; }
.cpanel-connection summary { padding:12px 0; color:#426083; cursor:pointer; font-size:8px; font-weight:800; }
.cpanel-connection .detail-grid { padding-bottom:13px; }
.cpanel-tools { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.cpanel-tool-card { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:13px; border:1px solid #dfe7f1; border-radius:14px; color:#24364d; background:#fff; text-align:right; box-shadow:0 8px 23px rgba(31,50,77,.045); }
.cpanel-tool-card:not(.static):hover { transform:translateY(-2px); border-color:#b9ceef; }
.cpanel-tool-card>span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#2864ec; background:#eaf2ff; }
.cpanel-tool-card>span .ui-icon { width:19px; height:19px; }
.cpanel-tool-card strong { display:block; font-size:10px; }
.cpanel-tool-card small { color:#8493a6; font-size:7px; }
.cpanel-tool-card>.ui-icon { width:15px; height:15px; color:#8ea0b7; }
.cpanel-tool-card b { overflow:hidden; color:#55708f; font-size:8px; text-overflow:ellipsis; }
.email-domain-box { display:grid; align-content:center; gap:8px; padding:10px 13px; border:1px solid #dfe6ef; border-radius:12px; background:#f8fafc; }
.email-domain-box span { color:#526075; font-size:10px; font-weight:700; }
.email-domain-box strong { color:#34527b; font-size:10px; direction:ltr; text-align:right; }
.cpanel-files { display:grid; gap:14px; }
.cpanel-path { display:flex; align-items:center; gap:8px; padding:11px 13px; border:1px solid #dce6f2; border-radius:11px; color:#3d5f8c; background:#f6f9fd; direction:ltr; }
.cpanel-path .ui-icon { width:16px; height:16px; }
.cpanel-path code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpanel-file-list { overflow:hidden; border:1px solid #e1e8f1; border-radius:14px; }
.cpanel-file-row { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:51px; padding:8px 12px; border:0; border-top:1px solid #edf1f6; color:#34465e; background:#fff; text-align:right; }
.cpanel-file-row:first-child { border-top:0; }
.cpanel-file-row.directory:hover { background:#f6f9fe; }
.cpanel-file-row>div { display:grid; grid-template-columns:25px minmax(0,1fr); align-items:center; gap:1px 7px; min-width:0; }
.cpanel-file-row>div>.ui-icon { grid-row:1/3; width:18px; height:18px; color:#4d7cca; }
.cpanel-file-row strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.cpanel-file-row small { color:#8b99aa; font-size:7px; }
.cpanel-file-row>.ui-icon { width:14px; height:14px; color:#9aabba; }

/* Customer-friendly invoice workspace */
.invoice-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:15px; }
.invoice-overview article { display:flex; align-items:center; gap:11px; padding:15px; border:1px solid var(--panel-border); border-radius:15px; background:var(--panel-card); box-shadow:var(--panel-shadow); }
.invoice-overview article>span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#2864ef; background:#eaf2ff; }
.invoice-overview article.warning>span { color:#b97508; background:#fff3d9; }
.invoice-overview article.balance>span { color:#087a5e; background:#e5f8f2; }
.invoice-overview .ui-icon { width:19px; height:19px; }
.invoice-overview small { display:block; color:#8594a8; font-size:7px; }
.invoice-overview strong { color:#24364d; font-size:14px; direction:ltr; unicode-bidi:plaintext; }
.invoice-mobile-list { display:none; gap:9px; }
.invoice-mobile-card { display:grid; gap:12px; width:100%; padding:15px; border:1px solid var(--panel-border); border-radius:15px; background:var(--panel-card); text-align:right; box-shadow:var(--panel-shadow); }
.invoice-mobile-card>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.invoice-mobile-card small { display:block; color:#8795a8; font-size:7px; }
.invoice-mobile-card strong { color:#26384f; font-size:11px; }
.invoice-mobile-card>div:nth-child(2) { color:#7a899d; font-size:8px; }
.invoice-mobile-total { padding-top:10px; border-top:1px solid #edf1f6; }
.invoice-mobile-total .ui-icon { width:15px; height:15px; color:#7890b1; }
.invoice-document { overflow:hidden; border:1px solid #dfe7f0; border-radius:17px; color:#33455d; background:#fff; }
.invoice-document-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px; color:#fff; background:linear-gradient(125deg,#102746,#173c71); }
.invoice-brand { display:flex; align-items:center; gap:10px; }
.invoice-brand>span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#2f6dea; font-size:18px; font-weight:900; }
.invoice-brand strong { display:block; color:#fff; font-size:12px; }
.invoice-brand small { color:#aebfd7; font-size:7px; }
.invoice-identity { text-align:left; }
.invoice-identity .status-pill { margin-bottom:6px; }
.invoice-identity h3 { margin:0; color:#fff; font-size:15px; }
.invoice-identity small { color:#9fb3ce; font-size:7px; }
.invoice-customer { display:flex; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid #e9eef4; background:#f8fafc; }
.invoice-customer>div { display:grid; gap:4px; }
.invoice-customer small,.invoice-customer span { color:#8795a7; font-size:8px; }
.invoice-customer strong { color:#26384f; font-size:11px; }
.invoice-customer p { margin:0; color:#617086; font-size:8px; }
.invoice-line-items { padding:18px 20px; }
.invoice-line-head,.invoice-line-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 130px; gap:12px; align-items:center; min-height:42px; padding:8px 10px; }
.invoice-line-head { color:#7f8ea2; border-radius:9px; background:#f2f5f9; font-size:7px; font-weight:800; }
.invoice-line-row { border-bottom:1px solid #edf1f5; color:#4d5f76; font-size:8px; line-height:1.8; }
.invoice-line-row strong { color:#25374e; text-align:left; direction:ltr; }
.invoice-totals { display:grid; grid-template-columns:1fr minmax(240px,42%); gap:18px; padding:18px 20px; border-top:1px solid #e8edf3; background:#fbfcfe; }
.invoice-note strong { color:#3b4d65; font-size:9px; }
.invoice-note p { margin:6px 0 0; color:#8795a7; font-size:8px; line-height:1.9; }
.invoice-totals>div:last-child { display:grid; gap:5px; }
.invoice-totals p { display:flex; justify-content:space-between; gap:15px; margin:0; padding:6px 8px; color:#6d7d91; font-size:8px; }
.invoice-totals p strong { color:#35475e; direction:ltr; }
.invoice-totals p.grand { margin-top:4px; border-top:1px dashed #ccd6e3; padding-top:12px; color:#264670; font-weight:850; }
.invoice-totals p.grand strong { color:#1e55ca; font-size:12px; }
.invoice-totals p.balance { border-radius:9px; color:#fff; background:#225fd7; }
.invoice-totals p.balance strong { color:#fff; }
.invoice-transactions { padding:18px 20px; border-top:1px solid #e8edf3; }
.invoice-transactions h4 { margin:0 0 10px; color:#304259; font-size:10px; }
.invoice-transactions>div { display:grid; grid-template-columns:1fr 1fr 1.4fr 1fr; gap:10px; padding:9px; border-top:1px solid #edf1f5; color:#7a899c; font-size:7px; }
.invoice-transactions code { overflow:hidden; text-overflow:ellipsis; direction:ltr; }
.invoice-transactions strong { color:#30435b; direction:ltr; }
.invoice-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.invoice-actions button { display:flex; align-items:center; gap:7px; }
.invoice-actions .ui-icon { width:15px; height:15px; }
.invoice-actions p { margin:0; color:#8a651d; font-size:8px; }

html[data-theme='dark'] .service-control-panel,html[data-theme='dark'] .cpanel-gauge,html[data-theme='dark'] .cpanel-block,html[data-theme='dark'] .cpanel-tool-card,html[data-theme='dark'] .cpanel-file-row,html[data-theme='dark'] .invoice-document { border-color:#294159; background:#0d1c2f; }
html[data-theme='dark'] .service-control-panel { background:linear-gradient(125deg,#10243c,#122d4c); }
html[data-theme='dark'] .service-control-panel strong,html[data-theme='dark'] .cpanel-block>header h3,html[data-theme='dark'] .cpanel-gauge>div:last-child>strong,html[data-theme='dark'] .cpanel-email-card strong,html[data-theme='dark'] .cpanel-tool-card,html[data-theme='dark'] .invoice-overview strong { color:#e1ebf6; }
html[data-theme='dark'] .cpanel-gauge-ring { background:conic-gradient(#4f86f4 var(--usage),#20344a 0); }
html[data-theme='dark'] .cpanel-gauge.violet .cpanel-gauge-ring { background:conic-gradient(#8a73ee var(--usage),#25334a 0); }
html[data-theme='dark'] .cpanel-gauge-ring::before { background:#0d1c2f; }
html[data-theme='dark'] .cpanel-gauge-ring strong { color:#e4edf8; }
html[data-theme='dark'] .cpanel-quota-card,html[data-theme='dark'] .cpanel-email-card,html[data-theme='dark'] .cpanel-connection,html[data-theme='dark'] .email-domain-box,html[data-theme='dark'] .cpanel-path { border-color:#263c54; background:#102136; }
html[data-theme='dark'] .cpanel-quota-card strong,html[data-theme='dark'] .email-domain-box strong { color:#dce7f4; }
html[data-theme='dark'] .cpanel-email-actions button { border-color:#2c435b; color:#a8bdd8; background:#14263b; }
html[data-theme='dark'] .cpanel-file-row { color:#cbd9e9; border-color:#21364c; }
html[data-theme='dark'] .cpanel-file-row.directory:hover { background:#12263d; }
html[data-theme='dark'] .invoice-overview article,html[data-theme='dark'] .invoice-mobile-card { border-color:#263b52; background:#0d1c2f; }
html[data-theme='dark'] .invoice-customer,html[data-theme='dark'] .invoice-totals { border-color:#263b52; background:#0a192b; }
html[data-theme='dark'] .invoice-line-head { color:#92a3b8; background:#12253b; }
html[data-theme='dark'] .invoice-line-row,html[data-theme='dark'] .invoice-transactions,html[data-theme='dark'] .invoice-transactions>div { border-color:#23384e; color:#aebed0; }
html[data-theme='dark'] .invoice-line-row strong,html[data-theme='dark'] .invoice-customer strong,html[data-theme='dark'] .invoice-note strong,html[data-theme='dark'] .invoice-transactions h4,html[data-theme='dark'] .invoice-transactions strong { color:#e0eaf5; }

@media (max-width:720px) {
  .service-control-panel,.cpanel-hero { align-items:flex-start; flex-direction:column; }
  .cpanel-gauges,.cpanel-tools { grid-template-columns:1fr; }
  .cpanel-quota-grid { grid-template-columns:1fr 1fr; }
  .invoice-overview { grid-template-columns:1fr; }
  [data-dashboard-section='invoices'] .data-card { display:none; }
  .invoice-mobile-list { display:grid; }
  .invoice-customer,.invoice-totals { grid-template-columns:1fr; }
  .invoice-line-head,.invoice-line-row { grid-template-columns:minmax(0,1fr) 65px 90px; padding-inline:5px; }
  .invoice-transactions>div { grid-template-columns:1fr 1fr; }
  .invoice-actions { align-items:stretch; flex-direction:column; }
}
@media (max-width:460px) {
  .cpanel-quota-grid { grid-template-columns:1fr; }
  .cpanel-email-card { align-items:flex-start; }
  .cpanel-email-card>div:first-child { max-width:calc(100% - 74px); }
  .cpanel-gauge-ring { width:65px; height:65px; }
  .cpanel-gauge-ring::before { width:49px; height:49px; }
  .invoice-document-head,.invoice-customer { align-items:flex-start; flex-direction:column; }
  .invoice-identity { text-align:right; }
  .invoice-line-head>span:nth-child(2),.invoice-line-row>span:nth-child(2) { display:none; }
  .invoice-line-head,.invoice-line-row { grid-template-columns:minmax(0,1fr) 90px; }
}

@media print {
  body * { visibility:hidden!important; }
  .modal-backdrop,.modal-card,.modal-body,.invoice-modal-shell,.invoice-document,.invoice-document * { visibility:visible!important; }
  .modal-backdrop { position:absolute; inset:0; display:block; padding:0; background:#fff; }
  .modal-card { width:100%; max-height:none; border:0; border-radius:0; box-shadow:none; }
  .modal-header,.modal-notice,.invoice-actions { display:none!important; }
  .modal-body { overflow:visible; padding:0; }
  .invoice-document { border:0; border-radius:0; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}