*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --primary:#2DB55A;--primary-dark:#249A4D;--primary-light:#E8F5E9;--primary-bg:#F0F9F4;
  --bg:#F4F4F6;--bg2:#E8E8EA;--card:#FDFDFD;--text:#1C1C1E;--text2:#686870;--text3:#6B6B73;
  --danger:#FF4D4F;--danger-light:#FEF0F0;--orange:#FF9800;--border:#EAEAEC;
  --radius-xs:4px;--radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-pill:22px;--radius-full:50%;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --text-xs:11px;--text-sm:13px;--text:15px;--text-lg:17px;--text-xl:20px;--text-2xl:28px;
  --space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:20px;
  --tabbar-h:calc(60px + env(safe-area-inset-bottom));
  --tabbar-bg:rgba(253,253,253,0.88);
  --star:#FFD600;--on-primary:#fff;
  --success:#34C759;--success-light:#E8F9ED;
  --warning:#FF9500;--warning-light:#FFF4E5;
  --info:#007AFF;--info-light:#E5F1FF;
  --disabled:#C7C7CC;--disabled-bg:#F0F0F2;
  --surface-1:#F8F8FA;--surface-2:#FDFDFD;--surface-3:#FFFFFF;
  --stats-grad:linear-gradient(135deg,var(--primary),var(--primary-dark));
  --stats-shadow:0 4px 16px rgba(45,181,90,0.25);
  --camera-shadow:0 4px 12px rgba(45,181,90,0.4);
  --shadow-primary:0 4px 12px rgba(45,181,90,0.2);
  --shadow-orange:0 4px 12px rgba(255,152,0,0.2);
  --avatar-grad:linear-gradient(135deg,var(--orange),#FFB74D);
  --chart-3:#2196F3;--chart-4:#9C27B0;--chart-5:#FF5722;--chart-6:#607D8B;--chart-7:#795548;--chart-8:#00BCD4;
  --z-base:1;--z-sticky:10;--z-dropdown:50;--z-tabbar:100;--z-overlay:200;--z-modal:300;--z-toast:9999;
}
[data-theme="dark"]{
  --primary:#3DBC6E;--primary-dark:#2DB55A;--primary-light:#1A3D2A;--primary-bg:#0D1F14;
  --bg:#121214;--bg2:#1A1A1C;--card:#1C1C1E;--text:#E5E5E7;--text2:#AEAEB2;--text3:#AEAEB2;
  --danger:#FF6B6D;--danger-light:#2D1517;--orange:#FFB347;--border:#2A2A2C;
  --success:#30D158;--success-light:#0D2818;
  --warning:#FF9F0A;--warning-light:#3D2A00;
  --info:#0A84FF;--info-light:#0A1F3D;
  --disabled:#48484A;--disabled-bg:#1C1C1E;
  --surface-1:#0E0E10;--surface-2:#1C1C1E;--surface-3:#2C2C2E;
  --shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --tabbar-bg:rgba(28,28,30,0.88);
  --stats-shadow:0 4px 16px rgba(61,188,110,0.2);
  --camera-shadow:0 4px 12px rgba(61,188,110,0.3);
  --shadow-primary:0 4px 12px rgba(61,188,110,0.15);
  --shadow-orange:0 4px 12px rgba(255,179,71,0.15);
  --chart-3:#64B5F6;--chart-4:#BA68C8;--chart-5:#FF8A65;--chart-6:#90A4AE;--chart-7:#A1887F;--chart-8:#4DD0E1;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --primary:#3DBC6E;--primary-dark:#2DB55A;--primary-light:#1A3D2A;--primary-bg:#0D1F14;
  --bg:#121214;--bg2:#1A1A1C;--card:#1C1C1E;--text:#E5E5E7;--text2:#AEAEB2;--text3:#AEAEB2;
  --danger:#FF6B6D;--danger-light:#2D1517;--orange:#FFB347;--border:#2A2A2C;
  --success:#30D158;--success-light:#0D2818;
  --warning:#FF9F0A;--warning-light:#3D2A00;
  --info:#0A84FF;--info-light:#0A1F3D;
  --disabled:#48484A;--disabled-bg:#1C1C1E;
  --surface-1:#0E0E10;--surface-2:#1C1C1E;--surface-3:#2C2C2E;
  --shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --tabbar-bg:rgba(28,28,30,0.88);
  --stats-shadow:0 4px 16px rgba(61,188,110,0.2);
  --camera-shadow:0 4px 12px rgba(61,188,110,0.3);
  --shadow-primary:0 4px 12px rgba(61,188,110,0.15);
  --shadow-orange:0 4px 12px rgba(255,179,71,0.15);
}}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
input,textarea,select,button{font-family:inherit;font-size:15px;border:none;outline:none;background:none;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Screens */
/* 9:16 竖屏比例：宽度优先，高度 = 宽度 × (16/9)，桌面端居中显示 */
#app{
  position:relative;
  width:calc(100vh * 9 / 16);
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  box-shadow:0 0 40px rgba(0,0,0,0.1)
}
@media (max-width:600px){#app{width:100%;height:100vh;max-height:100vh;border:none;box-shadow:none}.detail-actions{max-width:100%}}
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s 300ms;background:var(--bg);z-index:var(--z-base);content-visibility:hidden}
.screen.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s;z-index:calc(var(--z-base) + 1);content-visibility:visible}
.screen-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px;overscroll-behavior:contain}
.screen-content.has-tabbar{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.screen-content:not(.has-tabbar):not(.detail-content){padding-bottom:calc(var(--tabbar-h) + 20px)}

/* Header */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 8px) 16px 8px;background:var(--card);border-bottom:1px solid var(--border);min-height:calc(44px + env(safe-area-inset-top));flex-shrink:0;z-index:var(--z-sticky)}
.app-header .h-title{font-size:var(--text-lg);font-weight:600;flex:1;text-align:center}
.app-header .h-left,.app-header .h-right{width:60px;display:flex;align-items:center;gap:8px}
.app-header .h-right{justify-content:flex-end}
.header-btn{padding:6px 8px;font-size:14px;color:var(--text2);transition:transform 100ms var(--ease-out);display:flex;align-items:center;gap:4px;position:relative}
.header-btn:active{transform:scale(0.97)}
.header-btn.primary{color:var(--primary)}

/* Home header */
.home-header{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:var(--card)}
.home-header .logo{display:flex;align-items:center;gap:8px}
.home-header .logo-emoji{font-size:var(--text-2xl)}
.home-header .logo-text{font-size:var(--text-xl);font-weight:700}
.home-header .bell{position:relative;width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);transition:transform 100ms var(--ease-out)}
.home-header .bell:active{transform:scale(0.97)}
.home-header .bell .badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:var(--radius-sm);background:var(--danger);color:var(--on-primary);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card)}
.home-header .bell .badge.hidden{display:none}

/* Stats card */
.stats-card{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--stats-grad);border-radius:var(--radius);padding:16px 20px;margin:12px 0;color:var(--on-primary);box-shadow:var(--stats-shadow)}
.stats-card .stat-item{text-align:center}
.stats-card .stat-num{font-size:22px;font-weight:700;line-height:1.2}
.stats-card .stat-label{font-size:var(--text-xs);opacity:0.8;margin-top:2px}

/* Section */
.section{margin:20px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{font-size:16px;font-weight:600}
.section-more{font-size:var(--text-sm);color:var(--text3)}

/* Horizontal scroll items */
.h-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.h-scroll::-webkit-scrollbar{display:none}
.rec-card{flex-shrink:0;width:120px;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);opacity:0;transform:translateY(12px)}
.rec-card.show{opacity:1;transform:translateY(0)}
.rec-card:active{transform:scale(0.97);transition:transform 100ms var(--ease-out)}
.rec-card .rc-img{width:120px;height:120px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:36px}
.rec-card .rc-img img{width:100%;height:100%;object-fit:cover}
.rec-card .rc-info{padding:8px}
.rec-card .rc-name{font-size:var(--text-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-card .rc-time{font-size:var(--text-xs);color:var(--text3);margin-top:2px}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border-radius:var(--radius);font-size:16px;font-weight:600;transition:transform 100ms var(--ease-out),background 100ms var(--ease-out);text-align:center}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-primary)}
.btn-primary:active{background:var(--primary-dark)}
.btn-outline{background:var(--card);color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:active{background:var(--primary-light)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn-danger:active{background:var(--danger-light)}
.btn-white{background:var(--card);color:var(--primary);border:1px solid var(--border)}
.btn-white:active{background:var(--bg)}
.btn-sm{padding:8px 14px;font-size:var(--text-sm);width:auto;border-radius:var(--radius-sm)}
.btn:disabled{opacity:0.5;pointer-events:none}

/* SVG Icon System (Lucide-style) */
.svg-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor;pointer-events:none}
.svg-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svg-icon.filled svg{fill:currentColor;stroke:none}
.svg-icon.sz-14{width:14px;height:14px}.svg-icon.sz-16{width:16px;height:16px}.svg-icon.sz-18{width:18px;height:18px}
.svg-icon.sz-20{width:20px;height:20px}.svg-icon.sz-22{width:22px;height:22px}.svg-icon.sz-24{width:24px;height:24px}
.svg-icon.sz-28{width:28px;height:28px}.svg-icon.sz-32{width:32px;height:32px}.svg-icon.sz-48{width:48px;height:48px}
.svg-icon.sz-56{width:56px;height:56px}

/* Inputs */
.field{margin-bottom:10px}
.field-label{display:block;font-size:var(--text-sm);color:var(--text2);margin-bottom:4px;font-weight:500}
.field:has(.qty-stepper){display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 16px}
.field:has(.qty-stepper) .field-label{margin-bottom:0;flex-shrink:0}
.qty-stepper{display:inline-flex;align-items:center;gap:12px;margin:0 63px 0 auto}
.qty-stepper button{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--primary);background:var(--bg2);border:none;cursor:pointer;transition:transform 100ms var(--ease-out),background 100ms var(--ease-out);font-weight:300}
.qty-stepper button:active{transform:scale(0.92);background:var(--primary-light)}
.field .qty-stepper input{width:82px;height:32px;flex-shrink:0;padding:0;text-align:center;font-size:var(--text);border:none;outline:none;background:transparent;color:var(--text);font-weight:600}
.qty-stepper input::-webkit-inner-spin-button,.qty-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:border-color 200ms var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary)}
.field textarea{resize:none;min-height:72px}
.field input.invalid,.field textarea.invalid,.field select.invalid{border-color:var(--danger);animation:shake 300ms var(--ease-out)}
.field input.invalid:focus,.field textarea.invalid:focus,.field select.invalid:focus{border-color:var(--danger)}
.field-error{display:none;font-size:var(--text-xs);color:var(--danger);margin-top:4px;line-height:1.4}
.field-error.show{display:block;animation:fadeInDown 200ms var(--ease-out)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.header-btn[aria-disabled="true"],.btn[aria-disabled="true"]{opacity:0.45;pointer-events:none;cursor:default}
@media(prefers-reduced-motion:reduce){.field input.invalid,.field textarea.invalid,.field select.invalid{animation:none}.field-error.show{animation:none}}

/* Search bar */
.search-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);margin-bottom:12px}
.search-bar input{flex:1}
.search-bar .sb-icon{font-size:16px;color:var(--text3)}
.search-bar .sb-scan{display:flex;align-items:center;flex-shrink:0;color:var(--text3);cursor:pointer;transition:transform 100ms var(--ease-out)}
.search-bar .sb-scan:active{transform:scale(0.92)}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--primary-light);color:var(--primary-dark);border-radius:var(--radius-lg);font-size:12px;font-weight:500}
.pill.sm{padding:2px 8px;font-size:var(--text-xs)}
.pill .pill-x{cursor:pointer;font-size:14px;opacity:0.6;transition:opacity 100ms var(--ease-out)}
.status-pills{display:flex;gap:8px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;background:var(--bg);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:background 150ms var(--ease-out),color 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.status-pill:active{transform:scale(0.95)}
.status-pill.active{color:var(--on-primary);border-color:transparent}
.status-pill .sp-dot{width:8px;height:8px;border-radius:var(--radius-full)}
.pill .pill-x:active{opacity:1}
.pill.suggestion{background:var(--bg);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:transform 100ms var(--ease-out)}
.pill.suggestion:active{transform:scale(0.97)}
.pill.selected{background:var(--primary);color:var(--on-primary)}

/* Items list */
.filter-bar{display:flex;gap:8px;margin-bottom:12px}
.filter-btn{flex:1;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text2);display:flex;align-items:center;justify-content:center;gap:4px;transition:transform 100ms var(--ease-out);position:relative}
.filter-btn:active{transform:scale(0.97)}

.item-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:var(--radius);margin-bottom:8px;box-shadow:var(--shadow);transition:transform 100ms var(--ease-out),opacity 300ms var(--ease-out)}
.item-row:active{transform:scale(0.98)}
.item-row .ir-thumb{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;position:relative}
.item-row .ir-thumb img{width:100%;height:100%;object-fit:cover}
.item-row .ir-info{flex:1;min-width:0}
.item-row .ir-name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row .ir-tags{display:flex;gap:4px;margin:3px 0;flex-wrap:nowrap;overflow:hidden}
.item-row .ir-meta{font-size:12px;color:var(--text3)}
.item-row .ir-check{width:24px;height:24px;border-radius:var(--radius-full);border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.item-row .ir-check.checked{background:var(--primary);border-color:var(--primary)}
.item-row .ir-check.checked::after{content:'✓';color:var(--on-primary);font-size:14px;font-weight:bold}
.item-row .ir-check.hidden{display:none}
.item-row .ir-fav{flex-shrink:0;font-size:18px;color:var(--text3);padding:8px;cursor:pointer;transition:transform 150ms var(--ease-out),color 150ms var(--ease-out)}
.item-row .ir-fav:active{transform:scale(1.3)}
.item-row .ir-fav.active{color:var(--star)}

/* Grid view */
.items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.grid-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform 100ms var(--ease-out),opacity 300ms var(--ease-out);position:relative;cursor:pointer}
.grid-card:active{transform:scale(0.97)}
.grid-card .gc-img{width:100%;aspect-ratio:1;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden}
.grid-card .gc-img img{width:100%;height:100%;object-fit:cover}
.grid-card .gc-info{padding:8px 10px}
.grid-card .gc-name{font-size:var(--text-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-card .gc-meta{font-size:var(--text-xs);color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-card .gc-fav{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--radius-full);background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--on-primary);cursor:pointer}
.grid-card .gc-fav.active{color:var(--star)}
.grid-card .gc-check{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:var(--radius-full);border:2px solid rgba(255,255,255,0.8);background:rgba(0,0,0,0.3);display:none;align-items:center;justify-content:center}
.grid-card .gc-check.checked{background:var(--primary);border-color:var(--primary)}
.grid-card .gc-check.checked::after{content:'✓';color:var(--on-primary);font-size:12px;font-weight:bold}
.grid-card .gc-check.show{display:flex}
.grid-card .gc-status{position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:var(--radius-full)}

/* Touch target expansion (WCAG 2.2 SC 2.5.8) */
.qty-stepper button,.loc-tab,.ac-back,.ac-send,.notif-tab,.shi-del,.stats-tab,.range-btn,.nav-icon-btn,.cache-clear-btn{position:relative}
.item-row .ir-check::before,.grid-card .gc-fav::before,.grid-card .gc-check::before,.mc-row .mc-btn::before,.mgmt-top .mt-reorder::before,.header-btn::before,.filter-btn::before,.qty-card-btn::before,.cat-child .cc-default-btn::before,.view-toggle .vt-btn::before,.rec-dot::before,#sort-dir::before,.bell::before,.qty-stepper button::before,.loc-tab::before,.ac-back::before,.ac-send::before,.iv-close::before,.iv-nav::before,.notif-tab::before,.shi-del::before,.stats-tab::before,.range-btn::before,.nav-icon-btn::before,.cache-clear-btn::before,.theme-switch::before,.toggle::before{content:'';position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%)}

/* Batch bar */
.batch-bar{display:none;position:absolute;bottom:var(--tabbar-h);left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:12px 16px;gap:8px;z-index:var(--z-sticky);box-shadow:0 -2px 8px rgba(0,0,0,0.08)}
.batch-bar.show{display:flex}

/* Pull to refresh */
.pull-indicator{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font-size:var(--text-sm);color:var(--text3);height:0;overflow:hidden;opacity:0;transform:scaleY(0.8);transform-origin:top center;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),height 300ms var(--ease-out)}
.pr-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.pr-spinner{animation-duration:1.5s}.pull-indicator{transition:none}}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.empty-state .es-icon{font-size:56px;margin-bottom:16px;opacity:0.5}
.empty-state .es-text{font-size:15px;color:var(--text3);margin-bottom:20px;line-height:1.6}
.empty-state .es-btn{width:auto;padding:10px 24px}
.load-more-btn{display:block;width:100%;padding:12px;margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:14px;font-weight:500;text-align:center;cursor:pointer;transition:transform 100ms var(--ease-out),background 200ms var(--ease-out)}
.load-more-btn:active{transform:scale(0.98)}
.load-more-btn:hover{background:var(--bg2)}

/* Error card */
.error-card{background:var(--danger-light);border:1px solid var(--danger);border-radius:var(--radius);padding:16px;margin:12px 0;text-align:center}
.error-card .ec-icon{font-size:32px;margin-bottom:8px}
.error-card .ec-msg{font-size:14px;color:var(--danger);margin-bottom:12px}
.error-card .ec-retry{display:inline-flex;align-items:center;gap:4px;padding:6px 16px;background:var(--danger);color:var(--on-primary);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;transition:transform 100ms var(--ease-out)}
.error-card .ec-retry:active{transform:scale(0.97)}

/* Status dot (extracted from inline style) */
.status-dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-full);background:var(--status-color,var(--text3));margin-right:4px;vertical-align:middle}
/* Quantity badge (extracted from inline style) */
.qty-badge{color:var(--primary);font-weight:600}
/* Status pill dynamic color via custom property */
.status-pill{--status-color:var(--text3)}
.status-pill .sp-dot{background:var(--status-color)}
.status-pill.active{background:var(--status-color)}
/* Grid card status dynamic color */
.gc-status{background:var(--status-color,var(--text3))}

/* Skeleton loading (WCAG: respects prefers-reduced-motion) */
.skeleton{background:var(--bg2);border-radius:var(--radius-sm);animation:sk-pulse 1.5s var(--ease-in-out) infinite}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;opacity:0.7}}
.sk-card{height:72px;border-radius:var(--radius);margin-bottom:8px}
.sk-line{height:12px;margin:6px 0;border-radius:4px}
.sk-line.mid{width:80%}
.stats-card.loading .stat-num{color:transparent;background:rgba(255,255,255,0.15);border-radius:4px;animation:sk-pulse 1.5s var(--ease-in-out) infinite}
@media(prefers-reduced-motion:reduce){.stats-card.loading .stat-num{animation:none;opacity:0.7}}
.sk-detail-img{width:100%;height:160px;border-radius:var(--radius)}
.sk-detail-img.skeleton{animation:sk-pulse 1.5s var(--ease-in-out) infinite}
@media(prefers-reduced-motion:reduce){.sk-detail-img.skeleton{animation:none;opacity:0.7}}

/* Login */
.login-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px}
.login-logo{text-align:center;margin-bottom:40px}
.login-logo .ll-emoji{font-size:64px;margin-bottom:12px}
.login-logo .ll-title{font-size:var(--text-2xl);font-weight:700;color:var(--text)}
.login-logo .ll-sub{font-size:14px;color:var(--text3);margin-top:4px}
.login-info{text-align:center;font-size:12px;color:var(--text3);margin-top:24px;line-height:1.6}

/* Recognize */
#screen-recognize .screen-content{display:flex;flex-direction:column;overflow:hidden;padding:12px}
#screen-recognize .screen-content > *:not(.rec-photo){flex-shrink:0}
.rec-photo{flex:1;min-height:0;width:100%;border-radius:var(--radius);margin-bottom:6px;object-fit:contain;background:var(--bg);cursor:pointer}
.rec-dots{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.rec-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background 150ms var(--ease-out);position:relative}
.rec-dot.active{background:var(--primary)}
.tag-input-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;max-height:80px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tag-input-wrap::-webkit-scrollbar{display:none}
.tag-input-wrap input{flex:1;min-width:80px;width:auto;padding:4px 0;background:none;border:none;outline:none;font-size:var(--text)}
.tag-input-wrap input:focus{border:none;outline:none}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;margin-bottom:4px;max-height:64px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tag-suggestions::-webkit-scrollbar{display:none}
.tag-suggestions:empty{display:none}
.selected-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.selected-tags:empty{display:none}
.loc-selector{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:transform 100ms var(--ease-out)}
.loc-selector:active{transform:scale(0.98)}
.loc-selector .ls-label{font-size:var(--text-sm);color:var(--text2)}
.loc-selector .ls-value{font-size:15px;font-weight:500;display:flex;align-items:center;gap:4px}
.loc-selector .ls-arrow{font-size:18px;color:var(--text3)}

.qty-card{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);height:48px;padding:0 12px;margin-bottom:10px}
.qty-card-label{font-size:var(--text-sm);color:var(--text2);font-weight:500;flex-shrink:0}
.qty-card-value{font-size:20px;font-weight:700;color:var(--text);flex:1;text-align:center}
.qty-card-btns{display:flex;gap:6px;flex-shrink:0}
.qty-card-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border:1.5px solid var(--border);background:var(--bg);color:var(--primary);transition:transform 100ms var(--ease-out);position:relative}
.qty-card-btn:active{transform:scale(0.95)}
.qty-card-btn.plus{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}

/* Category location sheet */
.cat-group{margin-bottom:12px}
.cat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-radius:var(--radius);cursor:pointer;transition:transform 100ms var(--ease-out)}
.cat-header:active{transform:scale(0.98)}
.cat-header .ch-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.cat-header .ch-name .ch-icon{font-size:18px}
.cat-header .ch-arrow{font-size:14px;color:var(--text3);transition:transform 200ms var(--ease-out)}
.cat-header .ch-arrow.open{transform:rotate(90deg)}
.cat-header .ch-default{font-size:12px;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm)}
.cat-children{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease-out)}
.cat-children.open{grid-template-rows:1fr}
.cat-children > div{overflow:hidden}
.cat-child{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 38px;font-size:14px;color:var(--text2);cursor:pointer;transition:background 100ms var(--ease-out)}
.cat-child:active{background:var(--bg);transform:scale(0.98)}
.cat-child.selected{color:var(--primary-dark);font-weight:600}
.cat-child .cc-check{color:var(--primary);font-size:16px}
.cat-child .cc-check.hidden{display:none}
.cat-child .cc-default-btn{font-size:12px;color:var(--text3);padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out),background 150ms var(--ease-out);position:relative}
.cat-child .cc-default-btn.is-default{color:var(--primary);border-color:var(--primary);background:var(--primary-light)}
.cat-child .cc-default-btn:active{transform:scale(0.95)}

/* Category management page */
.mgmt-card{background:var(--card);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
.mgmt-top{display:flex;align-items:center;justify-content:space-between;padding:14px}
.mgmt-top:active{background:var(--bg);transform:scale(0.99)}
.mgmt-top .mt-drag{color:var(--text3);font-size:16px;cursor:grab;padding:4px 2px;touch-action:none}
.mgmt-top .mt-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl)}
.mgmt-top .mt-info{display:flex;flex-direction:column;gap:2px}
.mgmt-top .mt-name{font-size:16px;font-weight:600}
.mgmt-top .mt-meta{font-size:12px;color:var(--text3)}
.mgmt-top .mt-right{display:flex;align-items:center;gap:8px}
.mgmt-top .mt-default{font-size:var(--text-xs);color:var(--primary);background:var(--primary-light);padding:3px 8px;border-radius:var(--radius-sm);font-weight:500}
.mgmt-top .mt-reorder{font-size:13px;color:var(--text3);cursor:pointer;padding:6px;position:relative;transition:color 150ms var(--ease-out)}
.mgmt-top .mt-reorder:active{color:var(--primary);transform:scale(0.9)}
.mgmt-top .mt-reorder.danger{color:var(--danger);opacity:0.7}
.mgmt-top .mt-reorder.danger:active{opacity:1}
.mgmt-top .mt-arrow{font-size:14px;color:var(--text3);transition:transform 200ms var(--ease-out);transform:rotate(90deg)}
.mgmt-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border:2px dashed var(--primary);border-radius:var(--radius);color:var(--primary);font-size:15px;font-weight:600;background:var(--primary-bg);cursor:pointer;transition:transform 100ms var(--ease-out);margin-top:8px}
.mgmt-add:active{transform:scale(0.98)}

/* Icon picker (horizontal scroll per 图四) */
.icon-grid{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.icon-grid::-webkit-scrollbar{display:none}
.icon-item{flex-shrink:0;width:52px;height:52px;border-radius:var(--radius);background:var(--card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:border-color 150ms var(--ease-out),background 150ms var(--ease-out),transform 100ms var(--ease-out)}
.icon-item:active{transform:scale(0.92)}
.icon-item.selected{border-color:var(--primary);background:var(--primary-light)}

/* AI icon suggestion */
.ai-suggest-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--primary);border-radius:var(--radius-pill);background:var(--primary-light);color:var(--primary);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:10px;transition:transform 100ms var(--ease-out),opacity 200ms var(--ease-out)}
.ai-suggest-btn:active{transform:scale(0.96)}
.ai-suggest-btn.loading{opacity:0.6;pointer-events:none}
.ai-suggest-icon{font-size:16px;line-height:1}
.icon-picker-row{display:flex;gap:10px;margin-bottom:10px}
.icon-picker-row .ai-suggest-btn{flex:1;justify-content:center;margin-bottom:0;padding:10px 8px}
.icon-picker-paging{display:flex;gap:8px;margin-bottom:8px}
.icon-picker-paging .icon-pg-btn{flex:1;justify-content:center;padding:8px 6px;font-size:14px}
.icon-picker-paging .icon-pg-btn:disabled{opacity:0.35;pointer-events:none}
.ai-suggest-result{margin-bottom:10px}
.ai-suggest-grid{display:flex;gap:10px;flex-wrap:wrap}
.ai-suggest-grid .icon-item{border:2px dashed var(--primary);background:var(--primary-light)}
.ai-suggest-grid .icon-item.selected{border-style:solid}

/* Footer confirm bar (sticks above tab bar) */
.screen-footer-confirm{position:fixed;bottom:var(--tabbar-h);left:0;right:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);z-index:var(--z-tabbar);display:flex;gap:10px;box-shadow:0 -2px 8px rgba(0,0,0,0.06)}
.btn-confirm-icon{flex:1;padding:12px;font-size:16px;font-weight:600}
#screen-cat-edit.with-confirm-bar .screen-content{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

/* Category management */
.mgmt-back{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:14px;font-weight:600;padding:6px 10px;margin-left:-6px;border-radius:var(--radius-sm);cursor:pointer;transition:transform 100ms var(--ease-out)}
.mgmt-back:active{transform:scale(0.95)}
.mgmt-path{flex:1;font-size:13px;color:var(--text3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}

/* Location picker page */
.loc-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:12px}
.loc-tab{padding:10px 20px;font-size:14px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.loc-tab:active{transform:scale(0.97)}
.loc-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.loc-room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-bottom:16px}
.loc-room-card{padding:14px 8px;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:transform 100ms var(--ease-out),border-color 150ms var(--ease-out),background 150ms var(--ease-out)}
.loc-room-card:active{transform:scale(0.96)}
.loc-room-card.selected{border-color:var(--primary);background:var(--primary-light)}
.loc-room-card .lrc-icon{font-size:28px;display:block;margin-bottom:4px}
.loc-room-card .lrc-name{font-size:13px;font-weight:600;color:var(--text);display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.loc-room-card .lrc-count{font-size:11px;color:var(--text3);display:block;margin-top:2px}
.loc-section-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.loc-cat-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:transform 100ms var(--ease-out),border-color 150ms var(--ease-out)}
.loc-cat-item:active{transform:scale(0.98)}
.loc-cat-item.selected{border-color:var(--primary);background:var(--primary-light)}
.loc-cat-item .lci-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.loc-cat-item .lci-body{flex:1;min-width:0}
.loc-cat-item .lci-name{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.loc-cat-item .lci-meta{font-size:12px;color:var(--text3);margin-top:2px}
.loc-cat-item .lci-default{font-size:11px;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);font-weight:500}
.loc-cat-item .lci-check{color:var(--primary);font-size:18px;flex-shrink:0}
.loc-cat-item .lci-check.hidden{display:none}
.loc-picker-footer{position:fixed;bottom:var(--tabbar-h);left:0;right:0;padding:12px 16px;background:var(--card);border-top:1px solid var(--border);z-index:var(--z-dropdown);box-shadow:0 -2px 8px rgba(0,0,0,0.08)}
.loc-picker-footer .btn{width:100%}
#loc-picker-content{padding-bottom:calc(var(--tabbar-h) + 80px)}

/* Field char counter (图四 新建/编辑位置页) */
.field{position:relative}
.field-count{position:absolute;right:12px;bottom:9px;font-size:11px;color:var(--text3);pointer-events:none}
.field-count.empty{color:var(--border)}

/* Default toggle (图四) */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.toggle-row .tr-text{flex:1;margin-right:12px}
.toggle-row .tr-title{font-size:15px;font-weight:500}
.toggle-row .tr-desc{font-size:12px;color:var(--text3);margin-top:2px}
.toggle{position:relative;width:50px;height:30px;border-radius:9999px;background:var(--border);transition:background 200ms var(--ease-out);flex-shrink:0;cursor:pointer}
.toggle.on{background:var(--primary)}
.toggle .knob{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:var(--radius-full);background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:transform 200ms var(--ease-out)}
.toggle.on .knob{transform:translateX(20px)}

/* Info card (图四 默认位置说明) */
.info-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--primary-bg);border:1px solid var(--primary-light);border-radius:var(--radius);margin-top:12px}
.info-card .ic-icon{font-size:20px;flex-shrink:0}
.info-card .ic-title{font-size:14px;font-weight:600;color:var(--primary-dark);margin-bottom:2px}
.info-card .ic-desc{font-size:12px;color:var(--text2);line-height:1.5}

/* Category mgmt empty + new button (图四) */
.mgmt-empty{text-align:center;color:var(--text3);padding:40px 20px;font-size:14px;line-height:1.8}
.mgmt-empty .me-icon{font-size:48px;margin-bottom:12px;opacity:0.5}
.mgmt-new{margin-top:12px}
.mt-default{display:inline-block;font-size:var(--text-xs);color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);font-weight:500;margin-left:6px;vertical-align:middle}

/* Profile overview */
.profile-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.po-card{background:var(--card);border-radius:var(--radius);padding:10px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.po-num{font-size:22px;font-weight:700;color:var(--primary)}
.po-label{font-size:var(--text-xs);color:var(--text3);margin-top:2px}

/* Home quick access */
.quick-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-cats::-webkit-scrollbar{display:none}
.qc-card{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 14px;cursor:pointer;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),border-color 200ms var(--ease-out);opacity:0;transform:translateY(8px)}
.qc-card.show{opacity:1;transform:translateY(0)}
.qc-card:active{transform:scale(0.96);transition:transform 100ms var(--ease-out)}
.qc-card:active{border-color:var(--primary)}
.qc-icon{font-size:18px;line-height:1}
.qc-name{font-size:13px;color:var(--text);font-weight:500;white-space:nowrap}
.qc-count{font-size:11px;color:var(--text3);background:var(--bg2);border-radius:var(--radius-full);padding:2px 8px;min-width:18px;text-align:center}

/* Home location cards (vertical) */
.home-loc-card{flex-shrink:0;width:110px;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 18px;cursor:pointer;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),border-color 200ms var(--ease-out);opacity:0;transform:translateY(8px)}
.home-loc-card.show{opacity:1;transform:translateY(0)}
.home-loc-card:active{transform:scale(0.96);transition:transform 100ms var(--ease-out)}
.home-loc-card:active{border-color:var(--primary)}
.home-loc-icon{font-size:34px;line-height:1}
.home-loc-name{font-size:16px;color:var(--text);font-weight:500;white-space:nowrap}
.home-loc-count{font-size:14px;color:var(--text3);background:var(--bg2);border-radius:var(--radius-full);width:26px;height:26px;display:flex;align-items:center;justify-content:center;text-align:center}

/* Sub-location input */
.sub-input-row{display:flex;gap:8px;margin-top:10px}
.sub-input-row input{flex:1;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px}
.sub-input-row input:focus{border-color:var(--primary)}
.sub-input-row button{padding:10px 16px;background:var(--primary-light);color:var(--primary-dark);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}

/* Compress */
.compress-content{flex:1;display:flex;flex-direction:column;padding:20px 16px calc(var(--tabbar-h) + 20px)}
.compress-success{text-align:center;padding:40px 20px}
.compress-success .cs-icon{font-size:48px;margin-bottom:12px}
.compress-success.show .cs-icon{animation:bounceIn 300ms var(--ease-out)}
.compress-success .cs-msg{font-size:16px;font-weight:600;color:var(--text)}
.rec-content{display:flex;flex-direction:column}
.rec-actions{margin-top:auto;padding-top:8px;padding-bottom:calc(var(--tabbar-h) + 12px);flex-shrink:0}
.compress-actions{margin-top:auto;padding-bottom:20px}
.compress-actions .btn{margin-bottom:10px}

/* Progress bar */
.progress-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:calc(100vw * 9 / 16);height:3px;background:transparent;z-index:var(--z-toast);transition:opacity 300ms var(--ease-out)}
.progress-bar .pb-fill{height:100%;background:var(--primary);width:0;transition:width 200ms linear;border-radius:0 2px 2px 0}
.progress-bar.hidden{opacity:0;pointer-events:none}

/* Toast */
.toast{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%) translateY(-100px);width:calc(100% - 32px);max-width:calc(100vw * 9 / 16 - 32px);padding:12px 16px;background:var(--primary);color:var(--on-primary);border-radius:var(--radius);font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:calc(var(--z-toast) - 1);box-shadow:var(--shadow-md);opacity:0}

/* Offline bar */
.offline-bar{position:fixed;top:0;left:0;right:0;background:var(--warning);color:var(--on-primary);text-align:center;padding:6px 16px;font-size:13px;font-weight:500;z-index:var(--z-toast);transform:translateY(-100%);transition:transform 300ms var(--ease-out)}
.offline-bar.show{transform:translateY(0)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.error{background:var(--danger)}
.toast-action{margin-left:auto;padding:4px 12px;background:rgba(255,255,255,0.2);border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:transform 100ms var(--ease-out)}
.toast-action:active{transform:scale(0.95)}
.toast-action.hidden{display:none}

/* Tab bar */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:calc(100vh * 9 / 16);height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);background:var(--tabbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:stretch;justify-content:space-around;z-index:var(--z-tabbar);transition:transform 300ms var(--ease-drawer),opacity 300ms var(--ease-out)}
.tabbar.hidden{transform:translateX(-50%) translateY(100%);opacity:0;pointer-events:none}
.tabbar.scroll-hidden{transform:translateX(-50%) translateY(100%);opacity:0;pointer-events:none;transition:transform 200ms var(--ease-out),opacity 150ms var(--ease-out)}
.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;padding-top:6px;color:var(--text3);font-size:10px;transition:transform 100ms var(--ease-out),color 200ms var(--ease-out);will-change:transform}
.tab-item:active{transform:scale(0.97)}
.tab-item.active{color:var(--primary)}
.tab-item .ti-icon{font-size:22px;line-height:1;transition:transform 300ms cubic-bezier(0.34,1.56,0.64,1)}
.tab-item.active .ti-icon{transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){.tab-item .ti-icon{transition:none}}
.tab-camera{flex:1;display:flex;align-items:flex-start;justify-content:center}
.tab-camera .tc-btn{width:52px;height:52px;border-radius:var(--radius-full);background:var(--stats-grad);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--camera-shadow);margin-top:-16px;transition:transform 100ms var(--ease-out)}
.tab-camera .tc-btn:active{transform:scale(0.97)}
.tab-camera .tc-btn.ai-btn{font-size:16px;font-weight:700;color:var(--on-primary);letter-spacing:0.5px}

/* AI Chat */
.chat-msg{display:flex;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.chat-msg{opacity:1!important;transform:none!important}}
.chat-msg.user{justify-content:flex-end}
.chat-msg .chat-bubble{max-width:80%;padding:10px 14px;border-radius:var(--radius-lg);font-size:var(--text);line-height:1.5;word-break:break-word}
.chat-msg.ai .chat-bubble{background:var(--card);border:1px solid var(--border);border-top-left-radius:4px}
.chat-msg.user .chat-bubble{background:var(--primary);color:var(--on-primary);border-top-right-radius:4px}
.chat-result-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-top:8px;display:flex;align-items:center;gap:10px;transition:transform 100ms var(--ease-out);cursor:pointer}
.chat-result-card:active{transform:scale(0.98)}
.chat-result-card .crc-thumb{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.chat-result-card .crc-thumb img{width:100%;height:100%;object-fit:cover}
.chat-result-card .crc-info{flex:1;min-width:0}
.chat-result-card .crc-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-result-card .crc-loc{font-size:12px;color:var(--text3);margin-top:2px}
.chat-typing{display:flex;gap:4px;padding:12px 14px}
.chat-typing span{width:8px;height:8px;border-radius:50%;background:var(--text3);animation:typingDot 1.4s ease infinite}
.chat-typing span:nth-child(2){animation-delay:0.2s}
.chat-typing span:nth-child(3){animation-delay:0.4s}
@keyframes typingDot{0%,60%,100%{opacity:0.3;transform:scale(0.8)}30%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.chat-typing span{animation:none;opacity:0.5}}

/* AI Chat Overlay */
.ai-chat-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform 300ms var(--ease-drawer);will-change:transform}
.ai-chat-overlay.show{transform:translateY(0)}
.ai-chat-overlay .ac-header{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;min-height:calc(44px + env(safe-area-inset-top))}
.ai-chat-overlay .ac-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text2);transition:transform 100ms var(--ease-out)}
.ai-chat-overlay .ac-back:active{transform:scale(0.92)}
.ai-chat-overlay .ac-title{font-size:17px;font-weight:600;flex:1}
.ai-chat-overlay .ac-title .ac-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);margin-left:8px;vertical-align:middle}
.ai-chat-overlay .ac-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
.ai-chat-overlay .ac-welcome{text-align:center;padding:40px 20px;color:var(--text3)}
.ai-chat-overlay .ac-welcome .acw-icon{font-size:48px;margin-bottom:12px}
.ai-chat-overlay .ac-welcome .acw-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:6px}
.ai-chat-overlay .ac-welcome .acw-sub{font-size:14px;line-height:1.6}
.ai-chat-overlay .ac-welcome .acw-examples{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.ai-chat-overlay .ac-welcome .acw-examples .pill{cursor:pointer;transition:transform 100ms var(--ease-out)}
.ai-chat-overlay .ac-welcome .acw-examples .pill:active{transform:scale(0.96)}
.ai-chat-overlay .ac-input-bar{display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);flex-shrink:0}
.ai-chat-overlay .ac-input{flex:1;max-height:100px;min-height:40px;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:15px;line-height:1.4;resize:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ai-chat-overlay .ac-send{width:40px;height:40px;border-radius:var(--radius-full);background:var(--stats-grad);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--on-primary);flex-shrink:0;transition:transform 100ms var(--ease-out);box-shadow:var(--camera-shadow)}
.ai-chat-overlay .ac-send:active{transform:scale(0.92)}
.ai-chat-overlay .ac-send:disabled{opacity:0.4;pointer-events:none}
.ai-chat-overlay .ac-scan{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;transition:transform 100ms var(--ease-out);cursor:pointer}
.ai-chat-overlay .ac-scan:active{transform:scale(0.92)}

.match-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform 300ms var(--ease-drawer);will-change:transform}
.match-overlay.show{transform:translateY(0)}
.match-overlay .mo-header{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;min-height:calc(44px + env(safe-area-inset-top))}
.match-overlay .mo-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text2);transition:transform 100ms var(--ease-out)}
.match-overlay .mo-back:active{transform:scale(0.92)}
.match-overlay .mo-title{font-size:17px;font-weight:600;flex:1}
.match-overlay .mo-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;color:var(--primary);background:var(--primary-light);padding:2px 8px;border-radius:var(--radius-sm);margin-left:8px;vertical-align:middle}
.match-overlay .mo-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;justify-content:flex-end}
.match-overlay .mo-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);flex-shrink:0}
.match-overlay .mo-save-new-btn{width:100%;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.match-overlay .mo-save-new-btn:active{transform:scale(0.98)}
.match-overlay .mo-confirm-btn{width:100%;animation:moConfirmIn 250ms var(--ease-out)}
@keyframes moConfirmIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.match-overlay .mo-confirm-btn{animation:none}}
.match-overlay .mo-upload-img{width:100%;max-height:200px;object-fit:contain;border-radius:var(--radius-lg);margin-bottom:12px;background:var(--card)}
.match-overlay .mo-rec-info{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:16px}
.match-overlay .mo-rec-name{font-size:var(--text);font-weight:600;margin-bottom:4px}
.match-overlay .mo-rec-desc{font-size:var(--text-xs);color:var(--text3);margin-bottom:6px;line-height:1.4}
.match-overlay .mo-rec-tags{display:flex;flex-wrap:wrap;gap:4px}
.match-overlay .mo-rec-tags .pill{font-size:var(--text-xs);padding:2px 8px}
.match-overlay .mo-section-title{font-size:var(--text-sm);color:var(--text3);margin-bottom:8px;font-weight:500}
.match-overlay .mo-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;transition:transform 100ms var(--ease-out)}
.match-overlay .mo-item:active{transform:scale(0.98)}
.match-overlay .mo-item-thumb{width:56px;height:56px;border-radius:var(--radius);background:var(--bg2);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.match-overlay .mo-item-thumb img{width:100%;height:100%;object-fit:cover}
.match-overlay .mo-item-info{flex:1;min-width:0}
.match-overlay .mo-item-name{font-size:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-overlay .mo-item-loc{font-size:var(--text-xs);color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px}
.match-overlay .mo-item-score{font-size:var(--text-xs);font-weight:600;color:var(--primary);background:var(--primary-light);padding:4px 8px;border-radius:var(--radius-pill);flex-shrink:0}
.match-overlay .mo-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px}
.match-overlay .mo-loading-text{font-size:var(--text-sm);color:var(--text3);margin-top:12px}
.match-overlay .mo-empty{text-align:center;padding:40px 20px;color:var(--text3)}
.match-overlay .mo-empty-icon{font-size:48px;margin-bottom:8px}
.match-overlay .mo-error{text-align:center;padding:40px 20px;color:var(--danger)}

/* Global Loading Overlay */
.loading-overlay{position:fixed;inset:0;z-index:var(--z-toast);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity 300ms var(--ease-out),visibility 300ms var(--ease-out) allow-discrete;will-change:opacity}
.loading-overlay.show{opacity:1;visibility:visible;@starting-style{opacity:0}}
.loading-content{display:flex;flex-direction:column;align-items:center}
.loading-spinner{position:relative;width:40px;height:40px;animation:loadingSpin 1s linear infinite;will-change:transform}
.loading-dot{position:absolute;top:0;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--primary);transform-origin:4px 20px}
.loading-dot:nth-child(1){transform:rotate(0deg);opacity:1}
.loading-dot:nth-child(2){transform:rotate(45deg);opacity:.875}
.loading-dot:nth-child(3){transform:rotate(90deg);opacity:.75}
.loading-dot:nth-child(4){transform:rotate(135deg);opacity:.625}
.loading-dot:nth-child(5){transform:rotate(180deg);opacity:.5}
.loading-dot:nth-child(6){transform:rotate(225deg);opacity:.375}
.loading-dot:nth-child(7){transform:rotate(270deg);opacity:.25}
.loading-dot:nth-child(8){transform:rotate(315deg);opacity:.125}
.loading-title{font-size:16px;font-weight:600;color:#333;margin-top:14px}
.loading-sub{font-size:13px;color:#999;margin-top:4px}
@keyframes loadingSpin{to{transform:rotate(360deg)}}
@media(prefers-color-scheme:dark){.loading-overlay{background:rgba(18,18,20,0.92)}.loading-title{color:var(--text)}.loading-sub{color:var(--text3)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}.loading-dot{opacity:.6}}

/* Overlays */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 300ms var(--ease-out),display 300ms var(--ease-out) allow-discrete}
.overlay.show{display:flex;opacity:1;@starting-style{opacity:0}}
.overlay-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Image overlay */
#overlay-image .iv-container{position:relative;z-index:var(--z-base);max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#overlay-image .iv-img{max-width:95%;max-height:85%;border-radius:var(--radius-sm);transform-origin:center center;transition:transform 200ms var(--ease-out);will-change:transform}
#overlay-image .iv-close{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:16px;width:36px;height:36px;border-radius:var(--radius-full);background:rgba(255,255,255,0.2);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:calc(var(--z-base) + 1);transition:transform 100ms var(--ease-out)}
#overlay-image .iv-close:active{transform:scale(0.9)}
#overlay-image .iv-download{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:16px;width:36px;height:36px;border-radius:var(--radius-full);background:rgba(255,255,255,0.2);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:16px;z-index:calc(var(--z-base) + 1);transition:transform 100ms var(--ease-out)}
#overlay-image .iv-download:active{transform:scale(0.9)}
#overlay-image .iv-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--radius-full);background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:24px;z-index:calc(var(--z-base) + 1);transition:transform 100ms var(--ease-out),opacity 200ms var(--ease-out)}
#overlay-image .iv-nav:active{transform:translateY(-50%) scale(0.9)}
#overlay-image .iv-prev{left:12px}
#overlay-image .iv-next{right:12px}
#overlay-image .iv-counter{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);color:var(--on-primary);padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-sm);z-index:calc(var(--z-base) + 1)}
#overlay-image .iv-nav.hidden,#overlay-image .iv-counter.hidden{display:none}

/* Modal */
#overlay-modal .om-card{position:relative;z-index:var(--z-base);width:calc(100% - 48px);max-width:320px;background:var(--surface-3);border-radius:var(--radius-lg);padding:24px;text-align:center;transform:scale(0.9);transition:transform 300ms var(--ease-out);will-change:transform;transform-origin:center center}
#overlay-modal.show .om-card{transform:scale(1);@starting-style{transform:scale(0.9)}}
#overlay-modal .om-title{font-size:var(--text-lg);font-weight:600;margin-bottom:8px}
#overlay-modal .om-desc{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.5}
#overlay-modal .om-actions{display:flex;gap:8px}
#overlay-modal .om-actions .btn{flex:1}

/* Bottom sheet */
#filter-sheet,#cat-sheet,#batch-tag-sheet,#export-sheet{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-overlay);display:none;opacity:0;transition:opacity 300ms var(--ease-out),display 300ms var(--ease-out) allow-discrete}
#filter-sheet.show,#cat-sheet.show,#batch-tag-sheet.show,#export-sheet.show{display:block;opacity:1;@starting-style{opacity:0}}
#filter-sheet .bs-bg,#cat-sheet .bs-bg,#batch-tag-sheet .bs-bg,#export-sheet .bs-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#filter-sheet .bs-card,#cat-sheet .bs-card,#batch-tag-sheet .bs-card,#export-sheet .bs-card{position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:calc(100dvh * 9 / 16);background:var(--surface-3);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));transition:transform 300ms var(--ease-drawer);max-height:70vh;overflow-y:auto;transform-origin:bottom center;will-change:transform}
#filter-sheet.show .bs-card,#cat-sheet.show .bs-card,#batch-tag-sheet.show .bs-card,#export-sheet.show .bs-card{transform:translateX(-50%) translateY(0);@starting-style{transform:translateX(-50%) translateY(100%)}}
#filter-sheet .bs-handle,#cat-sheet .bs-handle,#batch-tag-sheet .bs-handle,#export-sheet .bs-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
#filter-sheet .bs-title,#cat-sheet .bs-title,#batch-tag-sheet .bs-title,#export-sheet .bs-title{font-size:var(--text-lg);font-weight:600;text-align:center;margin-bottom:16px}
.loc-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius);transition:background 100ms var(--ease-out);font-size:15px}
.loc-item:active{background:var(--bg);transform:scale(0.98)}
.loc-item.selected{background:var(--primary-light);color:var(--primary-dark);font-weight:600}
.loc-item .li-icon{font-size:18px}
.loc-item .li-check{margin-left:auto;color:var(--primary);font-size:16px}
.loc-item .li-check.hidden{display:none}

/* Detail */
.detail-photo{width:100%;height:100%;border-radius:var(--radius);object-fit:cover;background:var(--bg);opacity:0;transition:opacity 250ms var(--ease-out)}
.detail-photo.loaded{opacity:1}
.detail-gallery{display:flex;gap:4px;overflow-x:auto;margin-top:4px;scrollbar-width:none}
.detail-gallery::-webkit-scrollbar{display:none}
.detail-gallery .dg-thumb{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;position:relative}
.detail-gallery .dg-thumb.active{border-color:var(--primary)}
.detail-gallery .dg-thumb img{width:100%;height:100%;object-fit:cover}
.detail-gallery .dg-thumb .dg-del{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:var(--radius-full);background:rgba(0,0,0,0.6);color:var(--on-primary);font-size:10px;display:flex;align-items:center;justify-content:center}
.detail-gallery .dg-thumb .dg-star{position:absolute;bottom:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background:rgba(0,0,0,0.4);color:var(--on-primary);font-size:9px;display:flex;align-items:center;justify-content:center}
.detail-gallery .dg-thumb.is-primary .dg-star{background:var(--orange)}
.detail-gallery .dg-thumb .dg-del::after{content:'';position:absolute;width:36px;height:36px;border-radius:var(--radius-full)}
.detail-gallery .dg-thumb .dg-star::after{content:'';position:absolute;width:36px;height:36px;border-radius:var(--radius-full)}
.detail-add-photo{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;margin-bottom:16px;background:var(--card);border:1.5px dashed var(--border);border-radius:var(--radius);font-size:var(--text-sm);color:var(--text2);cursor:pointer;transition:border 200ms var(--ease-out),color 200ms var(--ease-out)}
.detail-add-photo:active{transform:scale(0.98);border-color:var(--primary);color:var(--primary)}
/* Detail page - fixed single screen layout */
.detail-content{display:flex;flex-direction:column;overflow:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-top:10px;padding-left:16px;padding-right:16px;gap:6px;flex:1;min-height:0;padding-bottom:calc(var(--tabbar-h) + 20px)}
.detail-img-container{position:relative;width:100%;flex:1 1 auto;min-height:140px;display:flex;flex-direction:column}
.detail-img-container #detail-img-wrap{width:100%;border-radius:var(--radius);flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.detail-img-container #detail-img-wrap:empty{min-height:140px}
.detail-add-photo-icon{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:20px;font-weight:300;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform 100ms var(--ease-out);z-index:1}
.detail-add-photo-icon:active{transform:scale(0.92)}
.detail-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px;flex-shrink:0}
.detail-actions .btn{margin-bottom:0}
.detail-actions .btn-danger{flex:1}
.detail-actions .btn-primary{flex:2}
.detail-content .field{margin-bottom:0}
@keyframes spin{to{transform:rotate(360deg)}}
.detail-photo-placeholder{width:100%;flex:1;min-height:140px;border-radius:var(--radius);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:48px}
.detail-meta{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text3);margin-bottom:16px}
.detail-meta .dm-item{display:flex;align-items:center;gap:4px}
/* detail-actions moved to new fixed layout above */

/* Notifications */
.notif-tabs{display:flex;gap:0;margin-bottom:12px;background:var(--card);border-radius:var(--radius);padding:4px}
.notif-tab{flex:1;padding:8px;text-align:center;font-size:var(--text-sm);color:var(--text2);border-radius:var(--radius-sm);transition:background 200ms var(--ease-out),color 200ms var(--ease-out)}
.notif-tab.active{background:var(--primary);color:var(--on-primary);font-weight:500}
.notif-item{display:flex;gap:12px;padding:14px;background:var(--card);border-radius:var(--radius);margin-bottom:8px;box-shadow:var(--shadow);transition:transform 100ms var(--ease-out)}
.notif-item:active{transform:scale(0.98)}
.notif-item.unread{border-left:3px solid var(--primary)}
.notif-item .ni-icon{width:36px;height:36px;border-radius:var(--radius-full);background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.notif-item .ni-content{flex:1}
.notif-item .ni-title{font-size:14px;font-weight:500;margin-bottom:2px}
.notif-item .ni-desc{font-size:var(--text-sm);color:var(--text2);line-height:1.4}
.notif-item .ni-time{font-size:var(--text-xs);color:var(--text3);margin-top:4px}

/* Search */
.search-history{margin-bottom:16px}
.sh-item{display:flex;align-items:center;gap:8px;padding:12px;background:var(--card);border-radius:var(--radius);margin-bottom:4px;font-size:14px;color:var(--text2);transition:transform 100ms var(--ease-out);border-bottom:1px solid var(--border)}
.sh-item:last-child{border-bottom:none;margin-bottom:0}
.sh-item:active{transform:scale(0.98)}
.sh-item .shi-icon{font-size:14px;color:var(--text3);flex-shrink:0}
.sh-item .shi-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-item .shi-del{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3);opacity:0.5;transition:opacity 150ms var(--ease-out);border-radius:var(--radius-sm)}
.sh-item .shi-del:active{opacity:1;transform:scale(1.2)}
.hot-search{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.loc-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:transform 100ms var(--ease-out)}
.loc-card:active{transform:scale(0.98)}
.loc-card .lc-emoji{font-size:20px;flex-shrink:0}
.loc-card .lc-name{font-size:15px;font-weight:500;color:var(--text);flex:1}
.loc-card .lc-count{font-size:var(--text-sm);color:var(--text3);background:var(--bg);padding:2px 10px;border-radius:var(--radius-pill);flex-shrink:0}
.pill-hot{background:var(--primary-light)!important;color:var(--primary)!important;border-color:var(--primary)!important;font-weight:600}

/* Stats */
.stats-tabs{display:flex;gap:0;margin-bottom:16px;background:var(--card);border-radius:var(--radius);padding:4px;overflow-x:auto;scrollbar-width:none}
.stats-tabs::-webkit-scrollbar{display:none}
.stats-tab{flex:1;padding:8px 12px;text-align:center;font-size:var(--text-sm);color:var(--text2);border-radius:var(--radius-sm);transition:background 200ms var(--ease-out),color 200ms var(--ease-out);white-space:nowrap}
.stats-tab.active{background:var(--primary);color:var(--on-primary);font-weight:500}
.chart-card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.chart-card .cc-title{font-size:14px;font-weight:600;margin-bottom:12px}
.tag-bar-row{margin-bottom:12px}
.tag-bar-header{display:flex;justify-content:space-between;font-size:var(--text-sm);margin-bottom:4px}
.tag-bar-val{color:var(--text2);font-weight:600}
.tag-bar-track{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar-anim{height:100%;width:0;background:var(--stats-grad);border-radius:4px;transition:width 400ms var(--ease-out)}
.trend-svg{width:100%;height:auto}
.chart-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 400ms var(--ease-out)}
.trend-dot{opacity:0;transition:opacity 300ms var(--ease-out)}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-wrap svg{width:120px;height:120px;flex-shrink:0;animation:scaleIn 300ms var(--ease-out);transform-origin:center}
.donut-legend{flex:1}
.stats-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stats-summary .ss-card{background:var(--card);border-radius:var(--radius-sm);padding:10px 6px;text-align:center;box-shadow:var(--shadow-sm)}
.stats-summary .ss-num{font-size:var(--text-lg);font-weight:700;color:var(--primary);line-height:1.2}
.stats-summary .ss-label{font-size:var(--text-xs);color:var(--text3);margin-top:2px}
.range-bar{display:flex;gap:0;margin-bottom:12px;background:var(--card);border-radius:var(--radius-sm);padding:3px}
.range-bar .range-btn{flex:1;padding:6px 10px;text-align:center;font-size:var(--text-sm);color:var(--text2);border-radius:var(--radius-xs);cursor:pointer;transition:background 150ms var(--ease-out),color 150ms var(--ease-out)}
.range-bar .range-btn.active{background:var(--primary);color:var(--on-primary);font-weight:500}
.range-bar .range-btn:active{transform:scale(0.97)}
.range-bar.hidden{display:none}
.export-option{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 150ms var(--ease-out)}
.export-option:active{background:var(--bg)}
.export-option:last-child{border-bottom:none}
.legend-item{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);margin-bottom:6px}
.legend-item .li-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.legend-item .li-name{flex:1}
.legend-item .li-val{font-weight:600;color:var(--text2)}

/* Profile */
.profile-header{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);margin-bottom:8px;border-radius:var(--radius)}
.profile-avatar{width:52px;height:52px;border-radius:var(--radius-full);background:var(--avatar-grad);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);color:var(--on-primary);flex-shrink:0}
.profile-info .pi-name{font-size:17px;font-weight:600}
.profile-info .pi-email{font-size:var(--text-sm);color:var(--text3);margin-top:2px}
.menu-group{background:var(--card);border-radius:var(--radius);overflow:hidden;margin-bottom:8px;box-shadow:var(--shadow)}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);transition:transform 100ms var(--ease-out);font-size:15px;cursor:pointer}
.menu-item:active{transform:scale(0.98)}
.menu-item:last-child{border-bottom:none}
.menu-item .mi-icon{font-size:var(--text-xl);width:24px;text-align:center}
.menu-item .mi-text{flex:1}
.menu-item .mi-arrow{color:var(--text3);font-size:14px}
.theme-switch{width:44px;height:24px;border-radius:12px;background:var(--border);position:relative;transition:background 200ms var(--ease-out);cursor:pointer;flex-shrink:0}
.theme-switch:active{transform:scale(0.95)}
.theme-switch.on{background:var(--primary)}
.theme-switch .ts-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--radius-full);background:var(--card);transition:transform 200ms var(--ease-out);display:flex;align-items:center;justify-content:center;font-size:11px}
.theme-switch.on .ts-knob{transform:translateX(20px)}
.view-toggle{display:flex;gap:4px;background:var(--bg);border-radius:var(--radius-sm);padding:3px}
.view-toggle .vt-btn{padding:6px 10px;border-radius:var(--radius-xs);font-size:14px;color:var(--text3);cursor:pointer;transition:background 150ms var(--ease-out),color 150ms var(--ease-out),box-shadow 150ms var(--ease-out);background:none;border:none;position:relative}
.view-toggle .vt-btn.active{background:var(--card);color:var(--primary);box-shadow:var(--shadow-sm)}
.view-toggle .vt-btn:active{transform:scale(0.92)}

/* List animation */
.fade-in{opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.fade-in.show{opacity:1;transform:translateY(0)}

/* Loading */
.loading-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 0.8s linear infinite}
.spinner-sm{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 0.8s linear infinite;display:inline-block}
.btn-loading-inner{display:inline-flex;align-items:center;gap:6px}
.loading-center p{font-size:var(--text-sm);color:var(--text3);margin-top:12px}


.hidden{display:none!important}

/* ===== Utility classes ===== */
.pad-sm{padding:12px}
.pad-content{padding:12px 16px}
.pad-lg{padding:16px}
.flex-1{flex:1}
.flex-2{flex:2}
.flex-auto{flex:0 0 auto}
.flex-center{display:flex;align-items:center}
.flex-center-gap{display:flex;align-items:center;gap:8px}
.flex-gap{display:flex;gap:8px}
.mt-sm{margin-top:8px}
.mt-md{margin-top:12px}
.mt-lg{margin-top:16px}
.mr-sm{margin-right:8px}
.m-0{margin:0}
.py-sm{padding-top:8px;padding-bottom:8px}
.p-md{padding:12px}
.w-full{width:100%}
.w-auto{width:auto}
.text-center{text-align:center}
.text-danger{color:var(--danger)}
.text-primary{color:var(--primary)}
.text-muted-sm{font-size:var(--text-sm);color:var(--text2);white-space:nowrap}
.text-tertiary-sm{font-size:var(--text-sm);color:var(--text3)}
.text-tertiary{color:var(--text3)}
.empty-text{text-align:center;padding:20px;color:var(--text3);font-size:var(--text-sm)}
.label-hint{font-size:12px;color:var(--text3);font-weight:400}
.font-normal{font-weight:400}
.flex-center-gap-sm{display:flex;align-items:center;gap:6px}
.cat-child-new{color:var(--primary);font-size:var(--text-sm)}
.req-asterisk{color:var(--danger)}
.btn-mt-sm{margin-top:8px}
.btn-max-w{max-width:200px}
.btn-danger-outline{width:100%;margin-top:16px;border-color:var(--danger);color:var(--danger)}
.btn-fav{flex:0 0 auto;width:auto;padding:14px 20px}
.pill-lg{font-size:14px;padding:8px 16px}
.tag-list-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.tag-selected-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:8px}
.ai-badge{background:var(--primary);color:var(--on-primary);font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.ai-badge-wrap{display:inline-flex;align-items:center;gap:4px}
.ai-badge-danger{background:var(--danger);color:var(--on-primary);font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.fade-init{opacity:0;transition:opacity 300ms var(--ease-out)}
.field-max-w{width:100%;max-width:300px}
.sort-dir{margin-left:2px;cursor:pointer;position:relative;display:inline-block}
.export-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.export-row:last-child{border-bottom:none}
.export-icon{font-size:24px}
.export-info{flex:1}
.export-title{font-weight:500;font-size:var(--text)}
.export-desc{font-size:var(--text-xs);color:var(--text3);margin-top:2px}
.export-action{color:var(--primary);font-size:var(--text-sm)}

/* ===== Onboarding ===== */
#onboarding{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal);background:var(--bg);display:none;flex-direction:column;opacity:0;transition:opacity 300ms var(--ease-out),display 300ms var(--ease-out) allow-discrete}
#onboarding.show{display:flex;opacity:1;@starting-style{opacity:0}}
.onb-step{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center}
.onb-step.active{display:flex;animation:onbFadeIn 300ms var(--ease-out)}
@keyframes onbFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.onb-logo{font-size:64px;margin-bottom:16px;animation:onbBounce 2s var(--ease-in-out) 3}
@keyframes onbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.onb-logo{animation:none}}
@keyframes bounceIn{0%{transform:scale(0.9);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes scaleIn{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}}
.onb-title{font-size:24px;font-weight:700;margin-bottom:8px;color:var(--text)}
.onb-sub{font-size:15px;color:var(--text2);line-height:1.6;margin-bottom:32px;max-width:280px}
.onb-step-num{font-size:var(--text-sm);color:var(--primary);font-weight:600;margin-bottom:16px}
.onb-icon-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 24px}
.onb-icon-pick{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);background:var(--card);border:2px solid var(--border);transition:border-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.onb-icon-pick:active{transform:scale(0.92)}
.onb-icon-pick.selected{border-color:var(--primary);background:var(--primary-light)}
.onb-btn-row{display:flex;gap:10px;width:100%;max-width:300px;margin-top:16px}
.onb-dots{display:flex;gap:6px;margin-top:24px}
.onb-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--border);transition:background 200ms var(--ease-out),width 200ms var(--ease-out)}
.onb-dot.active{background:var(--primary);width:24px;border-radius:4px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
/* ===== Cache Page ===== */
.cache-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px}
.cache-card-top{display:flex;align-items:center;justify-content:space-between}
.cache-card-left{display:flex;align-items:center;gap:12px}
.cache-card-icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--primary-light);flex-shrink:0}
.cache-card-info{display:flex;flex-direction:column;gap:2px}
.cache-card-title{font-size:var(--text);font-weight:600;color:var(--text)}
.cache-card-size{font-size:var(--text-xs);color:var(--text3)}
.cache-clear-btn{padding:6px 14px;font-size:var(--text-xs);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--card);color:var(--danger);cursor:pointer;transition:background 200ms var(--ease-out);white-space:nowrap}
.cache-clear-btn:active{transform:scale(0.97)}
.nav-icons{display:flex;align-items:center;gap:2px}
.nav-icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);transition:background 100ms var(--ease-out)}
.nav-icon-btn:active{background:var(--primary-light);transform:scale(0.95)}

/* ===== Capacity banner ===== */
.capacity-banner{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--danger);color:#fff;font-weight:700;font-size:15px;padding:9px 12px;min-height:44px;box-shadow:0 2px 8px rgba(0,0,0,0.18)}
.capacity-banner .cb-sub{font-weight:500;font-size:13px;opacity:.92}

/* ===== My data ===== */
.data-ring-wrap{display:flex;justify-content:center;padding:18px 0 6px}
.data-ring{width:176px;height:176px;border-radius:50%;display:grid;place-items:center;position:relative}
.data-ring-inner{width:128px;height:128px;border-radius:50%;background:var(--card);display:grid;place-items:center;flex-direction:column;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
.data-ring-pct{font-size:28px;font-weight:700}
.data-ring-cap{font-size:12px;color:var(--text2)}
.data-stats{background:var(--card);border-radius:16px;padding:4px 16px;margin-top:14px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.data-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}
.data-row:last-child{border-bottom:none}
.data-row .dr-label{font-size:14px;color:var(--text)}
.data-row .dr-val{font-size:14px;color:var(--text2);font-weight:600}
.data-row .dr-note{font-size:12px;color:var(--text3)}
.data-note{padding:12px 6px;font-size:12px;color:var(--text3);line-height:1.6}

/* ===== Recycle bin ===== */
.trash-actions{margin:6px 0 14px;text-align:center}
.trash-group-title{font-size:13px;color:var(--text2);font-weight:600;margin:12px 2px 8px}
.trash-item{background:var(--card);border-radius:14px;padding:10px 14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.trash-thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;font-size:24px;flex:none}
.trash-info{flex:1;min-width:0}
.trash-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-meta{font-size:12px;color:var(--text3);margin-top:2px}
.trash-item-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.trash-btn{font-size:12px;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;min-height:32px}
.trash-btn.restore{color:var(--primary);border-color:var(--primary)}
.trash-btn.del{color:var(--danger);border-color:var(--danger)}
.trash-empty{text-align:center;color:var(--text3);font-size:14px;padding:60px 20px}
@media (prefers-reduced-motion:reduce){.data-ring,.data-ring-inner{transition:none}}