/* QMO Tools Pro — design system
   Logical properties are used throughout so the same CSS serves LTR (en) and RTL (ar). */

@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --font-body: "Jakarta", "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  --text-hero: clamp(2rem, 1.3rem + 3vw, 3.25rem);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --container: 1200px;
  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 160ms;

  /* light theme */
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f2f8;
  --surface-3: #e6e9f2;
  --border: #dfe3ee;
  --border-strong: #c7cdde;
  --text: #121726;
  --text-2: #4a5268;
  --text-3: #5b6376;
  --primary: #3346f0;
  --primary-hover: #2636d1;
  --primary-soft: #eceefe;
  --primary-text: #ffffff;
  --accent: #e08a00;
  --success: #12805c; --success-soft: #e3f5ee;
  --warning: #9a5b00; --warning-soft: #fff3dc;
  --danger: #c9302c; --danger-soft: #fdeceb;
  --focus: #3346f0;
  --shadow-sm: 0 1px 2px rgba(18,23,38,.06);
  --shadow: 0 1px 2px rgba(18,23,38,.05), 0 6px 18px -8px rgba(18,23,38,.14);
  --shadow-lg: 0 20px 50px -20px rgba(18,23,38,.35);
  --hero-glow: radial-gradient(60% 80% at 15% 0%, rgba(51,70,240,.10), transparent 60%), radial-gradient(50% 70% at 95% 10%, rgba(224,138,0,.08), transparent 60%);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0e17;
  --bg-elev: #111522;
  --surface: #131826;
  --surface-2: #1a2030;
  --surface-3: #232a3d;
  --border: #252c40;
  --border-strong: #353e57;
  --text: #e9ecf5;
  --text-2: #b0b7cb;
  --text-3: #9da5ba;
  --primary: #7d8bff;
  --primary-hover: #97a2ff;
  --primary-soft: #1d2348;
  --primary-text: #0b0e17;
  --accent: #ffb547;
  --success: #45c99a; --success-soft: #0f2d24;
  --warning: #f2b45a; --warning-soft: #33250c;
  --danger: #ff7b74; --danger-soft: #3a1614;
  --focus: #97a2ff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);
  --hero-glow: radial-gradient(60% 80% at 15% 0%, rgba(125,139,255,.14), transparent 60%), radial-gradient(50% 70% at 95% 10%, rgba(255,181,71,.07), transparent 60%);
  color-scheme: dark;
}
html[lang="ar"] { --font-body: "Plex Arabic", "Jakarta", system-ui, "Segoe UI", Tahoma, sans-serif; }
/* CJK: Latin text keeps Jakarta, CJK glyphs fall back to the best system font of each platform. */
html[lang="ja"] { --font-body: "Jakarta", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
html[lang="zh-Hans"] { --font-body: "Jakarta", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; }
html[lang="ko"] { --font-body: "Jakarta", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
html:is([lang="ja"], [lang="zh-Hans"], [lang="ko"]) :is(h1, h2, h3, h4, .brand, .hero h1) { letter-spacing: 0; }
html:is([lang="ja"], [lang="zh-Hans"], [lang="ko"]) .hero h1 { max-width: 15em; }
html:is([lang="ja"], [lang="zh-Hans"], [lang="ko"]) body { line-height: 1.75; }
html[lang="ko"] :is(h1, h2, h3, p, li, summary) { word-break: keep-all; }
html[lang="de"] :is(h1, h2, h3, .t-name, .btn) { hyphens: auto; }
:is(h1, h2, h3) { overflow-wrap: anywhere; } /* long compound words (German) must not widen the page */
html[lang="ja"] :is(h1, h2) { word-break: auto-phrase; } /* Chrome 119+: break Japanese headings at phrase boundaries */

/* category hues (icons only — restrained) */
.c-image { --cat: #d9480f; --cat-soft: #fff0e8; }
.c-pdf { --cat: #c92a2a; --cat-soft: #fdecec; }
.c-text { --cat: #2b8a3e; --cat-soft: #e9f7ec; }
.c-developer { --cat: #3346f0; --cat-soft: #eceefe; }
.c-seo { --cat: #0b7285; --cat-soft: #e3f6f9; }
.c-social { --cat: #c2255c; --cat-soft: #fcebf2; }
.c-qr { --cat: #343a40; --cat-soft: #eceef1; }
.c-calculators { --cat: #9c5d00; --cat-soft: #fff4e0; }
.c-security { --cat: #5f3dc4; --cat-soft: #f0ebff; }
.c-files { --cat: #1864ab; --cat-soft: #e7f1fb; }
[data-theme="dark"] .c-image { --cat: #ff8f5c; --cat-soft: #36200f; }
[data-theme="dark"] .c-pdf { --cat: #ff8787; --cat-soft: #3a1717; }
[data-theme="dark"] .c-text { --cat: #69db7c; --cat-soft: #13301b; }
[data-theme="dark"] .c-developer { --cat: #8f9bff; --cat-soft: #1d2348; }
[data-theme="dark"] .c-seo { --cat: #4fd1e6; --cat-soft: #0d2c33; }
[data-theme="dark"] .c-social { --cat: #f783ac; --cat-soft: #36152a; }
[data-theme="dark"] .c-qr { --cat: #ced4da; --cat-soft: #262b33; }
[data-theme="dark"] .c-calculators { --cat: #ffc35c; --cat-soft: #33260c; }
[data-theme="dark"] .c-security { --cat: #b197fc; --cat-soft: #261d45; }
[data-theme="dark"] .c-files { --cat: #74c0fc; --cat-soft: #0f2538; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; }
html[lang="ar"] body { line-height: 1.75; }
main { flex: 1; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 5px; overflow-wrap: anywhere; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; font-size: .75em; color: var(--text-2); background: var(--surface); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }
ul, ol { padding-inline-start: 1.25rem; }
::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; background: var(--primary); color: var(--primary-text); padding: .5rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { top: .75rem; color: var(--primary-text); }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon.flip-rtl { transform: scaleX(-1); }
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 3rem, var(--container)); } }
.muted { color: var(--text-2); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand-mark { width: 32px; height: 32px; color: var(--primary); }
.brand-pro { font-weight: 600; color: var(--text-3); }
@media (max-width: 399px) { .brand-pro { display: none; } .header-inner { gap: var(--sp-2); } }
.main-nav { display: none; margin-inline-start: var(--sp-4); }
.main-nav a { color: var(--text-2); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: .45rem .7rem; border-radius: var(--radius-sm); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }
.search-trigger { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding-inline: .75rem; min-width: 40px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.search-trigger .label, .search-trigger kbd { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; text-decoration: none; font: inherit; font-size: var(--text-sm); font-weight: 700; }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.lang-btn { width: auto; padding-inline: .7rem; gap: .35rem; display: inline-flex; align-items: center; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.menu-btn { display: inline-grid; }
@media (min-width: 640px) { .search-trigger { min-width: 220px; } .search-trigger .label { display: inline; } .search-trigger kbd { display: inline; margin-inline-start: auto; } }
@media (min-width: 1024px) { .main-nav { display: flex; gap: .15rem; } .menu-btn { display: none; } }

.mobile-nav { border-top: 1px solid var(--border); background: var(--bg-elev); padding: var(--sp-4) 0 var(--sp-6); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.mobile-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.mobile-nav a:hover { background: var(--surface-2); }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* ---------- buttons & forms ---------- */
.btn { --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .55rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); font: inherit; font-size: var(--text-sm); font-weight: 650; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; }
.btn:hover { --b-bg: var(--surface-2); color: var(--b-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { --b-bg: var(--primary); --b-fg: var(--primary-text); --b-bd: var(--primary); }
.btn-primary:hover { --b-bg: var(--primary-hover); --b-bd: var(--primary-hover); }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; color: var(--text-2); }
.btn-ghost:hover { --b-bg: var(--surface-2); }
.btn-danger { --b-fg: var(--danger); }
.btn-sm { min-height: 34px; padding: .35rem .7rem; font-size: var(--text-xs); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.field { display: grid; gap: .35rem; min-width: 0; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.range-head > label { font-size: var(--text-sm); font-weight: 650; color: var(--text); }
.range-head > output { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text-2); }
.field > label, .field-label { font-size: var(--text-sm); font-weight: 650; color: var(--text); }
.field .hint { font-size: var(--text-xs); color: var(--text-3); }
.input, .select, .textarea { width: 100%; font: inherit; font-size: var(--text-base); color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .6rem .75rem; min-height: 44px; transition: border-color var(--dur), box-shadow var(--dur); }
.textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.textarea.code, .input.code { font-family: var(--font-mono); font-size: .875rem; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 2rem; }
[dir="rtl"] .select { background-position: 13px 55%, 18px 55%; }
input[type="color"].input { padding: .25rem; height: 44px; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-sm); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.stack { display: grid; gap: var(--sp-4); }
.stack > * { min-width: 0; }
.inline-fields { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: end; }
.inline-fields > .field { flex: 1 1 160px; }

/* dropzone */
.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: .4rem; padding: var(--sp-8) var(--sp-4); border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone .icon { width: 32px; height: 32px; color: var(--primary); }
.dropzone strong { color: var(--text); }

/* status */
.status { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: var(--text-sm); border: 1px solid transparent; }
.status:empty { display: none; }
.status[data-type="info"] { background: var(--primary-soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.status[data-type="success"] { background: var(--success-soft); color: var(--text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.status[data-type="error"] { background: var(--danger-soft); color: var(--text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.status[data-type="warning"] { background: var(--warning-soft); color: var(--text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.status[data-type="loading"]::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--primary); border-inline-end-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* output blocks */
.output { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4); overflow: auto; font-family: var(--font-mono); font-size: .85rem; white-space: pre-wrap; word-break: break-word; min-height: 3rem; max-height: 520px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .9rem; }
.stat .v { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; display: block; word-break: break-all; }
.stat .k { font-size: var(--text-xs); color: var(--text-3); font-weight: 600; }
.kv { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kv th, .kv td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.kv th { color: var(--text-2); font-weight: 600; width: 38%; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); text-align: start; white-space: nowrap; }
.data-table th { background: var(--surface-2); font-weight: 650; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.file-item { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.file-item > .btn-row { margin-inline-start: auto; }
.file-item .name { flex: 1; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-item .meta { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.file-item img, .file-item canvas { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.thumb { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem; display: grid; gap: .4rem; font-size: var(--text-xs); text-align: center; }
.thumb canvas, .thumb img { width: 100%; height: 140px; object-fit: contain; background: #fff; border-radius: 4px; }
.thumb.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.thumb .btn-row { justify-content: center; }
.compare { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.cmp-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cmp-stage { --pos: 50%; position: relative; display: grid; max-height: 520px; overflow: hidden; border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.cmp-img { grid-area: 1 / 1; width: 100%; height: 100%; max-height: 520px; object-fit: contain; display: block; }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.cmp-line { grid-area: 1 / 1; justify-self: start; width: 2px; height: 100%; margin-inline-start: calc(var(--pos) - 1px); background: var(--primary); box-shadow: 0 0 0 1px rgba(255,255,255,.7); pointer-events: none; }
.cmp-range { width: 100%; accent-color: var(--primary); }
.preview-box { background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); display: grid; place-items: center; min-height: 200px; overflow: auto; }
.preview-box img, .preview-box canvas { max-height: 480px; object-fit: contain; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-3); }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); font-size: var(--text-xs); }
.swatch .chip { height: 72px; }
.swatch button { width: 100%; border: 0; background: transparent; font: inherit; font-family: var(--font-mono); padding: .45rem; cursor: pointer; color: var(--text); }
.swatch button:hover { background: var(--surface-2); }
.diff-out { font-family: var(--font-mono); font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.diff-out .add { background: color-mix(in srgb, var(--success) 18%, transparent); display: block; }
.diff-out .del { background: color-mix(in srgb, var(--danger) 18%, transparent); display: block; }
.diff-out ins { background: color-mix(in srgb, var(--success) 25%, transparent); text-decoration: none; }
.diff-out del { background: color-mix(in srgb, var(--danger) 25%, transparent); }
.meter { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .25s var(--ease), background .25s; }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); font-weight: 650; padding: .15rem .55rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.badge.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.new { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.md-preview { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); min-height: 200px; overflow: auto; overflow-wrap: anywhere; font-family: var(--font-body); }
.md-preview pre { background: var(--surface-2); padding: var(--sp-3); border-radius: 6px; overflow: auto; }
.md-preview blockquote { margin: 0 0 1rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--border-strong); color: var(--text-2); }
.md-preview table { border-collapse: collapse; } .md-preview td, .md-preview th { border: 1px solid var(--border); padding: .3rem .6rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- layout pieces ---------- */
.breadcrumbs { font-size: var(--text-sm); color: var(--text-3); margin: var(--sp-5) 0 var(--sp-3); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); text-decoration: underline; }
.section { padding-block: var(--sp-10); }
.section-sm { padding-block: var(--sp-6); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: .25rem 0 0; color: var(--text-2); font-size: var(--text-sm); }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--primary); margin-bottom: var(--sp-2); }
html[lang="ar"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }

/* hero */
.hero { background: var(--hero-glow); border-bottom: 1px solid var(--border); padding-block: var(--sp-12) var(--sp-10); }
.hero h1 { font-size: var(--text-hero); max-width: 18ch; letter-spacing: -0.03em; margin-bottom: var(--sp-4); }
html[lang="ar"] .hero h1 { letter-spacing: 0; max-width: 20ch; }
.hero .lead { font-size: var(--text-lg); color: var(--text-2); max-width: 60ch; }
.hero-search { position: relative; max-width: 680px; margin-top: var(--sp-6); }
.hero-search .icon { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.hero-search input { height: 58px; font-size: 1.05rem; padding-inline: 3rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--border); }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); padding: 0; list-style: none; color: var(--text-2); font-size: var(--text-sm); }
.hero-points li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-points .icon { color: var(--success); width: 1.1em; height: 1.1em; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-4); }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; }
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .icon { width: 1em; height: 1em; }

/* cards */
.tool-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tool-card { position: relative; display: flex; gap: .85rem; align-items: flex-start; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); min-height: 96px; }
.tool-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); }
.tool-card .t-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); flex: none; }
.tool-card .t-icon .icon { width: 22px; height: 22px; }
.tool-card .t-body { min-width: 0; padding-inline-end: 1.6rem; }
.tool-card .t-name { display: block; font-weight: 700; font-size: .975rem; line-height: 1.3; margin-bottom: .2rem; }
.tool-card .t-desc { display: block; font-size: var(--text-sm); color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card a.t-link { color: inherit; text-decoration: none; }
.tool-card a.t-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fav-btn { position: absolute; top: .55rem; inset-inline-end: .55rem; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; }
.fav-btn:hover { background: var(--surface-2); color: var(--accent); }
.fav-btn[aria-pressed="true"] { color: var(--accent); }
.fav-btn[aria-pressed="true"] .icon { fill: currentColor; }
.fav-btn .icon { width: 18px; height: 18px; }
.cat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cat-card { display: grid; gap: .5rem; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color var(--dur), box-shadow var(--dur); }
.cat-card:hover { border-color: var(--cat); box-shadow: var(--shadow); color: var(--text); }
.cat-card .c-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); }
.cat-card .c-ico .icon { width: 22px; height: 22px; }
.cat-card strong { font-size: 1rem; }
.cat-card span { font-size: var(--text-sm); color: var(--text-2); }
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-2); background: var(--surface); }
.empty-state .icon { width: 28px; height: 28px; margin: 0 auto var(--sp-2); color: var(--text-3); }
.empty-state p { margin: 0; font-size: var(--text-sm); }
.guide-card { display: grid; gap: .4rem; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.guide-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); color: var(--text); }
.guide-card span { color: var(--text-2); font-size: var(--text-sm); }
.trust-strip { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust-item { display: flex; gap: .8rem; align-items: flex-start; }
.trust-item .icon { width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.trust-item strong { display: block; }
.trust-item span { font-size: var(--text-sm); color: var(--text-2); }

/* tool page */
.tool-head { display: flex; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.tool-head .t-title { display: flex; gap: var(--sp-4); align-items: flex-start; min-width: 0; flex: 1 1 420px; }
.tool-head .t-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); flex: none; }
.tool-head .t-icon .icon { width: 26px; height: 26px; }
.tool-head h1 { margin-bottom: .35rem; }
.tool-head .lead { color: var(--text-2); margin: 0; max-width: 70ch; }
.fav-toggle[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.fav-toggle[aria-pressed="true"] .icon { fill: currentColor; }
.tool-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .tool-layout.has-aside { grid-template-columns: minmax(0, 1fr) 300px; } }
.tool-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); overflow-wrap: anywhere; }
@media (min-width: 768px) { .tool-panel { padding: var(--sp-6); } }
.tool-panel .panel-sub { border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.privacy-note { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-sm); color: var(--text-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: .7rem .9rem; }
.privacy-note .icon { color: var(--success); margin-top: 2px; width: 18px; height: 18px; }
.tool-aside { display: none; }
@media (min-width: 1100px) { .tool-aside { display: block; } .tool-aside .sticky { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: var(--sp-4); } }
.aside-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); font-size: var(--text-sm); }
.aside-card h2 { font-size: var(--text-base); margin-bottom: var(--sp-2); }
.aside-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.aside-card a { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: 6px; color: var(--text-2); text-decoration: none; }
.aside-card a:hover { background: var(--surface-2); color: var(--text); }
.prose { max-width: 76ch; }
.prose h2 { margin-top: var(--sp-8); }
.prose li { margin-bottom: .35rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); margin-top: var(--sp-8); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.steps li { counter-increment: s; display: flex; gap: .8rem; align-items: flex-start; }
.steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: var(--text-sm); }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: var(--sp-2); }
.faq summary { cursor: pointer; padding: .85rem 1rem; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 1rem 1rem; color: var(--text-2); }
.examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.example { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); background: var(--surface); }
.example strong { display: block; font-size: var(--text-sm); }
.example p { overflow-wrap: anywhere; margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-2); }

/* ads */
.ad-slot { --ad-w: 728px; --ad-h: 90px; margin: var(--sp-6) auto; width: 100%; max-width: var(--ad-w); display: grid; justify-items: center; gap: .3rem; }
.ad-slot .ad-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; justify-self: start; }
html[lang="ar"] .ad-slot .ad-label { letter-spacing: 0; font-size: var(--text-xs); }
.ad-slot .ad-box { width: 100%; min-height: var(--ad-h); display: grid; place-items: center; overflow: hidden; }
.ad-slot.is-placeholder .ad-box { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--surface-3) 50%, transparent) 10px 20px); color: var(--text-3); font-size: var(--text-xs); text-align: center; padding: .5rem; }
@media (max-width: 767px) { .ad-slot { max-width: var(--ad-w-m, 320px); } .ad-slot .ad-box { min-height: var(--ad-h-m, 50px); } .ad-slot.no-mobile { display: none; } }
.ad-slot.is-empty { display: none; }
.tool-aside .ad-slot { margin: 0; }

/* search dialog */
.search-dialog { border: 0; padding: 0; background: transparent; width: min(100% - 1.5rem, 640px); max-height: min(80vh, 640px); margin: 8vh auto auto; color: var(--text); overflow: visible; }
.search-dialog::backdrop { background: rgba(8,10,18,.55); backdrop-filter: blur(2px); }
.search-box { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: min(80vh, 640px); }
.search-input-row { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; border-bottom: 1px solid var(--border); }
.search-input-row .icon { color: var(--text-3); }
.search-input-row input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--text); height: 58px; outline: none; min-width: 0; }
.search-filters { display: flex; gap: .35rem; padding: .6rem 1rem; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.search-filters .chip { padding: .25rem .65rem; font-size: var(--text-xs); white-space: nowrap; }
.search-results { overflow-y: auto; padding: .5rem; list-style: none; margin: 0; }
.search-results .group-label { font-size: var(--text-xs); color: var(--text-3); font-weight: 700; padding: .6rem .6rem .3rem; text-transform: uppercase; letter-spacing: .06em; }
html[lang="ar"] .search-results .group-label { text-transform: none; letter-spacing: 0; }
.search-results a { display: flex; align-items: center; gap: .75rem; padding: .6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.search-results a .t-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); flex: none; }
.search-results a .t-icon .icon { width: 18px; height: 18px; }
.search-results a .r-name { font-weight: 650; font-size: var(--text-sm); display: block; }
.search-results a .r-cat { font-size: var(--text-xs); color: var(--text-3); display: block; }
.search-results a .r-star { margin-inline-start: auto; color: var(--accent); }
.search-results a .r-star .icon { fill: currentColor; width: 14px; height: 14px; }
.search-results [aria-selected="true"] a, .search-results a:hover { background: var(--primary-soft); }
.search-results mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 2px; }
.search-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-3); flex-wrap: wrap; }
.search-empty { padding: 2rem 1rem; text-align: center; color: var(--text-2); font-size: var(--text-sm); }

/* toast */
.toast-region { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 60; display: grid; gap: .5rem; pointer-events: none; }
.toast { background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius-sm); font-size: var(--text-sm); box-shadow: var(--shadow-lg); animation: toast-in .18s var(--ease); max-width: 320px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* footer */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); margin-top: var(--sp-16); padding-block: var(--sp-10) var(--sp-6); font-size: var(--text-sm); }
.footer-grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--text-sm); margin-bottom: var(--sp-3); color: var(--text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-3); }

/* page header */
.page-hero { padding-block: var(--sp-6) var(--sp-6); }
.page-hero .lead { color: var(--text-2); font-size: var(--text-lg); max-width: 70ch; }
.cat-hero { display: flex; gap: var(--sp-4); align-items: flex-start; }
.cat-hero .c-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--cat-soft); color: var(--cat); flex: none; }
.cat-hero .c-ico .icon { width: 28px; height: 28px; }
.lang-choice { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 640px; margin: var(--sp-8) auto; }
.lang-choice a { display: grid; gap: .3rem; padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); text-align: center; font-size: 1.25rem; font-weight: 700; }
.lang-choice a:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.lang-choice a span { font-size: var(--text-sm); color: var(--text-2); font-weight: 500; }

.qr-out { display: grid; place-items: center; background: #fff; border-radius: var(--radius-sm); padding: var(--sp-4); border: 1px solid var(--border); min-height: 240px; }
.qr-out canvas { image-rendering: pixelated; max-width: 280px; width: 100%; height: auto; }
.social-preview { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; max-width: 520px; }
.social-preview .sp-img { aspect-ratio: 1.91 / 1; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.social-preview .sp-img img { width: 100%; height: 100%; object-fit: cover; }
.social-preview .sp-body { padding: .75rem 1rem; display: grid; gap: .2rem; }
.social-preview .sp-domain { font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; }
.social-preview .sp-title { font-weight: 700; line-height: 1.3; }
.social-preview .sp-desc { font-size: var(--text-sm); color: var(--text-2); line-height: 1.4; }
.serp { max-width: 600px; background: #fff; color: #202124; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-family: Arial, sans-serif; }
.serp .s-site { display: flex; align-items: center; gap: .6rem; font-size: 14px; }
.serp .s-fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; display: grid; place-items: center; font-size: 12px; color: #5f6368; }
.serp .s-url { color: #4d5156; font-size: 12px; }
.serp .s-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin: .3rem 0 .2rem; }
.serp .s-desc { color: #4d5156; font-size: 14px; line-height: 1.58; }
.post-mock { max-width: 520px; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); background: var(--bg-elev); }
.post-mock .pm-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.post-mock .pm-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; }
.post-mock .pm-text { white-space: pre-wrap; word-break: break-word; }
.post-mock .pm-more { color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print { .site-header, .site-footer, .ad-slot, .tool-aside { display: none !important; } }

/* ---- key/value lists, hash list, regex, misc tool widgets ---- */
.kv-list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.kv-list:empty { display: none; }
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: var(--sp-3); align-items: center; padding: .55rem .8rem; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.kv:last-child { border-bottom: 0; }
.kv:nth-child(even) { background: var(--surface-2); }
.kv .k { color: var(--text-3); font-weight: 600; }
.kv .v { font-family: var(--font-mono); word-break: break-all; min-width: 0; }
.kv .v.plain { font-family: var(--font-body); word-break: normal; }
.hash-list { display: grid; gap: var(--sp-2); }
.hash-list:empty { display: none; }
.hash-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--sp-3); align-items: center; padding: .55rem .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.hash-row code { font-family: var(--font-mono); word-break: break-all; font-size: .8rem; }
.hash-row .k { font-weight: 650; color: var(--text-2); }
.regex-out { font-family: var(--font-mono); font-size: .85rem; white-space: pre-wrap; word-break: break-word; min-height: 3rem; }
.regex-out mark { background: color-mix(in srgb, var(--accent) 32%, transparent); color: inherit; border-radius: 2px; outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.regex-out mark:nth-of-type(even) { background: color-mix(in srgb, var(--primary) 26%, transparent); outline-color: color-mix(in srgb, var(--primary) 55%, transparent); }
.data-table td.mono, .data-table th.mono { font-family: var(--font-mono); font-size: .8rem; }
.data-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.md-preview li.task { list-style: none; margin-inline-start: -1.2rem; }
.md-preview img { max-width: 100%; }
.diff-out .hunk { color: var(--text-3); display: block; }
.diff-out .ctx { display: block; }
.diff-out .add, .diff-out .del, .diff-out .ctx { padding-inline: .5rem; }
.diff-out .ln { color: var(--text-3); user-select: none; display: inline-block; min-width: 3.2em; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr auto; } .kv .k { grid-column: 1 / -1; } .hash-row { grid-template-columns: 1fr auto; } .hash-row .k { grid-column: 1 / -1; } }

/* ---- SEO tools ---- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--text-sm); }
.check-list .ck { display: flex; gap: .55rem; align-items: flex-start; }
.ck-dot { width: .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem; flex: none; background: var(--text-3, var(--text-2)); }
.ck-ok .ck-dot { background: var(--success); } .ck-warn .ck-dot { background: var(--warning); } .ck-error .ck-dot { background: var(--danger); } .ck-info .ck-dot { background: var(--primary); }
.card-preview { display: flex; justify-content: center; padding: var(--sp-4); background: var(--surface-2); border-radius: var(--radius-lg, 12px); border: 1px dashed var(--border); }
.cp { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: var(--text); }
.cp-small { display: grid; grid-template-columns: 128px 1fr; }
.cp-media { background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); font-size: var(--text-xs); overflow: hidden; }
.cp-large .cp-media { aspect-ratio: 1.91 / 1; }
.cp-small .cp-media { aspect-ratio: 1; }
.cp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-body { padding: .7rem .9rem; display: grid; gap: .2rem; min-width: 0; }
.cp-host { font-size: var(--text-xs); color: var(--text-2); letter-spacing: .02em; }
.cp-title { font-size: var(--text-base); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-desc { font-size: var(--text-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.serp-card { background: #fff; color: #202124; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 1rem 1.1rem; overflow-x: auto; }
.serp { max-width: 600px; font-family: Arial, sans-serif; }
.serp-card.is-mobile .serp { max-width: 520px; }
.serp-url { font-size: 14px; color: #4d5156; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin-bottom: 4px; }
.serp-card.is-mobile .serp-title { font-size: 18px; }
.serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; }
.outline { display: grid; gap: .3rem; }
.ol-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); padding-block: .2rem; border-bottom: 1px solid var(--border); }
.ol-row.has-issue { background: var(--warning-soft); }
.tree details { margin-inline-start: 1rem; } .tree > details { margin-inline-start: 0; }
.tree summary { cursor: pointer; } .tree .tl { margin-inline-start: 1rem; word-break: break-word; }
.tree .tk { color: var(--text-2); } .tree .tt { color: var(--primary); font-weight: 600; }

/* ---- Social tools ---- */
.meter[data-state="ok"] > span { background: var(--success); }
.meter[data-state="near"] > span { background: var(--warning); }
.meter[data-state="over"] > span { background: var(--danger); }
.input-sm, .select.input-sm { min-height: 2.1rem; padding: .25rem .5rem; font-size: var(--text-sm); }
.post-preview { display: flex; justify-content: center; padding: 1rem; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-lg, 12px); }
.pp { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pp-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; min-width: 0; overflow-wrap: anywhere; }
.pp-head > * { min-width: 0; }
.pp-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.pp-img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.pp-text { margin: 0; padding: .7rem .9rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.5; }
.pp-more { color: var(--text-2); font-weight: 600; }
.data-table th[scope="row"] { text-align: start; font-weight: 600; }

/* ---- QR tools ---- */
.qr-preview { display: grid; place-items: center; min-height: 12rem; padding: 1rem; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-lg, 12px); }
.qr-preview:empty { display: none; }
.qr-preview canvas { width: min(280px, 100%); height: auto; image-rendering: pixelated; border-radius: 4px; }
.qr-video { position: relative; max-width: 480px; border-radius: var(--radius-lg, 12px); overflow: hidden; background: #000; }
.qr-video video { display: block; width: 100%; height: auto; }
.qr-video::after { content: ""; position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; pointer-events: none; }

/* ---- Calculators ---- */
.result-big { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem; min-height: 3.25rem; }
.result-main { font-size: var(--text-lg, 1.25rem); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); word-break: break-word; }
.result-formula { font-size: var(--text-sm, .875rem); color: var(--text-2); }
.result-big[data-state="empty"] .result-main { color: var(--text-2); }
.result-big[data-state="error"] .result-formula { color: var(--danger, #b91c1c); }
.stat .v[data-cat="normal"] { color: var(--success, #15803d); }
.tz-list { display: grid; gap: .5rem; }
.tz-list:empty { display: none; }
.tz-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) 2fr auto auto; gap: .75rem; align-items: center; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface); }
.tz-row.is-src { border-color: var(--primary); background: var(--surface-2); }
.tz-name { font-weight: 600; overflow-wrap: anywhere; }
.tz-time { font-variant-numeric: tabular-nums; }
.tz-off { color: var(--text-2); font-size: var(--text-sm, .875rem); white-space: nowrap; }
@media (max-width: 560px) { .tz-row { grid-template-columns: 1fr auto; } .tz-time, .tz-off { grid-column: 1; } .tz-row > :last-child { grid-row: 1; grid-column: 2; } }

/* ---- Security & files ---- */
.hash-row.is-match { border-color: var(--success); box-shadow: inset 3px 0 0 var(--success); }
[dir="rtl"] .hash-row.is-match { box-shadow: inset -3px 0 0 var(--success); }
.pw-list { display: grid; gap: var(--sp-2); }
.pw-list:empty { display: none; }
.pw-row code { font-size: .9rem; letter-spacing: .02em; }
.hex-view pre { margin: 0; font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; padding: .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; white-space: pre; }
.file-list { display: grid; gap: .35rem; max-height: 22rem; overflow: auto; }
.file-list:empty { display: none; }
.file-row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); }
.file-name { overflow-wrap: anywhere; }
.uri-preview { display: grid; place-items: center; padding: 1rem; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.uri-preview img { max-width: 100%; max-height: 12rem; }

/* Mobile tool header: icon beside the title, intro spans full width */
@media (max-width: 560px) {
  .tool-head .t-title { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center; }
  .tool-head .t-title > div { display: contents; }
  .tool-head .t-title .lead { grid-column: 1 / -1; margin-top: var(--sp-2); }
}

/* ---------- language menu ---------- */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu[open] > summary { border-color: var(--border-strong); color: var(--text); }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; margin: 0; padding: .35rem; list-style: none; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); display: grid; gap: 2px; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .7rem; border-radius: 6px; color: var(--text); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.lang-list a:hover, .lang-list a:focus-visible { background: var(--surface-2); }
.lang-list a[aria-current="true"] { color: var(--primary); }
.lang-list .icon { width: 1rem; height: 1rem; }

/* ---------- AI translation notice ---------- */
.ai-notice { background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-2); }
.ai-notice .container { display: flex; gap: .6rem; align-items: flex-start; padding-block: .6rem; }
.ai-notice .icon { margin-top: .2rem; color: var(--text-3); }
.ai-notice p { margin: 0; }

/* ---------- Sign PDF ---------- */
.sign-pad { display: grid; gap: var(--space-3, 0.75rem); padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface-2); }
.sign-canvas { width: 100%; max-width: 480px; aspect-ratio: 720 / 220; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sign-preview { max-height: 64px; max-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
.sign-pagelabel { display: inline-flex; align-items: center; gap: 0.5rem; }
.sign-pageno { width: 5.5rem; }
.sign-pad [aria-pressed="true"] { background: var(--accent); color: #111; border-color: var(--accent); }
.sign-pages { display: grid; gap: 1rem; justify-items: center; }
.sign-page { position: relative; width: 100%; max-width: 900px; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 0.25); border-radius: 2px; overflow: hidden; }
.sign-page canvas { display: block; width: 100%; height: 100%; }
.sign-layer { position: absolute; inset: 0; }
.sign-pagebadge { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; font-size: var(--text-xs); color: #333; background: rgb(255 255 255 / 0.8); padding: 1px 6px; border-radius: 10px; pointer-events: none; }
.sign-item { position: absolute; box-sizing: border-box; border: 1px dashed var(--accent); touch-action: none; cursor: move; color: #111; background: rgb(255 255 255 / 0.01); }
.sign-item:focus-visible, .sign-item:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.sign-item img, .sign-item svg { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.sign-text { width: 100%; height: 100%; box-sizing: border-box; border: 0; background: transparent; color: #111; padding: 0 4px; margin: 0; font-family: system-ui, "Segoe UI", Arial, "Noto Sans Arabic", sans-serif; cursor: text; }
.sign-text:focus { outline: none; }
.sign-del { position: absolute; inset-block-start: -11px; inset-inline-end: -11px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.sign-del svg { width: 12px; height: 12px; }
.sign-handle { position: absolute; inset-inline-end: -7px; inset-block-end: -7px; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; }

/* ---------- Invoice generator ---------- */
.inv-items { display: grid; gap: 0.5rem; }
.inv-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.inv-head { font-size: var(--text-xs); color: var(--text-muted); padding-inline-end: 2.4rem; }
.inv-row .input { min-width: 0; }
@media (max-width: 640px) { .inv-row { grid-template-columns: 1fr 1fr 1fr auto; } .inv-row .inv-desc { grid-column: 1 / -1; } .inv-head { display: none; } }
.inv-preview { overflow-x: auto; padding: 0.5rem 0; }
.invoice-sheet { background: #fff; color: #111; max-width: 820px; margin-inline: auto; padding: 2rem; border-radius: 4px; box-shadow: 0 1px 8px rgb(0 0 0 / 0.25); font-family: system-ui, "Segoe UI", Arial, "Noto Sans Arabic", sans-serif; font-size: 14px; line-height: 1.45; box-sizing: border-box; }
.invoice-sheet h2 { margin: 0 0 0.5rem; font-size: 1.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: #111; }
.invoice-sheet[dir="rtl"] h2 { letter-spacing: 0; text-transform: none; }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.inv-logo { max-height: 90px; max-width: 220px; object-fit: contain; display: block; }
.inv-title { text-align: end; }
.inv-meta { display: grid; grid-template-columns: auto auto; gap: 0.15rem 1rem; margin: 0; justify-content: end; }
.inv-meta dt { color: #555; } .inv-meta dd { margin: 0; font-weight: 600; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.inv-label { color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2rem; }
.invoice-sheet[dir="rtl"] .inv-label { letter-spacing: 0; text-transform: none; font-size: 13px; }
.inv-name { font-weight: 700; } .inv-pre { white-space: pre-line; overflow-wrap: anywhere; }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.inv-table th { background: #f1f1f1; color: #111; font-weight: 700; padding: 0.5rem; text-align: end; border-bottom: 2px solid #111; }
.inv-table td { padding: 0.5rem; text-align: end; border-bottom: 1px solid #ddd; vertical-align: top; font-variant-numeric: tabular-nums; }
.inv-table .inv-l { text-align: start; }
.inv-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; margin: 0 0 1rem; margin-inline-start: auto; width: min(100%, 340px); }
.inv-totals dt, .inv-totals dd { margin: 0; } .inv-totals dd { text-align: end; font-variant-numeric: tabular-nums; }
.inv-strong { font-weight: 700; border-top: 1px solid #111; padding-top: 0.3rem; margin-top: 0.2rem; } .inv-due { font-size: 1.1em; }
.inv-note, .inv-thanks { color: #555; font-size: 12px; } .inv-notes { margin: 1rem 0; } .inv-thanks { margin: 1.5rem 0 0; text-align: center; }
#print-root { display: none; }
@media print {
  body.has-print-root > *:not(#print-root) { display: none !important; }
  body.has-print-root #print-root { display: block !important; }
  body.has-print-root { background: #fff !important; }
  #print-root .invoice-sheet { box-shadow: none; max-width: none; padding: 0; margin: 0; border-radius: 0; }
  @page { margin: 14mm; }
}

/* ---------- Background remover ---------- */
.bg-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .bg-preview { grid-template-columns: 1fr; } }
.bg-pane { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.bg-pane canvas { width: 100%; height: auto; display: block; border-radius: 6px; max-height: 70vh; object-fit: contain; }
.bg-checker { background: conic-gradient(#d0d0d0 25%, #fff 0 50%, #d0d0d0 0 75%, #fff 0) 0 0 / 20px 20px; border-radius: 6px; }
.bg-checker canvas { background: transparent; }

/* ---------- Passport photo maker ---------- */
.pp-preview { display: flex; justify-content: center; padding: 0.5rem 0; }
.pp-canvas { max-width: 100%; height: auto; cursor: grab; touch-action: none; box-shadow: 0 1px 8px rgb(0 0 0 / 0.3); border-radius: 2px; background: #fff; }
.pp-canvas:active { cursor: grabbing; }