:root{font-family:Tahoma,Arial,sans-serif;color:#19333d;background:#f3f6f7;line-height:1.8}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #d5e0e3;border-radius:9px;background:white;color:#174c55;padding:8px 16px}button:hover{background:#e5f4f2}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #24a699}aside{width:230px;background:#103d47;color:#d9eeee;padding:32px 22px;position:fixed;right:0;top:0;height:100vh}.brand{font-size:30px;font-weight:bold;color:#55cbb6}nav{display:grid;gap:12px;margin:40px 0}nav button{text-align:right;background:transparent;color:#d9eeee;border:0}nav button.active{background:#215561;color:white}aside small{display:block;margin-top:70px}#logout{margin-top:15px}main{margin-right:230px;padding:35px 4vw}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1,h2,p{margin-top:0}h1{font-size:27px;margin-bottom:0}small{color:#69828b}aside small{color:#a9c4cc}.notice{background:#fff3d7;border:1px solid #ead29b;padding:12px 18px;border-radius:10px;margin-bottom:24px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card,.panel{background:white;border:1px solid #e0e8eb;border-radius:15px;padding:24px}.card strong{display:block;font-size:34px;color:#106a68}.panel{margin-top:24px}.toolbar{display:flex;gap:15px;margin-bottom:20px;align-items:center}.toolbar input{flex:1}.primary,#save,#login-form button{background:#147a72;color:white;border:0}input,select,textarea{width:100%;border:1px solid #cad8dc;border-radius:8px;padding:9px;background:white;color:#19333d}input[type=date],input[type=email]{direction:ltr}label{display:block;margin-bottom:14px}table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:16px 10px;text-align:right;border-bottom:1px solid #e7edef}th{color:#6a828b;font-weight:normal}.scroll{overflow:auto}.badge{display:inline-block;padding:3px 10px;border-radius:20px;background:#ecf2f4;font-size:12px;white-space:nowrap}.good{background:#e1f4ec;color:#186c51}.warn{background:#fff3d8;color:#8a5b12}.muted{color:#71858e;font-size:13px}.empty{padding:32px;text-align:center;color:#71858e}dialog{border:0;border-radius:16px;width:min(650px,94vw);max-height:90vh;padding:28px;color:#19333d}dialog::backdrop{background:#102a39a6}.dialog-head{display:flex;justify-content:space-between;align-items:center}#fields{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.wide{grid-column:1/-1}textarea{min-height:100px}.login{max-width:390px;margin:12vh auto;background:white;border:1px solid #dce5e8;border-radius:18px;padding:35px}.login button{width:100%}#message,#form-error,#login-error{color:#b73b3b}pre{white-space:pre-wrap;font:inherit;overflow-wrap:anywhere}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detail-grid p{margin-bottom:6px} @media(max-width:950px){.cards{grid-template-columns:1fr 1fr}aside{width:180px}main{margin-right:180px;padding:25px}}@media(max-width:650px){aside{position:static;width:100%;height:auto;padding:15px}aside p,aside small{display:none}nav{display:flex;overflow:auto;margin:10px 0;gap:2px}nav button{white-space:nowrap;padding:8px}#logout{position:absolute;left:15px;top:8px}main{margin:0;padding:18px}.cards{gap:10px}.card{padding:16px}.card strong{font-size:28px}.panel{padding:16px}#fields,.detail-grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.toolbar input{min-width:100%}h1{font-size:23px}}
:root{--teal:#103d47;--accent:#147a72;--ink:#17343d;--muted:#536c76;--border:#d6e2e6}
@font-face{font-family:Vazirmatn;src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
html:root{font-family:Vazirmatn,Tahoma,sans-serif;font-size:15px;line-height:1.85;color:var(--ink);background:#f2f6f7}
[hidden]{display:none!important}body input,body button,body select,body textarea{font-family:inherit}body h1{font-size:28px;font-weight:700}body h2{font-size:20px;line-height:1.7;margin-bottom:12px}body h3{font-size:19px;margin:4px 0 0}body small,.muted{color:var(--muted);font-size:13px}body button{min-height:44px;font-size:14px}body main{padding:30px 32px;max-width:1800px}body aside{padding:28px 22px}body nav{margin:26px 0;gap:7px}body aside small{margin-top:30px;color:#bfdae0}body nav button{font-size:15px;padding:12px 16px}body .brand{font-size:32px;letter-spacing:1px}body .notice{font-size:13px;background:#fff8e7;line-height:1.9}body .card strong{font-size:40px;line-height:1.45;margin-top:6px;font-variant-numeric:tabular-nums;color:#12655e}body .card{padding:20px 22px;border-color:var(--border)}body .panel{border-color:var(--border);padding:24px}body .badge{font-size:12px;font-weight:700;line-height:1.8;padding:4px 10px}body .warn{color:#785010;background:#fff0cd}body .neutral{color:#365661;background:#e9f0f3}body .cards{gap:16px}body input,body select,body textarea{font-size:15px;min-height:46px}body th{color:#4b6670}body td{font-size:14px}body .scroll{max-width:100%}.header-actions{display:flex;gap:10px}#pwa-status{font-size:12px;margin:-8px 0 20px}.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;background:var(--teal);border-radius:16px;padding:26px 30px;margin-bottom:22px;color:#fff}.hero h2{font-size:24px;margin:8px 0}.hero p{color:#cce1e5;font-size:14px;margin:0;max-width:650px}.hero small{color:#71d9c4;font-size:11px;letter-spacing:2px}.hero-tag{color:#e2f2f3;background:#235661;border:1px solid #4c7781;border-radius:20px;font-size:12px;padding:6px 12px;white-space:nowrap}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 14px}.section-title h2{margin:0}.connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.connection-card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:22px;min-width:0}.connection-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.connection-head small{font-size:11px}.monitor-label{color:#405f6a;background:#edf3f5;padding:8px 12px;font-size:12px;border-radius:8px;margin:16px 0}.monitor-label span{float:left}.connection-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:16px 0}.connection-specs dt{font-size:12px;color:var(--muted)}.connection-specs dd{margin:3px 0 0;font-size:14px;overflow-wrap:anywhere;line-height:1.7}.connection-specs dd[dir=ltr]{text-align:right;font-variant-numeric:tabular-nums}.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f6f9fa;border:1px solid #e4edef;padding:14px;border-radius:10px}.telemetry small{font-size:11px}.telemetry strong{display:block;font-size:14px;font-weight:400;overflow-wrap:anywhere;text-align:right}.telemetry strong small{color:#71858e}.connection-foot{color:#566d76;font-size:11px;margin:14px 0 0;line-height:1.9}.dashboard-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.renewal-row{display:flex;align-items:center;gap:15px;border-top:1px solid #e6eef0;padding:14px 0;font-size:14px}.renewal-row div{flex:1}.renewal-row small{display:block;font-size:11px}.renewal-row strong{font-size:13px}.alerts p{border-right:3px solid #d7b65f;padding-right:12px;font-size:13px;margin-top:18px}.alerts p.muted{border:0;padding:0}.offline-page{margin:12vh auto!important;width:min(500px,92vw);background:white;border:1px solid var(--border);border-radius:18px;padding:32px!important;text-align:center}.offline-page h1{font-size:23px}.offline-page img{border-radius:16px;margin-bottom:20px}.button-link{display:inline-block;padding:10px 24px;border-radius:8px;text-decoration:none;color:white}
@media(min-width:1280px){.connection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1150px){.connection-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.dashboard-bottom{grid-template-columns:1fr}}
@media(max-width:650px){body aside{padding:16px}body nav{margin:12px 0 0;gap:3px}body nav button{font-size:13px;padding:8px 12px}body main{padding:18px 14px}body header{gap:10px;align-items:flex-start}body h1{font-size:23px}body #logout{left:15px;top:10px}body .brand{font-size:28px}.header-actions{flex-direction:column;gap:6px}.header-actions button{font-size:12px;padding:6px 12px}.hero{padding:22px}.hero h2{font-size:22px}.hero p{font-size:13px}.hero-tag{font-size:11px}.section-title{align-items:flex-start;flex-direction:column;gap:4px}.connection-card{padding:18px}.connection-specs{gap:14px 10px}.connection-head h3{font-size:19px}.connection-grid{gap:14px}.monitor-label{font-size:11px}.monitor-label span{float:none;display:block}body .cards{gap:10px}body .card{padding:16px}body .card strong{font-size:36px}body .card small{font-size:12px}body .panel{padding:18px}.renewal-row{gap:8px;font-size:12px}.renewal-row strong{font-size:11px}body dialog{padding:22px}body #fields{grid-template-columns:1fr}.offline-page{margin:8vh auto!important}}
@media(max-width:650px){body nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:5px;margin-top:16px}body nav button{text-align:center;padding:8px 6px;white-space:normal}}
/* Dialogs use one scroll container; header and footer stay in the grid. */
body #dialog{padding:0;inline-size:min(720px,calc(100% - 32px));max-inline-size:calc(100% - 32px);block-size:min(850px,calc(var(--dialog-viewport-height,100dvh) - 48px));max-block-size:calc(var(--dialog-viewport-height,100dvh) - 48px);overflow:hidden;margin:auto;border-radius:16px}
#edit-form{block-size:100%;min-block-size:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-inline-size:0}
#dialog .dialog-head{padding:16px 22px;border-bottom:1px solid var(--border);background:#fff;gap:12px;min-inline-size:0}
#dialog .dialog-head h2{margin:0;min-inline-size:0;overflow-wrap:anywhere;font-size:20px;line-height:1.6}
#dialog .dialog-head button{flex-shrink:0}
#dialog-body{overflow-y:auto;overflow-x:hidden;min-block-size:0;min-inline-size:0;padding:22px;overscroll-behavior:contain;scroll-padding-block:16px;-webkit-overflow-scrolling:touch}
#dialog .dialog-footer{display:flex;gap:12px;flex-wrap:wrap;padding:14px 22px max(14px,env(safe-area-inset-bottom));background:white;border-top:1px solid var(--border)}
#dialog .dialog-footer button{flex:1;min-inline-size:0}
body #fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#fields>*{min-inline-size:0;max-inline-size:100%}
#fields input,#fields select,#fields textarea{min-inline-size:0;max-inline-size:100%;font-size:16px}
#fields textarea{resize:vertical}
#fields .connection-grid{grid-template-columns:1fr}
#fields pre,#fields p,#fields h3{overflow-wrap:anywhere;word-break:normal}
body:has(dialog[open]){overflow:hidden}
#nav-drawer{margin:0 0 0 auto;inset:0;inline-size:min(85vw,320px);max-inline-size:100%;block-size:100dvh;max-block-size:100dvh;border-radius:0;padding:22px;background:#103d47;color:#fff;overflow-y:auto}
#nav-drawer::backdrop{background:#0a2636b0}
.drawer-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.drawer-head h2{margin:0;color:white}
body #nav-drawer nav{display:grid;grid-template-columns:1fr;margin:26px 0;gap:8px}
body #nav-drawer nav button{background:transparent;color:#e6f4f7;text-align:right;padding:12px 16px;white-space:normal}
body #nav-drawer nav button.active{background:#215561}
#open-menu{display:none}
main,#content,.panel,.toolbar,.connection-head,.connection-head>div,.connection-specs>div,.telemetry>div,.dashboard-bottom>*,.renewal-row>div{min-inline-size:0}
.badge{white-space:normal;overflow-wrap:anywhere}
.hero-tag{white-space:normal}
td,th{overflow-wrap:anywhere}
body .scroll{overflow-x:auto}
@media(max-width:768px){
 body aside{display:none}
 body main{margin:0;inline-size:100%;padding:18px 14px}
 #open-menu{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;flex-shrink:0}
 body header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
 body h1{font-size:22px;overflow-wrap:anywhere}
 body header>div{min-inline-size:0}
 .header-actions{flex-direction:column}
 body #dialog{position:fixed;inset:auto 0 auto 0;top:var(--dialog-viewport-top,0px);margin:0;inline-size:100%;max-inline-size:100%;block-size:var(--dialog-viewport-height,100dvh);max-block-size:var(--dialog-viewport-height,100dvh);border-radius:0;border:0}
 #dialog .dialog-head{padding:max(12px,env(safe-area-inset-top)) 16px 12px}
 #dialog .dialog-head h2{font-size:18px}
 #dialog-body{padding:18px 16px}
 #dialog .dialog-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom));gap:10px}
 body #fields{grid-template-columns:minmax(0,1fr);gap:0}
 body .scroll{overflow:visible}
 .scroll table,.scroll tbody{display:block;inline-size:100%;max-inline-size:100%}
 .scroll thead{display:none}
 .scroll tr{display:block;border:1px solid var(--border);border-radius:12px;padding:12px;margin-block:12px;background:#fff;min-inline-size:0}
 .scroll td{display:block;padding:8px 0;border:0;min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;text-align:right}
 .scroll td::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);direction:rtl;margin-bottom:4px}
 .scroll td[data-label="عملیات"]{display:flex;flex-wrap:wrap;gap:8px}
 .scroll td[data-label="عملیات"]::before{display:none}
 .scroll td[data-label="عملیات"] button{flex:1;min-inline-size:0}
 .scroll td.empty::before{display:none}
 .login{inline-size:calc(100% - 28px);padding:26px;margin:8vh auto}
 .renewal-row{flex-wrap:wrap}
 .renewal-row>div{flex-basis:45%}
 .connection-specs,.telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:350px){body main{padding:14px 10px}body h1{font-size:19px}body header{gap:6px}#open-menu{font-size:12px;padding:6px 9px}.header-actions button{padding:6px 9px}.connection-specs,.telemetry{grid-template-columns:minmax(0,1fr)}.card small{overflow-wrap:anywhere}}

/* Account login and bidi-safe technical fields */
body .login-layout{display:grid;grid-template-columns:1fr 1fr;inline-size:min(920px,calc(100% - 40px));max-inline-size:920px;padding:0;overflow:hidden;margin:8vh auto;border-radius:24px;text-align:right;box-shadow:0 24px 72px #103d471c}
.login-story{background:linear-gradient(145deg,#103d47,#0b5558);color:#eaf7f5;padding:48px 42px;display:flex;flex-direction:column;justify-content:center;gap:20px;min-inline-size:0}
.login-story .brand{color:#62d6c1}.login-story h1{font-size:34px;line-height:1.6;margin:0;color:#fff}.login-story p{color:#c4e3df;line-height:1.9}.login-signal{font-size:13px;display:flex;gap:10px;align-items:center}.login-signal span{inline-size:8px;block-size:8px;background:#62d6c1;border-radius:50%}
.login-box{padding:44px 38px;min-inline-size:0;background:#fff}.login-box h2{font-size:24px;margin:18px 0 6px}.login-mark{inline-size:48px;block-size:48px;background:#e2f4ef;border-radius:14px;color:#11776f;display:grid;place-items:center;font-size:30px}
.login-box input{font-size:16px;inline-size:100%;min-inline-size:0}.login-box label{font-size:14px;margin-top:20px}.login-box button{inline-size:100%;margin-top:12px}.login-box small{display:block;line-height:1.9}.login-box #login-error{min-block-size:24px;font-size:13px}.login-box input:focus{outline:3px solid #2bafa72b;border-color:#11847b}
.connection-specs .technical-value,body .technical-value{direction:ltr;unicode-bidi:isolate;text-align:right;display:block;inline-size:100%;min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;word-break:normal}
.connection-specs dt{direction:rtl;text-align:right}.connection-specs dd{margin-inline:0}.connection-specs>div{display:flex;flex-direction:column;align-items:stretch}.telemetry strong{overflow-wrap:anywhere;text-align:right;unicode-bidi:isolate}
body td.technical-value{display:table-cell;inline-size:auto}
@media(max-width:768px){body td.technical-value{display:block;inline-size:100%}}
@media(max-width:768px){body .login-layout{grid-template-columns:minmax(0,1fr);inline-size:calc(100% - 28px);margin:20px auto}.login-story{padding:24px;gap:10px}.login-story h1{font-size:25px}.login-story h1 br{display:none}.login-story p{margin:0}.login-box{padding:26px 24px}.login-box h2{font-size:22px}.login-signal{font-size:12px}}
@media(max-width:350px){.login-story,.login-box{padding:22px 18px}.login-story h1{font-size:22px}.login-box h2{font-size:20px}}

.login-story small{color:#c4e3df}.login-story .login-signal{color:#eaf7f5}