:root{font-family:"Arial Narrow",Arial,"PingFang SC",sans-serif;color:#161616;background:#d8d5cd;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}header{height:62px;background:#161616;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.mark{font-weight:900;font-size:19px;letter-spacing:.05em}.mark span{font:9px monospace;margin-left:12px;color:#aaa;letter-spacing:.1em}.status{font:9px monospace;color:#aaa}main{display:grid;grid-template-columns:minmax(390px,44%) 1fr;min-height:calc(100vh - 62px)}.editor{background:#f1efe9;padding:42px clamp(24px,4vw,60px);border-right:2px solid #161616}.title>span{font:10px monospace;color:#e94c35}.title h1{font-size:clamp(43px,5vw,72px);text-transform:uppercase;line-height:.83;letter-spacing:-.055em;margin:15px 0 20px}.title p{font:13px/1.7 monospace;max-width:520px;color:#555}form{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;border-top:2px solid #161616;margin-top:32px;padding-top:22px}label>span{display:block;font:9px monospace;letter-spacing:.06em;margin-bottom:7px;color:#555}label input,label select{width:100%;height:43px;border:1px solid #777;background:#fbfaf6;padding:0 11px;outline:none}label input:focus,label select:focus{border:2px solid #161616}.wide{grid-column:1/-1}.colors{display:flex;height:43px;align-items:center;gap:9px}.colors button{width:23px;height:23px;border-radius:50%;border:0;background:var(--c);cursor:pointer;position:relative}.colors button:nth-child(1){background:#e94c35}.colors button:nth-child(2){background:#2467dd}.colors button:nth-child(3){background:#e6b72f}.colors button:nth-child(4){background:#202020}.colors button:nth-child(5){background:#48a56a}.colors button.active:after{content:"";position:absolute;inset:-5px;border:1px solid #161616;border-radius:50%}.duo,.stepper{display:flex;align-items:center}.duo input{min-width:0}.duo i{padding:0 8px;font-style:normal}.duo b{font:9px monospace;margin-left:-24px;position:relative}.stepper button{height:43px;width:40px;border:1px solid #777;background:#ddd8cc}.stepper input{text-align:center;border-left:0;border-right:0}.form-actions{display:flex;gap:10px;margin-top:4px}.form-actions button{flex:1;border:1px solid #161616;background:transparent;padding:13px;cursor:pointer}.form-actions .primary{background:#161616;color:white}.templates{margin-top:30px;border-top:1px solid #999;padding-top:16px}.templates>div:first-child{display:flex;justify-content:space-between}.templates b{font-size:12px}.templates span{font:9px monospace;color:#777}.template-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.template-list button{border:1px solid #aaa;background:#e6e3dc;padding:7px 9px;font-size:11px;cursor:pointer}.template-list button i{color:#e94c35;font-style:normal;margin-left:6px}.template-list p{font:11px monospace;color:#888}.preview-panel{min-width:0;background:#c9c5bb;display:flex;flex-direction:column}.preview-head{height:75px;background:#eeeae1;border-bottom:2px solid #161616;padding:0 25px;display:flex;align-items:center;justify-content:space-between}.preview-head span,.preview-head b{display:block;font:9px monospace}.preview-head b{margin-top:7px}.red{color:#e94c35}.preview-head button{background:#e94c35;color:white;border:0;padding:11px 16px;cursor:pointer}.desk{flex:1;overflow:auto;padding:40px;display:flex;justify-content:center;align-items:flex-start;background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:18px 18px}.sheet{background:#fff;width:min(100%,630px);aspect-ratio:210/297;box-shadow:7px 9px 0 rgba(0,0,0,.18);padding:5.5%;display:grid;align-content:start;grid-template-columns:repeat(2,1fr);gap:9px}.sheet.letter{aspect-ratio:216/279}.label{position:relative;border:1.5px dashed #777;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:58px}.label:after{content:"CUT";position:absolute;right:2px;top:1px;font:5px monospace;color:#999}.tag-side{padding:8px 6px 6px 11px;position:relative;min-width:0}.tag-side+ .tag-side{border-left:1px solid #aaa}.stripe{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--color)}.end{font:6px monospace;color:#777;display:block}.cable-name{font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0}.route{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wrap{font:6px monospace;color:#888;margin-top:4px;letter-spacing:.06em}.key{height:50px;background:#eeeae1;border-top:2px solid #161616;padding:0 25px;display:flex;align-items:center;gap:23px;font:9px monospace}.key i{display:inline-block;margin-right:5px}.dash{width:18px;border-top:1px dashed #555}.arrow{font-style:normal}@media(max-width:850px){main{grid-template-columns:1fr}.editor{border-right:0;border-bottom:2px solid #161616}.desk{padding:22px}.preview-panel{min-height:700px}}@media(max-width:520px){header{padding:0 16px}.status,.mark span{display:none}.editor{padding:30px 18px}form{grid-template-columns:1fr}.wide{grid-column:auto}.form-actions{grid-column:1}.sheet{padding:4%;gap:5px}.label{min-height:47px}.key{gap:10px;flex-wrap:wrap}}
@media print{body{background:white}header,.editor,.preview-head,.key{display:none!important}main,.preview-panel,.desk{display:block;background:white;padding:0}.sheet{box-shadow:none;width:100%;height:auto;aspect-ratio:auto;padding:8mm;gap:3mm}.sheet.a4{min-height:297mm}.sheet.letter{min-height:279mm}@page{margin:0}}
.sheets{width:min(100%,630px);display:grid;gap:28px}.sheets .sheet{width:100%;grid-template-columns:repeat(var(--cols),1fr)}.sheets .label{aspect-ratio:var(--ratio)}
@media print{.sheets{display:block;width:100%}.sheets .sheet{grid-template-columns:repeat(var(--cols),var(--w));page-break-after:always}.sheets .label{width:var(--w);height:var(--h);aspect-ratio:auto}}