/* Screen components. Old component layout stays available; this is the shared visual layer. */
@media screen {
html[data-upgrade="cocoa"] {
  --ui-bg:var(--ui-shell-bg);--ui-line:var(--ui-shell-line);
  --bg:var(--ui-bg); --card:var(--ui-surface); --ink:var(--ui-ink); --deep:var(--ui-ink);
  --muted:var(--ui-muted); --line:var(--ui-line); --cocoa:var(--ui-accent);
  --mid:var(--ui-accent); --point:var(--ui-line); --soft:var(--ui-accent-soft);
  --ok:var(--ui-success); --warn:var(--ui-warning); --danger:var(--ui-danger);
  --btn:var(--ui-accent); --point-soft:var(--ui-accent-soft);
}
html[data-upgrade="cocoa"] body { background:var(--ui-bg)!important; color:var(--ui-ink)!important; font-family:var(--ui-font); font-size:14px; font-weight:500; line-height:1.5; }
html[data-upgrade="cocoa"] :is(.tab-content,.course-detail-panel) { animation:none!important; }
html[data-upgrade="cocoa"] .container { max-width:var(--ui-shell-width)!important; width:100%!important; padding:0 var(--ui-shell-gutter) 40px!important; }
html[data-upgrade="cocoa"] .header { display:flex; align-items:center; gap:20px; min-height:80px!important; padding:16px 0!important; }
html[data-upgrade="cocoa"] .header-layout { flex:1; min-width:0; }
html[data-upgrade="cocoa"] .header h1 { font-size:19px!important; letter-spacing:-.6px!important; line-height:1.4; }
html[data-upgrade="cocoa"] .header h1::before { width:8px; height:22px; border-radius:3px; background:var(--ui-accent); margin-right:10px; vertical-align:-4px; }
html[data-upgrade="cocoa"] .shell-search { flex:0 1 220px; width:220px; height:38px; min-width:120px; max-width:240px; padding:8px 12px; border:1px solid var(--ui-line); border-radius:7px; background:white; font:400 13px var(--ui-font); }
html[data-upgrade="cocoa"] .shell-manual { position:static!important; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 14px; border:1px solid var(--ui-line)!important; border-radius:7px!important; background:white!important; color:var(--ui-ink)!important; font:600 13px var(--ui-font); }
.shell-manual svg,.shell-nav-icon { width:20px; height:20px; flex:none; pointer-events:none; }
html[data-upgrade="cocoa"] body > div[style*="7c2d12"] { background:var(--ui-accent-soft)!important; color:var(--ui-muted)!important; font-size:11px!important; padding:4px 16px!important; line-height:1.5; }
html[data-upgrade="cocoa"] body > div[style*="7c2d12"] button { border:1px solid var(--ui-line)!important; background:transparent!important; color:var(--ui-muted)!important; padding:2px 8px!important; border-radius:4px!important; font-size:11px!important; }

/* Four groups, with search outside the grid. Every item gets the same icon/label layout. */
html[data-upgrade="cocoa"] .shell-menu { display:grid!important; grid-template-columns:repeat(4,minmax(220px,1fr))!important; gap:16px!important; padding:0 0 18px!important; margin:0 0 24px!important; border:0!important; border-bottom:1px solid var(--ui-line)!important; border-radius:0!important; background:transparent!important; align-items:start!important; }
html[data-upgrade="cocoa"] .shell-group { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; padding:0!important; margin:0!important; min-width:0!important; min-height:0!important; background:transparent!important; border:0!important; align-content:start!important; }
html[data-upgrade="cocoa"] .shell-group-name { grid-column:1/-1; font:600 11px var(--ui-font)!important; color:var(--ui-muted)!important; margin:0 0 2px 2px!important; padding:0; line-height:18px; }
html[data-upgrade="cocoa"] .shell-direct,
html[data-upgrade="cocoa"] .shell-item,
html[data-upgrade="cocoa"] button.shell-item {
  display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:100%; height:66px!important; min-height:66px!important; max-height:none!important; min-width:0;
  padding:8px 5px!important; margin:0!important; border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-control-radius)!important; background:var(--ui-section-panel)!important; color:var(--ui-ink)!important;
  text-align:center!important; text-decoration:none; box-shadow:none!important; cursor:pointer;
  font:600 13px var(--ui-font)!important; transform:none!important;
}
html[data-upgrade="cocoa"] .shell-direct strong,
html[data-upgrade="cocoa"] .shell-item strong { font:600 13px var(--ui-font)!important; color:inherit!important; line-height:18px!important; white-space:nowrap; word-break:keep-all; }
html[data-upgrade="cocoa"] .shell-direct small,
html[data-upgrade="cocoa"] .shell-item small { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html[data-upgrade="cocoa"] .shell-item.is-pending { color:var(--ui-muted)!important; background:var(--ui-section-soft)!important; opacity:1!important; border-style:dashed!important; }
html[data-upgrade="cocoa"] .shell-direct[aria-current="page"],
html[data-upgrade="cocoa"] .shell-item[aria-current="page"] { color:white!important; background:var(--ui-section-ink)!important; border-color:var(--ui-section-ink)!important; box-shadow:inset 0 -3px 0 #0002!important; }
html[data-upgrade="cocoa"] .shell-direct:hover:not([aria-current="page"]),
html[data-upgrade="cocoa"] .shell-item:hover:not([aria-current="page"]):not(.is-pending) { border-color:var(--ui-section-ink)!important; background:var(--ui-section-panel)!important; box-shadow:inset 0 -2px 0 var(--ui-section-ink)!important; }
.shell-nav-toggle { display:none; }
.shell-external { font-size:11px; margin-left:3px; }
html[data-upgrade="cocoa"] .mobile-bottom-nav { display:none!important; }
html[data-upgrade="cocoa"] :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--ui-accent)!important; outline-offset:2px; }

/* Display type belongs to the identity and figures; work text stays readable. */
@font-face { font-family:"Gmarket Sans";src:url('../assets/fonts/GmarketSansTTFMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap; }
@font-face { font-family:"Gmarket Sans";src:url('../assets/fonts/GmarketSansTTFBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap; }
html[data-upgrade="cocoa"] .shell-pagehead h2 { font-size:22px!important;font-weight:700!important; }
html[data-upgrade="cocoa"] .refresh-phase-metric strong { font-family:var(--ui-display-font)!important;font-weight:500!important;font-variant-numeric:tabular-nums;letter-spacing:-.8px; }
/* A common title, control, surface and table scale across dashboard screens. */
html[data-upgrade="cocoa"] :is(.shell-pagehead,.workspace-heading,.integration-bar) { align-items:center!important; gap:12px!important; margin:0 0 20px!important; padding:0!important; }
html[data-upgrade="cocoa"] :is(.shell-pagehead h2,.workspace-heading h2,.integration-bar h2,.form-studio h2) { font:700 22px/1.4 var(--ui-display-font)!important; letter-spacing:-.8px!important; color:var(--ui-ink)!important; border-left:4px solid var(--ui-section-ink)!important; padding-left:12px!important; }
html[data-upgrade="cocoa"] :is(.shell-pagehead p,.workspace-heading p,.integration-bar p,.form-lead) { color:var(--ui-muted)!important; font-size:13px!important; line-height:1.6; }
html[data-upgrade="cocoa"] body[data-shell-view="home"] { --ui-section-ink:var(--ui-main-ink);--ui-section-soft:var(--ui-main-soft);--ui-section-panel:var(--ui-main-panel); }
html[data-upgrade="cocoa"] body[data-shell-view="detail"] { --ui-section-ink:var(--ui-operation-ink);--ui-section-soft:var(--ui-operation-soft);--ui-section-panel:var(--ui-operation-panel); }
html[data-upgrade="cocoa"] body[data-shell-view="forms"] { --ui-section-ink:var(--ui-document-ink);--ui-section-soft:var(--ui-document-soft);--ui-section-panel:var(--ui-document-soft); }
html[data-upgrade="cocoa"] :is(.workspace-button,.workspace-add,.workspace-manage,.workspace-back,.refresh-view-tab,.integration-retry,.integration-course-link,.manual-tool) { min-height:36px; padding:7px 12px!important; border:1px solid var(--ui-line)!important; border-radius:7px!important; background:white!important; color:var(--ui-ink)!important; font:600 13px var(--ui-font)!important; box-shadow:none!important; }
html[data-upgrade="cocoa"] :is(.workspace-add,.btn-primary) { background:var(--ui-accent)!important; border-color:var(--ui-accent)!important; color:white!important; border-radius:7px!important; box-shadow:none!important; }
html[data-upgrade="cocoa"] :is(.refresh-view-tab,.shell-sections button)[aria-pressed="true"] { background:var(--ui-accent-soft)!important; color:var(--ui-accent)!important; border-color:var(--ui-accent)!important; }
html[data-upgrade="cocoa"] :is(.form-input,.form-select,.workspace-tools input,.workspace-tools select,.cocoa-tools input,.cocoa-tools select) { min-height:40px; border:1px solid var(--ui-control-line)!important; border-radius:7px!important; background:white!important; color:var(--ui-ink)!important; font-size:14px!important; box-shadow:none!important; }
html[data-upgrade="cocoa"] .form-group label { color:var(--ui-ink)!important; font-size:13px!important; font-weight:600!important; }
html[data-upgrade="cocoa"] .refresh-operational { gap:10px 20px; font-size:13px; color:var(--ui-muted); padding:0 0 16px; }
html[data-upgrade="cocoa"] .refresh-phases { gap:14px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;overflow:visible; }
html[data-upgrade="cocoa"] .refresh-phase { background:color-mix(in srgb,var(--ui-section-panel) 38%,var(--ui-header))!important;padding:18px!important;border:1px solid color-mix(in srgb,var(--ui-section-ink) 32%,var(--ui-section-panel))!important;border-radius:10px;overflow:hidden; }
html[data-upgrade="cocoa"] .refresh-phase-head { background:var(--ui-section-panel)!important;border-bottom:1px solid color-mix(in srgb,var(--ui-section-ink) 25%,var(--ui-section-panel));padding:14px 18px!important;margin:-18px -18px 16px!important; }
html[data-upgrade="cocoa"] .refresh-phase-head h3 { color:var(--ui-section-ink)!important;font:700 16px/1.4 var(--ui-display-font)!important; }
html[data-upgrade="cocoa"] .refresh-phase-head small { display:inline-grid;place-items:center;min-width:26px;height:26px;background:var(--ui-section-ink);color:white!important;opacity:1;font:700 12px var(--ui-font);border-radius:6px; }
html[data-upgrade="cocoa"] .refresh-phase-metric > span { font-size:14px;font-weight:700; }
html[data-upgrade="cocoa"] .refresh-phase-metric > small { font-weight:400; }
html[data-upgrade="cocoa"] .refresh-phase-head span { background:var(--ui-accent-soft)!important; color:var(--ui-accent)!important; border-radius:5px!important; }
html[data-upgrade="cocoa"] .refresh-phase-metric strong { color:var(--ui-ink)!important; }
html[data-upgrade="cocoa"] .refresh-meter span,
html[data-upgrade="cocoa"] .course-board-progress-fill { background:var(--ui-accent)!important; }
html[data-upgrade="cocoa"] .shell-grid { grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)!important; gap:20px!important; }
html[data-upgrade="cocoa"][data-look] #shell-stage .shell-grid>.card:has(#course-progress-board),
html[data-upgrade="cocoa"] #shell-agenda { background:white!important; border:1px solid var(--ui-line)!important; border-radius:var(--ui-radius)!important; padding:20px!important; box-shadow:var(--ui-shadow)!important; }
html[data-upgrade="cocoa"] .course-board-card { background:white!important; border:1px solid var(--ui-line)!important; border-radius:8px!important; box-shadow:none!important; overflow:hidden; }
html[data-upgrade="cocoa"] .course-board-card:hover { transform:none!important; border-color:var(--ui-accent)!important; }
html[data-upgrade="cocoa"] .course-board-card-header { background:var(--ui-main-soft)!important; border-bottom:1px solid var(--ui-line)!important; }
html[data-upgrade="cocoa"] :is(.course-board-card-name,.card-header h2,.shell-listhead h3) { color:var(--ui-ink)!important; font-size:16px!important; }
html[data-upgrade="cocoa"][data-look] #shell-stage .shell-grid > .card:has(#course-progress-board) > .card-header.overview,
html[data-upgrade="cocoa"] #shell-agenda > .shell-listhead { background:var(--ui-main-panel)!important;padding:14px 18px!important;margin:-20px -20px 18px!important;border-bottom:1px solid var(--ui-line);border-radius:9px 9px 0 0; }
html[data-upgrade="cocoa"] #shell-stage :is(.card-header h2,.shell-listhead h3) { font:700 16px/1.5 var(--ui-display-font)!important; }
html[data-upgrade="cocoa"] .refresh-bottom { gap:24px; background:white; border:1px solid var(--ui-line); border-radius:var(--ui-radius); padding:20px; margin-top:20px; }
html[data-upgrade="cocoa"] .refresh-bottom #shell-attention { padding-left:24px!important; border-color:var(--ui-line)!important; }
html[data-upgrade="cocoa"] :is(.workspace-list,.course-detail-panel,.workspace-dialog) { background:white!important; border:1px solid var(--ui-line)!important; border-radius:var(--ui-radius)!important; box-shadow:var(--ui-shadow)!important; }
html[data-upgrade="cocoa"] .workspace-list { padding:16px; }
html[data-upgrade="cocoa"] .workspace-preview { border:0; border-radius:7px; background:var(--ui-subtle); color:var(--ui-muted); font-size:12px; padding:8px 12px; margin:0 0 16px; }
html[data-upgrade="cocoa"] :is(.workspace-table,.refresh-report-table) { font-size:13px!important; }
html[data-upgrade="cocoa"] :is(.workspace-table,.refresh-report-table) th { background:var(--ui-section-panel)!important; color:var(--ui-section-ink)!important; font-size:12px!important; font-weight:700!important; border-color:var(--ui-line)!important; }
html[data-upgrade="cocoa"] :is(.workspace-table,.refresh-report-table) td { border-color:var(--ui-line)!important; }
html[data-upgrade="cocoa"] #course-detail { padding:20px!important; }
html[data-upgrade="cocoa"] #course-detail .course-detail-top { background:white!important; padding:16px 0!important; border-bottom:1px solid var(--ui-line)!important; }
html[data-upgrade="cocoa"][data-look] #course-detail .course-detail-top { box-shadow:none!important; border-radius:0!important; border:0!important; border-bottom:1px solid var(--ui-line)!important; }
html[data-upgrade="cocoa"] #course-detail .course-detail-title { font-size:22px!important; }
html[data-upgrade="cocoa"] #course-detail .detail-section { border:1px solid var(--ui-line)!important; border-radius:8px!important; background:white!important; margin-top:16px; }
html[data-upgrade="cocoa"] #course-detail .detail-section-header { background:var(--ui-section-panel)!important; color:var(--ui-section-ink)!important; }
html[data-upgrade="cocoa"] #course-detail .detail-section-body { padding:20px!important; }
html[data-upgrade="cocoa"] .shell-sections button { min-height:38px; border-radius:7px!important; }

#integration-host { margin-bottom:24px; }
.integration-state { color:var(--ui-muted); font-size:12px; font-weight:500; margin-bottom:12px; }
#integration-frame { display:block; height:max(520px,calc(100dvh - 355px)); min-height:520px; border:1px solid var(--ui-line); border-radius:var(--ui-radius); background:white; }

/* The manual is a full reading workspace; its iframe owns the table of contents. */
html[data-upgrade="cocoa"] .manual-modal { background:#3f332d55!important; padding:20px!important; backdrop-filter:blur(2px); }
html[data-upgrade="cocoa"] .manual-content { display:flex; flex-direction:column; width:min(1440px,100%)!important; max-width:1440px!important; height:calc(100dvh - 40px)!important; max-height:none!important; margin:0!important; border-radius:12px!important; background:white!important; overflow:hidden!important; box-shadow:0 20px 80px #3f332d26!important; }
html[data-upgrade="cocoa"] .manual-header { flex:none; min-height:64px; padding:14px 20px!important; background:white!important; color:var(--ui-ink)!important; border-bottom:1px solid var(--ui-line); gap:12px; }
html[data-upgrade="cocoa"] .manual-header h2 { color:var(--ui-ink)!important; font-size:18px!important; line-height:1.4; margin:0!important; }
html[data-upgrade="cocoa"] .manual-close { width:36px!important; height:36px!important; padding:0!important; border:1px solid var(--ui-line)!important; border-radius:7px!important; background:white!important; color:var(--ui-muted)!important; font-size:24px!important; }
.manual-iframe { flex:1; min-height:0; height:100%!important; background:var(--ui-bg); }
.manual-tools { display:flex; align-items:center; gap:8px; }
html[data-upgrade="cocoa"][data-look] #manual-modal .manual-header { background:white!important; background-image:none!important; color:var(--ui-ink)!important; }
html[data-upgrade="cocoa"][data-look] .shell-grid .card-header .shell-textlink { background:white!important; border:1px solid var(--ui-line); border-radius:7px; padding:8px 12px; color:var(--ui-ink); }
html[data-upgrade="cocoa"] .cocoa-arrow::after { width:14px; height:12px; }
html[data-upgrade="cocoa"] .manual-modal.is-full { padding:0!important; }
html[data-upgrade="cocoa"] .manual-modal.is-full .manual-content { width:100%!important; max-width:none!important; height:100dvh!important; border-radius:0!important; }

/* Group accents describe location; action colors stay common. */
html[data-upgrade="cocoa"] :is(.shell-group,.work-menu-dialog section):nth-child(2) { --ui-section-ink:var(--ui-interview-ink);--ui-section-soft:var(--ui-interview-soft);--ui-section-panel:var(--ui-interview-panel); }
html[data-upgrade="cocoa"] :is(.shell-group,.work-menu-dialog section):nth-child(3) { --ui-section-ink:var(--ui-operation-ink);--ui-section-soft:var(--ui-operation-soft);--ui-section-panel:var(--ui-operation-panel); }
html[data-upgrade="cocoa"] :is(.shell-group,.work-menu-dialog section):nth-child(4) { --ui-section-ink:var(--ui-after-ink);--ui-section-soft:var(--ui-after-soft);--ui-section-panel:var(--ui-after-panel); }
html[data-upgrade="cocoa"] :is(.shell-direct,.shell-item) .shell-nav-icon { color:var(--ui-section-ink); }
html[data-upgrade="cocoa"] .shell-item.is-pending .shell-nav-icon { color:var(--ui-muted); }
html[data-upgrade="cocoa"] :is(.shell-direct,.shell-item)[aria-current="page"] .shell-nav-icon { color:white; }
html[data-upgrade="cocoa"] .refresh-phase:nth-child(1) { --ui-section-ink:var(--ui-interview-ink);--ui-section-soft:var(--ui-interview-soft);--ui-section-panel:var(--ui-interview-panel); }
html[data-upgrade="cocoa"] .refresh-phase:nth-child(2) { --ui-section-ink:var(--ui-operation-ink);--ui-section-soft:var(--ui-operation-soft);--ui-section-panel:var(--ui-operation-panel); }
html[data-upgrade="cocoa"] .refresh-phase:nth-child(3) { --ui-section-ink:var(--ui-after-ink);--ui-section-soft:var(--ui-after-soft);--ui-section-panel:var(--ui-after-panel); }
html[data-upgrade="cocoa"] .refresh-phase-head span { background:var(--ui-section-soft)!important;color:var(--ui-section-ink)!important; }
html[data-upgrade="cocoa"] .refresh-meter span { background:var(--ui-section-ink)!important; }
html[data-upgrade="cocoa"] :is(.refresh-phase-head h3,.course-board-card-name,.card-header h2) { font-weight:700!important; }
html[data-upgrade="cocoa"] .refresh-phase-metric strong { font-weight:700!important;font-variant-numeric:tabular-nums; }
html[data-upgrade="cocoa"] .creator-credit { max-width:1600px;margin:0 auto;padding:18px 28px 24px;border-top:1px solid var(--ui-line);color:var(--ui-muted);font:400 12px/1.7 var(--ui-font);text-align:center; }

@media(max-width:1100px) {
  html[data-upgrade="cocoa"] .shell-menu { grid-template-columns:1fr 1fr!important; gap:14px 20px!important; }
  html[data-upgrade="cocoa"] .shell-primary { grid-column:auto!important; }
  html[data-upgrade="cocoa"] .shell-direct,html[data-upgrade="cocoa"] .shell-item,html[data-upgrade="cocoa"] button.shell-item { height:48px!important; min-height:48px!important; flex-direction:row; gap:8px; }
  html[data-upgrade="cocoa"] .shell-grid { grid-template-columns:minmax(0,1fr) 300px!important; }
}
@media(max-width:760px) {
  html[data-upgrade="cocoa"] .container { padding:0 var(--ui-shell-gutter) 24px!important; }
  html[data-upgrade="cocoa"] .header { min-height:66px!important; gap:8px; flex-wrap:wrap; }
  html[data-upgrade="cocoa"] .header h1 { font-size:16px!important; }
  html[data-upgrade="cocoa"] .shell-search { display:none; }
  html[data-upgrade="cocoa"] .shell-manual { padding:7px 9px; font-size:12px; }
  html[data-upgrade="cocoa"] .shell-manual svg { display:none; }
  html[data-upgrade="cocoa"] .shell-direct strong,html[data-upgrade="cocoa"] .shell-item strong { font-size:12px!important; }
  html[data-upgrade="cocoa"] .shell-nav-icon { width:18px;height:18px; }
  .shell-nav-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:42px; padding:8px 12px; margin:0 0 20px; border:1px solid var(--ui-line); border-radius:7px; background:white; color:var(--ui-ink); font:600 13px var(--ui-font); }
  html[data-upgrade="cocoa"] .shell-menu { display:none!important; }
  html[data-upgrade="cocoa"] body[data-nav-open="true"] .shell-menu { display:grid!important; grid-template-columns:1fr!important; }
  html[data-upgrade="cocoa"] .shell-group:nth-last-child(-n+2) { grid-template-columns:1fr 1fr!important; }
  html[data-upgrade="cocoa"] .shell-grid { display:block!important; }
  html[data-upgrade="cocoa"] .refresh-phases { display:grid;grid-template-columns:1fr;gap:14px; }
  html[data-upgrade="cocoa"] .refresh-bottom { grid-template-columns:1fr; }
  html[data-upgrade="cocoa"] .refresh-bottom #shell-attention { padding-left:0!important; border:0!important; }
  html[data-upgrade="cocoa"] .workspace-table-wrap { overflow-x:auto; }
  html[data-upgrade="cocoa"] #course-detail { padding:12px!important; }
  html[data-upgrade="cocoa"] .manual-modal { padding:0!important; }
  html[data-upgrade="cocoa"] .manual-content { height:100dvh!important; border-radius:0!important; }
  html[data-upgrade="cocoa"] .manual-header { min-height:56px; padding:10px 12px!important; }
  html[data-upgrade="cocoa"] .manual-header h2 { font-size:16px!important; }
  html[data-upgrade="cocoa"] .manual-tool { font-size:11px!important; padding:5px 8px!important; }
  #integration-frame { min-height:560px; height:75dvh; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
}

@media print { .creator-credit { display:none!important; } }