*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0:#fff;--bg-1:#fff;--bg-2:#f7f4f2;--bg-3:#ede6e2;--bg-card:#fff;--bg-glass:#ffffffe6;--accent:#20aeab;--accent-2:#188381;--accent-bg:#20aeab14;--accent-glow:#20aeab33;--green-1:#fa824c;--green-2:#f3a467;--green-bg:#fa824c14;--green-glow:#fa824c33;--gold:#c59b6d;--gold-glow:#c59b6d33;--success:#20aeab;--danger:#bd5c5c;--warn:#fa824c;--info:#20aeab;--text-1:#3d251e;--text-2:#5e453e;--text-3:#8a726b;--border:#20aeab40;--border-2:#3d251e14;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--shadow-sm:0 1px 4px #3d251e0f, 0 2px 12px #3d251e0a;--shadow-md:0 4px 24px #3d251e14, 0 1px 4px #3d251e0a;--shadow-lg:0 8px 40px #3d251e1f;--shadow-accent:0 4px 20px var(--accent-glow);--font-sans:"Inter", system-ui, sans-serif;--font-display:"Outfit", "Inter", sans-serif;--header-h:60px;--bottom-h:72px;--safe-bottom:env(safe-area-inset-bottom,0px)}html{-webkit-text-size-adjust:100%;touch-action:manipulation;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:16px}button,input,select,textarea{color:inherit;font-family:inherit}body{font-family:var(--font-sans);background:var(--bg-1);color:var(--text-1);-webkit-font-smoothing:antialiased;max-width:480px;min-height:100dvh;margin:0 auto;position:relative;overflow-x:hidden;box-shadow:0 0 0 1px #3d251e0f,0 4px 40px #3d251e0f}#root{flex-direction:column;min-height:100dvh;display:flex}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#20aeab59;border-radius:99px}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-1);font-weight:700;line-height:1.2}h1{font-size:1.75rem}h2{font-size:1.35rem}h3{font-size:1.1rem}p{color:var(--text-2);line-height:1.6}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";background:#fff0;transition:background .15s;position:absolute;inset:0}.btn:active:after{background:#ffffff1a}.btn-primary{background:linear-gradient(135deg, var(--green-1), var(--green-2));color:#fff;box-shadow:0 4px 14px var(--green-glow)}.btn-primary:hover{background:linear-gradient(135deg, var(--green-2), var(--green-1));box-shadow:0 6px 20px var(--green-glow);transform:translateY(-1px)}.btn-ghost{color:var(--text-2);border:1px solid var(--border-2);box-shadow:var(--shadow-sm);background:#fff}.btn-ghost:hover{border-color:var(--accent-2);color:var(--accent-2);background:var(--accent-bg)}.btn-danger{color:var(--danger);background:#dc262614;border:1px solid #dc262633}.btn-success{color:var(--success);background:#20aeab14;border:1px solid #20aeab33}.btn-gold{background:var(--gold);color:var(--text-1);border:1px solid #38231c26;font-weight:700}.btn-sm{border-radius:var(--radius-sm);padding:8px 16px;font-size:.8rem}.btn-full{width:100%}.btn:disabled{opacity:.45;pointer-events:none}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;font-size:.78rem;font-weight:600}.input{border:1px solid var(--border-2);border-radius:var(--radius-sm);color:var(--text-1);font-size:.95rem;font-family:var(--font-sans);width:100%;box-shadow:var(--shadow-sm);background:#fff;outline:none;padding:14px 16px;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.input::placeholder{color:var(--text-3)}select.input{cursor:pointer}.input-icon-wrap{position:relative}.input-icon-wrap .input{padding-left:44px}.input-icon{color:var(--text-3);pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.checkbox-container{color:var(--text-2);cursor:pointer;border-radius:var(--radius-sm);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:6px 8px;font-size:.82rem;font-weight:500;transition:background-color .15s,color .15s;display:flex}.checkbox-container:hover{background-color:var(--bg-2);color:var(--text-1)}.checkbox-input{appearance:none;border:2px solid var(--border-2);cursor:pointer;background-color:#fff;border-radius:4px;place-content:center;width:18px;height:18px;transition:all .2s;display:inline-grid;position:relative}.checkbox-input:checked{border-color:var(--accent);background-color:var(--accent)}.checkbox-input:before{content:"";clip-path:polygon(14% 44%,0 58%,38% 96%,100% 16%,86% 2%,38% 72%);width:10px;height:10px;transition:transform .12s cubic-bezier(.34,1.56,.64,1);transform:scale(0);box-shadow:inset 1em 1em #fff}.checkbox-input:checked:before{transform:scale(1)}.card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px}.card-glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px)saturate(1.8);backdrop-filter:blur(20px)saturate(1.8);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid #ffffffb3}.app-header{z-index:100;height:var(--header-h);-webkit-backdrop-filter:blur(20px)saturate(1.8);backdrop-filter:blur(20px)saturate(1.8);border-bottom:1px solid var(--border-2);box-shadow:0 1px 0 var(--border-2);background:#ffffffeb;justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:sticky;top:0}.header-logo{font-family:var(--font-display);background:linear-gradient(90deg, var(--accent), var(--green-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:800}.header-actions{align-items:center;gap:8px;display:flex}.bottom-nav{z-index:100;width:100%;max-width:480px;height:calc(var(--bottom-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:blur(20px)saturate(1.8);backdrop-filter:blur(20px)saturate(1.8);border-top:1px solid var(--border-2);box-shadow:0 -1px 0 var(--border-2);background:#fffffff2;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-item{cursor:pointer;color:var(--text-3);-webkit-tap-highlight-color:transparent;border:1px solid #0000;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:4px;margin:6px 4px;padding:10px 8px;font-size:.68rem;font-weight:500;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex}.nav-item.active{color:var(--accent-2);background:var(--accent-bg);border:1px solid var(--accent);box-shadow:0 2px 8px var(--accent-glow);font-weight:700}.nav-item span:first-child{transition:transform .22s}.nav-item.active span:first-child{transform:scale(1.15)}.page{padding:16px 16px calc(var(--bottom-h) + var(--safe-bottom) + 52px);background:var(--bg-1);flex:1;overflow-y:auto}.page-no-nav{padding-bottom:24px}.media-grid{background:var(--bg-2);grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;display:grid}.media-cell{aspect-ratio:1;background:var(--bg-2);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.media-cell img,.media-cell video{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.media-cell:active img,.media-cell:active video{transform:scale(.96)}.media-cell .stock-badge{border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2px 6px;font-size:.6rem;font-weight:700;position:absolute;bottom:4px;left:4px}.stock-badge.oos{color:#fff;background:#ef4444d9}.stock-badge.avail{color:#fff;background:#20aeabd9}.media-cell .media-type-icon{background:#3d251e99;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;top:4px;right:4px}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#3d251e73;flex-direction:column;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-box{border:1px solid var(--border-2);border-radius:var(--radius-lg);width:calc(100% - 32px);max-height:90dvh;box-shadow:var(--shadow-lg);background:#fff;padding:24px;animation:.25s slideUp;overflow-y:auto}.modal-box.full{background:#fff;border-radius:0;width:100%;height:100dvh;max-height:100dvh;padding:0}.chip{border-radius:var(--radius-full);letter-spacing:.02em;align-items:center;gap:5px;padding:5px 12px;font-size:.75rem;font-weight:600;display:inline-flex}.chip-accent{background:var(--accent-bg);color:var(--accent-2);border:1px solid var(--accent)}.chip-gold{color:var(--gold);background:#d977061a;border:1px solid #d9770633}.chip-success{color:var(--success);background:#20aeab1a;border:1px solid #20aeab33}.chip-danger{color:var(--danger);background:#dc26261a;border:1px solid #dc262633}.chip-info{color:var(--text-2);background:#5e453e14;border:1px solid #5e453e2e}.toggle{background:var(--bg-3);border-radius:var(--radius-full);cursor:pointer;border:1px solid var(--border-2);flex-shrink:0;width:46px;height:26px;transition:background .25s;position:relative;box-shadow:inset 0 1px 3px #3d251e1f}.toggle.on{background:var(--success);border-color:var(--success);box-shadow:none}.toggle:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 6px #3d251e4d}.toggle.on:after{transform:translate(20px)}.storage-bar-track{background:var(--bg-2);border-radius:var(--radius-full);border:1px solid var(--border-2);height:6px;overflow:hidden}.storage-bar-fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--accent-2), var(--accent));height:100%;transition:width .6s}.storage-bar-fill.warn{background:linear-gradient(90deg, #d97706, var(--gold))}.storage-bar-fill.danger{background:linear-gradient(90deg, #b91c1c, var(--danger))}.cat-scroll{scrollbar-width:none;-ms-overflow-style:none;gap:8px;padding:0 16px 12px;display:flex;overflow-x:auto}.cat-scroll::-webkit-scrollbar{display:none}.cat-scroll:after{content:"";flex-shrink:0;width:8px}.cat-pill{border-radius:var(--radius-full);cursor:pointer;color:var(--text-2);border:1px solid var(--border-2);box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent;background:#fff;flex-shrink:0;padding:8px 18px;font-size:.82rem;font-weight:600;transition:all .2s}.cat-pill.active{background:linear-gradient(135deg, var(--green-1), var(--green-2));color:#fff;box-shadow:0 4px 12px var(--green-glow);border-color:#0000}.upload-zone{border:2px dashed var(--border-2);border-radius:var(--radius-md);text-align:center;cursor:pointer;background:var(--bg-1);padding:36px 20px;transition:border-color .2s,background .2s}.upload-zone:hover,.upload-zone.drag{border-color:var(--accent-2);background:var(--accent-bg)}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.stat-card{border:1px solid var(--border-2);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;gap:6px;padding:16px;display:flex}.stat-card .stat-val{font-family:var(--font-display);background:linear-gradient(135deg, var(--green-1), var(--green-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.6rem;font-weight:800}.stat-card .stat-label{color:var(--text-3);font-size:.75rem;font-weight:500}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px;font-size:.7rem;font-weight:700}.divider{background:var(--border-2);height:1px;margin:16px 0}.full-overlay{z-index:500;background:#fff;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:none}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.animate-fade{animation:.3s fadeIn}.animate-slide{animation:.3s slideUp}.animate-pulse{animation:2s infinite pulse}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#ebebf0 25%,#f5f5f8 50%,#ebebf0 75%) 0 0/800px 100%;animation:1.4s linear infinite shimmer}.toast-container{top:calc(var(--header-h) + 8px);z-index:999;pointer-events:none;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:448px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:all;align-items:center;gap:10px;padding:12px 16px;font-size:.85rem;font-weight:500;animation:.25s slideUp;display:flex}.toast-success{color:var(--success);box-shadow:var(--shadow-md);background:#fff;border:1px solid #20aeab4d}.toast-error{color:var(--danger);box-shadow:var(--shadow-md);background:#fff;border:1px solid #dc26264d}.toast-info{color:var(--info);box-shadow:var(--shadow-md);background:#fff;border:1px solid #2563eb4d}.toast-warn{color:var(--warn);box-shadow:var(--shadow-md);background:#fff;border:1px solid #d977064d}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.w-full{width:100%}.text-center{text-align:center}.text-sm{font-size:.85rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-3)}.text-accent{color:var(--accent)}.text-gold{color:var(--gold)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.font-bold{font-weight:700}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pointer{cursor:pointer}.no-select{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}