/* ============ Demo page layout ============ */
.demo-wrap{padding-top:20px; padding-bottom:120px; min-height:70vh;}
.demo-section{padding:60px 0 0;}
.hidden{display:none !important;}

.nav-user-info{color:var(--text-faint); font-size:13px; margin-right:-8px;}

code{
  background:var(--panel);
  border:1px solid var(--panel-line);
  padding:1px 6px;
  border-radius:3px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.92em;
}

/* ============ Auth card ============ */
.auth-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:6px;
  max-width:440px; padding:32px; margin-top:44px;
}
.auth-tabs{display:flex; gap:4px; margin-bottom:28px; background:var(--bg); border-radius:4px; padding:4px;}
.auth-tab{
  flex:1; background:transparent; border:none; color:var(--text-faint);
  font-family:inherit; font-size:13.5px; padding:9px 0; border-radius:3px; cursor:pointer;
  transition:background .15s, color .15s;
}
.auth-tab.active{background:var(--panel-line); color:var(--text);}

.auth-form{display:flex; flex-direction:column; gap:6px;}
.auth-form.hidden{display:none;}
.field-label{font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-top:14px;}
.field-label:first-child{margin-top:0;}
.auth-form input, .model-options select{
  background:var(--bg); border:1px solid var(--panel-line); border-radius:3px;
  padding:11px 13px; color:var(--text); font-family:inherit; font-size:14px;
}
.auth-form input:focus, .model-options select:focus{outline:none; border-color:var(--cyan);}
.field-error{color:var(--rose); font-size:12.5px; min-height:16px; margin-top:10px;}
.auth-submit{margin-top:18px; width:100%;}
.auth-note{color:var(--text-faint); font-size:11.5px; line-height:1.6; margin-top:20px;}

/* ============ Upload card ============ */
.upload-card{
  background:var(--panel); border:1.5px dashed var(--panel-line); border-radius:6px;
  max-width:640px; padding:52px 32px; margin-top:44px; text-align:center;
  transition:border-color .15s, background .15s;
}
.upload-card.dragover{border-color:var(--cyan); background:rgba(79,209,197,0.04);}
.upload-icon{font-size:28px; color:var(--cyan); margin-bottom:14px;}
.upload-text{color:var(--text-dim); font-size:14.5px; margin-bottom:16px;}
.upload-filename{color:var(--green); font-size:13px; margin-top:16px; min-height:18px;}

.model-options{
  display:flex; gap:32px; margin-top:36px; max-width:640px; flex-wrap:wrap;
}
.option-row{display:flex; flex-direction:column; gap:6px; flex:1; min-width:200px;}
.model-options select{cursor:pointer;}

.run-btn{margin-top:32px;}
.run-btn:disabled{opacity:0.4; cursor:not-allowed;}
.run-btn:disabled:hover{transform:none; box-shadow:none;}

/* ============ Progress terminal ============ */
.progress-terminal{max-width:760px; margin-top:44px;}
.run-elapsed{margin-left:auto; color:var(--text-faint);}

.progress-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  opacity:0.35; transition:opacity .25s;
}
.progress-row.active{opacity:1;}
.progress-row.done{opacity:1;}
.progress-row .status-stage{width:150px; flex-shrink:0; color:var(--text-dim);}
.progress-row .status-desc{width:220px; flex-shrink:0; color:var(--text-faint);}
.progress-row .status-flag{padding:1px 9px; border-radius:2px; font-size:11.5px; letter-spacing:0.03em;}
.progress-row .status-note{color:var(--text-faint); font-size:12.5px;}

.flag-pending{color:var(--text-faint); background:rgba(255,255,255,0.04);}
.flag-running{color:var(--amber); background:rgba(212,165,116,0.1);}
.flag-running::after{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--amber); margin-left:6px; animation:pulse 1.1s infinite ease-in-out;
}
@keyframes pulse{
  0%, 100%{opacity:1;}
  50%{opacity:0.25;}
}

.progress-bar-track{
  max-width:760px; height:4px; background:var(--panel-line); border-radius:2px;
  margin-top:28px; overflow:hidden;
}
.progress-bar-fill{
  height:100%; width:0%; background:var(--cyan); border-radius:2px;
  transition:width .5s ease;
}

.progress-actions{display:flex; gap:14px; margin-top:36px; max-width:760px;}

@media (max-width:640px){
  .progress-row .status-stage, .progress-row .status-desc{width:auto;}
  .model-options{flex-direction:column; gap:18px;}
}

/* ============ Prebuilt examples ============ */
.example-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px; margin-top:40px; max-width:760px;
}
.example-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:6px;
  padding:24px; display:flex; flex-direction:column; gap:12px;
}
.example-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.example-head h3{font-size:17px; margin:0;}
.example-target{color:var(--cyan); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;}
.example-desc{color:var(--text-dim); font-size:13.5px; line-height:1.55; margin:0; flex:1;}
.example-spec{border-top:1px solid var(--panel-line); margin-top:4px; padding-top:10px; display:flex; flex-direction:column; gap:6px;}
.spec-row{display:flex; justify-content:space-between; gap:14px; font-size:12.5px; line-height:1.4;}
.spec-label{color:var(--text-faint); letter-spacing:0.03em; white-space:nowrap;}
.spec-value{color:var(--text-dim); text-align:right;}
.example-download{margin-top:10px; width:100%;}