/* E-Proof AI — design system (confirmed cockpit visual, 2026-07-05) */
:root{
  --bg:#EEF2F8; --card:#FFFFFF; --line:#E4EAF2; --line-soft:#EDF1F7;
  --ink:#182130; --muted:#69758A; --muted-2:#8A94A6;
  --blue:#1567F2; --blue-dark:#0F55CC; --blue-soft:#E8F0FE; --blue-ghost:#F3F7FE;
  --green:#17A05A; --green-soft:#E6F6EC;
  --red:#E5484D;
  --r-card:18px; --r-sub:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg);}
body{font-family:Inter,'Segoe UI',system-ui,Arial,sans-serif; color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased;}
.page{max-width:1680px; margin:0 auto; padding:22px 26px 26px;}
svg{display:block;}

/* ================= HEADER ================= */
.hdr{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.brand{display:flex; align-items:center; gap:11px; margin-right:14px;}
.brand .mark{width:40px; height:40px; color:var(--blue);}
.brand .tx{line-height:1.02;}
.brand .tx .a{font-size:27px; font-weight:800; letter-spacing:-.6px;}
.brand .tx .b{font-size:11px; font-weight:600; letter-spacing:3.1px; color:var(--muted); margin-top:2px;}
.hpill{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 20px 11px 13px; box-shadow:var(--shadow);}
.hpill .ic{width:34px; height:34px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.hpill .ic svg{width:17px; height:17px;}
.hpill .tx{line-height:1.3;}
.hpill .tx .k{font-size:12.5px; color:var(--muted); font-weight:500;}
.hpill .tx .v{font-size:15px; font-weight:700;}
.hsp{flex:1;}
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:13px; padding:13px 20px; font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink); box-shadow:var(--shadow); white-space:nowrap;}
.btn svg{width:17px; height:17px;}
.btn.white svg{color:var(--blue);}
.btn.white:hover{border-color:#cdd8ea;}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(21,103,242,.32);}
.btn.primary:hover{background:var(--blue-dark);}
a.btn{text-decoration:none;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* ================= MAIN GRID ================= */
.main{display:grid; grid-template-columns:412px minmax(0,1fr) 330px; gap:20px; align-items:stretch;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow);}

/* ---------- CHAT ---------- */
.chat{display:flex; flex-direction:column; padding:20px 20px 18px;}
.ctitle{display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:700; margin-bottom:14px;}
.ctitle .spark{width:21px; height:21px; color:var(--blue);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.chip{display:inline-flex; align-items:center; gap:5px; background:var(--green-soft); color:#127A45; border-radius:9px; padding:6px 9px; font-size:11.8px; font-weight:600; white-space:nowrap;}
.chip svg{width:13px; height:13px; color:var(--green);}
.msgs{flex:1; display:flex; flex-direction:column; gap:4px; min-height:330px;}
.mrow{display:flex; gap:10px; align-items:flex-start;}
.mrow.user{flex-direction:row-reverse;}
.av{width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}
.bub{max-width:82%; border-radius:14px; padding:12px 15px; font-size:13.8px; line-height:1.55; background:#F1F4F9; color:var(--ink);}
.mrow.user .bub{background:var(--blue-soft);}
.bub ol{margin:8px 0 8px 18px;}
.bub ol li{margin-bottom:4px;}
.tstamp{font-size:11px; color:var(--muted-2); margin:5px 2px 12px 44px;}
.mrow.user + .tstamp{text-align:right; margin:5px 44px 12px 2px;}
.tstamp .ticks{color:var(--blue); letter-spacing:-2px;}
.qrow{display:flex; gap:9px; flex-wrap:wrap; margin:14px 0 0;}
.qrow + .qrow{margin-top:9px;}
.qbtn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; border-radius:11px; padding:10px 15px; font-size:13.2px; font-weight:600; font-family:inherit; cursor:pointer; color:var(--ink);}
.qbtn svg{width:15px; height:15px; color:var(--blue);}
.qbtn:hover{border-color:#cdd8ea; background:var(--blue-ghost);}
.qbtn.qdanger{color:#B4232A;} .qbtn.qdanger svg{color:#DC2626;}
.qbtn.qdanger:hover{border-color:#F3C0C0; background:#FEF2F2;}
.cinput{display:flex; align-items:center; gap:10px; margin-top:14px; border:1px solid var(--line); border-radius:26px; padding:6px 6px 6px 18px; background:#fff;}
.cinput input{flex:1; border:0; outline:0; font-family:inherit; font-size:13.8px; color:var(--ink); background:transparent;}
.cinput input::placeholder{color:var(--muted-2);}
.csend{width:40px; height:40px; border-radius:50%; background:var(--blue); border:0; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.csend svg{width:17px; height:17px;}

/* ---------- CENTER ---------- */
.center{display:flex; flex-direction:column; padding:18px 20px 16px;}
.trow{display:flex; align-items:center; margin-bottom:14px;}
.ptabs{display:flex; gap:8px; margin:0 auto 0 148px;}
.ptab{min-width:44px; text-align:center; border-radius:17px; padding:7px 15px; font-size:13px; font-weight:700; cursor:pointer; border:0; font-family:inherit; background:#EDF1F7; color:var(--muted);}
.ptab.on{background:var(--blue); color:#fff; box-shadow:0 4px 10px rgba(21,103,242,.3);}
.tlinks{margin-left:auto; display:flex; gap:22px;}
.tlinks a{color:var(--blue); font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;}
.tlinks a:hover{text-decoration:underline;}
.frow{display:grid; grid-template-columns:132px 190px 96px 130px minmax(0,1fr); gap:12px; margin-bottom:16px;}
.fg label{display:block; font-size:12px; color:var(--muted); font-weight:500; margin-bottom:6px;}
.fg .ctl{width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; padding:10px 12px; font-size:13.5px; font-weight:600; font-family:inherit; color:var(--ink); display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden;}
.fg .ctl .car{margin-left:auto; color:var(--muted-2); font-size:10px;}
.fg input.ctl{outline:none;}
.cbody{flex:1; display:flex; gap:16px; min-height:472px;}
.stagewrap{flex:1; display:flex; flex-direction:column;}
.stage{flex:1; background:#F2F5F9; border-radius:14px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.shirt{width:min(430px, 86%); position:relative;}

/* Faza C — manual reposition editor (enlarged modal with cm rulers) */
.pemodal{position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px;}
.pemodal[hidden]{display:none;}
.pemodal-inner{background:#fff; border-radius:16px; box-shadow:0 24px 70px rgba(15,23,42,.42); padding:14px 16px 16px; max-width:96vw; max-height:95vh; display:flex; flex-direction:column; overflow:auto;}
.pemodal-head{display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:10px;}
.pemodal-x{border:0; background:#F2F5F9; width:30px; height:30px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--muted);}
.pemodal-x:hover{background:#E7ECF3;}
.pe-size{margin-left:auto; margin-right:10px; font-size:12px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.pe-size input{width:58px; text-align:center; border:1px solid var(--line); border-radius:8px; padding:5px 6px; font-size:13px; font-weight:700; font-family:inherit; color:var(--ink);}
.pe-grid{display:grid; grid-template-columns:24px auto; grid-template-rows:24px auto;}
.pe-corner{grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--muted); cursor:move; touch-action:none; user-select:none;}
.pe-rtop{grid-column:2; grid-row:1; display:block;}
.pe-rleft{grid-column:1; grid-row:2; display:block;}
.pe-canvas{grid-column:2; grid-row:2; position:relative; display:inline-block; line-height:0; background:#F5F7FA; border:1px solid var(--line-soft); justify-self:start; align-self:start;}
.pe-bg{display:block; max-width:min(76vw, 1000px); max-height:70vh; width:auto; height:auto; user-select:none; -webkit-user-drag:none;}
.pe-logo{position:absolute; border:1.6px dashed var(--blue); background:rgba(21,103,242,.03); cursor:move; touch-action:none;}
.pe-logo img{width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none;}
.pe-handle{position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; background:var(--blue); border:2.5px solid #fff; border-radius:50%; box-shadow:0 1px 5px rgba(16,24,40,.35); cursor:nwse-resize; touch-action:none;}
.pe-readout{position:absolute; left:8px; bottom:8px; top:auto; background:rgba(15,23,42,.82); color:#fff; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:8px; z-index:5; line-height:1.3;}
.pe-bar{display:flex; align-items:center; gap:12px; margin-top:14px;}
.pe-hint{font-size:12px; color:var(--muted); margin-right:auto;}
.qbtn.pe-save{background:var(--blue); color:#fff; border-color:var(--blue);}
.qbtn.pe-save:hover{background:#0f56d8;}

/* Logo editor (quality tools) */
.lemodal{position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px;}
.lemodal[hidden]{display:none;}
.lemodal-inner{background:#fff; border-radius:16px; box-shadow:0 24px 70px rgba(15,23,42,.42); padding:14px 16px 16px; width:min(92vw,760px); max-height:92vh; display:flex; flex-direction:column; overflow:auto;}
.le-body{display:flex; gap:16px; margin-top:6px;}
.le-preview{flex:1; min-width:0; min-height:240px; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(45deg,#EEF2F7 25%,transparent 25%),linear-gradient(-45deg,#EEF2F7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#EEF2F7 75%),linear-gradient(-45deg,transparent 75%,#EEF2F7 75%);
  background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0;}
.le-preview img{max-width:100%; max-height:46vh; object-fit:contain;}
.le-side{width:250px; flex:none; display:flex; flex-direction:column;}
@media (max-width:640px){ .le-body{flex-direction:column;} .le-side{width:auto;} .le-preview{min-height:200px;} .le-preview img{max-height:36vh;} }
.le-lbl{font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px;}
#le-colors{border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13px; font-family:inherit; color:var(--ink); margin-bottom:12px;}
#le-colors:focus{outline:none; border-color:var(--blue);}
.le-tools{display:flex; flex-direction:column; gap:8px;}
.le-tools .qbtn{justify-content:center;}
.le-chk{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); cursor:pointer; margin-top:2px;}
.le-chk input{width:14px; height:14px;}
.le-note{font-size:11px; color:var(--muted); line-height:1.5; margin:12px 0 0;}
.le-status{margin-top:10px; font-size:12px; font-weight:600; min-height:16px;}
.le-status.ok{color:#17A05A;} .le-status.err{color:#DC2626;}
.lact.edit:hover{color:var(--blue);}
.le-aihd{margin-top:15px;}
#le-instr{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:12.5px; font-family:inherit; color:var(--ink); resize:vertical; margin-bottom:8px;}
#le-instr:focus{outline:none; border-color:var(--blue);}
.le-aibtns{display:flex; gap:8px;}
.le-aibtns .qbtn{flex:1; justify-content:center;}
.shirt svg.tee{width:100%; height:auto;}
.chestlogo{position:absolute; left:56.5%; top:30.5%; text-align:center; transform:translateX(-50%); line-height:1;}
.chestlogo .l1{font-size:25px; font-weight:800; letter-spacing:.5px; color:#20293A; position:relative; display:inline-block;}
.chestlogo .l1 .sq{position:absolute; right:-9px; top:-2px; width:7px; height:7px; background:var(--blue); border-radius:1.5px;}
.chestlogo .l2{font-size:9.5px; font-weight:600; color:#20293A; margin-top:3px; letter-spacing:.4px;}
.dot{position:absolute; left:58%; top:39.8%; width:11px; height:11px; border-radius:50%; background:var(--blue); border:2.5px solid #fff; box-shadow:0 0 0 1.5px var(--blue), 0 2px 6px rgba(21,103,242,.4); z-index:3;}
.callout{position:absolute; left:47%; top:51%; background:#fff; border:1.4px solid #24304a22; border-radius:13px; box-shadow:0 6px 22px rgba(16,24,40,.12); padding:14px 17px; z-index:4; min-width:170px;}
.callout .t{font-size:14.5px; font-weight:700; margin-bottom:2px;}
.callout .mm{font-size:14.5px; font-weight:700; margin-bottom:9px;}
.callout .k{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:3px;}
.callout .c{font-size:13px; color:var(--ink); font-weight:500; line-height:1.5;}
.snote{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 4px 2px; color:var(--muted); font-size:13.2px; font-weight:500;}
.snote svg{width:15px; height:15px; color:var(--muted-2);}

/* logotip sub-panel */
.logopanel{width:300px; flex:none; border:1px solid var(--line); border-radius:14px; padding:16px 14px 10px; display:flex; flex-direction:column;}
.lptitle{font-size:16px; font-weight:700; margin:0 3px 13px;}
.upl{border:1.6px dashed #C3D4F0; border-radius:12px; background:#FBFCFE; padding:18px 12px; text-align:center; cursor:pointer; margin-bottom:15px;}
.upl .cl{width:34px; height:34px; margin:0 auto 8px; color:var(--blue);}
.upl .a{font-size:13.3px; font-weight:700; color:var(--ink);}
.upl .b{font-size:11.5px; color:var(--muted); margin-top:3px;}
.lplabel{font-size:12.5px; color:var(--muted); font-weight:600; margin:0 3px 9px;}
.loglist{flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:9px; padding-right:6px; max-height:440px;}
.loglist::-webkit-scrollbar{width:5px; height:5px;}
.loglist::-webkit-scrollbar-thumb{background:#D4DCE8; border-radius:3px;}
.logit{position:relative; display:flex; align-items:center; gap:11px; border:1.4px solid var(--line); border-radius:11px; padding:9px 10px; cursor:pointer; background:#fff;}
.logit.sel{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue);}
.logit .th{width:46px; height:38px; border-radius:8px; background:#9AA3B2; color:#fff; font-size:10px; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; flex:none;}
.logit .nm{font-size:13px; font-weight:600; line-height:1.35;}
.logit .ck{position:absolute; right:9px; top:9px; width:19px; height:19px; border-radius:50%; background:var(--blue); color:#fff; display:none; align-items:center; justify-content:center;}
.logit .ck svg{width:10px; height:10px;}
.logit.sel .ck{display:flex;}

/* ---------- RIGHT ---------- */
.rcol{display:flex; flex-direction:column; gap:20px;}
.rcard{padding:20px;}
.rtitle{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.rtitle .ic{width:34px; height:34px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.rtitle .ic svg{width:17px; height:17px;}
.rtitle .t{font-size:16.5px; font-weight:700;}
.conf{margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); color:#127A45; border-radius:9px; padding:6px 10px; font-size:12px; font-weight:700;}
.conf svg{width:13px; height:13px;}
.pitem{display:flex; align-items:center; gap:11px; padding:8px 0; font-size:14px; font-weight:500;}
.pitem .c{width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.pitem .c svg{width:11px; height:11px;}
.ibox{display:flex; gap:10px; background:var(--blue-ghost); border:1px solid #DCE8FB; border-radius:12px; padding:13px 14px; font-size:13.2px; line-height:1.55; color:var(--ink); margin-top:12px; font-weight:500;}
.ibox svg{width:16px; height:16px; color:var(--blue); flex:none; margin-top:2px;}
.srow{display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:500;}
.srow:last-child{border-bottom:0; padding-bottom:2px;}
.srow .ic{width:20px; height:20px; color:var(--muted); flex:none; display:flex; align-items:center; justify-content:center;}
.srow .ic.gdot{color:var(--green);}
.srow .ic.bspin{color:var(--blue);}
.srow .end{margin-left:auto; display:flex; align-items:center; gap:7px;}
.srow .end .ok{color:var(--ink); font-weight:600;}
.srow .end svg{width:17px; height:17px; color:var(--green);}
.srow .end .lnk{color:var(--blue); font-weight:600;}
.srow .end .eur{font-weight:700; font-size:14.5px;}
.srow .end .inf{color:var(--muted-2);}

/* ================= FILES ================= */
.files{margin-top:22px;}
.fhead{display:flex; align-items:center; gap:11px; margin-bottom:13px;}
.fhead .ic{width:21px; height:21px; color:var(--ink);}
.fhead .t{font-size:16.5px; font-weight:700;}
.fhead .dl{margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:13.8px; font-weight:600; text-decoration:none; cursor:pointer;}
.fhead .dl svg{width:16px; height:16px;}
.fhead .dl.off{color:#A6AFBE; cursor:not-allowed; pointer-events:none;}
.motifbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 12px;}
.motifbar .k{font-size:12.5px; color:var(--muted); font-weight:600;}
.mchip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-size:12.5px; font-weight:600; text-decoration:none; max-width:260px;}
.mchip:hover{border-color:#cdd8ea; color:var(--blue);}
.mchip svg{width:13px; height:13px; color:var(--blue); flex:none;}
.mchip.all{border-color:var(--blue); color:var(--blue);}
.frowc{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.fcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 15px; display:flex; gap:13px; align-items:center; min-width:0;}
.fcard .menu{position:absolute; right:11px; top:10px; color:var(--muted-2); font-weight:700; cursor:pointer; font-size:15px; letter-spacing:1px;}
.fth{width:58px; height:58px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#F2F5F9; border:1px solid var(--line-soft);}
.fth svg{width:100%; height:100%;}
.fth.pdf{background:transparent; border:0;}
.fth.svgc{background:transparent; border:0;}
.fmeta{min-width:0; line-height:1.4;}
.fmeta .a{font-size:13.8px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:14px;}
.fmeta .b{font-size:12px; color:var(--muted); margin:2px 0 7px;}
.fst{display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:12.5px; font-weight:600;}
.fst svg{width:14px; height:14px;}
.fcard.pref{border-color:var(--green); box-shadow:0 0 0 1px var(--green), var(--shadow);}
.mkpref{border:0; background:none; padding:0; color:var(--blue); font-size:12px; font-weight:600; cursor:pointer; text-align:left;}
.mkpref:hover{text-decoration:underline;}

@media (max-width:1500px){ .main{grid-template-columns:380px minmax(0,1fr) 312px;} .logopanel{width:282px;} }
@media (max-width:1260px){ .main{grid-template-columns:1fr 1fr;} .rcol{grid-column:1/-1; flex-direction:row;} .rcol .card{flex:1;} .frowc{grid-template-columns:repeat(3,1fr);} }
@media (max-width:860px){ .main{grid-template-columns:1fr;} .rcol{flex-direction:column;} .cbody{flex-direction:column;} .logopanel{width:100%;} .frowc{grid-template-columns:1fr 1fr;} .hdr{flex-wrap:wrap;} }

/* ---------- S2: real-data additions ---------- */
.prodphoto{max-width:96%; max-height:min(74vh, 980px); object-fit:contain; margin:auto; display:block; cursor:zoom-in; filter:drop-shadow(0 16px 30px rgba(15,23,42,.12));}
.files-empty{background:var(--card); border:1.6px dashed #C3D4F0; border-radius:14px; padding:22px; text-align:center; color:var(--muted); font-size:13.5px;}
.logo-empty{border:1.6px dashed var(--line); border-radius:11px; padding:16px 10px; text-align:center; color:var(--muted); font-size:12px; line-height:1.6;}
.lgmeta{font-size:10.5px; color:var(--muted); font-weight:500;}
.srow .end .mut{color:var(--muted); font-weight:600;}

/* ---------- S3 additions ---------- */
a.ptab{text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
.savestate{font-size:10.5px; font-weight:700; margin-left:6px; text-transform:none; letter-spacing:0;}
.dimhint{display:block; margin-top:5px; font-size:11px; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0;}
.dimhint:empty{display:none; margin:0;}
.upl.busy{opacity:.5; pointer-events:none;}
.logit .th{position:relative; overflow:hidden;}
.logit .th img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; border-radius:8px;}
.logit .th .thtxt{font-size:9px;}

/* ---------- S3b: feedback fixes ---------- */
.cntsel{border:0; outline:0; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); background:transparent; cursor:pointer; padding:0; margin-top:1px;}
.lggroup{font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; margin:4px 3px 2px;}
.lggroup.ok{color:#127A45;}
.lggroup.warn{color:#B45309;}
.logit.pending{border-style:dashed;}
.lgapprove{color:var(--blue); font-size:10.5px; font-weight:700; cursor:pointer; text-decoration:none;}
.lgapprove:hover{text-decoration:underline;}
.modal-ovl{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; display:flex; align-items:center; justify-content:center; padding:30px;}
.modal-ovl[hidden]{display:none;}
.modal-box{background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(15,23,42,.35); width:min(980px, 94vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); font-size:16px; font-weight:800;}
.modal-x{border:0; background:#EDF1F7; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--muted);}
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; padding:18px 20px; overflow-y:auto;}
.tpl-item{border:1.4px solid var(--line); border-radius:12px; padding:10px; cursor:pointer; text-align:center; background:#fff;}
.tpl-item:hover{border-color:var(--blue); box-shadow:0 0 0 2px rgba(21,103,242,.12);}
.tpl-item img{width:100%; height:110px; object-fit:contain;}
.tpl-nm{font-size:12px; font-weight:700; margin-top:7px; line-height:1.3;}
.tpl-meta{font-size:10.5px; color:var(--muted); margin-top:2px;}

/* ---------- S3d: position versions ---------- */
.vbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px; padding:11px 4px 2px; border-top:1px solid var(--line-soft); margin-top:10px;}
.vacts{display:flex; gap:9px;}
.vico{width:30px; height:30px; border:0; border-radius:50%; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.vico svg{width:24px; height:24px;}
.vico.vok{color:#17A05A;} .vico.vdel{color:#DC2626;} .vico.vadd{color:#1567F2;} .vico.vpref{color:#17A05A;}
.vico:hover svg{transform:scale(1.12);}
.vrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px 4px 6px;}
.vrow-lbl{font-size:11.5px; font-weight:700; color:var(--muted);}
.vswitch{display:flex; gap:6px; flex-wrap:wrap;}
.vsq{position:relative; width:26px; height:26px; border:0; border-radius:6px; background:#8A94A6; color:#fff; font-weight:800; font-size:12.5px; font-family:inherit; cursor:pointer;}
.vsq:disabled{background:#D4DCE8; color:#fff; cursor:default;}
.vsq.on{background:var(--blue); box-shadow:0 0 0 2.5px #fff, 0 0 0 5px var(--blue), 0 3px 8px rgba(21,103,242,.35); transform:scale(1.12);}
.gcbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 4px 2px;}
.gcbar.busy{opacity:.5; pointer-events:none;}
.gc-lbl{font-size:11.5px; font-weight:700; color:var(--muted);}
.gc-swatches{display:flex; gap:6px; align-items:center;}
.gc-sw{width:24px; height:24px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition:transform .08s;}
.gc-sw:hover{transform:scale(1.14);}
.gc-sw.on{box-shadow:0 0 0 2px var(--blue);}
.gc-orig{display:flex; align-items:center; justify-content:center; background:#fff; color:#94A3B8; font-size:12px; font-weight:800; line-height:1;}
.gc-custom{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--muted); cursor:pointer;}
.gc-custom input[type=color]{width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer;}
.dm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; max-height:62vh; overflow:auto; padding:4px;}
.dm-item{display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:8px; cursor:pointer; font-family:inherit; text-align:center;}
.dm-item:hover{border-color:var(--blue); box-shadow:0 4px 12px rgba(21,103,242,.15);}
.dm-item:disabled{opacity:.5; cursor:default;}
.dm-item img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#F5F7FA;}
.dm-item span{font-size:11.5px; color:var(--ink); line-height:1.25; max-height:2.6em; overflow:hidden;}
.dm-busy{display:block; padding:24px 0; font-size:12.5px; font-weight:700; color:var(--blue);}
.dm-empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:28px; font-size:13px;}
.aiv-body{display:flex; flex-direction:column; gap:12px; padding:4px 2px; min-width:min(88vw,460px);}
.aiv-cmds{display:flex; flex-wrap:wrap; gap:8px;}
.aiv-cmd{border:1px solid #e2d5fb; background:#fbf9ff; color:#7c3aed; border-radius:10px; padding:9px 14px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;}
.aiv-cmd:hover{background:#f3ecff;}
.aiv-cmd:disabled{opacity:.5; cursor:default;}
.aiv-custom{display:flex; gap:8px;}
.aiv-custom input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); outline:none;}
.aiv-send{background:var(--blue); color:#fff; border-color:var(--blue);}
.aiv-send:hover{background:#0f56d8;}
.aiv-hint{font-size:12px; color:var(--muted); line-height:1.4;}
.vsq.vbase{width:auto; padding:0 10px; background:#5B6B85;}
.vsq.vbase.on{background:var(--blue); box-shadow:0 0 0 2.5px #fff, 0 0 0 5px var(--blue); transform:scale(1.06);}
.vbadge{position:absolute; left:12px; top:12px; background:#182130; color:#fff; font-size:10.5px; font-weight:800; border-radius:7px; padding:4px 10px; letter-spacing:.5px; z-index:5;}
.vbadge.pref{background:#17A05A;}

/* ---------- S3e: header project image ---------- */
.hpill.himg{text-decoration:none; color:inherit;}
.hpill.himg:hover{border-color:#c7d2e2;}
.hpill .ic.thumb{background:#fff; border:1px solid var(--line); overflow:hidden; padding:2px;}
.hpill .ic.thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.hpill.himg .v{color:var(--blue); text-decoration:none;}

/* ---------- S6: AI realistic mockup version ---------- */
.aichip{display:inline-flex; align-items:center; gap:7px; border:1px solid #e2d5fb; background:#fbf9ff; color:#7c3aed; border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer;}
.aichip svg{width:14px; height:14px;}
.aichip:hover{background:#f3ecff;}
.aichip:disabled{opacity:.6; cursor:default;}
.vsq.ai{background:#7c3aed;}
.vsq.ai.on{background:#6d28d9; box-shadow:0 0 0 2.5px #fff, 0 0 0 5px #6d28d9, 0 3px 8px rgba(124,58,237,.4); transform:scale(1.12);}
.vbadge.ai{background:#7c3aed;}

/* ---------- S6 fix: chat messages scroll ---------- */
.msgs{min-height:180px; max-height:46vh; overflow-y:auto; overflow-x:hidden; padding-right:4px;}
.msgs::-webkit-scrollbar{width:6px;}
.msgs::-webkit-scrollbar-thumb{background:#D4DCE8; border-radius:3px;}

/* ---------- logo library redesign (approve / use / delete icons) ---------- */
.logit{align-items:flex-start; gap:10px;}
.logit.appr{border-color:#bbe5cc; box-shadow:0 0 0 1px #bbe5cc;}
.logit.pend{border-style:dashed;}
.logit.sel{border-color:var(--blue); box-shadow:0 0 0 1.5px var(--blue);}
.logit .lm{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.logit .nm{font-size:12px; font-weight:700; line-height:1.3; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.logit .meta{font-size:10.5px; color:var(--muted);}
.logit .logcol{margin-top:5px; width:100%; border:1px solid var(--line); border-radius:7px; padding:3px 8px; font-size:10.5px; font-family:inherit; color:var(--ink); background:#fff;}
.logit .logcol::placeholder{color:#B4BECC;}
.logit .logcol:focus{outline:none; border-color:var(--blue);}
.lacts{display:flex; gap:8px; margin-top:6px;}
.lact{width:27px; height:27px; border:0; background:transparent; border-radius:8px; color:#9AA7B8; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:color .12s, background .12s;}
.lact svg{width:17px; height:17px;}
.lact:hover{background:#F2F5F9;}
.lact.appr:hover, .lact.appr.on{color:#17A05A;}
.lact.use:hover, .lact.use.on{color:#17A05A;}
.lact.del:hover{color:#E5484D;}
.lact.arch:hover{color:#B7791F;}
.lact.ren:hover{color:var(--blue);}
.lact.on{background:#EAF7EF;}

/* ---------- logo list readability (bigger preview, file-type chip, 2-line name) ---------- */
.logit{gap:12px; padding:10px 11px;}
.logit .th{width:66px; height:58px; border-radius:9px; background:#EEF2F8;}
.logit .th img{border-radius:8px; padding:2px;}
.logit .th .thtxt{font-size:10px; color:#5A6A80;}
.logit .nm{font-size:12.5px; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
           display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.logit .meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.fmt{display:inline-block; padding:1px 5px; border-radius:5px; font-size:9.5px; font-weight:800;
     letter-spacing:.4px; background:#EEF2F8; color:#5A6A80; border:1px solid #DDE5F0; flex:none;}
.fmt.svg{background:#EAF7EF; color:#127A45; border-color:#BFE6D0;}
.fmt.png{background:#EAF1FE; color:#1F5FD0; border-color:#CFE0FB;}
.fmt.jpg{background:#FFF4E5; color:#B45309; border-color:#F6DFBB;}
.fmt.pdf{background:#FDECEC; color:#C0202E; border-color:#F7CFD2;}

/* Keep the logo panel inside the centre card: the product image has a large intrinsic
   width, so without min-width:0 the flex stage refuses to shrink and pushes the panel
   out of the card (it ended up hidden under the right-hand column). */
.cbody{min-width:0;}
.stagewrap{min-width:0;}
.stage{min-width:0;}

/* logo editor: colour change through ONE dropdown (Pantone / CMYK / picker) — a single mode visible at a time */
.ink-mode{width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:inherit;
          font-size:13px; font-weight:600; color:var(--ink); background:#fff; cursor:pointer;}
.ink-mode:focus{outline:none; border-color:var(--blue);}
.ink-panel{display:flex; flex-direction:column; gap:9px; border:1px solid var(--line-soft); border-radius:11px; padding:11px; background:#FBFCFE;}
.ink-pick{width:44px; height:34px; flex:none; padding:0; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer;}
.ink-pick-lbl{flex:1; font-size:12px; color:var(--muted); font-weight:600;}
.ink-acts{display:flex; gap:8px;}
.ink-acts .qbtn{flex:1; justify-content:center;}
/* display:flex on these would beat the UA [hidden] rule, so hide explicitly */
.ink-panel[hidden], .ink-row[hidden]{display:none;}

/* placement editor: rotation handle + rotation/skew sliders (adapt the print to a tilted product photo) */
.pe-rot{position:absolute; left:50%; top:-30px; margin-left:-9px; width:18px; height:18px; background:var(--green);
        border:2.5px solid #fff; border-radius:50%; box-shadow:0 1px 5px rgba(16,24,40,.35); cursor:grab; touch-action:none;}
.pe-rot::after{content:''; position:absolute; left:50%; top:17px; width:2px; height:13px; margin-left:-1px; background:var(--green);}
.pe-tools{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.pe-tool{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--muted);}
.pe-tool input[type=range]{width:150px; accent-color:var(--blue);}
.pe-tool output{min-width:44px; text-align:right; font-size:12px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}

/* header "Slika stavke": Uredi = add an alternative product photo as a version */
.hpill.himg .ic.thumb{display:block;}
.himg-edit{margin-left:10px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px;
           padding:2px 9px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; vertical-align:2px;}
.himg-edit:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-ghost);}
.alt-inner{width:min(92vw,560px);}
.alt-body{display:flex; flex-direction:column; gap:10px;}
.alt-body input[type=text]{border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:inherit; font-size:13px; color:var(--ink);}
.alt-body input[type=text]:focus{outline:none; border-color:var(--blue);}
.alt-row{display:flex; gap:8px;}
.alt-row .qbtn{flex:1; justify-content:center;}
.alt-paste{border:1.6px dashed #C3D4F0; border-radius:11px; background:#FBFCFE; padding:14px 12px; text-align:center;
           font-size:12.5px; color:var(--muted); cursor:pointer;}
.alt-paste:focus{outline:none; border-color:var(--blue); background:var(--blue-ghost);}
.alt-paste.on{border-color:var(--green); color:#127A45; background:var(--green-soft);}
.alt-prev{border:1px solid var(--line); border-radius:11px; background:#F2F5F9; padding:8px; text-align:center;}
.alt-prev img{max-width:100%; max-height:230px; object-fit:contain; display:inline-block;}

/* logo editor: Pantone / CMYK -> on-screen simulation of the print colour */
.ink-row{display:flex; align-items:center; gap:8px;}
.ink-row + .ink-row{margin-top:7px;}
.ink-pms{flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-family:inherit; font-size:13px; color:var(--ink);}
.ink-pms:focus{outline:none; border-color:var(--blue);}
.ink-swatch{width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:8px;
            background:repeating-conic-gradient(#e9edf3 0% 25%, #fff 0% 50%) 50%/10px 10px;}
.ink-cmyk label{flex:1; display:flex; flex-direction:column; align-items:stretch; gap:3px; font-size:10.5px; font-weight:800; color:var(--muted); text-align:center;}
.ink-cmyk input{width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 7px;
                font-family:inherit; font-size:12.5px; text-align:center; color:var(--ink);}
.ink-cmyk input:focus{outline:none; border-color:var(--blue);}
.ink-out{font-size:11.5px; line-height:1.5; color:var(--muted);}
.ink-out b{color:var(--ink);}
.ink-out:empty{display:none;}

/* placement editor: measure-line calibration + movable ruler zero */
.pe-mbtn{padding:6px 12px; font-size:12px; margin-right:6px;}
.pe-mbar{display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:9px 12px; border:1px solid #F6DFBB; background:#FFF9EE; border-radius:10px; font-size:12.5px; max-width:820px;}
.pe-mbar[hidden]{display:none;}
.pe-mbar label{display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap;}
.pe-mbar input{width:60px; text-align:center; border:1px solid var(--line); border-radius:8px; padding:5px 6px; font-size:13px; font-weight:700; font-family:inherit;}
.pe-mbar .pe-mhint{flex:1; color:var(--muted); font-weight:500;}
.pe-mline{position:absolute; left:0; top:0; pointer-events:none; z-index:6;}
.pe-canvas.measuring{cursor:crosshair;}
.pe-canvas.measuring .pe-logo{pointer-events:none;}
.pe-rtop, .pe-rleft{cursor:pointer; touch-action:none;}

/* logo editor: AI reconstruction block */
.rc-opts{display:flex; flex-direction:column; gap:6px; margin:8px 0;}
#le-rc-text{width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-family:inherit; font-size:13px; color:var(--ink);}
#le-rc-text:focus{outline:none; border-color:var(--blue);}
.le-rc-rights{align-items:flex-start; font-size:10.5px; line-height:1.45; color:var(--muted); padding:7px 9px; border:1px dashed var(--line); border-radius:9px;}
.le-rc-rights input{margin-top:2px; flex:none;}
#le-rc-run{justify-content:center; width:100%;}
#le-rc-run:disabled{opacity:.5; cursor:default;}

/* logo library: add-by-URL field under the dropzone */
.lg-url{width:100%; margin:-7px 0 8px; border:1px solid var(--line); border-radius:9px; padding:8px 10px;
        font-family:inherit; font-size:12px; color:var(--ink);}
.lg-url::placeholder{color:#B4BECC;}
.lg-url:focus{outline:none; border-color:var(--blue);}

/* logo library: dedicated paste zone under the URL field */
.lg-paste-zone{border:1.6px dashed #C3D4F0; border-radius:11px; background:#FBFCFE; padding:11px 10px; text-align:center;
               font-size:11.5px; color:var(--muted); cursor:pointer; margin:-7px 0 15px; line-height:1.5;}
.lg-paste-zone:hover{border-color:var(--blue); background:var(--blue-ghost);}
.lg-paste-zone:focus{outline:none; border-color:var(--blue); background:var(--blue-ghost);}

/* logo editor: rename field */
#le-rename{width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-family:inherit; font-size:13px; color:var(--ink);}
#le-rename:focus{outline:none; border-color:var(--blue);}

/* stage preview: fit to the available box (height or width, whichever binds); click toggles a larger
   fit-to-width view with vertical scroll for close inspection */
.prodphoto.fitw{max-height:none; max-width:96%; cursor:zoom-out;}
.stage.scrolly{overflow:auto; align-items:flex-start; justify-content:center;}

/* tlinks: signature-section toggle for the PDF preview */
.pdfsign{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;}
.pdfsign input{width:13px; height:13px;}

/* the ACTIVE version chip gets a white gap + colour ring and a slight scale — unmistakable (user feedback) */
.vswitch{display:flex; align-items:center; gap:9px; padding:3px 4px;}
.vsq{transition:transform .1s;}

/* Action buttons moved from the header to the top of the right column (user 10.08.2026) */
.actbox{display:flex; flex-direction:column; gap:10px;}
.actbox .actrow{display:flex; gap:10px;}
.actbox .actrow .btn{flex:1; justify-content:center; padding:12px 10px; font-size:13.5px;}
.actbox .btn.wide{width:100%; justify-content:center;}

/* ?panel=logos — ERP grid opens ONLY the logo section (upload/paste/edit), no proof program around it */
.logosonly .hdr, .logosonly .card.chat, .logosonly .rcol, .logosonly .files,
.logosonly .card.center > *:not(.cbody), .logosonly .stagewrap{display:none !important;}
.logosonly .main{grid-template-columns:1fr; max-width:640px; margin:0 auto;}
.logosonly .cbody{flex-direction:column; min-height:0;}
.logosonly .logopanel{width:100%;}

/* extra overlay elements bar (additional logos + coloured text) */
.elembar{margin-top:10px; border-top:1px dashed var(--line); padding-top:8px;}
.elembar-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.elem-add{background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 12px; font:inherit; font-size:12.5px; font-weight:700; color:var(--blue); cursor:pointer;}
.elem-add:hover{border-color:var(--blue);}
.elem-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:5px 0; border-bottom:1px solid #f0f3f7; font-size:12.5px;}
.elem-row:last-child{border-bottom:none;}
.elem-row .et{font-weight:700; color:var(--muted); width:44px; flex:none; font-size:11px; text-transform:uppercase;}
.elem-row input[type=text]{width:150px; padding:4px 7px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px;}
.elem-row input[type=number]{width:62px; padding:4px 5px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px;}
.elem-row input[type=color]{width:30px; height:26px; padding:1px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;}
.elem-row .lbl{font-size:10.5px; color:var(--muted);}
.elem-row .nm{font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.elem-row .del{margin-left:auto; background:none; border:none; color:#c62828; font-size:15px; cursor:pointer; padding:2px 6px;}
.elem-handle{position:absolute; z-index:30; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  background:rgba(21,103,242,.88); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center;
  justify-content:center; cursor:grab; box-shadow:0 2px 8px rgba(15,23,42,.35); border:2px solid #fff; touch-action:none;
  user-select:none;}
.elem-handle:active{cursor:grabbing; background:rgba(21,103,242,1);}
/* logo placed as an EXTRA element (unified printer-button flow) */
.lact.use.onx{background:#e8f5e9;}
.lact.use.onx svg{color:var(--green);}
.elem-handle.main{background:rgba(23,160,90,.9);}
/* extra elements inside the placement editor */
.pe-el{position:absolute; z-index:24; border:1.5px dashed rgba(21,103,242,.8); cursor:move; touch-action:none; box-sizing:border-box;}
.pe-el img{width:100%; height:100%; display:block; pointer-events:none;}
.pe-el.txt{white-space:nowrap; line-height:1.05; padding:1px 3px; width:auto;}
.pe-el-rs{position:absolute; right:-8px; bottom:-8px; width:15px; height:15px; border-radius:50%; background:var(--blue); border:2px solid #fff; cursor:nwse-resize; box-shadow:0 1px 4px rgba(15,23,42,.3);}
.pe-el.sel{border-style:solid; border-color:var(--green); border-width:2px;}
#pe-logo.sel{outline:2px solid var(--green); outline-offset:2px;}
.pe-el-remove{position:absolute; left:12px; bottom:44px; z-index:26; background:#c62828; color:#fff; border:none; border-radius:8px; padding:6px 12px; font:700 12.5px "Segoe UI",Arial; cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.3);}
.pe-el-remove:hover{background:#a51f1f;}
/* elements mini-grid (ERP style) */
.elem-grid{width:100%; border-collapse:collapse; margin-top:4px;}
.elem-grid th{background:var(--ink, #3c4652); background:#3c4652; color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.4px; text-align:left; padding:4px 6px;}
.elem-grid td{padding:3px 4px; border-bottom:1px solid #eef1f6; vertical-align:middle;}
.elem-grid input[type=text]{width:100%; min-width:64px; padding:4px 6px; border:1px solid var(--line); border-radius:5px; font:inherit; font-size:12px;}
.elem-grid input[type=number]{width:52px; padding:4px 3px; border:1px solid var(--line); border-radius:5px; font:inherit; font-size:12px;}
.elem-grid input[type=color]{width:24px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px; vertical-align:middle; margin-left:3px;}
.elem-grid .c-nm{white-space:nowrap;}
.elem-grid .c-nm .e-txt{width:100px; display:inline-block;}
.elem-grid .nm{font-weight:600; font-size:11.5px; max-width:110px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
.elem-grid .del{background:none; border:none; color:#c62828; font-size:14px; cursor:pointer; padding:2px 4px;}
.elem-grid tr.main-print td{background:#f4fbf7;}

/* Position fields moved into the print grid: only the (widened) position name stays on top
   (user 10.08.2026). The inputs remain in the DOM hidden — the grid main row mirrors into them. */
.frow:has(#f-name){grid-template-columns:minmax(0,1fr);}
.frow .fg:has(#f-color), .frow .fg:has(#f-width), .frow .fg:has(#f-method), .frow .fg:has(#f-note){display:none;}