/* Gau UI: dùng theme.css làm nguồn màu gốc; class mới có tiền tố gau-. */
@import url('./theme.css');
@import url('./icons.css');
:root {
  --gau-font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gau-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --gau-space-1: 4px; --gau-space-2: 8px; --gau-space-3: 12px;
  --gau-space-4: 16px; --gau-space-5: 20px; --gau-space-6: 24px;
  --gau-space-8: 32px; --gau-space-12: 48px; --gau-space-16: 64px;
  --gau-radius-control: 8px; --gau-radius-panel: 16px;
  --gau-radius-card: 24px; --gau-radius-pill: 999px;
  --gau-width-reading: 768px; --gau-width-docs: 1060px; --gau-width-tool: 1280px;
  --gau-size-small: 13px; --gau-size-body: 16px; --gau-size-title: 22px;
  --gau-size-heading: 32px; --gau-size-display: 48px;
  --gau-motion-fast: 150ms; --gau-motion-theme: 250ms;
  --gau-success: #187851; --gau-success-bg: #e6f4eb;
  --gau-warning: #8a5900; --gau-warning-bg: #fff3d6;
  --gau-info: #245bb6; --gau-info-bg: #e9f0ff;
  --gau-danger: #d0354a; --gau-danger-bg: rgba(208, 53, 74, 0.12);
}
[data-theme='dark'] {
  --gau-success: #80d6ac; --gau-success-bg: #203a2e;
  --gau-warning: #f3ca74; --gau-warning-bg: #3d331f;
  --gau-info: #93b8ff; --gau-info-bg: #23334e;
  --gau-danger: #e0465c; --gau-danger-bg: rgba(224, 70, 92, 0.12);
}
@media(prefers-color-scheme:dark) { :root:not([data-theme='light']) {
  --gau-success: #80d6ac; --gau-success-bg: #203a2e;
  --gau-warning: #f3ca74; --gau-warning-bg: #3d331f;
  --gau-info: #93b8ff; --gau-info-bg: #23334e;
  --gau-danger: #e0465c; --gau-danger-bg: rgba(224, 70, 92, 0.12);
}}
.gau-app { font:var(--gau-size-body)/1.55 var(--gau-font); background:var(--bg-page-gradient) fixed; min-height:100vh; }
.gau-container { width:100%; max-width:var(--gau-width-tool); margin:auto; padding:var(--gau-space-8) var(--gau-space-5) var(--gau-space-16); }
.gau-container--reading { max-width:var(--gau-width-reading); }
.gau-container--docs { max-width:var(--gau-width-docs); }
.gau-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:48px; }
.gau-brand { display:inline-flex; align-items:center; gap:12px; color:var(--text-primary); font-weight:600; text-decoration:none; }
.gau-brand img { width:40px; height:40px; }
.gau-nav,.gau-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gau-nav a { color:var(--text-secondary); text-decoration:none; font-size:14px; }
.gau-nav a:hover,.gau-nav a[aria-current] { color:var(--accent-red); }
.gau-eyebrow { color:var(--accent-red); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.gau-app h1 { font-size:clamp(32px,5vw,var(--gau-size-display)); font-weight:500; line-height:1.15; letter-spacing:-.03em; margin:8px 0 16px; }
.gau-app h2 { font-size:var(--gau-size-title); font-weight:500; line-height:1.3; margin-bottom:16px; }
.gau-app h3 { font-size:18px; font-weight:500; margin-bottom:8px; }
.gau-app p { margin-bottom:16px; }
.gau-muted { color:var(--text-muted); }
.gau-lead { max-width:640px; font-size:20px; color:var(--text-secondary); }
.gau-stack { display:flex; flex-direction:column; gap:24px; }
.gau-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.gau-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.gau-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--gau-radius-card); padding:32px; box-shadow:var(--shadow-card); min-width:0; }
.gau-panel { background:var(--bg-card-subtle); border:1px solid var(--border-subtle); border-radius:var(--gau-radius-panel); padding:24px; }
.gau-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border:1px solid var(--border-input); border-radius:var(--gau-radius-control); background:var(--bg-card); color:var(--text-primary); font:500 15px/1.3 var(--gau-font); text-decoration:none; cursor:pointer; transition:background var(--gau-motion-fast),border-color var(--gau-motion-fast); }
.gau-btn:hover { background:var(--bg-secondary); }
.gau-btn--primary { background:var(--accent-red); color:#fff; border-color:var(--accent-red); }
.gau-btn--primary:hover { background:var(--accent-red-hover); border-color:var(--accent-red-hover); }
.gau-btn--quiet { border-color:transparent; background:transparent; }
.gau-btn:disabled { opacity:.45; cursor:not-allowed; }
.gau-app :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent-blue); outline-offset:3px; }
.gau-field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.gau-label { font-size:14px; font-weight:500; }
.gau-input,.gau-select { width:100%; min-height:44px; padding:10px 12px; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-input); border-radius:var(--gau-radius-control); font:inherit; }
.gau-input[aria-invalid='true'] { border-color:var(--accent-red); }
.gau-help { font-size:var(--gau-size-small); color:var(--text-muted); }
.gau-error { color:var(--accent-red); font-size:var(--gau-size-small); }
.gau-app input { accent-color:var(--accent-red); }
.gau-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 10px; border-radius:var(--gau-radius-pill); background:var(--bg-secondary); color:var(--text-secondary); }
.gau-badge--success,.gau-alert--success { background:var(--gau-success-bg); color:var(--gau-success); }
.gau-badge--warning,.gau-alert--warning { background:var(--gau-warning-bg); color:var(--gau-warning); }
.gau-badge--info,.gau-alert--info { background:var(--gau-info-bg); color:var(--gau-info); }
.gau-alert { border-radius:var(--gau-radius-control); padding:12px 16px; font-size:14px; }
.gau-table-wrap { overflow:auto; }
.gau-table { border-collapse:collapse; width:100%; font-size:14px; }
.gau-table :is(th,td) { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border-divider); }
.gau-table th { background:var(--bg-table-header); font-weight:500; }
.gau-app code,.gau-app kbd { font:13px var(--gau-font-mono); background:var(--bg-code); padding:3px 6px; border-radius:4px; overflow-wrap:anywhere; }
.gau-stat { font-size:36px; line-height:1.2; font-weight:500; }
.gau-sidebar-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:32px; }
.gau-sidebar { position:sticky; top:24px; align-self:start; }
.gau-sidebar a { display:block; padding:8px 0; text-decoration:none; color:var(--text-secondary); }
.gau-sidebar a:hover { color:var(--accent-red); }
.gau-divider { border:0; border-top:1px solid var(--border-divider); margin:24px 0; }
.gau-empty { text-align:center; padding:32px; background:var(--bg-card-subtle); border-radius:16px; color:var(--text-muted); }
.gau-swatch { height:80px; border-radius:8px; border:1px solid var(--border-subtle); margin-bottom:8px; }
.gau-section { scroll-margin-top:24px; margin-top:48px; }
@media(max-width:760px) { .gau-grid,.gau-grid--three,.gau-sidebar-layout { grid-template-columns:1fr; } .gau-card{padding:24px}.gau-header{gap:16px;flex-wrap:wrap;margin-bottom:32px}.gau-sidebar{position:static}.gau-container{padding-top:24px}.gau-lead{font-size:18px} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.gau-app *,.gau-app *::before,.gau-app *::after{transition:none!important;animation:none!important} }

/* Web Gau hiện hữu: dùng cùng component, giữ typography/layout riêng của trang. */
.gau-site { font-family:var(--gau-font); }
.gau-card--panel { border-radius:var(--gau-radius-panel); }
.gau-card--compact { padding:var(--gau-space-4); }
.gau-card--flush { padding:0; }
.gau-card--raised { box-shadow:var(--shadow-card-large); }
.gau-card--subtle { background:var(--bg-card-subtle); border-color:var(--border-subtle); }
.gau-btn--small { min-height:40px; padding:7px 14px; font-size:13px; }
.gau-btn--tinted { background:var(--bg-card-subtle); border-color:transparent; color:var(--accent-red); }
.gau-btn--tinted:hover { background:var(--accent-red-light); }
.gau-site :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent-blue); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .gau-site *,.gau-site *::before,.gau-site *::after{transition:none!important;animation:none!important} }

.gau-card--cozy { padding:var(--gau-space-6); }
.gau-btn--tinted.gau-btn--primary { background:var(--accent-red); color:#fff; }
.gau-btn--tinted.gau-btn--primary:hover { background:var(--accent-red-hover); }