/* 铠睿AI · 热血漫画主题 */
:root {
  --bg: #1763a8;
  --panel: #fff8dd;
  --line: #171717;
  --text: #171717;
  --muted: #645f55;
  --dim: #8f8572;
  --acid: #ffd72e;
  --blue: #27a9e8;
  --blue2: #0d7dc2;
  --red: #e53922;
  --green: #21a75a;
  --orange: #f47a20;
  --paper: #fff8dd;
  --topbar: 94px;
  --progress: 300px;
}

html,
body {
  background: #155fa5;
  color: var(--ink, #171717);
  font-family: "Arial Black", "Microsoft YaHei", "PingFang SC", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle, #072b57 1.5px, transparent 1.7px),
    linear-gradient(118deg, transparent 47%, rgba(255,255,255,.18) 48%, transparent 49%);
  background-size: 15px 15px, 210px 210px;
  z-index: 0;
}

.app-shell {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(155deg, transparent 62%, rgba(255,216,46,.24) 62.2%, transparent 63%),
    radial-gradient(circle at 82% 15%, rgba(255,216,46,.8) 0 2px, transparent 3px),
    transparent;
}

.topbar {
  gap: 24px;
  padding: 0 24px;
  color: #171717;
  border-bottom: 4px solid #171717;
  background: linear-gradient(100deg, #fff7d9 0 46%, #ffd72e 46% 72%, #f47a20 72%);
  box-shadow: 0 5px 0 rgba(0,0,0,.28);
  backdrop-filter: none;
  overflow: visible;
}

.topbar::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 0;
  width: 150px;
  height: 100%;
  opacity: .18;
  background: repeating-linear-gradient(115deg, #171717 0 2px, transparent 2px 13px);
  transform: skewX(-14deg);
  pointer-events: none;
}

.brand {
  position: relative;
  align-self: stretch;
  min-width: 255px;
  width: 255px;
  color: #171717;
  gap: 0;
  z-index: 8;
}

.brand-logo {
  position: absolute;
  top: 2px;
  left: -2px;
  display: block;
  width: 245px;
  height: 245px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(4px 5px 0 rgba(23,23,23,.36));
  pointer-events: none;
}

.topbar-title {
  border-left: 3px solid #171717;
  padding-left: 24px;
}

.topbar-title h1 {
  font-size: 22px;
  transform: skewX(-5deg);
}

.topbar-title h1 em {
  display: inline-block;
  padding: 3px 8px;
  color: #fff;
  background: #e53922;
  border: 2px solid #171717;
  font-size: 10px;
  font-style: normal;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 #171717;
}

.topbar-title p { color: #634311; font-weight: 700; }
.connection { color: #171717; font-weight: 800; }
.connection > span:first-child { background: #171717; border: 1px solid #fff; }
.connection.connected > span:first-child { background: #29c76f; box-shadow: 0 0 0 2px #171717; }
.connection.error > span:first-child { background: #e53922; }

.folder-button,
.auto-switch,
.icon-button {
  color: #171717;
  border: 3px solid #171717;
  background: #fff8dd;
  border-radius: 2px;
  box-shadow: 3px 3px 0 #171717;
}

.folder-button:hover,
.icon-button:hover { border-color: #171717; color: #e53922; transform: translate(-1px,-1px); }
.folder-button svg { stroke: #168ed0; stroke-width: 2.5; }
.folder-button small { color: #806c4a; }
.auto-switch { color: #171717; }
.auto-switch i { background: #9ca2a8; border: 2px solid #171717; height: 18px; }
.auto-switch i::after { background: #fff; left: 2px; top: 2px; }
.auto-switch input:checked + i { background: #27a9e8; }
.auto-switch input:checked + i::after { left: 14px; background: #ffd72e; }

.studio-layout { background: transparent; }
.progress-sidebar {
  border-right: 4px solid #171717;
  padding-top: 150px;
  background:
    radial-gradient(circle, rgba(0,0,0,.18) 1.2px, transparent 1.5px) 0 0 / 13px 13px,
    linear-gradient(180deg, #ffd72e, #ffad20);
}

.progress-sidebar-head { border-bottom: 3px solid #171717; }
.progress-sidebar h2 { color: #171717; font-size: 13px; }
.progress-sidebar-head > span { color: #623c0b; }
.step {
  color: #fff;
  background: #e53922;
  border: 2px solid #171717;
  box-shadow: 2px 2px 0 #171717;
  transform: skewX(-7deg);
}

.progress-task {
  color: #171717;
  border: 3px solid #171717;
  border-radius: 2px;
  background: #fff8dd;
  box-shadow: 4px 4px 0 rgba(23,23,23,.65);
}
.progress-task:hover { border-color: #171717; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #e53922; }
.progress-task-status { font-weight: 900; color: #594b36; }
.progress-task-status.running { color: #e55a16; }
.progress-task-status.completed { color: #168b45; }
.progress-task-status.error { color: #d52419; }
.progress-task-percent { color: #171717; }
.progress-task p { color: #25211b; }
.progress-mini-track { height: 5px; border: 1px solid #171717; background: #ded6bd; }
.progress-mini-track i { background: linear-gradient(90deg,#27a9e8,#ffd72e,#f47a20); }
.progress-task-foot { color: #74664f; }
.progress-config {
  color: #171717;
  border: 3px solid #171717;
  background: #fff8dd;
  box-shadow: 3px 3px 0 #171717;
  font-weight: 800;
}
.progress-config:hover { color: #e53922; border-color: #171717; }
.progress-list-empty { color: #51320c; }

.content-scroll { background: rgba(19,93,161,.24); }
.notice-bar {
  color: #171717;
  border: 3px solid #171717;
  border-radius: 3px;
  background: #37afe8;
  box-shadow: 5px 5px 0 #171717;
  transform: rotate(-.15deg);
}
.notice-bar > span { color: #fff; border: 2px solid #171717; background: #e53922; font-weight: 900; }
.notice-bar p { color: #102c3c; font-weight: 700; }
.notice-bar p b { color: #171717; background: #ffd72e; padding: 3px 6px; border: 1px solid #171717; }
.notice-bar button { color: #171717; font-weight: 900; text-decoration: underline; }

.panel {
  color: #171717;
  border: 3px solid #171717;
  border-radius: 4px;
  background:
    radial-gradient(circle at 100% 0, rgba(244,122,32,.18), transparent 27%),
    #fff8dd;
  box-shadow: 6px 6px 0 rgba(23,23,23,.65);
}
.panel h2,
.section-head h2 { color: #171717; font-size: 15px; }
.micro-status { color: #df4a21; font-weight: 900; }
.field label,
.field legend { color: #3c3427; font-weight: 900; }
.field input,
.field textarea,
.field select {
  color: #171717;
  border: 3px solid #171717;
  background: #fffef7;
  border-radius: 2px;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.08);
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: #168ed0; box-shadow: 0 0 0 3px #ffd72e; }
.prompt-wrap span,
.field-note,
.label-row { color: #74664f; }
.segmented { border: 3px solid #171717; background: #fffef7; border-radius: 2px; }
.segmented span { color: #5d5548; font-weight: 800; }
.segmented input:checked + span { color: #171717; background: #ffd72e; box-shadow: inset 0 0 0 2px #171717; }
.dropzone { border: 3px dashed #171717 !important; background: rgba(39,169,232,.09); }
.dropzone:hover,
.dropzone.drag { border-color: #e53922 !important; background: #fff2b0; }
.upload-icon { color: #e53922; font-size: 27px; }
.dropzone strong { color: #171717; }
.dropzone small { color: #655a48; }

.generate {
  color: #171717;
  border: 3px solid #171717;
  border-radius: 2px;
  background: linear-gradient(180deg,#ffd934,#ffad20);
  box-shadow: 5px 5px 0 #e53922, 8px 8px 0 #171717;
  font-size: 12px;
  transform: skewX(-2deg);
}
.generate:hover { filter: none; transform: translate(-2px,-2px) skewX(-2deg); }
.generate:disabled { background: #c8c2b2; box-shadow: 4px 4px 0 #171717; }
.fixed-spec { color: #766650; }
.status-badge { color: #171717; border: 2px solid #171717; background: #fff; font-weight: 900; }
.status-badge.running { color: #171717; border-color: #171717; background: #ffd72e; }
.status-badge.success { color: #fff; border-color: #171717; background: #21a75a; }
.status-badge.error { color: #fff; border-color: #171717; background: #e53922; }
.frame-guide { border: 3px solid #171717; background: #fffef7; }
.frame-guide span { border-color: #e53922; }
.frame-guide b { color: #168ed0; }
.result-empty p,
.progress-view p,
.error-view p { color: #70634d; }
.orbital div { border-color: #d9c99f; border-top-color: #e53922; }
.orbital span { color: #168ed0; font-weight: 900; }
.progress-track { height: 5px; border: 1px solid #171717; background: #ded6bd; }
.progress-track i { background: linear-gradient(90deg,#27a9e8,#ffd72e,#f47a20); }
.secondary-button,
.history-card button,
.text-button { color: #171717; border: 2px solid #171717; background: #fff; box-shadow: 2px 2px 0 #171717; font-weight: 800; }
.secondary-button:hover,
.history-card button:hover,
.text-button:hover { color: #e53922; }
.debug { border-top: 2px dashed #171717; color: #665b49; }
.debug pre { color: #dbefff; border: 2px solid #171717; background: #102e52; }

.history-section {
  color: #171717;
  border: 3px solid #171717;
  padding: 18px;
  background: #fff8dd;
  box-shadow: 6px 6px 0 rgba(23,23,23,.65);
}
.section-head { border-bottom: 3px solid #171717; }
.section-head p { color: #74664f; }
.history-tools label { color: #493f31; font-weight: 900; }
.history-tools input { color: #171717; border: 2px solid #171717; background: #fff; color-scheme: light; }
.history-card { color: #171717; border: 3px solid #171717; background: #fffef7; box-shadow: 3px 3px 0 #f47a20; }
.history-status { color: #e53922; font-weight: 900; }
.history-date { color: #74664f; }
.history-card p { color: #2b261e; }
.history-card code { color: #776a55; }
.history-empty { color: #74664f; border: 3px dashed #171717; background: rgba(255,215,46,.12); }

.modal-backdrop { background: rgba(13,37,63,.78); }
.config-modal {
  color: #171717;
  border: 4px solid #171717;
  border-radius: 4px;
  background: #fff8dd;
  box-shadow: 9px 9px 0 #e53922;
}
.modal-head span { color: #e53922; font-weight: 900; }
.modal-head h2 { color: #171717; }
.modal-head button { color: #171717; }
.input-with-action button { color: #171717; border: 3px solid #171717; border-left: 0; background: #ffd72e; font-weight: 900; }
.remember { color: #544a3c !important; }
.toast { color: #171717; border: 3px solid #171717; background: #ffd72e; box-shadow: 4px 4px 0 #e53922; font-weight: 900; }

/* 提升整体可读性：主要信息不再使用 8～10px 小字号 */
.topbar-title p,
.connection,
.auto-switch { font-size: 12px; }
.folder-button small { font-size: 10px; }
.folder-button b { font-size: 12px; }
.icon-button { font-size: 17px; }
.progress-sidebar h2 { font-size: 16px; }
.progress-sidebar-head > span { font-size: 12px; }
.step { font-size: 10px; }
.progress-task-status { font-size: 11px; }
.progress-task-percent { font-size: 13px; }
.progress-task p { font-size: 12px; line-height: 1.45; }
.progress-task-foot { font-size: 9px; }
.progress-config { font-size: 12px; }
.progress-list-empty p { font-size: 13px; }
.progress-list-empty small { font-size: 11px; }
.notice-bar p { font-size: 12px; }
.notice-bar button { font-size: 12px; }
.panel h2,
.section-head h2 { font-size: 18px; }
.micro-status { font-size: 10px; }
.field label,
.field legend { font-size: 13px; }
.field input,
.field textarea,
.field select { font-size: 15px; }
.field textarea { line-height: 1.7; }
.segmented span { font-size: 12px; }
.label-row,
.field-note { font-size: 11px; }
.dropzone strong { font-size: 13px; }
.dropzone small { font-size: 10px; }
.generate { font-size: 14px; }
.fixed-spec { font-size: 10px; }
.status-badge { font-size: 11px; }
.result-empty h3,
.progress-view h3,
.error-view h3 { font-size: 16px; }
.result-empty p,
.progress-view p,
.error-view p { font-size: 12px; }
.progress-view code { font-size: 10px; }
.secondary-button { font-size: 12px; }
.debug { font-size: 11px; }
.section-head p { font-size: 11px; }
.history-tools label,
.history-tools input,
.text-button { font-size: 11px; }
.history-status,
.history-date { font-size: 10px; }
.history-card p { font-size: 12px; }
.history-card code { font-size: 9px; }
.history-card button { font-size: 11px; }
.history-empty { font-size: 12px; }
.modal-head span { font-size: 10px; }

/* 账户注册与登录 */
.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(0,0,0,.18) 1.4px, transparent 1.7px) 0 0 / 15px 15px,
    linear-gradient(125deg, #ffd72e 0 44%, #168ed0 44% 100%);
  position: relative;
}
.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 230deg at 42% 52%, transparent 0 5deg, rgba(255,255,255,.16) 5.2deg 5.7deg);
}
.auth-hero {
  min-height: 100vh;
  padding: 42px 25px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.auth-hero img { width: min(440px,88%); filter: drop-shadow(8px 9px 0 rgba(23,23,23,.42)); }
.auth-hero > div { margin-top: -28px; transform: rotate(-2deg); text-align: center; }
.auth-hero span { display: inline-block; color: #fff; background: #e53922; border: 3px solid #171717; box-shadow: 4px 4px 0 #171717; padding: 6px 12px; font-size: 12px; }
.auth-hero h1 { margin: 14px 0 8px; color: #fff8dd; font-size: clamp(42px,5vw,76px); line-height: .96; -webkit-text-stroke: 3px #171717; text-shadow: 6px 6px 0 #e53922; }
.auth-hero p { margin: 18px 0 0; color: #171717; font-size: 15px; }
.auth-card {
  align-self: center;
  justify-self: center;
  width: min(510px,calc(100% - 50px));
  min-height: 580px;
  padding: 44px 50px 26px;
  position: relative;
  z-index: 2;
  color: #171717;
  border: 4px solid #171717;
  background: #fff8dd;
  box-shadow: 11px 11px 0 #e53922, 16px 16px 0 #171717;
}
.auth-card::after { content:""; position:absolute; right:0; bottom:0; width:110px; height:110px; opacity:.14; background:radial-gradient(circle,#171717 1.5px,transparent 2px) 0 0/11px 11px; }
.auth-burst { position:absolute; right:-28px; top:-29px; width:76px; height:76px; display:grid; place-items:center; color:#fff; background:#e53922; border:3px solid #171717; clip-path:polygon(50% 0,61% 24%,82% 8%,77% 33%,100% 35%,79% 52%,96% 70%,70% 68%,71% 96%,52% 76%,34% 100%,34% 72%,5% 80%,26% 57%,0 44%,28% 39%,13% 15%,40% 26%); font-size:12px; transform:rotate(8deg); }
.auth-heading small { color:#e53922; font-size:10px; letter-spacing:.16em; }
.auth-heading h2 { margin:7px 0 7px; font-size:28px; }
.auth-heading p { color:#70634d; margin:0 0 26px; font-size:13px; }
.auth-heading strong { color:#168ed0; word-break:break-all; }
.auth-field { display:block; margin-bottom:18px; }
.auth-field span { display:block; margin-bottom:7px; font-size:13px; font-weight:900; }
.auth-field input { width:100%; height:52px; border:3px solid #171717; border-radius:0; background:#fff; color:#171717; padding:0 14px; font-size:15px; outline:0; box-shadow:inset 3px 3px 0 rgba(0,0,0,.07); }
.auth-field input:focus { border-color:#168ed0; box-shadow:0 0 0 3px #ffd72e; }
.auth-field .verify-code { height:72px; text-align:center; font:900 29px/1 ui-monospace,monospace; letter-spacing:10px; }
.auth-submit { width:100%; height:55px; display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:0 18px; color:#171717; background:linear-gradient(#ffd72e,#ffad20); border:3px solid #171717; box-shadow:5px 5px 0 #e53922,8px 8px 0 #171717; font-weight:900; font-size:14px; cursor:pointer; }
.auth-submit:hover { transform:translate(-2px,-2px); }
.auth-submit:disabled { opacity:.5; cursor:wait; transform:none; }
.auth-switch { margin:26px 0 0; text-align:center; color:#74664f; font-size:12px; }
.auth-switch button,.auth-secondary-actions button { border:0; background:transparent; color:#168ed0; font-weight:900; cursor:pointer; text-decoration:underline; }
.auth-message { min-height:18px; margin:4px 0 8px; color:#d52419; font-size:12px; line-height:1.5; }
.auth-message.success { color:#168b45; }
.auth-dev-code { padding:10px; color:#171717; background:#dff3ff; border:2px dashed #168ed0; font-size:12px; text-align:center; }
.auth-secondary-actions { margin-top:24px; display:flex; justify-content:space-between; }
.auth-card footer { position:absolute; left:0; right:0; bottom:16px; text-align:center; color:#8a7c64; font-size:10px; }
.account-chip { min-width:220px; height:48px; display:grid; grid-template-columns:1fr auto auto; grid-template-rows:17px 19px; column-gap:6px; padding:5px 7px 5px 11px; color:#171717; border:3px solid #171717; background:#fff8dd; box-shadow:3px 3px 0 #171717; }
.account-chip span { grid-column:1; color:#806c4a; font-size:9px; }
.account-chip b { grid-column:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.account-chip a { grid-column:2; grid-row:1/3; align-self:center; color:#171717; background:#ffd72e; border:1px solid #171717; padding:5px 6px; font-size:10px; font-weight:900; text-decoration:none; }
.account-chip button { grid-column:3; grid-row:1/3; align-self:center; border:0; background:#e53922; color:#fff; padding:6px 8px; font-size:10px; font-weight:900; cursor:pointer; }

@media (max-width: 1050px) {
  .brand { min-width: 210px; width: 210px; }
  .brand-logo { width: 215px; height: 215px; }
  .progress-sidebar { padding-top: 128px; }
  .auth-screen { grid-template-columns: .82fr 1.18fr; }
  .auth-hero img { width:min(340px,88%); }
  .auth-card { padding-inline:35px; }
  .account-chip { min-width:185px; }
}

@media (max-width: 760px) {
  .topbar { background: linear-gradient(110deg,#fff7d9 0 55%,#ffd72e 55%); }
  .brand-logo { top: 0; left: 0; width: 125px; height: 125px; filter: drop-shadow(2px 3px 0 rgba(23,23,23,.28)); }
  .brand { min-width: 125px; width: 125px; }
  .history-section { padding: 12px; }
  .auth-screen { display:block; overflow:auto; padding:24px 0 45px; }
  .auth-hero { min-height:auto; padding:0 20px 15px; }
  .auth-hero img { width:180px; }
  .auth-hero > div { display:none; }
  .auth-card { width:calc(100% - 28px); min-height:560px; padding:35px 23px 58px; box-shadow:7px 7px 0 #e53922,11px 11px 0 #171717; }
  .auth-heading h2 { font-size:24px; }
  .account-chip { min-width:46px; width:46px; display:flex; padding:0; align-items:center; justify-content:center; }
  .account-chip span,.account-chip b,.account-chip a { display:none; }
  .account-chip button { padding:7px 5px; font-size:9px; }
}