:root {
  --ice:#f2f6f9; --ice-deep:#dfe8f0; --board:#ffffff; --ink:#101820; --ink-soft:#52606d;
  --line-red:#c8102e; --line-blue:#0033a0; --crease:#bfdcee; --amber:#e8a100;
  --shadow:0 6px 0 rgba(16,24,32,.12); --danger:#b3261e; --ok:#1b7f3b;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ice:#0f1a26; --ice-deep:#182635; --board:#1c2b3b; --ink:#f2f6f9; --ink-soft:#a5b3c2; --line-red:#e02545; --line-blue:#3a6fe0; --crease:#254a63; --amber:#ffb62b; --shadow:0 6px 0 rgba(0,0,0,.35); } }
:root[data-theme="dark"] { --ice:#0f1a26; --ice-deep:#182635; --board:#1c2b3b; --ink:#f2f6f9; --ink-soft:#a5b3c2; --line-red:#e02545; --line-blue:#3a6fe0; --crease:#254a63; --amber:#ffb62b; --shadow:0 6px 0 rgba(0,0,0,.35); }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--ice);color:var(--ink);font-family:"Barlow","Helvetica Neue",Arial,sans-serif;line-height:1.45}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;line-height:1;margin:0 0 .4em}
h1{font-size:40px} h2{font-size:28px} h3{font-size:22px;font-weight:700}
a{color:var(--line-blue)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--board);border-bottom:4px solid var(--line-blue)}
.topbar .brand{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:26px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px}
.topbar .brand span{color:var(--line-red)}
.topbar .brand img{height:32px;width:32px;object-fit:contain;border-radius:6px}
.topbar .spacer{margin-left:auto}
.topbar .who{color:var(--ink-soft);font-size:14px}
.wrap{max-width:960px;margin:0 auto;padding:20px 16px}
.card{background:var(--board);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px}
.muted{color:var(--ink-soft)} .small{font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft);font-weight:600;flex:1 1 180px}
.row label.grow{flex:2 1 260px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{font:inherit;font-size:16px;padding:0 12px;border:2px solid var(--ice-deep);border-radius:10px;background:var(--ice);color:var(--ink);width:100%;height:46px;line-height:42px}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352606d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
select[style*="width:auto"]{width:auto}
textarea{height:auto;min-height:90px;line-height:1.45;padding:10px 12px;resize:vertical}
.row label>span.lbl{display:block}
/* logo dropzone */
.drop{display:flex;align-items:center;gap:16px;border:2px dashed var(--line-blue);border-radius:16px;padding:14px 16px;cursor:pointer;background:var(--ice);transition:background .15s}
.drop:hover,.drop.over{background:var(--ice-deep)}
.drop .prev{width:84px;height:84px;border-radius:14px;object-fit:contain;background:var(--board);border:2px solid var(--ice-deep);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}
.drop .prev img{width:100%;height:100%;object-fit:contain}
.drop .txt{flex:1;min-width:0} .drop .txt strong{display:block;font-size:16px} .drop .txt span{font-size:13px;color:var(--ink-soft)}
.drop input{display:none}
.btn{border:none;border-radius:12px;padding:11px 18px;background:var(--line-blue);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;letter-spacing:.02em;box-shadow:var(--shadow);flex:0 0 auto}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.red{background:var(--line-red)} .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.btn.danger{background:var(--danger)} .btn:disabled{opacity:.5;cursor:default}
.btn.sm{font-size:16px;padding:7px 12px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--ice-deep);font-size:12px;font-weight:600;color:var(--ink-soft)}
.list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.list li{display:flex;align-items:center;gap:10px;background:var(--ice);border-radius:10px;padding:8px 12px;font-size:15px}
.list li .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{border:none;background:transparent;padding:4px 8px;border-radius:6px;font-size:16px}
.ico:hover{background:var(--ice-deep)}
.err{color:var(--danger);font-weight:600} .okmsg{color:var(--ok);font-weight:600}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--ice);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.show{opacity:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:2px solid var(--ice-deep);background:var(--board);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--ice);border-color:var(--ink)}
.num{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;color:var(--line-red);min-width:34px}
.steps{display:flex;gap:8px;margin-bottom:14px;font-size:13px;color:var(--ink-soft);font-weight:600}
.steps span{padding:4px 10px;border-radius:999px;background:var(--ice-deep)} .steps span.on{background:var(--line-blue);color:#fff}
.swatch{width:44px;height:44px;border:2px solid var(--ice-deep);border-radius:10px;padding:0;background:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}