*{box-sizing:border-box}:root{--bg:#f3f6f4;--card:#fff;--ink:#14251f;--muted:#708078;--brand:#18392f;--brand2:#2f6a56;--line:#dfe8e3;--soft:#eaf2ed}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif}body{min-height:100vh}button,input{font:inherit}.app-shell{max-width:980px;margin:0 auto;padding:22px 18px 50px}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 4px 22px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--brand2)}h1{font-size:28px;margin:5px 0 6px;letter-spacing:-.04em}.topbar p{margin:0;color:var(--muted)}.ghost,.text-btn{border:0;background:transparent;color:var(--brand2);font-weight:700;cursor:pointer}.ghost{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:12px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.summary-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 4px 18px rgba(24,57,47,.04)}.summary-card.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.summary-card span,.summary-card small{display:block}.summary-card span{font-size:13px;color:var(--muted)}.summary-card.primary span,.summary-card.primary small{color:#cfe0d8}.summary-card strong{display:block;font-size:24px;margin:8px 0 4px;letter-spacing:-.04em}.summary-card small{font-size:11px;color:#8b9892}.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:14px;box-shadow:0 4px 18px rgba(24,57,47,.035)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-head>div{display:flex;align-items:center;gap:10px}.step{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:var(--soft);color:var(--brand2);font-size:11px;font-weight:800}h2{font-size:18px;margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}label{font-size:13px;font-weight:700;color:#425149}.input-wrap{display:flex;align-items:center;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:0 12px;background:#fbfcfb}.input-wrap:focus-within{border-color:#6d9d88;box-shadow:0 0 0 3px rgba(47,106,86,.1)}.input-wrap input{width:100%;height:46px;border:0;outline:0;background:transparent;font-size:17px;font-weight:750;color:var(--ink);text-align:right}.input-wrap span{font-size:12px;color:var(--muted);margin-left:8px}.target-table{display:grid;gap:9px}.target-row{display:grid;grid-template-columns:90px 1fr 1fr;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px}.target-row .rate{font-weight:800;color:var(--brand2)}.target-row .price,.target-row .diff{text-align:right}.target-row .price b{font-size:17px}.target-row .diff{font-size:12px;color:var(--muted)}.target-row .diff.up{color:#8b3e2f}.history{display:grid;gap:10px}.history.empty{color:var(--muted);font-size:13px;padding:8px 0}.history-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}.history-item:last-child{border-bottom:0}.history-item b{font-size:14px}.history-item span{font-size:12px;color:var(--muted)}.delete-btn{border:0;background:transparent;color:#a24d4d;cursor:pointer}.note{margin-top:14px;background:#edf4f0;border-radius:16px;padding:16px 18px;color:#4e5f56}.note b{font-size:13px}.note p{margin:5px 0 0;font-size:12px;line-height:1.6}footer{text-align:center;color:#8a9690;font-size:11px;padding:24px 0 0}.negative{color:#d45555!important}@media(max-width:760px){.app-shell{padding:12px 12px 40px}.topbar{padding:14px 4px 16px}.topbar p{font-size:13px}h1{font-size:24px}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-card{padding:14px}.summary-card strong{font-size:21px}.form-grid{grid-template-columns:1fr}.panel{padding:16px;border-radius:17px}.target-row{grid-template-columns:70px 1fr}.target-row .diff{grid-column:2;margin-top:4px}}

.toggle-wrap{display:flex;align-items:center;gap:10px;min-height:46px;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:10px 12px;background:#fbfcfb}
.toggle-wrap input{width:20px;height:20px;accent-color:var(--brand2)}
.toggle-wrap span{font-size:12px;font-weight:500;color:var(--muted);line-height:1.35}

.select-wrap{margin-top:7px;border:1px solid var(--line);border-radius:13px;background:#fbfcfb;padding:0 10px}.select-wrap select{width:100%;height:46px;border:0;background:transparent;font-weight:700;color:var(--ink)}.field-help{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}.mini-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}.mini-card span,.mini-card small{display:block}.mini-card span{font-size:12px;color:var(--muted)}.mini-card strong{display:block;font-size:21px;margin:6px 0}.mini-card small{font-size:11px;color:var(--muted)}.qty-controls{display:flex;gap:8px;flex-wrap:wrap}.qty-btn{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 14px;font-weight:800;color:var(--brand2)}.qty-input{width:130px;margin-top:0}.qty-result{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.qty-result>div{background:var(--soft);border-radius:13px;padding:13px}.qty-result span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.qty-result b{font-size:18px}@media(max-width:760px){.mini-grid,.qty-result{grid-template-columns:1fr}.qty-input{width:100%}}

.ad-helper{margin-top:9px;padding:11px;border:1px dashed var(--line);border-radius:13px;background:#f8fbf9}
.ad-helper-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ad-helper-grid>div>span{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:4px}
.small-input{margin-top:0}
.small-input input{height:40px;font-size:14px}
.sub-action{width:100%;margin-top:9px;border:0;border-radius:11px;padding:10px 12px;background:var(--soft);color:var(--brand2);font-weight:800;cursor:pointer}
.sub-action:active{transform:translateY(1px)}
@media(max-width:760px){.ad-helper-grid{grid-template-columns:1fr}}

.ad-cost-section{grid-column:1/-1;border:1px solid var(--line);border-radius:15px;padding:14px;background:#fbfcfb}
.subsection-title{font-size:14px;font-weight:900;margin-bottom:10px}
.auto-cost-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 13px;background:var(--soft);border-radius:12px}
.auto-cost-row span{font-size:12px;color:var(--muted)}.auto-cost-row strong{font-size:18px}
.profit-breakdown{background:#fff;border:1px solid var(--line);border-radius:16px;padding:5px 15px;margin-bottom:14px}
.profit-line{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--line)}
.profit-line:last-child{border-bottom:0}.profit-line span{font-size:13px;color:var(--muted)}.profit-line strong{font-size:16px}
.profit-line.final span,.profit-line.final strong{font-weight:900;color:var(--ink)}

.result-overview{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;
  margin-bottom:14px;box-shadow:0 5px 20px rgba(24,57,47,.045)
}
.overview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.overview-head h2{margin:2px 0 0}
.status-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 11px;border-radius:999px;background:var(--soft);
  color:var(--brand2);font-size:11px;font-weight:800;white-space:nowrap
}
.overview-main{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:10px}
.overview-primary,.overview-card{
  border:1px solid var(--line);border-radius:16px;padding:15px;background:#fbfcfb
}
.overview-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.overview-primary span,.overview-card span{display:block;font-size:12px}
.overview-primary span,.overview-primary small{color:#cfe0d8}
.overview-card span{color:var(--muted)}
.overview-primary strong,.overview-card strong{display:block;font-size:22px;margin:7px 0 3px;letter-spacing:-.035em}
.overview-primary small,.overview-card small{font-size:10.5px;color:#8a9690}
.overview-sub{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.overview-sub>div{background:var(--soft);border-radius:12px;padding:11px 12px}
.overview-sub span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:4px}
.overview-sub b{font-size:15px}
.decision-note{font-size:12px;color:var(--muted);line-height:1.5;margin:-3px 0 12px}
.qty-result small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
@media(max-width:760px){
  .result-overview{padding:15px;border-radius:18px}
  .overview-head{align-items:flex-start}
  .overview-main{grid-template-columns:repeat(2,1fr)}
  .overview-primary{grid-column:1/-1}
  .overview-sub{grid-template-columns:repeat(2,1fr)}
  .overview-primary strong,.overview-card strong{font-size:20px}
}

.roas-compare{
  display:grid;grid-template-columns:1fr auto 1fr 1.2fr;
  gap:10px;align-items:stretch;margin-top:10px
}
.roas-card,.roas-status{
  border:1px solid var(--line);border-radius:13px;padding:12px 13px;background:#fbfcfb
}
.roas-card span,.roas-status span{display:block;font-size:11px;color:var(--muted)}
.roas-card strong{display:block;font-size:20px;margin:5px 0 2px}
.roas-card small,.roas-status small{font-size:10px;color:#8a9690;line-height:1.4}
.roas-arrow{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--muted)}
.roas-status{display:flex;flex-direction:column;justify-content:center}
.roas-status span{font-size:13px;font-weight:900;color:var(--ink);margin-bottom:3px}
.roas-status.good{background:#edf7f1;border-color:#cfe7d8}
.roas-status.good span{color:#1f6b45}
.roas-status.warn{background:#fff8e8;border-color:#f0ddb0}
.roas-status.warn span{color:#8a6819}
.roas-status.bad{background:#fff0f0;border-color:#efcccc}
.roas-status.bad span{color:#b43a3a}
@media(max-width:760px){
  .roas-compare{grid-template-columns:1fr 1fr}
  .roas-arrow{display:none}
  .roas-status{grid-column:1/-1}
}

.compact-overview{padding:18px}
.core-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.core-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:#fbfcfb}
.core-card.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.core-card span{display:block;font-size:12px;color:var(--muted)}
.core-card.primary span,.core-card.primary small{color:#cfe0d8}
.core-card strong{display:block;font-size:24px;margin:6px 0 3px;letter-spacing:-.04em}
.core-card small{font-size:10px;color:#8a9690}

.break-even-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;
  margin-top:10px;padding:13px 14px;border:1px solid var(--line);
  border-radius:14px;background:#fff
}
.break-even-row span{font-size:12px;color:var(--muted)}
.break-even-row strong{font-size:19px}
.break-even-row small{grid-column:1/-1;font-size:10px;color:#8a9690;margin-top:-2px}

.ad-analysis-card{
  margin-top:10px;border:1px solid var(--line);border-radius:16px;
  padding:14px;background:#fbfcfb
}
.ad-analysis-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.section-kicker{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--brand2);margin-bottom:3px}
.ad-analysis-head strong{font-size:15px}
.ad-analysis-head small{max-width:48%;font-size:10px;color:var(--muted);line-height:1.4;text-align:right}
.roas-compact{
  display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;
  margin-top:12px;padding:12px;background:var(--soft);border-radius:13px
}
.roas-compact>div:not(.arrow){text-align:center}
.roas-compact span{display:block;font-size:10px;color:var(--muted)}
.roas-compact strong{display:block;font-size:21px;margin-top:3px}
.roas-compact .arrow{font-size:15px;font-weight:900;color:var(--muted)}
.ad-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.ad-meta-grid>div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px}
.ad-meta-grid span{display:block;font-size:9.5px;color:var(--muted);margin-bottom:3px}
.ad-meta-grid b{font-size:14px}

.ad-analysis-card.good{background:#f2f8f4;border-color:#cfe5d7}
.ad-analysis-card.warn{background:#fffaf0;border-color:#eadbb9}
.ad-analysis-card.bad{background:#fff4f4;border-color:#e8caca}
.ad-analysis-card.good #roasStatusTitle{color:#1f6b45}
.ad-analysis-card.warn #roasStatusTitle{color:#8a6819}
.ad-analysis-card.bad #roasStatusTitle{color:#b43a3a}

@media(max-width:760px){
  .compact-overview{padding:14px}
  .core-result-grid{grid-template-columns:1fr 1fr}
  .core-card{padding:13px}
  .core-card strong{font-size:21px}
  .ad-analysis-head{display:block}
  .ad-analysis-head small{display:block;max-width:none;text-align:left;margin-top:4px}
  .ad-meta-grid{grid-template-columns:1fr 1fr}
}

/* ===== Theme system ===== */
:root{
  --bg:#f3f6f4;
  --card:#ffffff;
  --ink:#14251f;
  --muted:#708078;
  --brand:#18392f;
  --brand2:#2f6a56;
  --line:#dfe8e3;
  --soft:#eaf2ed;
  --accent-soft:#edf6f1;
}

body[data-theme="green"]{
  --bg:#f3f6f4;--card:#ffffff;--ink:#14251f;--muted:#708078;
  --brand:#18392f;--brand2:#2f6a56;--line:#dfe8e3;--soft:#eaf2ed;--accent-soft:#edf6f1;
}
body[data-theme="navy"]{
  --bg:#f3f5f8;--card:#ffffff;--ink:#17212b;--muted:#6d7885;
  --brand:#1f3147;--brand2:#3e5b7d;--line:#dfe5ec;--soft:#eaf0f6;--accent-soft:#eef3f8;
}
body[data-theme="blue"]{
  --bg:#f3f7fb;--card:#ffffff;--ink:#162433;--muted:#6d7c8a;
  --brand:#1e4f7a;--brand2:#3b78a8;--line:#dbe7f1;--soft:#eaf3fa;--accent-soft:#edf6fc;
}
body[data-theme="purple"]{
  --bg:#f7f4fa;--card:#ffffff;--ink:#271f2e;--muted:#7c7085;
  --brand:#513a63;--brand2:#76558d;--line:#e7dff0;--soft:#f0eaf6;--accent-soft:#f4eef8;
}
body[data-theme="coral"]{
  --bg:#fbf5f3;--card:#ffffff;--ink:#2d2220;--muted:#83726d;
  --brand:#7a3f36;--brand2:#a85e51;--line:#eedfd9;--soft:#f6eae6;--accent-soft:#faefeb;
}

.top-actions{display:flex;align-items:center;gap:8px}
.theme-picker{position:relative}
.theme-trigger{
  border:1px solid var(--line);background:#fff;color:var(--brand2);
  padding:10px 13px;border-radius:12px;font-weight:800;cursor:pointer
}
.theme-menu{
  position:absolute;right:0;top:46px;z-index:50;min-width:145px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:7px;box-shadow:0 12px 28px rgba(24,57,47,.14)
}
.theme-option{
  width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;
  padding:9px 10px;border-radius:10px;text-align:left;color:var(--ink);font-weight:700;cursor:pointer
}
.theme-option:hover{background:var(--soft)}
.theme-option.active{background:var(--soft);color:var(--brand2)}
.theme-dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex:0 0 auto}
.theme-dot.green{background:#2f6a56}
.theme-dot.navy{background:#3e5b7d}
.theme-dot.blue{background:#3b78a8}
.theme-dot.purple{background:#76558d}
.theme-dot.coral{background:#a85e51}

.summary-card.primary,.overview-primary,.core-card.primary{background:var(--brand)!important;border-color:var(--brand)!important}
.step,.status-badge,.qty-result>div,.overview-sub>div,.roas-compact,.auto-cost-row,.sub-action{background:var(--soft)!important}
.eyebrow,.step,.theme-trigger,.text-btn,.qty-btn,.field-help,.section-kicker{color:var(--brand2)}
.input-wrap:focus-within{border-color:var(--brand2);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand2) 14%, transparent)}
@media(max-width:760px){
  .top-actions{gap:6px}
  .theme-trigger,.ghost{padding:9px 10px;font-size:12px}
  .theme-menu{right:0}
}

.help-modal[hidden]{display:none}
.help-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.help-backdrop{position:absolute;inset:0;background:rgba(13,25,20,.42);backdrop-filter:blur(3px)}
.help-dialog{
  position:relative;z-index:1;width:min(620px,100%);max-height:88vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.22)
}
.help-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.help-head h2{margin:2px 0 0}
.help-close{border:0;background:var(--soft);color:var(--brand2);width:34px;height:34px;border-radius:10px;font-size:24px;line-height:1;cursor:pointer}
.help-steps{display:grid;gap:9px}
.help-steps>div{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--line);border-radius:13px;background:#fbfcfb}
.help-steps>div>b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--soft);color:var(--brand2);font-size:12px}
.help-steps p{margin:0}.help-steps strong{display:block;font-size:13px;margin-bottom:3px}.help-steps span{display:block;font-size:11px;color:var(--muted);line-height:1.5}
.help-note,.help-install{margin-top:12px;padding:13px 14px;border-radius:13px;background:var(--soft)}
.help-note strong,.help-install strong{font-size:12px}.help-note p,.help-install p{margin:4px 0 0;font-size:11px;line-height:1.55;color:var(--muted)}
.help-version{text-align:center;margin-top:14px;font-size:10px;color:var(--muted)}
body.modal-open{overflow:hidden}
@media(max-width:760px){.help-modal{padding:10px}.help-dialog{border-radius:18px;padding:16px}.top-actions{flex-wrap:wrap;justify-content:flex-end}}

.help-head{position:sticky;top:0;z-index:3;background:var(--card);padding-bottom:8px}
.help-close{
  position:sticky;top:0;flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;font-size:28px;
  display:flex;align-items:center;justify-content:center
}
.help-bottom-close{
  width:100%;margin-top:14px;border:0;border-radius:12px;
  padding:12px 14px;background:var(--brand);color:#fff;
  font-weight:900;font-size:14px;cursor:pointer
}

.brand-mascot{width:126px;height:auto;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 8px 14px rgba(72,48,20,.08))}
.brand-tagline{margin:7px 0 2px;font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.brand-tagline strong{color:var(--brand2);font-weight:900}
.brand-desc{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.brand-mascot{width:92px}.brand-tagline{font-size:13px}.brand-desc{font-size:11px}}

/* ===== v22 integrated brand header ===== */
.brand-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 0 18px;
  overflow:visible;
}
.brand-cluster{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.mascot-stage{
  position:relative;
  width:150px;
  height:122px;
  flex:0 0 150px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.brand-mascot{
  width:124px !important;
  max-height:118px;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 10px rgba(69,45,22,.08));
}
.mascot-bubble{
  position:absolute;
  right:-2px;
  top:4px;
  min-width:48px;
  padding:7px 9px;
  border:1.5px solid color-mix(in srgb,var(--brand2) 30%,#fff);
  background:rgba(255,255,255,.94);
  border-radius:50%;
  color:var(--ink);
  font-size:10px;
  font-weight:900;
  line-height:1.18;
  text-align:center;
  transform:rotate(3deg);
  box-shadow:0 4px 12px rgba(55,37,21,.04);
}
.mascot-bubble:after{
  content:"";
  position:absolute;
  left:9px;
  bottom:-7px;
  width:12px;height:12px;
  background:rgba(255,255,255,.94);
  border-left:1.5px solid color-mix(in srgb,var(--brand2) 30%,#fff);
  border-bottom:1.5px solid color-mix(in srgb,var(--brand2) 30%,#fff);
  transform:rotate(-28deg);
}
.brand-copy{min-width:0}
.brand-copy .eyebrow{margin-bottom:3px}
.brand-copy h1{
  margin:0;
  font-size:38px;
  line-height:1;
  letter-spacing:-.065em;
  color:var(--ink);
}
.brand-q{
  color:var(--brand2);
  display:inline-block;
  margin-left:3px;
  transform:rotate(4deg);
}
.brand-tagline{
  margin:8px 0 2px !important;
  font-size:15px !important;
  font-weight:800 !important;
}
.brand-desc{
  margin:0 !important;
  font-size:12px !important;
}
@media(max-width:760px){
  .brand-header{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
    gap:8px 10px;
    padding-top:4px;
  }
  .brand-cluster{
    gap:3px;
  }
  .mascot-stage{
    width:96px;
    height:91px;
    flex-basis:96px;
  }
  .brand-mascot{
    width:82px !important;
    max-height:88px;
  }
  .mascot-bubble{
    right:-3px;
    top:0;
    min-width:38px;
    padding:5px 6px;
    font-size:8px;
  }
  .brand-copy h1{font-size:31px}
  .brand-tagline{
    margin-top:5px !important;
    font-size:12px !important;
    white-space:nowrap;
  }
  .brand-desc{
    font-size:10px !important;
    max-width:320px;
  }
  .top-actions{
    grid-column:2;
    grid-row:1;
    align-self:start;
  }
}
@media(max-width:520px){
  .brand-header{
    grid-template-columns:1fr;
  }
  .top-actions{
    grid-column:1;
    grid-row:auto;
    justify-self:end;
    margin-top:-4px;
  }
  .brand-cluster{
    width:100%;
  }
}

/* ===== v23 polished hero banner ===== */
.hero-banner{
  position:relative;
  display:grid;
  grid-template-columns:170px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:22px 24px;
  margin:6px 0 18px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--brand2) 12%,#fff);
  border-radius:24px;
  background:
    radial-gradient(circle at 17% 25%, rgba(255,255,255,.92) 0 23%, transparent 24%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--soft) 58%,#fff) 0%,
      #fffaf4 48%,
      color-mix(in srgb,var(--soft) 34%,#fff) 100%);
  box-shadow:0 12px 30px rgba(62,43,28,.065);
}
.hero-banner:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,188,91,.10), transparent 18%),
    radial-gradient(circle at 30% 88%, rgba(255,207,136,.12), transparent 20%);
}
.hero-decoration{position:absolute;z-index:2;pointer-events:none}
.hero-star{color:#f5a623;font-size:18px;filter:drop-shadow(0 2px 2px rgba(245,166,35,.12))}
.star-1{left:18px;top:45px}.star-2{left:36px;top:75px;font-size:12px}

.hero-banner .mascot-stage{
  position:relative;
  width:165px;
  height:138px;
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:2;
}
.hero-banner .brand-mascot{
  width:142px !important;
  max-height:135px;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 16px rgba(74,48,23,.10));
}
.hero-banner .mascot-bubble{
  right:-2px;
  top:5px;
  min-width:52px;
  padding:8px 10px;
  border:1.5px solid rgba(221,171,105,.48);
  background:#fffdf9;
  color:#5b351e;
  font-size:10px;
  font-weight:900;
  box-shadow:0 5px 14px rgba(75,46,22,.05);
}
.hero-banner .mascot-bubble:after{
  background:#fffdf9;
  border-left-color:rgba(221,171,105,.48);
  border-bottom-color:rgba(221,171,105,.48);
}

.hero-copy{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 8px;
}
.hero-copy .eyebrow{
  margin-bottom:2px;
  color:var(--brand2);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:900;
}
.hero-copy h1{
  margin:0;
  font-size:48px;
  line-height:.98;
  letter-spacing:-.075em;
  font-weight:950;
  color:#2c1c14;
  text-shadow:0 2px 0 rgba(255,255,255,.75);
}
.hero-copy .brand-q{
  color:#f28a00;
  margin-left:4px;
  transform:rotate(5deg) translateY(-1px);
}
.hero-copy .brand-tagline{
  margin:12px 0 4px !important;
  font-size:17px !important;
  color:#59331f;
  font-weight:800 !important;
}
.hero-copy .brand-tagline strong{
  color:#f28a00;
}
.hero-copy .brand-desc{
  margin:0 !important;
  font-size:12px !important;
  color:#75665d;
  line-height:1.45;
}

.hero-actions{
  position:relative;
  z-index:3;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.hero-action-card{
  width:76px;
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 7px;
  border:1px solid rgba(216,190,159,.58);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  color:#6b4327;
  font-weight:850;
  font-size:11px;
  cursor:pointer;
  box-shadow:0 7px 17px rgba(73,48,26,.06);
  backdrop-filter:blur(7px);
}
.hero-action-card:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 20px rgba(73,48,26,.09);
}
.hero-action-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:9px;
  background:#fff7eb;
  color:#d87a00;
  font-size:18px;
  font-weight:900;
}
.hero-theme-picker{position:relative}
.hero-theme-picker .theme-menu{top:84px;right:0}

@media(max-width:900px){
  .hero-banner{
    grid-template-columns:138px minmax(0,1fr);
    grid-template-areas:
      "mascot copy"
      "actions actions";
    gap:8px 12px;
    padding:18px;
  }
  .hero-banner .mascot-stage{grid-area:mascot;width:138px;height:120px}
  .hero-banner .brand-mascot{width:120px !important;max-height:116px}
  .hero-copy{grid-area:copy}
  .hero-copy h1{font-size:42px}
  .hero-actions{
    grid-area:actions;
    justify-self:end;
    margin-top:4px;
  }
  .hero-action-card{
    width:auto;
    min-width:74px;
    min-height:54px;
    flex-direction:row;
    padding:9px 11px;
  }
  .hero-action-icon{width:23px;height:23px;font-size:15px}
}

@media(max-width:620px){
  .hero-banner{
    grid-template-columns:92px 1fr;
    gap:3px 9px;
    padding:14px 12px 12px;
    border-radius:20px;
  }
  .hero-banner .mascot-stage{width:92px;height:92px}
  .hero-banner .brand-mascot{width:82px !important;max-height:90px}
  .hero-banner .mascot-bubble{
    right:-8px; top:1px;
    min-width:36px; padding:5px 6px; font-size:8px;
  }
  .hero-copy{text-align:left;padding-left:2px}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:.12em}
  .hero-copy h1{font-size:34px}
  .hero-copy .brand-tagline{
    margin-top:7px !important;
    font-size:12px !important;
    white-space:normal;
  }
  .hero-copy .brand-desc{
    font-size:9.5px !important;
    line-height:1.35;
  }
  .hero-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    justify-self:stretch;
  }
  .hero-action-card{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:7px 6px;
    border-radius:13px;
    font-size:10px;
  }
  .hero-action-icon{width:21px;height:21px;font-size:14px}
  .hero-theme-picker{width:100%}
  .hero-theme-picker .hero-action-card{width:100%}
  .hero-theme-picker .theme-menu{top:52px;right:0}
  .star-1{left:7px;top:30px}.star-2{left:18px;top:55px}
}

/* ===== v24 mascot branding points ===== */
.mascot-inline{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin-right:8px;
}
.mascot-inline img,
.mascot-mini img,
.empty-mascot img,
.mascot-help img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.mascot-ad{
  transform:rotate(2deg);
}
.mascot-tip{
  width:48px;
  height:48px;
  margin-right:7px;
  transform:rotate(-5deg);
  filter:drop-shadow(0 5px 7px rgba(75,48,25,.08));
}
.empty-mascot{
  display:block;
  width:84px;
  height:84px;
  margin:0 auto 10px;
  opacity:.92;
}
.help-title-with-mascot{
  display:flex;
  align-items:center;
  gap:8px;
}
.mascot-help{
  display:inline-flex;
  width:48px;
  height:48px;
  flex:0 0 48px;
}
@media(max-width:620px){
  .mascot-inline{width:34px;height:34px;margin-right:5px}
  .mascot-tip{width:40px;height:40px}
  .empty-mascot{width:70px;height:70px}
  .mascot-help{width:40px;height:40px;flex-basis:40px}
}

/* ===== v25 emergency layout + header controls fix ===== */
.mascot-ad-safe{
  position:absolute !important;
  right:18px !important;
  top:14px !important;
  width:54px !important;
  height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
  object-fit:contain !important;
  z-index:2;
  pointer-events:none;
}
.ad-card{position:relative}
.result-card img[src="mascot.png"],
.ad-analysis img[src="mascot.png"],
.mascot-inline img{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  object-fit:contain !important;
}
.hero-action-card{
  position:relative;
  z-index:20;
  pointer-events:auto !important;
  touch-action:manipulation;
}
.hero-actions,
.hero-theme-picker{
  position:relative;
  z-index:30 !important;
  pointer-events:auto !important;
}
.hero-banner:before,
.hero-decoration,
.brand-mascot,
.mascot-bubble{
  pointer-events:none !important;
}
.theme-menu{
  z-index:9999 !important;
}
@media(max-width:620px){
  .mascot-ad-safe{
    width:42px !important;height:42px !important;
    max-width:42px !important;max-height:42px !important;
    right:12px !important;top:10px !important;
  }
}

/* ===== v26 header copy cleanup ===== */
.hero-copy{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-copy h1{margin-bottom:4px}
.hero-copy .brand-tagline{margin:8px 0 5px !important;line-height:1.25}
.hero-copy .brand-desc{font-size:12px !important;line-height:1.5;color:#786960}
.hero-copy .brand-desc b{color:var(--brand2);font-weight:900}
@media(max-width:620px){
  .hero-copy{align-items:flex-start;text-align:left}
  .hero-copy h1{font-size:34px;margin-bottom:2px}
  .hero-copy .brand-tagline{font-size:12px !important;margin:5px 0 3px !important}
  .hero-copy .brand-desc{font-size:9.5px !important;max-width:250px}
}

.install-guide-modal[hidden]{display:none}
.install-guide-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:18px}
.install-guide-backdrop{position:absolute;inset:0;background:rgba(18,25,22,.46);backdrop-filter:blur(3px)}
.install-guide-dialog{position:relative;z-index:1;width:min(430px,100%);border:1px solid var(--line);border-radius:22px;background:var(--card);padding:24px 20px 20px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.install-guide-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:10px;background:var(--soft);color:var(--brand2);font-size:24px;line-height:1;cursor:pointer}
.install-guide-mascot{width:86px;height:86px;margin:0 auto 6px}
.install-guide-mascot img{width:100%;height:100%;object-fit:contain}
.install-guide-dialog h2{margin:4px 0 8px;font-size:22px}
.install-guide-lead{margin:0 auto 14px;max-width:340px;color:var(--muted);font-size:13px;line-height:1.5}
.install-guide-steps{display:grid;gap:8px;text-align:left}
.install-guide-steps>div{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfb}
.install-guide-steps b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--soft);color:var(--brand2);font-size:11px}
.install-guide-steps span{font-size:12px;line-height:1.45;color:var(--ink)}
.install-guide-note{display:block;margin:12px 0 14px;color:var(--muted);font-size:10.5px}
.install-guide-ok{width:100%;border:0;border-radius:12px;padding:12px 14px;background:var(--brand);color:#fff;font-weight:900;cursor:pointer}

/* v29 modal closing hardening */
#installGuideModal[hidden]{display:none !important}

/* ===== v33 compact calculation guide ===== */
.calc-guide{
  margin:14px 0 6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
}
.calc-guide summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-size:13px;
  font-weight:900;
  color:var(--brand2);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.calc-guide summary::-webkit-details-marker{display:none}
.calc-guide summary::after{
  content:"＋";
  font-size:18px;
  font-weight:700;
  color:var(--muted);
}
.calc-guide[open] summary::after{content:"−"}
.calc-guide-body{
  padding:0 16px 15px;
  font-size:11px;
  line-height:1.65;
  color:var(--muted);
}
.calc-guide-body p{margin:6px 0}
@media(max-width:620px){
  .calc-guide summary{padding:12px 14px;font-size:12px}
  .calc-guide-body{padding:0 14px 13px;font-size:10.5px}
}

/* ===== v34 saved calculation tools ===== */
.history-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.history-secondary,.history-danger{
  border:1px solid var(--line);
  border-radius:11px;
  padding:9px 12px;
  background:#fff;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.history-secondary{color:var(--brand2)}
.history-danger{color:#a14f4f}
.history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.history-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.history-main>b{font-size:13px}
.history-main>span{font-size:10.5px;color:var(--muted)}
.history-main>small{font-size:10.5px;color:var(--muted);line-height:1.45}
#installBtn{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
@media(max-width:620px){
  .history-actions{display:grid;grid-template-columns:1fr 1fr}
  .history-secondary,.history-danger{width:100%}
}

.settings-modal[hidden]{display:none!important}.settings-modal{position:fixed;inset:0;z-index:13000;display:flex;align-items:center;justify-content:center;padding:16px}
.settings-backdrop{position:absolute;inset:0;background:rgba(16,25,21,.48);backdrop-filter:blur(3px)}
.settings-dialog{position:relative;z-index:1;width:min(520px,100%);max-height:88vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.settings-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:11px;background:var(--soft);color:var(--brand2);font-size:24px}
.settings-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.settings-head img{width:54px;height:54px;object-fit:contain}.settings-head h2{margin:1px 0 0}
.settings-section{padding:14px 0;border-top:1px solid var(--line)}.settings-section h3{margin:0 0 5px;font-size:13px}.settings-section p{margin:0 0 10px;font-size:11px;line-height:1.5;color:var(--muted)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.settings-theme{border:1px solid var(--line);border-radius:10px;padding:9px 6px;background:#fff;font-size:10px;font-weight:800;color:var(--ink)}.settings-theme.active{outline:2px solid var(--brand2);background:var(--soft)}
.settings-small-btn,.settings-wide-btn,.settings-close-btn{border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--brand2);font-weight:850;padding:10px 12px;font-size:11px;cursor:pointer}
.settings-wide-btn{display:block;width:100%;text-align:center;box-sizing:border-box}.settings-data-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-close-btn{width:100%;margin-top:8px;background:var(--brand);color:#fff;border-color:var(--brand)}
.npay-grade-guide{grid-column:1/-1;margin:-4px 0 2px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.npay-grade-guide summary{padding:10px 12px;font-size:10.5px;font-weight:850;color:var(--brand2);cursor:pointer}.npay-grade-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:0 10px 8px}
.npay-grade-grid span{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 5px;text-align:center}.npay-grade-grid b,.npay-grade-grid em{display:block;font-style:normal}.npay-grade-grid b{font-size:10px}.npay-grade-grid em{font-size:8.5px;color:var(--muted);margin-top:2px}
.npay-grade-guide p{padding:0 11px 10px;margin:0;font-size:9px;line-height:1.45;color:var(--muted)}
@media(max-width:620px){.settings-dialog{padding:16px}.settings-theme-grid{grid-template-columns:repeat(3,1fr)}.npay-grade-grid{grid-template-columns:1fr 1fr}}

/* ===== v38 alignment fixes ===== */

/* 상단 사용법/설정/홈화면추가 버튼: 아이콘과 텍스트 수직 정렬 */
.hero-action-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  line-height:1.15 !important;
}
.hero-action-card > span:last-child{
  display:block;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap;
}
.hero-action-icon{
  margin:0 !important;
  flex:0 0 auto;
}

/* 설정 > 테마: 컬러 점과 텍스트 중앙 맞춤 */
.settings-theme{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  text-align:center !important;
  line-height:1 !important;
  min-height:44px;
}
.settings-theme .theme-dot{
  flex:0 0 auto;
  margin:0 !important;
  vertical-align:middle;
}
.settings-theme{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* Npay 기준은 스마트스토어일 때만 노출 */
#npayGradeGuide[hidden]{
  display:none !important;
}

@media(max-width:620px){
  .hero-action-card{
    gap:5px !important;
  }
  .hero-action-card > span:last-child{
    font-size:10px;
  }
  .settings-theme{
    min-height:42px;
    gap:6px !important;
  }
}

/* ===== v39 compact branded hero ===== */
.compact-hero{
  grid-template-columns:172px minmax(0,1fr) auto !important;
  align-items:center !important;
  min-height:0 !important;
  padding:14px 18px !important;
  margin-bottom:14px !important;
  gap:12px !important;
}
.compact-hero .mascot-stage{
  width:164px !important;
  height:126px !important;
}
.compact-hero .brand-mascot-calc{
  width:148px !important;
  max-height:124px !important;
  object-fit:contain !important;
}
.compact-hero .hero-copy{
  padding:0 4px !important;
}
.compact-hero .hero-copy h1{
  font-size:45px !important;
}
.compact-hero .brand-tagline{
  margin-top:9px !important;
}
.compact-actions{
  align-self:start;
  display:flex;
  gap:7px;
  position:relative;
  z-index:20;
}
.compact-icon-btn{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(216,190,159,.62);
  border-radius:13px;
  background:rgba(255,255,255,.9);
  color:#c97808;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 13px rgba(73,48,26,.06);
  cursor:pointer;
  touch-action:manipulation;
}
.compact-icon-btn svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.compact-icon-btn:active{transform:scale(.96)}

/* old large hero action row is no longer used */
.compact-hero .hero-actions,
.compact-hero .top-actions{display:none!important}

@media(max-width:760px){
  .compact-hero{
    grid-template-columns:138px minmax(0,1fr) auto !important;
    padding:11px 12px !important;
    gap:5px !important;
  }
  .compact-hero .mascot-stage{
    width:132px !important;
    height:108px !important;
  }
  .compact-hero .brand-mascot-calc{
    width:124px !important;
    max-height:106px !important;
  }
  .compact-hero .hero-copy{
    text-align:left !important;
  }
  .compact-hero .hero-copy h1{
    font-size:36px !important;
  }
  .compact-hero .brand-tagline{
    margin-top:6px !important;
    font-size:12px !important;
  }
  .compact-hero .brand-desc{
    font-size:9.5px !important;
    line-height:1.38 !important;
  }
  .compact-actions{
    gap:5px;
    margin-top:1px;
  }
  .compact-icon-btn{
    width:36px;
    height:36px;
    border-radius:11px;
  }
  .compact-icon-btn svg{width:18px;height:18px}
}
@media(max-width:540px){
  .compact-hero{
    grid-template-columns:104px minmax(0,1fr) auto !important;
  }
  .compact-hero .mascot-stage{
    width:100px !important;
    height:92px !important;
  }
  .compact-hero .brand-mascot-calc{
    width:96px !important;
    max-height:90px !important;
  }
  .compact-hero .mascot-bubble{
    display:none;
  }
  .compact-hero .hero-copy h1{
    font-size:31px !important;
  }
  .compact-hero .brand-tagline{
    font-size:10.5px !important;
  }
  .compact-hero .brand-desc{
    font-size:8.7px !important;
  }
  .compact-icon-btn{
    width:33px;
    height:33px;
  }
}

/* ===== v40 mobile text-wrap fixes ===== */

/* 설정 - 다운로드 알림 */
.settings-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
}
#downloadNotifyBtn{
  min-width:104px !important;
  width:auto !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  line-height:1.2 !important;
  padding:11px 14px !important;
}
.settings-small-btn,
.settings-wide-btn,
.settings-close-btn{
  white-space:nowrap !important;
  word-break:keep-all !important;
}
.settings-section h3,
.settings-section p{
  word-break:keep-all !important;
}

/* 저장한 계산 영역 */
.history-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
.history-actions button,
#saveBtn,
#downloadHistoryBtn,
#clearHistoryBtn{
  white-space:nowrap !important;
  word-break:keep-all !important;
  line-height:1.2 !important;
}
.history-item{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:10px !important;
}
.history-item .delete-btn{
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  word-break:keep-all !important;
  min-width:48px !important;
  width:auto !important;
  padding:8px 10px !important;
}
.history-main b,
.history-main span,
.history-main small{
  word-break:keep-all !important;
}

/* 저장한 계산 섹션 상단이 줄바꿈되지 않게 */
.history-card .section-title,
.history-card h2,
.history-card .text-btn{
  white-space:nowrap !important;
  word-break:keep-all !important;
}

@media(max-width:620px){
  .settings-row{
    grid-template-columns:minmax(0,1fr) 112px !important;
  }
  #downloadNotifyBtn{
    min-width:112px !important;
  }

  .history-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .history-actions button{
    width:100% !important;
    min-width:0 !important;
  }

  .history-item{
    grid-template-columns:minmax(0,1fr) 52px !important;
  }
  .history-item .delete-btn{
    min-width:52px !important;
    max-width:52px !important;
    text-align:center !important;
  }
}

/* 아주 좁은 화면에서도 버튼 글자 세로쪼개짐 방지 */
@media(max-width:420px){
  #downloadNotifyBtn{
    min-width:100px !important;
    font-size:10.5px !important;
    padding:10px 9px !important;
  }
  .settings-row{
    grid-template-columns:minmax(0,1fr) 100px !important;
  }
}

/* ===== v41 saved calculation button cleanup ===== */
#saveBtn{
  width:100% !important;
  min-height:42px;
  margin-top:8px;
}

.history-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:6px !important;
  margin-top:8px !important;
  flex-wrap:nowrap !important;
}

#downloadHistoryBtn,
#clearHistoryBtn{
  width:auto !important;
  min-width:0 !important;
  height:32px !important;
  padding:6px 10px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}

#downloadHistoryBtn{
  color:var(--brand2) !important;
}

#clearHistoryBtn{
  color:#a14f4f !important;
}

@media(max-width:620px){
  .history-actions{
    display:flex !important;
    justify-content:flex-end !important;
    grid-template-columns:none !important;
    gap:6px !important;
  }

  #downloadHistoryBtn,
  #clearHistoryBtn{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:31px !important;
    padding:6px 9px !important;
    font-size:9.5px !important;
  }
}

/* ===== v42 header decoration ===== */
.hero-money-deco{
  position:absolute;
  right:74px;
  bottom:18px;
  width:116px;
  height:70px;
  opacity:.52;
  pointer-events:none;
  z-index:1;
}
.hero-money-deco svg{width:100%;height:100%;overflow:visible}
.hero-money-deco .deco-scale{
  fill:none;
  stroke:#d69a38;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-money-deco .deco-coins{
  fill:#f6cb72;
  stroke:#d69a38;
  stroke-width:2;
}
@media(max-width:760px){
  .hero-money-deco{
    right:58px;
    bottom:13px;
    width:88px;
    height:56px;
    opacity:.42;
  }
}
@media(max-width:540px){
  .hero-money-deco{
    right:52px;
    bottom:10px;
    width:72px;
    height:48px;
    opacity:.34;
  }
}

/* ===== v42 saved calculations layout ===== */
.history-section-v42{
  position:relative;
}
.history-section-v42 .section-head,
.history-section-v42 .section-title{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
.history-section-v42 h2{
  white-space:nowrap !important;
  word-break:keep-all !important;
  margin-right:auto !important;
}

/* Save button becomes a short button below title */
#saveBtn{
  width:auto !important;
  min-width:78px !important;
  height:34px !important;
  min-height:34px !important;
  padding:6px 14px !important;
  margin:10px 0 0 0 !important;
  border-radius:9px !important;
  font-size:10.5px !important;
  white-space:nowrap !important;
}

/* Download/delete stay small and share lower action row */
.history-actions{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
  margin-top:8px !important;
}
#downloadHistoryBtn,
#clearHistoryBtn{
  height:30px !important;
  padding:5px 9px !important;
  border-radius:8px !important;
  font-size:9.5px !important;
}

/* keep record delete compact */
.history-item .delete-btn{
  min-width:42px !important;
  max-width:42px !important;
  width:42px !important;
  height:30px !important;
  padding:5px 6px !important;
  font-size:9.5px !important;
  white-space:nowrap !important;
}

/* On mobile: title on top, buttons below without crowding */
@media(max-width:620px){
  .history-section-v42 .section-head,
  .history-section-v42 .section-title{
    align-items:center !important;
    justify-content:flex-start !important;
  }
  #saveBtn{
    min-width:68px !important;
    height:32px !important;
    min-height:32px !important;
    padding:5px 12px !important;
    font-size:10px !important;
  }
  .history-actions{
    display:flex !important;
    grid-template-columns:none !important;
    justify-content:flex-start !important;
    gap:5px !important;
  }
  #downloadHistoryBtn,
  #clearHistoryBtn{
    width:auto !important;
    min-width:0 !important;
    height:29px !important;
    padding:5px 8px !important;
    font-size:9px !important;
  }
}

/* ===== v43 history dropdown ===== */
.history-menu-wrap{
  position:relative;
  margin-left:auto;
  flex:0 0 auto;
}
.history-menu-trigger{
  height:34px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--brand2);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.history-menu-arrow{
  font-size:13px;
  line-height:1;
  transition:transform .15s ease;
}
.history-menu-trigger[aria-expanded="true"] .history-menu-arrow{
  transform:rotate(180deg);
}
.history-menu{
  position:absolute;
  right:0;
  top:40px;
  z-index:200;
  min-width:138px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  box-shadow:0 12px 28px rgba(32,45,39,.14);
}
.history-menu[hidden]{display:none!important}
.history-menu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:10px 11px;
  border-radius:8px;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.history-menu button:active{background:var(--soft)}
.history-menu button.danger{color:#a14f4f}

/* checkbox + history row */
.history-item{
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
}
.history-check{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
  cursor:pointer;
}
.history-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.history-check span{
  width:18px;
  height:18px;
  border:1.5px solid #b9c8c0;
  border-radius:5px;
  background:#fff;
  position:relative;
  display:block;
}
.history-check input:checked + span{
  background:var(--brand);
  border-color:var(--brand);
}
.history-check input:checked + span:after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* remove old action row layout interference */
.history-actions{display:none!important}
.history-item .delete-btn{display:none!important}

@media(max-width:620px){
  .history-menu-trigger{
    height:32px;
    padding:5px 9px;
    font-size:9.5px;
  }
  .history-menu{
    min-width:132px;
    top:37px;
  }
}

/* ===== v45 cartoon money illustration ===== */
.hero-money-deco.cartoon-money-deco{
  position:absolute !important;
  right:78px !important;
  top:68px !important;
  bottom:auto !important;
  width:118px !important;
  height:76px !important;
  opacity:1 !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.cartoon-money-deco svg{display:block;width:100%;height:100%;overflow:visible}
.cartoon-money-deco .bill-back{fill:#b9d98d;stroke:#5f8f63;stroke-width:3}
.cartoon-money-deco .bill-front{fill:#d9edae;stroke:#56855b;stroke-width:3}
.cartoon-money-deco .bill-inner{fill:none;stroke:#7eaa70;stroke-width:2}
.cartoon-money-deco .bill-center{fill:#f2f7d6;stroke:#77a268;stroke-width:2}
.cartoon-money-deco .bill-mark{fill:none;stroke:#56855b;stroke-width:2.4;stroke-linecap:round}
.cartoon-money-deco .bill-dot{fill:#76a46a}
.cartoon-money-deco .coin-shadow{fill:#d69b2e;opacity:.18}
.cartoon-money-deco .coin-side{fill:#e6a92e;stroke:#b77718;stroke-width:2.5}
.cartoon-money-deco .coin-top{fill:#ffd66a;stroke:#bd7d1d;stroke-width:2.5}
.cartoon-money-deco .coin-line{fill:none;stroke:#c9881e;stroke-width:2}
.cartoon-money-deco .coin-single-side{fill:#dda12c;stroke:#b77718;stroke-width:2.5}
.cartoon-money-deco .coin-single{fill:#ffd86f;stroke:#bd7d1d;stroke-width:2.5}
.cartoon-money-deco .coin-shine{fill:none;stroke:#fff1ae;stroke-width:3;stroke-linecap:round}
.cartoon-money-deco .coin-mark{fill:none;stroke:#b77718;stroke-width:2.3;stroke-linecap:round}
.compact-hero .hero-copy{padding-right:112px !important}
@media(max-width:760px){
  .hero-money-deco.cartoon-money-deco{right:62px !important;top:64px !important;width:91px !important;height:62px !important}
  .compact-hero .hero-copy{padding-right:84px !important}
}
@media(max-width:540px){
  .hero-money-deco.cartoon-money-deco{right:45px !important;top:62px !important;width:68px !important;height:48px !important}
  .compact-hero .hero-copy{padding-right:60px !important}
}

/* ===== v46 header text width repair ===== */
.compact-hero .hero-copy{
  padding-right:0 !important;
  min-width:0 !important;
}
.compact-hero .hero-copy h1,
.compact-hero .hero-title,
.compact-hero h1{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
.compact-hero .hero-copy .hero-sub,
.compact-hero .hero-copy .hero-desc,
.compact-hero .hero-copy p{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}

/* 돈 그림은 텍스트 폭을 줄이지 않고 우측 빈 공간에 독립 배치 */
.hero-money-deco.cartoon-money-deco{
  right:76px !important;
  top:72px !important;
  width:92px !important;
  height:58px !important;
}

@media(max-width:760px){
  .compact-hero .hero-copy{padding-right:0 !important}
  .hero-money-deco.cartoon-money-deco{
    right:66px !important;
    top:69px !important;
    width:78px !important;
    height:51px !important;
  }
}

@media(max-width:540px){
  .compact-hero .hero-copy{
    padding-right:0 !important;
    width:auto !important;
    max-width:none !important;
  }
  .compact-hero .hero-copy h1,
  .compact-hero .hero-title,
  .compact-hero h1{
    white-space:nowrap !important;
    font-size:clamp(32px,10.4vw,48px) !important;
    line-height:1.02 !important;
  }
  .compact-hero .hero-copy .hero-sub,
  .compact-hero .hero-copy .hero-desc,
  .compact-hero .hero-copy p{
    word-break:keep-all !important;
  }
  .hero-money-deco.cartoon-money-deco{
    right:48px !important;
    top:73px !important;
    width:67px !important;
    height:45px !important;
  }
}

/* ===== v47 money decoration placement only ===== */
/* Keep the existing cartoon artwork; move it into the clear lower-right hero space. */
.hero-money-deco.cartoon-money-deco{
  right:92px !important;
  top:91px !important;
  width:76px !important;
  height:48px !important;
  z-index:1 !important;
}
@media(max-width:760px){
  .hero-money-deco.cartoon-money-deco{
    right:82px !important;
    top:91px !important;
    width:70px !important;
    height:45px !important;
  }
}
@media(max-width:540px){
  .hero-money-deco.cartoon-money-deco{
    right:70px !important;
    top:92px !important;
    width:64px !important;
    height:42px !important;
  }
}

/* ===== v48 final money placement: right-side clear zone ===== */
/* Existing artwork only. Keep it fully away from title/subcopy. */
.hero-money-deco.cartoon-money-deco{
  right:24px !important;
  top:98px !important;
  width:72px !important;
  height:46px !important;
}
@media(max-width:760px){
  .hero-money-deco.cartoon-money-deco{
    right:22px !important;
    top:96px !important;
    width:66px !important;
    height:43px !important;
  }
}
@media(max-width:540px){
  .hero-money-deco.cartoon-money-deco{
    right:18px !important;
    top:96px !important;
    width:61px !important;
    height:40px !important;
  }
}

/* ===== v49 stable hero right column ===== */
.compact-hero{
  display:grid !important;
  grid-template-columns:170px minmax(0,1fr) 110px !important;
  align-items:center !important;
  gap:10px !important;
  position:relative !important;
  overflow:hidden !important;
}

.compact-hero .mascot-stage{
  grid-column:1 !important;
}

.compact-hero .hero-copy{
  grid-column:2 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}

.compact-hero .hero-copy h1{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  margin:0 !important;
}

.hero-side-panel{
  grid-column:3 !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-width:0 !important;
  padding:2px 0 4px !important;
  z-index:10 !important;
}

.hero-side-panel .compact-actions{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}

.hero-side-panel .hero-money-deco.cartoon-money-deco{
  position:static !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:92px !important;
  height:58px !important;
  margin:0 2px 0 0 !important;
  transform:none !important;
  flex:0 0 auto !important;
  pointer-events:none !important;
}

.hero-side-panel .hero-money-deco.cartoon-money-deco svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

@media(max-width:760px){
  .compact-hero{
    grid-template-columns:138px minmax(0,1fr) 96px !important;
    gap:7px !important;
  }
  .hero-side-panel .hero-money-deco.cartoon-money-deco{
    width:82px !important;
    height:52px !important;
  }
}

@media(max-width:540px){
  .compact-hero{
    grid-template-columns:104px minmax(0,1fr) 84px !important;
    gap:5px !important;
  }
  .compact-hero .hero-copy h1{
    font-size:clamp(28px,8vw,35px) !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
  }
  .hero-side-panel{
    gap:6px !important;
  }
  .hero-side-panel .compact-actions{
    gap:4px !important;
  }
  .hero-side-panel .compact-icon-btn{
    width:35px !important;
    height:35px !important;
    flex:0 0 35px !important;
  }
  .hero-side-panel .hero-money-deco.cartoon-money-deco{
    width:72px !important;
    height:46px !important;
    margin-right:1px !important;
  }
}

/* ===== v50 final mobile polish ===== */

/* 사용법 */
.help-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.help-head img{width:52px;height:52px;object-fit:contain}
.help-steps{display:grid;gap:8px}
.help-step{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:start;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#fff}
.help-step>b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--brand2);font-size:10px}
.help-step span{display:flex;flex-direction:column;gap:3px;min-width:0}
.help-step strong{font-size:11px;word-break:keep-all}
.help-step small{font-size:9.5px;line-height:1.45;color:var(--muted);word-break:keep-all}
.help-note{margin:11px 0 0;font-size:9px;line-height:1.45;color:var(--muted)}
.help-ok{width:100%;margin-top:12px;border:0;border-radius:11px;padding:11px;background:var(--brand);color:#fff;font-weight:850}
.help-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:11px;background:var(--soft);color:var(--brand2);font-size:23px}

/* 기록 관리 */
.history-selected-count{
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:8.5px;font-weight:900;
}

/* 주요 버튼/문구는 강제 단어 쪼개짐 금지 */
.compact-icon-btn,
.history-menu-trigger,
.history-menu button,
.settings-small-btn,
.settings-wide-btn,
.settings-close-btn,
.text-btn,
button{
  word-break:keep-all;
}

/* 카드 제목/수치 안정화 */
.section-head h2,
.card-title,
.result-card h2,
.history-main b{
  word-break:keep-all;
}
.result-card .value,
.summary-card .value{
  white-space:nowrap;
}

/* 작은 화면에서도 우측 헤더 전용칸 유지 */
@media(max-width:540px){
  .compact-hero{
    grid-template-columns:100px minmax(0,1fr) 82px !important;
    padding:10px 10px !important;
    gap:5px !important;
  }
  .compact-hero .hero-copy h1{
    font-size:clamp(27px,7.8vw,33px) !important;
  }
  .compact-hero .brand-tagline{
    font-size:10px !important;
    white-space:nowrap !important;
  }
  .compact-hero .brand-desc{
    font-size:8.6px !important;
    line-height:1.35 !important;
  }
  .hero-side-panel .compact-icon-btn{
    width:34px !important;height:34px !important;flex-basis:34px !important;
  }
  .hero-side-panel .hero-money-deco.cartoon-money-deco{
    width:68px !important;height:44px !important;
  }
}

/* v51 calculation basis */
.calc-basis-compact{padding:2px 12px 11px}
.calc-basis-compact p{position:relative;margin:6px 0 0;padding-left:11px;font-size:9.5px;line-height:1.5;color:var(--muted);word-break:keep-all}
.calc-basis-compact p:before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--brand)}
@media(max-width:540px){.calc-basis-compact{padding:1px 10px 10px}.calc-basis-compact p{font-size:9px;line-height:1.45}}

/* ===== v58 app update settings ===== */
.settings-update-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.settings-update-copy{min-width:0}
.settings-update-copy p{margin:4px 0 0}
.settings-update-copy strong{color:var(--brand2)}
#checkUpdateBtn{
  white-space:nowrap;
  flex:0 0 auto;
}
#checkUpdateBtn:disabled{
  opacity:.65;
}
@media(max-width:540px){
  .settings-update-section{
    align-items:center;
  }
  #checkUpdateBtn{
    min-width:86px;
  }
}

/* ===== v59 history restore ===== */
.history-item{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center;
}
.history-load-btn{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--brand2);
  border-radius:9px;
  padding:7px 9px;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
}
.history-load-btn:active{
  transform:translateY(1px);
}
@media(max-width:540px){
  .history-item{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:7px !important;
  }
  .history-load-btn{
    padding:6px 7px;
    font-size:8.5px;
  }
  .history-main small{
    line-height:1.45;
  }
}

/* ===== v61 history search ===== */
.history-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  margin:8px 0 10px;
}
.history-search-wrap[hidden]{display:none!important}
.history-search-wrap input{
  width:100%;
  height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:0 34px 0 31px;
  font-size:9.5px;
  color:var(--text);
  outline:none;
  box-sizing:border-box;
}
.history-search-wrap input:focus{
  border-color:var(--brand);
}
.history-search-icon{
  position:absolute;
  left:10px;
  z-index:1;
  color:var(--muted);
  font-size:15px;
  line-height:1;
  pointer-events:none;
}
#historySearchClear{
  position:absolute;
  right:6px;
  width:26px;
  height:26px;
  border:0;
  border-radius:8px;
  background:var(--soft);
  color:var(--muted);
  font-size:16px;
  line-height:1;
  padding:0;
}
#historySearchClear[hidden]{display:none!important}
.history-no-result{
  display:block;
  width:100%;
  padding:18px 8px;
  text-align:center;
  color:var(--muted);
  font-size:10px;
}
@media(max-width:540px){
  .history-search-wrap input{
    height:33px;
    font-size:9px;
  }
}

/* ===== v62 scroll to top ===== */
.scroll-top-btn{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:1200;

  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  box-shadow:0 5px 16px rgba(20,72,57,.24);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);

  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  cursor:pointer;
}

.scroll-top-btn.show{
  opacity:.94;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.scroll-top-btn span{
  display:block;
  font-size:23px;
  font-weight:800;
  line-height:1;
  transform:translateY(-1px);
}

.scroll-top-btn:active{
  transform:translateY(1px) scale(.96);
}

.scroll-top-btn:focus-visible{
  outline:3px solid rgba(235,143,28,.32);
  outline-offset:3px;
}

@media(max-width:540px){
  .scroll-top-btn{
    right:max(13px, env(safe-area-inset-right));
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
  .scroll-top-btn span{
    font-size:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-top-btn{
    transition:none;
  }
}

/* ===== v63 scroll button visibility fix ===== */
#scrollTopBtn.scroll-top-btn{
  position:fixed !important;
  right:14px !important;
  bottom:18px !important;
  z-index:2147483000 !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  border-radius:999px !important;
  background:var(--brand) !important;
  color:#fff !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#scrollTopBtn.scroll-top-btn.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#scrollTopBtn.scroll-top-btn span{
  color:#fff !important;
  font-size:25px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
@media(max-width:540px){
  #scrollTopBtn.scroll-top-btn{
    right:12px !important;
    bottom:14px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
}

/* ===== v64 help modal structure fix ===== */
.help-modal[hidden]{display:none!important}
.help-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.help-backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,25,20,.42);
  backdrop-filter:blur(3px);
}
.help-dialog{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  max-height:88vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.help-dialog .help-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:36px!important;
  height:36px!important;
  z-index:5!important;
}
.help-dialog .help-head{
  position:static!important;
  padding-right:44px;
}
.help-dialog .help-head img{
  width:52px;
  height:52px;
  object-fit:contain;
}
.help-note-v64{
  margin:11px 0 0;
  font-size:9.5px;
  line-height:1.5;
  color:var(--muted);
}
.help-bottom-close{display:none!important}

/* Make the top button unmistakable once .show is applied */
#scrollTopBtn.scroll-top-btn.show{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* ===== v65 draft autosave note ===== */
.settings-inline-note.draft-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 0 10px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft);
  font-size:9.5px;
  color:var(--muted);
}
.settings-inline-note.draft-note b{
  color:var(--brand2);
  white-space:nowrap;
}

/* ===== v66 customer support ===== */
.support-panel{overflow:visible}
.support-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:8px 0 12px;
  padding:4px;
  border-radius:12px;
  background:var(--soft);
}
.support-tab{
  height:36px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}
.support-tab.active{
  background:#fff;
  color:var(--brand2);
  box-shadow:0 1px 4px rgba(20,72,57,.08);
}
.support-view[hidden]{display:none!important}
.support-view-head,.support-inquiry-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:5px 0 9px;
}
.support-view-head>div,.support-inquiry-actions>div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.support-view-head strong,.support-inquiry-actions strong{font-size:11px}
.support-view-head small,.support-inquiry-actions small{font-size:9px;color:var(--muted);line-height:1.4}
.support-refresh{
  width:34px;height:34px;flex:0 0 34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--brand2);
  font-size:18px;
  line-height:1;
}
.support-primary-small{
  height:34px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font-size:9.5px;
  font-weight:850;
  white-space:nowrap;
}
.support-list{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.support-list.support-empty{
  min-height:66px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-style:dashed;
  color:var(--muted);
  font-size:9.5px;
  text-align:center;
}
.support-list-row{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:10px 11px;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:left;
  color:var(--text);
}
.support-list-row:last-child{border-bottom:0}
.support-row-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
.support-row-main b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.support-row-main small{font-size:8.6px;color:var(--muted)}
.support-row-arrow{font-size:20px;color:var(--muted)}
.pin-badge{
  display:inline-flex;
  vertical-align:1px;
  margin-right:4px;
  padding:2px 5px;
  border-radius:5px;
  background:var(--brand);
  color:#fff;
  font-size:7px;
  font-style:normal;
}
.secret-lock{font-size:10px}
.support-status{
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:999px;
  font-size:7.8px;
  font-weight:850;
  white-space:nowrap;
}
.support-status.waiting{background:#fff3d8;color:#95610f}
.support-status.done{background:#e7f4ec;color:#28734f}
.support-spinner{
  width:14px;height:14px;margin-right:7px;
  border:2px solid var(--line);
  border-top-color:var(--brand);
  border-radius:50%;
  display:inline-block;
  animation:supportSpin .8s linear infinite;
}
@keyframes supportSpin{to{transform:rotate(360deg)}}

.inquiry-form-card{
  margin:7px 0 12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.inquiry-form-card[hidden]{display:none!important}
.inquiry-form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:9px;
}
.inquiry-form-head strong{font-size:10.5px}
.support-mini-x{
  width:30px;height:30px;
  border:0;border-radius:9px;
  background:#fff;color:var(--muted);
  font-size:17px;
}
.support-form-grid{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:8px;
}
.support-form-grid label,.support-full-label,.secret-password-wrap label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:9px;
  font-weight:800;
}
.support-form-grid input,.support-full-label input,.support-full-label textarea,.secret-password-wrap input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font-size:10px;
  outline:none;
}
.support-form-grid input,.support-full-label input,.secret-password-wrap input{
  height:36px;
  padding:0 10px;
}
.support-full-label{margin-top:8px}
.support-full-label textarea{
  padding:10px;
  resize:vertical;
  min-height:96px;
  line-height:1.5;
  font-family:inherit;
}
.secret-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.secret-toggle input{position:absolute;opacity:0;pointer-events:none}
.secret-check{
  width:18px;height:18px;flex:0 0 18px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  position:relative;
}
.secret-toggle input:checked+.secret-check{
  background:var(--brand);
  border-color:var(--brand);
}
.secret-toggle input:checked+.secret-check:after{
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.secret-toggle>span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.secret-toggle b{font-size:9.5px}
.secret-toggle small{font-size:8px;color:var(--muted)}
.secret-password-wrap{margin-top:8px}
.secret-password-wrap[hidden]{display:none!important}
.support-form-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}
.support-form-message{
  flex:1 1 auto;
  min-height:14px;
  color:#a44b35;
  font-size:8.5px;
}
.support-submit{
  min-width:86px;
  height:36px;
  border:0;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font-size:9.5px;
  font-weight:850;
}
.support-submit:disabled{opacity:.6}
.support-submit-full{width:100%;margin-top:10px}
.support-honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}
.inquiry-list-head{margin-top:10px}

.support-modal[hidden]{display:none!important}
.support-modal{
  position:fixed;
  inset:0;
  z-index:3200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.support-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,25,20,.44);
  backdrop-filter:blur(3px);
}
.support-modal-dialog{
  position:relative;
  z-index:1;
  width:min(540px,100%);
  max-height:86vh;
  overflow:auto;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.secret-open-dialog{width:min(390px,100%)}
.support-modal-x{
  position:absolute;
  top:11px;right:11px;
  width:35px;height:35px;
  border:0;border-radius:10px;
  background:var(--soft);
  color:var(--brand2);
  font-size:21px;
}
.support-modal-head{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-right:42px;
}
.support-modal-head h2{
  margin:0;
  font-size:17px;
  line-height:1.35;
  word-break:keep-all;
}
.support-modal-head small{font-size:8.8px;color:var(--muted)}
.support-detail-badge{
  width:max-content;
  padding:4px 7px;
  border-radius:7px;
  background:var(--soft);
  color:var(--brand2);
  font-size:8px;
  font-weight:850;
}
.support-detail-badge.secret{background:#fff3d8;color:#95610f}
.support-detail-body{
  margin:15px 0;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  white-space:pre-wrap;
  word-break:break-word;
  font-size:10px;
  line-height:1.65;
}
.support-reply-box{
  margin:0 0 13px;
  padding:11px;
  border-radius:11px;
  background:var(--soft);
}
.support-reply-box[hidden]{display:none!important}
.support-reply-box strong{display:block;margin-bottom:6px;font-size:9px;color:var(--brand2)}
.support-reply-box div{white-space:pre-wrap;word-break:break-word;font-size:9.5px;line-height:1.6}

@media(max-width:540px){
  .support-form-grid{grid-template-columns:1fr}
  .support-list-row{padding:10px}
  .support-panel .section-head{margin-bottom:5px}
  .support-form-bottom{align-items:flex-end;flex-direction:column}
  .support-submit{width:100%}
  .support-form-message{width:100%}
}

/* ===== v68 main app tabs ===== */
.app-main-tabs{
  position:sticky;
  top:8px;
  z-index:1100;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin:0 0 12px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(250,249,244,.96);
  box-shadow:0 4px 14px rgba(20,72,57,.08);
  backdrop-filter:blur(10px);
}

.app-main-tab{
  min-width:0;
  height:42px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}

.app-main-tab.active{
  background:var(--brand);
  color:#fff;
  box-shadow:0 2px 7px rgba(20,72,57,.18);
}

.main-tab-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:rgba(20,72,57,.08);
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.app-main-tab.active .main-tab-icon{
  background:rgba(255,255,255,.18);
}

.app-main-view[hidden]{
  display:none!important;
}

.app-main-view{
  min-width:0;
}

/* A tab already names the destination, so its first card shouldn't need extra top gap. */
#mainTabHistory .history-section-v42,
#mainTabSupport .support-panel{
  margin-top:0;
}

@media(max-width:540px){
  .app-main-tabs{
    top:6px;
    gap:4px;
    margin-bottom:10px;
    padding:4px;
  }
  .app-main-tab{
    height:40px;
    gap:4px;
    font-size:9.4px;
  }
  .main-tab-icon{
    width:17px;
    height:17px;
    font-size:11px;
  }
}

@media(max-width:360px){
  .app-main-tab{
    font-size:8.8px;
  }
}

/* ===== v77 customer account + cloud sync ===== */
.account-btn{width:auto!important;min-width:44px;gap:5px;padding:0 10px!important}
.account-icon{width:17px;height:17px;border:2px solid currentColor;border-radius:50%;display:inline-block;position:relative;color:inherit;background:transparent;font-size:0}
.account-icon:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:19px;height:9px;border:2px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0;background:transparent}
.account-label{font-size:11px;font-weight:800;white-space:nowrap}
.account-btn.logged-in{background:var(--soft)!important;color:var(--brand)!important}
.cloud-sync-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.cloud-sync-card>div{min-width:0;display:flex;flex-direction:column;gap:3px}.cloud-sync-card strong{font-size:14px}.cloud-sync-card small{color:var(--muted);font-size:12px;line-height:1.45}
.cloud-sync-card button{flex:0 0 auto;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;padding:9px 13px;cursor:pointer}
.cloud-sync-card[data-state="syncing"]{opacity:.82}.cloud-sync-card[data-state="error"]{border-color:#d99;background:#fff6f6}
.auth-modal[hidden]{display:none}.auth-modal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:18px}
.auth-backdrop{position:absolute;inset:0;background:rgba(13,25,20,.5);backdrop-filter:blur(3px)}
.auth-dialog{position:relative;z-index:1;width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:21px;box-shadow:0 24px 60px rgba(0,0,0,.24)}
.auth-x{position:absolute;right:13px;top:12px;border:0;background:transparent;font-size:26px;cursor:pointer;color:var(--muted)}
.auth-head{display:flex;align-items:center;gap:12px;padding-right:28px;margin-bottom:16px}.auth-head img{width:62px;height:62px;object-fit:contain}.auth-head h2{margin:2px 0 2px;font-size:22px}.auth-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--soft);padding:4px;border-radius:12px;margin-bottom:14px}.auth-tab{border:0;background:transparent;border-radius:9px;padding:10px;font-weight:800;color:var(--muted);cursor:pointer}.auth-tab.active{background:var(--card);color:var(--brand);box-shadow:0 1px 5px rgba(0,0,0,.08)}
#authForm{display:flex;flex-direction:column;gap:11px}#authForm label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}#authForm input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font:inherit;background:var(--card);color:var(--text);outline:none}#authForm input:focus{border-color:var(--brand2);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand2) 12%, transparent)}
.auth-primary,.auth-secondary{border:0;border-radius:11px;padding:12px 14px;font-weight:800;cursor:pointer}.auth-primary{background:var(--brand);color:#fff;margin-top:2px}.auth-primary:disabled{opacity:.6}.auth-secondary{background:var(--soft);color:var(--brand)}
.auth-message{min-height:18px;color:#b14141;font-size:12px}.auth-note{font-size:11px;color:var(--muted);line-height:1.5;margin:12px 0 0}.auth-user-card{display:flex;flex-direction:column;gap:8px;background:var(--soft);border-radius:14px;padding:16px}.auth-user-card strong{word-break:break-all}.auth-user-card small{color:var(--muted)}
@media(max-width:520px){.account-label{display:none}.account-btn{min-width:42px!important;padding:0 9px!important}.cloud-sync-card{align-items:flex-start;flex-direction:column}.cloud-sync-card button{width:100%}.auth-dialog{padding:18px;border-radius:18px}}
.auth-account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.auth-danger{border:1px solid #e8b8b8;border-radius:11px;padding:12px 14px;font-weight:800;cursor:pointer;background:#fff6f6;color:#b33}.auth-danger:disabled{opacity:.55}


/* ===== v77.1 login UI compact repair ===== */
.account-btn{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  padding:0!important;
  gap:0!important;
  flex:0 0 42px;
}
.account-btn svg{width:18px!important;height:18px!important}
.account-btn.logged-in{background:var(--soft)!important;color:var(--brand)!important}
.auth-modal [hidden]{display:none!important}
.auth-dialog{
  width:min(360px,calc(100vw - 28px))!important;
  max-height:min(82vh,620px)!important;
  padding:18px!important;
  border-radius:18px!important;
}
.auth-head{gap:9px!important;margin-bottom:12px!important;padding-right:24px!important}
.auth-head img{width:44px!important;height:44px!important}
.auth-head h2{font-size:19px!important;margin:0 0 2px!important}
.auth-head p{font-size:11px!important;line-height:1.4!important}
.auth-user-card{padding:12px!important;border-radius:12px!important;gap:6px!important}
.auth-user-card strong{font-size:13px!important}
.auth-user-card small{font-size:11px!important}
.auth-account-actions{grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:5px!important}
.auth-account-actions button{padding:9px 10px!important;font-size:12px!important}
.auth-tabs{margin-bottom:10px!important}
.auth-tab{padding:8px!important;font-size:12px!important}
#authForm{gap:9px!important}
#authForm label{font-size:12px!important}
#authForm input{padding:10px 11px!important;border-radius:10px!important}
.auth-primary{padding:10px 12px!important}
.auth-note{font-size:10px!important;margin-top:9px!important}
@media(max-width:520px){
  .account-btn{width:40px!important;min-width:40px!important;height:40px!important;flex-basis:40px!important;padding:0!important}
  .auth-modal{padding:10px!important}
  .auth-dialog{width:min(340px,calc(100vw - 20px))!important;padding:15px!important;border-radius:16px!important}
}

/* ===== v77.2 header icon buttons: exact same size ===== */
.hero-side-panel .compact-actions .compact-icon-btn{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  flex:0 0 42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:13px !important;
  box-sizing:border-box !important;
}
.hero-side-panel .compact-actions .compact-icon-btn svg{
  width:21px !important;
  height:21px !important;
  flex:0 0 21px !important;
}
@media(max-width:760px){
  .hero-side-panel .compact-actions .compact-icon-btn{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    flex-basis:36px !important;
    border-radius:11px !important;
  }
  .hero-side-panel .compact-actions .compact-icon-btn svg{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
}
@media(max-width:540px){
  .hero-side-panel .compact-actions .compact-icon-btn{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    flex-basis:34px !important;
    border-radius:10px !important;
  }
  .hero-side-panel .compact-actions .compact-icon-btn svg{
    width:17px !important;
    height:17px !important;
    flex-basis:17px !important;
  }
}

/* ===== v77.3 mobile header overlap fix ===== */
@media(max-width:540px){
  .compact-hero{
    grid-template-columns:90px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    gap:2px 8px !important;
    padding:10px 11px !important;
    align-items:center !important;
  }
  .compact-hero .mascot-stage{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:86px !important;
    height:92px !important;
    align-self:center !important;
  }
  .compact-hero .brand-mascot-calc{
    width:84px !important;
    max-height:90px !important;
  }
  .compact-hero .hero-copy{
    grid-column:2 !important;
    grid-row:2 !important;
    min-width:0 !important;
    padding:0 !important;
  }
  .compact-hero .hero-copy h1{
    font-size:31px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  .compact-hero .brand-tagline{
    margin-top:5px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }
  .compact-hero .brand-desc{
    font-size:8.5px !important;
    line-height:1.35 !important;
  }
  .hero-side-panel{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    min-height:34px !important;
  }
  .hero-side-panel .compact-actions{
    width:auto !important;
    gap:5px !important;
    justify-content:flex-end !important;
  }
  .hero-side-panel .hero-money-deco.cartoon-money-deco{
    display:none !important;
  }
}

/* ===== v78 UI refresh — 2026 productivity app direction ===== */
:root{
  --bg:#f7f8f7;
  --card:#ffffff;
  --ink:#17211d;
  --muted:#77827d;
  --brand:#214f40;
  --brand2:#35745f;
  --line:#e7ebe8;
  --soft:#f1f5f2;
}

html,body{background:var(--bg);}
body{letter-spacing:-.01em;}
.app-shell{max-width:920px;padding:16px 18px 54px;}

/* Header: keep brand character, remove decorative clutter */
.hero-decoration,
.mascot-bubble,
.hero-money-deco{display:none!important;}
.hero-banner,
.compact-hero{
  min-height:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:14px 4px 12px!important;
  border-radius:0!important;
  overflow:visible!important;
}
.hero-banner:before,.hero-banner:after{display:none!important;}
.hero-banner .mascot-stage,
.compact-hero .mascot-stage{
  width:82px!important;
  height:82px!important;
  flex:0 0 82px!important;
}
.hero-banner .brand-mascot,
.compact-hero .brand-mascot-calc{
  width:78px!important;
  max-height:80px!important;
  filter:none!important;
}
.hero-copy h1,
.compact-hero .hero-copy h1{
  font-size:30px!important;
  font-weight:850!important;
  line-height:1.05!important;
  letter-spacing:-.055em!important;
  color:var(--ink)!important;
  margin:0 0 5px!important;
}
.brand-q{color:var(--brand2)!important;}
.brand-tagline{
  margin:0!important;
  color:#44504b!important;
  font-size:12px!important;
  font-weight:650!important;
}
.brand-desc{
  margin-top:4px!important;
  color:var(--muted)!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
.brand-desc b,.brand-tagline strong{color:var(--ink)!important;}
.hero-side-panel{align-self:flex-start!important;}
.hero-side-panel .compact-actions{gap:7px!important;}
.hero-side-panel .compact-actions .compact-icon-btn{
  width:38px!important;min-width:38px!important;max-width:38px!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  flex-basis:38px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#52605a!important;
  box-shadow:0 1px 2px rgba(21,39,31,.025)!important;
}
.hero-side-panel .compact-actions .compact-icon-btn svg{width:18px!important;height:18px!important;stroke-width:1.7!important;}
.hero-side-panel .compact-actions .compact-icon-btn:hover{background:var(--soft)!important;color:var(--brand)!important;}

/* Main navigation: compact, calm, modern segmented control */
.app-main-tabs{
  position:sticky!important;
  top:8px!important;
  z-index:20!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border:1px solid rgba(225,231,227,.9)!important;
  border-radius:16px!important;
  padding:4px!important;
  gap:4px!important;
  margin:4px 0 14px!important;
  box-shadow:0 5px 18px rgba(20,42,33,.045)!important;
}
.app-main-tab{
  min-height:42px!important;
  border-radius:12px!important;
  color:#7a8580!important;
  font-weight:750!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}
.app-main-tab.active{
  background:#fff!important;
  color:var(--brand)!important;
  box-shadow:0 1px 5px rgba(20,42,33,.075)!important;
}
.main-tab-icon{
  border:0!important;
  background:transparent!important;
  width:auto!important;height:auto!important;
  font-size:13px!important;
  opacity:.8!important;
}
.app-main-tab.active .main-tab-icon{background:transparent!important;color:inherit!important;}

/* Cards and section hierarchy */
.result-overview,
.panel,
.support-panel,
.history-section-v42{
  border:1px solid var(--line)!important;
  background:var(--card)!important;
  border-radius:18px!important;
  box-shadow:0 4px 16px rgba(20,42,33,.035)!important;
}
.result-overview{padding:18px!important;margin-bottom:12px!important;}
.panel{padding:18px!important;margin-top:12px!important;}
.overview-head{margin-bottom:14px!important;}
.eyebrow,.section-kicker{
  font-size:9.5px!important;
  letter-spacing:.12em!important;
  font-weight:800!important;
  color:#799087!important;
}
h2,.section-head h2{font-size:17px!important;font-weight:820!important;letter-spacing:-.035em!important;}
.status-badge{
  padding:6px 9px!important;
  border:1px solid #dfe8e3!important;
  background:#f5f8f6!important;
  color:#66776f!important;
  font-size:10px!important;
  font-weight:750!important;
}
.core-result-grid{gap:10px!important;}
.core-card{
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  padding:15px!important;
  background:#fafbfa!important;
}
.core-card.primary{
  background:#edf5f1!important;
  color:var(--ink)!important;
  border-color:#d9e8e1!important;
}
.core-card span{font-size:11px!important;color:var(--muted)!important;}
.core-card.primary span,.core-card.primary small{color:#6d8078!important;}
.core-card strong{font-size:26px!important;font-weight:880!important;margin:5px 0 2px!important;letter-spacing:-.055em!important;}
.core-card.primary strong{color:var(--brand)!important;}
.core-card small{font-size:9.5px!important;}
.break-even-row{
  margin-top:10px!important;
  border:0!important;
  background:var(--soft)!important;
  border-radius:13px!important;
  padding:12px 13px!important;
}
.ad-analysis-card{
  margin-top:12px!important;
  border:0!important;
  background:#fafbfa!important;
  border-radius:15px!important;
  padding:14px!important;
}
.roas-compact>div,.ad-meta-grid>div{
  border-color:var(--line)!important;
  background:#fff!important;
  border-radius:12px!important;
}

/* Inputs: fewer borders, stronger focus, consistent radius */
.form-grid{gap:13px 14px!important;}
label{font-size:12px!important;color:#4c5b54!important;font-weight:720!important;}
.input-wrap,.select-wrap,.toggle-wrap{
  border:1px solid #e1e7e3!important;
  border-radius:12px!important;
  background:#fafbfa!important;
  box-shadow:none!important;
}
.input-wrap:focus-within,.select-wrap:focus-within{
  border-color:#8fb4a4!important;
  box-shadow:0 0 0 3px rgba(53,116,95,.09)!important;
  background:#fff!important;
}
.input-wrap input{height:44px!important;font-size:16px!important;font-weight:760!important;}
.select-wrap select{height:44px!important;font-size:13px!important;}
.toggle-wrap{min-height:44px!important;}
.field-help{font-size:10px!important;color:#89938e!important;}
.ad-cost-section{
  border:0!important;
  background:#f7f9f8!important;
  border-radius:14px!important;
  padding:14px!important;
}
.subsection-title{font-size:13px!important;}

/* Section controls */
.step{
  width:25px!important;height:25px!important;
  border-radius:8px!important;
  background:#eef4f0!important;
  color:var(--brand2)!important;
  font-size:10px!important;
}
.text-btn{
  border:1px solid var(--line)!important;
  background:#fff!important;
  border-radius:9px!important;
  padding:7px 10px!important;
  color:#5e6e66!important;
  font-size:11px!important;
  font-weight:760!important;
}
.text-btn:hover{background:var(--soft)!important;color:var(--brand)!important;}
.qty-btn,.sub-action{
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:var(--brand)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* History/support rows */
.history-item,.support-list-row{border-color:#edf0ee!important;}
.cloud-sync-card{
  background:#f5f8f6!important;
  border-color:#e2e9e5!important;
  border-radius:13px!important;
}
.cloud-sync-card button,.auth-primary{background:var(--brand)!important;}

/* Modal polish */
.auth-backdrop,.help-backdrop{background:rgba(13,25,20,.38)!important;backdrop-filter:blur(5px)!important;}
.auth-dialog,.help-dialog{
  border-color:var(--line)!important;
  border-radius:20px!important;
  box-shadow:0 24px 70px rgba(16,31,25,.18)!important;
}

footer{color:#9aa39f!important;padding-top:20px!important;}

@media(max-width:760px){
  .app-shell{padding:10px 11px 42px!important;}
  .compact-hero{
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    gap:9px!important;
    align-items:center!important;
    padding:8px 2px 10px!important;
  }
  .compact-hero .mascot-stage{
    grid-column:1!important;grid-row:1!important;
    width:68px!important;height:68px!important;
  }
  .compact-hero .brand-mascot-calc{width:66px!important;max-height:68px!important;}
  .compact-hero .hero-copy{
    grid-column:2!important;grid-row:1!important;
    padding:0!important;min-width:0!important;
  }
  .compact-hero .hero-copy h1{font-size:27px!important;margin:0 0 4px!important;}
  .compact-hero .brand-tagline{font-size:10px!important;white-space:normal!important;line-height:1.25!important;}
  .compact-hero .brand-desc{display:none!important;}
  .hero-side-panel{
    grid-column:3!important;grid-row:1!important;
    width:auto!important;align-self:start!important;
    min-height:0!important;
  }
  .hero-side-panel .compact-actions{gap:4px!important;}
  .hero-side-panel .compact-actions .compact-icon-btn{
    width:32px!important;min-width:32px!important;max-width:32px!important;
    height:32px!important;min-height:32px!important;max-height:32px!important;
    flex-basis:32px!important;border-radius:10px!important;
  }
  .hero-side-panel .compact-actions .compact-icon-btn svg{width:15px!important;height:15px!important;}
  .app-main-tabs{top:5px!important;margin-bottom:10px!important;border-radius:14px!important;}
  .app-main-tab{min-height:39px!important;font-size:9.5px!important;gap:4px!important;}
  .result-overview,.panel{padding:14px!important;border-radius:16px!important;}
  .core-card{padding:13px!important;}
  .core-card strong{font-size:22px!important;}
  .form-grid{gap:11px!important;}
}

@media(max-width:390px){
  .compact-hero{grid-template-columns:58px minmax(0,1fr) auto!important;gap:7px!important;}
  .compact-hero .mascot-stage{width:56px!important;height:58px!important;}
  .compact-hero .brand-mascot-calc{width:55px!important;max-height:58px!important;}
  .compact-hero .hero-copy h1{font-size:24px!important;}
  .compact-hero .brand-tagline{font-size:9.3px!important;}
  .hero-side-panel .compact-actions .compact-icon-btn{
    width:29px!important;min-width:29px!important;max-width:29px!important;
    height:29px!important;min-height:29px!important;max-height:29px!important;
    flex-basis:29px!important;
  }
}

/* ===== v79 bottom navigation + settings hub ===== */
:root{--bottom-nav-h:72px}
.app-shell{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px)!important}

/* Bottom navigation */
.app-main-tabs{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  z-index:1350!important;
  width:min(560px,calc(100vw - 24px))!important;
  margin:0!important;
  padding:6px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
  border:1px solid rgba(218,226,221,.92)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 14px 40px rgba(18,41,32,.16),0 2px 8px rgba(18,41,32,.06)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
.app-main-tab{
  min-height:54px!important;
  height:auto!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  padding:6px 4px!important;
  font-size:10.5px!important;
  font-weight:800!important;
  color:#7d8883!important;
  transition:background .18s ease,color .18s ease,transform .12s ease!important;
}
.app-main-tab:active{transform:scale(.97)!important}
.app-main-tab.active{
  background:color-mix(in srgb,var(--brand) 10%,#fff)!important;
  color:var(--brand)!important;
  box-shadow:none!important;
}
.main-tab-icon{
  width:23px!important;
  height:23px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
}
.main-tab-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-main-tab.active .main-tab-icon{color:var(--brand)!important}

/* Simplified hero after moving actions into Settings */
.hero-side-panel .compact-actions{display:none!important}
@media(max-width:760px){
  .compact-hero{grid-template-columns:70px minmax(0,1fr)!important}
  .hero-side-panel{display:none!important}
  .compact-hero .hero-copy{grid-column:2!important}
}
@media(max-width:390px){
  .compact-hero{grid-template-columns:58px minmax(0,1fr)!important}
}

/* Settings hub */
.settings-hub-panel{margin-top:0!important}
.settings-hub-head{align-items:center!important}
.settings-version-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:28px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--soft);color:var(--brand);
  font-size:11px;font-weight:850;letter-spacing:.02em
}
.settings-hub-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
.settings-hub-item{
  width:100%;min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;gap:11px;padding:10px 12px;border:1px solid #e6ebe8;border-radius:14px;
  background:#fbfcfb;color:var(--text);text-decoration:none;text-align:left;cursor:pointer;
  font:inherit;transition:background .16s ease,border-color .16s ease,transform .12s ease
}
.settings-hub-item:hover{background:var(--soft);border-color:#dce5e0}
.settings-hub-item:active{transform:scale(.99)}
.settings-hub-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--brand) 9%,#fff);color:var(--brand)}
.settings-hub-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-hub-item>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.settings-hub-item strong{font-size:13.5px;font-weight:830;letter-spacing:-.02em}
.settings-hub-item small{font-size:10.5px;line-height:1.35;color:var(--muted)}
.settings-hub-item>b{font-size:24px;font-weight:400;color:#a6afaa;line-height:1}
#mainTabSettings .support-panel{margin-top:12px!important}

@media(min-width:761px){
  .settings-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-main-tabs{width:min(520px,calc(100vw - 40px))!important}
}
@media(max-width:420px){
  :root{--bottom-nav-h:68px}
  .app-main-tabs{width:calc(100vw - 18px)!important;bottom:calc(7px + env(safe-area-inset-bottom))!important;border-radius:20px!important}
  .app-main-tab{min-height:51px!important;font-size:10px!important}
  .main-tab-icon,.main-tab-icon svg{width:21px!important;height:21px!important}
  .settings-hub-item{min-height:60px;grid-template-columns:38px minmax(0,1fr) 16px;padding:9px 10px}
  .settings-hub-icon{width:36px;height:36px;border-radius:11px}
  .settings-hub-item small{font-size:10px}
}