:root{
  --ink:#071820;
  --orange:#E4572E;
  --paper:#F2F4F5;
  --line:#D8DEE1;
  --muted:#66757C;
  --white:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}
body{min-width:0}
a{color:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.sidebar{
  background:var(--ink);color:#fff;padding:28px 22px;
  position:sticky;top:0;height:100vh;overflow:auto;z-index:40
}
.brand{
  text-decoration:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:30px;min-width:0
}
.sidebar-logo{
  display:block !important;
  width:136px !important;
  max-width:136px !important;
  height:32px !important;
  max-height:32px !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 0 136px !important;
}
.brand b{font-size:10px;letter-spacing:.18em;color:var(--orange);white-space:nowrap}
.sidebar>nav{display:flex;flex-direction:column;gap:4px}
.sidebar nav a{
  text-decoration:none;padding:9px 11px;border-left:3px solid transparent;
  font-size:14px;color:#d9e0e3
}
.sidebar nav a:hover,.sidebar nav a.active{
  background:#ffffff0d;border-left-color:var(--orange);color:#fff
}
.nav-group{
  font-size:10px;letter-spacing:.16em;color:#829198;
  margin:18px 10px 6px;font-weight:900
}
.sidebar-user{
  margin-top:32px;padding-top:18px;border-top:1px solid #ffffff1c;
  display:flex;flex-direction:column;gap:5px
}
.sidebar-user small{color:#9aa7ad}
.link-btn{
  background:none;border:0;color:#fff;padding:0;text-align:left;
  margin-top:8px;cursor:pointer;text-decoration:underline
}
.mobile-nav,.mobile-footer-nav{display:none}

.main{min-width:0;padding:36px clamp(20px,4vw,58px)}
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;margin-bottom:28px
}
.topbar h1{
  margin:4px 0 0;font-size:clamp(32px,5vw,54px);
  line-height:.98;letter-spacing:-.05em
}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--orange)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-bottom:22px
}
.stat-card,.panel{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 24px #0718200a
}
.stat-card{padding:22px;min-width:0}
.stat-card span{font-size:12px;color:var(--muted);font-weight:800}
.stat-card strong{
  display:block;font-size:34px;line-height:1;margin:12px 0 8px;
  letter-spacing:-.04em;overflow-wrap:anywhere
}
.stat-card small{color:var(--muted)}
.panel{margin:20px 0;min-width:0}
.panel-head{padding:24px 26px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:4px 0 5px;font-size:22px}
.panel-head p{margin:6px 0;color:var(--muted);line-height:1.55}
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{
  text-align:left;padding:13px 14px;border-bottom:1px solid #e6eaec;
  vertical-align:top
}
thead th{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#66757c;background:#fafbfb
}
tbody tr:hover{background:#fafbfb}
.kv th{width:240px}
.muted{color:var(--muted)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;overflow-wrap:anywhere
}
.status{
  display:inline-block;padding:5px 8px;font-size:10px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;background:#eef2f3
}
.status.paid,.status.active,.status.healthy,.status.complete{
  background:#eaf4ee;color:#17673a
}
.status.payment_pending,.status.warning{background:#fff4d8;color:#7a5c00}
.status.offline,.status.payment_issue{background:#fde8e5;color:#8d2d1f}
.status.not-connected{background:#eef0f1;color:#66757c}
.btn-small{
  display:inline-block;text-decoration:none;padding:7px 10px;
  background:var(--ink);color:#fff;font-weight:800
}
.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}

.login-body{
  min-height:100vh;display:grid;place-items:center;
  background:var(--ink);padding:24px
}
.login-card{
  width:min(460px,100%);background:#fff;padding:34px;
  border-top:8px solid var(--orange)
}
.login-brand{color:var(--ink);margin-bottom:36px}
.login-logo{
  display:block !important;width:190px !important;max-width:72% !important;
  height:auto !important;object-fit:contain !important;object-position:left center
}
.login-card h1{font-size:46px;letter-spacing:-.05em;margin:8px 0}
.login-card p{color:var(--muted)}
label{display:block;font-size:12px;font-weight:900;margin-top:18px}
input{
  display:block;width:100%;margin-top:7px;padding:13px;
  border:1px solid #bdc7cc;font:inherit
}
.primary{
  width:100%;margin-top:22px;padding:14px;border:0;
  background:var(--orange);color:#fff;font-weight:900;cursor:pointer
}
.error-box{
  background:#fff1ee;border:1px solid #f1b5a8;padding:12px;
  margin:16px 0;color:#8b2b18
}

@media(max-width:1100px){
  .app-shell{display:block}
  .sidebar{
    height:auto;min-height:64px;position:sticky;top:0;
    padding:14px 18px;overflow:visible;
    border-bottom:1px solid #ffffff16;
    display:flex;align-items:center;justify-content:space-between
  }
  .sidebar>.brand{
    margin:0;width:auto;max-width:calc(100% - 70px);
    flex:1 1 auto
  }
  .sidebar-logo{
    width:126px !important;max-width:126px !important;
    height:30px !important;max-height:30px !important;
    flex-basis:126px !important
  }
  .sidebar>.brand b{display:none}
  .sidebar>nav,.sidebar-user{display:none !important}

  .mobile-nav{
    display:block;position:relative;flex:0 0 auto;margin-left:12px
  }
  .mobile-nav summary{
    list-style:none;display:flex;align-items:center;justify-content:center;
    gap:8px;min-width:48px;height:40px;padding:0 12px;
    border:1px solid #ffffff2c;background:#ffffff0b;color:#fff;
    cursor:pointer;font-size:12px;font-weight:900;letter-spacing:.08em;
    text-transform:uppercase
  }
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary::after{
    content:"";width:8px;height:8px;border-right:2px solid var(--orange);
    border-bottom:2px solid var(--orange);transform:rotate(45deg);
    margin-top:-4px;transition:transform .15s ease
  }
  .mobile-nav[open] summary::after{
    transform:rotate(225deg);margin-top:4px
  }
  .mobile-nav-links{
    position:absolute;right:0;top:48px;
    width:min(360px,calc(100vw - 32px));
    max-height:calc(100vh - 84px);overflow:auto;
    padding:12px;background:var(--ink);
    border:1px solid #ffffff26;box-shadow:0 18px 44px #0007;
    display:flex;flex-direction:column;gap:2px
  }
  .mobile-nav-links a{
    display:block;width:100%;padding:12px 12px;
    border-left:3px solid transparent;color:#fff;text-decoration:none;
    font-size:14px
  }
  .mobile-nav-links a.active{
    border-left-color:var(--orange);background:#ffffff0e
  }
  .mobile-nav-links .nav-group{
    margin:16px 12px 5px;padding:0;
    color:#8fa0a7;font-size:10px;letter-spacing:.16em
  }

  .main{padding:28px 20px 20px}
  .topbar{margin-bottom:22px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:1fr}

  .mobile-footer-nav{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;margin:34px -20px -20px;background:var(--line);
    border-top:1px solid var(--line)
  }
  .mobile-footer-nav a{
    min-height:58px;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:10px;background:#fff;text-decoration:none;
    font-size:12px;font-weight:900
  }
  .mobile-footer-nav a:hover{color:var(--orange)}
}

@media(max-width:640px){
  .sidebar{padding:12px 14px;min-height:60px}
  .sidebar-logo{
    width:116px !important;max-width:116px !important;
    height:28px !important;max-height:28px !important;
    flex-basis:116px !important
  }
  .mobile-nav summary{height:38px;padding:0 10px}
  .mobile-nav-links{top:46px;width:calc(100vw - 28px)}
  .main{padding:22px 14px 14px}
  .topbar h1{font-size:38px}
  .stats-grid{grid-template-columns:1fr}
  .panel-head{padding:20px}
  th,td{padding:11px 12px}
  .mobile-footer-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:28px -14px -14px
  }
}