/* 简洁响应式 UI，无外部依赖 */
:root{
  --bg:#0b1220;
  --card:#0f1b33;
  --text:#eaf0ff;
  --muted:#9fb0d0;
  --line:rgba(255,255,255,.12);
  --accent:#7aa2ff;
  --danger:#ff6b6b;
  --ok:#37d67a;
  --warn:#ffd166;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC","Microsoft YaHei",sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(122,162,255,.35), transparent 60%),
              radial-gradient(1000px 700px at 120% 10%, rgba(55,214,122,.25), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1024px; margin:0 auto; padding:18px}
.topbar{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.7);
  border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; gap:14px; align-items:center; justify-content:space-between; position:relative}
.nav-toggle{display:none; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text); padding:8px 10px; border-radius:12px; font-weight:800; cursor:pointer}
@media (max-width: 768px){
  .nav-toggle{display:block}
  .nav{display:none; position:absolute; left:12px; right:12px; top:56px; flex-direction:column; align-items:stretch; gap:6px; padding:10px; border:1px solid var(--line); border-radius:16px; background: rgba(11,18,32,.92); box-shadow: 0 14px 40px rgba(0,0,0,.35);
    max-height: calc(100vh - 72px);
    overflow:auto;
  }
  .nav.open{display:flex}
  .nav a{width:100%; padding:12px 12px}
}
.brand{font-weight:800; letter-spacing:.5px}
.nav{display:flex; gap:10px; align-items:center; justify-content:flex-end}
.nav a{
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--text);
  opacity:.92;
}
.nav a:hover{border-color:var(--line); text-decoration:none}
.nav a.muted{color:var(--muted)}
.nav a.danger{color:var(--danger)}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:760px){.grid.cols-2{grid-template-columns:1fr}}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.h1{font-size:26px; margin:0 0 6px}
.p{margin:0; color:var(--muted); line-height:1.7}
.row{display:flex; gap:12px; flex-wrap:wrap}
.input, select, textarea{
  width:100%;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  color:var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
label{display:block; margin:8px 0 6px; color:var(--muted); font-size:13px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(122,162,255,.18);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background: rgba(255,255,255,.06)}
.btn.danger{background: rgba(255,107,107,.18)}
.btn.ok{background: rgba(55,214,122,.16)}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px; border:1px solid var(--line)}
.table th,.table td{padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.table th{color:var(--muted); font-weight:700; background: rgba(255,255,255,.03)}
.table tr:last-child td{border-bottom:none}
.badge{
  display:inline-flex;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.badge.ok{color:var(--ok); border-color: rgba(55,214,122,.35)}
.badge.warn{color:var(--warn); border-color: rgba(255,209,102,.35)}
.badge.danger{color:var(--danger); border-color: rgba(255,107,107,.35)}
.alert{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.alert.ok{border-color:rgba(55,214,122,.35)}
.alert.danger{border-color:rgba(255,107,107,.35)}
.alert.warn{border-color:rgba(255,209,102,.35)}
.footer{border-top:1px solid var(--line); margin-top:26px; padding:6px 0; background: rgba(11,18,32,.6); text-align:center}
.muted{color:var(--muted)}
.small{font-size:12px; color:var(--muted)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
/* 业务类型彩色卡片（兼容 PC/手机） */
.type-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}
.type-option{display:block}
.type-option input{display:none}
.type-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 12px;
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease;
}
.type-card .tname{font-weight:800}
.type-card .tmeta{margin-top:6px; font-size:12px; opacity:.85}
.type-card:hover{filter:brightness(1.08)}
.type-option input:checked + .type-card{
  border-color: var(--c);
  box-shadow: 0 0 0 2px rgba(0,0,0,.0), 0 0 0 2px var(--c);
  background: rgba(255,255,255,.06);
}
.type-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--c);
  background: rgba(255,255,255,.04);
  color: var(--c);
  font-weight:800; font-size:12px;
}


/* Copy helpers */
.copy-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.copy-text{flex:1; min-width:120px}
.btn-copy{border:1px solid var(--line); background:transparent; color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px}
.btn-copy:hover{border-color:rgba(255,255,255,.25)}
.btn-copy.copied{border-color:var(--ok)}
@media (max-width:768px){.btn-copy{padding:8px 12px; font-size:13px}}

/* Mobile nav hotfix */
.topbar .container{position:relative}
.nav{z-index:1200}
.nav-toggle{z-index:1300}

/* === Hotfix: ensure mobile nav collapsed by default (iOS Safari compatible) === */
@media (max-width: 768px){
  .topbar .container{ position: relative; }
  .topbar .nav-toggle{ display:block; }
  .topbar .nav{
    display:none !important;
    position:absolute;
    left:12px; right:12px;
    top:56px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background: rgba(11,18,32,.92);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    max-height: calc(100vh - 72px);
    overflow:auto;
    z-index: 1200;
  }
  .topbar .nav.open{ display:flex !important; }
  .topbar .nav a{ width:100%; padding:12px 12px; }
}


/* Copy cell layout to avoid overlap (requirements/details) */
.copy-cell{max-width:420px}
.copy-text{white-space:pre-wrap; word-break:break-word}
.copy-actions{margin-top:6px; display:flex; justify-content:flex-end}
@media (max-width:768px){
  .copy-cell{max-width:260px; min-width:220px}
}