:root {
  color-scheme: light;
  --purple: #5b3293;
  --purple-dark: #311957;
  --purple-deep: #171126;
  --orange: #ff9f0a;
  --paper: #f4f4f6;
  --card: #ffffff;
  --ink: #262333;
  --muted: #6d6878;
  --line: #d8d5df;
  --green: #3ccf86;
  --blue: #6fd4ff;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: #101014;
}

body {
  display: grid;
  justify-items: center;
  color: var(--ink);
}

button,
input { font: inherit; }
button { cursor: pointer; }

.phone-app {
  position: relative;
  width: min(100vw, 390px);
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 0.75rem;
  color: #fff;
  background: #050507;
  font-size: 0.75rem;
  font-weight: 700;
}

.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 44px;
  padding: 0 0.7rem;
  color: #fff;
  background: var(--purple);
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

.menu-button {
  position: relative;
  z-index: 35;
  display: grid;
  width: 42px;
  height: 42px;
  margin-left: -0.65rem;
  place-items: center;
  border: 0;
  border-radius: 0 12px 12px 0;
  color: #fff;
  background: var(--orange);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

.app-bar strong { flex: 1; font-size: 0.9rem; }
.safe-chip { font-size: 0.68rem; opacity: 0.86; }

.drawer {
  position: fixed;
  inset: 28px auto 0 calc(50% - min(100vw, 390px) / 2);
  z-index: 30;
  width: min(68vw, 245px);
  transform: translateX(-105%);
  padding: 1rem 0.9rem;
  color: #fff;
  background: var(--purple);
  transition: transform 180ms ease;
  box-shadow: 12px 0 30px rgba(0,0,0,0.28);
}

.drawer.is-open { transform: translateX(0); }
.drawer-profile { display: grid; justify-items: center; gap: 0.35rem; padding: 0.6rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,0.16); }
.drawer-profile small { opacity: 0.78; }
.drawer p { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.35; opacity: 0.78; }
.drawer-link {
  display: block;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  margin-top: 0.35rem;
  padding: 0 0.4rem;
  color: #fff;
  background: transparent;
  text-align: left;
}
.drawer-link.is-active,
.drawer-link:hover { background: rgba(255,255,255,0.14); }
.drawer-link.is-locked { opacity: 0.52; cursor: not-allowed; }

.scrim {
  position: fixed;
  inset: 28px calc(50% - min(100vw, 390px) / 2) 0 calc(50% - min(100vw, 390px) / 2);
  z-index: 25;
  display: none;
  border: 0;
  background: rgba(0,0,0,0.42);
}
.scrim.is-open { display: block; }

.screen {
  display: none;
  height: calc(100svh - 72px);
  overflow-y: auto;
  padding: 1rem 1rem 6rem;
}
.screen.is-active { display: block; }

.hub-header { display: grid; justify-items: center; gap: 0.75rem; }
h1 { margin: 0; color: var(--purple); font-size: 1.45rem; }

.hero-avatar,
.mini-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--purple);
  overflow: hidden;
}
.hero-avatar { width: 112px; height: 112px; }
.mini-avatar { width: 76px; height: 76px; border-color: rgba(255,255,255,0.85); background: #ecdfff; }
.mini-avatar span { width: 42px; height: 42px; border-radius: 50%; background: #9d6ad8; box-shadow: 0 -15px 0 #6f42a5, 16px 5px 0 #4e2b7f, -16px 5px 0 #4e2b7f; }

.hair {
  position: absolute;
  top: 20px;
  width: 80px;
  height: 66px;
  border-radius: 44px 44px 28px 28px;
  background: #8e59c4;
  box-shadow: inset 14px -8px 0 #6b3fa2, inset -12px -8px 0 #b783df;
}
.head {
  position: absolute;
  top: 35px;
  width: 58px;
  height: 54px;
  border-radius: 45% 45% 42% 42%;
  background: #ffd7c2;
}
.head i,
.head b {
  position: absolute;
  top: 22px;
  width: 8px;
  height: 12px;
  border-radius: 50%;
  background: #2f2240;
}
.head i { left: 16px; }
.head b { right: 16px; }
.head em {
  position: absolute;
  left: 24px;
  bottom: 11px;
  width: 11px;
  height: 7px;
  border-bottom: 2px solid #2f2240;
  border-radius: 0 0 99px 99px;
}
.body {
  position: absolute;
  bottom: 7px;
  width: 64px;
  height: 30px;
  border-radius: 18px 18px 0 0;
  background: #68449e;
}
.headphones {
  position: absolute;
  top: 44px;
  width: 92px;
  height: 42px;
  border: 6px solid #4f2d80;
  border-bottom: 0;
  border-radius: 48px 48px 0 0;
}

.new-chat,
.save-button,
.prompt-dock button,
.search-row button,
.shuffle-button,
.template-grid button,
.editor-top button,
.tool-grid button,
.back-button {
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--purple);
  font-weight: 700;
}
.new-chat { min-height: 36px; padding: 0 0.8rem; }

.chat-log {
  height: 178px;
  overflow: hidden;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.65rem;
  background: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
}
.chat-log p { margin: 0 0 0.25rem; }

.preview-panel {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.65rem;
  background: #fff;
}
.preview-panel.is-hidden { display: none; }

.portrait-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, #eefaff 0%, #f9fbff 100%);
}
.portrait-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(125, 93, 164, 0.1), transparent 25%); }
.portrait-hair {
  position: absolute;
  left: 84px;
  top: 40px;
  width: 145px;
  height: 175px;
  border-radius: 80px 80px 55px 55px;
  background: #1d1d27;
  box-shadow: inset 22px -14px 0 #333342, -24px 34px 0 #1d1d27, 28px 34px 0 #1d1d27;
}
.portrait-face {
  position: absolute;
  left: 107px;
  top: 79px;
  width: 95px;
  height: 108px;
  border-radius: 42% 42% 48% 48%;
  background: #ffd8bf;
}
.portrait-face span,
.portrait-face b {
  position: absolute;
  top: 42px;
  width: 19px;
  height: 26px;
  border-radius: 50%;
  background: #282333;
  box-shadow: inset 4px 4px 0 #fff;
}
.portrait-face span { left: 20px; }
.portrait-face b { right: 20px; }
.portrait-face i {
  position: absolute;
  left: 43px;
  bottom: 24px;
  width: 18px;
  height: 15px;
  border-radius: 50%;
  background: #d35e72;
}
.portrait-shirt {
  position: absolute;
  left: 78px;
  bottom: -8px;
  width: 160px;
  height: 94px;
  border-radius: 45px 45px 0 0;
  background: linear-gradient(90deg, #f4a7b9, #ffe1e9);
}
.save-button { justify-self: start; min-height: 34px; padding: 0 0.75rem; }

.prompt-dock {
  position: fixed;
  left: calc(50% - min(100vw, 390px) / 2);
  right: calc(50% - min(100vw, 390px) / 2);
  bottom: 0;
  z-index: 18;
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 1rem 0.85rem;
  background: rgba(244,244,246,0.96);
  border-top: 1px solid var(--line);
}
.prompt-dock input,
.search-row input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 0.7rem;
  background: #fff;
}
.dock-actions { display: flex; justify-content: center; gap: 0.8rem; }
.prompt-dock button { min-width: 76px; min-height: 35px; padding: 0 0.75rem; }

.simple-heading { display: grid; justify-items: center; gap: 0.25rem; margin-bottom: 1rem; text-align: center; }
.simple-heading p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.thumb {
  position: relative;
  min-height: 84px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.thumb::before,
.thumb::after { content: ""; position: absolute; }
.creature { background: linear-gradient(135deg, #ffd9a8, #fff3d4); }
.creature::before { width: 48px; height: 54px; left: 25px; top: 20px; border-radius: 50%; background: #ed9252; box-shadow: 0 -18px 0 -8px #ed9252; }
.creature::after { width: 9px; height: 9px; left: 40px; top: 41px; border-radius: 50%; background: #2b2232; box-shadow: 18px 0 0 #2b2232; }
.singer { background: linear-gradient(145deg, #23324f, #90e7ff); }
.singer::before { width: 54px; height: 68px; left: 28px; top: 13px; border-radius: 50% 50% 42% 42%; background: #6fd4ff; box-shadow: inset 14px -8px 0 #3188c5; }
.sunset { background: linear-gradient(180deg, #f39b70, #46436f 58%, #1e2439); }
.sunset::before { width: 44px; height: 44px; left: 34px; top: 20px; border-radius: 50%; background: #ffce6b; }
.round-bot { background: linear-gradient(135deg, #ecefff, #fff); }
.round-bot::before { width: 58px; height: 58px; left: 25px; top: 16px; border-radius: 50%; background: #93e0ed; border: 5px solid #113b50; }
.logo-thumb { display: grid; place-items: center; color: #0d2440; font-weight: 900; font-size: 0.85rem; }
.bot { background: #f4fbff; }
.bot::before { width: 56px; height: 52px; left: 28px; top: 17px; border-radius: 50%; background: #47b5db; border: 5px solid #1a4252; }
.student { background: linear-gradient(180deg, #f5fbff, #e9eef8); }
.student::before { width: 58px; height: 74px; left: 27px; top: 11px; border-radius: 50% 50% 40% 40%; background: #222536; box-shadow: inset 0 34px 0 #ffd4be; }
.sketch { background: #faf9f4; }
.sketch::before { width: 40px; height: 40px; left: 34px; top: 22px; border: 2px solid #111; border-radius: 50%; }
.sketch::after { width: 4px; height: 4px; left: 51px; top: 41px; border-radius: 50%; background: #111; box-shadow: 12px 0 0 #111; }
.city { background: linear-gradient(180deg, #eefbe7, #bbe6b3); }
.city::before { inset: auto 10px 10px; height: 46px; background: repeating-linear-gradient(90deg, #ffcf70 0 18px, #90d3ff 18px 36px, #ee8fa9 36px 54px); transform: skewY(-18deg); }

.dark-screen,
.editor-screen { color: #f8f8fb; background: #10131a; min-height: calc(100svh - 72px); }
.template-header,
.editor-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.template-header h1,
.editor-top h1 { flex: 1; color: #fff; font-size: 1.1rem; }
.back-button { width: 42px; height: 42px; font-size: 1.5rem; background: #7b47ff; }
.shuffle-button,
.search-row button,
.template-grid button { min-height: 38px; padding: 0 0.75rem; background: #7b47ff; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.search-row input { color: #fff; background: #151924; border-color: #303442; }
.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.7rem 0; font-size: 0.76rem; }
.provider-grid span { border-radius: 999px; padding: 0.38rem 0.55rem; background: #171c27; }
.safe-note { border: 1px solid #1b6070; border-radius: 8px; padding: 0.65rem; color: #9be9f5; background: #112832; font-size: 0.76rem; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.8rem; }
.template-grid article { display: grid; gap: 0.45rem; padding: 0.45rem; border-radius: 8px; background: #1a202b; }
.template-grid strong { font-size: 0.82rem; }
.template-grid small { color: #b8becb; }
.template-art { min-height: 132px; border-radius: 6px; }
.card-a { background: linear-gradient(90deg, #f7efe6 0 35%, #2b1e1a 35% 100%); }
.card-b { background: linear-gradient(150deg, #fff6cb, #88acd7 45%, #2b324b); }

.editor-top { margin: -1rem -1rem 0; padding: 0.7rem 1rem; background: #121212; }
.editor-top button { min-height: 32px; padding: 0 0.6rem; background: #222; }
.editor-top div { display: flex; gap: 0.35rem; align-items: center; font-size: 0.68rem; }
.editor-top span { border-radius: 6px; padding: 0.38rem 0.5rem; background: #2b2b2b; font-weight: 700; }
.editor-top div button { color: #031014; background: #17dbe8; }
.editor-canvas { height: 170px; margin: 0 -1rem; background: #000; border-bottom: 1px solid #242424; }
.timeline { position: relative; display: grid; gap: 0.5rem; margin: 0 -1rem; padding: 1rem; background: #191919; }
.playhead { position: absolute; left: 72px; top: 0; bottom: 0; width: 3px; background: #fff; }
.playhead::before { content: ""; position: absolute; top: -7px; left: -6px; width: 15px; height: 15px; border-radius: 4px; background: #fff; transform: rotate(45deg); }
.track { min-height: 28px; margin-left: 70px; border-radius: 2px; padding: 0.35rem; color: #bfc7d1; background: #292929; font-size: 0.72rem; }
.main-track { background: linear-gradient(90deg, #20313d, #17242e); }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-top: 1rem; }
.tool-grid button { min-height: 50px; padding: 0.35rem; color: #fff; background: #242424; font-size: 0.68rem; }
.tool-grid button:last-child { background: #582b32; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-height: 760px) {
  .hub-header { gap: 0.5rem; }
  .hero-avatar { width: 86px; height: 86px; }
  .chat-log { height: 104px; }
  .portrait-card { min-height: 152px; }
  .preview-panel { padding: 0.5rem; }
  .screen { padding-top: 0.75rem; padding-bottom: 5.4rem; }
}