/* A single tropical scene continues behind every page and the navigation. */
:root {
  --bg: #230635;
  --text: #34143f;
  --muted: #725376;
  --panel: rgba(255, 242, 252, .90);
  --field: rgba(255, 249, 254, .90);
  --stroke: rgba(174, 106, 178, .34);
  --row: rgba(255, 249, 254, .92);
  --soft: rgba(238, 221, 246, .92);
  --accent: #9323bf;
  --shadow: 0 18px 55px rgba(17, 2, 30, .26), inset 0 1px 0 rgba(255, 255, 255, .80);
  --scene-shade: linear-gradient(110deg, rgba(25, 3, 46, .10), rgba(27, 3, 44, .06));
}

html[data-theme=dark] {
  --bg: #1c042d;
  --text: #fff2ff;
  --muted: #d4b7da;
  --panel: rgba(40, 11, 59, .85);
  --field: rgba(24, 6, 39, .85);
  --stroke: rgba(229, 164, 236, .25);
  --row: rgba(36, 9, 52, .92);
  --soft: rgba(69, 26, 83, .83);
  --accent: #eda6ff;
  --shadow: 0 18px 55px rgba(13, 1, 26, .34), inset 0 1px 0 rgba(255, 196, 240, .12);
  --scene-shade: linear-gradient(110deg, rgba(19, 2, 38, .24), rgba(27, 3, 44, .14));
}

body { position: relative; min-height: 100svh; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--scene-shade), url('/assets/khami-tropical-v1.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.app, .main, .auth-layout { background: transparent; }
.sidebar {
  background: linear-gradient(180deg, rgba(38, 6, 56, .12), rgba(25, 4, 39, .44));
  border-right: 1px solid rgba(255, 190, 238, .16);
}
.sidebar::after, .main::after { display: none; }
.brand img { box-shadow: 0 12px 35px rgba(25, 1, 42, .18); }
.nav button { color: #efd6f2; text-shadow: 0 2px 8px rgba(22, 2, 34, .7); }
.nav button:hover { background-color: rgba(156, 61, 177, .2); }
.nav button[aria-current=page] {
  background: linear-gradient(115deg, #eb42c9, #a521d2 68%, #701fb1);
  border-color: rgba(255, 196, 233, .58);
  box-shadow: 0 8px 24px rgba(218, 35, 189, .24), inset 0 1px 1px #ffd8f5;
}
.local-label { color: #edd0e9; text-shadow: 0 2px 8px #22042e; }
.page > h1, .page-head h1, .section-title {
  color: #fff3fd;
  text-shadow: 0 3px 20px rgba(25, 2, 40, .55);
}
.page-head > div > .muted { color: #eed7ef; text-shadow: 0 2px 10px #20032d; }
.profile, .save-status { color: #fff0fb; text-shadow: 0 2px 10px #20032d; }
.profile-menu { color: var(--text); text-shadow: none; }
.theme { background: rgba(39, 8, 58, .76); border-color: rgba(234, 176, 238, .3); }
.theme button { color: #ead0f0; }
.theme button[aria-pressed=true] { background: #fff0f7; color: #b16a08; }
html[data-theme=dark] .theme button[aria-pressed=true] {
  background: linear-gradient(145deg, #dc48c6, #8324ad);
  color: #fff;
}
.avatar { background: linear-gradient(140deg, #ffd9ed, #e1c5ff 55%, #7adae1); }
.panel, .content-card, .auth-panel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.panel { border-color: rgba(252, 191, 235, .42); }
.content-card { box-shadow: var(--shadow); }
.formats button[aria-pressed=true] {
  background: linear-gradient(115deg, #d232cc, #9324c4 70%, #7030b4);
  box-shadow: 0 5px 15px #ac24bd30, inset 0 1px 2px #ffd0f7;
}
.drop {
  border-color: rgba(185, 100, 202, .65);
  background: radial-gradient(ellipse at 50% 8%, rgba(232, 148, 234, .14), transparent 65%), linear-gradient(145deg, var(--field), var(--soft));
}
html[data-theme=dark] .drop { border-color: rgba(241, 171, 244, .44); }
.publish, .primary {
  background: linear-gradient(115deg, #f79b70 -18%, #ec4da5 24%, #cb2dcf 63%, #9730cc);
  border-color: rgba(255, 208, 231, .56);
  box-shadow: 0 9px 26px rgba(225, 54, 175, .24), inset 0 2px 2px rgba(255, 224, 206, .64);
}
.publish:hover, .primary:hover { filter: brightness(1.06); }
.ai { border-color: rgba(175, 87, 197, .58); }
html[data-theme=dark] .ai { border-color: rgba(230, 168, 239, .44); }
.empty-state { background: var(--panel); backdrop-filter: blur(10px); }
.filters button { box-shadow: 0 3px 12px rgba(18, 2, 28, .15); }
.auth-brand { background: transparent; }
.auth-brand p { text-shadow: 0 3px 16px #250638; }
.auth-panel {
  background: var(--panel);
  border: 1px solid rgba(255, 199, 237, .42);
  border-radius: 30px;
  box-shadow: var(--shadow);
  margin: 32px;
}
dialog { box-shadow: 0 30px 100px #16012499, inset 0 1px 0 rgba(255, 199, 237, .3); }
dialog::backdrop { background: rgba(25, 3, 38, .65); backdrop-filter: blur(7px); }
html[data-theme=dark] .object-warning { color: #ffc49f; }

@media(max-width:880px) {
  .auth-panel { margin: 20px auto; width: calc(100% - 32px); }
}
@media(max-width:570px) {
  body::before { background-position: 72% center; }
  .sidebar { border-right: 0; border-bottom: 1px solid rgba(255, 190, 238, .20); }
  .panel, .content-card { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
}