/* tentaclee — 科技风 · 机械章鱼主题
   dark HUD / mech-octopus design system */

:root{
  --bg:#05070d;
  --bg-deep:#03050a;
  --panel:rgba(12,19,33,.86);
  --panel-soft:rgba(16,25,42,.72);
  --line:rgba(80,235,215,.13);
  --line-soft:rgba(140,180,210,.10);
  --line-strong:rgba(80,235,215,.36);
  --cyan:#37f2d2;
  --cyan-2:#22b8d6;
  --violet:#8b7dff;
  --pink:#ff4d9d;
  --red:#ff5d6c;
  --amber:#ffc857;
  --text:#dcebf5;
  --text-strong:#f2fbff;
  --muted:#7d90a6;
  --muted-2:#556577;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
  --sans:"Inter","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --radius:14px;
  --shadow:0 24px 60px -32px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.02) inset;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 82% -12%,rgba(55,242,210,.10),transparent 62%),
    radial-gradient(900px 520px at -10% 108%,rgba(139,125,255,.12),transparent 60%),
    linear-gradient(180deg,var(--bg-deep),var(--bg) 42%,#060a12 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* 网格底纹 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(90,220,210,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,220,210,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}

/* 顶部扫描光带 */
body::after{
  content:"";
  position:fixed;
  left:0;right:0;top:0;height:220px;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(55,242,210,.06),transparent);
  animation:bandShift 12s ease-in-out infinite alternate;
}

@keyframes bandShift{from{opacity:.45}to{opacity:.95}}

a{color:var(--cyan);text-decoration:none}
a:hover{color:#8ffff0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:.01em;color:var(--text-strong)}
p{margin:0}
code,kbd,pre{font-family:var(--mono)}

::selection{background:rgba(55,242,210,.28);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:rgba(120,170,200,.22);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(55,242,210,.4)}

/* ---------- 布局骨架 ---------- */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:252px;
  z-index:40;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,rgba(9,14,25,.96),rgba(6,10,18,.98));
  border-right:1px solid var(--line);
  box-shadow:24px 0 60px -40px #000;
  backdrop-filter:blur(8px);
}
.sidebar::after{
  content:"";
  position:absolute;inset:0 0 0 auto;width:1px;
  background:linear-gradient(180deg,transparent,rgba(55,242,210,.45),transparent);
  animation:rail 6s linear infinite;
}
@keyframes rail{0%,100%{opacity:.15}50%{opacity:.7}}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 20px 18px;
  border-bottom:1px solid var(--line-soft);
}
.brand-mark{
  width:46px;height:46px;
  flex:none;
  filter:drop-shadow(0 0 12px rgba(255,120,180,.55));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-text strong{
  font-family:var(--mono);
  font-size:17px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-strong);
  white-space:nowrap;
}
.brand-text strong b{color:var(--cyan);font-weight:700}
.brand-text span{font-size:11px;color:var(--muted-2);letter-spacing:.18em;margin-top:3px;white-space:nowrap}

.sidebar nav{
  flex:1;
  overflow-y:auto;
  padding:14px 12px 18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-title{
  margin:16px 8px 6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-2);
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(80,235,215,.22),transparent);
}
.sidebar nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:13.5px;
  border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.sidebar nav a .nav-ico{
  width:18px;height:18px;flex:none;
  color:var(--muted-2);
  transition:color .18s,filter .18s;
}
.sidebar nav a:hover{
  color:var(--text-strong);
  background:rgba(120,190,210,.07);
  border-color:var(--line-soft);
}
.sidebar nav a:hover .nav-ico{color:var(--cyan)}
.sidebar nav a.active{
  color:#eafffb;
  background:linear-gradient(90deg,rgba(55,242,210,.18),rgba(55,242,210,.02) 70%,transparent);
  border-color:rgba(55,242,210,.28);
  box-shadow:0 0 24px -12px rgba(55,242,210,.7) inset;
}
.sidebar nav a.active .nav-ico{color:var(--cyan);filter:drop-shadow(0 0 6px rgba(55,242,210,.8))}
.sidebar nav a.active::before{
  content:"";
  position:absolute;
  left:-1px;top:50%;
  transform:translateY(-50%);
  width:3px;height:18px;
  border-radius:3px;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}

.nav-group{
  margin:0;
}
.nav-group>summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  margin-top:16px;
  padding:2px 8px 2px 2px;
  border-radius:6px;
}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::marker{content:""}
.nav-group>summary::before{
  content:"";
  width:5px;height:5px;
  flex:none;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);
  transition:transform .2s ease;
}
.nav-group[open]>summary::before{
  transform:rotate(45deg) translate(-1px,-1px);
}
.nav-group>summary:hover{color:var(--muted)}
.nav-group>summary:hover::after{background:linear-gradient(90deg,rgba(80,235,215,.45),transparent)}
.nav-flag{
  margin-left:6px;
  padding:0 5px;
  border-radius:5px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--amber);
  background:rgba(255,200,87,.12);
  border:1px solid rgba(255,200,87,.28);
}
.nav-group-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:2px 0 0 10px;
  padding-left:8px;
  border-left:1px solid var(--line-soft);
}
.nav-group-body a{
  font-size:13px;
  padding:8px 10px;
}
.nav-group-body a .nav-ico{width:16px;height:16px}
.sidebar-foot{
  padding:14px 18px 18px;
  border-top:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--muted-2);
}
.status-chip{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);text-transform:uppercase}
.status-chip .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.shell{margin-left:252px;min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 28px;
  height:64px;
  background:rgba(6,10,18,.72);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px);
}
.topbar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(55,242,210,.5),transparent);
  opacity:.70;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-title b{color:var(--cyan);font-weight:600}
.menu-toggle{
  display:none;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  border-radius:9px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);
  color:var(--text);
  cursor:pointer;
}
.topbar-user{display:flex;align-items:center;gap:12px}
.user-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 6px;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.025);
  font-size:13px;
}
.avatar{
  width:28px;height:28px;flex:none;
  display:grid;place-items:center;
  border-radius:9px;
  font-family:var(--mono);
  font-size:12.5px;font-weight:600;
  color:#04241f;
  text-transform:uppercase;
  background:linear-gradient(140deg,#6bffe6,#37f2d2 48%,#22b8d6);
  box-shadow:0 0 14px -2px rgba(55,242,210,.75),inset 0 0 0 1px rgba(255,255,255,.35);
}
.link-muted{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);
  font-size:13px;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid transparent;
  transition:.18s;
}
.link-muted:hover{color:var(--pink);border-color:rgba(255,77,157,.35);background:rgba(255,77,157,.08)}

.content{
  flex:1;
  padding:28px 30px 24px;
  max-width:1340px;
  width:100%;
}

.footer{
  padding:16px 30px 22px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;
}
.footer::before{content:"//";color:var(--cyan);opacity:.6}

/* ---------- 页头 ---------- */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.page-head h2{
  position:relative;
  display:flex;align-items:center;gap:11px;
  font-size:20px;
  letter-spacing:.02em;
}
.page-head h2::before{
  content:"";
  width:4px;height:20px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(55,242,210,.1));
  box-shadow:0 0 14px rgba(55,242,210,.65);
}
.page-head p{color:var(--muted);font-size:12.5px;margin-top:2px}
.page-head > div{display:flex;flex-direction:column;gap:2px}

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(17,27,45,.92),rgba(9,15,26,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.card::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top/16px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left top/1px 16px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right bottom/16px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right bottom/1px 16px no-repeat;
  opacity:.42;
  transition:opacity .22s;
}
.card:hover{border-color:rgba(80,235,215,.26)}
.card:hover::before{opacity:.85}
.card > h3{
  display:flex;align-items:center;gap:9px;
  font-size:14px;
  letter-spacing:.04em;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(120,180,210,.14);
  color:var(--text-strong);
}
.card > h3::before{
  content:"";
  width:6px;height:6px;
  border-radius:1px;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  transform:rotate(45deg);
}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > *{min-width:0}

/* ---------- 统计块 ---------- */
.stat{
  position:relative;
  overflow:hidden;
  padding:18px 20px 20px;
}
.stat > span{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.stat > strong{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--mono);
  font-size:29px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
  background:linear-gradient(120deg,#ffffff,var(--cyan) 78%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(55,242,210,.22));
}
.stat > strong small{font-size:11px;letter-spacing:.1em;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stat::after{
  content:"";
  position:absolute;
  right:-30px;bottom:-40px;
  width:120px;height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(55,242,210,.16),transparent 65%);
  pointer-events:none;
}
.stat.is-violet > strong{background:linear-gradient(120deg,#fff,var(--violet) 80%);-webkit-background-clip:text;background-clip:text}
.stat.is-violet::after{background:radial-gradient(circle,rgba(139,125,255,.18),transparent 65%)}
.stat.is-pink > strong{background:linear-gradient(120deg,#fff,var(--pink) 80%);-webkit-background-clip:text;background-clip:text}
.stat.is-pink::after{background:radial-gradient(circle,rgba(255,77,157,.16),transparent 65%)}
.stat.is-amber > strong{background:linear-gradient(120deg,#fff,var(--amber) 80%);-webkit-background-clip:text;background-clip:text}

/* ---------- 表格 ---------- */
.table-card{padding:8px 6px 6px}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.table th,.table td{
  padding:11px 14px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid rgba(140,180,210,.08);
}
.table thead th{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
  border-bottom:1px solid rgba(80,235,215,.18);
  white-space:nowrap;
}
.table tbody tr{transition:background .16s}
.table-hover tbody tr:hover{background:rgba(55,242,210,.045)}
.table-hover tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--cyan)}
.table tbody tr:last-child td{border-bottom:none}
.table td code{
  font-size:12px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(55,242,210,.10);
  border:1px solid rgba(55,242,210,.20);
  color:#a9fff0;
}
.table td.nowrap,.table th.nowrap{white-space:nowrap}
.table-kv tr > th{width:38%;color:var(--muted);font-weight:500}
.table-kv tr > td{padding-left:2px}

/* ---------- 徽章 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.badge-0{color:#5bffd9;background:rgba(55,242,210,.10);border-color:rgba(55,242,210,.34)}
.badge-1{color:var(--muted);background:rgba(140,180,210,.08);border-color:rgba(140,180,210,.22)}
.badge-2{color:var(--amber);background:rgba(255,200,87,.10);border-color:rgba(255,200,87,.32)}
.badge-3{color:var(--pink);background:rgba(255,77,157,.10);border-color:rgba(255,77,157,.34)}
.badge-plain{color:var(--cyan);background:rgba(55,242,210,.08);border-color:rgba(55,242,210,.24)}
.badge-4{color:var(--amber);background:rgba(255,200,87,.10);border-color:rgba(255,200,87,.32)}

/* ---------- 状态筛选标签 ---------- */
.filter-tabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(120,190,210,.12);
}
.filter-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;
  font-size:12.5px;color:var(--muted);text-decoration:none;
  border:1px solid rgba(120,190,210,.20);
  background:rgba(120,190,210,.04);
  transition:color .18s,border-color .18s,background .18s;
}
.filter-tab:hover{color:#e8fffb;border-color:rgba(55,242,210,.45);background:rgba(55,242,210,.08)}
.filter-tab.is-active{
  color:#031318;
  background:linear-gradient(135deg,#4ff8dc,#1fb6d4);
  border-color:transparent;font-weight:600;
}
.filter-tabs form.inline{margin:0 0 0 auto;display:inline-flex}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  color:var(--text);
  background:rgba(120,190,210,.06);
  border:1px solid rgba(120,190,210,.22);
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .12s;
  -webkit-appearance:none;
  appearance:none;
}
.btn:hover{
  color:#f2fffd;
  border-color:rgba(55,242,210,.55);
  background:rgba(55,242,210,.10);
  box-shadow:0 0 0 3px rgba(55,242,210,.08),0 10px 30px -18px rgba(55,242,210,.9);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn-primary{
  color:#031318;
  background:linear-gradient(135deg,#4ff8dc,#1fb6d4);
  border-color:transparent;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 12px 34px -18px rgba(55,242,210,1);
}
.btn-primary:hover{
  color:#02100f;
  background:linear-gradient(135deg,#7dffe9,#2cc9e4);
  border-color:transparent;
  box-shadow:0 16px 40px -18px rgba(55,242,210,1);
}
.btn-danger{
  color:#ffb3cd;
  background:rgba(255,77,157,.08);
  border-color:rgba(255,77,157,.38);
}
.btn-danger:hover{
  color:#fff;
  background:rgba(255,77,157,.18);
  border-color:rgba(255,77,157,.7);
  box-shadow:0 0 0 3px rgba(255,77,157,.10);
}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:8px}
.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none}

.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.actions form{margin:0;display:inline-flex}

/* ---------- 表单 ---------- */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
  margin-bottom:14px;
}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select,textarea{
  display:block;
  width:100%;
  margin-top:7px;
  padding:10px 13px;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--text);
  background:rgba(4,9,17,.9);
  border:1px solid rgba(130,175,205,.20);
  border-radius:10px;
  transition:border-color .18s,box-shadow .18s,background .18s;
  -webkit-appearance:none;
  appearance:none;
}
textarea{min-height:150px;resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.65}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:hover,select:hover,textarea:hover{border-color:rgba(130,175,205,.34)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(55,242,210,.65);
  background:rgba(6,14,24,.95);
  box-shadow:0 0 0 3px rgba(55,242,210,.11);
}
select{
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2337f2d2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
select option{background:#0a1220;color:var(--text)}
input[type=checkbox]{width:16px;height:16px;accent-color:#37f2d2}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 14px}
.form-inline label{min-width:180px;flex:1 1 180px;margin-bottom:10px}
.form-inline .btn{margin-bottom:10px}
.form-actions{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-top:18px;padding-top:16px;
  border-top:1px dashed rgba(140,180,210,.14);
}
.form-actions .btn{margin:0}

.hint{font-size:12px;color:var(--muted-2);line-height:1.7}
.hint code,.hint b{color:var(--cyan)}
/* ---------- 分段表单 ---------- */
form > .card + .card,.content > .card + .card{margin-top:18px}
.form-grid .form-wide{grid-column:1/-1}
.form-grid textarea{min-height:64px}
label.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer}
label.check input{margin:0;flex:none}
.hint a{color:var(--cyan);border-bottom:1px dotted rgba(55,242,210,.5)}

/* ---------- 证书信息 ---------- */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px}
.meta-item{display:flex;flex-direction:column;gap:5px;min-width:0}
.meta-item span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.meta-item b{font-weight:500;font-size:12.5px;color:var(--text);word-break:break-all;line-height:1.6}

/* ---------- 文件上传 ---------- */
.file-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.file-row input[type=file]{
  flex:1 1 220px;min-width:0;
  padding:9px 12px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
  background:rgba(4,9,17,.9);
  border:1px dashed rgba(130,175,205,.28);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .18s,color .18s;
}
.file-row input[type=file]:hover{border-color:rgba(55,242,210,.55);color:var(--text)}
.file-row input[type=file]::file-selector-button{
  margin-right:10px;padding:4px 10px;
  font-family:var(--sans);font-size:12px;
  color:var(--cyan);background:rgba(55,242,210,.1);
  border:1px solid rgba(55,242,210,.34);border-radius:7px;
  cursor:pointer;
}


/* ---------- 提示条 ---------- */
.alert{
  position:relative;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px 12px 15px;
  margin-bottom:18px;
  border-radius:12px;
  border:1px solid var(--line-soft);
  border-left-width:3px;
  background:rgba(16,25,42,.85);
  font-size:13px;
}
.alert::before{
  content:"";
  flex:none;
  width:6px;height:6px;margin-top:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.alert-success{color:#8dffe9;border-left-color:var(--cyan);background:rgba(55,242,210,.07);border-color:rgba(55,242,210,.24)}
.alert-danger,.alert-error{color:#ffc0d6;border-left-color:var(--pink);background:rgba(255,77,157,.08);border-color:rgba(255,77,157,.26)}
.alert-warning{color:#ffe6a8;border-left-color:var(--amber);background:rgba(255,200,87,.07);border-color:rgba(255,200,87,.24)}
.alert-info{color:#b9c8ff;border-left-color:var(--violet);background:rgba(139,125,255,.08);border-color:rgba(139,125,255,.24)}

/* ---------- 代码块 ---------- */
.code{
  position:relative;
  margin:0;
  padding:18px 18px 18px;
  max-height:420px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:#9ff5e4;
  background:linear-gradient(180deg,#04080f,#050b14);
  border:1px solid rgba(55,242,210,.18);
  border-radius:12px;
  box-shadow:inset 0 0 40px -20px rgba(55,242,210,.5);
  white-space:pre;
  tab-size:2;
}
.code::before{
  content:"● ● ●";
  position:absolute;top:7px;left:14px;
  font-size:8px;
  letter-spacing:5px;
  color:rgba(255,255,255,.18);
}
.code{padding-top:30px}
.markdown code{
  padding:2px 6px;border-radius:6px;
  background:rgba(55,242,210,.10);
  border:1px solid rgba(55,242,210,.18);
  color:#a9fff0;font-size:12.5px;
}
.markdown pre{
  padding:14px;border-radius:10px;background:#04080f;
  border:1px solid rgba(55,242,210,.16);overflow:auto;
}
.markdown p{margin:0 0 10px}
.markdown ul,.markdown ol{margin:0 0 10px;padding-left:20px}
.markdown li{margin:3px 0}
.markdown blockquote{
  margin:0 0 10px;padding:8px 14px;
  border-left:2px solid rgba(55,242,210,.5);
  background:rgba(55,242,210,.05);
  color:var(--muted);
}
.markdown h1,.markdown h2,.markdown h3{font-size:15px;margin:14px 0 8px;color:var(--text-strong)}
.markdown a{text-decoration:underline;text-decoration-color:rgba(55,242,210,.4)}

ul.plain{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.9}
ul.plain li::marker{color:rgba(55,242,210,.6)}
ol.plain li::marker{color:rgba(55,242,210,.75);font-family:var(--mono);font-size:12px}

.empty{
  margin:0;
  padding:30px 20px;
  text-align:center;
  color:var(--muted-2);
  font-size:13px;
  border:1px dashed rgba(140,180,210,.16);
  border-radius:12px;
}
.empty a{color:var(--cyan);border-bottom:1px dotted rgba(55,242,210,.5)}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 6px 8px;font-size:12.5px;color:var(--muted)}
.pager a{display:inline-flex;align-items:center;padding:5px 12px;border-radius:8px;border:1px solid rgba(120,190,210,.22);color:var(--text)}
.pager a:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- 仪表盘 HERO ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  overflow:hidden;
  padding:26px 30px;
  margin-bottom:20px;
  border-radius:18px;
  border:1px solid rgba(55,242,210,.20);
  background:
    radial-gradient(600px 240px at 88% 20%,rgba(55,242,210,.14),transparent 70%),
    radial-gradient(400px 200px at 70% 110%,rgba(139,125,255,.16),transparent 70%),
    linear-gradient(120deg,rgba(12,22,38,.96),rgba(8,13,23,.96));
  box-shadow:var(--shadow);
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(90,220,210,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,220,210,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,#000,transparent 75%);
  mask-image:linear-gradient(100deg,#000,transparent 75%);
  pointer-events:none;
}
.hero-text{position:relative;z-index:1;min-width:0}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cyan);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(55,242,210,.28);
  background:rgba(55,242,210,.06);
  margin-bottom:14px;
}
.hero-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 2.4s infinite}
.hero h2{font-size:26px;letter-spacing:.01em;margin-bottom:8px}
.hero h2 b{color:var(--cyan);font-weight:700}
.hero p{color:var(--muted);font-size:13px;max-width:52ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;
  border-radius:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
  border:1px solid rgba(140,180,210,.16);
  background:rgba(255,255,255,.02);
}
.chip b{color:var(--text-strong);font-weight:600}
.hero-octo{
  position:relative;
  flex:none;
  width:252px;height:252px;
  display:grid;place-items:center;
}
.hero-octo img{
  width:100%;height:100%;
  filter:drop-shadow(0 0 30px rgba(255,120,180,.45));
  animation:float 7s ease-in-out infinite;
}
.hero-octo::before,.hero-octo::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(55,242,210,.28);
  inset:6%;
  animation:spin 26s linear infinite;
}
.hero-octo::after{inset:0;border-style:solid;border-color:rgba(139,125,255,.16);animation-direction:reverse;animation-duration:38s}
@keyframes spin{to{transform:rotate(360deg)}}

.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* ---------- 访客 / 登录页 ---------- */
body.is-guest{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  min-height:100vh;
}
body.is-guest::before{
  background-image:
    linear-gradient(rgba(90,220,210,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,220,210,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 70%);
}
.guest{
  position:relative;
  z-index:1;
  width:min(500px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.guest-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.guest-mascot{
  position:relative;
  width:132px;height:132px;
  margin-bottom:6px;
  display:grid;place-items:center;
}
.guest-mascot img{
  width:100%;height:100%;
  filter:drop-shadow(0 0 22px rgba(255,120,180,.5));
  animation:float 6.5s ease-in-out infinite;
}
.guest-mascot::before{
  content:"";
  position:absolute;inset:-8%;
  border-radius:50%;
  border:1px dashed rgba(55,242,210,.30);
  animation:spin 30s linear infinite;
}
.guest-head h1{
  font-family:var(--mono);
  font-size:22px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--text-strong);
  text-shadow:0 0 30px rgba(55,242,210,.35);
}
.guest-head p{color:var(--muted);font-size:12.5px;letter-spacing:.06em;max-width:38ch}

.auth-card{width:100%;padding:26px 26px 22px}
.auth-card > h2{
  font-size:15px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:var(--mono);
  color:var(--muted);
  margin-bottom:18px;
  display:flex;align-items:center;gap:9px;
}
.auth-card > h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(55,242,210,.26),transparent)}
.auth-card .btn{width:100%;margin-top:6px}
.auth-links{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;
  border-top:1px dashed rgba(140,180,210,.14);
  font-size:12.5px;
}
.auth-links a{color:var(--muted)}
.auth-links a:hover{color:var(--cyan)}
.guest-footer{
  border-top:none;
  text-align:center;
  justify-content:center;
  padding:0;
  font-size:10px;
}
.error-card{width:100%;text-align:center;padding:34px 26px}
.error-card .error-code{
  font-family:var(--mono);
  font-size:52px;
  font-weight:700;
  letter-spacing:.08em;
  background:linear-gradient(120deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(55,242,210,.35));
  line-height:1;
  margin-bottom:10px;
}
.error-card p{color:var(--muted);margin:6px 0 20px}

/* 图标精灵 */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 折叠/覆盖层 */
.sidebar-overlay{display:none}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .sidebar{transform:translateX(-100%);transition:transform .26s ease;box-shadow:40px 0 80px -20px #000}
  .sidebar.open{transform:none}
  .shell{margin-left:0}
  .topbar{padding:0 18px}
  .menu-toggle{display:inline-flex}
  .content{padding:22px 18px}
  .sidebar-overlay.open{
    display:block;
    position:fixed;inset:0;
    background:rgba(3,6,12,.7);
    backdrop-filter:blur(2px);
    z-index:35;
  }
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .grid-4{grid-template-columns:minmax(0,1fr)}
  .hero{flex-direction:column;align-items:flex-start;padding:22px}
  .hero-octo{width:150px;height:150px;align-self:center}
  .page-head{align-items:flex-start}
  .topbar-title{display:none}
  .footer{padding:14px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- 细节增强 ---------- */
.topbar.is-stuck{box-shadow:0 12px 34px -28px #000;background:rgba(5,9,16,.9)}
.topbar-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);padding:4px 10px;border-radius:999px;
  border:1px solid rgba(55,242,210,.24);background:rgba(55,242,210,.05);
}
.topbar-status .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 2.2s infinite}

.alert-close{
  margin-left:auto;flex:none;
  width:22px;height:22px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:15px;
  transition:.16s;
}
.alert-close:hover{opacity:1;border-color:currentColor;background:rgba(255,255,255,.06)}

.btn.is-copied{color:#8dffe9;border-color:rgba(55,242,210,.7);background:rgba(55,242,210,.14)}

.card-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-toolbar h3{margin:0;padding:0;border:none}
.card-toolbar h3::before{display:none}

.footer span:last-child{margin-left:auto}
@media (max-width:720px){
  .topbar-status{display:none}
  .footer span:last-child{display:none}
}

.nav-ico,.ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.link-muted .ico{width:15px;height:15px}

/* ---------- 卡片头部 / 复制按钮 ---------- */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h3{margin:0}
.copy-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  border-radius:8px;
  border:1px solid rgba(55,242,210,.28);
  background:rgba(55,242,210,.08);
  color:var(--cyan);
  font-size:12px;
  font-family:var(--mono);
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease,color .18s ease;
}
.copy-btn:hover{background:rgba(55,242,210,.16);box-shadow:0 0 18px -6px rgba(55,242,210,.9)}
.copy-btn.is-copied{background:var(--cyan);color:#04241f;border-color:var(--cyan)}
.token-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- 入场动效 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 错误页 ---------- */
.error-mark{width:120px;height:120px;margin:0 auto 6px;opacity:.9}
.error-mark img{width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(255,93,108,.45)) saturate(.9)}
.error-card{text-align:center;padding:40px 24px}
.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* ---------- 窄屏表格横向滚动 ---------- */
@media (max-width: 860px){
  .table-card{overflow-x:auto}
  .table{min-width:600px}
  .table-kv{min-width:0}
}

/* ---------- 隧道类型标记 ---------- */
.type{
  display:inline-block;
  padding:2px 9px;
  border-radius:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(140,180,210,.22);
  background:rgba(140,180,210,.06);
  color:#a9c3d6;
}
.type-tcp{color:#7ef2dc;border-color:rgba(55,242,210,.35);background:rgba(55,242,210,.08)}
.type-udp{color:#b9afff;border-color:rgba(139,125,255,.35);background:rgba(139,125,255,.09)}
.type-http{color:#ffd88a;border-color:rgba(255,200,87,.32);background:rgba(255,200,87,.08)}
.type-https{color:#ff9dc4;border-color:rgba(255,77,157,.32);background:rgba(255,77,157,.08)}
.type-stcp,.type-xtcp{color:#8dffb0;border-color:rgba(120,255,170,.3);background:rgba(120,255,170,.08)}

/* ---------- 滚动条 ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(55,242,210,.32) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(55,242,210,.42),rgba(34,184,214,.32));
  border-radius:9px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(55,242,210,.6);background-clip:padding-box}
.code{scrollbar-width:thin}

/* --- 功能开关（后台复选框行） --- */
.field-check{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(10,18,30,.55);cursor:pointer;transition:border-color .2s,background .2s}
.field-check:hover{border-color:rgba(55,242,210,.32);background:rgba(12,24,38,.7)}
.field-check input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px;height:26px;margin:1px 0 0;border-radius:999px;border:1px solid rgba(80,235,215,.28);background:rgba(6,13,22,.9);cursor:pointer;transition:background .22s,border-color .22s}
.field-check input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .22s,background .22s,box-shadow .22s}
.field-check input:checked{border-color:rgba(55,242,210,.7);background:linear-gradient(90deg,rgba(55,242,210,.28),rgba(34,184,214,.3))}
.field-check input:checked::after{left:23px;background:linear-gradient(180deg,#b8fff2,var(--cyan));box-shadow:0 0 12px rgba(55,242,210,.75)}
.field-check input:focus-visible{outline:2px solid rgba(55,242,210,.55);outline-offset:2px}
.field-check-text{display:flex;flex-direction:column;gap:5px}
.field-check-text b{font-size:14px;color:var(--text)}
.field-check-text small{color:var(--muted);font-size:12.5px;line-height:1.65}

/* ---------- 单选卡片 ---------- */
.mode-options{display:grid;gap:10px}
.mode-option{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:rgba(10,18,30,.55);cursor:pointer;
  transition:border-color .2s,background .2s;
}
.mode-option:hover{border-color:rgba(55,242,210,.32);background:rgba(12,24,38,.7)}
.mode-option:has(input:checked){border-color:rgba(55,242,210,.55);background:rgba(55,242,210,.07)}
.mode-option input{
  appearance:none;-webkit-appearance:none;flex:none;position:relative;
  width:18px;height:18px;margin:3px 0 0;border-radius:50%;
  border:1px solid rgba(80,235,215,.34);background:rgba(6,13,22,.9);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.mode-option input::after{content:"";position:absolute;inset:4px;border-radius:50%;background:transparent;transition:background .2s,box-shadow .2s}
.mode-option input:checked{border-color:rgba(55,242,210,.8)}
.mode-option input:checked::after{background:var(--cyan);box-shadow:0 0 10px rgba(55,242,210,.8)}
.mode-option input:focus-visible{outline:2px solid rgba(55,242,210,.55);outline-offset:2px}
.mode-text{display:flex;flex-direction:column;gap:5px}
.mode-text b{font-size:14px;color:var(--text)}
.mode-text small{color:var(--muted);font-size:12.5px;line-height:1.65}

/* ---- deploy page ---- */
.inline-form{display:flex;align-items:flex-end;gap:12px;margin:14px 0 6px;flex-wrap:wrap}
.inline-form label{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.deploy-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.deploy-item{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:10px}
.deploy-item header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.deploy-actions{display:flex;gap:8px;flex-wrap:wrap}
.deploy-item details summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.deploy-item details[open] summary{color:var(--cyan)}
.deploy-item .code{max-height:280px;margin-top:8px;font-size:11.5px}
.steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px}
.steps code{font-family:var(--mono);font-size:12px;background:rgba(55,242,210,.08);padding:1px 6px;border-radius:5px}
.muted code{font-family:var(--mono);font-size:12px}

/* one line installer blocks */
.install-block { margin: 14px 0 4px; }
.install-block + .install-block { margin-top: 22px; }
.install-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.install-head b { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--cyan); }
.install-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.install-block .code { margin: 0 0 6px; }
.install-block .muted { margin: 0; font-size: 12px; }

/* ---------- 第三方账号登录（OAuth） ---------- */
.oauth-block { margin-top: 16px; }
.oauth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; color: var(--muted); font-size: 12px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,150,190,.28), transparent); }
.oauth-divider span { white-space: nowrap; letter-spacing: .06em; }
.oauth-buttons { display: flex; flex-direction: column; gap: 8px; }
.btn-oauth { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.oauth-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oauth-ico.use-fill { fill: currentColor; stroke: none; }

/* ---------- 第三方账号绑定列表 ---------- */
.oauth-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.oauth-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(120,150,190,.16); border-radius: 10px; background: rgba(12,20,32,.55); }
.oauth-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oauth-row-main strong { font-size: 13.5px; }
.oauth-row-main .hint { font-size: 12px; word-break: break-all; }

/* Registration e-mail verification */
.input-group{display:flex;gap:8px;align-items:stretch}
.input-group input{flex:1;min-width:0}
.code-btn{white-space:nowrap;flex:0 0 auto;padding:0 14px}
.code-btn:disabled{opacity:.55;cursor:not-allowed}
.hint.hint-error{color:var(--red,#ff5d6c)}