:root {
    color-scheme: light;
    --ink: #172522;
    --muted: #61716d;
    --brand: #14574d;
    --brand-dark: #0d4038;
    --accent: #db8b30;
    --surface: #ffffff;
    --background: #f3f6f4;
    --border: #d8e1de;
    --danger: #b42318;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); }
.app-footer { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); color: var(--muted); text-align: center; font-size: .78rem; }
button, input { font: inherit; }
button { cursor: pointer; }

.topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    background: var(--brand-dark);
    color: white;
}
.brand { color: white; text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.brand span { font-weight: 500; opacity: .78; }
.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.main-nav a { color: rgb(255 255 255 / .82); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.main-nav a:hover, .main-nav a:focus, .main-nav a[aria-current="page"] { color: white; background: rgb(255 255 255 / .16); }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
.menu-backdrop { display:none; }
.menu-toggle.header-action { display:none; }
.user-menu { display: flex; align-items: center; gap: 12px; margin-left: 28px; font-size: .92rem; }
.user-name { margin-right: 4px; padding: 6px 14px; border-radius: 999px; background: rgb(219 139 48 / .18); color: #ffd9a0; font-weight: 800; white-space: nowrap; }
.user-menu form { margin: 0; }
.header-action { display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:44px;padding:0 14px;border:1px solid rgb(255 255 255 / .45);border-radius:9px;background:rgb(255 255 255 / .08);color:white;font-size:.92rem;font-weight:800;text-decoration:none;white-space:nowrap; }
.header-action:hover,.header-action:focus { background:rgb(255 255 255 / .18);color:white; }
.link-button { cursor:pointer; }
.topbar-link { color:white; }

.page { width: min(1120px, calc(100% - 32px)); margin: 28px auto 80px; }
.page-login { min-height: 100vh; display: grid; place-items: center; margin-top: 0; }
.login-card {
    width: min(420px, 100%);
    padding: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgb(20 65 57 / .12);
}
.login-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--brand); color: white; font-weight: 900; }
.login-card h1 { margin: 20px 0 6px; }
.login-card > p { margin: 0 0 24px; color: var(--muted); }
.form-stack { display: grid; gap: 18px; }
.form-stack label { display: grid; gap: 7px; font-weight: 700; }
.form-stack input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.form-stack input:focus { outline: 3px solid rgb(20 87 77 / .2); border-color: var(--brand); }
.remember-login { display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;font-weight:600!important; }
.remember-login input { width:20px!important;height:20px;margin:0; }
.primary-button { border: 0; border-radius: 11px; padding: 13px 18px; background: var(--brand); color: white; font-weight: 800; }
.primary-button:hover { background: var(--brand-dark); }
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.alert-error { color: var(--danger); background: #fff1f0; border: 1px solid #ffc9c5; }
.alert-success { color: #116149; background: #eaf8f2; border: 1px solid #b7e5d5; }

.hero-panel {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 26px;
    background: linear-gradient(130deg, #0f453d, #17695d);
    color: white;
    border-radius: 20px;
}
.hero-panel h1 { margin: 4px 0 8px; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.hero-panel p { margin: 0; opacity: .84; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.voice-button { width: 104px; aspect-ratio: 1; border: 3px solid rgb(255 255 255 / .35); border-radius: 50%; color: white; background: var(--accent); font-weight: 900; touch-action: none; }
.voice-button.is-recording { background: #c73a2b; transform: scale(1.05); }
.voice-status { margin: 10px 4px 0; min-height: 1.5em; color: var(--muted); font-size: .92rem; }
.voice-dialog { width: min(560px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgb(0 0 0 / .28); }
.voice-dialog::backdrop { background: rgb(9 24 21 / .58); backdrop-filter: blur(2px); }
.voice-dialog-card { display: grid; gap: 18px; padding: 24px; }
.voice-dialog-card label { display: grid; gap: 7px; font-weight: 800; }
.voice-dialog-card textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; resize: vertical; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.dialog-heading h2 { margin: 2px 0 0; }
.dialog-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--background); font-size: 1.5rem; line-height: 1; }
.voice-parse { display: grid; gap: 9px; padding: 16px; border-radius: 11px; background: var(--background); }
.voice-parse span { color: var(--muted); }
.voice-parse em { color: #8a5b08; font-style: normal; font-weight: 700; }
.voice-result-title { color: var(--brand-dark); font-size:1.08rem; }
.voice-result-list { display:grid;gap:8px; }
.voice-result-item { display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:white; }
.voice-result-item b { color:var(--ink); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.secondary-button { border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; background: white; color: var(--ink); font-weight: 800; }
.voice-source { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-left: 4px solid var(--brand); background: #edf7f4; }
.voice-source span { color: var(--muted); }

.qm { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / .18); font-weight: 900; cursor: help; }
.qm::after { content: attr(data-tip); position: absolute; right: 0; top: 30px; width: 240px; padding: 10px 12px; border-radius: 8px; background: #13201e; color: white; font-size: .82rem; font-weight: 400; white-space: pre-line; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: .15s ease; z-index: 5; }
.qm:hover::after, .qm:focus::after { opacity: 1; transform: translateY(0); }

.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.action-card { min-height: 94px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--ink); font-size:1.12rem; font-weight: 800; box-shadow: 0 5px 16px rgb(25 58 51 / .05); }
.action-card:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.status-panel { padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.status-panel h2 { margin-top: 0; }
.status-panel dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.status-panel dl div { padding: 12px; border-radius: 10px; background: var(--background); }
.status-panel dt { color: var(--muted); font-size: .82rem; }
.status-panel dd { margin: 5px 0 0; font-weight: 800; }
.empty-state { text-align: center; padding: 15vh 20px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-heading h1 { margin: 2px 0 0; }
.eyebrow.dark { color: var(--brand); opacity: 1; }
.split-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr); gap: 18px; }
.panel { padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.panel h2 { margin: 0 0 18px; font-size: 1.15rem; }
.form-stack select, .form-grid select, .form-grid input, .form-grid textarea, .search-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: white; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.form-grid label { display: grid; gap: 7px; font-weight: 700; }
.form-grid .span-all { grid-column: 1 / -1; }
.item-form-panel { margin-bottom: 18px; }
.item-form-panel summary { cursor: pointer; font-size: 1.08rem; font-weight: 800; }
.summary-icon { display:inline-grid;place-items:center;width:30px;height:30px;margin-right:7px;border-radius:9px;background:var(--brand);color:white;font-size:1.25rem; }
.form-step { margin:0;padding:18px;border:1px solid var(--border);border-radius:13px;background:#fbfcfc; }
.form-step legend { padding:0 8px;color:var(--brand-dark);font-weight:900; }
.form-step legend span { display:inline-grid;place-items:center;width:25px;height:25px;margin-right:6px;border-radius:50%;background:var(--brand);color:white;font-size:.82rem; }
.form-step-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start; }
.optional-fields { padding:14px 16px;border:1px dashed var(--border);border-radius:11px;background:white; }
.optional-fields summary { color:var(--brand);font-size:.95rem; }
.optional-fields .form-step-grid { margin-top:16px; }
.desktop-item-table { display:none; }
.item-card-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.item-card { display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:76px;padding:9px 12px;border:1px solid var(--border);border-radius:13px;background:white;color:var(--ink);text-decoration:none;box-shadow:0 3px 10px rgb(25 58 51/.035);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.item-card:hover,.item-card:focus { border-color:#9ebdb6;box-shadow:0 7px 18px rgb(25 58 51/.09);transform:translateY(-1px);outline:none; }
.item-card img,.item-card-placeholder { width:56px;height:56px;border-radius:10px;object-fit:cover;background:#e8f3f0; }
.item-card-placeholder { display:grid;place-items:center;color:var(--brand);font-size:1.35rem;font-weight:900; }
.item-card-body { display:grid;min-width:0;gap:4px; }
.item-card-title { display:flex;align-items:baseline;gap:8px;min-width:0; }
.item-card-title strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.item-card-title small,.item-card-description { color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.item-card-title small { flex:none; }
.item-card-description { font-size:.78rem; }
.item-card-category { color:var(--brand);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.item-card-meta { display:grid;justify-items:end;gap:6px;min-width:76px; }
.item-card-meta em { padding:3px 8px;border-radius:999px;background:#edf3f1;color:var(--muted);font-size:.72rem;font-style:normal; }
.category-list { display:grid;gap:7px; }
.category-row { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:white; }
.category-row span { color:var(--muted);font-size:.8rem;text-align:right; }
.category-row.is-root { margin-top:8px;border-left:5px solid var(--brand);background:#f4faf8; }
.category-row.is-child { margin-left:22px; }
.table-input { width:100%;min-width:100px;padding:8px 9px;border:1px solid var(--border);border-radius:8px;background:white; }
.sort-input { width:68px;padding:8px;border:1px solid var(--border);border-radius:8px; }
.row-actions { display:flex;gap:6px;align-items:center;white-space:nowrap; }
.small-button,.danger-button { border:1px solid var(--border);border-radius:8px;padding:8px 11px;background:white;color:var(--ink);font-weight:800; }
.danger-button { border-color:#efb5af;color:var(--danger);background:#fff7f6; }
.danger-button:hover { background:#ffe9e6; }
.toggle-label { display:inline-flex!important;grid-template-columns:none!important;align-items:center;gap:6px!important;font-weight:600!important;white-space:nowrap; }
.toggle-label input { width:auto!important; }
.category-fields { display:grid;grid-template-columns:minmax(150px,1fr) 68px minmax(130px,.8fr);align-items:center;gap:8px;flex:1;text-align:left!important; }
.user-card-list { display:grid;gap:10px; }
.user-card { display:grid;grid-template-columns:120px 1fr 120px 1fr auto;gap:10px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:11px;background:#fbfcfc; }
.user-card label { display:grid;gap:5px;font-size:.78rem;font-weight:700; }.user-card input,.user-card select{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:white}.user-card small{color:var(--muted)}
.delete-panel { margin-top:22px;padding-top:18px;border-top:1px solid var(--border); }
.table-panel { min-width: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 12px 11px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: .8rem; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
.muted-cell { text-align: center; color: var(--muted); padding: 28px; }
.quantity { font-variant-numeric: tabular-nums; font-weight: 800; }
.quantity.negative { color: var(--danger); }
.search-form { display: flex; gap: 8px; min-width: min(420px, 100%); }
.search-form button { border: 0; border-radius: 9px; padding: 0 18px; background: var(--brand); color: white; font-weight: 800; }
.qm-dark { width: 20px; height: 20px; color: white; background: var(--brand); font-size: .78rem; vertical-align: middle; }
.operation-panel { max-width: 820px; }
.confirm-box { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: #fff8e8; border: 1px solid #f1d18b; color: #6c4b0b; }
.batch-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid #d7e1de; border-radius: 14px; }
.batch-row legend { padding: 0 .4rem; font-weight: 700; }
.report-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px; }
.report-cards article { background:white;border:1px solid var(--border);border-radius:14px;padding:20px;display:grid;gap:8px; }
.report-cards span { color:var(--muted); }.report-cards strong { font-size:1.8rem; }.narrow-panel{max-width:520px}.manual-scan{display:flex;gap:8px;margin-top:18px}.manual-scan input{flex:1;padding:12px;border:1px solid var(--border);border-radius:9px}.scan-launch{font-size:1.1rem;padding:16px 24px}
.scan-input{display:grid;grid-template-columns:1fr auto;gap:8px}.scan-input .secondary-button{min-width:100px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.photo-capture{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.photo-preview{display:block;width:min(240px,100%);max-height:180px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:white}
.fullscreen-scanner { position:fixed;inset:0;background:#000;z-index:9000; }
.fullscreen-scanner:not([hidden]) { display:flex;flex-direction:column; }
.item-photo{display:block;max-width:320px;max-height:240px;object-fit:contain;border:1px solid var(--border);border-radius:12px}
.label-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:18px}.qr-label{background:white;border:1px dashed #555;padding:14px;display:grid;justify-items:center;gap:5px;text-align:center}.qr-label strong{font-size:1.05rem}.qr-label span,.qr-label small{overflow-wrap:anywhere}
@media print{.topbar,.no-print{display:none!important}.page{width:100%;margin:0}.label-grid{grid-template-columns:repeat(3,1fr)}.qr-label{break-inside:avoid}}
#fullscreen-scanner-container,#fullscreen-scanner-container video,#fullscreen-scanner-container canvas { position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover; }
.scanner-target{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}.scanner-frame{position:relative;width:min(80vw,320px);height:130px;border:3px solid #db8b30;border-radius:10px}.scanner-frame i{position:absolute;left:0;right:0;height:2px;background:#db8b30;animation:scanline 1.5s ease-in-out infinite}.scanner-actions{position:absolute;bottom:50px;left:0;right:0;display:grid;justify-items:center;gap:10px;color:#f4b96f}.scanner-cancel{background:#c73a2b;color:white;border:0;padding:11px 24px;border-radius:8px}@keyframes scanline{0%,100%{top:10%}50%{top:88%}}
.field-unit { min-height: 1em; color: var(--muted); font-size: .82rem; font-weight: 500; }

@media (max-width: 720px) {
    .batch-row { grid-template-columns: 1fr; }
    .report-cards { grid-template-columns:1fr; }
    .topbar { position:relative;padding: 0 12px;gap:8px; }
    .menu-toggle.header-action { display:inline-flex;margin-left:auto; }
    .header-action { height:48px;padding:0 12px;font-size:1rem; }
    .brand span { display:none; }
    .main-nav { display:none;position:absolute;top:64px;left:8px;right:8px;z-index:100;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:10px;background:var(--brand-dark);border-radius:0 0 12px 12px;box-shadow:0 12px 28px rgb(0 0 0/.24); }
    .main-nav.is-open { display:grid; }
    .main-nav a { padding:12px;text-align:center;background:rgb(255 255 255/.08); }
    .main-nav a[aria-current="page"] { box-shadow:inset 0 0 0 2px var(--accent); }
    .menu-backdrop:not([hidden]) { display:block;position:fixed;inset:64px 0 0;z-index:90;border:0;background:rgb(8 23 20/.45); }
    .user-menu > span { display: none; }
    .page { width: min(100% - 20px, 680px); margin-top: 10px; }
    .app-footer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .hero-panel { grid-template-columns: 1fr auto; padding: 20px; }
    .hero-panel .qm { position: absolute; right: 22px; margin-top: 122px; }
    .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .action-card { min-height: 88px;font-size:1.12rem; }
    .status-panel dl { grid-template-columns: 1fr; }
    .login-card { padding: 28px 22px; border-radius: 16px; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .split-layout { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-step-grid { grid-template-columns:1fr; }
    .scan-input { grid-template-columns:1fr; }
    .search-form { min-width: 0; }
    .item-card-list { grid-template-columns:1fr;gap:10px; }
    .item-card { grid-template-columns:68px minmax(0,1fr) auto;gap:12px;min-height:88px;padding:10px; }
    .item-card img,.item-card-placeholder { width:68px;height:68px;border-radius:11px;object-fit:cover;background:#e8f3f0; }
    .item-card-placeholder { font-size:1.5rem; }
    .item-card-title { display:grid;gap:2px; }
    .item-card-meta { min-width:66px; }
    .category-row.is-child { margin-left:10px; }
    .category-row { align-items:stretch;flex-direction:column; }
    .category-fields { grid-template-columns:1fr 68px; }.category-fields select,.category-fields small{grid-column:1/-1}.row-actions{justify-content:flex-end}
    .user-card { grid-template-columns:1fr 1fr; }.user-card>strong,.user-card>small,.user-card>.row-actions{grid-column:1/-1}
    .voice-result-item { align-items:center; }
}


/* 分類建議搜尋 */
.category-suggest { margin-bottom: 18px; }
.suggest-bar { display:flex;gap:10px; }
.suggest-bar input { flex:1;min-width:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:white; }
.suggest-result { display:grid;gap:10px;margin-top:14px; }
.suggest-title { margin:0;font-weight:800; }
.suggest-card { display:grid;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:white; }
.suggest-card.is-best { border-left:5px solid var(--brand);background:#f4faf8; }
.suggest-card.is-new { border-left:5px solid #b7791f;background:#fffaf0; }
.suggest-card span { color:var(--muted);font-size:.85rem; }
.suggest-result .primary-button { justify-self:start; }
@media (max-width:720px) { .suggest-bar { flex-direction:column; } }
.panel.is-filled { outline:3px solid rgb(183 121 31 / .35); }
.qty-edit { display:flex;align-items:center;gap:8px; }
.qty-input { width:110px;min-width:90px;font-variant-numeric:tabular-nums;font-weight:800; }
.qty-input.negative { color:var(--danger); }
.qty-unit { color:var(--muted);min-width:1.5em; }
.section-gap { margin-top:18px; }
.scan-code { font-size:1.15rem;font-weight:800;letter-spacing:.02em;word-break:break-all; }
.pill { display:inline-block;padding:2px 10px;border-radius:999px;background:#e6f2ef;color:var(--brand);font-size:.8rem;font-weight:800; }
.pick-list { display:grid;gap:8px; }
.pick-item { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-weight:400!important; }
.pick-item input { width:auto!important; }
.pick-item span { display:grid;gap:2px; }
.pick-item small { color:var(--muted); }
.check-list { display:grid;gap:8px;max-height:360px;overflow:auto; }
.form-stack label.pick-item { display:flex;align-items:center;gap:12px; }
.form-stack label.pick-item input { width:auto;padding:0;margin:0; }