/* OutilsIA Pro mini-apps: shared identity, task-specific result layouts. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tool-topline { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; font-size:.87rem; }
.tool-topline a { font-weight:700; color:var(--brand-dark); text-decoration:none; }
.tool-app { background:#fff; border:1px solid #cadbd4; border-radius:28px; box-shadow:0 24px 70px -25px #0b4f4a30; overflow:hidden; }
.tool-app-bar { padding:16px 26px; display:flex; justify-content:space-between; align-items:center; gap:14px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,#fff,#f2f8f4); font-size:.85rem; font-weight:750; }
.tool-app-bar>span:first-child { display:flex; align-items:center; gap:12px; }
.tool-icon { width:38px; height:38px; display:inline-grid; place-items:center; flex-shrink:0; border-radius:12px; background:#e2f1eb; color:var(--brand-dark); font-size:1.05rem; font-weight:850; }
.tool-live { display:flex; align-items:center; gap:7px; color:var(--brand-dark); font-size:.76rem; }
.tool-live>span { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px #0f766e12; }
.tool-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); }
.tool-workspace>form { padding:30px; min-width:0; }
.tool-panel-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:26px; }
.tool-panel-heading h2 { font-size:1.18rem; margin:2px 0 6px; letter-spacing:-.025em; }
.tool-panel-heading p { margin:0; font-size:.8rem; }
.step-number { flex-shrink:0; width:30px; height:30px; border:1px solid #cadbd4; background:#fff; border-radius:10px; display:grid; place-items:center; font-size:.68rem; font-weight:800; color:var(--brand-dark); }
.tool-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
.tool-field { margin:0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.tool-field>span:first-child { font-size:.8rem; font-weight:750; color:#344b43; }
.tool-field small { color:var(--muted); font-size:.72rem; line-height:1.5; }
.field-wide { grid-column:1/-1; }
.input-shell { display:flex; align-items:center; border:1px solid #c5d5ce; background:#fbfcfa; border-radius:12px; transition:box-shadow .18s,border-color .18s; overflow:hidden; }
.tool-field input:not([type=range]) { width:100%; max-width:none; min-width:0; border:0; background:transparent; border-radius:12px; padding:13px 12px; color:var(--ink); font:inherit; font-variant-numeric:tabular-nums; font-weight:650; }
.input-shell:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px #0f766e16; }
.input-shell input:focus-visible { outline:2px solid var(--brand); outline-offset:-3px; }
.input-unit { flex-shrink:0; padding-right:12px; color:var(--muted); font-size:.74rem; }
.tool-field select,.tool-field textarea { width:100%; max-width:100%; min-width:0; border:1px solid #c5d5ce; background:#fbfcfa; border-radius:12px; padding:13px 12px; color:var(--ink); font:inherit; font-size:.92rem; }
.tool-field textarea { resize:vertical; min-height:180px; line-height:1.7; }
.tool-field input[type=range] { width:100%; max-width:none; padding:0; height:24px; accent-color:var(--brand); cursor:pointer; border:0; }
.tool-field [data-range-value] { float:right; color:var(--brand-dark); border-radius:6px; background:#e5f2ec; padding:1px 7px; }
.tool-input-note { font-size:.75rem; line-height:1.65; margin:22px 0; padding:12px 14px; border-left:2px solid #d1e1d9; background:#f8faf7; border-radius:0 8px 8px 0; }
.tool-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.tool-actions .button { min-height:46px; font-size:.88rem; }
.tool-reset { background:none; color:var(--muted); border:0; padding:12px 0; font-size:.8rem; text-decoration:underline; text-underline-offset:4px; }
.tool-error { padding:14px; background:#fff1eb; border:1px solid #edc3af; border-radius:12px; color:#873d20!important; font-size:.85rem; }
.tool-result-panel { scroll-margin-top:90px; min-width:0; padding:30px; background:radial-gradient(ellipse at 100% 0,#e2f1e7 0,transparent 60%),#f3f7f2; border-left:1px solid #d9e5dc; }
.tool-kpi { min-width:0; border:1px solid #d6e2d9; background:#ffffffc9; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.kpi-label { color:#50695e; font-size:.73rem; line-height:1.4; font-weight:700; }
.kpi-value { font-size:clamp(1.18rem,2.1vw,1.65rem); letter-spacing:-.04em; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi-detail { color:var(--muted); font-size:.71rem; line-height:1.5; }
.tool-kpi-primary { position:relative; padding:26px; background:linear-gradient(125deg,#0b4f4a,#116e5b); border:0; color:white; box-shadow:0 12px 24px -12px #0b4f4a70; overflow:hidden; }
.tool-kpi-primary::after { content:''; position:absolute; width:160px; height:160px; border:1px solid #ffffff13; border-radius:50%; right:-70px; top:-70px; box-shadow:0 0 0 20px #ffffff05,0 0 0 40px #ffffff04; pointer-events:none; }
.tool-kpi-primary .kpi-label { color:#d1e8dc; text-transform:uppercase; letter-spacing:.08em; font-size:.67rem; }
.tool-kpi-primary .kpi-value { font-size:clamp(2rem,3.6vw,3.2rem); padding:6px 0; position:relative; z-index:1; }
.tool-kpi-primary .kpi-detail { color:#d3e7dd; }
.tool-kpi-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.tool-kpi-grid>.tool-kpi:last-child:nth-child(odd) { grid-column:1/-1; }
.result-insight { font-size:.79rem; line-height:1.7; padding:12px 0 0; margin:10px 0 0; }
.tool-meter { margin-top:18px; }
.tool-meter-label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.74rem; margin-bottom:6px; }
.tool-meter small { display:block; font-size:.68rem; color:var(--muted); }
.tool-meter progress { appearance:none; display:block; width:100%; height:7px; border:0; border-radius:9px; overflow:hidden; background:#dce8df; accent-color:var(--brand); }
.tool-meter progress::-webkit-progress-bar { background:#dce8df; border-radius:9px; }
.tool-meter progress::-webkit-progress-value { background:var(--brand); border-radius:9px; transition:width .22s ease; }
.tool-meter progress::-moz-progress-bar { background:var(--brand); border-radius:9px; }
.tool-meter.over progress { accent-color:#a34727; }
.tool-meter.over progress::-webkit-progress-value { background:#a34727; }
.tool-meter.over progress::-moz-progress-bar { background:#a34727; }
.tool-meter.over strong { color:#873d20; }
.tool-result-actions { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.tool-result-actions .button { font-size:.83rem; background:#fff; min-height:44px; }
.button:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.tool-empty { border:1px dashed #acc5b6; padding:48px 24px; border-radius:18px; color:var(--muted); text-align:center; font-size:.9rem; }
.roas-flow { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:center; gap:8px; margin-bottom:14px; }
.flow-arrow { text-align:center; color:var(--brand); }
.roas-flow .tool-kpi { padding:14px; }
.subscription-scenarios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.scenario-best { border:2px solid var(--brand); background:#e5f3e9; }
.utm-preview { padding:22px; background:#fff; border:1px solid #c9dcd0; border-radius:18px; }
.utm-host { font-size:1.15rem; color:var(--brand-dark)!important; font-weight:750; }
.utm-output { width:100%; resize:vertical; background:#f4f8f3; border:1px solid #d5e3d8; border-radius:10px; padding:14px; font: .82rem/1.8 ui-monospace,monospace; color:#245440; overflow-wrap:anywhere; }
.tool-utm .tool-field:first-child,.tool-serp .tool-field { grid-column:1/-1; }
.tool-characters .tool-fields { display:block; }
.tool-characters textarea { min-height:360px; }
.serp-preview { background:#fff; border:1px solid #dce0e3; border-radius:16px; padding:24px; margin-bottom:18px; font-family:Arial,sans-serif; max-width:100%; }
.serp-caption { display:block; color:#68736b; letter-spacing:.13em; font-size:10px; margin-bottom:28px; }
.serp-site { display:flex; align-items:center; gap:12px; font-size:14px; color:#202124; overflow-wrap:anywhere; }
.serp-favicon { flex-shrink:0; display:grid; place-items:center; width:28px; height:28px; background:#e5eee8; border-radius:50%; color:#245440; font-weight:bold; }
.serp-url { color:#4d5156; margin:4px 0 10px 40px; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.serp-title { font-size:20px; line-height:1.3; color:#1a0dab; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom:6px; }
.serp-description { font-size:14px; line-height:1.58; color:#4d5156; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.serp-mobile { width:360px; margin-inline:auto; padding:18px; }
.serp-mobile .serp-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.serp-mobile .serp-description { -webkit-line-clamp:3; }
.qr-frame { display:grid; place-items:center; background:#fff; padding:18px; border:1px solid #d6e2d9; border-radius:20px; box-shadow:0 8px 30px #14231f08; }
.qr-canvas { max-width:100%; width:280px; height:auto; image-rendering:pixelated; }
.tool-qr textarea { min-height:240px; }
.tool-explanation { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; margin:56px 0 36px; align-items:start; }
.tool-explanation h2 { margin:8px 0 16px; font-size:1.6rem; }
.tool-explanation p { font-size:.91rem; line-height:1.85; }
.tool-example { border:1px solid #eadbb6; padding:24px; border-radius:20px; background:#fbf5e6; }
.tool-example .badge { background:#f4e5bd; color:#64501d; }
.tool-example p:last-child { margin-bottom:0; }
.tool-return { padding:22px 26px; border:1px solid var(--line); border-radius:18px; background:#fff; display:flex; align-items:center; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.tool-return p { font-size:.8rem; margin:0; }
.tool-return strong { color:var(--ink); }
.tool-return code { font-size:.74rem; overflow-wrap:anywhere; }
.tool-return button { font-size:.76rem; }
.tool-return [data-bookmark-help] { flex-basis:100%; }
.tool-support { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:40px; padding:28px 0; border-top:1px solid var(--line); margin-top:36px; }
.tool-support h2 { font-size:1.3rem; margin:10px 0; }
.tool-support p { font-size:.8rem; margin-bottom:0; }
.tool-support>div:last-child { text-align:right; }
.tool-support .button { font-size:.82rem; }
.tool-recommendation { padding:26px; background:#eef4ed; border:1px solid #ceddcb; border-radius:20px; margin-top:26px; }
.tool-recommendation h2 { margin:10px 0 14px; font-size:1.4rem; }
.tool-recommendation p { font-size:.87rem; }
.tool-recommendation .merchant-cta { margin-bottom:0; }
.tool-index-banner { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; background:linear-gradient(115deg,#0b4f4a,#193e34); padding:42px; border-radius:26px; color:#fff; }
.tool-index-banner h2 { font-size:clamp(1.8rem,3.6vw,2.8rem); margin:22px 0 16px; line-height:1.16; }
.tool-index-banner p { color:#c7ddd2; font-size:.94rem; max-width:470px; margin:0; }
.tool-index-banner .badge { background:#ffffff17; color:#ddf1e5; border:1px solid #ffffff30; }
.tool-index-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-left:1px solid #ffffff26; }
.tool-index-stat strong { font-size:6rem; line-height:1.1; letter-spacing:-.08em; color:var(--sun); }
.tool-index-stat span { font-size:.85rem; color:#c7ddd2; }
.tool-index-stat code { font-size:.76rem; margin-top:16px; }
.tool-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:30px 0; }
.tool-directory-card { display:flex; flex-direction:column; align-items:flex-start; background:#fff; border:1px solid #d6e1d9; border-radius:22px; padding:26px; text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s; }
.tool-directory-card:hover { transform:translateY(-4px); border-color:#89b5a4; box-shadow:0 12px 30px #0b4f4a0c; }
.tool-directory-card .tool-icon { width:46px; height:46px; margin-bottom:22px; }
.tool-directory-card .eyebrow { font-size:.63rem; margin:0; }
.tool-directory-card h2 { font-size:1.25rem; line-height:1.25; margin:10px 0 12px; }
.tool-directory-card p { margin:0 0 22px; font-size:.85rem; }
.tool-card-action { display:flex; justify-content:space-between; gap:12px; width:100%; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); color:var(--brand-dark); font-size:.8rem; font-weight:750; }
@media (min-width:981px) { .tool-serp .tool-workspace { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
@media (max-width:980px) { .tool-workspace>form,.tool-result-panel { padding:24px; } .tool-fields { grid-template-columns:1fr; } .tool-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:780px) {
 .tool-topline { align-items:flex-start; flex-direction:column; }
 .tool-app { border-radius:20px; }
 .tool-app-bar { padding:14px 18px; }
 .tool-app-bar .tool-icon { width:30px; height:30px; border-radius:9px; }
 .tool-live { font-size:.65rem; }
 .tool-workspace { grid-template-columns:minmax(0,1fr); }
 .tool-workspace>form,.tool-result-panel { padding:24px 20px; }
 .tool-result-panel { border-left:0; border-top:1px solid #d9e5dc; }
 .tool-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
 .tool-panel-heading { margin-bottom:22px; }
 .tool-field input:not([type=range]),.tool-field textarea,.tool-field select { font-size:16px; }
 .tool-kpi-primary .kpi-value { font-size:2.5rem; }
 .tool-characters textarea { min-height:240px; }
 .tool-explanation { grid-template-columns:1fr; gap:20px; margin-top:36px; }
 .tool-support { grid-template-columns:1fr; gap:18px; }
 .tool-support>div:last-child { text-align:left; }
 .tool-index-banner { grid-template-columns:1fr; padding:28px; }
 .tool-index-stat { border-left:0; border-top:1px solid #ffffff26; padding-top:22px; flex-direction:row; flex-wrap:wrap; gap:18px; justify-content:flex-start; }
 .tool-index-stat strong { font-size:3.5rem; }
 .tool-index-stat code { margin:0; }
}
@media (max-width:420px) { .tool-fields { grid-template-columns:1fr; } .tool-directory { grid-template-columns:1fr; } .tool-app-bar { padding:12px; } .tool-workspace>form,.tool-result-panel { padding:22px 16px; } .tool-kpi { padding:14px; } .tool-kpi-primary { padding:22px; } .subscription-scenarios { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .tool-directory-card:hover { transform:none; } }