/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * audience: 小方个人使用 · use: 记录、查找、发货 · tone: utilitarian
 * pre-emit critique: P4 H4 E3 S4 R4 V3 · visual verification: pending browser runtime
 */
@import url('tokens.css');
:root{
 --color-accent-ink:oklch(100% 0 0);--color-accent-hover:oklch(42% .16 260);
 --color-danger:oklch(44% .17 22);--color-danger-soft:oklch(97% .014 22);
 --color-success:oklch(39% .075 155);--color-success-soft:oklch(96% .012 155);
 --color-placeholder:oklch(52% .024 250);--color-scrim:oklch(23% .025 250 / .42);
 --color-shadow:oklch(23% .025 250 / .12);--color-photo:oklch(95% .009 250);
 --radius-input:12px;--radius-card:16px;--radius-sheet:24px;
 --space-2xl:48px;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-display:clamp(1.5rem,3vw,2rem);
 --dur-fast:120ms;--dur-short:180ms;--dur-panel:220ms;--banner-height:72px;
 --ink:var(--color-ink);--muted:var(--color-muted);--blue:var(--color-accent);--blue-hover:var(--color-accent-hover);--line:var(--color-rule);--canvas:var(--color-paper);--red:var(--color-danger)
}
html,body{overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0}button,a{touch-action:manipulation}button{white-space:nowrap}button,input,textarea,select{transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}button:disabled,input:disabled,textarea:disabled,select:disabled{opacity:.55;cursor:not-allowed}button[aria-busy=true]{cursor:progress;opacity:.65}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:active{transform:scale(.985)}button[data-state=error]{outline:2px solid var(--color-danger)}button[data-state=success]{outline:2px solid var(--color-success)}
.button{min-height:48px;border-radius:var(--radius-input);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:600;box-shadow:none;gap:var(--space-sm)}.primary{background:var(--color-accent);color:var(--color-accent-ink);box-shadow:none}.primary:hover{background:var(--color-accent-hover)}.secondary{color:var(--color-ink);background:var(--color-surface);border-color:var(--color-rule)}.secondary:hover{background:var(--color-paper)}.danger{background:var(--color-danger-soft);color:var(--color-danger)}.danger-solid{background:var(--color-danger);color:var(--color-accent-ink)}.text-button{min-height:44px;padding:var(--space-sm);color:var(--color-muted)}.text-button:hover{background:var(--color-paper);border-radius:var(--radius-input)}
input:not([type=file]),textarea,select{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-input);padding:var(--space-sm) var(--space-md);font-size:var(--text-md);min-height:48px;line-height:1.6;margin-top:var(--space-sm);max-width:100%;min-width:0}input::placeholder,textarea::placeholder{color:var(--color-placeholder)}input:focus,textarea:focus,select:focus{border-color:var(--color-focus)}label,.form-field{margin-bottom:var(--space-lg);font-size:var(--text-sm);font-weight:600}.form-field>label{margin:0}.field-help,.field-meta{font-size:var(--text-xs);color:var(--color-muted);font-weight:400}.error{min-height:24px;font-size:var(--text-sm);color:var(--color-danger);padding:var(--space-xs) 0}.error:empty{display:block;visibility:hidden;padding:var(--space-xs) 0}.error:not(:empty){border-radius:var(--radius-input);background:var(--color-danger-soft);padding:var(--space-sm) var(--space-md)}
.topbar{height:var(--banner-height);padding:var(--space-md) var(--space-xl);background:var(--color-surface);border-bottom:1px solid var(--color-rule)}.brand{font-size:var(--text-md);gap:var(--space-sm)}.brand-mark{width:36px;height:36px;font-size:var(--text-md);border-radius:10px;background:var(--color-accent);color:var(--color-accent-ink)}.top-actions{gap:var(--space-sm)}.workspace{max-width:1440px;grid-template-columns:208px minmax(0,1fr);min-height:calc(100dvh - var(--banner-height))}.sidebar{padding:var(--space-xl) var(--space-md);background:var(--color-surface);border-color:var(--color-rule)}.side-heading{font-size:var(--text-xs);margin:0 var(--space-sm) var(--space-sm);color:var(--color-muted)}.side-all{padding:var(--space-sm) var(--space-md);min-height:48px;margin-bottom:var(--space-xl);border-radius:var(--radius-input);background:var(--color-soft);color:var(--color-accent)}.side-all span:last-child{background:var(--color-surface);color:var(--color-muted)}.category-nav button{font-size:var(--text-sm);min-height:44px;padding:var(--space-sm) var(--space-md)}.category-nav button:hover,.category-nav button.active{background:var(--color-soft);color:var(--color-accent)}.collection{padding:var(--space-xl);max-width:100%;min-width:0}.collection-heading{margin-bottom:var(--space-lg);align-items:center;gap:var(--space-md)}.collection-heading h1{gap:var(--space-sm);font-size:var(--text-display);letter-spacing:-.03em}.collection-heading h1 #collection-name{font:inherit;background:none;color:var(--color-ink);padding:0;letter-spacing:inherit}.collection-heading #total-count{font-size:var(--text-sm);font-weight:500;background:var(--color-rule);color:var(--color-muted);border-radius:8px;padding:var(--space-xs) var(--space-sm)}.collection-subtitle{font-size:var(--text-sm);color:var(--color-muted);font-weight:400;margin-top:var(--space-sm)}.section-tabs{margin-bottom:var(--space-lg);background:transparent;border-radius:0;padding:0;gap:var(--space-sm);border-bottom:1px solid var(--color-rule);width:100%}.section-tabs button{border-radius:0;border:0;border-bottom:2px solid transparent;padding:var(--space-sm) var(--space-md);min-height:48px;font-size:var(--text-sm);color:var(--color-muted);background:transparent}.section-tabs button.active{background:transparent;border-bottom-color:var(--color-accent);color:var(--color-accent)}.section-tabs button:hover{background:var(--color-soft)}
.searchbar{min-height:52px;border-radius:var(--radius-input);padding:0 var(--space-md);background:var(--color-surface);gap:var(--space-md)}.searchbar input{padding:var(--space-sm) 0;margin:0;min-height:48px;font-size:var(--text-md);outline:none}.searchbar:focus-within{border-color:var(--color-focus);outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:none}.search-icon{border-color:var(--color-muted)}.search-icon:after{background:var(--color-muted)}.filter-row{gap:var(--space-sm);margin:var(--space-md) 0 var(--space-lg);align-items:center}.filter-pickers{gap:var(--space-sm)}.filter-row select{font-size:var(--text-sm);padding:var(--space-sm) var(--space-md);margin:0;min-height:44px;color:var(--color-muted);background:var(--color-surface);border-color:var(--color-rule);max-width:240px}.filter-row>select{background:transparent;border-color:var(--color-rule)}.results-line{margin-bottom:var(--space-md)}.results-line p{font-size:var(--text-xs)}#list-error:empty,#shipment-error:empty{min-height:0;padding:0}
.item-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}.item-card{border-radius:var(--radius-card);background:var(--color-surface);border:1px solid var(--color-rule);box-shadow:none;transition:transform var(--dur-short) var(--ease-out)}.item-card:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--color-focus)}.card-photo,.card-photo-empty{aspect-ratio:4/3;background:var(--color-photo)}.card-photo-empty{color:var(--color-muted)}.no-photo-icon{font-size:var(--text-xl);border:1px solid var(--color-rule);color:var(--color-muted);width:48px;height:48px;border-radius:var(--radius-input)}.card-body{padding:var(--space-md)}.card-category{background:var(--color-paper);color:var(--color-muted);font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm);border-radius:6px;margin-bottom:var(--space-sm)}.card-body h3{font-size:var(--text-md);font-weight:600}.card-location{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-sm)}.card-location:before{color:var(--color-muted)}.card-date{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-md)}.stock-badge,.status-pill{background:var(--color-success-soft);color:var(--color-success);padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs);border-radius:6px;line-height:1.5}.stock-badge.is-empty{color:var(--color-muted);background:var(--color-paper)}.status-pill.cancelled{background:var(--color-paper);color:var(--color-muted)}.stock-badge{margin-top:var(--space-sm)}
.empty{border:1px dashed var(--color-rule);background:var(--color-surface);border-radius:var(--radius-card);min-height:260px;margin:var(--space-lg) 0;padding:var(--space-xl)}.empty-symbol{background:var(--color-paper);color:var(--color-muted);width:48px;height:48px;border-radius:var(--radius-input);font-size:var(--text-xl);margin-bottom:var(--space-md)}.empty h2{font-size:var(--text-lg)}.empty p{font-size:var(--text-sm);margin:var(--space-sm) 0 var(--space-lg);color:var(--color-muted)}.collection-footer{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xl);padding-top:var(--space-md)}.pagination{margin-top:var(--space-lg);gap:var(--space-md)}.pagination .button{min-width:88px}
#shipment-search{margin:0;min-height:52px}#shipment-list{margin-top:var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-card)}.shipment-row{min-height:104px;padding:var(--space-lg);background:var(--color-surface);gap:var(--space-md);white-space:normal}.shipment-row:hover{background:var(--color-paper)}.shipment-row .status-pill{white-space:nowrap;margin:0;flex-shrink:0}.shipment-row strong{font-size:var(--text-md);font-weight:600}.shipment-row .muted{font-size:var(--text-xs);margin-top:var(--space-sm);white-space:normal}.shipment-icon{color:var(--color-muted);font-size:var(--text-xl)}#shipment-detail-body>p{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-sm)}
dialog{border:1px solid var(--color-rule);border-radius:var(--radius-sheet);box-shadow:0 24px 80px var(--color-shadow);background:var(--color-surface);color:var(--color-ink);max-width:min(720px,calc(100vw - 48px));max-height:calc(100dvh - 48px)}dialog::backdrop{background:var(--color-scrim);backdrop-filter:blur(3px)}dialog[open]{animation:hallmark-enter var(--dur-panel) var(--ease-out)}@keyframes hallmark-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.editor-dialog{width:680px}.editor-dialog form{max-height:calc(100dvh - 48px)}.dialog-heading{padding:var(--space-lg);gap:var(--space-md);background:var(--color-surface);align-items:center;border-color:var(--color-rule)}.dialog-heading h2{font-size:var(--text-lg)}.close-button{width:44px;height:44px;border-radius:var(--radius-input);background:var(--color-paper);color:var(--color-muted);font-size:var(--text-xl)}.close-button:hover{background:var(--color-rule)}.editor-body,.detail-body{padding:var(--space-lg)}.form-section-title{font-size:var(--text-sm);margin:var(--space-xl) 0 var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--color-rule);color:var(--color-muted);font-weight:600}.form-section-title:first-child{margin-top:0;border-top:0;padding-top:0}.photo-section{margin-bottom:var(--space-lg)}.photo-preview{gap:var(--space-sm);margin:var(--space-md) 0}.photo-slot{width:calc((100% - 16px)/3)}.photo-remove{width:32px;height:32px;color:var(--color-accent-ink);background:var(--color-ink);border-color:var(--color-surface)}.photo-slot img{border-radius:var(--radius-input)}.photo-buttons{gap:var(--space-sm)}.file-button:focus-within{outline:3px solid var(--color-focus)}.form-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}.dialog-footer{padding:var(--space-md) var(--space-lg);background:var(--color-surface);border-color:var(--color-rule);gap:var(--space-sm);border-radius:0 0 var(--radius-sheet) var(--radius-sheet)}.dialog-footer .button{flex:initial;min-width:88px}.dialog-footer #save-item,.dialog-footer #ship-submit{min-width:160px}.detail-dialog>.dialog-heading{background:var(--color-surface);top:0;z-index:2}.detail-dialog>.dialog-footer{z-index:2}.detail-location{background:var(--color-paper);color:var(--color-ink);padding:var(--space-md);border-radius:var(--radius-input)}.detail-location small{color:var(--color-muted)}.detail-main-photo{background:var(--color-photo);border-radius:var(--radius-input)}.detail-thumbs{gap:var(--space-sm);margin:var(--space-md) 0 var(--space-lg)}.detail-times{margin-top:var(--space-lg);padding-top:var(--space-md);gap:var(--space-sm)}.detail-body section{padding-top:var(--space-lg)}.small-dialog{width:440px;padding:var(--space-lg)}.small-dialog>.dialog-footer{margin:var(--space-lg) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg))}.small-dialog .error{margin:var(--space-sm) 0}.small-dialog>p{font-size:var(--text-sm)}
.md-editor{border-radius:var(--radius-input);margin-top:var(--space-sm);background:var(--color-surface);overflow:visible}.md-editor:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}.md-toolbar{background:var(--color-paper);border-bottom:1px solid var(--color-rule);padding:var(--space-xs);border-radius:var(--radius-input) var(--radius-input) 0 0;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.md-toolbar button{min-height:40px;min-width:40px;font-size:var(--text-xs);padding:var(--space-sm);line-height:1;border-radius:8px;color:var(--color-muted)}.md-toolbar button:hover{background:var(--color-rule);color:var(--color-ink)}.md-toolbar button:last-child{background:var(--color-surface);color:var(--color-accent);border:1px solid var(--color-rule);min-width:56px}.md-editor textarea{padding:var(--space-md);font-size:var(--text-md);min-height:76px;outline:none;border-radius:0 0 var(--radius-input) var(--radius-input);box-shadow:none;resize:vertical}.md-editor textarea:focus-visible{outline:none}.md-editor.is-long textarea{min-height:156px}.md-preview{padding:var(--space-md);font-size:var(--text-md);line-height:1.8;max-width:100%;color:var(--color-ink);min-height:48px}.md-preview a{color:var(--color-accent)}.md-preview pre{background:var(--color-paper);border-radius:8px;padding:var(--space-md)}.md-preview blockquote{color:var(--color-muted);border-color:var(--color-rule)}.field-meta{display:flex;justify-content:space-between;gap:var(--space-sm);margin:var(--space-xs) var(--space-xs) 0}.field-meta .near-limit{color:var(--color-danger)}.file-button input:disabled{cursor:not-allowed}.detail-body .card-category.md-preview{padding:var(--space-xs) var(--space-sm)}.detail-body .card-category p{margin:0}.detail-body h1{font-size:var(--text-xl)}.detail-body h1 .md-preview{font:inherit;padding:0}.detail-body h1 p{margin:0}.toast{background:var(--color-ink);color:var(--color-accent-ink);box-shadow:none}.skeleton{background:var(--color-photo);animation:hallmark-pulse 1.4s var(--ease-in-out) infinite;border-color:var(--color-rule);border-radius:var(--radius-card)}@keyframes hallmark-pulse{50%{opacity:.5}}
.auth-layout{background:var(--color-paper);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auth-intro{background:var(--color-paper);color:var(--color-ink);padding:var(--space-2xl);border-right:1px solid var(--color-rule)}.auth-intro .brand-mark{background:var(--color-accent);color:var(--color-accent-ink);width:56px;height:56px;border-radius:16px;margin-bottom:var(--space-lg)}.auth-intro h1{font-size:clamp(1.75rem,3vw,2.5rem)}.auth-intro p{color:var(--color-muted);font-size:var(--text-md);margin-top:var(--space-md);line-height:1.8}.intro-bottom{position:static;margin-top:var(--space-2xl);color:var(--color-muted);letter-spacing:0;font-size:var(--text-xs)}.intro-bottom span{border-color:var(--color-rule);font-size:var(--text-xs)}.auth-panel{background:var(--color-surface);padding:var(--space-2xl)}.auth-form{max-width:400px}.auth-form h2{font-size:var(--text-xl)}.auth-note{font-size:var(--text-xs);text-align:left}.auth-form>.muted{margin-bottom:var(--space-lg);font-size:var(--text-sm)}
@media(min-width:1400px){.item-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1050px){.workspace{grid-template-columns:176px minmax(0,1fr)}.collection{padding:var(--space-lg)}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{padding-left:var(--space-sm);padding-right:var(--space-sm)}}
@media(max-width:768px){
 .topbar{height:auto;min-height:64px;padding:var(--space-sm) var(--space-md);gap:var(--space-sm);flex-wrap:nowrap}.brand>span:last-child{font-size:var(--text-sm)}.top-actions{gap:0}.top-actions .text-button{font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm)}.brand-mark{width:32px;height:32px}.workspace{display:block}.sidebar{display:none}.collection{padding:var(--space-lg) var(--space-md) calc(108px + env(safe-area-inset-bottom))}.collection-heading{margin-bottom:var(--space-lg);align-items:flex-start}.collection-heading>.button{display:inline-flex;min-height:44px;padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);flex-shrink:0}.collection-heading .collection-subtitle{max-width:24ch;font-size:var(--text-xs)}.collection-heading h1{font-size:var(--text-xl)}.section-tabs{display:none}.filter-row{flex-wrap:wrap;gap:var(--space-sm);align-items:center}.filter-pickers{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-sm)}.filter-pickers select{width:100%;max-width:none}.filter-row>select{max-width:none;margin-left:auto}.searchbar{min-height:52px}.searchbar input{font-size:var(--text-md)}.searchbar kbd{display:none}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}.card-photo,.card-photo-empty{aspect-ratio:1}.card-body{padding:var(--space-sm) var(--space-sm) var(--space-md)}.card-body h3{font-size:var(--text-sm)}.card-category{padding:var(--space-xs);font-size:var(--text-xs)}.card-location,.card-date{font-size:var(--text-xs)}.card-date{margin-top:var(--space-sm)}.stock-badge{font-size:var(--text-xs)}.collection-footer{align-items:flex-start;font-size:var(--text-xs);gap:var(--space-xs);margin-top:var(--space-lg)}.mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-rule);padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));gap:var(--space-xs);align-items:center;z-index:5;backdrop-filter:none}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);font-size:var(--text-xs);min-height:56px;padding:var(--space-xs);border-radius:var(--radius-input);color:var(--color-muted);background:transparent;line-height:1}.mobile-nav button.active,.mobile-nav button[aria-pressed=true]{background:var(--color-soft);color:var(--color-accent);font-weight:600}.nav-symbol{font-size:var(--text-lg);line-height:1}.shipment-row{padding:var(--space-md);gap:var(--space-sm);min-height:100px}.shipment-row strong{font-size:var(--text-sm)}.shipment-row .status-pill{font-size:var(--text-xs);padding:var(--space-xs)}.shipment-row .muted{font-size:var(--text-xs)}.editor-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;margin:0}.editor-dialog form{height:100dvh;max-height:100dvh;overflow:hidden}.editor-body{flex:1;padding:var(--space-md);min-height:0;overscroll-behavior:contain;scroll-padding-top:var(--space-md)}.dialog-heading{padding:var(--space-md);flex:0 0 auto}.dialog-footer{padding:var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));border-radius:0;flex:0 0 auto;flex-wrap:wrap}.dialog-footer .button{flex:1;min-width:0}.dialog-footer #ship-submit,.dialog-footer #save-item{min-width:0;flex:2}.detail-dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:var(--radius-card)}.detail-body{padding:var(--space-md)}.detail-dialog>.dialog-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-md);border-radius:0}.detail-dialog>.dialog-footer .button{width:100%;font-size:var(--text-sm);padding:var(--space-sm);min-height:44px}.small-dialog{max-width:calc(100vw - 32px);padding:var(--space-lg)}.small-dialog>.dialog-footer{margin:var(--space-lg) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg));padding:var(--space-md)}.form-two{grid-template-columns:minmax(0,1fr);gap:0}.md-toolbar{gap:0}.md-toolbar button{min-width:36px;padding:var(--space-sm) var(--space-xs);font-size:var(--text-xs)}.field-meta{font-size:var(--text-xs)}.toast{bottom:calc(88px + env(safe-area-inset-bottom))}.auth-layout{display:block}.auth-intro{padding:var(--space-xl) var(--space-lg) var(--space-lg);min-height:0;border:0}.auth-intro .brand-mark{width:40px;height:40px;border-radius:12px;margin-bottom:var(--space-md)}.auth-intro h1{font-size:var(--text-xl)}.auth-intro p{font-size:var(--text-sm);margin-top:var(--space-sm)}.intro-bottom{display:none}.auth-panel{padding:var(--space-lg);min-height:50dvh}.auth-form h2{font-size:var(--text-lg)}
}
@media(max-width:360px){.collection-heading>.button{padding:var(--space-sm);font-size:var(--text-xs)}.collection-heading h1{font-size:var(--text-lg)}.collection-subtitle{max-width:20ch}.shipment-row{flex-wrap:wrap}.shipment-row>span:nth-child(2){flex:1 1 65%}.shipment-row>.status-pill{margin-left:auto}.topbar .brand>span:last-child{font-size:var(--text-xs)}.md-toolbar button{min-width:32px}.card-location:before{display:none}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip-link{position:fixed;left:var(--space-md);top:var(--space-md);z-index:100;transform:translateY(-150%);background:var(--color-accent);color:var(--color-accent-ink);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-input)}.skip-link:focus{transform:translateY(0)}.photo-section .field-top>span:first-child{display:none}.photo-section .field-top{justify-content:flex-end}.field-meta .field-format{color:var(--color-muted)}