:root{--bg:#f3f0d7;--card:#ffffff94;--border:#0000001f;--text:#0f2d1d;--muted:#0f2d1dad;--green:#133b27;--green2:#0d2b1c;--heart:#c62828}*{box-sizing:border-box}html,body{background:radial-gradient(circle at top,#f7f2d7,var(--bg));color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}html{min-height:100%}body{min-height:100dvh;overflow-x:hidden}.appShell{min-height:100dvh;padding:max(8px,env(safe-area-inset-top))0 max(8px,env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}.phone{background:#ffffff26;border:1px solid #00000026;border-radius:24px;flex-direction:column;width:390px;max-width:calc(100vw - 16px);height:min(760px,100dvh - 16px);min-height:min(760px,100dvh - 16px);display:flex;position:relative;overflow:hidden;box-shadow:0 18px 60px #0000002e}.topBar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff40;justify-content:center;align-items:center;height:56px;display:flex}.topBarTitle{letter-spacing:.5px;opacity:.8;font-size:16px;font-weight:900}.main{min-height:0;padding:18px 14px calc(84px + env(safe-area-inset-bottom));flex:1;width:100%;max-width:520px;margin:0 auto;overflow-y:auto}.screen{flex-direction:column;gap:12px;display:flex}.h1{letter-spacing:0;overflow-wrap:anywhere;margin:0 0 4px;font-size:clamp(32px,10vw,42px);font-weight:1000;line-height:.95}.pageTitleRow{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.pageTitleRow .h1{min-width:0}.card{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:14px;box-shadow:0 10px 30px #0000000f}.summaryCard{gap:12px;display:grid}.sectionHeader{justify-content:space-between;align-items:flex-end;gap:12px;min-width:0;margin-bottom:10px;display:flex}.label{overflow-wrap:anywhere;margin-top:0;margin-bottom:4px;font-weight:950}.inventoryLabelRow{justify-content:space-between;align-items:center;gap:10px;width:100%;margin-top:2px;display:flex}.inventoryLabelRow .label{margin-bottom:0}.inventoryInfoBtn{border:1.8px solid var(--text);width:34px;height:34px;color:var(--text);cursor:pointer;background:#ffffffa6;border-radius:999px;flex:none;justify-content:center;align-items:center;display:flex}.inventoryInfoBtn:hover{background:#ffffffe6}.helper{color:var(--muted);font-size:12px;line-height:1.35}.select,.file{border:1px solid var(--border);background:#ffffffbf;border-radius:12px;outline:none;width:100%;padding:12px;font-weight:700}.button{background:linear-gradient(180deg,var(--green),var(--green2));color:#fff;letter-spacing:.2px;cursor:pointer;text-align:center;border:1px solid #00000024;border-radius:14px;width:100%;margin-top:10px;padding:14px;font-weight:900;text-decoration:none;display:block}.button:disabled{opacity:.7;cursor:not-allowed}.previewWrap{border:1px solid var(--border);border-radius:14px;margin-top:12px;overflow:hidden}.previewImg{object-fit:cover;width:100%;max-height:240px;display:block}.bottomNav{z-index:1000;border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff73;justify-content:center;height:66px;display:flex;position:absolute;bottom:0;left:0;right:0}.bottomNavInner{grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:520px;padding:8px 10px;display:grid}.navLink{color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:12px;font-weight:900;text-decoration:none;display:flex}.navActive{color:var(--text)}.navDot{background:#0f2d1d40;border-radius:999px;width:6px;height:6px}.navActive .navDot{background:#0f2d1df2}.colorMatchLoadingScreen{z-index:12000;color:#fff7cf;text-shadow:0 2px #000000c7;background:radial-gradient(circle at 50% 42%,#fff6ca12,#0000 30%),linear-gradient(#143a22 0%,#0f311f 48%,#102e1f 100%);flex-direction:column;justify-content:center;width:min(390px,100vw - 24px);height:min(638px,100vh - 158px);display:flex;position:fixed;top:max(74px,50vh - 324px);left:50%;overflow:hidden;transform:translate(-50%)}.colorMatchLoadingScreenInPhone{width:auto;height:auto;position:absolute;inset:56px 0 66px;transform:none}.colorMatchLoadingContent{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:64px;min-height:0;padding:54px 16px;display:flex}.colorMatchLoadingTitle{text-align:center;letter-spacing:0;white-space:nowrap;width:100%;font-size:31px;font-weight:950;line-height:1.05}.colorMatchLoadingMark{justify-content:center;align-items:center;width:156px;height:156px;display:flex;position:relative}.colorMatchSpinner{animation:1.45s linear infinite colorMatchSpin;position:absolute;inset:0}.colorMatchSpinner span{--ray-angle:calc(var(--ray)*22.5deg);width:13px;height:31px;transform:rotate(var(--ray-angle))translateY(-62px);transform-origin:50%;opacity:.92;background:#fff7cf;border-radius:999px;margin-top:-15.5px;margin-left:-6.5px;position:absolute;top:50%;left:50%;box-shadow:0 2px #000000b8}.colorMatchHat{color:#fff7cf;filter:drop-shadow(0 2px #000000c7);z-index:1;width:82px;height:auto;position:relative}@keyframes colorMatchSpin{to{transform:rotate(360deg)}}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.itemCard{border:1px solid var(--border);background:#ffffffb8;border-radius:16px;flex-direction:column;min-height:100%;display:flex;position:relative;overflow:hidden}.itemImgWrap{background:#ffffff8c;border-bottom:1px solid #00000014;width:100%;height:168px;position:relative;overflow:hidden}.itemImg{object-fit:cover;width:100%;height:168px;display:block}.imageExpandBtn{z-index:2;width:36px;height:36px;color:var(--green);cursor:pointer;background:#ffffffeb;border:1px solid #00000024;border-radius:999px;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;left:8px;box-shadow:0 6px 18px #00000014}.imageLightboxOverlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f2d1d80;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.imageLightbox{border:1px solid var(--border);background:#fffffff5;border-radius:20px;width:min(92vw,720px);max-height:88vh;padding:14px;position:relative;box-shadow:0 18px 60px #00000040}.imageLightboxClose{z-index:2;position:absolute;top:10px;right:10px}.imageLightboxImg{object-fit:contain;border-radius:14px;width:100%;max-height:calc(88vh - 28px);display:block}.itemBody{flex:1;padding:10px 10px 8px}.itemTitle{margin-bottom:8px;font-size:14px;font-weight:950;line-height:1.12}.chipRow{flex-wrap:wrap;gap:5px;margin-bottom:8px;display:flex}.chipRow span{color:var(--muted);text-transform:capitalize;background:#0f2d1d12;border:1px solid #0f2d1d14;border-radius:999px;padding:4px 6px;font-size:10.5px;font-weight:850}.priceText{color:var(--text);font-size:14px;font-weight:950}.itemBtn{text-align:center;border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffffb8;border-radius:12px;margin:0 10px 10px;padding:10px;font-weight:950;text-decoration:none;display:block}.itemBtn:hover,.button:hover{filter:brightness(.98)}.itemBtn:disabled{opacity:.65;cursor:not-allowed}.heartBtn{z-index:2;cursor:pointer;width:36px;height:36px;color:var(--green);background:#ffffffeb;border:1px solid #00000024;border-radius:999px;font-size:22px;line-height:30px;position:absolute;top:8px;right:8px;box-shadow:0 6px 18px #00000014}.heartBtnActive{color:var(--heart)}.checkRow{align-items:center;gap:10px;margin:10px 0;display:flex}.checkRow input{width:18px;height:18px}.pillRow{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.pill{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:#ffffff8c;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:800}.originalPreviewBox{background:#ffffffb3;border:1px solid #0000001f;border-radius:16px;width:92px;height:92px;overflow:hidden}.originalPreviewLabel{text-align:center;margin-top:6px;font-weight:800}.matchModalOverlay{z-index:40000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:max(12px,env(safe-area-inset-top))12px max(12px,env(safe-area-inset-bottom));background:#0f2d1d59;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.matchModal{border:1px solid var(--border);overflow-wrap:anywhere;background:#fffffff2;border-radius:20px;width:100%;max-width:min(390px,100vw - 24px);max-height:calc(100dvh - 24px);padding:16px;overflow-y:auto;box-shadow:0 18px 60px #00000038}.inventoryModal{gap:14px;display:grid}.inventoryModalHeader{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.inventoryModalTitle{margin-bottom:4px;font-size:clamp(21px,6vw,24px);font-weight:1000;line-height:1}.inventoryRuleNote{color:var(--text);background:#0f2d1d0d;border:1px solid #0f2d1d1a;border-radius:12px;margin-top:8px;padding:8px 10px;font-size:12px;font-weight:850;line-height:1.28}.inventoryBrandList{gap:10px;display:grid}.inventoryBrandItem{border:1px solid var(--border);background:#ffffffad;border-radius:14px;padding:10px}.inventoryBrandTop{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.inventoryBrandName{overflow-wrap:anywhere;min-width:0;font-size:15px;font-weight:1000}.inventoryBrandTotal{min-width:48px;color:var(--text);text-align:center;background:#0f2d1d1a;border-radius:999px;padding:4px 8px;font-size:13px;font-weight:1000}.inventoryCategoryGrid{flex-wrap:wrap;gap:6px;display:flex}.inventoryCategoryPill{color:var(--muted);background:#0f2d1d0f;border:1px solid #0f2d1d1a;border-radius:999px;align-items:center;gap:6px;padding:5px 8px;font-size:11px;font-weight:850;display:inline-flex}.inventoryCategoryPill strong{color:var(--text);font-size:11px}.modalCloseBtn{border:1px solid var(--border);width:34px;height:34px;color:var(--text);cursor:pointer;background:#ffffffd9;border-radius:999px;flex:none;font-size:22px;font-weight:900}.matchSetupPreview{border:1px solid var(--border);background:#ffffffa6;border-radius:14px;grid-template-columns:72px 1fr;align-items:center;gap:12px;margin-bottom:12px;padding:10px;display:grid}.matchSetupPreview img{object-fit:cover;border-radius:12px;width:72px;height:72px}.itemActionRow{grid-template-columns:46px 1fr;gap:8px;margin:0 10px 10px;display:grid}.uploadMeta{margin-top:6px}.uploadMatchBtn{width:calc(100% - 20px);margin:10px}.uploadBoardBtn{margin:0 10px 10px}.downloadIconBtn{border:1px solid var(--border);height:42px;color:var(--text);background:#ffffffb8;border-radius:12px;justify-content:center;align-items:center;text-decoration:none;display:flex}.matchFromBtn{border:1px solid var(--border);height:42px;color:var(--text);cursor:pointer;background:#ffffffb8;border-radius:12px;padding:0 8px;font-weight:950}.matchFromBtn:disabled{opacity:.65;cursor:not-allowed}.profileScreen{gap:16px}.profileHeader{flex-direction:column;align-items:center;margin-top:14px;display:flex}.profileAvatar{border:3px solid var(--green);background:#ffffff73;border-radius:999px;justify-content:center;align-items:center;width:122px;height:122px;font-size:56px;display:flex}.profileName{text-align:center;letter-spacing:-.8px;margin-top:18px;font-size:38px;font-weight:1000;line-height:.98}.profileHandle{color:#111;margin-top:8px;font-size:22px;font-weight:500}.profileStatsCard{grid-template-columns:1fr 1px 1fr;align-items:center;margin-top:18px;padding:18px 8px;display:grid}.profileStat{flex-direction:column;align-items:center;display:flex}.profileStatNumber{font-size:44px;font-weight:1000;line-height:1}.profileStatLabel{color:#111;text-align:center;margin-top:8px;font-size:18px}.profileDivider{background:#0f2d1d66;width:1px;height:78px}.settingsScreen{padding-top:24px}.settingsTitle{text-align:center;color:var(--text);margin-bottom:28px;font-size:48px;font-weight:900}.settingsList{border-top:1px solid #0f2d1d38;margin-top:12px}.settingsRow{min-height:72px;color:var(--text);background:#ffffff1a;border-bottom:1px solid #0f2d1d38;justify-content:space-between;align-items:center;padding:0 22px;font-size:28px;font-weight:650;text-decoration:none;display:flex}.settingsRow:hover{background:#ffffff59}.settingsArrow{font-size:42px;font-weight:300;line-height:1}.profileAvatarUpload{cursor:pointer;overflow:hidden}.profileAvatarUpload img{object-fit:cover;width:100%;height:100%}.profileEditCard{flex-direction:column;gap:10px;width:100%;margin-top:18px;display:flex}.profileInput{border:1px solid var(--border);width:100%;color:var(--text);background:#ffffffbf;border-radius:14px;padding:12px;font-size:16px;font-weight:800}.profileEditBtn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffffbf;border-radius:999px;margin-top:12px;padding:11px 14px;font-weight:950}.settingsSubPage{padding-top:8px}.accountStatusRow{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.accountStatusPill{border:1px solid var(--border);color:var(--muted);white-space:nowrap;background:#ffffffb8;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:950;line-height:1}.accountStatusOn{color:var(--green2);background:#0e5c361f}.accountEmailBox{border:1px solid var(--border);background:#ffffffb8;border-radius:14px;gap:2px;margin-top:12px;margin-bottom:8px;padding:12px;display:grid}.accountEmailBox span{color:var(--muted);font-size:11px;font-weight:900}.accountEmailBox strong{color:var(--text);overflow-wrap:anywhere;font-size:14px}.pwaOtpForm{border-top:1px solid var(--border);gap:10px;margin-top:14px;padding-top:14px;display:grid}.accountMessage{color:var(--muted);margin-top:10px;font-size:12px;font-weight:800;line-height:1.35}.backLink{color:var(--muted);width:fit-content;font-size:16px;font-weight:900;text-decoration:none}.toggleCard{justify-content:space-between;align-items:center;gap:16px;display:flex}.toggleSwitch{border:1px solid var(--border);cursor:pointer;background:#0f2d1d2e;border-radius:999px;width:58px;height:34px;padding:3px}.toggleSwitch span{background:#fff;border-radius:999px;width:26px;height:26px;transition:transform .2s;display:block}.toggleOn{background:var(--green)}.toggleOn span{transform:translate(24px)}.walkthroughScreen{padding-top:8px}.walkthroughTitle{margin:10px 0 18px;font-size:44px;font-weight:1000;line-height:1}.walkthroughStep{grid-template-columns:86px 1fr;align-items:center;gap:18px;margin:14px 0;font-size:30px;font-weight:950;line-height:1.05;display:grid}.walkthroughIcon{border:3px solid var(--green);background:#ffffff59;border-radius:18px;justify-content:center;align-items:center;width:74px;height:74px;font-size:38px;display:flex}.walkthroughMatch{justify-content:center;align-items:center;gap:18px;margin:22px 0;font-size:52px;display:flex}.infoList{flex-direction:column;gap:12px;display:flex}.legalText{color:var(--text);font-size:14px;line-height:1.55}.legalText p{margin:0 0 14px}.boardsGrid{grid-template-columns:1fr;gap:16px;display:grid}.boardCard{border:1px solid var(--border);background:#fff9;border-radius:20px;flex-direction:column;display:flex;overflow:hidden}.boardPreview{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);height:clamp(180px,52vw,300px);display:grid;overflow:hidden}.boardPreview img{object-fit:cover;width:100%;height:100%}.boardPreviewEmpty{background:#0f2d1d14;border:1px solid #0f2d1d0d}.boardCardBody{padding:14px}.boardTitle{color:var(--text);margin-bottom:4px;font-size:24px;font-weight:1000;text-decoration:none;display:block}.boardDeleteBtn{border:1px solid var(--border);color:#b42318;cursor:pointer;background:#ffffffbf;border-radius:999px;margin-top:12px;padding:10px 14px;font-weight:900}.boardCreateCard{flex-direction:column;gap:12px;display:flex}.boardPickerList{flex-direction:column;gap:10px;margin:14px 0;display:flex}.boardPickerRow{border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;background:#ffffffb3;border-radius:14px;justify-content:space-between;align-items:center;padding:14px;font-weight:900;display:flex}.boardCreateMini{flex-direction:column;gap:12px;margin-top:16px;display:flex}.boardItemsGrid{align-items:start}.boardItemCard{height:auto;min-height:0}.boardItemBody{flex:none}.boardItemTitle{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.boardCardActions{margin-top:auto;padding-top:2px}.boardCardActions .itemBtn,.boardCardActions .itemActionRow{margin:0 10px 10px}@media (max-width:360px),(max-height:720px){.appShell{padding:0}.phone{border-left:0;border-right:0;border-radius:0;max-width:100vw;height:100dvh;min-height:100dvh}.topBar{height:50px}.main{padding:14px 10px calc(76px + env(safe-area-inset-bottom))}.screen{gap:10px}.card,.matchModal{padding:12px}.pillRow{gap:6px}.pill,.checkRow,.button,.select,.file{font-size:13px}.bottomNav{height:calc(60px + env(safe-area-inset-bottom))}.bottomNavInner{padding:6px 8px max(6px,env(safe-area-inset-bottom))}.navLink{font-size:11px}.matchModalOverlay{padding-top:max(8px,env(safe-area-inset-top));align-items:flex-start}.matchModal{border-radius:16px;max-height:calc(100dvh - 16px)}}