/* ==========================================================================
   Manarty Tools — mobile-first, RTL-native (CSS logical properties)
   Brand: #0aa2dd (cyan)  ·  #f5a623 (amber)
   ========================================================================== */

:root{
  --brand:#0aa2dd;
  --brand-dark:#0784b6;
  --brand-ink:#05506e;
  --accent:#f5a623;
  --accent-dark:#d98c0c;

  --bg:#ffffff;
  --bg-soft:#f4f8fb;
  --bg-sunk:#eaf3f8;
  --card:#ffffff;
  --text:#12232e;
  --text-soft:#4d6473;
  --text-mute:#758b99;
  --line:#dbe7ef;

  --ok:#159d63;
  --warn:#d98c0c;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,42,58,.06), 0 6px 20px rgba(16,42,58,.07);
  --shadow-lg:0 2px 6px rgba(16,42,58,.08), 0 18px 44px rgba(16,42,58,.12);

  --wrap:1120px;
  /* Tajawal covers both Arabic and Latin, so one stack serves both
     directions and the UI stays visually consistent across languages. */
  --font:"Tajawal", "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
  --font-ar:var(--font);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1720; --bg-soft:#131f2a; --bg-sunk:#0a1218; --card:#16232f;
    --text:#e8f1f7; --text-soft:#a9c0cf; --text-mute:#7e97a7; --line:#25384a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1720; --bg-soft:#131f2a; --bg-sunk:#0a1218; --card:#16232f;
  --text:#e8f1f7; --text-soft:#a9c0cf; --text-mute:#7e97a7; --line:#25384a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; }
a{ color:var(--brand-dark); text-underline-offset:3px; }
a:hover{ color:var(--brand); }
h1,h2,h3,h4{ line-height:1.3; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(1.65rem,5vw,2.5rem); }
h2{ font-size:clamp(1.35rem,3.6vw,1.8rem); margin-top:1.8em; }
h3{ font-size:clamp(1.12rem,2.6vw,1.3rem); margin-top:1.5em; }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px; }
.skip-link{ position:absolute; inset-inline-start:-9999px; }
.skip-link:focus{ inset-inline-start:8px; top:8px; z-index:200; background:var(--brand); color:#fff; padding:10px 16px; border-radius:8px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--bg);
  border-block-end:1px solid var(--line);
}
.hdr{ display:flex; align-items:center; gap:12px; min-height:60px; }
.brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; margin-inline-end:auto; }
/* Explicit width + aspect ratio: the inline SVG has no intrinsic size in a
   flex row, so without this it collapses to a sliver. */
/* logo.png is 903x158 (5.715:1). Width is derived from height via
   aspect-ratio so the box is reserved before the image decodes. */
.brand img{
  height:28px; width:auto; aspect-ratio:903/158; flex:0 0 auto; display:block;
  object-fit:contain;
}
@media (min-width:480px){ .brand img{ height:34px; } }
@media (min-width:860px){ .brand img{ height:38px; } }
.hdr-spacer{ display:none; }

.lang-switch{ display:flex; gap:4px; background:var(--bg-sunk); padding:3px; border-radius:999px; }
.lang-switch a{
  display:block; padding:5px 12px; border-radius:999px; font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--text-soft); line-height:1.4;
}
.lang-switch a[aria-current="true"]{ background:var(--brand); color:#fff; }

.theme-toggle,.nav-toggle{
  background:var(--bg-sunk); border:1px solid var(--line); color:var(--text);
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  cursor:pointer; font-size:1.05rem; padding:0;
}
.nav-toggle{ display:grid; }
@media (min-width:860px){ .nav-toggle{ display:none; } }

.site-nav{ display:none; }
.site-nav.is-open{ display:block; padding-block:8px 14px; border-block-start:1px solid var(--line); }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.site-nav a{
  display:block; padding:11px 12px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--text); font-weight:600; font-size:.98rem;
}
.site-nav a:hover{ background:var(--bg-soft); }
@media (min-width:860px){
  /* min-width:0 lets this flex item shrink; without it long tool names in the
     nav force the header wider than the viewport. */
  .site-nav{ display:block !important; border:0 !important; padding:0 !important;
             flex:0 1 auto; min-width:0; overflow:hidden; }
  .site-nav ul{ flex-direction:row; gap:2px; flex-wrap:nowrap; }
  .site-nav a{ white-space:nowrap; }
}
/* Belt and braces: the header row itself must never exceed the viewport. */
.hdr{ max-width:100%; }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(170deg,var(--bg-soft),var(--bg)); padding-block:34px 30px; border-block-end:1px solid var(--line); }
.hero p.lede{ font-size:1.06rem; color:var(--text-soft); max-width:62ch; margin-bottom:0; }
.breadcrumbs{ font-size:.83rem; color:var(--text-mute); margin-bottom:10px; }
.breadcrumbs a{ color:var(--text-mute); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--brand); text-decoration:underline; }
.breadcrumbs span[aria-hidden]{ margin-inline:6px; }

main{ padding-block:26px 44px; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.tool-card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.tool-card .ico{ font-size:1.6rem; line-height:1; display:block; margin-bottom:8px; }
.tool-card h3{ margin:0 0 5px; font-size:1.06rem; }
.tool-card p{ margin:0; font-size:.9rem; color:var(--text-soft); line-height:1.6; }
.tool-card .soon{ display:inline-block; margin-top:9px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; background:var(--bg-sunk); color:var(--text-mute); padding:3px 9px; border-radius:999px; }

/* ---------- Calculator ---------- */
.calc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; margin-block:8px 30px;
}
.calc-tabs{ display:flex; overflow-x:auto; background:var(--bg-sunk); border-block-end:1px solid var(--line);
  scrollbar-width:none; }
.calc-tabs::-webkit-scrollbar{ display:none; }
.calc-tabs button{
  flex:0 0 auto; background:none; border:0; padding:13px 16px; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:600; color:var(--text-soft);
  border-block-end:3px solid transparent; white-space:nowrap;
}
.calc-tabs button[aria-selected="true"]{ color:var(--brand); border-block-end-color:var(--brand); background:var(--card); }

.calc-panel{ padding:20px 18px 22px; }
.calc-panel[hidden]{ display:none; }
.calc-q{ font-size:1.06rem; font-weight:600; margin:0 0 16px; color:var(--text); }

.field-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.field{ flex:1 1 130px; min-width:0; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-soft); margin-bottom:6px; }
.field input{
  width:100%; font-family:inherit; font-size:1.15rem; font-weight:600; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; -moz-appearance:textfield;
}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field input:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.field input.err{ border-color:#e05252; }

.btn-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.btn{
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  padding:12px 22px; border-radius:var(--radius-sm); border:2px solid transparent; min-height:46px;
}
.btn-primary{ background:var(--brand); color:#fff; flex:1 1 auto; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-ghost{ background:transparent; color:var(--text-soft); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* Result */
.result{ margin-top:20px; border-block-start:1px solid var(--line); padding-top:18px; }
.result[hidden]{ display:none; }
.result-value{
  font-size:clamp(1.9rem,7vw,2.7rem); font-weight:800; color:var(--brand); line-height:1.15;
  word-break:break-word; margin-bottom:6px;
}
/* Formulas are always LTR maths, even on an RTL page. `unicode-bidi:isolate`
   stops the bidi algorithm reordering the operands, which otherwise makes
   "(20 ÷ 100) × 850 = 170" render as "(20 ÷ 100) × 170 = 850". */
.result-formula{
  font-size:.92rem; color:var(--text-soft); background:var(--bg-soft);
  border-inline-start:3px solid var(--accent); padding:10px 13px; border-radius:var(--radius-sm);
  margin-bottom:16px; overflow-x:auto;
  direction:ltr; unicode-bidi:isolate; text-align:left;
}
.copy-btn{ background:var(--bg-sunk); border:1px solid var(--line); color:var(--text-soft);
  font-family:inherit; font-size:.8rem; font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer; }
.copy-btn:hover{ border-color:var(--brand); color:var(--brand); }

/* Chart */
.chart-box{ margin-top:6px; background:var(--bg-soft); border-radius:var(--radius); padding:16px; }
.chart-flex{ display:flex; flex-direction:column; align-items:center; gap:16px; }
@media (min-width:560px){ .chart-flex{ flex-direction:row; justify-content:center; gap:30px; } }
.donut{ flex:0 0 auto; }
.donut circle{ transition:stroke-dasharray .5s cubic-bezier(.4,0,.2,1); }
.donut-label{ font-weight:800; fill:var(--text); font-family:var(--font); }
.donut-sub{ fill:var(--text-mute); font-family:var(--font); }
.legend{ display:flex; flex-direction:column; gap:9px; font-size:.88rem; min-width:0; }
.legend div{ display:flex; align-items:center; gap:9px; color:var(--text-soft); }
.legend i{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; }
.bar-track{ height:13px; background:var(--bg-sunk); border-radius:999px; overflow:hidden; margin-top:14px; }
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:999px;
  width:0; transition:width .5s cubic-bezier(.4,0,.2,1); }

/* ---------- Article / content ---------- */
.content{ max-width:76ch; }
.content ul,.content ol{ margin:0 0 1.2em; padding-inline-start:1.4em; }
.content li{ margin-bottom:.5em; }
.content strong{ color:var(--text); }
.callout{
  background:var(--bg-soft); border:1px solid var(--line); border-inline-start:4px solid var(--brand);
  border-radius:var(--radius-sm); padding:15px 17px; margin:1.5em 0;
}
.callout.tip{ border-inline-start-color:var(--accent); }
.callout p:last-child{ margin-bottom:0; }
.callout strong{ display:block; margin-bottom:5px; }

.formula-box{
  background:var(--bg-sunk); border-radius:var(--radius-sm); padding:15px 17px; margin:1.2em 0;
  font-size:1.05rem; font-weight:600; text-align:center; color:var(--brand-ink);
  direction:ltr; unicode-bidi:isolate; overflow-x:auto;
}
/* Worked-example calculations inside tables are LTR maths too. */
html[dir="rtl"] table td{ unicode-bidi:plaintext; }
:root[data-theme="dark"] .formula-box,
:root:not([data-theme="light"]) .formula-box{ color:var(--text); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .formula-box{ color:var(--brand-ink); } }

.table-scroll{ overflow-x:auto; margin:1.3em 0; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:340px; }
th,td{ padding:11px 13px; text-align:start; border-block-end:1px solid var(--line); }
th{ background:var(--bg-soft); font-weight:700; font-size:.85rem; }
tbody tr:hover{ background:var(--bg-soft); }

details.faq{
  border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:9px; background:var(--card);
}
details.faq summary{
  cursor:pointer; padding:14px 16px; font-weight:600; font-size:1rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:1.35rem; color:var(--brand); flex:0 0 auto; line-height:1; }
details.faq[open] summary::after{ content:"−"; }
details.faq .faq-body{ padding:0 16px 15px; color:var(--text-soft); font-size:.95rem; }
details.faq .faq-body p:last-child{ margin-bottom:0; }

/* ---------- Tag chips ---------- */
.tag-list{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; padding:0; }
.tag-list a{
  display:inline-block; font-size:.78rem; font-weight:600; text-decoration:none;
  background:var(--bg-sunk); color:var(--text-soft); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px;
}
.tag-list a:hover{ border-color:var(--brand); color:var(--brand); background:var(--card); }
.tag-count{ font-size:.75rem; color:var(--text-mute); font-weight:400; }

/* ---------- Metric tiles (ROAS / RTL stats) ---------- */
.metric-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-top:16px; }
@media (min-width:620px){ .metric-grid{ grid-template-columns:repeat(3,1fr); } }
.metric-grid:empty{ display:none; }
.metric{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px; min-width:0;
}
.metric-label{ display:block; font-size:.75rem; color:var(--text-mute); margin-bottom:3px; line-height:1.4; }
.metric-value{ display:block; font-size:1.08rem; font-weight:700; color:var(--text); word-break:break-word; }
.metric.is-good .metric-value{ color:var(--ok); }
.metric.is-bad .metric-value{ color:#d9534f; }

/* ---------- UTM builder ---------- */
.preset-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.preset-btn{
  font-family:inherit; font-size:.83rem; font-weight:600; cursor:pointer;
  background:var(--bg-sunk); color:var(--text-soft); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px;
}
.preset-btn:hover{ border-color:var(--brand); color:var(--brand); }
.preset-btn.is-on{ background:var(--brand); color:#fff; border-color:var(--brand); }

.utm-field{ margin-bottom:14px; }
.utm-field input{
  width:100%; font-family:inherit; font-size:.98rem; font-weight:500; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px;
}
.utm-field input:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.field-hint{ display:block; font-size:.75rem; color:var(--text-mute); margin-top:5px; }
.req{ color:#d9534f; margin-inline-start:2px; }
.hint-note{ font-size:.83rem; color:var(--text-mute); margin:0 0 16px; }

.toggle-row{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem;
  color:var(--text-soft); cursor:pointer; margin-bottom:9px; line-height:1.5; }
.toggle-row input{ margin:2px 0 0; flex:0 0 auto; width:17px; height:17px; accent-color:var(--brand); }

.result-label{ font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-mute); margin-bottom:8px; }
.utm-output{
  display:block; width:100%; min-height:64px; background:var(--bg-sunk);
  border:1px dashed var(--line); border-radius:var(--radius-sm); padding:13px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85rem; line-height:1.6; color:var(--brand-dark);
  word-break:break-all; white-space:pre-wrap;
}
:root[data-theme="dark"] .utm-output{ color:#6fd0f5; }
.utm-actions{ margin-top:12px; }
.utm-error{ color:#d9534f; font-size:.85rem; margin:10px 0 0; }

/* ---------- RTL fixer ---------- */
.rtl-area{
  width:100%; font-family:inherit; font-size:1rem; line-height:1.8; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:13px; resize:vertical; min-height:120px;
}
.rtl-area:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.rtl-area[readonly]{ background:var(--bg-sunk); }

.opt-set{ border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; margin:18px 0; }
.opt-set legend{ font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-mute); padding-inline:6px; }
.radio-row{ margin-top:12px; padding-top:12px; border-block-start:1px solid var(--line); }

.preview-box{ margin-top:20px; }
.ad-preview{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; font-size:1.02rem; line-height:1.9; min-height:60px;
  white-space:pre-wrap; word-break:break-word; box-shadow:var(--shadow);
}

/* ---------- Prompt optimizer ---------- */
.pr-input{
  width:100%; font-family:inherit; font-size:.98rem; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px;
}
.pr-input:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.pr-input[hidden]{ display:none; }

.pr-build-grid{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){ .pr-build-grid{ grid-template-columns:1fr 1fr; } }
.pr-build-grid .field{ margin-bottom:14px; }

.pr-score{ margin:20px 0; }
.pr-checks{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:5px 16px; grid-template-columns:1fr; font-size:.85rem; }
@media (min-width:560px){ .pr-checks{ grid-template-columns:1fr 1fr; } }
.pr-checks li{ display:flex; align-items:center; gap:8px; margin:0; }
.pr-checks .is-ok, .pr-checks li.is-ok{ color:var(--ok); }
.pr-checks li.is-miss{ color:var(--text-mute); }
.pr-checks li span{ font-weight:700; flex:0 0 auto; }

.pr-directives{ margin-top:18px; }
.pr-dir-actions{ display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.pr-dir-group{ margin-bottom:16px; }
.pr-dir-group:last-child{ margin-bottom:0; }
.pr-dir-title{
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--brand); margin:0 0 8px; padding-block-end:6px;
  border-block-end:1px solid var(--line);
}

.pr-issues{ margin-top:16px; }
.pr-issues:empty{ display:none; }
.pr-fixed{ list-style:none; margin:0 0 12px; padding:0;
  display:flex; flex-wrap:wrap; gap:7px; }
.pr-fixed li{
  font-size:.8rem; font-weight:600; background:var(--bg-sunk); color:var(--text-soft);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin:0;
}

/* ---------- Password generator ---------- */
.pw-output-wrap{ margin-bottom:20px; }
.pw-output{
  display:block; width:100%; min-height:66px; background:var(--bg-sunk);
  border:2px dashed var(--line); border-radius:var(--radius-sm); padding:16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:1.25rem; font-weight:600; line-height:1.5; color:var(--text);
  word-break:break-all; letter-spacing:.02em;
}
@media (min-width:560px){ .pw-output{ font-size:1.45rem; } }
.pw-output .pw-d{ color:var(--brand); }      /* digits */
.pw-output .pw-s{ color:var(--accent-dark); } /* symbols */
:root[data-theme="dark"] .pw-output .pw-s{ color:var(--accent); }
.pw-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pw-actions .btn{ flex:1 1 auto; }

.pw-strength{ margin-bottom:22px; }
.pw-strength-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; font-size:.85rem; margin-bottom:7px; }
.pw-level{ font-weight:700; }
.pw-lv-1{ color:#d9534f; } .pw-lv-2{ color:#e8833a; } .pw-lv-3{ color:var(--warn); }
.pw-lv-4{ color:#4c9a4c; } .pw-lv-5{ color:var(--ok); }

.pw-bars{ display:flex; gap:5px; }
.pw-bars span{ flex:1; height:7px; border-radius:999px; background:var(--bg-sunk);
  transition:background .25s ease; }
.pw-bars span.on.lv-1{ background:#d9534f; }
.pw-bars span.on.lv-2{ background:#e8833a; }
.pw-bars span.on.lv-3{ background:var(--warn); }
.pw-bars span.on.lv-4{ background:#4c9a4c; }
.pw-bars span.on.lv-5{ background:var(--ok); }

.pw-len-field label{ font-size:.88rem; }
.pw-len-field strong{ color:var(--brand); font-size:1.05rem; }
.pw-range{
  width:100%; margin:10px 0 12px; accent-color:var(--brand);
  height:26px; background:transparent; cursor:pointer;
}
.pw-len-presets{ display:flex; gap:7px; flex-wrap:wrap; }
.pw-len-preset{ min-width:52px; }

.pw-opt-grid{ display:grid; gap:2px 16px; grid-template-columns:1fr; }
@media (min-width:560px){ .pw-opt-grid{ grid-template-columns:1fr 1fr; } }
.pw-opt-grid[hidden]{ display:none; }
.pw-error{ color:#d9534f; font-size:.85rem; margin:12px 0 0; font-weight:600; }

.pw-bulk{ margin-top:22px; }
.pw-bulk-row{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius-sm); margin-bottom:7px;
}
.pw-bulk-row code{
  flex:1 1 auto; min-width:0; font-size:.88rem; word-break:break-all;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--text-soft);
}
.pw-bulk-copy{ flex:0 0 auto; }

/* ---------- Counter: limit bars & frequency ---------- */
.limits-box, .freq-box{ margin-top:22px; }
.limit-row{ margin-bottom:13px; }
.limit-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.83rem; margin-bottom:5px; }
.limit-name{ color:var(--text-soft); font-weight:600; }
.limit-num{ color:var(--text-mute); font-variant-numeric:tabular-nums; white-space:nowrap; }
.limit-track{ height:7px; background:var(--bg-sunk); border-radius:999px; overflow:hidden; }
.limit-fill{ height:100%; border-radius:999px; transition:width .25s ease; background:var(--ok); }
.limit-row.is-warn .limit-fill{ background:var(--warn); }
.limit-row.is-over .limit-fill{ background:#d9534f; }
.limit-diff{ display:block; font-size:.75rem; margin-top:4px; color:var(--text-mute); }
.limit-row.is-over .limit-diff{ color:#d9534f; font-weight:600; }
.limit-note{ font-size:.82rem; color:var(--text-mute); background:var(--bg-soft);
  border-inline-start:3px solid var(--accent); padding:9px 12px;
  border-radius:var(--radius-sm); margin:0 0 14px; line-height:1.6; }

/* ---------- Selects & day grid ---------- */
.unit-select{
  width:100%; font-family:inherit; font-size:1rem; font-weight:600; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; cursor:pointer;
}
.unit-select:focus{ outline:none; border-color:var(--brand); background:var(--card); }

.day-grid{ display:grid; gap:4px 14px; grid-template-columns:1fr 1fr; margin-top:12px; }
@media (min-width:620px){ .day-grid{ grid-template-columns:repeat(4,1fr); } }
.day-grid .toggle-row{ margin-bottom:4px; font-size:.85rem; }

/* ---------- Disclaimer ---------- */
.disclaimer{
  background:#fff8ec; border:1px solid #f0d9a8; border-inline-start:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:16px 18px; margin:20px 0 30px;
  font-size:.88rem; line-height:1.65; color:#6b5424;
}
.disclaimer .disclaimer-title{
  font-size:.95rem; font-weight:700; margin:0 0 8px; color:#8a6413; letter-spacing:0;
}
.disclaimer p{ margin:0 0 9px; }
.disclaimer p:last-child{ margin-bottom:0; }
.disclaimer strong{ color:#6b4f13; }
.disclaimer .disclaimer-liability{
  font-size:.83rem; opacity:.9; padding-top:8px; border-block-start:1px dashed #e4cb99;
}
:root[data-theme="dark"] .disclaimer{
  background:#2a2113; border-color:#5c4a24; color:#e0cda3;
}
:root[data-theme="dark"] .disclaimer .disclaimer-title{ color:#f5c869; }
:root[data-theme="dark"] .disclaimer strong{ color:#f7d9a0; }
:root[data-theme="dark"] .disclaimer .disclaimer-liability{ border-block-start-color:#5c4a24; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .disclaimer{
    background:#2a2113; border-color:#5c4a24; color:#e0cda3;
  }
  :root:not([data-theme="light"]) .disclaimer .disclaimer-title{ color:#f5c869; }
  :root:not([data-theme="light"]) .disclaimer strong{ color:#f7d9a0; }
  :root:not([data-theme="light"]) .disclaimer .disclaimer-liability{ border-block-start-color:#5c4a24; }
}

/* Compact repeat notice in the footer */
.foot-disclaimer{
  margin-top:18px; padding-top:14px; border-block-start:1px solid var(--line);
  font-size:.8rem; color:var(--text-mute); line-height:1.6; max-width:none;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-soft); border-block-start:1px solid var(--line); padding-block:30px; margin-top:40px; font-size:.9rem; }
.foot-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:700px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); margin-bottom:11px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:7px; }
.site-footer a{ color:var(--text-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--brand); }
.foot-about p{ color:var(--text-soft); font-size:.9rem; max-width:44ch; }
.foot-bottom{ margin-top:24px; padding-top:16px; border-block-start:1px solid var(--line);
  color:var(--text-mute); font-size:.84rem; text-align:center; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print{ .site-header,.site-footer,.btn-row,.calc-tabs,.lang-switch{ display:none !important; } }