:root {
  --director-bg: #0b0d12;
  --director-surface: #11141b;
  --director-surface-2: #171a23;
  --director-surface-3: #1c202a;
  --director-border: #2b303d;
  --director-border-soft: #222733;
  --director-text: #f5f6fb;
  --director-muted: #a8afbf;
  --director-muted-2: #7e8799;
  --director-brand: #635bff;
  --director-brand-dark: #4f46e5;
  --director-brand-soft: rgba(99, 91, 255, .14);
  --director-success: #48d597;
  --director-danger: #ff6d7d;
  --director-warning: #ffbf5b;
  --director-nav-h: 74px;
  --director-radius: 20px;
  --director-radius-sm: 14px;
  --director-shadow: 0 10px 35px rgba(0, 0, 0, .26);
}

* { box-sizing: border-box; }
html { background: var(--director-bg); color-scheme: dark; }
body.director-body {
  margin: 0;
  min-height: 100vh;
  background: var(--director-bg);
  color: var(--director-text);
  font-family: Tahoma, "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.director-body::before { display: none !important; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }

.director-app {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 82% -180px, rgba(99,91,255,.12), transparent 65%),
    var(--director-bg);
}
.director-content {
  width: 100%;
  min-height: 100vh;
  padding-bottom: calc(var(--director-nav-h) + env(safe-area-inset-bottom) + 24px);
}
.director-screen { min-height: calc(100vh - var(--director-nav-h)); }
.screen-pad {
  width: min(100%, 780px);
  margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) 18px 116px;
}
.home-pad { padding-top: max(38px, env(safe-area-inset-top)); }

.android-title {
  margin: 0;
  direction: ltr;
  text-align: left;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 850;
  color: #fff;
}
.android-subtitle {
  margin: 12px 0 28px;
  color: var(--director-muted);
  font-size: 1.25rem;
  font-weight: 700;
}
.android-page-title,
.studio-title {
  margin: 4px 0 10px;
  font-size: clamp(2rem, 8vw, 2.65rem);
  line-height: 1.16;
  font-weight: 850;
  letter-spacing: -.025em;
}
.android-note {
  margin: 4px 0 20px;
  color: var(--director-muted);
  font-size: .98rem;
  line-height: 1.8;
}

.android-card {
  border: 1px solid var(--director-border);
  border-radius: var(--director-radius);
  background: linear-gradient(180deg, rgba(24,28,38,.96), rgba(16,19,27,.96));
  box-shadow: 0 1px 0 rgba(255,255,255,.015) inset;
  padding: 18px;
}
.action-card {
  display: flex;
  width: 100%;
  text-align: right;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  margin-bottom: 14px;
  border: 1px solid var(--director-border);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.action-card:active { transform: scale(.987); background: var(--director-surface-3); }
.action-card strong { font-size: 1.28rem; font-weight: 850; }
.action-card > span:not(.inline-button):not(.card-kicker) { color: var(--director-muted); line-height: 1.7; }
.card-kicker { color: #aaa5ff; font-size: .84rem; font-weight: 800; }
.inline-button { margin-top: 5px; align-self: flex-start; }
.info-card { color: var(--director-muted); line-height: 1.7; margin-bottom: 24px; }

.android-button {
  appearance: none;
  border: 0;
  border-radius: var(--director-radius-sm);
  background: linear-gradient(135deg, var(--director-brand), var(--director-brand-dark));
  color: #fff;
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 850;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79,70,229,.17);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.android-button:active { transform: scale(.985); filter: brightness(.96); }
.android-button:disabled { opacity: .55; cursor: wait; }
.android-button.secondary {
  background: var(--director-surface-2);
  border: 1px solid var(--director-border);
  box-shadow: none;
}
.android-button.success { background: #187c5a; box-shadow: none; }
.android-button.danger { background: #44222a; border: 1px solid #69333e; box-shadow: none; }
.android-button.full { width: 100%; }
.android-button.large { min-height: 56px; font-size: 1.08rem; }
.button-pair { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.file-button { position: relative; overflow: hidden; }

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 12px;
}
.section-heading-row h2 { margin: 0; font-size: 1.18rem; font-weight: 850; }
.section-heading-row.top-heading { margin-top: 0; }
.text-action {
  border: 0;
  padding: 8px 0;
  color: #aaa5ff;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.round-add {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--director-brand); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.count-pill {
  min-width: 30px; height: 30px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--director-brand-soft); border: 1px solid rgba(99,91,255,.32);
  color: #bbb7ff; font-weight: 850; font-size: .85rem;
}

.android-list { display: grid; gap: 10px; }
.list-card, .project-card, .episode-card, .character-card, .asset-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--director-border);
  border-radius: 18px;
  background: var(--director-surface);
  padding: 15px 16px;
  text-align: right;
  color: inherit;
}
button.project-card, button.episode-card { cursor: pointer; }
.list-card-main { min-width: 0; flex: 1; }
.list-card-title { display: block; font-weight: 850; font-size: 1.02rem; line-height: 1.5; }
.list-card-sub { display: block; color: var(--director-muted); font-size: .86rem; line-height: 1.55; margin-top: 4px; }
.list-card-arrow { color: var(--director-muted-2); font-size: 1.4rem; flex: 0 0 auto; }
.empty-state {
  padding: 28px 18px;
  border: 1px dashed var(--director-border);
  border-radius: 18px;
  color: var(--director-muted);
  text-align: center;
  line-height: 1.8;
}

.material-field { margin: 14px 0; }
.material-field label,
.field-title {
  display: block;
  margin: 0 2px 8px;
  color: #e8e9ef;
  font-size: .92rem;
  font-weight: 800;
}
.material-input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--director-border);
  border-radius: 15px;
  background: #10131a;
  color: var(--director-text);
  padding: 13px 14px;
  outline: none;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea.material-input { resize: vertical; min-height: 92px; }
.material-input:focus { border-color: var(--director-brand); box-shadow: 0 0 0 3px rgba(99,91,255,.11); }
.material-input[readonly] { color: var(--director-muted); }
.field-helper { display: block; margin: 7px 3px 0; color: var(--director-muted-2); font-size: .78rem; line-height: 1.5; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ltr-center { direction: ltr; text-align: center; }

.check-row {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 2px 18px; color: #e7e8ee; font-weight: 750; cursor: pointer;
}
.check-row input { width: 20px; height: 20px; accent-color: var(--director-brand); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.select-chip {
  appearance: none;
  border: 1px solid var(--director-border);
  border-radius: 99px;
  background: #11141c;
  color: #d8dbe3;
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
  transition: .12s ease;
}
.select-chip.active { background: var(--director-brand-soft); border-color: rgba(99,91,255,.72); color: #d4d1ff; }
.step-title { margin: 28px 0 14px; font-size: 1.25rem; font-weight: 900; }
.structure-card { margin: 16px 0 20px; color: #c8cbda; }

.internal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  direction: rtl;
  color: var(--director-muted);
  margin-bottom: 22px;
}
.back-button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--director-border); background: var(--director-surface); color: #fff;
  font-size: 1.75rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.internal-screen { padding-bottom: 24px; }

.segmented-control {
  display: grid;
  gap: 4px;
  padding: 4px;
  margin: 22px 0 18px;
  background: #0e1117;
  border: 1px solid var(--director-border-soft);
  border-radius: 16px;
}
.segmented-control.three { grid-template-columns: repeat(3, 1fr); }
.segmented-control button {
  border: 0; background: transparent; color: var(--director-muted); min-height: 44px;
  border-radius: 12px; font-weight: 800; cursor: pointer;
}
.segmented-control button.active { background: #202438; color: #fff; }
.project-tab-content { min-height: 180px; }

.mini-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-btn {
  border: 1px solid var(--director-border); background: #151925; color: #e9eaf0;
  border-radius: 12px; padding: 8px 11px; font-weight: 750; cursor: pointer;
}
.mini-btn.danger { color: #ff9ba7; border-color: #56313a; }
.bible-pre, .result-pre, .prompt-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e5e7ee;
  line-height: 1.85;
  font-size: .95rem;
}
.bible-card { margin-bottom: 14px; }

.prompt-list { display: grid; gap: 12px; margin-top: 18px; }
.prompt-card {
  border: 1px solid var(--director-border);
  border-radius: 18px;
  background: var(--director-surface);
  overflow: hidden;
}
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; border-bottom: 1px solid var(--director-border-soft); }
.prompt-head h3 { margin: 0; font-size: 1rem; }
.prompt-body { padding: 15px; }
.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px 15px; }
.publishing-card, .support-card, .settings-card, .integration-card, .image-ref-card, .ad-results { margin-top: 18px; }
.publishing-card h2, .support-card h2, .ad-results h2 { margin-top: 0; }
.publish-line { white-space: pre-wrap; line-height: 1.7; margin: 9px 0; }
.muted-line { color: var(--director-muted); }

.settings-card { padding: 8px 18px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--director-border-soft); }
.settings-row:last-child { border-bottom: 0; }
.settings-row span { color: var(--director-muted); }
.settings-row b { max-width: 62%; overflow-wrap: anywhere; text-align: left; direction: ltr; }
.settings-actions { display: grid; gap: 10px; margin-top: 18px; }
.android-status { min-height: 24px; margin: 10px 0; color: var(--director-muted); line-height: 1.6; }
.android-status.bad { color: var(--director-danger); }
.android-status.good { color: var(--director-success); }
.center { text-align: center; }
.big-price { font-size: 2.1rem; font-weight: 900; margin: 10px 0 18px; }

.progress-line {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #202431;
  margin: 12px 0;
}
.progress-line span {
  display: block; width: 38%; height: 100%;
  background: var(--director-brand);
  border-radius: inherit;
  animation: director-progress 1.15s infinite ease-in-out;
}
@keyframes director-progress { 0%{transform:translateX(260%)} 50%{transform:translateX(20%)} 100%{transform:translateX(-260%)} }

.director-bottom-nav {
  position: fixed;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--director-nav-h) + env(safe-area-inset-bottom));
  padding: 6px 8px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(12,14,20,.97);
  border-top: 1px solid #20242e;
  backdrop-filter: blur(14px);
}
.director-bottom-nav button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--director-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .73rem;
  font-weight: 750;
  cursor: pointer;
}
.director-bottom-nav .nav-icon {
  font-family: Arial, sans-serif;
  font-size: 1.34rem;
  line-height: 1;
  color: inherit;
}
.director-bottom-nav button.active { color: #a9a5ff; }
.director-fab {
  position: fixed;
  z-index: 45;
  left: 18px;
  bottom: calc(var(--director-nav-h) + env(safe-area-inset-bottom) + 14px);
  width: 58px; height: 58px;
  border-radius: 18px;
  border: 0;
  background: linear-gradient(145deg, #736cff, #5148e7);
  color: #fff;
  box-shadow: 0 10px 30px rgba(79,70,229,.38);
  display: grid; place-items: center;
  cursor: pointer;
}
.director-fab:active { transform: scale(.97); }
.director-icon { font-size: 1.65rem; }
.internal-screen:not(.hidden) ~ * .director-fab { display: none; }

.director-sheet {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(0,0,0,.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .17s ease;
}
.director-sheet.open { opacity: 1; pointer-events: auto; }
.sheet-card {
  width: min(100%, 680px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--director-border);
  border-bottom: 0;
  background: #11141b;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(18px);
  transition: transform .17s ease;
}
.director-sheet.open .sheet-card { transform: translateY(0); }
.sheet-handle { width: 42px; height: 4px; border-radius: 99px; background: #4a5060; margin: 2px auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sheet-head h2 { margin: 0; }
.sheet-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--director-border); background: var(--director-surface); color: #fff; font-size: 1.4rem; cursor: pointer; }

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(var(--director-nav-h) + env(safe-area-inset-bottom) + 18px);
  transform: translate(-50%, 18px);
  max-width: calc(100vw - 32px);
  background: #e9e9f0;
  color: #11131a;
  padding: 11px 16px;
  border-radius: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  text-align: center;
  box-shadow: var(--director-shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #ffccd2; color: #44131a; }

.ad-results { margin-bottom: 28px; }
.image-ref-card { display: flex; flex-direction: column; gap: 10px; }
.image-ref-card h3 { margin: 0; }
.integration-card h3 { margin-top: 0; }

@media (min-width: 620px) {
  .screen-pad { padding-left: 28px; padding-right: 28px; }
  .button-pair { grid-template-columns: 1fr 1fr; }
  .android-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #recentProjects.android-list, #projectTabContent.android-list { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .two-fields { grid-template-columns: 1fr; gap: 0; }
  .screen-pad { padding-left: 14px; padding-right: 14px; }
  .android-page-title, .studio-title { font-size: 1.9rem; }
  .android-title { font-size: 2.15rem; }
  .director-bottom-nav button { font-size: .68rem; }
}

/* Public / auth screens keep the same Material-dark identity as the Android source. */
.public-director { min-height: 100vh; background: var(--director-bg); }
.public-shell { width: min(100%, 680px); margin: 0 auto; padding: max(34px, env(safe-area-inset-top)) 18px 48px; }
.public-top { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:44px;direction:ltr; }
.public-brand { font-weight:900;font-size:1.05rem;letter-spacing:-.01em; }
.public-mark { width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--director-brand),var(--director-brand-dark));display:grid;place-items:center;color:#fff;font-weight:900; }
.public-hero h1 { margin:0;font-size:clamp(2.2rem,11vw,3.7rem);line-height:1.12;font-weight:900;letter-spacing:-.035em; }
.public-hero p { color:var(--director-muted);line-height:1.85;font-size:1.03rem;margin:16px 0 24px; }
.public-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.public-preview { margin-top:34px;padding:20px; }
.public-preview h2 { margin:0 0 16px; }
.public-mini-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--director-border-soft); }
.public-mini-row span { color:var(--director-muted); }
.auth-director-wrap { min-height:100vh;display:grid;place-items:center;padding:max(26px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom));background:var(--director-bg); }
.auth-director-card { width:min(100%,480px);padding:22px;border:1px solid var(--director-border);border-radius:26px;background:var(--director-surface);box-shadow:var(--director-shadow); }
.auth-director-card .public-top { margin-bottom:28px; }
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#0e1117;border:1px solid var(--director-border-soft);border-radius:16px;margin:20px 0; }
.auth-tabs button { border:0;background:transparent;color:var(--director-muted);min-height:46px;border-radius:12px;font-weight:850;cursor:pointer; }
.auth-tabs button.active { background:#202438;color:#fff; }
@media(max-width:390px){.public-actions{grid-template-columns:1fr}.public-shell{padding-left:14px;padding-right:14px}}