/* TAWDEN premium visual system: midnight editorial workspace + branded loading identity. */
:root {
  --t-canvas: #07182B;
  --t-canvas-2: #0A1D34;
  --t-surface: #0B1D3A;
  --t-surface-2: #10263F;
  --t-surface-3: #12314A;
  --t-forest: #0F5C3F;
  --t-teal: #2C8A78;
  --t-gold: #C9A862;
  --t-gold-soft: rgba(201,168,98,.18);
  --t-ivory: #F7F4EC;
  --t-ivory-2: #ECE8DD;
  --t-text: #F7F4EC;
  --t-text-soft: #B8C4D0;
  --t-text-dim: #8F9EAC;
  --t-border-dark: rgba(225,233,240,.11);
  --t-border-dark-strong: rgba(225,233,240,.18);
  --t-shadow-dark: 0 22px 60px rgba(0,0,0,.24);
  --t-shadow-deep: 0 30px 90px rgba(0,0,0,.34);
  --t-radius-lg: 22px;
}

html { background: var(--t-canvas); color-scheme: dark; }
body,
body.auth-state,
body.app-state {
  background:
    radial-gradient(circle at 13% 0%, rgba(44,138,120,.095), transparent 28%),
    radial-gradient(circle at 100% 18%, rgba(15,92,63,.12), transparent 30%),
    linear-gradient(145deg, var(--t-canvas) 0%, var(--t-canvas-2) 58%, #08182B 100%);
  color: var(--t-text);
}
body:before { opacity: .22; background: radial-gradient(circle at 24% 0%, rgba(201,168,98,.07), transparent 24%), radial-gradient(circle at 100% 8%, rgba(15,92,63,.11), transparent 28%); }

.site-header {
  background: rgba(7,23,45,.86) !important;
  border-bottom-color: var(--t-border-dark) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
}
.site-header-brand, .site-header-context, header h1 { color: var(--t-text) !important; }
.site-header-context { color: var(--t-text-dim) !important; }
.site-header-dot { background: var(--t-teal) !important; box-shadow: 0 0 0 3px rgba(44,138,120,.08); }

main { max-width: 1420px; }

/* Authentication: preserve the editorial navy hero, elevate the form onto a dark branded surface. */
#authView {
  background: var(--t-surface-2) !important;
  border-color: var(--t-border-dark-strong) !important;
  box-shadow: var(--t-shadow-deep) !important;
}
.auth-brand {
  background: linear-gradient(145deg, #07182F 0%, #0B1D3A 54%, #0F3A47 100%) !important;
}
.auth-form-area {
  background: linear-gradient(180deg, #10263F 0%, #0D2239 100%) !important;
  border-left: 1px solid var(--t-border-dark);
}
.auth-form-inner { color: var(--t-text); }
.auth-title { color: var(--t-text) !important; }
.auth-subtitle, .auth-form-area .hint { color: var(--t-text-soft) !important; }
.tabs { border-bottom-color: var(--t-border-dark) !important; }
.tabs button { color: var(--t-text-dim) !important; }
.tabs button.active {
  background: var(--t-surface) !important;
  color: var(--t-ivory) !important;
  border-color: var(--t-gold) !important;
  box-shadow: inset 0 -2px 0 var(--t-gold), 0 10px 24px rgba(0,0,0,.16) !important;
}
.auth-form-area .field label { color: var(--t-text-soft) !important; }
.auth-form-area .field input,
.auth-form-area .field select {
  background: rgba(247,244,236,.06) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-dark-strong) !important;
}
.auth-form-area .field input::placeholder { color: var(--t-text-dim) !important; }
.auth-form-area .field input:focus,
.auth-form-area .field select:focus {
  border-color: rgba(201,168,98,.62) !important;
  box-shadow: 0 0 0 4px rgba(201,168,98,.08) !important;
  background: rgba(247,244,236,.08) !important;
}
.auth-form-area .btn.primary { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid rgba(201,168,98,.32); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
.auth-form-area .btn.primary:hover { background: var(--t-surface-3) !important; }
.auth-form-area .btn.ghost { color: var(--t-gold) !important; }

/* Auth hero stays distinct on every viewport. */
.auth-brand-foot { color: #B7C7D4 !important; }
.auth-brand-foot:before { background: var(--t-gold) !important; }

/* Authenticated workspace: dark canvas + layered surfaces. */
#appView { max-width: 1420px; }
.shell-nav {
  background: #122B45 !important;
  border-color: var(--t-border-dark) !important;
  box-shadow: var(--t-shadow-dark) !important;
}
.shell-brand { color: var(--t-text) !important; }
.shell-brand span, .shell-nav-section, .shell-user strong { color: var(--t-text-soft) !important; }
.shell-nav-section, .shell-user small { color: var(--t-text-dim) !important; }
.shell-nav a { color: var(--t-text-soft) !important; }
.shell-nav a:hover { background: rgba(247,244,236,.06) !important; color: var(--t-text) !important; }
.shell-nav a.active {
  background: rgba(201,168,98,.10) !important;
  color: var(--t-text) !important;
  box-shadow: inset 2px 0 0 var(--t-gold), inset 0 0 0 1px rgba(201,168,98,.10) !important;
}
.shell-nav a.active .shell-nav-icon { background: var(--t-teal) !important; border-color: var(--t-teal) !important; }
.shell-user { border-top-color: var(--t-border-dark) !important; }
.shell-user .btn.secondary { background: rgba(247,244,236,.06) !important; color: var(--t-text) !important; border-color: var(--t-border-dark-strong) !important; }

.panel,
#workspace,
.progress-card,
.project-card,
.projects-panel,
.preview-panel,
.step-card {
  background: linear-gradient(180deg, rgba(16,38,63,.98), rgba(11,29,58,.98)) !important;
  border-color: var(--t-border-dark) !important;
  box-shadow: var(--t-shadow-dark) !important;
}
.topbar {
  background: linear-gradient(180deg, rgba(18,49,74,.92), rgba(16,38,63,.92)) !important;
  border-bottom-color: var(--t-border-dark) !important;
}
.topbar h2, .step-title, .progress-card h3, .project-card h3, .preview-head h3 { color: var(--t-text) !important; }
.topbar p, .step-copy, .hint, .muted, .project-meta, .progress-copy-text, .processing-reassurance { color: var(--t-text-soft) !important; }
.workspace-eyebrow { color: var(--t-teal) !important; }
.flow { background: transparent !important; }
.stepper { border-bottom: 1px solid var(--t-border-dark); }
.step-pill { background: rgba(247,244,236,.05) !important; color: var(--t-text-dim) !important; }
.step-pill.active { background: rgba(201,168,98,.12) !important; color: var(--t-text) !important; box-shadow: inset 0 -2px 0 var(--t-gold); }
.step-pill.done { background: rgba(15,92,63,.16) !important; color: #B8E0D2 !important; }

.mode-card,
.style-option,
.format-option,
.rights-card,
.upload-box,
.details-panel,
.locked-style-message,
.processing-copy,
.result-meta-item,
.notice,
.tag {
  background: rgba(247,244,236,.045) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-dark) !important;
}
.mode-card:hover, .style-option:hover, .format-option:hover { background: rgba(247,244,236,.07) !important; }
.mode-card.selected, .style-option.selected, .format-option.selected, .rights-card.checked {
  border-color: rgba(201,168,98,.55) !important;
  box-shadow: 0 0 0 2px rgba(201,168,98,.08) !important;
  background: rgba(201,168,98,.08) !important;
}
.mode-card h3, .style-option strong, .format-option strong, .rights-title, .result-copy h4, .project-title { color: var(--t-text) !important; }
.mode-card p, .style-option span, .format-option span, .rights-copy, .details-grid ul, .details-grid .hint { color: var(--t-text-soft) !important; }
.mode-card .tagline { color: #83C9B7 !important; }
.selected-mark, .tag { background: rgba(201,168,98,.10) !important; color: var(--t-gold) !important; }
.selected-mark { border: 1px solid rgba(201,168,98,.2); }

.field label { color: var(--t-text-soft) !important; }
.field input,
.field select,
.color-entry input,
.advanced-grid input {
  background: rgba(247,244,236,.055) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-dark-strong) !important;
}
.field input::placeholder, .color-entry input::placeholder { color: var(--t-text-dim) !important; }
.field input:focus, .field select:focus, .color-entry input:focus, .advanced-grid input:focus {
  border-color: rgba(44,138,120,.75) !important;
  box-shadow: 0 0 0 4px rgba(44,138,120,.10) !important;
}
.btn.primary {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border: 1px solid rgba(201,168,98,.34);
  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}
.btn.primary:hover { background: var(--t-surface-3) !important; }
.btn.secondary {
  background: rgba(247,244,236,.055) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-dark-strong) !important;
}
.btn.secondary:hover { background: rgba(247,244,236,.09) !important; }
.btn.ghost { color: var(--t-gold) !important; }
.status { background: rgba(247,244,236,.045) !important; border-color: var(--t-border-dark) !important; color: var(--t-text-soft) !important; }
.status.success { background: rgba(15,92,63,.14) !important; border-color: rgba(44,138,120,.30) !important; color: #B8E0D2 !important; }
.status.error { background: rgba(160,68,74,.12) !important; border-color: rgba(221,132,138,.22) !important; color: #F4C4C8 !important; }
.notice { color: #E9D7AA !important; }

/* Project rows and processing stages. */
.project { border-top-color: var(--t-border-dark) !important; }
.project-art { border-color: var(--t-border-dark-strong) !important; background: linear-gradient(180deg,#FBF7EC,#D9D2C1) !important; }
.project-art:after { background: #17365F !important; box-shadow: 0 7px 0 #CFC5AF,0 14px 0 #BFB49C !important; }
.stage { background: rgba(247,244,236,.035) !important; border-color: var(--t-border-dark) !important; }
.stage.active { border-color: rgba(201,168,98,.35) !important; background: rgba(201,168,98,.06) !important; box-shadow: inset 2px 0 0 var(--t-gold) !important; }
.stage.active .indicator { border-right-color: var(--t-gold) !important; border-bottom-color: var(--t-gold) !important; }
.stage.pending .indicator { background: #43576B !important; }
.stage.pending .indicator:after { background: #D6DEE5 !important; }
.stage.done .indicator { background: var(--t-forest) !important; }
.stage .label, .stage.active .label { color: var(--t-text) !important; }
.stage.done .label, .stage .state { color: var(--t-text-soft) !important; }
.stage.failed { background: rgba(160,68,74,.10) !important; border-color: rgba(221,132,138,.22) !important; }

/* Result remains the intentional editorial ivory material. */
#resultPanel { background: linear-gradient(180deg,#FBF9F2,#F4F0E5) !important; color: #172331 !important; border-color: rgba(201,168,98,.26) !important; }
#resultPanel .hint, #resultPanel .result-meta-item small { color: #6E7881 !important; }
#resultPanel .preview-head h3, #resultPanel .result-copy h4, #resultPanel .result-meta-item strong { color: #0B1D3A !important; }
#resultPanel .result-meta-item { background: rgba(11,29,58,.035) !important; border-color: rgba(11,29,58,.10) !important; }
#resultPanel .btn.secondary { background: rgba(11,29,58,.05) !important; color: #0B1D3A !important; border-color: rgba(11,29,58,.12) !important; }
#resultPanel .btn.primary { background: #0B1D3A !important; color: #F7F4EC !important; }

/* Branded loading system. */
.tawden-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(44,138,120,.10), transparent 30%),
    rgba(7,23,45,.985);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.tawden-loader.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.tawden-loader-core { position: relative; width: 88px; height: 88px; display:grid; place-items:center; }
.tawden-loader-logo { width: 62px; height: 62px; object-fit: contain; position: relative; z-index: 2; }
.tawden-loader-orbit {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201,168,98,.23);
  border-top-color: var(--t-gold);
  border-right-color: rgba(201,168,98,.72);
  border-radius: 50%;
  animation: tawdenOrbit 1.8s linear infinite;
}
.tawden-loader-label { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--t-text-soft); text-align:center; }
.tawden-processing-loader { display:flex; align-items:center; gap:11px; margin:0 0 16px; color:var(--t-text-soft); font-size:11px; letter-spacing:.04em; }
.tawden-processing-loader.is-error .tawden-loader-orbit { animation:none; border-color:rgba(221,132,138,.35); border-top-color:#D98C91; }
.tawden-processing-loader.is-static .tawden-loader-orbit { animation:none; border-color:rgba(201,168,98,.18); border-top-color:var(--t-gold); opacity:.75; }
.tawden-loader-core--compact { width:34px; height:34px; }
.tawden-loader-core--compact .tawden-loader-logo { width:22px; height:22px; }
.tawden-loader-core--compact .tawden-loader-orbit { inset:1px; }
@keyframes tawdenOrbit { to { transform: rotate(360deg); } }

/* Keep atmosphere quieter on smaller screens. */
@media (max-width: 820px) {
  body, body.auth-state, body.app-state { background: linear-gradient(150deg,#07172D 0%,#0A1D34 72%,#091928 100%); }
  body:before { opacity:.12; }
  #authView { box-shadow: 0 22px 60px rgba(0,0,0,.28) !important; }
  .auth-form-area { border-left:0; border-top:1px solid var(--t-border-dark); }
  .shell-nav { background: rgba(16,38,63,.97) !important; }
  .panel, #workspace, .progress-card, .project-card, .projects-panel, .preview-panel, .step-card { box-shadow: 0 16px 42px rgba(0,0,0,.20) !important; }
  .tawden-loader { background: rgba(7,23,45,.992); }
}
@media (prefers-reduced-motion: reduce) {
  .tawden-loader-orbit { animation:none !important; }
}

/* Editorial workspace refinement: dark studio shell, crisp light working surfaces. */
:root {
  --t-editorial-mist: #A7B5BE;
  --t-editorial-surface: #D8E0E4;
  --t-editorial-white: #E7EDF0;
  --t-editorial-border: #B8C4CB;
  --t-editorial-heading: #0B1D3A;
  --t-editorial-body: #33465A;
  --t-editorial-muted: #465A6C;
}

#appView .shell-content {
  min-width: 0;
  color-scheme: light;
}

#workspace,
#projectsSection,
#progressWrap,
#resultPanel {
  border-radius: var(--t-radius-lg);
}

#workspace {
  background: var(--t-editorial-mist) !important;
  border-color: #93A5AF !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.12) !important;
  overflow: hidden;
}

#workspace .topbar {
  background: var(--t-editorial-surface) !important;
  border-bottom-color: var(--t-editorial-border) !important;
}

#workspace .topbar h2,
#workspace .step-title,
#workspace .progress-card h3,
#workspace .project-card h3,
#workspace .preview-head h3 {
  color: var(--t-editorial-heading) !important;
}

#workspace .topbar p,
#workspace .step-copy,
#workspace .hint,
#workspace .muted,
#workspace .progress-copy-text,
#workspace .processing-reassurance {
  color: var(--t-editorial-body) !important;
}

#workspace .flow {
  background: var(--t-editorial-mist) !important;
}

#workspace .stepper {
  border-bottom-color: var(--t-editorial-border) !important;
}

#workspace .step-pill {
  background: #93A5AF !important;
  color: #2F4354 !important;
}

#workspace .step-pill.active {
  background: #0B1D3A !important;
  color: #F7F4EC !important;
  box-shadow: inset 0 -2px 0 #C9A862 !important;
}

#workspace .step-pill.done {
  background: #DDECE6 !important;
  color: #0F5C3F !important;
}

#workspace .step-card,
#progressWrap .progress-card,
#progressWrap .project-card,
#projectsSection,
#workspace .preview-panel {
  background: var(--t-editorial-surface) !important;
  color: var(--t-editorial-body) !important;
  border-color: var(--t-editorial-border) !important;
  box-shadow: 0 8px 24px rgba(11,29,58,.055) !important;
}

#workspace .step-card {
  border-radius: 18px;
}

#workspace .mode-card,
#workspace .style-option,
#workspace .format-option,
#workspace .rights-card,
#workspace .upload-box,
#workspace .details-panel,
#workspace .locked-style-message,
#workspace .processing-copy,
#workspace .notice,
#workspace .tag {
  background: var(--t-editorial-white) !important;
  color: var(--t-editorial-body) !important;
  border-color: var(--t-editorial-border) !important;
  box-shadow: none !important;
}

#workspace .mode-card:hover,
#workspace .style-option:hover,
#workspace .format-option:hover {
  background: #FFFFFF !important;
  border-color: #AEBCC6 !important;
  box-shadow: 0 8px 20px rgba(11,29,58,.06) !important;
}

#workspace .mode-card.selected,
#workspace .style-option.selected,
#workspace .format-option.selected,
#workspace .rights-card.checked {
  background: #F7FAFB !important;
  border-color: #0B1D3A !important;
  box-shadow: 0 0 0 2px rgba(11,29,58,.07) !important;
}

#workspace .mode-card h3,
#workspace .style-option strong,
#workspace .format-option strong,
#workspace .rights-title,
#workspace .details-grid h4,
#workspace .result-copy h4,
#workspace .project-title {
  color: var(--t-editorial-heading) !important;
}

#workspace .mode-card p,
#workspace .style-option span,
#workspace .format-option span,
#workspace .rights-copy,
#workspace .details-grid ul,
#workspace .details-grid .hint {
  color: var(--t-editorial-body) !important;
}

#workspace .mode-card .tagline {
  color: #0F5C3F !important;
}

#workspace .selected-mark {
  background: #C8D2D8 !important;
  color: #33465A !important;
  border-color: #AEBCC6 !important;
}

#workspace .mode-card.selected .selected-mark {
  background: #0F5C3F !important;
  color: #FFFFFF !important;
  border-color: #0F5C3F !important;
}

#workspace .field label {
  color: var(--t-editorial-heading) !important;
}

#workspace .field input,
#workspace .field select,
#workspace .color-entry input,
#workspace .advanced-grid input {
  background: #FFFFFF !important;
  color: var(--t-editorial-heading) !important;
  border-color: #C8D2DB !important;
}

#workspace .field input::placeholder,
#workspace .color-entry input::placeholder {
  color: #718090 !important;
}

#workspace .field input:focus,
#workspace .field select:focus,
#workspace .color-entry input:focus,
#workspace .advanced-grid input:focus {
  border-color: #2C8A78 !important;
  box-shadow: 0 0 0 4px rgba(44,138,120,.10) !important;
}

#workspace .btn.primary {
  background: #0B1D3A !important;
  color: #F7F4EC !important;
  border-color: rgba(201,168,98,.36) !important;
}

#workspace .btn.primary:hover {
  background: #12314A !important;
}

#workspace .btn.secondary {
  background: #FFFFFF !important;
  color: #0B1D3A !important;
  border-color: #CBD5DC !important;
}

#workspace .btn.ghost {
  color: #0F5C3F !important;
}

#progressWrap .stage {
  background: #FFFFFF !important;
  color: var(--t-editorial-body) !important;
  border-color: var(--t-editorial-border) !important;
}

#progressWrap .stage.active {
  background: #F7FAFB !important;
  border-color: rgba(201,168,98,.62) !important;
  box-shadow: inset 2px 0 0 #C9A862 !important;
}

#progressWrap .stage .label,
#progressWrap .stage.active .label {
  color: var(--t-editorial-heading) !important;
}

#progressWrap .stage.done .label,
#progressWrap .stage .state {
  color: var(--t-editorial-muted) !important;
}

#projectsSection {
  margin-top: 22px;
}

#projectsSection h3 {
  color: var(--t-editorial-heading) !important;
}

#projectsSection .project {
  border-top-color: #D6DEE4 !important;
}

#projectsSection .project-title {
  color: var(--t-editorial-heading) !important;
}

#projectsSection .project-meta {
  color: var(--t-editorial-muted) !important;
}

#appView .shell-content > #tawdenBillingPanel {
  margin-top: 22px;
}

@media (max-width: 820px) {
  #workspace,
  #projectsSection,
  #tawdenBillingPanel {
    border-radius: 16px;
  }
}