/* Loaded exclusively on /outils/cout-ia. No changes to the nine other tools. */
body:has(.ai-studio) { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body:has(.ai-studio) .page-hero { padding:34px 0 22px; }
body:has(.ai-studio) .page-hero h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.055em; margin-bottom:12px; }
body:has(.ai-studio) .page-hero .lead { font-size:.98rem; max-width:790px; line-height:1.7; }
body:has(.ai-studio) .tool-topline { margin-bottom:16px; }
.ai-studio { --ai-mint:#b8efcb; --ai-yellow:#f4c95d; border:1px solid #c9d9d0; background:white; border-radius:24px; overflow:clip; box-shadow:0 24px 70px -25px #173f3130; }
.ai-studio * { min-width:0; }
.ai-studio button,.ai-studio input,.ai-studio select { font:inherit; }
.ai-studio button,.ai-studio select { cursor:pointer; }
.ai-studio :is(button,input,select,summary):focus-visible,.ai-mobile-summary button:focus-visible { outline:3px solid #bd751e; outline-offset:4px; }
.ai-studio-bar { padding:17px 26px; border-bottom:1px solid #dce4df; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ai-studio-bar>div { display:flex; align-items:center; gap:12px; }
.ai-studio-bar strong { font-size:1rem; letter-spacing:-.03em; }
.ai-studio-bar>div>span:last-child { font-size:.76rem; color:#5c6d68; }
.ai-app-icon { display:grid; place-items:center; height:32px; width:32px; background:#0b4f4a; border-radius:10px; color:#b8efcb; font-size:1.4rem; }
.ai-bar-divider { height:16px; width:1px; background:#c9d9d0; }
.ai-local { display:flex; align-items:center; gap:7px; font-size:.7rem; color:#375a48; }
.ai-local i { width:6px; height:6px; border-radius:50%; background:#19734e; box-shadow:0 0 0 4px #19734e0d; }
.ai-workspace { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:stretch; }
.ai-workspace form { padding:28px; background:#fff; }
.ai-studio .ai-section-heading { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.ai-section-heading>span:first-child { font-size:.64rem; font-weight:800; color:#42654f; background:#edf3ed; border:1px solid #d8e5db; border-radius:7px; padding:4px 6px; }
.ai-studio .ai-section-heading h2 { font-size:1.04rem; letter-spacing:-.025em; margin:0; line-height:1.3; }
.ai-auto { margin-left:auto; font-size:.6rem; color:#42654f; }
.ai-providers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border:0; padding:0; margin:0 0 21px; }
.ai-providers label,.ai-period label { position:relative; margin:0; cursor:pointer; }
.ai-providers input,.ai-period input { position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; }
.ai-provider { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; border:1px solid #dce4df; border-radius:13px; transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
.ai-provider-mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#edf3ed; font-size:1.1rem; font-weight:650; }
.ai-provider-mark.anthropic { background:#f4e9e0; color:#8e4828; }
.ai-provider-mark.google { background:#e7effc; color:#335fa9; }
.ai-provider strong { font-size:.7rem; }
.ai-provider small { font-size:.58rem; color:#607369; }
.ai-providers input:checked+.ai-provider { background:#f0f8f2; border-color:#0f766e; box-shadow:0 0 0 1px #0f766e; }
.ai-providers label:hover .ai-provider { transform:translateY(-2px); border-color:#0f766e; }
.ai-providers input:focus-visible+.ai-provider,.ai-period input:focus-visible+span { outline:3px solid #bd751e; outline-offset:3px; }
.ai-model-label { display:flex; justify-content:space-between; gap:10px; font-size:.74rem; font-weight:700; margin:0 0 8px; }
.ai-model-label span { font-size:.62rem; font-weight:400; color:#5c6d68; }
.ai-studio select { width:100%; min-height:48px; padding:12px; border:1px solid #b8ccc0; border-radius:10px; background:#fff; color:#14231f; font-weight:650; font-size:.9rem; }
.ai-studio select:disabled { opacity:.65; }
.ai-rates { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; padding:14px 16px; border-radius:12px; background:#f5f7f3; }
.ai-rates>div { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:6px; }
.ai-rates>div+div { border-left:1px solid #d5e1d8; padding-left:14px; }
.ai-rates span { font-size:.59rem; font-weight:750; letter-spacing:.07em; color:#4f6859; }
.ai-rates strong { font-size:1.02rem; font-variant-numeric:tabular-nums; }
.ai-rates small { grid-column:1/-1; font-size:.58rem; color:#5c6d68; }
.ai-studio .ai-price-notice { grid-column:1/-1; margin:0; padding:8px 10px; font-size:.65rem; line-height:1.6; background:#fff3d5; color:#775918; border-radius:7px; }
.ai-rates .ai-custom-note { grid-column:1/-1; font-size:.7rem; letter-spacing:0; }
.ai-pricing-details { font-size:.68rem; color:#5c6d68; margin:12px 0 0; }
.ai-pricing-details summary { width:fit-content; padding:4px 0; cursor:pointer; text-underline-offset:4px; }
.ai-pricing-details[open] { background:#f6f8f4; padding:10px 12px; border-radius:10px; }
.ai-pricing-details p { margin:10px 0; line-height:1.7; }
.ai-pricing-details a { color:#0b4f4a; font-weight:700; }
.ai-custom { display:grid; grid-template-columns:1fr 1fr 80px; gap:10px; border:1px dashed #b8ccc0; border-radius:12px; margin:12px 0; padding:12px; }
.ai-custom legend { font-size:.7rem; }
.ai-custom label { font-size:.72rem; }
.ai-custom input { width:100%; background:white; border-color:#b8ccc0; padding:10px; margin-top:6px; }
.ai-custom select { margin-top:6px; font-size:.75rem; padding:8px; }
.ai-usage-section { margin-top:24px; padding-top:22px; border-top:1px solid #e3eae5; }
.ai-presets { display:flex; gap:6px; margin-bottom:16px; }
.ai-presets button { padding:8px 10px; min-height:36px; border:1px solid #d5e1d8; border-radius:8px; background:white; color:#476350; font-size:.67rem; transition:background .15s,border-color .15s; }
.ai-presets button:hover,.ai-presets button[aria-pressed=true] { border-color:#0f766e; background:#ecf6ef; color:#0b4f4a; }
.ai-token-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ai-token-control { padding:15px; border:1px solid #d6e4d9; border-radius:14px; background:#f4f8f2; }
.ai-token-control.ai-output { background:#fdf9ef; border-color:#e9ddbc; }
.ai-token-control label { margin:0; display:grid; gap:4px; }
.ai-token-control label>span { font-size:.76rem; font-weight:750; }
.ai-token-control label small { font-size:.58rem; color:#54675b; line-height:1.5; }
.ai-number { margin-top:15px; }
.ai-number input { max-width:100%; width:100%; border:0; border-bottom:1px solid #c6d7c9; border-radius:0; padding:2px 0 5px; background:transparent; color:#173f31; font-size:1.7rem; font-weight:750; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.ai-number>span { display:block; margin-top:4px; font-size:.58rem; color:#54675b; }
.ai-studio input[type=range] { appearance:none; width:100%; max-width:none; height:6px; margin:22px 0 10px; padding:0; border:0; border-radius:20px; background:linear-gradient(to right,#0f766e var(--progress,50%),#dce7df var(--progress,50%)); cursor:pointer; }
.ai-studio .ai-output input[type=range] { background:linear-gradient(to right,#b68b2d var(--progress,50%),#ece3cc var(--progress,50%)); }
.ai-studio input[type=range]::-webkit-slider-thumb { appearance:none; width:19px; height:19px; border-radius:50%; background:#0f766e; border:3px solid white; box-shadow:0 2px 6px #0b4f4a40; }
.ai-studio input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#0f766e; border:3px solid white; box-shadow:0 2px 6px #0b4f4a40; }
.ai-studio .ai-output input[type=range]::-webkit-slider-thumb { background:#a97b20; }
.ai-studio .ai-output input[type=range]::-moz-range-thumb { background:#a97b20; }
.ai-scale { display:flex; justify-content:space-between; font-size:.55rem; color:#5c6d68; }
.ai-volume { display:flex; align-items:end; gap:16px; margin-top:20px; }
.ai-volume>label { flex:1; margin:0; font-size:.74rem; font-weight:700; }
.ai-volume input[type=number] { width:100%; max-width:none; font-weight:750; margin-top:8px; border:1px solid #b8ccc0; border-radius:10px; padding:10px 12px; font-size:1.15rem; background:#fff; color:#173f31; }
.ai-period { flex:1.1; display:flex; border:1px solid #d5e1d8; background:#f1f5f0; border-radius:10px; padding:4px; margin:0 0 1px; }
.ai-period label { flex:1; }
.ai-period span { display:flex; align-items:center; justify-content:center; min-height:38px; padding:6px; border-radius:7px; font-size:.65rem; white-space:nowrap; color:#46604f; }
.ai-period input:checked+span { background:#0b4f4a; color:#fff; box-shadow:0 2px 6px #0b4f4a20; }
.ai-form-bottom { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:22px; font-size:.62rem; color:#5c6d68; }
.ai-form-bottom button:not(.sr-only) { border:0; background:none; color:#46604f; padding:8px 0; text-decoration:underline; text-underline-offset:3px; font-size:.66rem; }
.ai-dashboard { background:radial-gradient(ellipse at 90% 0,#214a3b,transparent 65%),#132e25; color:#f8fcf9; padding:28px; min-width:0; scroll-margin-top:85px; }
.ai-dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 26px; }
.ai-overline { font-size:.63rem; letter-spacing:.16em; font-weight:750; color:#b3cebe; }
.ai-live { font-size:.62rem; color:#b8efcb; }
.ai-studio .ai-budget { padding:0; border-radius:0; box-shadow:none; background:none; border:0; display:flex; flex-direction:column; gap:8px; }
.ai-studio .ai-budget::after { display:none; }
.ai-studio .ai-budget-label { font-size:.84rem; color:#c3dace; text-transform:none; letter-spacing:0; }
.ai-studio .ai-budget-value { font-size:clamp(2.3rem,4.5vw,4rem); line-height:1.15; letter-spacing:-.055em; color:#c6f7d3; padding:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; animation:ai-value-in .18s ease-out; }
.ai-budget-context { font-size:.65rem; color:#b3cebe; }
.ai-selected-model { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.68rem; color:#d4e9dd; }
.ai-selected-model>span:first-child { color:#f4c95d; font-size:1rem; }
.ai-selected-model>span:last-child { margin-left:auto; border:1px solid #5c7b68; border-radius:6px; padding:3px 6px; font-size:.55rem; }
.ai-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:24px; }
.ai-kpi { display:flex; flex-direction:column; gap:9px; border:1px solid #466552; border-radius:12px; padding:14px 12px; background:#ffffff05; }
.ai-kpi>span { font-size:.62rem; color:#c3dace; }
.ai-kpi>strong { font-size:clamp(.95rem,1.8vw,1.35rem); line-height:1.25; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ai-kpi>small { font-size:.56rem; color:#b3cebe; }
.ai-breakdown { padding:22px 0; margin-top:24px; border-top:1px solid #466552; border-bottom:1px solid #466552; }
.ai-chart-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:20px; }
.ai-studio .ai-chart-heading h3 { margin:0; font-size:.85rem; font-weight:650; letter-spacing:-.02em; }
.ai-chart-heading>span { font-size:.6rem; color:#b3cebe; }
.ai-breakdown-layout { display:grid; grid-template-columns:118px minmax(0,1fr); gap:22px; align-items:center; }
.ai-donut { aspect-ratio:1; width:118px; display:grid; place-items:center; border-radius:50%; position:relative; background:conic-gradient(#9edab7 var(--share),#f4c95d 0); transform:rotate(-90deg); }
.ai-donut.is-zero { background:#466552; }
.ai-donut::before { content:''; position:absolute; inset:12px; border-radius:50%; background:#17372b; }
.ai-donut>div { position:relative; text-align:center; transform:rotate(90deg); }
.ai-donut strong { display:block; font-size:1.5rem; letter-spacing:-.045em; }
.ai-donut span { display:block; color:#c3dace; font-size:.57rem; }
.ai-legend { display:grid; gap:18px; }
.ai-legend>div>span { display:flex; align-items:center; gap:7px; font-size:.69rem; }
.ai-legend strong { margin-left:auto; font-size:.8rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ai-legend i { width:7px; height:7px; border-radius:2px; background:#9edab7; flex-shrink:0; }
.ai-legend .output i { background:#f4c95d; }
.ai-legend small { display:block; margin-top:5px; color:#b3cebe; font-size:.56rem; line-height:1.6; }
.ai-volume-result { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.ai-volume-result .ai-kpi { padding:0; border:0; background:none; }
.ai-studio .ai-insight { font-size:.65rem; line-height:1.8; margin:20px 0 0; padding:12px 14px; border-left:2px solid #e7c66b; background:#ffffff06; border-radius:0 8px 8px 0; color:#c3dace; }
.ai-insight strong { font-weight:650; color:#f5df9f; }
.ai-result-footer { margin-top:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ai-result-footer button { display:flex; justify-content:space-between; gap:20px; align-items:center; background:#d2f5de; color:#123f2a; border:1px solid #d2f5de; padding:12px 16px; border-radius:10px; font-size:.74rem; font-weight:750; transition:background .15s,transform .15s; }
.ai-result-footer button:hover { background:#fff; transform:translateY(-1px); }
.ai-result-footer button:disabled { opacity:.5; cursor:not-allowed; }
.ai-studio .ai-result-footer p { color:#b3cebe; font-size:.58rem; margin:0; }
.ai-studio .ai-copy-status { color:#d2f5de; font-size:.7rem; margin:10px 0 0; }
.ai-copy-status:empty { display:none; }
.ai-assurance { display:flex; justify-content:center; gap:30px; padding:13px 20px; font-size:.64rem; background:#edf4ed; color:#42654f; border-top:1px solid #c9d9d0; }
.ai-empty { padding:50px 20px; border:1px dashed #8eab99; border-radius:16px; font-size:.95rem; color:#c3dace; }
.ai-mobile-summary { display:none; }
@keyframes ai-value-in { from{opacity:.5;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
@media (max-width:1000px) and (min-width:781px) { .ai-workspace form,.ai-dashboard { padding:22px; } .ai-provider strong { font-size:.62rem; } .ai-auto { display:none; } .ai-token-control { padding:12px; } .ai-breakdown-layout { grid-template-columns:90px minmax(0,1fr); gap:12px; } .ai-donut { width:90px; } .ai-volume { gap:8px; } .ai-period span { font-size:.59rem; } }
@media (max-width:780px) {
 body:has(.ai-studio) .page-hero { padding:26px 0 16px; }
 body:has(.ai-studio) .page-hero h1 { font-size:2rem; }
 body:has(.ai-studio) .page-hero .lead { font-size:.88rem; }
 .ai-workspace { grid-template-columns:minmax(0,1fr); }
 .ai-workspace form,.ai-dashboard { padding:24px; }
 .ai-studio-bar { padding:14px 20px; }
 .ai-studio-bar>div>span:last-child,.ai-bar-divider { display:none; }
 .ai-studio-bar strong { font-size:.85rem; }
 .ai-local { font-size:.59rem; }
 .ai-studio input:not([type=radio]):not([type=range]),.ai-studio select { font-size:16px; }
 .ai-studio .ai-number input { font-size:1.7rem; }
 .ai-studio .ai-volume input { font-size:1.15rem; }
 .ai-studio .ai-budget-value { font-size:3.5rem; }
 .ai-kpi>strong { font-size:1.2rem; }
 .ai-assurance { gap:8px 20px; flex-wrap:wrap; justify-content:flex-start; font-size:.59rem; }
 .ai-mobile-summary { display:flex; position:fixed; z-index:25; bottom:12px; left:12px; right:12px; background:#17372bf5; border:1px solid #5c7b68; border-radius:14px; padding:12px 16px; padding-bottom:max(12px,env(safe-area-inset-bottom)); color:#c6f7d3; justify-content:space-between; align-items:center; gap:12px; box-shadow:0 6px 30px #0b4f4a30; }
 .ai-mobile-summary>div { display:grid; gap:3px; min-width:0; }
 .ai-mobile-summary span { font-size:.61rem; color:#c3dace; }
 .ai-mobile-summary strong { font-size:1.2rem; overflow-wrap:anywhere; }
 .ai-mobile-summary button { border:0; border-radius:8px; padding:12px; min-height:44px; color:#123f2a; background:#d2f5de; font-size:.68rem; font-weight:750; flex-shrink:0; }
 body:has(.ai-mobile-summary:not([hidden])) { padding-bottom:90px; }
 body:has(.consent:not([hidden])) .ai-mobile-summary { display:none; }
}
@media (max-width:420px) {
 .ai-workspace form,.ai-dashboard { padding:20px 16px; }
 .ai-studio-bar { padding:12px 16px; gap:8px; }
 .ai-local { font-size:.52rem; }
 .ai-app-icon { width:27px; height:27px; }
 .ai-studio-bar>div { gap:8px; }
 .ai-auto { font-size:.51rem; }
 .ai-providers { gap:6px; }
 .ai-provider { padding:10px 2px; }
 .ai-provider strong { font-size:.6rem; }
 .ai-provider small { font-size:.51rem; }
 .ai-model-label span { font-size:.52rem; }
 .ai-token-pair { gap:8px; }
 .ai-token-control { padding:12px 10px; }
 .ai-token-control label>span { font-size:.67rem; }
 .ai-token-control label small { font-size:.52rem; min-height:28px; }
 .ai-presets { gap:5px; }
 .ai-presets button { font-size:.59rem; padding:8px; }
 .ai-volume { gap:10px; flex-wrap:wrap; }
 .ai-volume>label { min-width:110px; }
 .ai-period span { font-size:.61rem; }
 .ai-studio .ai-budget-value { font-size:2.8rem; }
 .ai-kpis { gap:6px; }
 .ai-kpi { padding:12px 8px; }
 .ai-kpi>strong { font-size:1.02rem; }
 .ai-breakdown-layout { grid-template-columns:95px minmax(0,1fr); gap:14px; }
 .ai-donut { width:95px; }
 .ai-legend>div>span { font-size:.62rem; gap:5px; }
 .ai-legend strong { font-size:.68rem; }
 .ai-legend small { font-size:.51rem; }
 .ai-form-bottom { font-size:.54rem; }
 .ai-custom { grid-template-columns:1fr 1fr; }
}
/* Legible supporting text and touch targets, including narrow phones. */
.ai-provider strong,.ai-model-label,.ai-token-control label>span,.ai-volume>label { font-size:.875rem; }
.ai-provider small,.ai-model-label span,.ai-rates span,.ai-rates small,.ai-token-control label small,.ai-number>span,.ai-scale,.ai-kpi>small,.ai-budget-context,.ai-chart-heading>span,.ai-legend small,.ai-result-footer p,.ai-assurance,.ai-form-bottom,.ai-pricing-details,.ai-local,.ai-auto,.ai-selected-model>span:last-child { font-size:.75rem; }
.ai-presets button,.ai-period span,.ai-form-bottom button:not(.sr-only),.ai-kpi>span,.ai-live,.ai-overline,.ai-legend>div>span,.ai-selected-model,.ai-insight,.ai-price-notice,.ai-copy-status { font-size:.8125rem; }
.ai-presets button,.ai-period span { min-height:44px; }
.ai-result-footer button { font-size:.875rem; min-height:44px; }
.ai-legend strong { font-size:.875rem; }
.ai-studio .ai-insight,.ai-studio .ai-price-notice { font-size:.8125rem; }
.ai-studio .ai-result-footer p { font-size:.75rem; }
.ai-studio .sr-only:focus-visible { position:static; width:auto; height:auto; clip-path:none; padding:10px; }
.ai-token-control label small { min-height:36px; }
.ai-mobile-summary span { font-size:.75rem; }
.ai-mobile-summary button { font-size:.8125rem; }
@media (max-width:1000px) and (min-width:781px) { .ai-providers { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-volume { flex-wrap:wrap; } .ai-period { flex-basis:100%; } }
@media (max-width:520px) {
 .ai-provider strong { font-size:.75rem; }
 .ai-provider small { display:none; }
 .ai-auto,.ai-model-label span { display:none; }
 .ai-volume { flex-wrap:wrap; }
 .ai-volume>label,.ai-period { flex-basis:100%; }
 .ai-presets { flex-wrap:wrap; }
 .ai-breakdown-layout { grid-template-columns:90px minmax(0,1fr); gap:12px; }
 .ai-donut { width:90px; }
 .ai-legend>div>span { flex-wrap:wrap; }
 .ai-legend strong { margin-left:14px; }
 .ai-selected-model { flex-wrap:wrap; }
 .ai-selected-model>span:last-child { margin-left:0; }
 .ai-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ai-kpis .ai-kpi:first-child { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; }
 .ai-form-bottom { flex-wrap:wrap; }
 .ai-assurance { flex-direction:column; align-items:flex-start; }
 .ai-studio-bar { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { .ai-studio *,.ai-mobile-summary * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }