:root{
  --accent:#006666;
  --accent-2:#149bb2;
  --text:#243036;
  --text-soft:#50606a;
  --panel:#ffffffcc;
  --panel-brd:#ffffff80;
  --panel-outline:#00000010;
  --bg: radial-gradient(1200px 800px at 10% 10%, #dff7ff 0%, #f5fdff 35%, #ffffff 70%);
  --ring: rgba(0,102,102,.18);
  --radius:18px;
  --radius-lg:22px;
  --shadow: 0 10px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  --header-h:110px;
  --maxw:1200px;
  --danger:#b42318;
  --input-h:44px;
  --info-bg:#0a0f140f;
  --tooltip-bg:#0a0f14;
  --tooltip-fg:#fff;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text);
  background: var(--bg);
}

/* Header */
.appbar{
  height:var(--header-h);
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--panel-outline);
}
.appbar-inner{
  height:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{ width:14px; height:14px; border-radius:50%; background: linear-gradient(180deg, var(--accent), #0a8e8e); box-shadow: 0 0 0 4px var(--ring); }
.brand .titles h1{ font-size:18px; margin:0; font-weight:700; letter-spacing:.2px; }
.brand .titles .subtitle{ font-size:12px; margin:2px 0 0; color:var(--text-soft); }
.nav{ display:flex; gap:8px; }
.nav-btn{
  appearance:none; border:1px solid var(--panel-outline);
  background:#fff; color:var(--text);
  padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer;
}
.nav-btn.active{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* Layout */
.wrap{ max-width:var(--maxw); margin:18px auto; padding: 0 16px 32px; }
.view{ display:none; }
.view.active{ display:block; }
.panel{
  background: var(--panel);
  border:1px solid var(--panel-brd);
  outline:1px solid var(--panel-outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding:16px;
}
.panel + .panel{ margin-top:16px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-title{ margin:0; font-size:18px; font-weight:700; }
.panel-actions{ display:flex; gap:8px; align-items:center; }

/* Buttons */
.btn{ appearance:none; border:none; cursor:pointer; background: var(--accent); color:#fff; font-weight:700; padding:10px 14px; border-radius:12px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.btn:hover{ filter:saturate(1.05); }
.btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--panel-outline); }
.btn.subtle{ background:#f4f7f8; color:var(--text); border:1px solid var(--panel-outline); }
.btn.mini{ padding:6px 10px; font-size:12px; }
.btn.danger{ background: var(--danger); color:#fff; }

/* Grids */
.grid{ display:grid; gap:16px; grid-template-columns: minmax(0, 1fr); }
.grid.two{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px){ .grid.two{ grid-template-columns: minmax(0, 1fr); } }

/* Form */
.form fieldset{ margin:0 0 14px; border:1px dashed var(--panel-outline); padding:12px; border-radius:14px; }
.form legend{ font-weight:700; padding:0 6px; }

/* Base fields grid */
.fields{
  display:grid; gap:12px;
  grid-template-columns: repeat(12, 1fr);
}

/* Rules page columns (unchanged) */
.rules-cols .field{ grid-column: span 3; }
.field.wide{ grid-column: 1 / -1; }
@media (max-width: 1080px){ .rules-cols .field{ grid-column: span 4; } }
@media (max-width: 800px){ .rules-cols .field{ grid-column: span 6; } }
@media (max-width: 560px){ .rules-cols .field{ grid-column: 1 / -1; } }

/* Estimator page columns (new) */
.est-cols .field{ grid-column: span 3; }        /* 4 per row on desktop */
.est-cols .switch{ grid-column: span 4; }       /* 3 switches per row */
.est-cols .field.wide,
.est-cols .switch.wide{ grid-column: 1 / -1; }

@media (max-width: 1080px){
  .est-cols .field{ grid-column: span 4; }      /* 3 per row */
  .est-cols .switch{ grid-column: span 6; }     /* 2 per row */
}
@media (max-width: 800px){
  .est-cols .field{ grid-column: span 6; }      /* 2 per row */
  .est-cols .switch{ grid-column: span 6; }
}
@media (max-width: 560px){
  .est-cols .field{ grid-column: 1 / -1; }      /* full width */
  .est-cols .switch{ grid-column: 1 / -1; }
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }

/* Inputs */
input[type="text"], input[type="number"], select, textarea{
  width:100%; min-width:0; /* allow shrinking inside grid */
  height:var(--input-h);
  padding:10px 12px;
  border-radius:12px; border:1px solid var(--panel-outline);
  background:#fff; color:var(--text); outline:none;
}
textarea{ height:auto; min-height: calc(var(--input-h) * 1.6); resize:vertical; }
.num-input.is-empty{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: #e8f7f7; }
.input-error {
  border: 2px solid var(--danger) !important;
  background: #fff5f5 !important;
}

/* Switches / Radios */
.switch{ display:flex; align-items:center; gap:10px; }
.switch input{ width:20px; height:20px; }
.radio-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* Tables */
.table{ display:grid; gap:8px; margin-top:10px; }
.table.header{ grid-template-columns: 1fr 1fr 1fr 60px; font-size:12px; color:var(--text-soft); }
.table.rows .row{ display:grid; gap:8px; grid-template-columns: 1fr 1fr 1fr 80px; }
.table.rows.three-col .row{ grid-template-columns: 1fr 100px 1fr 80px; }
.subtable-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }

/* Rule selector (Estimator) */
.rule-selector{ display:flex; flex-direction:column; gap:8px; }
.rule-option{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:#fff; border:1px solid var(--panel-outline); }
.rule-option input{ width:18px; height:18px; }
.rule-option .meta{ font-size:12px; color:var(--text-soft); }

/* Estimator merged panel UI */
.section-title{ margin:8px 2px 8px; font-size:16px; font-weight:700; }
.est-sep{ margin:12px 0; border-top:1px dashed var(--panel-outline); }

/* Estimator breakdown */
.breakdown{ background:#fff; border:1px solid var(--panel-outline); border-radius:14px; padding:12px; min-height:120px; }
.breakdown .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 4px; }
.breakdown .row.muted{ color:var(--text-soft); }
.breakdown .row.emph strong{ color:var(--accent); }
.breakdown .sep{ border-top:1px dashed var(--panel-outline); margin:6px 0; }

.totals{ margin-top:12px; background:#fff; border:1px solid var(--panel-outline); border-radius:14px; padding:12px; }
.totals .row{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px; }
.totals .row.grand{ border-top:1px solid var(--panel-outline); margin-top:6px; padding-top:10px; font-size:18px; }

.disclaimer{ font-size:12px; color:var(--text-soft); margin:10px 2px 0; }

.custom-items{ display:flex; flex-direction:column; gap:8px; }
.ci-row{ display:grid; grid-template-columns: 1fr 160px 36px; gap:8px; }
@media (max-width:520px){ .ci-row{ grid-template-columns: 1fr 120px 36px; } }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.rules-list{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.rule-card{ background:#fff; border:1px solid var(--panel-outline); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.rule-card-head{ display:flex; align-items:center; justify-content:space-between; }
.rule-card-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.foot{ text-align:center; padding:18px; font-size:12px; color:var(--text-soft); }

/* Info tooltip */
.info{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; min-width:18px;
  border-radius:50%;
  border:1px solid var(--panel-outline);
  background: var(--info-bg);
  cursor:help;
  position:relative;
}
.info::before{ content:"i"; font-weight:700; font-size:12px; line-height:18px; color:var(--accent); }
.info::after{
  content: attr(data-tip);
  position:absolute; left:50%; transform: translateX(-50%) translateY(8px);
  bottom: -8px;
  background: var(--tooltip-bg); color:var(--tooltip-fg);
  padding:8px 10px; font-size:12px; border-radius:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  white-space: normal; width: 260px; max-width: 80vw;
  opacity:0; visibility:hidden; transition: opacity .12s ease, transform .12s ease;
  pointer-events:none; z-index:5;
}
.info:focus::after{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(12px); }

/* Print */
@media print{
  .appbar, .nav, .panel-actions, .foot, .hint, .switch input, #customItems .ci-remove, .info { display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .panel{ box-shadow:none; background:#fff; border: none; }
}