/* ═══════════════════════════════════════════════════════════════
   Honeydew · base — tokens, reset, shell layout
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* canvas */
  --cream:      #f9efdb;
  --cream-deep: #f3e2c4;

  /* ink */
  --ink:        #41503f;
  --ink-soft:   #68765f;
  --ink-faint:  #97a288;

  /* hues (mid tone / deep tone pairs) */
  --green:  #6fbb8d;  --green-d:  #3f8f66;
  --mint:   #cde6c4;  --mint-d:   #9cc98f;
  --gold:   #f2c96a;  --gold-d:   #e2a63d;
  --orange: #f0ae4a;  --orange-d: #e2912b;
  --purple: #c5a3e4;  --purple-d: #a377cd;
  --blue:   #97b9ec;  --blue-d:   #6f97e0;
  --sky:    #aecdf2;  --sky-d:    #7fa9e4;
  --pink:   #f2b9ae;  --pink-d:   #e2907f;
  --peach:  #f5cdb0;  --peach-d:  #eaa878;

  /* liquid glass rim */
  --rim-hi:   rgba(255, 255, 255, .96);
  --rim-mid:  rgba(255, 241, 209, .72);
  --rim-lo:   rgba(244, 212, 148, .5);
  --rim-glow: rgba(238, 190, 96, .38);

  --r: 28px;          /* card radius   */
  --bw: 6px;          /* border width  */

  --font: "Avenir Next", "Futura", "Century Gothic", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;

  --shadow-card: 0 18px 40px -18px rgba(190, 138, 52, .38),
                 0 4px 14px -6px rgba(190, 138, 52, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,p { margin: 0; }
::selection { background: rgba(226, 166, 61, .35); }

/* ── background layer ─────────────────────────────────────────── */
#bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
body[data-bg-live] #bg-canvas { opacity: 1; }
#bg-static { position: absolute; inset: 0; transition: opacity 1.2s ease; }
#bg-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(196, 144, 60, .14) 100%); }
body[data-bg-dark] #bg-vignette {
  background: radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(0, 0, 10, .45) 100%); }

/* neutral textured backgrounds (non-animated) */
body[data-bg="organic"] #bg-static {
  background-color: var(--cream);
  background-image:
    radial-gradient(90% 70% at 18% 12%, rgba(255,252,243,.9), transparent 60%),
    radial-gradient(80% 60% at 85% 85%, rgba(240,214,164,.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.017' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.66 0 0 0 0 0.42 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0 0.25 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
body[data-bg="geometry"] #bg-static {
  background-color: var(--cream);
  background-image:
    radial-gradient(100% 80% at 50% 0%, rgba(255,252,243,.85), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='388' viewBox='0 0 224 388'%3E%3Cg fill='none' stroke='%23b99e63' stroke-width='0.8' opacity='0.34'%3E%3Ccircle cx='112' cy='194' r='56'/%3E%3Ccircle cx='112' cy='138' r='56'/%3E%3Ccircle cx='112' cy='250' r='56'/%3E%3Ccircle cx='63.5' cy='166' r='56'/%3E%3Ccircle cx='63.5' cy='222' r='56'/%3E%3Ccircle cx='160.5' cy='166' r='56'/%3E%3Ccircle cx='160.5' cy='222' r='56'/%3E%3Ccircle cx='112' cy='0' r='56'/%3E%3Ccircle cx='112' cy='388' r='56'/%3E%3Ccircle cx='0' cy='97' r='56'/%3E%3Ccircle cx='0' cy='291' r='56'/%3E%3Ccircle cx='224' cy='97' r='56'/%3E%3Ccircle cx='224' cy='291' r='56'/%3E%3Ccircle cx='0' cy='97' r='56'/%3E%3Ccircle cx='63.5' cy='54' r='56'/%3E%3Ccircle cx='160.5' cy='54' r='56'/%3E%3Ccircle cx='63.5' cy='334' r='56'/%3E%3Ccircle cx='160.5' cy='334' r='56'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 224px 388px;
}
body[data-bg="starry"]  #bg-static,
body[data-bg="sunset"]  #bg-static,
body[data-bg="woods"]   #bg-static { opacity: 0; }

/* dark-scene ink adjustments (text sitting directly on the scene) */
body[data-bg-dark] { color: #eef0e6; }
body[data-bg-dark] #topbar .top-orna,
body[data-bg-dark] .user-chip small { color: rgba(240, 240, 225, .75); }
body[data-bg-dark] .view-title, body[data-bg-dark] .view-sub { color: #f2f3ea; text-shadow: 0 2px 14px rgba(0,0,0,.45); }

/* ── app shell ─────────────────────────────────────────────────── */
#app {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: 26px 28px 34px;
}

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view { display: flex; flex-direction: column; }

/* ── sidebar ───────────────────────────────────────────────────── */
#sidebar {
  position: sticky; top: 26px;
  width: 158px; flex: none;
  --r: 34px;
  z-index: 30;
}
#sidebar .glass-inner {
  display: flex; flex-direction: column;
  padding: 22px 12px 14px;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden auto;
  scrollbar-width: none;
}
#sidebar .glass-inner::-webkit-scrollbar { display: none; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green-d);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(236, 246, 232, .55));
  box-shadow: inset 0 0 0 1px rgba(163, 190, 150, .55), 0 3px 10px -3px rgba(120, 150, 90, .4);
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-name {
  font-size: 13px; font-weight: 600; letter-spacing: .24em;
  color: #7c8a4e;
}

#nav { display: flex; flex-direction: column; gap: 4px; }
.nav-foot { margin-top: auto; padding-top: 16px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; flex: none; }
.nav-item:hover { background: rgba(255, 251, 240, .75); color: var(--ink); }
.nav-item.active {
  color: #3c6b4f;
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(233, 244, 228, .8));
  box-shadow: inset 0 0 0 1px rgba(157, 190, 148, .6),
              inset 0 1px 2px rgba(255,255,255,.9),
              0 4px 12px -5px rgba(120, 150, 90, .5);
}

/* ── topbar ────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 18px;
  min-height: 58px;
  margin-bottom: 4px;
  color: #b9a36f;
}
.top-orna { flex: 1; opacity: .9; }
.top-orna svg { width: 100%; max-width: 560px; height: 22px; margin: 0 auto; }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  transition: background .25s ease;
  color: var(--ink);
}
.user-chip:hover { background: rgba(255, 251, 240, .8); box-shadow: 0 4px 14px -6px rgba(190,138,52,.4); }
.user-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--green-d);
  background: radial-gradient(circle at 32% 28%, #ffffff, #eef5ea);
  box-shadow: inset 0 0 0 1px rgba(163,190,150,.6), 0 2px 8px -2px rgba(120,150,90,.45);
}
.user-avatar svg { width: 22px; height: 22px; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.user-meta strong { font-size: 13.5px; font-weight: 600; }
.user-meta small { font-size: 11.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 3px; }
.user-meta .chev { width: 11px; height: 11px; }
body[data-bg-dark] .user-chip { color: #f0f2e8; }
body[data-bg-dark] .user-chip:hover { background: rgba(30,34,28,.5); }

/* ── footer ────────────────────────────────────────────────────── */
#footer { margin-top: 34px; --r: 999px; --bw: 5px; }
#footer .glass-inner {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 13px 30px;
  background: linear-gradient(160deg, rgba(255, 252, 244, .88), rgba(250, 240, 218, .82));
}
.foot-text { font-size: 14px; font-weight: 500; color: var(--ink-soft); letter-spacing: .02em; white-space: nowrap; }
.foot-orna { color: #c9ad72; flex: 1; max-width: 130px; }
.foot-orna svg { width: 100%; height: 10px; }
.foot-mark {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #5c8a4e;
  background: radial-gradient(circle at 32% 28%, #ffffff, #edf4e7);
  box-shadow: inset 0 0 0 1px rgba(163,190,150,.6), 0 3px 10px -3px rgba(120,150,90,.4);
}
.foot-mark svg { width: 26px; height: 26px; }

/* ── generic view scaffolding ──────────────────────────────────── */
.view-head { text-align: center; margin: 8px 0 24px; }
.view-title {
  font-size: 26px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
}
.view-sub { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.view-orna { margin: 10px auto 0; width: 190px; color: #c9ad72; }
.view-orna svg { width: 100%; height: 12px; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  #app { gap: 20px; padding: 18px; }
  #sidebar { width: 74px; }
  #sidebar .brand-name, #sidebar .nav-item span { display: none; }
  #sidebar .nav-item { justify-content: center; }
  .brand-mark { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  #app { flex-direction: column; }
  #sidebar { position: static; width: 100%; --r: 26px; }
  #sidebar .glass-inner { flex-direction: row; align-items: center; min-height: 0; max-height: none; padding: 10px 14px; overflow-x: auto; }
  #sidebar .brand { flex-direction: row; margin: 0 10px 0 0; }
  #nav { flex-direction: row; }
  .nav-foot { margin: 0 0 0 auto; padding: 0; }
  .top-orna { display: none; }
  #topbar { justify-content: flex-end; }
}