/* PMP Create Pro — Cinematic Editorial Grade
 * A brighter, high-contrast production environment with warm film light,
 * gallery-paper surfaces, teal shadows, violet midtones, and copper accents.
 * Presentation only: editor geometry, IDs, and command logic stay unchanged.
 */

:root {
  --cinema-ink: #182236;
  --cinema-ink-soft: #3f4b5d;
  --cinema-teal: #167d78;
  --cinema-teal-bright: #25aaa1;
  --cinema-violet: #6550ad;
  --cinema-copper: #c96f46;
  --cinema-gold: #c89a4b;
  --cinema-paper: #fffdf8;
  --cinema-cream: #f6f1e8;
  --cinema-mist: #e7ecee;
  --cinema-line: #c9d1d8;
  --cinema-shadow: 0 18px 52px rgba(38, 49, 68, .18);
  --deck-ink: var(--cinema-ink);
  --deck-deep: #f5f0e9;
  --deck-slate: #dbe4e7;
  --deck-teal: var(--cinema-teal);
  --deck-orange: var(--cinema-copper);
  --deck-paper: var(--cinema-paper);
  --deck-table: #dfe5e7;
  --deck-line: var(--cinema-line);
  --pmp-navy: var(--cinema-ink);
  --pmp-navy-2: #334059;
  --pmp-teal: var(--cinema-teal);
  --pmp-teal-bright: var(--cinema-teal-bright);
  --pmp-orange: var(--cinema-copper);
  --pmp-cloud: var(--cinema-paper);
  --pmp-stage: var(--cinema-mist);
  --stage: var(--cinema-mist);
  --ink: var(--cinema-ink);
  --muted: #677284;
  --line: var(--cinema-line);
}

html,
body,
body[data-layout="pmp-command-deck"] {
  background: var(--cinema-mist);
  color: var(--cinema-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 2%, rgba(255, 226, 178, .34), transparent 27%),
    radial-gradient(circle at 82% 0%, rgba(131, 108, 191, .22), transparent 31%);
  z-index: -1;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(101, 80, 173, .42);
  outline-offset: 2px;
}

/* Bright cinematic command header. */
.topbar {
  border-bottom: 1px solid #cfd5da;
  background:
    linear-gradient(108deg, rgba(255, 244, 222, .96), rgba(245, 249, 247, .98) 48%, rgba(237, 233, 248, .98));
  color: var(--cinema-ink);
  box-shadow: 0 9px 30px rgba(48, 57, 76, .14);
}

.topbar::after {
  background: linear-gradient(90deg, var(--cinema-teal) 0 53%, var(--cinema-violet) 53% 79%, var(--cinema-copper) 79% 100%);
}

.brand {
  border-right-color: rgba(255, 255, 255, .17);
  background:
    radial-gradient(circle at 18% 15%, rgba(49, 179, 166, .23), transparent 34%),
    linear-gradient(145deg, #1b2940, #33415c);
  color: #fff;
  box-shadow: 8px 0 24px rgba(35, 47, 67, .12);
}

.brand strong { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.brand em { background: #f1bd66; color: #283248; box-shadow: 0 3px 9px rgba(111, 72, 18, .18); }
.topbar .brand-orb { box-shadow: 0 6px 18px rgba(16, 38, 54, .28); }

.file-nav {
  border-color: #cbd2d8;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.file-nav button,
.history-nav button,
.top-actions > button {
  border: 1px solid #c9d0d8;
  background: rgba(255, 255, 255, .76);
  color: #273248;
  box-shadow: 0 2px 7px rgba(46, 57, 76, .07);
}

.file-nav button:hover,
.history-nav button:hover,
.top-actions > button:hover {
  border-color: #9384c3;
  background: #fff;
  color: #372867;
  box-shadow: 0 6px 14px rgba(66, 58, 100, .13);
}

.project-title::before { color: #6f7888; }
.project-title input {
  border-color: #c9d0d7;
  background: rgba(255, 255, 255, .72);
  color: var(--cinema-ink);
}
.project-title input:hover,
.project-title input:focus { background: #fff; }
.project-title small { color: var(--cinema-teal); font-weight: 850; }
.history-nav { border-right-color: #ccd2d8; }
.job-pipeline { border-color: #ccd3d9; background: rgba(255, 255, 255, .56); }
.job-pipeline span { color: #737d8d; }
.job-pipeline span::after { border-color: #9ca7b1; }
.job-pipeline b { color: #4d596c; }
.job-pipeline .active {
  color: #145f5c;
  background: linear-gradient(90deg, rgba(34, 156, 146, .15), rgba(108, 82, 177, .08));
}
.job-pipeline .active b { color: #243247; }

.top-actions > button.save-project-button {
  border-color: rgba(22, 125, 120, .38);
  background: #e7f4f1;
  color: #125f5b;
}
.top-actions #downloadButton { color: #3f4d65; }
.send-export-button {
  border-color: rgba(101, 80, 173, .42) !important;
  background: #eeeafb !important;
  color: #493684 !important;
  box-shadow: 0 4px 12px rgba(83, 65, 143, .13) !important;
}
.gradient-button,
.quote-submit,
.resize-apply,
.mockup-download {
  background: linear-gradient(110deg, #bf663f, #e2a04e) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(80, 39, 13, .24);
  box-shadow: 0 7px 18px rgba(176, 91, 48, .23) !important;
}

/* The signature build station becomes a bright editorial strip. */
.editor-shell { background: var(--cinema-mist); }
.tool-rail {
  border-bottom: 1px solid #c8d0d6;
  background:
    radial-gradient(circle at 4% 50%, rgba(241, 188, 101, .24), transparent 17%),
    linear-gradient(90deg, #f8f3ea, #eef5f3 55%, #f1edf8);
  box-shadow: 0 8px 24px rgba(43, 54, 72, .12);
}
.tool-rail::before {
  border-left-color: var(--cinema-copper);
  color: #5f6b7d;
}
.tool-rail button {
  border-color: #cbd2d8;
  background: rgba(255, 255, 255, .73);
  color: #364257;
  box-shadow: 0 3px 9px rgba(40, 51, 67, .06);
}
.tool-rail button i,
.tool-rail .rail-icon { color: var(--cinema-teal); }
.tool-rail button > span small { color: #7a8391; }
.tool-rail button:hover {
  border-color: #9e90c8;
  background: #fff;
  color: #30275b;
  box-shadow: 0 7px 16px rgba(70, 61, 104, .12);
}
.tool-rail button.active {
  border-color: rgba(101, 80, 173, .56);
  background: linear-gradient(135deg, #ffffff, #eeeafa);
  color: #3c2c75;
  box-shadow: inset 4px 0 0 var(--cinema-violet), 0 7px 18px rgba(79, 61, 133, .14);
}
.tool-rail button.active i,
.tool-rail button.active .rail-icon { color: var(--cinema-violet); }
.tool-rail button.active > span small { color: #66569e; }

/* Materials and object controls use gallery-paper surfaces. */
.asset-panel {
  border-color: #bfc9d0;
  border-top-color: var(--cinema-copper);
  background:
    linear-gradient(180deg, rgba(255, 250, 241, .96), rgba(250, 252, 251, .99));
  box-shadow: -24px 26px 60px rgba(42, 52, 70, .2);
}
.panel-title { border-bottom-color: #d3d9de; }
.panel-title::before { color: #777086; }
.panel-title h2 { color: #202b3f; }
.search-box,
.chip-row button,
.text-preset,
.layer-row,
.asset-tile { border-color: #ccd3d9; background: rgba(255, 255, 255, .84); color: #263248; }
.chip-row button.active,
.layer-row.active { border-color: #9482c5; background: #f0ecfa; color: #44327e; }
.context-toolbar {
  border-bottom-color: #cbd2d8;
  background: linear-gradient(90deg, #fffdf8, #f6f8f7 62%, #f3eff9);
  color: #344056;
  box-shadow: 0 5px 15px rgba(45, 56, 73, .1);
}
.context-toolbar.has-selection::before { border-right-color: #c9d1d7; color: #5d6879; }
.context-toolbar label { color: #4e596b; }
.context-toolbar input,
.context-toolbar select,
.context-toolbar button { border-color: #cbd2d9; background: #fff; color: #29354b; }
.context-toolbar button:hover { background: #eeeafa; color: #3f2e78; }

/* Film-light production table: bright enough for long editing sessions. */
.stage {
  background-color: #dfe6e7;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 233, 194, .72), transparent 34%),
    radial-gradient(ellipse at 82% 15%, rgba(185, 174, 222, .34), transparent 36%),
    linear-gradient(rgba(255, 255, 255, .48) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .48) 1px, transparent 1px),
    linear-gradient(rgba(56, 76, 88, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 76, 88, .05) 1px, transparent 1px);
  background-size: auto, auto, 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}
.stage.no-grid {
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255, 233, 194, .72), transparent 34%),
    radial-gradient(ellipse at 82% 15%, rgba(185, 174, 222, .34), transparent 36%);
}
.stage::before,
.stage::after { color: rgba(49, 64, 79, .54); }
.stage-meta {
  border-color: #bfc9cf;
  border-left-color: var(--cinema-teal);
  background: rgba(255, 253, 248, .94);
  color: #586476;
  box-shadow: 0 7px 19px rgba(47, 59, 75, .1);
}
.stage-meta b { color: #263248; }
.stage-options button,
.canvas-color-control {
  border-color: #c3ccd2;
  background: rgba(255, 253, 248, .94);
  color: #39455a;
  box-shadow: 0 4px 12px rgba(48, 60, 77, .08);
}
.stage-options button:hover { border-color: #8e7fbd; background: #fff; color: #3f2e78; }
.stage-options button.active { border-color: #7f6db6; background: #ece7f7; color: #3f2e78; }
.canvas-frame {
  border-color: rgba(53, 67, 84, .25);
  box-shadow: 0 28px 64px rgba(35, 45, 61, .24), 0 5px 13px rgba(38, 48, 65, .14);
}
.canvas-size-label { border-color: #8874bd; background: #fbf9ff; color: #392969; }
.workspace-hint { border-color: #c7cfd5; background: rgba(255, 253, 248, .95); color: #5c6676; }

.ruler-x,
.ruler-y { border-color: #c7d0d6; background: #f9f7f2; color: #687382; }
.ruler-corner { background: #ece9e2; }
.page-bar {
  border-top-color: #c5ced4;
  background: linear-gradient(90deg, #fbf8f1, #f7faf9 58%, #f2eef8);
  box-shadow: 0 -5px 18px rgba(47, 57, 73, .08);
}
.page-actions::before,
.view-controls::before { color: #657181; }
.add-page,
.page-action,
.page-thumb,
.view-controls button { border-color: #c7cfd6; background: #fff; color: #2d394f; }
.add-page:hover,
.page-action:hover,
.view-controls button:hover { border-color: #8f7cc1; background: #f0ecfa; color: #3e2d77; }
.page-thumb.active { border-color: var(--cinema-violet); box-shadow: 0 5px 15px rgba(76, 61, 124, .14); }

/* Drawers, dialogs and alerts remain readable against the lighter shell. */
.production-drawer,
.app-dialog,
.resize-panel { background: var(--cinema-paper); color: var(--cinema-ink); }
.production-drawer { border-left-color: var(--cinema-copper); box-shadow: -18px 0 54px rgba(40, 49, 66, .2); }
.drawer-head,
.dialog-head { border-bottom-color: #d1d7dc; background: #fffdf8; }
.drawer-head button,
.dialog-head > button { background: #ece8e1; color: #344055; }
.production-panel select,
.production-panel input[type="number"],
.dialog-form input,
.dialog-form select { border-color: #c8d0d6; background: #fff; color: #273349; }
.preflight-card { border-color: #afd4c5; background: #eef8f3; }
.preflight-card.warning { border-color: #e0bd91; background: #fff5e8; }
.toast { background: #26334a; color: #fff; box-shadow: 0 16px 40px rgba(32, 40, 56, .26); }

/* Delivery desk follows the same film-grade palette. */
.send-export-dialog { border-color: #c8cfd7; background: #f7f4ee; color: var(--cinema-ink); }
.send-head { background: linear-gradient(90deg, #fffaf1, #f7faf8 60%, #f0ebf8); }
.send-head-mark { background: linear-gradient(145deg, var(--cinema-teal), var(--cinema-violet)); }
.send-sidebar { background: #fffdf8; }
.send-action.primary { border-color: #4e447b; background: linear-gradient(145deg, #29364e, #5c4d8b); }
.send-footer .send-build { background: linear-gradient(110deg, var(--cinema-teal), var(--cinema-violet)); }

@media (max-width: 980px) {
  .topbar { background: linear-gradient(110deg, #fff8ec, #f1f6f4 58%, #ede8f6); }
  .tool-rail { border-top-color: var(--cinema-copper); border-bottom: 0; }
  .tool-rail button { background: rgba(255, 255, 255, .8); }
}

@media (max-width: 620px) {
  .tool-rail .mobile-save-command {
    border-color: rgba(201, 111, 70, .5);
    background: #fff0e7;
    color: #78391f;
  }
  .tool-rail .mobile-output-command {
    border-color: rgba(22, 125, 120, .48);
    background: #e9f5f2;
    color: #155d59;
  }
  .tool-rail .mobile-proof-command.active {
    border-color: rgba(101, 80, 173, .6);
    background: #ece7f8;
    color: #3f2d78;
  }
}

@media (prefers-contrast: more) {
  .file-nav button,
  .top-actions > button,
  .tool-rail button,
  .stage-options button { border-width: 2px; }
}