/* Ethereal: a dream in pearl. Iridescent mist drifts and an opal sheen turns behind frosted
   glass, panels have an iridescent rim, sparks of light rise, the brand is a breathing opal
   orb, titles and buttons flow with colour, and pages come in from a soft blur.
   Signature: opal (pink, blue, lilac) on pearl. Colours from look.ts. */

[data-style="ethereal"] {
  --font: "Haven Raleway", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--f-ethereal);
  --e-field: rgba(255, 255, 255, 0.72);
  --iri: linear-gradient(120deg, #f7c6dd, #bfe3f7, #dcc8f8, #f7c6dd);
  --iri-text: linear-gradient(120deg, #9b3b6c, #2c6a92, #6a44a8, #9b3b6c);
  --iri-ink: #1d1626;
  --rim: linear-gradient(120deg, #f2b5d0, #a9d6f2, #cdb5f2, #f2b5d0);
  --orb: radial-gradient(circle at 34% 28%, #fff 0 7%, transparent 34%), conic-gradient(from 200deg, #f7c6dd, #bfe3f7, #dcc8f8, #f7c6dd);
  --halo: rgba(200, 170, 240, 0.7);
  --glow: rgba(200, 170, 240, 0.4);
}
[data-style="ethereal"] body { font-weight: 400; background: var(--bg); }
[data-style="ethereal"] .dash::before { background: none; }
[data-style="ethereal"] ::-webkit-scrollbar-thumb { background: rgb(var(--ink) / 0.15); }

/* Mist, sheen and sparks */
[data-style="ethereal"] .ambient { display: block; }
[data-style="ethereal"] .ambient i:nth-child(-n + 3) { display: block; border-radius: 50%; filter: blur(60px); animation: eth-float 16s ease-in-out infinite alternate; }
[data-style="ethereal"] .ambient i:nth-child(1) { width: 60vmax; height: 50vmax; left: -18vmax; top: -16vmax; background: var(--mist-1); }
[data-style="ethereal"] .ambient i:nth-child(2) { width: 56vmax; height: 46vmax; right: -18vmax; top: 10vmax; background: var(--mist-2); animation-duration: 21s; animation-delay: -7s; }
[data-style="ethereal"] .ambient i:nth-child(3) { width: 64vmax; height: 50vmax; left: 20vmax; bottom: -24vmax; background: var(--mist-3); animation-duration: 25s; animation-delay: -12s; }
[data-style="ethereal"] .ambient i:nth-child(4) { display: block; inset: -40%; opacity: 0.18; filter: blur(40px); background: var(--sheen); animation: eth-spin 60s linear infinite; }
[data-style="ethereal"] .ambient i:nth-child(n + 5) {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px var(--halo);
  animation: eth-spark 7s ease-in-out infinite;
}
[data-style="ethereal"] .ambient i:nth-child(5) { left: 12%; top: 30%; }
[data-style="ethereal"] .ambient i:nth-child(6) { left: 78%; top: 18%; animation-delay: -1.5s; width: 3px; height: 3px; }
[data-style="ethereal"] .ambient i:nth-child(7) { left: 62%; top: 64%; animation-delay: -3s; width: 5px; height: 5px; }
[data-style="ethereal"] .ambient i:nth-child(8) { left: 24%; top: 78%; animation-delay: -4.4s; }
[data-style="ethereal"] .ambient i:nth-child(9) { left: 88%; top: 72%; animation-delay: -2.2s; width: 3px; height: 3px; }
[data-style="ethereal"] .ambient i:nth-child(10) { left: 44%; top: 88%; animation-delay: -5.4s; }
[data-style="ethereal"] .ambient i:nth-child(11) { left: 6%; top: 92%; animation-delay: -0.7s; width: 3px; height: 3px; }
[data-style="ethereal"] .ambient i:nth-child(12) { left: 50%; top: 14%; animation-delay: -3.8s; }
@keyframes eth-float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, -5vmax) scale(1.12); } 100% { transform: translate(-3vmax, 3vmax) scale(0.94); } }
@keyframes eth-spin { to { transform: rotate(360deg); } }
@keyframes eth-spark { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px) scale(1.1); } }
@keyframes eth-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes eth-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-4px); } }
@keyframes eth-pulse { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes eth-in { from { opacity: 0; filter: blur(12px); transform: translateY(10px) scale(0.985); } to { opacity: 1; filter: blur(0); transform: none; } }

/* The opal orb */
[data-style="ethereal"] .brand { flex-direction: column; gap: 14px; }
[data-style="ethereal"] .brand img { display: none; }
[data-style="ethereal"] .brand::before {
  content: "";
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--orb);
  box-shadow: 0 0 50px var(--glow), inset 0 -8px 24px rgb(255 255 255 / 0.35);
  animation: eth-breathe 7s ease-in-out infinite;
}
[data-style="ethereal"] .brand span { font-family: var(--font-display); font-size: 44px; font-weight: 300; font-style: italic; line-height: 1; }

/* Iridescent titles */
[data-style="ethereal"] .brand span,
[data-style="ethereal"] h2,
[data-style="ethereal"] .page-title h1 {
  color: transparent;
  background: var(--iri-text) 0 50% / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: eth-flow 9s ease-in-out infinite alternate;
}
[data-style="ethereal"] h2 { font-family: var(--font-display); font-size: 36px; font-weight: 400; font-style: italic; line-height: 1.05; }
[data-style="ethereal"] .page-title h1 { font-family: var(--font-display); font-size: 42px; font-weight: 400; font-style: italic; line-height: 1.05; padding-right: 4px; }
[data-style="ethereal"] .view-title h2 { font-size: 30px; }
[data-style="ethereal"] .group summary { font-family: var(--font-display); font-size: 19px; font-style: italic; font-weight: 500; }
[data-style="ethereal"] .switch, [data-style="ethereal"] .footer { font-size: 13px; }

/* Frosted pearl with an iridescent rim */
[data-style="ethereal"] .card,
[data-style="ethereal"] .tile,
[data-style="ethereal"] .rail,
[data-style="ethereal"] .gm-dialog,
[data-style="ethereal"] dialog {
  border: 0;
  background: var(--glass);
  box-shadow: 0 20px 50px var(--glow);
  backdrop-filter: blur(26px) saturate(150%);
}
[data-style="ethereal"] .card { border-radius: 32px; }
[data-style="ethereal"] .tile { border-radius: 28px; background: var(--tile); box-shadow: 0 14px 40px color-mix(in srgb, var(--glow) 60%, transparent); }
[data-style="ethereal"] .card::before,
[data-style="ethereal"] .tile::before,
[data-style="ethereal"] .rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* A scrolling tile's rim follows its scroll (look.ts sets --scroll) so it stays on the edge. */
[data-style="ethereal"] .tile::before { translate: 0 var(--scroll, 0px); }
[data-style="ethereal"] .tile:hover { translate: none; box-shadow: 0 18px 46px var(--glow); }
[data-style="ethereal"] .hero::after, [data-style="ethereal"] .swirl { display: none; }
[data-style="ethereal"] .overlay {
  background: var(--iri) 0 50% / 300% 100%;
  box-shadow: none;
  backdrop-filter: none;
  animation: eth-flow 8s ease-in-out infinite alternate;
}
[data-style="ethereal"] .overlay-panel h3 { font-family: var(--font-display); font-size: 46px; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--iri-ink); }
[data-style="ethereal"] .overlay-panel p { color: color-mix(in srgb, var(--iri-ink) 80%, transparent); }
[data-style="ethereal"] .overlay .pill { background: rgb(255 255 255 / 0.55); color: var(--iri-ink); animation: none; box-shadow: none; }

/* Soft round fields */
[data-style="ethereal"] .field {
  border: 1px solid rgb(var(--ink) / 0.1);
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--e-field);
}
[data-style="ethereal"] .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
[data-style="ethereal"] .field.area { border-radius: 22px; }
[data-style="ethereal"] .check input { accent-color: var(--accent); }

/* Buttons that flow with colour */
[data-style="ethereal"] .pill,
[data-style="ethereal"] #view-home .pill,
[data-style="ethereal"] #view-home .pill.compact {
  border: 0;
  border-radius: 999px;
  background: var(--iri) 0 50% / 300% 100%;
  color: var(--iri-ink);
  font-weight: 500;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 30px var(--glow), inset 0 1px 0 rgb(255 255 255 / 0.7);
  animation: eth-flow 8s ease-in-out infinite alternate;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-style="ethereal"] .pill .ico { stroke: currentColor; }
[data-style="ethereal"] .pill:hover:not(:disabled),
[data-style="ethereal"] #view-home .pill:hover:not(:disabled) { background: var(--iri) 0 50% / 300% 100%; transform: translateY(-2px); }
[data-style="ethereal"] .pill.ghost,
[data-style="ethereal"] #view-home .pill.compact.ghost,
[data-style="ethereal"] .pill.danger,
[data-style="ethereal"] #view-home .pill.compact.danger { background: var(--glass); color: var(--text); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.12); animation: none; }
[data-style="ethereal"] .pill.danger, [data-style="ethereal"] #view-home .pill.compact.danger { color: var(--danger); }
[data-style="ethereal"] .link { font-family: var(--font-display); font-size: 16px; font-style: italic; font-weight: 600; color: var(--accent); text-decoration: none; }
[data-style="ethereal"] .icon-btn { border-radius: 50%; background: var(--e-field); }

/* A floating capsule; the current item glows */
[data-style="ethereal"] .rail { position: relative; border-radius: 999px; background: var(--rail-bg); }
[data-style="ethereal"] .rail-logo { display: none; }
[data-style="ethereal"] .rail::before { content: ""; width: 38px; height: 38px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 20px var(--glow); animation: eth-breathe 7s ease-in-out infinite; }
[data-style="ethereal"] .rail-apps { border-top: 0; }
[data-style="ethereal"] .rail-btn { border-radius: 50%; }
[data-style="ethereal"] .rail-btn .ico { stroke: var(--faint); stroke-width: 1.4; position: relative; }
[data-style="ethereal"] .rail-btn:hover { background: rgb(var(--ink) / 0.05); transform: none; }
[data-style="ethereal"] .rail-btn.active { background: none; box-shadow: none; }
[data-style="ethereal"] .rail-btn.active .ico { stroke: var(--accent); }
[data-style="ethereal"] .rail-btn.active::before,
[data-style="ethereal"][data-nav="bottom"] .rail-btn.active::before {
  inset: -4px;
  width: auto;
  height: auto;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo), transparent 70%);
  box-shadow: none;
  animation: eth-pulse 3.5s ease-in-out infinite;
}
[data-style="ethereal"] .rail-btn::after { border-radius: 999px; background: var(--pop); border-color: rgb(var(--ink) / 0.1); font-family: var(--font-display); font-style: italic; font-size: 14px; }
[data-style="ethereal"][data-nav="bottom"] .rail { padding: 8px 14px; }
[data-style="ethereal"][data-nav="bottom"] .rail::before { display: none; }

/* Lists, tabs and orbs */
[data-style="ethereal"] .search { border-radius: 999px; background: var(--e-field); border: 1px solid rgb(var(--ink) / 0.08); }
[data-style="ethereal"] .tabs { border-radius: 999px; background: none; border: 0; gap: 4px; }
[data-style="ethereal"] .tab { padding: 6px 14px; color: var(--muted); }
[data-style="ethereal"] .tab.active { background: var(--iri) 0 50% / 300% 100%; color: var(--iri-ink); box-shadow: 0 6px 18px var(--glow); }
[data-style="ethereal"] .item-row { border-radius: 18px; }
[data-style="ethereal"] .item-row:hover { background: rgb(var(--ink) / 0.04); }
[data-style="ethereal"] .item-row.active { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none; }
[data-style="ethereal"] .item-txt b { font-weight: 600; }
[data-style="ethereal"] .avatar { border-radius: 50%; background: var(--orb) !important; color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 18px; text-transform: none; text-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
[data-style="ethereal"] .file-ico, [data-style="ethereal"] .sys-ico { border-radius: 50%; background: var(--orb); }
[data-style="ethereal"] .file-ico .ico, [data-style="ethereal"] .sys-ico .ico { stroke: #fff; }
[data-style="ethereal"] .code { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; }
[data-style="ethereal"] .note-title { font-family: var(--font-display); font-size: 30px; font-style: italic; font-weight: 400; }
[data-style="ethereal"] .quota .meter-fill, [data-style="ethereal"] .drive .meter-fill, [data-style="ethereal"] .update-fill { background: var(--iri) 0 50% / 300% 100%; box-shadow: 0 0 10px var(--glow); }
[data-style="ethereal"] .toast { border-radius: 999px; background: var(--pop); border: 0; box-shadow: 0 10px 30px var(--glow); }
[data-style="ethereal"] .gm-dayhead.today b { background: var(--orb); color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
[data-style="ethereal"] .gm-grid-scroll { border-radius: 20px; }
[data-style="ethereal"] .look-style, [data-style="ethereal"] .look-chip { border-radius: 18px; }
[data-style="ethereal"] .page { animation: eth-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; }

[data-motion="calm"][data-style="ethereal"] .brand::before,
[data-motion="calm"][data-style="ethereal"] .rail::before,
[data-motion="calm"][data-style="ethereal"] .pill,
[data-motion="calm"][data-style="ethereal"] .overlay,
[data-motion="calm"][data-style="ethereal"] h2,
[data-motion="calm"][data-style="ethereal"] .page-title h1,
[data-motion="calm"][data-style="ethereal"] .brand span,
[data-motion="calm"][data-style="ethereal"] .rail-btn.active::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-style="ethereal"] .ambient i, [data-style="ethereal"] .brand::before, [data-style="ethereal"] .rail::before, [data-style="ethereal"] .pill, [data-style="ethereal"] .overlay, [data-style="ethereal"] h2, [data-style="ethereal"] .page-title h1, [data-style="ethereal"] .brand span, [data-style="ethereal"] .rail-btn.active::before { animation: none; }
}