/* ASBAB free tools — shared look for the public tools (calculator, store check, WhatsApp link, hub)
   and the image converter. Built on the --ax-* tokens of asbab-ui.css; every colour has a dark value. */
[hidden]{display:none!important}
.axf{--f-tint:#e8f6fc;--f-green-t:#eef8e2;--f-warn-t:#fff6e0;--f-warn:#8a5a00;--f-red-t:#fdecec;--f-red:#b3261e;--f-field:#fff;--f-field-line:#cfd8e4}
body.ax-page>main.axf{max-width:1180px;margin:0 auto;padding:22px var(--ax-gut) 40px}
body.ax-app>main.axf{max-width:1240px;margin:0 auto;padding:28px clamp(16px,3vw,36px) 48px}

/* Hero */
.axf-hero{position:relative;overflow:hidden;border-radius:26px;padding:clamp(22px,3.4vw,40px);margin-bottom:22px;color:#c7cfda;background:radial-gradient(560px 320px at 12% 10%,#18abe338,transparent 65%),radial-gradient(420px 280px at 0% 110%,#80cc2833,transparent 60%),#0b1118;isolation:isolate}
.axf-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:34px 34px}
.axf-crumbs{font-size:13.5px;color:#8f9ab0;margin:0 0 14px}
.axf-crumbs a{color:#7fd3f3;font-weight:700;text-decoration:none}
.axf-badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#c7f08f;background:#80cc281f;border-radius:999px;padding:5px 14px}
.axf-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
body.ax .axf-hero h1{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.3;margin:14px 0 8px}
.axf-hero h1 span{background:linear-gradient(90deg,#18abe3,#80cc28);-webkit-background-clip:text;background-clip:text;color:transparent}
.axf-lead{margin:0;max-width:680px;font-size:17.5px;color:#b3bccb}
.axf-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;padding:0;font-size:14.5px;color:#dbe3ee}
.axf-ticks li{display:flex;align-items:center;gap:8px}
.axf-ticks li::before{content:"";width:18px;height:18px;border-radius:50%;background:#80cc28 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2319103d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.axf-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.axf-hero .ax-btn{border-radius:999px}

/* Layout */
.axf-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:18px;align-items:start}
.axf-grid.is-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.axf-sticky{position:sticky;top:18px}
.axf-card{background:var(--ax-card);border:1px solid var(--ax-line);border-radius:22px;box-shadow:var(--ax-shadow);padding:clamp(18px,2.4vw,26px);min-width:0}
.axf-card+.axf-card{margin-top:16px}
.axf-card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
body.ax .axf-card h2{font-size:clamp(18px,1.7vw,21px);margin:0;line-height:1.45}
body.ax .axf-card h3{font-size:16px;margin:0 0 8px}
.axf-step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--f-tint);color:var(--ax-blue-d);font-weight:800;font-size:14px;margin-inline-end:8px;flex:none}
.axf-sub{margin:-6px 0 14px;color:var(--ax-muted);font-size:14.5px}
.axf-note{font-size:13.5px;color:var(--ax-muted);margin:12px 0 0;line-height:1.75}

/* Fields */
.axf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.axf-fields.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.axf-field{display:grid;gap:6px;min-width:0;margin:0}
.axf-field.is-wide{grid-column:1/-1}
.axf-field>span{font-weight:700;font-size:14.5px;color:var(--ax-ink);display:flex;justify-content:space-between;gap:8px}
.axf-field>span small,.axf-field>small{font-weight:500;color:var(--ax-muted);font-size:12.5px}
.axf input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),.axf select,.axf textarea{width:100%;box-sizing:border-box;min-height:46px;border:1px solid var(--f-field-line);border-radius:12px;padding:10px 14px;background:var(--f-field);color:var(--ax-ink);font:500 15.5px/1.6 Tajawal,Arial,sans-serif;transition:border-color .15s,box-shadow .15s}
.axf textarea{min-height:96px;resize:vertical}
.axf input:focus,.axf select:focus,.axf textarea:focus{outline:0;border-color:var(--ax-blue);box-shadow:0 0 0 4px #18abe326}
.axf input[type=range]{width:100%;accent-color:var(--ax-blue-d)}
.axf input[type=checkbox],.axf input[type=radio]{accent-color:var(--ax-blue-d)}
.axf input[type=color]{width:46px;height:46px;padding:3px;border:1px solid var(--f-field-line);border-radius:12px;background:var(--f-field);cursor:pointer}
.axf-unit{position:relative}
.axf-unit input{padding-inline-end:58px!important}
.axf-unit i{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;font-weight:700;color:var(--ax-muted);pointer-events:none}
.axf-unit input[dir=ltr]{text-align:right}

/* Segmented choices and chips */
.axf-seg{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:14px;background:var(--ax-soft);border:1px solid var(--ax-line)}
.axf-seg label{position:relative;flex:1 1 auto;margin:0;cursor:pointer}
.axf-seg input{position:absolute;opacity:0;pointer-events:none}
.axf-seg span{display:block;text-align:center;padding:9px 14px;border-radius:11px;font-weight:700;font-size:14.5px;color:var(--ax-muted);transition:background-color .15s,color .15s}
.axf-seg input:checked+span{background:var(--ax-card);color:var(--ax-ink);box-shadow:0 1px 3px #19103d1f}
.axf-seg input:focus-visible+span{outline:2px solid var(--ax-blue);outline-offset:2px}
.axf-chips{display:flex;flex-wrap:wrap;gap:8px}
.axf-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-card);color:var(--ax-ink);font:700 14px/1.3 Tajawal,Arial,sans-serif;cursor:pointer;transition:border-color .15s,background-color .15s}
.axf-chip:hover{border-color:var(--ax-blue)}
.axf-chip[aria-pressed=true],.axf-chip.is-on{background:var(--ax-navy);border-color:var(--ax-navy);color:#fff}
.axf-switch{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;font-weight:700;color:var(--ax-ink);font-size:14.5px}
.axf-switch input{appearance:none;-webkit-appearance:none;display:inline-block!important;width:42px!important;height:24px;padding:0!important;margin:0;border:0!important;border-radius:999px;background:var(--f-field-line)!important;position:relative;flex:none;cursor:pointer;transition:background-color .15s}
.axf-switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:inset-inline-start .15s}
.axf-switch input:checked{background:var(--ax-green)!important}
.axf-switch input:checked::after{inset-inline-start:21px}
.axf-switch input:focus-visible{outline:2px solid var(--ax-blue);outline-offset:2px}

/* Buttons */
.axf-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.axf .ax-btn{min-height:46px;padding:10px 22px;border-radius:999px;font-size:15px}
.axf .ax-btn.is-sm{min-height:38px;padding:6px 16px;font-size:14px}
.axf .ax-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.axf-link{background:none;border:0;padding:6px 4px;color:var(--ax-blue-d);font:700 14.5px/1.4 Tajawal,Arial,sans-serif;cursor:pointer;text-decoration:none}
.axf-link:hover{text-decoration:underline}
.axf-status{min-height:1.6em;margin:10px 0 0;font-size:14px;font-weight:700;color:var(--ax-green-d)}
.axf-status.is-error{color:var(--f-red)}

/* Results */
.axf-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.axf-kpi{border-radius:16px;padding:14px;background:var(--ax-soft);border:1px solid var(--ax-line);min-width:0}
.axf-kpi small{display:block;font-size:13px;color:var(--ax-muted);font-weight:700}
.axf-kpi b{display:block;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--ax-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axf-kpi em{display:block;font-style:normal;font-size:12.5px;color:var(--ax-muted)}
.axf-kpi.is-main{grid-column:1/-1;background:linear-gradient(135deg,#18abe31a,#80cc281a);border-color:#bfe3f3}
.axf-kpi.is-main b{font-size:clamp(28px,3.4vw,38px)}
.axf-kpi.is-good b{color:var(--ax-green-d)}
.axf-kpi.is-bad b{color:var(--f-red)}
.axf-verdict{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.7;background:var(--f-green-t);color:var(--ax-ink)}
.axf-verdict.is-warn{background:var(--f-warn-t)}
.axf-verdict.is-bad{background:var(--f-red-t)}
.axf-verdict b{flex:none}
.axf-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--ax-soft);margin:16px 0 10px}
.axf-bar i{display:block;height:100%;min-width:2px}
.axf-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.axf-legend li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ax-text)}
.axf-legend li i{width:10px;height:10px;border-radius:3px;flex:none}
.axf-legend li b{margin-inline-start:auto;color:var(--ax-ink);font-weight:700;unicode-bidi:isolate}
.axf-table{width:100%;border-collapse:collapse;font-size:14.5px}
.axf-table th,.axf-table td{padding:9px 8px;border-bottom:1px solid var(--ax-line);text-align:start}
.axf-table th{font-size:13px;color:var(--ax-muted);font-weight:700}
.axf-table td b{color:var(--ax-ink)}
.axf-table .is-good{color:var(--ax-green-d);font-weight:700}
.axf-table .is-bad{color:var(--f-red);font-weight:700}
.axf-c1{background:#19103d}.axf-c2{background:#7a4dd8}.axf-c3{background:#18abe3}.axf-c4{background:#f5a524}.axf-c5{background:#e5484d}.axf-c6{background:#9aa6b6}.axf-c7{background:#80cc28}

/* Score ring */
.axf-ring{--p:0;--c:var(--ax-blue);position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--ax-line) 0);flex:none;transition:--p .4s}
.axf-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--ax-card)}
.axf-ring b{position:relative;font-size:34px;line-height:1;color:var(--ax-ink)}
.axf-ring b small{font-size:16px;color:var(--ax-muted)}
.axf-score{display:flex;align-items:center;gap:18px}
.axf-score h2{margin:0 0 4px}
.axf-score p{margin:0;color:var(--ax-muted);font-size:14.5px}
.axf-meters{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.axf-meters li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px;color:var(--ax-text)}
.axf-meters li b{color:var(--ax-ink);font-weight:700}
.axf-meters li span{grid-column:1/-1;height:8px;border-radius:999px;background:var(--ax-soft);overflow:hidden}
.axf-meters li span i{display:block;height:100%;border-radius:999px;background:var(--ax-blue);transition:width .3s}

/* Questions (store check) */
.axf-section{margin-top:18px}
.axf-section:first-child{margin-top:0}
.axf-q{padding:14px 0;border-top:1px solid var(--ax-line)}
.axf-q:first-of-type{border-top:0}
.axf-q>p{margin:0 0 10px;font-weight:700;color:var(--ax-ink);font-size:15.5px;line-height:1.6}
.axf-q>p small{display:block;font-weight:500;color:var(--ax-muted);font-size:13px}
.axf-ans{display:flex;flex-wrap:wrap;gap:8px}
.axf-ans label{position:relative;margin:0;cursor:pointer}
.axf-ans input{position:absolute;opacity:0;pointer-events:none}
.axf-ans span{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 16px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-card);color:var(--ax-text);font-weight:700;font-size:14px;transition:background-color .15s,border-color .15s,color .15s}
.axf-ans label:hover span{border-color:var(--ax-blue)}
.axf-ans input:focus-visible+span{outline:2px solid var(--ax-blue);outline-offset:2px}
.axf-ans input[value=yes]:checked+span{background:var(--ax-green);border-color:var(--ax-green);color:var(--ax-navy)}
.axf-ans input[value=partial]:checked+span{background:#f5a524;border-color:#f5a524;color:#2a1a00}
.axf-ans input[value=no]:checked+span{background:var(--ax-navy);border-color:var(--ax-navy);color:#fff}
.axf-plan{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:plan}
.axf-plan li{counter-increment:plan;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:14px;border:1px solid var(--ax-line);border-radius:16px;background:var(--ax-card)}
.axf-plan li::before{content:counter(plan);grid-row:span 3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ax-navy);color:#fff;font-weight:800;font-size:14px}
.axf-plan li.is-partial::before{background:#f5a524;color:#2a1a00}
.axf-plan b{color:var(--ax-ink);font-size:15.5px}
.axf-plan p{margin:0;font-size:14px;color:var(--ax-muted);line-height:1.7}
.axf-plan a{justify-self:start;font-weight:700;font-size:14px;color:var(--ax-blue-d)}

/* Next-step band and more tools */
.axf-next{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:26px 0 0;border-radius:22px;padding:24px 28px;color:#d9d6ee;background:linear-gradient(120deg,#19103d,#2c1f6b)}
body.ax .axf-next h2{color:#fff;font-size:21px;margin:0 0 4px}
.axf-next p{margin:0;max-width:620px}
.axf-next .ax-btn{border-radius:999px}
.axf-more{margin-top:30px}
body.ax .axf-more>h2{font-size:21px;margin:0 0 14px}
.axf-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.axf-tool{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;border:1px solid var(--ax-line);background:var(--ax-card);color:inherit;text-decoration:none!important;transition:border-color .15s,transform .15s}
.axf-tool:hover{border-color:var(--ax-blue);transform:translateY(-2px)}
.axf-tool[aria-current]{border-color:var(--ax-blue);box-shadow:inset 0 0 0 1px var(--ax-blue)}
.axf-tool .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--f-tint);color:var(--ax-blue-d);margin-bottom:6px}
.axf-tool .ic.is-green{background:var(--f-green-t);color:var(--ax-green-d)}
.axf-tool .ic.is-violet{background:#f0eafc;color:var(--ax-violet)}
.axf-tool .ic.is-amber{background:var(--f-warn-t);color:#a86a00}
.axf-tool .ic svg{width:22px;height:22px}
.axf-tool b{color:var(--ax-ink);font-size:15.5px}
.axf-tool small{color:var(--ax-muted);font-size:13.5px;line-height:1.6}
.axf-tool i{font-style:normal;font-size:12px;font-weight:700;color:var(--ax-green-d);margin-top:auto;padding-top:6px}
.axf-tool i.is-acc{color:var(--ax-blue-d)}
.axf-faq{margin-top:30px}
body.ax .axf-faq>h2{font-size:21px;margin:0 0 12px}
.axf-faq details{background:var(--ax-card);border:1px solid var(--ax-line);border-radius:16px;padding:0 18px;margin-bottom:8px}
.axf-faq summary{cursor:pointer;padding:14px 0;font-weight:700;color:var(--ax-ink);list-style:none;display:flex;justify-content:space-between;gap:10px}
.axf-faq summary::-webkit-details-marker{display:none}
.axf-faq summary::after{content:"+";color:var(--ax-blue-d);font-size:20px;line-height:1}
.axf-faq details[open] summary::after{content:"−"}
.axf-faq details p{margin:0 0 14px;color:var(--ax-text);font-size:15px}
.axf-privacy{font-size:13.5px;color:var(--ax-muted);text-align:center;margin:22px auto 0;max-width:720px}

/* Hub */
.axf-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.axf-hub .axf-tool{padding:22px;flex-direction:row;gap:16px;align-items:flex-start}
.axf-hub .axf-tool .ic{width:54px;height:54px;border-radius:16px;flex:none;margin:0}
.axf-hub .axf-tool .ic svg{width:28px;height:28px}
.axf-hub .axf-tool div{display:flex;flex-direction:column;gap:4px;min-width:0}
.axf-hub .axf-tool b{font-size:18px}
.axf-hub .axf-tool small{font-size:14.5px}

@media(max-width:980px){
 .axf-grid,.axf-grid.is-even{grid-template-columns:1fr}
 .axf-sticky{position:static}
 .axf-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 body.ax-page>main.axf,body.ax-app>main.axf{padding:14px 14px 32px}
 .axf-hero{border-radius:20px;padding:22px 18px}
 .axf-lead{font-size:16px}
 .axf-fields,.axf-fields.is-3{grid-template-columns:1fr}
 .axf-card{border-radius:18px;padding:16px}
 .axf-hub{grid-template-columns:1fr}
 .axf-more-grid{grid-template-columns:1fr 1fr;gap:10px}
 .axf-tool{padding:14px}
 .axf-ring{width:108px;height:108px}
 .axf-ring b{font-size:28px}
 .axf-next{padding:20px}
 .axf-next .ax-btn{width:100%}
}

/* Dark theme */
:root[data-theme=dark] .axf{--f-tint:#18abe321;--f-green-t:#80cc281a;--f-warn-t:#f5b7301f;--f-warn:#f3c867;--f-red-t:#e5484d24;--f-red:#ff8a8a;--f-field:#0e151f;--f-field-line:#2b3a4f}
:root[data-theme=dark] .axf-kpi.is-main{border-color:#24465a}
:root[data-theme=dark] .axf-kpi.is-good b,:root[data-theme=dark] .axf-tool i,:root[data-theme=dark] .axf-table .is-good{color:#a6e05e}
:root[data-theme=dark] .axf-step,:root[data-theme=dark] .axf-tool .ic{color:#7fd3f3}
:root[data-theme=dark] .axf-tool .ic.is-green{color:#a6e05e}
:root[data-theme=dark] .axf-tool .ic.is-violet{background:#7a4dd82b;color:#b79cf2}
:root[data-theme=dark] .axf-tool .ic.is-amber{color:#f3c867}
:root[data-theme=dark] .axf-link,:root[data-theme=dark] .axf-plan a,:root[data-theme=dark] .axf-tool i.is-acc{color:#7fd3f3}
:root[data-theme=dark] .axf-chip[aria-pressed=true],:root[data-theme=dark] .axf-chip.is-on,:root[data-theme=dark] .axf-ans input[value=no]:checked+span,:root[data-theme=dark] .axf-plan li::before{background:#eef2f8;border-color:#eef2f8;color:#0b1118}
:root[data-theme=dark] .axf-status{color:#a6e05e}
:root[data-theme=dark] .axf-seg input:checked+span{background:#1c2633}
@media(prefers-color-scheme:dark){
 :root:not([data-theme=light]) .axf{--f-tint:#18abe321;--f-green-t:#80cc281a;--f-warn-t:#f5b7301f;--f-warn:#f3c867;--f-red-t:#e5484d24;--f-red:#ff8a8a;--f-field:#0e151f;--f-field-line:#2b3a4f}
 :root:not([data-theme=light]) .axf-kpi.is-main{border-color:#24465a}
 :root:not([data-theme=light]) .axf-kpi.is-good b,:root:not([data-theme=light]) .axf-tool i,:root:not([data-theme=light]) .axf-table .is-good{color:#a6e05e}
 :root:not([data-theme=light]) .axf-step,:root:not([data-theme=light]) .axf-tool .ic{color:#7fd3f3}
 :root:not([data-theme=light]) .axf-tool .ic.is-green{color:#a6e05e}
 :root:not([data-theme=light]) .axf-tool .ic.is-violet{background:#7a4dd82b;color:#b79cf2}
 :root:not([data-theme=light]) .axf-tool .ic.is-amber{color:#f3c867}
 :root:not([data-theme=light]) .axf-link,:root:not([data-theme=light]) .axf-plan a,:root:not([data-theme=light]) .axf-tool i.is-acc{color:#7fd3f3}
 :root:not([data-theme=light]) .axf-chip[aria-pressed=true],:root:not([data-theme=light]) .axf-chip.is-on,:root:not([data-theme=light]) .axf-ans input[value=no]:checked+span,:root:not([data-theme=light]) .axf-plan li::before{background:#eef2f8;border-color:#eef2f8;color:#0b1118}
 :root:not([data-theme=light]) .axf-status{color:#a6e05e}
 :root:not([data-theme=light]) .axf-seg input:checked+span{background:#1c2633}
}
/* WhatsApp poster preview */
.axf-poster{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;margin:16px auto 0;border-radius:16px;border:1px solid var(--ax-line);background:var(--ax-soft)}
.axf details{margin-top:12px}
.axf details>summary{list-style:none;cursor:pointer}
.axf details>summary::-webkit-details-marker{display:none}
.axf details textarea{margin-top:8px;font:13px/1.6 ui-monospace,Menlo,monospace}
@media print{body.ax>header,.ax-foot,.axf-hero,.axf-grid,.axf-next,.axf-more,.axf-faq,.axf-actions,.workspace-sidebar{display:none!important}body.ax{background:#fff}.axf-card{box-shadow:none;border:0}}
.axf fieldset.axf-section{border:0;padding:0;margin:22px 0 0;min-width:0}
.axf fieldset.axf-section:first-child{margin-top:0}
.axf fieldset.axf-section>legend{float:right;width:100%;padding:0;margin:0 0 4px}
.axf fieldset.axf-section>legend+*{clear:both}
body.ax .axf-card h3.axf-h3{margin:20px 0 8px;font-size:15.5px}
.axf-field>small.axf-hint{margin-top:-2px}

/* Image converter (app) */
.axf-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.axf-top p{margin:0;color:var(--ax-muted);font-weight:700;font-size:15px}
body.ax .axf-top h1{font-size:clamp(24px,2.6vw,34px);margin:4px 0 0;line-height:1.4}
.axf-usage{display:grid;gap:2px;padding:10px 16px;border-radius:16px;background:var(--ax-card);border:1px solid var(--ax-line);min-width:220px}
.axf-usage b{color:var(--ax-ink);font-size:16px}
.axf-usage small{color:var(--ax-muted);font-size:12.5px;line-height:1.6}
.axf-usage span{height:6px;border-radius:999px;background:var(--ax-soft);overflow:hidden;margin-top:4px}
.axf-usage span i{display:block;height:100%;background:var(--ax-green);border-radius:999px}
.axf-drop{position:relative;display:grid;place-items:center;text-align:center;gap:6px;padding:30px 18px;border:2px dashed #9fd2ea;border-radius:20px;background:linear-gradient(135deg,#18abe30d,#80cc280d);cursor:pointer;transition:border-color .15s,background-color .15s}
.axf-drop:hover,.axf-drop.is-over{border-color:var(--ax-blue);background:#18abe314}
.axf-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.axf-drop .ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--ax-card);color:var(--ax-blue-d);box-shadow:var(--ax-shadow)}
.axf-drop .ic svg{width:28px;height:28px}
.axf-drop b{font-size:17px;color:var(--ax-ink)}
.axf-drop small{color:var(--ax-muted);font-size:13px}
.axf-drop .ax-btn{pointer-events:none}
.axf-picked{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:thin}
.axf-picked figure{margin:0;flex:none;width:64px;text-align:center}
.axf-picked img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--ax-line);background:var(--ax-soft);display:block}
.axf-picked figcaption{font-size:11px;color:var(--ax-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axf-preview{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;align-items:center}
.axf-canvas{display:grid;place-items:center;min-height:240px;border-radius:16px;background:repeating-conic-gradient(var(--ax-soft) 0% 25%,var(--ax-card) 0% 50%) 0/18px 18px;border:1px solid var(--ax-line);overflow:hidden}
.axf-canvas canvas{display:block;max-width:100%;max-height:360px;width:auto;height:auto;box-shadow:0 8px 24px -10px #19103d55}
.axf-meta{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.axf-meta li{display:grid;font-size:13px;color:var(--ax-muted)}
.axf-meta b{font-size:15.5px;color:var(--ax-ink);direction:ltr;text-align:right}
.axf-presets{display:grid;gap:10px}
.axf-presets p{margin:0;font-size:12.5px;font-weight:700;color:var(--ax-muted)}
.axf-chip small{font-weight:500;opacity:.75;direction:ltr}
.axf-pos{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,28px);gap:4px}
.axf-pos button{border:1px solid var(--ax-line);border-radius:8px;background:var(--ax-card);cursor:pointer;padding:0;min-height:0}
.axf-pos button[aria-pressed=true]{background:var(--ax-blue-d);border-color:var(--ax-blue-d)}
.axf-pos button:disabled{visibility:hidden}
.axf-swatch{width:22px;height:22px;border-radius:50%;border:1px solid #0002;flex:none}
.axf-swatch.is-transparent{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0/8px 8px}
.axf-set{border-top:1px solid var(--ax-line);padding-top:16px;margin-top:16px;display:grid;gap:12px}
.axf-set:first-of-type{border-top:0;padding-top:0;margin-top:0}
body.ax .axf-set h3{margin:0;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.axf-progress{height:8px;border-radius:999px;background:var(--ax-soft);overflow:hidden;margin-top:14px}
.axf-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#18abe3,#80cc28);transition:width .2s}
.axf-errors p{margin:6px 0 0;font-size:13.5px;color:var(--f-red)}
.axf-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.axf-res{border:1px solid var(--ax-line);border-radius:16px;overflow:hidden;background:var(--ax-card);display:flex;flex-direction:column}
.axf-res .im{aspect-ratio:1;display:grid;place-items:center;background:repeating-conic-gradient(var(--ax-soft) 0% 25%,var(--ax-card) 0% 50%) 0/16px 16px}
.axf-res img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.axf-res .bd{padding:10px 12px;display:grid;gap:2px;flex:1}
.axf-res b{font-size:13.5px;color:var(--ax-ink);overflow-wrap:anywhere;direction:ltr;text-align:right}
.axf-res small{font-size:12px;color:var(--ax-muted)}
.axf-res small.is-good{color:var(--ax-green-d);font-weight:700}
.axf-res .ac{display:flex;gap:6px;padding:0 12px 12px}
.axf-res .ac a,.axf-res .ac button{flex:1;min-height:34px;border-radius:999px;font:700 13px/1.2 Tajawal,Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.axf-res .ac a{background:var(--ax-blue-d);color:#fff;border:0}
.axf-res .ac button{background:transparent;border:1px solid var(--ax-line);color:var(--ax-text);flex:0 0 auto;padding:0 12px}
.axf-empty{padding:18px;border:1px dashed var(--ax-line);border-radius:14px;text-align:center;color:var(--ax-muted);margin:12px 0 0;font-size:14.5px}
@media(max-width:640px){.axf-preview{grid-template-columns:1fr}.axf-canvas{min-height:200px}.axf-results{grid-template-columns:1fr 1fr}.axf-usage{width:100%}}
:root[data-theme=dark] .axf-drop{border-color:#2d5f7d}
:root[data-theme=dark] .axf-drop .ic{color:#7fd3f3}
:root[data-theme=dark] .axf-res .ac a{background:#1e8fd0}
:root[data-theme=dark] .axf-res small.is-good{color:#a6e05e}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .axf-drop{border-color:#2d5f7d}:root:not([data-theme=light]) .axf-drop .ic{color:#7fd3f3}:root:not([data-theme=light]) .axf-res .ac a{background:#1e8fd0}:root:not([data-theme=light]) .axf-res small.is-good{color:#a6e05e}}
.axf-chip input[type=color]{width:22px!important;height:22px!important;min-height:0!important;padding:0!important;border-radius:50%!important;border:1px solid #0002!important;display:inline-block!important}
.axf-chip input[type=color]::-webkit-color-swatch-wrapper{padding:0}.axf-chip input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.axf-chips{align-items:center}
/* The legacy workspace hover (light blue) must not repaint the design-system buttons. */
.app-workspace .axf .ax-btn:hover:not(:disabled),.ax-page .axf .ax-btn:hover:not(:disabled){background:var(--ax-navy);color:#fff}
.app-workspace .axf .ax-btn.is-green:hover:not(:disabled),.ax-page .axf .ax-btn.is-green:hover:not(:disabled){background:#8fd93a;color:var(--ax-navy)}
.app-workspace .axf .ax-btn.is-line:hover:not(:disabled),.ax-page .axf .ax-btn.is-line:hover:not(:disabled){background:var(--ax-soft);border-color:var(--ax-blue);color:var(--ax-ink)}
.app-workspace .axf .axf-chip:hover:not(:disabled){background:var(--ax-card);color:var(--ax-ink)}
.app-workspace .axf .axf-chip[aria-pressed=true]:hover{background:var(--ax-navy);color:#fff}
.app-workspace .axf .axf-link:hover:not(:disabled),.app-workspace .axf .axf-res .ac button:hover:not(:disabled){background:transparent;color:var(--ax-blue-d)}
.app-workspace .axf .axf-pos button:hover:not(:disabled){background:var(--ax-soft)}
.app-workspace .axf .axf-pos button[aria-pressed=true]:hover{background:var(--ax-blue-d)}
@media(max-width:980px){.axf-conv .axf-col{display:contents}.axf-conv .is-add{order:1}.axf-conv .is-settings{order:2}.axf-conv .is-preview{order:3}.axf-conv .is-results{order:4}.axf-conv .axf-card+.axf-card{margin-top:0}}
.axf-guide{margin:14px 0 0;font-weight:700}.axf-guide a{color:var(--ax-blue-d)}:root[data-theme=dark] .axf-guide a{color:#7fd3f3}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .axf-guide a{color:#7fd3f3}}