/* A faithful, interactive copy of the Stitchline order builder screens. Looks like the dashboard it comes from. */
.app{background:#f0f4f7;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);font:14px/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#162d3d;text-align:left}
.app *{box-sizing:border-box}
.app-bar{background:#fff;border-bottom:1px solid #dfe5eb;padding:14px 20px 0}
.app-title{font:700 20px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0 0 2px;color:#162d3d}
.app-sub{font-size:13px;color:#5a7184;margin:0 0 10px}
.app-tabs{display:flex;gap:20px;flex-wrap:wrap}
.app-tabs span{padding:8px 0;font-size:14px;color:#3b4a58;border-bottom:3px solid transparent}
.app-tabs span.on{color:#116dff;border-bottom-color:#116dff;font-weight:600}
.app-body{padding:18px 20px 22px}
.pcard{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(22,45,61,.12);padding:18px 20px;margin-bottom:14px}
.pcard h5{margin:0 0 4px;font:700 14px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#162d3d}
.small{font-size:12px;color:#5a7184}
.logo-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-prev{width:72px;height:54px;border-radius:4px;background:repeating-conic-gradient(#e8edf2 0 25%,#fff 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden;border:1px solid #dfe5eb}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.logo-pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chipbtn{font:600 13px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#116dff;background:#fff;border:1px solid #cfe0fb;border-radius:99px;padding:5px 12px;cursor:pointer}
.chipbtn:hover{background:#eaf2ff}.chipbtn.on{background:#116dff;color:#fff;border-color:#116dff}
.line{display:grid;grid-template-columns:260px 1fr;gap:22px}
.mk-col{display:flex;flex-direction:column;gap:6px}
.mk-view{position:relative;width:260px;height:260px;background:#f4f6f8;border-radius:8px;overflow:hidden}
.mk-view img.base{width:100%;height:100%;object-fit:contain;display:block}
.mk-logo{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.mk-logo img{object-fit:contain;display:block}
.mk-col label{font-size:11.5px;color:#5a7184;margin-top:2px}
.mk-col input[type=range]{width:260px;accent-color:#116dff;margin:0}
.thumb{width:96px;height:96px;background:#f4f6f8;border-radius:8px;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}
.r1{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.r1.eng{grid-template-columns:1.2fr 1fr 1fr 1fr auto}
.f label,.f .lab{display:block;font-size:12px;color:#5a7184;margin-bottom:3px}
.f select,.f input[type=text],.f input[type=number]{width:100%;height:36px;border:1px solid #c9d4df;border-radius:6px;padding:0 10px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#162d3d;background:#fff}
.f select:focus,.f input:focus{outline:0;border-color:#3899ec;box-shadow:0 0 0 2px #d6e8fb}
.rem{color:#e62214;font-size:13px;padding-bottom:8px;cursor:default;white-space:nowrap}
.sec{border-top:1px solid #edf1f5;margin-top:12px;padding-top:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.chip{width:50px;height:50px;border:1px solid #dfe5eb;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;padding:2px}
.chip img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.chip.on{border:2px solid #116dff;padding:1px}
.sizes{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:4px}
.sizes .f input{height:34px;padding:0 6px;text-align:center}
.checks{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:4px}
.checks label{display:flex;gap:7px;align-items:center;font-size:14px;color:#162d3d;margin:0}
.checks input{width:16px;height:16px;accent-color:#116dff}
.r3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.r4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick{font-size:12px;color:#5a7184;margin-top:4px}.quick a{color:#116dff;cursor:pointer;margin-right:8px;text-decoration:none}.quick a:hover{text-decoration:underline}
.pricebar{background:#f4f7fa;border-radius:6px;padding:10px 12px;margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.pricebar b{font-weight:700}.pricebar .tag{font-size:11.5px;background:#e4eaf0;color:#3b4a58;border-radius:4px;padding:2px 8px;text-transform:uppercase;letter-spacing:.02em}
.pricebar .tag.warn{background:#fdf0d5;color:#8a5a00}
.addrow{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.addrow span{font:600 13px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#116dff;background:#fff;border:1px solid #cfe0fb;border-radius:99px;padding:6px 14px}
.apptip{font-size:13px;color:var(--mute);margin-top:18px;max-width:46em}
@media(max-width:900px){.line{grid-template-columns:1fr}.r1,.r1.eng{grid-template-columns:1fr 1fr}.r4{grid-template-columns:1fr 1fr}.r3{grid-template-columns:1fr}.sizes{grid-template-columns:repeat(4,1fr)}.mk-view,.mk-col input[type=range]{width:100%}.mk-view{height:auto;aspect-ratio:1/1}.app{box-shadow:6px 6px 0 var(--ink)}}

.tiles{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.tile{width:110px;cursor:pointer;text-align:center}
.tile .tileimg{width:110px;height:84px;border:1px solid #dfe5eb;border-radius:8px;background:#fff;display:grid;place-items:center;padding:4px}
.tile img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.tile span{display:block;font-size:12px;color:#162d3d;margin-top:4px;line-height:1.25}
.tile.on .tileimg{border:2px solid #116dff;padding:3px}
.tile .tileimg{overflow:hidden}.tile .tileimg img{width:100%;height:100%;object-fit:cover}
.tile span{min-height:30px}