:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-alt: #eef3f9;
    --text: #172033;
    --muted: #667189;
    --line: #dbe3ef;
    --primary: #0f766e;
    --primary-2: #155eef;
    --danger: #b42318;
    --warning: #b54708;
    --success: #027a48;
    --shadow: 0 18px 40px rgba(23, 32, 51, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; background: radial-gradient(circle at top, #fefefe, var(--bg)); color: var(--text); }
a { color: var(--primary-2); text-decoration: none; }
button, .button-link { border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #14b8a6); color: #fff; padding: 12px 18px; cursor: pointer; display: inline-block; }
button.secondary, .secondary-link { background: var(--surface-alt); color: var(--text); }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
textarea { min-height: 96px; resize: vertical; }
label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
h1, h2, h3 { margin: 0; }
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, #0f172a, #0b1220); color: #fff; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; gap: 14px; align-items: center; }
.brand.center { justify-content: center; }
.brand-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #14b8a6, #155eef); color: #fff; font-weight: 700; }
.menu { display: grid; gap: 8px; }
.menu a { color: rgba(255,255,255,0.88); padding: 10px 12px; border-radius: 12px; }
.menu a:hover { background: rgba(255,255,255,0.08); }
.sidebar-footer { margin-top: auto; display: grid; gap: 8px; font-size: 14px; }
.content { padding: 28px; display: grid; gap: 22px; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.search-input { min-width: 280px; }
.card { background: var(--surface); border: 1px solid rgba(219,227,239,0.8); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.card.subtle { background: linear-gradient(180deg, #fcfdff, #f4f8ff); }
.stat strong { display: block; font-size: 30px; margin-top: 8px; }
.muted, .small { color: var(--muted); }
.alert { padding: 12px 16px; border-radius: 14px; font-size: 14px; }
.alert.success { background: #ecfdf3; color: var(--success); }
.alert.danger { background: #fff1f3; color: var(--danger); }
.alert.warning { background: #fffaeb; color: var(--warning); }
.grid { display: grid; gap: 18px; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.narrow { max-width: 780px; }
.wide { max-width: 920px; }
.stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full { grid-column: 1 / -1; }
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 12px 10px; vertical-align: top; font-size: 14px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-card { width: min(420px, calc(100vw - 32px)); margin: 8vh auto; background: #fff; padding: 28px; border-radius: 28px; box-shadow: var(--shadow); }
.auth-card.wide { width: min(920px, calc(100vw - 32px)); }
.guest-body { background: linear-gradient(135deg, #ebf8ff, #f8fafc 40%, #ecfeff); min-height: 100vh; padding: 24px; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; background: rgba(7, 14, 28, 0.55); display: grid; place-items: center; padding: 24px; }
.modal-card { width: min(720px, 100%); background: #fff; border-radius: 24px; padding: 24px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shortcut-grid div { background: var(--surface-alt); padding: 14px; border-radius: 14px; display: flex; justify-content: space-between; gap: 10px; }
.pos-grid, .label-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.pos-tile, .label-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.barcode-box svg { width: 100%; height: auto; }
.flat-list { margin: 0; padding-left: 18px; }
.json-box { background: #0f172a; color: #d9e4ff; padding: 16px; border-radius: 16px; overflow: auto; }