/* Личный кабинет ЮНИКОМП — вёрстка из макета-смеси (основа Б + таблица и вход из А), 02.10.2026 */
*{box-sizing:border-box}
:root{--red:#e30613;--red-d:#c20a0a;--ink:#1c2028;--mut:#5a616b;--line:#dcdfe5;--line2:#ebedf1;--bg:#f0f1f4;--ok:#1a9b4b;--warn:#d98a00;--blue:#0f6ad8}
html,body{margin:0;padding:0}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
input{font:inherit}
.ic{width:18px;height:18px;flex:0 0 auto;vertical-align:-4px}
.ic.sm{width:15px;height:15px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;white-space:nowrap}
.btn:hover{background:#f7f7f9}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:var(--red-d)}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn:disabled,.btn.dis{opacity:.45;cursor:default;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.4}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-new{background:#eef0f4;color:#4a5261}
.st-invoice{background:#fff4e0;color:#9a5b00}
.st-paid{background:#e6f1ff;color:#0b4fa8}
.st-shipped{background:#efe6ff;color:#5a2bb8}
.st-done{background:#e4f6ea;color:#157a3b}
.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.r{text-align:right}
.ph{width:44px;height:44px;object-fit:contain;border:1px solid var(--line2);border-radius:4px;background:#fff;flex:0 0 auto}
.ph.none{display:flex;align-items:center;justify-content:center;color:#c5c9d0}
.ph.none svg{width:22px;height:22px}
.loading{padding:60px;text-align:center;color:var(--mut)}
.err{background:#fde8ea;color:#9b1c22;padding:10px 12px;border-radius:6px;margin:10px 0;font-size:13px}
.note{background:#fff4e0;color:#7a4a00;padding:10px 12px;border-radius:6px;margin:10px 0;font-size:13px}
/* --- шапка --- */
.bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar .in{max-width:1240px;margin:0 auto;height:60px;display:flex;align-items:center;gap:14px;padding:0 20px}
.bar .logo{height:30px}
.bar .nav{display:flex;gap:4px;margin-left:16px}
.bar .nav a{padding:8px 12px;border-radius:999px;color:var(--ink);font-weight:600;font-size:13.5px}
.bar .nav a.act{background:var(--ink);color:#fff}
.bar .sp{flex:1}
.bar .phone{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;color:var(--ink)}
.bar .orgsw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;font-size:13px;font-weight:600;max-width:320px}
.bar .orgsw i{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;flex:0 0 auto}
.bar .orgsw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .ib{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--ink)}
.page{max-width:1240px;margin:0 auto;padding:22px 20px 40px}
.hello{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.hello h1{margin:0;font-size:26px;letter-spacing:-.02em}
.hello p{margin:3px 0 0;color:var(--mut)}
/* --- плашки --- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;min-width:0}
.kpi .i{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fdecee;color:var(--red);flex:0 0 auto}
.kpi .i.b{background:#e6f1ff;color:var(--blue)}.kpi .i.g{background:#e4f6ea;color:var(--ok)}.kpi .i.y{background:#fff4e0;color:#9a5b00}
.kpi>div{min-width:0}
.kpi b{display:block;font-size:19px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi small{color:var(--mut);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.lay>*{min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer}
.chip.act{background:var(--red);border-color:var(--red);color:#fff}
.chip i{font-style:normal;opacity:.65;font-weight:500}
.chip.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#999)}
.chip.act.dot::before{background:#fff}
.srow{display:flex;gap:10px;margin-bottom:14px}
.srow .inp{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--mut)}
.srow .inp input{border:0;outline:0;font:inherit;width:100%;color:var(--ink);background:transparent}
/* --- таблица заказов (вариант А) --- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);background:#fafafc;white-space:nowrap}
table.t td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr.row{cursor:pointer}
table.t tr.row:hover td{background:#fbf6f6}
table.t td.no a{font-weight:700;color:var(--ink)}
table.t td.no small{display:block;color:var(--mut);font-size:11.5px;font-weight:400}
.thumbs{display:flex;gap:5px;align-items:center}
.thumbs .ph{width:36px;height:36px}
.thumbs .more{width:36px;height:36px;border-radius:4px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mut);font-weight:700}
.docs{display:flex;gap:6px}
.doc{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 7px;border:1px solid var(--line);border-radius:5px;color:var(--ink);background:#fff}
.doc.none{color:#aab0b8;border-style:dashed;pointer-events:none}
.empty{padding:40px 20px;text-align:center;color:var(--mut)}
.pager{display:flex;align-items:center;gap:6px;padding:12px 14px;font-size:13px;color:var(--mut)}
/* --- правая колонка --- */
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.qa h3{margin:0 0 10px;font-size:14px}
.qa a.q,.qa button.q{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);font-weight:600;font-size:13.5px;width:100%;border:0;background:transparent;text-align:left}
.qa a.q:hover,.qa button.q:hover{background:var(--bg)}
.qa .q .i{width:32px;height:32px;border-radius:8px;background:#fdecee;color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.qa .q small{display:block;color:var(--mut);font-weight:400;font-size:12px}
.qa.mg .av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto}
.qa.mg .row{display:flex;gap:12px;align-items:center}
.qa.mg b{display:block}.qa.mg small{color:var(--mut)}
.qa.mg .btns{display:flex;gap:6px;margin-top:10px}
.qa.mg .btns .btn{flex:1;justify-content:center}
.qa.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.qa.dark h3{color:#fff}.qa.dark p{margin:0 0 10px;font-size:13px;color:#c9cdd6}
.qa.dark .btn{background:var(--red);border-color:var(--red);color:#fff;width:100%;justify-content:center}
/* --- страница заказа --- */
.back{display:inline-flex;align-items:center;gap:4px;color:var(--mut);font-size:13px;margin-bottom:10px;cursor:pointer}
.back .ic{transform:rotate(180deg)}
.ohd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.ohd .t{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ohd h1{margin:0;font-size:24px;letter-spacing:-.02em}
.ohd .big{font-size:14px;padding:6px 14px}
.ohd .t .sp{flex:1}
.ohd .meta{color:var(--mut);margin:4px 0 14px;font-size:13px}
.tl{display:flex;gap:6px}
.tl .s{flex:1;padding:10px 12px;border-radius:9px;background:var(--bg);font-size:12.5px;color:var(--mut);position:relative;overflow:hidden}
.tl .s b{display:block;color:var(--ink);font-size:13px}
.tl .s.d{background:#e4f6ea}.tl .s.d b{color:#157a3b}
.tl .s.d::after{content:"✓";position:absolute;right:10px;top:8px;color:#157a3b;font-weight:800}
.tl .s.cur{background:var(--ink);color:#c9cdd6}.tl .s.cur b{color:#fff}
.tl .s.cur::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.lay2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.lay2>*{min-width:0}
.sec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.sec h3{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec h3 .mut{font-weight:400;font-size:13px}
.ln{display:grid;grid-template-columns:56px minmax(0,1fr) 130px 110px;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.ln:first-of-type{border-top:0}
.ln .ph{width:56px;height:56px}
.ln .nm{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ln .nm small{display:block;color:var(--mut);font-weight:400;font-size:12px;margin-top:2px}
.ln .q{color:var(--mut);font-size:13px;text-align:right}
.ln .s{font-weight:800;text-align:right;font-size:15px}
.tots{border-top:2px solid var(--ink);margin-top:6px;padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:4px 24px;font-size:13.5px}
.tots .mut{text-align:right}
.tots .big{font-size:20px;font-weight:800;text-align:right}
.dtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dt{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff}
.dt .i{width:38px;height:38px;border-radius:9px;background:#fdecee;color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dt b{display:block;font-size:13.5px}.dt small{color:var(--mut);font-size:12px}
.dt.none{border-style:dashed;color:#aab0b8;pointer-events:none}.dt.none .i{background:var(--bg);color:#c5c9d0}.dt.none small{color:#aab0b8}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line2)}
.kv:last-child{border:0}.kv span:first-child{color:var(--mut);flex:0 0 auto}.kv span:last-child{text-align:right;overflow-wrap:anywhere}
.repeat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;gap:12px;align-items:center}
.repeat .btn{padding:12px 20px;font-size:14.5px}
.repeat small{color:var(--mut);font-size:12.5px}
/* --- реквизиты (этап 2, просмотр) --- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.tile h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.tile h3 .i{width:30px;height:30px;border-radius:8px;background:#fdecee;color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.acard{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;align-items:flex-start;font-size:13px}
.acard .ic{color:var(--red);margin-top:2px}
/* --- вход (вариант А) --- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(180deg,#fff 0,#f5f5f7 240px)}
.login>div{max-width:100%;width:420px}
.lbox{width:100%;background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:8px;padding:28px 28px 24px;box-shadow:0 10px 30px rgba(28,32,40,.06)}
.lbox .logo{height:34px;margin-bottom:18px}
.lbox h2{margin:0 0 4px;font-size:20px}
.lbox p{margin:0 0 18px;color:var(--mut);font-size:13.5px}
.lbox label{display:block;font-size:12.5px;color:var(--mut);margin:12px 0 5px;font-weight:600}
.lbox .fld{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:15px}
.lbox .fld:focus-within{border-color:var(--red);box-shadow:0 0 0 3px #fde0e2}
.lbox .fld.ok{border-color:#9fd4b1;background:#f3fbf5}
.lbox .fld .ic{color:var(--mut)}
.lbox .fld input{border:0;outline:0;width:100%;font-size:16px;background:transparent;color:var(--ink);min-width:0}
.lbox .fld a{margin-left:auto;font-size:12.5px;white-space:nowrap}
.code{display:flex;gap:8px}
.code input{flex:1;min-width:0;height:52px;border:1px solid var(--line);border-radius:6px;text-align:center;font-size:24px;font-weight:700;outline:0;color:var(--ink);background:#fff;padding:0}
.code input:focus{border-color:var(--red);box-shadow:0 0 0 3px #fde0e2}
.lbox .btn.red{width:100%;justify-content:center;margin-top:18px;padding:12px;font-size:15px}
.lbox .foot{margin-top:14px;font-size:12.5px;color:var(--mut);text-align:center}
.lbox .foot a{display:inline-block;margin:0 6px;cursor:pointer}
.lnote{margin-top:18px;font-size:12.5px;color:var(--mut);text-align:center}
/* --- мобильная --- */
.mbar{display:none}
@media (max-width:760px){
 .bar .in{height:54px;padding:0 12px;gap:8px}
 .bar .logo{height:24px}
 .bar .nav,.bar .phone,.bar .orgsw span{display:none}
 .bar .orgsw{padding:3px;border:0}
 .page{padding:14px 12px 90px}
 .hello h1{font-size:21px}
 .kpis{grid-template-columns:1fr 1fr;gap:8px}
 .kpi{padding:10px 12px;gap:9px}.kpi .i{width:32px;height:32px}.kpi b{font-size:16px}
 .lay,.lay2,.tiles{grid-template-columns:minmax(0,1fr)}
 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 10px;padding:0 12px}
 .chip{flex:0 0 auto}
 table.t.ord thead{display:none}
 table.t.ord tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 12px;border-bottom:1px solid var(--line2)}
 table.t.ord tr.row td{display:block;padding:0;border:0;min-width:0}
 table.t.ord td.no{grid-column:1;grid-row:1}
 table.t.ord td.sum{grid-column:2;grid-row:1;font-weight:700;font-size:15px;text-align:right}
 table.t.ord td.st{grid-column:1;grid-row:2;margin-top:4px}
 table.t.ord td.paid{grid-column:2;grid-row:2;text-align:right;font-size:12px}
 table.t.ord td.th{grid-column:1/3;grid-row:3;margin-top:8px}
 table.t.ord td.dc{grid-column:1;grid-row:4;margin-top:8px}
 table.t.ord td.act{grid-column:2;grid-row:4;margin-top:6px;text-align:right}
 .ohd{padding:14px}.ohd h1{font-size:20px}
 .ohd .t .btn{display:none}
 .tl{flex-direction:column;gap:4px}
 .tl .s{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 30px 9px 12px}
 .tl .s b{display:inline}
 .ln{grid-template-columns:48px minmax(0,1fr);gap:4px 10px}
 .ln .ph{width:48px;height:48px;grid-row:1/3}
 .ln .q{text-align:left;grid-column:2}
 .ln .s{text-align:left;grid-column:2;font-size:14px}
 .dtiles{grid-template-columns:1fr}
 .repeat{flex-wrap:wrap}.repeat .btn{flex:1;justify-content:center}
 .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:6;padding:6px 0 10px}
 .mbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--mut);font-weight:600;min-width:0}
 .mbar a.act{color:var(--red)}
 .mbar .ic{width:22px;height:22px}
 .lbox{padding:22px 18px 18px}
 .srow{flex-wrap:wrap}
}