:root { font-family: Inter, "Noto Sans TC", Arial, sans-serif; color: var(--color-ink); background: var(--color-surface); font-size: 14px; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; padding: 20px 12px 14px; color: var(--color-ink); background: var(--color-surface); border-right: 1px solid var(--color-primary); }
.brand { color: var(--color-ink); font-size: 18px; font-weight: 800; letter-spacing: .02em; text-decoration: none; }.brand span { color: var(--color-primary-strong); font-size: 10px; letter-spacing: .12em; }
.workspace-label, .nav-heading, .sidebar-footer { color: var(--color-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }.workspace-label { margin: 28px 8px 16px; }.nav-heading { margin: 0 8px 6px; }.sidebar-footer { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--color-primary); font-size: 9px; }
.sheet-nav { display: grid; gap: 2px; }.sheet-link, .create-sheet-entry { display: flex; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--color-ink); background: transparent; cursor: pointer; text-align: left; }.sheet-link:hover { background: var(--color-primary-soft); }.sheet-link.is-active { background: var(--color-primary); font-weight: 700; }.sheet-link small { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 4px; color: var(--color-ink); background: var(--color-primary-soft); font-size: 11px; }.sheet-link.is-active small { background: var(--color-surface); }.create-sheet-entry { display: block; margin-top: 9px; border: 1px dashed var(--color-primary-strong); color: var(--color-primary-strong); font-weight: 700; }.create-sheet-entry:disabled { cursor: wait; opacity: .6; }
.main-content { min-width: 0; padding: 28px clamp(18px, 3.5vw, 48px); }.topbar, .detail-heading, .editor-header, .subtable-heading, .subtable-settings-heading, .subtable-settings-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.topbar { margin-bottom: 24px; }.topbar-actions, .record-actions, .editor-header-actions { display: flex; gap: 6px; align-items: center; }
.breadcrumb, .eyebrow { margin: 0 0 5px; color: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }h1, h2, h3 { margin: 0; color: var(--color-ink); letter-spacing: -.03em; }h1 { font-size: clamp(26px, 3.5vw, 34px); }h2 { font-size: 25px; }h3 { font-size: 18px; }
.primary-button, .secondary-button, .danger-button { padding: 8px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 700; }.primary-button { border: 1px solid var(--color-primary-strong); color: var(--color-ink); background: var(--color-primary); }.primary-button:disabled { cursor: wait; opacity: .6; }.secondary-button { border: 1px solid var(--color-primary-strong); color: var(--color-ink); background: var(--color-surface); }.danger-button { border: 1px solid var(--color-muted); color: var(--color-ink); background: var(--color-primary-soft); }
.sheet-summary { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--color-muted); }.sheet-summary p { margin: 0; }.sheet-summary span { white-space: nowrap; font-size: 12px; }
.table-frame { overflow-x: auto; border: 1px solid var(--color-primary); border-radius: 9px; background: var(--color-surface); box-shadow: 0 5px 18px color-mix(in srgb, var(--color-ink) 8%, transparent); }table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }th { padding: 10px 12px; border-bottom: 1px solid var(--color-primary); color: var(--color-muted); background: var(--color-primary-soft); font-size: 10px; font-weight: 700; }td { max-width: 190px; padding: 12px; overflow: hidden; border-bottom: 1px solid var(--color-primary-soft); color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }tbody tr:last-child td { border-bottom: 0; }.record-row { cursor: pointer; }.record-row:hover { background: var(--color-primary-soft); }.serial-column { min-width: 70px; color: var(--color-primary-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }.row-arrow { color: var(--color-primary-strong); font-size: 20px; }
.back-button { margin-bottom: 18px; padding: 0; border: 0; color: var(--color-primary-strong); background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }.detail-heading { align-items: center; margin-bottom: 20px; }.record-uuid { margin: 5px 0 0; color: var(--color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }.detail-grid, .record-editor-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.detail-field, .record-input, .field-editor-row { border: 1px solid var(--color-primary); border-radius: 8px; background: var(--color-surface); }.detail-field { min-height: 88px; padding: 14px; }.detail-field.is-wide, .record-input.is-wide { grid-column: 1 / -1; }.detail-field p, .record-input, .field-editor-row label { color: var(--color-muted); font-size: 11px; font-weight: 700; }.detail-field p { margin: 0 0 8px; }.detail-field strong { color: var(--color-ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.subtable-section { margin-top: 42px; }.subtable-heading { align-items: center; margin-bottom: 12px; }.subtable-heading > span { color: var(--color-muted); font-size: 13px; }.empty-subtable, .empty-subtable-setting { color: var(--color-muted); text-align: center; }
.editor-header { margin-bottom: 18px; }.editor-header > div > p:last-child, .subtable-creator > p { max-width: 660px; color: var(--color-muted); line-height: 1.7; }.field-editor-note { margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; color: var(--color-ink); background: var(--color-primary-soft); font-size: 13px; }.field-editor-list, .subtable-settings-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.field-editor-row { display: grid; grid-template-columns: 28px minmax(160px, 1.6fr) minmax(130px, .8fr) 72px 36px; gap: 12px; align-items: end; padding: 14px; }.field-editor-row.is-dragging { opacity: .45; }.drag-handle { padding: 10px 0; color: var(--color-primary-strong); cursor: grab; font-size: 21px; }.field-editor-row label { display: grid; gap: 6px; }.field-editor-row input:not([type="checkbox"]), .field-editor-row select, .record-input input, .record-input select, .record-input textarea, .subtable-form-grid input, .subtable-form-grid select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--color-primary); border-radius: 6px; color: var(--color-ink); background: var(--color-surface); font: inherit; }.required-control { padding-bottom: 11px; white-space: nowrap; }.delete-field-button { width: 36px; height: 38px; border: 0; border-radius: 6px; color: var(--color-ink); background: var(--color-primary-soft); cursor: pointer; font-size: 22px; }.editor-actions { display: flex; justify-content: space-between; margin-top: 20px; }.record-input { display: grid; gap: 7px; padding: 16px; }.record-input em, .form-message { color: var(--color-primary-strong); font-style: normal; }.record-input textarea { min-height: 104px; resize: vertical; }
.subtable-creator, .subtable-settings { margin-bottom: 18px; padding: 20px; border: 1px solid var(--color-primary); border-radius: 12px; background: var(--color-surface); }.subtable-creator { margin-top: 28px; }.subtable-creator code { padding: 2px 4px; border-radius: 4px; color: var(--color-ink); background: var(--color-primary-soft); }.subtable-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.subtable-form-grid label { display: grid; gap: 7px; color: var(--color-muted); font-size: 12px; font-weight: 700; }.subtable-settings-list { margin: 16px 0; }.subtable-settings-list li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--color-primary); border-radius: 8px; background: var(--color-surface); }.subtable-settings-list li strong { color: var(--color-ink); }.subtable-settings-list li span, .subtable-settings-heading > span { color: var(--color-muted); font-size: 12px; }.subtable-settings-actions > span { color: var(--color-primary-strong); font-size: 13px; font-weight: 700; }
.empty-state, .loading-text { padding: 34px; border: 1px dashed var(--color-primary-strong); border-radius: 12px; color: var(--color-muted); background: var(--color-surface); }.empty-state p { margin-bottom: 0; }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; }.sidebar { min-height: auto; padding: 18px; }.workspace-label, .nav-heading { margin-top: 20px; }.sidebar-footer { display: none; }.main-content { padding: 28px 20px; }.topbar, .sheet-summary, .editor-header { align-items: flex-start; flex-direction: column; }.topbar-actions, .record-actions, .subtable-settings-heading, .subtable-settings-actions { flex-wrap: wrap; }.detail-grid, .record-editor-form, .subtable-form-grid { grid-template-columns: 1fr; }.detail-field.is-wide, .record-input.is-wide { grid-column: auto; }.field-editor-row { grid-template-columns: 24px 1fr 36px; }.field-editor-row label { grid-column: 2 / 3; }.field-editor-row .required-control { grid-column: 2 / 3; padding-bottom: 0; }.delete-field-button { grid-column: 3; grid-row: 1; }.editor-actions { gap: 12px; flex-wrap: wrap; } }

/* 柔和藍色卡片風格：白色工作台，僅以主色製作漸層與互動重點。 */
body { min-height: 100vh; background: linear-gradient(180deg, var(--color-primary-soft) 0, var(--color-surface) 280px); }
.sidebar { border-right: 0; box-shadow: 14px 0 38px color-mix(in srgb, var(--color-primary-strong) 10%, transparent); }
.brand { display: inline-flex; align-items: center; width: fit-content; padding: 7px 10px; border-radius: 12px; background: var(--color-primary-soft); }.brand span { margin-left: 5px; }
.sheet-link, .create-sheet-entry { border-radius: 12px; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }.sheet-link:hover { transform: translateX(2px); }.sheet-link.is-active { color: var(--color-surface); background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary)); box-shadow: 0 10px 20px color-mix(in srgb, var(--color-primary-strong) 22%, transparent); }.sheet-link.is-active small { color: var(--color-primary-strong); }.create-sheet-entry { background: var(--color-primary-soft); border-style: solid; }
.main-content { position: relative; isolation: isolate; }.main-content::before { position: absolute; z-index: -1; width: 440px; height: 220px; top: 0; right: 4%; border-radius: 48% 52% 58% 42%; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 44%, transparent), color-mix(in srgb, var(--color-primary-strong) 24%, transparent)); filter: blur(4px); content: ""; }
.topbar { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-surface)); border-radius: 24px; background: color-mix(in srgb, var(--color-surface) 90%, var(--color-primary-soft)); box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary-strong) 10%, transparent); }.topbar .breadcrumb { margin-bottom: 3px; }
.primary-button { border: 0; color: var(--color-surface); background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary)); box-shadow: 0 8px 16px color-mix(in srgb, var(--color-primary-strong) 22%, transparent); }.secondary-button { border-color: color-mix(in srgb, var(--color-primary) 85%, var(--color-surface)); box-shadow: 0 5px 12px color-mix(in srgb, var(--color-primary-strong) 8%, transparent); }.danger-button { border-color: var(--color-primary); }
.table-frame, .detail-field, .record-input, .field-editor-row, .subtable-creator, .subtable-settings { border-color: color-mix(in srgb, var(--color-primary) 62%, var(--color-surface)); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary-strong) 8%, transparent); }.table-frame { border-radius: 20px; }.detail-field, .record-input, .field-editor-row { border-radius: 16px; }.field-editor-row:hover, .detail-field:hover { border-color: var(--color-primary); }.subtable-creator, .subtable-settings { border-radius: 20px; background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft)); }
.field-editor-note, .empty-state, .loading-text { border-radius: 16px; background: color-mix(in srgb, var(--color-surface) 86%, var(--color-primary-soft)); }.record-input input, .record-input select, .record-input textarea, .field-editor-row input:not([type="checkbox"]), .field-editor-row select, .subtable-form-grid input, .subtable-form-grid select { border-color: color-mix(in srgb, var(--color-primary) 65%, var(--color-surface)); border-radius: 12px; }.record-input input:focus, .record-input select:focus, .record-input textarea:focus, .field-editor-row input:focus, .field-editor-row select:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 1px; }

/* 第二重配色：藍色為主、薄荷綠反光，淺色區域一律由白色混色生成。 */
body { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 32%, var(--color-surface)) 0, var(--color-surface) 280px); }
.brand, .create-sheet-entry { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }.sheet-link:hover, th, .record-row:hover { background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)); }.sheet-link small { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); }.danger-button, .field-editor-note, .delete-field-button { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }.subtable-creator code { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.sheet-link.is-active, .primary-button { color: var(--color-surface); background: linear-gradient(135deg, var(--color-primary-strong) 0%, var(--color-primary) 58%, var(--color-primary-soft) 100%); }.main-content::before { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 50%, transparent), color-mix(in srgb, var(--color-primary-soft) 38%, transparent)); }
.topbar, .table-frame, .detail-field, .record-input, .field-editor-row, .subtable-creator, .subtable-settings { position: relative; overflow: hidden; background: color-mix(in srgb, var(--color-surface) 88%, transparent); backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); border-color: color-mix(in srgb, var(--color-surface) 68%, var(--color-primary)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface) 86%, transparent), 0 12px 28px color-mix(in srgb, var(--color-primary-strong) 10%, transparent); }
.topbar::after, .table-frame::after, .detail-field::after, .record-input::after, .field-editor-row::after, .subtable-creator::after, .subtable-settings::after { position: absolute; pointer-events: none; inset: 0; border-radius: inherit; background: linear-gradient(120deg, color-mix(in srgb, var(--color-surface) 58%, transparent) 0%, transparent 38%, color-mix(in srgb, var(--color-primary-soft) 16%, transparent) 100%); content: ""; }

/* 資料閱讀層級：欄位資訊與表格欄名提高可讀性。 */
.detail-field p, .record-input, .field-editor-row label { color: var(--color-ink); font-size: 14px; }
th { font-size: 13px; }

/* 表格切換時的局部讀取遮罩：不清空右側內容，保持操作節奏。 */
.sheet-loading { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 9px; inset: 0; color: var(--color-ink); background: color-mix(in srgb, var(--color-surface) 66%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); font-size: 14px; font-weight: 700; }.sheet-loading-spinner { width: 19px; height: 19px; border: 3px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-surface)); border-top-color: var(--color-primary-strong); border-radius: 50%; animation: sheet-loading-spin .7s linear infinite; }@keyframes sheet-loading-spin { to { transform: rotate(360deg); } }