:root {
  --bg: #0c0c0c;
  --topbar: rgba(4, 5, 11, 0.94);
  --panel: #1c1c1c;
  --panel-deep: #111;
  --surface: #232323;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #fff;
  --muted: #c6ccd6;
  --quiet: #8e96a3;
  --oracle: #c74634;
  --blue: #087caf;
  --green: #2a7a44;
  --purple: #7138a1;
  --pink: #c23a5a;
  --orange: #c96a25;
  --yellow: #f5b43c;
  --radius: 16px;
  --radius-sm: 10px;
  font-family: "Oracle Sans", "Segoe UI", Inter, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.app-shell { min-height: 100vh; background: var(--bg); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--topbar);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

.brand, .top-actions, .brand-mark, .pill, .page-title, .feature-tag,
.card-title-row, .button-row, .section-title, .field-label, .upload-zone,
.play-button, .timeline-meta, .studio-toolbar { display: flex; align-items: center; }

.brand { gap: 12px; min-width: 0; }
.brand-mark { gap: 10px; color: inherit; text-decoration: none; }
.brand-mark img { width: 78px; height: 22px; object-fit: contain; }
.brand-name { font-size: 14px; font-weight: 700; white-space: nowrap; }

.menu-button {
  width: 34px; height: 34px; padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.menu-button img { width: 18px; height: 18px; }

.top-actions { gap: 9px; }
.pill {
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  font-size: 13px;
  white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #38a8d8; box-shadow: 0 0 10px #38a8d8; }
.pill img { width: 13px; height: 13px; }
.api-timings-menu { position: relative; }
.api-timings-menu summary { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; list-style: none; border: 1px solid rgba(255,255,255,.34); border-radius: 7px; color: #fff; background: #075479; font-size: 12px; font-weight: 700; cursor: pointer; }
.api-timings-menu summary::-webkit-details-marker { display: none; }
.api-timings-menu summary:focus-visible { outline: 3px solid #f5b942; outline-offset: 3px; }
.api-timings-menu summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.api-timings-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 65; width: min(430px, calc(100vw - 24px)); max-height: min(70dvh, 620px); overflow-y: auto; padding: 16px; border: 1px solid #dbe5ed; border-radius: 12px; color: #11192d; background: #fff; box-shadow: 0 18px 40px rgba(0,38,57,.2); white-space: normal; }
.api-timings-panel h2 { margin: 0 0 6px; font-size: 19px; }
.api-timings-panel p { margin: 0 0 12px; color: #475569; font-size: 12px; line-height: 1.4; }
.api-timings-panel ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.api-timings-panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 0; border-top: 1px solid #e5e7eb; font-size: 12px; }
.api-timings-panel li strong { min-width: 0; overflow-wrap: anywhere; }
.api-timings-panel li span { font-weight: 700; white-space: nowrap; }
.api-timings-panel li.is-error span { color: #ad392d; }
.avatar {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #c74634, #006ba6);
}

.sidebar {
  position: fixed; z-index: 60; left: 0; top: 54px; bottom: 0;
  width: 240px; padding: 18px 12px;
  background: #111216; border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .24s ease;
  box-shadow: 24px 0 60px rgba(0,0,0,.45);
}
.sidebar.open { transform: translateX(0); }
.nav-label { margin: 4px 10px 12px; color: var(--quiet); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin: 3px 0; border: 0; border-radius: 10px;
  color: #dfe3ea; background: transparent; cursor: pointer; text-align: left;
  text-decoration: none;
}
.nav-item:hover, .nav-item.active { background: rgba(199,70,52,.16); color: #fff; }
.nav-item img { width: 18px; height: 18px; }
.sidebar-backdrop { position: fixed; inset: 54px 0 0; z-index: 55; background: rgba(0,0,0,.48); backdrop-filter: blur(2px); }

.content { width: 100%; max-width: 1228px; margin: 0 auto; padding: 18px 24px 36px; }
.dashboard { padding-top: 18px; }

.hero-strip {
  min-height: 118px; display: grid; grid-template-columns: 1.05fr 1.45fr;
  align-items: center; gap: 28px; padding: 22px 28px;
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(199,70,52,.24), transparent 42%),
    radial-gradient(ellipse at 87% 55%, rgba(0,107,166,.2), transparent 36%), #1c1c1c;
}
.hero-copy h1 {
  margin: 0 0 3px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em;
  background: linear-gradient(100deg, #f9d849, #c74634 52%, #38a8d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy p { margin: 0; color: #d8e0ec; font-size: 13px; line-height: 1.5; }
.hero-benefits { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.feature-tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.feature-tag { gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.05); font-size: 13px; }
.feature-tag img { width: 13px; height: 13px; }
.ai-orbit { position: relative; flex: 0 0 86px; height: 72px; }
.ai-core {
  position: absolute; left: 21px; top: 13px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(56,168,216,.5); border-radius: 12px; font-size: 16px; font-weight: 800;
  background: linear-gradient(135deg, rgba(0,107,166,.6), rgba(26,122,196,.95));
  box-shadow: 0 8px 28px rgba(0,107,166,.5);
}
.orb { position: absolute; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.orb img { width: 11px; height: 11px; }
.orb.o1{left:2px;top:3px;background:#c23a5a}.orb.o2{right:0;top:0;background:#2a7a44}.orb.o3{left:0;bottom:5px;background:#6a3a9a}.orb.o4{right:0;bottom:0;background:#c46a2a}

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.tool-card {
  min-width: 0; height: 308px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); background: #1c1c1c;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.experience-card { color: inherit; cursor: pointer; text-decoration: none; }
.experience-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tool-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); box-shadow: 0 18px 32px rgba(0,0,0,.23); }
.tool-head { min-height: 76px; display: flex; gap: 11px; padding: 14px 14px 10px; }
.icon-box { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.icon-box img { width: 20px; height: 20px; }
.tool-copy h2 { margin: 0 0 2px; font-size: 15px; line-height: 1.5; }
.tool-copy p { margin: 0; color: #f1f2f4; font-size: 13px; line-height: 1.45; }
.tool-media { position: relative; height: 158px; margin: 0 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: #0d0d0d; }
.tool-media > img { width: 100%; height: 100%; object-fit: cover; }
.dual-media { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; }
.dual-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.overlay-chip { position: absolute; left: 9px; bottom: 9px; padding: 4px 8px; border-radius: 5px; background: rgba(0,0,0,.75); font-size: 10px; color: #eee; }
.wave { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; align-items:center; gap:3px; height:24px; }
.wave i { width:3px; border-radius:3px; background:#ff4e78; height:var(--h); }
.card-action { margin: 10px; height: 42px; border: 0; border-radius: 10px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.card-action img { width: 14px; height: 14px; }
.motto { margin: 16px 0 0; text-align: center; font-size: 20px; font-weight: 800; background: linear-gradient(90deg,#f9d849,#c74634,#38a8d8); -webkit-background-clip:text;background-clip:text;color:transparent; }

.page-title { gap: 12px; margin: 3px 0 22px; }
.page-title .icon-box { flex-basis: 40px; }
.page-title h1 { margin: 0; font-size: 23px; line-height: 1.2; }
.page-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 18px; }
.main-column { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.control-panel { align-self: stretch; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.panel-section { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.panel-section:last-child { border: 0; margin: 0; padding: 0; }
.section-title { gap: 10px; margin: 0 0 18px; color: #dfe3ea; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-title::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.07); }
.field { margin: 0 0 14px; }
.field:last-child { margin-bottom: 0; }
.field-label { justify-content: space-between; margin: 0 0 7px; color: #e8ebef; font-size: 12px; }
.value-badge { padding: 3px 6px; border-radius: 4px; color: #fff; background: color-mix(in srgb, var(--accent) 75%, #222); font-size: 10px; }
select, input[type="text"], input[type="search"], textarea {
  width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  background: #101010; color: #fff; outline: none;
}
select, input[type="text"], input[type="search"] { height: 46px; padding: 0 13px; }
textarea { min-height: 116px; padding: 13px; resize: vertical; color: #cbd2dd; line-height: 1.55; }
select:focus, input:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented button, .chip {
  min-height: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  background: #2b2b2b; color: #d9dde4; font-size: 11px; cursor: pointer;
}
.segmented button.active, .chip.active { border-color: color-mix(in srgb, var(--accent) 65%, transparent); color: color-mix(in srgb, var(--accent) 75%, white); background: color-mix(in srgb, var(--accent) 18%, #222); }
.toggle-row { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; color: #e4e7eb; font-size: 12px; line-height: 1.45; }
.toggle-row small { display:block; margin-top:2px; color:#b8bec8; }
.toggle { width: 34px; height: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 2px; background: #444; cursor: pointer; }
.toggle::before { content:""; display:block; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.toggle.on { background: var(--accent); }.toggle.on::before{transform:translateX(14px)}
.secondary-button, .primary-button { width: 100%; height: 42px; border: 0; border-radius: 9px; font-size: 13px; cursor:pointer; }
.secondary-button { background:#3b3b3b; border:1px solid rgba(255,255,255,.12); }
.primary-button { background: var(--accent); font-weight: 700; }
.primary-button:disabled { opacity:.68; cursor:wait; }

.media-stage { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#151515; }
.image-stage { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:394px; }
.image-stage img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.generated-stage{display:grid;place-items:center;grid-template-columns:1fr;gap:0;background:#151515}.generated-stage [hidden]{display:none!important}.generated-stage.has-generated-image{background:#060606}.generated-stage>img,.image-stage.generated-stage>img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:contain!important;object-position:center!important}.empty-image-state,.generation-loader{display:flex;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:#cbd2dd;font-size:13px;text-align:center}.empty-image-state strong,.generation-loader strong{color:#fff;font-size:15px}.generation-loader{background:rgba(8,8,8,.78);backdrop-filter:blur(4px)}.loader-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.generated-thumbs{display:flex;min-height:62px;align-items:center;overflow-x:auto}.generated-thumb{flex:0 0 82px;height:62px;padding:0;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:#121212;cursor:pointer}.generated-thumb img{width:100%;height:100%;object-fit:contain;background:#060606}.generated-thumb:hover{border-color:var(--accent)}.empty-thumbnails{margin:0;color:var(--quiet);font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}
.image-generation-error { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:safe center; flex-direction:column; gap:12px; padding:32px; overflow-y:auto; background:rgba(19,25,31,.94); color:#fff; text-align:center; }
.image-generation-error strong { font-size:21px; }
.image-generation-error p { max-width:54ch; margin:0; color:#f6d0c8; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.image-generation-error small { color:#b9c7d4; font-size:11px; overflow-wrap:anywhere; }
.image-generation-error button { min-height:40px; margin-top:4px; padding:0 22px; border:1px solid #fff; border-radius:5px; background:#fff; color:#142536; font:inherit; font-weight:700; cursor:pointer; }
.image-generation-error button:hover { background:#e6f3fa; }
.video-stage { height:382px; }
.video-stage > img { width:100%; height:100%; object-fit:cover; }
.video-stage > video { width:100%; height:100%; object-fit:contain; background:#080808; }
.stage-scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65)); pointer-events:none; }
.demo-result-copy { position:absolute; z-index:2; right:18px; bottom:18px; left:18px; display:grid; gap:4px; padding:13px 14px; border:1px solid rgba(111,219,255,.32); border-radius:11px; background:rgba(5,13,18,.78); box-shadow:0 12px 30px rgba(0,0,0,.3); backdrop-filter:blur(10px); }
.demo-result-copy span { color:#8bdcf8; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.demo-result-copy strong { font-size:15px; line-height:1.25; }.demo-result-copy small { color:#c8d2da; font-size:11px; }
.demo-motion { position:absolute; inset:0; overflow:hidden; background:#081217; }.demo-motion[hidden] { display:none; }.demo-motion-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); }.video-stage.is-demo-result:not(.is-demo-playing) .frame-one { opacity:1; transform:scale(1); }.video-stage.is-demo-result::before { position:absolute; z-index:1; inset:0; content:""; background:linear-gradient(110deg,transparent 24%,rgba(119,225,255,.12) 50%,transparent 74%); pointer-events:none; }.video-stage.is-demo-playing::before { animation:demo-preview-sweep 2.8s ease-in-out infinite; }.video-stage.is-demo-playing .demo-motion-frame { animation:demo-motion-frame 3.6s ease-in-out infinite; }.video-stage.is-demo-playing .frame-two { animation-delay:1.2s; }.video-stage.is-demo-playing .frame-three { animation-delay:2.4s; }
@keyframes demo-motion-frame { 0%, 27% { opacity:1; transform:scale(1); } 34%, 100% { opacity:0; transform:scale(1.09); } }
@keyframes demo-preview-pan { from { transform:scale(1); } to { transform:scale(1.07); } } @keyframes demo-preview-sweep { from { transform:translateX(-105%); } to { transform:translateX(105%); } }
.play-button { position:absolute; left:50%; top:50%; justify-content:center; transform:translate(-50%,-50%); width:70px; height:70px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(255,255,255,.24); backdrop-filter:blur(6px); cursor:pointer; }
.play-button img { width:28px; height:28px; }
.subpanel { padding: 14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); }
.section-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.section-row h2 { margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#dfe4ec; }
.section-row button { border:1px solid var(--border-strong); border-radius:8px; background:#303030; padding:8px 12px; color:#ddd; font-size:11px; cursor:pointer; }
.thumbs { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:8px; }
.thumb { position:relative; height:62px; border-radius:8px; overflow:hidden; background:#121212; border:1px solid rgba(255,255,255,.08); }
.thumb img { width:100%; height:100%; object-fit:cover; }.thumb span{position:absolute;left:5px;bottom:4px;font-size:9px;font-weight:700;text-shadow:0 1px 4px #000}
.prompt-box { position:relative; }.enhance { position:absolute;right:8px;bottom:8px;width:auto;height:30px;padding:0 11px;border:1px solid var(--border-strong);border-radius:7px;background:#313131;font-size:11px;cursor:pointer}.counter{position:absolute;right:92px;bottom:15px;color:#bbb;font-size:10px}
.chips { display:flex; flex-wrap:wrap; gap:6px; }.chip{padding:0 13px;border-radius:999px}
.timeline { display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}.timeline .thumb{height:42px}.timeline-meta{justify-content:space-between;margin:8px 0;color:#cbd0d7;font-size:11px}.video-info{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-top:1px solid var(--border)}
.prompt-split { display:grid;grid-template-columns:1fr 1fr;gap:16px }.upload-zone{min-height:116px;justify-content:center;flex-direction:column;gap:6px;border:1px dashed rgba(255,255,255,.18);border-radius:10px;color:#d5d9df;font-size:12px;text-align:center}.upload-zone strong{color:var(--blue);font-size:20px}.upload-zone small{color:#aeb5bf}

.search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result-card{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#191919}.result-card img{width:100%;height:180px;object-fit:cover}.result-meta{display:flex;justify-content:space-between;padding:11px;font-size:12px}.match{color:#f5b43c;font-weight:800}
.search-input-row{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px;align-items:center}.search-input-row input[type=file]{width:100%;min-height:42px;padding:11px;border:1px dashed var(--border-strong);border-radius:8px;background:#101010;color:var(--muted);font-size:11px}.result-card-text{min-height:220px}.result-placeholder{height:94px;display:flex;flex-direction:column;justify-content:space-between;padding:15px;background:radial-gradient(circle at 20% 20%,rgba(245,180,60,.28),transparent 44%),linear-gradient(135deg,#2c2414,#141414);color:#f5d889}.result-placeholder span{font-size:10px;font-weight:800;letter-spacing:.12em}.result-placeholder strong{font-size:19px}.result-copy{padding:0 11px 13px}.result-copy h3{margin:0 0 5px;font-size:14px}.result-copy p{margin:0 0 8px;color:var(--muted);font-size:12px;line-height:1.45}.result-copy small{color:var(--quiet);font-size:10px}.result-empty{grid-column:1/-1;padding:34px 18px;border:1px dashed var(--border-strong);border-radius:12px;color:var(--quiet);text-align:center;font-size:12px}
.result-preview-button{display:block;width:100%;padding:0;border:0;background:#101010;cursor:zoom-in}.result-preview-button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.media-preview-dialog{width:min(94vw,1080px);max-width:1080px;max-height:92vh;padding:0;border:1px solid var(--border-strong);border-radius:12px;background:#141414;color:#fff}.media-preview-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}.media-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.media-preview-header h2{overflow:hidden;margin:0;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.media-preview-close{flex:none;padding:7px 11px;border:1px solid var(--border-strong);border-radius:7px;background:#303030;color:#fff;cursor:pointer}.media-preview-dialog img{display:block;max-width:100%;max-height:calc(92vh - 64px);margin:auto;object-fit:contain}.media-preview-loading,.media-preview-error{padding:24px;color:var(--muted);text-align:center}
.studio-canvas{min-height:560px;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:#111}.studio-canvas>img{width:100%;height:560px;object-fit:cover;opacity:.86}.studio-toolbar{position:absolute;left:16px;right:16px;top:16px;justify-content:space-between;padding:10px;border:1px solid var(--border-strong);border-radius:10px;background:rgba(10,10,10,.75);backdrop-filter:blur(10px)}
.experience-launch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:#1c1c1c;box-shadow:0 18px 32px rgba(0,0,0,.2)}.experience-launch-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,5vw,60px)}.launch-eyebrow{margin:0 0 12px;color:#38a8d8;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.experience-launch h2{max-width:11ch;margin:0 0 15px;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.035em}.experience-launch-copy>p:not(.launch-eyebrow){max-width:48ch;margin:0;color:var(--muted);font-size:14px;line-height:1.65}.launch-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px}.launch-primary{min-height:44px;display:inline-flex;align-items:center;gap:14px;padding:0 17px;border-radius:10px;background:var(--oracle);color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:transform .18s ease,background .18s ease}.launch-primary:hover{background:#dc5b48;transform:translateY(-2px)}.launch-primary span{font-size:18px;line-height:1}.launch-note{max-width:26ch;color:var(--quiet);font-size:11px;line-height:1.45}.experience-launch-art{position:relative;min-height:370px;background:linear-gradient(90deg,rgba(12,12,12,.08),rgba(12,12,12,.64)),url("../experience/assets/character-experience-reference.png") center / cover}.launch-art-overlay{position:absolute;right:24px;bottom:25px;left:24px;display:grid;gap:5px}.launch-art-overlay span{color:#38a8d8;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.launch-art-overlay strong{max-width:20ch;font-size:clamp(20px,2.4vw,30px);line-height:1.1}.experience-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.experience-details article{padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.experience-details span{color:#f5b43c;font-size:11px;font-weight:800;letter-spacing:.1em}.experience-details h2{margin:8px 0 5px;font-size:15px}.experience-details p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.toast { position:fixed; z-index:100; right:22px; bottom:22px; max-width:360px; padding:12px 16px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#222; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.45); transform:translateY(24px); opacity:0; pointer-events:none; transition:.22s ease; font-size:13px; }.toast.show{transform:translateY(0);opacity:1}

@media (max-width: 900px) {
  .content { padding: 16px; }
  .hero-strip { grid-template-columns:1fr; }
  .hero-benefits { justify-content:flex-start; }.feature-tags{justify-content:flex-start}
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace { grid-template-columns:1fr; }.control-panel{order:2}
  .experience-launch{grid-template-columns:1fr}.experience-launch-art{min-height:310px;order:-1}
}

@media (max-width: 640px) {
  .topbar{padding:0 10px}.brand{gap:8px}.brand-mark img{width:68px}.brand-name{font-size:12px}
  .pill{display:none}.top-actions{gap:6px}
  .content { padding: 14px 12px 28px; }
  .hero-strip { padding:22px 18px }.hero-copy h1{font-size:23px}.hero-benefits{align-items:flex-start}.feature-tags{gap:7px}.feature-tag{font-size:11px}.ai-orbit{display:none}
  .tool-grid { grid-template-columns:1fr; }.tool-card{height:auto}.tool-media{height:172px}
  .motto{font-size:16px;line-height:1.4}.page-title{align-items:flex-start}.page-title h1{font-size:21px}.page-title p{line-height:1.4}
  .image-stage{height:auto;grid-template-columns:1fr}.image-stage img{height:280px}.generated-stage{height:280px}.generated-stage img{height:100%}.video-stage{height:280px}
  .thumbs{grid-template-columns:repeat(4,1fr)}.timeline{grid-template-columns:repeat(5,1fr)}
  .prompt-split{grid-template-columns:1fr}.segmented{grid-template-columns:repeat(2,1fr)}
  .search-results{grid-template-columns:1fr}.generic-preview{min-height:380px}.preview-status{align-items:flex-start;flex-direction:column}.voice-card{grid-template-columns:50px 1fr}.voice-card .secondary-button{grid-column:1/-1}.voice-avatar{width:50px;height:50px}
  .experience-launch-copy{padding:26px 20px}.experience-launch h2{font-size:32px}.experience-launch-art{min-height:240px}.experience-details{grid-template-columns:1fr}.experience-details article{padding:15px}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }

/* Shared refinement layer: keeps the existing Oracle AI Studio theme while
   making every route calmer, clearer, and easier to operate. */
:root {
  --focus-ring: #fff;
  --focus-shadow: rgba(56, 168, 216, .3);
  --elevation-1: 0 10px 28px rgba(0, 0, 0, .18);
  --elevation-2: 0 20px 46px rgba(0, 0, 0, .30);
}

html { scroll-behavior: smooth; }
body { line-height: 1.45; overflow-x: hidden; }
::selection { background: rgba(199, 70, 52, .72); color: #fff; }

button, a, input, textarea, select { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease, transform .18s ease; }
button, a { touch-action: manipulation; }
button:not(:disabled), a[href] { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-shadow);
}

.skip-link {
  position: fixed; z-index: 200; top: 10px; left: 12px; padding: 9px 12px;
  border-radius: 8px; background: #fff; color: #111; font-size: 13px; font-weight: 800;
  text-decoration: none; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.topbar { height: 60px; padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); box-shadow: 0 5px 20px rgba(0, 0, 0, .16); }
.menu-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 8px; }
.menu-button:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); }
.pill { height: 34px; color: #e9edf2; }
.avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 4px 12px rgba(0, 0, 0, .28); }

.sidebar { top: 60px; padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); }
.sidebar-backdrop { inset: 60px 0 0; }
.nav-item { min-height: 44px; font-weight: 600; }
.nav-item:hover { background: rgba(255, 255, 255, .08); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--oracle); }

.content { min-height: calc(100vh - 60px); padding-top: 24px; padding-bottom: 48px; }
.dashboard { padding-top: 0; }
.page-title { margin: 2px 0 24px; }
.page-title h1 { letter-spacing: -.018em; }
.page-title p { max-width: 68ch; line-height: 1.5; }

.hero-strip { min-height: 128px; box-shadow: var(--elevation-1); }
.hero-eyebrow { margin: 0 0 7px; color: #f5b43c; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.feature-tag { min-height: 32px; color: #edf1f6; }
.tool-grid { gap: 16px; margin-top: 16px; }
.tool-card { height: 316px; box-shadow: 0 1px 0 rgba(255, 255, 255, .025); }
.experience-card { grid-column: span 2; }
.experience-card .tool-media { height: 172px; }
.experience-card .dual-media { grid-template-columns: 1.15fr .85fr; }
.tool-card:hover { box-shadow: var(--elevation-2); }
.tool-card:focus-within { border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), var(--elevation-1); }
.tool-head { padding: 15px 15px 10px; }
.tool-copy h2 { letter-spacing: -.01em; }
.tool-copy p { color: #cfd5de; }
.tool-media { margin: 0 11px; }
.card-action { min-height: 42px; margin: 10px 11px 11px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.card-action:hover { filter: brightness(1.12); transform: translateY(-1px); }
.card-action:active { transform: translateY(0); }

.workspace { align-items: start; gap: 20px; }
.main-column { gap: 16px; }
.control-panel, .subpanel { box-shadow: var(--elevation-1); }
.control-panel { position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow: auto; scrollbar-gutter: stable; }
.subpanel { background: linear-gradient(145deg, rgba(38, 38, 38, .98), rgba(25, 25, 25, .98)); }
.panel-section { padding-bottom: 21px; margin-bottom: 21px; }
.section-title { margin-bottom: 16px; }
.section-row { min-height: 28px; margin-bottom: 13px; }
.section-row small { color: var(--quiet); font-size: 11px; text-align: right; }
.field-label { gap: 8px; font-weight: 600; }
.value-badge { font-variant-numeric: tabular-nums; }
select, input[type="text"], input[type="search"], textarea {
  border-color: rgba(255, 255, 255, .13);
  background: #101114;
}
select:hover, input[type="text"]:hover, input[type="search"]:hover, textarea:hover { border-color: rgba(255, 255, 255, .24); }
select { cursor: pointer; }
select option { background: #171719; color: #fff; }
textarea { min-height: 124px; }
textarea::placeholder, input::placeholder { color: #7f8792; opacity: 1; }
input[type="range"] { height: 20px; cursor: pointer; }
input[type="range"]:focus-visible { outline-offset: 1px; }
input[type="file"] { cursor: pointer; }
.segmented button, .chip { min-height: 36px; font-weight: 700; }
.segmented button:hover, .chip:hover { border-color: rgba(255, 255, 255, .28); background: #353535; }
.segmented button.active:hover, .chip.active:hover { background: color-mix(in srgb, var(--accent) 24%, #222); }
.toggle-row { align-items: flex-start; }
.toggle { flex: 0 0 36px; min-height: 22px; margin-top: 1px; }
.primary-button, .secondary-button { min-height: 44px; font-weight: 700; }
.primary-button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 7px 18px color-mix(in srgb, var(--accent) 20%, transparent); }
.primary-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.primary-button:active:not(:disabled) { transform: translateY(0); }
.secondary-button:hover:not(:disabled), .section-row button:hover { background: #474747; border-color: rgba(255, 255, 255, .25); }
.primary-button:disabled, .secondary-button:disabled { opacity: .52; box-shadow: none; }
.button-row { gap: 10px; }

.media-stage, .result-card { box-shadow: var(--elevation-1); }
.media-stage { background: #111216; }
.empty-image-state, .generation-loader { padding: 24px; line-height: 1.5; }
.empty-image-state span, .generation-loader span { color: var(--muted); }
.generated-thumbs { gap: 8px; padding: 1px; }
.generated-thumb { transition: border-color .18s ease, transform .18s ease; }
.generated-thumb:hover, .generated-thumb:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.thumb { transition: border-color .18s ease, transform .18s ease; }
.thumb:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.upload-zone { min-height: 126px; padding: 14px; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.upload-zone:hover, .upload-zone:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.upload-zone.has-file { border-color: color-mix(in srgb, var(--accent) 70%, white); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.upload-zone input[type=file] { margin-top: 4px; }
.preview-status { padding: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(5, 5, 5, .45); backdrop-filter: blur(10px); }
.metric { white-space: nowrap; }
.search-input-row { grid-template-columns: minmax(0, 1fr) 130px; }
.search-input-row input[type=file] { transition: border-color .18s ease, background .18s ease; }
.search-input-row input[type=file]:hover { border-color: rgba(255, 255, 255, .28); }
.file-help { display: block; margin: 5px 2px 0; color: var(--quiet); font-size: 10px; line-height: 1.35; }
.search-results { gap: 14px; }
.result-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.result-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); box-shadow: var(--elevation-2); }
.result-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.result-empty { padding: 44px 20px; background: rgba(255, 255, 255, .018); line-height: 1.55; }
.video-status-copy{color:#b8bec8;font-size:12px;line-height:1.6}
.route-video .video-profile{margin:0;color:#364354;font-size:12px;line-height:1.5}
.route-video .video-cancel-button{width:100%;margin-top:9px;padding:9px 12px;border:1px solid #ad6170;border-radius:6px;background:#fff;color:#833446;font:inherit;font-size:12px;cursor:pointer}
.route-video .video-cancel-button[hidden]{display:none}
.route-video .video-cancel-button:disabled{opacity:.6;cursor:default}
.image-edit-stage{position:relative;display:grid;min-height:430px;place-items:center;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(circle at 50% 20%,rgba(113,56,161,.18),transparent 42%),#101010;box-shadow:var(--elevation-1)}.image-edit-stage img{width:100%;height:430px;object-fit:contain;transition:filter .18s ease}.edit-stage-copy{position:absolute;right:16px;bottom:16px;display:grid;gap:3px;max-width:calc(100% - 32px);padding:10px 12px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(8,8,10,.72);backdrop-filter:blur(10px)}.edit-stage-copy span{color:#d9b8ff;font-size:9px;font-weight:800;letter-spacing:.1em}.edit-stage-copy strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.edit-upload{min-height:134px}.edit-presets{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.edit-presets .chip{padding:0 8px;border:1px solid var(--border-strong);background:#242424;color:#dce1e8}.edit-presets .chip.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 27%,#242424);color:#fff}.edit-prompt-counter{right:12px}.edit-status{margin:12px 0 0;color:var(--quiet);font-size:11px;line-height:1.45}.edit-status[data-state="error"]{color:#f2ccc5}.edit-status[data-state="ready"]{color:#9de6b3}.edit-steps{display:grid;gap:10px;margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.45}

.toast { right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); line-height: 1.45; }

* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .26) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .24); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); background-clip: padding-box; }

@media (max-width: 900px) {
  .control-panel { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
  .topbar { height: 56px; padding: 0 12px; }
  .sidebar { top: 56px; width: min(88vw, 320px); }
  .sidebar-backdrop { inset: 56px 0 0; }
  .content { min-height: calc(100vh - 56px); padding-top: 18px; padding-bottom: 36px; }
  .page-title { margin-bottom: 20px; }
  .hero-strip { min-height: 0; box-shadow: none; }
  .tool-grid { gap: 14px; }
  .experience-card { grid-column: auto; }
  .tool-card { height: auto; min-height: 306px; }
  .card-action { min-height: 46px; }
  .control-panel, .subpanel { box-shadow: none; }
  .section-row { align-items: flex-start; }
  .section-row small { max-width: 45%; }
  .preview-status { left: 12px; right: 12px; bottom: 12px; }
  .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .topbar { padding: 0 9px; }
  .menu-button { width: 36px; height: 36px; }
  .page-title .icon-box { flex-basis: 36px; height: 36px; }
}

@media (max-width: 640px) {
  .image-edit-stage, .image-edit-stage img { min-height: 360px; height: 360px; }
  .edit-presets { grid-template-columns: 1fr; }
}

/* Figma studio screens: the original service panels remain available below the canvas. */
.route-dashboard, .route-image, .route-video, .route-search, .route-edit { --ink: #111827; --navy: #00283c; color: var(--ink); color-scheme: light; background: #fcf9f6; font-family: Arial, "Segoe UI", sans-serif; }
.figma-strip { display: none; }
.route-dashboard .figma-strip, .route-image .figma-strip, .route-video .figma-strip, .route-search .figma-strip, .route-edit .figma-strip { display: block; height: 8px; background: url("assets/shared/figma-color-strip.png") center / auto 24px repeat-x; }
.route-dashboard .topbar, .route-image .topbar, .route-video .topbar, .route-search .topbar, .route-edit .topbar { height: 60px; background: var(--navy); border: 0; padding: 0 35px; box-shadow: none; }
.route-dashboard .brand-mark img, .route-image .brand-mark img, .route-video .brand-mark img, .route-search .brand-mark img, .route-edit .brand-mark img { width: 80px; height: auto; }
.route-dashboard .brand-name, .route-image .brand-name, .route-video .brand-name, .route-search .brand-name, .route-edit .brand-name { display: none; }
.route-dashboard .menu-button, .route-image .menu-button, .route-video .menu-button, .route-search .menu-button, .route-edit .menu-button { width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 4px; background: #034361; }
.route-dashboard .top-actions, .route-image .top-actions, .route-video .top-actions, .route-search .top-actions, .route-edit .top-actions { gap: 12px; }
.route-dashboard .workspace-pill, .route-image .workspace-pill, .route-video .workspace-pill, .route-search .workspace-pill, .route-edit .workspace-pill { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.route-dashboard .credit-pill { display: none; }
.route-dashboard .avatar { display: none; }
.route-image .credit-pill, .route-video .credit-pill, .route-search .credit-pill, .route-edit .credit-pill { height: 27px; padding: 0 13px; border: 0; color: #343a40; background: #fff; font-size: 13px; }
.route-image .avatar, .route-video .avatar, .route-search .avatar, .route-edit .avatar { width: 31px; height: 31px; border-radius: 50%; background: #e9e9e9; color: #29333b; font-size: 12px; }
.route-dashboard .sidebar, .route-image .sidebar, .route-video .sidebar, .route-search .sidebar, .route-edit .sidebar { top: 60px; }
.route-dashboard .sidebar-backdrop, .route-image .sidebar-backdrop, .route-video .sidebar-backdrop, .route-search .sidebar-backdrop, .route-edit .sidebar-backdrop { inset: 60px 0 0; }
.route-dashboard .content, .route-image .content, .route-video .content, .route-search .content, .route-edit .content { max-width: none; min-height: calc(100vh - 68px); background: #fcf9f6; }
.route-image .content, .route-video .content, .route-search .content, .route-edit .content { position: relative; padding: 38px 35px 36px; }
.route-image .content::after, .route-video .content::after, .route-search .content::after, .route-edit .content::after { position: absolute; right: 0; top: 696px; width: 371px; height: 143px; background: url("assets/figma/figma-tool-corner.png") center / contain no-repeat; content: ""; pointer-events: none; }
.route-image .content > *, .route-video .content > *, .route-search .content > *, .route-edit .content > * { position: relative; z-index: 1; }
.route-dashboard .content { padding: 0; background: #fcf9f6 url("assets/shared/figma-dashboard-bg.png") top center / 100% auto no-repeat; }
.route-dashboard .dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 256px; grid-template-rows: 259px 424px; gap: 0 24px; max-width: 1504px; min-height: 827px; margin: 0 auto; padding: 79px 60px 85px 61px; }
.route-dashboard .dashboard-copy { grid-column: 1 / 5; grid-row: 1; padding-top: 29px; }
.route-dashboard .hero-eyebrow { margin: 0 0 10px; color: #627491; font-size: 15px; font-weight: 800; letter-spacing: .17em; }
.route-dashboard .dashboard-copy h1 { margin: 0 0 13px; color: #101828; font-size: clamp(40px, 3.45vw, 52px); line-height: 1.01; letter-spacing: -.035em; }
.route-dashboard .dashboard-copy h1 span { color: #5955f6; background: linear-gradient(90deg, #2373eb, #b72de5); background-clip: text; -webkit-text-fill-color: transparent; }
.route-dashboard .dashboard-copy > p:last-child { margin: 14px 0 0; color: #4c5d73; font-size: 20px; line-height: 1.4; }
.route-dashboard .dashboard-cards { grid-column: 1 / 5; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; min-width: 0; }
.route-dashboard .tool-card, .route-dashboard .experience-card { min-width: 0; height: 424px; display: flex; flex-direction: column; padding: 24px 23px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 4px 9px rgba(32, 36, 45, .16); text-decoration: none; transform: none; }
.route-dashboard .tool-card:hover, .route-dashboard .experience-card:hover { transform: translateY(-2px); }
.route-dashboard .icon-box { flex: none; width: 48px; height: 47px; display: grid; place-items: center; border-radius: 8px; background: #e0f2ff; }
.route-dashboard .tool-card-video .icon-box { background: #eee8ff; }.route-dashboard .tool-card-search .icon-box { background: #fff0c2; }.route-dashboard .tool-card-edit .icon-box { background: #ffd9c7; }
.route-dashboard .icon-box img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) saturate(100%) invert(26%) sepia(61%) saturate(1108%) hue-rotate(156deg); }
.route-dashboard .tool-card-video .icon-box img { filter: brightness(0) saturate(100%) invert(27%) sepia(31%) saturate(1203%) hue-rotate(235deg); }
.route-dashboard .tool-card-search .icon-box img { filter: brightness(0) saturate(100%) invert(31%) sepia(69%) saturate(677%) hue-rotate(346deg); }
.route-dashboard .tool-card-edit .icon-box img { filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(707%) hue-rotate(335deg); }
.route-dashboard .tool-card h2, .route-dashboard .experience-card h2 { margin: 19px 0 7px; color: #111827; font-size: 20px; line-height: 1.2; }
.route-dashboard .tool-card p, .route-dashboard .experience-card p { margin: 0; color: #627491; font-size: 14px; line-height: 1.55; }
.route-dashboard .tool-card .tool-media { width: 100%; height: 142px; flex: none; margin: auto 0 17px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.route-dashboard .tool-card .tool-media img { width: 100%; height: 100%; object-fit: contain; transform: translateY(-5px) scale(1.13); }
.route-dashboard .tool-card-video .tool-media img { transform: translateY(-5px) scale(1.06); }
.route-dashboard .tool-card-search .tool-media img { transform: translateY(-5px) scale(1.04); }
.route-dashboard .tool-card-image .tool-media { background: #e2f4ff; }
.route-dashboard .tool-card-video .tool-media { background: #efe9ff; }
.route-dashboard .tool-card-search .tool-media { background: #fff3c9; }
.route-dashboard .tool-card-edit .tool-media { background: #ffded1; }
.route-dashboard .card-action { width: 100%; height: 54px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 22px; flex: none; margin: 0; border: 0; border-radius: 4px; background: var(--navy); color: #fff; box-shadow: none; font-size: 14px; font-weight: 500; }
.route-dashboard .card-action img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.route-dashboard .experience-card { grid-column: 5; grid-row: 1 / span 2; height: 683px; padding: 24px 24px 20px; color: #fff; background: var(--navy); }
.route-dashboard .experience-card .icon-box { background: #fff; }
.route-dashboard .experience-card .icon-box img { filter: brightness(0) saturate(100%) invert(12%) sepia(34%) saturate(1327%) hue-rotate(150deg); }
.route-dashboard .experience-card h2 { margin-top: 21px; color: #fff; }
.route-dashboard .experience-card p { color: #eff7fa; }
.route-dashboard .experience-card .tool-media { height: 386px; flex: none; margin: auto 0 18px; background: #fff9ed; }
.route-dashboard .experience-card .tool-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.route-dashboard .experience-card .card-action { height: 52px; min-height: 52px; color: var(--navy); background: #fff; }
.route-dashboard .experience-card .card-action img { filter: brightness(0) saturate(100%) invert(13%) sepia(22%) saturate(1702%) hue-rotate(159deg); }

.figma-workspace { width: 100%; max-width: 1434px; grid-template-columns: minmax(0, 1fr) 346px; gap: 26px; align-items: start; margin: 0 auto; --accent: var(--navy); }
.figma-workspace .tool-canvas { min-width: 0; min-height: 769px; display: flex; flex-direction: column; gap: 0; padding: 20px; border: 1px solid #dfe1e3; border-radius: 12px; background: #fff; box-shadow: none; }
.figma-workspace .page-title { min-height: 49px; gap: 8px; margin: 0 0 20px; align-items: center; }
.figma-workspace .page-title .icon-box { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 9px; background: #e1f2ff; }
.route-video .page-title .icon-box { background: #eee8ff; }.route-search .page-title .icon-box { background: #fff0c2; }.route-edit .page-title .icon-box { background: #ffd9c7; }
.figma-workspace .page-title .icon-box img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) saturate(100%) invert(26%) sepia(61%) saturate(1108%) hue-rotate(156deg); }
.route-video .page-title .icon-box img { filter: brightness(0) saturate(100%) invert(27%) sepia(31%) saturate(1203%) hue-rotate(235deg); }
.route-search .page-title .icon-box img { filter: brightness(0) saturate(100%) invert(31%) sepia(69%) saturate(677%) hue-rotate(346deg); }
.route-edit .page-title .icon-box img { filter: brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(707%) hue-rotate(335deg); }
.figma-workspace .page-title h1 { margin: 0; color: #18191c; font-size: 20px; line-height: 1.2; font-weight: 700; }
.figma-workspace .page-title p { margin: 5px 0 0; color: #35393d; font-size: 13px; line-height: 1.25; }
.figma-workspace .page-title p { max-width: none; }
.figma-workspace .media-stage { width: 100%; height: 463px; flex: none; overflow: hidden; border: 0; border-radius: 10px; background: #f7fafc; box-shadow: none; }
.figma-workspace .image-stage { display: block; }
.figma-workspace .media-stage [hidden], .figma-workspace .video-timeline[hidden], .figma-workspace .play-button[hidden] { display: none !important; }
.figma-workspace .empty-image-state { display: flex; gap: 9px; padding: 20px; color: #606060; background: transparent; font-size: 12px; }
.figma-workspace .empty-image-state strong { margin-top: 6px; color: #555; font-size: 20px; line-height: 1.25; }
.figma-workspace .empty-image-state > span { color: #626262; font-size: 12px; }
.route-image .empty-image-state, .route-video .empty-image-state { transform: translateY(1px); }
.route-image .empty-image-state strong, .route-video .empty-image-state strong { margin-top: -2px; }
.figma-workspace .empty-art { width: 176px; height: 128px; flex: none; object-fit: contain; }
.route-video .empty-art { width: 179px; height: 103px; }
.route-edit .empty-art { width: 166px; height: 100px; }
.figma-workspace .generated-stage > img { object-fit: contain !important; }
.figma-workspace .tool-prompt { margin-top: 20px; }
.figma-workspace .prompt-box { height: 124px; border: 1px solid #dedede; border-radius: 7px 7px 0 0; background: #fbfbfb; }
.figma-workspace .prompt-box textarea { width: 100%; height: 80px; display: block; padding: 15px 14px; border: 0; border-radius: 7px 7px 0 0; outline-offset: -2px; color: #313131; background: transparent; resize: vertical; font-size: 14px; line-height: 1.45; }
.figma-workspace .prompt-box .counter { position: absolute; right: auto; bottom: 11px; left: 10px; color: #626262; font-size: 12px; }
.figma-workspace .prompt-box::after { position: absolute; right: 10px; bottom: 44px; left: 10px; height: 1px; content: ""; background: #e8e8e8; }
.figma-workspace .enhance { right: 10px; bottom: 9px; height: 27px; padding: 0 10px; border: 1px solid #dedede; border-radius: 3px; color: #343434; background: #fff; font-size: 12px; }
.figma-workspace .tool-prompt > .primary-button { width: 100%; height: 53px; min-height: 53px; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0; border: 0; border-radius: 3px; color: #fff; background: var(--navy); box-shadow: none; font-size: 16px; font-weight: 600; }
.figma-workspace .tool-prompt > .primary-button span { font-size: 23px; line-height: 1; }
.figma-workspace .tool-prompt > .primary-button:disabled { color: #aaa; background: #f5f5f5; opacity: 1; }
.figma-workspace .settings-column { min-width: 0; }
.figma-workspace .control-panel { position: static; max-height: none; overflow: visible; padding: 20px; border: 1px solid #dfe1e3; border-radius: 12px; background: #fff; box-shadow: none; }
.figma-workspace .settings-heading { margin: 0 0 20px; padding: 2px 0 12px; border-bottom: 1px solid #eee; color: #777; font-size: 12px; font-weight: 400; letter-spacing: .04em; }
.route-image .settings-heading { margin-bottom: 18px; }
.route-image .settings-panel { padding-bottom: 22px; }
.route-image .settings-panel .field:nth-of-type(2) { margin-bottom: 13px; }
.route-video .settings-panel .duration-field, .route-video .settings-panel .field:nth-of-type(3) { margin-bottom: 13px; }
.figma-workspace .field { margin: 0 0 24px; }
.figma-workspace .field:last-child { margin-bottom: 0; }
.figma-workspace .field-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: #333; font-size: 12px; font-weight: 400; }
.figma-workspace .field select, .figma-workspace .field input[type="text"] { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; color: #07354a; background: #fff; font-size: 12px; }
.figma-workspace .sr-only-control { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.figma-workspace .choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.figma-workspace .result-count-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figma-workspace .choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figma-workspace .choice-grid button { min-width: 0; height: 53px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; border: 1px solid #dedede; border-radius: 6px; color: #303338; background: #fff; font-size: 12px; font-weight: 400; cursor: pointer; }
.figma-workspace .choice-grid button.active, .figma-workspace .choice-grid button[aria-pressed="true"] { border-color: var(--navy); color: var(--navy); background: #dff3ff; }
.figma-workspace .choice-grid button:disabled { color: #999; cursor: not-allowed; }
.figma-workspace .choice-grid button small { color: #6d7177; font-size: 10px; }
.figma-workspace .choice-grid.dimensions button { font-size: 11px; white-space: nowrap; }
.figma-workspace .choice-grid.dimensions button span { color: #168cf0; font-size: 16px; line-height: 1; }
.figma-workspace .value-badge { padding: 0; border: 0; color: #555; background: transparent; font-size: 12px; }
.figma-workspace .duration-field { margin-top: 26px; }
.figma-workspace input[type="range"] { width: 100%; height: 12px; margin: 2px 0 0; accent-color: var(--navy); }
.figma-workspace .recent-panel { min-height: 143px; margin-top: 20px; }
.figma-workspace .recent-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.figma-workspace .recent-heading h2 { margin: 0; color: #222; font-size: 12px; font-weight: 500; }
.figma-workspace .recent-heading h2 span { margin-left: 4px; padding: 3px 6px; border-radius: 4px; color: #777; background: #f3f3f3; }
.figma-workspace .recent-heading button { padding: 0; border: 0; color: #9a9a9a; background: none; font-size: 12px; cursor: pointer; }
.figma-workspace .generated-thumbs { min-height: 64px; display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px; border: 1px dashed #e1e1e1; border-radius: 7px; }
.figma-workspace .empty-thumbnails { width: 100%; color: #aaa; font-size: 12px; text-align: center; }
.figma-workspace .generated-thumb { width: 66px; height: 53px; flex: 0 0 66px; }
.route-image .image-stage.has-generated-image { background: #fff; }
.figma-workspace .image-download { position: absolute; right: 14px; bottom: 14px; z-index: 4; padding: 11px 16px; border-radius: 5px; color: #fff; background: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,.24); font-size: 13px; font-weight: 600; text-decoration: none; }
.figma-workspace .image-download:hover { filter: brightness(1.12); }
.figma-workspace .image-download:focus-visible { outline: 3px solid #f7c948; outline-offset: 2px; }
.route-image .recent-panel:has(.generated-thumb) { min-height: 198px; }
.route-image .recent-panel:has(.generated-thumb) .generated-thumbs { min-height: 108px; height: 108px; align-items: flex-start; padding: 12px; }
.route-image .recent-panel:has(.generated-thumb) .generated-thumb { width: 62px; height: 62px; flex-basis: 62px; }
.tool-below { width: min(100%, 1062px); display: grid; gap: 18px; margin: 24px auto 0 0; color: #26323a; }
.tool-below .subpanel { background: #fff; box-shadow: none; }
.tool-below .section-row h2 { color: #2b3740; }
.tool-below .subpanel p { color: #52606b; }
.route-video .video-stage { display: block; }
.route-video .video-stage.has-result { height: 324px; margin-top: 9px; border-radius: 0; }
.route-video .video-stage > img, .route-video .video-stage > video { width: 100%; height: 100%; object-fit: cover; }
.route-video .video-stage.is-demo-result > img { object-position: center top; }
.route-video .video-stage .stage-scrim { display: none; }
.route-video .video-stage .play-button { width: 92px; height: 92px; z-index: 3; border: 2px solid #fff; background: rgba(0, 25, 40, .55); }
.route-video .video-stage.is-demo-result:not(.is-demo-playing) .play-button { opacity: 0; }
.route-video .video-stage.is-demo-result:not(.is-demo-playing) .play-button:focus-visible { opacity: 1; }
.route-video .video-stage.is-demo-playing .play-button img { display: none; }
.route-video .video-stage.is-demo-playing .play-button::after { content: "Ⅱ"; color: #fff; font-size: 32px; }
.route-video .video-stage.is-demo-result .demo-result-copy { top: 12px; right: 12px; bottom: auto; left: auto; max-width: 200px; padding: 7px 9px; gap: 1px; }
.route-video .video-stage.is-demo-result .demo-result-copy strong { display: none; }
.route-video .video-stage.is-demo-result .demo-result-copy small { font-size: 9px; }
.route-video .video-timeline { height: 120px; flex: none; padding: 14px 20px; background: var(--navy); color: #fff; }
.route-video .video-timeline .section-row { min-height: 14px; margin-bottom: 9px; }
.route-video .video-timeline .section-row h2 { color: #fff; font-size: 11px; letter-spacing: .14em; }
.route-video .video-timeline .section-row small { color: #a5c3d1; font-size: 10px; }
.route-video .video-timeline .timeline { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 9px; }
.route-video .video-timeline .thumb { height: 59px; }
.route-video .video-timeline .thumb img { object-fit: cover; }
.route-video .video-timeline.demo-timeline { position: relative; background: var(--navy) url("assets/figma/figma-video-frame-timeline.png") center -8px / 105% auto no-repeat; }
.route-video .video-timeline.demo-timeline > * { visibility: hidden; }
.route-video .video-timeline.demo-timeline::after { position: absolute; top: 13px; right: 18px; padding: 1px 0 2px 14px; color: #a5c3d1; background: var(--navy); content: "Illustrative sample frames"; font-size: 10px; }
.route-video .video-timeline:not([hidden]) + .tool-prompt { margin-top: 26px; }
.route-edit .edit-stage-copy { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: none; padding: 7px 10px; border-radius: 6px; color: #fff; background: rgba(0, 40, 60, .75); font-size: 10px; }
.route-edit .image-edit-stage.has-generated-image .edit-stage-copy { display: grid; }
.route-edit .empty-image-state strong { color: #111827; }
.route-edit .empty-image-state > span { color: #333; font-size: 14px; }
.route-edit .edit-upload { width: min(100%, 418px); height: 52px; min-height: 52px; display: flex; justify-content: center; margin-top: 18px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--navy); color: #fff; cursor: pointer; }
.route-edit .edit-upload strong { margin: 0; color: #fff; font-size: 14px; }
.route-edit .edit-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.route-edit .stage-file-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.route-edit .replace-image { position: absolute; z-index: 4; top: 12px; right: 12px; padding: 7px 11px; border: 1px solid #d3e5ee; border-radius: 5px; color: #fff; background: #00283c; cursor: pointer; font-size: 12px; }
.route-edit .replace-image[hidden] { display: none !important; }
.route-edit .empty-image-state small { font-size: 12px; }
.route-edit .image-edit-stage .empty-art { min-height: 0; width: 166px; height: 100px; }
.route-edit .edit-status { margin: 0; padding: 13px 16px; border-radius: 7px; background: #fff; font-size: 12px; }
.route-search .search-canvas { min-height: 769px; }
.route-search .search-form-card { padding: 20px 24px 18px; border: 1px solid #e1e1e1; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.route-search .search-form-card .section-row { margin-bottom: 14px; }
.route-search .search-form-card .section-row h2 { color: #777; font-size: 14px; letter-spacing: .02em; }
.route-search .search-form-card .section-row small { color: #aaa; font-size: 12px; letter-spacing: .05em; }
.route-search #mediaSearchForm { display: grid; gap: 18px; }
.route-search #mediaSearch { width: 100%; height: 54px; padding: 0 20px; border: 1px solid #ddd; border-radius: 14px; color: #333; background: #f7fafc; font-size: 16px; }
.route-search .search-input-row { grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: 14px; }
.route-search .search-upload { min-width: 0; min-height: 52px; display: flex; gap: 16px; align-items: center; padding: 8px 25px; border: 1px solid #ddd; border-radius: 13px; color: #555; background: #fbfbfb; cursor: pointer; font-size: 14px; }
.route-search .search-upload > span:first-child { font-size: 24px; }
.route-search .search-upload small { display: block; margin-top: 3px; color: #a1a1a1; font-size: 11px; }
.route-search .search-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.route-search .search-input-row .primary-button { width: 100%; height: 52px; border: 0; border-radius: 4px; color: #fff; background: var(--navy); box-shadow: none; font-size: 16px; }
.route-search .search-input-row .primary-button span { margin-left: 12px; font-size: 24px; }
.route-search .results-heading { margin: 27px 0 25px; color: #292929; font-size: 16px; font-weight: 400; }
.route-search .search-results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; }
.route-search .result-card { min-width: 0; min-height: 244px; overflow: hidden; border: 1px solid #e5e5e5; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.route-search .result-card .result-preview-button, .route-search .result-card .result-placeholder { width: 100%; height: 157px; }
.route-search .result-card img { width: 100%; height: 157px; object-fit: cover; }
.route-search .result-preview-button { position: relative; }
.route-search .result-type { position: absolute; bottom: 9px; left: 10px; padding: 5px 7px; border-radius: 3px; color: #fff; background: rgba(9, 15, 20, .85); font-size: 12px; }
.route-search .result-copy { padding: 13px 14px; }
.route-search .result-copy h3 { margin: 0 0 7px; color: #222; font-size: 14px; line-height: 1.3; }
.route-search .result-copy small { color: #777; font-size: 12px; }
.route-search .result-score { display: block; margin-top: 5px; color: #0c667e; font-size: 11px; }
.route-search .result-empty { padding: 38px; color: #787878; background: #f7fafc; }
.route-search .toggle-row { margin: 8px 0; }
.route-search .toggle-row span { color: #333; font-size: 12px; }
.route-search .toggle-row small { color: #777; font-size: 11px; }
.route-search .toggle { background: #d2d2d2; }
.route-search .toggle.on { background: #087ba4; }
.route-search .media-preview-dialog { background: #fff; color: #222; }

@media (max-width: 1160px) {
  .route-dashboard .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) 270px; grid-template-rows: auto auto; gap: 20px; padding: 50px 32px; }
  .route-dashboard .dashboard-copy { grid-column: 1 / 3; grid-row: 1; padding: 0 0 35px; }
  .route-dashboard .dashboard-cards { grid-column: 1 / 3; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-dashboard .experience-card { grid-column: 3; grid-row: 1 / 3; align-self: start; height: 663px; }
  .figma-workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
  .route-image .content, .route-video .content, .route-search .content, .route-edit .content { padding-right: 22px; padding-left: 22px; }
}
@media (max-width: 840px) {
  .figma-workspace { grid-template-columns: 1fr; }
  .figma-workspace .tool-canvas { min-height: 0; }
  .figma-workspace .settings-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .figma-workspace .recent-panel { margin-top: 0; }
  .route-dashboard .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-dashboard .dashboard-copy { grid-column: 1 / 3; }
  .route-dashboard .dashboard-cards { grid-column: 1 / 3; }
  .route-dashboard .experience-card { grid-column: 1 / 3; grid-row: 3; width: min(100%, 500px); height: auto; min-height: 520px; }
  .route-dashboard .experience-card .tool-media { height: 300px; }
  .route-search .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .route-dashboard .topbar, .route-image .topbar, .route-video .topbar, .route-search .topbar, .route-edit .topbar { height: 56px; padding: 0 14px; }
  .route-dashboard .sidebar, .route-image .sidebar, .route-video .sidebar, .route-search .sidebar, .route-edit .sidebar { top: 56px; }
  .route-dashboard .sidebar-backdrop, .route-image .sidebar-backdrop, .route-video .sidebar-backdrop, .route-search .sidebar-backdrop, .route-edit .sidebar-backdrop { inset: 56px 0 0; }
  .route-image .content, .route-video .content, .route-search .content, .route-edit .content { padding: 20px 14px 30px; }
  .route-image .content::after, .route-video .content::after, .route-search .content::after, .route-edit .content::after { display: none; }
  .route-dashboard .dashboard { display: flex; flex-direction: column; gap: 18px; padding: 30px 14px; }
  .route-dashboard .dashboard-copy { padding: 0 0 12px; }
  .route-dashboard .dashboard-copy h1 { font-size: clamp(34px, 9vw, 44px); }
  .route-dashboard .dashboard-copy > p:last-child { font-size: 16px; }
  .route-dashboard .dashboard-cards { grid-template-columns: 1fr; gap: 18px; }
  .route-dashboard .tool-card { height: 420px; }
  .route-dashboard .experience-card { width: 100%; min-height: 0; height: 580px; }
  .route-dashboard .experience-card .tool-media { height: 340px; }
  .figma-workspace .tool-canvas { padding: 14px; }
  .figma-workspace .page-title { margin-bottom: 16px; }
  .figma-workspace .page-title h1 { font-size: 18px; }
  .figma-workspace .page-title p { font-size: 12px; }
  .figma-workspace .media-stage { height: 360px; }
  .route-video .video-stage.has-result { height: 240px; }
  .route-video .video-timeline { overflow-x: auto; }
  .route-video .video-timeline .timeline { min-width: 730px; }
  .figma-workspace .prompt-box { height: 135px; }
  .figma-workspace .prompt-box textarea { height: 90px; }
  .route-search .search-form-card { padding: 15px; }
  .route-search .search-input-row { grid-template-columns: 1fr; }
  .route-search .search-results { grid-template-columns: 1fr; }
  .route-search .search-form-card .section-row { align-items: start; flex-direction: column; }
  .route-search .search-form-card .section-row small { max-width: none; text-align: left; }
  .route-image .credit-pill, .route-video .credit-pill, .route-search .credit-pill, .route-edit .credit-pill { display: none; }
}

@media (min-width: 1400px) and (max-height: 860px) {
  .route-dashboard .dashboard { min-height: 0; grid-template-rows: 235px 370px; padding-top: 35px; padding-bottom: 35px; }
  .route-dashboard .dashboard-copy { padding-top: 0; }
  .route-dashboard .tool-card { height: 370px; padding: 18px 20px; }
  .route-dashboard .tool-card .tool-media { height: 120px; margin-bottom: 12px; }
  .route-dashboard .experience-card { height: 605px; padding: 20px; }
  .route-dashboard .experience-card .tool-media { height: 315px; margin-bottom: 14px; }
}