/* Orakia Creator Studio — interface web premium */

:root {
  --orakia-night: #050813;
  --orakia-navy: #0b1326;
  --orakia-panel: rgba(13, 20, 39, 0.86);
  --orakia-panel-soft: rgba(19, 27, 51, 0.72);
  --orakia-gold: #e8bd67;
  --orakia-gold-soft: #f6d998;
  --orakia-violet: #a755e7;
  --orakia-blue: #7899ff;
  --orakia-cream: #fffaf0;
  --orakia-ink-soft: #c8cce0;
}

body {
  background:
    radial-gradient(circle at 82% 4%, rgba(84, 67, 174, .2), transparent 28%),
    radial-gradient(circle at 12% 72%, rgba(121, 49, 145, .16), transparent 34%),
    linear-gradient(155deg, var(--orakia-night), #080a19 46%, #040711);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(232,189,103,.7) 0 1px, transparent 1.6px);
  background-position: 17px 29px, 91px 113px;
  background-size: 157px 157px, 223px 223px;
}

.public-nav,
.portal header,
.panel,
.oracle-card,
.express-zone,
.oracle-editor-hero,
.login-card {
  border-color: rgba(232, 189, 103, .22) !important;
  background: linear-gradient(145deg, rgba(16, 24, 46, .9), rgba(7, 11, 25, .86)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(22px) saturate(120%);
}

.content {
  width: min(100%, 1480px);
  margin-inline: auto;
}

.content > .hero:first-child {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(232, 189, 103, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 18%, rgba(167, 85, 231, .2), transparent 26%),
    linear-gradient(135deg, rgba(22, 31, 58, .94), rgba(8, 12, 27, .9));
}

.content > .hero:first-child::after {
  content: "✦";
  position: absolute;
  right: clamp(24px, 6vw, 82px);
  top: 50%;
  translate: 0 -50%;
  color: var(--orakia-gold);
  font-size: clamp(40px, 8vw, 96px);
  opacity: .15;
  filter: drop-shadow(0 0 24px var(--orakia-gold));
}

.content h1,
.content h2,
.content h3,
.public-site h1,
.public-site h2 {
  text-wrap: balance;
}

.content h2,
.public-site h1,
.public-site h2 {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .015em;
}

.creator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.creator-actions button,
.btn-studio,
.btn-primary-action {
  min-height: 44px;
  border-radius: 13px;
}

button:disabled {
  cursor: wait !important;
  opacity: .58;
  transform: none !important;
}

.express-zone {
  margin-bottom: 22px;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px dashed rgba(232, 189, 103, .38) !important;
  border-radius: 22px;
}

.oracle-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 22px;
}

.oracle-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 470px;
  padding: 16px;
  border: 1px solid rgba(232, 189, 103, .2);
  border-radius: 24px;
  translate: none !important;
  transform: none !important;
  transition: border-color .24s ease, box-shadow .24s ease;
}

.oracle-card:hover {
  translate: none !important;
  transform: none !important;
  border-color: rgba(232, 189, 103, .52) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 0 34px rgba(167,85,231,.12);
}

.oracle-grid.is-busy::before {
  content: '';
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: 24px;
  background: rgba(4, 7, 17, .58);
  backdrop-filter: blur(2px);
}

.oracle-grid.is-busy::after {
  content: attr(data-busy-label);
  position: absolute;
  z-index: 21;
  top: 30px;
  left: 50%;
  translate: -50% 0;
  padding: 12px 18px;
  border: 1px solid rgba(232, 189, 103, .48);
  border-radius: 999px;
  background: #10172a;
  color: #f5e6bd;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  font-weight: 700;
  white-space: nowrap;
}

.oracle-card.is-interactive { cursor: pointer; }
.oracle-card.is-interactive:focus-visible {
  outline: 2px solid var(--orakia-gold);
  outline-offset: 4px;
  border-color: rgba(232, 189, 103, .62) !important;
}

.oracle-card-cover {
  width: 100% !important;
  height: 235px !important;
  min-height: 235px !important;
  max-height: 235px !important;
  aspect-ratio: 4 / 3;
  border-radius: 17px !important;
  object-fit: cover !important;
  background: rgba(5, 8, 19, .8);
}

.oracle-card h3 {
  margin: 17px 4px 5px;
  color: var(--orakia-cream);
  font-family: "Cinzel", Georgia, serif;
}

.oracle-card .muted { margin: 0 4px 16px; }

.oracle-card-badges {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.oracle-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.oracle-actions-grid .btn-primary-action {
  grid-column: 1 / -1;
  color: #15101f;
  border: 0;
  background: linear-gradient(110deg, var(--orakia-gold-soft), #c58e35);
  font-weight: 750;
}

.btn-studio {
  padding: 9px 10px;
  border: 1px solid rgba(158, 171, 218, .2);
  color: #e9e8f4;
  background: rgba(17, 25, 49, .72);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.btn-studio:hover {
  border-color: rgba(232, 189, 103, .5);
  background: rgba(43, 38, 75, .82);
}

.btn-studio.gold { color: var(--orakia-gold-soft); }
.btn-studio.danger-subtle { color: #ffafb9; }

.wizard {
  margin-top: 22px !important;
}

.wizard .panel {
  border-radius: 26px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-grid label {
  display: grid;
  align-content: start;
  gap: 8px;
  color: #eeeaf6;
  font-size: .86rem;
  font-weight: 650;
}

.form-grid .full { grid-column: 1 / -1; }

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(163, 177, 219, .22);
  border-radius: 13px;
  outline: none;
  color: var(--orakia-cream);
  background: rgba(4, 8, 20, .78);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-grid textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(232, 189, 103, .72);
  background: rgba(8, 13, 29, .94);
  box-shadow: 0 0 0 3px rgba(232, 189, 103, .1), 0 0 28px rgba(167, 85, 231, .08);
}

.upload-box {
  min-height: 132px;
  padding: 18px;
  border: 1px dashed rgba(232, 189, 103, .38) !important;
  border-radius: 18px !important;
  background: rgba(8, 13, 29, .55) !important;
}

.upload-box img {
  max-height: 260px !important;
  margin-top: 12px;
  object-fit: contain !important;
}

.progress-bar-container {
  overflow: hidden;
  height: 8px;
  margin: 12px 0 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}

.progress-bar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orakia-violet), var(--orakia-gold));
  transition: width .25s ease;
}

.oracle-editor-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0;
  padding: 22px;
  border: 1px solid rgba(232, 189, 103, .2);
  border-radius: 22px;
}

.oracle-editor-hero h3,
.oracle-editor-hero p { margin: 0; }

.card-workspace {
  align-items: start;
}

.card-library,
.card-form-panel {
  border-radius: 24px !important;
}

.card-form-panel {
  position: sticky;
  top: 96px;
}

.card-grid-tile:hover {
  translate: 0 -3px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.status-step-text { color: var(--orakia-gold-soft); font-weight: 700; }

.studio-error-state {
  max-width: 680px;
  margin: 24px auto;
  padding: 34px !important;
  text-align: center;
  border-radius: 24px !important;
}

.studio-error-state h3 { margin-top: 0; }

#toast {
  max-width: min(420px, calc(100vw - 32px));
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .card-workspace { grid-template-columns: 1fr !important; }
  .card-form-panel { position: static; }
  .oracle-editor-hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid > * { grid-column: 1 / -1 !important; }
  .oracle-grid { grid-template-columns: 1fr; }
  .oracle-card { min-height: 0; }
  .oracle-card-cover { height: 260px !important; }
  .oracle-actions-grid { grid-template-columns: 1fr; }
  .oracle-actions-grid .btn-primary-action { grid-column: auto; }
  .creator-actions { width: 100%; }
  .creator-actions button { flex: 1 1 100%; }
  .content > .hero:first-child::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-card,
  .card-grid-tile,
  .progress-bar-fill { transition: none !important; }
}
/* Orakia IA companion: the official Orakia mark is used as the assistant avatar. */
.orakia-ai-bot-avatar { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:radial-gradient(circle, rgba(231,185,79,.28), rgba(139,92,246,.18)); border:1px solid rgba(231,185,79,.65); box-shadow:0 4px 16px rgba(139,92,246,.28); overflow:hidden; }
.orakia-ai-bot-avatar.small { width:36px; height:36px; }
.orakia-ai-bot-avatar.tiny { width:22px; height:22px; }
.orakai-sprite { display:block; width:100%; height:100%; background-image:url('/assets/orakia-ai/spritesheet.webp'); background-repeat:no-repeat; background-size:800% auto; background-position:0 0; animation:orakai-idle 2.8s steps(1,end) infinite; transform-origin:center bottom; }
.orakia-ai-bot-avatar:has(img) { background-image:url('/assets/orakia-ai/spritesheet.webp'); background-repeat:no-repeat; background-size:800% auto; background-position:0 0; animation:orakai-idle 2.8s steps(1,end) infinite; }
.orakia-ai-bot-avatar:has(img) img { opacity:0; }
.orakia-ai-bot-avatar img { width:100%; height:100%; object-fit:cover; object-position:0 0; transform:scale(8); transform-origin:top left; animation:orakai-bob 2.2s ease-in-out infinite; }
@keyframes orakai-bob { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.18); transform:scale(8.05) translateY(-1px); } }
@keyframes orakai-idle {
  0%, 10% { background-position:0 0; }
  12%, 22% { background-position:14.2857% 0; }
  24%, 34% { background-position:28.5714% 0; }
  36%, 46% { background-position:42.8571% 0; }
  48%, 58% { background-position:57.1428% 0; }
  60%, 70% { background-position:71.4285% 0; }
  72%, 82% { background-position:85.7142% 0; }
  84%, 100% { background-position:100% 0; }
}
.orakia-ai-message-head { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--gold,#e7b94f); }
.ai-field-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; }
.ai-field-actions button { min-height:32px; font-size:.78rem; }
.ai-proposal { margin-top:10px; padding:12px; border:1px solid rgba(232,189,103,.3); border-radius:12px; background:rgba(5,8,19,.42); }
.ai-proposal p { margin:5px 0 10px; line-height:1.5; white-space:pre-wrap; }
.ai-proposal-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ai-quiet-hint { margin-top:9px; color:var(--orakia-gold-soft); font-size:.82rem; line-height:1.4; }
.guided-idea-panel { max-width:900px; margin:22px auto; padding:26px; }
.guided-idea-panel > label { display:grid; gap:8px; margin-bottom:16px; color:var(--orakia-cream); font-weight:650; }
.guided-idea-panel textarea, .guided-idea-panel input { box-sizing:border-box; width:100%; padding:12px 14px; border:1px solid rgba(163,177,219,.22); border-radius:13px; color:var(--orakia-cream); background:rgba(4,8,20,.78); }
.card-ai-shortcuts { margin:4px 0 4px; }
#ai-float-btn { color:transparent !important; }
#ai-float-btn.is-open { width:68px !important; box-shadow:-10px 12px 34px rgba(139,92,246,.5) !important; }
.orakai-dock-avatar,.orakai-header-avatar { display:block; background-image:url('/assets/orakia-ai/spritesheet.webp'); background-repeat:no-repeat; background-size:800% auto; background-position:0 0; animation:orakai-idle 2.8s steps(1,end) infinite; }
.orakai-dock-avatar { width:42px; height:50px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.orakai-dock-label { color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; margin-top:-2px; }
.orakai-header-avatar { width:30px; height:34px; flex:0 0 auto; }
@media (max-width: 640px) {
  #ai-float-window { top:62px !important; bottom:62px !important; width:min(390px, calc(100vw - 16px)) !important; border-radius:18px 0 0 18px !important; }
  #ai-float-btn { width:52px !important; height:70px !important; }
}
.creator-start-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr); gap:20px; max-width:1000px; margin:0 auto; }
.creator-start-card, .creator-companion-card { padding:28px; }
.creator-start-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.creator-start-actions button { min-height:52px; }
.creator-companion-card { align-self:start; text-align:center; }
.board-import-panel { max-width:1100px; margin:22px auto; padding:26px; }
.board-import-intro { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.board-import-intro h3 { margin:0 0 5px; }
.board-import-controls { margin-bottom:18px; }
.board-preview { margin-top:22px; }
.board-preview-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.board-preview-header h3 { margin:0 0 5px; }
.board-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; max-height:680px; overflow:auto; padding:4px; }
.board-card-item { padding:8px; border:1px solid rgba(232,189,103,.24); border-radius:14px; background:rgba(5,8,19,.45); }
.board-card-item img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:9px; display:block; margin-bottom:8px; }
.board-card-item label { display:grid; gap:5px; font-size:.76rem; color:var(--orakia-gold-soft); }
.board-card-item input { width:100%; box-sizing:border-box; min-height:32px; padding:6px 7px; border-radius:8px; border:1px solid rgba(163,177,219,.22); color:var(--orakia-cream); background:rgba(4,8,20,.78); }
@media(max-width:720px){.board-import-intro,.board-preview-header{align-items:flex-start;flex-direction:column}.board-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.creator-companion-card .orakia-ai-bot-avatar { margin:0 auto 16px; width:72px; height:72px; }
@media (max-width:800px) { .creator-start-grid { grid-template-columns:1fr; } .creator-start-actions { grid-template-columns:1fr; } }