:root {
      --primary: #43b39d;
      --primary-dark: #269982;
      --primary-light: #b9e3d9;
      --navy: #35485c;
      --ink: #243445;
      --muted: #718096;
      --line: #dce5eb;
      --bg: #eef2f5;
      --panel: #ffffff;
      --warning: #d99026;
      --sidebar-width: 250px;
      font-family: 'Outfit', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    }

    * { box-sizing: border-box; }
    body { margin: 0; color: var(--ink); background: var(--bg); font-size: 14px; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    /* 所有互動按鈕統一使用清晰、非粗體的 14px 文字；圖示沿用其自身樣式。 */
    button, button strong, button span { font-size: 14px !important; font-weight: 400 !important; }

    .app-shell { min-height: 100vh; padding-left: var(--sidebar-width); }
    .sidebar {
      position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width);
      padding: 26px 16px; background: #fff; border-right: 1px solid #e5edf1;
      display: flex; flex-direction: column;
    }
    .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
    .brand-mark {
      display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
      color: #fff; background: linear-gradient(135deg, var(--primary), #75cbb9); font-weight: 800;
    }
    .brand strong { display: block; color: var(--navy); font-size: 15px; }
    .brand small { display: block; margin-top: 2px; color: #8a98a7; font-size: 10px; letter-spacing: .08em; }
    .nav-label { margin: 12px 11px 7px; color: #9aa8b5; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
    .nav-item {
      width: 100%; border: 0; border-radius: 8px; padding: 11px 12px; color: #667789;
      text-align: left; background: transparent; display: flex; align-items: center; gap: 10px;
    }
    .nav-item:hover, .nav-item.active { color: var(--primary-dark); background: #e8f6f3; font-weight: 700; }
    .nav-icon { width: 19px; text-align: center; font-size: 16px; }
    .sidebar-footer {
      margin-top: auto; padding: 13px; border-radius: 10px; color: #54706e; background: #f1faf8;
      font-size: 12px; line-height: 1.55;
    }
    .sidebar-footer strong { color: var(--primary-dark); }

    .topbar {
      height: 70px; padding: 0 34px; color: #fff; background: var(--primary);
      display: flex; align-items: center; justify-content: space-between;
    }
    .topbar h1 { margin: 0; font-size: 18px; font-weight: 700; }
    .topbar p { margin: 2px 0 0; color: rgba(255,255,255,.82); font-size: 12px; }
    .topbar-right { display: flex; align-items: center; gap: 10px; }
    .poc-badge { padding: 7px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; font-size: 11px; letter-spacing: .08em; }
    .menu-button { display: none; border: 0; padding: 8px; color: #fff; background: transparent; font-size: 20px; }

    main { max-width: 1560px; margin: 0 auto; padding: 30px 34px 46px; }
    .intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
    .intro[hidden] { display: none; }
    .eyebrow { margin: 0 0 6px; color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
    .intro h2 { margin: 0; color: var(--navy); font-size: 26px; letter-spacing: -.02em; }
    .intro p { max-width: 660px; margin: 8px 0 0; color: var(--muted); line-height: 1.7; }
    .status-note { padding: 10px 12px; border-radius: 8px; color: #718075; background: #f8fbfa; border: 1px solid #dcefe9; font-size: 12px; }
    .api-status {
      display: flex; align-items: center; gap: 11px; margin-bottom: 22px; padding: 13px 16px;
      border: 1px solid #dcece8; border-radius: 10px; color: #607482; background: #fbfefd;
    }
    .api-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #a8b6be; }
    .api-status.connecting .api-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(217,144,38,.12); }
    .api-status.ready .api-dot { background: var(--primary); box-shadow: 0 0 0 4px rgba(67,179,157,.12); }
    .api-status.error .api-dot { background: #d76161; box-shadow: 0 0 0 4px rgba(215,97,97,.12); }
    .api-status strong { color: var(--navy); font-size: 13px; }
    .api-status span { color: #81909b; font-size: 12px; }
    .api-status code { margin-left: auto; color: #68817d; font-family: 'Outfit', monospace; font-size: 11px; }

    .workspace { display: grid; grid-template-columns: minmax(500px, 1.22fr) minmax(380px, .78fr); gap: 22px; }
    .left-column { display: grid; align-content: start; gap: 22px; }
    .card {
      border: 1px solid #e2e9ee; border-radius: 12px; background: var(--panel);
      box-shadow: 0 5px 20px rgba(53, 72, 92, .045);
    }
    .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid #edf1f3; }
    .card-title { margin: 0; color: var(--navy); font-size: 17px; }
    .card-desc { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .step { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 800; font-size: 12px; }
    .card-body { padding: 20px 22px 22px; }

    .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .field.full { grid-column: 1 / -1; }
    .form-section-heading { grid-column: 1 / -1; margin-top: 3px; padding-top: 15px; border-top: 1px solid #edf1f3; color: #526477; font-size: 12px; font-weight: 700; }
    .form-section-heading span { margin-left: 7px; color: #91a0ad; font-weight: 400; }
    label { display: block; margin-bottom: 7px; color: #526477; font-weight: 700; font-size: 12px; }
    .required { color: var(--primary-dark); }
    input, select, textarea {
      width: 100%; padding: 10px 11px; outline: 0; border: 1px solid #d8e2e8; border-radius: 7px;
      color: var(--ink); background: #fff; transition: .18s border-color, .18s box-shadow;
    }
    textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
    input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67,179,157,.13); }
    .field-help { display: block; margin-top: 5px; color: #91a0ad; font-size: 11px; }
    .right-column { display: grid; align-content: start; gap: 22px; }
    .style-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .style-option { display: grid; position: relative; grid-template-rows: 112px auto auto; overflow: hidden; padding: 0; border: 2px solid #e2e9ed; border-radius: 9px; color: var(--navy); background: #fff; text-align: left; }
    .style-option::after { grid-row: 1; content: ''; display: block; width: 100%; height: 112px; background: var(--style-preview) center / cover; }
    .style-option strong { grid-row: 2; display: block; margin: 10px 11px 0; font-size: 14px !important; font-weight: 400; }
    .style-option span { grid-row: 3; display: block; margin: 2px 11px 11px; color: #718290; font-size: 12px !important; font-weight: 400; line-height: 1.45; }
    .style-option.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67,179,157,.16); }
    .style-option.active .check { display: grid; }
    .style-sun { --style-preview: url('./assets/style-previews/style-watercolor.png'); }
    .style-city { --style-preview: url('./assets/style-previews/style-colored-pencil.png'); }
    .style-warm { --style-preview: url('./assets/style-previews/style-collage.png'); }
    .style-minimal { --style-preview: url('./assets/style-previews/style-minimal-line.png'); }
    .style-illustration { --style-preview: url('./assets/style-previews/style-hand-drawn.png'); }
    .check { display: none; place-items: center; position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 12px; }

    .upload-ref { width: 100%; margin-top: 14px; padding: 11px 9px; border: 1px dashed #b9cbd1; border-radius: 7px; color: #7a8c97; background: #fbfdfd; text-align: center; font-size: 12px; cursor: not-allowed; }

    .preview-card { overflow: hidden; }
    .preview-head { background: linear-gradient(105deg, #edf9f5, #fff); }
    .preview-format { padding: 5px 8px; border-radius: 99px; color: var(--primary-dark); background: #e8f6f3; font-size: 11px; font-weight: 800; }
    .canvas-stage { display: grid; min-height: 350px; padding: 26px; place-items: center; background: #e9eff1; }
    .banner-canvas {
      position: relative; width: min(100%, 470px); aspect-ratio: 1.91 / 1; overflow: hidden; border-radius: 5px;
      color: #fff; background: linear-gradient(130deg, #205962 0%, #5ba59c 47%, #d9d5a5 100%); box-shadow: 0 10px 23px rgba(31,66,74,.23);
    }
    .banner-canvas::before { content: ''; position: absolute; width: 55%; aspect-ratio: 1; top: -27%; right: -6%; border-radius: 50%; background: rgba(255,233,176,.44); }
    .banner-canvas::after { content: ''; position: absolute; width: 58%; height: 76%; bottom: -21%; right: 2%; border-radius: 48% 48% 0 0; background: linear-gradient(145deg, rgba(246,248,230,.65), rgba(76,142,142,.2)); transform: rotate(-8deg); }
    .banner-canvas.has-image-background::before, .banner-canvas.has-image-background::after { display: none; }
    .safe-zone { position: absolute; z-index: 2; border: 1px dashed rgba(255,255,255,.55); border-radius: 2px; pointer-events: none; }
    .preview-copy { position: absolute; z-index: 3; left: 8%; top: 16%; width: 44%; }
    .preview-kicker { margin-bottom: 5px; color: #def8f0; font-size: clamp(7px, 1.1vw, 10px); font-weight: 700; letter-spacing: .11em; }
    .preview-title-block { display: block; inline-size: 8em; margin: 0 0 10px; font-size: clamp(17px, 3vw, 31px); }
    .preview-sub-block { display: block; inline-size: 15em; margin: 0 0 10px; font-size: clamp(8px, 1.35vw, 13px); }
    .preview-title { inline-size: 100%; margin: 0; font-family: 'Noto Sans TC', sans-serif; font-size: inherit; font-weight: 900; line-height: 1.25; letter-spacing: .02em; word-break: break-word; }
    .preview-sub { inline-size: 100%; margin: 0; color: rgba(255,255,255,.93); font-size: inherit; line-height: 1.5; word-break: break-word; }
    .preview-cta { display: inline-block; margin-top: 12px; padding: 6px 10px; border-radius: 3px; color: #245d57; background: #fff; font-size: clamp(8px, 1.25vw, 12px); font-weight: 800; }
    .preview-disclaimer { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 6%; color: rgba(255,255,255,.88); font-size: clamp(6px, .9vw, 9px); line-height: 1.35; }
    .preview-caption { padding: 12px 18px; color: #748393; background: #fff; border-top: 1px solid #e7edef; font-size: 11px; line-height: 1.5; }

    .size-section { margin-top: 22px; }
    .size-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
    .size-heading h3 { margin: 0; color: var(--navy); font-size: 18px; }
    .size-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
    .size-heading-actions { display: flex; align-items: center; gap: 8px; }
    .selection-count { padding: 7px 9px; border-radius: 7px; color: var(--primary-dark); background: #e8f6f3; font-size: 12px; font-weight: 800; white-space: nowrap; }
    .toggle-all-sizes { border: 1px solid #b8ddd4; padding: 7px 10px; border-radius: 7px; color: var(--primary-dark); background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
    .toggle-all-sizes:hover { border-color: var(--primary); background: #eff9f6; }
    .size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .size-card { position: relative; min-width: 0; padding: 12px; border: 2px solid #e0e8ed; border-radius: 10px; background: #fff; text-align: left; transition: .18s; }
    .size-card:hover { border-color: #a8dace; transform: translateY(-1px); }
    .size-card.selected { border-color: var(--primary); box-shadow: 0 4px 13px rgba(67,179,157,.12); }
    .size-check { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; accent-color: var(--primary); }
    .mini-wrap { display: grid; height: 70px; place-items: center; margin: 2px 0 10px; }
    .mini-banner { position: relative; max-width: 105px; max-height: 67px; width: auto; height: auto; overflow: hidden; border-radius: 3px; background: linear-gradient(135deg, #2a6d70, #77b8a7 52%, #ddd2a3); }
    .mini-banner::before { content: ''; position: absolute; width: 60%; height: 90%; top: -28%; right: -10%; border-radius: 50%; background: rgba(255,241,188,.55); }
    .mini-copy { position: absolute; left: 8%; top: 16%; width: 44%; height: 38%; border-radius: 2px; background: rgba(255,255,255,.87); }
    .mini-disclaimer { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 4%; border-radius: 3px; background: rgba(255,255,255,.65); }
    .size-card strong { display: block; padding-right: 16px; color: #415669; font-size: 12px; line-height: 1.35; }
    .size-meta { display: block; margin-top: 4px; color: #8493a1; font-size: 10px; }
    .size-status { display: inline-block; margin-top: 8px; color: #94a2ad; font-size: 10px; }
    .size-status.ready { color: var(--primary-dark); font-weight: 800; }
    .action-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; padding: 16px 18px; border: 1px solid #dcece8; border-radius: 10px; background: #fbfefd; }
    .action-row p { margin: 0; color: #6e808a; font-size: 12px; line-height: 1.5; }
    .generation-control { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #526477; font-size: 12px; font-weight: 700; white-space: nowrap; }
    .generation-control select { width: auto; min-width: 68px; padding: 8px 25px 8px 9px; }
    .output-stage { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 13px 16px; border: 1px dashed #c8d9df; border-radius: 9px; color: #6e808a; background: #f8fbfc; font-size: 12px; line-height: 1.5; }
    .output-stage strong { color: #526477; }
    .output-master-status { display: block; margin-top: 4px; color: #8493a1; font-size: 11px; }
    .output-master-status.ready { color: var(--primary-dark); font-weight: 800; }
    .output-stage button { flex: 0 0 auto; padding: 8px 11px; border: 0; border-radius: 6px; color: #8b9ba5; background: #e6edef; font-size: 11px; font-weight: 800; }
    .output-preview { margin-top: 14px; overflow: hidden; border: 1px solid #dbe7e9; border-radius: 10px; background: #fff; }
    .output-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: #f5fbf9; }
    .output-preview-head h4 { margin: 0; color: var(--navy); font-size: 15px; }
    .output-preview-head span { color: var(--primary-dark); font-size: 12px; }
    .output-preview .canvas-stage { min-height: 300px; }
    .candidate-view { display: none; margin-top: 22px; }
    .candidate-view.active { display: block; }
    .size-view { display: none; margin-top: 22px; }
    .size-view.active { display: block; }
    .candidate-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
    .candidate-hero .eyebrow { display: none; }
    .candidate-hero h2 { margin: 0; color: var(--navy); font-size: 28px; }
    .candidate-hero p { margin: 5px 0 0; overflow: hidden; color: var(--muted); line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; }
    .candidate-job-status { flex: 0 0 auto; padding: 7px 9px; border-radius: 7px; color: var(--primary-dark); background: #e8f6f3; font-size: 12px; font-weight: 800; }
    .candidate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 20px; }
    .candidate-stage { display: grid; min-height: 360px; place-items: center; padding: 24px; border: 1px solid #dbe7e9; border-radius: 12px; background: #fff; }
    .candidate-empty { display: grid; width: min(100%, 700px); aspect-ratio: 16 / 9; place-items: center; padding: 25px; border: 1px dashed #a9c9c6; border-radius: 8px; color: #638080; background: linear-gradient(135deg, #eff8f5, #f9f5e9); text-align: center; }
    .candidate-empty strong { display: block; margin-bottom: 7px; color: #46666b; font-size: 16px; }
    .candidate-empty span { font-size: 12px; line-height: 1.55; }
    .candidate-result-grid { display: grid; width: min(100%, 700px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .candidate-result { overflow: hidden; padding: 0; border: 2px solid #dbe7e9; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
    .candidate-result.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67,179,157,.14); }
    .candidate-result img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #edf3f3; }
    .candidate-result span { display: block; padding: 9px 10px; color: #526477; font-size: 12px; font-weight: 800; }
    .candidate-info { padding: 20px; border: 1px solid #dbe7e9; border-radius: 12px; background: #fff; }
    .candidate-info h3 { margin: 0 0 15px; color: var(--navy); font-size: 16px; }
    .candidate-info dl { margin: 0; }
    .candidate-info dt { margin-top: 13px; color: #8797a3; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .candidate-info dt:first-child { margin-top: 0; }
    .candidate-info dd { margin: 3px 0 0; color: #4d6373; font-size: 12px; line-height: 1.5; word-break: break-word; }
    .candidate-next { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding: 15px 17px; border-radius: 10px; background: #eef6f4; color: #617685; font-size: 12px; }
    .candidate-next strong { color: #466167; }
    .candidate-next > div { display: flex; align-items: center; gap: 8px; }
    .candidate-next button { border: 0; padding: 9px 12px; border-radius: 7px; font-weight: 800; }
    .candidate-next button:disabled { color: #8b9ba5; background: #dfe8e9; cursor: not-allowed; }
    .candidate-next button:not(:disabled) { color: #fff; background: var(--primary); box-shadow: 0 3px 7px rgba(38,153,130,.18); cursor: pointer; }
    .candidate-next button:not(:disabled):hover { background: var(--primary-dark); }
    .candidate-history { margin-top: 14px; padding: 14px 16px; border: 1px solid #dbe7e9; border-radius: 10px; background: #fff; }
    .candidate-history h3 { margin: 0; color: var(--navy); font-size: 14px; }
    .candidate-history p { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
    .candidate-history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; }
    .candidate-history-item { position: relative; overflow: hidden; border: 1px solid #b8ddd4; border-radius: 7px; color: var(--primary-dark); background: #f5fbf9; }
    .candidate-history-select { display: block; width: 100%; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
    .candidate-history-select img { display: block; width: 100%; aspect-ratio: 1 / .72; object-fit: cover; background: #edf3f3; }
    .candidate-history-select span { display: block; padding: 7px 8px; }
    .candidate-history-select .history-date { padding-top: 0; color: #718075; }
    .candidate-history-remove { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 25px; height: 25px; border: 0; border-radius: 50%; color: #56706c; background: rgba(255,255,255,.94); cursor: pointer; box-shadow: 0 1px 5px rgba(34,52,69,.16); }
    .candidate-history-remove:hover { color: #fff; background: #c95e5e; }
    .candidate-history-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
    .candidate-history-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(67,179,157,.16); }
    .candidate-history-item.active::after { content: '✓'; position: absolute; top: 9px; right: 38px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 13px; pointer-events: none; }
    .candidate-history-empty { color: #8493a1; font-size: 12px; }
    .button-primary { flex: none; border: 0; padding: 11px 15px; border-radius: 7px; color: #fff; background: var(--primary); font-weight: 800; box-shadow: 0 3px 7px rgba(38,153,130,.18); }
    .button-primary:hover { background: var(--primary-dark); }
    .toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 330px; padding: 12px 14px; border-radius: 9px; color: #fff; background: var(--navy); box-shadow: 0 10px 25px rgba(34,52,69,.22); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .22s; font-size: 13px; }
    .toast.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 1220px) {
      .workspace { grid-template-columns: 1fr 390px; }
      .size-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 1020px) {
      .app-shell { padding-left: 0; }
      .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 5px 0 18px rgba(30,55,68,.15); }
      .sidebar.open { transform: translateX(0); }
      .menu-button { display: block; }
      .workspace { grid-template-columns: 1fr; }
      .right-column { grid-template-columns: 1fr 1fr; align-items: start; }
      .preview-card { grid-column: 1 / -1; }
    }
    @media (max-width: 700px) {
      .topbar { height: 62px; padding: 0 16px; }
      .topbar h1 { font-size: 15px; }
      .topbar p, .poc-badge { display: none; }
      main { padding: 22px 16px 34px; }
      .intro { display: block; }
      .intro h2 { font-size: 22px; }
      .status-note { display: inline-block; margin-top: 13px; }
      .api-status { align-items: flex-start; flex-wrap: wrap; }
      .api-status code { width: 100%; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
      .form-grid, .right-column { grid-template-columns: 1fr; }
      .preview-card { grid-column: auto; }
      .candidate-hero, .candidate-layout, .candidate-next { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; }
      .candidate-job-status { align-self: flex-start; }
      .candidate-hero p { white-space: normal; }
      .size-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
      .size-heading { align-items: flex-start; }
      .size-heading h3 { font-size: 16px; }
      .action-row { align-items: stretch; flex-direction: column; }
      .button-primary { width: 100%; }
      .canvas-stage { min-height: 285px; padding: 18px; }
    }