:root{--r-bg:#f5f3ed;--r-card:#fff;--r-text:#24332f;--r-muted:#6d7772;--r-green:#3f675d;--r-green-dark:#294b43;--r-soft:#eaf1ee;--r-orange:#cf8b57;--r-border:#e3ddd1;--r-red:#b93c43;--r-yellow:#ad791d;--r-shadow:0 22px 55px rgba(34,51,47,.09)}
[data-theme="dark"]{--r-bg:#151917;--r-card:#1d231f;--r-text:#edf3ef;--r-muted:#a6b0aa;--r-soft:#26332e;--r-border:#354039;--r-shadow:0 22px 55px rgba(0,0,0,.25)}
body{background:radial-gradient(circle at 8% 5%,rgba(63,103,93,.13),transparent 25rem),var(--r-bg);color:var(--r-text)}
.roas-page{padding:28px 0 70px}.roas-container{width:min(1360px,calc(100% - 32px));margin:auto}.tool-nav{display:flex;justify-content:space-between;margin-bottom:18px;color:var(--r-muted);font-size:.84rem;font-weight:700}.tool-nav a{color:var(--r-green);text-decoration:none}
.roas-hero{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:end;padding:38px;margin-bottom:24px;border:1px solid var(--r-border);border-radius:26px;background:var(--r-card);box-shadow:var(--r-shadow)}.eyebrow{display:inline-flex;gap:8px;color:var(--r-orange);font-size:.79rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.roas-hero h1{max-width:760px;margin:12px 0 10px;font-size:clamp(2.1rem,4.5vw,3.6rem);line-height:1;letter-spacing:-.05em}.roas-hero p{max-width:760px;margin:0;color:var(--r-muted);font-size:1.08rem}.hero-warning{display:flex;gap:12px;padding:17px;border-radius:16px;background:#fff6e9;color:#624c2d;font-size:.86rem;line-height:1.45}.hero-warning i{font-size:1.3rem;color:var(--r-orange)}
.roas-layout{display:grid;grid-template-columns:minmax(390px,520px) minmax(0,1fr);gap:24px;align-items:start}.input-panel,.result-panel{padding:27px;border:1px solid var(--r-border);border-radius:24px;background:var(--r-card);box-shadow:var(--r-shadow)}.result-panel{position:sticky;top:18px}.section-heading,.result-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.section-heading span,.result-top>div>span{color:var(--r-orange);font-size:.75rem;font-weight:850;text-transform:uppercase}.section-heading h2,.result-top h2{margin:3px 0 0;font-size:1.45rem}.text-button{border:0;background:none;color:var(--r-green);font-weight:800;cursor:pointer}
fieldset{margin:0 0 16px;padding:18px;border:1px solid var(--r-border);border-radius:17px}legend{width:auto;margin:0;padding:0 7px;color:var(--r-green-dark);font-size:.96rem;font-weight:850}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px;margin:0}.field>span{font-size:.79rem;font-weight:750}.field small,.form-note{color:var(--r-muted);font-size:.72rem}.input-box{display:flex;align-items:center;min-height:45px;border:1px solid var(--r-border);border-radius:11px;background:var(--r-card);overflow:hidden}.input-box:focus-within{border-color:var(--r-green);box-shadow:0 0 0 3px rgba(63,103,93,.12)}.input-box b{padding:0 11px;color:var(--r-muted);font-size:.8rem}.input-box input{min-width:0;width:100%;height:43px;padding:0 11px;border:0;outline:0;background:transparent;color:var(--r-text);font:inherit}.form-note{display:flex;gap:7px;margin:14px 0 0;line-height:1.45}
.calculate-wrap{position:sticky;bottom:10px;padding:9px;border:1px solid var(--r-border);border-radius:15px;background:color-mix(in srgb,var(--r-card) 92%,transparent);box-shadow:0 12px 30px rgba(35,51,47,.14);backdrop-filter:blur(10px)}.calculate-button{width:100%;min-height:53px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--r-orange),#dda372);color:#fff;font-weight:900;cursor:pointer}.calculate-button:hover{filter:brightness(1.04)}#form-error{min-height:0;margin:6px 0 0;color:var(--r-red);font-size:.78rem;text-align:center}
.status-badge{padding:7px 10px;border-radius:999px;background:var(--r-soft);color:var(--r-muted);font-size:.72rem;font-weight:850}.status-badge.profit{background:#e4f5ec;color:#18734c}.status-badge.loss{background:#fde8e9;color:var(--r-red)}.status-badge.warning{background:#fff2d8;color:var(--r-yellow)}.diagnosis{display:flex;gap:14px;align-items:center;padding:17px;margin-bottom:15px;border-radius:16px;background:var(--r-soft)}.diagnosis i{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:var(--r-card);font-size:1.3rem}.diagnosis strong,.diagnosis p{display:block;margin:0}.diagnosis p{margin-top:3px;color:var(--r-muted);font-size:.8rem}.diagnosis.profit{background:#e4f5ec}.diagnosis.loss{background:#fde8e9}.diagnosis.warning{background:#fff2d8}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{min-width:0;padding:15px;border:1px solid var(--r-border);border-radius:14px}.kpi.primary{background:linear-gradient(145deg,var(--r-green-dark),var(--r-green));color:#fff;border:0}.kpi span,.kpi small{display:block;color:var(--r-muted);font-size:.7rem}.kpi.primary span,.kpi.primary small{color:rgba(255,255,255,.72)}.kpi strong{display:block;margin:7px 0 5px;font-size:clamp(1.08rem,2vw,1.42rem)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:15px 0;border:1px solid var(--r-border);border-radius:14px}.metrics div{padding:12px;border-right:1px solid var(--r-border)}.metrics div:last-child{border:0}.metrics span,.metrics strong{display:block}.metrics span{color:var(--r-muted);font-size:.68rem}.metrics strong{margin-top:3px;font-size:.9rem}
.breakdown-card,.scenario-section{padding:17px;border:1px solid var(--r-border);border-radius:16px}.breakdown-card h3,.scenario-section h3{margin:0 0 12px;font-size:.95rem}.breakdown-row{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px dashed var(--r-border);font-size:.82rem}.breakdown-row.negative strong{color:var(--r-red)}.breakdown-row.total{padding-top:13px;border:0;font-size:1rem}.limit-card{display:flex;gap:13px;align-items:center;padding:16px;margin:15px 0;border-radius:16px;background:var(--r-soft)}.limit-card>i{font-size:1.5rem;color:var(--r-orange)}.limit-card span,.limit-card small,.limit-card strong{display:block}.limit-card span,.limit-card small{color:var(--r-muted);font-size:.72rem}.limit-card strong{margin:3px 0;font-size:1.25rem}.scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.scenario{padding:12px;border-radius:12px;background:var(--r-soft)}.scenario span,.scenario strong,.scenario small{display:block}.scenario span,.scenario small{color:var(--r-muted);font-size:.68rem}.scenario strong{margin:4px 0;font-size:.92rem}.scenario.loss strong{color:var(--r-red)}.disclaimer{margin:13px 0 0;color:var(--r-muted);font-size:.68rem;text-align:center}
[data-theme="dark"] .hero-warning{background:#3b3022;color:#ecd7b8}[data-theme="dark"] legend{color:#a8cabd}[data-theme="dark"] .status-badge.profit,[data-theme="dark"] .diagnosis.profit{background:#203a2d}[data-theme="dark"] .status-badge.loss,[data-theme="dark"] .diagnosis.loss{background:#3c2527}[data-theme="dark"] .status-badge.warning,[data-theme="dark"] .diagnosis.warning{background:#3b3022}
@media(max-width:1100px){.roas-layout{grid-template-columns:1fr}.result-panel{position:static}.roas-hero{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.roas-container{width:calc(100% - 20px)}.roas-hero,.input-panel,.result-panel{padding:20px}.field-grid,.kpi-grid{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(-n+2){border-bottom:1px solid var(--r-border)}.scenarios{grid-template-columns:1fr}.tool-nav span{display:none}}