html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }
.file-nav { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--ds-hairline); }
.file-nav a { padding: 10px 0; color: var(--ds-ink-2); text-decoration: none; }
.file-nav a[aria-current="page"] { color: var(--ds-ink); box-shadow: inset 0 -1px 0 var(--ds-ink); }
@media (max-width: 600px) { .file-nav a { display: inline-flex; align-items: center; min-height: 44px; } }

.unit .sub { color: var(--ds-ink-2); font-size: 15px; margin: 4px 0 14px; }
.hero h1 { margin: 10px 0 6px; font-size: 24px; color: #0f3b66; }
.legend { font-size: 13px; color: #475569; background: #f4f8f7; border-radius: 14px; padding: 10px 14px; line-height: 2; }

.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.subnav a { background: #e8f0fb; color: #1d4ed8; text-decoration: none; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.subnav a:hover { background: #d7e6fa; }

.badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; display: inline-block; }
.badge.bad { background: #fee2e2; color: #b91c1c; }
.badge.fix { background: #fef3c7; color: #b45309; }
.badge.guess { background: #ede9fe; color: #6d28d9; }
.noteflag { font-size: 12px; color: #b91c1c; }
.like { font-size: 12px; background: #e0f2fe; color: #0369a1; border-radius: 999px; padding: 2px 10px; }

/* portal */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 8px; }
.folder { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--ds-hairline); border-top: 5px solid #0d9488; border-radius: 18px; padding: 18px; text-decoration: none; color: inherit; }
.folder:hover { background: #fbfefd; }
.folder.soon { border-top-color: #cbd5e1; color: #94a3b8; }
.ftitle { font-weight: 700; font-size: 17px; color: #0f3b66; }
.fmeta { font-size: 13.5px; color: #64748b; }
.ftag { align-self: flex-start; font-size: 12px; background: #d7ebe7; color: #0d6e63; border-radius: 999px; padding: 2px 10px; }

/* chat */
.filter { width: 100%; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #dbe3ee; font-size: 15px; margin-bottom: 8px; font-family: inherit; background: #f8fafc; }
.chatcount { font-size: 12px; color: #94a3b8; margin-bottom: 10px; }
.row { display: flex; margin: 8px 0; }
.row.u { justify-content: flex-start; }
.row.a { justify-content: flex-end; }
.bubble { max-width: 85%; border-radius: 16px; padding: 10px 14px; font-size: 15px; box-shadow: 0 1px 2px rgba(30,41,59,.06); overflow-wrap: anywhere; }
.bubble.u { background: #dcf6d5; border-bottom-left-radius: 4px; }
.bubble.a { background: #ffffff; border: 1px solid #e6ebf2; border-bottom-right-radius: 4px; }
.meta { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.bubble.u .meta b { color: #166534; }
.bubble.a .meta b { color: #1d4ed8; }
.txt { white-space: pre-line; }
.flags { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.msgcap { font-weight: 600; margin-bottom: 4px; }
.imgbtn { border: none; background: none; padding: 0; cursor: zoom-in; display: block; }
.imgbtn img { border-radius: 12px; display: block; width: 100%; }
.imgbtn.msgimg img { max-width: 320px; }
.imgbtn.open { cursor: zoom-out; }
.imgbtn.open img { max-width: 100%; width: 100%; }
.imgzoom-hint { display: block; font-size: 11px; color: #94a3b8; text-align: center; margin-top: 2px; }
.gcard .imgbtn img { height: 170px; object-fit: cover; object-position: top; }
.gcard:has(.imgbtn.open) { grid-column: 1 / -1; }
.gcard .imgbtn.open img { height: auto; max-height: none; }
.imgtitle { font-size: 12px; color: #475569; margin-top: 4px; }
.prob { color: #b45309; }
.imgph { display: inline-block; background: #f1f5f9; border: 1px dashed #94a3b8; color: #475569; border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-top: 6px; }

/* sources */
h3.gsec { color: #0d6e63; font-size: 16px; margin: 18px 0 8px; border-bottom: 2px solid #d7ebe7; padding-bottom: 5px; }
details.src { border: 1px solid #e3e8f0; border-radius: 12px; margin: 8px 0; background: #fbfcfe; }
details.src summary { cursor: pointer; padding: 10px 16px; font-weight: 600; color: #0f3b66; border-radius: 12px; }
details.src summary:hover { background: #eef4fb; }
.stime { font-weight: 400; font-size: 12px; color: #94a3b8; margin-right: 8px; }
.srcbody { padding: 4px 18px 14px; font-size: 14px; color: #334155; white-space: pre-line; }
.srcnote { padding: 0 18px; font-size: 13px; color: #0d6e63; }

/* qa table */
.twrap { overflow-x: auto; }
table.qa { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.qa th, table.qa td { border: 1px solid #e3e8f0; padding: 9px 12px; text-align: right; vertical-align: top; }
table.qa th { background: #eef4fb; color: #0f3b66; }
td.ok { color: #15803d; font-size: 13px; }
td.bad { color: #b91c1c; font-size: 13px; }
td.guess { color: #6d28d9; font-size: 13px; }
tr.badrow td { background: #fff8f6; }
tr.guessrow td { background: #faf8ff; }

/* gallery */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gcard { margin: 0; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; overflow: hidden; }
.gcard figcaption { font-size: 12.5px; color: #475569; padding: 8px 10px; }

.divider { text-align: center; font-size: 13px; font-weight: 700; color: #0d6e63; background: #eef7f4; border-radius: 999px; padding: 6px 14px; margin: 16px 0 10px; }

:root{--ds-page:#f7f8fa;--ds-ink:#0f172a;--ds-ink-2:#475569;--ds-hairline:#e3e8f0;}
*{box-sizing:border-box;}
body{font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--ds-page);color:var(--ds-ink);margin:0;line-height:1.6;}
main{max-width:860px;margin:0 auto;padding:16px;}
.topbar{padding:14px 20px;background:#fff;border-bottom:1px solid var(--ds-hairline);font-size:17px;}
.card{background:#fff;border:1px solid var(--ds-hairline);border-radius:18px;padding:20px;margin:14px 0;}
h1{font-size:26px;margin:6px 0;color:#0f3b66;}
.group h2{font-size:19px;color:#0f3b66;border-bottom:2px solid #d7ebe7;padding-bottom:6px;margin:26px 0 10px;}
.lbimg{cursor:zoom-in;}
@media (max-width:600px){main{padding:10px;}.bubble{max-width:92%;}}
.lbimg{cursor:zoom-in;}.lbimg.open{cursor:zoom-out;}
.gcard .lbimg{display:block;width:100%;height:170px;object-fit:cover;object-position:top;}
.gcard .lbimg.open{width:100%;height:auto;max-height:none;object-fit:contain;}
.gcard:has(.lbimg.open){grid-column:1/-1;}
.gcard,.grid>*{min-width:0;}main{overflow-x:hidden;}.card,.bubble{min-width:0;}
.row>*{min-width:0;}.bubble img{max-width:100%;height:auto;display:block;}
.bubble img.lbimg{max-width:100%;height:auto;border-radius:12px;}
.bubble img.lbimg.msgimg{max-width:min(320px,100%);}
.bubble img.lbimg.msgimg.open{max-width:100%;}