:root {
  --bg: #0d0f12;
  --surface: #161a20;
  --surface-2: #1e232b;
  --line: #2a303a;
  --text: #eef1f5;
  --muted: #9aa3af;
  --accent: #e10600;
  --accent-2: #ff4b3e;
  --pos: #2fbf71;
  --neg: #ff5a52;
  --warn: #f5a623;
  --radius: 10px;
  --head: 'Chakra Petch', 'Sarabun', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 'Sarabun', system-ui, sans-serif; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--head); line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 24px; padding-bottom: 48px; min-height: 70vh; }
section { margin: 40px 0; }

/* nav */
.nav { background: #000; border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 10; }
.nav-in { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.brand { font-family: var(--head); font-weight: 700; color: var(--text); letter-spacing: .06em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { background: var(--accent); color: #fff; padding: 2px 8px; margin-right: 8px; transform: skewX(-12deg); display: inline-block; font-family: var(--head); font-weight: 700; }
.nav-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; }
.nav-links, .nav-user { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav-links a, .nav-user a { color: var(--muted); }
.nav-links a.on, .nav-links a:hover, .nav-user a:hover { color: var(--text); text-decoration: none; }
.nav-links a.on { box-shadow: inset 0 -2px 0 var(--accent); }
.nav-user .cart b { background: var(--accent); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .8rem; }
.nav-toggle, .nav-burger { display: none; }
.notice-bar { background: #3a2a05; color: #ffd98a; text-align: center; padding: 6px 16px; font-size: .9rem; }

/* buttons & forms */
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font: 600 .95rem var(--head); cursor: pointer; }
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn.sm { padding: 6px 12px; font-size: .85rem; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.danger { background: #7a1410; }
.btn.full { width: 100%; }
button.link { background: none; border: 0; color: var(--accent-2); cursor: pointer; font: inherit; padding: 0; }
.inline { display: inline; }
input, select, textarea { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; color: var(--muted); font-size: .9rem; }
.form label input, .form label select, .form label textarea { color: var(--text); font-size: 1rem; width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 6px; display: inline-flex; }
input.qty { width: 70px; }
input.qty.wide { width: 110px; }
input.code { font: 700 1.6rem var(--head); letter-spacing: .4em; text-align: center; }
input[type=range] { padding: 0; accent-color: var(--accent); }

/* layout helpers */
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; gap: 12px; }
.row.gap { gap: 8px; }
.wrap-row { flex-wrap: wrap; }
.grow { flex: 1; }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.span2 { grid-column: 1 / -1; }
.center { text-align: center; }
.narrow { max-width: 440px; margin: 24px auto; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pre { white-space: pre-line; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.r { text-align: right; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scroll-x { overflow-x: auto; }
ul.plain { list-style: none; padding: 0; margin: 8px 0; }
ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.grid > .card { margin-bottom: 0; }
.link-card { display: block; color: var(--text); transition: border-color .15s, transform .15s; }
.link-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
details.card summary { cursor: pointer; }
details.card[open] summary { margin-bottom: 16px; }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-left: 4px solid var(--accent); }
.prose { max-width: 780px; }
h1.page { font-size: 1.8rem; margin: 8px 0 20px; }
h2.sec { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; margin: 24px 0 12px; }
h2.sec::before { content: ''; display: inline-block; width: 18px; height: 4px; background: var(--accent); margin-right: 10px; vertical-align: middle; transform: skewX(-20deg); }

/* hero */
.hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: center; padding: 48px 32px; margin: 0 0 40px; border-radius: var(--radius);
  background: linear-gradient(115deg, #1a0000 0%, #0d0f12 55%), var(--bg); border: 1px solid var(--line); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -80px; top: 0; bottom: 0; width: 260px; background: repeating-linear-gradient(115deg, var(--accent) 0 14px, transparent 14px 40px); opacity: .12; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.hero .accent { color: var(--accent); }
.kicker { color: var(--accent-2); font: 600 .8rem var(--head); letter-spacing: .15em; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; }
.hero-stats { display: grid; gap: 12px; position: relative; z-index: 1; }
.stat { background: rgba(0,0,0,.4); border-left: 3px solid var(--accent); padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; }
.stat b { font: 700 1.8rem var(--head); }
.stat span { color: var(--muted); }
.stat-card b { display: block; font: 700 1.5rem var(--head); margin: 4px 0; }

/* products */
.product { display: flex; flex-direction: column; gap: 6px; }
.product h3 { margin: 4px 0 0; }
.thumb { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--surface-2), #2a0a08); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb span { font: 700 3rem var(--head); color: var(--accent); opacity: .7; }
.price { font: 700 1.2rem var(--head); color: var(--text); margin: 0; }

/* badges */
.badge { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; font-family: 'Sarabun', sans-serif; cursor: default; }
button.badge { cursor: pointer; }
.role-guest { color: #c9ced6; }
.role-customer { color: #7cc4ff; border-color: #1f4a6b; }
.role-member { color: #6ee7a8; border-color: #1b5a3a; }
.role-project { color: #ffc15e; border-color: #6b4a12; }
.role-admin { color: #fff; background: var(--accent); border-color: var(--accent); }
.badge.ok, .st-paid, .st-done, .st-shipped { color: var(--pos); border-color: #1b5a3a; }
.badge.warn, .st-pending, .st-planning, .st-on_hold { color: var(--warn); border-color: #6b4a12; }
.badge.bad, .st-cancelled { color: var(--neg); border-color: #6b1f1b; }
.st-active { color: #7cc4ff; border-color: #1f4a6b; }

/* progress */
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin: 6px 0 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; }
.bar.thin { height: 4px; margin: 6px 0 0; }
.bar.money i { background: #3d8bfd; }
.bar.money.over i { background: var(--neg); }
.proj-mini { padding: 8px 0; border-bottom: 1px solid var(--line); }
.proj-mini:last-child { border-bottom: 0; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: .85rem; }
tfoot th { color: var(--text); font-size: 1rem; }
.add-row { margin-top: 16px; }
.filters { margin-bottom: 16px; }

/* flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash.success { background: #0e2a1c; border-color: #1b5a3a; color: #9ff0c2; }
.flash.error { background: #2a0e0c; border-color: #6b1f1b; color: #ffb3ad; }
.flash.info { background: #0e1d2a; border-color: #1f4a6b; color: #a8d8ff; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0 0 24px; border-left: 2px solid var(--line); }
.timeline li { display: flex; gap: 16px; padding: 0 0 20px 20px; position: relative; align-items: flex-start; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; background: var(--accent); transform: rotate(45deg); }
.timeline .year { font: 700 1.3rem var(--head); color: var(--accent-2); min-width: 60px; }
.timeline.compact li { padding-bottom: 12px; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.dot { background: var(--accent); color: #fff; border-radius: 99px; padding: 0 6px; font-size: .75rem; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }

.foot { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: .9rem; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three, .grid.two, .grid.two-one { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding: 32px 20px; }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; padding: 8px; }
  .nav-burger span { width: 22px; height: 2px; background: var(--text); }
  .nav-menu { display: none; position: absolute; top: 63px; left: 0; right: 0; background: #000; flex-direction: column; align-items: stretch; padding: 16px; border-bottom: 3px solid var(--accent); }
  .nav-toggle:checked ~ .nav-menu { display: flex; }
  .nav-links, .nav-user { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cta { flex-direction: column; align-items: flex-start; }
  table.tasks thead { display: none; }
  table.tasks tr, table.tasks td { display: block; border: 0; padding: 4px 0; }
  table.tasks tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
}
@media (max-width: 520px) {
  .grid.four { grid-template-columns: 1fr; }
}

/* PromptPay */
.pay-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pp-head { background: #113566; color: #fff; font: 600 .9rem var(--head); padding: 6px 16px; border-radius: 6px; letter-spacing: .04em; }
.qr { background: #fff; padding: 12px; border-radius: 10px; width: 280px; max-width: 100%; height: auto; }
.pay-amount { font: 700 2rem var(--head); margin: 4px 0 0; }
.steps { text-align: left; color: var(--muted); font-size: .9rem; padding-left: 20px; margin: 8px 0; }
.order-body { display: flex; gap: 20px; align-items: flex-start; }
.slip { width: 220px; display: flex; flex-direction: column; gap: 8px; }
.slip img { width: 100%; max-height: 320px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.card.needs-action { border-color: var(--warn); }
@media (max-width: 700px) { .order-body { flex-direction: column; } .slip { width: 100%; } }

/* document library */
.file-row { display: flex; gap: 16px; align-items: flex-start; }
.file-ext { display: inline-grid; place-items: center; min-width: 52px; height: 52px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font: 700 .75rem var(--head); color: var(--muted); }
.file-ext.sm { min-width: 40px; height: 20px; font-size: .65rem; border-radius: 4px; vertical-align: middle; }
.ext-pdf { color: #ff6b6b; border-color: #6b1f1b; }
.ext-doc, .ext-docx { color: #7cc4ff; border-color: #1f4a6b; }
.ext-xls, .ext-xlsx, .ext-csv { color: #6ee7a8; border-color: #1b5a3a; }
.ext-ppt, .ext-pptx { color: #ffb86b; border-color: #6b4a12; }
.ext-step, .ext-stp, .ext-stl, .ext-dwg, .ext-dxf, .ext-sldprt, .ext-sldasm, .ext-slddrw, .ext-iges, .ext-igs { color: #c9a3ff; border-color: #4a2f6b; }

/* admin editing */
.announce { background: var(--accent); color: #fff; text-align: center; padding: 8px 16px; font-weight: 600; }
.thumb.mini { width: 48px; height: 48px; aspect-ratio: auto; flex: none; }
.thumb.mini span { font-size: 1.2rem; }
.foot-contact { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
@media (max-width: 700px) { .foot-contact { align-items: flex-start; } }

/* privacy policy */
.policy h2 { margin-top: 28px; scroll-margin-top: 80px; }
.policy table { margin-bottom: 12px; }
.policy td:first-child { white-space: nowrap; color: var(--text); }
.policy li { margin-bottom: 8px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; background: var(--surface-2); border-radius: 8px; font-size: .9rem; margin: 16px 0; }
@media (max-width: 700px) { .policy td:first-child { white-space: normal; } }

/* admin option lists */
.opt-table td { padding: 6px 4px; }
.opt-table .grow-cell { width: 100%; }
.opt-table tr.retired input[name=label] { opacity: .55; }
.nowrap { white-space: nowrap; }
button.link:disabled { opacity: .25; cursor: default; }

/* admin-provided branding */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 36px; width: auto; margin-right: 10px; display: block; }
.hero.has-image { background-size: cover; background-position: center; }
.settings-group { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.settings-group:first-of-type { border-top: 0; margin-top: 0; }
.settings-img { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.settings-img img { max-height: 64px; max-width: 200px; background: #fff2; border-radius: 6px; padding: 4px; }

/* department tags */
.badge.dept { color: #c9a3ff; border-color: #4a2f6b; }
tr.row-on td { background: var(--surface-2); }

.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-logo { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; flex: none; }
.hero.no-stats { grid-template-columns: 1fr; }
.receipt-attach label { cursor: pointer; color: var(--accent-2); }

/* seasons */
.season-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.chip { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font: 600 .85rem var(--head); }
.chip small { font-weight: 400; opacity: .8; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:hover { text-decoration: none; color: var(--text); }
.season-now { font: 700 .8rem var(--head); color: #fff; border: 1px solid var(--accent); border-radius: 4px; padding: 1px 8px; margin-left: -12px; }
.season-now:hover { text-decoration: none; background: var(--accent); }
.badge.season { color: #ffc15e; border-color: #6b4a12; }

/* post & timeline images */
.post-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; margin: 8px 0 16px; }
.news-img { width: calc(100% + 40px); margin: -20px -20px 12px; height: 170px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; display: block; max-width: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.timeline-img { display: block; max-width: 320px; width: 100%; border-radius: 6px; margin-top: 8px; }
.thumb-sm { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; vertical-align: middle; flex: none; }
.cover-preview { max-height: 120px; border-radius: 6px; }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gallery-item { display: flex; flex-direction: column; gap: 4px; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.article-page { margin-left: auto; margin-right: auto; }
.page-narrow { max-width: 820px; margin: 0 auto; }
.page-narrow .prose { max-width: none; }
.tx-main { min-width: 180px; }
.tx-main .small { margin-top: 2px; }

.season-cmp { display: flex; flex-direction: column; gap: 8px; }
.season-row { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.season-row:hover { text-decoration: none; border-color: var(--muted); }
.season-row.on { border-color: var(--accent); background: var(--surface-2); }
.season-row .bar { margin: 8px 0 4px; }

.badge.due-overdue { color: var(--neg); border-color: #6b1f1b; font-weight: 600; }
.badge.due-soon { color: var(--warn); border-color: #6b4a12; }
.card.late, .link-card.late { border-color: #6b1f1b; }
tr.row-late td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
.my-tasks { display: flex; flex-direction: column; gap: 10px; }
.my-tasks .card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.my-tasks-link { margin-bottom: 18px; }
.due-reason { width: 190px; }
.due-history summary { cursor: pointer; }
.due-history table { margin-top: 10px; }

/* ---------- post back link ---------- */
.back-link { display: inline-block; font-size: .9rem; margin-bottom: 12px; }
.article-foot { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }

/* ---------- about page ---------- */
.about-page { max-width: 1040px; margin: 0 auto; }
.about-hero { position: relative; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px 40px; border-radius: var(--radius); margin-bottom: 20px; border: 1px solid var(--line);
  background: linear-gradient(120deg, #2a0a08 0%, var(--surface) 70%); background-size: cover; background-position: center; }
.about-hero::after { content: ''; position: absolute; right: -60px; top: 0; bottom: 0; width: 240px; opacity: .14;
  background: repeating-linear-gradient(115deg, var(--accent) 0 14px, transparent 14px 40px); pointer-events: none; }
.about-hero > * { position: relative; z-index: 1; }
.about-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 6px 0 12px; }
.about-lead { max-width: 640px; font-size: 1.08rem; line-height: 1.75; color: #dfe3ea; margin: 0; }

.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 36px; }
.about-stat { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.about-stat b { font: 700 2rem var(--head); line-height: 1; }
.about-stat .unit { font: 600 1rem var(--head); color: var(--muted); }
.about-stat .small { flex-basis: 100%; }

.story { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.story-intro { background: none; border: 0; padding: 0 0 8px; }
.story-intro .prose p { font-size: 1.05rem; line-height: 1.8; margin-top: 0; }
.story.has-cover { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; }
.story.has-cover:nth-of-type(even) .story-cover { order: 2; }
.story-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.story-body h2 { margin-bottom: 10px; }
.story-body .pre { line-height: 1.75; color: #cfd5de; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.story .span-all { grid-column: 1 / -1; }
.about-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.about-gallery figure { position: relative; overflow: hidden; border-radius: 8px; }
.about-gallery img { border-radius: 0; transition: transform .35s ease; }
.about-gallery figure:hover img { transform: scale(1.05); }
.about-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 10px 8px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); font-size: .85rem; }

.season-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 36px; }
.season-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.season-card.now { border-color: var(--accent); background: linear-gradient(120deg, #2a0a08, var(--surface) 60%); }
.season-code { font: 700 1.5rem var(--head); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 12px; transform: skewX(-10deg); }
.season-card.now .season-code { background: var(--accent); border-color: var(--accent); color: #fff; }
.accent-text { color: var(--accent-2); }

.tl { list-style: none; padding: 0; margin: 8px 0 40px; position: relative; }
.tl::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px);
  background: linear-gradient(var(--accent), var(--line) 85%); }
.tl-item { position: relative; width: 50%; padding: 0 36px 24px 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 24px 36px; }
.tl-item::before { content: ''; position: absolute; top: 22px; right: -7px; width: 12px; height: 12px; background: var(--accent);
  transform: rotate(45deg); box-shadow: 0 0 0 4px var(--bg); }
.tl-item:nth-child(even)::before { right: auto; left: -7px; }
.tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; }
.tl-card:hover { border-color: #4a525e; }
.tl-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tl-body { padding: 14px 18px 16px; }
.tl-body h3 { margin: 2px 0 6px; }
.tl-body p { margin: 0; }
.tl-year { font: 700 1.35rem var(--head); color: var(--accent-2); letter-spacing: .03em; }

.about-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 32px; margin-bottom: 24px;
  border-radius: var(--radius); border: 1px solid #6b1f1b; background: linear-gradient(120deg, #3a0c09, var(--surface) 75%); }
.about-cta h2 { margin-bottom: 6px; }
.about-cta p { margin: 0; color: #dfe3ea; }

@media (max-width: 760px) {
  .about-hero { min-height: 260px; padding: 32px 20px; }
  .story.has-cover { grid-template-columns: 1fr; }
  .story.has-cover:nth-of-type(even) .story-cover { order: 0; }
  .tl::before { left: 7px; }
  .tl-item, .tl-item:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 20px 30px; }
  .tl-item::before, .tl-item:nth-child(even)::before { left: 1px; right: auto; }
  .about-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}
.about-hero.has-image::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.78) 45%, rgba(8,9,11,.2) 100%); }
.about-gallery img { aspect-ratio: 16 / 10; }
.tl-card img { aspect-ratio: 2 / 1; }
.season-card .badge { margin-left: 6px; }

/* member area: my work card */
.my-work { margin-bottom: 18px; }
.my-work-head { display: flex; gap: 20px; align-items: center; }
.my-work h2 { margin: 0; font-size: 1.2rem; }
.my-work .bar { margin: 8px 0; }
.ring { --p: 0; flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring::before { content: ''; grid-area: 1 / 1; width: 76px; height: 76px; border-radius: 50%; background: var(--surface); }
.ring b { grid-area: 1 / 1; position: relative; font: 700 1.35rem var(--head); }
.my-work-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--muted); }
.my-work-stats b { color: var(--text); font-family: var(--head); }
.my-work-stats .neg b, .my-work-stats .neg { color: var(--neg); }
.warn-text, .warn-text b { color: var(--warn) !important; }
.my-work-list { list-style: none; padding: 0; margin: 16px 0 8px; border-top: 1px solid var(--line); }
.my-work-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.my-work-list .bar { margin: 6px 0 0; }
.my-work-list .pct { font-family: var(--head); margin-left: 6px; }
.clamp1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .my-work-head { flex-direction: column; align-items: flex-start; } }
/* announcement bar scrolls right-to-left; two identical groups make the loop seamless */
.announce { overflow: hidden; padding: 8px 0; white-space: nowrap; }
.announce-track { display: flex; width: max-content; animation: announce-scroll 28s linear infinite; }
.announce:hover .announce-track { animation-play-state: paused; }
.announce-group { display: flex; flex-shrink: 0; min-width: 100vw; justify-content: space-around; }
.announce-group span { padding: 0 48px; }
.announce-group span::after { content: '◆'; font-size: .6em; opacity: .6; margin-left: 96px; vertical-align: middle; }
@keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; width: auto; justify-content: center; }
  .announce-group + .announce-group, .announce-group span + span { display: none; }
  .announce-group span::after { display: none; }
}

.announce { display: block; color: #fff; }
a.announce:hover { text-decoration: none; filter: brightness(1.1); }
.announce-static { display: block; text-align: center; padding: 0 16px; white-space: normal; }
.announce-yellow { background: var(--warn); color: #1a1200; }
.announce-blue { background: #1f5fd1; }
.announce-dark { background: #000; border-bottom: 1px solid var(--line); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.task-note { flex: 1 1 220px; }
.task-history summary { cursor: pointer; }
.task-history ul { margin: 6px 0 0; }
.log-note { color: var(--text); margin-top: 2px; }

/* season membership badges */
.season-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.season-badges .badge { font-family: var(--head); font-weight: 600; padding: 1px 7px; }
.badge.season.now { background: var(--accent); border-color: var(--accent); color: #fff; }
.badge.position { color: #7fd1ff; border-color: #1f4a6b; }
.season-checks { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.season-check { display: flex; align-items: center; gap: 8px; }

/* project tasks: one card per task, several people responsible */
.task-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.task-item { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.task-item.mine { border-left: 3px solid var(--accent); }
.task-item .bar { margin: 2px 0; }
.task-pct { font: 700 1.4rem var(--head); }
.assignees { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: .8rem; padding: 2px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.chip.me { border-color: var(--accent); color: #fff; background: #3a0c09; }
.task-progress { margin-top: 4px; }
.task-manage summary { cursor: pointer; color: var(--muted); }
.task-manage .form { margin-top: 10px; }
.assignee-picks { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; }
.assignee-picks legend { padding: 0 6px; }

.dir-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.dir-filter input[name="q"] { grid-column: 1 / -1; }

.placement-hint { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--accent); font-size: .92rem; }
.placement-hint:empty { display: none; }
.chip-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-nav a { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); font-size: .9rem; }
.chip-nav a:hover { text-decoration: none; border-color: var(--muted); }
.chip-nav a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-grid .news-card .row { margin-bottom: 4px; }
.more-news { margin: 16px 0 8px; }

/* permissions */
.reader-picker { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; }
.reader-picker summary { cursor: pointer; }
.reader-picker .reader-filter { width: 100%; margin: 6px 0; }
.reader-list { max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.reader-list [hidden] { display: none; }
.perm-group { font-size: .95rem; margin: 14px 0 6px; color: var(--muted); }
.perm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.perm-row select { flex: 0 0 150px; }
.perm-row.custom span { color: var(--text); font-weight: 600; }
.badge.perm { color: #ffc15e; border-color: #6b4a12; }
.perm-matrix td.c, .perm-matrix th.c { text-align: center; }
.perm-matrix tr.group td { background: var(--surface-2); }

/* avatars */
.avatar { --s: 32px; --h: 0; width: var(--s); height: var(--s); flex: 0 0 var(--s); border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; vertical-align: middle; font: 700 calc(var(--s) * .45) var(--head); color: #fff;
  background: hsl(var(--h) 45% 32%); border: 1px solid var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me .avatar { margin-right: 2px; }
.avatar-edit { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.avatar-edit form { margin: 0 0 6px; }
.avatar-edit label.btn { cursor: pointer; }
.dir-person { display: inline-flex; gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip .avatar { margin-left: -6px; }
.user-head { align-items: center; margin-bottom: 8px; }
.user-head h1 { margin: 0; }
/* header: more menu items + avatar — keep one line on desktop, switch to the burger menu earlier */
.nav-links, .nav-user { flex-wrap: nowrap; gap: 14px; white-space: nowrap; }
.nav-in { gap: 18px; }
.me { display: inline-flex; align-items: center; gap: 6px; }
.me .me-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1101px) { .me .badge { display: none; } }
@media (max-width: 1100px) {
  .nav-burger { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; padding: 8px; }
  .nav-burger span { width: 22px; height: 2px; background: var(--text); }
  .nav-menu { display: none; position: absolute; top: 63px; left: 0; right: 0; background: #000; flex-direction: column; align-items: stretch; padding: 16px; border-bottom: 3px solid var(--accent); z-index: 20; }
  .nav-toggle:checked ~ .nav-menu { display: flex; }
  .nav-links, .nav-user { flex-direction: column; align-items: flex-start; gap: 12px; }
  .me .me-name { max-width: none; }
}

/* checkout delivery choice */
.delivery-choice { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.delivery-choice legend { font-weight: 600; margin-bottom: 6px; }
.delivery-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.delivery-opt:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
[data-for-delivery][hidden] { display: none; }
.badge.pickup { color: #7fd1ff; border-color: #1f4a6b; }
.form .delivery-opt { flex-direction: row; align-items: flex-start; }
.delivery-opt input[type=radio] { width: auto; flex: 0 0 auto; margin: 4px 0 0; accent-color: var(--accent); }

/* pre-order */
.badge.preorder { color: #fff; background: #6d28d9; border-color: #6d28d9; font-weight: 700; letter-spacing: .04em; }
.preorder-info { color: #c4b5fd; margin: 4px 0; }
.preorder-fields { border: 1px solid #4c1d95; border-radius: 8px; padding: 10px 14px; }
.preorder-fields legend { padding: 0 6px; }

.ship-address { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ship-address legend { padding: 0 6px; font-weight: 600; }
.ship-address[hidden], .order-sum [hidden], button[data-for-delivery][hidden] { display: none; }
.order-sum { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }

/* product page */
.product-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-bottom: 20px; align-items: start; }
.thumb.big { aspect-ratio: 1; border-radius: var(--radius); }
.thumb.big img { width: 100%; height: 100%; object-fit: cover; }
.price.big { font-size: 1.8rem; margin: 6px 0 12px; }
.buy-row { margin: 12px 0 6px; flex-wrap: wrap; }
.product-details h2 { margin-bottom: 10px; }
.size-chart { max-width: 100%; border-radius: 8px; display: block; }
a.thumb { display: grid; }
.plain-link { color: var(--text); }
@media (max-width: 760px) { .product-page { grid-template-columns: 1fr; gap: 16px; } }

/* product options */
.variant-editor { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.variant-editor legend { padding: 0 6px; }
.variant-editor .option-name { max-width: 260px; }
.variant-table input:not(.qty), .variant-table select { width: 100%; }
.variant-table td { padding: 4px 6px 4px 0; }
.variant-table tr[hidden] { display: none; }
.option-pick { border: 0; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.option-pick legend { font-weight: 600; margin-bottom: 8px; }
.option-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; min-width: 72px; }
.option-chip input { width: auto; accent-color: var(--accent); }
.option-chip:has(input:checked) { border-color: var(--accent); background: #3a0c09; }
.option-chip.out { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.option-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.option-chips .chip { font-size: .75rem; padding: 1px 8px; }
.option-chips .chip.out { opacity: .4; text-decoration: line-through; }
.buy-form { margin: 8px 0; }
.qty-note { display: inline-block; min-width: 70px; }

.option-qty { border: 0; padding: 0; margin: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.option-qty legend { font-weight: 600; margin-bottom: 8px; }
.option-row { display: grid; grid-template-columns: 1fr auto 80px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.option-row:has(input:not([value="0"]):valid) { border-color: var(--line); }
.option-row.out { opacity: .45; }
.option-row .qty { width: 80px; }
.preorder-fields legend label, .form .preorder-fields legend label { display: flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.preorder-fields input[type=checkbox] { width: auto; }
.form label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form label.check input { width: auto; flex: 0 0 auto; }

/* site visibility */
.access-banner { background: #1e1b4b; color: #c7d2fe; text-align: center; padding: 6px 16px; font-size: .88rem; border-bottom: 1px solid #312e81; }
.access-banner a { color: #fff; text-decoration: underline; }
.closed-page { max-width: 560px; margin: 40px auto; }
.closed-page .card { padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.closed-icon { font-size: 3rem; }

/* colours */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 99px; padding: 4px 12px 4px 5px; cursor: pointer; font: inherit; font-size: .88rem; }
.swatch span, .swatch-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(255,255,255,.35); display: inline-block; vertical-align: middle; }
.swatch.on { border-color: var(--accent); }
.color-group { margin: 10px 0 2px; }
.color-editor { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; }
.swatch-input { width: 44px; height: 32px; padding: 0; border: 0; background: none; }
.option-chips .swatch-dot { width: 14px; height: 14px; }

/* team org chart: leaders on top, one column per department (5-7 fit side by side) */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 12px; }
.org-level { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.org-level-label { font: 600 .8rem var(--head); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.org-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.org-line { width: 2px; height: 22px; background: var(--line); }
.org-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
.org-card.lead { border-color: var(--accent); background: linear-gradient(120deg, #2a0a08, var(--surface) 70%); padding: 12px 18px; }
.org-card.head { border-color: #6b4a12; }
.org-card.deputy { border-style: dashed; }
.org-card.empty { justify-content: center; border-style: dashed; }
.org-card b { display: block; overflow-wrap: anywhere; }
.org-pos { color: var(--accent-2); }
.org-depts { --n: 6; width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(150px, 1fr)); gap: 12px; position: relative; padding-top: 22px; overflow-x: auto; }
/* horizontal bar joining the department columns, with a short drop to each */
.org-depts::before { content: ''; position: absolute; top: 0; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--line); }
.org-dept { position: relative; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.org-dept::before { content: ''; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: var(--line); }
.org-dept-name { font-size: .95rem; text-align: center; margin: 0 0 2px; }
.org-members { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.org-members li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.org-members.inline { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.org-count { text-align: center; margin-top: auto; }
.org-unassigned { width: 100%; margin-top: 16px; }
.season-picker a { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--text); }
.season-picker a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 1000px) {
  .org-depts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-top: 0; }
  .org-depts::before, .org-dept::before { display: none; }
}
@media (max-width: 520px) { .org-depts { grid-template-columns: 1fr; } }

.team-section { margin-top: 28px; }
.team-section .dir-filter { grid-template-columns: 2fr 1fr 1fr auto; }
@media (max-width: 700px) { .team-section .dir-filter { grid-template-columns: 1fr 1fr; } }
/* ===== org tree (v2): every person is a box, joined by lines ===== */
.orgtree { --line-c: #4a525e; --n: 6; display: flex; flex-direction: column; align-items: center; margin: 16px 0 8px; overflow-x: auto; padding-bottom: 8px; }
.orgtree .tier { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.orgtree .tier-label { font: 600 .72rem var(--head); letter-spacing: .08em; color: var(--muted); }
.tier-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tier-row.left { justify-content: flex-start; margin-top: 8px; }
.orgtree .stem { width: 2px; height: 24px; background: var(--line-c); }
.node { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px 7px 8px; text-align: left; position: relative; }
.node .node-text { display: flex; flex-direction: column; min-width: 0; }
.node b { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.node .node-pos { font-size: .75rem; color: var(--accent-2); line-height: 1.2; }
.node.lead { border: 2px solid var(--accent); background: linear-gradient(120deg, #3a0c09, var(--surface) 75%); padding: 10px 18px 10px 10px; }
.node.lead b { font-size: 1.05rem; }
.node.core { border-color: #7a1f1a; }
.node.head { border: 2px solid #b7791f; background: linear-gradient(120deg, #2b1d05, var(--surface) 80%); }
.node.deputy { border-style: dashed; border-color: #b7791f; }
.node.vacant { color: var(--muted); font-size: .8rem; justify-content: center; border-style: dashed; padding: 12px; }
/* bar across all departments + a drop into each */
.branches { display: grid; grid-template-columns: repeat(var(--n), minmax(160px, 1fr)); gap: 14px; width: 100%; min-width: calc(var(--n) * 160px); position: relative; padding-top: 22px; }
.branches::before { content: ''; position: absolute; top: 0; height: 2px; background: var(--line-c); left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); }
.branch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.branch::before { content: ''; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: var(--line-c); }
.dept-tag { font: 700 .82rem var(--head); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; margin-bottom: 8px; text-align: center; }
.branch > .tier-row, .branch > .node { width: 100%; }
.branch > .tier-row .node { flex: 1 1 100%; }
/* members hang off a vertical spine under the head */
.leaves { list-style: none; margin: 0; padding: 12px 0 0 18px; width: 100%; position: relative; }
.leaves::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 18px; width: 2px; background: var(--line-c); }
.leaves li { position: relative; margin-bottom: 8px; }
.leaves li::before { content: ''; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px; background: var(--line-c); }
.leaves .node { width: 100%; }
.branch-count { font-size: .75rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) {
  .branches { grid-template-columns: 1fr; min-width: 0; padding-top: 0; gap: 18px; }
  .branches::before, .branch::before { display: none; }
  .branch { border-left: 2px solid var(--line-c); padding-left: 10px; align-items: stretch; }
}
/* fit 7 departments across a 1100px page */
.branches { grid-template-columns: repeat(var(--n), minmax(124px, 1fr)); gap: 10px; min-width: calc(var(--n) * 124px + (var(--n) - 1) * 10px); }
.branch .node { padding: 6px 8px 6px 6px; gap: 6px; }
.branch .node b { font-size: .84rem; }
.branch .node .node-pos { font-size: .7rem; }
.dept-tag { font-size: .76rem; padding: 3px 8px; }
.leaves { padding-left: 14px; }
.leaves::before { left: 5px; }
.leaves li::before { left: -9px; width: 9px; }
@media (max-width: 760px) {
  .branches { grid-template-columns: 1fr; min-width: 0; padding-top: 0; gap: 18px; }
  .branches::before, .branch::before { display: none; }
  .branch { border-left: 2px solid var(--line-c, #4a525e); padding-left: 10px; align-items: stretch; }
  .dept-tag { align-self: flex-start; }
  .orgtree { overflow-x: visible; align-items: stretch; }
  .orgtree .tier { align-items: center; }
}
.orgtree { max-width: 100%; }
.nick { font-weight: 500; color: var(--muted); }
.node .nick { color: #ffd08a; }

/* bank transfer box on the pay page */
.bank-box { text-align: left; margin-top: 4px; }
.bank-box.with-qr { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.bank-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; margin: 12px 0; }
.bank-info dt { color: var(--muted); font-size: .9rem; }
.bank-info dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bank-info .acct { font: 700 1.3rem var(--head); letter-spacing: .04em; }

/* treasury: where the money is */
.treasury { margin-bottom: 18px; }
.treasury-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.treasury-card { display: flex; flex-direction: column; gap: 3px; margin: 0; color: var(--text); border-top: 3px solid var(--line); }
a.treasury-card:hover { text-decoration: none; border-color: var(--muted); }
.treasury-card.on { border-color: var(--accent); }
.treasury-card.kind-bank { border-top-color: #2563eb; }
.treasury-card.kind-cash { border-top-color: #16a34a; }
.treasury-card.kind-department { border-top-color: #d97706; }
.treasury-card.total { border-top-color: var(--accent); background: linear-gradient(120deg, #2a0a08, var(--surface) 70%); }
.treasury-card.off { opacity: .55; }
.treasury-name { font-size: 1rem; }
.treasury-bal { font: 700 1.45rem var(--head); }
.acct-line { color: #93c5fd; }
.recon { margin: -4px 0 12px; }

.carry-line { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 12px 18px; }
.carry-line b { font-family: var(--head); }

.shared-banner { background: #1e1b4b; color: #c7d2fe; border: 1px solid #312e81; border-radius: 8px; padding: 8px 14px; margin-bottom: 16px; font-size: .9rem; }
[data-share-for][hidden] { display: none; }
.small-b { font-size: 1.05rem !important; }
.role-advisor { color: #a7f3d0; border-color: #065f46; }

/* bulk order status */
.bulk-bar { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-color: var(--accent); }
.bulk-bar input[name="note"] { flex: 1 1 220px; }
.bulk-pick { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; margin-top: 4px; }
.order-head { align-items: flex-start; }
.tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }

.pos-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pos-chip { display: inline-flex; gap: 2px; align-items: center; margin: 0; }
.pos-add summary { cursor: pointer; color: var(--accent-2); }
.pos-add form { margin-top: 6px; }

.badge.stage { color: #fde68a; border-color: #854d0e; }
.stage-form select { max-width: 220px; }
.order-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (max-width: 700px) { .order-actions { align-items: stretch; } }

.expiry-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.expiry-pick > label { flex: 1 1 180px; }
.expiry-edit { margin-top: 4px; }
[data-expiry-custom][hidden] { display: none !important; }
.expiry-edit form { margin-top: 6px; }

/* document folders */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 12px; }
.folder-bar { margin-bottom: 12px; align-items: flex-start; }
.folder-new > summary { list-style: none; cursor: pointer; }
.folder-new > summary::-webkit-details-marker { display: none; }
.folder-new[open] > summary { border-color: var(--accent); }
.folder-new .card { margin-top: 8px; min-width: min(360px, 100%); }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.folder-card { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; padding: 14px 16px; }
.folder-card:hover { border-color: var(--accent); }
.folder-card .grow { display: flex; flex-direction: column; min-width: 0; }
.folder-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-icon { font-size: 1.8rem; line-height: 1; }

/* finished products */
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.archive-card { display: grid; gap: 10px; align-content: start; margin: 0; }
.archive-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.archive-stats > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: grid; }
.archive-stats b { font: 700 1.05rem var(--head); font-variant-numeric: tabular-nums; }
.warn-text { color: var(--warn); }

/* ---------- sponsors ---------- */
.sp-logo { display: grid; place-items: center; padding: 10px 14px; border-radius: 8px; }
.sp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sp-style-white .sp-logo img, .sp-wall.sp-style-white img { filter: brightness(0) invert(1); }
.sp-style-gray .sp-logo img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.sp-style-gray a.sp-logo:hover img { filter: none; opacity: 1; }
.sp-style-plate .sp-logo { background: #fff; }
.sp-wall.sp-style-plate span { background: #fff; border-radius: 6px; padding: 6px 10px; }
.sp-wall.sp-style-gray img { filter: grayscale(1); }
a.sp-logo:hover { text-decoration: none; background: var(--surface-2); }
.sp-style-plate a.sp-logo:hover { background: #fff; box-shadow: 0 0 0 2px var(--accent-2); }

.sponsors { margin: 40px 0; display: grid; gap: 18px; }
.sp-intro { margin: -6px 0 0; }
.sp-tier { display: grid; gap: 10px; }
.sp-tier-title { font: 600 .8rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.sp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sp-grid .sp-logo { height: 80px; background-color: var(--surface); border: 1px solid var(--line); }
.sp-style-plate .sp-grid .sp-logo { background: #fff; }
.sp-tier-0 .sp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sp-tier-0 .sp-grid .sp-logo { height: 130px; }
.sp-tier-1 .sp-grid .sp-logo { height: 100px; }
.sp-tier-3 .sp-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sp-tier-3 .sp-grid .sp-logo { height: 64px; }
.sp-grid.named { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-card { display: grid; gap: 6px; text-align: center; }

.sp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-track { display: flex; width: max-content; animation: sp-scroll 60s linear infinite; }
.sp-marquee:hover .sp-track { animation-play-state: paused; }
.sp-group { display: flex; flex-shrink: 0; gap: 18px; padding-right: 18px; align-items: center; }
.sp-group .sp-logo { height: 72px; width: 160px; }
.small-logos .sp-group .sp-logo { height: 40px; width: 100px; padding: 4px 8px; }
@keyframes sp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.foot-sponsors { border-bottom: 1px solid var(--line); padding: 14px 0; }
.foot-sponsors .wrap { display: grid; gap: 8px; }
.sp-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sp-strip .sp-logo { height: 40px; width: 96px; padding: 4px 6px; }

/* decorative logo walls */
.sp-wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: var(--sp-op, .18); }
.sp-wall-fixed { position: fixed; z-index: -1; }
.sp-wall-in { position: absolute; inset: 0; }
.sp-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 34px; padding: 18px; }
.sp-wall-grid span { height: 54px; display: grid; place-items: center; }
.sp-wall-grid img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-wall-grid span:nth-child(2n) { transform: translateX(40px); }
.sp-wall-tilt .sp-wall-in { inset: -40% -20%; transform: rotate(-14deg); }
.sp-wall-drift .sp-wall-in { inset: auto 0; top: 0; animation: sp-drift 90s linear infinite; }
@keyframes sp-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.sp-wall-faint.sp-wall-fixed .sp-wall-grid, .sp-wall-drift.sp-wall-fixed .sp-wall-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 60px 70px; }
.hero.has-wall { background: #0a0b0d; }
.hero.has-wall::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.72) 45%, rgba(10,11,13,.3) 100%); }
.hero > :not(.sp-wall) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sp-track, .sp-wall-drift .sp-wall-in { animation: none; }
  .sp-track { flex-wrap: wrap; width: auto; }
  .sp-group + .sp-group { display: none; }
}

/* admin */
.sp-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.sp-admin { margin: 0; display: grid; gap: 10px; align-content: start; }
.sp-preview { display: grid; grid-template-columns: 1fr 1fr; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sp-preview span { height: 70px; display: grid; place-items: center; padding: 8px; }
.sp-preview .light { background: #fff; }
.sp-preview .dark { background: #0a0b0d; }
.sp-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* sponsor logo sizing: balanced box from the logo's aspect ratio (see sponsors.fitStyle) */
.sp-logo img, .sp-wall-grid img, .sp-preview img { max-width: var(--lw, 100%); max-height: var(--lh, 100%); }
.sp-meta { margin: -4px 0 0; }
.logo-prep { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; margin: 0; }
.logo-prep legend { padding: 0 4px; color: var(--muted); }

/* crop / adjust dialog */
.img-editor { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; }
.img-editor::backdrop { background: rgba(0,0,0,.7); }
.img-editor-in { display: grid; gap: 12px; padding: 18px; }
.img-editor h2 { margin: 0; }
.img-editor-stage { display: grid; place-items: center; background: var(--bg); border-radius: 8px; padding: 10px; overflow: auto; }
.img-editor-stage canvas { max-width: 100%; height: auto; touch-action: none; cursor: crosshair; border-radius: 4px; }
.img-editor-tools { display: grid; gap: 10px; }
.img-editor-tools label { display: grid; gap: 4px; }
.img-edit-pick { margin-top: 6px; justify-self: start; }

/* ---------- responsive safety net (phones 320px and up) ---------- */
/* Grid/flex children may shrink below their content (otherwise one wide table or form widens the whole page). */
.grid > * { min-width: 0; }
input, select, textarea, button, img, video, canvas { max-width: 100%; }
/* Any table not already in a scrolling box scrolls on its own instead of pushing the page sideways. */
main :has(> table):not(.scroll-x):not(table):not(tbody):not(thead):not(tr) { overflow-x: auto; }
.filters > * { max-width: 100%; }
@media (max-width: 520px) {
  .filters > input, .filters > select, .filters > .grow { flex: 1 1 100%; }
  .wrap { padding: 0 12px; }
  .card { padding: 16px; }
  h1.page { font-size: 1.5rem; }
  .tabs { gap: 2px; }
  .tabs a { padding: 8px 10px; font-size: .9rem; }
}
.dir-filter > * { min-width: 0; }
.dir-person { min-width: 0; }
@media (max-width: 520px) {
  .row.gap { flex-wrap: wrap; }
  .team-section .dir-filter, .dir-filter { grid-template-columns: 1fr; }
  ul.plain > li.row.between { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 520px) {
  /* admin tabs: one swipeable row instead of four wrapped lines */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  /* products two per row on phones */
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.four .card.product { padding: 10px; }
  .grid.four .card.product h3 { font-size: .9rem; }
}
@media (max-width: 340px) { .grid.four { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  /* table.stack: each row becomes a block on phones */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  table.stack td { border: 0; padding: 4px 0; }
  table.stack td.nowrap { white-space: normal; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
}
/* Sponsor logos: flex (not grid) boxes, so the percentage max-height resolves against the box's fixed height
   and large source images can't grow past it. */
.sp-logo, .sp-wall-grid span, .sp-preview span { display: flex; align-items: center; justify-content: center; }
.sp-logo img, .sp-wall-grid img, .sp-preview img { width: auto; height: auto; flex: 0 1 auto; object-fit: contain; }
.sp-wall-grid span { overflow: hidden; }
@media (max-width: 520px) {
  .sp-wall-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 22px; padding: 12px; }
  .sp-wall-faint.sp-wall-fixed .sp-wall-grid, .sp-wall-drift.sp-wall-fixed .sp-wall-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 36px 30px; }
  .sp-wall-grid span { height: 40px; }
  .sp-wall-grid span:nth-child(2n) { transform: translateX(20px); }
}

/* web-app icon card */
.app-icon-now { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ai-prev { width: 72px; height: 72px; }
.ai-round { border-radius: 22%; }
.ai-circle { border-radius: 50%; }
.app-icon-previews { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.app-icon-previews figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.app-icon-previews canvas { width: 120px; height: 120px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
/* footer: solid ground so the sponsor background never shows behind its text */
.foot { position: relative; z-index: 0; background: #0a0b0d; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.foot-sponsors { margin-top: -24px; margin-bottom: 20px; background: #0d0f12; }
.foot-sponsors .muted.small { font: 600 .72rem var(--head); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 700px) {
  .foot-in { flex-direction: column; gap: 14px; }
  .foot-brand { align-items: flex-start; }
  .foot-logo { width: 52px; height: 52px; }
  .foot-contact { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
  .foot-contact .row.gap { gap: 8px 16px; }
  .foot-sponsors .small-logos .sp-group .sp-logo { height: 44px; width: 104px; }
}
/* iPhone notch / status bar / home indicator (viewport-fit=cover) */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 520px) { .wrap { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } }
/* Sponsor logo boxes: 2 : 1 everywhere */
.sp-grid .sp-logo, .sp-tier-0 .sp-grid .sp-logo, .sp-tier-1 .sp-grid .sp-logo, .sp-tier-3 .sp-grid .sp-logo { height: auto; aspect-ratio: 2 / 1; }
.sp-group .sp-logo { width: 160px; height: 80px; }
.small-logos .sp-group .sp-logo, .sp-strip .sp-logo { width: 96px; height: 48px; }
.sp-wall-grid span, .sp-preview span { height: auto; aspect-ratio: 2 / 1; }
@media (max-width: 520px) {
  .sp-group .sp-logo { width: 128px; height: 64px; }
  .foot-sponsors .small-logos .sp-group .sp-logo { width: 96px; height: 48px; }
  .sp-wall-grid span { height: auto; }
}
@media (max-width: 520px) {
  /* phones: several logos per row (top tier 2, others 3, smallest 4) */
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sp-tier-0 .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-tier-3 .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-grid .sp-logo { padding: 6px 8px; }
  .sp-grid.named { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* per-logo plates (sponsors.plate) — win over the site-wide logo colour style */
.sp-logo.sp-plate-white, .sp-wall-grid span.sp-plate-white { background: #fff !important; }
.sp-logo.sp-plate-light, .sp-wall-grid span.sp-plate-light { background: #f1f2f4 !important; }
.sp-logo.sp-plate-dark, .sp-wall-grid span.sp-plate-dark { background: #0a0b0d !important; }
.sp-wall-grid span[class^="sp-plate-"] { border-radius: 6px; padding: 4px 8px; }
.sp-logo[class*="sp-plate-"] img, .sp-wall-grid span[class^="sp-plate-"] img { filter: none !important; opacity: 1 !important; }
.sp-prev-plate-white span { background: #fff !important; }
.sp-prev-plate-light span { background: #f1f2f4 !important; }
.sp-prev-plate-dark span { background: #0a0b0d !important; }
.sp-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; }
/* phone/tablet menu: hang below the whole header (whatever its safe-area padding), scroll if long, burger turns into ✕ */
@media (max-width: 1100px) {
  .nav-menu { top: 100%; max-height: calc(100dvh - 100% - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
  .nav-menu a, .nav-menu .link { padding: 4px 0; }
  .nav-burger { position: relative; z-index: 21; width: 40px; height: 40px; justify-content: center; align-items: center; }
  .nav-burger span { transition: transform .2s, opacity .2s; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Native controls (date/time pickers, number spinners, scrollbars, select arrows) in dark mode so their icons show */
:root { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { opacity: .85; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* marquees: hold still while being touched or focused so a logo can be tapped */
.sp-marquee:active .sp-track, .sp-marquee:focus-within .sp-track { animation-play-state: paused; }
.sp-marquee a.sp-logo { -webkit-tap-highlight-color: transparent; }

/* crop dialog: zoom row and result preview */
.img-editor-zoom { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.img-editor-zoom label.grow { display: grid; gap: 4px; flex: 1 1 200px; }
.img-editor-out { margin: 0; display: grid; justify-items: center; gap: 4px; }
.img-editor-out canvas { max-width: 96px; max-height: 96px; border-radius: 6px; background: repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 12px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.img-editor-out canvas.round { border-radius: 50%; }
.img-editor-stage { max-height: 60vh; }
/* org chart: cards never wider than their department column */
.branch { min-width: 0; }
.branch > .tier-row { display: flex; min-width: 0; max-width: 100%; }
.branch .node, .leaves .node { min-width: 0; max-width: 100%; box-sizing: border-box; }
.branch .node .node-text { flex: 1 1 auto; min-width: 0; }
.branch .node b, .branch .node .node-pos { overflow-wrap: anywhere; word-break: break-word; }
.branch .node .avatar { --s: 32px !important; }
.branch .dept-tag { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
/* document preview page */
.preview-head { align-items: flex-start; }
.preview-box { padding: 12px; display: grid; place-items: center; min-height: 240px; }
.preview-box img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.preview-box iframe { width: 100%; height: 80vh; border: 0; border-radius: 6px; background: #fff; }
.preview-box video { width: 100%; max-height: 80vh; border-radius: 6px; background: #000; }
.preview-text { width: 100%; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .85rem; background: var(--bg); padding: 14px; border-radius: 6px; margin: 0; }
.stl-view { width: 100%; display: grid; gap: 6px; }
.stl-view canvas { width: 100%; height: 60vh; min-height: 300px; border-radius: 6px; cursor: grab; touch-action: none; }
.file-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex: none; border: 1px solid var(--line); }
@media (max-width: 520px) { .preview-box iframe { height: 70vh; } }
/* document preview: PDF / original switch, Excel sheets, Word pages */
.view-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; width: 100%; }
.pdf-view { width: 100%; }
.preview-office { display: block; }
.real-view { width: 100%; display: grid; gap: 8px; }
.real-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.real-body { width: 100%; max-height: 80vh; overflow: auto; background: #fff; color: #111; border-radius: 6px; }
table.sheet { border-collapse: collapse; font: 13px/1.4 Calibri, 'Sarabun', Arial, sans-serif; color: #111; background: #fff; }
table.sheet td { border: 1px solid #d0d4da; padding: 3px 8px; white-space: nowrap; vertical-align: top; min-width: 40px; }
table.sheet tr:first-child td { background: #f1f3f5; font-weight: 600; position: sticky; top: 0; }
.real-body .docx-wrapper { background: #e9ebee; padding: 16px; }
.real-body .docx-wrapper > section.docx { box-shadow: 0 2px 10px rgba(0,0,0,.2); margin-bottom: 16px; }

/* settings: recently removed pictures */
.img-trash { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -4px 0 10px; }
.img-trash-item { display: inline-flex; gap: 6px; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 4px 8px; }
.img-trash-item img { height: 36px; max-width: 90px; object-fit: cover; border-radius: 4px; }

/* image editor buttons next to file inputs */
.img-edit-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.img-edit-bar:empty { display: none; }
.img-edit-bar .img-edit-pick { margin-top: 6px; }