.status-pill.pubblicato { background:#087b61; }.status-pill.venduto { background:#7b4f8b; }.status-pill.spedito { background:#2b6ea6; }.status-pill.consegnato { background:#5d7e4e; }.status-pill.eliminato { background:#8c4b45; }.product-info { display:grid; gap:5px; padding:8px; }
dialog { width:min(650px, calc(100% - 24px)); border:1px solid var(--ink); border-radius:8px; padding:24px; color:var(--ink); background:var(--card); }.close { float:right; border:0; background:transparent; font-size:25px; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:20px; background:var(--line); }.detail-grid div { display:grid; gap:6px; padding:12px; background:var(--card); }.detail-grid span { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.detail-grid strong { font-size:12px; white-space:pre-wrap; }.edit-form select { width:100%; border:1px solid var(--line); border-radius:5px; padding:8px; color:var(--ink); background:#fff; font-size:12px; }
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root { --ink:#143f2d; --deep:#0c4b32; --muted:#738078; --paper:#f4f1e7; --line:#d9ded4; --card:#fffdfa; --soft:#eef0e6; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:13px Manrope, sans-serif; } button, input { font:inherit; } button { cursor:pointer; }
.app-shell { width:min(100%, 900px); min-height:100vh; margin:auto; padding-bottom:50px; }.site-header { height:48px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; }.brand-mark { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:var(--deep); font-weight:800; }.header-actions { display:flex; gap:9px; }.icon-button { border:0; color:var(--ink); background:transparent; font-size:14px; }
.main-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; margin:8px 0 0; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--card); }.nav-link { display:flex; justify-content:center; align-items:center; gap:6px; min-height:26px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:11px; }.nav-link.active { color:#fff; background:var(--deep); }.view { padding:10px 0 0; }.page-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:0 0 10px; }.eyebrow, .card-id, .stat-label { margin:0; color:var(--muted); font:10px 'DM Mono', monospace; letter-spacing:.06em; text-transform:uppercase; }h1 { margin:4px 0 2px; font-size:25px; letter-spacing:-.05em; line-height:1; }.subtitle { margin:0; color:var(--muted); font-size:10px; }.primary, .secondary, .link-button { border:1px solid var(--line); border-radius:7px; padding:7px 12px; white-space:nowrap; color:var(--ink); background:var(--card); font-size:10px; }.primary { color:#fff; border-color:var(--deep); background:var(--deep); }.link-button { border:0; padding:0; background:transparent; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:14px 0; }.stat-card, .panel { border:1px solid var(--line); border-radius:9px; background:rgba(255,253,250,.84); }.stat-card { display:grid; gap:8px; min-height:58px; padding:12px; }.stat-card strong { color:var(--ink); font-size:17px; }.overview-grid { display:grid; grid-template-columns:1.4fr .9fr; gap:7px; margin:7px 0; }.panel { padding:12px; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }.panel h2 { margin:0; font-size:12px; }.empty-state { display:grid; place-items:center; min-height:145px; color:var(--muted); }.empty-state p { margin:3px 0; font-size:10px; }.empty-icon { color:var(--muted); font-size:24px; }.donut { display:grid; place-items:center; height:145px; }.donut:before { content:""; display:block; width:78px; height:78px; border:19px solid var(--deep); border-right-color:#78906d; border-radius:50%; transform:rotate(-20deg); }.legend { display:grid; gap:5px; font-size:9px; }.legend span { display:flex; gap:6px; align-items:center; }.legend b { margin-left:auto; font-weight:500; }.dot { width:6px; height:6px; border-radius:50%; }.green { background:var(--deep); }.sand { background:#78906d; }
.bars { display:grid; gap:8px; }.bar-row { display:grid; grid-template-columns:125px 1fr 18px; gap:7px; align-items:center; font-size:9px; }.bar-row > div { height:10px; background:var(--soft); border-radius:2px; overflow:hidden; }.bar-row i { display:block; height:100%; background:var(--deep); border-radius:2px; }.bar-row b { font-weight:500; text-align:right; }.products-toolbar { display:flex; gap:7px; margin:12px 0 7px; }.search { display:flex; align-items:center; flex:1; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--card); }.search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }.filters { display:flex; gap:5px; overflow:auto; margin-bottom:9px; }.filter { border:1px solid var(--line); border-radius:12px; padding:5px 10px; white-space:nowrap; color:var(--muted); background:var(--card); font-size:9px; }.filter.active { color:#fff; border-color:var(--deep); background:var(--deep); }.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.product-card { padding:0; overflow:hidden; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--card); text-align:left; }.product-card:hover { border-color:var(--deep); box-shadow:0 3px 0 var(--deep); }.product-photo { position:relative; display:grid; place-items:center; height:155px; background:var(--photo-bg); }.photo-fallback { color:rgba(20,63,45,.4); font-size:50px; font-weight:800; }.card-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.status-pill { position:absolute; top:6px; right:6px; z-index:1; padding:4px 7px; border-radius:10px; color:#fff; background:#d39c15; font-size:8px; }.status-pill.published { background:#087b61; }.product-info { display:grid; gap:5px; padding:8px; }.product-info strong { min-height:28px; font-size:10px; line-height:1.25; }.product-info .muted { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }.product-info .muted b { color:var(--ink); font-size:10px; }.stock-panel { margin-bottom:7px; }.stock-table { display:grid; gap:0; }.stock-table > div { display:grid; grid-template-columns:1fr 90px 70px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:10px; }.stock-table small { color:var(--muted); }.stock-table b { color:var(--deep); text-align:right; font-size:9px; }.placeholder { display:grid; place-items:center; min-height:310px; text-align:center; }.placeholder p { max-width:360px; color:var(--muted); font-size:11px; }.loading, .error { padding:35px; color:var(--muted); }.error { color:#a33d2f; }
dialog { width:min(650px, calc(100% - 24px)); border:1px solid var(--ink); border-radius:8px; padding:24px; color:var(--ink); background:var(--card); }.close { float:right; border:0; background:transparent; font-size:25px; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:20px; background:var(--line); }.detail-grid div { display:grid; gap:6px; padding:12px; background:var(--card); }.detail-grid span { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.detail-grid strong { font-size:12px; white-space:pre-wrap; }
.finance-list, .stock-list, .lot-list { display:grid; gap:0; }.finance-list > div, .stock-row, .lot-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:10px; }.finance-list b, .stock-row b, .lot-row strong { font-weight:700; }.stock-row small, .lot-row small { color:var(--muted); }.stock-row, .lot-row { grid-template-columns:1fr auto auto; }.lot-row b { margin-right:5px; }
.detail-top { display:flex; justify-content:space-between; align-items:start; gap:12px; }.detail-top h2 { margin:5px 0 0; }.drive-count { color:var(--muted); font:10px 'DM Mono',monospace; }.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:20px 0; }.gallery a { aspect-ratio:1; overflow:hidden; border-radius:6px; background:#e5dfcf; }.gallery img { width:100%; height:100%; object-fit:cover; }.gallery-empty { margin:20px 0; padding:20px; border:1px dashed var(--line); color:var(--muted); text-align:center; }.edit-form { display:grid; gap:10px; }.edit-form label { display:grid; gap:5px; }.edit-form label > span { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.edit-form input, .edit-form textarea, .edit-form select { width:100%; resize:vertical; border:1px solid var(--line); border-radius:5px; padding:8px; outline:0; color:var(--ink); background:#fff; font-size:12px; }.edit-form input:focus, .edit-form textarea:focus, .edit-form select:focus { border-color:var(--deep); }.form-actions { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.warning { margin:15px 0; padding:10px; border:1px solid #e5c887; border-radius:5px; color:#765718; background:#fff7dc; font-size:11px; }
.view-switcher { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--card); }.view-mode { border:0; border-radius:5px; padding:8px 11px; color:var(--muted); background:transparent; font-size:12px; }.view-mode.active { color:#fff; background:var(--deep); }.product-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:var(--card); }.sheet-table-scroll { min-width:900px; }.sheet-table { width:100%; border-collapse:collapse; font-size:12px; }.sheet-table th { position:sticky; top:0; z-index:1; color:var(--muted); background:#e9ede2; font:11px 'DM Mono',monospace; letter-spacing:.04em; text-align:left; text-transform:uppercase; }.sheet-table th, .sheet-table td { padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }.sheet-table tbody tr { cursor:pointer; }.sheet-table tbody tr:hover { background:#eef1e8; }.sheet-table td:first-child { color:var(--deep); font-weight:700; }
.sheet-table th:first-child { width:72px; }.table-preview { position:relative; width:72px; height:58px; padding:5px !important; overflow:hidden; color:#99a590 !important; background:#e8e3d2; font-size:20px; text-align:center; }.table-preview img { position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); object-fit:cover; border-radius:4px; }
.inline-product-table .inline-editor { min-width:88px; max-width:150px; padding:6px 7px; border:1px solid transparent; border-radius:5px; color:var(--ink); background:transparent; font:inherit; }.inline-product-table .inline-editor:hover, .inline-product-table .inline-editor:focus { border-color:var(--line); background:var(--card); outline:0; }.inline-save { padding:6px 9px; }.inline-save-status { display:block; margin-top:4px; color:var(--muted); font-size:9px; }
@media (min-width:721px) { .product-table-wrap { overflow-x:hidden; }.inline-product-table { table-layout:fixed; }.inline-product-table th, .inline-product-table td { padding:9px 8px; overflow:hidden; text-overflow:ellipsis; }.inline-product-table th:nth-child(1), .inline-product-table td:nth-child(1) { width:62px; }.inline-product-table th:nth-child(2), .inline-product-table td:nth-child(2) { width:86px; }.inline-product-table th:nth-child(8), .inline-product-table td:nth-child(8) { width:52px; }.inline-product-table th:nth-child(9), .inline-product-table td:nth-child(9) { width:130px; }.inline-product-table th:nth-child(10), .inline-product-table td:nth-child(10) { width:116px; }.inline-product-table th:nth-child(11), .inline-product-table td:nth-child(11) { width:76px; }.inline-product-table .inline-editor { width:100%; min-width:0; max-width:none; padding-left:4px; padding-right:4px; }.inline-product-table .inline-save { padding:5px 6px; font-size:10px; } }
.filter-backdrop { position:fixed; inset:0; z-index:10; background:rgba(13,22,18,.72); opacity:0; transition:opacity .18s; }.filter-backdrop.open { opacity:1; }.filter-drawer { position:fixed; z-index:11; top:0; right:0; width:min(360px, 92vw); height:100vh; overflow:auto; padding:22px 18px 30px; transform:translateX(100%); transition:transform .2s ease; border-left:1px solid var(--line); background:var(--paper); box-shadow:-14px 0 35px rgba(0,0,0,.12); }.filter-drawer.open { transform:translateX(0); }.drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:16px; }.drawer-section { padding:0 0 20px; }.drawer-section h3 { margin:0 0 8px; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.drawer-option { display:flex; justify-content:space-between; width:100%; padding:9px 10px; border:0; border-radius:6px; color:var(--ink); background:transparent; text-align:left; font-size:13px; }.drawer-option:hover, .drawer-option.selected { background:#e1e6d8; }.drawer-option b { color:var(--muted); font-size:11px; font-weight:500; }.drawer-clear { width:100%; margin-top:4px; }
.danger { border:1px solid #c7867c; border-radius:7px; padding:7px 12px; color:#8c4b45; background:#fff6f3; font-size:10px; }.trash-list { display:grid; gap:7px; }.trash-item { display:flex; align-items:center; justify-content:space-between; padding:15px; border:1px solid var(--line); border-radius:8px; background:var(--card); }.trash-item strong { display:block; margin-top:5px; font-size:14px; }
@media (max-width:720px) { .app-shell { padding:0 12px 36px; }.product-grid { grid-template-columns:repeat(2,1fr); }.product-photo { height:130px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.overview-grid { grid-template-columns:1fr; }.page-heading { align-items:start; flex-direction:column; }.main-nav { position:sticky; top:0; z-index:2; }.nav-link span { display:none; }.nav-link { font-size:16px; }.bar-row { grid-template-columns:100px 1fr 16px; } }
.latest-section { margin-top:10px; }.latest-section .panel-heading { margin-bottom:7px; }.latest-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }.latest-card { min-width:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); text-align:left; }.latest-card:hover { border-color:var(--deep); }.latest-photo { position:relative; display:grid; place-items:center; height:105px; background:#e8e3d2; overflow:hidden; }.latest-photo span { color:#9ba896; font-size:28px; font-weight:800; }.latest-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.latest-card > div:last-child { display:grid; gap:3px; padding:7px; }.latest-card small { color:var(--muted); font:8px 'DM Mono',monospace; }.latest-card strong { min-height:22px; font-size:9px; line-height:1.2; }.latest-card span { color:var(--muted); font-size:8px; }
@media (max-width:720px) { .latest-grid { grid-template-columns:repeat(2,1fr); } }
.main-nav { grid-template-columns:repeat(6, minmax(0, 1fr)); }

/* Readability scale */
body { font-size: 15px; }
.app-shell { width: min(100%, 1120px); padding-bottom: 64px; }
.site-header { height: 64px; }
.brand { gap: 10px; font-size: 15px; }
.brand-mark { width: 30px; height: 30px; }
.brand-logo { display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; object-fit: contain; }
.header-actions { gap: 12px; }
.icon-button { font-size: 18px; }
.main-nav { gap: 5px; margin-top: 12px; padding: 5px; }
.nav-link { min-height: 40px; gap: 8px; font-size: 14px; }
.view { padding-top: 22px; }
.page-heading { gap: 20px; margin-bottom: 16px; }
.eyebrow, .card-id, .stat-label { font-size: 12px; }
h1 { margin: 6px 0 4px; font-size: 36px; }
.subtitle { font-size: 14px; }
.primary, .secondary, .link-button { padding: 10px 15px; font-size: 13px; }
.stats-grid { gap: 10px; margin: 20px 0; }
.stat-card { min-height: 82px; padding: 16px; gap: 10px; }
.stat-card strong { font-size: 23px; }
.overview-grid { gap: 10px; margin: 10px 0; }
.panel { padding: 18px; }
.panel-heading { margin-bottom: 14px; }
.panel h2 { font-size: 16px; }
.bar-row, .stock-row, .lot-row { font-size: 12px; }
.search input { font-size: 14px; }
.filter { padding: 7px 12px; font-size: 12px; }
.product-grid { gap: 10px; }
.product-photo { height: 210px; }
.product-info { gap: 7px; padding: 12px; }
.product-info strong { min-height: 34px; font-size: 13px; }
.product-info .muted { font-size: 12px; }
.product-info .muted b { font-size: 13px; }
.status-pill { padding: 6px 9px; font-size: 10px; }
.latest-grid { gap: 10px; }
.latest-photo { height: 140px; }
.latest-card > div:last-child { padding: 10px; gap: 5px; }
.latest-card small { font-size: 10px; }
.latest-card strong { font-size: 12px; }
.latest-card span { font-size: 10px; }
@media (max-width:720px) {
	.site-header { height: 58px; }
	h1 { font-size: 30px; }
	.stats-grid { gap: 8px; margin: 14px 0; }
	.stat-card { min-height: 72px; padding: 12px; }
	.stat-card strong { font-size: 19px; }
	.product-photo { height: 165px; }
}

.stat-card, .panel {
	border-color: rgba(20,63,45,.11);
	border-radius: 14px;
	background: rgba(255,253,250,.92);
	box-shadow: 0 2px 8px rgba(20,63,45,.035), 0 12px 30px rgba(20,63,45,.045);
}
.panel { border-radius: 16px; }
.stat-card { transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(20,63,45,.06), 0 16px 34px rgba(20,63,45,.07); }
.main-nav { border-radius: 12px; box-shadow: 0 4px 16px rgba(20,63,45,.045); }
.nav-link, .nav-link.active { border-radius: 9px; }
.primary, .secondary, .danger { border-radius: 10px; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.primary:hover, .secondary:hover, .danger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,63,45,.1); }
.search { border-radius: 11px; }
.filter { border-radius: 999px; }
.product-card, .latest-card, .product-table-wrap, .trash-item { border-radius: 12px; }
.product-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-2px); border-color: rgba(20,63,45,.3); box-shadow: 0 8px 20px rgba(20,63,45,.09); }
.review-pill { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; overflow: hidden; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.review-uploaded { color: #17657a; border-color: #a9dce8; background: #d9f1f6; }
.review-retake { color: #8f302c; border-color: #edb7b3; background: #fbe4e2; }
.review-checks { color: #765800; border-color: #ead58f; background: #fff2c9; }
.review-approved { color: #24633b; border-color: #afd5b9; background: #e0f2e4; }
.product-photo > .review-pill { position: absolute; bottom: 7px; left: 7px; z-index: 1; max-width: calc(58% - 7px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.product-photo > .status-pill { top: auto; right: 7px; bottom: 7px; max-width: 42%; overflow: hidden; border-radius: 999px; text-overflow: ellipsis; white-space: nowrap; }
.review-table-cell { min-width: 150px; }
.table-status-pill { position: static; display: inline-flex; align-items: center; max-width: none; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.photo-review-control { display: grid; grid-template-columns: auto minmax(190px, 280px) 1fr; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.photo-review-control label { color: var(--muted); font-size: 11px; font-weight: 800; }
.photo-review-control select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--card); font: inherit; }
.photo-review-control > span { color: var(--muted); font-size: 11px; }

.donut { position: relative; height: 176px; }
.donut::before {
	width: 136px;
	height: 136px;
	border: 0;
	background: var(--donut-chart, var(--deep));
	box-shadow: 0 6px 18px rgba(20,63,45,.12);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 17px), #000 calc(100% - 16px));
}
.donut > div { position: absolute; display: grid; gap: 3px; place-items: center; }
.donut strong { font-size: 24px; line-height: 1; }
.donut span { color: var(--muted); font-size: 10px; }
.legend { gap: 8px; }
.legend span { gap: 8px; }
.dot { width: 9px; height: 9px; flex: 0 0 9px; background: var(--deep); }
.dot.da-pubblicare { background: #d39c15; }
.dot.pubblicato, .dot.published { background: #087b61; }
.dot.venduto { background: #7b4f8b; }
.dot.spedito { background: #2b6ea6; }
.dot.consegnato { background: #5d7e4e; }
.dot.eliminato { background: #8c4b45; }

.bars { gap: 13px; }
.bar-row { grid-template-columns: minmax(90px, 1fr) minmax(80px, 2.4fr) 30px; gap: 12px; }
.bar-row > div { height: 9px; border-radius: 999px; background: #e8ece3; }
.bar-row i { border-radius: inherit; background: linear-gradient(90deg, var(--deep), #78906d); transition: width .35s ease; }
.bar-row b { color: var(--muted); font-variant-numeric: tabular-nums; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid rgba(8,123,97,.28);
	outline-offset: 2px;
}
@media (max-width: 720px) {
	.bar-row { grid-template-columns: minmax(72px, 1fr) minmax(55px, 1.5fr) 28px; gap: 8px; }
	.donut { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, #e8ebdf 0, var(--paper) 62%); }
.auth-shell { width: min(100%, 420px); }
.auth-brand { width: fit-content; margin: 0 auto 22px; font-size: 18px; }
.auth-brand .brand-mark { width: 36px; height: 36px; }
.auth-brand .brand-logo { width: 36px; height: 36px; flex-basis: 36px; }
.auth-panel { padding: 28px; border-radius: 16px; }
.auth-panel h1 { margin: 8px 0; font-size: 30px; letter-spacing: 0; }
.auth-panel .subtitle { margin-bottom: 24px; font-size: 13px; }
.auth-form { gap: 16px; }
.auth-form label > span, .settings-grid .edit-form label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.auth-form input, .settings-grid .edit-form input, .settings-grid .edit-form select { min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; }
.auth-form .primary { width: 100%; min-height: 44px; font-size: 14px; }
.auth-message { min-height: 18px; margin: 0; color: #8c4b45; font-size: 12px; line-height: 1.5; }
.auth-message:empty { min-height: 0; }
.auth-message code { display: block; margin-top: 8px; padding: 9px; overflow-wrap: anywhere; border-radius: 6px; color: var(--ink); background: var(--soft); font-size: 11px; }
.auth-footnote { margin: 14px 0; color: var(--muted); font-size: 11px; text-align: center; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.settings-grid > .panel { padding: 20px; }
.settings-grid .edit-form { gap: 14px; }
.settings-grid .edit-form small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-grid .form-actions { flex-wrap: wrap; gap: 10px; }
.settings-user-form { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.auth-user-list { display: grid; }
.auth-user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.auth-user-row > div { display: grid; gap: 4px; min-width: 0; }
.auth-user-row strong { overflow-wrap: anywhere; font-size: 13px; }
.auth-user-row small { color: var(--muted); font-size: 11px; }
.auth-user-row .secondary { flex-shrink: 0; }
.chat-layout { width: min(100%, 900px); margin: 0 auto; }
.chat-panel { display: grid; grid-template-rows: auto minmax(280px, 1fr) auto; min-height: min(72vh, 760px); padding: 0; overflow: hidden; }
.chat-panel > .panel-heading { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-panel .panel-heading h2 { font-size: 14px; }
.chat-feed { display: flex; flex-direction: column; gap: 0; min-height: 300px; max-height: min(56vh, 560px); overflow-y: auto; padding: 4px 20px; overscroll-behavior: contain; }
.chat-message { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.chat-message-content { min-width: 0; flex: 1; }
.chat-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.chat-message-meta strong { font-size: 12px; }
.chat-message-meta time, .chat-message-type { color: var(--muted); font-size: 11px; }
.chat-message-type { padding: 2px 7px; border-radius: 999px; background: var(--soft); }
.chat-task .chat-message-type { color: #775b00; background: #fff2c9; }
.chat-message-body { margin: 7px 0 0; color: var(--ink); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message-body.completed { color: var(--muted); text-decoration: line-through; }
.chat-task-toggle { width: 19px; height: 19px; flex: 0 0 19px; margin: 2px 0 0; accent-color: var(--deep); cursor: pointer; }
.chat-product-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--deep); background: var(--soft); font-size: 11px; font-weight: 700; }
.chat-product-link .ui-icon { width: 13px; height: 13px; }
.chat-empty { margin: auto; padding: 32px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.chat-compose { display: grid; gap: 12px; padding: 16px 20px 18px; border-top: 1px solid var(--line); background: var(--card); }
.chat-compose-tools { display: grid; grid-template-columns: minmax(125px, .35fr) minmax(0, 1fr); gap: 12px; }
.chat-type, .chat-product-picker { position: relative; display: grid; align-content: start; gap: 5px; }
.chat-type > span, .chat-product-picker > label { color: var(--muted); font-size: 10px; font-weight: 800; }
.chat-type select, .chat-product-picker input, .chat-compose textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--ink); background: var(--paper); font: inherit; font-size: 13px; }
.chat-compose textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.chat-compose textarea:focus, .chat-type select:focus, .chat-product-picker input:focus { border-color: var(--deep); outline: 2px solid color-mix(in srgb, var(--deep) 20%, transparent); }
.chat-compose-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chat-compose-footer .muted { font-size: 11px; }
.chat-product-results { position: absolute; z-index: 5; top: 100%; right: 0; left: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 8px 20px rgba(20,63,45,.12); }
.chat-product-option { display: flex; width: 100%; flex-direction: column; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.chat-product-option:hover { background: var(--soft); }
.chat-product-option strong { font-size: 12px; }
.chat-product-option span, .chat-product-no-results { margin: 0; color: var(--muted); font-size: 11px; }
.chat-product-no-results { padding: 11px; }
.chat-selected-product { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--soft); font-size: 11px; }
.chat-selected-product strong { color: var(--ink); }
.chat-product-clear { flex: 0 0 26px; height: 26px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; font-size: 18px; }
.chat-product-clear:hover { background: var(--line); }
:root[data-theme="dark"] .chat-task .chat-message-type { color: #f3dc93; background: #453a20; }
:root[data-theme="dark"] .chat-product-link { color: #b9e5c2; border-color: var(--line); background: #26332b; }
:root[data-theme="dark"] .chat-compose { background: var(--card); }
:root[data-theme="dark"] .chat-type select,
:root[data-theme="dark"] .chat-product-picker input,
:root[data-theme="dark"] .chat-compose textarea { border-color: #46564b; color: var(--ink); background: #19221c; }
:root[data-theme="dark"] .chat-product-results { border-color: var(--line); background: var(--card); box-shadow: 0 8px 20px rgba(0,0,0,.32); }
:root[data-theme="dark"] .chat-product-option:hover,
:root[data-theme="dark"] .chat-selected-product { background: #29372f; }
@media (max-width: 760px) {
	.settings-grid { grid-template-columns: 1fr; }
	.auth-panel { padding: 22px; }
}
@media (max-width: 640px) {
	.chat-panel { min-height: calc(100vh - 180px); }
	.chat-feed { max-height: 48vh; padding: 2px 14px; }
	.chat-compose { padding: 13px 14px; }
	.chat-compose-tools { grid-template-columns: 1fr; gap: 10px; }
}

.main-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.label-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .8fr); gap: 12px; align-items: start; }
.label-layout .panel { min-width: 0; }
.label-layout .edit-form { gap: 16px; }
.label-layout .edit-form label > small { color: var(--muted); font-size: 11px; }
.current-label { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); font-size: 12px; }
.current-label a { color: var(--deep); font-weight: 700; }
.label-help p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.label-empty { display: grid; justify-items: center; gap: 8px; min-height: 220px; align-content: center; text-align: center; }
.label-empty h2, .label-empty p { margin: 0; }
@media (max-width: 720px) {
	.main-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.label-layout { grid-template-columns: 1fr; }
}

.detail-actions { display: grid; justify-items: end; gap: 8px; }
.download-images { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.add-photos { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.add-photos input { display: none; }
.add-photos:has(input:disabled) { opacity: .6; pointer-events: none; }
@media (max-width: 520px) {
	.detail-top { flex-direction: column; }
	.detail-actions { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
}

.gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #e5dfcf; }
.gallery-item > a { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; }
.gallery-item > a img { display: block; }
.photo-actions { position: absolute; top: auto; right: 7px; bottom: 7px; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.gallery-item:hover .photo-actions, .gallery-item:focus-within .photo-actions { opacity: 1; pointer-events: auto; }
.photo-action { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(20,63,45,.16); border-radius: 9px; color: var(--ink); background: rgba(255,253,250,.95); box-shadow: 0 3px 10px rgba(20,63,45,.14); font-size: 18px; line-height: 1; }
.photo-action:hover { color: #fff; border-color: var(--deep); background: var(--deep); }
.photo-action.remove-photo:hover { border-color: #8c4b45; background: #8c4b45; }
.image-status { max-width: 250px; color: var(--muted); font-size: 11px; text-align: right; }
@media (max-width: 720px) {
	.photo-actions { top: auto; right: 7px; bottom: 7px; opacity: 1; pointer-events: auto; }
	.photo-action { width: 38px; height: 38px; }
	.photo-review-control { grid-template-columns: 1fr; gap: 7px; }
}

.chart-wrap { position: relative; width: 100%; overflow: auto hidden; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.bar-chart { display: block; max-width: none; font-family: Manrope, sans-serif; }
.chart-gridline { stroke: #e5e9e0; stroke-width: 1; stroke-dasharray: 2 4; }
.chart-axis { stroke: #b9c3b7; stroke-width: 1; }
.chart-tick, .chart-category { fill: var(--muted); font-family: Manrope, sans-serif; font-size: 9px; }
.chart-mark { cursor: pointer; outline: none; }
.chart-mark rect { fill: var(--deep); transition: fill .16s ease, filter .16s ease; }
.chart-mark:hover rect, .chart-mark:focus rect { fill: #78906d; filter: drop-shadow(0 3px 4px rgba(20,63,45,.18)); }
.chart-mark:focus rect { stroke: #78906d; stroke-width: 2; }

.ui-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 1em;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.icon-grid { -webkit-mask-image: url('/static/icons/grid.svg'); mask-image: url('/static/icons/grid.svg'); }
.icon-settings { -webkit-mask-image: url('/static/icons/settings.svg'); mask-image: url('/static/icons/settings.svg'); }
.icon-file-chart { -webkit-mask-image: url('/static/icons/file-chart-line.svg'); mask-image: url('/static/icons/file-chart-line.svg'); }
.icon-shelves { -webkit-mask-image: url('/static/icons/shelves.svg'); mask-image: url('/static/icons/shelves.svg'); }
.icon-filter { -webkit-mask-image: url('/static/icons/filter.svg'); mask-image: url('/static/icons/filter.svg'); }
.icon-menu-burger { -webkit-mask-image: url('/static/icons/menu-burger.svg'); mask-image: url('/static/icons/menu-burger.svg'); }
.icon-ticket { -webkit-mask-image: url('/static/icons/ticket.svg'); mask-image: url('/static/icons/ticket.svg'); }
.icon-trash { -webkit-mask-image: url('/static/icons/trash.svg'); mask-image: url('/static/icons/trash.svg'); }
.icon-chat { -webkit-mask-image: url('/static/icons/chat.svg'); mask-image: url('/static/icons/chat.svg'); }
.icon-sign-out { -webkit-mask-image: url('/static/icons/sign-out-alt.svg'); mask-image: url('/static/icons/sign-out-alt.svg'); }
.icon-upload { -webkit-mask-image: url('/static/icons/upload.svg'); mask-image: url('/static/icons/upload.svg'); }
.icon-download { -webkit-mask-image: url('/static/icons/download.svg'); mask-image: url('/static/icons/download.svg'); }
.icon-pencil { -webkit-mask-image: url('/static/icons/pencil.svg'); mask-image: url('/static/icons/pencil.svg'); }
.nav-link .ui-icon { display: inline-block; width: 16px; height: 16px; flex-basis: 16px; }
.icon-button .ui-icon { width: 17px; height: 17px; }
.secondary .ui-icon, .primary .ui-icon, .danger .ui-icon, .view-mode .ui-icon { width: 15px; height: 15px; vertical-align: -2px; }
.photo-action .ui-icon { width: 17px; height: 17px; }
.download-images .ui-icon { width: 15px; height: 15px; }
@media (max-width: 720px) {
	.nav-link > span:not(.ui-icon) { display: none; }
}
.chart-tooltip {
	position: absolute;
	z-index: 4;
	display: grid;
	gap: 3px;
	min-width: 120px;
	max-width: calc(100% - 16px);
	padding: 8px 10px;
	transform: translate(-50%, -100%);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink);
	background: var(--card);
	box-shadow: 0 8px 22px rgba(20,63,45,.14);
	font-size: 11px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
}
.chart-tooltip.visible { opacity: 1; visibility: visible; }
.chart-tooltip strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chart-tooltip span { color: var(--muted); font-size: 10px; }
.chart-empty { padding: 18px 0; color: var(--muted); font-size: 12px; }

.donut::before { content: none; }
.donut-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.donut-segment { cursor: pointer; pointer-events: stroke; transition: stroke-width .14s ease; }
.donut-segment:focus { outline: none; stroke-width: 19; }
.donut-center { position: absolute; inset: 0; align-content: center; justify-items: center; pointer-events: none; }
.donut > .chart-tooltip { display: grid; align-content: initial; align-items: start; justify-items: initial; }
@media (max-width: 720px) {
	.chart-wrap { margin: 0 -4px; width: calc(100% + 8px); }
	.chart-tooltip { min-width: 108px; }
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #e5eee8;
	--deep: #347653;
	--muted: #a2b2a7;
	--paper: #151d18;
	--line: #35443a;
	--card: #202a24;
	--soft: #29372f;
}
:root[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .panel {
	border-color: #35443a;
	background: rgba(32,42,36,.96);
	box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 12px 30px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .main-nav,
:root[data-theme="dark"] .view-switcher,
:root[data-theme="dark"] .product-table-wrap,
:root[data-theme="dark"] .trash-item { border-color: var(--line); background: var(--card); }
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .filter.active,
:root[data-theme="dark"] .view-mode.active { color: #fff; background: var(--deep); }
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .view-mode,
:root[data-theme="dark"] .filter,
:root[data-theme="dark"] .search { border-color: var(--line); color: var(--ink); background: var(--card); }
:root[data-theme="dark"] .link-button,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .subtitle { color: var(--muted); }
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .latest-card { border-color: var(--line); color: var(--ink); background: var(--card); }
:root[data-theme="dark"] .product-card:hover,
:root[data-theme="dark"] .latest-card:hover { border-color: #6c9a7c; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
:root[data-theme="dark"] .review-uploaded { color: #b5e8f2; border-color: #39798a; background: #204450; }
:root[data-theme="dark"] .review-retake { color: #ffc5bd; border-color: #8d4944; background: #4a2b29; }
:root[data-theme="dark"] .review-checks { color: #f3dc93; border-color: #806b35; background: #453a20; }
:root[data-theme="dark"] .review-approved { color: #b9e5c2; border-color: #447852; background: #24432e; }
:root[data-theme="dark"] .photo-review-control { border-color: var(--line); background: #26332b; }
:root[data-theme="dark"] .photo-review-control select { border-color: #46564b; color: var(--ink); background: #19221c; }
:root[data-theme="dark"] .photo-fallback { color: rgba(229,238,232,.48); }
:root[data-theme="dark"] .latest-photo,
:root[data-theme="dark"] .gallery-item,
:root[data-theme="dark"] .table-preview { color: #b4c5b9 !important; background: #29372f; }
:root[data-theme="dark"] .sheet-table th { color: var(--muted); background: #29372f; }
:root[data-theme="dark"] .sheet-table tbody tr:hover { background: #29372f; }
:root[data-theme="dark"] .edit-form input,
:root[data-theme="dark"] .edit-form textarea,
:root[data-theme="dark"] .edit-form select,
:root[data-theme="dark"] .auth-form input,
:root[data-theme="dark"] .settings-grid .edit-form input,
:root[data-theme="dark"] .settings-grid .edit-form select {
	border-color: #46564b;
	color: var(--ink);
	background: #19221c;
}
:root[data-theme="dark"] .edit-form input::placeholder,
:root[data-theme="dark"] .edit-form textarea::placeholder { color: #86968b; }
:root[data-theme="dark"] .current-label,
:root[data-theme="dark"] .drawer-option:hover,
:root[data-theme="dark"] .drawer-option.selected { border-color: var(--line); color: var(--ink); background: #29372f; }
:root[data-theme="dark"] .filter-drawer { border-color: var(--line); background: var(--paper); box-shadow: -14px 0 35px rgba(0,0,0,.34); }
:root[data-theme="dark"] .bar-row > div { background: #29372f; }
:root[data-theme="dark"] .chart-gridline { stroke: #3a4a3f; }
:root[data-theme="dark"] .chart-axis { stroke: #738579; }
:root[data-theme="dark"] .chart-mark:hover rect,
:root[data-theme="dark"] .chart-mark:focus rect { fill: #6f9e80; }
:root[data-theme="dark"] .chart-tooltip { border-color: var(--line); color: var(--ink); background: #26332b; box-shadow: 0 8px 22px rgba(0,0,0,.36); }
:root[data-theme="dark"] .photo-action { border-color: #53645a; color: var(--ink); background: rgba(32,42,36,.96); box-shadow: 0 3px 10px rgba(0,0,0,.3); }
:root[data-theme="dark"] .photo-action:hover { color: #fff; border-color: var(--deep); background: var(--deep); }
:root[data-theme="dark"] .photo-action.remove-photo:hover { border-color: #a8544b; background: #8c4b45; }
:root[data-theme="dark"] .danger { border-color: #9f6258; color: #ffd8d1; background: #482b28; }
:root[data-theme="dark"] .warning { border-color: #806c3c; color: #f1d995; background: #3b3423; }
:root[data-theme="dark"] .gallery-empty { border-color: #53645a; color: var(--muted); }
:root[data-theme="dark"] .auth-screen { background: radial-gradient(ellipse at 50% 0%, #202a24 0, var(--paper) 62%); }
:root[data-theme="dark"] .auth-footnote { color: var(--muted); }
:root[data-theme="dark"] dialog { border-color: var(--line); color: var(--ink); background: var(--card); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.78); }
:root[data-theme="dark"] .detail-grid { background: var(--line); }
:root[data-theme="dark"] .detail-grid div { background: var(--card); }

.sheet-table-scroll { min-width: 780px; }
.sheet-table { font-size: 11px; }
.sheet-table th { font-size: 10px; }
.sheet-table th, .sheet-table td { padding: 8px 10px; }
.sheet-table th:first-child { width: 58px; }
.table-preview { width: 58px; height: 46px; font-size: 16px; }
.table-preview img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.review-table-cell { min-width: 0; }
.review-table-cell .review-pill { max-width: 148px; padding: 4px 7px; font-size: 9px; }
.table-status-pill { padding: 4px 7px; font-size: 9px; }
.chart-tick, .chart-category { font-size: 11px; }
.legend { gap: 8px; font-size: 12px; }
.legend span { gap: 8px; }
.legend b { font-size: 11px; font-weight: 600; }
.dot { width: 8px; height: 8px; }
.chart-tooltip { font-size: 12px; }
.chart-tooltip strong { font-size: 13px; }
.chart-tooltip span { font-size: 12px; }
@media (max-width: 720px) {
	.sheet-table-scroll { min-width: 760px; }
	.sheet-table th, .sheet-table td { padding: 7px 8px; }
	.chart-tick, .chart-category { font-size: 10px; }
}

@media (min-width: 721px) {
	.app-shell { width: min(100% - 48px, 1360px); }
	.inline-product-table { font-size: 13px; }
	.inline-product-table th { font-size: 11px; }
	.inline-product-table th, .inline-product-table td { padding: 11px 9px; }
	.inline-product-table .inline-editor { font-size: 13px; }
	.inline-product-table th:nth-child(1), .inline-product-table td:nth-child(1) { width: 76px; }
	.inline-product-table th:nth-child(2), .inline-product-table td:nth-child(2) { width: 100px; }
	.inline-product-table th:nth-child(8), .inline-product-table td:nth-child(8) { width: 64px; }
	.inline-product-table th:nth-child(9), .inline-product-table td:nth-child(9) { width: 160px; }
	.inline-product-table th:nth-child(10), .inline-product-table td:nth-child(10) { width: 140px; }
	.inline-product-table th:nth-child(11), .inline-product-table td:nth-child(11) { width: 92px; }
}