/* ===================================================================== Converter Web Tools — app.css (Phase 1 modern re-skin) Loads AFTER css/style.css and overrides the look. Dark mode via (toggled by the framework + theme-flash). ===================================================================== */ :root{ --cwt-bg:#f6f7f9; --cwt-surface:#ffffff; --cwt-surface-2:#f1f3f6; --cwt-text:#1a1d24; --cwt-muted:#5b6472; --cwt-border:#e4e7ec; --cwt-accent:#3b5bfd; --cwt-accent-weak:#eaeefe; --cwt-accent-text:#ffffff; --cwt-ok:#16a34a; --cwt-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08); --cwt-shadow-lg:0 8px 30px rgba(16,24,40,.10); --cwt-radius:14px; --cwt-radius-sm:10px; --cwt-top:56px; --cwt-maxw:1180px; --cwt-side:264px; --cwt-gut:28px; --cwt-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --cwt-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; } html.dark-theme{ --cwt-bg:#0d1017; --cwt-surface:#151a23; --cwt-surface-2:#1c222d; --cwt-text:#e7ebf2; --cwt-muted:#9aa4b2; --cwt-border:#262d3a; --cwt-accent:#6f8bff; --cwt-accent-weak:#1b2236; --cwt-accent-text:#0d1017; --cwt-shadow:0 1px 2px rgba(0,0,0,.4); --cwt-shadow-lg:0 8px 30px rgba(0,0,0,.5); } /* ---------- base ---------- */ html,body{margin:0;padding:0} body{background:var(--cwt-bg)!important;color:var(--cwt-text)!important; font-family:var(--cwt-sans)!important;line-height:1.6;-webkit-font-smoothing:antialiased; transition:background-color .28s ease,color .2s ease} a{color:var(--cwt-accent)} /* (Top bar, content belt, footer and hub chrome are styled with Tailwind in the markup; their old .cwt-* rules were removed as dead code.) */ /* ---------- app layout ---------- */ /* page scrolls as ONE document (old CSS made #content & sidebar fixed-height scroll panes) */ html,body{height:auto!important;overflow:visible!important} /* full-width layout: sidebar flush left, content fills the rest */ #app{display:flex!important;align-items:flex-start!important;max-width:none!important; margin:0!important;min-height:0!important;height:auto!important;overflow:visible!important;background:transparent!important} #content{flex:1 1 auto!important;min-width:0;padding:8px var(--cwt-gut) 10px!important; height:auto!important;overflow:visible!important;background:transparent!important} #content .top-nav{display:none!important} /* old in-content burger — replaced by top bar */ /* ---------- sidebar ---------- */ #sidebar{position:sticky!important;top:0!important;align-self:flex-start; width:264px!important;flex:none!important;height:100vh!important; overflow-y:auto;overscroll-behavior:contain;background:transparent!important;border:0!important;z-index:auto!important; scrollbar-width:thin;scrollbar-color:var(--cwt-border) transparent} #sidebar::-webkit-scrollbar{width:8px} #sidebar::-webkit-scrollbar-track{background:transparent} #sidebar::-webkit-scrollbar-thumb{background:var(--cwt-border);border-radius:8px;border:2px solid transparent;background-clip:padding-box} #sidebar:hover::-webkit-scrollbar-thumb{background:var(--cwt-muted);background-clip:padding-box} #sidebar .container{padding:10px 10px 40px!important;background:transparent!important;width:auto!important; height:auto!important;overflow:visible!important} #sidebar .container>.section:first-child>h3,#sidebar .section:first-of-type>h3{margin-top:4px!important} /* brand lives in the top bar — hide the duplicate sidebar brand header */ #sidebar .container>header{display:none!important} #sidebar .mask{display:none} #sidebar .section{margin-bottom:14px} #sidebar .section>h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em; color:var(--cwt-muted);margin:14px 10px 6px;font-weight:700} #sidebar details{border:0!important;background:transparent!important;margin:0} #sidebar details>summary{list-style:none;cursor:pointer;padding:7px 10px;border-radius:8px; font-size:14px;font-weight:600;color:var(--cwt-text);display:flex;align-items:center;justify-content:space-between} #sidebar details>summary::-webkit-details-marker{display:none} /* sidebar caret as a theme-aware CSS chevron (var(--cwt-muted)) — the legacy gray arrow.svg was too faint on the light background */ #sidebar details>summary::after{content:""!important;width:8px;height:8px;flex:none;background:none!important; border:0!important;border-right:2px solid var(--cwt-muted)!important;border-bottom:2px solid var(--cwt-muted)!important; transform:rotate(45deg);transition:transform .2s;margin:0 4px 2px 0;opacity:1} #sidebar details[open]>summary::after{transform:rotate(-135deg)} #sidebar details>summary:hover{background:var(--cwt-surface-2)} #sidebar details>summary:hover::after{border-color:var(--cwt-text)!important} #sidebar nav ol{list-style:none;margin:2px 0 8px;padding:0 0 0 6px} #sidebar nav ol li a{display:block;padding:6px 12px;border-radius:7px;font-size:13.5px; color:var(--cwt-muted);text-decoration:none;transition:background-color .15s,color .15s} #sidebar nav ol li a:hover{background:var(--cwt-surface-2);color:var(--cwt-text)} #sidebar a.current-link{color:var(--cwt-accent)!important;background:var(--cwt-accent-weak);font-weight:600} /* Links section ("Report Issues") — remove old dashed box, match nav style */ #sidebar .links,#sidebar .links ol,#sidebar .links a{border:0!important;outline:0!important} #sidebar .links ol{list-style:none;margin:2px 0;padding:0 0 0 6px} #sidebar .links a{display:block;padding:6px 12px;border-radius:7px;font-size:13.5px;color:var(--cwt-muted);text-decoration:none} #sidebar .links a:hover{background:var(--cwt-surface-2);color:var(--cwt-text)} /* ---------- page header / hero ---------- */ #content>header{padding:18px 0 6px!important;border:0!important;background:transparent!important} #content>header h1{font-size:28px!important;letter-spacing:-.02em;margin:0 0 6px!important;color:var(--cwt-text)!important} #content>header p{color:var(--cwt-muted)!important;font-size:15.5px;max-width:720px;margin:0!important} /* ==================================================================== TOOL WIDGET — clean restyle (SAFE across all tool types). We do NOT force layout/grid/heights (that broke QR/file/viewer tools). Only colors, cards, accent output, modern controls. Layout stays as the original engine expects, so every tool renders correctly. ==================================================================== */ #content main{background:transparent!important} .layout{gap:16px!important} /* Tailwind FAQ accordion (details.group): kill the legacy style.css summary arrow.svg so only our single rotating chevron shows */ details.group>summary::after{display:none!important;content:none!important;background:none!important} /* INPUT/OUTPUT auto-size to content instead of filling 50% of the column. Scoped via :has(#input/#output) so image/file/QR tools are untouched. */ /* Flatten the emn178 input/output flex chain so the textareas keep a stable height on EVERY tool (the chain otherwise stretches/collapses them). */ .input,.output{height:auto!important;display:block!important;flex:0 0 auto!important} .input .block,.output .block,.input .block-fill,.output .block-fill{ height:auto!important;flex:0 0 auto!important;display:block!important;overflow:visible!important} .input .container,.output .container{height:auto!important;flex:0 0 auto!important;overflow:visible!important} @media(min-width:1024px){ .layout{height:auto!important} .layout .layout-block{flex:1 1 auto!important;height:auto!important;overflow:visible!important;align-self:flex-start!important} } #input,#output{display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important; height:300px!important;overflow-y:auto!important;overflow-x:hidden!important;resize:vertical!important; white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:anywhere!important} /* Monaco code editor (JSON/XML "Pretty Display") needs a sized container, otherwise it auto-layouts to 0 and the input looks hidden. Match 300px. */ .monaco-editor-wrap{height:300px!important;min-height:300px!important;width:100%!important; display:block!important;overflow:hidden!important} /* syntax-highlight code output: fixed height + scroll (match input), wrap (no x-scroll) */ pre.syntax-highlight{height:300px!important;max-height:300px!important;overflow:auto!important} pre.syntax-highlight,pre.syntax-highlight code{white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:anywhere!important} /* Fullscreen mode (the ⤢ button) — must override the fixed-height rules above so the panel actually fills the viewport and the textarea grows to fit. */ .block.fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important; z-index:200!important;display:flex!important;flex-direction:column!important; background:var(--cwt-surface)!important;border-radius:0!important;overflow:hidden!important} .block.fullscreen .container,.block.fullscreen #input,.block.fullscreen #output,.block.fullscreen textarea{ height:auto!important;max-height:none!important;flex:1 1 auto!important;min-height:0!important;border-radius:0!important} /* cards */ .block{background:var(--cwt-surface)!important;border:1px solid var(--cwt-border)!important; border-radius:var(--cwt-radius)!important;box-shadow:var(--cwt-shadow)!important} .block-title{background:transparent!important;border-bottom:1px solid var(--cwt-border)!important; color:var(--cwt-muted)!important;font-weight:600!important;font-size:11.5px!important; text-transform:uppercase!important;letter-spacing:.07em!important;padding:11px 15px!important} .block .container{background:transparent!important} /* input / output (text tools) — colors only, no size/layout overrides */ #input,#output,.input textarea,.output textarea{background:var(--cwt-surface-2)!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important; color:var(--cwt-text)!important;font-family:var(--cwt-mono)!important} #input:focus,#output:focus{border-color:var(--cwt-accent)!important; box-shadow:0 0 0 3px var(--cwt-accent-weak)!important;outline:none!important} .output #output,.output>textarea{background:var(--cwt-accent-weak)!important;border-color:transparent!important} /* ---- Dynamic-tool tailored inputs: single-line, numeric & multi-field ---- Scoped to and .cwt-fields so the textarea tools above are untouched (textarea#input keeps its 300px box). */ input#input{height:auto!important;min-height:0!important;resize:none!important; overflow:visible!important;white-space:normal!important} .cwt-line{padding:12px 14px!important;font-size:15px!important;line-height:1.4!important} .cwt-fields{display:flex!important;flex-direction:column!important;gap:14px!important;padding:15px!important} .cwt-field{display:flex!important;flex-direction:column!important;gap:6px!important} .cwt-field>span{font-size:12.5px!important;font-weight:600!important;color:var(--cwt-text)!important} .cwt-fields input{width:100%!important;box-sizing:border-box!important;height:auto!important;min-height:0!important; padding:11px 13px!important;font-size:15px!important;resize:none!important; background:var(--cwt-surface-2)!important;border:1px solid var(--cwt-border)!important; border-radius:var(--cwt-radius-sm)!important;color:var(--cwt-text)!important;font-family:var(--cwt-mono)!important} .cwt-fields input:focus{border-color:var(--cwt-accent)!important; box-shadow:0 0 0 3px var(--cwt-accent-weak)!important;outline:none!important} /* ---- Color tools: native picker + live swatch preview ---- */ .cwt-color-row{display:flex!important;gap:10px!important;align-items:center!important;padding:14px 15px 0!important} #cwt-color-picker{width:48px!important;min-width:48px!important;height:44px!important;padding:2px!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important; background:var(--cwt-surface-2)!important;cursor:pointer!important} .cwt-color-row .cwt-line{flex:1 1 auto!important;margin:0!important} .cwt-swatch{margin:12px 15px 15px!important;height:60px!important;border-radius:var(--cwt-radius-sm)!important; border:1px solid var(--cwt-border)!important;display:flex!important;align-items:center!important; justify-content:center!important;font-family:var(--cwt-mono)!important;font-weight:700!important; font-size:15px!important;letter-spacing:.04em!important} /* ---- Flagship Color Converter page ---- */ .cwt-cc{display:flex!important;flex-direction:column!important;gap:18px!important;max-width:680px!important} .cwt-cc-top{display:flex!important;gap:14px!important;align-items:stretch!important} #cc-pick{width:88px!important;min-width:88px!important;height:88px!important;padding:3px!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius)!important; background:var(--cwt-surface-2)!important;cursor:pointer!important} .cwt-cc-preview{flex:1 1 auto!important;border-radius:var(--cwt-radius)!important;border:1px solid var(--cwt-border)!important; display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important; font-family:var(--cwt-mono)!important;font-weight:700!important;font-size:18px!important;letter-spacing:.05em!important} .cwt-cc-formats{display:flex!important;flex-direction:column!important;gap:8px!important} .cwt-cc-row{display:flex!important;align-items:center!important;gap:12px!important;background:var(--cwt-surface-2)!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important;padding:10px 12px!important} .cwt-cc-lbl{width:42px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important; color:var(--cwt-muted)!important;text-transform:uppercase!important} .cwt-cc-val{flex:1 1 auto!important;font-family:var(--cwt-mono)!important;font-size:14.5px!important;color:var(--cwt-text)!important} .cwt-cc-copy{border:1px solid var(--cwt-border)!important;background:var(--cwt-surface)!important;color:var(--cwt-text)!important; border-radius:8px!important;padding:6px 13px!important;font-size:12.5px!important;font-weight:600!important;cursor:pointer!important} .cwt-cc-copy:hover{background:var(--cwt-surface-2)!important;border-color:var(--cwt-accent)!important;color:var(--cwt-accent)!important} .cwt-cc-h{font-size:11.5px!important;font-weight:700!important;text-transform:uppercase!important; letter-spacing:.07em!important;color:var(--cwt-muted)!important;margin:0 0 9px!important} .cwt-cc-scale{display:flex!important;gap:0!important;border-radius:var(--cwt-radius-sm)!important; overflow:hidden!important;border:1px solid var(--cwt-border)!important} .cwt-cc-sw{flex:1 1 0!important;height:46px!important;border:0!important;padding:0!important;cursor:pointer!important} /* ---- Image Color Picker page ---- */ .cwt-ic{display:flex!important;flex-direction:column!important;gap:18px!important;max-width:760px!important} .cwt-ic-drop{display:flex!important;align-items:center!important;justify-content:center!important;min-height:120px!important; padding:24px!important;text-align:center!important;border:2px dashed var(--cwt-border)!important; border-radius:var(--cwt-radius)!important;background:var(--cwt-surface-2)!important;cursor:pointer!important; color:var(--cwt-muted)!important;font-weight:600!important} .cwt-ic-drop:hover,.cwt-ic-drop.drag{border-color:var(--cwt-accent)!important;color:var(--cwt-accent)!important; background:var(--cwt-accent-weak)!important} .cwt-ic-stage{position:relative!important} #ic-canvas{max-width:100%!important;height:auto!important;display:block!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important;cursor:crosshair!important} /* floating zoom loupe that follows the cursor (hover != select) */ .cwt-ic-mag{position:absolute!important;display:none;pointer-events:none!important;z-index:6!important; transform:translate(-50%,calc(-100% - 16px))!important;flex-direction:column!important;align-items:center!important;gap:5px!important; background:var(--cwt-surface)!important;border:1px solid var(--cwt-border)!important;border-radius:11px!important; padding:6px!important;box-shadow:var(--cwt-shadow)!important} .cwt-ic-mag #ic-loupe{width:143px!important;height:143px!important;display:block!important; border-radius:7px!important;border:1px solid var(--cwt-border)!important} .cwt-ic-mag .hx{font-family:var(--cwt-mono)!important;font-size:12.5px!important;font-weight:700!important;color:var(--cwt-text)!important} .cwt-ic-hint{font-size:13px!important;color:var(--cwt-muted)!important;margin-top:8px!important} .cwt-ic-result{display:flex!important;flex-direction:column!important;gap:14px!important} #ic-swatch{min-height:80px!important;flex:1 1 auto!important} /* ---- Gradient Generator ---- */ .cwt-gr-preview{height:170px!important;border-radius:var(--cwt-radius)!important;border:1px solid var(--cwt-border)!important; background:linear-gradient(90deg,#3b5bfd,#a855f7)!important} .cwt-gr-controls{display:flex!important;flex-wrap:wrap!important;gap:16px!important;align-items:flex-end!important} .cwt-gr-controls .cwt-field{flex:1 1 150px!important} .cwt-gr-controls input[type=color]{width:100%!important;height:42px!important;padding:2px!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important;background:var(--cwt-surface-2)!important;cursor:pointer!important} .cwt-gr-controls select,.cwt-gr-controls input[type=range]{width:100%!important;height:42px!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important;background:var(--cwt-surface-2)!important; color:var(--cwt-text)!important;padding:0 10px!important} .cwt-gr-controls input[type=range]{padding:0!important;accent-color:var(--cwt-accent)!important} .cwt-gr-presets{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important} .cwt-gr-preset{height:48px!important;border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important;cursor:pointer!important} /* ---- Contrast Checker ---- */ .cwt-ct-preview{display:flex!important;align-items:center!important;gap:16px!important;flex-wrap:wrap!important; min-height:120px!important;padding:22px!important;border-radius:var(--cwt-radius)!important;border:1px solid var(--cwt-border)!important; background:#fff;color:#1f2937} .cwt-ct-preview .big{font-size:40px!important;font-weight:800!important;line-height:1!important} .cwt-ct-preview .small{font-size:16px!important} .cwt-ct-ratio{font-size:16px!important;color:var(--cwt-text)!important} .cwt-ct-ratio b{font-family:var(--cwt-mono)!important;font-size:20px!important} .cwt-ct-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:10px!important} .cwt-ct-badge{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important; padding:11px 13px!important;border-radius:var(--cwt-radius-sm)!important;border:1px solid var(--cwt-border)!important;font-size:13px!important} .cwt-ct-badge span{color:var(--cwt-text)!important} .cwt-ct-badge b{font-weight:700!important} .cwt-ct-badge.ok{background:rgba(34,197,94,.12)!important;border-color:rgba(34,197,94,.4)!important} .cwt-ct-badge.ok b{color:#15803d!important} .cwt-ct-badge.no{background:rgba(239,68,68,.10)!important;border-color:rgba(239,68,68,.4)!important} .cwt-ct-badge.no b{color:#b91c1c!important} /* ---- Image Palette Extractor ---- */ .cwt-px-img{max-width:100%!important;max-height:320px!important;height:auto!important;display:block!important; border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important} .cwt-px-palette{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important;gap:10px!important} .cwt-px-sw{height:84px!important;border:1px solid var(--cwt-border)!important;border-radius:var(--cwt-radius-sm)!important; cursor:pointer!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:8px!important} .cwt-px-sw span{font-family:var(--cwt-mono)!important;font-size:12.5px!important;font-weight:700!important; background:rgba(255,255,255,.0)!important} /* embedded gradient + contrast tools inside the Image Color Picker */ #ic-tools{display:flex!important;flex-direction:column!important;gap:12px!important} /* ---- related color-tool links (image picker / palette extractor) ---- */ .cwt-ic-links{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important; padding-top:6px!important;font-size:13.5px!important} .cwt-ic-links span{color:var(--cwt-muted)!important;font-weight:600!important} .cwt-ic-links a{padding:6px 12px!important;border:1px solid var(--cwt-border)!important;border-radius:999px!important; background:var(--cwt-surface)!important;color:var(--cwt-text)!important;text-decoration:none!important;font-size:13px!important} .cwt-ic-links a:hover{border-color:var(--cwt-accent)!important;color:var(--cwt-accent)!important;background:var(--cwt-surface-2)!important} /* settings controls */ .setting>label:not(.switcher){color:var(--cwt-text)!important;font-weight:600;font-size:13px} .switcher{display:flex!important;align-items:center!important;gap:10px!important} select,input[type=text],input[type=number],input[type=password]{background:var(--cwt-surface-2)!important; border:1px solid var(--cwt-border)!important;border-radius:9px!important;color:var(--cwt-text)!important; padding:8px 10px!important;font-size:14px!important} select:focus,input[type=text]:focus{border-color:var(--cwt-accent)!important;outline:none!important} /* buttons + toggles */ .btn,a.btn,#execute{background:var(--cwt-accent)!important;color:var(--cwt-accent-text)!important; border:0!important;border-radius:9px!important;font-weight:600!important;cursor:pointer; padding:9px 16px!important;transition:filter .15s;text-decoration:none} .btn:hover,a.btn:hover,#execute:hover{filter:brightness(1.06)} .switcher .toggle{border-radius:20px!important} .switcher input:checked+.toggle,.switcher input:checked~.toggle{background:var(--cwt-accent)!important} .toolbar .icon{border-radius:7px} .toolbar .icon:hover{background:var(--cwt-surface-2)} /* ---------- homepage index ---------- */ #index .section{margin-bottom:26px;scroll-margin-top:72px} #index .section>h2{font-size:18px;letter-spacing:-.01em;margin:0 0 12px;color:var(--cwt-text)} /* Newspaper-column flow: group headings + tool links flow into as many columns as fit, so every section fills the width and stays bounded in height — whether the category has 1 group (e.g. Text) or 27 (e.g. Unit Converters). */ #index .cols{column-width:210px;column-gap:30px} #index .section{background:var(--cwt-surface)!important;border:1px solid var(--cwt-border)!important; border-radius:var(--cwt-radius)!important;box-shadow:var(--cwt-shadow);padding:16px 18px!important} #index .cols .g{break-inside:avoid;break-after:avoid-column;-webkit-column-break-after:avoid; font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600; color:var(--cwt-accent);margin:16px 0 6px} #index .cols .g:first-child{margin-top:0} #index .cols .t{display:block;padding:4px 0;font-size:14px;color:var(--cwt-muted);text-decoration:none;break-inside:avoid} #index .cols .t:hover{color:var(--cwt-text)} #index .blocks .block nav ol li a{display:block;padding:5px 0;font-size:14px;color:var(--cwt-muted);text-decoration:none} #index .blocks .block nav ol li a:hover{color:var(--cwt-text)} /* ---- Reference table pages (/http-status-codes/, /html-color-codes/, etc.) ---- */ .cwt-prose .cwt-ref-wrap{display:flex;flex-wrap:wrap;gap:20px;margin:1rem 0} .cwt-prose table.cwt-ref{border-collapse:collapse;font-size:13.5px;flex:1 1 320px;width:100%;margin:1rem 0} .cwt-prose table.cwt-ref th,.cwt-prose table.cwt-ref td{border:1px solid var(--c-border);padding:4px 9px;text-align:left;vertical-align:top} .cwt-prose table.cwt-ref th{background:var(--c-surface2);font-weight:600;position:sticky;top:0} .cwt-prose table.cwt-ref tbody tr:nth-child(2n){background:var(--c-surface2)} .cwt-prose table.cwt-ref .m{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;white-space:nowrap} .cwt-prose .cwt-sw{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid var(--c-border);vertical-align:middle;margin-right:7px} .cwt-prose .cwt-mult td,.cwt-prose .cwt-mult th{text-align:center;padding:4px 7px} .cwt-prose .cwt-mult th{background:var(--c-surface2)} /* ---------- prose (info pages + "how it works" blocks) ---------- */ .cwt-prose{color:var(--c-text);line-height:1.75;font-size:15.5px} .cwt-prose h2{font-size:20px;font-weight:600;margin:26px 0 10px;color:var(--c-text);letter-spacing:-.01em} .cwt-prose p{margin:0 0 14px} .cwt-prose ul{margin:0 0 16px;padding-left:22px;list-style:disc} .cwt-prose ol{margin:0 0 16px;padding-left:22px;list-style:decimal} .cwt-prose li{margin:0 0 7px} .cwt-prose a{color:var(--c-accent);text-decoration:underline} .cwt-prose strong{color:var(--c-text);font-weight:600} .cwt-prose em{color:var(--c-muted)} .cwt-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px; background:var(--c-surface2);padding:2px 6px;border-radius:6px;color:var(--c-accent);word-break:break-word} /* trust/info callout */ .cwt-note{border:1px solid color-mix(in srgb,var(--c-accent) 28%,transparent);background:var(--c-accent-weak); border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.7;color:var(--c-text);margin:0 0 18px} .cwt-note strong{color:var(--c-accent)} /* ---------- message toast ---------- */ #message{background:var(--cwt-text)!important;color:var(--cwt-bg)!important;border-radius:9px!important} /* ---------- responsive: sidebar becomes an off-canvas drawer below lg ---------- */ @media(max-width:1023px){ #sidebar{position:fixed!important;top:0!important;left:0;height:100vh!important;width:280px!important; background:var(--cwt-surface)!important;border-right:1px solid var(--cwt-border)!important; transform:translateX(-100%);transition:transform .25s ease;z-index:80;box-shadow:var(--cwt-shadow-lg)} #sidebar.open{transform:none} #sidebar .mask{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:-1} #sidebar.open .mask{position:fixed;left:280px;right:0;top:0;bottom:0;display:block} #content{padding:8px 16px 10px!important} #content>header h1{font-size:24px!important} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}