/* ==========================================================================
   Our Daily Tools — mobile-first, RTL-native (CSS logical properties)
   Brand: #7c3aed (royal purple)  ·  #f59e0b (warm amber)
   ========================================================================== */

:root{
  --brand:#7c3aed;
  --brand-dark:#6d28d9;
  --brand-ink:#4c1d95;
  --accent:#f59e0b;
  --accent-dark:#d97706;

  --bg:#ffffff;
  --bg-soft:#f8f5ff;
  --bg-sunk:#efe9ff;
  --card:#ffffff;
  --text:#241433;
  --text-soft:#62546f;
  --text-mute:#85768f;
  --line:#e3d9ef;

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

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(76,29,149,.06), 0 6px 20px rgba(76,29,149,.08);
  --shadow-lg:0 2px 6px rgba(76,29,149,.09), 0 18px 44px rgba(76,29,149,.14);

  --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:#130d1d; --bg-soft:#1b1228; --bg-sunk:#0d0814; --card:#21162f;
    --text:#f7f1ff; --text-soft:#cbb9dd; --text-mute:#9c88ae; --line:#3b2950;
    --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:#130d1d; --bg-soft:#1b1228; --bg-sunk:#0d0814; --card:#21162f;
  --text:#f7f1ff; --text-soft:#cbb9dd; --text-mute:#9c88ae; --line:#3b2950;
  --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 1200x433. Width is derived from height via
   aspect-ratio so the box is reserved before the image decodes. */
.brand img{
  height:38px; width:auto; aspect-ratio:1200/433; flex:0 0 auto; display:block;
  object-fit:contain;
}
@media (min-width:480px){ .brand img{ height:44px; } }
@media (min-width:860px){ .brand img{ height:50px; } }
.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; }
/* Overlays the page below the header instead of sitting in the flex row —
   without position:absolute it was a normal-flow block that pushed all
   page content down whenever it opened on mobile. */
.site-nav.is-open{
  display:block; position:absolute; inset-inline:0; top:100%;
  padding:8px 16px 14px; border-block-start:1px solid var(--line);
  background:var(--bg); box-shadow:var(--shadow-lg); max-height:calc(100vh - 100%);
  overflow-y:auto;
}
.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; position:static !important; border:0 !important;
             padding:0 !important; box-shadow:none !important; max-height:none !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 ---------- */
/* At the end of a page the tag block gets a rule and heading to separate it
   from the content above; in the hero it is just the bare chip list. */
.tag-block{ margin-top:2.5em; padding-top:20px; border-block-start:1px solid var(--line); }
.tag-block-title{
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-mute); margin:0 0 12px;
}
.tag-block .tag-list{ margin:0; }
.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:#c4b5fd; }
.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);
}

/* ---------- Articles ---------- */
.article-meta{ font-size:.86rem; color:var(--text-mute); margin:10px 0 0; }
.article-meta a{ color:var(--brand-dark); }
.article-thumb{ margin:0 0 26px; }
.article-thumb img{ width:100%; height:auto; border-radius:var(--radius); display:block; }
.card-thumb{ width:100%; height:auto; border-radius:var(--radius-sm); margin-bottom:11px; display:block; }
.card-date{ display:block; font-size:.78rem; color:var(--text-mute); margin-top:9px; }

.pagination{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:32px; }
.pagination .page-numbers{
  display:inline-block; padding:8px 14px; border:1px solid var(--line);
  border-radius:var(--radius-sm); text-decoration:none; color:var(--text-soft);
  font-size:.9rem; font-weight:600; background:var(--card);
}
.pagination .page-numbers:hover{ border-color:var(--brand); color:var(--brand); }
.pagination .page-numbers.current{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pagination .dots{ border-color:transparent; background:transparent; }

/* ---------- Category / topic archives ---------- */
.term-hero{ padding-block:28px 34px; }
.term-hero-grid{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.term-kicker{ display:block; color:var(--brand-dark); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
.term-hero h1{ margin-bottom:8px; }
.term-stat{ flex:0 0 auto; min-width:112px; padding:14px 20px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.term-stat strong{ display:block; color:var(--brand); font-size:2rem; line-height:1; }
.term-stat span{ display:block; color:var(--text-mute); font-size:.78rem; margin-top:6px; }
.archive-heading{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.archive-heading h2{ margin:0; font-size:1.35rem; }
.archive-heading a{ flex:0 0 auto; font-size:.85rem; font-weight:600; text-decoration:none; }
.archive-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.archive-card{ min-width:0; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.archive-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.archive-card > a{ display:block; height:100%; color:inherit; text-decoration:none; }
.archive-card-media{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-sunk); }
.archive-card-media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.archive-card:hover .archive-card-media img{ transform:scale(1.025); }
.archive-card-placeholder{ display:grid; place-items:center; background:linear-gradient(145deg,var(--bg-sunk),var(--bg-soft)); }
.archive-card-placeholder span{ color:var(--brand); font-size:2rem; opacity:.65; }
.archive-card-body{ padding:18px; }
.archive-card-body time{ display:block; color:var(--text-mute); font-size:.76rem; margin-bottom:7px; }
.archive-card-body h3{ margin:0 0 7px; font-size:1.12rem; }
.archive-card-body p{ color:var(--text-soft); font-size:.9rem; line-height:1.65; margin:0 0 14px; }
.archive-read{ display:inline-flex; align-items:center; gap:7px; color:var(--brand-dark); font-size:.84rem; font-weight:700; }
html[dir="rtl"] .archive-read b{ transform:rotate(180deg); }
@media (min-width:640px){ .archive-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .archive-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .term-hero-grid{ align-items:flex-start; flex-direction:column; } .term-stat{ min-width:96px; } }

/* ---------- 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; } }

/* ---------- Schedule / timetable builder ---------- */
.field-label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-soft); margin-bottom:6px; padding:0; }
.sch-owner-type{ display:flex; gap:18px; flex-wrap:wrap; border:0; padding:0; margin:0 0 16px; }

.sch-day-pick{ border:0; padding:0; margin:0 0 16px; }
.sch-day-pick-row{ display:flex; gap:8px; flex-wrap:wrap; }
.sch-day-chip{
  display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--text-soft);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer;
}
.sch-day-chip input{ accent-color:var(--brand); width:15px; height:15px; margin:0; }
.sch-day-chip:has(input:checked){ border-color:var(--brand); color:var(--brand); background:var(--card); }

/* Colour schemes: a curated set of preset palettes rather than a raw colour
   picker, so the exported grid always looks intentional. Each scheme is a
   handful of CSS custom properties scoped to .sch-capture-area, consumed by
   the table rules below — swapping the scheme never touches per-cell
   backgrounds directly. */
.sch-scheme-row{ display:flex; gap:10px; flex-wrap:wrap; }
.sch-scheme-swatch{
  width:40px; height:40px; border-radius:50%; border:3px solid var(--line); cursor:pointer;
  padding:0; background:linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%);
  box-shadow:inset 0 0 0 2px var(--card);
}
.sch-scheme-swatch[aria-pressed="true"]{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand); }

.sch-capture-area{
  padding:4px; border-radius:var(--radius-sm); background:var(--sch-bg, var(--card));
}

.sch-table-scroll{ margin-top:4px; }
.sch-table{ width:100%; border-collapse:collapse; min-width:640px; }
.sch-table th,.sch-table td{ border:1px solid var(--sch-border, var(--line)); padding:0; }
.sch-table thead th{
  background:var(--sch-head-bg, var(--bg-sunk)); color:var(--sch-head-fg, var(--text));
  font-size:.85rem; font-weight:700; padding:10px 8px; white-space:nowrap;
}
.sch-time-col{ background:var(--sch-time-bg, var(--bg-soft)); font-size:.78rem; color:var(--sch-time-fg, var(--text-mute));
  font-weight:600; padding:8px; white-space:nowrap; text-align:center; direction:ltr; unicode-bidi:isolate; }
.sch-cell{ min-width:120px; vertical-align:top; background:var(--sch-cell-bg, var(--card)); }
.sch-table tbody tr:nth-child(even) .sch-cell{ background:var(--sch-alt-bg, var(--sch-cell-bg, var(--card))); }
.sch-input{
  display:block; width:100%; box-sizing:border-box; border:0; border-block-end:1px solid var(--sch-border, var(--line));
  background:transparent; font-family:inherit; color:var(--sch-cell-fg, var(--text)); padding:7px 8px; font-size:.85rem;
}
.sch-input::placeholder{ color:var(--sch-cell-fg, var(--text)); opacity:.45; }
.sch-input:last-child{ border-block-end:0; }
.sch-input-a{ font-weight:700; }
.sch-input-b,.sch-input-c{ opacity:.75; font-size:.8rem; }
.sch-input:focus{ outline:2px solid var(--brand); outline-offset:-2px; }
.sch-break-row .sch-break-cell{
  background:var(--sch-head-bg, var(--bg-sunk)); color:var(--sch-head-fg, var(--text-mute));
  text-align:center; font-size:.8rem; font-weight:700; padding:6px; letter-spacing:.03em; text-transform:uppercase;
}

/* Preset palettes. Names are internal keys read from data-scheme. */
.sch-capture-area[data-scheme="pink"]{
  --sch-bg:#fff0f6; --sch-head-bg:#f472b6; --sch-head-fg:#ffffff; --sch-cell-bg:#fff7fb;
  --sch-alt-bg:#ffe4f0; --sch-time-bg:#fbcfe8; --sch-time-fg:#9d174d; --sch-cell-fg:#831843; --sch-border:#f9a8d4;
}
.sch-capture-area[data-scheme="sky"]{
  --sch-bg:#eff8ff; --sch-head-bg:#3b82f6; --sch-head-fg:#ffffff; --sch-cell-bg:#f5faff;
  --sch-alt-bg:#dbeafe; --sch-time-bg:#bfdbfe; --sch-time-fg:#1e40af; --sch-cell-fg:#1e3a5f; --sch-border:#93c5fd;
}
.sch-capture-area[data-scheme="mint"]{
  --sch-bg:#effdf5; --sch-head-bg:#10b981; --sch-head-fg:#ffffff; --sch-cell-bg:#f4fef9;
  --sch-alt-bg:#d1fae5; --sch-time-bg:#a7f3d0; --sch-time-fg:#065f46; --sch-cell-fg:#064e3b; --sch-border:#6ee7b7;
}
.sch-capture-area[data-scheme="sun"]{
  --sch-bg:#fffbeb; --sch-head-bg:#f59e0b; --sch-head-fg:#ffffff; --sch-cell-bg:#fffdf5;
  --sch-alt-bg:#fef3c7; --sch-time-bg:#fde68a; --sch-time-fg:#92400e; --sch-cell-fg:#78350f; --sch-border:#fcd34d;
}
.sch-capture-area[data-scheme="lavender"]{
  --sch-bg:#f7f5ff; --sch-head-bg:#8b5cf6; --sch-head-fg:#ffffff; --sch-cell-bg:#fbfaff;
  --sch-alt-bg:#ede9fe; --sch-time-bg:#ddd6fe; --sch-time-fg:#5b21b6; --sch-cell-fg:#4c1d95; --sch-border:#c4b5fd;
}
.sch-capture-area[data-scheme="slate"]{
  --sch-bg:#f8fafc; --sch-head-bg:#334155; --sch-head-fg:#ffffff; --sch-cell-bg:#ffffff;
  --sch-alt-bg:#f1f5f9; --sch-time-bg:#e2e8f0; --sch-time-fg:#334155; --sch-cell-fg:#1e293b; --sch-border:#cbd5e1;
}

.sch-export-title{ margin-top:24px; border-block-start:1px solid var(--line); padding-top:18px; }
.sch-export-row{ margin-top:12px; }

/* Print (Ctrl+P) fallback: hide everything on the page except the built
   grid, so a plain browser print produces a clean, printable table too —
   the primary PDF/image export path uses jsPDF/html2canvas instead and
   captures #mn-sch-capture directly without needing this stylesheet. */
@media print{
  body.mn-print-schedule > *:not(main),
  body.mn-print-schedule main > *:not(.wrap),
  body.mn-print-schedule .wrap > *:not(.calc),
  body.mn-print-schedule .calc-panel > *:not(.sch-result),
  body.mn-print-schedule .sch-result > *:not(.sch-capture-area){
    display:none !important;
  }
  body.mn-print-schedule .calc{ border:0; box-shadow:none; margin:0; }
  body.mn-print-schedule .sch-table{ min-width:0; }
  body.mn-print-schedule .sch-input{ border-block-end:0; }
}

/* ---------- World clock ---------- */
.clk-stage{
  background:linear-gradient(160deg,#170f29,#261740 55%,#0c0715);
  border-radius:var(--radius); padding:34px 20px 26px; margin-block:8px 30px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.clk-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 20% 15%, rgba(124,58,237,.28), transparent 55%),
             radial-gradient(circle at 85% 85%, rgba(245,158,11,.16), transparent 50%);
}
.clk-cards{
  position:relative; display:flex; flex-direction:column; gap:22px; align-items:center;
  max-width:640px; margin-inline:auto;
}
@media (min-width:640px){ .clk-cards{ flex-direction:row; justify-content:center; gap:32px; } }

.clk-card{ position:relative; width:220px; height:220px; flex:0 0 auto; }
.clk-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.clk-ring-track{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:3; }
.clk-ring-progress{
  fill:none; stroke-width:3; stroke-linecap:round;
  transition:stroke-dashoffset .25s linear;
}
.clk-card-local .clk-ring-progress{ stroke:#a855f7; filter:drop-shadow(0 0 6px rgba(168,85,247,.6)); }
.clk-card-gmt .clk-ring-progress{ stroke:#f59e0b; filter:drop-shadow(0 0 6px rgba(245,158,11,.55)); }

.clk-card-body{
  position:absolute; inset:14px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:3px;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 70%);
}
.clk-label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.clk-time{
  font-size:1.85rem; font-weight:800; color:#fff; line-height:1.1; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; margin-block:4px 2px;
}
.clk-date{ font-size:.72rem; color:rgba(255,255,255,.7); max-width:150px; }
.clk-zone{ font-size:.7rem; color:rgba(255,255,255,.45); margin-top:2px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.clk-meta{
  position:relative; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center;
  margin-top:26px; font-size:.82rem; color:rgba(255,255,255,.65);
}
.clk-offset{ font-weight:700; color:#fff; direction:ltr; unicode-bidi:isolate; }

/* ---------- Countdown timer ---------- */
.cd-stage{
  background:radial-gradient(circle at 50% 0%,#1a1240 0%,#0d0a24 55%,#050414 100%);
  border-radius:var(--radius); padding:44px 20px 34px; margin-block:8px 30px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cd-glow-orb{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(168,85,247,.38), rgba(245,158,11,.14) 45%, transparent 70%);
  filter:blur(10px); animation:cd-orb-pulse 5s ease-in-out infinite;
}
@keyframes cd-orb-pulse{
  0%,100%{ opacity:.7; transform:translateX(-50%) scale(1); }
  50%{ opacity:1; transform:translateX(-50%) scale(1.08); }
}

.cd-display{ position:relative; margin-bottom:30px; }
.cd-digits{
  font-size:clamp(3.2rem,14vw,6rem); font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1; letter-spacing:.02em; display:inline-flex; align-items:baseline;
}
.cd-seg{
  color:#fff;
  background:linear-gradient(180deg,#fff,#ddd6fe);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 18px rgba(168,85,247,.85), 0 0 46px rgba(124,58,237,.55), 0 0 80px rgba(124,58,237,.3);
}
.cd-colon{
  color:#fff; margin-inline:.06em; text-shadow:0 0 18px rgba(168,85,247,.85), 0 0 46px rgba(124,58,237,.5);
  animation:cd-blink 1s steps(1) infinite;
}
.is-running .cd-colon{ animation:cd-blink 1s steps(1) infinite; }
@keyframes cd-blink{ 50%{ opacity:.25; } }
.cd-status{
  margin-top:10px; font-size:1.05rem; font-weight:700; color:#f472b6; min-height:1.4em;
  text-shadow:0 0 14px rgba(244,114,182,.6);
}
.cd-display.is-done .cd-seg{
  background:linear-gradient(180deg,#fff,#ffd6e8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 18px rgba(244,114,182,.9), 0 0 50px rgba(244,114,182,.6);
}
.cd-display.is-done .cd-digits{ animation:cd-shake .4s ease-in-out 2; }
@keyframes cd-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}
@media (prefers-reduced-motion: reduce){
  .cd-display.is-done .cd-digits{ animation:none; }
}

.cd-setup{
  position:relative; width:100%; max-width:420px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm); padding:18px; backdrop-filter:blur(6px);
  transition:opacity .25s ease, max-height .25s ease; overflow:hidden;
}
.cd-setup.is-hidden{ opacity:0; max-height:0; padding-block:0; border-width:0; margin:0; pointer-events:none; }
.cd-input-row .field label{ color:rgba(255,255,255,.75); }
.cd-input-row .field input{
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18); color:#fff;
  width:100%; font-family:inherit; font-size:1.15rem; font-weight:700; border-radius:var(--radius-sm);
  padding:11px 13px; text-align:center;
}
.cd-input-row .field input:focus{ outline:none; border-color:#8b5cf6; background:rgba(255,255,255,.12); }
.cd-presets-label{
  margin:16px 0 8px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-align:center;
}
.cd-preset-row{ justify-content:center; margin-bottom:0; }
.cd-preset-row .preset-btn{
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2);
  direction:ltr;
}
.cd-preset-row .preset-btn:hover{ border-color:#8b5cf6; color:#fff; }
.cd-preset-row .preset-btn.is-on{ background:linear-gradient(135deg,#7c3aed,#f59e0b); color:#fff; border-color:transparent; }

.cd-btn-row{ position:relative; margin-top:24px; gap:10px; justify-content:center; }
.cd-btn-main{ min-width:150px; background:linear-gradient(135deg,#7c3aed,#f59e0b); border:0; }
.cd-btn-main:hover{ filter:brightness(1.1); }
.cd-btn-ghost{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }
.cd-btn-ghost:hover{ border-color:#fff; color:#fff; }
.cd-btn-ghost:disabled{ opacity:.4; cursor:not-allowed; }
.cd-error{ position:relative; color:#ff8080; margin-top:14px; }

/* ---------- Lucky wheel ---------- */
.lw-stage{
  background:linear-gradient(160deg,#170f29,#261740 55%,#0c0715);
  border-radius:var(--radius); padding:36px 20px 30px; margin-block:8px 30px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.lw-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:radial-gradient(circle at 15% 10%, rgba(124,58,237,.25), transparent 55%),
             radial-gradient(circle at 90% 90%, rgba(245,158,11,.15), transparent 50%);
}
.lw-wheel-wrap{ position:relative; width:min(360px,86vw); height:min(360px,86vw); margin-bottom:8px; }
.lw-canvas{ width:100%; height:100%; border-radius:50%; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.lw-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%); z-index:2;
  width:0; height:0; border-inline:14px solid transparent; border-block-start:22px solid #fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

.lw-spin-btn{ position:relative; margin-top:22px; min-width:180px; }

.lw-winner{ position:relative; margin-top:24px; text-align:center; }
.lw-winner-label{ font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.lw-winner-value{
  font-size:1.7rem; font-weight:800; color:#fff; margin:6px 0 12px;
  text-shadow:0 0 14px rgba(168,85,247,.6);
}
.lw-remove-toggle{ color:rgba(255,255,255,.75); justify-content:center; }
.lw-remove-toggle input{ accent-color:var(--brand); }

.lw-options-panel{
  position:relative; width:100%; max-width:420px; margin-top:30px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:16px;
}
.lw-options-panel .field label{ color:rgba(255,255,255,.75); }
.lw-options-panel .field-hint{ color:rgba(255,255,255,.4); }
.lw-options-panel .grp-textarea{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#fff; }
.lw-options-panel .grp-textarea:focus{ border-color:var(--brand); background:rgba(255,255,255,.1); }
.lw-options-panel .btn-ghost{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }
.lw-options-panel .btn-ghost:hover{ border-color:#fff; color:#fff; }
.lw-error{ color:#ff8080; }

.lw-history{ position:relative; width:100%; max-width:420px; margin-top:22px; }
.lw-history-title{
  font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:8px; text-align:center;
}
.lw-history-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.lw-history-list li{
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); font-size:.82rem;
  padding:5px 11px; border-radius:999px;
}

/* ---------- Stopwatch ---------- */
.sw-stage{
  background:linear-gradient(160deg,#170f29,#261740 55%,#0c0715);
  border-radius:var(--radius); padding:36px 20px 26px; margin-block:8px 30px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.sw-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 15% 10%, rgba(124,58,237,.25), transparent 55%),
             radial-gradient(circle at 90% 90%, rgba(245,158,11,.15), transparent 50%);
}
.sw-dial{ position:relative; width:220px; height:220px; margin-bottom:26px; }
.sw-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.sw-ring-track{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:4; }
.sw-ring-progress{
  fill:none; stroke:#a855f7; stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(168,85,247,.6)); transition:stroke-dashoffset .08s linear;
}
.is-running .sw-ring-progress{ stroke:#3ddc84; filter:drop-shadow(0 0 7px rgba(61,220,132,.65)); }
.sw-dial-body{
  position:absolute; inset:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.05), transparent 70%);
}
.sw-time{
  font-size:1.9rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}
.sw-ms{ font-size:1.05rem; color:rgba(255,255,255,.5); font-weight:700; }

.sw-btn-row{ position:relative; margin-top:0; gap:10px; justify-content:center; flex-wrap:wrap; }
.sw-btn-main{ min-width:120px; }
.sw-btn-ghost{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }
.sw-btn-ghost:hover{ border-color:#fff; color:#fff; }
.sw-btn-ghost:disabled{ opacity:.4; cursor:not-allowed; }

.sw-laps{ position:relative; width:100%; max-width:420px; margin-top:28px; }
.sw-laps-title{
  font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:10px; text-align:center;
}
.sw-laps-empty{ text-align:center; font-size:.85rem; color:rgba(255,255,255,.4); padding:10px 0; }
.sw-laps-list{ list-style:none; margin:0; padding:0; max-height:260px; overflow-y:auto; }
.sw-lap-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:var(--radius-sm); font-size:.85rem;
  color:rgba(255,255,255,.85); background:rgba(255,255,255,.04);
}
.sw-lap-row + .sw-lap-row{ margin-top:5px; }
.sw-lap-no{ flex:0 0 auto; color:rgba(255,255,255,.55); font-weight:600; }
.sw-lap-split{ flex:1 1 auto; text-align:center; font-variant-numeric:tabular-nums; }
.sw-lap-total{ flex:0 0 auto; font-variant-numeric:tabular-nums; color:#c084fc; font-weight:700; }

/* ---------- Group splitter ---------- */
.grp-textarea{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--text); line-height:1.6;
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; resize:vertical;
}
.grp-textarea:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.grp-groups{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); margin-bottom:16px; }
.grp-card{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;
}
.grp-card h3{ margin:0 0 8px; font-size:.95rem; color:var(--brand); }
.grp-card-count{ color:var(--text-mute); font-weight:500; font-size:.82rem; }
.grp-card ul{ list-style:none; margin:0; padding:0; }
.grp-card li{ padding:5px 0; border-block-end:1px solid var(--line); font-size:.9rem; }
.grp-card li:last-child{ border-block-end:0; }

/* ---------- Random number generator ---------- */
.rng-error{ color:#d9534f; font-size:.88rem; margin:6px 0 0; }
#mn-rng-value{ direction:ltr; unicode-bidi:isolate; }

/* ---------- Ramadan countdown ---------- */
.rmd-h1-year{ color:var(--text-mute); font-weight:600; font-size:.55em; direction:ltr; unicode-bidi:isolate; }
.rmd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.rmd-tile{
  background:linear-gradient(160deg,var(--bg-soft),var(--bg-sunk)); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 6px; text-align:center;
}
.rmd-num{
  display:block; font-size:clamp(1.6rem,7vw,2.4rem); font-weight:800; color:var(--brand);
  line-height:1.1; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
}
.rmd-label{ display:block; font-size:.78rem; color:var(--text-soft); margin-top:4px; font-weight:600; }
.rmd-ramadan-banner{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); text-align:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; font-weight:700; font-size:1.05rem;
}

/* ---------- Hijri / Gregorian converter ---------- */
.hjc-swap-row{ display:flex; justify-content:center; margin:4px 0 14px; }
.hjc-swap-btn{
  background:var(--bg-sunk); border:1px solid var(--line); color:var(--text-soft);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem; display:grid; place-items:center;
}
.hjc-swap-btn:hover{ border-color:var(--brand); color:var(--brand); }
.hjc-select-row{ display:flex; gap:8px; }
.hjc-select-row select{
  flex:1 1 0; min-width:0; font-family:inherit; font-size:.95rem; color:var(--text);
  background:var(--bg-soft); border:2px solid var(--line); border-radius:var(--radius-sm); padding:11px 8px;
}
.hjc-select-row select:focus{ outline:none; border-color:var(--brand); background:var(--card); }
.hjc-select-group{ flex:1 1 0; min-width:0; }
.hjc-select-group span{
  display:block; font-size:.72rem; font-weight:600; color:var(--text-mute);
  margin-bottom:4px; text-align:center;
}
.hjc-select-group select{ width:100%; }