@font-face {
  font-family: Vazir;
  src: url("fonts/Vazir-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url("fonts/Vazir-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-950: #070b1b;
  --navy-900: #0b1126;
  --navy-800: #121b38;
  --blue: #9385ff;
  --blue-deep: #7567ff;
  --cyan: #00ed82;
  --ink: #eef4ff;
  --muted: #92a2c8;
  --border: #26365d;
  --surface: #101936;
  --page: #070b1b;
  --green: #00ea36;
  --orange: #ffd166;
  --danger: #f78b20;
  --shadow: 0 20px 60px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body { margin: 0; color: var(--ink); background: var(--page); font-family: Vazir, Tahoma, Arial, sans-serif; font-size: 14px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(124,138,232,.22), transparent 34%), linear-gradient(145deg, #edf0fb, #e1f3f0 54%, #f6e9ee); }
.login-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.login-glow-one { width: 390px; height: 390px; left: -150px; bottom: -110px; background: rgba(0,237,130,.2); }
.login-glow-two { width: 520px; height: 520px; right: -230px; top: -180px; border: 1px solid rgba(124,138,232,.18); }
.login-card { width: min(100%, 455px); position: relative; padding: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: rgba(255,255,255,.97); box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; font-size: 25px; font-weight: 800; border-radius: 15px; background: linear-gradient(145deg, var(--blue), var(--cyan)); box-shadow: 0 10px 24px rgba(85,112,245,.35); }
.brand-mark-small { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; box-shadow: none; }
.eyebrow { margin-top: 22px; color: var(--blue); font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.login-card h1 { margin: 10px 0 8px; font-size: clamp(24px, 4vw, 31px); letter-spacing: -.03em; }
.login-lead { margin: 0 0 30px; color: var(--muted); line-height: 1.9; }
.form-stack { display: grid; gap: 10px; }
.form-stack label { margin-top: 7px; color: #52627e; font-size: 12px; font-weight: 700; }
.form-stack input, .settings-form input { width: 100%; padding: 13px 15px; color: var(--ink); border: 1px solid var(--border); border-radius: 12px; outline: none; background: #fbfcff; transition: border-color .2s, box-shadow .2s; }
.form-stack input:focus, .settings-form input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(85,112,245,.12); }
.primary-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(110deg, var(--blue), #697cf8); font-weight: 700; box-shadow: 0 12px 22px rgba(85,112,245,.24); transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 16px 27px rgba(85,112,245,.3); }
.primary-button svg { width: 18px; height: 18px; transform: rotate(180deg); }
.wide-button { width: 100%; margin-top: 17px; }
.login-note { margin: 25px 0 0; text-align: center; color: #9aa6bb; font-size: 11px; }
.form-error { margin: 4px 0 0; color: var(--danger); font-size: 12px; line-height: 1.7; }

.topbar { color: var(--ink); background: linear-gradient(115deg, var(--navy-950), var(--navy-900)); box-shadow: 0 8px 28px rgba(71,87,126,.12); }
.topbar-inner, .nav-inner, .portal-main, .portal-footer { width: min(100% - 44px, 1440px); margin: 0 auto; }
.topbar-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 3px; color: #8795b0; font-size: 9px; letter-spacing: .14em; }
.topbar-meta { display: flex; align-items: center; gap: 24px; }
.connection-badge { display: inline-flex; align-items: center; gap: 7px; color: #617394; font-size: 11px; }
.connection-badge i { width: 7px; height: 7px; border-radius: 50%; background: #00ea36; box-shadow: 0 0 0 5px rgba(0,234,54,.12); }
.connection-badge.is-unavailable { color: var(--danger); }
.connection-badge.is-unavailable i { background: var(--danger); box-shadow: 0 0 0 5px rgba(215,125,139,.12); }
.logout-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 700; }
.logout-button { padding: 10px 14px; color: var(--ink); border-color: rgba(115,132,177,.22); background: rgba(255,255,255,.52); }
.logout-button svg { width: 17px; height: 17px; }
.portal-nav { border-top: 1px solid rgba(115,132,177,.14); }
.nav-inner { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.nav-item { min-height: 56px; display: inline-flex; align-items: center; gap: 9px; position: relative; padding: 0 20px; color: #7282a2; border: 0; background: transparent; white-space: nowrap; font-size: 12px; font-weight: 700; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover, .nav-item.is-active { color: var(--ink); }
.nav-item.is-active::after { content: ''; position: absolute; right: 14px; left: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cyan); }
.nav-item b { min-width: 19px; padding: 1px 5px; color: #fff; border-radius: 9px; background: var(--danger); font-size: 10px; }

.portal-main { padding: 43px 0 54px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.page-heading .eyebrow { margin-top: 0; color: var(--blue); }
.page-heading h1 { margin: 9px 0 4px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.icon-button { padding: 11px 15px; color: var(--ink); }
.icon-button svg { width: 17px; height: 17px; color: var(--blue); }
.icon-button:hover { border-color: #cbd5e8; background: #fbfcff; }
.global-alert { margin: 0 0 22px; padding: 13px 16px; color: #7f3540; border: 1px solid #f1c5ca; border-radius: 12px; background: #fff4f5; line-height: 1.8; }
.global-alert.is-success { color: #147151; border-color: #bde8d6; background: #f0fcf7; }
.portal-content { min-height: 320px; }
.loading-card { min-height: 280px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.spinner { width: 22px; height: 22px; display: inline-block; border: 3px solid #dce3f4; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card, .panel-card { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.metric-card { min-height: 142px; padding: 21px; position: relative; overflow: hidden; }
.metric-card::after { content: ''; position: absolute; width: 100px; height: 100px; left: -35px; bottom: -50px; border-radius: 50%; background: rgba(85,112,245,.06); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.metric-icon { width: 37px; height: 37px; display: grid; place-items: center; color: var(--blue); border-radius: 11px; background: #eef1ff; }
.metric-icon svg { width: 19px; height: 19px; }
.metric-value { margin-top: 17px; color: var(--ink); font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.metric-value.is-online { color: var(--green); }
.metric-value.is-offline { color: var(--muted); }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; margin-top: 16px; }
.panel-card { padding: 25px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.panel-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.panel-link { color: var(--blue); border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.profile-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: 11px; background: #f7f9fc; }
.profile-row span { color: var(--muted); font-size: 12px; }
.profile-row strong { max-width: 60%; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.service-visual { padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #e0e8f8, #d9f0ee); }
.service-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.service-visual-top strong { font-size: 15px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #378866; border-radius: 8px; background: rgba(88,181,140,.16); font-size: 10px; font-weight: 700; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.service-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.service-detail span { display: block; color: #7585a3; font-size: 10px; }
.service-detail strong { display: block; margin-top: 5px; color: var(--ink); font-size: 13px; }
.progress-track { height: 8px; margin-top: 21px; overflow: hidden; border-radius: 10px; background: rgba(117,133,163,.18); }
.progress-track span { display: block; height: 100%; min-width: 3%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #6683ff); }
.empty-state { padding: 34px 20px; text-align: center; color: var(--muted); border: 1px dashed #d6deed; border-radius: 14px; background: #fbfcff; }
.empty-state svg { width: 28px; height: 28px; margin-bottom: 7px; color: #a8b4c9; }
.empty-state p { margin: 0; line-height: 1.8; }

.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.section-grid .wide { grid-column: 1 / -1; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 14px 15px; text-align: right; border-bottom: 1px solid #edf0f6; font-size: 12px; white-space: nowrap; }
th { color: var(--muted); background: #fafbfe; font-size: 11px; font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }
.positive { color: var(--green); font-weight: 800; }
.negative { color: var(--danger); font-weight: 800; }
.message-list { display: grid; gap: 10px; }
.message-item { padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: #fbfcff; }
.message-item.is-unread { border-color: #cbd4ff; background: #f4f6ff; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.message-meta strong { color: var(--blue); }
.message-item p { margin: 0; color: #394967; line-height: 1.9; white-space: pre-wrap; }
.compose-form { display: grid; gap: 12px; }
textarea { width: 100%; min-height: 125px; resize: vertical; padding: 14px; color: var(--ink); border: 1px solid var(--border); border-radius: 12px; outline: none; background: #fbfcff; }
.form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.settings-form { max-width: 550px; display: grid; gap: 12px; }
.settings-form label { color: #52627e; font-size: 12px; font-weight: 700; }
.settings-form .primary-button { margin-top: 7px; width: fit-content; }
.notice { display: flex; gap: 10px; padding: 14px 16px; margin-bottom: 20px; color: #596b8b; border-radius: 12px; background: #f0f2fa; font-size: 12px; line-height: 1.8; }
.notice svg { flex: 0 0 auto; color: var(--blue); }

.portal-footer { padding: 0 0 30px; color: #94a0b5; font-size: 11px; }
.portal-footer span { padding: 0 7px; color: #c4cada; }

@media (max-width: 1020px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .topbar-inner, .nav-inner, .portal-main, .portal-footer { width: min(100% - 28px, 1440px); }
  .topbar-inner { min-height: 72px; }
  .topbar-meta { gap: 10px; }
  .connection-badge { display: none; }
  .nav-item { min-height: 51px; padding: 0 13px; }
  .nav-item span { font-size: 11px; }
  .portal-main { padding-top: 28px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .dashboard-grid, .section-grid, .profile-list { grid-template-columns: 1fr; }
  .section-grid .wide { grid-column: auto; }
  .panel-card { padding: 18px; }
  .login-card { padding: 30px 23px; border-radius: 22px; }
  .service-details { grid-template-columns: 1fr; gap: 14px; }
  .logout-button { padding: 9px 11px; }
}

/* Dark neon skin: the portal stays restrained as a dark control panel while
   cyan, violet and green are reserved for actions and live state. */
body { background: radial-gradient(circle at 82% -10%, rgba(117,103,255,.15), transparent 32%), var(--page); }
.login-view { background: radial-gradient(circle at 12% 12%, rgba(0,237,130,.15), transparent 30%), radial-gradient(circle at 90% 90%, rgba(147,133,255,.18), transparent 36%), var(--page); }
.login-card { border-color: #2d3d69; background: rgba(15,24,52,.96); box-shadow: 0 28px 90px rgba(0,0,0,.52), 0 0 55px rgba(0,237,130,.06); }
.login-card h1, .page-heading h1 { color: var(--ink); }
.form-stack label, .settings-form label { color: #a8b7d9; }
.form-stack input, .settings-form input, textarea { color: var(--ink); border-color: #304269; background: #0a1229; }
.form-stack input::placeholder, textarea::placeholder { color: #61739d; }
.form-stack input:focus, .settings-form input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,237,130,.12), 0 0 18px rgba(0,237,130,.11); }
.primary-button { color: #06121d; background: linear-gradient(110deg, var(--cyan), #00ea36); box-shadow: 0 10px 25px rgba(0,237,130,.22); }
.primary-button:hover { box-shadow: 0 14px 32px rgba(0,237,130,.32); }
.topbar { color: var(--ink); background: linear-gradient(115deg, #080d20, #111b3d 62%, #0c1730); border-bottom: 1px solid #23345a; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.brand strong { color: var(--ink); }
.brand small { color: #8090b7; }
.connection-badge { color: #b1c0e2; }
.logout-button, .icon-button { color: var(--ink); border-color: #304269; background: #101a38; }
.logout-button:hover, .icon-button:hover { border-color: var(--cyan); background: #142447; }
.portal-nav { border-top-color: #1e2e52; }
.nav-item { color: #94a5ca; }
.nav-item:hover, .nav-item.is-active { color: var(--cyan); text-shadow: 0 0 14px rgba(0,237,130,.3); }
.nav-item.is-active::after { background: var(--cyan); box-shadow: 0 0 13px rgba(0,237,130,.75); }
.nav-item b { color: #07121c; background: var(--orange); }
.page-heading .eyebrow, .eyebrow { color: var(--cyan); }
.page-heading p, .panel-head p { color: var(--muted); }
.global-alert { color: #ffb2c7; border-color: #69334e; background: #251326; }
.global-alert.is-success { color: #00ed82; border-color: #1d665c; background: #0d292a; }
.loading-card, .metric-card, .panel-card { border-color: #26375e; background: linear-gradient(145deg, #111b3a, #0d1530); box-shadow: var(--shadow); }
.spinner { border-color: #29395e; border-top-color: var(--cyan); }
.metric-card::after { background: rgba(147,133,255,.12); }
.metric-top { color: #9cadcf; }
.metric-icon { color: var(--cyan); background: rgba(0,237,130,.1); box-shadow: inset 0 0 0 1px rgba(0,237,130,.12), 0 0 19px rgba(0,237,130,.08); }
.metric-value { color: var(--ink); }
.metric-card.status-online { border-color: rgba(0,234,54,.62); box-shadow: 0 0 0 1px rgba(0,234,54,.14), 0 20px 60px rgba(0,0,0,.34), 0 0 28px rgba(0,234,54,.16); }
.metric-card.status-online .metric-value { color: var(--green); text-shadow: 0 0 16px rgba(0,234,54,.45); }
.metric-card.status-online .metric-icon { color: var(--green); background: rgba(0,234,54,.12); }
.metric-card.status-offline { border-color: rgba(247,139,32,.52); }
.metric-card.status-offline .metric-value { color: var(--danger); }
.profile-row { background: #0a132b; border: 1px solid #1b2b50; }
.profile-row span { color: #8fa1c8; }
.profile-row strong { color: var(--ink); }
.service-visual { background: linear-gradient(135deg, #172656, #103b45); border: 1px solid #2a5370; box-shadow: inset 0 0 30px rgba(0,237,130,.06); }
.service-visual.is-online { border-color: rgba(0,234,54,.62); box-shadow: inset 0 0 30px rgba(0,234,54,.08), 0 0 28px rgba(0,234,54,.12); }
.service-visual-top { color: var(--ink); }
.status-pill { color: var(--green); background: rgba(0,234,54,.12); box-shadow: 0 0 15px rgba(0,234,54,.15); }
.status-pill i { box-shadow: 0 0 0 4px rgba(0,234,54,.12), 0 0 12px var(--green); animation: neon-pulse 1.7s ease-in-out infinite; }
.service-visual.is-offline .status-pill { color: var(--danger); background: rgba(247,139,32,.12); }
.service-detail span { color: #91a4c9; }
.service-detail strong { color: var(--ink); }
.progress-track { background: #1a2a4e; }
.progress-track span { background: linear-gradient(90deg, #00ed82, #00ea36); box-shadow: 0 0 13px rgba(0,237,130,.75); }
.empty-state { color: #93a5ca; border-color: #304269; background: #0b142d; }
.empty-state svg { color: #6c80ad; }
.table-wrap { border-color: #26375e; }
th, td { border-bottom-color: #1e2d50; }
th { color: #91a3c9; background: #0b142d; }
td { color: #d8e2f7; }
.positive { color: var(--green); }
.negative { color: var(--danger); }
.message-item { border-color: #26375e; background: #0b142d; }
.message-item.is-unread { border-color: rgba(0,237,130,.6); background: #10243a; box-shadow: 0 0 18px rgba(0,237,130,.08); }
.message-meta { color: #8fa2c9; }
.message-meta strong { color: var(--cyan); }
.message-item p { color: #d5e0f5; }
.notice { color: #9eb0d3; background: #0b1832; border: 1px solid #26375e; }
.notice svg { color: var(--cyan); }
.portal-footer { color: #7183aa; }
.portal-footer span { color: #3d507d; }
.usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.usage-buckets { margin-top: 20px; padding-top: 18px; border-top: 1px solid #26375e; }
.usage-buckets h3 { margin: 0 0 12px; color: var(--ink); font-size: 14px; }
.bucket-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bucket-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; color: #9aaed4; border: 1px solid #1f3156; border-radius: 11px; background: #0a132b; font-size: 12px; }
.bucket-row strong { color: var(--cyan); }
@keyframes neon-pulse { 0%, 100% { opacity: .72; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.16); } }
@media (max-width: 680px) { .usage-summary, .bucket-list { grid-template-columns: 1fr; } }

/* Service status volume summary and customer-facing purchase guidance. */
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: #91a4c9; font-size: 11px; }
.progress-heading strong { color: var(--cyan); font-size: 12px; text-shadow: 0 0 12px rgba(0,237,130,.32); }
.service-volume-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 1.8; }
.service-volume-alert > span { flex: 0 0 auto; margin-top: 2px; }
.service-volume-alert > span svg { width: 17px; height: 17px; }
.service-volume-alert > div { min-width: 0; }
.service-volume-alert strong, .service-volume-alert > div > span { display: block; }
.service-volume-alert-low { color: #ffdbe8; border-color: rgba(247,139,32,.42); background: rgba(247,139,32,.11); box-shadow: 0 0 18px rgba(247,139,32,.08); }
.service-volume-alert-low > span { color: #f78b20; }
.service-volume-alert-time { color: #ffe7ae; border-color: rgba(255,196,90,.42); background: rgba(255,196,90,.1); box-shadow: 0 0 18px rgba(255,196,90,.07); }
.service-volume-alert-time > span { color: #ffc45a; }
.service-volume-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: 8px; padding: 0 12px; color: #06121d; border: 0; border-radius: 8px; background: linear-gradient(115deg, #00ed82, #00ea36); font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 16px rgba(0,237,130,.18); }
.service-volume-action:hover { transform: translateY(-1px); box-shadow: 0 10px 21px rgba(0,237,130,.28); }
.service-visual.service-status-card,
.service-visual.service-status-card.is-online,
.service-visual.service-status-card.is-offline { background: linear-gradient(145deg, #111a38, #0f1935); border-color: #315677; box-shadow: inset 0 0 30px rgba(0,237,130,.05), 0 16px 34px rgba(0,0,0,.18); }
.service-volume-card { margin-top: 14px; padding: 18px; border: 1px solid #315677; border-radius: 14px; background: linear-gradient(145deg, #111a38, #0d1732); box-shadow: inset 0 0 30px rgba(0,237,130,.05), 0 16px 34px rgba(0,0,0,.18); }
.service-volume-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.service-volume-card-head > div { display: grid; gap: 5px; }
.service-volume-card-head strong { color: var(--ink); font-size: 15px; }
.service-volume-card-head span { color: #91a4c9; font-size: 11px; }
.service-volume-status { flex: 0 0 auto; padding: 6px 10px; color: var(--cyan) !important; border: 1px solid rgba(0,237,130,.3); border-radius: 999px; background: rgba(0,237,130,.08); font-size: 10px !important; font-weight: 800; }
.service-volume-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.service-volume-details .service-detail { padding: 12px 13px; border: 1px solid #22365d; border-radius: 11px; background: #0a132b; }
.service-volume-card .package-policy { margin-top: 14px; }
.service-volume-card .progress-heading { margin-top: 18px; }
.service-state-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 1.7; }
.service-state-note svg { width: 16px; height: 16px; flex: 0 0 auto; }
.service-state-note.is-ok { color: #00ed82; border-color: rgba(0,234,54,.3); background: rgba(0,234,54,.08); }
.service-state-note.is-ok svg { color: var(--green); }
.service-state-note.is-warning { color: #ffe3b0; border-color: rgba(255,196,90,.36); background: rgba(255,196,90,.1); }
.service-state-note.is-warning svg { color: #ffc45a; }
.service-state-note.is-offline { color: #ffd3e2; border-color: rgba(247,139,32,.3); background: rgba(247,139,32,.09); }
.service-state-note.is-offline svg { color: var(--danger); }
.service-volume-breakdown { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: #91a4c9; font-size: 10px; }
.service-volume-breakdown strong { color: #c8d6f2; font-weight: 800; }
.progress-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; color: #7185ae; font-size: 10px; }
.progress-caption strong { color: #a9bdf0; }
.service-visual .progress-track span { min-width: 0; }
@media (max-width: 680px) {
  .service-volume-card-head { align-items: flex-start; flex-direction: column; }
  .service-volume-details { grid-template-columns: 1fr; }
  .service-volume-status { align-self: flex-start; }
}

/* Service page follows the dashboard's panel and ring language. */
.service-page-grid { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); gap: 16px; align-items: start; }
.service-status-panel, .service-volume-panel { min-width: 0; }
.service-status-panel .panel-head, .service-volume-panel .panel-head { margin-bottom: 20px; }
.service-status-pill { flex: 0 0 auto; }
.service-status-pill.is-online { color: var(--green); background: rgba(0,234,54,.12); box-shadow: 0 0 15px rgba(0,234,54,.15); }
.service-status-pill.is-offline { color: var(--danger); background: rgba(247,139,32,.12); box-shadow: 0 0 15px rgba(247,139,32,.12); }
.service-status-hero { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 14px; border: 1px solid #22365d; border-radius: 13px; background: #0a132b; }
.service-status-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: var(--cyan); border-radius: 13px; background: rgba(0,237,130,.1); box-shadow: inset 0 0 0 1px rgba(0,237,130,.14), 0 0 18px rgba(0,237,130,.08); }
.service-status-icon svg { width: 21px; height: 21px; }
.service-status-hero div { display: grid; gap: 4px; min-width: 0; }
.service-status-hero strong { color: var(--ink); font-size: 14px; }
.service-status-hero span { color: #91a4c9; font-size: 11px; line-height: 1.7; }
.service-status-panel .service-details { margin-top: 16px; }
.service-status-panel .service-detail { padding: 12px 13px; border: 1px solid #22365d; border-radius: 11px; background: #0a132b; }
.service-volume-panel { overflow: hidden; }
.service-volume-panel .panel-head p { max-width: 270px; }
.service-volume-overview { display: flex; align-items: center; gap: 22px; min-height: 150px; padding: 9px 0 16px; }
.service-volume-ring { width: 132px; height: 132px; flex-basis: 132px; padding: 9px; background: conic-gradient(from -90deg, #00ed82 0deg, #00ea36 var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 24px rgba(0,237,130,.2), 0 0 0 1px rgba(0,237,130,.2); }
.service-volume-panel.is-low .service-volume-ring { background: conic-gradient(from -90deg, #f78b20 0deg, #9385ff var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 24px rgba(247,139,32,.2), 0 0 0 1px rgba(247,139,32,.2); }
.service-volume-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; flex: 1; min-width: 0; }
.service-volume-quick > div { min-width: 0; padding: 12px 10px; border: 1px solid #22365d; border-radius: 11px; background: #0a132b; }
.service-volume-quick span { display: block; color: #91a4c9; font-size: 10px; }
.service-volume-quick strong { display: block; margin-top: 6px; color: var(--ink); font-size: 13px; }
.service-volume-panel .service-volume-breakdown { margin-top: 0; padding-top: 13px; border-top: 1px solid #26375e; }
.service-volume-panel .package-policy { margin-top: 14px; }
.service-volume-panel .progress-heading { margin-top: 18px; }
.service-volume-panel .progress-track { margin-top: 10px; height: 9px; }
.service-volume-panel .progress-track span { min-width: 0; }
@media (max-width: 840px) {
  .service-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .service-volume-overview { align-items: flex-start; flex-direction: column; }
  .service-volume-quick { width: 100%; }
}

/* User-requested service operations, credentials, reports and responsive table pass. */
.service-visual { background: linear-gradient(135deg, #111a38 0%, #172754 52%, #143b48 100%); border-color: #315677; box-shadow: inset 0 0 36px rgba(0,237,130,.07), 0 16px 34px rgba(0,0,0,.22); }
.service-visual.is-online { background: linear-gradient(135deg, #10233b 0%, #123b48 55%, #124a45 100%); border-color: rgba(0,234,54,.74); }
.service-visual.is-offline { background: linear-gradient(135deg, #171b3d 0%, #20264d 55%, #30213f 100%); border-color: rgba(247,139,32,.55); }
.service-visual.is-offline .progress-track span { background: linear-gradient(90deg, #f78b20, #9385ff); box-shadow: 0 0 13px rgba(247,139,32,.6); }
.package-policy { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 12px; color: #ffd5e2; border: 1px solid rgba(247,139,32,.34); border-radius: 10px; background: rgba(247,139,32,.09); font-size: 11px; line-height: 1.7; }
.package-policy svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--danger); }
.service-operations-card { grid-column: span 1; }
.service-operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.operation-button { min-height: 43px; padding: 0 12px; color: #06121d; border: 1px solid rgba(0,237,130,.5); border-radius: 11px; background: linear-gradient(115deg, #00ed82, #00ea36); font-weight: 800; box-shadow: 0 8px 20px rgba(0,237,130,.14); }
.operation-button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,237,130,.25); }
.operation-note, .catalog-note { margin: 14px 0 0; color: #8295bd; font-size: 11px; line-height: 1.8; }
.credentials-card { margin-top: 16px; }
.credential-badge { padding: 5px 9px; color: var(--cyan); border: 1px solid rgba(0,237,130,.28); border-radius: 999px; background: rgba(0,237,130,.08); font-size: 10px; font-weight: 800; }
.credential-list { display: grid; gap: 10px; }
.credential-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #22365d; border-radius: 12px; background: #0a132b; }
.credential-row > span { color: #92a5cd; font-size: 12px; }
.credential-value { display: flex; align-items: center; gap: 7px; min-width: 0; }
.credential-value code { max-width: min(430px, 55vw); overflow: hidden; color: var(--ink); font-family: Vazir, Tahoma, sans-serif; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.credential-value button { min-height: 30px; padding: 0 9px; color: var(--cyan); border: 1px solid #2b4a6b; border-radius: 8px; background: #111e3d; font-size: 10px; font-weight: 700; }
.credential-value button:hover { border-color: var(--cyan); box-shadow: 0 0 13px rgba(0,237,130,.14); }
.credential-value button:disabled { cursor: not-allowed; opacity: .45; }
.credential-note { display: block; margin-top: 12px; color: #7184ac; font-size: 10px; line-height: 1.8; }
.credentials-compact-card { min-height: 142px; padding: 16px; }
.credentials-compact-card .metric-top { align-items: center; }
.credentials-compact-card .credential-badge { padding: 4px 7px; font-size: 9px; }
.compact-credential-list { display: grid; gap: 8px; margin-top: 13px; }
.compact-credential-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.compact-credential-row > span { flex: 0 0 67px; color: #92a5cd; font-size: 10px; }
.compact-credential-value { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.compact-credential-value code { min-width: 0; overflow: hidden; color: var(--ink); font-family: Vazir, Tahoma, sans-serif; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.compact-credential-value button { min-height: 27px; padding: 0 7px; color: var(--cyan); border: 1px solid #2b4a6b; border-radius: 7px; background: #111e3d; font-size: 9px; font-weight: 700; }
.compact-credential-value button:hover { border-color: var(--cyan); box-shadow: 0 0 13px rgba(0,237,130,.14); }
.compact-credential-value button:disabled { cursor: not-allowed; opacity: .45; }
.connection-report { min-width: 0; }
.connection-table { min-width: 760px; }
.connection-table th, .connection-table td { vertical-align: middle; }
.result-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; padding: 6px 9px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; }
.result-pill.is-success { color: var(--green); border-color: rgba(0,234,54,.58); background: rgba(0,234,54,.1); }
.result-pill.is-failure { color: var(--danger); border-color: rgba(247,139,32,.58); background: rgba(247,139,32,.1); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; color: #8fa3cb; font-size: 11px; }
.pagination > div { display: flex; flex-wrap: wrap; gap: 6px; }
.page-button { min-width: 31px; min-height: 30px; padding: 0 8px; color: #a8b9dc; border: 1px solid #2a4168; border-radius: 8px; background: #0b1732; font-size: 11px; }
.page-button:hover, .page-button.is-active { color: #06121d; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 14px rgba(0,237,130,.22); }
.page-button:disabled { cursor: not-allowed; opacity: .4; }
.report-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.report-total-card { padding: 15px; border: 1px solid #284268; border-radius: 14px; background: linear-gradient(145deg, #101e3d, #0b1630); }
.report-total-card h3 { margin: 0 0 11px; color: var(--cyan); font-size: 13px; }
.report-total-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.report-total-grid .profile-row { padding: 10px; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-volume-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; align-items: start; }
.catalog-card { padding: 17px; border: 1px solid #2a4168; border-radius: 15px; background: linear-gradient(145deg, #101e3d, #0b1530); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.catalog-card.is-vip { border-color: #8d5cff; background: linear-gradient(145deg, #17133d, #0b1530); box-shadow: 0 12px 30px rgba(111,76,255,.2), 0 0 0 1px rgba(141,92,255,.18); }
.catalog-vip-badge { display: inline-flex; align-items: center; padding: 5px 9px; color: #fff; border-radius: 999px; background: linear-gradient(135deg,#8f52ff,#b56cff); box-shadow: 0 5px 14px rgba(143,82,255,.3); font-size: 10px; font-weight: 800; white-space: nowrap; }
.catalog-card.is-vip .catalog-icon { color: #cfb8ff; background: rgba(143,82,255,.16); }
.catalog-card.is-cip { border-color: #ff9a3d; background: linear-gradient(145deg, #3a2417, #0b1530); box-shadow: 0 12px 30px rgba(255,139,43,.2), 0 0 0 1px rgba(255,154,61,.18); }
.catalog-cip-badge { display: inline-flex; align-items: center; padding: 5px 9px; color: #251100; border-radius: 999px; background: linear-gradient(135deg,#ff8a2a,#ffc14d); box-shadow: 0 5px 14px rgba(255,139,43,.3); font-size: 10px; font-weight: 800; white-space: nowrap; }
.catalog-card.is-cip .catalog-icon { color: #ffc15f; background: rgba(255,139,43,.16); }
.catalog-card-top .catalog-vip-badge, .catalog-card-top .catalog-cip-badge { position: static; flex: 0 0 auto; }
.catalog-card.is-normal .catalog-icon { color: #00ed82; background: rgba(0,237,130,.1); }
.catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-card { display: flex; flex-direction: column; }
.catalog-service-grid .catalog-card { height: 100%; min-height: 460px; }
.catalog-volume-grid .catalog-card { height: auto; min-height: 0; }
.catalog-volume-grid .catalog-card h3 { min-height: 0; }
.catalog-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--cyan); border-radius: 10px; background: rgba(0,237,130,.1); }
.catalog-icon svg { width: 18px; height: 18px; }
.catalog-status { color: var(--green); font-size: 10px; }
.catalog-card h3 { min-height: 2.8em; margin: 15px 0 14px; color: var(--ink); font-size: 15px; }
.catalog-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.catalog-details div { min-height: 62px; padding: 9px 10px; border-radius: 9px; background: #0a132b; }
.catalog-details span { display: block; color: #8295bd; font-size: 10px; }
.catalog-details strong { display: block; margin-top: 4px; color: var(--ink); font-size: 11px; }
.catalog-action { width: 100%; min-height: 38px; padding: 0 12px; font-size: 11px; }
.catalog-action { margin-top: auto; }
.catalog-volume-grid .catalog-action { margin-top: 16px; }
.catalog-features { flex: 1 1 auto; list-style: none; padding: 0; margin: 0 0 14px; color: #a8b9d5; font-size: 10px; line-height: 1.7; }
.catalog-features li { display: flex; align-items: flex-start; gap: 6px; }
.catalog-features li + li { margin-top: 5px; }
.catalog-features li > svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--cyan); }
.catalog-policy { padding: 7px 8px; border: 1px solid; border-radius: 9px; font-weight: 800; }
.catalog-policy.is-no-carry { color: #ff89a4; border-color: rgba(255,113,143,.42); background: rgba(185,43,83,.12); }
.catalog-policy.is-carry { color: #00ed82; border-color: rgba(0,237,130,.28); background: rgba(0,237,130,.07); }
.catalog-policy.is-no-carry > svg { color: #ff718f; }
.catalog-policy.is-carry > svg { color: #00ed82; }
.pending-payments { margin-top: 22px; padding-top: 18px; border-top: 1px solid #26375e; }
.pending-payments h3 { margin: 0 0 11px; color: var(--ink); font-size: 13px; }
.pending-payment { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-top: 8px; border: 1px solid #2a4168; border-radius: 11px; background: #0a132b; }
.pending-payment strong, .pending-payment span { display: block; }
.pending-payment strong { color: var(--ink); font-size: 12px; }
.pending-payment span { margin-top: 4px; color: #8295bd; font-size: 10px; }
.secondary-button { min-height: 34px; padding: 0 12px; color: var(--cyan); border: 1px solid rgba(0,237,130,.42); border-radius: 9px; background: rgba(0,237,130,.08); font-size: 10px; font-weight: 800; }
.secondary-button:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,237,130,.18); }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2,7,21,.78); backdrop-filter: blur(7px); }
.purchase-dialog { width: min(100%, 510px); max-height: min(760px, calc(100vh - 36px)); overflow: auto; padding: 24px; color: var(--ink); border: 1px solid #2e4d79; border-radius: 18px; background: linear-gradient(145deg, #111f40, #09152e); box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 35px rgba(0,237,130,.08); }
.purchase-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.purchase-dialog-head h2 { margin: 8px 0 7px; font-size: 20px; }
.purchase-dialog-head p { margin: 0; color: #98acd2; font-size: 11px; line-height: 1.9; }
.purchase-dialog-head p strong { color: var(--cyan); }
.modal-close { width: 32px; height: 32px; color: #9bb0d7; border: 1px solid #2b456d; border-radius: 9px; background: #0a1630; font-size: 22px; line-height: 1; }
.modal-close:hover { color: var(--cyan); border-color: var(--cyan); }
.purchase-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 20px 0; }
.purchase-summary > div { padding: 11px 12px; border: 1px solid #263e66; border-radius: 10px; background: #0a142c; }
.purchase-summary span, .purchase-summary strong { display: block; }
.purchase-summary span { color: #8295bd; font-size: 10px; }
.purchase-summary strong { margin-top: 5px; color: var(--ink); font-size: 13px; }
.card-payment-info { display: grid; gap: 9px; margin: -5px 0 14px; padding: 13px; border: 1px solid rgba(0,237,130,.35); border-radius: 12px; background: rgba(0,237,130,.06); }
.card-payment-info h3 { margin: 0 0 2px; color: var(--cyan); font-size: 12px; }
.card-payment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(73,103,151,.3); }
.card-payment-row:last-of-type { border-bottom: 0; }
.card-payment-row > span { color: #91a6cf; font-size: 10px; }
.card-payment-row > strong, .card-payment-row > div { color: var(--ink); font-size: 11px; font-weight: 800; }
.card-payment-row > div { display: flex; align-items: center; gap: 8px; }
.card-payment-row button { min-height: 27px; padding: 0 9px; color: #06121d !important; border: 0 !important; border-radius: 7px; background: var(--cyan) !important; font: inherit; font-size: 10px; font-weight: 800; appearance: none; -webkit-appearance: none; transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease; }
.card-payment-row button:hover, .card-payment-row button:focus-visible { box-shadow: 0 0 14px rgba(0,237,130,.28); outline: none; transform: translateY(-1px); }
.card-payment-row button:active { opacity: .82; transform: translateY(0); }
.card-payment-info p { margin: 1px 0 0; color: #9eb1d5; font-size: 10px; line-height: 1.9; }
.card-payment-unavailable { margin: -5px 0 14px; padding: 10px 12px; color: #ff9bb9; border: 1px solid rgba(247,139,32,.35); border-radius: 10px; background: rgba(247,139,32,.07); font-size: 10px; line-height: 1.8; }
.payment-choice input:disabled { cursor: not-allowed; opacity: .45; }
.payment-choice:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.purchase-form { display: grid; gap: 10px; }
.purchase-form fieldset { display: grid; gap: 8px; padding: 0; margin: 0; border: 0; }
.purchase-form legend { margin-bottom: 2px; color: #9fb1d3; font-size: 11px; font-weight: 800; }
.payment-choice { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; border: 1px solid #2a4168; border-radius: 11px; background: #0a142c; }
.payment-choice:has(input:checked) { border-color: var(--cyan); background: rgba(0,237,130,.08); box-shadow: 0 0 16px rgba(0,237,130,.08); }
.payment-choice input { accent-color: var(--cyan); }
.payment-choice span { display: grid; gap: 4px; }
.payment-choice strong { color: var(--ink); font-size: 12px; }
.payment-choice small, .form-hint { color: #8295bd; font-size: 10px; line-height: 1.8; }
.purchase-form label { color: #a9badd; font-size: 11px; font-weight: 700; }
.purchase-form label span { color: #7184ac; font-weight: 400; }
.purchase-form input[type="file"], .purchase-form input[type="text"] { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ink); border: 1px solid #2a4168; border-radius: 9px; background: #0a142c; font: inherit; font-size: 11px; box-sizing: border-box; }
.purchase-form input[type="file"]::file-selector-button { margin-left: 9px; padding: 7px 10px; color: #071421; border: 0; border-radius: 7px; background: var(--cyan); font: inherit; font-size: 10px; font-weight: 800; }
.purchase-form .form-error { margin: 0; }
.telegram-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.telegram-section .wide { grid-column: 1 / -1; }
.telegram-section .primary-button { width: fit-content; }
.telegram-intro-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border-color: rgba(0,237,130,.35); background: linear-gradient(120deg, rgba(0,237,130,.12), rgba(13,26,54,.88)); }
.telegram-intro-copy { min-width: 0; display: grid; gap: 6px; }
.telegram-intro-kicker { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.telegram-intro-copy h2 { margin: 0; color: var(--ink); font-size: 18px; }
.telegram-intro-copy p { margin: 0; color: #9eb0d3; font-size: 11px; line-height: 1.9; }
.telegram-intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; flex: 0 0 auto; }
.telegram-intro-actions .primary-button, .telegram-intro-actions .secondary-button { width: auto; min-width: 145px; text-align: center; text-decoration: none; }
.telegram-intro-actions .telegram-channel-button { color: #06121d; background: linear-gradient(110deg, #eb5a00, #f78b20); box-shadow: 0 10px 24px rgba(235,90,0,.22); }
.telegram-intro-actions .telegram-channel-button:hover { color: #06121d; background: linear-gradient(110deg, #eb5a00, #f78b20); box-shadow: 0 14px 30px rgba(235,90,0,.32); }
.telegram-token-box { display: grid; gap: 13px; margin-top: 17px; padding: 16px; border: 1px solid rgba(0,237,130,.42); border-radius: 15px; background: linear-gradient(145deg, rgba(0,237,130,.13), rgba(13,26,54,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.14); }
.telegram-token-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.telegram-token-head > div { min-width: 0; display: grid; gap: 4px; }
.telegram-token-kicker { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.telegram-token-head strong { color: var(--ink); font-size: 12px; }
.telegram-token-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 8px; color: #00ed82; border: 1px solid rgba(0,234,54,.25); border-radius: 999px; background: rgba(0,234,54,.08); font-size: 9px; font-weight: 800; white-space: nowrap; }
.telegram-token-status svg { width: 13px; height: 13px; }
.telegram-token-code-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; direction: ltr; border: 1px solid #2a4168; border-radius: 11px; background: rgba(5,14,34,.78); }
.telegram-token-code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--cyan); font-family: Consolas, 'Courier New', monospace; font-size: 12px; font-weight: 800; line-height: 1.8; text-align: left; user-select: all; }
.token-copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 35px; padding: 0 11px; color: #06121d; border: 1px solid rgba(0,237,130,.8); border-radius: 9px; background: linear-gradient(115deg, var(--cyan), #64f3d4); box-shadow: 0 7px 16px rgba(0,237,130,.14); font-size: 10px; font-weight: 800; white-space: nowrap; }
.token-copy-button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,237,130,.24); }
.token-copy-button svg { width: 15px; height: 15px; }
.telegram-token-help { display: flex; align-items: center; gap: 9px; color: #9eb0d3; font-size: 10px; line-height: 1.8; }
.telegram-token-help p { margin: 0; }
.telegram-token-help b { color: var(--ink); font-family: Consolas, 'Courier New', monospace; }
.telegram-token-step { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: #06121d; border-radius: 50%; background: var(--cyan); font-size: 10px; font-weight: 900; }
.telegram-list { display: grid; gap: 9px; }
.telegram-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid #2a4168; border-radius: 11px; background: #0a132b; }
.telegram-row > div { min-width: 0; display: grid; gap: 5px; }
.telegram-row strong { overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.telegram-row span { color: #8295bd; font-size: 10px; }
.telegram-danger { color: #ff9dbb; border-color: rgba(247,139,32,.4); background: rgba(247,139,32,.08); }

@media (max-width: 900px) {
  /* Keep catalog items readable on narrow and tablet-sized viewports. */
  .catalog-service-grid,
  .catalog-volume-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .catalog-grid { width: 100%; }
  .catalog-card { min-width: 0; }
}
@media (max-width: 680px) {
  .service-operations-card { grid-column: auto; }
  .service-operations, .report-summary-grid, .report-total-grid, .catalog-service-grid, .catalog-volume-grid { grid-template-columns: 1fr; }
  .credential-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .credential-value { width: 100%; justify-content: flex-start; }
  .credential-value code { max-width: calc(100vw - 118px); }
  .pagination { align-items: flex-start; flex-direction: column; }
  .table-wrap { overflow: visible; }
  table { min-width: 0; }
  table:not(.connection-table) th, table:not(.connection-table) td { padding: 10px 7px; white-space: normal; word-break: break-word; }
  .connection-table { min-width: 0; }
  .connection-table thead { display: none; }
  .connection-table, .connection-table tbody, .connection-table tr, .connection-table td { display: block; width: 100%; }
  .connection-table tr { margin-bottom: 10px; padding: 8px 10px; border: 1px solid #263e66; border-radius: 12px; background: #0a142c; }
  .connection-table tr:last-child { margin-bottom: 0; }
  .connection-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 9px 2px; white-space: normal; text-align: right; border-bottom: 1px solid #1b2d50; }
  .connection-table td:last-child { border-bottom: 0; }
  .connection-table td::before { content: attr(data-label); flex: 0 0 86px; color: #8195bd; font-size: 10px; font-weight: 700; }
  .connection-table td > * { max-width: calc(100% - 100px); text-align: right; }
  .connection-table .result-pill { max-width: none; }
  .pending-payment { align-items: flex-start; flex-direction: column; }
  .pending-payment .secondary-button { width: 100%; }
  .card-payment-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .card-payment-row > div { max-width: 100%; flex-wrap: wrap; }
  .purchase-dialog { padding: 19px; }
  .purchase-summary { grid-template-columns: 1fr; }
  .telegram-section { grid-template-columns: 1fr; }
  .telegram-section .wide { grid-column: auto; }
  .telegram-section .primary-button { width: 100%; }
  .telegram-intro-panel { align-items: stretch; flex-direction: column; }
  .telegram-intro-actions { justify-content: stretch; flex-direction: column; }
  .telegram-intro-actions .primary-button, .telegram-intro-actions .secondary-button { width: 100%; }
  .telegram-token-head { align-items: stretch; flex-direction: column; gap: 9px; }
  .telegram-token-status { width: fit-content; }
  .telegram-token-code-wrap { align-items: stretch; flex-direction: column; }
  .telegram-token-code { width: 100%; box-sizing: border-box; padding: 3px 2px; }
  .token-copy-button { width: 100%; }
  .telegram-row { align-items: flex-start; flex-direction: column; }
  .telegram-row .secondary-button { width: 100%; }
}

.nav-toggle { display: none; }
@media (max-width: 680px) {
  .portal-nav { padding: 9px 0 0; }
  .portal-nav .nav-toggle { display: flex; align-items: center; justify-content: center; width: min(100% - 28px, 1440px); min-height: 42px; margin: 0 auto 9px; padding: 7px 12px; color: var(--ink); border: 1px solid #2a4168; border-radius: 10px; background: #0b1732; cursor: pointer; }
  .portal-nav .nav-toggle i { display: none; }
  .portal-nav .nav-toggle span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; font-size: 12px; font-weight: 800; line-height: 1.5; }
  .portal-nav .nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .portal-nav .nav-inner { display: none; flex-direction: column; align-items: stretch; gap: 0; overflow: visible; padding-bottom: 9px; }
  .portal-nav.is-open .nav-inner { display: flex; }
  .portal-nav .nav-item { width: 100%; min-height: 48px; justify-content: flex-start; padding: 0 14px; border-top: 1px solid rgba(115,132,177,.14); }
  .portal-nav .nav-item.is-active::after { right: 0; left: auto; top: 8px; bottom: 8px; width: 3px; height: auto; border-radius: 3px 0 0 3px; }
}

.message-source-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.4; }
.message-source-name { vertical-align: middle; }
.message-source-admin { color: #f78b20; background: rgba(247, 139, 32, .16); border: 1px solid rgba(247, 139, 32, .82); box-shadow: 0 0 14px rgba(247, 139, 32, .38), inset 0 0 10px rgba(247, 139, 32, .08); text-shadow: 0 0 8px rgba(247, 139, 32, .52); }
.message-source-user { color: #ffe66d; background: rgba(255, 230, 109, .15); border: 1px solid rgba(255, 230, 109, .82); box-shadow: 0 0 14px rgba(255, 230, 109, .34), inset 0 0 10px rgba(255, 230, 109, .07); text-shadow: 0 0 8px rgba(255, 230, 109, .48); }

.ring-metric-card { min-height: 178px; }
.ring-layout { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.progress-ring { --ring-progress: 0deg; width: 112px; height: 112px; flex: 0 0 112px; display: grid; place-items: center; padding: 8px; border-radius: 50%; background: conic-gradient(from -90deg, #00ed82 0deg, #00ea36 var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 22px rgba(0, 237, 130, .18), 0 0 0 1px rgba(0, 237, 130, .18); }
.progress-ring-inner { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 50%; background: #0a132b; text-align: center; }
.progress-ring-inner strong { color: var(--ink); font-size: 16px; line-height: 1.25; }
.progress-ring-inner small { color: #8fa3cb; font-size: 9px; }
.ring-stat { display: grid; gap: 5px; text-align: right; }
.ring-stat b { color: var(--cyan); font-size: 22px; text-shadow: 0 0 13px rgba(25, 230, 208, .38); }
.ring-stat span { color: var(--muted); font-size: 10px; }
.days-ring-card .progress-ring { background: conic-gradient(from -90deg, #f78b20 0deg, #9385ff var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 22px rgba(247, 139, 32, .2), 0 0 0 1px rgba(247, 139, 32, .18); }
.days-ring-card .ring-stat b { color: #f9b35d; text-shadow: 0 0 13px rgba(247, 139, 32, .42); }
.volume-ring-card .progress-ring { background: conic-gradient(from -90deg, #00ed82 0deg, #00ea36 var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); }

/* Dashboard account card */
.credentials-compact-card { min-height: 174px; padding: 14px 15px; }
.account-card-head { display:flex; align-items:center; gap:10px; min-width:0; }
.account-card-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; color:var(--cyan); border:1px solid rgba(0,237,130,.42); border-radius:11px; background:rgba(0,237,130,.08); box-shadow:0 0 16px rgba(0,237,130,.12); }
.account-card-icon svg { width:21px; height:21px; }
.account-card-head > div { min-width:0; display:grid; gap:3px; }
.account-card-head h2 { margin:0; color:var(--ink); font-size:13px; line-height:1.45; }
.account-card-head > div > span { color:#8295bd; font-size:9px; }
.credentials-compact-card .compact-credential-list { gap:8px; margin-top:11px; }
.credentials-compact-card .compact-credential-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:7px 8px; border:1px solid #263e66; border-radius:12px; background:linear-gradient(135deg,rgba(22,39,79,.88),rgba(10,21,49,.92)); }
.credentials-compact-card .compact-credential-label { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.account-field-icon { width:25px; height:25px; display:grid; place-items:center; flex:0 0 25px; border:1px solid rgba(0,237,130,.35); border-radius:8px; color:var(--cyan); background:rgba(0,237,130,.07); }
.account-field-icon svg { width:15px; height:15px; }
.account-key-icon { color:#aa83ff; border-color:rgba(170,131,255,.38); background:rgba(170,131,255,.08); }
.account-field-copy { display:grid; gap:1px; min-width:0; }
.account-field-copy small { color:#91a4cc; font-size:9px; line-height:1.3; }
.credentials-compact-card .compact-credential-row .copy-credential { width:29px; height:29px; min-height:29px; display:grid; place-items:center; flex:0 0 29px; padding:0; color:var(--cyan); border:1px solid rgba(0,237,130,.42); border-radius:9px; background:rgba(0,237,130,.08); }
.credentials-compact-card .compact-credential-row .copy-credential svg { width:15px; height:15px; }
.credentials-compact-card .compact-credential-row .copy-credential:hover { color:#06121d; background:var(--cyan); box-shadow:0 0 15px rgba(0,237,130,.38); }

/* Dashboard service status */
.service-package-card .service-package-name { margin-top: 14px; font-size: 20px; }
.service-package-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; }
.service-package-status i { width: 7px; height: 7px; border-radius: 50%; }
.service-package-status.is-online { color: var(--green); border-color: rgba(0,234,54,.55); background: rgba(0,234,54,.1); box-shadow: 0 0 14px rgba(0,234,54,.14); }
.service-package-status.is-online i { background: var(--green); box-shadow: 0 0 0 4px rgba(0,234,54,.12), 0 0 12px var(--green); }
.service-package-status.is-offline { color: var(--danger); border-color: rgba(247,139,32,.55); background: rgba(247,139,32,.1); box-shadow: 0 0 14px rgba(247,139,32,.13); }
.service-package-status.is-offline i { background: var(--danger); box-shadow: 0 0 0 4px rgba(247,139,32,.12), 0 0 12px var(--danger); }

/* Refined service page: compact connection strip and one focused usage card. */
.service-page-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service-connection, .service-usage { position: relative; overflow: hidden; border: 1px solid #26375e; border-radius: 18px; background: linear-gradient(145deg, #111b3a, #0d1530); box-shadow: var(--shadow); }
.service-connection { min-height: 112px; display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(130px, .45fr) minmax(130px, .45fr) auto; align-items: center; gap: 18px; padding: 22px 24px; }
.service-connection::after { content: ''; position: absolute; width: 190px; height: 190px; left: -100px; bottom: -120px; border-radius: 50%; background: rgba(147,133,255,.12); pointer-events: none; }
.service-connection-icon { width: 48px; height: 48px; display: grid; place-items: center; position: relative; z-index: 1; color: var(--cyan); border: 1px solid rgba(0,237,130,.3); border-radius: 15px; background: rgba(0,237,130,.08); box-shadow: 0 0 22px rgba(0,237,130,.1), inset 0 0 0 1px rgba(0,237,130,.08); }
.service-connection-icon svg { width: 24px; height: 24px; }
.service-connection-title, .service-connection-meta { position: relative; z-index: 1; min-width: 0; }
.service-connection-title > span, .service-connection-meta span { display: block; color: #91a4c9; font-size: 10px; }
.service-connection-title h2 { overflow: hidden; margin: 4px 0 3px; color: var(--ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.service-connection-title p { overflow: hidden; margin: 0; color: #7185ae; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-connection-meta { padding-inline-start: 16px; border-inline-start: 1px solid #26375e; }
.service-connection-meta strong { display: block; margin-top: 6px; color: var(--ink); font-size: 13px; }
.service-connection-badge { display: inline-flex; align-items: center; gap: 7px; position: relative; z-index: 1; padding: 7px 10px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.service-connection-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.service-connection-badge.is-online { color: var(--green); border-color: rgba(0,234,54,.48); background: rgba(0,234,54,.1); box-shadow: 0 0 14px rgba(0,234,54,.13); }
.service-connection-badge.is-online i { box-shadow: 0 0 0 4px rgba(0,234,54,.1), 0 0 11px var(--green); }
.service-connection-badge.is-offline { color: var(--danger); border-color: rgba(247,139,32,.48); background: rgba(247,139,32,.1); box-shadow: 0 0 14px rgba(247,139,32,.13); }
.service-connection-badge.is-offline i { box-shadow: 0 0 0 4px rgba(247,139,32,.1), 0 0 11px var(--danger); }
.service-usage { padding: 24px; }
.service-usage::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,237,130,.7), rgba(147,133,255,.7), transparent); }
.service-usage-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service-usage-eyebrow { display: block; margin-bottom: 5px; color: var(--cyan); font-size: 10px; letter-spacing: .05em; }
.service-usage-header h2 { margin: 0; color: var(--ink); font-size: 17px; }
.service-usage-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #91a4c9; border: 1px solid #263e66; border-radius: 999px; background: #0a132b; font-size: 10px; white-space: nowrap; }
.service-usage-chip svg { width: 15px; height: 15px; color: var(--cyan); }
.service-usage-main { display: flex; align-items: center; gap: 28px; min-height: 168px; padding: 20px 8px 18px; }
.service-usage-ring { width: 148px; height: 148px; display: grid; place-items: center; flex: 0 0 148px; padding: 10px; border-radius: 50%; background: conic-gradient(from -90deg, var(--cyan) 0deg, #9385ff var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 28px rgba(0,237,130,.18), 0 0 0 1px rgba(0,237,130,.16); }
.service-usage.is-low .service-usage-ring { background: conic-gradient(from -90deg, #f78b20 0deg, #9385ff var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 28px rgba(247,139,32,.18), 0 0 0 1px rgba(247,139,32,.16); }
.service-usage-ring > div { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 50%; background: #0a132b; text-align: center; }
.service-usage-ring strong { color: var(--ink); font-size: 22px; line-height: 1.2; }
.service-usage-ring span { color: #91a4c9; font-size: 10px; }
.service-usage-balance { min-width: 190px; }
.service-usage-balance > span { display: block; color: #91a4c9; font-size: 11px; }
.service-usage-balance > strong { display: block; margin-top: 7px; color: var(--ink); font-size: 30px; letter-spacing: -.04em; text-shadow: 0 0 18px rgba(0,237,130,.18); }
.service-usage.is-low .service-usage-balance > strong { color: #ffc078; text-shadow: 0 0 18px rgba(247,139,32,.2); }
.service-usage-balance p { margin: 6px 0 0; color: #7185ae; font-size: 10px; }
.service-usage-balance p b { color: #b7c7e8; font-weight: 700; }
.service-usage-progress-head, .service-usage-stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-usage-progress-head { margin-top: 2px; color: #91a4c9; font-size: 11px; }
.service-usage-progress-head strong { color: var(--cyan); font-size: 12px; }
.service-usage.is-low .service-usage-progress-head strong { color: #ff9cbd; }
.service-usage-progress { height: 9px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #1a2a4e; box-shadow: inset 0 0 0 1px rgba(117,133,163,.1); }
.service-usage-progress span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #00ed82, #00ea36); box-shadow: 0 0 15px rgba(0,237,130,.6); }
.service-usage.is-low .service-usage-progress span { background: linear-gradient(90deg, #f78b20, #9385ff); box-shadow: 0 0 15px rgba(247,139,32,.55); }
.service-usage-stats { margin-top: 16px; padding-top: 16px; border-top: 1px solid #26375e; }
.service-usage-stats > div { min-width: 0; }
.service-usage-stats span { display: block; color: #7185ae; font-size: 10px; }
.service-usage-stats strong { display: block; margin-top: 5px; color: var(--ink); font-size: 13px; }
.service-usage-policy { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 10px 12px; color: #ffd5e2; border: 1px solid rgba(247,139,32,.25); border-radius: 10px; background: rgba(247,139,32,.07); font-size: 10px; }
.service-usage-policy svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--danger); }
.service-usage-alerts .service-volume-alert { margin-top: 12px; }
.service-usage-alerts .service-volume-alert:first-child { margin-top: 14px; }
@media (max-width: 850px) {
  .service-connection { grid-template-columns: auto minmax(0, 1fr) auto; }
  .service-connection-meta { display: none; }
}
@media (max-width: 560px) {
  .service-connection { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 18px; }
  .service-connection-badge { grid-column: 1 / -1; justify-self: start; margin-inline-start: 60px; margin-top: -4px; }
  .service-usage { padding: 18px; }
  .service-usage-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .service-usage-main { align-items: center; flex-direction: column; gap: 17px; padding-inline: 0; }
  .service-usage-balance { text-align: center; }
  .service-usage-stats { gap: 8px; }
  .service-usage-stats strong { font-size: 12px; }
}

/* Service overview: package, time, volume and fourteen-day connection report. */
.service-page-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service-overview-grid { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); gap: 16px; }
.service-info-panel { position: relative; overflow: hidden; padding: 22px; border: 1px solid #26375e; border-radius: 18px; background: linear-gradient(145deg, #111b3a, #0d1530); box-shadow: var(--shadow); }
.service-info-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,237,130,.68), rgba(147,133,255,.68), transparent); }
.service-panel-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.service-panel-heading > div { min-width: 0; flex: 1; }
.service-panel-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: var(--cyan); border: 1px solid rgba(0,237,130,.3); border-radius: 14px; background: rgba(0,237,130,.08); box-shadow: 0 0 22px rgba(0,237,130,.1); }
.service-panel-icon svg { width: 21px; height: 21px; }
.service-time-icon { color: #aa83ff; border-color: rgba(170,131,255,.36); background: rgba(170,131,255,.1); box-shadow: 0 0 22px rgba(170,131,255,.1); }
.service-volume-icon { color: #ffd166; border-color: rgba(255,209,102,.34); background: rgba(255,209,102,.08); box-shadow: 0 0 22px rgba(255,209,102,.08); }
.service-chart-icon { color: #4ddcff; border-color: rgba(77,220,255,.34); background: rgba(77,220,255,.08); box-shadow: 0 0 22px rgba(77,220,255,.08); }
.service-panel-kicker { display: block; color: #91a4c9; font-size: 12px; }
.service-panel-heading h2 { overflow: hidden; margin: 4px 0 0; color: var(--ink); font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.service-package-panel { min-height: 188px; }
.service-package-panel .service-panel-heading { align-items: center; }
.service-package-panel .service-connection-badge { margin-inline-start: auto; }
.service-package-price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 31px; padding-top: 16px; border-top: 1px solid #26375e; }
.service-package-price span, .service-panel-note { color: #7185ae; font-size: 12px; }
.service-package-price strong { color: var(--cyan); font-size: 20px; text-shadow: 0 0 16px rgba(0,237,130,.16); }
.service-panel-note { margin: 14px 0 0; line-height: 1.9; }
.service-time-panel { min-height: 188px; }
.service-time-content { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.service-time-ring, .service-usage-ring { width: 126px; height: 126px; display: grid; place-items: center; flex: 0 0 126px; padding: 9px; border-radius: 50%; background: conic-gradient(from -90deg, #00ed82 0deg, #00ea36 var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 26px rgba(0,237,130,.15), 0 0 0 1px rgba(0,237,130,.12); }
.service-time-ring { width: 112px; height: 112px; flex-basis: 112px; padding: 8px; background: conic-gradient(from -90deg, #f78b20 0deg, #9385ff var(--ring-progress), #1a2a4e var(--ring-progress), #1a2a4e 360deg); box-shadow: 0 0 22px rgba(247,139,32,.2), 0 0 0 1px rgba(247,139,32,.18); }
.service-time-ring > div, .service-usage-ring > div { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 50%; background: #0a132b; text-align: center; }
.service-time-ring strong, .service-usage-ring strong { color: var(--ink); font-size: 24px; line-height: 1.2; }
.service-time-ring span, .service-usage-ring span { color: #91a4c9; font-size: 11px; }
.service-time-ring strong { font-size: 16px; line-height: 1.25; }
.service-time-ring span { font-size: 9px; }
.service-time-ring small { color: #ff8db0; font-size: 9px; line-height: 1.2; }
.service-time-rows { display: grid; flex: 1; gap: 9px; min-width: 0; }
.service-time-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(38,55,94,.75); }
.service-time-rows > div:last-child { padding-bottom: 0; border-bottom: 0; }
.service-time-rows span { color: #a0b2d5; font-size: 12px; white-space: nowrap; }
.service-time-rows span b { color: #8196bd; font-size: 10px; font-weight: 500; }
.service-time-rows strong { overflow: hidden; color: #d6e1fa; font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.service-volume-panel { padding: 24px; }
.service-volume-panel.is-low { border-color: rgba(247,139,32,.5); }
.service-volume-panel .service-panel-heading { align-items: center; }
.service-volume-panel .service-usage-chip { margin-inline-start: auto; }
.service-volume-content { display: flex; align-items: center; gap: 32px; margin-top: 19px; }
.service-volume-main { flex: 1; min-width: 0; }
.service-volume-main > span { display: block; color: #91a4c9; font-size: 13px; }
.service-volume-main > strong { display: block; margin-top: 9px; color: var(--ink); font-size: 34px; letter-spacing: -.04em; text-shadow: 0 0 18px rgba(0,237,130,.18); }
.service-volume-panel.is-low .service-volume-main > strong { color: #ffc078; text-shadow: 0 0 18px rgba(247,139,32,.2); }
.service-volume-main > p { margin: 9px 0 17px; color: #7185ae; font-size: 12px; }
.service-volume-main > p b { color: #b7c7e8; }
.service-volume-main .service-usage-progress-head { margin-top: 0; }
.service-volume-panel .service-usage-stats { margin-top: 20px; }
.service-volume-panel .service-usage-stats span { font-size: 12px; }
.service-volume-panel .service-usage-stats strong { font-size: 15px; }
.service-volume-panel .service-usage-policy { font-size: 12px; }
.service-volume-panel .service-usage-progress-head,
.service-volume-panel .service-usage-progress-head strong { font-size: 13px; }
.service-volume-panel .service-volume-alert { font-size: 13px; }
.service-package-panel .service-connection-badge,
.service-volume-panel .service-usage-chip { font-size: 12px; }
.service-volume-panel .service-volume-main > strong,
.service-volume-panel .service-volume-main > p b,
.service-volume-panel .service-usage-stats strong { direction: rtl; unicode-bidi: isolate; }
.service-report-link { align-self: center; padding: 8px 11px; color: var(--cyan); border: 1px solid rgba(0,237,130,.35); border-radius: 10px; background: rgba(0,237,130,.07); font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.service-report-link:hover { color: #06121d; background: var(--cyan); box-shadow: 0 0 18px rgba(0,237,130,.3); }
.service-connections-panel { padding-bottom: 20px; }
.service-connections-panel > .service-panel-note { margin-inline-start: 55px; margin-top: -2px; }
.service-chart-legend { display: flex; align-items: center; gap: 18px; margin-top: 18px; color: #91a4c9; font-size: 12px; }
.service-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.service-chart-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.service-chart-dot.service-chart-download { background: #00ed82; box-shadow: 0 0 10px rgba(0,237,130,.7); }
.service-chart-dot.service-chart-upload { background: #aa83ff; box-shadow: 0 0 10px rgba(170,131,255,.65); }
.service-chart-scroll { overflow-x: auto; margin-top: 12px; padding-bottom: 5px; }
.service-chart-grid { display: grid; grid-template-columns: repeat(14, minmax(72px, 1fr)); align-items: end; gap: 7px; min-width: 1100px; min-height: 204px; padding: 14px 8px 0; border-bottom: 1px solid #26375e; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(38,55,94,.34) 48px); }
.service-chart-day { display: grid; grid-template-rows: 55px 119px 27px; align-items: end; min-width: 0; text-align: center; }
.service-chart-values { display: grid; align-content: end; gap: 5px; color: #b9c9e8; font-size: 11px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.service-chart-bars { display: flex; align-items: end; justify-content: center; gap: 4px; height: 119px; }
.service-chart-bar { display: block; width: min(20px, 30%); min-height: 0; border-radius: 7px 7px 2px 2px; transition: height .25s ease; }
.service-chart-bar.service-chart-download { background: linear-gradient(180deg, #00ed82, #00ea36); box-shadow: 0 0 12px rgba(0,237,130,.32); }
.service-chart-bar.service-chart-upload { background: linear-gradient(180deg, #c1a7ff, #8666dd); box-shadow: 0 0 12px rgba(170,131,255,.28); }
.service-chart-day small { overflow: hidden; color: #91a4c9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .service-overview-grid { grid-template-columns: 1fr; }
  .service-time-panel, .service-package-panel { min-height: 0; }
}
@media (max-width: 620px) {
  .service-info-panel, .service-volume-panel { padding: 18px; }
  .service-panel-heading h2 { font-size: 18px; }
  .service-time-content, .service-volume-content { align-items: center; flex-direction: column; gap: 17px; }
  .service-time-rows, .service-volume-main { width: 100%; }
  .service-time-rows strong { max-width: 55%; }
  .service-time-rows > div { align-items: flex-start; }
  .service-time-rows span { white-space: normal; }
  .service-volume-main { text-align: center; }
  .service-volume-main .service-usage-progress-head { text-align: right; }
  .service-volume-panel .service-usage-chip { display: none; }
  .service-package-panel .service-connection-badge { padding: 6px 8px; }
  .service-connections-panel > .service-panel-note { margin-inline-start: 0; }
  .service-connections-panel .service-panel-heading { flex-wrap: wrap; }
  .service-report-link { margin-inline-start: 54px; }
  .service-chart-grid { gap: 5px; padding-inline: 0; }
  .service-chart-bar { width: 12px; }
  .service-chart-values { font-size: 10px; }
  .service-chart-day small { font-size: 10px; }
}