/* Luxe Lookbook presentation layer. Operational behaviour stays in app.js. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f5f1;
  --surface: #fdfcf9;
  --surface-2: #f0ece5;
  --surface-3: #e8e3db;
  --line: #d8d2c8;
  --line-strong: #a89c8e;
  --ink: #141210;
  --muted: #6b6259;
  --accent: #141210;
  --accent-ink: #f7f5f1;
  --accent-soft: #ece6dd;
  --gold: #9a7b4f;
  --radius: 0;
  --shadow: none;
  --lookbook-display: "YJ Playfair", "YJ Noto Serif", "Songti SC", "SimSun", serif;
  --lookbook-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141210;
  --surface: #1b1815;
  --surface-2: #25211c;
  --surface-3: #302a23;
  --line: #3d352c;
  --line-strong: #887661;
  --ink: #f7f5f1;
  --muted: #b9b0a4;
  --accent: #f7f5f1;
  --accent-ink: #141210;
  --accent-soft: #302a23;
  --gold: #c9ad82;
  --radius: 0;
  --shadow: none;
}
body { font-family: var(--lookbook-body); letter-spacing: .005em; }
::selection { color: var(--ink); background: var(--accent-soft); }
a { color: var(--ink); }
button, a, input, select, textarea {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, opacity .22s ease;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.page-title, .login-statement h1, .login-brand h2, .modal-head h2 {
  font-family: var(--lookbook-display); font-weight: 500; letter-spacing: -.035em;
}
.page-title { font-size: 32px; line-height: 1.35; }
.page-heading { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.page-description { color: var(--muted); }
.panel-head h2 { font-weight: 600; letter-spacing: .02em; font-size: 15px; }
.brand-text strong { font-family: var(--lookbook-display); font-weight: 600; letter-spacing: .04em; }
.brand-text strong span { font-family: var(--lookbook-body); letter-spacing: .17em; }
.mark {
  background: var(--ink); color: var(--bg); border-radius: 0;
  font-family: var(--lookbook-display); font-weight: 500;
}
.eyebrow { color: var(--gold); letter-spacing: .13em; }
.login-layout { border-radius: 0; box-shadow: none; }
.login-intro { background: var(--surface-2); border-right: 1px solid var(--line); }
.login-statement h1 { font-size: 38px; line-height: 1.4; }
.login-statement > p:last-child, .login-principles > div, .login-copyright { color: var(--muted); }
.login-form-area { background: var(--surface); }
.login-card { border-radius: 0; box-shadow: none; }
.login-icon { background: transparent; border-radius: 0; }
.login-brand h2 { font-size: 25px; }
.login-card input { background: var(--surface); }
.login-card .btn.primary { min-height: 48px; }
.login-card .btn.primary img { margin-left: auto; }
.sidebar { background: var(--surface); }
.workspace-label { border-radius: 0; background: transparent; }
#nav .group { letter-spacing: .12em; }
#nav button { border-radius: 0; border-left: 2px solid transparent; }
#nav button:hover { background: var(--surface-2); color: var(--ink); }
#nav button[aria-current="page"] {
  background: var(--accent-soft); color: var(--ink); border-left-color: var(--gold);
}
.studio-link { border-radius: 0; }
.studio-link:hover { color: var(--ink); }
.account-avatar { border-radius: 0; background: var(--surface-2); color: var(--ink); }
.topbar { background: var(--surface); }
.global-search input { border-radius: 0; background: transparent; }
.global-search kbd { border-radius: 0; }
#view { gap: 24px; }
.panel, .kpi {
  border-radius: 0; box-shadow: none; border-color: var(--line); background: var(--surface);
}
.panel { padding: 24px; }
.kpi { padding: 22px; }
.kpi .value { font-family: var(--lookbook-display); font-weight: 500; letter-spacing: -.015em; }
.kpi .label { color: var(--muted); }
.overview-range { border-radius: 0; background: transparent; padding: 2px; }
.overview-range button { border-radius: 0; }
.overview-range button:hover { color: var(--ink); background: var(--surface-2); }
.overview-range button.active, .overview-range button[aria-pressed="true"] {
  background: var(--ink); color: var(--bg);
}
.btn, .icon-btn, input, select, textarea { border-radius: 0; box-shadow: none; }
.btn { background: transparent; border-color: var(--line-strong); }
.btn:hover { background: var(--surface-2); border-color: var(--ink); box-shadow: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 87%, var(--bg)); color: var(--bg); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: var(--danger); }
.btn:disabled, .icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; border-color: var(--line-strong); }
.btn.primary:disabled:hover { background: var(--ink); border-color: var(--ink); }
.icon-btn:hover { background: var(--surface-2); }
input, select, textarea { background: var(--surface); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:disabled, select:disabled, textarea:disabled { opacity: .65; cursor: not-allowed; background: var(--surface-2); }
input[readonly], textarea[readonly] { background: var(--surface-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.table-wrap { border-radius: 0; border-color: var(--line); }
th { background: var(--surface-2); color: var(--muted); }
th, td { border-bottom-color: var(--line); }
tbody tr:hover { background: var(--surface-2); }
.tag, .pill { border-radius: 0; }
.pill { background: transparent; }
.alert { border-radius: 0; color: var(--ink); }
.note { border-radius: 0; border-left-width: 2px; }
.role-card, pre, code { border-radius: 0; }
.provider-logo { border-radius: 0; color: var(--ink); }
.link-btn { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.link-btn:hover { text-decoration-color: var(--ink); }
.bar .track, .spark .col, .status-bar, .legend i { border-radius: 0; }
.chart-line { stroke: var(--ink); }
.modal-backdrop { background: rgba(20, 18, 16, .6); }
.modal-card { border-radius: 0; box-shadow: none; }
.modal-head { padding: 20px 24px; }
.modal-head h2 { font-size: 24px; }
.toast { border-radius: 0; box-shadow: none; background: var(--surface); }
.skip:focus { border-radius: 0; }
html[data-theme="light"] .btn.primary img { filter: invert(1); opacity: .9; }
html[data-theme="dark"] .btn.primary img { filter: none; opacity: .9; }
.skeleton {
  border-radius: 0; background: var(--surface-3);
  animation: lookbook-loading 1.7s ease-in-out infinite;
}
@keyframes lookbook-loading { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 800px) {
  .sidebar { box-shadow: none; }
  .sidebar-overlay { background: rgba(20, 18, 16, .45); }
  .panel { padding: 22px; }
}
@media (max-width: 600px) {
  .page-title { font-size: 26px; }
  .page-heading { padding-bottom: 18px; }
  .login-intro { border-right: 0; border-bottom: 1px solid var(--line); }
  .login-statement h1 { font-size: 30px; }
  .panel { padding: 18px 16px; }
  .kpi { padding: 16px 14px; }
  .modal-head { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: .75; }
  button, a, input, select, textarea { transition: none; }
}