/* Voza Artwork page – Voza's editor look: Inter, Voza black, light grey, blue for actions, 8/4/2px radii. */
@font-face{font-family:Inter;font-weight:400;src:url(/app/fonts/Inter-Regular.otf) format('opentype');font-display:swap}
@font-face{font-family:Inter;font-weight:500;src:url(/app/fonts/Inter-Medium.otf) format('opentype');font-display:swap}
@font-face{font-family:Inter;font-weight:600;src:url(/app/fonts/Inter-SemiBold.otf) format('opentype');font-display:swap}
@font-face{font-family:'Source Sans Pro';font-weight:700;src:url(/app/fonts/SourceSansPro-700.woff2) format('woff2');font-display:swap}
:root{--ink:#1b1212;--muted:#6b6464;--line:#dfe3e6;--grey:#f1f5f7;--white:#fff;--blue:#00bcff;--link:#00b0fc;--info:#cdf0ff;--green:#00c295;--red:#ff4650;--amber:#ffaa00}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--ink);background:var(--grey);min-height:100vh}
h1,h2{font-family:'Source Sans Pro',Inter,sans-serif;font-weight:700;letter-spacing:-.01em}
[hidden]{display:none!important}
i[data-icon]{display:inline-flex;width:14px;height:14px;flex:none}i[data-icon] svg{width:100%;height:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600}
.brand span{border-left:1px solid var(--line);padding-left:10px}
.who{display:flex;align-items:center;gap:8px;min-width:0}.who #me{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--white);border-radius:4px;padding:7px 12px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#b9c0c5}.btn.ghost{border-color:transparent;background:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:#00a8e6}
.btn.big{width:100%;padding:11px 14px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default}
.icon-btn{border:0;background:none;width:32px;height:32px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.icon-btn:hover{background:var(--grey)}

.signin{display:flex;justify-content:center;padding:72px 16px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:28px;width:100%;max-width:420px}
.panel h1{font-size:26px}.panel p{color:var(--muted);line-height:1.5;margin:8px 0 20px}
.panel form{display:flex;flex-direction:column;gap:8px}
label,.label{font-size:13px;font-weight:500}
input,select,textarea{border:1px solid var(--line);border-radius:4px;padding:9px 11px;background:var(--white);width:100%}
textarea{resize:vertical;line-height:1.4}
.panel .btn{margin-top:8px;padding:10px}
.note{margin-top:16px;border-radius:4px;padding:10px 12px;background:var(--info);line-height:1.45;font-size:13px}

.app{max-width:1280px;margin:0 auto;padding:24px}
.intro h1{font-size:28px}.intro p{color:var(--muted);margin-top:4px}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 12px}
.search{position:relative;flex:1 1 260px;max-width:420px}.search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}.search input{padding-left:32px}
#kit{width:auto;max-width:220px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;background:var(--white);overflow:hidden}
.seg button{border:0;background:none;padding:7px 12px;font-size:13px;cursor:pointer;border-right:1px solid var(--line)}.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff}
.seg.wide{display:flex}.seg.wide button{flex:1}
.count{margin-left:auto;color:var(--muted);font-size:13px}
.info{display:flex;gap:8px;align-items:flex-start;background:var(--info);border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.45;margin-bottom:16px}.info i{color:var(--link);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column}
.card:hover{border-color:#b9c0c5;box-shadow:0 6px 18px rgba(27,18,18,.08)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--grey)}
.card .c-body{padding:10px 12px 12px}.card .c-name{font-weight:600;line-height:1.3}.card .c-kit{color:var(--muted);font-size:12px;margin-top:3px}
.empty{grid-column:1/-1;color:var(--muted);padding:40px 0;text-align:center}

.sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--white);border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(27,18,18,.12);z-index:10;display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:19px;line-height:1.25}
.sheet-body{padding:16px 20px 28px;overflow:auto;display:flex;flex-direction:column;gap:14px}
#sheetPic{width:100%;border-radius:4px;aspect-ratio:16/9;object-fit:cover;background:var(--grey)}
.meta{color:var(--muted);font-size:12px;margin-top:-6px}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.hint{color:var(--muted);font-weight:400;font-size:12px;line-height:1.4}
.counter{position:absolute;right:0;top:0;font-size:12px;color:var(--muted)}.counter.over{color:var(--red);font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:34px;height:34px;border-radius:4px;border:1px solid var(--line);cursor:pointer;position:relative}
.swatch.on{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.problems{border:1px solid var(--red);border-left-width:4px;border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.45}.problems ul{margin:6px 0 0 18px}
.results{display:flex;flex-direction:column;gap:10px}
.results .r-note{color:var(--muted);font-size:12px;line-height:1.45}
.result{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:8px}
.result img{width:96px;height:54px;object-fit:contain;background:repeating-conic-gradient(#eef1f3 0 25%,#fff 0 50%) 0 0/12px 12px;border-radius:2px;flex:none}
.result .r-name{font-weight:500}.result .r-size{color:var(--muted);font-size:12px}.result .btn{margin-left:auto}

.modal{position:fixed;inset:0;background:rgba(27,18,18,.45);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:var(--white);border-radius:8px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal-body{padding:16px 20px 22px;display:flex;flex-direction:column;gap:12px;line-height:1.5}
.keybox{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--grey);border:1px solid var(--line);border-radius:4px;padding:10px 12px;word-break:break-all}
.row{display:flex;gap:8px;flex-wrap:wrap}
.warn{border-left:4px solid var(--amber);background:#fff7e6;border-radius:4px;padding:9px 12px;font-size:13px}

#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:30;width:min(420px,calc(100% - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--white);border-left:4px solid var(--green);border-radius:4px;box-shadow:0 10px 28px rgba(27,18,18,.18);padding:12px 14px;font-size:14px}
.toast.warning{border-left-color:var(--red)}.toast.info{border-left-color:var(--blue)}
.toast i{margin-top:2px}.toast.success i{color:var(--green)}.toast.warning i{color:var(--red)}.toast.info i{color:var(--blue)}

@media (max-width:720px){
  .top{padding:10px 16px}.app{padding:16px}.who #me{display:none}
  .count{width:100%;margin-left:0}
  .grid{grid-template-columns:1fr}
}