@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Rubik:wght@400;500;600&display=swap');
:root{
  --bg-deep:#0d0f11; --bg-panel:#16191e; --bg-panel-2:#121417; --bg-strip:#1c2126;
  --bg-input:#0f1215; --bg-inset:#101317;
  --border:#262b31; --border-2:#23272d; --border-3:#2a2f36; --border-hover:#3a4149;
  --amber:#ffab2e; --amber-bright:#ffc061; --amber-ink:#1a1206;
  --amber-grad:linear-gradient(160deg,#ffc061,#f5951a);
  --green:#57c98a; --yellow:#ffd23f; --steel:#7f8894; --red:#f0533f;
  --tg-grad:linear-gradient(135deg,#2aa8e0,#1c86c4);
  --text:#e8ebef; --text-bright:#eef1f4; --text-head:#f2f5f8; --text-dim:#97a0a9; --text-faint:#6a727c;
  --r-panel:12px; --r-field:9px; --r-badge:5px;
  --f-head:'Oswald',system-ui,sans-serif; --f-mono:'JetBrains Mono',monospace; --f-body:'Rubik',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0d0f11,#0b0d0f);color:var(--text);
     font-family:var(--f-body);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--amber);text-decoration:none} a:hover{color:var(--amber-bright)}

/* ===== keyframes ===== */
@keyframes ncz-blink { 0%,48% { opacity: 1; } 49%,100% { opacity: .28; } }
@keyframes ncz-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ncz-toast-in { 0% { transform: translateX(-50%) translateY(-14px); opacity: 0; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes ncz-scan-x { 0% { left: -30%; } 100% { left: 130%; } }

/* ===== header ===== */
.ncz-header{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px; background:rgba(15,18,21,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-2); box-shadow:0 1px 0 rgba(255,171,46,.14);
}
.ncz-header-left{display:flex; align-items:center; gap:26px}
.ncz-header-right{display:flex; align-items:center; gap:16px}
.ncz-mark{
  display:grid; place-items:center; width:36px; height:36px;
  background:linear-gradient(160deg,#ffbe52,#f5951a); color:var(--amber-ink);
  font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.04em;
  clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);
  box-shadow:0 0 18px rgba(255,171,46,.4);
}
.ncz-wordmark{
  display:flex; align-items:center; font-family:var(--f-head); font-weight:600; font-size:19px;
  letter-spacing:.16em; color:var(--text-head);
}
.ncz-wordmark .ncz-amber, .ncz-amber{color:var(--amber)}
.ncz-nav{
  display:inline-flex; align-items:center; gap:4px; margin-left:22px;
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  color:var(--amber); padding:7px 12px; border-radius:6px;
  background:rgba(255,171,46,.10); border:1px solid rgba(255,171,46,.28);
}
.ncz-crumb{
  display:inline-flex; align-items:center; gap:8px; margin-left:22px;
  font-family:var(--f-mono); font-size:12px; color:var(--text-faint);
}
.ncz-crumb:hover{color:var(--amber-bright)}
.ncz-crumb .ncz-sep{color:#3f464e}
.ncz-crumb .ncz-crumb-current{color:#c4ccd4}
.ncz-email{
  font-family:var(--f-mono); font-size:12px; color:#6f7883; letter-spacing:.02em;
}

/* ===== buttons ===== */
.ncz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:500;
  color:#b9c1c9; background:transparent; border:1px solid #2f353c; border-radius:6px;
  padding:8px 14px; cursor:pointer; transition:all .14s ease;
}
.ncz-btn:hover{border-color:var(--amber); color:var(--amber-bright)}
.ncz-btn:active{transform:scale(.96)}

.ncz-btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:14px; font-weight:600;
  color:var(--amber-ink); background:var(--amber-grad); border:none; padding:13px 22px; cursor:pointer;
  border-radius:8px; box-shadow:0 0 0 1px rgba(255,171,46,.5), 0 6px 22px rgba(255,150,20,.28);
  transition:all .14s ease;
}
.ncz-btn-primary:hover{
  box-shadow:0 0 0 1px rgba(255,200,120,.7), 0 8px 30px rgba(255,150,20,.45);
  transform:translateY(-1px);
}
.ncz-btn-primary:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 0 0 1px rgba(255,171,46,.5), inset 0 2px 8px rgba(120,70,0,.4);
}

.ncz-btn-outline-amber{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:13px; font-weight:500;
  color:var(--amber-bright); background:rgba(255,171,46,.1); border:1px solid rgba(255,171,46,.4);
  border-radius:8px; padding:12px 22px; cursor:pointer; transition:all .14s ease;
}
.ncz-btn-outline-amber:hover{background:rgba(255,171,46,.18)}
.ncz-btn-outline-amber:active{transform:scale(.98)}

/* ===== card ===== */
.ncz-card{
  border-radius:var(--r-panel);
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border);
  overflow:hidden;
}
.ncz-card-strip{
  display:flex; align-items:center; gap:10px; padding:15px 18px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(180deg,var(--bg-strip),var(--bg-panel));
}
.ncz-card-strip-title{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:14px;
  font-weight:600; color:var(--amber);
}
.ncz-card-body{padding:18px}
.ncz-card:hover{
  transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.55); border-color:var(--border-hover);
}

/* ===== badges ===== */
.ncz-badge{
  display:inline-flex; align-items:center; font-family:var(--f-head); text-transform:uppercase;
  letter-spacing:.09em; font-size:10.5px; font-weight:500; padding:3px 9px; border-radius:var(--r-badge);
  border:1px solid currentColor;
}
.ncz-badge-active{color:var(--green); background:rgba(87,201,138,.12)}
.ncz-badge-trial{color:var(--yellow); background:rgba(255,210,63,.12)}
.ncz-badge-waiting{color:var(--steel); background:rgba(127,136,148,.12)}
.ncz-badge-blocked{color:var(--red); background:rgba(240,83,63,.12)}

/* ===== fields ===== */
.ncz-field-label{
  display:block; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:10px; color:var(--text-dim); margin-bottom:7px;
}
.ncz-field{
  width:100%; background:var(--bg-input); border:1px solid var(--border-3); border-radius:var(--r-field);
  padding:11px 13px; color:var(--text-bright); font-size:14px; font-family:var(--f-body);
}
.ncz-field:focus{outline:none; border-color:var(--amber)}
.ncz-field::placeholder{color:#3f464e}

/* ===== toasts ===== */
.ncz-toasts{
  position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:10px; width:max-content; max-width:min(90vw,520px);
  pointer-events:none;
}
.ncz-toast{
  display:flex; align-items:center; gap:13px; padding:14px 18px; border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.5); backdrop-filter:blur(8px);
  animation:ncz-toast-in .28s ease; pointer-events:auto;
}
.ncz-toast span:first-of-type{
  flex:none; width:10px; height:10px; border-radius:2px;
}
.ncz-toast-x{
  background:none; border:none; color:var(--text-faint); font-size:18px; cursor:pointer;
  line-height:1; margin-left:6px;
}
.ncz-toast-x:hover{color:var(--text-bright)}
.ncz-toast-success{
  background:rgba(18,38,27,.94); border:1px solid rgba(87,201,138,.45); border-left:3px solid var(--green);
}
.ncz-toast-success span:first-of-type{background:var(--green); box-shadow:0 0 12px var(--green)}
.ncz-toast-error{
  background:rgba(40,20,18,.94); border:1px solid rgba(240,83,63,.45); border-left:3px solid var(--red);
}
.ncz-toast-error span:first-of-type{background:var(--red); box-shadow:0 0 12px var(--red)}
.ncz-toast-info, .ncz-toast-warning{
  background:rgba(22,25,30,.94); border:1px solid rgba(255,171,46,.45); border-left:3px solid var(--amber);
}
.ncz-toast-info span:first-of-type, .ncz-toast-warning span:first-of-type{
  background:var(--amber); box-shadow:0 0 12px var(--amber);
}

/* ===== layout ===== */
.ncz-main{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:26px 30px 80px}

/* ===== auth (login/signup) ===== */
@keyframes ncz-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

body.ncz-auth{background:linear-gradient(180deg,#0d0f11,#0b0d0f)}
.ncz-auth-split{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}

.ncz-auth-brand{
  position:relative; overflow:hidden; padding:54px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:radial-gradient(900px 600px at 20% 0%,rgba(255,171,46,.14),transparent 58%),
             linear-gradient(160deg,#14171b,#0c0e10);
  border-right:1px solid var(--border-2);
}
.ncz-auth-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:46px 46px;
}
.ncz-auth-logo{position:relative; display:flex; align-items:center; gap:13px}
.ncz-auth-pitch{position:relative}
.ncz-auth-tag{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.ncz-auth-tag-rule{width:26px; height:2px; background:var(--amber); box-shadow:0 0 8px rgba(255,171,46,.6)}
.ncz-auth-tag span:last-child{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; color:var(--amber); text-transform:uppercase;
}
.ncz-auth-h1{
  margin:0 0 20px; font-family:var(--f-head); font-weight:600; font-size:46px; line-height:1.04;
  letter-spacing:.01em; text-transform:uppercase; color:var(--text-head); max-width:460px;
}
.ncz-auth-lede{margin:0 0 30px; max-width:400px; font-size:15px; line-height:1.65; color:var(--text-dim)}
.ncz-auth-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ncz-auth-features li{display:flex; align-items:center; gap:12px; font-size:14px; color:#c4ccd4}
.ncz-auth-check{
  flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:5px;
  background:rgba(255,171,46,.12); border:1px solid rgba(255,171,46,.35); color:var(--amber);
  font-size:12px; font-family:var(--f-mono);
}
.ncz-auth-signal{
  position:relative; display:flex; align-items:center; gap:16px;
  font-family:var(--f-mono); font-size:11px; color:var(--text-faint);
}
.ncz-auth-bars{display:flex; align-items:flex-end; gap:3px; height:20px}
.ncz-auth-bars span{width:3px; height:100%; background:var(--green); border-radius:2px; animation:ncz-bar 1.2s ease-in-out infinite}
.ncz-auth-bars span:nth-child(2){animation-delay:.2s}
.ncz-auth-bars span:nth-child(3){animation-delay:.4s}
.ncz-auth-bars span:nth-child(4){animation-delay:.6s}

.ncz-auth-form{
  position:relative; display:flex; align-items:center; justify-content:center; padding:40px;
  background:linear-gradient(#0d0f11,#0b0d0f);
}
.ncz-auth-form-inner{width:100%; max-width:400px}
.ncz-auth-head{margin-bottom:26px}
.ncz-auth-h{
  margin:0 0 6px; font-family:var(--f-head); font-weight:600; font-size:30px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-head);
}
.ncz-auth-sub{margin:0; font-size:13.5px; color:var(--text-dim)}

.ncz-social-list{display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.ncz-social{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  padding:13px 16px; border-radius:9px; background:var(--bg-panel); border:1px solid var(--border-3);
  color:var(--text); font-family:var(--f-body); font-size:14.5px; font-weight:500;
  transition:all .14s ease;
}
.ncz-social:hover{color:var(--text)}
.ncz-social-ico{
  flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:6px; color:#fff;
  font-family:var(--f-head); font-weight:700; font-size:15px;
}
.ncz-social-ya:hover{border-color:#f04a3d; background:#1a1d22}
.ncz-social-ico-ya{background:#fc3f1d}
.ncz-social-mail:hover{border-color:#3d6df0; background:#1a1d22}
.ncz-social-ico-mail{background:linear-gradient(135deg,#0a7cff,#005ff9); font-size:16px}
.ncz-social-tg{
  background:var(--bg-inset); border:1px dashed var(--border-3); color:var(--text-faint);
  font-size:14px; cursor:not-allowed;
}
.ncz-social-ico-tg{background:#1c2126; color:#4b5763}
.ncz-badge-soon{
  margin-left:auto; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em;
  font-size:10px; color:var(--text-faint); border:1px solid var(--border-3); padding:2px 7px; border-radius:4px;
}

.ncz-or{display:flex; align-items:center; gap:14px; margin:4px 0 20px}
.ncz-or span:first-child, .ncz-or span:last-child{flex:1; height:1px; background:var(--border-2)}
.ncz-or span:nth-child(2){
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
}

.ncz-auth-form-fields p{margin:0 0 13px}
.ncz-auth-form-fields label{
  display:block; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:10px; color:var(--text-dim); margin-bottom:7px;
}
.ncz-auth-form-fields input[type=text],
.ncz-auth-form-fields input[type=email],
.ncz-auth-form-fields input[type=password]{
  width:100%; background:var(--bg-input); border:1px solid var(--border-3); border-radius:var(--r-field);
  padding:12px 14px; color:var(--text-bright); font-size:14px; font-family:var(--f-mono); letter-spacing:.05em;
}
.ncz-auth-form-fields input:focus{outline:none; border-color:var(--amber)}
.ncz-auth-form-fields input::placeholder{color:#565d65}
.ncz-auth-form-fields .helptext{display:block; margin-top:4px; font-size:12px; color:var(--text-faint)}
.ncz-auth-form-fields ul.errorlist{
  list-style:none; margin:4px 0 0; padding:0; color:var(--red); font-size:12.5px;
}
.ncz-auth-submit{width:100%; justify-content:center; margin-top:20px}
.ncz-auth-switch{margin-top:20px; text-align:center; font-size:13.5px; color:var(--text-dim)}
.ncz-auth-switch a{font-weight:600}

@media (max-width:860px){
  .ncz-auth-split{grid-template-columns:1fr}
  .ncz-auth-brand{display:none}
  .ncz-auth-form{padding:24px}
}

/* ===== router list: head, tag/h1/h2 ===== */
.ncz-tag{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:6px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; color:var(--amber); text-transform:uppercase;
}
.ncz-tag::before{content:""; width:26px; height:2px; background:var(--amber); box-shadow:0 0 8px rgba(255,171,46,.6)}
.ncz-tag-center{justify-content:center; width:100%}
.ncz-h1{
  margin:0; font-family:var(--f-head); font-weight:600; font-size:40px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-head); line-height:1;
}
.ncz-h2{
  margin:0 0 12px; font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:28px; color:var(--text-head); text-align:center;
}
.ncz-list-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:26px; flex-wrap:wrap;
}
.ncz-plus{font-size:19px; line-height:0; margin-top:-2px}

/* ===== router card grid ===== */
.ncz-card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px}

.ncz-card-grid .ncz-card{
  position:relative; display:flex; flex-direction:column; min-height:330px;
  text-decoration:none; color:inherit; cursor:pointer;
  border-top:2px solid var(--steel);
}
.ncz-card-grid .ncz-card::after{
  content:""; position:absolute; top:9px; right:10px; width:11px; height:11px;
  border-top:1px solid var(--border-hover); border-right:1px solid var(--border-hover);
}

/* state → top border + dot + badge colors */
.ncz-state-active{border-top-color:var(--green)}
.ncz-state-trial{border-top-color:var(--yellow)}
.ncz-state-shipped, .ncz-state-ready, .ncz-state-draft{border-top-color:var(--steel)}
.ncz-state-blocked{border-top-color:var(--red)}

.ncz-card-top{
  display:flex; align-items:center; gap:10px; padding:13px 15px;
  background:linear-gradient(180deg,var(--bg-strip),var(--bg-panel)); border-bottom:1px solid var(--border-2);
}
.ncz-dot{flex:none; width:9px; height:9px; border-radius:2px; background:var(--steel); box-shadow:0 0 10px rgba(127,136,148,.4)}
.ncz-state-active .ncz-dot{background:var(--green); box-shadow:0 0 10px rgba(87,201,138,.45)}
.ncz-state-trial .ncz-dot{background:var(--yellow); box-shadow:0 0 10px rgba(255,210,63,.5); animation:ncz-pulse 1.6s ease-in-out infinite}
.ncz-state-shipped .ncz-dot, .ncz-state-ready .ncz-dot, .ncz-state-draft .ncz-dot{animation:ncz-pulse 2s ease-in-out infinite}
.ncz-state-blocked .ncz-dot{background:var(--red); box-shadow:0 0 10px rgba(240,83,63,.5); animation:ncz-pulse 1.2s ease-in-out infinite}
.ncz-card-name{
  flex:1; min-width:0; font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ncz-card-top .ncz-badge{flex:none}
/* badge color itself comes from the existing .ncz-badge-active/trial/waiting/blocked classes (already applied in the template) */

.ncz-card-hero{flex:1; padding:22px 18px 18px; display:flex; flex-direction:column; justify-content:center}
.ncz-hero-label{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px;
  color:var(--steel); margin-bottom:8px;
}
.ncz-state-active .ncz-hero-label{color:var(--green)}
.ncz-state-trial .ncz-hero-label{color:var(--yellow)}
.ncz-state-blocked .ncz-hero-label{color:var(--red)}

.ncz-hero-days{display:flex; align-items:baseline; gap:11px}
.ncz-days{
  font-family:var(--f-mono); font-weight:700; font-size:66px; line-height:.82; color:var(--steel);
}
.ncz-state-active .ncz-days{color:var(--green); text-shadow:0 0 26px rgba(87,201,138,.45)}
.ncz-state-blocked .ncz-days{color:var(--red); text-shadow:0 0 26px rgba(240,83,63,.5)}
.ncz-hero-days-suffix{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:12px;
  color:var(--text-dim); line-height:1.15;
}

.ncz-timer{
  display:flex; align-items:baseline; gap:5px; font-family:var(--f-mono); font-weight:700;
  color:var(--yellow); text-shadow:0 0 22px rgba(255,210,63,.5); font-size:42px;
}
.ncz-timer .ncz-t-colon{font-size:.86em; animation:ncz-blink 1s steps(1) infinite}

.ncz-card-waiting{display:flex; align-items:center; gap:12px}
.ncz-wait-ring{
  flex:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--steel);
  animation:ncz-pulse 1.6s ease-in-out infinite;
}
.ncz-card-waiting span:last-child{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:21px;
  color:#c4ccd4; line-height:1.1;
}

.ncz-sub{margin-top:14px; font-family:var(--f-mono); font-size:11.5px; color:var(--text-dim); letter-spacing:.01em}
.ncz-state-trial .ncz-sub{color:#a99a52}
.ncz-state-blocked .ncz-sub{color:#e0806f}

.ncz-card-meta{display:flex; border-top:1px solid var(--border-2)}
.ncz-card-meta span{flex:1; padding:11px 15px; font-family:var(--f-mono); font-size:14px; font-weight:500; color:var(--text-bright)}
.ncz-card-meta span:first-child{border-right:1px solid var(--border-2)}
.ncz-meta-label{
  display:block; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:9.5px; color:var(--text-faint); margin-bottom:3px;
}

.ncz-card-footer{
  width:100%; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.11em; font-size:12.5px;
  font-weight:500; color:#c4ccd4; background:#171a1f; border-top:1px solid var(--border-2); padding:13px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ncz-card-footer .ncz-arrow{font-family:var(--f-mono)}

/* ===== empty state / add-router activation panel (same visual, shared selector) ===== */
.ncz-empty, .ncz-add{
  position:relative; overflow:hidden; max-width:620px; margin:20px auto; border-radius:var(--r-panel);
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2)); border:1px solid var(--border);
  border-top:2px solid var(--amber); padding:44px 40px 36px; box-shadow:0 18px 50px rgba(0,0,0,.5);
  text-align:center;
}

/* add-router screen: narrow centered column (plashka + activation panel) */
.ncz-add-page{max-width:620px; margin:0 auto}
.ncz-add-page .ncz-tg-plashka{margin-top:0; margin-bottom:16px}
.ncz-empty-icon{
  width:66px; height:66px; margin:0 auto 20px; display:grid; place-items:center; color:var(--amber);
  border:2px dashed rgba(255,171,46,.5); border-radius:15px; font-size:34px; font-family:var(--f-head); font-weight:300;
  clip-path:polygon(14% 0,100% 0,100% 86%,86% 100%,0 100%,0 14%);
}
.ncz-empty-lede{margin:0 auto 30px; max-width:400px; font-size:14.5px; line-height:1.6; color:var(--text-dim)}
.ncz-empty-lede b{color:var(--text-bright)}
.ncz-empty .ncz-code-form{margin-bottom:22px}

.ncz-code-submit{width:100%; justify-content:center; margin-top:12px}

.ncz-inset{
  display:flex; align-items:flex-start; gap:13px; margin-top:26px; padding:16px; border-radius:var(--r-field);
  background:var(--bg-inset); border:1px solid var(--border-2); text-align:left;
}
.ncz-inset-ico{
  flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  background:rgba(255,171,46,.1); border:1px solid rgba(255,171,46,.3); color:var(--amber);
  font-family:var(--f-head); font-weight:600; font-size:15px;
}
.ncz-inset div{font-size:13px; line-height:1.55; color:var(--text-dim)}
.ncz-inset b{color:var(--text-bright)}

/* ===== code field (activation code, shared list-empty + add screens) ===== */
.ncz-code-field{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.ncz-code-prefix{
  font-family:var(--f-mono); font-weight:700; font-size:26px; color:var(--amber);
  letter-spacing:.12em; padding:12px 4px;
}
.ncz-code-dash{font-family:var(--f-mono); font-size:24px; color:#565d65}
.ncz-code-part{
  width:130px; text-align:center; background:var(--bg-input); border:1px solid var(--border-3);
  border-radius:var(--r-field); padding:13px 6px; color:var(--text-bright); font-size:26px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
}
.ncz-code-part:focus{border-color:var(--amber)}
.ncz-code-part.ncz-code-error{border-color:var(--red)}
.ncz-code-hint{text-align:center; font-family:var(--f-mono); font-size:11px; color:var(--text-faint); margin-bottom:22px}

/* ===== telegram link plashka ===== */
.ncz-tg-plashka{margin-top:16px; border-radius:var(--r-panel); background:var(--bg-inset); border:1px dashed var(--border-3); padding:20px 22px; text-align:left}
.ncz-tg-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.ncz-tg-ico{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:7px;
  background:var(--tg-grad); color:#fff; font-family:var(--f-head); font-weight:700; font-size:15px;
}
.ncz-tg-title{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.07em; font-size:15px; font-weight:600; color:var(--text-bright)}
.ncz-tg-optional{
  margin-left:auto; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:10px;
  color:var(--text-faint); border:1px solid var(--border-3); padding:2px 8px; border-radius:4px; flex:none;
}
.ncz-tg-text{margin:0 0 15px; padding-left:42px; font-size:13px; line-height:1.55; color:var(--text-dim)}
.ncz-tg-form{display:flex; gap:9px; padding-left:42px}
.ncz-tg-input{
  flex:1; background:var(--bg-input); border:1px solid var(--border-3); border-radius:8px; padding:11px 14px;
  color:var(--text-bright); font-size:14px; letter-spacing:.1em; font-family:var(--f-mono);
}
.ncz-tg-input:focus{outline:none; border-color:#2aa8e0}
.ncz-tg-btn{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.08em; font-size:13px; font-weight:500;
  color:#9fd8f2; background:rgba(42,168,224,.12); border:1px solid rgba(42,168,224,.4); border-radius:8px;
  padding:0 20px; cursor:pointer; transition:all .14s ease;
}
.ncz-tg-btn:hover{background:rgba(42,168,224,.2)}
.ncz-tg-btn:active{transform:scale(.98)}

/* ===== router detail: status hero ===== */
.ncz-hero{
  position:relative; overflow:hidden; display:flex; flex-wrap:wrap; gap:26px;
  align-items:center; justify-content:space-between;
  padding:26px 30px; margin-bottom:20px; border-radius:var(--r-panel);
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2)); border:1px solid var(--border);
  border-top:2px solid var(--steel); box-shadow:0 12px 34px rgba(0,0,0,.4);
}
.ncz-hero::before{
  content:""; position:absolute; top:0; width:22%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(127,136,148,.9),transparent);
  animation:ncz-scan-x 5s linear infinite;
}
.ncz-hero.ncz-state-active{border-top-color:var(--green)}
.ncz-hero.ncz-state-active::before{background:linear-gradient(90deg,transparent,rgba(87,201,138,.9),transparent)}
.ncz-hero.ncz-state-trial{border-top-color:var(--yellow)}
.ncz-hero.ncz-state-trial::before{background:linear-gradient(90deg,transparent,rgba(255,210,63,.9),transparent)}
.ncz-hero.ncz-state-blocked{border-top-color:var(--red)}
.ncz-hero.ncz-state-blocked::before{background:linear-gradient(90deg,transparent,rgba(240,83,63,.9),transparent)}
.ncz-hero-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.ncz-hero-h1{
  margin:0 0 8px; font-family:var(--f-head); font-weight:600; font-size:38px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-head); line-height:1;
}
.ncz-sub-bright{color:#c4ccd4}
.ncz-hero-right{display:flex; align-items:baseline; gap:16px}
.ncz-hero-right .ncz-days{font-size:88px; text-shadow:0 0 30px rgba(87,201,138,.4)}
.ncz-hero.ncz-state-blocked .ncz-hero-right .ncz-days{color:var(--red); text-shadow:0 0 30px rgba(240,83,63,.4)}
.ncz-hero-right .ncz-timer{font-size:56px}

/* ===== router detail: 2-col action grid ===== */
.ncz-actions{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start}
.ncz-actions-col{display:flex; flex-direction:column; gap:18px}
@media (max-width:860px){ .ncz-actions{grid-template-columns:1fr} }

.ncz-block{
  border-radius:var(--r-panel); background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border); overflow:hidden;
}
.ncz-block-h{
  margin:0; display:flex; align-items:center; gap:10px; padding:15px 18px;
  border-bottom:1px solid var(--border-2); background:linear-gradient(180deg,var(--bg-strip),var(--bg-panel));
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:14px; font-weight:600;
  color:var(--amber);
}
.ncz-block-body{padding:18px}

/* ===== tariff cards ===== */
.ncz-plan-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ncz-plan{
  position:relative; display:flex; flex-direction:column; text-align:left; cursor:pointer;
  padding:16px 14px 15px; border-radius:10px; background:var(--bg-input); border:1px solid var(--border-3);
  transition:all .14s ease;
}
.ncz-plan-radio{position:absolute; opacity:0; width:1px; height:1px}
.ncz-plan-name{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.06em; font-size:15px; font-weight:600;
  color:var(--text-bright); margin-bottom:8px; order:1;
}
.ncz-plan-price{font-family:var(--f-mono); font-weight:700; font-size:22px; color:var(--text-bright); line-height:1; order:2}
.ncz-plan-dur{font-family:var(--f-mono); font-size:10.5px; color:var(--text-dim); margin-top:5px; order:3}
.ncz-plan-note{
  margin-top:9px; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.05em; font-size:10px;
  color:var(--steel); order:4;
}
.ncz-plan-note-green{color:var(--green)}
.ncz-plan-note-amber{color:var(--amber)}
.ncz-plan-note.ncz-dim{color:#565d65}
.ncz-plan-flag{
  position:absolute; top:-9px; right:10px; font-family:var(--f-head); text-transform:uppercase;
  letter-spacing:.08em; font-size:9px; font-weight:600; padding:2px 7px; border-radius:4px;
  color:var(--amber-ink); background:var(--amber);
}
.ncz-plan-flag-green{color:#08130c; background:var(--green)}

.ncz-plan-current{border-color:rgba(87,201,138,.5)}
.ncz-plan-downgrade{cursor:not-allowed; opacity:.55}
.ncz-plan:has(.ncz-plan-radio:checked){
  background:rgba(255,171,46,.09); border-color:var(--amber);
  box-shadow:0 0 0 1px rgba(255,171,46,.4), 0 6px 18px rgba(255,150,20,.18);
}
.ncz-plan:has(.ncz-plan-radio:checked) .ncz-plan-price{color:var(--amber-bright)}

/* ===== auto-renew toggle ===== */
.ncz-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;
  padding:13px 16px; border-radius:var(--r-field); background:var(--bg-inset); border:1px solid var(--border-2);
  cursor:pointer;
}
.ncz-toggle-label{font-family:var(--f-body); font-weight:600; font-size:14px; color:var(--text)}
.ncz-toggle-sub{font-family:var(--f-mono); font-size:11px; color:var(--text-faint); margin-top:3px}
.ncz-toggle-switch{
  flex:none; position:relative; width:50px; height:28px; border-radius:20px;
  border:1px solid #2f353c; background:#20242a; transition:all .18s ease;
}
.ncz-toggle-switch.ncz-toggle-on{border-color:var(--amber); background:#f5951a}
.ncz-toggle-knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#8b9299; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:transform .18s ease, background .18s ease;
}
.ncz-toggle-switch.ncz-toggle-on .ncz-toggle-knob{background:var(--amber-ink); transform:translateX(22px)}

.ncz-plan-submit{width:100%; justify-content:center; margin-top:12px}
.ncz-plan-submit:disabled{opacity:.5; cursor:not-allowed}

/* ===== balance ===== */
.ncz-balance{
  font-family:var(--f-mono); font-weight:700; font-size:40px; color:var(--text-bright); line-height:1;
  margin-bottom:18px;
}
.ncz-balance-cur{color:var(--amber); font-size:28px}
.ncz-chips{display:flex; gap:8px; margin-bottom:12px}
.ncz-chip{
  flex:1; font-family:var(--f-mono); font-size:13px; color:#c4ccd4; background:var(--bg-input);
  border:1px solid var(--border-3); border-radius:7px; padding:9px 0; cursor:pointer; transition:all .12s ease;
}
.ncz-chip:hover{border-color:var(--amber); color:var(--amber-bright)}
.ncz-topup-row{display:flex; gap:8px}
.ncz-topup-row .ncz-field{flex:1}
.ncz-faint{margin-top:11px; font-family:var(--f-mono); font-size:10.5px; color:var(--text-faint); background:none; border:none; padding:0}

/* ===== wifi form (detail) ===== */
.ncz-wifi-form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ncz-wifi-field{display:block}
.ncz-wifi-field .ncz-field-label{margin-bottom:7px}
.ncz-wifi-actions{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.ncz-wifi-note{margin-top:0}

/* ===== grace / trust ===== */
.ncz-grace-text{margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--text-dim)}
.ncz-grace-text b{color:#dfe4e9}
.ncz-btn-block{width:100%; text-align:center; justify-content:center}

/* =====================================================================
   Responsive / mobile (Task B6) — ported from "Мобильная версия.dc.html"
   (390px phone frames) + README §"Мобильная версия".
   NOTE: .ncz-actions and .ncz-auth-split already collapse to one column
   via existing @media (max-width:860px) rules (Tasks B3/B5) — not
   duplicated here.
   ===================================================================== */
@media (max-width:720px){
  /* --- header: compact, hide email, keep logo + «Выйти» --- */
  .ncz-header{padding:10px 16px}
  .ncz-header-left{gap:10px}
  .ncz-mark{width:30px; height:30px; font-size:13px}
  .ncz-wordmark{font-size:15px; letter-spacing:.12em}
  .ncz-header .ncz-email{display:none}
  .ncz-nav{display:none} /* self-referential "Мои роутеры" pill on the list page itself */
  .ncz-crumb{font-size:11px; margin-left:12px}

  .ncz-main{padding:16px 16px 60px}

  /* --- tap targets ≥48px --- */
  .ncz-btn,.ncz-btn-primary,.ncz-btn-outline-amber{padding:14px 16px; min-height:48px}
  .ncz-btn-primary{padding:14px 20px}

  /* --- router list: head + card grid → one column --- */
  .ncz-list-head{flex-direction:column; align-items:stretch; gap:12px}
  .ncz-list-head .ncz-btn-primary{width:100%; justify-content:center}
  .ncz-card-grid{grid-template-columns:1fr}
  .ncz-h1{font-size:30px}

  /* card-grid hero numbers, per mobile reference (list screen) */
  .ncz-card-hero .ncz-days{font-size:56px}
  .ncz-card-hero .ncz-timer{font-size:34px}

  /* --- router detail: status hero --- */
  .ncz-hero{padding:20px 18px; gap:16px}
  .ncz-hero-h1{display:none} /* name already shown in compact breadcrumb header */
  .ncz-hero-top{margin-bottom:8px}
  .ncz-hero-right .ncz-days{font-size:68px}
  .ncz-hero-right .ncz-timer{font-size:40px}

  /* --- wifi form: stack fields, full-width submit --- */
  .ncz-wifi-form{grid-template-columns:1fr}
  .ncz-wifi-actions{flex-direction:column; align-items:stretch}
  .ncz-wifi-actions .ncz-btn-outline-amber{width:100%; text-align:center}

  /* --- balance --- */
  .ncz-balance{font-size:36px}

  /* --- empty / add-router activation panel --- */
  .ncz-empty,.ncz-add{padding:28px 20px 22px; margin:12px auto}
}

@media (max-width:480px){
  /* --- activation code field: shrink groups (README: 92px parts, 20px prefix) --- */
  .ncz-code-prefix{font-size:20px}
  .ncz-code-dash{font-size:20px}
  .ncz-code-part{width:92px; font-size:20px; padding:12px 4px}

  /* --- tariff cards: stay 3-across but compact (README) --- */
  .ncz-plan{padding:13px 10px}
  .ncz-plan-name{font-size:12px}
  .ncz-plan-price{font-size:17px}
  .ncz-plan-dur{font-size:9.5px}
  .ncz-plan-note{font-size:9px}
}