:root{--bg:#F5F6F8;--card:#fff;--ink:#111827;--mut:#6B7280;--line:#E5E7EB;--acc:#2563EB;--acc-ink:#fff;--ok:#059669;--bad:#DC2626;--warn:#D97706;--r:12px;--sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc);text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.01em}h1{font-size:22px}h2{font-size:17px}h3{font-size:14px}
.mut{color:var(--mut)}.small{font-size:12.5px}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grow{flex:1}.right{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:500;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#F9FAFB;border-color:#D1D5DB}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}.btn.pri:hover{filter:brightness(1.07)}
.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:rgba(0,0,0,.05)}
.btn.danger{color:var(--bad)}.btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
input,select,textarea{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:#fff;width:100%;min-width:0}
textarea{height:auto;min-height:70px;padding:8px 10px;resize:vertical}
input[type=checkbox]{width:16px;height:16px;padding:0}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mut);font-weight:500;min-width:0}
label.f>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.card+.card{margin-top:14px}
.card h2{margin-bottom:12px}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:600;background:#F3F4F6;color:#374151}
.pill.ok{background:#ECFDF5;color:#047857}.pill.warn{background:#FFFBEB;color:#B45309}.pill.acc{background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc)}
/* --- вхід --- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(1000px 500px at 10% -10%,#E0E7FF,transparent),radial-gradient(800px 500px at 110% 110%,#FFEDD5,transparent),var(--bg)}
.login .card{width:100%;max-width:360px;padding:28px}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:18px}
.brandmark img{width:34px;height:34px}
.pin{font-size:22px;letter-spacing:.3em;text-align:center;height:52px}
/* --- шапка --- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .in{max-width:1440px;margin:0 auto;padding:0 16px;height:58px;display:flex;align-items:center;gap:14px}
.firmtag{display:flex;align-items:center;gap:9px;font-weight:600;min-width:0}
.firmtag .mk{width:30px;height:30px;flex:none;display:flex}.firmtag .mk svg{width:100%;height:100%}
.firmtag .wm{font-size:15px;white-space:nowrap}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 11px;border-radius:8px;color:#374151;font-weight:500;white-space:nowrap}
.nav a:hover{background:#F3F4F6}.nav a.on{background:color-mix(in srgb,var(--acc) 10%,#fff);color:var(--acc)}
.wrap{max-width:1440px;margin:0 auto;padding:20px 16px 60px}
.wrap.narrow{max-width:1000px}
.test-banner{background:#FEF3C7;color:#92400E;text-align:center;font-size:12.5px;padding:4px 8px;font-weight:600}
/* --- вибір фірми --- */
.firms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:18px}
.firm{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;cursor:pointer;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:14px;min-height:190px}
.firm:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(16,24,40,.22);border-color:var(--fc)}
.firm .lg{display:flex;align-items:center;gap:12px}.firm .lg .mk{width:46px;height:46px;display:flex}.firm .lg .mk svg{width:100%;height:100%}.firm .lg .wm{font-size:19px}
.firm .nm{font-weight:600}.firm .meta{font-size:12.5px;color:var(--mut);margin-top:auto}
.firm::after{content:'';position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--fc)}
.firm.off{cursor:not-allowed;filter:grayscale(1);opacity:.55}.firm.off:hover{transform:none;box-shadow:var(--sh);border-color:var(--line)}
.firm .soon{position:absolute;right:16px;top:16px}
/* --- редактор --- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.preview{position:sticky;top:76px}
.paper{background:#E5E7EB;border-radius:var(--r);padding:14px;overflow:hidden}
.paper .sheet{width:794px;height:1123px;transform-origin:0 0;box-shadow:0 8px 30px rgba(0,0,0,.18);background:#fff}
.paper iframe{width:794px;height:1123px;border:0;display:block;background:#fff}
.buyer-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#FAFAFB}
.buyer-card b{font-size:15px}
.list{border:1px solid var(--line);border-radius:10px;max-height:300px;overflow:auto;background:#fff}
.list .it{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;align-items:center}
.list .it:last-child{border-bottom:0}.list .it:hover{background:#F9FAFB}
.cands{display:grid;gap:8px;margin-top:10px}
.cand{border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff}
.cand:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 4%,#fff)}
table.t{width:100%;border-collapse:collapse}
table.t th{font-size:12px;color:var(--mut);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t .r{text-align:right;white-space:nowrap}.t .num{font-variant-numeric:tabular-nums}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:#F9FAFB}
table.calc input{height:32px}
table.calc tr.has td{background:color-mix(in srgb,var(--acc) 5%,#fff)}
table.calc .q{width:92px}.calc .p{width:100px}.calc .v{width:78px}
.totals{display:flex;justify-content:flex-end;gap:22px;padding:12px 4px 0;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.totals div{text-align:right}.totals b{font-size:18px;display:block}
.tablewrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.empty{padding:28px;text-align:center;color:var(--mut)}
.spin{width:16px;height:16px;border:2px solid #D1D5DB;border-top-color:var(--acc);border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 10px;font-size:12.5px;cursor:pointer}.chip:hover{border-color:var(--acc)}
/* --- модалка, тост --- */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal .card{width:100%;max-width:620px;max-height:calc(100vh - 32px);overflow:auto}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;background:#111827;color:#fff;padding:10px 16px;border-radius:10px;font-weight:500;transition:.2s;z-index:60;pointer-events:none;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translateX(-50%)}#toast.err{background:var(--bad)}
.stat{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.stat .card{flex:1;min-width:150px;padding:14px 16px;margin:0}.stat b{font-size:20px;display:block}
@media (max-width:1100px){.editor{grid-template-columns:1fr}.preview{position:static}}
@media (max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr 1fr}.top .in{height:auto;flex-wrap:wrap;padding:8px 16px;gap:8px}.nav{order:3;width:100%}.firmtag .wm{display:none}.card{padding:14px}h1{font-size:19px}}
@media (max-width:460px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* --- майстер --- */
.notice{display:flex;align-items:center;gap:10px;border:1px solid #FCD34D;background:#FFFBEB;border-radius:var(--r);padding:10px 14px;margin-bottom:14px}
.steps{display:flex;align-items:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.steps .sep{flex:0 0 22px;height:1px;background:var(--line)}
.st{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px 6px 6px;font-weight:600;color:var(--mut);cursor:pointer}
.st span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#F3F4F6;font-size:12.5px}
.st.on{border-color:var(--acc);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}.st.on span{background:var(--acc);color:#fff}
.st.done{color:var(--ink)}.st.done span{background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc)}
.st:disabled{cursor:default;opacity:.6}
.actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.btn.lg{height:44px;padding:0 22px;font-size:15px;border-radius:11px}
.toolbar{position:sticky;top:66px;z-index:10;margin-bottom:14px}
.wrap.narrow .paper{padding:14px}
.paper .sheet{height:auto}
/* --- дані фірми --- */
.firm-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 22px;border-radius:16px;background:linear-gradient(120deg,var(--fs),#fff 70%);border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:14px;position:relative;overflow:hidden}
.firm-hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fc)}
.firm-hero .lg{display:flex;align-items:center;gap:12px}.firm-hero .lg .mk{display:flex}.firm-hero .lg .mk svg{width:100%;height:100%}.firm-hero .lg .wm{font-size:22px}
.firm-hero .info .nm{font-weight:700;font-size:16px}.chips2{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
h3.sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
h3.sec:first-child{margin-top:0;padding-top:0;border-top:0}
.chip.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,#fff)}
.num{font-variant-numeric:tabular-nums}
@media (max-width:720px){.toolbar{top:0;position:static}.steps .sep{display:none}}
table.calc input.en{height:26px;margin-top:4px;font-size:12px;color:var(--mut);border-style:dashed}

/* --- телефони і планшети --- */
@media (max-width:1024px){.wrap{padding:16px 14px 70px}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.firms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  input,select,textarea{font-size:16px;height:42px}textarea{height:auto}.btn{height:40px}.btn.sm{height:34px}
  .top .in{padding:8px 12px}.top .right .btn.ghost[href]{display:none}
  .firms{grid-template-columns:1fr}.firm{min-height:0;padding:18px}
  .g2,.g3,.g4{grid-template-columns:1fr}.grid label.f[style*="span"]{grid-column:auto!important}
  .steps{gap:6px}.st{padding:4px 10px 4px 4px;font-size:13px}.st span{width:22px;height:22px}
  .actions{position:sticky;bottom:0;z-index:15;margin:16px -14px -70px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .actions .btn.lg{flex:1}.actions>span{display:none}
  .toolbar .row{gap:8px}.toolbar .row>.row{width:100%}.toolbar .row>.row>.btn{flex:1}.toolbar .right{margin-left:0}
  .toolbar label.row input{width:100%!important}
  .firm-hero{padding:16px}.firm-hero .btn{width:100%}
  /* таблиці → картки */
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%!important}
  table.resp thead{display:none}
  table.resp tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  table.resp tr.has td{background:transparent}table.resp tr.has{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 4%,#fff)}
  table.resp td{border:0!important;padding:2px 0!important;text-align:left!important}
  table.resp td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--mut);font-weight:500;margin-bottom:2px}
  table.resp td.c-name,table.resp td.c-wide,table.resp td.c-act{grid-column:1/-1}
  table.resp td.c-name input{min-width:0!important}
  table.resp td.c-sum{font-weight:700;font-size:15px}
  table.resp td.c-rm{position:absolute;right:6px;top:6px;width:auto!important}table.resp tr{position:relative}
  table.resp td.c-name{padding-right:34px!important}
  table.resp td.c-ord{grid-column:1/-1;display:flex!important;gap:4px}
  table.resp td input{width:100%!important}table.resp .c-act .row{justify-content:flex-start!important;flex-wrap:wrap!important}
  table.resp td .q,table.resp td .p{width:100%!important}
  .tablewrap{overflow:visible;margin:0;padding:0}
  .totals{justify-content:space-between;gap:10px}.totals b{font-size:16px}
  .stat .card{min-width:calc(50% - 6px)}
  .modal{padding:0;place-items:end stretch}.modal .card{max-width:none;border-radius:16px 16px 0 0;max-height:92vh}
  h1{font-size:19px}
}