:root { font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif; color: #24192b; background: #f4f1eb; font-size: 14px; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 8% -8%, rgba(104,49,160,.17), transparent 38rem), #f4f1eb; }
button, input, select, textarea { font: inherit; }
button { min-height: 38px; padding: 7px 13px; border: 1px solid #d1c5d8; border-radius: 8px; background: #fff; color: #35283e; cursor: pointer; font-weight: 800; }
button:hover { border-color: #7d4ea7; }
button:disabled { cursor: wait; opacity: .48; }
button.primary { border-color: #6831a0; background: #6831a0; color: #fff; }
button.danger { border-color: #e8a5ab; color: #a52938; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 76px; padding: 12px max(20px, calc((100vw - 1280px)/2)); border-bottom: 1px solid rgba(82,57,94,.25); background: rgba(28,13,45,.97); color: #fff; }
.site-header > div:first-child > span, .eyebrow { color: #bda8d1; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.site-header h1 { margin: 2px 0 0; font-size: 20px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
#currentUser { color: #dfd3e9; font-size: 12px; }
main { width: min(1280px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 60px; }
.auth-card, .panel, .page-card, .page-admin-card, .user-card { border: 1px solid #dbd1c8; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 12px 38px rgba(39,23,49,.06); }
.auth-card { width: min(540px, 100%); margin: 8vh auto; padding: 28px; }
.auth-card form { display: grid; gap: 14px; }
.auth-card h2 { margin: 4px 0 0; }
.auth-card p { margin: 0 0 8px; color: #6c606f; line-height: 1.55; }
label { display: grid; gap: 5px; color: #645769; font-size: 11px; font-weight: 800; }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #d3c8d8; border-radius: 8px; background: #fff; color: #281e2d; }
textarea { resize: vertical; line-height: 1.45; }
.message { margin-top: 14px; padding: 10px; border-radius: 8px; background: #fff0f1; color: #992d39; }
.tabs { position: sticky; top: 76px; z-index: 12; display: flex; gap: 5px; overflow-x: auto; padding: 9px; border: 1px solid #ded5cc; border-radius: 11px; background: rgba(250,248,244,.96); backdrop-filter: blur(10px); }
.tabs button { white-space: nowrap; }
.tabs button.active { border-color: #6831a0; background: #eee4f6; color: #5e278e; }
.view { display: none; padding-top: 24px; }
.view.active { display: block; }
.embed-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 520px; border: 0; border-radius: 11px; }
.section-head, .panel-head, .panel-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.section-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-head { margin-bottom: 12px; }
.section-head h2, .panel-head h3 { margin: 3px 0; }
.summary-counts { display: grid; grid-template-columns: repeat(4, minmax(120px,1fr)); gap: 10px; margin-bottom: 12px; }
.summary-counts > div { padding: 13px; border: 1px solid #ddd3ca; border-radius: 10px; background: #fff; }
.summary-counts strong, .summary-counts span { display: block; }
.summary-counts strong { font-size: 24px; }
.summary-counts span { color: #746979; font-size: 11px; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 12px; }
.page-card { display: grid; gap: 10px; padding: 16px; }
.page-card-head, .page-admin-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.page-card h3, .page-admin-card h3 { margin: 0; }
code { color: #66379a; overflow-wrap: anywhere; }
.page-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.page-counts div { padding: 8px; border-radius: 7px; background: #f6f3f0; text-align: center; }
.page-counts strong, .page-counts span { display: block; }
.page-counts strong { font-size: 18px; }
.page-counts span, small { color: #786d7b; font-size: 10px; }
.status-badge, .post-status, .secret-badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.status-badge.neutral, .post-status.cancelled { background: #eee9f0; color: #665b6b; }
.status-badge.success, .post-status.published { background: #dcf7e6; color: #16633e; }
.status-badge.danger, .post-status.failed, .post-status.needs_review { background: #ffe3e6; color: #9a2936; }
.status-badge.warning, .post-status.scheduled, .post-status.sync_error { background: #fff0c9; color: #815710; }
.post-status.publishing { background: #dfeeff; color: #225794; }
.panel { padding: 16px; }
.composer { display: grid; gap: 14px; margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap: 12px; }
.drop-zone { display: grid; place-items: center; gap: 4px; min-height: 120px; padding: 18px; border: 2px dashed #bba9c8; border-radius: 11px; background: #f9f6fb; text-align: center; cursor: pointer; }
.drop-zone.dragging { border-color: #6831a0; background: #eee4f6; }
.drop-zone span { color: #776a7c; font-size: 11px; }
.media-previews { display: flex; gap: 10px; overflow-x: auto; }
.media-preview { position: relative; flex: 0 0 130px; padding: 6px; border: 1px solid #ddd1e2; border-radius: 9px; background: #fff; }
.media-preview img { display: block; width: 100%; height: 105px; border-radius: 6px; object-fit: cover; }
.media-preview div { display: flex; justify-content: space-between; gap: 3px; margin-top: 5px; }
.media-preview button { min-height: 28px; padding: 2px 7px; font-size: 11px; }
.media-preview small { display: block; overflow: hidden; margin-top: 4px; text-overflow: ellipsis; white-space: nowrap; }
.panel-actions { justify-content: flex-end; }
#uploadProgress { margin-right: auto; color: #6b5e6f; font-size: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters select, .filters input { width: auto; min-width: 160px; flex: 1 1 160px; }
.table-wrap { overflow-x: auto; padding: 0; scrollbar-gutter: stable; }
table { width: 100%; min-width: 1050px; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px solid #ece6e0; text-align: left; vertical-align: top; }
th { background: #f7f3f9; color: #625568; font-size: 11px; }
td { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
td code, td small { display: block; max-width: 100%; line-height: 1.45; }
.jobs-table { min-width: 1420px; table-layout: fixed; }
.jobs-col-time { width: 130px; }
.jobs-col-page { width: 160px; }
.jobs-col-status { width: 95px; }
.jobs-col-id { width: 220px; }
.jobs-col-facebook { width: 215px; }
.jobs-col-detail { width: 470px; }
.jobs-col-actions { width: 130px; }
.jobs-table tbody tr:hover { background: #fcfafc; }
.jobs-table td:nth-child(6) strong { display: block; line-height: 1.55; }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.row-actions button { min-height: 30px; padding: 3px 7px; font-size: 10px; white-space: nowrap; }
.post-error { max-width: 320px; margin-top: 4px; color: #a52a36; }
.post-status { align-items: center; justify-content: center; line-height: 1.25; text-align: center; white-space: nowrap; }
.post-link { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: 7px; padding: 5px 10px; border: 1px solid #cbb6dc; border-radius: 8px; background: #f5effa; color: #572486; font-weight: 900; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.post-link:hover { border-color: #7d4ea7; background: #eee4f6; }
.empty { padding: 36px; text-align: center; color: #716576; }
.page-admin-list, .user-list, .integration-grid { display: grid; gap: 10px; }
.token-guide { display: grid; gap: 14px; margin-bottom: 14px; padding: 20px; }
.token-guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.token-guide-head h3 { margin: 3px 0; font-size: 20px; }
.token-guide-head p, .token-guide-step p { margin: 4px 0; color: #675b6b; line-height: 1.6; }
.token-guide-alert { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid; border-radius: 9px; }
.token-guide-alert.danger { border-color: #efb3b9; background: #fff0f1; color: #902633; }
.token-guide-alert.success { margin-top: 10px; border-color: #9cd4b4; background: #edf9f2; color: #17623e; }
.token-guide-toc { display: flex; flex-wrap: wrap; gap: 7px; }
.token-guide-toc a { padding: 6px 9px; border: 1px solid #d8c9e4; border-radius: 7px; background: #f7f1fb; color: #5d2b89; font-size: 11px; font-weight: 800; text-decoration: none; }
.token-guide-steps { display: grid; gap: 10px; }
.token-guide-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; scroll-margin-top: 140px; padding: 14px; border: 1px solid #e0d7cf; border-radius: 10px; background: #fff; }
.token-guide-step h4, .token-guide-troubleshooting h4 { margin: 0 0 5px; }
.token-guide-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #6831a0; color: #fff; font-weight: 900; }
.permission-list, .token-check-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.permission-list code, .token-check-list span { padding: 5px 8px; border-radius: 999px; background: #eee4f6; color: #5c2789; font-size: 11px; font-weight: 800; }
.token-check-list span { background: #e4f5ea; color: #17633f; }
.token-guide-code { position: relative; margin: 10px 0; overflow: hidden; border: 1px solid #3d2e48; border-radius: 9px; background: #211528; }
.token-guide-code pre { margin: 0; padding: 45px 14px 14px; overflow-x: auto; color: #f5edfa; white-space: pre-wrap; overflow-wrap: anywhere; }
.token-guide-code button { position: absolute; top: 8px; right: 8px; min-height: 27px; padding: 3px 8px; background: #fff; }
.token-guide-flow { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 12px; border-radius: 9px; background: #f5effa; color: #572486; white-space: nowrap; }
.token-guide-flow span { padding: 7px 9px; border: 1px solid #d7c4e5; border-radius: 7px; background: #fff; font-weight: 800; }
.token-guide-troubleshooting { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.token-guide-troubleshooting article { padding: 12px; border: 1px solid #e0d7cf; border-radius: 9px; background: #faf8f4; }
.token-guide-troubleshooting p { margin: 0; color: #675b6b; line-height: 1.55; }
.page-admin-card, .user-card { padding: 15px; }
.page-admin-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 7px 0; color: #716575; font-size: 11px; }
.page-admin-actions, .user-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.sub-section { margin-top: 30px; padding-top: 22px; border-top: 1px solid #ddd2c8; }
#pageForm, #userForm { margin-bottom: 12px; }
.integration-grid { grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); }
.integration-card { display: grid; gap: 10px; padding: 15px; border: 1px solid #dbd1c8; border-radius: 11px; background: #fff; }
.integration-card h3 { margin: 0; }
.integration-actions { display: flex; gap: 7px; justify-content: flex-end; }
.secret-badge { margin-left: 5px; background: #e4f5ea; color: #17633f; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; max-width: 420px; padding: 12px 15px; border-radius: 9px; background: #291735; color: #fff; box-shadow: 0 12px 38px rgba(0,0,0,.25); }
[hidden] { display: none !important; }
@media (max-width: 760px) { .form-grid, .summary-counts { grid-template-columns: 1fr 1fr; } .site-header { align-items: flex-start; padding: 10px 12px; } .site-header h1 { font-size: 16px; } .header-actions { display: grid; justify-items: end; } main { width: calc(100% - 18px); } .tabs { top: 72px; } .token-guide-head { display: grid; } .token-guide-troubleshooting { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .form-grid { grid-template-columns: 1fr; } .auth-card, .panel { padding: 13px; } .summary-counts { gap: 6px; } .summary-counts > div { padding: 9px; } .integration-grid { grid-template-columns: 1fr; } }

/* Keep all job columns visible on desktop, wrap long IDs and captions. */
main { width: min(1800px, calc(100% - 28px)); }
.jobs-table { min-width: 900px; font-size: 12px; }
.jobs-col-image { width: 8%; }
.jobs-col-time { width: 11%; }
.jobs-col-page { width: 11%; }
.jobs-col-status { width: 9%; }
.jobs-col-id { width: 12%; }
.jobs-col-facebook { width: 11%; }
.jobs-col-detail { width: 28%; }
.jobs-col-actions { width: 10%; }
.jobs-table td { padding: 9px 7px; font-size: clamp(11px, .8vw, 14px); }
.jobs-table td strong { font-weight: 500; white-space: pre-wrap; }
.jobs-table .post-status, .jobs-table .post-link { white-space: normal; }
.jobs-table tr.waiting-row { background: #fff5d8; }
.jobs-table tr.waiting-row:hover { background: #ffedb7; }
.waiting-row td:first-child { border-left: 4px solid #d99716; }
.history-image { display: grid; place-items: center; min-height: 80px; background: #eee9f0; border-radius: 8px; overflow: hidden; }
.history-image img { display: block; width: 100%; height: 95px; object-fit: contain; }
.history-image span { padding: 12px; color: #786d7b; }
.waiting-section { margin: 16px 0 24px; padding: 16px; border: 1px solid #e6bc61; border-radius: 12px; background: #fff8e6; }
.waiting-section h2 { margin-top: 0; }
.waiting-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px; }
.waiting-card { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding: 12px; border: 1px solid #e6bc61; background: white; border-radius: 9px; }
.waiting-card h3 { margin: 5px 0; }
.waiting-card p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 110px; overflow: auto; }

/* Mobile dashboard: keep every job field available as a labelled card. */
@media (max-width: 760px) {
  .site-header { position: relative; flex-wrap: wrap; gap: 10px; }
  .header-actions { display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  #currentUser { overflow-wrap: anywhere; }
  .tabs { top: 0; border-radius: 0 0 10px 10px; }
  main { padding-top: 12px; }
  button, .row-actions button, .post-link { min-height: 44px; }
  input, select, textarea { min-width: 0; font-size: 16px; }
  .section-head, .panel-head { flex-wrap: wrap; }
  .section-head h2 { font-size: 20px; }
  .section-head-actions { justify-content: flex-start; }
  .form-grid, .integration-grid, .page-grid, .waiting-grid { grid-template-columns: minmax(0,1fr); }
  .waiting-section { padding: 10px; }
  .waiting-card { grid-template-columns: 80px minmax(0,1fr); padding: 10px; }
  .waiting-card strong { font-size: 13px; }
  .page-card-head, .page-admin-head { flex-wrap: wrap; }
  .page-card, .page-admin-card, .user-card, .integration-card { min-width: 0; overflow-wrap: anywhere; }
  .filters { display: grid; grid-template-columns: minmax(0,1fr); }
  .filters input, .filters select { width: 100%; min-width: 0; }
  #view-jobs > .table-wrap { border: 0; padding: 0; background: transparent; box-shadow: none; overflow: visible; }
  .jobs-table, .jobs-table tbody { display: block; width: 100%; min-width: 0; }
  .jobs-table colgroup, .jobs-table thead { display: none; }
  .jobs-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-bottom: 14px; padding: 10px; border: 1px solid #dbd1c8; border-radius: 12px; background: white; }
  .jobs-table tbody tr.waiting-row { border: 2px solid #d99716; background: #fff5d8; }
  .jobs-table td { display: block; min-width: 0; padding: 9px 6px; font-size: 14px; border: 0; }
  .jobs-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; color: #786d7b; }
  .jobs-table td:first-child, .jobs-table td:nth-child(n+5) { grid-column: 1 / -1; }
  .jobs-table td:first-child { border: 0; }
  .jobs-table td:first-child::before { display: none; }
  .jobs-table .history-image img { height: 200px; }
  .jobs-table td small { font-size: 12px; }
  .jobs-table .row-actions button { flex: 1 1 auto; font-size: 13px; }
  .jobs-table .post-status { font-size: 12px; }
  .post-error { max-width: 100%; }
  .panel-actions { flex-wrap: wrap; }
  #submitPost { width: 100%; }
  .media-previews { max-width: 100%; }
  .token-guide-step { padding: 10px; grid-template-columns: 26px minmax(0,1fr); gap: 8px; }
  .token-guide-number { width: 26px; height: 26px; }
  .token-guide-flow { max-width: 100%; }
  .toast { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); max-width: none; overflow-wrap: anywhere; }
}

.story-link-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.story-link-list .panel { margin: 0; min-width: 0; }
.story-link-url, #storyHistoryList li { overflow-wrap: anywhere; }
.story-link-edit-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(180px, 3fr) auto auto auto; gap: 12px; align-items: end; padding: 12px 0; }
#storyLinkFields { border: 0; padding: 0; min-width: 0; }
#storyHistoryList article { border-bottom: 1px solid #ddd; padding: 12px 0; }
@media (max-width: 700px) { .story-link-edit-row { grid-template-columns: 1fr 1fr; } .story-link-edit-row > label:nth-child(2) { grid-column: 1 / -1; } }
.story-link-edit-row > label:has(input[type="checkbox"]), .story-link-edit-row > label:has(input[type="radio"]) { display: flex; align-items: center; gap: 8px; align-self: center; }
.story-link-edit-row input[type="checkbox"], .story-link-edit-row input[type="radio"] { width: 18px; height: 18px; min-height: 18px; margin: 0; flex: 0 0 18px; }

.story-link-list .story-link-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.story-link-card-header, .story-link-card-content, .story-link-card-footer { padding: 16px; }
.story-link-card-header { border-bottom: 1px solid #eee7ef; }
.story-link-card-header h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.story-link-card-header p { margin: 0; color: #746979; font-size: 12px; }
.story-link-card-content { flex: 1; }
.story-link-card-content ul { margin: 0; padding-left: 18px; }
.story-link-card-content li + li { margin-top: 10px; }
.story-link-card-footer { margin-top: auto; border-top: 1px solid #eee7ef; background: #fcfafc; }
.story-link-card-footer small { display: block; color: #746979; margin-bottom: 10px; }
.story-link-card-footer .actions { display: flex; flex-wrap: wrap; gap: 6px; }
#storyLinkSearch { align-items: end; }
#storyLinkSearch input, #storyLinkSearch select, #storyLinkSearch > button { height: 44px; min-height: 44px; }

body:has(.dashboard-modal[open]) { overflow: hidden; }
.dashboard-modal { width: min(900px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid #d1c5d8; border-radius: 16px; background: #fff; color: #24192b; box-shadow: 0 24px 80px rgba(28,13,45,.3); overscroll-behavior: contain; }
.dashboard-modal::backdrop { background: rgba(28,13,45,.58); backdrop-filter: blur(3px); }
.dashboard-modal > .panel { margin: 0; padding: 24px; border: 0; border-radius: 0; box-shadow: none; }
.dashboard-modal h3 { margin-top: 0; }
.dashboard-modal #storyLinkFields > label { margin-bottom: 12px; }
.dashboard-modal #storyCloseEditor, .dashboard-modal #storyCloseHistory { margin-top: 12px; }
.dashboard-modal > .toast { position: sticky; bottom: 12px; left: auto; transform: none; width: auto; margin: 12px; }
@media (max-width: 700px) {
  .dashboard-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .dashboard-modal > .panel { padding: 16px; }
}

/* Account theme and viewport-safe dialogs. Dark is the initial dashboard theme. */
.theme-toggle, .pin-page-button { white-space: nowrap; }
.pin-page-button.active { border-color: #8b5cf6; background: #6d28d9; color: #fff; }
.library-table-wrap { overflow-x: auto; }
.library-story-name { display: grid; gap: 4px; overflow-wrap: anywhere; }
.library-story-name > span { color: #746979; font-size: 11px; line-height: 1.45; }
.library-story-name em { display: inline-flex; padding: 1px 6px; border-radius: 999px; background: #eee4f6; color: #5c2789; font-style: normal; font-weight: 900; }
.library-collection { display: block; margin-top: 5px; }
.library-source-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: #f1ecf7; color: #5c2789; border: 1px solid #d8c7ea; }
.dashboard-modal { width: min(960px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; padding: 0; }
.dashboard-modal > .panel, .dashboard-modal > form:not(.dashboard-modal-frame), .dashboard-modal > section { max-height: calc(100dvh - 42px); overflow: auto; padding: 24px; scrollbar-gutter: stable; }
.dashboard-modal-frame { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 42px); margin: 0; }
.dashboard-modal-head { flex: 0 0 auto; padding: 20px 24px 14px; border-bottom: 1px solid #e4dce8; background: inherit; }
.dashboard-modal-head h3 { margin: 0; }
.dashboard-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 24px; scrollbar-gutter: stable; }
.dashboard-modal-body > label { display: block; margin-bottom: 14px; }
.dashboard-modal-actions { position: sticky; bottom: 0; display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid #e4dce8; background: inherit; }

html[data-theme="dark"] { color-scheme: dark; background: #11141a; }
html[data-theme="dark"] body { color: #e7e9ee; background: radial-gradient(circle at 8% -8%, rgba(124,58,237,.24), transparent 38rem), #11141a; }
html[data-theme="dark"] .site-header { border-color: #343947; background: rgba(15,17,23,.96); }
html[data-theme="dark"] .tabs { border-color: #343947; background: rgba(25,28,36,.97); }
html[data-theme="dark"] .tabs button.active, html[data-theme="dark"] button.primary { border-color: #8b5cf6; background: #7c3aed; color: #fff; }
html[data-theme="dark"] button, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { border-color: #414756; background: #20242d; color: #e7e9ee; }
html[data-theme="dark"] button:hover { border-color: #9f7aea; background-color: #292e39; }
html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] textarea:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
html[data-theme="dark"] .auth-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .page-card, html[data-theme="dark"] .page-admin-card, html[data-theme="dark"] .user-card, html[data-theme="dark"] .integration-card, html[data-theme="dark"] .waiting-section, html[data-theme="dark"] .waiting-card, html[data-theme="dark"] .summary-counts > div, html[data-theme="dark"] .token-guide-step { border-color: #353b48; background: #1a1e27; color: #e7e9ee; box-shadow: none; }
html[data-theme="dark"] .page-counts div, html[data-theme="dark"] th, html[data-theme="dark"] .story-link-card-footer, html[data-theme="dark"] .story-profile-section { border-color: #353b48; background: #222731; color: #d9dce4; }
html[data-theme="dark"] td, html[data-theme="dark"] #storyHistoryList article { border-color: #303642; }
html[data-theme="dark"] .jobs-table tbody tr:hover { background: #232833; }
html[data-theme="dark"] small, html[data-theme="dark"] .summary-counts span, html[data-theme="dark"] .page-admin-meta, html[data-theme="dark"] .story-link-card-footer small, html[data-theme="dark"] .library-story-name > span { color: #aeb4c2; }
html[data-theme="dark"] code, html[data-theme="dark"] a { color: #c4a7ff; }
html[data-theme="dark"] .dashboard-modal { border-color: #444b5a; background: #181c24; color: #e7e9ee; box-shadow: 0 24px 90px rgba(0,0,0,.62); }
html[data-theme="dark"] .dashboard-modal-head, html[data-theme="dark"] .dashboard-modal-actions { border-color: #353b48; background: #181c24; }
html[data-theme="dark"] .dashboard-modal::backdrop { background: rgba(3,5,9,.76); }
html[data-theme="dark"] .library-story-name em { background: #3b2860; color: #dccbff; }
html[data-theme="dark"] .library-source-badge { background: #2b223c; color: #dccbff; border-color: #4c376d; }
html[data-theme="dark"] .token-guide-alert.danger { border-color: #7f3b45; background: #351d24; color: #ffbdc4; }
html[data-theme="dark"] .token-guide-alert.success { border-color: #326448; background: #183125; color: #a7e7bd; }

@media (max-width: 760px) {
  .dashboard-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .dashboard-modal > .panel, .dashboard-modal > form:not(.dashboard-modal-frame), .dashboard-modal > section, .dashboard-modal-frame { max-height: calc(100dvh - 22px); }
  .dashboard-modal-head { padding: 16px 16px 12px; }
  .dashboard-modal-body { padding: 16px; }
  .dashboard-modal-actions { padding: 12px 16px; }
  .theme-toggle { min-height: 40px; }
}

/* Keep glossary columns readable independently of the jobs table. */
#view-translations .library-table { width: 100%; min-width: 1100px; table-layout: fixed; }
#view-translations .library-table th, #view-translations .library-table td { padding: 14px 18px; font-size: 14px; }
#view-translations .library-table td { line-height: 1.65; }
#libFilters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#libFilters .library-filter-controls { display: grid; grid-template-columns: 180px 280px 170px 190px; justify-content: center; gap: 12px; }
#libFilters .library-search-controls { display: flex; align-items: end; justify-content: center; gap: 12px; width: 100%; min-width: 0; }
#libFilters .library-search-controls label { width: min(100%, 460px); }
#libFilters label { min-width: 0; }
#libFilters .library-search-controls button { flex: none; min-height: 42px; }
#libFilters input, #libFilters select { width: 100%; }
#libFilters label { font-size: 13px; }
#libFilters select { min-height: 42px; font-size: 15px; font-weight: 600; }
#libQuery { min-height: 42px; padding-inline: 14px; border: 1px solid #bda1df; border-radius: 12px; background: #faf6ff; color: #542185; font-size: 15px; font-weight: 700; caret-color: #8538d5; transition: border-color .18s, box-shadow .18s, background .18s; }
#libQuery::placeholder { color: #867493; font-weight: 500; opacity: 1; }
#libQuery:focus { outline: none; border-color: #8b45d9; background: #fff; box-shadow: 0 0 0 3px rgba(139,69,217,.16); }
html[data-theme="dark"] #libQuery { border-color: #79579d; background: #2d2539; color: #f1d8ff; caret-color: #d29aff; }
html[data-theme="dark"] #libQuery::placeholder { color: #aaa0b7; }
html[data-theme="dark"] #libQuery:focus { border-color: #b984f2; background: #332944; box-shadow: 0 0 0 3px rgba(185,132,242,.2); }
@media (max-width: 900px) {
  #libFilters .library-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  #libFilters .library-search-controls label { flex: 1; width: auto; }
}
@media (max-width: 560px) {
  #libFilters .library-filter-controls { grid-template-columns: minmax(0, 1fr); }
  #libFilters .library-search-controls { flex-direction: column; align-items: stretch; }
  #libFilters .library-search-controls label { flex: auto; width: 100%; }
  #libFilters .library-search-controls button { align-self: center; }
}

#libEditor > label { display: block; margin-bottom: 16px; }
#libEditor input, #libEditor select, #libEditor textarea { width: 100%; min-width: 0; }

#view-translations .library-value { white-space: pre-wrap; overflow-wrap: anywhere; }
#view-translations .library-value .actions { margin-top: 10px; white-space: normal; }

#libFilters label:has(#libStoryFilter) { flex: 1; min-width: 260px; }
#libNewStoryForm > label { display:block; margin-bottom:16px; }
#libNewStoryForm input, #libNewStoryForm select { width:100%; }

/* Integration controls must not stretch with neighbouring cards. */
#integrationFields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
#integrationFields .integration-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 12px; }
#integrationFields .integration-card h3 { font-size: 15px; line-height: 1.5; }
#integrationFields .integration-card > input,
#integrationFields .integration-card > select { height: 42px; min-height: 42px; flex: none; }
#integrationFields .integration-card p { margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#integrationFields .integration-actions { align-items: center; flex-wrap: wrap; }
#integrationFields .integration-actions button { height: 40px; min-height: 40px; flex: none; }
@media (max-width: 760px) { #integrationFields { grid-template-columns: minmax(0, 1fr); } }

/* Story title profile editor and list display */
.story-profile-section {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #dcd1e2;
  border-radius: 10px;
  background: #fdfbfd;
}
.story-profile-section legend {
  padding: 0 8px;
  font-weight: 800;
  color: #55257f;
  font-size: 13px;
}
.story-profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.story-profile-status-text {
  font-size: 11px;
  color: #716279;
}
.story-profile-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0 16px;
}
.story-profile-toggles .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: normal;
  color: #35253e;
}
.story-profile-toggles input[type="checkbox"],
.story-profile-alt-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: #6831a0;
}
.story-profile-aliases-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 10px;
}
.story-profile-aliases-head strong {
  font-size: 12px;
  color: #4a3855;
}
.story-profile-alt-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.story-profile-alt-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #dfd5e3;
  border-radius: 8px;
  background: #fff;
}
.story-profile-alt-row .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  color: #55445e;
  white-space: nowrap;
}
.alt-row-actions {
  display: flex;
  gap: 4px;
}
.alt-row-actions button {
  min-height: 32px;
  padding: 2px 8px;
  font-size: 11px;
}
.story-links-head {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #4a3855;
}
.story-card-profile-box {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #ebe2ef;
  border-radius: 7px;
  background: #fbf9fd;
  font-size: 12px;
  line-height: 1.45;
}
.story-card-original {
  margin: 2px 0 4px;
  color: #49335a;
  font-size: 12px;
}
.story-card-alts {
  margin: 2px 0 4px;
  color: #63536b;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.story-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.workspace-full-width { grid-column: 1 / -1; }
.workspace-entry { max-width: 640px; margin: 40px auto; }
.workspace-entry.workspace-with-library { max-width: 1280px; }
.workspace-entry-option { display: block; width: 100%; text-align: left; margin: 12px 0; padding: 18px; }
.workspace-memberships { border: 1px solid #d1c5d8; border-radius: 12px; margin: 14px 0; padding: 14px; min-width: 0; }
.workspace-memberships legend { padding: 0 6px; font-weight: 600; }
.workspace-hint { color: #75667f; font-size: 12px; line-height: 1.8; }
html[data-theme="dark"] .workspace-memberships { border-color: #353b48; }
html[data-theme="dark"] .workspace-hint { color: #a9aebc; }
.workspace-membership-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.workspace-membership-row label { display: flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.workspace-membership-row input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; }
.workspace-membership-row select { width: auto; min-width: 160px; }
@media (max-width: 600px) {
  .workspace-membership-row { flex-direction: column; align-items: stretch; }
  .workspace-membership-row select { width: 100%; min-width: 0; }
}
@media (max-width: 700px) {
  .story-profile-alt-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .alt-row-actions {
    justify-content: flex-end;
  }
}
.workspace-card-title{display:flex;align-items:center;gap:12px}.workspace-card-thumb{width:72px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:#ffffff0d}.workspace-card-thumb.empty{display:grid;place-items:center;font-size:10px;color:var(--muted,#999)}
.workspace-page-config{margin-top:12px}.workspace-page-config summary{cursor:pointer;font-size:13px;color:var(--muted,#aaa)}.workspace-page-config .form-grid{margin-top:12px}
.workspace-progress{grid-column:1/-1;margin:0;font-size:13px;display:flex;align-items:center;gap:8px}.workspace-progress.busy:before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:workspace-spin .8s linear infinite}
@keyframes workspace-spin{to{transform:rotate(360deg)}}
.workspace-tags-field{grid-column:1/-1}

/* Page settings dropdowns and card-image pickers use the admin purple instead of browser grey. */
.workspace-page-config>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #8b5cf666;border-radius:10px;background:linear-gradient(110deg,#7c3aed33,#7c3aed14);color:#e9ddff;font-weight:600}
.workspace-page-config>summary::-webkit-details-marker{display:none}
.workspace-page-config>summary::before{content:"▸";color:#c4a5ff;transition:transform .15s}
.workspace-page-config[open]>summary::before{transform:rotate(90deg)}
.workspace-page-config>summary:hover{border-color:#a78bfa;background:linear-gradient(110deg,#7c3aed4d,#7c3aed1f)}
.workspace-page-new{margin:0 0 14px}.workspace-page-new>.panel{margin-top:10px}
.workspace-page-config input[type="file"]{padding:8px;border:1px dashed #8b5cf680;border-radius:10px;background:#7c3aed14;color:#d8c8f5}
.workspace-page-config input[type="file"]::file-selector-button{margin-right:12px;padding:7px 14px;border:1px solid #8b5cf6;border-radius:8px;background:#7c3aed;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.workspace-page-config input[type="file"]::file-selector-button:hover{background:#8b5cf6}

/* Planet colour picker: the swatch is the real surface map scrolling, so it reads as a turning planet. */
.planet-picker{display:flex;align-items:center;gap:10px}.planet-picker select{flex:1}
.planet-swatch{flex:none;width:38px;height:38px;border-radius:50%;background:#2a1d3d center/200% 100% repeat-x;--glow:#8b5cf677;box-shadow:inset -8px -6px 14px #000a,inset 4px 3px 8px #fff3,0 0 16px var(--glow);animation:planet-turn 14s linear infinite}
.planet-swatch[data-planet="pink"]{background-image:url(/planets/pink.webp);--glow:#ff69c777}
.planet-swatch[data-planet="purple"]{background-image:url(/planets/purple.webp);--glow:#b07cff77}
.planet-swatch[data-planet="red"]{background-image:url(/planets/red.webp);--glow:#ff645077}
.planet-swatch[data-planet="yellow"]{background-image:url(/planets/yellow.webp);--glow:#ffc04a77}
.planet-swatch[data-planet="green"]{background-image:url(/planets/green.webp);--glow:#5ee08a77}
.planet-swatch[data-planet="cyan"]{background-image:url(/planets/cyan.webp);--glow:#3fe8e077}
.planet-swatch[data-planet="blue"]{background-image:url(/planets/blue.webp);--glow:#58d5ff77}
@keyframes planet-turn{from{background-position-x:0}to{background-position-x:-200%}}
.world-loading{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(circle at 50% 40%,#2a1650ee,#07060fF5 70%);color:#f1e8ff;text-align:center;padding:24px}
.world-loading[hidden]{display:none}
.world-loading strong{font-size:22px;letter-spacing:.02em}.world-loading small{max-width:520px;color:#cdb8f2;font-size:14px;min-height:1.4em}
.world-planet{width:min(46vw,220px);height:min(46vw,220px);animation-duration:22s;box-shadow:inset -40px -30px 70px #000c,inset 18px 12px 34px #fff3,0 0 70px var(--glow)}
@media (prefers-reduced-motion:reduce){.planet-swatch{animation:none}}