@font-face{font-family:Lato;src:url("/fonts/Lato-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/fonts/Lato-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}
:root {
  font-family: Lato, Arial, sans-serif;
  color: #282d43;
  background: #f4f5f8;
  --navy: #3f4661;
  --yellow: #f7d54a;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  height: 78px;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 45px;
}
.logo {
  color: white;
  text-decoration: none;
  font-size: 29px;
  letter-spacing: 4px;
  font-weight: bold;
}
.logo small {
  font-size: 11px;
  display: block;
  letter-spacing: 5px;
  color: var(--yellow);
}
nav {
  display: flex;
  gap: 8px;
}
button,
.button,
select,
input,
textarea {
  font: inherit;
  border: 1px solid #dce0e9;
  border-radius: 7px;
  padding: 10px;
  background: white;
  color: inherit;
}
button,
.button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
button:hover,
.button:hover {
  background: #f7d54a33;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--yellow);
}
nav button {
  background: transparent;
  border: 0;
  color: #e0e3ef;
}
nav button.active {
  background: #ffffff1c;
  color: var(--yellow);
}
.badge {
  font-size: 12px;
  background: #f7d54a26;
  color: inherit;
  padding: 7px 10px;
  border-radius: 20px;
}
header > .badge {
  margin-left: auto;
}
#status {
  min-height: 35px;
  padding: 9px 28px;
  font-size: 13px;
  background: #fff9df;
}
main#editor {
  display: grid;
  grid-template-columns: 255px minmax(300px, 1fr) 255px;
  min-height: calc(100vh - 113px);
}
aside {
  background: white;
  padding: 22px 18px;
  border-right: 1px solid #e4e6ee;
}
h2 {
  font-size: 18px;
  margin: 0 0 12px;
}
h3 {
  font-size: 13px;
  margin: 27px 0 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.muted,
p {
  font-size: 13px;
  color: #7b8092;
  line-height: 1.6;
}
label {
  display: block;
  font-size: 12px;
  margin: 10px 0;
}
label > input:not([type="checkbox"]),
label > select,
label > textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
}
aside > button,
aside > select {
  display: block;
  width: 100%;
  margin: 6px 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.row > * {
  min-width: 0;
  flex: 1;
}
.row label {
  width: 45%;
}
input[type="color"] {
  height: 38px;
  padding: 4px;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tools .button {
  margin: 0;
}
.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.toolbar {
  padding: 16px;
  display: flex;
  gap: 7px;
  background: #fff;
  border-bottom: 1px solid #e0e3eb;
}
.toolbar #name {
  width: 40%;
  margin-right: auto;
  border-color: transparent;
  font-weight: 600;
}
.primary {
  background: var(--navy);
  color: white;
}
.canvas-wrap {
  background-color: #e8eaf0;
  background-image: radial-gradient(#c7cbd7 1px, transparent 1px);
  background-size: 18px 18px;
  min-height: 650px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: auto;
}
canvas {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  box-shadow: 0 12px 50px #252d4d25;
  touch-action: none;
  background: white;
}
footer {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7b8092;
}
.layer {
  display: block;
  width: 100%;
  text-align: left;
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer.selected {
  border-color: var(--navy);
  background: #f1f2f7;
}
.page {
  padding: 42px;
  max-width: 1450px;
  margin: auto;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.cards article,
form {
  padding: 24px;
  border: 1px solid #e0e3eb;
  border-radius: 14px;
  background: white;
}
.cards article button {
  margin-top: 10px;
}
.plan-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 35px;
}
#calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 15px 0;
}
.day {
  padding: 12px;
  background: white;
  min-height: 65px;
  border-radius: 4px;
}
.day.has-plan {
  border-bottom: 4px solid var(--yellow);
}
.day small {
  display: block;
  font-size: 10px;
  margin-top: 6px;
}
.plan {
  padding: 18px;
  background: white;
  border-radius: 8px;
  margin: 8px 0;
}
.swatch {
  height: 34px;
  border: 1px solid #d0d4df;
  border-radius: 50%;
}
#products button {
  width: 100%;
  font-size: 12px;
  margin: 5px 0;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1100px) {
  main#editor {
    grid-template-columns: 210px minmax(250px, 1fr) 210px;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .canvas-wrap {
    padding: 20px;
  }
}
@media (max-width: 780px) {
  header {
    padding: 15px;
    gap: 15px;
    height: auto;
    flex-wrap: wrap;
  }
  nav {
    flex-wrap: wrap;
  }
  header > .badge {
    display: none;
  }
  main#editor {
    display: flex;
    flex-direction: column;
  }
  .workspace {
    order: -1;
  }
  .canvas-wrap {
    min-height: 400px;
  }
  aside {
    border-top: 1px solid #ddd;
  }
  .plan-layout {
    grid-template-columns: 1fr;
  }
  .page {
    padding: 20px;
  }
}
body[data-auth="required"] main {
  display: none !important;
}
#login-gate {
  background: #fff;
  border: 1px solid #e0e3eb;
  border-radius: 14px;
  margin: 50px auto;
  max-width: 650px;
}
header #login,
header #logout {
  font-size: 12px;
}
.lune-event {
  border-left: 4px solid #3f4661;
}
.plan .row {
  margin-top: 12px;
  justify-content: flex-end;
}
.plan .row button {
  flex: 0 0 auto;
}
.connection-note {
  font-size: 12px;
  color: #68708c;
}
header > button {
  color: var(--navy);
}
@media (min-width: 781px) {
  main#editor {
    height: calc(100vh - 113px);
    min-height: 0;
  }
  main#editor > aside {
    overflow: auto;
  }
  .workspace {
    min-height: 0;
  }
  .canvas-wrap {
    min-height: 0;
  }
  canvas {
    max-height: calc(100vh - 290px);
  }
}

body[data-auth="required"] #ai { display:none!important; }
.ai-title {display:flex;justify-content:space-between;align-items:center;gap:24px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:bold;color:#3f4661}.ai-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;max-width:1500px}.ai-workspace,.ai-sidebar{background:white;padding:24px;border:1px solid #dce0e8;border-radius:16px;min-width:0}.ai-examples{display:flex;flex-wrap:wrap;gap:8px}.ai-workspace label,.ai-sidebar label{display:block;margin:14px 0}.ai-workspace textarea,.ai-workspace select,.ai-sidebar input:not([type=checkbox]){width:100%;box-sizing:border-box}.ai-workspace textarea{resize:vertical}.ai-answer{white-space:pre-wrap;line-height:1.65;background:#f6f7fb;padding:20px;border-radius:12px;margin:18px 0}.ai-preview{display:block;max-width:100%;width:440px;border-radius:12px}.ai-approval{margin-top:24px;padding-top:12px;border-top:1px solid #ddd}.ai-approval p,#ai-readiness{font-size:14px;color:#596073}.ai-product{display:flex!important;align-items:start;gap:8px;padding:8px;border-bottom:1px solid #eee;font-size:13px}.ai-product input{width:auto}#ai-products{max-height:360px;overflow:auto}#ai-selected button{font-size:12px;margin:3px}#ai-history{display:grid;gap:8px;margin-top:14px;max-height:420px;overflow:auto}#ai-history button{text-align:left;font-size:13px}.ai-review{margin:24px 0;padding:18px;border:1px solid #ddd;border-radius:12px}.ai-review-field{border-top:1px solid #eee;padding:8px 0}.ai-comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ai-comparison p{white-space:pre-wrap;font-size:14px;max-height:220px;overflow:auto}.ai-comparison label{margin:0;font-size:13px}.ai-review-field input[type=checkbox],.ai-approval input[type=checkbox]{width:auto}#ai-working{margin:12px;display:inline-block}#ai-working[hidden]{display:none}@media(max-width:1000px){.ai-layout{grid-template-columns:1fr}.ai-comparison{grid-template-columns:1fr}.ai-title{align-items:start}}

/* Compact, accessible layer controls and background inspector. */
.layer-row{display:grid;grid-template-columns:minmax(0,1fr) 29px 29px;gap:3px;align-items:center;border:1px solid #e3e6ed;border-radius:8px;margin:6px 0;padding:3px;background:white}
.layer-row.selected{border-color:#3f4661;background:#f1f2f7}.layer-row .layer{border:0;margin:0;background:transparent;padding:9px 5px;font-size:12px}.layer-control{padding:7px 2px;border:0;background:transparent;font-size:13px}.layer-row[draggable=true]{cursor:grab}.layer-row.drop-target{border-top:3px solid #b73395}.background-layer{font-size:12px}.alignment{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.alignment button{font-size:11px;padding:8px 2px}.gradient-presets{display:flex;gap:4px;flex-wrap:wrap}.gradient-presets button{font-size:11px;padding:8px}#background-preview{height:70px;border:1px solid #dce0e9;border-radius:9px;margin-top:14px}button:disabled{opacity:.45;cursor:default}#background-properties h3{margin-top:20px}
#selection-summary{color:var(--navy);font-weight:bold}#crop-dialog{width:min(900px,96vw);max-height:96vh;overflow:auto;border:1px solid #dce0e9;border-radius:14px;padding:24px;color:var(--navy)}#crop-dialog::backdrop{background:#171b2baa}#crop-preview{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;background:#202638;box-shadow:none;cursor:move;touch-action:none}#crop-dialog .row{flex-wrap:wrap}#crop-dialog .row label{flex:1 1 100px}#crop-error{color:#af2833}#crop-image{width:100%;margin-bottom:10px}#crop-dialog h2{font-size:22px}
#crop-preview{max-height:none}
#crop-preview{width:min(100%,67.2vh,800px);height:auto;margin:0 auto 12px}
#draft-search-form{padding:10px;border-radius:8px}#draft-results{max-height:220px;overflow:auto}#draft-results button{display:block;width:100%;text-align:left;margin:5px 0;font-size:12px}.draft-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:25px 0}.draft-layout section,#draft-review{background:white;border:1px solid #dce0e9;border-radius:12px;padding:24px}.draft-copy{white-space:pre-wrap;color:#3f4661;font-size:15px}#draft-description{width:100%}#draft-review-image{display:block;max-width:100%;max-height:450px;object-fit:contain;margin:20px 0}#linked-draft{color:var(--navy);font-weight:bold}#product>.row{max-width:600px}@media(max-width:800px){.draft-layout{grid-template-columns:1fr}}
#back-admin{white-space:nowrap;color:var(--navy);font-size:12px;text-decoration:none;padding:9px}header{gap:18px;flex-wrap:wrap;height:auto;min-height:78px;padding-top:12px;padding-bottom:12px}

/* Softer Lune surfaces; canvas geometry and exported artwork remain exact. */
:root{--surface-border:#e6e8f0;--selection:#6488ff;background:#f6f7fb;color:#30364d}
header{background:linear-gradient(115deg,#3f4661,#4b526f);box-shadow:0 3px 18px #22294012}
button,.button,select,input,textarea{border-radius:12px;border-color:#e0e3ed;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
button:hover:not(:disabled),.button:hover{border-color:#c9cedf;background:#f3f1e5}
button:active:not(:disabled),.button:active{box-shadow:inset 0 1px 3px #28304b18}
button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f7d54a;outline-offset:3px}
.primary{background:#3f4661;border-color:#3f4661;box-shadow:0 3px 8px #3f466118}
.primary:hover:not(:disabled){background:#505977;color:white;border-color:#505977}
nav{gap:4px}nav button{border-radius:12px}nav button:hover:not(:disabled){background:#ffffff18;border-color:transparent;color:white}
nav button.active{background:#ffffff20;color:#fff0a3}
#status{background:#fffbed;color:#5c5d55;border-bottom:1px solid #f0eddf}
aside{background:#fdfdff;border-color:var(--surface-border)}
main#editor>aside:last-child{border-right:0;border-left:1px solid var(--surface-border)}
.toolbar{background:#fdfdff;border-color:var(--surface-border);padding:14px 18px;gap:8px}
.toolbar #name{background:#f5f6fa;border-color:transparent;border-radius:10px}
.canvas-wrap{background-color:#f0f2f7;background-image:radial-gradient(#d3d7e3 .8px,transparent .8px);background-size:20px 20px}
#canvas{box-shadow:0 8px 28px #353e5918,0 2px 6px #353e5910;outline:3px solid transparent;outline-offset:3px}
#canvas.background-selected{outline-color:var(--selection);box-shadow:0 0 0 7px #6488ff16,0 12px 35px #353e5920}
footer{color:#686f84;background:#f8f9fc}
.layer-row{border-radius:12px;border-color:var(--surface-border);padding:4px}
.layer-row.selected,.layer.selected{border-color:#8998ca;background:#f0f3fc;box-shadow:0 2px 6px #3f466108}
.layer-control{border-radius:8px}.layer-row.drop-target{border-top-color:#6488ff}
.cards article,form,.ai-workspace,.ai-sidebar,.draft-layout section,#draft-review,.plan,#login-gate{border-radius:20px;border-color:var(--surface-border);box-shadow:0 4px 18px #353e5906}
.day{border-radius:12px;border:1px solid #edf0f6}.day.has-plan{border-bottom:4px solid var(--yellow)}
.ai-answer,.ai-review{border-radius:16px}#crop-dialog{border-radius:22px;box-shadow:0 24px 80px #171b2b30}#background-preview{border-radius:14px}
#draft-search-form{border-radius:14px;padding:12px;background:#f7f8fc;box-shadow:none}
#back-admin{background:#f7f8fc;border-color:#ffffff55;border-radius:12px}
@media(prefers-reduced-motion:reduce){button,.button,select,input,textarea{transition:none}}

.logo{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;gap:3px;line-height:1;text-decoration:none}.logo img{display:block;width:96px;height:46px;object-fit:contain}.logo small{font-size:9px;letter-spacing:4px;padding-left:4px;line-height:1.2}

.inline-text{position:fixed;z-index:70;margin:0;padding:0;border:0;border-radius:0;outline:2px solid #6488ff;outline-offset:2px;box-shadow:0 0 0 4px #6488ff16;background:transparent;resize:none;min-height:0;overflow:hidden;transform-origin:center;white-space:pre-wrap;overflow-wrap:normal;caret-color:#e143b7}.inline-text:focus-visible{outline:2px solid #6488ff;outline-offset:2px}.inline-text-toolbar{position:fixed;z-index:71;display:flex;gap:4px;padding:5px;background:white;border:1px solid #e0e3ed;border-radius:14px;box-shadow:0 8px 28px #252d4d25}.inline-text-toolbar button{font-size:12px;padding:8px 10px}.inline-text-toolbar button[aria-pressed=true]{background:#edf0fc;border-color:#6488ff;color:#3f4661}