:root {
  --main-deep: #0a1f38;
  --main-blue: #0f2b48;
  --main-light: #1a3a5e;
  --gold-light: #d4b06a;
  --gold-base: #c8a35f;
  --gold-deep: #a77f3c;
  --gold-gradient: linear-gradient(135deg, #d4b06a, #c8a35f 52%, #a77f3c);
  --bg-page: #f5f7fa;
  --bg-card: #ffffff;
  --bg-sub: #f8fafc;
  --border: #e2e8f0;
  --text: #172033;
  --muted: #64748b;
  --danger: #b93838;
  --success: #2e7d5f;
  --shadow: 0 1px 3px rgba(15,43,72,.05), 0 8px 22px rgba(15,43,72,.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 1px 1px, rgba(15,43,72,.045) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg-page);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.hidden { display: none !important; }
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(10,31,56,.94);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.toast.show { opacity: 1; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(360px, .9fr);
}
.auth-brand {
  padding: 72px;
  color: #fff;
  background: linear-gradient(160deg, var(--main-light), var(--main-deep));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212,176,106,.7);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: var(--gold-light);
  font-weight: 800;
  letter-spacing: 0;
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 10px; }
.eyebrow { margin: 0 0 6px; color: var(--gold-light); font-size: 12px; text-transform: uppercase; }
.auth-brand h1 { margin: 16px 0 12px; font-size: 36px; letter-spacing: 0; }
.auth-brand p { max-width: 620px; line-height: 1.7; color: rgba(255,255,255,.78); }
.auth-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.auth-points span, .badge {
  border: 1px solid rgba(212,176,106,.42);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--gold-light);
  background: rgba(255,255,255,.06);
}
.auth-card {
  align-self: center;
  margin: 48px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.tab, .ghost {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--main-blue);
  border-radius: 8px;
  padding: 11px 14px;
}
.tab.active { border-color: var(--gold-base); background: #fff9ed; color: var(--gold-deep); }
.auth-form { display: none; }
.auth-form.active { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--main-blue); }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
}
textarea { resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(200,163,95,.24);
  border-color: var(--gold-base);
}
.primary {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  background: var(--gold-gradient);
  color: #162033;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tiny {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--main-blue);
  padding: 6px 9px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
}
.danger-btn {
  color: var(--danger);
  border-color: rgba(185,56,56,.35);
}
.danger-btn:hover {
  background: #fff5f5;
}
body.demo-mode .danger-btn,
body.demo-mode .service-only {
  display: none !important;
}
body:not(.service-mode) .service-only {
  display: none !important;
}
.hint, .muted-text { color: var(--muted); line-height: 1.7; font-size: 13px; }

.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, var(--main-light), var(--main-deep));
  color: #fff;
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; }
.side-brand span { display: block; color: rgba(255,255,255,.58); font-size: 12px; margin-top: 3px; }
nav { display: grid; gap: 7px; }
nav button, .side-logout {
  border: 0;
  border-radius: 8px;
  padding: 11px 12px;
  text-align: left;
  color: rgba(255,255,255,.76);
  background: transparent;
}
nav button.active {
  color: var(--gold-light);
  background: rgba(255,255,255,.08);
  box-shadow: inset 3px 0 0 var(--gold-base);
}
.side-logout { position: absolute; left: 18px; right: 18px; bottom: 18px; border: 1px solid rgba(255,255,255,.12); }
.workspace { padding: 24px 32px 48px; min-width: 0; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.topbar h2 { margin: 0; font-size: 24px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.badge { background: #fff; color: var(--gold-deep); border-color: rgba(200,163,95,.6); }
.badge.muted { color: var(--main-blue); border-color: var(--border); }
.global-quick-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: -8px 0 18px;
  padding: 12px;
  background: rgba(255,255,255,.74);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15,43,72,.04);
  backdrop-filter: blur(10px);
}
.global-quick-bar input {
  flex: 1 1 280px;
  min-height: 42px;
}
.entitlement-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(185,56,56,.24);
  background: #fff5f5;
  color: var(--danger);
}
.entitlement-banner span {
  color: #7f1d1d;
  line-height: 1.6;
}
.view { display: none; }
.view.active { display: grid; gap: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.stat, .panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.stat span { color: var(--muted); font-size: 13px; }
.stat strong { display: block; margin-top: 8px; font-size: 30px; font-family: "Consolas", monospace; color: var(--gold-deep); }
.panel h3 { margin: 0 0 14px; }
.panel.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.inline-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quick-actions, .toolbar-row, .helper-actions, .industry-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.quick-actions { margin-bottom: 14px; }
.quick-start-panel {
  background:
    linear-gradient(135deg, rgba(212,176,106,.12), transparent 38%),
    var(--bg-card);
}
.workflow-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}
.workflow-cards article {
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.workflow-cards strong {
  display: block;
  color: var(--main-blue);
  margin-bottom: 6px;
}
.workflow-cards span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.plan-cards article {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg-sub);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-cards article.active {
  border-color: rgba(200,163,95,.7);
  background: #fff9ed;
}
.plan-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.plan-title-row span {
  color: var(--gold-deep);
  background: rgba(200,163,95,.12);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.plan-cards strong {
  display: block;
  color: var(--main-blue);
}
.plan-cards ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
  flex: 1;
}
.plan-renew-btn {
  width: 100%;
  min-height: 42px;
}
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.checklist-grid article {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-sub);
}
.checklist-grid article strong {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--success);
}
.checklist-grid article.check-warn strong {
  color: var(--danger);
}
.checklist-grid article span {
  display: block;
  color: var(--main-blue);
  font-weight: 700;
}
.checklist-grid article p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.health-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(200,163,95,.35);
  background: #fff9ed;
}
.health-score strong {
  grid-row: span 2;
  font-size: 42px;
  line-height: 1;
  color: var(--gold-deep);
  font-family: Consolas, monospace;
}
.health-score span {
  color: var(--main-blue);
  font-weight: 700;
}
.health-score p {
  margin: 0;
  color: var(--muted);
}
.toolbar-row {
  margin-bottom: 12px;
}
.industry-row {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.industry-row select {
  flex: 1 1 220px;
}
.toolbar-row input {
  flex: 1 1 260px;
}
.helper-actions {
  margin-top: 10px;
}
.check-box {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(200,163,95,.42);
  border-radius: 8px;
  background: #fff9ed;
  color: var(--main-blue);
  line-height: 1.7;
  font-size: 13px;
}
.check-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-deep);
}
.check-box ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.security-note, .deployment-box, .backup-reminder {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid rgba(46,125,95,.24);
  border-radius: 8px;
  background: #f0fdf4;
  color: #14532d;
}
.backup-reminder {
  border-color: rgba(185,56,56,.28);
  background: #fff5f5;
  color: #7f1d1d;
}
.deployment-box {
  border-color: rgba(200,163,95,.32);
  background: #fff9ed;
  color: var(--main-blue);
}
.security-note p, .deployment-box p, .backup-reminder p {
  margin: 6px 0 0;
  line-height: 1.7;
  font-size: 13px;
}
.backup-reminder .primary {
  margin-top: 10px;
}
.password-toggle {
  justify-self: start;
  margin-top: -2px;
  border: 0;
  background: transparent;
  color: var(--gold-deep);
  font-size: 12px;
  padding: 0;
}
.password-toggle:hover {
  text-decoration: underline;
}
.timeline { margin: 0; padding-left: 20px; line-height: 1.9; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.result-box { line-height: 1.8; }
.prebox {
  margin: 0;
  white-space: pre-wrap;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  min-height: 180px;
  line-height: 1.7;
  color: var(--text);
}
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.link-btn { min-height: 42px; text-decoration: none; }
.table { overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; vertical-align: top; }
.table th { background: var(--bg-sub); color: var(--main-blue); }
.table .danger { color: var(--danger); }
.table tr.row-warn td {
  background: #fff7ed;
}
.modal-mask,
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10,31,56,.46);
  backdrop-filter: blur(8px);
}
.payment-guide {
  display: grid;
  gap: 14px;
}
.payment-summary,
.payment-note,
.payment-steps {
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.payment-summary strong,
.payment-note strong {
  display: block;
  color: var(--main-blue);
  margin-bottom: 6px;
}
.payment-summary p,
.payment-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.payment-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}
.payment-channel-grid article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.payment-channel-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.payment-channel-grid strong {
  display: block;
  color: var(--main-blue);
  font-family: "Roboto Mono", monospace;
  margin-bottom: 12px;
  word-break: break-all;
}
.payment-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.payment-steps span {
  color: var(--main-blue);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}
.quick-license-panel {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #fff9ed 100%);
}
.license-generator-result {
  border: 1px solid rgba(200,163,95,.45);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,43,72,.08);
  padding: 16px;
}
.license-generator-result span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}
.license-generator-result strong {
  display: block;
  color: var(--main-blue);
  font-family: "Roboto Mono", monospace;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
  word-break: break-all;
  background: var(--bg-sub);
  border-radius: 10px;
  padding: 14px;
}
.license-generator-result p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
.ai-config-panel {
  border-color: rgba(200,163,95,.35);
  background: linear-gradient(135deg, #ffffff, #f8fbff 58%, #fff9ed);
}
.ai-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ai-mode-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ai-mode-card:hover,
.ai-mode-card.active {
  border-color: rgba(200,163,95,.7);
  box-shadow: 0 12px 26px rgba(15,43,72,.08);
}
.ai-mode-card.active {
  transform: translateY(-1px);
}
.ai-mode-card input {
  width: auto;
  margin-top: 3px;
}
.ai-mode-card strong {
  color: var(--main-blue);
}
.ai-mode-card span {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.ai-key-fields input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}
.detail-card {
  width: min(980px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(10,31,56,.24);
  padding: 18px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.detail-grid section {
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.detail-grid section .ghost,
.detail-grid section .primary {
  margin: 6px 6px 0 0;
}
.detail-card h4 {
  margin: 12px 0 8px;
  color: var(--main-blue);
}
.support-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: min(420px, calc(100vw - 32px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(10,31,56,.22);
  padding: 16px;
}
.support-grid {
  display: grid;
  gap: 10px;
}
.license-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.license-box div { background: var(--bg-sub); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.license-box strong { display: block; color: var(--main-blue); margin-top: 4px; }

.workflow-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-color: rgba(212,176,106,.36);
  background:
    radial-gradient(circle at 18% 20%, rgba(212,176,106,.22), transparent 28%),
    radial-gradient(circle at 78% 30%, rgba(41,117,169,.34), transparent 35%),
    linear-gradient(135deg, #0a1f38, #12385e 54%, #081827);
}
.workflow-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.08) 50%, transparent 51%) 0 0 / 74px 74px,
    linear-gradient(0deg, transparent 0 49%, rgba(255,255,255,.06) 50%, transparent 51%) 0 0 / 74px 74px;
  opacity: .32;
}
.workflow-hero > * {
  position: relative;
  z-index: 1;
}
.workflow-hero h3 {
  font-size: clamp(24px, 3vw, 38px);
}
.workflow-hero .muted-text {
  color: rgba(255,255,255,.76);
  max-width: 780px;
}
.workflow-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.workflow-step {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(200,163,95,.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)),
    radial-gradient(circle at top right, rgba(212,176,106,.18), transparent 38%);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.workflow-step:hover,
.workflow-step:focus-within {
  transform: translateY(-3px);
  border-color: rgba(200,163,95,.68);
  box-shadow: 0 16px 34px rgba(15,43,72,.13);
}
.workflow-step strong {
  color: var(--main-blue);
  font-size: 16px;
}
.workflow-step span {
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}
.workflow-step::before {
  content: attr(data-step);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #142033;
  background: var(--gold-gradient);
  font-weight: 800;
}
.workflow-step.done {
  border-color: rgba(46,125,95,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,251,247,.98)),
    radial-gradient(circle at top right, rgba(46,125,95,.16), transparent 38%);
}
.workflow-step.done::after {
  content: "已就绪";
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.haily-assistant {
  position: fixed;
  z-index: 75;
  width: 124px;
  height: 154px;
  user-select: none;
  touch-action: none;
  transition: left .25s ease, top .25s ease, transform .25s ease;
  outline: none;
}
.haily-assistant.dragging {
  transition: none;
  z-index: 95;
}
.haily-close {
  position: absolute;
  right: 12px;
  top: 2px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(10,31,56,.82);
  color: #fff;
  line-height: 1;
}
.haily-bubble {
  position: absolute;
  left: 86px;
  top: 4px;
  width: 190px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(212,176,106,.48);
  border-radius: 12px 12px 12px 2px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(10,31,56,.16);
  color: var(--main-blue);
  font-size: 12px;
  line-height: 1.5;
}
.haily-avatar {
  position: absolute;
  left: 16px;
  top: 24px;
  width: 96px;
  height: 124px;
  cursor: grab;
  filter: drop-shadow(0 14px 22px rgba(10,31,56,.22));
  transform-origin: 50% 96%;
}
.haily-assistant.dragging .haily-avatar { cursor: grabbing; }
.haily-aura {
  position: absolute;
  left: 3px;
  top: 0;
  width: 90px;
  height: 96px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(212,176,106,.22), transparent 62%),
    radial-gradient(circle at 35% 30%, rgba(69,173,205,.28), transparent 42%);
  animation: hailyAura 3.2s ease-in-out infinite;
}
.haily-ear {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 40px;
  background: linear-gradient(145deg, #5b6064, #2e3338 68%, #1d2227);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 4;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.haily-ear.left { left: 14px; transform: rotate(-19deg); transform-origin: 80% 100%; }
.haily-ear.right { right: 14px; transform: rotate(19deg); transform-origin: 20% 100%; }
.haily-ear span {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 13px;
  height: 23px;
  background: linear-gradient(180deg, #d7ad9d, #9a7066);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .9;
}
.haily-head {
  position: absolute;
  left: 18px;
  top: 24px;
  width: 61px;
  height: 55px;
  border-radius: 48% 48% 54% 54%;
  background:
    radial-gradient(circle at 35% 70%, #d6d0c5 0 10px, transparent 11px),
    radial-gradient(circle at 65% 70%, #d6d0c5 0 10px, transparent 11px),
    radial-gradient(circle at 50% 78%, #e7e1d6 0 12px, transparent 13px),
    linear-gradient(180deg, #6b7074, #42484d 58%, #2b3035);
  border: 1px solid rgba(255,255,255,.28);
  z-index: 5;
  box-shadow:
    inset 0 -10px 16px rgba(0,0,0,.18),
    inset 9px 0 14px rgba(255,255,255,.08);
  transform-origin: 50% 88%;
}
.haily-fur {
  position: absolute;
  top: -8px;
  width: 8px;
  height: 17px;
  border-radius: 999px 999px 3px 3px;
  background: #353a3f;
  transform-origin: bottom center;
}
.haily-fur.tuft1 { left: 23px; transform: rotate(-26deg); }
.haily-fur.tuft2 { left: 30px; top: -11px; height: 20px; }
.haily-fur.tuft3 { left: 37px; transform: rotate(26deg); }
.haily-head .eye {
  position: absolute;
  top: 21px;
  width: 15px;
  height: 8px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 62% 45%, #111 0 3px, transparent 4px),
    linear-gradient(90deg, #d8c985, #f2e7ad);
  border: 2px solid #252a2f;
  box-shadow: 0 -2px 0 rgba(20,22,25,.28);
}
.haily-head .eye.left { left: 10px; transform: rotate(5deg); }
.haily-head .eye.right { right: 10px; transform: rotate(-5deg); }
.haily-muzzle {
  position: absolute;
  left: 18px;
  top: 33px;
  width: 25px;
  height: 17px;
  border-radius: 999px 999px 12px 12px;
  background: #d9d4c9;
  box-shadow:
    -10px 0 0 #d9d4c9,
    10px 0 0 #d9d4c9;
}
.haily-nose {
  position: absolute;
  left: 27px;
  top: 32px;
  width: 9px;
  height: 7px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, #c98d80, #7d4d48);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 2;
}
.haily-head .mouth {
  position: absolute;
  left: 28px;
  top: 40px;
  width: 8px;
  height: 8px;
  border-left: 2px solid #4a3a38;
  border-bottom: 2px solid #4a3a38;
  border-radius: 0 0 0 999px;
  transform: rotate(-45deg);
  z-index: 2;
}
.haily-head .whisker {
  position: absolute;
  height: 1px;
  width: 22px;
  background: rgba(238,238,226,.72);
  z-index: 3;
}
.haily-head .w1 { left: -7px; top: 36px; transform: rotate(8deg); }
.haily-head .w2 { left: -6px; top: 43px; transform: rotate(-7deg); }
.haily-head .w3 { right: -7px; top: 36px; transform: rotate(-8deg); }
.haily-head .w4 { right: -6px; top: 43px; transform: rotate(7deg); }
.haily-head::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 17px;
  width: 37px;
  height: 10px;
  border-top: 4px solid rgba(31,34,38,.55);
  border-radius: 50%;
  opacity: .62;
}
.haily-neck {
  position: absolute;
  left: 40px;
  top: 72px;
  width: 14px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #33383d, #22272b);
  z-index: 3;
}
.haily-torso {
  position: absolute;
  left: 22px;
  top: 78px;
  width: 52px;
  height: 43px;
  border-radius: 12px 12px 16px 16px;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.08) 43% 50%, transparent 51%),
    linear-gradient(90deg, #2c3137, #15191f 58%, #070a0f);
  border: 1px solid rgba(212,176,106,.36);
  z-index: 2;
  transform-origin: 50% 100%;
}
.haily-collar {
  position: absolute;
  left: 10px;
  top: 0;
  width: 32px;
  height: 16px;
  background:
    linear-gradient(135deg, #fff 0 47%, transparent 48%),
    linear-gradient(225deg, #fff 0 47%, transparent 48%);
}
.haily-tie {
  position: absolute;
  left: 22px;
  top: 7px;
  width: 8px;
  height: 29px;
  background: linear-gradient(180deg, #11141b, #02040a);
  clip-path: polygon(50% 0, 100% 22%, 65% 100%, 35% 100%, 0 22%);
  z-index: 2;
}
.haily-badge-dot {
  position: absolute;
  right: 8px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold-gradient);
  box-shadow: 0 0 12px rgba(212,176,106,.5);
}
.haily-arm {
  position: absolute;
  top: 83px;
  width: 23px;
  height: 45px;
  z-index: 3;
  transform-origin: 50% 6px;
}
.haily-arm.left { left: 12px; }
.haily-arm.right { right: 12px; }
.haily-arm .upper,
.haily-arm .lower,
.haily-arm .hand {
  position: absolute;
  display: block;
}
.haily-arm .upper {
  left: 6px;
  top: 0;
  width: 9px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b3036, #10151c);
  transform-origin: 50% 4px;
}
.haily-arm .lower {
  left: 6px;
  top: 18px;
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a5055, #2e3338);
  transform-origin: 50% 3px;
}
.haily-arm .hand {
  left: 5px;
  top: 36px;
  width: 10px;
  height: 8px;
  border-radius: 999px;
  background: #4a5055;
}
.haily-arm.left .upper { transform: rotate(18deg); }
.haily-arm.left .lower { transform: rotate(-16deg); }
.haily-arm.right .upper { transform: rotate(-18deg); }
.haily-arm.right .lower { transform: rotate(16deg); }
.haily-leg {
  position: absolute;
  top: 115px;
  width: 25px;
  height: 28px;
  z-index: 1;
}
.haily-leg.left { left: 28px; }
.haily-leg.right { right: 28px; }
.haily-leg .thigh,
.haily-leg .shin,
.haily-leg .foot {
  position: absolute;
  display: block;
}
.haily-leg .thigh {
  left: 8px;
  top: 0;
  width: 9px;
  height: 16px;
  border-radius: 999px;
  background: #181d23;
  transform-origin: 50% 3px;
}
.haily-leg .shin {
  left: 8px;
  top: 13px;
  width: 8px;
  height: 15px;
  border-radius: 999px;
  background: #11161d;
  transform-origin: 50% 3px;
}
.haily-leg .foot {
  left: 4px;
  top: 25px;
  width: 17px;
  height: 7px;
  border-radius: 999px 999px 5px 5px;
  background: #071525;
}
.haily-shadow {
  position: absolute;
  left: 13px;
  top: 128px;
  width: 68px;
  height: 14px;
  border-radius: 999px;
  background: rgba(10,31,56,.16);
  filter: blur(3px);
}
.haily-panel {
  position: absolute;
  left: 96px;
  top: 50px;
  width: min(360px, calc(100vw - 126px));
  padding: 12px;
  border: 1px solid rgba(200,163,95,.35);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 48px rgba(10,31,56,.22);
  backdrop-filter: blur(14px);
}
.haily-panel strong {
  color: var(--main-blue);
}
.haily-panel p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.haily-search-row,
.haily-actions,
.haily-alarm {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.haily-search-row input,
.haily-alarm input {
  min-height: 38px;
  padding: 8px 10px;
}
.haily-search-row input {
  flex: 1 1 180px;
}
.haily-actions,
.haily-alarm {
  margin-top: 8px;
}
.haily-alarm input[type="time"] {
  flex: 0 0 108px;
}
.haily-alarm input:not([type="time"]) {
  flex: 1 1 150px;
}
.haily-answer {
  min-height: 92px;
  max-height: 160px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-sub);
  color: var(--main-blue);
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
}
.haily-assistant[data-action="walk"] .haily-avatar {
  animation: hailyWalkBody .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-head {
  animation: hailyHeadBob .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-ear.left {
  animation: hailyEarL .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-ear.right {
  animation: hailyEarR .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-arm.left .upper,
.haily-assistant[data-action="walk"] .haily-arm.right .lower,
.haily-assistant[data-action="walk"] .haily-leg.right .thigh {
  animation: hailySwingA .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-arm.right .upper,
.haily-assistant[data-action="walk"] .haily-arm.left .lower,
.haily-assistant[data-action="walk"] .haily-leg.left .thigh {
  animation: hailySwingB .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-leg.left .shin {
  animation: hailyKneeA .52s ease-in-out infinite alternate;
}
.haily-assistant[data-action="walk"] .haily-leg.right .shin {
  animation: hailyKneeB .52s ease-in-out infinite alternate;
}
.haily-assistant[data-dir="left"] .haily-avatar {
  transform: scaleX(-1);
}
.haily-assistant[data-action="sit"] .haily-avatar {
  transform: translateY(12px) scaleY(.94);
}
.haily-assistant[data-dir="left"][data-action="sit"] .haily-avatar {
  transform: scaleX(-1) translateY(12px) scaleY(.94);
}
.haily-assistant[data-action="sit"] .haily-torso {
  transform: rotate(-3deg);
}
.haily-assistant[data-action="sit"] .haily-leg.left .thigh,
.haily-assistant[data-action="sit"] .haily-leg.right .thigh {
  transform: rotate(42deg);
}
.haily-assistant[data-action="sit"] .haily-leg.left .shin,
.haily-assistant[data-action="sit"] .haily-leg.right .shin {
  transform: rotate(-62deg);
}
.haily-assistant[data-action="sit"] .haily-leg.left .foot,
.haily-assistant[data-action="sit"] .haily-leg.right .foot {
  transform: translate(8px, -4px);
}
.haily-assistant[data-action="wink"] .eye.right {
  height: 3px;
  top: 24px;
  background: #252a2f;
  border-color: transparent;
}
.haily-assistant[data-action="wink"] .eye.left {
  transform: rotate(8deg) scaleY(.82);
}
.haily-assistant[data-action="wink"] .haily-arm.right .upper {
  transform: rotate(-128deg);
}
.haily-assistant[data-action="wink"] .haily-arm.right .lower {
  transform: rotate(-35deg);
}
.haily-assistant[data-action="fall"] {
  transform: rotate(18deg) translateY(16px);
}
.haily-assistant[data-action="fall"] .haily-head {
  transform: rotate(-12deg) translateY(2px);
}
.haily-assistant[data-action="fall"] .haily-arm.left .upper,
.haily-assistant[data-action="fall"] .haily-arm.right .upper {
  transform: rotate(82deg);
}
.haily-assistant[data-action="jump"] .haily-avatar {
  animation: hailyJump .45s ease-out 2;
}
.haily-assistant[data-action="jump"] .haily-arm.left .upper,
.haily-assistant[data-action="jump"] .haily-arm.right .upper {
  transform: rotate(-128deg);
}
.haily-assistant[data-action="jump"] .haily-leg.left .shin,
.haily-assistant[data-action="jump"] .haily-leg.right .shin {
  transform: rotate(24deg);
}
.haily-assistant[data-action="think"] .haily-bubble::after {
  content: " ...";
  animation: hailyDots 1s steps(3, end) infinite;
}
.haily-assistant[data-action="think"] .haily-head {
  animation: hailyThinkHead 1s ease-in-out infinite alternate;
}
.haily-assistant[data-action="think"] .haily-ear.left {
  transform: rotate(-28deg);
}
.haily-assistant[data-action="think"] .haily-ear.right {
  transform: rotate(9deg);
}
.haily-assistant[data-action="think"] .haily-arm.right .lower {
  transform: rotate(-105deg) translateY(-2px);
}
@keyframes hailyWalkBody {
  from { transform: rotate(-2deg) translateY(0); }
  to { transform: rotate(2deg) translateY(-4px); }
}
@keyframes hailyHeadBob {
  from { transform: rotate(-3deg) translateY(1px); }
  to { transform: rotate(3deg) translateY(-1px); }
}
@keyframes hailyEarL {
  from { transform: rotate(-23deg); }
  to { transform: rotate(-13deg); }
}
@keyframes hailyEarR {
  from { transform: rotate(23deg); }
  to { transform: rotate(13deg); }
}
@keyframes hailySwingA {
  from { transform: rotate(-24deg); }
  to { transform: rotate(28deg); }
}
@keyframes hailySwingB {
  from { transform: rotate(28deg); }
  to { transform: rotate(-24deg); }
}
@keyframes hailyKneeA {
  from { transform: rotate(18deg); }
  to { transform: rotate(-20deg); }
}
@keyframes hailyKneeB {
  from { transform: rotate(-20deg); }
  to { transform: rotate(18deg); }
}
@keyframes hailyThinkHead {
  from { transform: rotate(-5deg); }
  to { transform: rotate(7deg) translateY(1px); }
}
@keyframes hailyAura {
  0%, 100% { transform: scale(.96); opacity: .75; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes hailyJump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-18px); }
}
@keyframes hailyDots {
  0% { opacity: .2; }
  100% { opacity: 1; }
}

.onboarding-next {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(14, 116, 144, .08);
}
.onboarding-next span {
  color: var(--muted);
  font-size: 13px;
}
.onboarding-next button {
  flex: 0 0 auto;
}

@media (max-width: 920px) {
  .auth-shell, .app-shell, .panel.two, .result-grid { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .workspace { padding: 18px; }
  .stats-grid, .license-box, .form-grid, .workflow-cards, .workflow-board, .checklist-grid, .payment-channel-grid, .payment-steps, .ai-mode-grid { grid-template-columns: 1fr; }
  .auth-brand { padding: 36px; }
  .auth-card { margin: 18px; }
  .quick-actions > *, .toolbar-row > *, .helper-actions > *, .global-quick-bar > *, .industry-row > * { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .haily-assistant {
    left: 12px !important;
    top: auto !important;
    bottom: 18px;
  }
  .haily-bubble {
    display: none;
  }
  .haily-panel {
    left: 0;
    top: auto;
    bottom: 130px;
    width: calc(100vw - 24px);
  }
}