.hub-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.hub-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.brand {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1.35rem; color: var(--mg-hi);
}
.brand span { color: var(--mg-amber); }
.hero {
  padding: 2rem 1.75rem; margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(242,138,45,0.25), transparent 70%);
  pointer-events: none;
}
.hero p { max-width: 42rem; color: rgba(246,230,197,0.78); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.grid-intents {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem;
}
.intent {
  padding: 1.1rem 1rem; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s;
  min-height: 120px;
}
.intent:hover { transform: translateY(-2px); border-color: var(--mg-amber); }
.intent h3 { font-size: 1rem; color: var(--mg-hi); }
.intent p { margin: 0; font-size: 0.92rem; color: rgba(246,230,197,0.65); }
.recent { margin-top: 2rem; }
.recent-list { display: flex; flex-direction: column; gap: 0.55rem; }
.recent-item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; cursor: pointer;
}
.recent-item:hover { border-color: var(--mg-gold); }
.price-strip {
  margin-top: 2rem; padding: 1rem 1.15rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem;
}
.price-strip strong { color: var(--mg-amber); display: block; font-size: 1.15rem; }

/* Studio shell */
.studio {
  height: 100vh; display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--mg-black);
}
.studio-top, .dirs {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--mg-line); background: rgba(10,9,8,0.92);
  flex-wrap: wrap;
}
.studio-top .brand { font-size: 1rem; }
.dirs { gap: 0.35rem; overflow-x: auto; }
.dir-btn {
  border: 1px solid transparent; background: transparent; color: rgba(246,230,197,0.7);
  padding: 0.4rem 0.7rem; border-radius: 8px; cursor: pointer; white-space:nowrap;
}
.dir-btn.active {
  color: var(--mg-hi); border-color: var(--mg-line);
  background: rgba(242,138,45,0.12);
}
.workspace {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: 0;
}
@media (max-width: 1024px) {
  .workspace { grid-template-columns: 1fr; grid-template-rows: 140px 1fr 200px; }
}
.panel {
  border-right: 1px solid var(--mg-line); min-height: 0; overflow: auto;
  background: rgba(7,7,6,0.85); padding: 0.55rem;
}
.panel:last-child { border-right: 0; border-left: 1px solid var(--mg-line); }
.panel h4 {
  font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem;
  letter-spacing: 0.08em; color: var(--mg-gold); margin: 0 0 0.5rem;
}
.monitor-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.75rem; background: #050505; position: relative;
}
.monitor {
  width: min(100%, 720px); aspect-ratio: 16/9; background: #000;
  border: 1px solid var(--mg-line); border-radius: 8px; position: relative; overflow: hidden;
}
.monitor.vertical { aspect-ratio: 9/16; max-height: 58vh; width: auto; }
.monitor video, .monitor canvas, .monitor img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #111;
}
.monitor img.kenburns {
  animation: kenburns 8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, -1%); }
}
.fx-overlay-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
}
@media (max-width: 900px) {
  .studio { height: auto; min-height: 100vh; grid-template-rows: auto auto auto auto auto; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(220px, 40vh) auto; }
  .panel { max-height: 180px; }
  .timeline { min-height: 160px; }
  .studio-top .btn, .studio-top .btn-ghost { padding: 0.4rem 0.55rem; font-size: 0.85rem; }
  .monitor.vertical { max-height: 42vh; }
}
.monitor-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(246,230,197,0.45); text-align: center; padding: 1rem; pointer-events: none;
}
.gizmo-origin, .gizmo-target {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; transform: translate(-50%, -50%); cursor: grab; z-index: 5;
}
.gizmo-origin { background: var(--mg-amber); }
.gizmo-target { background: #3b82f6; }
.fx-arrow {
  position: absolute; height: 2px; background: linear-gradient(90deg, var(--mg-amber), #3b82f6);
  transform-origin: left center; z-index: 4; pointer-events: none;
}
.timeline {
  border-top: 1px solid var(--mg-line); background: #0c0b0a;
  padding: 0.4rem 0.55rem 0.6rem; min-height: 160px;
}
.tl-toolbar { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.4rem; align-items: center; }
.tl-tracks { display: flex; flex-direction: column; gap: 4px; }
.tl-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 6px; align-items: stretch;
}
.tl-label {
  font-size: 0.75rem; color: rgba(246,230,197,0.55); display: flex; align-items: center;
  padding-left: 4px;
}
.tl-lane {
  position: relative; height: 36px; background: #15120f; border-radius: 6px;
  border: 1px solid rgba(212,161,75,0.15); overflow: hidden;
}
.tl-clip {
  position: absolute; top: 3px; bottom: 3px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(242,138,45,0.55), rgba(230,95,30,0.4));
  border: 1px solid rgba(251,239,211,0.25); font-size: 0.7rem; padding: 0 6px;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  cursor: pointer;
}
.tl-clip.audio { background: linear-gradient(90deg, rgba(59,130,246,0.5), rgba(37,99,235,0.35)); }
.tl-clip.fx { background: linear-gradient(90deg, rgba(168,85,247,0.5), rgba(126,34,206,0.35)); }
.playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mg-hi); z-index: 3;
  pointer-events: none;
}
.media-item, .fx-item {
  padding: 0.45rem 0.5rem; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; font-size: 0.88rem; margin-bottom: 0.25rem;
}
.media-item:hover, .fx-item:hover, .media-item.active, .fx-item.active {
  border-color: var(--mg-line); background: rgba(242,138,45,0.08);
}
.search {
  width: 100%; margin-bottom: 0.5rem; background: var(--mg-alt);
  border: 1px solid var(--mg-line); border-radius: 8px; padding: 0.45rem 0.55rem;
}
.autosave-pill {
  font-size: 0.75rem; color: rgba(246,230,197,0.55); padding: 0.2rem 0.55rem;
  border: 1px solid var(--mg-line); border-radius: 999px;
}
.autosave-pill.ok { color: #86efac; border-color: rgba(134,239,172,0.35); }
.inspector-block { margin-bottom: 0.85rem; }
.inspector-block label { display: block; font-size: 0.78rem; color: rgba(246,230,197,0.55); margin-bottom: 0.25rem; }
.inspector-block input[type="range"] { width: 100%; }
.export-targets { display: flex; flex-direction: column; gap: 0.4rem; }
.target-btn {
  text-align: left; padding: 0.65rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--mg-line); background: var(--mg-alt); cursor: pointer;
}
.target-btn:hover:not(:disabled) { border-color: var(--mg-amber); }
.target-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.target-btn small { display: block; color: rgba(246,230,197,0.5); font-size: 0.75rem; }
.status-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.35rem 0.65rem; border-top: 1px solid var(--mg-line);
  font-size: 0.78rem; color: rgba(246,230,197,0.55); background: #0a0908;
}
.tl-clip.title { background: linear-gradient(90deg, rgba(242,138,45,0.55), rgba(212,161,75,0.35)); }
.tl-clip.selected { outline: 2px solid var(--mg-hi); }
.tl-label { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 0.7rem; }
.tl-flag {
  width: 18px; height: 18px; padding: 0; font-size: 0.65rem; line-height: 1;
  border-radius: 4px; border: 1px solid var(--mg-line); background: transparent;
  color: rgba(246,230,197,0.55); cursor: pointer;
}
.tl-flag.on { background: rgba(242,138,45,0.35); color: var(--mg-cream); border-color: var(--mg-amber); }
.job-progress {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.job-progress[hidden] { display: none !important; }
.job-card { min-width: min(360px, 90vw); padding: 1.25rem; }
.job-bar { height: 8px; background: rgba(246,230,197,0.12); border-radius: 999px; overflow: hidden; margin: 0.75rem 0; }
.job-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mg-amber), var(--mg-hi)); transition: width 0.25s; }
.scopes { display: flex; flex-direction: column; gap: 0.35rem; }
.scopes canvas { width: 100%; border: 1px solid var(--mg-line); border-radius: 6px; background: #0a0908; }