:root{--admin-navy:#082f4c;--admin-navy-2:#0b3b5d;--admin-blue:#0d93cf;--admin-cyan:#11b6e8;--admin-orange:#ff8a26;--admin-bg:#f3f7fb;--admin-text:#172b3a;--admin-muted:#6c8191;--admin-line:#e2ebf1;--admin-shadow:0 12px 36px rgba(8,47,76,.08)}
.manager-layout,.manager-layout *{box-sizing:border-box}
body:has(.manager-layout){background:var(--admin-bg);overflow-x:hidden}
body:has(.manager-layout)>header,body:has(.manager-layout)>.footer{display:none!important}
body:has(.manager-layout)>main.checkout-shell{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.manager-layout{display:grid!important;grid-template-columns:270px minmax(0,1fr)!important;gap:0!important;width:100%!important;max-width:none!important;min-height:100vh;margin:0!important;padding:0!important;background:var(--admin-bg)}
.manager-nav{position:sticky!important;top:0!important;z-index:30;height:100vh!important;min-height:100vh!important;display:flex!important;flex-direction:column!important;gap:6px!important;padding:24px 18px 18px!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,var(--admin-navy) 0%,#062840 100%)!important;box-shadow:10px 0 32px rgba(8,47,76,.08)!important;overflow-y:auto}
.manager-brand{display:flex!important;align-items:center!important;gap:13px!important;margin:0 3px 24px!important;padding:0 3px 22px!important;border-bottom:1px solid rgba(255,255,255,.11)!important;color:#fff!important}
.manager-brand img{width:48px!important;height:48px!important;padding:3px!important;border-radius:14px!important;background:#fff!important;object-fit:contain!important;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.manager-brand b{display:block;font-size:17px;line-height:1.2;letter-spacing:.02em;color:#fff!important}.manager-brand small{display:block;margin-top:4px;font-size:10px;line-height:1.35;color:#a9c4d5!important;letter-spacing:.04em}
.manager-nav>a{position:relative;display:flex!important;align-items:center!important;gap:12px!important;min-height:45px!important;margin:0!important;padding:10px 12px!important;border:1px solid transparent!important;border-radius:11px!important;color:#c7d9e4!important;font-size:13px!important;font-weight:650!important;line-height:1.2!important;text-decoration:none!important;transition:background .18s ease,color .18s ease,transform .18s ease!important}
.manager-nav>a:hover{color:#fff!important;background:rgba(255,255,255,.08)!important;transform:translateX(2px)}
.manager-nav>a.active{color:#fff!important;background:linear-gradient(135deg,#0795d2,#0bb3dd)!important;box-shadow:0 9px 22px rgba(3,157,210,.25)!important}
.manager-nav>a.active:before{content:"";position:absolute;left:-18px;top:12px;width:4px;height:21px;border-radius:0 6px 6px 0;background:var(--admin-orange)}
.manager-nav .nav-icon{width:20px!important;height:20px!important;flex:0 0 20px!important;display:grid!important;place-items:center!important}.manager-nav .nav-icon svg{display:block;width:20px!important;height:20px!important}.manager-nav>a.logout{margin-top:auto!important;color:#ffcab0!important;border-top:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;padding-top:18px!important}
.manager-main{min-width:0!important;width:100%!important;max-width:1500px!important;margin:0 auto!important;padding:26px 32px 48px!important}
.manager-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;min-height:80px!important;margin:0 0 24px!important;padding:15px 18px!important;border:1px solid rgba(226,235,241,.9)!important;border-radius:16px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 8px 28px rgba(8,47,76,.055)!important;backdrop-filter:blur(12px)}
.manager-heading{min-width:0}.manager-top .eyebrow{margin:0 0 3px!important;color:var(--admin-blue)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.13em!important;text-transform:uppercase}.manager-top h1{margin:0!important;color:var(--admin-text)!important;font-size:clamp(21px,2vw,28px)!important;line-height:1.2!important;letter-spacing:-.025em!important}
.manager-menu-toggle{display:none;width:42px;height:42px;flex:0 0 42px;padding:10px;border:1px solid var(--admin-line);border-radius:11px;background:#fff;color:var(--admin-navy);cursor:pointer}.manager-menu-toggle svg{width:100%;height:100%}.manager-backdrop{display:none;border:0}
.sync-chip{display:inline-flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;padding:9px 12px!important;border:1px solid #e2eaf0!important;border-radius:999px!important;background:#f8fafc!important;color:#667b89!important;font-size:11px!important;font-weight:750!important}.sync-chip i{width:8px!important;height:8px!important;border-radius:50%!important;background:#9badb8!important;box-shadow:0 0 0 4px rgba(155,173,184,.13)!important}.sync-chip.online i{background:#1bbf82!important;box-shadow:0 0 0 4px rgba(27,191,130,.13)!important}
.metric-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0 0 18px!important}.metric-grid article{position:relative!important;min-width:0!important;min-height:145px!important;margin:0!important;padding:22px!important;border:1px solid var(--admin-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--admin-shadow)!important;overflow:hidden}.metric-grid article:after{content:"";position:absolute;right:-30px;top:-35px;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,rgba(13,147,207,.12),rgba(17,182,232,.025))}.metric-grid article:nth-child(3):after,.metric-grid article:nth-child(4):after{background:linear-gradient(135deg,rgba(255,138,38,.13),rgba(255,138,38,.02))}.metric-grid small{display:block!important;margin-bottom:14px!important;color:var(--admin-muted)!important;font-size:11px!important;font-weight:750!important;text-transform:uppercase!important;letter-spacing:.055em!important}.metric-grid b{position:relative;z-index:1;display:block!important;margin:0 0 8px!important;color:var(--admin-navy)!important;font-size:34px!important;line-height:1!important;letter-spacing:-.04em!important}.metric-grid .metric-small{font-size:21px!important;line-height:1.3!important}.metric-grid span{display:block!important;color:#8294a0!important;font-size:12px!important}
.panel-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.manager-card{min-width:0!important;margin:0 0 18px!important;padding:24px!important;border:1px solid var(--admin-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--admin-shadow)!important}.panel-grid>.manager-card{margin:0!important}.manager-card h2{margin:0 0 6px!important;color:var(--admin-text)!important;font-size:18px!important;letter-spacing:-.015em!important}.manager-card p{color:var(--admin-muted)}
.detail-list{margin-top:18px!important}.detail-list>div,.mini-row{min-width:0;padding:12px 0!important;border-bottom:1px solid #edf2f5!important}.detail-list>div:last-child,.mini-row:last-child{border-bottom:0!important}.detail-list span,.mini-row small{color:var(--admin-muted)!important}.detail-list b{min-width:0;color:var(--admin-text)!important;overflow-wrap:anywhere}.mini-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}.mini-row b,.mini-row small{display:block!important}.mini-row>span{flex:0 0 auto;color:var(--admin-navy);font-size:12px;font-weight:700}
.card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin-bottom:18px!important}.card-head p{margin:5px 0 0!important;font-size:13px!important}.card-head input[type=search]{width:min(100%,320px)!important;min-height:42px!important;margin:0!important;padding:10px 14px!important;border:1px solid #dce6ec!important;border-radius:11px!important;background:#f8fafc!important}
.table-wrap{width:100%!important;overflow-x:auto!important;border:1px solid #e5edf2!important;border-radius:13px!important}.table-wrap table{width:100%!important;min-width:720px!important;margin:0!important;border-collapse:collapse!important}.table-wrap th{padding:13px 15px!important;background:#f6f9fb!important;color:#6c8191!important;font-size:10px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important}.table-wrap td{padding:14px 15px!important;border-top:1px solid #edf2f5!important;color:#304653!important;font-size:12px!important}.table-wrap tbody tr:hover{background:#f9fcfe!important}.table-wrap td small{display:block;margin-top:3px;color:#8ca0ad}
.manager-card label{color:#425967!important;font-size:12px!important;font-weight:700!important}.manager-card input,.manager-card select,.manager-card textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid #dce6ec;border-radius:10px;background:#fbfcfd;color:var(--admin-text);font:inherit}.manager-card input:focus,.manager-card select:focus,.manager-card textarea:focus{outline:3px solid rgba(13,147,207,.11);border-color:#55afd3}.field-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.form-panel form{display:grid;gap:14px;margin-top:20px}.package-settings{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.package-settings fieldset{min-width:0;padding:16px;border:1px solid var(--admin-line);border-radius:13px}.package-settings legend{padding:0 6px;color:var(--admin-navy);font-weight:800}.btn{border-radius:10px!important}
.notice{margin:0 0 18px!important;border-radius:12px!important}.customer-detail .detail-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.customer-detail .detail-grid>div{padding:15px!important;border:1px solid var(--admin-line)!important;border-radius:12px!important;background:#f9fbfc!important}.customer-detail .detail-grid small,.customer-detail .detail-grid strong{display:block}.customer-detail .detail-grid small{margin-bottom:6px;color:var(--admin-muted)}
@media(max-width:1120px){.manager-layout{grid-template-columns:235px minmax(0,1fr)!important}.manager-main{padding:24px!important}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.package-settings{grid-template-columns:1fr!important}}
@media(max-width:820px){body.manager-menu-open{overflow:hidden}.manager-layout{display:block!important;min-height:100dvh!important}.manager-nav{position:fixed!important;inset:0 auto 0 0!important;width:min(84vw,290px)!important;height:100dvh!important;min-height:0!important;transform:translateX(-105%);transition:transform .24s ease!important;box-shadow:18px 0 45px rgba(3,30,48,.3)!important}.manager-layout.nav-open .manager-nav,.manager-layout:has(.manager-menu-toggle:focus) .manager-nav{transform:translateX(0)}.manager-backdrop{position:fixed;inset:0;z-index:20;width:100%;height:100%;background:rgba(3,25,40,.48);backdrop-filter:blur(2px);cursor:pointer}.manager-layout.nav-open .manager-backdrop,.manager-layout:has(.manager-menu-toggle:focus) .manager-backdrop{display:block}.manager-main{max-width:none!important;padding:14px!important}.manager-top{position:sticky!important;top:0!important;z-index:15!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;min-height:68px!important;margin:0 0 14px!important;padding:11px!important;border-radius:14px!important}.manager-menu-toggle{display:grid!important;place-items:center!important}.manager-top .eyebrow{font-size:8px!important}.manager-top h1{font-size:19px!important}.sync-chip{max-width:124px!important;padding:8px 9px!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.panel-grid{grid-template-columns:1fr!important}.manager-card{padding:18px!important;border-radius:15px!important}.customer-detail .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.metric-grid article{min-height:122px!important;padding:17px!important;border-radius:14px!important}.metric-grid small{min-height:27px;margin-bottom:8px!important;font-size:9px!important}.metric-grid b{font-size:28px!important}.metric-grid span{font-size:10px!important}.card-head{align-items:stretch!important;flex-direction:column!important}.card-head input[type=search]{width:100%!important}.field-row,.customer-detail .detail-grid{grid-template-columns:1fr!important}.manager-card{padding:16px!important}.mini-row{align-items:flex-start!important;flex-direction:column!important;gap:5px!important}}
@media(max-width:370px){.metric-grid{grid-template-columns:1fr!important}.sync-chip{display:none!important}.manager-top{grid-template-columns:42px minmax(0,1fr)!important}}

/* Final containment layer: keeps legacy theme widths from escaping the mobile viewport. */
.manager-layout,.manager-layout *{box-sizing:border-box!important}
.manager-card{width:100%!important;max-width:100%!important;min-width:0!important}
.detail-list{width:100%!important;max-width:100%!important}.detail-list>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important}.detail-list b{min-width:0!important;text-align:right!important;overflow-wrap:anywhere!important}
@media(max-width:820px){.manager-layout{max-width:100vw!important;overflow-x:clip!important}.manager-main{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}.panel-grid{grid-template-columns:minmax(0,1fr)!important}}
/* MikroTik traffic monitor */
.refresh-panel{white-space:nowrap}.traffic-chart{display:grid;gap:14px;margin:4px 0 24px}.traffic-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:16px;align-items:center}.traffic-name{display:grid;gap:3px}.traffic-name b{font-size:.9rem}.traffic-name small{color:#718096;font-size:.75rem}.traffic-bars{height:24px;display:flex;align-items:center;gap:4px;padding:4px;border-radius:8px;background:#eef5fa;overflow:hidden}.traffic-bars i{height:6px;min-width:2px;border-radius:99px;transition:width .35s ease}.traffic-bars .rx{background:#168bd0}.traffic-bars .tx{background:#f28b28}@media(max-width:640px){.traffic-row{grid-template-columns:1fr;gap:7px}.traffic-bars{height:20px}.refresh-panel{font-size:.8rem;padding:.55rem .7rem}}

/* Desktop comfort: larger type and breathing room without changing the mobile layout. */
@media(min-width:821px){
  .manager-layout{grid-template-columns:288px minmax(0,1fr)!important}
  .manager-nav{padding:28px 20px 20px!important;gap:8px!important}
  .manager-brand{margin-bottom:28px!important;padding-bottom:24px!important}
  .manager-brand b{font-size:19px!important}.manager-brand small{font-size:11px!important}
  .manager-nav>a{min-height:50px!important;padding:12px 14px!important;font-size:14px!important}
  .manager-main{max-width:1640px!important;padding:32px 42px 56px!important}
  .manager-top{min-height:92px!important;margin-bottom:28px!important;padding:18px 22px!important;border-radius:18px!important}
  .manager-top .eyebrow{font-size:11px!important}.manager-top h1{font-size:clamp(26px,2vw,32px)!important}
  .sync-chip{padding:11px 15px!important;font-size:12px!important}
  .metric-grid{gap:20px!important;margin-bottom:22px!important}.metric-grid article{min-height:164px!important;padding:26px!important;border-radius:19px!important}
  .metric-grid small{margin-bottom:16px!important;font-size:12px!important}.metric-grid b{margin-bottom:10px!important;font-size:40px!important}.metric-grid span{font-size:14px!important}
  .panel-grid{gap:20px!important}.manager-card{margin-bottom:22px!important;padding:28px!important;border-radius:19px!important}
  .manager-card h2{font-size:21px!important}.manager-card p{font-size:15px!important}
  .detail-list>div,.mini-row{padding:14px 0!important;font-size:15px!important}.mini-row>span{font-size:13px!important}
  .card-head p{font-size:14px!important}.card-head input[type=search]{min-height:46px!important;font-size:14px!important}
  .table-wrap th{padding:15px 17px!important;font-size:11px!important}.table-wrap td{padding:16px 17px!important;font-size:14px!important}.table-wrap td small{font-size:12px!important}
  .manager-card label{font-size:14px!important}.manager-card input,.manager-card select,.manager-card textarea{padding:13px 15px!important;font-size:14px!important}
  .customer-detail .detail-grid>div{padding:17px!important}.customer-detail .detail-grid small{font-size:12px!important}.customer-detail .detail-grid strong{font-size:15px!important}
  .traffic-name b{font-size:1rem!important}.traffic-name small{font-size:.85rem!important}.traffic-bars{height:28px!important}
}