/* PRISM studio admin + proofing page.
   Themes = token sets on [data-theme]; everything below reads tokens only, so a
   new theme is one block here + one label in server.py THEMES. Photos carry the
   color — the chrome stays quiet: one accent per theme, no rainbow. */

:root {
  --heart: #ff5470; --ok: #4dd599; --warn: #f0b44c;
  --radius: 12px;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Themes ------------------------------------------------------------------
   bg = page, card = raised surface, raise = inputs/hover, line = borders,
   ink = text, muted = secondary text, accent = buttons/active, on-accent = text on accent. */
:root, [data-theme="darkroom"] {
  color-scheme: dark;
  --bg: #0f0f13; --card: #17171d; --raise: #202028; --line: #2a2a34;
  --ink: #ecebf2; --muted: #8b8a98; --accent: #ecebf2; --on-accent: #111116; --glow: #ecebf2;
}
[data-theme="spectrum"] {
  color-scheme: dark;
  --bg: #0a0c1a; --card: #11142a; --raise: #191d3a; --line: #252a4e;
  --ink: #e8eaff; --muted: #8a90bb; --accent: #8b7bff; --on-accent: #fff; --glow: #4db8ff;
}
[data-theme="ember"] {
  color-scheme: dark;
  --bg: #13100d; --card: #1c1612; --raise: #261e18; --line: #352a21;
  --ink: #f3e9df; --muted: #a39080; --accent: #ff9f43; --on-accent: #1a120a; --glow: #ff6b3d;
}
[data-theme="noir"] {
  color-scheme: dark;
  --bg: #000; --card: #0b0b0b; --raise: #151515; --line: #232323;
  --ink: #fff; --muted: #8a8a8a; --accent: #fff; --on-accent: #000; --glow: #ffffff;
}
[data-theme="gallery"] {
  color-scheme: light;
  --bg: #f6f4f1; --card: #fff; --raise: #f0ece6; --line: #e5dfd7;
  --ink: #1d1b19; --muted: #857f77; --accent: #1d1b19; --on-accent: #fff; --glow: #ffb347;
  --heart: #e0485a; --ok: #2f7d4f; --warn: #b07a1c;
}

/* --- Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 80px; }
a { color: inherit; }
h1, h2 { font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 1.6em 0 .6em; }
.muted { color: var(--muted); } .small { font-size: .85rem; font-weight: 400; }
.err { color: var(--heart); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 16px; }
.card h2:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-head h2 { margin: 0; }

input, textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line);
                  border-radius: 8px; background: var(--raise); color: inherit; }
input:focus, textarea:focus { outline: none; border-color: var(--accent);
                              box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
label { display: block; margin-bottom: 10px; font-size: .9rem; }
label input, label textarea { margin-top: 3px; }
label.check { display: flex; gap: 8px; align-items: center; }
label.check input { width: auto; margin: 0; }
button, .btn { font: inherit; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--accent);
               color: var(--on-accent); cursor: pointer; white-space: nowrap; transition: filter .15s, transform .1s; }
button:hover, .btn:hover { filter: brightness(1.1); }
button:active, .btn:active { transform: translateY(1px); }
button.link { background: none; color: var(--muted); padding: 0; text-decoration: underline; }
button.link.err { color: var(--heart); }
button.ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.row { display: flex; gap: 8px; flex-wrap: wrap; } .row input { flex: 1 1 180px; width: auto; }
.toast { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); padding: 8px 12px; border-radius: 8px; }
.danger { margin-top: 28px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.two .card + .card { margin-top: 0; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }

/* --- App shell: icon rail + top bar (CRM pattern) --------------------------- */
.shell { display: grid; grid-template-columns: 64px 1fr; min-height: 100vh; }
.content { min-width: 0; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center;
        gap: 4px; padding: 12px 0; background: var(--card); border-right: 1px solid var(--line); z-index: 100; }
.rail form { margin: 0; }
.rail-spacer { flex: 1; }
.rail-logo { width: 44px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; color: var(--ink); }
.rail-logo .mark { width: 40px; }
.rail-btn { position: relative; width: 42px; height: 42px; padding: 0; display: grid; place-items: center;
            border-radius: 10px; background: none; color: var(--muted); text-decoration: none; transition: .15s; }
.rail-btn .ico { width: 20px; height: 20px; }
.rail-btn:hover { background: var(--raise); color: var(--ink); filter: none; }
.rail-btn.active { background: var(--raise); color: var(--ink); }
/* Active marker = a sliver of the theme accent */
.rail-btn.active::before { content: ""; position: absolute; left: -11px; top: 9px; bottom: 9px; width: 3px;
                           border-radius: 2px; background: var(--accent); }
/* Hover tooltip from data-tip */
.rail-btn::after { content: attr(data-tip); position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
                   background: var(--raise); color: var(--ink); border: 1px solid var(--line); font-size: .78rem;
                   font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0;
                   pointer-events: none; transition: opacity .1s; }
.rail-btn:hover::after { opacity: 1; }

.topbar { position: sticky; top: 0; z-index: 50; height: 56px; display: flex; align-items: center; gap: 12px;
          padding: 0 24px; border-bottom: 1px solid var(--line);
          background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); }
.wordmark { font-weight: 800; letter-spacing: .32em; font-size: .95rem; text-decoration: none;
            color: var(--ink); }
.crumb-sep { color: var(--line); font-size: 1.2rem; }
.crumb { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.who { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
       font-weight: 700; font-size: .85rem; background: var(--raise); border: 1px solid var(--line); flex-shrink: 0; }

/* Phone: rail becomes a bottom tab bar */
@media (max-width: 700px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 60px; flex-direction: row;
          justify-content: space-around; padding: 0 8px; border-right: 0; border-top: 1px solid var(--line); }
  .rail-logo, .rail-spacer { display: none; }
  .rail-btn::after { display: none; }
  .rail-btn.active::before { left: 9px; right: 9px; top: -9px; bottom: auto; width: auto; height: 3px; }
  .topbar { padding: 0 16px; }
  main { padding: 16px 16px 96px; }
}

/* --- Brand mark + backronym ------------------------------------------------- */
.mark { display: block; height: auto; overflow: visible; }
.backronym { margin: 0; color: var(--muted); font-size: .9rem; letter-spacing: .02em; }
.backronym b { color: var(--ink); font-weight: 700; }

/* --- Login ------------------------------------------------------------------ */
.login-page { min-height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #1c1c24, #08080c 70%); color: #ecebf2; --muted: #8b8a98; --ink: #fff; }
.login-wrap { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; max-width: none; }
.login-card { width: min(420px, 100%); text-align: center; padding: 44px 36px 32px; border-radius: 22px;
              background: rgba(16, 16, 22, .62); border: 1px solid rgba(255,255,255,.09);
              backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.login-word { margin: 0 0 6px; font-size: 2.6rem; font-weight: 800; letter-spacing: .38em; padding-left: .38em;
              color: #fff; }
.login-backronym { font-size: .82rem; margin-bottom: 30px; }
.login-err { color: #ff7a8f; font-size: .9rem; margin: -12px 0 16px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border-radius: 12px;
        background: #fff; color: #1f1f1f; font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.gbtn svg { width: 20px; height: 20px; }
.gbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255,255,255,.12); }
.login-foot { margin: 18px 0 0; font-size: .75rem; color: #6d6c78; }

/* --- Settings ---------------------------------------------------------------- */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
/* Each card carries its own data-theme, so var() here resolves to THAT theme's tokens */
.theme-card { display: grid; gap: 4px; text-align: left; padding: 10px; border-radius: var(--radius);
              background: var(--bg); color: var(--ink); border: 2px solid var(--line); }
.theme-card:hover { filter: none; border-color: var(--muted); }
.theme-card.on { border-color: var(--accent); }
.theme-preview { display: grid; grid-template-columns: 14px 1fr; height: 64px; border-radius: 8px; overflow: hidden;
                 border: 1px solid var(--line); margin-bottom: 6px; }
.tp-rail { background: var(--card); border-right: 1px solid var(--line); }
.tp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; align-content: start; }
.tp-card { height: 22px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); }
.tp-btn { height: 10px; width: 60%; border-radius: 3px; background: var(--accent); }
.theme-name { font-weight: 700; font-size: .9rem; }
.theme-desc { font-size: .75rem; color: var(--muted); white-space: normal; }
.about { display: flex; gap: 20px; align-items: center; }
.about-mark { width: 84px; flex-shrink: 0; color: var(--ink); }
.about h2 { margin: 0 0 4px; letter-spacing: .3em; }

/* --- Presets page ------------------------------------------------------------ */
.preset-list { list-style: none; margin: 14px 0 0; padding: 0; }
.preset-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                  padding: 10px 0; border-top: 1px solid var(--line); }

/* --- Project tiles ----------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
        text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--glow) 55%, var(--line));
              box-shadow: 0 14px 34px color-mix(in srgb, var(--glow) 16%, transparent); }
.cover { aspect-ratio: 4/3; background: var(--raise); display: grid; place-items: center; color: var(--muted); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.meta { padding: 12px 14px; display: grid; gap: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: .75rem; padding: 2px 8px; border-radius: 99px; background: var(--raise); color: var(--muted); }
.chip.on { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .chip.heart { color: var(--heart); }
.empty { grid-column: 1 / -1; }

.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 32px; text-align: center;
        display: grid; gap: 4px; cursor: pointer; transition: .15s; }
.drop.over { border-color: var(--accent); background: var(--raise); }


/* Photo grid (admin + proofing) */
.photos { columns: 4 220px; column-gap: 12px; }
.photos.big { columns: 3 300px; }
.photos figure { break-inside: avoid; margin: 0 0 12px; position: relative; background: var(--card);
                 border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.photos img { display: block; width: 100%; }
.photos figure.hidden img { opacity: .3; }
.photos figure.cover-pick { outline: 2px solid var(--accent); outline-offset: -2px; }
.photos figcaption { display: flex; gap: 14px; padding: 8px 10px; font-size: .85rem; }
.photos figcaption form { margin: 0; }
.fav, .badge { position: absolute; top: 8px; font-size: .8rem; padding: 2px 8px; border-radius: 99px;
               background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(6px); }
.fav { right: 8px; color: var(--heart); } .badge { left: 8px; }

/* Client proofing page */
.proofing { background: #111; color: #eee; --line: #222; --card: #181818; --muted: #999; }
.proof-head { text-align: center; padding: 48px 16px 24px; }
.proof-head h1 { margin: .2em 0; font-size: 2rem; }
.proofing .photos { padding: 0 16px 64px; max-width: 1400px; margin: 0 auto; }
.heart-btn { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; padding: 0;
             border-radius: 50%; font-size: 1.3rem; background: rgba(0,0,0,.45); color: #fff;
             backdrop-filter: blur(6px); transition: transform .15s; }
.heart-btn.on { color: var(--heart); background: #fff; transform: scale(1.1); }

/* Draft/Live banner on the project page */
.status-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }
.status-bar.draft { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.status-bar.live { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }

/* Photo editor — dark surround like Lightroom so colors judge correctly */
.badge.edited { top: auto; bottom: 46px; }
.edit-link { color: var(--muted); }
body:has(.editor) { background: #1b1b1b; color: #ddd; --line: #333; --muted: #8d8d8d; }
body:has(.editor) .topbar { background: rgba(18,18,18,.85); border-color: #2a2a2a; }
body:has(.editor) main { max-width: none; padding: 16px 24px; }
body:has(.editor) .rail { background: #141414; border-color: #2a2a2a; }
.editor { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.stage { text-align: center; }
.stage-nav { display: flex; justify-content: space-between; margin-bottom: 12px; }
.nav-photo { margin-left: 16px; text-decoration: none; }
#canvas { max-width: 100%; max-height: 78vh; display: inline-block; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.hint kbd { border: 1px solid #555; border-radius: 4px; padding: 0 5px; }
.panel { background: #232323; border: 1px solid #2e2e2e; border-radius: 12px; padding: 16px;
         position: sticky; top: 16px; }
.panel h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #999; margin: 0 0 10px; }
.panel h2 + * { margin-bottom: 18px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset { background: #333; color: #ddd; padding: 6px 10px; font-size: .8rem; }
.preset:hover { background: #444; }
.slider { margin-bottom: 8px; }
.slider-head { display: flex; justify-content: space-between; font-size: .85rem; }
.slider-head output { color: #999; font-variant-numeric: tabular-nums; }
.slider input { width: 100%; padding: 0; border: 0; background: none; accent-color: #ddd; }
.actions { display: flex; gap: 8px; margin-top: 16px; }
.actions #save { flex: 1; background: #ddd; color: #111; }
@media (max-width: 800px) { .editor { grid-template-columns: 1fr; } .panel { position: static; } }

/* Editor v2: histogram, tabs, HSL, imported presets */
.histo { width: 100%; height: 80px; background: #181818; border-radius: 6px; margin-bottom: 12px; display: block; }
.actions.top { margin: 0 0 18px; } .actions.top button { flex: 1; }
.tabs, .subtabs { display: flex; gap: 4px; margin: 6px 0 14px; border-bottom: 1px solid #333; }
.tab, .sub { background: none; color: #888; border-radius: 0; padding: 6px 10px; border-bottom: 2px solid transparent; }
.tab.on, .sub.on { color: #eee; border-bottom-color: #ddd; }
.subtabs { border: 0; margin-top: 0; } .sub { font-size: .8rem; padding: 4px 8px; }
.group-gap { height: 10px; }
.slider.changed .slider-head span { color: #fff; }
.slider.changed output { color: #fff; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.temp-track { accent-color: #e9b949 !important; }
.tint-track { accent-color: #c25bbd !important; }
.preset.lr { background: #2e3a4a; }
.preset-wrap { display: inline-flex; }
.preset-wrap .preset { border-radius: 8px 0 0 8px; }
.preset-x { background: #2e3a4a; color: #889; padding: 0 8px; border-radius: 0 8px 8px 0; border-left: 1px solid #1f2733; }
.import-btn { font-size: .8rem; color: #8fb3e0; cursor: pointer; margin: -10px 0 4px; }
#import-msg { margin: 0 0 14px; }