@import url('/fonts/fonts.css');
:root{ --ink:#15161A; --yellow:#FFC219; --yellow-d:#E0A400; --line:#E4E4E7; --paper:#F6F6F4; --mute:#8A8D96; --slate:#52555E; }
*{box-sizing:border-box;}
body{margin:0;font-family:'Manrope',sans-serif;color:var(--ink);background:var(--paper);font-size:14px;}
.hazard{height:8px;background:repeating-linear-gradient(135deg,var(--ink) 0 14px,var(--yellow) 14px 28px);}
.top{background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;}
.top .brand{font-family:'Oswald';font-weight:600;font-size:20px;letter-spacing:.04em;text-transform:uppercase;}
.top .brand b{color:var(--yellow);}
.top .kpno{font-family:'Oswald';color:var(--yellow);font-weight:600;letter-spacing:.05em;}
.top-right{display:flex;align-items:center;gap:16px;}
.cabinet{color:var(--ink);background:var(--yellow);text-decoration:none;font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px;padding:8px 13px;border-radius:7px;white-space:nowrap;}
.cabinet:hover{background:var(--yellow-d);}
.wrap{max-width:1180px;margin:22px auto;padding:0 22px;}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.col{display:flex;flex-direction:column;gap:18px;}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.card h3{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:9px;}
.card h3::before{content:"";width:12px;height:12px;background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%);}
.card h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:14px 0 8px;}
.hint{font-weight:400;font-size:11px;color:var(--mute);text-transform:none;letter-spacing:0;}
.chk-private{flex-direction:row;align-items:center;gap:7px;font-size:12px;color:var(--slate);font-weight:600;margin-bottom:10px;}
.chk-private input{width:auto;}
.req{color:#c0392b;font-weight:700;display:none;}
.req-on .req{display:inline;}
input:disabled{background:var(--paper);color:var(--mute);cursor:not-allowed;}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--slate);margin-bottom:10px;font-weight:600;}
input,select{font-family:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-weight:500;}
input:focus,select:focus{outline:2px solid var(--yellow);border-color:var(--yellow);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.amtcur{display:flex;gap:6px;}
.amtcur input{flex:1;}
.amtcur select{width:80px;}
/* опции */
.optrow{border:1px solid var(--line);border-radius:7px;padding:8px 10px;margin-bottom:8px;}
.optrow .ohead{display:flex;align-items:center;gap:8px;font-weight:600;}
.optrow .obody{display:none;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:8px;align-items:end;}
.optrow.on .obody{display:grid;}
.optrow .obody label{margin:0;font-size:11px;}
.optrow .incl{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;}
.addopt{display:flex;gap:8px;margin-top:6px;}
.addopt input{flex:1;}
.addopt button,.gen{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border:none;border-radius:7px;}
.addopt button{background:var(--ink);color:#fff;padding:9px 14px;}
/* экономика */
.econ{position:sticky;top:14px;}
.econ-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.econ-grid div{background:var(--paper);border-radius:7px;padding:10px 12px;}
.econ-grid span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);}
.econ-grid b{font-family:'Oswald';font-size:20px;}
.price-box{background:var(--ink);color:#fff;border-radius:8px;padding:14px 16px;}
.pb-row{display:flex;justify-content:space-between;font-size:13px;color:#B9BCC4;padding:2px 0;}
.pb-row b{color:#fff;}
.pb-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #33353c;margin-top:8px;padding-top:8px;}
.pb-total span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);}
.pb-total b{font-family:'Oswald';font-size:28px;color:var(--yellow);}
.pb-ref{font-size:11px;color:#9aa;margin-top:5px;text-align:right;}
.amtcur button{background:var(--ink);color:#fff;border:none;border-radius:7px;padding:0 12px;font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.03em;cursor:pointer;white-space:nowrap;}
.breakdown{margin:0 0 10px;}
.breakdown .brow{display:flex;justify-content:space-between;font-size:12px;color:var(--slate);padding:2px 0;}
.breakdown .brow b{color:var(--ink);font-variant-numeric:tabular-nums;}
.separate{margin-top:10px;}
.separate .sep-hd{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--mute);margin:4px 0 4px;}
.separate .srow{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dashed var(--line);}
.gen{background:var(--yellow);color:var(--ink);padding:15px;font-size:16px;width:100%;}
.gen:hover{background:var(--yellow-d);}
.status{font-size:13px;color:var(--slate);min-height:18px;}
.status.err{color:#c0392b;}
.sharebox{margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px;}
.share-hd{font-size:12px;font-weight:600;color:var(--slate);margin-bottom:8px;}
.share-row{display:flex;gap:8px;}
.share-row input{flex:1;min-width:0;font-size:13px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);}
.share-row button{background:var(--ink);color:#fff;border:none;border-radius:7px;padding:0 14px;font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.03em;cursor:pointer;white-space:nowrap;}
.share-hint{font-size:11px;color:var(--mute);margin-top:7px;}
@media(max-width:900px){.cols{grid-template-columns:1fr;}.econ{position:static;}}

/* Телефоны (iPhone 15 Pro Max и уже): без горизонтального скролла и без авто-зума iOS */
@media(max-width:620px){
  html,body{max-width:100%;overflow-x:hidden;}
  .wrap{padding:0 12px;margin:14px auto;}
  .top{padding:12px 14px;flex-wrap:wrap;gap:8px;}
  .top-right{gap:10px;}
  .top .brand{font-size:16px;}
  .top .kpno{font-size:12px;}
  .cabinet{font-size:11px;padding:7px 10px;}
  /* внутренние парные сетки — в одну колонку, чтобы не вылезали за экран */
  .grid2,.econ-grid,.optrow .obody{grid-template-columns:1fr;}
  .grid2>*,.econ-grid>*{min-width:0;}
  /* поля минимум 16px — иначе iOS зумит страницу при тапе в поле */
  input,select,textarea{font-size:16px;}
  select{max-width:100%;}
  .econ-grid b{font-size:18px;}
  .pb-total b{font-size:24px;}
}