:root{
  --navy:#1A5276;
  --blue:#2471A3;
  --green:#1E8449;
  --red:#C0392B;
  --gold:#F39C12;
  --light:#D6EAF8;
  --bg:#B8E4F9;
  --panel:#EAF6E0;
  --panel-alt:#FDEBD0;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  background:#0d1b2a;
  display:flex;
  justify-content:center;
  padding:20px;
}

.phone-frame{
  width:400px;
  border-radius:32px;
  background:#111;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.app{
  background:var(--bg);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:80vh;
}

.app-header{
  background:var(--navy);
  color:#fff;
  padding:14px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-upload{width:46px;height:46px;flex-shrink:0;}
.logo-img{width:46px;height:46px;object-fit:contain;border-radius:6px;background:#fff;}
.logo-placeholder{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:1px dashed #fff;border-radius:6px;
  font-size:10px;color:#fff;cursor:pointer;text-align:center;
}
.hidden{display:none;}

.header-text h1{font-size:13px;margin:0;line-height:1.3;}
.header-text .subtitle{font-size:11px;margin:2px 0 0;color:var(--gold);font-weight:bold;}

.calc-table{flex:1;padding:10px 12px;}

.row{
  display:grid;
  grid-template-columns:1fr 16px 90px;
  align-items:center;
  gap:6px;
  padding:7px 6px;
  font-size:11.5px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.input-row{background:var(--panel-alt);}
.output-row{background:var(--panel);}
.output-row.highlight{background:var(--light);font-weight:bold;}

.row label{color:#1a1a2e;}
.eq{text-align:center;color:#555;}

input, select{
  width:100%;
  padding:4px 6px;
  border:1px solid #aaa;
  border-radius:4px;
  font-size:12px;
  text-align:right;
  background:#fff;
  color:#1a1a2e;
}
select{text-align:left;}

input.default-value, select.default-value{
  color:#999;
  font-style:italic;
}

output{
  display:block;
  text-align:right;
  font-weight:bold;
  color:var(--navy);
}

.status-row{
  margin-top:10px;
  text-align:center;
}

.status-banner{
  display:inline-block;
  padding:8px 18px;
  border-radius:6px;
  font-weight:bold;
  font-size:13px;
  letter-spacing:.5px;
}

.status-banner.succeed{background:var(--green);color:#fff;}
.status-banner.fail{background:var(--red);color:#fff;}

.app-footer{
  display:flex;
  gap:10px;
  padding:12px;
  background:var(--navy);
}

.btn-primary, .btn-secondary{
  flex:1;
  padding:10px;
  border:none;
  border-radius:8px;
  font-weight:bold;
  font-size:13px;
  cursor:pointer;
}

.btn-primary{background:var(--gold);color:#1a1a2e;}
.btn-secondary{background:#444;color:#fff;}
.brand-credit{
  text-align:center;
  font-size:10px;
  color:var(--navy);
  background:var(--bg);
  margin:0;
  padding:6px 0 10px;
  letter-spacing:.5px;
}
.error-row{
  grid-template-columns:1fr;
  background:#FDEDEC;
  padding:5px 6px;
}
.error-text{
  color:var(--red);
  font-size:10.5px;
  font-weight:bold;
}
.status-banner.neutral{background:#7F8C8D;color:#fff;}