:root {
        color-scheme: light;
        --ink: #1f2933;
        --muted: #667085;
        --line: #d7dde5;
        --paper: #fbfaf6;
        --surface: #ffffff;
        --soft: #f3f6f8;
        --mist: #eaf3f1;
        --green: #2f6f62;
        --green-dark: #1e5148;
        --gold: #b88746;
        --rose: #b86b66;
        --blue: #496f9f;
        --shadow: 0 18px 50px rgba(31, 41, 51, 0.09);
      }

      * {
        box-sizing: border-box;
      }

      [hidden] {
        display: none !important;
      }

      body {
        margin: 0;
        background:
          linear-gradient(180deg, rgba(234, 243, 241, 0.7), rgba(251, 250, 246, 0.94) 320px),
          var(--paper);
        color: var(--ink);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Microsoft YaHei", sans-serif;
        letter-spacing: 0;
      }

      button,
      input,
      textarea,
      select {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
      }

      .sidebar {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 100vh;
        overflow-y: auto;
        padding: 22px 16px 180px;
        border-right: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(18px);
      }

      .brand {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 8px 8px 22px;
      }

      .seal {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: white;
        background:
          radial-gradient(circle at 50% 28%, #f5d6a7 0 9px, transparent 10px),
          linear-gradient(145deg, var(--green), var(--gold));
        box-shadow: 0 10px 24px rgba(47, 111, 98, 0.24);
        font-weight: 800;
      }

      .brand strong {
        display: block;
        font-size: 18px;
      }

      .brand span {
        color: var(--muted);
        font-size: 12px;
      }

      .nav {
        display: grid;
        gap: 6px;
      }

      .auth-card {
        margin-top: 18px;
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
      }

      .auth-card-header {
        display: grid;
        gap: 4px;
      }

      .auth-card-header strong {
        font-size: 14px;
        color: var(--green-dark);
      }

      .auth-card-header p,
      .auth-user-meta {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
      }

      .auth-segmented {
        width: 100%;
      }

      .auth-form,
      .auth-user {
        display: grid;
        gap: 10px;
      }

      .auth-field {
        display: grid;
        gap: 6px;
      }

      .auth-field label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .auth-field input {
        width: 100%;
        min-height: 38px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 10px;
        background: #f8fbfa;
      }

      .auth-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .nav button {
        width: 100%;
        min-height: 42px;
        border: 0;
        border-radius: 8px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        color: var(--muted);
        text-align: left;
      }

      .nav button.active {
        background: var(--green-dark);
        color: white;
      }

      .nav svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }

      .side-note {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 20px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }

      .main {
        min-width: 0;
        padding: 28px 36px 56px;
      }

      .shell-auth {
        position: sticky;
        top: 0;
        z-index: 18;
        display: flex;
        justify-content: flex-end;
        margin: -8px 0 12px;
        padding-top: 8px;
      }

      .auth-trigger {
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.88);
        color: var(--green-dark);
        box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
      }

      .auth-trigger.is-admin {
        border-color: rgba(47, 111, 98, 0.22);
        background: rgba(234, 243, 241, 0.92);
      }

      .nav button {
        position: relative;
      }

      .nav-lockup {
        position: absolute;
        top: 5px;
        right: 8px;
        color: var(--muted);
        font-size: 10px;
        line-height: 1;
      }

      .modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(31, 41, 51, 0.42);
        backdrop-filter: blur(8px);
      }

      .modal-backdrop[hidden] {
        display: none !important;
      }

      .modal-shell {
        width: min(100%, 420px);
      }

      .modal-shell-wide {
        width: min(100%, 720px);
      }

      .modal-panel {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow);
      }

      .auth-modal {
        padding: 18px;
      }

      .usage-guide-modal {
        padding: 18px;
      }

      .usage-guide-content {
        max-height: min(60vh, 520px);
        overflow-y: auto;
        padding-right: 4px;
      }

      .usage-guide-list {
        margin: 0;
        padding-left: 20px;
        display: grid;
        gap: 14px;
      }

      .usage-guide-list li {
        color: var(--ink);
        line-height: 1.65;
      }

      .usage-guide-list strong {
        color: var(--green-dark);
      }

      .usage-guide-list p {
        margin: 6px 0 0;
        color: var(--ink);
      }

      .usage-guide-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
      }

      .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
      }

      .icon-button {
        min-width: 36px;
        min-height: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--muted);
        font-size: 22px;
        line-height: 1;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;
      }

      .title h1 {
        margin: 0 0 6px;
        font-size: 30px;
        line-height: 1.16;
      }

      .title p {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.76);
        color: var(--green-dark);
        white-space: nowrap;
      }

      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 4px rgba(47, 111, 98, 0.12);
      }

      .view {
        display: none;
      }

      .view.active {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        gap: 20px;
        align-items: start;
      }

      .panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--shadow);
      }

      .panel-header {
        padding: 18px 20px 0;
      }

      .panel-header h2 {
        margin: 0 0 6px;
        font-size: 18px;
      }

      .panel-header p {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .panel-body {
        padding: 20px;
      }

      .field {
        display: grid;
        gap: 8px;
        margin-bottom: 16px;
      }

      .field label {
        font-weight: 700;
        font-size: 14px;
      }

      .field-hint {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      textarea,
      input,
      select {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        outline: none;
      }

      textarea {
        min-height: 118px;
        padding: 13px 14px;
        line-height: 1.6;
        resize: vertical;
      }

      input,
      select {
        min-height: 42px;
        padding: 0 12px;
      }

      textarea:focus,
      input:focus,
      select:focus {
        border-color: var(--green);
        box-shadow: 0 0 0 4px rgba(47, 111, 98, 0.12);
      }

      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .chip {
        min-height: 36px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 12px;
        background: var(--surface);
        color: var(--muted);
      }

      .chip.selected {
        border-color: rgba(47, 111, 98, 0.4);
        background: var(--mist);
        color: var(--green-dark);
        font-weight: 700;
      }

      .library-filters + .screen-note {
        margin-top: 10px;
      }

      .search-trail {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }

      .segmented {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 5px;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 8px;
      }

      .segmented button {
        min-height: 38px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
      }

      .segmented button.active {
        background: var(--surface);
        color: var(--green-dark);
        box-shadow: 0 8px 20px rgba(31, 41, 51, 0.08);
        font-weight: 700;
      }

      .question-trace {
        display: grid;
        gap: 8px;
        margin: -2px 0 12px;
        padding: 12px 14px;
        border: 1px dashed #cbbd9f;
        border-radius: 8px;
        background: rgba(247, 243, 233, 0.86);
      }

      .question-trace[hidden] {
        display: none;
      }

      .question-trace strong {
        color: #7a5324;
      }

      .question-trace p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .clarify {
        display: grid;
        gap: 10px;
        margin: -4px 0 16px;
        padding: 14px;
        background: #fff8ef;
        border: 1px solid #ead7b6;
        border-radius: 8px;
      }

      .clarify strong {
        color: #7a5324;
      }

      .clarify p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .clarify[data-status="ready"] {
        background: #edf7f2;
        border-color: #c9e3d8;
      }

      .clarify[data-status="ready"] strong {
        color: var(--green-dark);
      }

      .clarify[data-status="ready"] .clarify-options button {
        border-color: #c9e3d8;
      }

      .clarify[data-status="risk"] {
        background: #fff3ee;
        border-color: #efc7b8;
      }

      .clarify[data-status="risk"] strong {
        color: #8b3f23;
      }

      .clarify[data-status="risk"] .clarify-options button {
        border-color: #efc7b8;
      }

      .clarify[data-status="loading"] {
        background: #f4efe3;
        border-color: #e1d2ae;
      }

      .clarify[data-status="loading"] strong {
        color: #6c5a1f;
      }

      .clarify[data-status="loading"] .clarify-options button {
        border-color: #e1d2ae;
        color: var(--muted);
      }

      .clarify-options {
        display: grid;
        gap: 8px;
      }

      .clarify-options button {
        min-height: 42px;
        border: 1px solid #ead7b6;
        border-radius: 8px;
        background: white;
        text-align: left;
        padding: 0 12px;
        color: var(--ink);
      }

      .repeat-guard {
        display: grid;
        gap: 10px;
        margin: 4px 0 16px;
        padding: 14px;
        border: 1px solid #efc7b8;
        border-radius: 8px;
        background: #fff3ee;
      }

      .repeat-guard[hidden] {
        display: none;
      }

      .repeat-guard strong {
        color: #8b3f23;
      }

      .repeat-guard p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .diagnostics {
        display: grid;
        gap: 10px;
        margin: 4px 0 16px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(247, 249, 250, 0.86);
      }

      .diagnostics-row {
        display: grid;
        grid-template-columns: 84px auto 1fr;
        gap: 10px;
        align-items: center;
      }

      .diagnostics-row span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .diagnostics-row p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .benchmark-notice {
        display: grid;
        gap: 6px;
        margin: 0 0 16px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      .benchmark-notice strong {
        font-size: 14px;
      }

      .benchmark-notice p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .benchmark-notice.recommended {
        border-color: rgba(47, 111, 98, 0.22);
        background: #eef8f5;
      }

      .benchmark-notice.watch {
        border-color: rgba(184, 135, 70, 0.28);
        background: #fff8ef;
      }

      .mini-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 18px;
      }

      .primary,
      .secondary,
      .ghost {
        min-height: 42px;
        border-radius: 8px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid transparent;
        font-weight: 800;
      }

      .primary {
        color: white;
        background: var(--green-dark);
      }

      .primary:disabled,
      .secondary:disabled,
      .ghost:disabled {
        cursor: wait;
        opacity: 0.72;
      }

      .secondary {
        color: var(--green-dark);
        background: var(--mist);
        border-color: rgba(47, 111, 98, 0.24);
      }

      .ghost {
        background: var(--surface);
        border-color: var(--line);
        color: var(--muted);
      }

      .ghost.active {
        background: var(--mist);
        border-color: rgba(47, 111, 98, 0.24);
        color: var(--green-dark);
      }

      .clickable-tag {
        cursor: pointer;
      }

      .primary svg,
      .secondary svg,
      .ghost svg {
        width: 18px;
        height: 18px;
      }

      .flow {
        display: grid;
        gap: 10px;
      }

      .step {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 10px;
        align-items: start;
      }

      .step-index {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--soft);
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
      }

      .step.done .step-index,
      .step.active .step-index {
        background: var(--green);
        color: white;
      }

      .step strong {
        display: block;
        margin: 2px 0 3px;
      }

      .step span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .hexagram-visual {
        display: grid;
        gap: 8px;
        margin: 16px auto 4px;
        max-width: 260px;
      }

      .yao {
        height: 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .yao.yin {
        grid-template-columns: 1fr 1fr;
      }

      .yao span {
        border-radius: 999px;
        background: var(--ink);
      }

      .yao.moving span {
        background: var(--gold);
      }

      .reading-layout {
        display: grid;
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
        gap: 20px;
      }

      .result-summary {
        display: grid;
        gap: 14px;
      }

      .hexagram-pair {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
        align-items: start;
      }

      .hexagram-figure {
        display: grid;
        gap: 8px;
        justify-items: stretch;
        min-width: 0;
      }

      .hexagram-figure-label {
        color: var(--muted);
        font-size: 13px;
        text-align: center;
      }

      .hexagram-board {
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .hexagram-board-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fafcfb;
        min-width: 0;
      }

      .hexagram-board-line {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .hexagram-board-line .yao {
        height: 12px;
      }

      .hexagram-board-label {
        font-size: 12px;
        color: var(--muted);
      }

      .hexagram-board-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .hexagram-board-kin {
        font-size: 14px;
        font-weight: 700;
        color: var(--ink);
        overflow-wrap: anywhere;
      }

      .hexagram-board-meta {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .hexagram-board-flags {
        display: flex;
        grid-column: 2;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
      }

      .hexagram-flag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: #eef5f1;
        color: var(--green-dark);
        font-size: 12px;
        font-weight: 700;
      }

      .hexagram-flag.active {
        background: #fff1c7;
        color: #8a5a00;
      }

      .hexagram-flag.role {
        background: #edf3ff;
        color: #24547d;
      }

      .summary-row {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 10px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
      }

      .summary-row span {
        color: var(--muted);
      }

      .summary-row strong {
        font-size: 16px;
      }

      .source-list,
      .coach-list,
      .history-list,
      .file-list {
        display: grid;
        gap: 10px;
      }

      .source-workbench {
        display: grid;
        gap: 12px;
      }

      .source,
      .coach,
      .history-item,
      .file-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        padding: 14px;
      }

      .source {
        border-left: 4px solid var(--blue);
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
        overflow: hidden;
      }

      .source.active {
        border-color: #1f6aa5;
        background: #f7fbff;
        box-shadow: 0 0 0 1px rgba(31, 106, 165, 0.14);
      }

      .source-header {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
      }

      .source-header strong {
        display: block;
      }

      .source-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .source-match {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 8px;
      }

      .source-summary {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .source-detail {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid #cfe0ec;
        border-radius: 8px;
        background: #f6fbfd;
        border-left: 4px solid #1f6aa5;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      }

      .source-detail.inline {
        margin-top: 12px;
        padding: 12px 0 0;
        border: none;
        border-top: 1px solid #d7e3ea;
        border-radius: 0;
        background: transparent;
        border-left: none;
        box-shadow: none;
      }

      .source-detail[hidden] {
        display: none;
      }

      .source-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .source-detail-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .source-detail-meta {
        color: var(--muted);
        font-size: 13px;
      }

      .source-detail-label {
        color: #5f7690;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .source mark,
      .source-detail mark {
        padding: 0 3px;
        border-radius: 4px;
        background: #fff0c2;
        color: #734c08;
      }

      .coach {
        border-left: 4px solid var(--green);
      }

      .coach button {
        margin-top: 10px;
      }

      .followup-panel {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      .followup-panel-side {
        margin-bottom: 4px;
      }

      .followup-panel-title {
        font-size: 15px;
        color: var(--green-dark);
      }

      .followup-note {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
      }

      .followup-thread {
        display: grid;
        gap: 10px;
        max-height: 260px;
        overflow: auto;
        padding-right: 4px;
      }

      .followup-empty {
        padding: 14px;
        border: 1px dashed #d7dee3;
        border-radius: 8px;
        color: var(--muted);
        background: #fff;
        font-size: 14px;
        line-height: 1.6;
      }

      .followup-message {
        display: grid;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #d9e3df;
      }

      .followup-message.user {
        background: #f2f8ff;
        border-color: #cadef7;
      }

      .followup-message.assistant {
        border-left: 4px solid var(--green);
      }

      .followup-message-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .followup-message-header strong {
        font-size: 13px;
      }

      .followup-message-header span {
        color: var(--muted);
        font-size: 12px;
      }

      .followup-message p {
        margin: 0;
        white-space: pre-wrap;
        line-height: 1.7;
      }

      .followup-quick-asks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .followup-quick-asks button {
        min-height: 32px;
      }

      .followup-composer {
        display: grid;
        gap: 10px;
      }

      .followup-composer textarea {
        min-height: 88px;
        resize: vertical;
      }

      .followup-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .followup-actions .screen-note {
        margin: 0;
      }

      .followup-latest-answer {
        display: grid;
        gap: 10px;
        padding: 14px;
        margin-bottom: 18px;
        border: 1px solid #d8e6df;
        border-radius: 8px;
        background: #f8fbfa;
      }

      .followup-latest-answer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .followup-latest-answer-header h3 {
        margin: 0;
      }

      .followup-latest-answer-header span {
        color: var(--muted);
        font-size: 13px;
      }

      .followup-latest-answer-body {
        min-height: 180px;
        max-height: 180px;
        overflow: auto;
        padding: 12px 14px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #d9e3df;
        line-height: 1.75;
        white-space: pre-wrap;
      }

      .history-summary {
        display: grid;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed #d7dee3;
      }

      .history-summary.loading {
        padding: 12px;
        border: 1px dashed #d7dee3;
        border-radius: 8px;
        background: #f8fbfa;
      }

      .history-summary-block {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 8px;
        background: #f8fbfa;
      }

      .history-summary-block strong {
        font-size: 13px;
        color: var(--green-dark);
      }

      .history-summary-block p,
      .history-summary.loading p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .history-summary-actions {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }

      .history-signals {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin: 4px 0 2px;
      }

      .history-toolbar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
      }

      .history-insights {
        margin-bottom: 14px;
      }

      .history-insight-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 10px;
      }

      .history-insight-card {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(73, 111, 159, 0.16);
        border-radius: 8px;
        background: #f8fbfd;
      }

      .history-insight-card strong {
        color: var(--green-dark);
        font-size: 13px;
      }

      .history-insight-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
      }

      .history-insight-metrics {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .history-insight-note {
        font-size: 12px;
      }

      .history-insight-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
      }

      .history-insight-list {
        display: grid;
        gap: 8px;
      }

      .history-insight-row {
        display: grid;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px dashed rgba(73, 111, 159, 0.16);
      }

      .history-insight-row:first-child {
        padding-top: 0;
        border-top: 0;
      }

      .history-insight-row strong {
        color: var(--text);
        font-size: 13px;
      }

      .history-insight-row span {
        color: var(--muted);
        font-size: 12px;
      }

      .admin-audit-grid {
        margin-top: 20px;
      }

      .auth-audit-list {
        margin-top: 14px;
      }

      .auth-audit-list .source,
      .auth-audit-list .screen-note {
        margin-top: 0;
      }

      .auth-audit-item {
        display: grid;
        gap: 8px;
        padding: 12px 0;
        border-top: 1px solid var(--line);
      }

      .auth-audit-item:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .auth-audit-head {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .auth-audit-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
      }

      .auth-audit-detail {
        margin: 0;
        color: var(--ink);
        line-height: 1.6;
      }

      .auth-security-card {
        margin-top: 16px;
      }

      .admin-ops-grid {
        margin-top: 14px;
        margin-bottom: 14px;
      }

      .admin-ops-card {
        margin-top: 16px;
      }

      .admin-ops-metric {
        display: grid;
        gap: 4px;
      }

      .admin-ops-metric strong {
        color: var(--text);
        font-size: 14px;
      }

      .admin-ops-metric span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
      }

      .history-filter-group {
        display: grid;
        gap: 6px;
      }

      .history-filter-group label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .history-filter-group select {
        min-height: 38px;
        background: #f8fbfa;
      }

      .copy h3 {
        margin: 18px 0 8px;
        font-size: 16px;
      }

      .copy h3:first-child {
        margin-top: 0;
      }

      .process-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 6px;
      }

      .judgment-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 6px;
      }

      .core-analysis-list {
        display: grid;
        gap: 10px;
        margin-bottom: 12px;
      }

      .core-analysis-item {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(73, 111, 159, 0.14);
        border-radius: 8px;
        background: #fbfcfe;
      }

      .core-analysis-item h4 {
        margin: 0;
        color: var(--green-dark);
        font-size: 14px;
      }

      .core-analysis-item .narrative-block {
        margin: 0;
      }

      .process-card {
        display: grid;
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      .judgment-card {
        display: grid;
        gap: 6px;
        padding: 12px;
        border: 1px solid rgba(73, 111, 159, 0.18);
        border-radius: 8px;
        background: #f8fbfd;
      }

      .process-card strong {
        color: var(--green-dark);
        font-size: 13px;
      }

      .judgment-card strong {
        color: var(--green-dark);
        font-size: 13px;
      }

      .process-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.62;
      }

      .judgment-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.62;
      }

      .mounting-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 6px;
      }

      .mounting-card {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
        overflow: hidden;
      }

      .mounting-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.62);
      }

      .mounting-card-header strong {
        font-size: 14px;
        color: var(--green-dark);
      }

      .mounting-card-header span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .mounting-table {
        display: grid;
      }

      .mounting-row {
        display: grid;
        grid-template-columns: 58px 92px 56px 56px 64px 56px minmax(150px, 1fr);
        gap: 0;
        padding: 10px 14px;
        border-top: 1px solid rgba(215, 222, 227, 0.8);
        align-items: start;
      }

      .mounting-row:first-child {
        border-top: none;
      }

      .mounting-row--head {
        padding: 9px 14px;
        background: rgba(246, 250, 249, 0.92);
        border-top: none;
      }

      .mounting-cell {
        padding: 0 8px;
        min-width: 0;
        font-size: 13px;
        color: #344054;
      }

      .mounting-row--head .mounting-cell {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .mounting-cell--label strong {
        font-size: 13px;
      }

      .mounting-cell--meta {
        display: grid;
        gap: 4px;
      }

      .mounting-line {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 0 6px;
        border-radius: 6px;
        background: #f1f7f5;
        color: var(--green-dark);
        font-size: 12px;
        font-weight: 700;
      }

      .mounting-branch,
      .mounting-element,
      .mounting-kin,
      .mounting-spirit {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
      }

      .mounting-kin {
        font-size: 13px;
        font-weight: 700;
        color: #344054;
      }

      .mounting-spirit {
        color: var(--muted);
        font-size: 12px;
      }

      .mounting-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
      }

      .mounting-meta--hidden {
        color: #667085;
      }

      .copy p {
        margin: 0 0 10px;
        color: #344054;
        line-height: 1.72;
      }

      .result-basis {
        margin: -2px 0 18px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
      }

      .result-block {
        margin-bottom: 8px;
      }

      .narrative-block {
        display: grid;
        gap: 12px;
        margin: 0 0 10px;
      }

      .narrative-block p {
        margin: 0;
        color: #344054;
        line-height: 1.78;
      }

      @media (max-width: 820px) {
        .mounting-row {
          grid-template-columns: 50px 76px 48px 48px 56px 52px minmax(120px, 1fr);
          padding: 9px 10px;
        }

        .mounting-cell {
          padding: 0 4px;
          font-size: 12px;
        }

        .mounting-row--head .mounting-cell {
          font-size: 11px;
        }
      }

      .risk-card {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 8px;
        background: #fff8ef;
        border: 1px solid #ead7b6;
      }

      .risk-card strong {
        color: #7a5324;
        font-size: 14px;
      }

      .risk-card.high-risk {
        background: #fff3f1;
        border-color: #e6b9b2;
      }

      .risk-card.high-risk strong,
      .risk-card.high-risk .note,
      .risk-card.high-risk .risk-list {
        color: #8b3c35;
      }

      .copy .note {
        margin: 0;
        color: #7a5324;
        line-height: 1.65;
      }

      .risk-list {
        margin: 0;
        padding-left: 18px;
        color: #7a5324;
        line-height: 1.6;
      }

      .risk-list li + li {
        margin-top: 6px;
      }

      .classic-summary {
        margin-bottom: 10px;
      }

      .classic-toggle {
        margin-bottom: 12px;
      }

      .classic-text {
        display: grid;
        gap: 10px;
        margin-bottom: 12px;
      }

      .classic-text[hidden] {
        display: none;
      }

      .classic-text div {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
      }

      .classic-text span {
        color: var(--gold);
        font-size: 13px;
        font-weight: 800;
      }

      .classic-text p {
        margin: 0;
      }

      .action-plan {
        display: grid;
        gap: 12px;
        margin-top: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      @media (max-width: 820px) {
        .process-grid {
          grid-template-columns: 1fr;
        }

        .judgment-grid {
          grid-template-columns: 1fr;
        }

        .mounting-panel {
          grid-template-columns: 1fr;
        }

        .hexagram-pair {
          grid-template-columns: 1fr;
        }
      }

      .action-field {
        display: grid;
        gap: 8px;
      }

      .action-field label {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .action-field textarea {
        min-height: 72px;
        resize: vertical;
      }

      .action-actions {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      #actionMeta {
        margin: 0;
      }

      .upload-zone {
        min-height: 168px;
        border: 1px dashed #a9b6c4;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.7);
        display: grid;
        place-items: center;
        text-align: center;
        padding: 22px;
      }

      .upload-zone strong {
        display: block;
        margin-bottom: 6px;
      }

      .upload-zone span {
        color: var(--muted);
      }

      .import-feedback {
        display: grid;
        gap: 8px;
        margin-top: 14px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      .import-feedback-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .import-feedback p {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .import-feedback-list {
        display: grid;
        gap: 8px;
      }

      .import-item {
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--surface);
        border: 1px solid var(--line);
      }

      .import-item.success {
        border-color: #b7d5ca;
        background: #f4fbf8;
      }

      .import-item.warning {
        border-color: #ead7b6;
        background: #fff9ef;
      }

      .import-item strong {
        display: block;
        margin-bottom: 4px;
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }

      .stat {
        padding: 14px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: var(--surface);
      }

      .stat strong {
        display: block;
        font-size: 22px;
      }

      .stat span {
        color: var(--muted);
        font-size: 13px;
      }

      .history-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
      }

      .history-main {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .history-title-row {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
      }

      .history-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      .history-item h3 {
        margin: 0 0 6px;
        font-size: 15px;
      }

      .history-meta {
        color: #526071;
        font-size: 13px;
      }

      .history-next {
        color: var(--ink);
        font-size: 13px;
      }

      .history-trace {
        font-size: 13px;
      }

      .history-item p,
      .file-item p,
      .source p,
      .coach p {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--soft);
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .tag.green {
        background: var(--mist);
        color: var(--green-dark);
      }

      .tag.gold {
        background: #fff3dd;
        color: #8a5b1f;
      }

      .file-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
      }

      .file-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
      }

      .file-match-row {
        display: grid;
        gap: 8px;
        margin-top: 10px;
      }

      .file-match-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .file-item.focus {
        border-color: #93c5b1;
        box-shadow: 0 0 0 2px rgba(111, 168, 142, 0.14);
      }

      .manual-lines {
        display: grid;
        gap: 8px;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.64);
      }

      .manual-lines[hidden] {
        display: none;
      }

      .manual-line {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 10px;
        align-items: center;
      }

      .manual-line span {
        color: var(--muted);
        font-size: 13px;
      }

      .screen-note {
        margin-top: 20px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .review-plan {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fbfa;
      }

      .review-intro {
        margin: 0;
        color: #3d4a59;
        line-height: 1.6;
      }

      .review-signal-card {
        padding: 12px 14px;
        border: 1px solid rgba(47, 111, 98, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
      }

      .review-signal-card strong {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
      }

      .review-signal-card p {
        margin: 0;
        color: #516173;
        line-height: 1.6;
        font-size: 14px;
      }

      .review-step {
        display: grid;
        gap: 8px;
      }

      .review-step label {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .review-step textarea {
        min-height: 88px;
        resize: vertical;
      }

      .review-actions {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .review-actions .screen-note {
        margin: 0;
      }

      .toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 20;
        max-width: 320px;
        padding: 12px 14px;
        border: 1px solid rgba(47, 111, 98, 0.24);
        border-radius: 8px;
        background: var(--green-dark);
        color: white;
        box-shadow: var(--shadow);
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      @media (max-width: 980px) {
        .shell {
          grid-template-columns: 1fr;
        }

        .sidebar {
          position: static;
          height: auto;
          display: grid;
          gap: 12px;
        }

        .nav {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .nav button {
          justify-content: center;
          padding: 0 8px;
        }

        .nav button span {
          display: none;
        }

        .side-note {
          position: static;
        }

        .main {
          padding: 22px 16px 44px;
        }

        .shell-auth {
          margin-top: 0;
        }

        .grid,
        .reading-layout {
          grid-template-columns: 1fr;
        }

        .action-actions {
          align-items: stretch;
        }

        .action-actions button {
          width: 100%;
        }

        .history-item {
          grid-template-columns: 1fr;
          align-items: stretch;
        }

        .history-toolbar {
          grid-template-columns: 1fr;
        }

        .history-title-row {
          flex-direction: column;
          gap: 8px;
        }

        .review-actions {
          align-items: stretch;
        }

        .review-actions button {
          width: 100%;
        }
      }

      @media (max-width: 640px) {
        .topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .shell-auth {
          justify-content: stretch;
        }

        .auth-trigger {
          width: 100%;
          justify-content: center;
        }

        .title h1 {
          font-size: 24px;
        }

        .stats {
          grid-template-columns: 1fr;
        }

        .history-item,
        .file-item {
          grid-template-columns: 1fr;
        }
      }