/* css/app.css — WePrintMagic gränssnitt. Färger från loggan: marinblå #0f1f4b, rosa #e5177b, cyan #19a3f0, gul #f7b500. */
:root{--navy:#0f1f4b;--pink:#e5177b;--cyan:#19a3f0;--yellow:#f7b500;--bg:#f4f6fb;--line:#dde3ef;--muted:#6b7590;--ink:#1a2140;--ok:#1b9e5a;--warn:#b7791f;--err:#c0392b}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
h2,h3{margin:0;font-size:15px}h2{font-size:17px}
.top{display:flex;align-items:center;gap:22px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:20px;color:var(--navy);letter-spacing:-.3px}.brand span{color:var(--pink)}.brand em{font-style:normal;font-size:11px;color:var(--muted);font-weight:600;margin-left:8px;background:var(--bg);padding:3px 8px;border-radius:999px}
.menu{display:flex;gap:6px}.menu button{border:0;background:transparent;padding:9px 14px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}.menu button.on{background:var(--navy);color:#fff}.menu button:hover:not(.on){background:var(--bg)}
.toast{margin-left:auto;background:var(--navy);color:#fff;padding:8px 14px;border-radius:10px;font-size:13px}.toast.err{background:var(--err)}
.tab{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:18px;min-height:calc(100vh - 60px)}
.side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;align-self:start;position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto}
.work{min-width:0}
.sh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.item:hover{border-color:var(--cyan)}.item.on{border-color:var(--navy);background:#eef2fb}
.item small{color:var(--muted)}.item .acts{display:flex;gap:4px}
.pane{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:#fff}
.card.pending{border-color:var(--cyan);background:#f0f9ff}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);font-weight:600}
label.chk{flex-direction:row;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
input[type=text],input:not([type]),input[type=number],select,textarea{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);min-width:120px}
input[type=color]{width:44px;height:34px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.btn:hover{background:#1a2f6b}.btn.sm{padding:6px 10px;font-size:13px}.btn.ghost{background:#fff;color:var(--navy)}.btn.ghost:hover{background:var(--bg)}
.btn.danger{background:#fff;color:var(--err);border-color:#f0c4bd}.btn.danger:hover{background:#fff3f1}.btn:disabled{opacity:.5;cursor:default}
.hint{font-size:12.5px;color:var(--muted)}.empty{color:var(--muted);padding:40px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:14px}
.importbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:var(--bg);font-size:13px}
.importbox.bad{border-color:#f0c4bd;background:#fff3f1}.importbox.ok{border-color:#bfe6d0;background:#eefbf3}
.canvaswrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#e9edf5 repeating-conic-gradient(#e9edf5 0 25%,#f3f5f9 0 50%) 0 0/20px 20px;max-height:70vh;padding:16px}
canvas{display:block;background:#fff;box-shadow:0 2px 10px rgba(15,31,75,.15);cursor:crosshair;margin:0 auto}
#dCanvas{cursor:default}
.variants .item{cursor:default}.variants .item b{cursor:pointer}
.tagv{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:#eef2fb;color:var(--navy)}.tagv.warn{background:#fdf1d6;color:var(--warn)}.tagv.ok{background:#e4f6ec;color:var(--ok)}.tagv.err{background:#fde3df;color:var(--err)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.toolbar .sep{width:1px;height:26px;background:var(--line)}
.editor{display:grid;grid-template-columns:1fr 300px;gap:14px}
.props{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;align-self:start}
.props .item{cursor:pointer}
#propFields{display:flex;flex-direction:column;gap:8px}#propFields .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal{position:fixed;inset:0;background:rgba(15,31,75,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modalbox{background:#fff;border-radius:16px;padding:20px;max-width:560px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modalbox h3{margin-bottom:8px}
table.rep{width:100%;border-collapse:collapse;font-size:13px}table.rep th,table.rep td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}table.rep th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.kv div b{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
@media(max-width:1000px){.tab{grid-template-columns:1fr}.side{position:static;max-height:none}.editor{grid-template-columns:1fr}}

.wpm-lang{display:flex;gap:4px;margin-left:auto}.wpm-lang button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;font-weight:700;font-size:12px;cursor:pointer;color:var(--muted)}.wpm-lang button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.toast{margin-left:12px}
.aigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}.aigrid img{width:100%;border-radius:10px;border:2px solid var(--line);cursor:pointer}.aigrid img:hover{border-color:var(--pink)}
textarea{width:100%}
#propFields input:not([type=checkbox]):not([type=color]),#propFields select,#propFields textarea{min-width:0;width:100%;box-sizing:border-box}
#propFields label{min-width:0}
.menu button.adm{margin-left:8px;color:var(--muted)}.menu button.adm.on{color:#fff}