@import "https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Spline+Sans:wght@400;500;600;700&display=swap";
:root{--paper:#f3e9d6;--paper-edge:#e8d8b6;--manila:#f9eecf;--ink:#241d14;--ink-soft:#6f6045;--red:#cf3a23;--blue:#2552c9;--string:#b6a079;--shadow:#2e221038;--hole:#cdbf9f;--marker:"Permanent Marker", "Comic Sans MS", cursive;--body:"Spline Sans", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html,body{font-family:var(--body);color:var(--ink);background-color:var(--paper);-webkit-text-size-adjust:100%;background-image:radial-gradient(120% 80% at 50% -10%,#fbf3e1 0%,#0000 55%),repeating-linear-gradient(94deg,#6f60450b 0 2px,#0000 2px 7px),repeating-linear-gradient(2deg,#6f60450a 0 1px,#0000 1px 9px);margin:0;padding:0}.grain{z-index:50;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");position:fixed;inset:0}.brandbar{z-index:20;background:linear-gradient(180deg, var(--paper-edge), #e8d8b600);border-bottom:2px dashed var(--ink);align-items:baseline;gap:10px;padding:14px 18px 10px;display:flex;position:sticky;top:0}.brandbar .logo{font-family:var(--marker);color:var(--ink);text-shadow:2px 2px 0 var(--red);font-size:30px;line-height:1;transform:rotate(-2deg)}.brandbar .logo b{color:var(--red);text-shadow:2px 2px 0 var(--ink)}.brandbar .tagline{letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-size:11px;font-weight:600}.brandbar .logout-btn{cursor:pointer;color:var(--ink-soft);background:0 0;border:none;border-radius:4px;justify-content:center;align-self:center;align-items:center;margin-left:auto;padding:6px;transition:color .12s,background-color .12s,transform 80ms;display:flex}.brandbar .logout-btn:hover{color:var(--red);background-color:#241d140d}.brandbar .logout-btn:active{transform:scale(.92)}.container{max-width:760px;margin:0 auto;padding:22px 18px 110px}h1{font-family:var(--marker);color:var(--ink);margin:6px 0 18px;font-size:clamp(34px,9vw,52px);font-weight:400;transform:rotate(-1.4deg)}h1:after{content:"";background:var(--red);border-radius:6px;width:2.6em;height:7px;margin-top:4px;display:block;transform:rotate(-.6deg)scaleX(.96)}.eyebrow,.section-label{font-family:var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin:0 0 6px;font-size:12px;font-weight:700}.section-label{text-align:left;margin:30px 0 12px}.total{width:max-content;max-width:100%;font-family:var(--marker);color:var(--red);border:4px solid var(--red);border-radius:16px;margin:6px auto 18px;padding:4px 26px 10px;font-size:clamp(46px,15vw,92px);line-height:1;animation:.6s cubic-bezier(.2,1.4,.4,1) both stamp-in;position:relative;transform:rotate(-3deg)}.total:before{content:"";border:2px solid var(--red);opacity:.55;border-radius:10px;position:absolute;inset:5px}@keyframes stamp-in{0%{opacity:0;transform:rotate(10deg)scale(1.7)}55%{opacity:1;transform:rotate(-6deg)scale(.9)}to{transform:rotate(-3deg)scale(1)}}.btn-primary,button.btn-primary,a.btn-primary{width:100%;font-family:var(--marker);letter-spacing:.5px;text-align:center;color:var(--paper);background:var(--ink);box-shadow:5px 5px 0 var(--red);cursor:pointer;border:0;border-radius:5px;padding:16px;font-size:21px;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:block;transform:rotate(-.5deg)}.btn-primary:hover{transform:rotate(-.5deg)translateY(-1px)}.btn-primary:active{box-shadow:0 0 0 var(--red);transform:translate(5px,5px)rotate(-.5deg)}.btn-primary.alt{background:var(--red);box-shadow:5px 5px 0 var(--ink)}input{width:100%;font-family:var(--body);color:var(--ink);background:var(--manila);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);border-radius:5px;padding:14px;font-size:16px}input::placeholder{color:var(--ink-soft)}input:focus{border-color:var(--red);box-shadow:3px 3px 0 var(--red);outline:0}.grid{grid-template-columns:repeat(2,1fr);gap:18px 16px;display:grid}@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}.card{text-align:left;min-height:104px;font-family:var(--body);color:var(--ink);background:var(--manila);border:2px solid var(--ink);clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px);box-shadow:4px 5px 0 var(--shadow);cursor:pointer;transform:rotate(var(--rot,-1.5deg));border-radius:6px;flex-direction:column;align-items:flex-start;gap:6px;padding:30px 16px 18px 30px;transition:transform .12s,box-shadow .12s;animation:.45s both tag-drop;display:flex;position:relative}.grid .card:nth-child(2n){--rot:1.8deg}.grid .card:nth-child(3n){--rot:-2.4deg}.grid .card:first-child{animation-delay:20ms}.grid .card:nth-child(2){animation-delay:60ms}.grid .card:nth-child(3){animation-delay:.1s}.grid .card:nth-child(4){animation-delay:.14s}.grid .card:nth-child(5){animation-delay:.18s}.grid .card:nth-child(n+6){animation-delay:.22s}.card:before{content:"";background:var(--paper);border:2px solid var(--ink);width:13px;height:13px;box-shadow:inset 1px 1px 2px var(--shadow);border-radius:50%;position:absolute;top:8px;left:8px}.card:after{content:"";border:2px solid var(--string);border-bottom:0;border-radius:60% 60% 0 0;width:16px;height:22px;position:absolute;top:-10px;left:13px;transform:rotate(-28deg)}.card:hover{box-shadow:6px 8px 0 var(--shadow);transform:rotate(0)translateY(-3px)}.card:active{box-shadow:1px 1px 0 var(--shadow);transform:rotate(0)translate(3px,3px)}.card>div{font-size:15px;font-weight:600;line-height:1.2}.card>strong{font-family:var(--marker);color:var(--red);margin-top:auto;font-size:23px;font-weight:400}@keyframes tag-drop{0%{opacity:0;transform:translateY(-16px) rotate(var(--rot,-1.5deg))}to{opacity:1;transform:rotate(var(--rot,-1.5deg))}}.row{background:var(--manila);border:2px solid var(--ink);border-left:7px solid var(--red);box-shadow:3px 3px 0 var(--shadow);border-radius:5px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:14px 16px;display:flex}.row small{color:var(--ink-soft);font-size:12px}.row strong{font-family:var(--marker);color:var(--ink);font-size:20px;font-weight:400}.row .sold{color:var(--red);font-family:var(--marker);margin-left:6px}.discount{color:var(--green,#2e7d32);font-weight:700}.check{color:var(--ink-soft);align-items:center;gap:6px;font-size:13px;display:flex}.check input{width:auto}.del{font-family:var(--body);color:var(--red);cursor:pointer;background:0 0;border:0;margin-left:12px;font-size:13px;font-weight:700;text-decoration:underline}.edit-fields{flex-direction:column;flex:1;gap:8px;display:flex}.edit-actions{flex-direction:column;gap:8px;display:flex}.btn-secondary{font-family:var(--marker);color:var(--ink);background:var(--paper);border:2px solid var(--ink);cursor:pointer;border-radius:5px;padding:8px 14px;font-size:15px;transform:rotate(-.5deg)}.btn-secondary:hover{transform:rotate(.5deg)translateY(-1px)}.modal-backdrop{z-index:50;background:#241d148c;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:var(--manila);border:2px solid var(--ink);border-left:7px solid var(--red);width:100%;max-width:360px;box-shadow:7px 7px 0 var(--shadow);border-radius:6px;padding:24px;transform:rotate(-.4deg)}.modal-title{font-family:var(--marker);margin:2px 0 4px;font-weight:400}.modal-input{text-align:center;font-family:var(--marker);margin-top:16px;font-size:28px}.modal-actions{gap:12px;margin-top:16px;display:flex}.modal-actions .btn-primary,.modal-actions .btn-secondary{flex:1}.counts{flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;display:inline-flex}.counts span{background:var(--manila);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}.counts span.hot{color:var(--red);border-color:var(--red)}.error{font-family:var(--marker);color:var(--red);margin:10px 0 0;font-size:17px;transform:rotate(-1deg)}.nav{z-index:30;background:var(--paper-edge);border-top:3px solid var(--ink);display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 14px #2e22101f}.nav a{text-align:center;font-family:var(--marker);color:var(--ink);border-right:2px dashed #241d144d;flex:1;padding:15px 0 17px;font-size:18px;text-decoration:none}.nav a:last-child{border-right:0}.nav a:active{transform:translateY(1px)}.nav a.active{color:var(--red);position:relative}.nav a.active:after{content:"";border:2.5px solid var(--red);clip-path:polygon(0 0,88% 0,88% 18%,100% 18%,100% 100%,0 100%);pointer-events:none;border-radius:48% 52% 50% 50%/60% 56% 44% 40%;width:76%;height:78%;position:absolute;top:50%;left:50%;transform:translate(-50%,-52%)rotate(-3deg)}.login{background:var(--manila);border:3px solid var(--ink);max-width:380px;box-shadow:8px 9px 0 var(--shadow);border-radius:8px;margin:64px auto 0;padding:34px 26px 30px;transform:rotate(-1.2deg)}.login h1{text-align:center;transform:rotate(0)}.login h1:after{margin:6px auto 0}.login .eyebrow{margin-bottom:18px}@media (prefers-reduced-motion:reduce){.total,.card{animation:none}}