/* PMP Create Pro v186 — Celestial Atelier
 * A luminous cinematic control palette designed for long production sessions.
 * The editor layout and command ownership remain unchanged.
 */

:root {
  --atelier-ink: #102b3a;
  --atelier-copy: #294454;
  --atelier-muted: #536b78;
  --atelier-paper: #fffdf8;
  --atelier-mist: #eef4f3;
  --atelier-line: #aebfc6;
  --atelier-teal: #087d78;
  --atelier-violet: #6347a8;
  --atelier-coral: #b94f37;
  --atelier-amber: #d58a2b;
}

body[data-theme="pmp-celestial-atelier"] {
  background: #eaf1f0;
  color: var(--atelier-ink);
}

body[data-theme="pmp-celestial-atelier"]::before {
  background:
    radial-gradient(circle at 4% -12%, rgba(255, 202, 115, .44), transparent 29%),
    radial-gradient(circle at 47% -18%, rgba(38, 171, 161, .24), transparent 35%),
    radial-gradient(circle at 96% -7%, rgba(112, 82, 184, .27), transparent 32%);
}

/* Luminous production header with a crisp cinematic color line. */
.topbar {
  border-bottom: 2px solid transparent;
  background:
    linear-gradient(#fdfcf7, #f3f7f5) padding-box,
    linear-gradient(90deg, #087d78 0 40%, #6347a8 67%, #d58a2b 100%) border-box;
  box-shadow: 0 10px 30px rgba(18, 49, 61, .16);
}

.brand {
  background:
    radial-gradient(circle at 24% 10%, rgba(255, 255, 255, .94), transparent 33%),
    linear-gradient(138deg, #ddf4ef 0%, #ede8f8 67%, #ffe7c7 100%);
}

.file-nav,
.job-pipeline {
  border-color: #9fb5bd;
  background: rgba(255, 255, 255, .92);
}

.file-nav button,
.history-nav button,
.top-actions > button {
  border-color: #9fb2bb;
  background: #fff;
  color: #153446;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: -.01em;
  text-shadow: none;
  box-shadow: 0 4px 11px rgba(25, 55, 66, .10);
}

.file-nav button:hover,
.history-nav button:hover,
.top-actions > button:hover {
  border-color: #3d8887;
  background: #f7fffd;
  color: #075f5c;
  box-shadow: 0 7px 17px rgba(20, 104, 99, .18);
}

.top-actions > button.save-project-button {
  border-color: #4d9f96;
  background: #d9f3ed;
  color: #075c58;
}

.top-actions > button.send-export-button {
  border-color: #8270b5 !important;
  background: #ece7f8 !important;
  color: #3f2a76 !important;
}

.top-actions > button.gradient-button,
.gradient-button,
.quote-submit,
.resize-apply,
.mockup-download {
  border-color: #a94a30 !important;
  background: linear-gradient(112deg, #ad432e 0%, #d47d29 62%, #e0a544 100%) !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(159, 72, 37, .29) !important;
}

.project-title input {
  border-color: #9fb3bc;
  background: #fff;
  color: #173548;
  font-size: 12px;
  font-weight: 800;
}

.project-title small,
.service-indicator {
  color: #17685f;
  font-weight: 850;
}

/* High-legibility command ribbon with restrained iridescence. */
.tool-rail {
  border-bottom-color: #9fb5bd;
  background:
    radial-gradient(circle at 5% 45%, rgba(232, 166, 64, .25), transparent 22%),
    radial-gradient(circle at 68% 0%, rgba(46, 170, 159, .16), transparent 34%),
    linear-gradient(96deg, #fffaf0 0%, #f1f8f5 53%, #f2eef9 100%);
  box-shadow: 0 9px 24px rgba(20, 48, 60, .15);
}

.tool-rail::before { color: #294b5b; }
.tool-rail button {
  border-color: #9fb4bc;
  background: rgba(255, 255, 255, .98);
  color: #173749;
  font-size: 10px;
  font-weight: 880;
  box-shadow: 0 4px 12px rgba(22, 52, 64, .11);
}
.tool-rail button i,
.tool-rail .rail-icon { color: #08766f; }
.tool-rail button > span small {
  color: #496371;
  font-size: 7px;
  font-weight: 780;
  letter-spacing: .035em;
}
.tool-rail button:hover {
  border-color: #3c8b87;
  background: #f9fffd;
  color: #075d5a;
  box-shadow: 0 8px 18px rgba(22, 99, 95, .17);
}
.tool-rail button.active {
  border-color: #6e55aa;
  background: linear-gradient(135deg, #fff 0%, #ece6f8 100%);
  color: #3b276f;
  box-shadow: inset 5px 0 0 #684bb5, 0 8px 19px rgba(82, 60, 143, .18);
}
.tool-rail button:disabled {
  opacity: .72;
  color: #58707d;
}

/* The table stays luminous without bleaching labels and rulers. */
.stage {
  background-color: #e8efee;
  background-image:
    radial-gradient(ellipse at 13% 5%, rgba(255, 218, 153, .57), transparent 34%),
    radial-gradient(ellipse at 86% 8%, rgba(175, 159, 216, .27), transparent 35%),
    linear-gradient(rgba(255, 255, 255, .58) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .58) 1px, transparent 1px),
    linear-gradient(rgba(35, 70, 79, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 70, 79, .07) 1px, transparent 1px);
}
.stage-meta,
.stage-options button,
.canvas-color-control,
.workspace-hint,
.page-bar,
.add-page,
.page-action,
.view-controls button {
  border-color: #9fb3bc;
  color: #1d3c4d;
}
.stage-options button,
.add-page,
.page-action,
.view-controls button { background: #fff; font-weight: 800; }

/* Original PMP catalog cards: stronger editorial hierarchy and readable specs. */
.design-format-card {
  border-color: #b8c7cd;
  background: #fffefa;
  box-shadow: 0 8px 22px rgba(20, 47, 59, .10);
}
.design-format-card:hover {
  border-color: color-mix(in srgb, var(--accent), #36505e 28%);
  box-shadow: 0 19px 42px rgba(15, 43, 57, .18);
}
.format-card-copy { background: linear-gradient(180deg, #fffefa, #f8fbfa); }
.format-card-kicker { font-size: 8px; }
.design-format-card b { color: #102f40; font-size: 14px; line-height: 1.2; }
.design-format-card small { color: #4d6673; font-size: 9px; }
.format-production-meta i {
  border-color: #c3d0d5;
  background: #edf4f3;
  color: #304e5d;
  font-size: 8px;
  font-weight: 760;
}
.format-card-actions { border-top-color: #c6d2d7; background: #f3f8f6; }
.format-card-actions button {
  border-color: #a7bbc3;
  background: #fff;
  color: #18394a;
  font-size: 9px;
  font-weight: 880;
}
.format-card-actions .format-start-button {
  border-color: #167c76;
  background: #087d78;
  color: #fff;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #d26238 !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  .tool-rail button { font-size: 9px; }
  .tool-rail button > span small { font-size: 7px; }
  .top-actions > button { font-size: 9px; }
  .design-format-card b { font-size: 13px; }
  .design-format-card small,
  .format-production-meta i { font-size: 8px; }
}

@media (prefers-contrast: more) {
  .file-nav button,
  .history-nav button,
  .top-actions > button,
  .tool-rail button,
  .design-format-card,
  .format-card-actions button { border-width: 2px; }
}

/* v188 luminous cinema pass: projection-light surfaces and unmistakable controls. */
body[data-theme="pmp-celestial-atelier"] {
  background:
    radial-gradient(circle at 9% 0%, rgba(255, 211, 132, .38), transparent 28%),
    radial-gradient(circle at 93% 2%, rgba(123, 91, 191, .22), transparent 31%),
    linear-gradient(145deg, #f8f6ee 0%, #edf6f4 48%, #f3effa 100%);
}

.topbar {
  background:
    radial-gradient(circle at 82% -90%, rgba(123, 91, 191, .22), transparent 46%),
    radial-gradient(circle at 12% -80%, rgba(239, 173, 62, .26), transparent 44%),
    linear-gradient(105deg, #fffdf7 0%, #f1faf7 53%, #f5f0fb 100%) padding-box,
    linear-gradient(90deg, #087d78, #7856b6 68%, #d58a2b) border-box;
}

.file-nav button,
.history-nav button,
.top-actions > button {
  min-height: 38px;
  border-width: 1.5px;
  border-color: #819aa5;
  background: linear-gradient(180deg, #ffffff, #f4f7f7);
  color: #0b3041;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(20, 50, 62, .13), inset 0 1px 0 #fff;
}

.top-actions > button:is(#projectsButton, #quoteDeskButton, #previewButton, #downloadButton) {
  border-color: #77949e;
  background: #f9fcfb;
  color: #103a49;
}

.top-actions > button.save-project-button {
  border-color: #087d78;
  background: linear-gradient(145deg, #dff8f0, #c7eee6);
  background-color: #dff8f0;
  color: #064f4c;
}

.top-actions > button.send-export-button {
  border-color: #6d4ead !important;
  background: linear-gradient(145deg, #f2edfb, #e4daf8) !important;
  color: #3a226f !important;
}

.top-actions > button.gradient-button {
  background: linear-gradient(112deg, #a93f2c 0%, #cf6f26 53%, #e0a544 100%) !important;
  background-color: #a93f2c !important;
  box-shadow: 0 8px 22px rgba(169, 63, 44, .32), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.tool-rail {
  background:
    radial-gradient(circle at 8% 40%, rgba(240, 180, 75, .29), transparent 24%),
    radial-gradient(circle at 63% 0%, rgba(41, 165, 153, .18), transparent 35%),
    radial-gradient(circle at 96% 28%, rgba(111, 77, 178, .16), transparent 28%),
    linear-gradient(96deg, #fffaf0, #f0f9f6 52%, #f4effb);
}

.tool-rail button {
  min-height: 62px;
  border-color: #8ca4ad;
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(244,248,247,.97));
  background-color: #ffffff;
  color: #173749;
  box-shadow: 0 6px 15px rgba(20, 51, 62, .13), inset 0 1px 0 #fff;
}

.tool-rail button i,
.tool-rail .rail-icon { color: #087d78; }
.tool-rail button > span small { color: #3f5966; }
.tool-rail button.active {
  border-color: #6245a4;
  background: linear-gradient(135deg, #fff 0%, #eee7fb 72%, #e0d3f7 100%);
  color: #352067;
  box-shadow: inset 5px 0 0 #6d4ead, 0 9px 21px rgba(82, 60, 143, .22);
}

.stage {
  background-color: #edf4f2;
  background-image:
    radial-gradient(ellipse at 11% 1%, rgba(255, 214, 139, .66), transparent 33%),
    radial-gradient(ellipse at 88% 3%, rgba(170, 150, 216, .33), transparent 36%),
    linear-gradient(rgba(255, 255, 255, .72) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .72) 1px, transparent 1px),
    linear-gradient(rgba(30, 66, 76, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 66, 76, .065) 1px, transparent 1px);
}

@media (max-width: 1024px) {
  .file-nav button,
  .history-nav button,
  .top-actions > button { min-height: 34px; }
  .tool-rail button { min-height: 54px; }
}
