/* Layout: one centered column (max 1240px) on a warm light ground; black and gold from the hydra logo, with one dark gold-trimmed AI band. Light-only by design. */
:root {
  --bg: #F7F5F0; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #FBF9F4; --line: #E6DFCF;
  --text: #1A1712; --muted: #6B6458; --steel: #3F3A31;
  --red: #E9A80B; --red2: #946400; --redsoft: #FFF3D1; --redline: #E8C467; --on-accent: #1A1712; --gold: #A87400; --hover: #D69A06;
  --ok: #15803D; --oksoft: #DCF5E4; --amber: #B45309; --sky: #0369A1; --violet: #6D28D9;
  --bad: #B91C1C; --badsoft: #FDECEC; --badline: #F0B3B3;
  --f-ui: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --f-brand: "Exo 2", Inter, Arial, sans-serif;
  --f-ur: "Noto Nastaliq Urdu", "Noto Sans Arabic", serif;
  --f-ar: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --r: 14px;
  color-scheme: light;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html[lang="ur"] body { font-family: var(--f-ur); line-height: 2.05; font-size: 15px; }
html[lang="ar"] body { font-family: var(--f-ar); }
html[lang="ur"] input, html[lang="ur"] select, html[lang="ur"] textarea, html[lang="ur"] button { font-family: var(--f-ur); }
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button { font-family: var(--f-ar); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg2); }
* { box-sizing: border-box; }
a { color: var(--red2); }
a:hover { color: #6E4B00; }
:focus-visible { outline: 3px solid #E9A80B; outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3 { line-height: 1.9; }
p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.end { justify-content: flex-end; }
.row.wrapr { justify-content: space-between; }
.ic { display: inline-flex; flex: none; }
.ic svg { display: block; }

/* header */
.top { background: var(--bg2); border-bottom: 1px solid var(--card); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand.small img { width: 36px; height: 36px; }
.wordmark { font-family: var(--f-brand); font-weight: 800; font-size: 24px; letter-spacing: 3px; color: var(--text); line-height: 1; white-space: nowrap; }
.wordmark b { color: var(--gold); font-weight: 800; }
.nav { display: flex; flex-wrap: wrap; gap: 2px 20px; flex: 1 1 auto; }
.nav a { color: var(--steel); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 0; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.langs { display: flex; gap: 4px; background: var(--card); padding: 4px; border-radius: 12px; }
.langs button { border: 0; background: transparent; color: var(--steel); min-height: 40px; padding: 0 12px; border-radius: 9px; font: 700 14px var(--f-ui); cursor: pointer; }
.langs button[lang="ur"] { font-family: var(--f-ur); font-size: 14px; }
.langs button[lang="ar"] { font-family: var(--f-ar); }
.langs button.on { background: var(--text); color: #FFFFFF; }
@media (max-width: 760px) { .top-in { gap: 6px 10px; } .nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 18px; scrollbar-width: none; } .nav a { padding: 6px 0; } .langs { margin-inline-start: auto; padding: 3px; } .langs button { padding: 0 8px; min-height: 36px; font-size: 13px; } .brand img { width: 36px; height: 36px; } .wordmark { font-size: 18px; letter-spacing: 1.5px; } }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; min-height: 46px; padding: 0 20px; border-radius: 12px; background: var(--red); color: var(--on-accent); font: 700 15px var(--f-ui); text-decoration: none; transition: background .15s, transform .1s; }
html[lang="ur"] .btn { font-family: var(--f-ur); font-size: 14px; }
html[lang="ar"] .btn { font-family: var(--f-ar); }
.btn:hover { background: var(--hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.big { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn.wide { min-width: min(320px, 100%); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--steel); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--card); color: var(--text); }
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--steel); cursor: pointer; }
.ibtn:hover { color: var(--text); border-color: var(--muted); }
.ibtn:disabled { opacity: .35; cursor: default; }
input[type=text], input[type=number], input[type=password], input[type=search], input[type=url], input[type=tel], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 15px var(--f-ui); }
textarea { resize: vertical; line-height: 1.5; }
input[type=color] { width: 64px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 4px; cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--red2); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--red); flex: none; }
input[type=file] { color: var(--steel); max-width: 100%; }
input::placeholder, textarea::placeholder { color: #9A9384; }

/* hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; padding-block: 48px 32px; }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pill { align-self: flex-start; background: var(--redsoft); border: 1px solid var(--redline); color: var(--red2); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.hero h1 { font-size: clamp(36px, 5.4vw, 58px); font-weight: 800; letter-spacing: -1.5px; }
html[lang="ur"] .hero h1, html[lang="ar"] .hero h1 { letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--gold); }
.lead { font-size: 18px; color: var(--muted); max-width: 60ch; }
.hero-art { flex: 1 1 260px; min-width: 0; display: flex; justify-content: center; align-items: center; position: relative; min-height: 280px; }
.hero-art img { width: 290px; max-width: 80%; position: relative; filter: drop-shadow(0 18px 36px rgba(200, 140, 0, .28)); }
.halo { position: absolute; width: 330px; height: 330px; max-width: 80%; border-radius: 50%; background: var(--card); top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 760px) { .hero { padding-block: 28px 20px; gap: 20px; } .hero-art { display: none; } }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; font-weight: 600; }
.trust li { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.g { background: var(--ok); } .dot.r { background: var(--red2); } .dot.s { background: var(--steel); }

/* drop zone */
.drop { border: 2px dashed #D6CBB2; background: #FFFFFF; border-radius: 20px; padding: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; text-align: center; transition: border-color .15s, background .15s; }
.drop.hero-drop { justify-content: flex-start; text-align: start; }
.toolpage .drop { flex-direction: column; padding: 44px 20px; }
.toolpage .drop.slim { flex-direction: row; padding: 16px; }
.toolpage .drop.slim .drop-ico, .toolpage .drop.slim .small { display: none; }
.drop.over { border-color: var(--red); background: #FFF9EA; }
.drop-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--redsoft); color: var(--red2); display: flex; align-items: center; justify-content: center; }
.suggest { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card2); color: var(--steel); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; }
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.big { padding: 9px 14px; min-height: 42px; }

/* AI box */
.ai-box { --bg: #16130E; --card: #221E17; --card2: #2A251C; --line: #3D3527; --text: #F7F2E6; --muted: #BFB6A3; --steel: #E7DECA; --red2: #F2C14E; --redsoft: #3A2E12; color: var(--text); background: #16130E; border: 1px solid #6B5320; border-radius: 24px; padding: clamp(18px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; margin-block: 8px 40px; }
.tagline { align-self: flex-start; background: var(--red); color: var(--on-accent); font-weight: 800; font-size: 12px; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; }
.ai-box h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.5px; }
.ask { display: flex; flex-wrap: wrap; gap: 10px; }
.ask input { flex: 999 1 300px; min-width: 0; min-height: 52px; font-size: 16px; }
.ask .btn { flex: 1 1 140px; min-height: 52px; }
.ask-out:empty { display: none; }
.ask-res { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.thinking::after { content: ""; display: inline-block; width: 1.2em; text-align: start; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* tool grid */
.tools-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.tools-head h2, .band h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.5px; }
.search { position: relative; flex: 0 1 340px; min-width: 0; color: var(--muted); }
.search .ic { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); }
.search input { padding-inline-start: 42px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px 6px; }
.filters button { border: 1px solid var(--line); background: var(--card); color: var(--steel); min-height: 44px; padding: 0 16px; border-radius: 10px; font: 700 14px var(--f-ui); cursor: pointer; }
html[lang="ur"] .filters button { font-family: var(--f-ur); font-size: 13px; }
html[lang="ar"] .filters button { font-family: var(--f-ar); }
.filters button.on { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.tgroup { margin-block: 26px; }
.tgroup h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.count { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--card); border-radius: 999px; padding: 2px 9px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; min-width: 0; }
.tcard:hover { border-color: var(--red2); color: var(--text); transform: translateY(-2px); }
.tname { font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tdesc { font-size: 14px; color: var(--muted); }
.tico { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.tico.lg { width: 64px; height: 64px; border-radius: 18px; }
.c-red { background: var(--redsoft); color: var(--red2); }
.c-amber { background: #FEF0D8; color: var(--amber); }
.c-sky { background: #E0F2FE; color: var(--sky); }
.c-green { background: var(--oksoft); color: var(--ok); }
.c-violet { background: #EDE7FB; color: var(--violet); }
.c-steel { background: #EEEBE3; color: #4A4436; }
.badge { font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; line-height: 1.5; }
.badge.ai { background: var(--text); color: #F2C14E; }
.badge.soon { background: #EEEBE3; color: #4A4436; }

/* steps band */
.band { background: var(--bg2); border-top: 1px solid var(--card); border-bottom: 1px solid var(--card); padding-block: 48px; margin-top: 30px; }
.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.num { width: 40px; height: 40px; border-radius: 11px; background: var(--red); color: var(--on-accent); font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; }

/* footer */
.foot { padding-block: 30px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot nav a { color: var(--steel); text-decoration: none; font-weight: 600; padding: 10px 0; }

/* tool page */
.toolpage { padding-bottom: 40px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; margin-block: 20px 10px; min-height: 40px; }
html[dir="rtl"] .backlink .ic { transform: scaleX(-1); }
.thead { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 22px; }
.thead > div { flex: 1 1 280px; min-width: 0; }
.thead h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html[lang="ur"] .thead h1, html[lang="ar"] .thead h1 { letter-spacing: 0; }
.thead .lead { margin-top: 4px; }
.tbody { display: flex; flex-direction: column; gap: 18px; }
.note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.5vw, 24px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.h3 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.work { display: flex; flex-direction: column; gap: 16px; }
.flist, .rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flist li, .rlist li { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.fthumb { width: 48px; height: 56px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; flex: none; }
.thumbc { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rprev { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: #fff; }
.fmeta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fbtns { display: flex; gap: 6px; }
.fileline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fileline .fname { flex: 1 1 160px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label, .flabel { font-weight: 600; font-size: 14px; color: var(--steel); }
.flabel.row { justify-content: space-between; }
.field output { color: var(--text); font-weight: 700; font-size: 14px; }
.field.check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.field.check > label { color: var(--text); font-weight: 500; }
.field.check .small { flex-basis: 100%; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { flex: 1 1 auto; border: 0; background: transparent; color: var(--steel); min-height: 38px; padding: 0 12px; border-radius: 8px; font: 600 14px var(--f-ui); cursor: pointer; }
html[lang="ur"] .seg button { font-family: var(--f-ur); font-size: 13px; }
html[lang="ar"] .seg button { font-family: var(--f-ar); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--red2); }
.gobox { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bar { width: 100%; height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 99px; transition: width .25s; }
.status { color: var(--steel); font-weight: 600; min-height: 1.5em; }
.err { background: var(--badsoft); border: 1px solid var(--badline); color: var(--bad); padding: 14px 16px; border-radius: 12px; }
.results { display: flex; flex-direction: column; gap: 14px; }
.results:empty { display: none; }
.rhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.rhead .h3 .ic { color: var(--ok); }
.next { margin-top: 4px; }
.soonpanel { align-items: flex-start; }
.soonpanel .tgrid { width: 100%; }
.custom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* diff */
.difflist { font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border-radius: 10px; padding: 12px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.dadd { color: var(--ok); } .ddel { color: var(--bad); } .dsame { color: var(--muted); } .dgap { color: #A8A090; }
.difflist .dadd { background: rgba(34, 197, 94, .08); } .difflist .ddel { background: rgba(239, 68, 68, .08); }

/* cropper & qr */
.cropper { width: 100%; display: flex; justify-content: center; background: var(--bg); border-radius: 12px; padding: 10px; overflow: hidden; }
.crop-cv { touch-action: none; cursor: move; max-width: 100%; }
.qr-layout { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; }
.qr-form { flex: 999 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qr-side { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qr-prev { width: 280px; height: 280px; max-width: 100%; border-radius: 12px; background: #fff; }

/* AI output */
.ai-panel { border-color: var(--redline); }
.ai-out { line-height: 1.7; max-width: 75ch; overflow-wrap: anywhere; }
html[lang="ur"] .ai-out, .ai-out[dir="rtl"] { line-height: 2.1; }
.ai-out h3, .ai-out h4, .ai-out h5, .ai-out h6 { font-size: 17px; margin: 14px 0 6px; }
.ai-out p { margin: 0 0 10px; }
.ai-out ul, .ai-out ol { margin: 0 0 10px; padding-inline-start: 22px; }
.ai-out code { background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; padding: 4px; }
.chat-log:empty { display: none; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin: 0; }
.msg ul, .msg ol { margin: 0 0 8px; padding-inline-start: 20px; }
.msg.me { align-self: flex-end; background: var(--text); color: #FFFFFF; border-end-end-radius: 4px; white-space: pre-wrap; }
.msg.ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-end-start-radius: 4px; }
.msg.errmsg { border-color: var(--badline); color: var(--bad); }
.chat-form { display: flex; flex-direction: column; gap: 10px; }
.quiz { display: flex; flex-direction: column; gap: 12px; }
.qcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.qq { font-weight: 700; }
.qopts { display: grid; gap: 8px; }
.qopt { text-align: start; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; padding: 10px 14px; min-height: 44px; font: 15px var(--f-ui); cursor: pointer; }
html[lang="ur"] .qopt { font-family: var(--f-ur); }
.qopt.ok { border-color: var(--ok); background: var(--oksoft); }
.qopt.bad { border-color: var(--bad); background: var(--badsoft); }
.scorecard { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px; }
.scorecard > div:last-child { flex: 1 1 240px; min-width: 0; }
.ring { --p: 0; width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, var(--card) 78%, transparent 80%), conic-gradient(var(--red2) calc(var(--p) * 1%), var(--bg) 0); flex: none; }
.ring span { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ring small { color: var(--muted); }
ul.clean { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
ul.clean.good li::marker { color: var(--ok); }
ul.clean.fix li::marker { color: var(--red2); }

/* info pages */
.prose { max-width: 760px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.prose h1 { font-size: 36px; font-weight: 800; }
.prose p { color: var(--steel); line-height: 1.7; }

/* toasts & modal */
#toasts { position: fixed; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: calc(100vw - 32px); }
.toast { background: var(--card); border: 1px solid var(--line); color: var(--text); padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(40, 30, 10, .16); transition: opacity .4s; }
.toast.err { border-color: var(--badline); background: var(--badsoft); color: var(--bad); }
.toast.out { opacity: 0; }
.modal-back { position: fixed; inset: 0; background: rgba(26, 23, 18, .45); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 16px; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.adbox { min-height: 100px; margin-block: 10px; border-radius: 12px; overflow: hidden; }
.ed, .og-grid, .cropper, .sg-pad { -webkit-user-select: none; user-select: none; }
.ed textarea, .ed input { -webkit-user-select: text; user-select: text; }

/* light theme details */
.top { box-shadow: 0 1px 0 var(--line); border-bottom-color: var(--line); }
.tcard { box-shadow: 0 1px 2px rgba(40, 30, 10, .05); }
.tcard:hover { border-color: var(--red); box-shadow: 0 8px 22px rgba(120, 85, 0, .12); }
.band { background: #FFFFFF; border-color: var(--line); }
.foot { border-top: 1px solid var(--line); background: #FFFFFF; }
.halo { background: radial-gradient(circle, #FFF3D1 0%, #F7F5F0 70%); }
.ai-box .btn { background: var(--red); color: var(--on-accent); }
.ai-box .tcard { box-shadow: none; }
.ai-box .tcard:hover { border-color: #F2C14E; }
.ai-box .chip { background: var(--card2); color: var(--steel); }
.ai-box .badge.ai { background: #F2C14E; color: #16130E; }
.ai-box input { background: #0F0D09; }
.thumbc, .fthumb { border: 1px solid var(--line); }
.ai-panel { border-color: var(--redline); }
.sg-pad { border: 2px dashed #D6CBB2 !important; border-radius: 12px; background: #FFFFFF; }

/* featured NEW tool */
.badge.new { background: #B91C1C; color: #fff; animation: ph-pulse 1.8s ease-in-out infinite; }
@keyframes ph-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(185,28,28,.45); } 50% { box-shadow: 0 0 0 5px rgba(185,28,28,0); } }
.tcard.hot { border: 2px solid var(--red); background: linear-gradient(160deg, #FFF3D1 0%, #FFFFFF 70%); box-shadow: 0 6px 18px rgba(168,116,0,.18); }
.tcard.hot .tname { color: var(--red2); }
.chip.hot, .ai-box .chip.hot { background: #F2C14E; color: #16130E; border-color: #F2C14E; font-weight: 800; }
.feature { display: flex; align-items: center; gap: 18px; margin: 8px 0 26px; padding: 18px 22px; border-radius: 20px; text-decoration: none; color: var(--text);
  background: linear-gradient(110deg, #FFE7A3 0%, #FFF6DC 55%, #FFFFFF 100%); border: 2px solid var(--red); box-shadow: 0 10px 28px rgba(168,116,0,.18); transition: transform .15s, box-shadow .15s; }
.feature:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(168,116,0,.26); color: var(--text); }
.feature .f-ico { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: #16130E; color: #F2C14E; }
.feature .f-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.feature .f-top { display: flex; gap: 6px; }
.feature .f-name { font-size: 24px; font-weight: 800; line-height: 1.2; }
.feature .f-desc { color: var(--steel); font-size: 15px; }
.feature .f-go { flex: none; pointer-events: none; }
@media (max-width: 640px) { .feature { flex-wrap: wrap; padding: 16px; } .feature .f-ico { width: 52px; height: 52px; } .feature .f-name { font-size: 20px; } .feature .f-go { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .badge.new { animation: none; } }

/* SEO write-up under each tool (pdfhydra.com pages) */
.seo { margin-top: 48px; padding-bottom: 32px; }
.seo-in { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.seo h2 { font-size: 24px; font-weight: 800; margin-top: 18px; }
.seo p, .seo li { color: var(--steel); line-height: 1.7; font-size: 16px; }
.seo ol, .seo ul { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.seo-feat { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px !important; }
.seo-feat li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.seo-feat strong { display: block; color: var(--text); margin-bottom: 4px; }
.seo details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; }
.seo summary { cursor: pointer; font-weight: 700; color: var(--text); padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.seo details p { margin: 0 0 12px; }
.seo-rel { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px !important; }
.seo-rel a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--text); font-weight: 700; }
.seo-rel a:hover { border-color: var(--red); }
.seo-rel span { display: block; color: var(--muted); font-weight: 500; font-size: 14px; margin-top: 2px; }
.pre-tools { columns: 3 220px; padding-inline-start: 18px; }
.pre-tools li { break-inside: avoid; margin-bottom: 6px; }

/* ===== File viewers ===== */
.vw { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.vw-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vw-meta .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-meta > span { color: var(--muted); font-size: 13px; }
.vw-kind { font-weight: 800; color: var(--steel); }
.vw-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vw-acts-l { margin-inline-end: 2px; }
.vw-acts:has(> .btn) .vw-acts-l { display: inline; }
.vw-acts:not(:has(> .btn)) { display: none; }
.vw-body { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-height: 240px; overflow: auto; max-height: 82vh; }
.vw-body.vw-flat { background: var(--card); }
.vw-loading { padding: 40px 0; text-align: center; }
.vw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vw-tabs button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font: 600 13px var(--f-ui); color: var(--steel); cursor: pointer; min-height: 36px; }
.vw-tabs button[aria-selected="true"] { background: var(--redsoft); border-color: var(--red2); color: var(--text); }
.vw-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.vw-zl { min-width: 44px; text-align: center; }
.vw-stage { overflow: auto; max-height: 74vh; display: flex; justify-content: center; align-items: flex-start; touch-action: pan-x pan-y; }
.vw-img { display: block; height: auto; image-rendering: auto; }
.vw-checker { background-color: #fff; background-image: linear-gradient(45deg, #e9e5dc 25%, transparent 25%), linear-gradient(-45deg, #e9e5dc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e5dc 75%), linear-gradient(-45deg, transparent 75%, #e9e5dc 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.vw-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .vw-split { grid-template-columns: minmax(0, 1fr) 260px; } }
.vw-side { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; max-height: 74vh; overflow: auto; }
.vw-layers { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.vw-layers li { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--line); }
.vw-lthumb { width: 44px; height: 32px; display: grid; place-items: center; border-radius: 4px; overflow: hidden; flex: none; }
.vw-lthumb canvas { max-width: 44px; max-height: 32px; }
.vw-lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.vw-docx { background: #E9E5DC; padding: 8px 0; }
.vw-docx .docx-wrapper { background: transparent !important; padding: 8px !important; }
.vw-docx section.docx { box-shadow: 0 2px 10px rgba(40,30,10,.18) !important; margin-bottom: 16px !important; }
.vw-sheet { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.vw-grid { border-collapse: collapse; font-size: 13px; color: #1f2937; }
.vw-grid th, .vw-grid td { border: 1px solid #e3ded2; padding: 4px 8px; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.vw-grid thead th { position: sticky; top: 0; background: #F3F0E8; z-index: 1; font-weight: 700; color: #4b5563; }
.vw-grid th.rn { position: sticky; inset-inline-start: 0; background: #F3F0E8; color: #6b7280; font-weight: 600; text-align: center; z-index: 2; }
.vw-grid td.num { text-align: end; font-variant-numeric: tabular-nums; }
.vw-codebox { display: grid; grid-template-columns: auto minmax(0, 1fr); background: #FBFAF6; border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 72vh; }
.vw-code, .vw-gutter { margin: 0; padding: 12px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; }
.vw-code { white-space: pre; color: #1f2937; }
.vw-codebox.wrap .vw-code { white-space: pre-wrap; word-break: break-word; }
.vw-gutter { color: #a8a090; text-align: end; user-select: none; border-inline-end: 1px solid var(--line); background: #F4F1E9; }
.vw-hex { background: #FBFAF6; border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.vw-md { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; max-width: none; }
.vw-web { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.hljs-comment, .hljs-quote { color: #8a8170; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #8a3ffc; }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #0b7a3e; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable { color: #b4530a; }
.hljs-title, .hljs-section, .hljs-type, .hljs-class .hljs-title, .hljs-function .hljs-title { color: #1d4ed8; }
.hljs-attribute, .hljs-property, .hljs-meta { color: #a16207; }
.hljs-deletion { color: #b91c1c; }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
.vw-files { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
.vw-files th { text-align: start; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.vw-files td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vw-path { word-break: break-all; }
.vw-fbtns { white-space: nowrap; text-align: end; }
.vw-video { display: block; width: 100%; max-height: 72vh; background: #000; border-radius: 10px; }
.vw-audiobox { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 10px; color: var(--steel); }
.vw-audio { width: min(560px, 100%); }
.vw-book { height: 70vh; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vw-toc { width: auto; max-width: 60%; min-height: 40px; }
.vw-3d { display: block; border-radius: 10px; touch-action: none; }
.vw-dxf { height: 70vh; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: grab; touch-action: none; }
.vw-dxf svg { width: 100%; height: 100%; display: block; }