:root{font-family:Inter,Vazirmatn,sans-serif;color:#0f172a;background:#f3f6fb;line-height:1.45;font-weight:500}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at top right,rgba(15,118,110,.08),transparent 30%),#f3f6fb}button,input,select{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:#0f172a}.login-card{width:min(440px,100%);display:grid;gap:14px;padding:24px;border-radius:8px;background:#fff;border:1px solid #dbe3ef}.login-card h1,.login-card p{margin:0}.login-card label,.provision-form label{display:grid;gap:7px;color:#475569;font-size:13px;font-weight:700}.login-card input,.provision-form input,.provision-form select{width:100%;min-height:42px;border:1px solid #dbe3ef;border-radius:8px;padding:0 12px;background:#fff;color:#0f172a}.form-error{padding:10px 12px;border-radius:8px;background:#fee2e2;color:#b91c1c;font-weight:700}.shell.rtl{direction:rtl}.sidebar{background:#0f172a;color:#e2e8f0;padding:20px 16px;display:flex;flex-direction:column;gap:28px;border-inline-end:1px solid rgba(255,255,255,.08)}.brand,.nav-item,.topbar-actions,.metric-value-row,.panel-header,.mobile-protocols,.node-head,.node-meta,.mobile-card-header,.alert-row{display:flex;align-items:center}.brand{gap:10px;font-weight:700}.brand.big{color:#0f766e;font-size:18px}.nav{display:grid;gap:8px}.nav-item{gap:10px;padding:10px 12px;border-radius:8px;color:inherit;text-decoration:none;opacity:.86;width:100%;border:0;background:transparent;cursor:pointer;text-align:start}.nav-item.active{background:#60a5fa29;opacity:1}.main{padding:24px;display:grid;gap:20px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.topbar-copy{max-width:760px}.eyebrow{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#0f766e1f;color:#0f766e;font-size:12px;font-weight:700}.topbar h1,.hero-copy h2{margin:10px 0 0;font-size:30px;line-height:1.1}.topbar p,.panel-header p,.metric-label,.hero-copy p,.mobile-card-header p,.channel-card p,.alert-row p,.node-head p{margin:8px 0 0;color:#64748b}.topbar-actions{gap:12px;align-self:flex-start}.toggle,.primary,.icon-button,.mobile-button{border:0;border-radius:8px;min-height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.icon-button{min-width:42px;padding:0;justify-content:center;background:#fff;color:#0f172a;border:1px solid #dbe3ef}.mobile-menu{display:none}.toggle{background:#fff;color:#0f172a;border:1px solid #dbe3ef}.primary,.mobile-button{background:#0f766e;color:#fff}.loading-card,.metric-card,.panel,.mobile-preview,.hero-card,.mobile-card,.node-card,.channel-card{background:#fffffff5;border:1px solid #e2e8f0;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.loading-card{padding:14px 16px}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric-card{padding:16px}.metric-card.tone-positive .metric-delta{color:#0f766e}.metric-card.tone-warning .metric-delta{color:#b45309}.metric-value-row{justify-content:space-between;margin-top:18px;gap:12px}.metric-value{font-size:28px;font-weight:700}.metric-delta{font-weight:700}.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:20px}.hero-card,.mobile-card{padding:18px}.topology{margin-top:18px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;align-items:center}.topology-node,.topology-core,.topology-egress{min-height:92px;display:grid;place-items:center;border-radius:8px;border:1px solid #dbe3ef;background:#f8fafc}.topology-core{background:#ecfeff;border-color:#a5f3fc}.topology-egress{background:#f0fdf4;border-color:#bbf7d0}.topology strong{font-size:20px}.topology span{color:#64748b;font-size:13px}.topology-arrow{height:2px;background:linear-gradient(90deg,#cbd5e1,#0f766e)}.topology-arrow.long{grid-column:span 2}.mobile-card-header{justify-content:space-between;margin-bottom:14px}.mobile-preview{padding:18px;background:linear-gradient(180deg,#f8fafc,#eef6f8);display:grid;gap:14px}.mobile-top{font-weight:700;font-size:18px}.mobile-chip,.protocol-badge,.status,.mobile-protocols span{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:700}.mobile-chip{width:fit-content;min-height:30px;padding:0 12px;background:#dcfce7;color:#166534}.mobile-plan{font-size:24px;font-weight:700}.mobile-subtle{color:#64748b}.mobile-protocols{gap:8px;flex-wrap:wrap}.mobile-protocols span{min-height:32px;padding:0 12px;background:#e2e8f0;color:#475569}.mobile-protocols .selected{background:#0f766e;color:#fff}.board{display:grid;grid-template-columns:1.45fr .95fr;gap:20px}.stack,.alerts,.channel-list{display:grid;gap:16px}.panel{padding:18px}.panel.wide{min-width:0}.panel-header{justify-content:space-between;margin-bottom:14px;gap:16px}.panel-header h2,.mobile-card-header h2,.node-head h3,.channel-card h3{margin:0;font-size:18px}.panel-header h2{display:inline-flex;align-items:center;gap:8px}.provision-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.provision-form .primary{justify-content:center}.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.profile-actions .toggle:disabled,.provision-form .primary:disabled{opacity:.5;cursor:not-allowed}.issued-box{margin-top:16px;display:grid;gap:12px;padding:14px;border-radius:8px;border:1px solid #bbf7d0;background:#f0fdf4}.issued-box ol{margin:0;padding-inline-start:20px;color:#334155}.download-link{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:#0f766e;font-weight:800;text-decoration:none}.data-table{width:100%;border-collapse:collapse;font-size:14px}.table-wrap{width:100%;overflow-x:auto}.data-table th,.data-table td{text-align:start;padding:12px 10px;border-bottom:1px solid #eef2f7;vertical-align:middle}.data-table tbody tr{cursor:pointer}.data-table tbody tr:hover,.selected-row{background:#f0fdfa}.row-subtle{display:block;margin-top:4px;color:#94a3b8;font-size:12px}.data-table th{color:#64748b;font-weight:600}.protocol-badge{min-width:62px;min-height:28px;padding:0 10px}.method-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.connection-pill{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:28px;padding:0 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:800}.full-select{width:100%;min-height:42px;border:1px solid #dbe3ef;border-radius:8px;padding:0 12px;background:#fff;color:#0f172a}.selected-card,.app-preview,.empty-state{border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;padding:16px}.selected-card{display:grid;gap:16px}.selected-card strong,.selected-card span{display:block}.selected-card span{color:#64748b;font-size:13px}.detail-grid{display:grid;grid-template-columns:minmax(120px,.55fr) 1fr;gap:10px 14px;align-items:center}.detail-grid span{color:#64748b}.detail-grid b{color:#0f172a}.status-panel{padding:12px;border-radius:8px;background:#eef6f8;border:1px solid #dbeafe}.app-preview{display:grid;gap:12px;background:linear-gradient(180deg,#f8fafc,#eef6f8)}.app-preview h3,.app-preview p{margin:0}.backdrop{display:none}.protocol-ikev2{background:#dbeafe;color:#1d4ed8}.protocol-openvpn{background:#dcfce7;color:#166534}.protocol-awg{background:#ccfbf1;color:#0f766e}.muted{background:#e2e8f0;color:#475569}.channel-card{padding:16px}.channel-value{color:#0f766e;font-size:24px;font-weight:700}.alert-row{gap:12px;padding:14px;border-radius:8px;border:1px solid #e2e8f0}.alert-row strong{display:block}.severity-warning{background:#fffaf0;border-color:#fde68a;color:#92400e}.severity-info{background:#f8fafc;color:#334155}.node-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.node-card{padding:16px;display:grid;gap:14px}.node-head{justify-content:space-between;gap:12px}.node-meta{justify-content:space-between;gap:12px;color:#475569;font-size:13px;flex-wrap:wrap}.node-egress{padding:10px 12px;border-radius:8px;background:#f8fafc;color:#0f172a;font-size:13px}.node-warning{border-color:#bae6fd;background:linear-gradient(180deg,#ecfeffe6,#fffffff5)}.status{min-height:28px;padding:0 10px;text-transform:capitalize}.status-active{background:#dcfce7;color:#166534}.status-trial{background:#fef3c7;color:#a16207}.status-expired{background:#fee2e2;color:#b91c1c}.status-suspended{background:#e2e8f0;color:#475569}@media(max-width:1240px){.metrics-grid,.node-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-grid,.board{grid-template-columns:1fr}}@media(max-width:1040px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:30;width:min(82vw,300px);transform:translate(-105%);transition:transform .18s ease;display:flex;box-shadow:24px 0 60px #0f172a3d}.shell.rtl .sidebar{transform:translate(105%)}.sidebar.open,.shell.rtl .sidebar.open{transform:translate(0)}.mobile-menu{display:inline-flex;flex:0 0 auto}.backdrop{display:block;position:fixed;inset:0;z-index:20;border:0;background:#0f172a6b}}@media(max-width:720px){.main{padding:16px}.topbar{display:grid;grid-template-columns:auto 1fr;align-items:start}.topbar-actions{grid-column:1 / -1;width:100%;justify-content:space-between}.topbar h1,.hero-copy h2{font-size:24px}.metrics-grid,.node-grid{grid-template-columns:1fr}.topology{grid-template-columns:repeat(2,minmax(0,1fr))}.topology-arrow,.topology-arrow.long{display:none}.data-table{white-space:nowrap}.provision-form{grid-template-columns:1fr}.board{gap:16px}.panel{padding:14px}.detail-grid{grid-template-columns:1fr;gap:4px}}