/* Luxe: ultra-modern luxury. High-contrast Bodoni over wide-tracked Jost capitals, metal
   (look.ts --metal / --foil) for buttons and accents, hairline borders, a monogram ring that
   turns, and a slow foil shimmer. Signature: champagne on true black. */

[data-style="luxe"] {
  --font: "Haven Jost", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--f-luxe);
  --hair: rgb(var(--ink) / 0.1);
  --metal: linear-gradient(115deg, #a88a4c, #f2dca8, #c6a669, #ecd29a, #b0904f);
  --foil: var(--metal);
  --metal-ink: #120d05;
  --hairline: rgba(232, 205, 150, 0.45);
  --halo: rgba(200, 160, 80, 0.16);
}
[data-style="luxe"] body { font-weight: 300; letter-spacing: 0.01em; background: radial-gradient(120% 70% at 50% 0%, var(--halo), transparent 60%) fixed, var(--bg); }
[data-style="luxe"] b, [data-style="luxe"] strong { font-weight: 500; }
[data-style="luxe"] .dash::before { background: radial-gradient(90% 60% at 100% 0%, var(--halo), transparent 60%); }
[data-style="luxe"] ::-webkit-scrollbar-thumb { background: var(--hairline); }

/* Monogram */
[data-style="luxe"] .brand { flex-direction: column; gap: 16px; }
[data-style="luxe"] .brand img { display: none; }
[data-style="luxe"] .brand::before {
  content: "G";
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  background: var(--foil) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: luxe-foil 7s linear infinite;
}
[data-style="luxe"] .brand::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 94px;
  height: 94px;
  margin-left: -47px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--accent) 75%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%);
  mask: radial-gradient(circle, transparent 66%, #000 67%);
  animation: luxe-spin 26s linear infinite;
}
[data-style="luxe"] .brand { position: relative; }
[data-style="luxe"] .brand span { font-size: 15px; font-weight: 400; letter-spacing: 0.6em; padding-left: 0.6em; text-transform: uppercase; }
@keyframes luxe-foil { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes luxe-spin { to { transform: rotate(360deg); } }

/* Panels: velvet with a hairline */
[data-style="luxe"] .card {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  box-shadow: 0 40px 90px rgb(var(--shade) / calc(0.55 * var(--shade-k)));
  backdrop-filter: blur(18px);
}
[data-style="luxe"] .overlay { background: radial-gradient(120% 80% at 30% 0%, var(--halo), transparent 70%), var(--bg); box-shadow: inset 1px 0 0 var(--hairline), inset -1px 0 0 var(--hairline); backdrop-filter: none; }
[data-style="luxe"] .overlay-panel h3 { font-family: var(--font-display); font-size: 40px; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }
[data-style="luxe"] .overlay-panel p { font-size: 13px; line-height: 1.7; }

[data-style="luxe"] h2 { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.01em; }
[data-style="luxe"] #auth-card h2, [data-style="luxe"] #solo-card h2 { font-style: italic; }
[data-style="luxe"] .page-title h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
[data-style="luxe"] .page-title .muted-sm { font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
[data-style="luxe"] .view-title h2 { font-size: 28px; }
[data-style="luxe"] .group summary { font-family: var(--font-display); font-size: 18px; font-weight: 400; }
[data-style="luxe"] .footer { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
[data-style="luxe"] .switch { font-size: 13px; }
[data-style="luxe"] .tile-head { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }

/* Fields: a hairline to write on */
[data-style="luxe"] .field { border-bottom-color: var(--hairline); padding: 8px 0; }
[data-style="luxe"] .field:focus-within { border-bottom-color: var(--accent); }
[data-style="luxe"] .field input, [data-style="luxe"] .field textarea, [data-style="luxe"] .field select { font-weight: 300; letter-spacing: 0.02em; font-size: 15px; }
[data-style="luxe"] .ico { stroke-width: 1.2; }
[data-style="luxe"] .field .ico { stroke: var(--accent); }
[data-style="luxe"] .check input { accent-color: var(--accent); }

/* Buttons cast in metal */
[data-style="luxe"] .pill,
[data-style="luxe"] #view-home .pill,
[data-style="luxe"] #view-home .pill.compact {
  border: 0;
  border-radius: 999px;
  background: var(--metal);
  background-size: 220% 100%;
  color: var(--metal-ink);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.6s;
}
[data-style="luxe"] .pill .ico { stroke: currentColor; }
[data-style="luxe"] .pill:hover:not(:disabled),
[data-style="luxe"] #view-home .pill:hover:not(:disabled) { background: var(--metal); background-size: 220% 100%; background-position: 100% 0; letter-spacing: 0.38em; border: 0; }
[data-style="luxe"] .pill.ghost,
[data-style="luxe"] #view-home .pill.compact.ghost,
[data-style="luxe"] .pill.danger,
[data-style="luxe"] #view-home .pill.compact.danger { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline); }
[data-style="luxe"] .pill.danger, [data-style="luxe"] #view-home .pill.compact.danger { color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 50%, transparent); }
[data-style="luxe"] #view-home .pill.compact.ghost:hover:not(:disabled) { background: rgb(var(--ink) / 0.05); }
[data-style="luxe"] .link { font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--accent); }
[data-style="luxe"] .link:hover:not(:disabled) { color: var(--text); }
[data-style="luxe"] .icon-btn { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
[data-style="luxe"] .icon-btn:hover { box-shadow: inset 0 0 0 1px var(--hairline); background: transparent; color: var(--accent); }

/* A floating capsule with the current item in metal */
[data-style="luxe"] .rail {
  width: 64px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--hair), 0 20px 50px rgb(var(--shade) / calc(0.5 * var(--shade-k)));
  backdrop-filter: blur(18px);
}
[data-style="luxe"] .rail-logo { display: none; }
[data-style="luxe"] .rail::before { content: "G"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); font-family: var(--font-display); font-size: 19px; color: var(--accent); }
[data-style="luxe"] .rail-apps { border-top: 0; }
[data-style="luxe"] .rail-btn { border-radius: 50%; }
[data-style="luxe"] .rail-btn .ico { stroke: var(--muted); stroke-width: 1.25; }
[data-style="luxe"] .rail-btn:hover { background: rgb(var(--ink) / 0.05); transform: none; }
[data-style="luxe"] .rail-btn.active { background: var(--metal); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-style="luxe"] .rail-btn.active .ico { stroke: var(--metal-ink); }
[data-style="luxe"] .rail-btn.active::before { display: none; }
[data-style="luxe"] .rail-btn::after { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; border-radius: 999px; background: var(--bg); border-color: var(--hairline); padding: 6px 14px; }
[data-style="luxe"][data-nav="bottom"] .rail { width: auto; padding: 8px 12px; }
[data-style="luxe"][data-nav="bottom"] .rail::before { display: none; }

/* Panels and lists */
[data-style="luxe"] .tile { border: 0; border-radius: 24px; background: rgb(var(--ink) / 0.03); box-shadow: inset 0 0 0 1px var(--hair); }
[data-style="luxe"] .tile:hover { translate: none; box-shadow: inset 0 0 0 1px var(--hairline); }
[data-style="luxe"] .hero { background: radial-gradient(120% 120% at 100% 0%, var(--halo), transparent 70%), rgb(var(--ink) / 0.03); }
[data-style="luxe"] .hero::after { background: radial-gradient(circle, var(--halo), transparent 68%); }
[data-style="luxe"] .search { border-radius: 999px; background: transparent; border: 1px solid var(--hair); }
[data-style="luxe"] .search:focus-within { border-color: var(--hairline); }
[data-style="luxe"] .tabs { gap: 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px var(--hair); }
[data-style="luxe"] .tab { padding: 8px 0; border-radius: 0; font-size: 9.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }
[data-style="luxe"] .tab.active { background: none; box-shadow: none; color: var(--text); border-bottom: 1px solid var(--accent); }
[data-style="luxe"] .item-list { gap: 0; }
[data-style="luxe"] .item-row { border-radius: 0; padding: 11px 6px; border-bottom: 1px solid var(--hair); }
[data-style="luxe"] .item-row:hover { background: rgb(var(--ink) / 0.03); }
[data-style="luxe"] .item-row.active { background: rgb(var(--ink) / 0.04); box-shadow: inset 2px 0 0 var(--accent); }
[data-style="luxe"] .item-txt b { font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em; }
[data-style="luxe"] .avatar {
  border-radius: 50%;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  text-transform: none;
}
[data-style="luxe"] .frow { border-top-color: var(--hair); }
[data-style="luxe"] .frow dt { font-size: 9.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; }
[data-style="luxe"] .code {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: transparent;
  background: var(--foil) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: luxe-foil 7s linear infinite;
}
[data-style="luxe"] .code.copied { color: var(--ok); background: none; }
[data-style="luxe"] .note-title { font-family: var(--font-display); font-size: 30px; font-weight: 400; border-bottom-color: var(--hair); }
[data-style="luxe"] .file-ico, [data-style="luxe"] .sys-ico { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
[data-style="luxe"] .file-ico .ico, [data-style="luxe"] .sys-ico .ico, [data-style="luxe"] .empty.big .ico { stroke: var(--accent); stroke-width: 1.1; }
[data-style="luxe"] .file-ico i { background: var(--metal); color: var(--metal-ink); }
[data-style="luxe"] .quota .meter-fill, [data-style="luxe"] .drive .meter-fill, [data-style="luxe"] .update-fill { background: var(--metal); box-shadow: none; }

[data-style="luxe"] .toast { border-radius: 999px; background: var(--bg); border: 1px solid var(--hairline); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
[data-style="luxe"] .gm-dialog, [data-style="luxe"] dialog { border-radius: 28px; border: 1px solid var(--hairline); background: var(--dialog-bg); }
[data-style="luxe"] .gm-dayhead.today b { background: var(--metal); color: var(--metal-ink); }
[data-style="luxe"] .chip-opt[aria-pressed="true"] { background: transparent; border-color: var(--accent); color: var(--accent); }
[data-style="luxe"] .look-style[aria-pressed="true"], [data-style="luxe"] .look-chip[aria-pressed="true"] { background: transparent; }
[data-style="luxe"] .page { animation: luxe-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes luxe-in { from { opacity: 0; transform: translateY(14px); } }

[data-motion="calm"][data-style="luxe"] .brand::before,
[data-motion="calm"][data-style="luxe"] .brand::after,
[data-motion="calm"][data-style="luxe"] .code { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-style="luxe"] .brand::before, [data-style="luxe"] .brand::after, [data-style="luxe"] .code, [data-style="luxe"] .page { animation: none; }
}
[data-style="luxe"] .swirl { display: none; }