@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700&display=swap');

:root {
  --ink:#172136; --muted:#64748b; --border:#e4e9f1; --background:#fff;
  --blue:#0758c7; --blue-dark:#064aa7; --blue-light:#eaf3ff;
  --teal:var(--blue); --teal-dark:var(--blue-dark); --teal-light:var(--blue-light);
  --green:#14804a; --red:#b42336; --radius:6px; --sidebar:216px;
  font-family:Inter,Arial,system-ui,sans-serif; color:var(--ink); background:var(--background); font-size:14px;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.45; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
input:focus,textarea:focus,select:focus,[contenteditable]:focus { outline:none; border-color:var(--blue)!important; box-shadow:0 0 0 2px #0758c710; }
h1,h2,h3,p { margin:0; }
h1 { font-size:28px; line-height:1.3; font-weight:650; letter-spacing:-.8px; overflow-wrap:anywhere; }
h2 { font-size:16px; line-height:1.4; font-weight:600; letter-spacing:-.2px; }
h3 { font-size:14px; font-weight:600; }
p { line-height:1.6; }
label { display:block; font-size:13px; font-weight:550; line-height:1.5; }
label .input { margin-top:7px; }
input[type=checkbox],input[type=radio] { accent-color:var(--blue); width:16px; height:16px; flex:none; margin:0; cursor:pointer; }
.icon { display:inline-block; flex:none; vertical-align:middle; }
.flip { transform:rotate(180deg); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mobile-only,.mobile-label,.mobile-brand,.mobile-avatar,.mobile-navigation,.mobile-folder-select,.mobile-question-tools { display:none; }

/* Navigation is a persistent folder tree, without dashboard decoration. */
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:var(--sidebar); display:flex; flex-direction:column; border-right:1px solid var(--border); background:#f8fafc; }
.brand { display:flex; flex-direction:column; align-items:flex-start; padding:27px 22px 26px; gap:2px; }
.brand img { width:165px; height:auto; }
.sidebar > nav { display:grid; gap:4px; padding:0 12px; }
.nav-item { display:flex; align-items:center; gap:12px; min-height:43px; padding:10px 12px; border-radius:5px; font-size:14px; font-weight:500; }
.nav-item:hover,.folder-tree-row:hover { background:#eef2f7; }
.nav-item.active,.folder-tree-row.active { color:var(--blue); background:#e5f0ff; }
.sidebar-folders { margin-top:28px; padding:16px 10px; border-top:1px solid var(--border); flex:1; min-height:0; overflow:auto; }
.folder-heading { display:flex; justify-content:space-between; align-items:center; margin:0 9px 10px; color:var(--muted); font-size:10px; }
.folder-tree-row { display:flex; align-items:center; min-height:37px; padding:0 8px 0 calc(8px + var(--depth,0) * 14px); border-radius:5px; font-size:11px; }
.folder-tree-row a { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:8px 0; }
.folder-tree-row a > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-tree-row a .icon { width:17px; height:17px; }
.folder-tree-row small { margin-left:auto; padding-left:4px; color:var(--muted); font-size:10px; }
.tree-toggle { display:flex; align-items:center; justify-content:center; width:14px; height:26px; margin-left:-6px; margin-right:2px; padding:0; border:0; background:transparent; color:var(--muted); }
.tree-toggle .icon { width:12px; height:12px; }.tree-toggle.expanded .icon { transform:rotate(90deg); }.tree-spacer { width:10px; flex:none; }
.archive-row { margin-top:20px; }
.sidebar-bottom { border-top:1px solid var(--border); padding:19px 20px; }
.operator { display:flex; align-items:center; gap:10px; }.operator strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.avatar { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#dcecff; color:var(--blue); font-weight:500; flex:none; }
.mobile-avatar { display:none; }
.account-menu { position:relative; }.account-menu a { position:absolute; bottom:40px; right:0; padding:12px 25px; border:1px solid var(--border); border-radius:6px; background:#fff; font-size:13px; }
summary { cursor:pointer; }summary::-webkit-details-marker { display:none; }
.workspace-main { margin-left:var(--sidebar); min-width:0; }
.workspace-header { height:66px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); padding:0 28px; }
.header-breadcrumb { display:flex; align-items:center; gap:13px; min-width:0; flex:1; font-size:12px; color:var(--muted); }
.header-breadcrumb strong { color:var(--ink); font-weight:450; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-breadcrumb > span:first-child { white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis; }
.breadcrumb-separator { color:#bdc8d9; }
#page-content { padding:26px 28px 48px; min-width:0; max-width:1700px; margin:auto; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }.page-heading > div:first-child { min-width:0; }
.page-heading p { color:var(--muted); font-size:12px; margin-top:8px; }
.heading-actions { display:flex; align-items:center; gap:10px; flex:none; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:1px solid #d9e1ed; border-radius:5px; background:#fff; padding:9px 13px; min-height:39px; font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap; }
.button .icon { width:18px; height:18px; }.button:hover { background:#f8fafc; border-color:#bdccdf; }.button.primary { background:var(--blue); border-color:var(--blue); color:#fff; }.button.primary:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
.button.small { padding:6px 10px; min-height:30px; font-size:11px; }.button.ghost { background:transparent; border-color:transparent; color:var(--muted); }.button.ghost:hover { background:#f1f5f9; }.button.danger { color:var(--red); border-color:#f1cbd2; background:#fff7f8; }.button.active { color:var(--blue); background:var(--blue-light); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:30px; min-width:30px; height:32px; border:0; background:transparent; color:var(--muted); border-radius:4px; padding:4px; font-size:20px; }.icon-button .icon { width:18px; height:18px; }.icon-button:hover { color:var(--blue); background:#eaf1fb; }
.text-link { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--blue); font-size:12px; font-weight:500; }.text-link .icon { width:15px; height:15px; }.text-link:hover { text-decoration:underline; }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.6px; }
.hint { color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.badge { display:inline-flex; align-items:center; border-radius:4px; background:#eef2f7; color:#52627a; font-size:11px; line-height:1.4; padding:3px 8px; white-space:nowrap; font-weight:450; }.badge.ready { color:#166a38; background:#e0f7e9; }.badge.review { color:#925b09; background:#fff0d6; }.badge.draft { background:#edf1f6; color:#596980; }
.success-text { color:var(--green); }.danger-text,.error-text { color:var(--red)!important; }.warning-text { color:#946311; }
.surface { min-width:0; background:#fff; border:0; border-radius:0; padding:24px 0; margin-bottom:16px; }
.empty-state { padding:70px 20px; text-align:center; }.empty-state > .icon { color:#a4b5cd; width:28px; height:28px; margin-bottom:16px; }.empty-state h3 { font-size:16px; font-weight:550; }.empty-state p { margin:10px auto; max-width:400px; color:var(--muted); font-size:12px; }.empty-state .button { margin-top:20px; }

/* The package list uses flat rows on desktop and stacked rows on a phone. */
.status-tabs { display:flex; gap:20px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.status-tab { display:flex; gap:8px; align-items:center; background:none; border:0; border-bottom:2px solid transparent; padding:8px 3px 14px; margin-bottom:-1px; font-size:12px; white-space:nowrap; }.status-tab.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:550; }.status-tab small { padding:2px 6px; font-size:10px; border-radius:3px; background:#edf1f6; color:var(--muted); }.status-tab.active small { background:#e5f0ff; color:var(--blue); }
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.search-field { position:relative; width:min(460px,100%); }.search-field > .icon { position:absolute; left:12px; top:11px; color:var(--muted); width:17px; height:17px; }.search-field .input { margin:0; padding-left:38px; }
.filter-actions { display:flex; gap:10px; align-items:center; }.filter-actions select { width:119px; }
.package-table { border-collapse:collapse; width:100%; text-align:left; table-layout:auto; }.package-table th { font-weight:450; font-size:11px; color:var(--muted); padding:12px 10px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); white-space:nowrap; }.package-table td { padding:15px 10px; border-bottom:1px solid var(--border); font-size:12px; }.package-table th:first-child,.package-table td:first-child { padding-left:12px; }.package-table .selection-cell { width:42px; }.package-table .selection-cell input { width:15px; height:15px; }
.package-table .name-cell { width:46%; }.package-title { display:block; font-size:14px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; margin-bottom:3px; }.package-title:hover { color:var(--blue); }.name-cell .hint { font-size:11px; }
.package-table tbody tr:hover,.package-table tbody tr.selected { background:#f0f6ff; }.package-table .status-cell { width:15%; }.count-cell { white-space:nowrap; }.date-cell { white-space:nowrap; font-size:11px!important; }.actions-cell { text-align:right; white-space:nowrap; }.row-open { visibility:hidden; margin-right:3px; }.package-table tr:hover .row-open,.package-table tr:focus-within .row-open { visibility:visible; }
.table-footer { display:flex; align-items:center; justify-content:space-between; min-height:62px; color:var(--muted); font-size:11px; }.pagination { display:flex; align-items:center; gap:8px; }.pagination .icon-button { border:1px solid var(--border); height:29px; width:29px; }.pagination span { color:var(--blue); font-size:11px; }
.selection-bar { display:flex; align-items:center; gap:9px; padding:10px 12px; background:#f0f6ff; font-size:12px; }.selection-bar > .icon-button { margin-left:auto; }.selection-bar > span { margin-right:12px; }
.recent-heading { margin:24px 0 12px; }.recent-heading h2 { font-size:14px; }
.library-tools { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:0 0 17px; }.breadcrumbs { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); }.breadcrumbs strong { font-weight:450; }.breadcrumbs a:hover { color:var(--blue); }
.folder-rows { margin:15px 0; }.folder-rows > div { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border); padding:12px 0; font-size:12px; }.folder-rows > div > span { flex:1; }
.overview-job-panel { margin-top:20px; border-top:1px solid var(--border); }.overview-job { display:flex; gap:12px; align-items:center; padding:16px 0; }.overview-job .job-title { font-size:11px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.overview-job progress { width:24%; height:6px; }.overview-job > .hint { white-space:nowrap; }.overview-job > .text-link { margin-left:12px; }
progress { appearance:none; border:0; border-radius:6px; background:#dce8fa; overflow:hidden; accent-color:var(--blue); }progress::-webkit-progress-bar { background:#dce8fa; }progress::-webkit-progress-value { background:var(--blue); border-radius:6px; }progress::-moz-progress-bar { background:var(--blue); }

/* Forms share the same unobtrusive controls and section rules. */
.input { width:100%; min-width:0; min-height:39px; background:#fff; border:1px solid #d9e1ed; border-radius:5px; padding:9px 11px; font-weight:400; font-size:12px; line-height:1.5; }.input::placeholder { color:#8898ae; }textarea.input { resize:vertical; }.input[readonly] { background:#fafbfd; }.input[type=checkbox],.input[type=radio] { width:auto; }
select.input { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; text-overflow:ellipsis; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.form-grid > * { min-width:0; }.span-two { grid-column:1/-1; }.field-label { display:block; margin:15px 0 7px; }.form-section h2 { margin-bottom:22px; }.form-section + .form-section { margin-top:30px; padding-top:24px; border-top:1px solid var(--border); }.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:28px; border-top:1px solid var(--border); padding-top:20px; }
.new-package-form,.settings-form { max-width:780px; padding-top:14px; }.start-methods { display:flex; gap:14px; }.method-card { display:flex; gap:10px; align-items:center; border:1px solid var(--border); border-radius:5px; padding:13px 16px; flex:1; cursor:pointer; }.method-card:has(input:checked) { border-color:var(--blue); background:#f5f9ff; }.method-card strong { font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; }.method-card .icon { width:16px; height:16px; }
.import-shortcut { display:flex; max-width:780px; justify-content:center; margin-top:22px; }
.settings-form .badge { margin-left:10px; }.settings-form .check-line { margin-top:13px; }.settings-form .form-section > .hint { margin-bottom:18px; }
.package-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }.package-heading h1 { font-size:25px; }.package-heading p span { margin:0 6px; }.package-heading { margin-bottom:18px; }
.save-indicator { color:var(--green); font-size:11px; margin-left:auto; white-space:nowrap; }.save-indicator::before { content:'✓'; display:inline-flex; justify-content:center; align-items:center; width:15px; height:15px; background:var(--green); color:#fff; border-radius:50%; font-size:10px; margin-right:6px; }.save-indicator.pending { color:#946311; }.save-indicator.pending::before { content:'•'; background:#fff0d6; color:#946311; }
.package-tabs { display:flex; gap:22px; border-bottom:1px solid var(--border); margin-bottom:18px; }.package-tabs a { padding:12px 16px; font-size:12px; color:#4e5f79; border-bottom:2px solid transparent; margin-bottom:-1px; }.package-tabs a.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:550; }
.package-settings-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; }.package-settings-grid > .surface { margin:0; padding:16px 0 24px; border-bottom:1px solid var(--border); }.composition-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:19px; }.composition-grid label { font-size:12px; }.composition-check { font-size:12px; margin:16px 0; }.examples-details { border-top:1px solid var(--border); padding-top:18px; margin-top:20px; }.examples-details summary,.advanced-details summary { font-size:12px; font-weight:500; }.examples-details .form-grid { margin-top:18px; }
.indicator-table { width:100%; border-collapse:collapse; margin:20px 0 12px; }.indicator-table th { text-align:left; font-size:11px; font-weight:500; color:var(--muted); padding:0 6px 10px; }.indicator-table td { padding:6px; vertical-align:top; }.indicator-table th:first-child { width:24%; }.indicator-table th:nth-child(2) { width:42%; }.indicator-table th:nth-child(3) { width:17%; }.indicator-table .input { font-size:11px; }.count-input { min-width:58px; }
.generation-bar,.ready-bar { display:flex; gap:18px; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding:20px 0; margin-top:18px; }.generation-bar strong,.ready-bar strong { font-size:13px; font-weight:550; }.generation-bar p,.ready-bar p { color:var(--muted); font-size:11px; margin-top:6px; }.generation-bar a { color:var(--blue); margin-left:10px; }
.check-line { display:flex; gap:9px; align-items:center; font-size:12px; font-weight:400; line-height:1.5; }.check-line input { flex:none; }

/* The editor has three continuous columns, rather than nested cards. */
.question-workspace { display:grid; grid-template-columns:162px minmax(320px,1fr) minmax(235px,.72fr); align-items:start; border:1px solid var(--border); border-radius:5px; }
.question-sidebar { padding:12px 9px; align-self:stretch; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--border); }.question-sidebar .section-heading { padding-left:6px; margin-bottom:12px; }.question-sidebar h2 { font-size:13px; }.question-list { overflow:auto; max-height:calc(100vh - 400px); min-height:220px; }.question-list-item { position:relative; border-radius:4px; margin:2px 0; min-width:0; }.question-list-item > input { position:absolute; left:3px; top:13px; opacity:0; width:12px; height:12px; z-index:1; }.question-list-item:hover > input,.question-list-item > input:focus,.question-list-item > input:checked { opacity:1; }.question-list-item button { display:flex; align-items:center; gap:9px; padding:11px 7px; width:100%; border:0; background:none; text-align:left; border-radius:4px; }.question-list-item.active { background:#e7f1ff; color:var(--blue); }.question-list-item:hover { background:#f0f5fc; }.question-list-number { font-size:11px; width:19px; color:#60738e; flex:none; }.question-list-item:hover .question-list-number,.question-list-item:has(>input:focus) .question-list-number,.question-list-item:has(>input:checked) .question-list-number { opacity:0; }.question-list-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; flex:1; }.review-dot { display:inline-flex; width:13px; height:13px; border:1px solid #bcc9db; border-radius:50%; flex:none; }.review-dot.reviewed { background:#52b986; border-color:#52b986; color:#fff; }.review-dot .icon { width:11px; height:11px; }
.question-sidebar-footer { margin-top:auto; padding:22px 6px 2px; }.question-sidebar-footer .button { width:100%; margin-top:12px; font-size:11px; padding:8px 5px; color:var(--blue); border-color:#8eb8f1; }
.question-main { min-width:0; padding:15px 16px 0; }.question-editor .editor-heading { gap:10px; margin-bottom:17px; }.editor-heading h2 { flex:1; white-space:nowrap; font-size:15px; }.select-label { width:210px; max-width:65%; font-size:11px; }.select-label .input { margin:0; min-height:40px; font-size:11px; padding:9px 36px 9px 12px; }.editor-heading > .icon-button { width:22px; min-width:22px; }.ai-question-bar { display:flex; gap:10px; align-items:center; justify-content:space-between; font-size:11px; padding:0 0 12px; }
.rich-field { min-width:0; }.rich-field .field-label { margin:0 0 7px; font-size:12px; }.rich-shell { border:1px solid #d9e1ed; border-radius:5px; background:#fff; min-width:0; }.rich-toolbar { display:flex; align-items:center; gap:6px; padding:5px 7px; border-bottom:1px solid var(--border); background:#fafbfd; min-height:34px; border-radius:5px 5px 0 0; }.tool-btn { border:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; min-width:25px; height:25px; border-radius:3px; padding:3px 6px; font-size:12px; color:#536783; }.tool-btn:hover { background:#eaf1fb; color:var(--blue); }.tool-btn .icon { width:15px; height:15px; }.rich-more { margin-left:auto; position:relative; }.rich-more > div { display:none; position:absolute; right:0; top:29px; z-index:10; border:1px solid var(--border); border-radius:5px; background:#fff; padding:6px; min-width:120px; }.rich-more[open] > div { display:grid; }.rich-more .tool-btn { justify-content:flex-start; white-space:nowrap; }.rich-more > summary { justify-content:center; }
.rich-editor { min-height:64px; padding:12px; font-size:13px; line-height:1.7; border:0; overflow-wrap:anywhere; border-radius:0 0 5px 5px; }.rich-shell:has(.rich-rendered) { display:grid; grid-template-columns:minmax(0,1fr); }
.rich-shell:has(.rich-rendered) > .rich-toolbar { grid-row:1; grid-column:1; }
.rich-shell:has(.rich-rendered) > .rich-editor { grid-row:2; grid-column:1; opacity:0; }
.rich-rendered.rich-preview { grid-row:2; grid-column:1; min-width:0; padding:12px; font-size:13px; line-height:1.7; pointer-events:none; }
.rich-shell:focus-within > .rich-editor { opacity:1; }.rich-shell:focus-within > .rich-rendered { visibility:hidden; }
.option-editor-content .rich-rendered { padding:5px 9px; font-size:12px; line-height:1.65; }
.option-editor-row.is-key .rich-rendered { padding-right:48px; }
.rich-rendered:empty::before { content:'Tulis di sini…'; color:#96a4b8; }
.rich-editor:empty::before { content:'Tulis di sini…'; color:#96a4b8; pointer-events:none; }.rich-editor p + p,.rich-preview p + p { margin-top:10px; }.rich-editor img,.rich-editor svg,.rich-preview img,.rich-preview svg { max-width:100%; height:auto; }.rich-editor table,.rich-preview table { border-collapse:collapse; max-width:100%; display:block; overflow:auto; }.rich-editor th,.rich-editor td { border:1px solid #c4d0df; min-width:40px; padding:7px; }
.editor-section { margin-top:20px; }.editor-section .section-heading { margin-bottom:11px; }.editor-section h3 { font-size:12px; }.option-heading-actions { display:flex; align-items:center; gap:5px; }.option-heading-actions > .icon-button { width:22px; min-width:22px; height:20px; }.option-heading-actions > .icon-button .icon { width:14px; height:14px; }
.option-section .hint { font-size:10px; }.option-editor-row { display:flex; align-items:center; gap:9px; padding:2px 4px; margin:1px -4px; border-radius:4px; position:relative; }.option-editor-row.is-key { background:#e9f3ff; }.option-key { display:flex; align-items:center; gap:11px; min-width:48px; font-size:12px; font-weight:400; padding-left:2px; }.option-key input { width:16px; height:16px; }.option-key span { min-width:12px; }.option-editor-content { min-width:0; flex:1; }.option-editor-content .field-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.option-editor-content .rich-toolbar { display:none; }.option-editor-content:focus-within .rich-toolbar { display:flex; gap:1px; }.option-editor-content .rich-editor { min-height:32px; padding:5px 9px; font-size:12px; line-height:1.65; }.row-controls { flex:none; position:relative; }.row-controls > summary { width:23px; min-width:23px; height:25px; opacity:0; }.option-editor-row:hover .row-controls > summary,.option-editor-row:focus-within .row-controls > summary,.row-controls[open] > summary { opacity:1; }.row-controls > div { display:none; position:absolute; right:0; top:29px; min-width:100px; border:1px solid var(--border); border-radius:5px; padding:5px; background:white; z-index:10; }.row-controls[open] > div { display:grid; }.row-controls .button { justify-content:flex-start; }.add-option { margin-top:11px; font-size:11px; }
.explanation-section .rich-field > .field-label { display:none; }.explanation-section .text-link { font-size:10px; }.explanation-section .rich-editor { min-height:58px; }.editor-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:15px; }.question-identity { font-size:10px; color:var(--muted); }.question-identity[open] { flex:1; }.question-identity .input { max-width:220px; }.question-identity .field-label { font-size:11px; }.editor-review { font-size:11px; }
.question-navigation { display:flex; justify-content:space-between; gap:15px; padding:14px 0 12px; }.question-navigation .button { font-size:11px; min-height:34px; padding:7px 10px; }.question-navigation .primary { color:var(--blue); background:#fff; border-color:#bad2f2; }.question-navigation .primary:hover { background:#f1f6ff; }
.add-question-menu { position:relative; }.add-question-menu > div { display:none; position:absolute; width:230px; left:0; top:34px; z-index:12; padding:14px; border:1px solid var(--border); border-radius:5px; background:#fff; }.add-question-menu[open] > div { display:block; }.add-question-menu .button { margin-top:12px; width:100%; }
.choice-labels { display:flex; gap:12px; margin-bottom:18px; }.choice-labels label { flex:1; min-width:0; }.statement-editor { display:flex; gap:9px; margin-bottom:15px; align-items:flex-start; }.statement-main { flex:1; min-width:0; }.statement-main .rich-editor { min-height:62px; }.statement-key { width:91px; font-size:11px; }.statement-key .input { margin-top:7px; }.statement-editor > .row-controls { display:flex; flex-direction:column; padding-top:20px; }.statement-editor > .row-controls .icon-button { width:23px; min-width:23px; height:25px; font-size:16px; }
.legacy-image { display:flex; gap:14px; align-items:center; padding:12px 0; margin-top:12px; border-top:1px solid var(--border); }.legacy-image img { max-width:65%; max-height:180px; object-fit:contain; }
.live-preview { min-width:0; padding:16px; background:#f8fafd; border-left:1px solid var(--border); align-self:stretch; }.live-preview h2 { font-size:14px; display:flex; gap:9px; align-items:center; }.live-preview h2 .icon { width:18px; height:18px; }.preview-mode { display:flex; border:1px solid #d9e1ed; border-radius:5px; background:white; padding:2px; margin:19px 0 26px; }.preview-mode button { flex:1; border:0; background:none; border-radius:3px; padding:6px; font-size:11px; }.preview-mode button.active { color:#fff; background:var(--blue); }.live-preview .preview-question { border:0; padding:0; background:transparent; margin:0; }.live-preview .badge { display:none; }.live-preview .section-heading { margin-bottom:17px; }.live-preview .preview-option { background:none; border-width:0 0 1px; border-radius:0; padding:11px 0; }.live-preview .preview-option::before { content:''; border:1px solid #a6b5ca; border-radius:50%; width:14px; height:14px; flex:none; margin-top:4px; }.live-preview .preview-option.is-correct::before { background:var(--blue); border-color:var(--blue); box-shadow:inset 0 0 0 3px #fff; }.live-preview .preview-option > strong { font-weight:450; }.live-preview .rich-preview { font-size:12px; }.live-preview .explanation-preview { padding:14px 0; background:none; border-top:1px solid var(--border); border-radius:0; }.live-preview .explanation-preview .eyebrow { color:var(--ink); font-size:12px; }

/* Package preview and QC retain substantive review information. */
.preview-tools { display:flex; gap:12px; align-items:center; margin:22px 0; flex-wrap:wrap; }.preview-tools .check-line { margin-right:auto; }.preview-package-heading { border-bottom:1px solid var(--border); padding-top:10px; }.preview-package-heading p { margin-top:6px; font-size:11px; color:var(--muted); }
.preview-question { border-bottom:1px solid var(--border); padding:24px 0; margin-bottom:8px; }.preview-question .section-heading { justify-content:flex-start; gap:15px; }.question-number { color:#61748f; font-size:10px; letter-spacing:.3px; }.rich-preview { font-size:14px; line-height:1.8; overflow-wrap:anywhere; }.rich-preview mjx-container { max-width:100%; overflow-x:auto; overflow-y:hidden; }.preview-image { max-width:100%; max-height:440px; height:auto; object-fit:contain; margin:15px 0; }.preview-options { display:grid; gap:0; margin:18px 0; }.preview-option { display:flex; align-items:flex-start; gap:14px; padding:12px 14px; border-bottom:1px solid var(--border); font-size:13px; line-height:1.7; }.preview-option > div { min-width:0; flex:1; }.preview-option > strong { width:17px; color:var(--muted); }.preview-option.is-correct { background:#edf9f2; }.correct-tick { color:var(--green); }.explanation-preview { margin-top:22px; background:#f8fafc; border-radius:4px; padding:15px 18px; }.explanation-preview .eyebrow { margin-bottom:10px; }.preview-table { border-collapse:collapse; width:100%; font-size:12px; margin:16px 0; }.preview-table td,.preview-table th { border:1px solid var(--border); padding:11px 12px; text-align:left; }.preview-table th { background:#fafbfd; font-weight:500; }.preview-table th:not(:first-child),.preview-table td:not(:first-child) { text-align:center; }.table-overflow { max-width:100%; overflow:auto; }.short-answer-preview { padding:14px 0; margin-top:14px; border-bottom:1px solid var(--border); font-size:12px; }.advanced-details { border-top:1px solid var(--border); margin-top:24px; }.advanced-details textarea { margin-top:16px; }.mono,.json-view { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.qc-summary { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:12px 0 23px; }.qc-totals { display:flex; flex-wrap:wrap; gap:24px; font-size:12px; }.qc-findings { padding:12px 0; }.finding { display:flex; align-items:center; gap:13px; padding:15px 0; border-top:1px solid var(--border); }.finding > span { display:flex; align-items:center; justify-content:center; color:var(--red); background:#fff0f2; width:25px; height:25px; border-radius:4px; flex:none; }.finding.warning > span { color:#925b09; background:#fff0d6; }.finding > div { min-width:0; flex:1; }.finding strong { font-size:12px; }.finding p { color:var(--muted); font-size:12px; margin-top:4px; }.qc-tools { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0 24px; border-bottom:1px solid var(--border); }.qc-question { margin:0 0 12px; border-bottom:1px solid var(--border); }.qc-question .preview-question { border:0; margin-bottom:0; }.qc-question-actions { display:flex; align-items:center; gap:18px; background:#fafbfd; padding:12px 15px; margin-bottom:20px; }.ready-bar { position:sticky; bottom:0; z-index:5; background:white; border-top:1px solid var(--border); margin-bottom:-20px; padding:16px 0; }
.alert { font-size:12px; line-height:1.6; padding:13px 15px; background:#f3f7fd; border:1px solid #dce6f4; border-radius:5px; margin-bottom:18px; }.alert.warning { background:#fff9ef; border-color:#f0dfb9; color:#8b611a; }.alert.error { background:#fff4f5; border-color:#f3d3d9; color:var(--red); }.alert.success { background:#f2faf5; border-color:#d8eddf; color:#287347; }.alert .inline-actions { margin-top:12px; }
.job-panel { padding:15px 0 18px; border-bottom:1px solid var(--border); margin-bottom:18px; }.job-panel h2 { font-size:14px; margin-top:7px; }.job-panel .section-heading { margin-bottom:12px; }.job-progress { display:flex; gap:14px; align-items:center; margin:14px 0; }.job-progress progress { height:6px; flex:1; width:100%; }.job-progress span { font-size:11px; color:var(--muted); }.job-panel details { font-size:12px; margin-top:16px; }.job-history-label { display:flex; align-items:center; gap:12px; font-size:11px; }.job-history-label .input { width:auto; max-width:100%; margin:0; font-size:11px; }.generation-locked { opacity:.6; }

.job-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.job-summary > strong { font-size:12px; font-weight:500; }.job-summary > progress { height:6px; flex:1; min-width:80px; }.job-summary > .hint { font-size:10px; }.job-summary > .inline-actions { margin-left:auto; }.job-info { margin:0!important; position:relative; }.job-info > div { display:none; position:absolute; right:0; top:35px; width:310px; max-width:calc(100vw - 32px); background:#fff; border:1px solid var(--border); border-radius:5px; padding:15px; z-index:15; }.job-info[open] > div { display:block; }.job-info p { font-size:11px; margin-bottom:13px; }.job-info .job-history-label { display:block; margin-bottom:15px; }.job-info .job-history-label .input { margin-top:6px; width:100%; }

/* Dialogs and feedback. */
dialog { padding:0; border:1px solid var(--border); border-radius:8px; width:min(680px,calc(100vw - 32px)); max-height:90dvh; color:var(--ink); box-shadow:0 12px 48px #17213625; }dialog::backdrop { background:#17213670; }.dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:2; }.dialog-heading h2 { font-size:17px; }.dialog-body { padding:22px; font-size:13px; max-height:65dvh; overflow:auto; }.dialog-body:empty { display:none; }.dialog-body p { margin-bottom:15px; }.dialog-body details { margin-top:15px; }.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:16px 22px; border-top:1px solid var(--border); }.candidate-card { padding:18px 0; border-top:1px solid var(--border); }.candidate-heading { font-size:10px; color:var(--blue); margin-top:18px; }.json-view { overflow:auto; padding:15px; max-height:330px; background:#f4f6fa; white-space:pre-wrap; overflow-wrap:anywhere; }
.toast { position:fixed; left:calc(50% + var(--sidebar)/2); bottom:24px; transform:translateX(-50%); padding:12px 18px; max-width:min(600px,calc(100vw - 32px)); background:#172136; color:#fff; border-radius:6px; z-index:150; font-size:12px; line-height:1.6; opacity:0; pointer-events:none; }.toast.show { opacity:1; }.toast.error { background:#9f2539; }.toast.warning { background:#8b611a; }
.loading-page,.initial-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-height:75vh; color:var(--muted); font-size:13px; }.loading-dot { display:inline-block; width:19px; height:19px; border:2px solid #c5dafa; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; flex:none; }@keyframes spin { to { transform:rotate(360deg); } }.startup-error { max-width:650px; padding:25px; margin:12vh auto; }.startup-error h1 { margin:15px 0; }.startup-error p { margin-bottom:24px; }
.login-shell,.login-page { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:24px; background:#f8fafc; }.login-card { width:min(410px,100%); padding:32px; background:#fff; border:1px solid var(--border); border-radius:8px; }.login-logo,.login-card img { width:165px; margin-bottom:26px; }.login-card h1 { font-size:23px; }.login-card p { margin:12px 0 22px; color:var(--muted); font-size:12px; }.login-card .eyebrow { margin-bottom:10px; }.login-card form label { margin-top:15px; }.login-card form input { min-height:42px; width:100%; border:1px solid #d9e1ed; border-radius:5px; padding:9px 11px; margin-top:7px; }.login-card .btn.primary,.login-card .button { display:flex; width:100%; justify-content:center; align-items:center; min-height:42px; border:0; background:var(--blue); color:#fff; border-radius:5px; margin-top:22px; }.login-card footer { margin-top:22px; font-size:11px; color:var(--muted); text-align:center; }.notice.danger { background:#fff4f5; border:1px solid #f3d3d9; padding:12px; border-radius:5px; color:var(--red); font-size:12px; margin:16px 0; }

@media(min-width:1550px) {
  :root { --sidebar:232px; } #page-content { padding:30px 34px 55px; }
  .question-workspace { grid-template-columns:185px minmax(400px,1fr) minmax(290px,.7fr); }
  .question-main { padding:18px 22px 0; }.live-preview { padding:20px; }
}
@media(max-width:1170px) {
  :root { --sidebar:196px; }.brand { padding-left:18px; }.brand img { width:153px; }.nav-item { font-size:12px; gap:10px; }
  #page-content { padding:24px 22px 44px; }.workspace-header { padding:0 22px; }.question-workspace { grid-template-columns:158px minmax(0,1fr); }.live-preview { display:none; }
  .row-open { display:none; }.package-table .name-cell { width:47%; }.package-table th,.package-table td { padding-left:8px; padding-right:8px; }
}
@media(max-width:960px) {
  .package-settings-grid { grid-template-columns:minmax(0,1fr); gap:10px; }.package-heading h1 { font-size:23px; }.package-preview-button { display:none; }
  .package-table .date-cell { display:none; }.package-table .name-cell { width:60%; }.package-table th:nth-child(5) { display:none; }
  .package-tabs { gap:8px; }.package-tabs a { padding:12px; }.status-tabs { gap:14px; }.filter-bar { gap:12px; }.filter-actions .button { font-size:11px; padding:9px; }.filter-actions select { width:100px; }
  .ready-bar { flex-wrap:wrap; }.ready-bar > div { width:100%; }.overview-job progress { width:18%; }
}
@media(max-width:760px) {
  .sidebar { display:none; }.workspace-main { margin-left:0; }.workspace-header { padding:0 16px; height:58px; gap:10px; }.desktop-only { display:none; }
  .mobile-brand { display:flex; gap:10px; align-items:center; flex:1; font-size:14px; }.mobile-brand .brand-mark { display:block; width:27px; height:29px; overflow:hidden; }.mobile-brand .brand-mark img { width:116px; height:29px; max-width:none; display:block; }
  .mobile-avatar { display:flex; width:30px; height:30px; font-size:12px; }
  #page-content { padding:19px 16px 90px; }.page-heading { margin-bottom:18px; gap:12px; }.page-heading h1 { font-size:23px; letter-spacing:-.6px; }.heading-actions { gap:6px; }.import-button { display:none; }.create-button { width:36px; min-height:36px; padding:6px; }.create-button > span { display:none; }.create-button .icon { width:22px; height:22px; }
  .mobile-navigation { display:flex; position:fixed; bottom:0; left:0; right:0; border-top:1px solid var(--border); background:#fff; z-index:20; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }.mobile-navigation a { flex:1; display:flex; align-items:center; flex-direction:column; gap:5px; color:#667790; font-size:10px; padding:3px; }.mobile-navigation a.active { color:var(--blue); }.mobile-navigation .icon { width:20px; height:20px; }
  #team-app[data-route=home] #page-content,#team-app[data-route=library] #page-content { display:flex; flex-direction:column; }
  #team-app[data-route=home] .page-heading,#team-app[data-route=library] .page-heading { order:-5; }
  #team-app[data-route=home] .filter-bar,#team-app[data-route=library] .filter-bar { order:-4; margin-bottom:12px; }
  .filter-bar { display:block; }.search-field { width:100%; }.filter-actions { display:none; }.mobile-folder-select { display:flex; gap:8px; order:-3; margin-bottom:12px; }.mobile-folder-select .input { min-height:38px; flex:1; }.mobile-folder-select > .button { width:38px; padding:8px; }
  .status-tabs { order:-2; justify-content:space-between; gap:2px; margin-bottom:0; }.status-tab { gap:5px; font-size:11px; padding:9px 2px 12px; }.status-tab small { font-size:9px; padding:2px 4px; }
  .recent-heading { margin:18px 0 6px; }.recent-heading h2 { font-size:13px; }.recent-heading .text-link { font-size:11px; }
  .package-list { margin:0 -16px; }.package-table,.package-table tbody { display:block; }.package-table thead { display:none; }.package-table tr { display:grid; position:relative; grid-template-columns:minmax(0,1fr) auto; gap:9px 10px; padding:15px 16px; border-bottom:1px solid var(--border); }.package-table td { display:block; padding:0!important; border:0; }
  .package-table .selection-cell,.package-table .date-cell { display:none; }.package-table .name-cell { grid-column:1/-1; width:auto; padding-right:28px!important; }.package-title { font-size:13px; font-weight:550; line-height:1.5; margin-bottom:2px; }.name-cell .hint { font-size:11px; }.package-table .status-cell { width:auto; }.count-cell { color:var(--muted); font-size:11px!important; align-self:center; }.mobile-only { display:inline; }.actions-cell { position:absolute; top:12px; right:7px; }.actions-cell .icon-button { height:27px; width:26px; min-width:26px; }.row-open { display:none; }.table-footer { min-height:53px; }.library-tools { padding:13px 0; align-items:flex-start; gap:7px; }.library-tools .breadcrumbs { font-size:10px; }.library-tools .inline-actions { gap:0; }.library-tools .button { font-size:10px; padding:6px 8px; }
  .overview-job-panel { margin-top:15px; }.overview-job { gap:8px; flex-wrap:wrap; }.overview-job .job-title { max-width:calc(100% - 35px); font-size:11px; }.overview-job progress { width:40%; margin-left:27px; }.overview-job .hint { font-size:10px; }.overview-job .text-link { font-size:10px; margin-left:auto; }.selection-bar { flex-wrap:wrap; }
  .form-grid { gap:16px; }.start-methods { gap:10px; }.method-card { padding:12px 10px; }.method-card strong { font-size:12px; }.method-card .icon { display:none; }.new-package-form,.settings-form { padding-top:12px; }.form-section h2 { font-size:14px; }.form-actions { flex-wrap:wrap; }.input { font-size:13px; }input,textarea,[contenteditable] { scroll-margin-bottom:90px; }
  .package-heading { margin-bottom:13px; align-items:flex-start; }.package-heading h1 { font-size:20px; letter-spacing:-.4px; }.package-title-line { gap:8px; }.package-title-line .badge { font-size:10px; }.package-heading .heading-actions { margin-top:0; }.package-heading p { display:none; }.package-heading p span { margin:0 4px; }
  #team-app[data-route=package] .header-breadcrumb { font-size:12px; }.header-breadcrumb > span:first-child,.header-breadcrumb .breadcrumb-separator { display:none; }.save-indicator { font-size:10px; max-width:135px; overflow:hidden; text-overflow:ellipsis; }.save-indicator::before { width:13px; height:13px; font-size:9px; margin-right:4px; }
  .package-tabs { justify-content:space-between; gap:0; margin:0 -16px 18px; padding:0 16px; }.package-tabs a { text-align:center; padding:11px 8px; font-size:12px; flex:1; }.desktop-label { display:none; }.mobile-label { display:inline; }
  .package-settings-grid { gap:0; }.package-settings-grid .surface { padding:16px 0 22px; }.package-settings-grid .section-heading h2 { font-size:14px; }.composition-grid { gap:16px; }.generation-bar { flex-wrap:wrap; }.generation-bar > div { width:100%; }.generation-bar > .button { width:100%; }.generation-bar p { font-size:10px; }
  .indicator-table,.indicator-table tbody { display:block; }.indicator-table thead { display:none; }.indicator-table tr { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 0; border-top:1px solid var(--border); }.indicator-table td { display:block; padding:0; }.indicator-table td:first-child { grid-column:1/-1; }.indicator-table td:nth-child(2) { grid-column:1/-1; }.indicator-table td:last-child { grid-column:1/-1; text-align:right; }.indicator-table td:not(:last-child)::before { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }.indicator-table td:first-child::before { content:'Materi'; }.indicator-table td:nth-child(2)::before { content:'Indikator'; }.indicator-table td:nth-child(3)::before { content:'Jumlah soal'; }.indicator-table .input { font-size:12px; }
  .mobile-question-tools { display:flex; gap:10px; align-items:center; margin-bottom:20px; }.mobile-question-tools > .icon { width:16px; height:16px; }.mobile-question-tools > .input { flex:none; width:76px; min-height:40px; font-size:12px; padding:9px 32px 9px 12px; }.mobile-type-label { flex:1; min-width:0; }.mobile-type-label .input { margin:0; min-height:40px; font-size:12px; padding:9px 36px 9px 12px; }
  .mobile-question-tools .icon-button { width:28px; min-width:28px; }
  .question-workspace { display:block; border:0; }.question-sidebar,.live-preview { display:none; }.question-main { padding:0; }.editor-heading h2 { display:none; }.editor-heading { display:none; }.editor-heading .select-label { display:none; }.editor-heading > .icon-button { display:none; }
  .question-editor .rich-field .field-label { font-size:12px; }.rich-toolbar { gap:7px; padding:5px 7px; }.rich-rendered { font-size:14px; }.option-editor-content .rich-rendered { font-size:13px; padding:4px 10px; }
  .rich-editor { min-height:68px; padding:12px; font-size:14px; }.tool-btn { min-width:26px; height:26px; }.editor-section { margin-top:20px; }.editor-section .section-heading { margin-bottom:8px; }.explanation-section .rich-editor { min-height:48px; }.option-editor-content .rich-editor { min-height:30px; font-size:13px; padding:4px 10px; }.option-key { min-width:49px; }.option-editor-row { gap:8px; margin-top:4px; }.option-section .hint { font-size:10px; }.row-controls > summary { opacity:1; width:21px; min-width:21px; color:#a0afc3; }.explanation-section .text-link { font-size:11px; }.explanation-section .text-link span { font-size:10px; }.editor-footer { margin-top:15px; }.question-identity { font-size:10px; }.editor-review { font-size:12px; }
  #team-app[data-route=package][data-tab=questions] #page-content { padding-bottom:88px; }.question-navigation { position:fixed; bottom:0; left:0; right:0; z-index:20; background:#fff; border-top:1px solid var(--border); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }.question-navigation .button { min-height:39px; font-size:12px; }.question-navigation .primary { background:var(--blue); border-color:var(--blue); color:#fff; }
  .statement-editor { flex-wrap:wrap; gap:10px; }.statement-main { flex-basis:100%; }.statement-key { width:calc(100% - 100px); }.statement-editor > .row-controls { flex-direction:row; padding-top:26px; }.choice-labels label { font-size:11px; }
  .preview-tools { gap:12px; }.preview-tools .check-line { width:100%; }.preview-question { padding:22px 0; }.rich-preview { font-size:13px; }.preview-option { padding:12px 7px; }.preview-table td,.preview-table th { font-size:11px; padding:9px 7px; }.qc-totals { gap:11px; font-size:11px; }.qc-summary { gap:8px; }.qc-summary > .button { font-size:10px; }.finding { gap:9px; }.finding > .button { font-size:10px; padding:5px; }.qc-tools { flex-direction:column; align-items:flex-start; gap:12px; }.qc-question-actions { flex-wrap:wrap; gap:13px; padding:12px; }.ready-bar { position:static; }.ready-bar > .button { flex:1; }.ready-bar p { font-size:10px; }
  .job-progress { flex-wrap:wrap; gap:8px; }.job-progress progress { flex-basis:100%; }.job-history-label { flex-direction:column; align-items:flex-start; gap:5px; }.job-history-label .input { width:100%; }.job-panel .inline-actions .button { font-size:10px; }.job-panel .eyebrow { font-size:9px; }
  .toast { left:50%; bottom:85px; }.dialog-heading { padding:16px 18px; }.dialog-heading h2 { font-size:16px; }.dialog-body { padding:18px; }.dialog-actions { padding:15px 18px; }.dialog-actions .button { min-height:37px; }.login-card { padding:26px; }
}
@media(max-width:360px) {
  .page-heading h1 { font-size:21px; }.status-tab { gap:3px; font-size:10px; }.status-tabs { gap:0; }.option-section .hint { font-size:9px; }.package-tabs a { padding-left:4px; padding-right:4px; }.qc-totals { gap:8px; }.qc-summary { flex-wrap:wrap; }.form-grid { grid-template-columns:minmax(0,1fr); }.method-card { gap:7px; }.method-card strong { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.local-storage-settings { margin-top:24px; max-width:780px; }
.local-storage-settings > .hint { margin-bottom:16px; }

.completed-section-heading,.queue-section-title,.queue-batch-heading,.queue-current-title,.queue-progress-caption { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.completed-section-heading { margin:22px 0 14px; }
.completed-section-heading>div { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.completed-count { white-space:nowrap; color:var(--muted); font-size:12px; }
.completed-section-heading>.button { flex-shrink:0; }
.bulk-ready-failures { padding-left:20px; margin:0; }
.bulk-ready-failures li+li { margin-top:14px; }
.bulk-ready-failures strong,.bulk-ready-failures span { display:block; }
.bulk-ready-failures span { margin-top:4px; font-size:12px; color:var(--muted); }
.completed-section-heading h2,.generation-queue h2,.manual-drafts h2 { margin:0; font-size:15px; font-weight:600; }
.completed-section-heading p,.queue-batch-heading p { margin:6px 0 0; font-size:12px; color:var(--muted); }
.completed-section-heading>span { white-space:nowrap; color:var(--muted); font-size:12px; }
.completed-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:38px 18px; border:1px dashed var(--border); border-radius:12px; background:#fafcfe; text-align:center; }
.completed-empty>.icon { width:25px; height:25px; color:var(--blue); }
.completed-empty strong { font-size:14px; font-weight:550; }.completed-empty p { margin:0; font-size:12px; color:var(--muted); }
.manual-drafts { margin-top:28px; }.manual-drafts>h2 { margin-bottom:14px; }
.generation-queue { margin-top:30px; }
.queue-section-title { margin-bottom:14px; flex-wrap:wrap; }.queue-section-title>div { display:flex; align-items:center; gap:8px; }.queue-section-title .icon { color:var(--blue); width:18px; height:18px; }
.queue-live-label { display:flex; gap:6px; align-items:center; font-size:11px; color:var(--muted); }.queue-live-label i { width:6px; height:6px; border-radius:50%; background:#359c7b; }
.queue-batch { padding:22px; border:1px solid #dce6f5; border-radius:14px; background:linear-gradient(135deg,#fbfdff,#f5f8fe); margin-bottom:14px; overflow:hidden; }
.queue-batch-heading { align-items:flex-start; padding-bottom:20px; }.queue-batch h3 { margin:0; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.queue-total-progress { padding:5px 10px; border-radius:20px; background:#e9effa; color:#506782; font-size:11px; white-space:nowrap; }
.queue-current { display:flex; align-items:center; gap:16px; }.queue-current-content { flex:1; min-width:0; }
.queue-orbit { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; background:#e8effe; color:var(--blue); border:1px solid #d9e4fa; border-radius:14px; }
.queue-orbit .icon { width:23px; height:23px; }.queue-orbit.is-running { animation:queue-breathe 2.4s ease-in-out infinite; }
.queue-current-title { align-items:flex-start; flex-wrap:wrap; gap:7px; }.queue-current-title strong { font-size:13px; font-weight:550; overflow-wrap:anywhere; }.queue-status { font-size:11px; color:#61738c; }
.queue-progress-track { height:5px; margin:13px 0 9px; overflow:hidden; position:relative; border-radius:8px; background:#dfe7f3; }
.queue-progress-track>span { display:block; height:100%; background:#648cf0; border-radius:inherit; transition:width .45s ease; }
.queue-progress-track.is-indeterminate::after { content:''; position:absolute; inset:0 auto 0 0; width:32%; background:linear-gradient(90deg,transparent,#648cf0,transparent); animation:queue-travel 2.4s ease-in-out infinite; }
.queue-progress-caption { font-size:11px; color:var(--muted); align-items:flex-start; flex-wrap:wrap; gap:5px; }
.queue-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 0 64px; }.queue-actions .button { font-size:11px; }
.queue-next,.queue-waiting { margin-top:20px; padding-top:18px; border-top:1px solid #e0e7f1; display:flex; align-items:center; gap:14px; }
.queue-next strong { font-size:12px; font-weight:550; color:#5b6b83; }.queue-next p { font-size:11px; line-height:1.6; color:var(--muted); margin:5px 0 0; }
.queue-stack { position:relative; width:38px; height:31px; flex-shrink:0; margin:0 6px; }.queue-stack span { position:absolute; width:31px; height:22px; border:1px solid #cfdbea; border-radius:5px; background:#f4f7fc; }.queue-stack span:nth-child(1) { top:0; left:6px; }.queue-stack span:nth-child(2) { top:4px; left:3px; }.queue-stack span:nth-child(3) { top:8px; left:0; background:#eaf0fa; }
.queue-waiting { color:var(--muted); font-size:12px; }.queue-waiting small { margin-left:auto; white-space:nowrap; }.queue-waiting-mark { width:7px; height:7px; border-radius:50%; background:#bbc9dc; }
.queue-error { font-size:12px; color:#a35b29; margin:12px 0 0; line-height:1.6; overflow-wrap:anywhere; }.queue-batch.needs-attention { border-color:#ebd9c2; background:#fffaf3; }.queue-batch.is-stopped { background:#f8fafc; border-color:var(--border); }
.queue-footnote { font-size:11px; color:var(--muted); line-height:1.6; margin:12px 0; }
.package-table tr.newly-completed { animation:package-arrive 1.5s ease-out; }
::view-transition-group(*) { animation-duration:.42s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
@keyframes queue-breathe { 50% { box-shadow:0 0 0 6px #648cf00c; background:#deE8fd; } }
@keyframes queue-travel { from { transform:translateX(-100%); } to { transform:translateX(420%); } }
@keyframes package-arrive { from { background:#eaf6ef; } to { background:transparent; } }
@media(max-width:640px) {
  .completed-section-heading { align-items:flex-start; }.completed-section-heading p { font-size:11px; line-height:1.6; max-width:230px; }
  .generation-queue { margin-top:25px; }.queue-section-title { gap:9px; }.queue-live-label { font-size:10px; }
  .queue-batch { padding:17px 14px; }.queue-batch-heading { gap:10px; padding-bottom:18px; }.queue-batch h3 { font-size:13px; }.queue-batch-heading p { font-size:10px; }.queue-total-progress { font-size:10px; padding:5px 8px; }
  .queue-current { gap:10px; align-items:flex-start; }.queue-orbit { width:35px; height:35px; border-radius:10px; }.queue-orbit .icon { width:18px; height:18px; }
  .queue-current-title strong { font-size:12px; }.queue-status,.queue-progress-caption { font-size:10px; }.queue-progress-track { margin-top:11px; }
  .queue-actions { margin-left:45px; gap:5px; }.queue-actions .button { font-size:10px; padding:6px 7px; }.queue-next { gap:10px; }.queue-stack { margin:0 3px; }
}

.settings-form .form-grid { margin-top:18px; }
.saved-api-key { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; margin:0 0 16px; background:#f7f9fc; border:1px solid var(--border); border-radius:8px; }
.saved-api-key code { font-size:14px; letter-spacing:1px; color:#556782; }
.saved-api-key .button { white-space:nowrap; }