*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%}

:root{
  --navy:#0B1626; --navy2:#142238; --navy3:#1B2C46;
  --gold:#C6A15B; --gold-l:#E8D5AC;
  --txt:#E7ECF3; --muted:#94A3B8;
  --green:#4ADE80; --red:#F87171; --amber:#FBBF24;
  --safe-b:env(safe-area-inset-bottom,0px);
}

html{overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--navy); color:var(--txt); line-height:1.5; font-size:16px;
  padding-bottom:calc(72px + var(--safe-b));
  overflow-x:hidden; width:100%;
}

/* ── шапка ── */
.top{
  background:linear-gradient(155deg,#0B1626,#142238 60%,#1c2f4d);
  border-bottom:2px solid var(--gold);
  padding:14px 16px calc(12px + env(safe-area-inset-top,0px));
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  position:sticky; top:0; z-index:20;
}
.brand{font-weight:800;font-size:1.05rem;letter-spacing:.3px}
.top .sub{font-size:.76rem;color:var(--muted);margin-top:2px}

main{padding:12px 12px 0;max-width:760px;margin:0 auto}

/* ── вкладки ── */
.tab{display:none}
.tab.active{display:block}

.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--navy2);border-top:1px solid rgba(198,161,91,.3);
  padding-bottom:var(--safe-b);
}
.tabs button{
  background:none;border:none;color:var(--muted);min-width:0;
  font-size:.74rem;font-weight:600;padding:12px 2px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}
.tabs button.active{color:var(--gold-l);box-shadow:inset 0 2px 0 var(--gold)}

/* ── карточки ── */
.card{
  background:var(--navy2);border:1px solid rgba(198,161,91,.2);
  border-radius:14px;padding:14px;margin-bottom:12px;
}
.lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;
     color:var(--muted);margin:8px 0 4px;font-weight:600}
.card > .lbl:first-child{margin-top:0}

input,select{
  width:100%;max-width:100%;min-width:0;
  background:var(--navy3);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:11px 12px;color:#fff;font-size:1rem;
  font-family:inherit;-webkit-appearance:none;
}
input:focus,select:focus{outline:none;border-color:var(--gold)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row > div{min-width:0}

.btn{
  width:100%;margin-top:10px;padding:13px;border-radius:11px;border:1px solid rgba(198,161,91,.4);
  background:var(--navy3);color:var(--gold-l);font-weight:700;font-size:.95rem;
  cursor:pointer;font-family:inherit;
}
.btn.primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn:active{opacity:.8}

.hint{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.45}
.hint code{background:var(--navy3);padding:2px 5px;border-radius:5px;font-size:.72rem;
           display:inline-block;margin-top:3px;word-break:break-all}

/* ── результат расчёта ── */
.res{background:var(--navy2);border:1px solid rgba(198,161,91,.35);
     border-radius:14px;padding:16px;margin-bottom:12px}
.res .big{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.res .box{background:var(--navy3);border-radius:11px;padding:12px;text-align:center}
.res .box .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.res .box .v{font-size:1.4rem;font-weight:800;margin-top:3px}
.res .box.floor .v{color:var(--amber)}
.res .box.target .v{color:var(--green)}
.res .box.ceil .v{color:var(--gold-l)}

table{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:6px}
td{padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
td:last-child{text-align:right;font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:none}
td.plus{color:var(--green)} td.minus{color:var(--red)}

.msg{border-radius:10px;padding:11px 13px;margin-top:10px;font-size:.86rem}
.msg.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35)}
.msg.warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35)}
.msg.bad{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35)}

/* ── переключатель схемы ── */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.seg button{
  background:var(--navy3);border:1px solid rgba(198,161,91,.28);color:var(--muted);
  border-radius:10px;padding:10px 4px;font-size:.74rem;font-weight:700;
  cursor:pointer;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.seg button.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}

.big4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.big4 .b{background:var(--navy3);border-radius:10px;padding:10px 12px}
.big4 .b .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.big4 .b .v{font-size:1.25rem;font-weight:800;margin-top:2px}
.big4 .b.fbo .v{color:var(--gold-l)}
.big4 .b.fbs .v{color:var(--green)}
.big4 .b.way .v{color:var(--amber)}

/* ── карточка товара в сводке ── */
.ov{border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px;margin-bottom:9px;background:var(--navy3)}
.ov summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;
            background:none;padding:0;font-weight:600}
.ov summary::-webkit-details-marker{display:none}
.ov summary::after{content:"▾";margin-left:auto;color:var(--gold);font-size:.8rem}
.ov[open] summary::after{transform:rotate(180deg)}
.ov .t{flex:1;min-width:0}
.ov .t b{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov .t span{font-size:.7rem;color:var(--muted)}
.ov .nums{display:flex;gap:6px;flex-shrink:0}
.ov .n{font-size:.68rem;font-weight:800;padding:3px 7px;border-radius:7px;white-space:nowrap}
.ov .n.fbs{background:rgba(74,222,128,.16);color:var(--green)}
.ov .n.fbo{background:rgba(198,161,91,.18);color:var(--gold-l)}
.ov .n.way{background:rgba(251,191,36,.15);color:var(--amber)}
.ov .where{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
.ov .where .h{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:7px 0 3px}
.ov .where .r{display:flex;justify-content:space-between;padding:3px 0;color:#CBD5E1}
.ov .where .r b{color:#fff}
.ov .where .ri{display:flex;gap:10px;align-items:flex-start;padding:7px 0;
               border-bottom:1px solid rgba(255,255,255,.06)}
.ov .where .ri:last-child{border-bottom:none}
.ov .where .rt{flex:1;min-width:0}
.ov .where .rt b{display:block;font-size:.84rem;color:#fff;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
.ov .where .rt span{display:block;font-size:.74rem;color:var(--muted);
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov .where .rt code{display:block;font-size:.7rem;color:var(--gold-l);
                    font-family:'Consolas','Courier New',monospace;letter-spacing:.3px}
.ov .where .rq{flex:0 0 auto;font-weight:800;font-size:1rem;color:#fff;
               background:rgba(255,255,255,.06);border-radius:8px;padding:5px 11px}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg.four{grid-template-columns:repeat(4,1fr)}
.seg.four button{font-size:.68rem;padding:10px 2px}

/* ── списки ── */
.list{margin-top:8px}
.list.small{font-size:.78rem}
.item{display:flex;gap:10px;align-items:center;padding:9px 0;
      border-bottom:1px solid rgba(255,255,255,.07)}
.item:last-child{border-bottom:none}
.item .name{flex:1;min-width:0}
.item .name b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .name span{font-size:.72rem;color:var(--muted)}
.item input{width:88px;text-align:center;padding:8px}
.tag{font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap}
.tag.ok{background:rgba(74,222,128,.16);color:var(--green)}
.tag.no{background:rgba(248,113,113,.16);color:var(--red)}

.whstat{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.whstat div{background:rgba(255,255,255,.05);border-radius:8px;padding:7px 10px}
.whstat span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.whstat b{font-size:.98rem;color:#fff}
#wh-picker{margin-bottom:10px}

.facts{background:var(--navy3);border:1px solid rgba(198,161,91,.25);border-radius:11px;padding:12px;margin-top:10px}
.facts .fh{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}
.facts .fr{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.86rem;
           border-bottom:1px solid rgba(255,255,255,.06)}
.facts .fr:last-of-type{border-bottom:none}
.facts .fr b{color:var(--gold-l);white-space:nowrap}

.seg.five{grid-template-columns:repeat(5,1fr)}
.seg.five button{font-size:.62rem;padding:9px 1px}
.bar{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.78rem}
.bar span{flex:0 0 44px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar i{height:16px;background:linear-gradient(90deg,var(--gold),var(--gold-l));
       border-radius:4px;min-width:2px;display:block}
.bar b{flex:0 0 42px;text-align:right;font-variant-numeric:tabular-nums}

.seg.wrap{display:flex;flex-wrap:wrap;gap:6px}
.seg.wrap button{flex:1 1 30%;font-size:.68rem;padding:9px 4px}

.period{font-size:.74rem;color:var(--gold-l);background:rgba(198,161,91,.10);
        border:1px solid rgba(198,161,91,.25);border-radius:8px;
        padding:6px 10px;margin-bottom:10px;font-weight:600}