:root{
  --bg0:#f5f5f7;
  --bg1:#eef2f7;
  --bg2:#e8edf5;
  --panel:rgba(255,255,255,.68);
  --panel2:rgba(255,255,255,.52);
  --panel3:rgba(255,255,255,.86);
  --panel-solid:#ffffff;
  --panel-soft:#f8fafc;
  --border:rgba(15,23,42,.08);
  --border2:rgba(15,23,42,.14);
  --text:#334155;
  --text-strong:#0f172a;
  --muted:#667085;
  --muted2:#98a2b3;
  --primary:#0071e3;
  --primary-strong:#0066cc;
  --primary-soft:rgba(0,113,227,.10);
  --accent:#5ac8fa;
  --accent-soft:rgba(90,200,250,.14);
  --success:#34c759;
  --warning:#ff9f0a;
  --danger:#ff3b30;
  --gold:#b38b3a;
  --shadow:0 24px 72px rgba(15,23,42,.10);
  --shadow2:0 14px 36px rgba(15,23,42,.08);
  --radius:22px;
  --radius2:16px;
  --line-glow:0 0 0 1px rgba(0,113,227,.10), 0 8px 28px rgba(0,113,227,.10);
  --mode-primary-top:#0a84ff;
  --mode-primary-bottom:#0071e3;
  --mode-primary-rgb:0,113,227;
  --mode-accent-rgb:90,200,250;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(980px 520px at 10% -10%,rgba(var(--mode-primary-rgb),.12),transparent 60%),
    radial-gradient(880px 460px at 92% -8%,rgba(var(--mode-accent-rgb),.12),transparent 58%),
    radial-gradient(620px 360px at 50% 120%,rgba(255,255,255,.75),transparent 62%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
}

body[data-mode="quick"]{
  --primary:#0071e3;
  --primary-strong:#0066cc;
  --primary-soft:rgba(0,113,227,.10);
  --accent:#5ac8fa;
  --accent-soft:rgba(90,200,250,.14);
  --line-glow:0 0 0 1px rgba(0,113,227,.10), 0 8px 28px rgba(0,113,227,.10);
  --mode-primary-top:#0a84ff;
  --mode-primary-bottom:#0071e3;
  --mode-primary-rgb:0,113,227;
  --mode-accent-rgb:90,200,250;
}

body[data-mode="guided"]{
  --primary:#7c3aed;
  --primary-strong:#6d28d9;
  --primary-soft:rgba(124,58,237,.12);
  --accent:#a78bfa;
  --accent-soft:rgba(167,139,250,.18);
  --line-glow:0 0 0 1px rgba(124,58,237,.12), 0 8px 28px rgba(124,58,237,.12);
  --mode-primary-top:#8b5cf6;
  --mode-primary-bottom:#7c3aed;
  --mode-primary-rgb:124,58,237;
  --mode-accent-rgb:167,139,250;
  background:
    radial-gradient(980px 520px at 10% -10%,rgba(124,58,237,.14),transparent 60%),
    radial-gradient(880px 460px at 92% -8%,rgba(167,139,250,.13),transparent 58%),
    radial-gradient(620px 360px at 50% 120%,rgba(255,255,255,.78),transparent 62%),
    linear-gradient(180deg,#f7f4ff,#f1ecff);
}

body{
  min-height:100vh;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.018) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at center, black 34%, transparent 88%);
  opacity:.5;
}

a{color:inherit}

.top-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 18px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(15,23,42,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.68), 0 16px 40px rgba(15,23,42,.06);
  backdrop-filter:blur(24px) saturate(140%);
}

.workflow-shelf{
  flex:1 1 100%;
  width:100%;
  margin-top:2px;
}

.workflow-track{
  width:min(100%,780px);
  margin:0 auto;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.54);
  box-shadow:0 12px 30px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(145%);
}

.workflow-step{
  position:relative;
  overflow:hidden;
  min-height:50px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  border-radius:16px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease, opacity .22s ease;
}

.workflow-step::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(var(--mode-primary-rgb),.08),rgba(var(--mode-accent-rgb),.03));
  opacity:0;
  transition:opacity .22s ease;
}

.workflow-step::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(var(--mode-primary-rgb),0),rgba(var(--mode-primary-rgb),.7),rgba(var(--mode-accent-rgb),.56),rgba(var(--mode-accent-rgb),0));
  opacity:0;
  transform:scaleX(.72);
  transition:opacity .24s ease, transform .24s ease;
}

.workflow-step:hover{
  transform:translateY(-1px);
  color:var(--text-strong);
}

.workflow-step:hover::before{
  opacity:1;
}

.workflow-step.active{
  color:var(--text-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.72));
  box-shadow:0 8px 22px rgba(var(--mode-primary-rgb),.12), 0 0 0 1px rgba(var(--mode-primary-rgb),.10);
}

.workflow-step.active::before,
.workflow-step.active::after{
  opacity:1;
  transform:scaleX(1);
}

.workflow-step-num,
.workflow-step-label{
  position:relative;
  z-index:1;
}

.workflow-step-num{
  flex:0 0 auto;
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(var(--mode-primary-rgb),.09);
  color:var(--primary-strong);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.workflow-step-label{
  min-width:0;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.btn{
  position:relative;
  overflow:hidden;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:13px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  color:var(--text-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,252,.68));
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg,transparent 10%,rgba(255,255,255,.42) 45%,transparent 78%);
  transform:translateX(-120%);
  transition:transform .45s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow2);
}

.btn:hover::after{
  transform:translateX(120%);
}

.btn:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn-primary{
  color:#fff;
  border-color:rgba(var(--mode-primary-rgb),.20);
  background:linear-gradient(180deg,var(--mode-primary-top),var(--mode-primary-bottom));
  box-shadow:0 12px 26px rgba(var(--mode-primary-rgb),.26);
}

.btn-ghost{
  color:var(--text-strong);
  border-color:var(--border);
  background:rgba(255,255,255,.56);
}

.btn-ghost:hover{
  border-color:rgba(var(--mode-primary-rgb),.16);
  box-shadow:var(--line-glow);
}

.btn-success{
  color:#0b111a;
  border-color:transparent;
  background:linear-gradient(135deg,#5bf2a5,#35d88d);
}

.btn-warning{
  color:#1b1303;
  border-color:transparent;
  background:linear-gradient(135deg,#ffb84d,#ff9f43);
}

.btn-danger{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#ff6b84,#ff9058);
}

.btn-small{
  padding:8px 12px;
  font-size:12px;
  border-radius:11px;
}

.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,252,.64));
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(24px) saturate(150%);
}

.input,
.select,
textarea,
input[type="text"],
input[type="password"],
select{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:13px;
  outline:none;
  font-size:13px;
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,252,.70));
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea::placeholder,
input::placeholder{
  color:var(--muted2);
}

textarea:focus,
input:focus,
select:focus{
  border-color:rgba(var(--mode-primary-rgb),.28);
  box-shadow:0 0 0 4px rgba(var(--mode-primary-rgb),.08), 0 12px 28px rgba(var(--mode-primary-rgb),.08);
  background:#fff;
}

body[data-mode="guided"] .mode-spotlight{
  border-color:rgba(124,58,237,.18);
  background:
    radial-gradient(130px 52px at 0% 50%,rgba(167,139,250,.22),transparent 62%),
    linear-gradient(135deg,rgba(124,58,237,.18),rgba(255,255,255,.96));
  box-shadow:0 14px 34px rgba(124,58,237,.16),0 0 0 1px rgba(255,255,255,.55) inset;
  color:var(--primary-strong);
}

body[data-mode="guided"] .workflow-step.active{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,243,255,.78));
}

body[data-mode="guided"] .mode-spotlight::before{
  background:linear-gradient(180deg,#c4b5fd,#7c3aed);
  box-shadow:0 0 0 7px rgba(124,58,237,.14),0 0 24px rgba(124,58,237,.28);
}

body[data-mode="guided"] .header-action-btn:hover,
body[data-mode="guided"] .edit-btn:hover{
  border-color:rgba(124,58,237,.18);
  box-shadow:0 16px 34px rgba(124,58,237,.10),var(--line-glow);
}

body[data-mode="guided"] .stage-flow-item.active,
body[data-mode="guided"] .option-card.active,
body[data-mode="guided"] .node.related,
body[data-mode="guided"] .node.selected,
body[data-mode="guided"] .edge-item.active{
  border-color:rgba(124,58,237,.20);
  box-shadow:var(--line-glow);
}

body[data-mode="guided"] .chip-btn{
  border-color:rgba(124,58,237,.18);
  background:rgba(124,58,237,.08);
}

body[data-mode="guided"] .chip-btn:hover,
body[data-mode="guided"] .dimension-item:hover,
body[data-mode="guided"] .card:hover{
  border-color:rgba(124,58,237,.24);
}

body[data-mode="guided"] .stage-shell,
body[data-mode="guided"] .stage-main,
body[data-mode="guided"] .hero-card,
body[data-mode="guided"] .hero-side,
body[data-mode="guided"] .graph-shell,
body[data-mode="guided"] .topic-card,
body[data-mode="guided"] .command-card,
body[data-mode="guided"] .vault-card,
body[data-mode="guided"] .surface,
body[data-mode="guided"] .stage-card{
  background:
    radial-gradient(260px 140px at 8% 0%,rgba(124,58,237,.11),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.90),rgba(250,247,255,.80));
}

body[data-mode="guided"] .graph-wrap{
  background:
    radial-gradient(460px 220px at 50% -10%,rgba(124,58,237,.08),transparent 64%),
    linear-gradient(rgba(255,255,255,.76),rgba(250,247,255,.68)),
    linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px),
    linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,28px 28px,28px 28px;
}

body[data-mode="guided"] .stage-shell-badge,
body[data-mode="guided"] .stage-pill,
body[data-mode="guided"] .option-tag,
body[data-mode="guided"] .pill{
  border-color:rgba(124,58,237,.14);
  background:rgba(124,58,237,.08);
  color:var(--primary-strong);
}

body[data-mode="guided"] .block::after,
body[data-mode="guided"] .card::after{
  background:linear-gradient(90deg,rgba(124,58,237,0),rgba(124,58,237,.45),rgba(167,139,250,.45),rgba(167,139,250,0));
}

@media (max-width:760px){
  .workflow-track{
    width:100%;
    display:flex;
    overflow-x:auto;
    padding-bottom:8px;
    gap:8px;
    scrollbar-width:none;
  }

  .workflow-track::-webkit-scrollbar{
    display:none;
  }

  .workflow-step{
    flex:0 0 auto;
    min-width:118px;
  }
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.12);
  backdrop-filter:blur(16px);
}

.modal.active{
  display:flex;
}

.modal-content{
  width:520px;
  max-width:92vw;
  max-height:84vh;
  overflow:auto;
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.88));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 30px 80px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(28px) saturate(150%);
}

.modal-title{
  font-size:18px;
  font-weight:800;
  color:var(--text-strong);
}

.modal-sub{
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.form-group{
  margin-bottom:14px;
}

.form-group label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
}

.chip,
.hero-pill,
.topic-pill,
.suggestion-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:12px;
  text-decoration:none;
  backdrop-filter:blur(12px);
}

.suggestion-chip:hover{
  border-color:rgba(0,113,227,.18);
  color:var(--primary-strong);
  background:#fff;
  box-shadow:var(--line-glow);
}

.status-ok{color:var(--success)}
.status-warn{color:var(--warning)}

.empty-card,
.empty,
.empty-hint,
.empty-text{
  color:var(--muted);
}