/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════ */
:root {
  --clr-accent:        #0ea5e9;
  --clr-accent-dark:   #0369a1;
  --clr-accent-light:  #e0f2fe;
  --clr-accent-hover:  #bae6fd;
  --clr-interest:      #fbbf24;
  --clr-teal:          #14b8a6;
  --clr-green:         #22c55e;
  --clr-warning-text:  #b45309;
  --clr-warning-bg:    #fffbeb;
  --clr-warning-brd:   #fde68a;
  --clr-bg:            #ffffff;
  --clr-bg-soft:       #f8fafc;
  --clr-bg-muted:      #f1f5f9;
  --clr-text-primary:  #0f172a;
  --clr-text-secondary:#475569;
  --clr-text-muted:    #94a3b8;
  --clr-border:        #e2e8f0;
  --clr-border-soft:   #f1f5f9;
  --shadow-focus:      0 0 0 4px rgba(14,165,233,0.15);
  --clr-profit:        #22c55e;
  --clr-loss:          #ef4444;
  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         16px;
  --font-display:      'Lora', Georgia, serif;
  --font-body:         'DM Sans', system-ui, sans-serif;
}
 
/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--clr-text-secondary);background:var(--clr-bg-soft);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--clr-accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:'Courier New',monospace;background:var(--clr-bg-muted);padding:2px 6px;border-radius:4px;font-size:0.875em;color:var(--clr-teal)}
 
/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.calc-page-layout{padding:24px 0 64px}
.calc-page-container{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.calc-main{min-width:0}
 
@media(max-width:900px){
  .calc-page-container{grid-template-columns:1fr}
  .calc-sidebar{display:none}
}
 
/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb{padding:12px 0;margin-bottom:4px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:0.82rem;color:var(--clr-text-muted)}
.breadcrumb li+li::before{content:'›';margin-right:4px;color:var(--clr-border)}
.breadcrumb a{color:var(--clr-text-muted)}
.breadcrumb a:hover{color:var(--clr-accent)}
 
/* ═══════════════════════════════════════
   CALC PAGE HEADER
═══════════════════════════════════════ */
.calc-page-header{margin-bottom:24px}
.calc-page-meta{margin-bottom:10px}
.calc-category-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--clr-accent-light);color:var(--clr-accent-dark);
  font-size:0.78rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid rgba(14,165,233,0.2);
}
.calc-page-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.25rem);font-weight:700;color:var(--clr-text-primary);line-height:1.2;margin-bottom:10px}
.calc-page-subtitle{font-size:1rem;color:var(--clr-text-secondary);max-width:640px;line-height:1.6}
 
/* ═══════════════════════════════════════
   CALCULATOR WIDGET CARD
═══════════════════════════════════════ */
.calc-widget-section{margin-bottom:28px}
.calc-widget-card{
  background:var(--clr-bg);border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);padding:28px 24px;
  box-shadow:0 2px 12px rgba(15,23,42,0.06);
}
.calc-widget-heading{
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  color:var(--clr-text-primary);margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.calc-widget-heading svg{color:var(--clr-accent);flex-shrink:0}
 
/* ── ROI CALC LAYOUT ── */
.roi-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.roi-calc-grid{grid-template-columns:1fr}}
 
.roi-mode-tabs{
  display:flex;gap:0;border:1px solid var(--clr-border);border-radius:var(--radius-md);
  overflow:hidden;margin-bottom:20px;background:var(--clr-bg-muted);
}
.roi-tab{
  flex:1;padding:9px 10px;font-size:0.8rem;font-weight:600;border:none;
  background:transparent;cursor:pointer;color:var(--clr-text-muted);
  transition:all 0.18s;letter-spacing:0.02em;text-transform:uppercase;
  line-height:1.2;
}
.roi-tab.active{
  background:var(--clr-accent);color:#fff;
  box-shadow:0 1px 4px rgba(14,165,233,0.3);
}
.roi-tab:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.roi-tab:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
 
.input-group{display:flex;flex-direction:column;gap:5px;margin-bottom:4px}
.input-label{font-size:0.83rem;font-weight:600;color:var(--clr-text-primary);display:flex;justify-content:space-between;align-items:center}
.input-hint{font-size:0.76rem;font-weight:400;color:var(--clr-text-muted)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-prefix,.input-suffix{
  position:absolute;font-size:0.875rem;font-weight:500;color:var(--clr-text-muted);
  pointer-events:none;z-index:1;
}
.input-prefix{left:11px}
.input-suffix{right:11px}
.calc-input{
  width:100%;border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);
  padding:9px 32px 9px 11px;font-size:0.93rem;font-family:var(--font-body);
  color:var(--clr-text-primary);background:var(--clr-bg-soft);
  transition:border-color 0.15s,box-shadow 0.15s;
  -moz-appearance:textfield;appearance:textfield;
}
.calc-input::-webkit-outer-spin-button,.calc-input::-webkit-inner-spin-button{-webkit-appearance:none}
.calc-input:focus{outline:none;border-color:var(--clr-accent);box-shadow:var(--shadow-focus);background:var(--clr-bg)}
.input-prefix~.calc-input{padding-left:26px}
.input-suffix~.calc-input,.calc-input.has-suffix{padding-right:36px}
.input-desc{font-size:0.75rem;color:var(--clr-text-muted);line-height:1.4}
 
/* select */
.calc-select{
  width:100%;border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);
  padding:9px 32px 9px 11px;font-size:0.93rem;font-family:var(--font-body);
  color:var(--clr-text-primary);background:var(--clr-bg-soft);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5L7 9.5L12 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color 0.15s;
}
.calc-select:focus{outline:none;border-color:var(--clr-accent);box-shadow:var(--shadow-focus)}
 
/* ── advanced toggle ── */
.advanced-toggle{
  display:flex;align-items:center;gap:7px;font-size:0.82rem;font-weight:600;
  color:var(--clr-accent-dark);cursor:pointer;margin:4px 0 12px;
  background:none;border:none;padding:0;
}
.advanced-toggle svg{transition:transform 0.2s}
.advanced-toggle.open svg{transform:rotate(180deg)}
.advanced-fields{display:none;grid-column:1/-1}
.advanced-fields.open{display:contents}
 
/* ── calculate button ── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--clr-accent);color:#fff;border:none;border-radius:var(--radius-md);
  padding:12px 28px;font-size:0.95rem;font-weight:600;font-family:var(--font-body);
  cursor:pointer;transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
  box-shadow:0 2px 8px rgba(14,165,233,0.25);
}
.btn-primary:hover{background:var(--clr-accent-dark);box-shadow:0 4px 14px rgba(14,165,233,0.35)}
.btn-primary:active{transform:scale(0.98)}
.btn-lg{padding:13px 32px;font-size:1rem}
.calc-submit-btn{width:100%;margin-top:16px}
 
/* ── results area ── */
.roi-results{margin-top:22px;animation:fadeUp 0.3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 
.results-top{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-bottom:20px}
@media(max-width:480px){.results-top{grid-template-columns:1fr;justify-items:center}}
 
/* donut chart */
.donut-wrap{width:130px;height:130px;flex-shrink:0;position:relative}
.donut-svg{width:100%;height:100%}
.donut-bg{fill:none;stroke:var(--clr-bg-muted);stroke-width:18}
.donut-profit{fill:none;stroke:var(--clr-green);stroke-width:18;stroke-linecap:round;transition:stroke-dashoffset 0.8s cubic-bezier(0.34,1.56,0.64,1);stroke-dasharray:283;stroke-dashoffset:283;transform:rotate(-90deg);transform-origin:50% 50%}
.donut-loss{fill:none;stroke:var(--clr-loss);stroke-width:18;stroke-linecap:round;transition:stroke-dashoffset 0.8s cubic-bezier(0.34,1.56,0.64,1);stroke-dasharray:283;stroke-dashoffset:283;transform:rotate(-90deg);transform-origin:50% 50%}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.donut-pct{font-family:var(--font-display);font-size:1.45rem;font-weight:700;color:var(--clr-text-primary);line-height:1}
.donut-label{font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--clr-text-muted)}
 
/* result cards */
.results-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.results-cards{grid-template-columns:1fr 1fr}}
.result-card{
  background:var(--clr-bg-soft);border:1px solid var(--clr-border);
  border-radius:var(--radius-md);padding:12px 14px;
}
.result-card-primary{border-color:var(--clr-accent);background:var(--clr-accent-light)}
.result-label{display:block;font-size:0.73rem;font-weight:600;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}
.result-value{display:block;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--clr-text-primary);line-height:1.1}
.result-value.positive{color:var(--clr-green)}
.result-value.negative{color:var(--clr-loss)}
.result-card-primary .result-value{color:var(--clr-accent-dark)}
 
/* breakdown bar */
.result-breakdown{margin-top:16px}
.breakdown-label{font-size:0.78rem;font-weight:600;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px}
.breakdown-bar{height:10px;border-radius:999px;overflow:hidden;background:var(--clr-bg-muted);display:flex}
.bar-cost{height:100%;background:var(--clr-accent);transition:width 0.6s ease;border-radius:999px 0 0 999px}
.bar-profit-seg{height:100%;background:var(--clr-green);transition:width 0.6s ease;border-radius:0 999px 999px 0}
.bar-loss-seg{height:100%;background:var(--clr-loss);transition:width 0.6s ease;border-radius:0 999px 999px 0}
.breakdown-legend{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:5px;font-size:0.78rem;color:var(--clr-text-secondary)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-cost{background:var(--clr-accent)}
.dot-profit{background:var(--clr-green)}
.dot-loss{background:var(--clr-loss)}
 
/* comparison table */
.comparison-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:0.85rem}
.comparison-table th{background:var(--clr-bg-muted);color:var(--clr-text-secondary);font-weight:600;padding:8px 12px;text-align:left;border-bottom:1px solid var(--clr-border);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em}
.comparison-table td{padding:8px 12px;border-bottom:1px solid var(--clr-border-soft);color:var(--clr-text-primary)}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table .highlight td{background:var(--clr-accent-light);font-weight:600;color:var(--clr-accent-dark)}
 
/* reset btn */
.btn-outline{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--clr-border);border-radius:var(--radius-md);
  padding:9px 20px;font-size:0.88rem;font-weight:600;font-family:var(--font-body);
  color:var(--clr-text-secondary);background:var(--clr-bg);cursor:pointer;
  transition:border-color 0.15s,color 0.15s;
}
.btn-outline:hover{border-color:var(--clr-accent);color:var(--clr-accent-dark)}
.btn-reset{margin-top:14px;font-size:0.82rem;padding:7px 16px}
 
/* ── tabs for mode (separate panels) ── */
.mode-panel{display:none}
.mode-panel.active{display:contents}