:root{
  --bg:#151820;
  --bg-2:#1a1e27;
  --sidebar:#22262e;
  --panel:#282d35;
  --panel-2:#303640;
  --panel-3:#20242c;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);
  --text:#eef3f7;
  --muted:#9da7b3;
  --soft:#c9d2dc;
  --teal:#20c997;
  --cyan:#30d5c8;
  --blue:#3f7cff;
  --red:#ff5b67;
  --orange:#ff9f43;
  --yellow:#f7d85b;
  --green:#46e08a;
  --shadow:0 24px 80px rgba(0,0,0,.32);
  --panel-shadow:0 12px 34px rgba(0,0,0,.2);
  --radius:14px;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 7%,rgba(48,213,200,.09),transparent 28%),
    radial-gradient(circle at 90% 2%,rgba(255,91,103,.08),transparent 30%),
    linear-gradient(135deg,#59606f 0,#292f3a 44%,#11151d 100%);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.page-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#141821;
  transition:opacity .42s ease,visibility .42s ease;
}
.page-ready .page-loader{opacity:0;visibility:hidden}
.loader-card{
  width:190px;
  min-height:126px;
  display:grid;
  place-items:center;
  gap:13px;
  padding:22px;
  border-radius:18px;
  color:var(--muted);
  background:linear-gradient(145deg,#2c323d,#1f242d);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.loader-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#10151c;
  font-weight:950;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  animation:loaderPulse 1.2s ease-in-out infinite;
}
.loader-line{
  width:112px;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  position:relative;
}
.loader-line:after{
  content:"";
  position:absolute;
  inset:0;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--teal));
  animation:loaderSlide 1s ease-in-out infinite;
}
@keyframes loaderPulse{50%{transform:scale(1.08);box-shadow:0 0 32px rgba(32,201,151,.22)}}
@keyframes loaderSlide{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}

.client-app{
  min-height:100vh;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  background:rgba(17,20,27,.74);
}
.client-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px 16px;
  background:linear-gradient(180deg,#232832,#1b2028);
  border-right:1px solid var(--line);
  box-shadow:10px 0 34px rgba(0,0,0,.18);
  z-index:50;
}
.brand-block{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:6px 8px 16px;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#10151c;
  font-size:18px;
  font-weight:950;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  box-shadow:0 12px 28px rgba(32,201,151,.22);
}
.brand-copy{min-width:0}
.brand-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.brand-copy small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.side-nav{display:grid;gap:6px;min-height:0;overflow:auto;padding-right:2px}
.side-nav a{
  min-height:40px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-radius:10px;
  color:var(--soft);
  font-size:14px;
  font-weight:800;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.side-nav a span{color:var(--muted);text-align:center}
.side-nav a b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-nav a:hover{transform:translateX(3px);background:rgba(255,255,255,.045);color:#fff}
.side-nav a.active{
  color:#091018;
  background:linear-gradient(135deg,var(--teal),#16b889);
  box-shadow:0 10px 28px rgba(32,201,151,.22);
}
.side-nav a.active span{color:#091018}
.sidebar-widget{
  margin-top:auto;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid var(--line);
}
.widget-label,.eyebrow,.metric-label{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sidebar-widget strong{display:block;margin:8px 0 5px;font-size:20px}
.sidebar-widget small{color:var(--muted);line-height:1.45}
.sidebar-profile{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background:#181d25;
  border:1px solid var(--line);
}
.sidebar-profile>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#10151c;
  font-weight:950;
  background:linear-gradient(135deg,var(--orange),var(--red));
}
.sidebar-profile strong,.sidebar-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-profile small{color:var(--muted);font-size:12px}

.client-workspace{min-width:0;display:flex;flex-direction:column;background:rgba(21,24,32,.94)}
.client-topbar{
  position:sticky;
  top:0;
  z-index:40;
  min-height:76px;
  display:grid;
  grid-template-columns:auto minmax(180px,1fr) auto;
  align-items:center;
  gap:16px;
  padding:14px 24px;
  background:rgba(29,33,42,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.sidebar-toggle{
  width:40px;
  height:40px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  background:rgba(255,255,255,.045);
}
.top-title span{display:block;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.top-title h2{margin:3px 0 0;font-size:24px;line-height:1.1}
.top-actions{display:flex;align-items:center;gap:10px}
.top-pill,.top-icon{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:12px;
  color:var(--soft);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  font-weight:850;
  transition:transform .16s ease,background .16s ease,color .16s ease,border .16s ease;
}
.top-icon{width:38px;padding:0}.top-pill:hover,.top-icon:hover{transform:translateY(-1px);color:#fff;border-color:var(--line-strong)}
.client-content{width:100%;max-width:none;margin:0;padding:24px;flex:1}
.client-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  color:var(--muted);
  border-top:1px solid var(--line);
  background:rgba(29,33,42,.66);
}
.client-footer nav{display:flex;gap:14px;flex-wrap:wrap}

.client-board{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
.access-card,.metric-card,.config-card,.table-card,.setup-card,.modal-card{
  min-width:0;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(145deg,var(--panel),#242931);
  box-shadow:var(--panel-shadow);
  animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.access-card,.setup-card,.modal-card{padding:18px}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.home-hero,.cabinet-hero{
  min-height:238px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:18px;
  align-items:end;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(135deg,rgba(48,213,200,.12),transparent 36%),
    linear-gradient(145deg,#2b3039,#20252d);
}
.home-hero h1,.cabinet-hero h1,.auth-copy h1,.install-intro h1,.claim-main h1,.legal-card h1{
  max-width:780px;
  margin:8px 0 10px;
  font-size:34px;
  line-height:1.12;
}
.home-hero p,.cabinet-hero p,.auth-copy p,.install-intro p,.legal-card p,.claim-main p{
  max-width:780px;
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.hero-actions,.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.home-graph{
  height:138px;
  display:flex;
  align-items:end;
  gap:10px;
  padding:16px;
  border-radius:16px;
  background:rgba(15,18,24,.42);
  border:1px solid var(--line);
}
.home-graph span{
  flex:1;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(180deg,var(--red),rgba(255,91,103,.16));
  animation:equalize 2.6s ease-in-out infinite;
}
.home-graph span:nth-child(2){height:78%;animation-delay:.18s;background:linear-gradient(180deg,var(--orange),rgba(255,159,67,.16))}
.home-graph span:nth-child(3){height:96%;animation-delay:.34s;background:linear-gradient(180deg,var(--teal),rgba(32,201,151,.16))}
.home-graph span:nth-child(4){height:64%;animation-delay:.1s;background:linear-gradient(180deg,var(--blue),rgba(63,124,255,.16))}
@keyframes equalize{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1)}}
.metric-stack,.summary-grid{display:grid;gap:12px}
.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-card{
  position:relative;
  overflow:hidden;
  padding:16px;
  min-height:118px;
}
.metric-card.compact{min-height:104px}
.metric-card strong{display:block;margin:18px 0 5px;font-size:30px;line-height:1;color:var(--text)}
.metric-card small{color:var(--muted);font-size:12px}
.metric-card:after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:92px;
  height:36px;
  opacity:.7;
  background:linear-gradient(135deg,transparent 10%,currentColor 11%,transparent 24%,currentColor 25%,transparent 42%,currentColor 43%,transparent 60%,currentColor 61%,transparent 76%,currentColor 77%,transparent 100%);
  clip-path:polygon(0 62%,16% 44%,28% 55%,43% 22%,58% 48%,72% 18%,88% 36%,100% 20%,100% 100%,0 100%);
}
.metric-card.accent-red{color:var(--red)}.metric-card.accent-green{color:var(--teal)}.metric-card.accent-blue{color:var(--blue)}.metric-card.accent-cyan{color:var(--cyan)}
.metric-card .metric-label,.metric-card small{color:var(--muted)}
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.panel-head h2{margin:4px 0 0;font-size:18px;line-height:1.2}

.btn,button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  padding:0 14px;
  font-size:14px;
  font-weight:900;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border .16s ease,background .16s ease;
}
.btn.primary,.btn-primary,.install-submit{
  color:#10151c;
  background:linear-gradient(135deg,var(--teal),#16b889);
  box-shadow:0 10px 24px rgba(32,201,151,.16);
}
.btn.quiet,.btn-secondary,button:not(.primary):not(.btn-primary):not(.install-submit){
  color:var(--soft);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn:hover,button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active,button:active{transform:translateY(0) scale(.99)}
.btn:disabled,button:disabled{cursor:not-allowed;opacity:.58;transform:none;filter:none}
.full,.btn-full{width:100%}
input,select,textarea{
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:0;
  padding:0 12px;
  color:var(--text);
  background:#1c222b;
  transition:border .18s ease,box-shadow .18s ease,background .18s ease;
}
textarea{min-height:160px;padding:12px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:rgba(48,213,200,.45);box-shadow:0 0 0 4px rgba(48,213,200,.08)}
label span{display:block;margin:0 0 7px;color:var(--muted);font-size:12px;font-weight:850}
.form-stack,.order-form,.setup-grid{display:grid;gap:12px}
.order-form{grid-template-columns:1fr 1fr;align-items:end}
.order-form button{grid-column:1/-1}
.ping-button{white-space:nowrap}
.ping-results{
  display:grid;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.ping-results.hidden{display:none}
.ping-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:11px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.ping-row strong,.ping-row small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ping-row small{margin-top:3px;color:var(--muted);font-size:12px}
.ping-row>span{font-weight:950;color:var(--soft)}
.ping-row.ok{border-color:rgba(32,201,151,.28)}
.ping-row.ok>span{color:#a9ffd5}
.ping-row.bad{border-color:rgba(255,91,103,.28)}
.ping-row.bad>span{color:#ffb0b7}
.location-list,.price-list,.feature-list,.configs-grid{display:grid;gap:12px}
.location-row,.price-row,.feature-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  transition:transform .16s ease,border .16s ease,background .16s ease;
}
.feature-item{grid-template-columns:42px minmax(0,1fr)}
.feature-item>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#10151c;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  font-size:12px;
  font-weight:950;
}
.location-row:hover,.price-row:hover,.feature-item:hover,.config-card:hover{transform:translateY(-2px);border-color:rgba(48,213,200,.28);background:rgba(255,255,255,.055)}
.location-row strong,.price-row strong,.feature-item strong{display:block;color:var(--text)}
.location-row small,.feature-item p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(32,201,151,.12)}
.badge,.pill{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border-radius:999px;
  color:var(--soft);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:12px;
  font-weight:900;
}
.badge.success,.pill.success,.pill.paid{color:#a9ffd5;background:rgba(32,201,151,.12);border-color:rgba(32,201,151,.32)}
.badge.danger,.pill.canceled,.pill.error{color:#ffb0b7;background:rgba(255,91,103,.12);border-color:rgba(255,91,103,.32)}
.badge.warn,.pill.warn,.pill.new{color:#ffe88f;background:rgba(247,216,91,.12);border-color:rgba(247,216,91,.32)}

.configs-section{padding:18px}
.configs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.config-card{padding:16px;background:linear-gradient(145deg,#2c323b,#242932);transition:transform .16s ease,border .16s ease,background .16s ease}
.config-main-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
}
.config-server{color:var(--teal);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.config-card h3{margin:7px 0 5px;font-size:19px}
.config-code,.config-meta{color:var(--muted);font-size:13px}
.config-side-actions{display:grid;justify-items:end;gap:10px}
.config-card-bottom-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.config-note-form,.renew-inline{display:grid;gap:10px;align-items:end}
.renew-inline{grid-template-columns:minmax(0,1fr) auto}
.table-scroll{width:100%;overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:780px}
th,td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.025)}
td{color:var(--soft);font-size:14px}
tbody tr{transition:background .16s ease}tbody tr:hover{background:rgba(255,255,255,.035)}
.empty-state{
  padding:20px;
  border:1px dashed var(--line-strong);
  border-radius:14px;
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.025);
}
.empty-state h3{margin:0 0 6px;color:var(--text)}
.empty-state p{margin:0;color:var(--muted)}
.alert{
  padding:13px 15px;
  border-radius:14px;
  border:1px solid rgba(48,213,200,.24);
  color:#c8fff4;
  background:rgba(32,201,151,.1);
  animation:slideUp .32s ease both;
}
.alert.danger{color:#ffd2d6;border-color:rgba(255,91,103,.28);background:rgba(255,91,103,.1)}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.muted{color:var(--muted)}

.auth-layout{
  min-height:calc(100vh - 156px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:16px;
  align-items:stretch;
}
.auth-copy,.auth-panel{display:flex;flex-direction:column;justify-content:center}
.auth-panel{gap:16px}
.recovery-form{padding-top:16px;border-top:1px solid var(--line)}
.legal-page,.claim-layout{display:grid;place-items:start center}
.legal-card,.claim-main{width:min(980px,100%)}
.legal-content{margin-top:18px;color:var(--soft);line-height:1.7}
.legal-content h3{margin-top:24px}
.claim-content{display:grid;gap:14px;justify-items:center;text-align:center}
.claim-code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.claim-qr-wrap,.qr-modal-wrap{
  display:grid;
  place-items:center;
  padding:16px;
  border-radius:14px;
  background:#fff;
}
.qr-inline,.qr-modal{max-width:260px;width:100%;height:auto}

.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:22px;
  background:rgba(8,11,16,.72);
  backdrop-filter:blur(10px);
  animation:fadeIn .16s ease both;
}
.modal.hidden{display:none}
.modal-card{width:min(640px,100%);max-height:calc(100vh - 44px);overflow:auto}
.profile-modal-meta{margin:-4px 0 14px;color:var(--muted);font-size:13px}
.modal-open{overflow:hidden}
.icon-btn{width:36px;height:36px;padding:0;border-radius:50%}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.install-body{background:linear-gradient(135deg,#59606f 0,#292f3a 44%,#11151d 100%)}
.install-shell{width:min(1380px,calc(100% - 32px));margin:24px auto;display:grid;gap:16px}
.install-intro{min-height:190px;display:grid;align-content:end;background:linear-gradient(135deg,rgba(48,213,200,.12),transparent 36%),linear-gradient(145deg,#2b3039,#20252d)}
.install-form{display:grid;gap:16px}
.setup-card h2{margin:0 0 8px}.setup-card p{margin:0 0 14px;color:var(--muted)}
.setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.setup-table{display:grid;gap:10px}
.setup-row{display:grid;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.period-row{grid-template-columns:1fr 1.2fr .8fr .8fr}
.server-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-row{grid-template-columns:1fr 1fr 2fr}
.legal-setup-grid{grid-template-columns:1fr 1fr}
.check-line{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border-radius:12px;
  color:var(--soft);
  background:#1c222b;
  border:1px solid var(--line);
}
.check-line input{width:auto;min-height:auto}

@media (max-width:1180px){
  .client-app{grid-template-columns:82px minmax(0,1fr)}
  .client-sidebar{padding:18px 12px}
  .brand-copy,.side-nav a b,.sidebar-widget,.sidebar-profile div{display:none}
  .brand-block{grid-template-columns:1fr;justify-items:center;padding:0 0 14px}
  .side-nav a{grid-template-columns:1fr;justify-items:center;padding:0}
  .sidebar-profile{grid-template-columns:1fr;justify-items:center}
  .client-topbar{grid-template-columns:minmax(160px,1fr) auto}
  .home-hero,.cabinet-hero,.span-8,.span-7,.span-5,.span-4{grid-column:span 6}
  .summary-grid,.configs-grid{grid-template-columns:1fr}
  .setup-grid,.server-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .client-app{display:block}
  .client-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(290px,86vw);
    transform:translateX(-105%);
    transition:transform .24s ease;
  }
  .sidebar-open .client-sidebar{transform:translateX(0)}
  .brand-copy,.side-nav a b,.sidebar-widget,.sidebar-profile div{display:block}
  .side-nav a{grid-template-columns:24px 1fr;justify-items:stretch;padding:0 12px}
  .brand-block{grid-template-columns:42px 1fr;justify-items:stretch}
  .sidebar-profile{grid-template-columns:38px 1fr;justify-items:stretch}
  .client-topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:12px}
  .sidebar-toggle{display:flex}
  .client-content{padding:14px}
  .client-footer{display:grid;padding:16px}
  .client-board{grid-template-columns:1fr}
  .span-12,.span-8,.span-7,.span-5,.span-4,.home-hero,.cabinet-hero{grid-column:1/-1}
  .home-hero,.cabinet-hero,.auth-layout{grid-template-columns:1fr}
  .home-graph{height:90px}
  .order-form,.config-card-bottom-grid,.renew-inline,.setup-grid,.period-row,.server-row,.product-row,.legal-setup-grid,.ping-row{grid-template-columns:1fr}
  .auth-layout{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}

/* Unified light SaaS skin shared with the admin workspace. */
:root{
  --page:#f4f7fb;
  --page-2:#ecf3f8;
  --panel:#ffffff;
  --panel-2:#f8fbfd;
  --sidebar:#f9fbfd;
  --line:#e6edf3;
  --line-strong:#d9e4ec;
  --text:#223044;
  --soft:#516174;
  --muted:#8a98a8;
  --teal:#22c7aa;
  --cyan:#45d7c7;
  --blue:#4f8cff;
  --red:#ff5d71;
  --orange:#ffaf37;
  --yellow:#e7ba2d;
  --green:#70d928;
  --shadow:0 24px 70px rgba(31,58,78,.14);
  --panel-shadow:0 10px 28px rgba(31,58,78,.08);
}
html{width:100%;overflow-x:hidden}
body.client-ui{
  width:100%;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(900px 480px at 52% -160px,rgba(112,217,40,.32),transparent 68%),
    radial-gradient(780px 440px at 100% 2%,rgba(34,199,170,.22),transparent 64%),
    linear-gradient(180deg,#ecf4f8 0%,#f8fbfe 46%,#eef5fa 100%);
}
body.client-ui:before{
  content:"";
  position:fixed;
  inset:auto -12% -36% 34%;
  height:54vh;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(112,217,40,.62),rgba(34,199,170,.48));
  filter:blur(6px);
  transform:rotate(-10deg);
  pointer-events:none;
  opacity:.54;
}
.install-body{background:linear-gradient(180deg,#ecf4f8 0%,#f8fbfe 46%,#eef5fa 100%)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.side-nav a span svg,
.top-icon svg,
.sidebar-toggle svg,
.icon-btn svg,
.feature-item>span svg,
button svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sidebar-toggle svg,.top-icon svg,.icon-btn svg{width:18px;height:18px}
button,input,select,textarea{min-width:0;max-width:100%}
.page-loader{background:var(--page)}
.loader-card{
  color:var(--muted);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.loader-logo{
  color:#fff;
  border-radius:13px;
  background:linear-gradient(135deg,var(--green),var(--teal));
}
.loader-line{background:#e8eff4}
.loader-line:after{background:linear-gradient(90deg,var(--green),var(--teal),var(--blue))}
.client-app{
  position:relative;
  z-index:1;
  background:transparent;
}
.client-sidebar{
  background:rgba(255,255,255,.78);
  border-right:1px solid rgba(255,255,255,.82);
  box-shadow:14px 0 45px rgba(31,58,78,.08);
  backdrop-filter:blur(18px);
}
.brand-block{border-bottom:1px solid var(--line)}
.brand-mark{
  color:#fff;
  border-radius:14px;
  background:linear-gradient(135deg,var(--green),var(--teal));
  box-shadow:0 16px 34px rgba(80,196,26,.25);
}
.brand-copy small,.sidebar-widget small,.sidebar-profile small,.top-title span,.client-footer,.client-footer a,.muted{color:var(--muted)}
.side-nav a{
  color:var(--soft);
  font-size:13px;
  font-weight:850;
}
.side-nav a span{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#7d8a98;
  background:#f0f4f7;
}
.side-nav a:hover{background:#f0f6f9;color:var(--text)}
.side-nav a.active{
  color:#173012;
  background:linear-gradient(135deg,rgba(112,217,40,.92),rgba(34,199,170,.7));
  box-shadow:0 13px 28px rgba(80,196,26,.22);
}
.side-nav a.active span{color:#173012;background:rgba(255,255,255,.42)}
.sidebar-widget{
  background:linear-gradient(145deg,#eef7fb,#ffffff);
  border:1px solid var(--line);
  box-shadow:var(--panel-shadow);
}
.sidebar-widget strong{color:var(--text)}
.sidebar-profile{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--panel-shadow);
}
.sidebar-profile>span{
  color:#fff;
  background:linear-gradient(135deg,var(--green),var(--teal));
}
.client-workspace{
  min-width:0;
  max-width:100vw;
  overflow-x:hidden;
  background:transparent;
}
.client-topbar{
  grid-template-columns:auto minmax(180px,1fr) auto;
  background:rgba(255,255,255,.68);
  border-bottom:1px solid rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
}
.sidebar-toggle,.top-pill,.top-icon{
  color:var(--soft);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(31,58,78,.05);
}
.top-pill:hover,.top-icon:hover,.sidebar-toggle:hover{color:var(--text);border-color:var(--line-strong);box-shadow:0 12px 24px rgba(31,58,78,.08)}
.client-content{
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
.client-footer{
  background:rgba(255,255,255,.66);
  border-top:1px solid rgba(255,255,255,.82);
}
.client-board,.auth-layout,.install-form,.install-shell{min-width:0;max-width:100%}
.access-card,.metric-card,.config-card,.table-card,.setup-card,.modal-card{
  max-width:100%;
  border:1px solid rgba(255,255,255,.82);
  background:rgba(255,255,255,.86);
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(14px);
}
.access-card,.setup-card,.modal-card{padding:18px}
.home-hero,.cabinet-hero,.install-intro{
  background:
    radial-gradient(circle at 90% 0,rgba(112,217,40,.34),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,252,254,.86));
}
.home-hero:after,.cabinet-hero:after,.install-intro:after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-78px;
  width:360px;
  height:210px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(112,217,40,.56),rgba(34,199,170,.4));
  opacity:.62;
  pointer-events:none;
}
.home-hero>*,.cabinet-hero>*,.install-intro>*{position:relative;z-index:1}
.home-hero h1,.cabinet-hero h1,.auth-copy h1,.install-intro h1,.claim-main h1,.legal-card h1{color:var(--text)}
.home-hero p,.cabinet-hero p,.auth-copy p,.install-intro p,.legal-card p,.claim-main p{color:var(--muted)}
.home-graph{
  background:#202a46;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.home-graph span{background:linear-gradient(180deg,#fff,#e6ecff)}
.home-graph span:nth-child(2){background:linear-gradient(180deg,#a7f27b,rgba(112,217,40,.22))}
.home-graph span:nth-child(3){background:linear-gradient(180deg,#7eead9,rgba(34,199,170,.2))}
.home-graph span:nth-child(4){background:linear-gradient(180deg,#9bc0ff,rgba(79,140,255,.2))}
.metric-card{background:rgba(255,255,255,.9)}
.metric-card strong,.location-row strong,.price-row strong,.feature-item strong,.config-card h3,.empty-state h3{color:var(--text)}
.metric-card .metric-label,.metric-card small,.location-row small,.feature-item p,.config-code,.config-meta,.profile-modal-meta{color:var(--muted)}
.metric-card.accent-green{color:var(--green)}
.metric-card.accent-cyan{color:var(--teal)}
.metric-card.accent-blue{color:var(--blue)}
.metric-card.accent-red{color:var(--red)}
.btn.primary,.btn-primary,.install-submit{
  color:#173012;
  background:linear-gradient(135deg,var(--green),#83e740);
  box-shadow:0 13px 28px rgba(80,196,26,.22);
}
.btn.quiet,.btn-secondary,button:not(.primary):not(.btn-primary):not(.install-submit){
  color:var(--soft);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(31,58,78,.05);
}
.btn:hover,button:hover{filter:brightness(1.02);box-shadow:0 12px 24px rgba(31,58,78,.08)}
input,select,textarea{
  color:var(--text);
  background:#fff;
  border:1px solid var(--line);
}
input:focus,select:focus,textarea:focus{border-color:rgba(112,217,40,.72);box-shadow:0 0 0 4px rgba(112,217,40,.12)}
label span{color:var(--muted)}
.location-row,.price-row,.feature-item,.ping-row,.setup-row{
  background:var(--panel-2);
  border:1px solid var(--line);
}
.location-row:hover,.price-row:hover,.feature-item:hover,.config-card:hover{
  border-color:#cfe5d1;
  background:#fff;
}
.feature-item>span{
  color:#173012;
  background:linear-gradient(135deg,var(--green),#a0f05e);
}
.status-dot{background:var(--green);box-shadow:0 0 0 5px rgba(112,217,40,.13)}
.badge,.pill{
  color:var(--soft);
  background:#f3f7fa;
  border:1px solid var(--line);
}
.badge.success,.pill.success,.pill.paid{color:#2a7419;background:rgba(112,217,40,.16);border-color:rgba(112,217,40,.42)}
.badge.danger,.pill.canceled,.pill.error{color:#bc3045;background:rgba(255,93,113,.12);border-color:rgba(255,93,113,.28)}
.badge.warn,.pill.warn,.pill.new{color:#9a6b08;background:rgba(255,175,55,.14);border-color:rgba(255,175,55,.3)}
.config-card{background:rgba(255,255,255,.9)}
.config-server{color:var(--teal)}
.config-card-bottom-grid,.recovery-form{border-top:1px solid var(--line)}
.table-scroll{width:100%;max-width:100%;overflow:auto}
table{max-width:100%}
th{background:#f8fbfd;color:var(--muted)}
td{color:var(--soft)}
tbody tr:hover{background:#f8fbfd}
.empty-state{
  color:var(--muted);
  background:#f8fbfd;
  border:1px dashed var(--line-strong);
}
.alert{
  color:#275d18;
  background:rgba(112,217,40,.13);
  border:1px solid rgba(112,217,40,.34);
}
.alert.danger{color:#bc3045;background:rgba(255,93,113,.1);border-color:rgba(255,93,113,.28)}
.modal{background:rgba(20,31,45,.46)}
.claim-qr-wrap,.qr-modal-wrap{border:1px solid var(--line)}
.check-line{
  color:var(--soft);
  background:#fff;
  border:1px solid var(--line);
}
.order-form,.setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.period-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.server-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
.legal-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.config-card-bottom-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.renew-inline,.ping-row{grid-template-columns:minmax(0,1fr) auto}
.ping-row{grid-template-columns:minmax(0,1fr) auto auto}
.ping-row.ok{border-color:rgba(112,217,40,.38)}
.ping-row.ok>span{color:#2a7419}
.ping-row.bad{border-color:rgba(255,93,113,.3)}
.ping-row.bad>span{color:#bc3045}
.actions,.action-row,.hero-actions{min-width:0;max-width:100%}

@media (max-width:1180px){
  .client-topbar{grid-template-columns:minmax(160px,1fr) auto}
  .setup-grid,.server-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body.client-ui:before{display:none}
  .client-workspace{max-width:100%}
  .client-topbar{grid-template-columns:auto minmax(0,1fr) auto}
  .client-content{padding:14px}
  .home-hero,.cabinet-hero,.install-intro{grid-template-columns:1fr}
  .home-hero:after,.cabinet-hero:after,.install-intro:after{display:none}
  .order-form,.setup-grid,.period-row,.server-row,.product-row,.legal-setup-grid,.config-card-bottom-grid,.renew-inline,.ping-row{grid-template-columns:1fr}
}

/* Product polish: stable layout, no inner menu scrollbars, minimal claim page. */
.client-sidebar{
  overflow:hidden;
  padding-bottom:16px;
}
.side-nav{
  min-height:auto;
  overflow:visible;
  padding-right:0;
}
.top-title{min-width:0}
.top-actions{
  justify-self:end;
  min-width:0;
}
.client-workspace{
  min-height:100vh;
}
.client-content{
  flex:1 0 auto;
}
.client-footer{
  flex:0 0 auto;
  align-items:center;
  min-height:56px;
}
.home-hero,.cabinet-hero{
  align-items:center;
}
.home-hero .hero-actions,.cabinet-hero .hero-actions{
  margin-top:22px;
}
.configs-grid{
  grid-template-columns:1fr;
}
.config-card{
  padding:18px;
}
.config-main-row{
  align-items:start;
}
.config-card-bottom-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;
}
.config-note-form,.renew-inline{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.config-note-form button,.renew-inline button{
  width:100%;
}
.claim-standalone,.error-standalone{
  min-height:100vh;
}
.claim-standalone:before,.error-standalone:before{
  inset:auto -8% -34% 28%;
  height:48vh;
}
.claim-shell,.error-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
}
.claim-card,.error-card{
  width:min(680px,100%);
  display:grid;
  justify-items:center;
  gap:18px;
  padding:34px;
  border-radius:18px;
  text-align:center;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(14px);
}
.claim-card h1{
  max-width:100%;
  margin:0;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:28px;
  line-height:1.18;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
.claim-card p{
  margin:0;
  color:var(--muted);
  font-weight:850;
}
.claim-card small{
  color:var(--muted);
}
.claim-card .claim-actions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}
.claim-card .btn{
  min-width:170px;
}
.error-card{
  width:min(620px,100%);
  gap:16px;
}
.error-brand{
  width:auto;
  min-height:46px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.error-code{
  display:grid;
  place-items:center;
  min-width:86px;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  color:#254511;
  font-size:20px;
  font-weight:950;
  background:linear-gradient(135deg,rgba(112,217,40,.28),rgba(34,199,170,.22));
  border:1px solid rgba(112,217,40,.34);
}
.error-card h1{
  margin:0;
  color:var(--text);
  font-size:34px;
  line-height:1.12;
  text-align:center;
}
.error-card p{
  max-width:500px;
  margin:0;
  color:var(--muted);
  font-weight:850;
  line-height:1.65;
  text-align:center;
}
.error-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}
.error-path{
  max-width:100%;
  overflow-wrap:anywhere;
  color:var(--muted);
  opacity:.72;
}
@media (max-width:1180px){
  .client-sidebar .sidebar-widget,
  .client-sidebar .sidebar-profile{
    display:none;
  }
}
@media (max-width:760px){
  .client-sidebar{
    overflow:auto;
  }
  .client-footer{
    align-items:flex-start;
  }
  .config-main-row,
  .config-card-bottom-grid{
    grid-template-columns:1fr;
  }
  .config-side-actions{
    justify-items:start;
  }
  .claim-shell,.error-shell{
    padding:18px;
  }
  .claim-card,.error-card{
    padding:24px 18px;
  }
  .claim-card .btn,.error-actions .btn{
    width:100%;
  }
  .error-card h1{
    font-size:27px;
  }
}

/* Layout tightening: continuous sidebar and compact config cards. */
@media (min-width:761px){
  .client-app{
    align-items:stretch;
  }
  .client-sidebar{
    position:sticky;
    top:0;
    align-self:stretch;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
  }
  .client-workspace{
    min-height:100vh;
    min-height:100dvh;
  }
}
.configs-section{
  overflow:hidden;
}
.configs-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:14px;
}
.config-card{
  min-width:0;
  padding:16px;
}
.config-main-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
}
.config-main-row>div:first-child,
.config-side-actions{
  min-width:0;
}
.config-card h3,
.config-code,
.config-meta{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.config-side-actions .action-row{
  justify-content:flex-end;
}
@media (max-width:1180px){
  .configs-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .client-sidebar{
    min-height:0;
  }
  .config-side-actions .action-row{
    justify-content:flex-start;
  }
}