/* ===== Halo aurora design tokens (Slice 1) ===== */
:root {
  --bg0:#050509; --bg1:#0a0a11; --bg2:#101019; --bg3:#1a1a26;
  --border:rgba(255,255,255,0.07); --bord2:rgba(255,255,255,0.14);
  --text:#f0f0f6; --dim:#8f8fa6; --faint:#56566a;
  --accent:#8b6cff; --accent2:#ff4fa3; --accent3:#4fd6ff;
  --grad:linear-gradient(135deg,#8b6cff,#ff4fa3 55%,#ff9a5a);
  --glow:rgba(139,108,255,0.45); --onAccent:#ffffff;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-ui:'Manrope',system-ui,sans-serif;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shim { 0% { background-position:-180% 0; } 100% { background-position:180% 0; } }

body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font-ui);
}

/* Legacy tokens (preserved for compatibility). --border/--text/--accent are
   intentionally omitted so the aurora :root above provides them. */
:root {
  --bg: #0a0c14; --panel: #0d0f18; --muted: #718096; --accent-light: #a78bfa;
}
* { box-sizing: border-box; }
body { margin: 0; }

.mc-topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #0a0c14; border-bottom: 1px solid var(--border); }
.mc-logo { font-weight: 800; letter-spacing: .04em; }
.mc-btn { background: #141720; color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.mc-btn-primary { background: var(--accent); border-color: var(--accent); }
.mc-btn-danger { color: #fc8181; border-color: #4a2530; }

.mc-view { display: none; flex: 1; min-height: 0; }
.mc-view.mc-active { display: flex; flex-direction: column; }
.mc-view-image { position: relative; }
#mc-prompt, #mc-video-prompt { width: 100%; min-height: 90px; background: #141720; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; resize: vertical; }
.mc-edit-overlay label { display: block; margin: 10px 0; font-size: .875rem; color: var(--muted); }
.mc-tool-group { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px; }
.mc-library { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mc-library img { width: 100%; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.mc-library img:hover { border-color: var(--accent-light); }
.mc-thumb { display: flex; flex-direction: column; gap: 4px; }
.mc-thumb img { cursor: pointer; width: 100%; border-radius: 6px; }
.mc-use-prompt { font-size: 0.8125rem; padding: 2px 6px; }

.mc-trim-scrubber video { width: 100%; border-radius: 8px; background: #000; }
.mc-trim-track { position: relative; height: 24px; margin-top: 8px; background: var(--bg2); border-radius: 6px; }
.mc-trim-handle { position: absolute; top: 0; width: 10px; height: 24px; background: var(--accent); border-radius: 4px; cursor: ew-resize; transform: translateX(-50%); touch-action: none; }

.mc-canvas-wrap { background: #05070d; border: 1px solid var(--border);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  overflow: auto; flex: 1; min-height: 0; }
.mc-edit-overlay { position: absolute; top: 12px; right: 12px;
  width: 220px; max-height: calc(100% - 24px); overflow-y: auto;
  background: rgba(13, 15, 24, 0.92); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.mc-edit-overlay[hidden] { display: none; }
.mc-overlay-handle { cursor: move; user-select: none; touch-action: none;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 2px 4px 8px; margin: -2px -2px 4px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; }
.mc-overlay-close { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 2px 4px; }
.mc-overlay-close:hover { color: var(--text); }

.mc-draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; }
.mc-draw-tools .mc-btn { padding: 6px 12px; }
.mc-draw-tools .mc-btn.mc-active { background: var(--accent); border-color: var(--accent); }
.mc-draw-field { display: flex !important; align-items: center; gap: 6px; margin: 0 !important;
  font-size: .875rem; color: var(--muted); }
.mc-draw-field input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: #141720; cursor: pointer; }
.mc-draw-field input[type="range"] { width: 90px; }

.mc-mobile-nav { display: none; }
.halo-mobile-toggles { display: none; }

.mc-video-modes { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-video-modes .mc-btn { flex: 1; }
.mc-hint { font-size: 1rem; line-height: 1.6; color: #718096; margin: 4px 0; }
.mc-clip-library { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; min-height: 0; overflow-y: auto; }
.mc-clip-card { background: #141720; border: 1px solid #1e2535; border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.mc-clip-card video { width: 100%; max-height: 56vh;
  object-fit: contain; border-radius: 8px; display: block; background: #000; }
.mc-clip-card .mc-btn { margin-top: 8px; display: inline-block; }
.mc-clip-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mc-clip-status { font-size: 1rem; line-height: 1.6; color: #a0aec0; padding: 28px 16px; text-align: center; }
.mc-clip-error { color: #fc8181; }
.mc-clip-prompt { font-size: 0.8rem; color: #a0aec0; margin-top: 8px; width: 100%; line-height: 1.45; }
.mc-clip-prompt-label { color: #718096; text-transform: uppercase; font-size: 0.62rem;
  letter-spacing: 0.05em; font-weight: 700; margin-right: 6px; }
.mc-trim { width: 100%; margin-top: 10px; }
.mc-trim-track { position: relative; height: 26px; background: #1e2535;
  border-radius: 8px; margin: 6px 0; touch-action: none; }
.mc-trim-range { position: absolute; top: 0; bottom: 0;
  background: rgba(102, 126, 234, 0.30); border-top: 1px solid rgba(102, 126, 234, 0.6);
  border-bottom: 1px solid rgba(102, 126, 234, 0.6); }
.mc-trim-handle { position: absolute; top: -3px; width: 14px; height: 32px;
  margin-left: -7px; background: #667eea; border-radius: 5px; cursor: ew-resize;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); touch-action: none; }
.mc-trim-readout { font-size: 0.72rem; color: #a0aec0; text-align: center; margin-top: 2px; }
.mc-trim-actions { display: flex; justify-content: center; margin-top: 8px; }
.mc-library img.mc-selected { outline: 2px solid #667eea; }

/* --- Sequencer --- */
.mc-seq-bin-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 12px 0 6px; }
.mc-seq-bin { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mc-seq-thumb { height: 44px; border-radius: 6px; font-size: .6rem; color: #cbd5e1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--border); background: #141720; overflow: hidden; }
.mc-seq-thumb img, .mc-seq-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-seq-thumb.is-clip { background: linear-gradient(135deg,#1a2540,#243b6b); }
.mc-seq-thumb.is-image { background: linear-gradient(135deg,#3a2540,#5b2f55); }
.mc-seq-thumb.is-audio { background: linear-gradient(135deg,#1f3a32,#2f6b55); }

.mc-seq-output { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.mc-seq-output a { color: var(--accent-light); }

/* .mc-view is display:none by default and display:flex+column when .mc-active —
   do NOT set display here or the view would always show. Only add the gap. */
.mc-view-seq.mc-active { gap: 10px; }
.mc-seq-preview { flex: 1; min-height: 200px; background: #05070d;
  border: 1px solid var(--border); border-radius: 10px; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mc-seq-preview img, .mc-seq-preview video { max-width: 100%; max-height: 100%; }
.mc-seq-preview-empty { color: #4a5568; font-size: 1rem; line-height: 1.6; }
.mc-seq-preview-text { position: absolute; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }

.mc-seq-timeline { background: #0d0f18; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; }
.mc-seq-track-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mc-seq-track-row:last-child { margin-bottom: 0; }
.mc-seq-track-label { width: 54px; font-size: .6rem; text-transform: uppercase;
  color: var(--muted); text-align: right; }
.mc-seq-lane { flex: 1; min-height: 40px; background: #05070d; border: 1px solid var(--border);
  border-radius: 6px; display: flex; gap: 4px; padding: 4px; overflow-x: auto; }
.mc-seq-seg { position: relative; min-width: 80px; border-radius: 5px; font-size: .6rem;
  color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid #2d3748; padding: 0 4px; }
.mc-seq-seg.is-clip { background: linear-gradient(135deg,#1a2540,#243b6b); }
.mc-seq-seg.is-image { background: linear-gradient(135deg,#3a2540,#5b2f55); }
.mc-seq-seg.is-text { background: #141720; border-style: dashed; color: var(--accent-light); }
.mc-seq-seg.is-audio { background: linear-gradient(135deg,#1f3a32,#2f6b55); color: #d7f5ea; }
.mc-seq-seg.is-selected { outline: 2px solid var(--accent); }
.mc-seq-seg-move { position: absolute; top: 2px; font-size: .7rem; color: #cbd5e1;
  background: rgba(0,0,0,.4); border-radius: 3px; padding: 0 3px; cursor: pointer; }
.mc-seq-seg-move.left { left: 2px; }
.mc-seq-seg-move.right { right: 2px; }

.mc-seq-inspector { background: #0d0f18; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; }
.mc-seq-inspector label { display: block; margin: 8px 0; font-size: .875rem; color: var(--muted); }
.mc-seq-inspector input, .mc-seq-inspector select { width: 100%; }

@media (max-width: 1024px) {
  .mc-seq-bin { grid-template-columns: 1fr 1fr 1fr; }
  .mc-view-seq.mc-active { gap: 8px; }
  .mc-seq-preview { min-height: 150px; }
}

.mc-export-wrap { position: relative; display: inline-block; }
.mc-export-menu { position: absolute; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; gap: 4px; background: #0d0f18; border: 1px solid #1e2535; border-radius: 8px; padding: 6px; z-index: 50; }
.mc-export-menu[hidden] { display: none; }

.mc-upload-btn { display: inline-block; text-align: center; cursor: pointer; }
.mc-upload-btn input { display: none; }

/* ===== Halo shell layout (Slice 1) ===== */
.halo-root { display:flex; flex-direction:column; height:100vh; height:100dvh; }
.halo-topbar { height:58px; flex:none; display:flex; align-items:center; gap:18px; padding:0 18px; background:var(--bg1); border-bottom:1px solid var(--border); }
.halo-brand { display:flex; align-items:center; gap:10px; }
.halo-mark { width:30px; height:30px; border-radius:9px; background:var(--grad); box-shadow:0 0 18px var(--glow); }
.halo-word { font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.halo-nav { display:flex; gap:4px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:4px; }
.halo-nav-btn { padding:7px 15px; border:none; background:transparent; color:var(--dim); border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; }
.halo-nav-btn.halo-active { background:var(--bg3); color:var(--text); }
.halo-spacer { flex:1; }
.halo-topbar-actions { display:flex; align-items:center; gap:8px; }
.halo-avatar { width:32px; height:32px; border-radius:50%; background:var(--grad); flex:none; }

.halo-view { display:none; flex:1; min-height:0; }
.halo-view.halo-active { display:flex; }
.halo-stub { margin:auto; text-align:center; color:var(--dim); }
.halo-stub h1 { font-family:var(--font-display); color:var(--text); }

/* min-width:0 is the companion to min-height:0 here: .halo-editor is a row
   flex item, so without it its min-content width (rail + panel + the full
   canvas + inspector) wins over its flex basis and the whole editor scrolls
   the page sideways instead of the stage scrolling inside itself. */
.halo-editor { flex:1; display:flex; min-height:0; min-width:0; background:var(--bg0); }
.halo-rail { width:60px; flex:none; background:var(--bg1); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 0; }
.halo-tool { width:40px; height:40px; border:none; background:transparent; color:var(--dim); border-radius:10px; font-size:18px; cursor:pointer; }
.halo-tool:hover { background:var(--bg3); color:var(--text); }
.halo-tool.halo-active { background:var(--bg3); color:var(--accent); }
.halo-panel { width:312px; flex:none; background:var(--bg1); border-right:1px solid var(--border); overflow-y:auto; padding:18px; }
.halo-ctx-title { font-family:var(--font-display); font-size:17px; font-weight:700; margin:0 0 14px; }
.halo-ctx-sub { font-size:11px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:0.08em; margin:14px 0 10px; }
.halo-field { display:block; font-size:11px; color:var(--faint); margin-bottom:10px; }
.halo-block { width:100%; margin-top:12px; }
.halo-shape-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.halo-shape-card { aspect-ratio:1/1; background:var(--bg2); border:1px solid var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.halo-shape-rect { width:48px; height:48px; background:var(--accent); border-radius:8px; }
.halo-shape-ell { width:48px; height:48px; background:var(--accent2); border-radius:50%; }
.halo-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.halo-template-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:10px; cursor:pointer; display:flex; flex-direction:column; gap:8px; align-items:center; }
.halo-template-card:hover { border-color:var(--accent-light); }
.halo-template-swatch { width:100%; background:linear-gradient(135deg, var(--accent), var(--accent2)); border-radius:8px; }
.halo-template-name { font-size:14px; font-weight:600; color:var(--dim); text-align:center; }

.halo-stage-area { flex:1; min-width:0; position:relative; display:flex; overflow:auto; background:radial-gradient(circle at 50% 40%, var(--bg1), var(--bg0)); }
.halo-canvas-frame { margin:auto; position:relative; }
.halo-size-readout { position:absolute; right:14px; bottom:14px; font-family:'Space Mono',monospace; font-size:11px; color:var(--faint); background:var(--bg2); border:1px solid var(--border); padding:6px 11px; border-radius:9px; }
.halo-zoom { position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--border); border-radius:11px; padding:4px 8px; color:var(--dim); }
.halo-zoom-btn { cursor:default; opacity:0.5; }
.halo-zoom-pct { font-size:12px; font-weight:600; }

.halo-inspector { width:286px; flex:none; background:var(--bg1); border-left:1px solid var(--border); padding:16px; overflow-y:auto; }
.halo-inspector-props { border-top:1px solid var(--border); padding-top:14px; }

/* .mc-view visibility/flex is governed by the original rules above
   (.mc-view + .mc-view.mc-active = display:flex; flex-direction:column); the new
   shell relies on that flex sizing for .mc-canvas-wrap / sequencer panes, so it is
   intentionally NOT re-declared here. */

/* ===== Halo control restyle (Slice 1) ===== */
.halo-panel textarea, .halo-panel select, .halo-panel input[type="text"] {
  width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:11px 12px; font-size:16px; color:var(--text); font-family:var(--font-ui);
}
.halo-panel textarea { height:96px; resize:none; line-height:1.5; }
.halo-field select { margin-top:6px; cursor:pointer; }
.mc-btn { background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 14px; font-size:15px; font-weight:600; cursor:pointer; font-family:var(--font-ui); }
.mc-btn:hover { border-color:var(--bord2); }
.mc-btn.mc-active { border-color:var(--accent); color:var(--accent); }
.mc-btn-primary { background:var(--accent); border-color:transparent; color:var(--onAccent); box-shadow:0 0 22px var(--glow); }
.mc-btn-danger { color:var(--accent2); }
.mc-hint { color:var(--faint); font-size:16px; line-height:1.6; }
.mc-library { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.mc-library img { width:100%; border-radius:10px; display:block; cursor:pointer; }
.mc-credit { position:fixed; bottom:0; left:0; right:0; text-align:center; padding:10px 0 calc(10px + env(safe-area-inset-bottom)); background:var(--bg1); border-top:1px solid var(--border); }
.mc-credit a { color:var(--faint); font-size:14px; text-decoration:none; opacity:0.8; }

/* ===== Halo layers + properties (Slice 2) ===== */
.halo-text-card { display:block; width:100%; text-align:left; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:10px; color:var(--text); cursor:pointer; font-family:var(--font-ui); }
.halo-text-card:hover { border-color:var(--bord2); }
.halo-text-heading { font-family:var(--font-display); font-size:28px; font-weight:700; }
.mc-layers { display:flex; flex-direction:column; gap:3px; max-height:40vh; overflow-y:auto; }
.mc-layer-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:9px; cursor:pointer; }
.mc-layer-row:hover { background:var(--bg2); }
.mc-layer-row.mc-selected { background:var(--bg3); }
.mc-layer-name { flex:1; min-width:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-layer-type { font-size:10px; color:var(--faint); }
.mc-layer-row button { background:none; border:none; color:var(--faint); cursor:pointer; font-size:12px; padding:2px; }
.mc-layer-row button:hover { color:var(--text); }
.mc-props { font-size:14px; }
.mc-prop-row { display:flex; gap:8px; margin-bottom:10px; }
.mc-prop-row label, .mc-prop-full { flex:1; display:block; font-size:13px; color:var(--faint); }
.mc-prop-full { margin-bottom:12px; }
.mc-props input[type="number"], .mc-props textarea { width:100%; margin-top:4px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:16px; color:var(--text); }
.mc-props input[type="color"] { width:44px; height:34px; margin-top:4px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.mc-props textarea { height:64px; resize:none; }
.mc-text-overlay { position:absolute; z-index:30; background:rgba(10,10,17,0.96); color:#fff; border:1px solid var(--accent); border-radius:6px; padding:4px; resize:none; outline:none; font-family:var(--font-ui); }

/* ===== Halo projects gallery (Slice 3) ===== */
.halo-projects { width:100%; max-width:1180px; margin:0 auto; padding:44px 32px 80px; }
.halo-projects-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.halo-projects-head h1 { font-family:var(--font-display); font-size:32px; margin:0; }
.mc-projects-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:22px; }
.mc-project-card { cursor:pointer; }
.mc-project-thumb { aspect-ratio:4/3; border-radius:12px; background-size:cover; background-position:center; border:1px solid var(--border); }
.mc-project-card:hover .mc-project-thumb { filter:brightness(1.08); }
.mc-project-name { font-size:16px; font-weight:600; margin-top:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-project-edited { font-size:14px; color:var(--faint); margin-top:3px; }

/* ===== Halo explore gallery (Slice 4) ===== */
.halo-explore { width:100%; max-width:1180px; margin:0 auto; padding:44px 32px 80px; }
.halo-explore-head { margin-bottom:24px; }
.halo-explore-head h1 { font-family:var(--font-display); font-size:32px; margin:0 0 4px; }
.mc-explore-grid { column-width:240px; column-gap:18px; }
.mc-explore-tile { position:relative; break-inside:avoid; margin-bottom:18px; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--border); }
.mc-explore-tile img { display:block; width:100%; }
.mc-explore-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:14px; background:linear-gradient(0deg, rgba(0,0,0,0.78), rgba(0,0,0,0) 55%); opacity:0; transition:opacity .2s; }
.mc-explore-tile:hover .mc-explore-overlay { opacity:1; }
.mc-explore-prompt { font-size:16px; line-height:1.55; color:#fff; }
.mc-explore-open { align-self:flex-start; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,0.18); backdrop-filter:blur(4px); padding:3px 9px; border-radius:999px; }

/* ===== Video panel: control row + frame thumbnail dropdowns ===== */
.mc-video-controls { display:flex; gap:10px; margin-top:12px; }
.mc-video-controls .halo-field { flex:1; min-width:0; margin-bottom:0; }
.mc-video-controls .halo-field[hidden] { display:none; }
.mc-video-controls select { margin-top:6px; }

.mc-pic-row { display:flex; gap:12px; margin-top:14px; }
.mc-pic-dd { position:relative; flex:1; min-width:0; }
.mc-pic-dd[hidden] { display:none; }
/* Standalone reference picker in the AI panel gets its own vertical spacing
   (in the video pic-row the flex gap handles this instead). */
#mc-ref-pic { margin:10px 0; }
.mc-ref-clear { margin-top:6px; font-size:0.72rem; padding:4px 10px; }
.mc-pic-dd-cap { display:block; font-size:11px; color:var(--faint); margin-bottom:6px; }
.mc-pic-dd-cap em { font-style:normal; opacity:0.7; }
.mc-pic-dd-trigger {
  width:100%; display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:7px 9px; cursor:pointer; color:var(--text); font-family:var(--font-ui);
  font-size:13px; text-align:left;
}
.mc-pic-dd-trigger:hover { border-color:var(--bord2); }
.mc-pic-dd.mc-open .mc-pic-dd-trigger { border-color:var(--accent); }
.mc-pic-dd-thumb {
  flex:none; width:30px; height:30px; border-radius:7px; background:var(--bg3);
  background-size:cover; background-position:center; border:1px solid var(--border);
}
.mc-pic-dd-thumb.mc-pic-dd-has { border-color:var(--accent); }
.mc-pic-dd-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-pic-dd-caret { flex:none; color:var(--faint); font-size:11px; }
.mc-pic-dd.mc-open .mc-pic-dd-caret { color:var(--accent); }
.mc-pic-dd-menu {
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  background:var(--bg1); border:1px solid var(--bord2); border-radius:12px;
  padding:10px; box-shadow:0 14px 34px rgba(0,0,0,0.5); max-height:260px; overflow-y:auto;
}
.mc-pic-dd-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mc-pic-dd-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
  display:block; cursor:pointer; border:2px solid transparent; }
.mc-pic-dd-grid img:hover { border-color:var(--accent); }
.mc-pic-dd-empty { grid-column:1 / -1; font-size:12px; color:var(--faint); padding:8px 4px; }

/* ===== Halo mobile responsive layout (Slice 6a) =====
   Must come after every desktop .halo-* rule above: at matching specificity,
   CSS source order (not media-query position) decides the winner once a
   media query's condition is true, so an override placed before its
   unconditional desktop counterpart would silently lose the cascade. */
@media (max-width: 1024px) {
  #mc-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(60px + env(safe-area-inset-bottom)); background: #0a0c14;
    border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
    /* Above the bottom sheets (z-index 1080): a closed sheet is only pushed
       down by its own height, which lands it exactly on top of this bar and
       hid the tabs entirely. Open sheets are anchored above the bar, so
       nothing is covered either way. */
    z-index: 1090; }
  .mc-tab { flex: 1; background: none; border: none; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: .58rem; text-transform: uppercase; font-weight: 700;
    letter-spacing: .05em; cursor: pointer; }
  .mc-tab span { font-size: 1.15rem; }
  .mc-tab:hover { color: var(--accent-light); }
  .mc-tab.mc-active { color: var(--accent); }
  .mc-credit { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .mc-edit-overlay { position: static; width: auto; max-height: none; margin-top: 12px; }

  .halo-nav { display: none; }
  /* The editor is a row on desktop (rail | panel | stage | inspector). On
     mobile the rail becomes a horizontal strip and the panels become bottom
     sheets, which only works if the editor itself stacks — left as a row, the
     toggles and rail consumed the full width and the stage was sized to 0. */
  .halo-editor { flex-direction: column; }
  /* Five actions plus the account email never fit a phone width, and they were
     wrapping into three-line buttons ("Save as / Copy", "Log / out") that
     doubled the topbar height. Keep each label on one line and let the row
     scroll sideways instead; the email is redundant here since it is also in
     the account menu. */
  .halo-topbar { gap: 12px; padding: 0 12px; }
  .halo-topbar-actions { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .halo-topbar-actions::-webkit-scrollbar { display: none; }
  .halo-topbar .mc-btn { white-space: nowrap; flex: none; }
  .halo-topbar .mc-account-email { display: none; }
  .mc-account-menu { flex: none; }
  .halo-mobile-toggles { display: flex; flex: none; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .halo-editor { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .halo-rail { flex-direction: row; width: auto; height: 56px; flex: none; border-right: none;
    border-bottom: 1px solid var(--border); overflow-x: auto; padding: 0 8px; }
  .halo-panel, .halo-inspector {
    position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom));
    width: auto; max-height: 60vh; border: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .25s ease;
    z-index: 1080;
  }
  .halo-panel.mc-sheet-open, .halo-inspector.mc-sheet-open { transform: translateY(0); }
  .mc-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1070; }
}

.mc-account-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mc-account-email {
  font-size: 0.875rem;
  color: var(--muted, #8b8fa3);
}

.mc-verify-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: #3a2f1a;
  color: #f0c987;
  font-size: 1rem;
  line-height: 1.5;
}

/* ===== Token balance badge (logged-in shell only) ===== */
.mc-token-badge {
  display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text);
}
.mc-token-badge:hover { border-color: var(--accent); }
.mc-token-badge-value { font-size: 15px; font-weight: 700; }
.mc-token-badge-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint);
}
/* "Unknown" is styled as muted rather than as an alarm: a token-service
   outage is not the same as an empty wallet. */
.mc-balance-unknown .mc-token-badge-value { color: var(--faint); }
.mc-balance-low .mc-token-badge-value { color: #f0c987; }
.mc-balance-zero .mc-token-badge-value { color: var(--accent2); }