:root { --svc-bg:#f4f7fb; --svc-surface:rgba(255,255,255,.94); --svc-side:#111c35; --svc-primary:#5b5ce2; --svc-primary-2:#7c5ce7; --svc-cyan:#19b8c8; --svc-border:#e5eaf2; --svc-ink:#17233d; --svc-muted:#748198; --svc-shadow:0 16px 38px rgba(32,46,82,.08); }
* { box-sizing:border-box; }
body { margin:0; font-family:Vazirmatn,Tahoma,"Segoe UI",sans-serif; background:var(--svc-bg); color:var(--svc-ink); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 8%,rgba(91,92,226,.09),transparent 28%),radial-gradient(circle at 82% 80%,rgba(25,184,200,.07),transparent 30%); }
.svc-shell { display:flex; min-height:100vh; position:relative; }
.svc-side { width:264px; flex-shrink:0; background:linear-gradient(180deg,#152342 0%,#10192e 100%); color:#dbe5f5; padding:22px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; box-shadow:-8px 0 30px rgba(13,24,48,.18); z-index:1035; }
.svc-brand { display:flex; align-items:center; gap:11px; font-weight:900; font-size:19px; padding:4px 10px 22px; color:#fff; }
.svc-brand::before { content:"S"; width:39px; height:39px; border-radius:13px; display:grid; place-items:center; direction:ltr; background:linear-gradient(135deg,var(--svc-primary),var(--svc-cyan)); box-shadow:0 8px 22px rgba(91,92,226,.4); }
.svc-brand span { color:#8edfe6; font-size:12px; font-weight:600; }
.svc-nav { display:flex; flex-direction:column; gap:3px; }
.svc-nav a { color:#bdcbe0; text-decoration:none; padding:10px 13px; font-size:13px; border-radius:10px; transition:.18s ease; }
.svc-nav a::before { content:""; display:inline-block; width:6px; height:6px; margin-left:10px; border:1.5px solid #7184a4; border-radius:50%; vertical-align:middle; }
.svc-nav a:hover { background:rgba(255,255,255,.07); color:#fff; transform:translateX(-2px); }
.svc-nav a.active { color:#fff; background:linear-gradient(90deg,rgba(91,92,226,.34),rgba(25,184,200,.13)); box-shadow:inset -3px 0 #7edce5; }
.svc-nav a.active::before { background:#7edce5; border-color:#7edce5; box-shadow:0 0 0 4px rgba(126,220,229,.12); }
.svc-nav-group { font-size:10px; color:#7183a0; padding:18px 13px 5px; letter-spacing:.4px; }
.svc-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.svc-top { display:flex; align-items:center; justify-content:space-between; min-height:70px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(224,230,240,.85); padding:12px 26px; position:sticky; top:0; z-index:1020; }
.svc-title { font-weight:900; font-size:18px; }
.svc-user { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--svc-muted); }
.svc-content { padding:28px; flex:1; position:relative; }
.svc-card { background:var(--svc-surface); border:1px solid rgba(226,232,241,.95); border-radius:18px; padding:21px; box-shadow:var(--svc-shadow); }
.svc-card h5,.svc-card h6 { font-weight:800; }
.svc-card-header { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; }
.svc-card-header p { margin:5px 0 0; color:var(--svc-muted); font-size:12px; }
.svc-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.svc-stat { background:linear-gradient(145deg,#fff,#f9fbff); border:1px solid var(--svc-border); border-radius:18px; padding:20px; box-shadow:var(--svc-shadow); position:relative; overflow:hidden; }
.svc-stat::after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; left:-20px; top:-24px; background:rgba(91,92,226,.08); }
.svc-stat span { display:block; font-size:29px; font-weight:900; color:var(--svc-primary); }
.svc-stat label { font-size:12px; color:var(--svc-muted); }
.svc-table-wrap { overflow:auto; border:1px solid var(--svc-border); border-radius:13px; }
table.svc-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; }
table.svc-table th { background:#f7f9fc; color:#66758e; font-size:11px; font-weight:800; text-align:right; padding:12px 13px; border-bottom:1px solid var(--svc-border); white-space:nowrap; }
table.svc-table td { padding:12px 13px; border-bottom:1px solid #edf1f6; font-size:12.5px; vertical-align:middle; }
table.svc-table tbody tr { transition:background .15s; }
table.svc-table tbody tr:hover { background:#fafbff; }
table.svc-table tbody tr:last-child td { border-bottom:0; }
.svc-badge { display:inline-flex; padding:4px 9px; border-radius:20px; font-size:11px; font-weight:700; background:#eef1ff; color:#5054c8; }
.svc-badge.ok { background:#e8f8f2; color:#138461; }
.svc-badge.off { background:#f2f4f7; color:#7c8798; }
.svc-badge.err { background:#fdecef; color:#c8324b; }
.svc-badge.warn { background:#fff5e6; color:#a9741c; }
.svc-badge.muted { background:#eef1f5; color:#8a97a8; }
.svc-badge.cyan { background:#e4f7fa; color:#0f8b9b; }
.svc-badge.info { background:#eef1ff; color:#5054c8; }
.svc-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75; margin-left:6px; }
.svc-pos { color:#138461; font-weight:800; }
.svc-neg { color:#c8324b; font-weight:800; }
.btn { border-radius:9px; font-weight:700; }
.btn-primary { border:0; background:linear-gradient(135deg,var(--svc-primary),var(--svc-primary-2)); box-shadow:0 7px 16px rgba(91,92,226,.23); }
.btn-primary:hover { filter:brightness(.95); }
.form-control,.form-select { border-color:#dfe5ef; border-radius:10px; min-height:39px; font-size:13px; }
.form-control:focus,.form-select:focus { border-color:#8f90ea; box-shadow:0 0 0 .2rem rgba(91,92,226,.12); }
.modal-content { border:0; border-radius:20px; box-shadow:0 25px 80px rgba(20,31,57,.25); overflow:hidden; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--svc-border); background:#fafbfe; }
.modal-title { font-size:16px; font-weight:900; }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--svc-border); }
.modal-backdrop.show { opacity:.32; }
.alert { border:0; border-radius:12px; box-shadow:0 7px 20px rgba(32,46,82,.06); }
.ltr { direction:ltr; text-align:left; }
.svc-empty { text-align:center; padding:34px 12px; color:var(--svc-muted); }
.svc-menu-toggle { display:none; border:0; background:#eef1ff; color:var(--svc-primary); width:38px; height:38px; border-radius:10px; }
.svc-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#111c35,#27376a); }
.svc-login-card { background:#fff; border-radius:22px; padding:32px; width:min(390px,92vw); box-shadow:0 25px 80px rgba(0,0,0,.3); }
.svc-login-brand { font-weight:900; font-size:21px; text-align:center; margin-bottom:22px; }
.svc-login-brand span { color:var(--svc-primary); font-weight:600; }
.svc-login-card label { font-size:12px; font-weight:700; color:#5a6b7c; display:block; margin-bottom:5px; }
@media(max-width:900px){ .svc-side{position:fixed;right:-280px;transition:right .22s}.svc-side.open{right:0}.svc-menu-toggle{display:inline-grid;place-items:center}.svc-content{padding:18px}.svc-top{padding:11px 18px}.svc-user span{display:none} }

/* ───────────── مدیریت سرویس: تب‌ها + طراحِ اسکیما + فرمِ مقداردهی ───────────── */
.svc-tabs { display:flex; gap:4px; border-bottom:2px solid var(--svc-border); margin-bottom:18px; flex-wrap:wrap; }
.svc-tab { border:0; background:transparent; padding:10px 18px; margin-bottom:-2px; cursor:pointer; border-bottom:2px solid transparent; border-radius:9px 9px 0 0; font-weight:800; color:var(--svc-muted); font-size:13px; }
.svc-tab:hover { color:var(--svc-ink); }
.svc-tab.is-active { color:var(--svc-primary); border-bottom-color:var(--svc-primary); background:#fff; }
.svc-pane { display:none; }
.svc-pane.is-active { display:block; }

.svc-sub-tabs { display:flex; gap:3px; border-bottom:1px solid var(--svc-border); margin:4px 0 14px; flex-wrap:wrap; }
.svc-sub-tab { border:0; background:transparent; padding:8px 15px; margin-bottom:-1px; cursor:pointer; border-bottom:2px solid transparent; border-radius:7px 7px 0 0; font-weight:700; color:var(--svc-muted); font-size:12px; }
.svc-sub-tab.is-active { color:var(--svc-cyan); border-bottom-color:var(--svc-cyan); background:#fff; }
.svc-sub-pane { display:none; }
.svc-sub-pane.is-active { display:block; }

.svc-config-intro { background:#eef2ff; border:1px solid #d7ddff; border-radius:10px; color:#3d4a7a; padding:11px 14px; margin-bottom:14px; line-height:1.9; font-size:12px; }
.svc-config-intro code { background:#e2e6ff; padding:1px 5px; border-radius:4px; direction:ltr; display:inline-block; }
.svc-sec-title { font-weight:800; color:var(--svc-ink); font-size:12.5px; margin:14px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--svc-border); }
.svc-hint { font-size:11px; color:var(--svc-muted); }

/* گروه‌ها (چیپ) */
.svc-groups-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#groupChips { display:flex; gap:6px; flex-wrap:wrap; }
.svc-gchip { display:inline-flex; align-items:center; gap:6px; background:#eef1ff; border:1px solid #d7ddff; border-radius:16px; padding:3px 8px 3px 10px; font-size:12px; color:#3d4a7a; }
.svc-gchip input { border:0; background:transparent; font:inherit; font-size:12px; color:#3d4a7a; width:90px; text-align:center; }
.svc-gchip input:focus { outline:1px solid var(--svc-primary); border-radius:4px; background:#fff; }
.svc-gchip .gdel { color:#c15b52; cursor:pointer; font-weight:900; }

/* طراحِ اسکیما (جدول) */
.svc-schema-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.svc-schema-wrap { background:#fff; border:1px solid var(--svc-border); border-radius:12px; overflow:auto; }
.svc-schema-table { width:100%; border-collapse:collapse; font-size:12px; min-width:940px; }
.svc-schema-table thead th { background:#f7f9fc; color:#66758e; font-weight:800; text-align:right; padding:9px 7px; border-bottom:1px solid var(--svc-border); white-space:nowrap; }
.svc-schema-table thead th .req { color:#d9534f; }
.svc-schema-table td { padding:6px 7px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
.svc-schema-table tbody tr:last-child td { border-bottom:0; }
.svc-schema-table .form-control,.svc-schema-table .form-select { height:33px; min-height:33px; padding:4px 7px; font-size:12px; }
.svc-schema-table input[dir=ltr] { direction:ltr; text-align:left; }
.svc-schema-table .sf-opts:disabled { background:#f2f5f7; }
.svc-row-del { color:#d9534f; background:transparent; border:0; cursor:pointer; font-weight:900; }
.svc-schema-empty { padding:22px 14px; text-align:center; color:var(--svc-muted); font-size:12px; }

/* فرمِ مقداردهی */
.svc-vform { padding:2px 0 8px; }
.svc-vgrouptabs { display:flex; flex-wrap:wrap; gap:3px; border-bottom:1px solid var(--svc-border); margin-bottom:8px; }
.svc-vgrouptab { border:0; background:transparent; padding:8px 16px; margin-bottom:-1px; cursor:pointer; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; font-weight:700; color:var(--svc-muted); font-size:12px; }
.svc-vgrouptab.is-active { color:var(--svc-primary); border-bottom-color:var(--svc-primary); background:#fff; }
.svc-vgroup { display:none; }
.svc-vgroup.is-active { display:block; }
.svc-vrow { display:block; padding:12px 0; border-bottom:1px solid #eef1f6; }
.svc-vrow:last-child { border-bottom:0; }
.svc-vrow.adv { display:none; }
.svc-vform.show-adv .svc-vgroup.is-active .svc-vrow.adv { display:block; }
.svc-vlabel { display:block; color:var(--svc-ink); font-weight:800; font-size:13px; margin-bottom:6px; }
.svc-vlabel .req { color:#d9534f; margin-right:3px; }
.svc-vlabel .adv-tag { display:inline-block; font-size:9px; background:#eef1f6; color:#8a9aa6; border-radius:3px; padding:1px 5px; margin-left:6px; }
.svc-vrow.readonly-row .svc-vfield input,.svc-vrow.readonly-row .svc-vfield select,.svc-vrow.readonly-row .svc-vfield textarea { background:#f6f8fa; color:#9db0bd; cursor:not-allowed; }
.svc-vlabel .svc-key { display:block; direction:ltr; text-align:left; font-family:Consolas,monospace; font-size:10.5px; color:#9db0bd; font-weight:400; margin-top:2px; }
.svc-vfield input[dir=ltr],.svc-vfield textarea[dir=ltr],.svc-vfield input[type=number],.svc-vfield input[type=url] { direction:ltr; text-align:left; }
.svc-vfield textarea.form-control { font-family:Consolas,monospace; font-size:11.5px; line-height:1.6; }
.svc-vfield .help-block { margin:6px 0 0; font-size:11px; color:var(--svc-muted); }
.svc-vfield .svc-secret-state { color:#138461; font-size:11px; }
.svc-adv-toggle { display:block; margin:12px 0 2px; font-size:11.5px; color:var(--svc-muted); cursor:pointer; user-select:none; }
.svc-adv-toggle input { vertical-align:-1px; margin-left:5px; }

/* ───────────── گزارش‌گیری: فیلتر، متریک، مودالِ جزئیات، پروفایل ───────────── */
.svc-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:linear-gradient(180deg,#f7f9ff,#fff); border:1px solid var(--svc-border); border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.svc-filters .fg { display:flex; flex-direction:column; gap:4px; }
.svc-filters label { font-size:10.5px; font-weight:800; color:var(--svc-muted); }
.svc-filters .form-control, .svc-filters .form-select { min-height:36px; font-size:12.5px; }
.svc-filters .btn { min-height:36px; }

.svc-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.svc-metric { background:#fff; border:1px solid var(--svc-border); border-radius:14px; padding:14px 15px; position:relative; overflow:hidden; box-shadow:var(--svc-shadow); }
.svc-metric .mi { position:absolute; left:-8px; top:-10px; font-size:44px; opacity:.06; }
.svc-metric .mv { font-size:20px; font-weight:900; color:var(--svc-ink); direction:ltr; text-align:right; }
.svc-metric .ml { font-size:11px; color:var(--svc-muted); margin-top:3px; }
.svc-metric.accent .mv { color:var(--svc-primary); }
.svc-metric.good .mv { color:#138461; }
.svc-metric.bad .mv { color:#c8324b; }

.svc-cellsub { display:block; font-size:10.5px; color:var(--svc-muted); direction:ltr; text-align:right; margin-top:2px; }
.svc-balance-cell { min-width:170px; direction:ltr; text-align:left; font-variant-numeric:tabular-nums; }
.svc-balance-cell span { display:block; padding:2px 0; white-space:nowrap; }
.svc-link { color:var(--svc-primary); text-decoration:none; font-weight:700; cursor:pointer; }
.svc-link:hover { text-decoration:underline; }

.svc-detail-sec { margin-bottom:16px; }
.svc-detail-sec > h6 { font-size:12px; font-weight:900; color:var(--svc-primary); margin:0 0 8px; padding-bottom:5px; border-bottom:2px solid #eef1ff; display:flex; align-items:center; gap:6px; }
.svc-kv { display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:1px; background:var(--svc-border); border:1px solid var(--svc-border); border-radius:10px; overflow:hidden; }
.svc-kv > div { background:#fff; padding:8px 11px; font-size:12px; }
.svc-kv > .k { color:var(--svc-muted); font-weight:700; }
.svc-kv > .v { direction:ltr; text-align:left; word-break:break-word; white-space:pre-wrap; font-family:Consolas,monospace; font-size:11.5px; }
.svc-kv > .v.fa { direction:rtl; text-align:right; font-family:inherit; font-size:12px; }
.svc-kv .sub { grid-column:1/-1; background:#f7f9fc; color:var(--svc-primary); font-weight:800; font-size:11px; padding:6px 11px; }
.svc-detail-empty { color:var(--svc-muted); font-size:12px; padding:6px 2px; }

/* هدرِ صفحه‌های پروفایل */
.svc-hero { border-radius:18px; padding:20px 22px; color:#fff; margin-bottom:18px; position:relative; overflow:hidden; background:linear-gradient(120deg,#4f4fd6 0%,#6a58df 45%,#19b8c8 100%); box-shadow:0 14px 34px -14px rgba(79,79,214,.5); }
.svc-hero::after { content:""; position:absolute; left:-40px; top:-60px; width:210px; height:210px; border-radius:50%; background:rgba(255,255,255,.1); }
.svc-hero h4 { margin:0; font-weight:900; font-size:18px; position:relative; z-index:1; }
.svc-hero .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative; z-index:1; }
.svc-hero .chip { background:rgba(255,255,255,.16); border-radius:10px; padding:6px 11px; font-size:11.5px; }
.svc-hero .chip b { display:block; font-size:14px; font-weight:900; direction:ltr; margin-top:2px; }

/* مودالِ «تنظیمات متغیرها» */
.svc-vars-modal .modal-content { border-radius:20px; overflow:hidden; }
.svc-vars-modal .svc-vars-head { background:linear-gradient(135deg,var(--svc-primary),var(--svc-cyan)); color:#fff; border:0; padding:16px 22px; align-items:flex-start; }
.svc-vars-modal .svc-vars-head .modal-title { color:#fff; font-size:15px; }
.svc-vars-modal .modal-body { background:#f7f9fd; padding:20px 22px; }
.svc-vars-modal .modal-footer { border-top:1px solid var(--svc-border); }
@media (min-width:1200px){ .svc-vars-modal .modal-xl { max-width:1080px; } }