*, *::before, *::after { box-sizing: border-box; }
:root { --navy:#0f1e38; --navy-mid:#1a3056; --blue:#1d6fbf; --blue-lt:#2d8de8; --accent:#f0a500; --success:#177b57; --error:#c93434; --bg:#f4f6fa; --surface:#fff; --surface-soft:#fbfcff; --border:#dce3ef; --text:#1a2438; --muted:#6b7a96; --header:var(--navy); --header-hover:rgba(255,255,255,.08); --on-header:#fff; --on-header-muted:rgba(255,255,255,.68); --logo-sub:rgba(255,255,255,.5); --secondary-btn-bg:#0f1e38; --secondary-btn-hover:#1a3056; --hover-border:#b8cce5; --hover-bg:#eef4fd; --blue-soft:#e8f1fb; --amber-soft:#fef4e0; --amber-text:#9b6900; --ready-bg:#e2f5ec; --ready-text:#116844; --prototype-bg:#fef1d4; --prototype-text:#8a5c00; --planned-bg:#edf0f5; --note-bg:#fffaf0; --notice-bg:#fff4d9; --notice-text:#735000; --success-bg:#edfaf4; --success-border:#9fe0c5; --error-bg:#fdf0f0; --error-border:#f0b8b8; --loading-bg:#eef4fd; --loading-border:#c3d9f5; --shadow:rgba(29,111,191,.12); --font:'Segoe UI',Arial,system-ui,sans-serif; --mono:'Cascadia Mono','SFMono-Regular',Consolas,monospace; color-scheme:light; }
[data-theme="dark"] { --navy:#e7eefc; --navy-mid:#c8d5ec; --blue:#74b7ff; --blue-lt:#9dccff; --accent:#f6bc45; --success:#6ed5aa; --error:#ff8c8c; --bg:#0e1421; --surface:#151d2c; --surface-soft:#111827; --border:#2d3a50; --text:#edf3ff; --muted:#a9b6ca; --header:#08101f; --header-hover:rgba(116,183,255,.16); --on-header:#f8fbff; --on-header-muted:rgba(248,251,255,.72); --logo-sub:rgba(248,251,255,.55); --secondary-btn-bg:#263a59; --secondary-btn-hover:#315070; --hover-border:#4e6686; --hover-bg:#1d2b42; --blue-soft:#18345a; --amber-soft:#3b2b12; --amber-text:#f2c36b; --ready-bg:#123829; --ready-text:#8ce6be; --prototype-bg:#3d2c10; --prototype-text:#f4c76e; --planned-bg:#243044; --note-bg:#2b2417; --notice-bg:#342710; --notice-text:#f0c46c; --success-bg:#123829; --success-border:#2e8b66; --error-bg:#3b1e24; --error-border:#8f4650; --loading-bg:#172b45; --loading-border:#315f92; --shadow:rgba(0,0,0,.34); color-scheme:dark; }
html { font-size:16px; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font-family:var(--font); }
svg { width:20px; height:20px; }
.site-header { min-height:64px; padding:0 2rem; display:flex; align-items:center; gap:1.25rem; position:sticky; top:0; z-index:10; background:var(--header); box-shadow:0 2px 16px rgba(0,0,0,.25); }
.logo { display:flex; align-items:center; gap:.75rem; color:var(--on-header); text-decoration:none; }
.logo-icon { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:8px; background:var(--blue); }
.logo-icon svg { fill:var(--on-header); }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-title { font-size:.95rem; font-weight:600; }
.logo-sub { color:var(--logo-sub); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.header-context { max-width:260px; margin-left:auto; padding-left:1rem; display:flex; flex-direction:column; align-items:flex-end; border-left:1px solid rgba(255,255,255,.14); line-height:1.2; }
.context-org { max-width:100%; overflow:hidden; color:var(--on-header); font-size:.78rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.context-role { max-width:100%; overflow:hidden; color:var(--on-header-muted); font:500 .64rem var(--mono); letter-spacing:.04em; text-transform:uppercase; text-overflow:ellipsis; white-space:nowrap; }
.site-nav { display:flex; flex:none; gap:.25rem; }
.site-nav a { min-height:36px; padding:.55rem .7rem; display:inline-flex; align-items:center; border-radius:6px; color:var(--on-header-muted); font-size:.82rem; font-weight:500; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--on-header); background:var(--header-hover); }
.site-nav a[aria-current="page"] { box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.demo-environment-banner { padding:.45rem 1rem; color:#4d3500; background:#ffd978; text-align:center; font:600 .72rem var(--mono); letter-spacing:.035em; text-transform:uppercase; }
.theme-toggle { display:flex; align-items:center; gap:.5rem; flex:none; color:var(--on-header-muted); font-size:.72rem; font-weight:600; user-select:none; }
.theme-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.theme-toggle-track { width:52px; height:28px; padding:3px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.1); cursor:pointer; transition:.18s ease; }
.theme-toggle-thumb { width:20px; height:20px; border-radius:50%; background:#ffd66f; box-shadow:0 2px 8px rgba(0,0,0,.24); transition:.18s ease; }
.theme-toggle input:checked + .theme-toggle-track { background:#203452; }
.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb { transform:translateX(24px); background:#d7e6ff; }
.theme-toggle input:focus-visible + .theme-toggle-track { outline:3px solid rgba(116,183,255,.45); outline-offset:3px; }
.theme-toggle-label.light { color:var(--on-header); }
.theme-toggle-label.dark { color:var(--on-header-muted); }
[data-theme="dark"] .theme-toggle-label.light { color:var(--on-header-muted); }
[data-theme="dark"] .theme-toggle-label.dark { color:var(--on-header); }
.page-wrap { width:100%; max-width:800px; flex:1; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.page-wrap.wide { max-width:1050px; }
.page-title { margin-bottom:2rem; }
.page-title h1 { margin:.25rem 0 0; color:var(--navy); font-size:1.9rem; line-height:1.2; }
.page-title p { margin:.45rem 0 0; color:var(--muted); font-weight:300; }
.eyebrow { color:var(--blue)!important; font:500 .75rem var(--mono)!important; letter-spacing:.08em; text-transform:uppercase; }
.back-link { display:inline-block; margin-bottom:.75rem; color:var(--blue); font-size:.82rem; text-decoration:none; }
.week-label { display:inline-block; margin-top:.75rem; padding:.3rem .7rem; border-radius:4px; color:var(--blue); background:var(--blue-soft); font:400 .75rem var(--mono); }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.tool-section+.tool-section { margin-top:3rem; padding-top:2.25rem; border-top:1px solid var(--border); }
.tool-section-heading { margin-bottom:1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.tool-section-heading h2 { margin:.2rem 0 0; color:var(--navy); font-size:1.3rem; }
.tool-section-heading p:not(.eyebrow) { max-width:600px; margin:.35rem 0 0; color:var(--muted); font-size:.84rem; line-height:1.5; }
.tool-section-heading>a { flex:none; color:var(--blue); font-size:.82rem; font-weight:600; text-decoration:none; }
.testing-tools .tool-card { background:var(--surface-soft); }
.converter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.converter-launch-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:stretch; }
.converter-launch-grid.data-tool-grid { align-items:stretch; }
.converter-column { min-width:0; display:flex; flex-direction:column; gap:1.25rem; }
.tool-card { min-height:260px; padding:1.6rem; position:relative; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; color:inherit; background:var(--surface); text-decoration:none; transition:.2s ease; }
.tool-card:hover { transform:translateY(-3px); border-color:var(--hover-border); box-shadow:0 10px 28px var(--shadow); }
.tool-card h2 { margin:1.35rem 0 .4rem; color:var(--navy); font-size:1.2rem; }
.tool-card p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.55; }
.card-link { margin-top:auto; padding-top:1.4rem; color:var(--blue); font-size:.86rem; font-weight:600; }
.status-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
.tool-card>.status-tags { position:absolute; top:1.6rem; right:1.6rem; max-width:calc(100% - 5.2rem); }
.status-tag { display:inline-block; width:max-content; padding:.25rem .5rem; border-radius:999px; font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.03em; }
.tool-card>.status-tag { position:absolute; top:1.6rem; right:1.6rem; }
.status-label { margin-right:.3rem; font-weight:700; }
.status-tag.ready { color:var(--ready-text); background:var(--ready-bg); }
.status-tag.prototype { color:var(--prototype-text); background:var(--prototype-bg); }
.status-tag.planned { color:var(--muted); background:var(--planned-bg); }
.card { margin-bottom:1.25rem; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.card-header { padding:1.25rem 1.5rem 0; display:flex; align-items:flex-start; gap:1rem; }
.card-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:10px; font-weight:600; }
.card-icon.blue { color:var(--blue); background:var(--blue-soft); }
.card-icon.amber { color:var(--amber-text); background:var(--amber-soft); }
.card-meta { flex:1; }
.card-meta h2 { margin:.15rem 0 0; color:var(--navy); font-size:1.05rem; }
.card-meta p { margin:.25rem 0 0; color:var(--muted); font-size:.85rem; line-height:1.5; }
.card-meta .status-tag { margin-bottom:.45rem; }
.card-body { padding:1.25rem 1.5rem 1.5rem; }
.converter-card { margin-bottom:0; }
.converter-card.featured { min-height:455px; }
.converter-card.category-featured { display:flex; flex-direction:column; }
.converter-card.category-featured .card-body { margin-top:auto; }
.converter-card.muted-tool { min-height:145px; margin-bottom:0; opacity:.78; }
.converter-card.tool-launch { opacity:1; transition:.18s ease; }
.converter-card.tool-launch:hover { transform:translateY(-2px); border-color:var(--hover-border); box-shadow:0 10px 26px var(--shadow); }
.converter-launch-grid .converter-card { min-height:300px; }
.data-tool-grid .converter-card { min-height:300px; }
.converter-launch-grid .card-header { padding:1.2rem 1.2rem 0; gap:.85rem; }
.converter-launch-grid .card-body { padding:1rem 1.2rem 1.2rem; }
.converter-section-divider { grid-column:1/-1; margin:.25rem 0; display:flex; align-items:center; gap:1rem; color:var(--muted); font:500 .72rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.converter-section-divider::before,.converter-section-divider::after { content:""; height:1px; flex:1; background:var(--border); }
.category-overview-card .card-icon { width:48px; }
.tool-launch-link { min-height:100%; display:flex; flex:1; flex-direction:column; color:inherit; text-decoration:none; }
.tool-launch-link .card-body { display:flex; flex:1; flex-direction:column; }
.tool-detail { margin:0 0 1rem; color:var(--muted); font-size:.84rem; line-height:1.55; }
.planned-action { margin-top:auto; display:inline-flex; width:max-content; color:var(--muted); font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.converter-column-primary .muted-tool { flex:1; }
.converter-column-secondary.dense { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
.admin-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.admin-tool-card { min-height:235px; margin-bottom:0; }
.admin-tool-card .card-header { padding:1rem 1rem 0; gap:.75rem; }
.admin-tool-card .card-icon { width:40px; height:40px; font-size:.78rem; }
.admin-tool-card .card-meta h2 { font-size:.98rem; line-height:1.25; }
.admin-tool-card .card-meta p { font-size:.8rem; }
.admin-tool-card .card-body { padding:1rem; }
.admin-data-panel .card-meta p { overflow-wrap:anywhere; }
.admin-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.admin-summary-item { min-height:92px; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border); border-radius:8px; background:var(--surface-soft); }
.admin-summary-item span { color:var(--muted); font:500 .72rem var(--mono); letter-spacing:.04em; text-transform:uppercase; overflow-wrap:anywhere; }
.admin-summary-item strong { color:var(--navy); font-size:1.55rem; line-height:1; }
.admin-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
.admin-data-table { width:100%; min-width:760px; border-collapse:collapse; font-size:.82rem; }
.admin-data-table th,.admin-data-table td { padding:.7rem .8rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.admin-data-table th { color:var(--muted); background:var(--surface-soft); font:600 .68rem var(--mono); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.admin-data-table td { color:var(--text); overflow-wrap:anywhere; }
.admin-data-table tbody tr:last-child td { border-bottom:0; }
.log-tail { max-height:520px; margin:0; padding:1rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--border); border-radius:6px; color:var(--text); background:var(--surface-soft); font:400 .78rem/1.55 var(--mono); }
.admin-empty-state { margin:0; padding:1rem; border:1px dashed var(--border); border-radius:8px; color:var(--muted); background:var(--surface-soft); font-size:.86rem; }
.diagnostics-summary .admin-summary-item { min-height:105px; }
.diagnostic-ok strong { color:var(--success); }
.diagnostic-warning strong { color:var(--amber-text); }
.diagnostic-error strong { color:var(--error); }
.diagnostic-status.ok { color:var(--ready-text); background:var(--ready-bg); }
.diagnostic-status.warning { color:var(--prototype-text); background:var(--prototype-bg); }
.diagnostic-status.error { color:var(--error); background:var(--error-bg); }
.diagnostic-table td:nth-child(2) { width:1%; white-space:nowrap; }
.backup-action-form { margin-top:1rem; }
.backup-restore-form { display:grid; gap:1rem; }
.backup-restore-form .file-field,.backup-restore-form .text-field,.backup-restore-form .honest-note { margin-bottom:0; }
.backup-restore-form .btn { width:max-content; }
.access-admin-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:start; margin-bottom:1.25rem; }
.access-admin-card { margin-bottom:0; }
.access-admin-form { display:grid; gap:.85rem; }
.access-admin-form .text-field,.access-admin-form .select-field,.access-admin-form .check-field { margin-bottom:0; }
.access-admin-form .btn { width:max-content; }
.access-row { padding:.55rem 0; border-bottom:1px solid var(--border); }
.access-row:first-child { padding-top:0; }
.access-row:last-child { padding-bottom:0; border-bottom:0; }
.access-row strong { display:block; color:var(--navy); font-size:.83rem; }
.access-row span,.muted-text { display:block; margin-top:.12rem; color:var(--muted); font:400 .72rem var(--mono); }
.more-tools { margin-top:1.25rem; padding:1.5rem; display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,2fr); gap:1.5rem; align-items:center; }
.more-tools-intro h2 { margin:.5rem 0 .25rem; color:var(--navy); font-size:1.15rem; }
.more-tools-intro p { margin:0; color:var(--muted); font-size:.85rem; }
.tool-category-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.tool-category-links a { padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--border); border-radius:8px; color:var(--navy); background:var(--bg); font-size:.86rem; font-weight:600; text-decoration:none; transition:.18s ease; }
.tool-category-links a:hover,.tool-category-links a[aria-current="page"] { border-color:var(--hover-border); color:var(--blue); background:var(--hover-bg); }
.honest-note { margin:0 0 1rem; padding:.8rem 1rem; border-left:3px solid var(--accent); color:var(--muted); background:var(--note-bg); font-size:.82rem; line-height:1.5; }
.file-field { margin-bottom:1rem; padding:1rem; display:flex; flex-direction:column; gap:.6rem; border:2px dashed var(--border); border-radius:8px; color:var(--muted); font-size:.82rem; background:var(--bg); }
.mode-toggle { margin:0 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; border:0; }
.mode-toggle legend { width:100%; margin-bottom:.1rem; color:var(--muted); font-size:.78rem; font-weight:600; }
.mode-toggle label { min-height:40px; padding:.55rem .8rem; display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-soft); font-size:.84rem; cursor:pointer; }
.mode-toggle input { accent-color:var(--blue); }
.check-field { margin:0 0 1rem; padding:.7rem .8rem; display:flex; align-items:center; gap:.55rem; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-soft); font-size:.84rem; cursor:pointer; }
.check-field input { accent-color:var(--blue); }
.ocr-language-field { max-width:220px; }
.select-field { margin-bottom:1rem; display:flex; flex-direction:column; gap:.45rem; color:var(--muted); font-size:.82rem; }
.select-field select { width:100%; min-height:42px; padding:.55rem .75rem; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-soft); font:500 .88rem var(--font); }
.select-field select:focus { outline:3px solid rgba(29,111,191,.16); border-color:var(--hover-border); }
.text-field { margin-bottom:1rem; display:flex; flex-direction:column; gap:.45rem; color:var(--muted); font-size:.82rem; }
.text-field input,.text-field textarea { width:100%; min-height:42px; padding:.55rem .75rem; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-soft); font:500 .88rem var(--font); }
.text-field textarea { resize:vertical; line-height:1.5; }
.text-field input:focus,.text-field textarea:focus { outline:3px solid rgba(29,111,191,.16); border-color:var(--hover-border); }
.btn { padding:.65rem 1.2rem; display:inline-flex; align-items:center; border:0; border-radius:8px; color:#fff; font:500 .9rem var(--font); cursor:pointer; text-decoration:none; transition:.18s; }
.btn-primary { background:var(--blue); }
.btn-primary:hover:not(:disabled) { background:var(--blue-lt); }
.btn-secondary { background:var(--secondary-btn-bg); }
.btn-secondary:hover:not(:disabled) { background:var(--secondary-btn-hover); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; }
.upload-zone { min-height:130px; padding:1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; border:2px dashed var(--border); border-radius:8px; background:var(--bg); cursor:pointer; text-align:center; }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--blue); background:var(--hover-bg); }
.upload-zone.has-file { border-color:var(--success); background:var(--success-bg); }
.upload-zone-disabled { opacity:.72; cursor:not-allowed; }
.upload-zone-disabled:hover { border-color:var(--border); background:var(--bg); }
.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-label { color:var(--muted); font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.upload-hint { color:var(--muted); font-size:.78rem; }
.upload-filename { max-width:100%; overflow:hidden; color:var(--success); font:400 .72rem var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.upload-note { color:var(--muted); font-size:.78rem; font-style:italic; }
.divider { margin:.25rem 0 1.5rem; display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.78rem; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--border); }
.status-panel { display:none; margin-top:1rem; padding:1rem 1.2rem; border-radius:8px; }
.status-panel.show { display:block; }
.status-panel.loading { color:var(--blue); border:1px solid var(--loading-border); background:var(--loading-bg); }
.status-panel.success { color:var(--success); border:1px solid var(--success-border); background:var(--success-bg); }
.status-panel.error { color:var(--error); border:1px solid var(--error-border); background:var(--error-bg); }
.status-title { font-size:.88rem; font-weight:600; }
.status-msg { margin-top:.2rem; color:var(--muted); font-size:.8rem; }
.download-btn { display:none; margin-top:.75rem; }
.download-btn.show { display:inline-flex; }
.download-list { display:flex; flex-wrap:wrap; gap:.75rem; }
.download-list .download-btn { margin-top:.75rem; }
.pdf-output-panel { min-height:160px; padding:1rem; display:flex; flex-direction:column; justify-content:center; gap:.35rem; border:1px dashed var(--border); border-radius:8px; color:var(--muted); background:var(--bg); }
.pdf-output-panel strong { color:var(--navy); font-size:.95rem; }
.pdf-output-panel span { font-size:.84rem; line-height:1.5; }
.pdf-output-panel.ready { border-color:var(--success-border); background:var(--success-bg); }
.pdf-output-panel.error { border-color:var(--error-border); background:var(--error-bg); }
.inline-message { display:none; margin-top:1rem; padding:.7rem .8rem; border-radius:6px; font-size:.8rem; }
.inline-message.show { display:block; }
.inline-message.notice { color:var(--notice-text); background:var(--notice-bg); }
.inline-message.error { color:var(--error); background:var(--error-bg); }
.inline-message.success { color:var(--success); background:var(--success-bg); }
.ai-tool-layout { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:1.25rem; align-items:start; }
.ai-tool-panel,.ai-result-panel { margin-bottom:0; }
.markdown-preview { width:100%; min-height:420px; padding:1rem; resize:vertical; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface-soft); font:400 .82rem/1.55 var(--mono); }
.markdown-preview:focus { outline:3px solid rgba(29,111,191,.16); border-color:var(--hover-border); }
.result-actions { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.roadmap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.roadmap-card { margin:0; padding:1.5rem; }
.roadmap-card h2 { margin:0 0 1.25rem; color:var(--navy); font-size:1.15rem; }
.roadmap-item+.roadmap-item { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.roadmap-item h3 { margin:0 0 .3rem; color:var(--text); font-size:.95rem; }
.roadmap-item p,.roadmap-vision { margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.roadmap-list { margin:0; padding-left:1.2rem; color:var(--muted); font-size:.88rem; line-height:1.8; }
.roadmap-notice { width:100%; margin:2rem 0 0; padding:1.25rem 1.5rem; }
.roadmap-notice p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.roadmap-notice a { color:var(--blue); font-weight:600; }
.issue-card { display:flex; flex-direction:column; gap:1rem; }
.issue-card-action { width:max-content; }
.issue-report-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:1.25rem; align-items:start; }
.issue-report-card,.issue-context-card { margin-bottom:0; }
.issue-report-form { display:grid; gap:1rem; }
.issue-report-form .text-field,.issue-report-form .select-field { margin-bottom:0; }
.issue-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.issue-context-list { margin:0; display:grid; gap:1rem; }
.issue-context-list div { min-width:0; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.issue-context-list div:last-child { padding-bottom:0; border-bottom:0; }
.issue-context-list dt { color:var(--muted); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.issue-context-list dd { margin:.25rem 0 0; overflow-wrap:anywhere; color:var(--text); font-size:.84rem; line-height:1.45; }
.site-footer { padding:1.25rem 2rem; display:flex; justify-content:space-between; gap:2rem; color:var(--logo-sub); background:var(--header); font-size:.72rem; line-height:1.6; }
.footer-demo,.footer-meta { display:flex; flex-direction:column; }
.footer-demo strong { color:rgba(255,255,255,.85); font-weight:600; }
.footer-links { display:flex; gap:.5rem; }
.footer-links a { color:rgba(255,255,255,.75); }
.footer-links a:hover { color:#fff; }
.footer-meta { align-items:flex-end; text-align:right; }
.footer-report-link { margin-top:.2rem; color:rgba(255,255,255,.75); font-weight:600; text-decoration:none; }
.footer-report-link:hover { color:#fff; }
.legal-content { padding:1.5rem; }
.legal-content h2 { margin:1.5rem 0 .4rem; color:var(--navy); font-size:1.05rem; }
.legal-content h2:first-child { margin-top:0; }
.legal-content p,.legal-content li { color:var(--muted); font-size:.9rem; line-height:1.65; }
.legal-content p { margin:.35rem 0 0; }
.legal-content ul { margin:.5rem 0 0; padding-left:1.2rem; }
.page-wrap.login-page { max-width:100%; padding:0 1.5rem; display:flex; }
.login-shell { width:100%; min-height:560px; padding:4rem 0; display:grid; place-items:center; }
.login-card { width:min(100%,460px); padding:2.75rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 18px 50px var(--shadow); text-align:center; }
.login-card.demo-login-card { width:min(100%,900px); }
.login-emblem { width:58px; height:58px; margin:0 auto 1.4rem; display:grid; place-items:center; border-radius:14px; background:var(--secondary-btn-bg); }
.login-emblem svg { width:28px; height:28px; fill:#fff; }
.login-card h1 { margin:.45rem 0 0; color:var(--navy); font-size:2rem; line-height:1.18; }
.login-intro { max-width:340px; margin:.8rem auto 2rem; color:var(--muted); font-size:.95rem; line-height:1.6; }
.microsoft-login { min-height:44px; width:100%; padding:.7rem 1.1rem; display:flex; align-items:center; justify-content:center; gap:.85rem; border:1px solid #8c8c8c; color:#5e5e5e; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.12); font-family:"Segoe UI",var(--font); font-size:.95rem; font-weight:600; text-decoration:none; transition:.18s ease; }
.microsoft-login:hover { border-color:#666; background:#f7f7f7; box-shadow:0 3px 8px rgba(0,0,0,.16); }
.microsoft-login:focus-visible { outline:3px solid rgba(29,111,191,.3); outline-offset:3px; }
.microsoft-mark { width:21px; height:21px; display:grid; flex:none; grid-template-columns:1fr 1fr; gap:2px; }
.microsoft-mark span { display:block; }
.ms-red { background:#f25022; }
.ms-green { background:#7fba00; }
.ms-blue { background:#00a4ef; }
.ms-yellow { background:#ffb900; }
.login-help { margin:1rem 0 0; color:var(--muted); font-size:.78rem; }
.dev-login-form { display:flex; flex-direction:column; gap:.85rem; text-align:left; }
.dev-login-form .select-field { margin-bottom:0; }
.login-submit { width:100%; justify-content:center; }
.demo-persona-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; text-align:left; }
.demo-persona-grid form { min-width:0; }
.demo-persona-card { width:100%; min-height:240px; padding:1.25rem; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--surface-soft); font-family:var(--font); text-align:left; cursor:pointer; transition:.18s ease; }
.demo-persona-card:hover { transform:translateY(-2px); border-color:var(--hover-border); background:var(--hover-bg); box-shadow:0 8px 22px var(--shadow); }
.demo-persona-card:focus-visible { outline:3px solid rgba(29,111,191,.3); outline-offset:3px; }
.demo-persona-name { color:var(--navy); font-size:1.05rem; font-weight:600; }
.demo-persona-role { margin-top:.3rem; color:var(--blue); font:500 .7rem var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.demo-persona-description { margin-top:1rem; color:var(--muted); font-size:.84rem; line-height:1.55; }
.demo-persona-action { margin-top:auto; padding-top:1.25rem; color:var(--blue); font-size:.78rem; font-weight:600; }
.demo-sample-panel { margin:0 0 1.25rem; padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--loading-border); border-radius:10px; background:var(--loading-bg); }
.demo-sample-panel h3 { margin:0; color:var(--navy); font-size:.92rem; }
.demo-sample-panel p { max-width:500px; margin:.3rem 0 0; color:var(--muted); font-size:.8rem; line-height:1.5; }
.demo-sample-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; flex:none; }
.demo-sample-actions .btn { padding:.55rem .75rem; font-size:.78rem; }
.config-upload-form .file-field,.font-upload-form .file-field { margin-bottom:0; }
.font-list { list-style:none; margin:.75rem 0 0!important; padding:0!important; }
.font-list li { padding:.7rem 0; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--border); }
.font-list li:first-child { border-top:0; }
.font-list span { color:var(--muted); font:400 .78rem var(--mono); white-space:nowrap; }
@media (max-width:960px) { .admin-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:840px) { .header-context { display:none; } .site-nav { margin-left:auto; } }
@media (max-width:720px) { .site-header { padding:.75rem 1rem; flex-wrap:wrap; gap:.5rem 1rem; } .site-nav { order:3; width:100%; margin:0; align-items:flex-start; flex-wrap:wrap; } .site-nav a { min-height:34px; } .theme-toggle { margin-left:auto; } .tool-grid,.converter-grid,.converter-launch-grid,.converter-column-secondary.dense,.upload-grid,.roadmap-grid,.ai-tool-layout,.admin-tool-grid,.admin-summary-grid,.issue-report-layout,.access-admin-layout,.demo-persona-grid { grid-template-columns:1fr; } .demo-persona-card { min-height:0; } .demo-sample-panel { align-items:flex-start; flex-direction:column; } .demo-sample-actions { justify-content:flex-start; } .converter-card.featured { min-height:0; } .converter-launch-grid .converter-card { min-height:0; } .admin-tool-card { min-height:0; } .more-tools { grid-template-columns:1fr; } .site-footer { flex-direction:column; } }
@media (max-width:720px) { .footer-meta { align-items:flex-start; text-align:left; } }
@media (max-width:430px) { .logo-sub { display:none; } .page-wrap { padding:2rem 1rem 3rem; } .page-wrap.login-page { padding:0 1rem; } .tool-category-links { grid-template-columns:1fr; } .login-shell { min-height:500px; padding:2.5rem 0; } .login-card { padding:2rem 1.35rem; } .login-card h1 { font-size:1.7rem; } }