/* Free tools shared UI layer (loaded after style.css on /free-tools pages) */
.tool,.ftl,.ftx{--r:10px;--r2:12px}
/* one primary per screen: every non-.pri button is secondary */
.tool .btn:not(.pri):not(.ghost):not(.light),.tool label.btn{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--line2)!important;box-shadow:none!important}
.tool .btn:not(.pri):not(.ghost):not(.light):hover,.tool label.btn:hover{background:var(--hov)!important;border-color:var(--accent)!important;color:var(--text)!important}
.tool .btn:not(.pri):not(.ghost):not(.light):disabled{opacity:.55}
/* section headings: same style everywhere (fieldset legend becomes an in-card title) */
.tool fieldset{border-radius:12px}
.tool fieldset>legend{float:right;width:100%;padding:0;margin:0 0 10px;font-size:1rem;font-weight:700;line-height:1.4;color:var(--text)}
.tool fieldset>legend+*{clear:both}
.tool .ivform>.ivl:first-child,.tool .ivsec>.ivl:first-child{font-size:1rem}
/* radii: cards/panels 12px, controls 10px */
.tool .priv,.tool .who,.tool .fz,.tool .fi,.tool .ivcv,.tool .fres>div,.ftl .card{border-radius:12px!important}
.tool input,.tool select,.tool textarea{border-radius:10px}
/* «جديد» badge, shown by ui.js only while a tool is under 30 days old */
.nwb[hidden]{display:none!important}

/* ===== shared tokens (Theme A extras) ===== */
:root,[data-theme=dark]{--cy:#7fd3e0;--cysoft:rgba(127,211,224,.12);--vsoft:rgba(143,128,217,.14);--bsoft:rgba(127,166,232,.13);--ok:#4cc38a;--oksoft:rgba(76,195,138,.12)}
[data-theme=light]{--cy:#0e8a9e;--cysoft:#e4f5f8;--vsoft:#efecfb;--bsoft:#e9effb;--ok:#18794e;--oksoft:#e6f4ec}
/* ===== /free-tools index ===== */
.fx-h1{font-size:1.65rem;margin:18px 0 6px;line-height:1.3}
.fx-sub{color:var(--muted);margin:0 0 14px;font-size:.98rem}
.fx-trust{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.fx-trust li{font-size:.78rem;color:var(--muted);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 10px;display:inline-flex;gap:5px;align-items:center}
.fx-trust svg{width:13px;height:13px;color:var(--ok)}
.fx-jump{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:2px 16px 8px;position:sticky;top:var(--hh,56px);z-index:5;background:var(--bg)}
.fx-jump::-webkit-scrollbar{display:none}
.fx-jump a{flex:none;font-size:.86rem;text-decoration:none;color:var(--text);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;background:var(--card)}
.fx-jump a.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.fx-g{margin:14px 0 8px}
.fx-gh{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 9px}
.fx-gh h2{font-size:1.08rem;margin:0}
.fx-gh span{font-size:.78rem;color:var(--muted)}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fx-c{position:relative;display:flex;flex-direction:column;gap:6px;min-height:128px;padding:13px 12px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;color:var(--text);-webkit-tap-highlight-color:transparent}
.fx-c:active{background:var(--hov)}
.fx-c b{font-size:.98rem;line-height:1.35}
.fx-c small{font-size:.8rem;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-c .fx-new{position:absolute;top:11px;left:11px;font-size:.68rem;font-weight:600;color:var(--accent2);background:var(--vsoft);border-radius:999px;padding:1px 7px}
.fx-c.wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0;gap:12px}

.fx-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.fx-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-b{background:var(--bsoft);color:var(--accent)}.t-v{background:var(--vsoft);color:var(--accent2)}.t-c{background:var(--cysoft);color:var(--cy)}
.fx-why{margin:22px 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 14px}
.fx-why summary{padding:10px 0;font-weight:600;cursor:pointer}
@media(min-width:900px){.fx-wrap{max-width:1120px!important}.fx-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px;align-items:start}.fx-g .fx-grid{grid-template-columns:1fr}#pdf{grid-column:1/-1}#pdf .fx-grid{grid-template-columns:repeat(3,1fr)}.fx-c{min-height:0;flex-direction:row;align-items:center;gap:12px}.fx-c.wide{grid-column:auto}.fx-jump{display:none}.fx-h1{font-size:2rem}}

.fx-c .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.fx-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fx-g{scroll-margin-top:calc(var(--hh,56px) + 52px)}
.fx-why ul{margin:0 0 10px;padding-inline-start:18px}.fx-why li{margin:0 0 6px;font-size:.92rem}
.fx-more{color:var(--muted);font-size:.88rem;margin:14px 0 24px}
.fx-wrap{max-width:720px}
/* ===== PDF/image tool pills ===== */
.tool .ftabs{margin:0 -16px 12px;padding:0 16px 2px;-webkit-mask-image:linear-gradient(to left,#000 86%,transparent);mask-image:linear-gradient(to left,#000 86%,transparent)}
.tool .ftabs a{display:inline-flex;align-items:center;gap:6px;border-radius:999px!important;padding:6px 12px}
.tool .ftabs a svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool .ftabs a[aria-current]{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important;box-shadow:none!important}
/* ===== sticky download bar (mobile) ===== */
.fx-bar{position:fixed;inset:auto 0 0 0;z-index:30;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(10,13,26,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.fx-bar[hidden]{display:none!important}
.fx-bar .th{width:58px;height:41px;border-radius:5px;border:1px solid var(--line);object-fit:cover;flex:none;background:#fff}
.fx-bar .th[hidden]{display:none}
.fx-bar .k{flex:1;min-width:0;line-height:1.3}
.fx-bar .k b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-bar .k small{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-bar .k .num{display:block;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-bar .go{min-height:46px;padding:0 16px;font-size:.98rem;border-radius:10px!important;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex:none}
.fx-bar .go svg,.fx-bar .sec svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fx-bar .sec{min-height:46px;width:46px;padding:0!important;display:grid!important;place-items:center;border-radius:10px!important;flex:none;background:var(--card)!important;color:var(--text)!important;border:1px solid var(--line2)!important}
.fx-hasbar body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.fx-hasbar .fab{display:none!important}
@media(min-width:900px){.fx-bar{display:none!important}.fx-hasbar body{padding-bottom:0}}
.fx-bar .go{width:auto!important;margin:0!important}
.fx-bar .k{flex:1 1 0}
/* ===== phase 5: بنود الفاتورة/عرض السعر كبطاقات ===== */
.tool .ln.fx-ln{display:block;border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 0 10px;background:var(--bg)}
.tool .fx-ln .lhd{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.tool .fx-ln .lhd .no{font-size:.84rem;color:var(--muted);font-weight:600}
.tool .fx-ln .rm{width:34px;height:34px;min-height:0;padding:0;border:1px solid var(--line);border-radius:10px;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.tool .fx-ln input{width:100%;box-sizing:border-box;min-width:0}
.tool .fx-ln .r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.tool .fx-ln .r label{display:block;min-width:0;margin:0}
.tool .fx-ln .r label span{display:block;font-size:.74rem;color:var(--muted);margin:0 0 3px;font-weight:500}
.tool .fx-ln .sum{display:flex;justify-content:space-between;font-size:.86rem;margin-top:8px;color:var(--muted)}
.tool .fx-ln .sum b{color:var(--text);font-variant-numeric:tabular-nums}
.tool .lnh{display:none!important}
.tool #addl{width:100%;justify-content:center}
.tool .fx-tot{margin:10px 0 4px;border-top:1px solid var(--line);padding-top:6px}
.tool .fx-tot>div{display:flex;justify-content:space-between;padding:5px 2px;font-size:.9rem;color:var(--muted)}
.tool .fx-tot b{color:var(--text);font-variant-numeric:tabular-nums}
.tool .fx-tot .g{font-size:1rem;color:var(--text);font-weight:700}.tool .fx-tot .g b{font-size:1.1rem}