.app-container{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:1rem;max-width:600px;margin:0 auto;background-color:var(--color-eggshell-white);color:var(--color-steel-gray);min-height:100vh;min-height:100dvh}.app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:var(--comic-border)}.app-title{font-size:1.75rem;font-weight:900;color:var(--color-charcoal-black);margin:0}.sync-status{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:700;color:var(--color-slate-gray)}.sync-dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-emerald-green);border:2px solid var(--color-inky-black)}.sync-dot.offline{background-color:var(--color-warm-amber)}.logout-button{justify-self:end;width:36px;height:36px;border-radius:50%;border:var(--comic-border);background:var(--color-pure-white);color:var(--color-charcoal-black);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s ease,box-shadow .15s ease;box-shadow:2px 2px 0 var(--color-inky-black)}.logout-button:hover{background:var(--color-soft-yellow)}.logout-button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--color-inky-black)}.logout-button svg{width:18px;height:18px;stroke-width:2.5}.store-filter{margin-bottom:1.5rem}.store-filter-select{width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:700;font-family:inherit;color:var(--color-charcoal-black);background-color:var(--color-pure-white);border:var(--comic-border);border-radius:var(--border-radius-round-eight);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;box-shadow:4px 4px 0 var(--color-inky-black);transition:transform .1s ease,box-shadow .1s ease}.store-filter-select:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-inky-black)}.store-filter-select option{text-transform:capitalize}.items-grouped{display:flex;flex-direction:column;gap:2rem}.store-section{display:flex;flex-direction:column;gap:.75rem}.store-section-header{font-size:.875rem;font-weight:800;color:var(--color-kvikk-pink);text-transform:uppercase;letter-spacing:.05em;margin:0;padding-left:.25rem}.items-grid{display:flex;flex-direction:column;gap:1.25rem}.item-tile{position:relative;border-radius:var(--border-radius-round-eight);border:var(--comic-border);padding:1.25rem;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:6px 6px 0 var(--color-inky-black);color:var(--color-charcoal-black)}.item-tile:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--color-inky-black)}.item-tile.bought{background-color:#e2e8f0;color:var(--color-slate-gray);cursor:default}.item-tile.bought:active{transform:none;box-shadow:6px 6px 0 var(--color-inky-black)}.item-tile-main{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.item-tile-left{display:flex;align-items:center;gap:1rem;flex:1}.item-name{font-size:1.25rem;font-weight:700;line-height:1.3;margin:0;word-break:break-word}.item-tile.bought .item-name{text-decoration:line-through;opacity:.6}.item-amount-badge{background-color:var(--color-inky-black);color:var(--color-pure-white);padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:800;text-transform:uppercase;white-space:nowrap}.bought-checkbox{width:28px;height:28px;border:var(--comic-border);background-color:var(--color-action-pink);color:var(--color-inky-black);display:flex;align-items:center;justify-content:center;border-radius:4px;flex-shrink:0}.bought-checkbox svg{width:18px;height:18px;stroke-width:3}.item-tile-actions{display:flex;gap:1rem;margin-top:1.5rem;width:100%}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem;border:var(--comic-border);border-radius:8px;box-shadow:4px 4px 0 var(--color-inky-black);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.action-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-inky-black)}.action-btn svg{width:20px;height:20px;color:var(--color-inky-black)}.edit-btn{background-color:var(--color-neutral-white)}.delete-btn{background-color:var(--color-vibrant-red)}.reactivate-btn{background-color:var(--color-emerald-green)}.empty-state{text-align:center;padding:4rem 2rem;color:var(--color-slate-gray)}.empty-state-icon{margin-bottom:1rem;color:var(--color-slate-gray)}.empty-state-icon svg{width:64px;height:64px}.empty-state-text{font-size:1.125rem;font-weight:700;margin:0}.add-item-button{position:fixed;bottom:2rem;right:2rem;width:64px;height:64px;border-radius:50%;background:var(--color-kvikk-pink);color:var(--color-pure-white);border:var(--comic-border);cursor:pointer;box-shadow:6px 6px 0 var(--color-inky-black);transition:transform .15s ease,box-shadow .15s ease;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.add-item-button svg{width:32px;height:32px;stroke-width:3}.add-item-button:hover{background:#e8026a}.add-item-button:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--color-inky-black)}.add-item-dialog{margin:auto;border:var(--comic-border);border-radius:var(--border-radius-round-eight);padding:0;width:min(400px,90vw);box-shadow:8px 8px 0 var(--color-inky-black);background:var(--color-pure-white);color:var(--color-charcoal-black)}.add-item-dialog::backdrop{background:var(--color-shadow-tint);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:var(--comic-border);background:var(--color-warm-amber);border-radius:13px 13px 0 0}.dialog-header h2{margin:0;font-size:1.25rem;font-weight:900;text-transform:uppercase}.dialog-close-button{width:32px;height:32px;border-radius:8px;border:var(--comic-border);background:var(--color-pure-white);color:var(--color-charcoal-black);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:2px 2px 0 var(--color-inky-black);transition:transform .1s ease,box-shadow .1s ease}.dialog-close-button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-inky-black)}.dialog-content{padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem}.form-field{display:flex;flex-direction:column;gap:.5rem}.form-field label{font-size:.875rem;font-weight:800;color:var(--color-charcoal-black);text-transform:uppercase}.form-field input{padding:.875rem 1rem;font-size:1rem;font-weight:700;color:var(--color-charcoal-black);background-color:var(--color-pure-white);border:var(--comic-border);border-radius:8px;outline:none;box-shadow:inset 2px 2px #0000000d}.form-field input:focus{background-color:var(--color-electric-cyan)}.dialog-actions{padding:1.25rem;border-top:var(--comic-border);background:var(--color-eggshell-white);border-radius:0 0 13px 13px}.submit-button{width:100%;padding:1rem;font-size:1.125rem;font-weight:900;color:var(--color-pure-white);background:var(--color-action-pink);border:var(--comic-border);border-radius:8px;cursor:pointer;box-shadow:4px 4px 0 var(--color-inky-black);text-transform:uppercase;transition:transform .1s ease,box-shadow .1s ease}.submit-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-inky-black)}.user-menu-dialog{min-width:280px}.user-menu-dialog .dialog-header{background:var(--color-electric-cyan)}.user-menu-content{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.user-menu-item{display:flex;align-items:center;gap:.75rem;padding:.875rem;border:var(--comic-border);border-radius:8px;background:var(--color-vibrant-red);color:var(--color-charcoal-black);font-size:1rem;font-weight:700;cursor:pointer;text-align:left;box-shadow:2px 2px 0 var(--color-inky-black);transition:transform .1s ease,box-shadow .1s ease}.user-menu-item:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--color-inky-black)}.user-menu-invite{flex-wrap:wrap;cursor:default;box-shadow:none;background:var(--color-eggshell-white);border-style:dashed}.user-menu-invite:active{transform:none}.user-menu-invite-label{flex:1;min-width:0}.user-menu-copy{padding:.5rem .75rem;font-size:.875rem;font-weight:700;border-radius:6px;border:var(--comic-border);background:var(--color-warm-amber);color:var(--color-charcoal-black);cursor:pointer;box-shadow:2px 2px 0 var(--color-inky-black)}.user-menu-copy:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-inky-black)}.login-prompt{text-align:center;padding:4rem 2rem}.login-prompt p{font-size:1.125rem;font-weight:700;color:var(--color-slate-gray);margin-bottom:1.5rem}.login-button{padding:1rem 2rem;font-size:1.125rem;font-weight:900;color:var(--color-pure-white);background:var(--color-kvikk-pink);border:var(--comic-border);border-radius:8px;cursor:pointer;box-shadow:4px 4px 0 var(--color-inky-black);text-transform:uppercase;transition:transform .1s ease,box-shadow .1s ease}.login-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-inky-black)}@media(min-width:480px){.app-container{padding:2rem}.items-grid{gap:1.5rem}.item-tile{padding:1.5rem}.item-name{font-size:1.375rem}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate;min-height:100vh;min-height:100dvh}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-hotpink: #EE086F;--color-yellow: #FFE935;--color-yellow-charming: #FFDE6A;--color-blue: #068BE6;--color-black: #121B2F;--color-white: #FCFCF2;--color-rouge: #F1B8B9;--color-aperol: #FCA2A2;--color-purple: #C593EA;--color-purple-charming: #CB9AEC;--color-orange: #FEAD54;--color-pistachio: #A4E9B8;--color-green: #29AD86;--color-dark-green: #468171;--color-eggshell-white: #F7F7EE;--color-pure-white: #FFFFFF;--color-kvikk-pink: #C60159;--color-deep-teal: #008080;--color-warm-amber: #FDD34D;--color-electric-cyan: #81ECEC;--color-soft-yellow: #FFEAA7;--color-charcoal-black: #1A1A1A;--color-steel-gray: #2D2F31;--color-slate-gray: #6B7280;--color-inky-black: #000000;--color-shadow-tint: rgba(0, 0, 0, .5);--color-tile-rose: #F06292;--color-tile-sky-blue: #4FC3F7;--color-tile-amber: #FFB74D;--color-tile-mint: #81C784;--color-tile-lavender: #BA68C8;--color-tile-coral: #FF8A65;--color-tile-teal: #4DB6AC;--color-tile-gold: #FFD54F;--color-tile-slate-blue: #7986CB;--color-tile-lime: #AED581;--color-tile-orange: #FFAB91;--color-tile-periwinkle: #9575CD;--color-action-pink: #C60159;--color-neutral-white: #FFFFFF;--color-vibrant-red: #FF5252;--color-emerald-green: #00B894;--border-radius-round-eight: 16px;--border-outline-width: 3px;--border-outline-style: solid;--border-outline-color: var(--color-inky-black);--comic-border: var(--border-outline-width) var(--border-outline-style) var(--border-outline-color)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{min-width:375px;min-height:100vh;min-height:100dvh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}