/* Margin calculator visual layer. Input, validation and saved data stay in tools.js. */
body.tools-view, body.tools-view .app-main { background:#0d0f10; }
body.tools-view .topbar {
  --ld-panel:#121517; --ld-text:#f8f8f8; --ld-muted:#b5b9ba;
  --ld-muted-bg:#292c2f; --ld-border-strong:#35393c;
  background:#121517; border-bottom-color:#35393c;
}
body.tools-view .topbar .btn.topbar-login { background:#24282a; color:#f6f6f6; border-color:#45494b; }
body.tools-view .sidebar { background:#111416; border-right:1px solid #303538; }
body.tools-view .side-nav a.nav-current { background:#33251e; color:#ffa66f; border-left-color:#ff8a4b; border-radius:9px; }
body.tools-view .side-nav a.nav-current svg { color:#ff9e62; }
body.tools-view footer { background:#0d0f10; border-top-color:#303538; }
body.tools-view footer, body.tools-view footer a, body.tools-view footer button { color:#c5c8c9; }
body.tools-view footer .footer-meta { color:#a9adae; }

#view-tools {
  --bg:#101416; --ink:#f8f8f8; --ink-body:#d0d4d4;
  --ink-soft:#c0c7c8; --ink-faint:#9ba5a7;
  --surface:#171b1d; --surface-hover:#252b2e;
  --border:#343b3e; --border-strong:#394043;
  --accent:#ff8a4b; --accent-ink:#ffb386; --accent-soft:#35271e;
  --brand:#ff8a4b; --brand-ink:#ffb386; --brand-soft:#39281f;
  --badge-a:#ffaaa0; --badge-a-bg:#382422;
  --badge-b:#ffc396; --badge-b-bg:#382b21;
  --badge-c:#a5d6ae; --badge-c-bg:#25372e;
  color:#f8f8f8;
}
#view-tools .content { max-width:1430px; padding-top:34px; }
#view-tools .eyebrow { background:none; border:0; padding:0; margin:0 0 8px; color:#ffa66d; font-size:11px; font-weight:800; letter-spacing:.12em; }
#view-tools .eyebrow::before { display:none; }
#view-tools .page-head { padding:0; }
#view-tools .page-head h1 { color:#fff; font-size:clamp(34px,4vw,51px); line-height:1.2; letter-spacing:-.05em; }
#view-tools .page-lead { margin:8px 0 0; color:#bac1c2; font-size:16px; }
#view-tools .content > .callout { max-width:800px; margin:22px 0 18px; padding:12px 16px; border:1px solid #574432; border-radius:9px; background:#27211e; }
#view-tools .content > .callout p { font-size:12px; line-height:1.65; color:#dacfc5; }
#view-tools .content > .callout strong { color:#ffb386; }

#view-tools .mc-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; min-height:165px; padding:25px clamp(20px,3vw,38px); margin-bottom:18px; overflow:hidden; border:1px solid #3f3731; border-radius:14px; background:radial-gradient(circle at 83% 50%,#38271e 0,#191b1c 43%,#15191b 100%); }
#view-tools .mc-hero::after { content:""; position:absolute; z-index:0; right:4%; top:50%; width:152px; height:152px; transform:translateY(-50%); background-image:url("assets/home-icon-atlas.webp"); background-repeat:no-repeat; background-size:400% 200%; background-position:0% 100%; }
#view-tools .mc-hero > * { position:relative; z-index:1; }
#view-tools .mc-hero h2 { max-width:calc(100% - 200px); color:#fff; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.045em; }
#view-tools .mc-hero p { max-width:calc(100% - 200px); color:#cad0d0; font-size:13px; }

#view-tools .mc-mode-bar { margin:0 0 18px; }
#view-tools .mc-mode-toggle { border-color:#394043; border-radius:9px; background:#191e20; padding:4px; }
#view-tools .mc-mode-btn { border-radius:6px; color:#bfc7c8; }
#view-tools .mc-mode-btn.active { background:#ff8a4b; color:#26160e; }
#view-tools .mc-mode-btn:not(.active):hover { background:#2b3032; color:#fff; }
#view-tools .mc-example-toggle { border-color:#545a5c; border-radius:7px; color:#c4cbcc; }
#view-tools .mc-example-toggle span { color:#ffb386; }
#view-tools .mc-example-toggle:hover { background:#272d2f; }

/* Desktop: inputs and advertising costs on the left, the live result on the right.
   The result remains in document flow so long forms never get covered by a sticky panel. */
#view-tools .mc-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); grid-template-areas:"inputs results" "ad results"; align-items:start; gap:16px 18px; }
#view-tools .mc-inputs { grid-area:inputs; gap:16px; }
#view-tools #mcAdPanel { grid-area:ad; }
#view-tools .mc-results { grid-area:results; gap:16px; }
#view-tools .dash-panel { background:#171b1d; border-color:#394043; border-radius:12px; }
#view-tools .dash-panel-head { padding:17px 20px; border-bottom-color:#353b3e; color:#fff; }
#view-tools .mc-head-sub { color:#aab3b5; }
#view-tools .mc-form, #view-tools .mc-result-body { padding:17px 20px 20px; }
#view-tools .mc-result-body { gap:13px; }
#view-tools .mc-field label, #view-tools .mc-field-label, #view-tools .mc-q { color:#e8eaea; }
#view-tools .mc-field input[type="number"], #view-tools .mc-select,
#view-tools .mc-plan-form .mc-field input[type="text"],
#view-tools .mc-plan-form .mc-field input[type="date"], #view-tools .mc-plan-form textarea { border-color:#454d50; border-radius:8px; background:#111618; color:#fff; min-height:43px; }
#view-tools input::placeholder, #view-tools textarea::placeholder { color:#889395; opacity:1; }
#view-tools .mc-help, #view-tools .mc-radio-hint, #view-tools .mc-guide-meta { color:#aeb7b9; }
#view-tools .mc-req { background:#37271e; color:#ffb587; }
#view-tools .mc-optional { background:#292e30; color:#c1c8ca; }
#view-tools .mc-radio-row label { color:#e6e9e9; }
#view-tools .mc-radio-row input { accent-color:#ff8a4b; }
#view-tools .mc-chip { border-color:#495154; border-radius:7px; background:#202527; color:#cbd0d0; }
#view-tools .mc-chip.active { background:#ff8a4b; border-color:#ff8a4b; color:#25160f; }
#view-tools .mc-chip:not(.active):hover { background:#343a3c; }
#view-tools .mc-platform-panel, #view-tools .mc-ad-custom,
#view-tools .mc-detail-summary, #view-tools .mc-platform-guide { background:#212729; border-color:#485052; border-radius:9px; }
#view-tools .mc-guide-rate, #view-tools .mc-example-card { background:#171b1d; border-color:#42484a; }
#view-tools .mc-example-grid { background:#343b3e; }
#view-tools .mc-example-banner { border-color:#805637; border-radius:9px; background:#38291f; color:#ffe3cb; }
#view-tools .mc-link-btn, #view-tools .mc-guide-links a,
#view-tools .mc-example-card summary { color:#ffb386; }

#view-tools .mc-result-empty { position:relative; display:grid; place-items:center; min-height:186px; padding:28px; border:1px dashed #535b5e; border-radius:9px; background:#212628; color:#d0d6d6; text-align:center; line-height:1.7; }
#view-tools .mc-result-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,160px); align-items:center; gap:3px 14px; margin:0; padding:19px 20px; border:1px solid #75492e; border-radius:10px; background:linear-gradient(115deg,#37271e,#211e1c); text-align:left; }
#view-tools .mc-result-hero-label { grid-column:1; margin:0; color:#e6d0bc; font-size:12px; }
#view-tools .mc-result-hero-value { grid-column:1; font-size:clamp(18px,2vw,28px); line-height:1.4; color:#ffad79; word-break:keep-all; }
#view-tools .mc-result-hero-sub { grid-column:1; margin:0; color:#d6c2b2; font-size:11px; }
#view-tools .mc-ratio { grid-column:2; grid-row:1 / span 3; align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:12px; border-left:1px solid #715039; text-align:center; }
#view-tools .mc-ratio span { font-size:11px; line-height:1.45; color:#dfc8b4; }
#view-tools .mc-ratio b { color:#ffad79; font-size:25px; font-variant-numeric:tabular-nums; }
#view-tools .mc-result-hero.deficit { background:#372422; border-color:#8e5147; }
#view-tools .mc-result-hero.deficit .mc-result-hero-value,
#view-tools .mc-result-hero.deficit .mc-ratio b { color:#ffaaa0; }
#view-tools .mc-result-hero.zero { background:#272d2f; border-color:#555d60; }
#view-tools .mc-result-hero.zero .mc-result-hero-value,
#view-tools .mc-result-hero.zero .mc-ratio b { color:#e7e9e9; }
#view-tools .mc-result-facts { padding:11px 13px; border:1px solid #384144; border-radius:9px; background:#202628; }
#view-tools .mc-fact-row { color:#c7cecf; }
#view-tools .mc-fact-row b { color:#f5f5f5; }
#view-tools .mc-actions { margin:2px 0; }
#view-tools .mc-actions .btn-primary { min-height:45px; border-radius:8px; background:#ff8a4b; color:#23160e; font-weight:800; }
#view-tools .mc-actions .btn-primary:hover { background:#ffab77; }
#view-tools .mc-secondary { border-color:#424a4d; border-radius:9px; background:#1c2224; }
#view-tools .mc-secondary summary { color:#ffb386; }
#view-tools .mc-res-room.short { color:#ffd3aa; }
#view-tools .mc-plan-form { border-color:#41494c; border-radius:10px; background:#1b2123; }
#view-tools .mc-plan-mismatch { background:#3a2b20; color:#ffe0c8; }
#view-tools .mc-plan-actions .btn-primary { background:#ff8a4b; color:#23160e; }
#view-tools .mc-plan-actions .btn-primary:hover { background:#ffab77; }
#view-tools .mc-errors { color:#ffb8ad; }
#view-tools .saved-calc-row { border-top-color:#343b3e; }
#view-tools .saved-calc-row .scr-load { border-color:#535d60; border-radius:6px; }
#view-tools .saved-calc-clear { border-top-color:#343b3e; }

@media (max-width:1180px) {
  #view-tools .mc-layout { display:flex; flex-direction:column; }
  #view-tools .mc-inputs, #view-tools #mcAdPanel, #view-tools .mc-results { width:100%; }
}
@media (max-width:620px) {
  #view-tools .content { padding:24px 16px 42px; }
  #view-tools .page-lead { font-size:13px; }
  #view-tools .mc-hero { min-height:125px; padding:20px; }
  #view-tools .mc-hero::after { width:85px; height:85px; right:12px; }
  #view-tools .mc-hero h2, #view-tools .mc-hero p { max-width:calc(100% - 90px); }
  #view-tools .mc-hero h2 { font-size:19px; }
  #view-tools .mc-hero p { font-size:11px; }
  #view-tools .mc-mode-bar { align-items:stretch; }
  #view-tools .mc-result-hero { grid-template-columns:minmax(0,1fr); }
  #view-tools .mc-ratio { grid-column:1; grid-row:auto; flex-direction:row; justify-content:space-between; border-left:0; border-top:1px solid #715039; margin-top:8px; }
  #view-tools .mc-ratio b { font-size:20px; }
}