:root {
  --ink: #191916;
  --muted: #74736c;
  --paper: #f5f4f0;
  --panel: #fbfaf7;
  --line: #dfded8;
  --lime: #d9ff5b;
  --lime-dark: #bfe93a;
  --brown: #563327;
  --terracotta: #d96945;
  --green: #008000;
  --radius: 18px;
  --shadow: 0 20px 50px rgba(30, 27, 20, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-hidden { display: none !important; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* Shared */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 760; letter-spacing: -.7px; }
.brand-light { color: white; }
.brand-mark { width: 28px; height: 28px; position: relative; display: inline-block; transform: rotate(-6deg); }
.brand-mark i { position: absolute; width: 17px; height: 17px; background: var(--lime); border-radius: 50% 3px 50% 50%; }
.brand-mark i:first-child { left: 0; top: 0; }
.brand-mark i:last-child { right: 0; bottom: 0; transform: rotate(180deg); }
.primary-button, .dark-button, .secondary-button, .cream-button, .google-button {
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 650;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 18px; background: var(--lime); }
.primary-button:hover { background: var(--lime-dark); transform: translateY(-5px); box-shadow: 0 8px 20px rgba(158, 201, 33, .22); }
.dark-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 15px; background: var(--ink); color: white; }
.dark-button:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(0,0,0,.18); }
.secondary-button { padding: 10px 15px; color: #281946; background: white; border: 1px solid var(--line); }
.secondary-button:hover { background: #f7f6f2; }
.cream-button { background: var(--green); padding: 9px 17px; display: center; align-items: center; gap: 30px; }
.cream-button:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,.14); }
.text-button, .icon-button { border: 0; background: transparent; cursor: pointer; padding: 0; }
.text-button { color: #486005; font-weight: 650; }
.text-button.subtle { color: var(--muted); font-weight: 500; font-size: 13px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; }
.icon-button svg { width: 22px; height: 22px; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: 1.7px; color: #6c6b65; }
.eyebrow b { width: 17px; height: 1px; background: currentColor; }
.eyebrow-light { color: var(--lime); }
.mini-label, .modal-kicker { color: #718d14; font-size: 9px; font-weight: 800; letter-spacing: 2px; }

/* Sign in */
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(490px, 1.12fr) minmax(440px, .88fr); background: #f8f7f3; }
.auth-visual { position: relative; min-height: 700px; padding: 42px 4vw; overflow: scroll; color: white; background: #2d3627; }
.auth-visual::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: #46553a;
  right: -240px;
  top: -240px;
  box-shadow: -230px 650px 0 80px rgba(193, 219, 100, .07);
}
.auth-copy { position: relative; z-index: 2; margin-top: clamp(70px, 10vh, 120px); max-width: 610px; }
.auth-copy h1 { margin: 19px 0 20px; font-family: Georgia, serif; font-weight: 400; font-size: clamp(43px, 5vw, 76px); line-height: .98; letter-spacing: -3.8px; }
.auth-copy h1 em { color: var(--lime); font-weight: 400; }
.auth-copy p { max-width: 470px; margin: 0; color: #c7cec2; font-size: 16px; line-height: 1.7; }
.auth-art { position: relative; height: 305px; margin-top: 36px; max-width: 680px; }
.auth-poster { position: absolute; overflow: hidden; box-shadow: 0 22px 40px rgba(0,0,0,.3); }
.poster-photo { width: 176px; height: 230px; left: 17%; top: 12px; transform: rotate(-7deg); padding: 18px; background: linear-gradient(0deg, rgba(30,12,5,.5), transparent 60%), url("assets/kopi-gula-aren.png") center / cover; }
.poster-photo::after { content: ""; position: absolute; width: 75px; height: 75px; right: -23px; top: 52px; border: 14px solid var(--lime); border-radius: 50%; }
.mini-kicker { font-size: 7px; letter-spacing: 1.7px; font-weight: 800; }
.mini-title { position: absolute; left: 17px; bottom: 47px; font: 700 18px/1.05 Georgia,serif; }
.mini-pill { position: absolute; left: 17px; bottom: 17px; padding: 5px 8px; background: var(--lime); color: #1c2419; font-size: 5px; font-weight: 900; letter-spacing: .8px; }
.poster-type { width: 164px; height: 212px; left: 45%; top: 40px; transform: rotate(8deg); padding: 18px; background: #e56f4a; color: #36231d; }
.poster-type small { font-size: 6px; letter-spacing: 2px; }
.poster-type strong { display: block; margin-top: 16px; font-size: 32px; line-height: .78; letter-spacing: -2.3px; }
.poster-type span { position: absolute; bottom: 17px; left: 18px; font: italic 9px Georgia,serif; }
.float-tag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; color: #27311e; background: white; box-shadow: 0 10px 28px rgba(0,0,0,.25); font-size: 14px; font-weight: 700; }
.tag-one { left: 5%; top: 0; transform: rotate(3deg); }
.tag-one span { color: #7f9e1e; }
.tag-two { left: 57%; bottom: 36px; transform: rotate(-2deg); }
.avatar-dots { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #343f2f; color: var(--lime); font-size: 7px; }
.auth-footnote { position: absolute; left: 4vw; bottom: 24px; margin: 0; font-size: 12px; color: #929c8d; }
.auth-panel { display: grid; place-items: center; padding: 50px; }
.auth-form-wrap { width: min(100%, 400px); }
.mobile-brand { display: none; margin-bottom: 45px; }
.form-heading h2 { margin: 11px 0 10px; font-family: Georgia, serif; font-size: 37px; line-height: 1.1; letter-spacing: -1.4px; font-weight: 400; }
.form-heading p { margin: 0 0 33px; color: var(--muted); font-size: 13px; }
.form-heading .text-button { margin-left: 3px; }
#login-form > label, #register-form > label, .label-row label, .modal label, .refine-drawer > label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; }
.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; width: 17px; height: 17px; left: 14px; top: 50%; transform: translateY(-50%); color: #9d9b93; }
.input-wrap input, .modal input { width: 100%; height: 47px; border: 1px solid #d8d7d1; border-radius: 9px; outline: 0; background: white; padding: 0 43px; font-size: 13px; transition: border .2s, box-shadow .2s; }
.modal input { padding: 0 14px; }
.input-wrap input:focus, .modal input:focus { border-color: #96b530; box-shadow: 0 0 0 3px rgba(183,218,70,.16); }
.eye-button { position: absolute; width: 42px; height: 44px; right: 2px; top: 2px; color: #8d8b83; }
.eye-button svg { width: 18px; }
.check-row { display: flex !important; align-items: center; gap: 9px; margin: 16px 0 22px !important; color: #66655f; font-weight: 500 !important; }
.check-row input { position: absolute; opacity: 0; }
.custom-check { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 4px; color: #263015; background: var(--lime); font-size: 11px; font-weight: 900; }
.auth-submit { width: 100%; height: 48px; justify-content: center; padding-inline: 19px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 17px; color: #9e9d97; font-size: 10px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #e1e0db; }
.google-button { width: 100%; height: 45px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #d8d7d1; background: white; }
.google-button svg { width: 18px; height: 18px; stroke: none; }
.terms { text-align: center; margin: 25px 0 0; color: #aaa8a2; font-size: 9px; }
.terms a { text-decoration: underline; }
.auth-error { margin: 16px 0 0; padding: 11px 13px; border: 1px solid #e2b7aa; border-radius: 9px; color: #843b2d; background: #fff1ec; font-size: 13px; line-height: 1.45; }
#register-form > label:not(:first-child) { margin-top: 17px; }
#register-form .input-wrap input { padding-inline: 14px; }
.auth-submit[disabled] { cursor: wait; opacity: .65; transform: none; }

/* Shell and navigation */
.app-shell { min-height: 100vh; display: flex; background: #f3f2ee; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 228px; display: flex; flex-direction: column; border-right: 1px solid #dfded8; background: #faf9f6; }
.sidebar-top { padding: 28px 20px 20px; }
.sidebar-top .brand { margin-left: 7px; }
.side-create { width: 90%; height: 43px; margin-top: 29px; border: 0; border-radius: 9px; display: flex; justify-content: center; align-items: center; gap: 9px; background: var(--ink); color: white; font-size: 15px; font-weight: 650; cursor: pointer; transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,background-color .28s ease; }
.side-create:hover { transform: translateY(-4px); box-shadow:0 9px 20px rgba(25,25,22,.18); }
.side-create:active { transform:translateY(-1px) scale(.985); transition-duration:.1s; }
.side-create:focus-visible { outline:3px solid rgba(217,255,91,.55); outline-offset:3px; }
.side-create span { color: var(--lime); font-size: 20px; font-weight: 300; }
.side-nav { padding: 0 12px; }
.nav-item { position: relative; width: 100%; height: 42px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 0 12px; background: transparent; color: #6d6c66; font-size: 12px; text-align: left; cursor: pointer; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { background: #efeee9; }
.nav-item.active { color: var(--ink); background: #e8e7e1; font-weight: 700; }
.nav-item.active::before { content: ""; position: absolute; width: 3px; height: 17px; left: 0; border-radius: 2px; background: #91ae25; }
.nav-count { min-width: 22px; height: 22px; display: grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 12px; background: #e3e9d0; color: #627716; font-size: 11px; font-weight: 800; }
.soon-badge { margin-left: auto; padding: 3px 5px; border-radius: 4px; background: #eeede7; font-size: 7px; font-weight: 800; letter-spacing: .6px; }
.side-spacer { flex: 1; }
.plan-card { margin: 13px 12px 9px; padding: 13px; border-radius: 11px; background: #30392b; color: white; }
.plan-icon { color: var(--lime); font-size: 14px; margin-bottom: 7px; }
.plan-card strong, .plan-card > span { display: block; }
.plan-card strong { font-size: 10px; }
.plan-card > span { margin-top: 3px; color: #adb5a9; font-size: 8px; }
.plan-progress { height: 3px; margin: 10px 0 8px; overflow: hidden; border-radius: 5px; background: #50584b; }
.plan-progress i { display: block; width: 72%; height: 100%; background: var(--lime); }
.plan-card button { padding: 0; border: 0; background: transparent; color: var(--lime); font-size: 8px; font-weight: 700; cursor: pointer; }
.sidebar-bottom { padding: 0 12px 16px; }
.profile-button { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 11px 8px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.profile-button:hover,
.profile-button.menu-open { border-color: transparent; background: #efeee9; }
.avatar, .mini-avatar { border-radius: 50%; background: #d96945; color: white; display: grid; place-items: center; font-weight: 700; }
.avatar { flex: 0 0 31px; height: 31px; font-size: 9px; }
.profile-button > span:nth-child(2) { min-width: 0; flex: 1; }
.profile-button strong, .profile-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-button strong { font-size: 9px; }
.profile-button small { margin-top: 3px; color: #8a8983; font-size: 7px; }
.profile-button b { color: #888782; font-size: 9px; letter-spacing: 1px; }
.account-popover { position:fixed; z-index:120; left:12px; bottom:72px; width:min(auto); overflow:hidden; padding:8px; border:1px solid #deddd7; border-radius:14px; background:#fbfaf7; box-shadow:0 18px 55px rgba(30,27,20,.19),0 2px 8px rgba(30,27,20,.08); animation:modal-in .18s ease both; }
.account-popover-head { display:flex; align-items:center; gap:10px; padding:8px 9px 10px; }
.account-popover-head > span:nth-child(2) { min-width:0; flex:1; }
.account-popover-head strong,
.account-popover-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-popover-head strong { font-size:14px; }
.account-popover-head small { margin-top:3px; color:#85847d; font-size:12px; }
.account-popover-head i,
.account-current-row i { color:#78961b; font-size:15px; font-style:normal; font-weight:800; }
.account-popover-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0 4px 10px; }
.account-popover-actions button { min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #deddd7; border-radius:8px; background:#fff; font-size:12px; font-weight:650; cursor:pointer; }
.account-popover-actions button:hover { border-color:#c8c7c0; background:#f3f2ed; }
.account-popover-actions svg { width:15px; height:15px; }
.account-popover-email { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 9px 7px; border-top:1px solid var(--line); color:#686760; font-size:12px; }
.account-popover-email span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-popover-email b { color:#96958e; letter-spacing:1px; }
.account-current-row { display:flex; align-items:center; gap:9px; margin:2px 3px 8px; padding:8px 7px; border-radius:8px; background:#efeee9; }
.account-current-row strong { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.account-mini-avatar { flex:0 0 25px; height:25px; display:grid; place-items:center; border-radius:7px; background:#d96945; color:white; font-size:8px; font-weight:800; }
.account-menu-divider { height:1px; margin:3px 0; background:var(--line); }
.account-menu-item { width:100%; min-height:48px; display:flex; align-items:center; gap:10px; padding:8px 9px; border:0; border-radius:8px; background:transparent; text-align:left; cursor:pointer; }
.account-menu-item:hover { background:#efeee9; }
.account-menu-item > svg { flex:0 0 17px; width:17px; height:17px; color:#6f6e67; }
.account-menu-item > span { min-width:0; flex:1; }
.account-menu-item strong,
.account-menu-item small { display:block; }
.account-menu-item strong { font-size:12px; }
.account-menu-item small { margin-top:3px; overflow:hidden; color:#8b8a83; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-item > b { color:#999891; font-size:20px; font-weight:400; }
.account-menu-logout { color:#923e30; }
.account-menu-logout > svg { color:#a94b3b; }
.account-menu-logout:hover { background:#fff0eb; }
.account-popover.mobile-anchor { inset:68px 12px auto auto; }
.app-main { width: calc(100% - 228px); min-height: 100vh; margin-left: 228px; }
.mobile-header { display: none; }
.view { min-height: 100vh; }

/* Dashboard */
.dashboard-view { max-width: 1280px; margin: 0 auto; padding: 56px clamp(36px, 5vw, 76px) 50px; }
.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.dashboard-header h1 { margin: 13px 0 4px; font-family: Georgia,serif; font-size: clamp(38px, 4vw, 52px); font-weight: 400; letter-spacing: -2px; }
.dashboard-header p { margin: 0; color: var(--muted); font-size: 14px; }
.dashboard-header .primary-button { margin-bottom: 6px; }
.quick-start { height: 290px; display: grid; grid-template-columns: .9fr 1.1fr; margin-top: 38px; overflow: hidden; border-radius: 17px; background: #2f382b; color: white; }
.quick-copy { position: relative; z-index: 2; padding: 37px 41px; }
.quick-copy .mini-label { color: var(--lime); }
.quick-copy h2 { margin: 11px 0 9px; font: 400 35px/1.02 Georgia,serif; letter-spacing: -1.6px; }
.quick-copy p { max-width: 390px; margin: 0 0 21px; color: #bdc4b9; font-size: 11px; line-height: 1.55; }
.quick-visual { position: relative; perspective: 900px; }
.quick-visual::before { content: ""; position: absolute; width: 360px; height: 360px; right: -20px; top: -120px; border: 1px solid rgba(217,255,91,.12); border-radius: 50%; box-shadow: 0 0 0 65px rgba(217,255,91,.025), 0 0 0 130px rgba(217,255,91,.018); }
.idea-card { position: absolute; width: 145px; height: 190px; padding: 15px; border-radius: 3px; box-shadow: 0 18px 35px rgba(0,0,0,.25); }
.idea-card span { font-size: 7px; font-weight: 700; }
.idea-card strong, .idea-card small { position: absolute; left: 15px; display: block; }
.idea-card strong { bottom: 32px; font: italic 25px Georgia,serif; }
.idea-card small { bottom: 17px; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; }
.card-a { z-index: 3; left: 20%; top: 40px; transform: rotate(-8deg); background: var(--lime); color: #27301f; }
.card-b { z-index: 2; left: 43%; top: 24px; transform: rotate(5deg); background: #d96f4a; color: #3a261e; }
.card-b::after { content: ""; position: absolute; width: 80px; height: 80px; right: -16px; top: 25px; border-radius: 50%; background: #f2c798; }
.card-c { z-index: 1; left: 65%; top: 54px; transform: rotate(13deg); background: #f4ead1; color: #43342b; }
.card-c::before { content: ""; position: absolute; inset: 40px 15px 64px; border: 1px solid #936e53; border-radius: 60px 60px 0 0; }
.spark { position: absolute; color: var(--lime); }
.spark-a { left: 3%; top: 30px; }
.spark-b { right: 7%; bottom: 23px; font-size: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 38px 0 19px; }
.section-heading > div { display: flex; align-items: baseline; gap: 12px; }
.section-heading h2 { margin: 0; font: 400 23px Georgia,serif; letter-spacing: -.5px; }
.section-heading > div span { color: #9c9b95; font-size: 9px; }
.section-heading .text-button { color: #5d5d57; font-size: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid #e0dfd9; border-radius: 13px; background: white; cursor: pointer; transition: transform .22s, box-shadow .22s; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project-preview { position: relative; height: 190px; overflow: hidden; background: #e2d5c4; }
.project-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -30px 40px rgba(0,0,0,.08); }
.project-preview.coffee { background: url("assets/kopi-gula-aren.png") center 64% / cover; }
.project-preview.coffee::before { content: "RASA LOKAL\A KELAS DUNIA"; white-space: pre; position: absolute; z-index: 2; top: 18px; left: 20px; color: #fff7db; font-size: 20px; font-weight: 900; line-height: .85; letter-spacing: -1.2px; }
.project-preview.skincare { background: radial-gradient(circle at 70% 34%, #f8c1b0 0 20%, transparent 20.5%), linear-gradient(135deg,#f7d7ca 50%,#cd7c69 50%); }
.project-preview.skincare::before { content: "LUNEA\A\A gentle rituals"; white-space: pre; position: absolute; left: 27px; top: 38px; font: 16px Georgia,serif; color: #6e382d; }
.project-preview.skincare i { position: absolute; width: 52px; height: 95px; right: 43px; bottom: 17px; border-radius: 13px 13px 4px 4px; background: #f7eee6; box-shadow: 0 10px 18px rgba(104,54,42,.2); }
.project-preview.fashion { background: linear-gradient(120deg, #acc9c1, #d8e3da); }
.project-preview.fashion::before { content: "BENTUK\A BARU"; white-space: pre; position: absolute; z-index: 2; left: 17px; bottom: 20px; font: italic 25px/ .9 Georgia,serif; }
.project-preview.fashion i { position: absolute; width: 105px; height: 155px; right: 30px; top: 21px; border-radius: 55px 55px 12px 12px; background: #303a35; clip-path: polygon(23% 0, 42% 10%, 58% 10%, 77% 0, 100% 38%, 80% 49%, 75% 100%, 25% 100%, 20% 49%, 0 38%); }
.project-preview.empty { background: linear-gradient(135deg,#eef0e8,#dfe6d2); }
.project-preview.empty::before { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: #8ea32f; font-size: 48px; }
.project-card-body { position:relative; padding: 16px 17px 15px; }
.project-card-body h3 { margin: 0 0 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-meta { display: flex; align-items: center; gap: 8px; color: #96958f; font-size: 8px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #8cac26; }
.status-dot.draft { background: #cf8747; }
.project-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 11px; border-top: 1px solid #eeede8; }
.project-card-actions span { font-size: 8px; color: #8a8983; }
.project-card-actions button { border: 0; background: transparent; padding: 0; font-size: 16px; color: #85847e; cursor: pointer; }
.project-action-menu { position:absolute; z-index:15; right:12px; bottom:43px; min-width:135px; overflow:hidden; padding:5px; border:1px solid #deddd7; border-radius:9px; background:#fff; box-shadow:0 12px 28px rgba(30,30,26,.16); }
.project-action-menu button { width:100%; display:flex; align-items:center; gap:8px; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:#474640; font-size:12px; text-align:left; cursor:pointer; }
.project-action-menu button:hover { background:#f0efe9; }
.project-action-menu button.danger { color:#b33b32; }
.danger-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; border:1px solid #a82f28; border-radius:8px; background:#b63a31; color:#fff; font-weight:800; cursor:pointer; }
.delete-project-modal { width:min(100%,440px); }
.tips-strip { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 13px 16px; border: 1px solid #e2e0d5; border-radius: 10px; background: #edece5; }
.tip-icon { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; background: #dcebb1; font-size: 11px; }
.tips-strip p { flex: 1; margin: 0; color: #6e6d67; font-size: 9px; line-height: 1.5; }
.tips-strip p strong { color: var(--ink); margin-right: 8px; }
.tips-strip .icon-button { font-size: 18px; color:#b91c1c; background:transparent; }

/* Saved design library */
.library-view { max-width: 1280px; margin: 0 auto; padding: 54px clamp(30px, 5vw, 72px) 70px; background: #f7f6f2; }
.library-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.library-header h1 { margin: 13px 0 7px; font: 400 clamp(38px, 4vw, 52px) Georgia,serif; letter-spacing: -2px; }
.library-header p { max-width: 620px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.library-lock-note { min-width: 285px; display: flex; align-items: center; gap: 12px; padding: 15px 17px; border: 1px solid #d9dfc5; border-radius: 12px; background: #f0f4e5; }
.library-lock-note > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; background: #dce9b4; color: #617711; }
.library-lock-note strong, .library-lock-note small { display: block; }
.library-lock-note strong { font-size: 14px; }
.library-lock-note small { margin-top: 3px; color: #778066; font-size: 12px; }
.library-heading { display: flex; align-items: center; justify-content: space-between; margin: 42px 0 18px; }
.library-heading > div { display: flex; align-items: baseline; gap: 12px; }
.library-heading h2 { margin: 0; font: 400 25px Georgia,serif; }
.library-heading span { color: #92918b; font-size: 14px; }
.library-empty { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 20px; border: 1px dashed #cdccc5; border-radius: 18px; background: #fbfaf7; text-align: center; }
.library-empty-icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: #e8edd8; color: #71881e; font-size: 34px; }
.library-empty h3 { margin: 20px 0 7px; font: 400 24px Georgia,serif; }
.library-empty p { max-width: 440px; margin: 0 0 21px; color: #85847e; font-size: 14px; line-height: 1.55; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 20px; }
.library-card { min-width: 0; overflow: hidden; border: 1px solid #deddd7; border-radius: 15px; background: white; box-shadow: 0 4px 15px rgba(35,35,31,.035); transition: transform .2s, box-shadow .2s; }
.library-card:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(35,35,31,.1); }
.library-card-preview { position: relative; padding: 18px 18px 0; background: #e8e6df; }
.library-card-preview .poster { width: 100%; box-shadow: 0 12px 25px rgba(34,30,24,.16); }
.library-version-badge { position: absolute; z-index: 8; left: 27px; top: 27px; padding: 6px 8px; border-radius: 20px; background: rgba(31,35,27,.86); color: white; font-size: 10px; font-weight: 800; letter-spacing: .8px; backdrop-filter: blur(6px); }
.library-card-body { padding: 17px 18px 18px; }
.library-card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.library-card-title small { display: block; color: #92918b; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-card-title h3 { margin: 4px 0 0; font-size: 16px; }
.original-lock { flex: 0 0 auto; padding: 5px 7px; border-radius: 20px; background: #eef3df; color: #6b811c; font-size: 11px; font-weight: 800; }
.library-card-body > p { margin: 9px 0 13px; color: #8d8c86; font-size: 12px; }
.version-strip { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 8px; border-radius: 9px; background: #f3f2ed; }
.version-pill { min-width: 46px; height: 29px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #77766f; font-size: 12px; cursor: pointer; }
.version-pill:hover { background: white; }
.version-pill.active { border-color: #91a940; background: white; color: #5f7417; font-weight: 800; box-shadow: 0 2px 7px rgba(61,76,16,.1); }
.library-card-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.library-card-actions button { justify-content: center; font-size: 13px; }
.library-selection-toolbar { position:sticky; top:12px; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 20px; padding:13px 16px; border:1px solid #665080; border-radius:12px; color:#f8f3ff; background:#281d43; box-shadow:0 6px 22px rgba(5,2,20,.25); }
.library-select-all { display:inline-flex; align-items:center; gap:9px; min-height:38px; font-size:14px; font-weight:700; cursor:pointer; }
.library-select-all input,.library-select-input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:#c29af9; cursor:pointer; }
#library-selection-count { color:#d6c6eb; font-size:13px; }
.library-selection-actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.library-selection-actions button { min-height:40px; font-size:13px; }
.library-bulk-delete { padding:8px 14px; border:1px solid #ce809b; border-radius:9px; color:#ffe1eb; background:#64304d; font-weight:700; cursor:pointer; }
.library-bulk-delete:hover:not(:disabled) { color:#fff; background:#823e62; border-color:#f1adc7; }
.library-bulk-delete:focus-visible,.library-card-select:focus-within { outline:3px solid #e6a4ea; outline-offset:3px; }
.library-selection-toolbar button:disabled { opacity:.5; cursor:not-allowed; }
.library-card.is-selected { border-color:#cc9fff; box-shadow:0 0 0 2px #b68aea; }
.library-card-select { position:absolute; z-index:8; top:23px; right:23px; display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 10px; border:1px solid #a991c5; border-radius:9px; color:#fff; background:rgba(33,21,53,.94); font-size:12px; font-weight:700; cursor:pointer; }
.library-select-input:disabled { cursor:wait; }
#delete-library-error { color:#ffb6c8; }
.delete-library-modal button:disabled { opacity:.6; cursor:wait; }
.drawer-head p { max-width: 270px; margin: 7px 0 0; color: #85847e; font-size: 13px; line-height: 1.45; }

/* Project workspace */
.workspace-view { height: 100vh; overflow: hidden; background: #efeee9; }
.workspace-header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.workspace-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.back-button { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 8px; }
.workspace-title > div { min-width: 0; }
.workspace-title span { color: #96958f; font-size: 8px; }
.workspace-title span b { color: #6d6c66; }
.workspace-title h1 { margin: 3px 0 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { display: flex; align-items: center; gap: 8px; }
.save-status { display: flex; align-items: center; gap: 6px; margin-right: 10px; color: #8b8a84; font-size: 8px; }
.save-status i { width: 5px; height: 5px; border-radius: 50%; background: #8aab2d; }
.workspace-actions button { font-size: 9px; }
.workspace-body { height: calc(100vh - 72px); display: grid; grid-template-columns: 355px minmax(0, 1fr); }
.prompt-panel { overflow: auto; padding: 24px 22px 40px; border-right: 1px solid var(--line); background: #faf9f6; }
.prompt-panel-head, .results-head > div:first-child { display: flex; gap: 12px; }
.step-count { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 6px; background: #e4edc7; color: #617810; font-size: 8px; font-weight: 800; }
.prompt-panel-head h2, .results-head h2 { margin: 0 0 3px; font: 400 19px Georgia,serif; }
.prompt-panel-head p, .results-head p { margin: 0; color: #8c8b85; font-size: 8px; }
.prompt-panel > label { display: block; margin: 23px 0 8px; font-size: 10px; font-weight: 700; }
.prompt-box { overflow: hidden; border: 1px solid #d7d6cf; border-radius: 10px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.025); }
.prompt-box:focus-within { border-color: #9eb83a; box-shadow: 0 0 0 3px rgba(199,222,113,.17); }
.prompt-box textarea { width: 100%; height: 145px; display: block; resize: none; outline: 0; border: 0; padding: 13px; background: transparent; font-size: 10px; line-height: 1.6; }
.prompt-meta { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-top: 1px solid #ecebe7; }
.prompt-meta button { padding: 0; border: 0; background: transparent; color: #6f871d; font-size: 8px; font-weight: 700; cursor: pointer; }
.prompt-meta span { color: #aaa9a3; font-size: 7px; }
.prompt-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.prompt-suggestions span { color: #999892; font-size: 7px; }
.prompt-suggestions button, .refine-chips button { padding: 5px 7px; border: 1px solid #e0dfd9; border-radius: 20px; background: white; color: #6c6b65; font-size: 7px; cursor: pointer; }
.prompt-suggestions button:hover, .refine-chips button:hover { border-color: #a5b967; color: #586d16; }
.copy-section { margin-top: 18px; padding: 17px; border: 1px solid #deddd7; border-radius: 11px; background: #fff; }
.copy-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.copy-section-head span { font-size: 16px; line-height: 1.2; font-weight: 800; }
.copy-section-head small { max-width: 130px; color: #77766f; font-size: 10px; line-height: 1.4; text-align: right; }
.copy-section summary { cursor: pointer; list-style: none; margin-bottom: 0; align-items: center; }
.copy-section summary::-webkit-details-marker { display: none; }
.copy-section summary::after { content: "⌄"; color: #536b0d; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.copy-section[open] summary { margin-bottom: 16px; }
.copy-section[open] summary::after { transform: rotate(180deg); }
.copy-section .copy-auto-note { margin-top: 0; }
.copy-section label { display: block; margin: 14px 0 7px; color: #4f4e49; font-size: 11px; line-height: 1.3; font-weight: 700; }
.copy-section input, .copy-section textarea { width: 100%; min-height: 44px; border: 1px solid #d6d5cf; border-radius: 8px; outline: 0; padding: 12px 13px; background: #faf9f6; font: inherit; font-size: 12px; line-height: 1.5; }
.copy-section textarea { min-height: 76px; resize: vertical; }
.copy-section input:focus, .copy-section textarea:focus { border-color: #93a94b; box-shadow: 0 0 0 2px rgba(147,169,75,.12); }
.copy-section p { margin: 14px 0 0; color: #77766f; font-size: 10px; line-height: 1.55; }
.headline-control-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.headline-control-head > label { margin:0; }
.headline-mode-toggle { display:flex; gap:3px; padding:3px; border-radius:7px; background:#efeee9; }
.headline-mode-toggle button { min-height:25px; padding:0 7px; border:0; border-radius:5px; background:transparent; color:#83827c; font-size:8px; font-weight:800; cursor:pointer; }
.headline-mode-toggle button.active { background:#fff; color:#536b0d; box-shadow:0 2px 6px rgba(0,0,0,.09); }
.copy-section #headline-input[readonly] { color:#555b47; background:#f1f5e6; cursor:default; }
.headline-ai-button { width:100%; min-height:35px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:7px; border:1px solid #b4c478; border-radius:8px; background:#f4f8e7; color:#536b0d; font-size:10px; cursor:pointer; }
.headline-ai-button:disabled { cursor:wait; opacity:.65; }
.control-section { margin-top: 22px; }
.control-title { display: flex; align-items: center; justify-content: space-between; }
.control-title > span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.control-title svg { width: 14px; height: 14px; }
.control-title button { border: 0; padding: 0; background: transparent; color: #96958f; font-size: 7px; cursor: pointer; }
.style-options { display: grid; gap: 7px; margin-top: 10px; }
.style-option { width: 100%; height: 54px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #deddd7; border-radius: 9px; background: white; text-align: left; cursor: pointer; }
.style-option:hover { border-color: #b5b7a8; }
.style-option.selected { border-color: #879f32; box-shadow: 0 0 0 1px #879f32; }
.style-option > i { width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border-radius: 6px; }
.swatch-one { background: linear-gradient(135deg,#283528 50%,#e46d49 50%); box-shadow: inset 10px 10px 0 rgba(217,255,91,.5); }
.swatch-two { background: radial-gradient(circle,#d99469 0 23%,#eee3cf 24%); }
.swatch-three { background: linear-gradient(45deg,#222 45%,#d9ff5b 45% 65%,#e66542 65%); }
.style-option > span { flex: 1; }
.style-option strong, .style-option small { display: block; }
.style-option strong { font-size: 9px; }
.style-option small { margin-top: 3px; color: #9a9993; font-size: 7px; }
.style-option > b { width: 15px; height: 15px; border-radius: 50%; display: none; place-items: center; background: #829e24; color: white; font-size: 8px; }
.style-option.selected > b { display: grid; }
.form-row { display: grid; grid-template-columns: 1.3fr .9fr; gap: 10px; margin-top: 18px; }
.form-row.format-only { grid-template-columns: 1fr; }
.form-row label { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 700; }
.form-row select, .color-control { width: 100%; height: 37px; border: 1px solid #deddd7; border-radius: 8px; background: white; font-size: 8px; }
.form-row select { padding: 0 8px; outline: 0; }
.color-control { display: flex; align-items: center; padding: 0 8px; cursor: pointer; }
.color-control input { width: 24px; height: 24px; overflow: hidden; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.color-control input::-webkit-color-swatch-wrapper { padding: 0; }
.color-control input::-webkit-color-swatch { border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #d5d4ce; }
.color-control span { margin-left: 7px; color: #77766f; font-size: 7px; letter-spacing: .4px; }
.generate-button { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 11px; margin-top: 22px; padding: 9px 13px; border: 0; border-radius: 10px; background: var(--lime); cursor: pointer; text-align: left; transition: background .2s, transform .2s; }
.generate-button:hover { background: var(--lime-dark); transform: translateY(-1px); }
.generate-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #20261c; color: var(--lime); }
.generate-button > span:nth-child(2) { flex: 1; }
.generate-button strong, .generate-button small { display: block; }
.generate-button strong { font-size: 10px; }
.generate-button small { margin-top: 3px; color: #5d6c30; font-size: 7px; }
.generate-button > b { font-size: 15px; }
.generate-button:disabled { opacity: .65; cursor: wait; transform: none; }
.private-note { margin: 10px 0 0; text-align: center; color: #a2a19b; font-size: 7px; }
.api-status span { margin-right: 4px; }
.api-status.connected { color: #6d8619; }
.api-status.connected span { color: #8eab2c; text-shadow: 0 0 7px rgba(142,171,44,.45); }
.api-status.offline { color: #a76b55; }
.api-status.offline span { color: #d36d49; }
.results-panel { overflow: auto; position: relative; padding: 24px 30px 105px; }
.results-head { display: flex; justify-content: space-between; align-items: center; max-width: 1050px; margin: 0 auto 20px; }
.view-toggles { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.view-toggles button { width: 27px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: #9c9b95; font-size: 13px; cursor: pointer; }
.view-toggles button.active { background: #e7e6e0; color: #464641; }
.empty-results { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-orbit { position: relative; width: 105px; height: 105px; display: grid; place-items: center; border: 1px dashed #c9c8c1; border-radius: 50%; color: #8da32f; font-size: 24px; }
.empty-orbit::before { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: #e4e9d4; }
.empty-orbit span { position: relative; z-index: 2; }
.empty-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #d36c4a; left: 5px; top: 45px; }
.empty-orbit i:last-child { left: auto; right: 11px; top: 13px; background: #98ad3f; }
.empty-results h3 { margin: 21px 0 8px; font: 400 21px Georgia,serif; }
.empty-results p { max-width: 300px; margin: 0; color: #92918b; font-size: 9px; line-height: 1.5; }
.generation-progress { max-width: 1050px; margin: 0 auto 17px; padding: 13px 15px; border: 1px solid #d9ddcb; border-radius: 9px; background: #f9faef; }
.progress-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ai-loader { color: #77911e; animation: spin 2s linear infinite; }
.progress-copy > div { min-width: 150px; flex: 1; }
.progress-copy strong, .progress-copy small { display: block; }
.progress-copy strong { font-size: 9px; }
.progress-copy small { margin-top: 2px; color: #888b7d; font-size: 7px; }
.progress-copy > b { color: #6f831e; font-size: 9px; }
.cancel-generation-button { min-height:30px; padding:0 11px; border:1px solid #c9cbbd; border-radius:7px; background:#fff; color:#65645e; font-size:11px; font-weight:700; cursor:pointer; transition:border-color .18s,background .18s,color .18s; }
.cancel-generation-button:hover { border-color:#b26c56; background:#fff7f4; color:#9a4d37; }
.cancel-generation-button:disabled { cursor:wait; opacity:.62; }
.progress-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: #e0e3d4; }
.progress-track i { display: block; width: 18%; height: 100%; border-radius: 3px; background: #8da629; transition: width .35s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.results-grid { max-width: 1050px; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 14px; margin: 0 auto; }
.results-grid.large { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.concept-card { position: relative; min-width: 0; padding: 5px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: background .2s, border .2s, transform .2s; }
.concept-card:hover { transform: translateY(-3px); background: white; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.concept-card.selected { border-color: #819d24; background: white; box-shadow: 0 0 0 1px #819d24, 0 9px 25px rgba(78,95,26,.12); }
.concept-check { position: absolute; z-index: 8; top: 12px; right: 12px; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%; background: var(--lime); color: #2f371d; font-size: 11px; font-weight: 900; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.concept-card.selected .concept-check { display: grid; }
.concept-meta { display: flex; justify-content: space-between; padding: 8px 4px 4px; }
.concept-meta span { font-size: 8px; font-weight: 700; }
.concept-meta small { color: #999892; font-size: 7px; }

/* Generated poster directions */
.poster { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: #5b3325; isolation: isolate; }
.poster.format-story { aspect-ratio: 9 / 16; }
.poster.format-square { aspect-ratio: 1 / 1; }
.poster.api-poster { background: #30271f; }
.poster.api-poster::before, .poster.api-poster::after { display: none !important; }
.generated-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.poster.api-poster .generated-image { object-fit: contain; }
.poster-copy { position: absolute; z-index: 5; inset: 0; padding: 8%; }
.poster-copy small, .poster-copy strong, .poster-copy span { display: block; }
.poster-copy small { font-size: clamp(5px, .52vw, 8px); font-weight: 800; letter-spacing: 1.5px; }
.poster-copy strong { font-size: clamp(14px, 1.65vw, 27px); line-height: .93; }
.poster-copy span { font-size: clamp(5px, .48vw, 8px); }
.poster.api-poster .poster-copy { padding:8% !important; background:linear-gradient(180deg,rgba(10,10,8,.3),transparent 31%,transparent 50%,rgba(10,10,8,.82)); color:white; text-align:left !important; pointer-events:none; }
.poster.api-poster .poster-copy.no-text { background:transparent !important; }
.poster.api-poster .poster-copy small { position:absolute !important; left:8% !important; right:auto !important; top:7% !important; bottom:auto !important; display:block !important; color:white !important; font-family:Arial,sans-serif !important; letter-spacing:1.5px !important; text-align:left !important; text-transform:uppercase !important; writing-mode:horizontal-tb !important; text-shadow:0 1px 5px rgba(0,0,0,.65); }
.poster.api-poster .poster-copy strong { position:absolute !important; left:8% !important; right:8% !important; top:auto !important; bottom:16% !important; width:auto !important; max-width:86% !important; display:block !important; color:white !important; font:500 clamp(15px,1.8vw,29px)/1.02 Georgia,serif !important; letter-spacing:0 !important; text-align:left !important; text-transform:none !important; text-shadow:0 2px 10px rgba(0,0,0,.75); }
.poster.api-poster .poster-copy span { position:absolute !important; left:8% !important; right:auto !important; top:auto !important; bottom:7% !important; display:block !important; padding:5px 8px; border-radius:3px; background:var(--lime); color:#26301b !important; font-family:Arial,sans-serif !important; font-weight:800; letter-spacing:.4px !important; text-align:left !important; text-transform:uppercase !important; writing-mode:horizontal-tb !important; box-shadow:0 2px 8px rgba(0,0,0,.2); }

/* Each API concept follows the copy-zone contract for its internal visual direction. */
.poster.api-poster.poster-1 .poster-copy { background:linear-gradient(90deg,rgba(12,13,12,.88) 0,rgba(12,13,12,.56) 38%,transparent 72%); }
.poster.api-poster.poster-1 .poster-copy small { left:7% !important; top:7% !important; }
.poster.api-poster.poster-1 .poster-copy strong { left:7% !important; right:auto !important; top:35% !important; bottom:auto !important; max-width:42% !important; font:700 clamp(16px,2vw,31px)/.96 Arial,sans-serif !important; }
.poster.api-poster.poster-1 .poster-copy span { left:7% !important; bottom:8% !important; }

.poster.api-poster.poster-2 .poster-copy { background:radial-gradient(circle at 100% 0,rgba(11,12,15,.82),transparent 58%); }
.poster.api-poster.poster-2 .poster-copy small { left:auto !important; right:7% !important; top:7% !important; text-align:right !important; }
.poster.api-poster.poster-2 .poster-copy strong { left:auto !important; right:7% !important; top:14% !important; bottom:auto !important; max-width:55% !important; font:950 clamp(17px,2.3vw,35px)/.87 Arial,sans-serif !important; letter-spacing:-1.2px !important; text-align:right !important; text-transform:uppercase !important; transform:skewY(-2deg); }
.poster.api-poster.poster-2 .poster-copy span { left:auto !important; right:7% !important; top:42% !important; bottom:auto !important; }

.poster.api-poster.poster-3 .poster-copy { background:linear-gradient(180deg,rgba(16,20,27,.86) 0,rgba(16,20,27,.48) 28%,transparent 49%); }
.poster.api-poster.poster-3 .poster-copy small { left:0 !important; right:0 !important; top:5% !important; text-align:center !important; }
.poster.api-poster.poster-3 .poster-copy strong { left:9% !important; right:9% !important; top:10% !important; bottom:auto !important; max-width:none !important; font:800 clamp(15px,1.9vw,29px)/.95 Arial,sans-serif !important; letter-spacing:-.5px !important; text-align:center !important; }
.poster.api-poster.poster-3 .poster-copy span { left:50% !important; right:auto !important; top:28% !important; bottom:auto !important; transform:translateX(-50%); white-space:nowrap; }

.poster.api-poster.poster-4 .poster-copy { background:linear-gradient(0deg,rgba(9,13,19,.92) 0,rgba(9,13,19,.62) 25%,transparent 48%); }
.poster.api-poster.poster-4 .poster-copy small { left:6% !important; top:5% !important; }
.poster.api-poster.poster-4 .poster-copy strong { left:6% !important; right:6% !important; top:auto !important; bottom:13% !important; max-width:none !important; font:900 clamp(15px,2vw,31px)/.9 Arial,sans-serif !important; letter-spacing:-.7px !important; text-align:center !important; text-transform:uppercase !important; }
.poster.api-poster.poster-4 .poster-copy span { left:50% !important; bottom:4% !important; transform:translateX(-50%); white-space:nowrap; }

.poster.api-poster.poster-5 .poster-copy { background:linear-gradient(270deg,rgba(13,10,8,.88) 0,rgba(13,10,8,.5) 37%,transparent 68%); }
.poster.api-poster.poster-5 .poster-copy small { left:auto !important; right:7% !important; top:7% !important; text-align:right !important; }
.poster.api-poster.poster-5 .poster-copy strong { left:auto !important; right:7% !important; top:35% !important; bottom:auto !important; max-width:43% !important; font:italic 500 clamp(15px,1.9vw,29px)/1 Georgia,serif !important; text-align:right !important; }
.poster.api-poster.poster-5 .poster-copy span { left:auto !important; right:7% !important; bottom:8% !important; }

.poster.api-poster.poster-6 .poster-copy { background:linear-gradient(90deg,rgba(12,13,16,.87) 0,rgba(12,13,16,.53) 43%,transparent 67%); }
.poster.api-poster.poster-6 .poster-copy small { left:6% !important; top:6% !important; }
.poster.api-poster.poster-6 .poster-copy strong { left:6% !important; right:auto !important; top:15% !important; bottom:auto !important; max-width:46% !important; font:950 clamp(17px,2.25vw,34px)/.88 Arial,sans-serif !important; letter-spacing:-1px !important; text-transform:uppercase !important; }
.poster.api-poster.poster-6 .poster-copy span { left:6% !important; top:47% !important; bottom:auto !important; }

.poster.api-poster.poster-7 .poster-copy { background:linear-gradient(90deg,rgba(8,16,21,.88) 0,rgba(8,16,21,.58) 32%,transparent 60%); }
.poster.api-poster.poster-7 .poster-copy small { left:6% !important; top:6% !important; }
.poster.api-poster.poster-7 .poster-copy strong { left:6% !important; right:auto !important; top:29% !important; bottom:auto !important; max-width:34% !important; font:600 clamp(15px,1.85vw,28px)/1.02 Georgia,serif !important; }
.poster.api-poster.poster-7 .poster-copy span { left:6% !important; bottom:7% !important; }

.poster.api-poster.poster-8 .poster-copy { background:radial-gradient(circle at 100% 0,rgba(19,11,22,.84),transparent 61%); }
.poster.api-poster.poster-8 .poster-copy small { left:auto !important; right:6% !important; top:6% !important; text-align:right !important; }
.poster.api-poster.poster-8 .poster-copy strong { left:auto !important; right:6% !important; top:14% !important; bottom:auto !important; max-width:48% !important; font:950 clamp(16px,2.2vw,34px)/.86 Arial,sans-serif !important; letter-spacing:-1.2px !important; text-align:right !important; text-transform:uppercase !important; transform:rotate(1.5deg); }
.poster.api-poster.poster-8 .poster-copy span { left:auto !important; right:6% !important; top:46% !important; bottom:auto !important; transform:rotate(-2deg); }

.poster.api-poster.poster-9 .poster-copy { background:linear-gradient(180deg,rgba(7,8,10,.84) 0,rgba(7,8,10,.43) 32%,transparent 54%); }
.poster.api-poster.poster-9 .poster-copy small { left:0 !important; right:0 !important; top:5% !important; text-align:center !important; }
.poster.api-poster.poster-9 .poster-copy strong { left:11% !important; right:11% !important; top:12% !important; bottom:auto !important; max-width:none !important; font:500 clamp(16px,2vw,31px)/.98 Georgia,serif !important; letter-spacing:.2px !important; text-align:center !important; }
.poster.api-poster.poster-9 .poster-copy span { left:50% !important; top:30% !important; bottom:auto !important; transform:translateX(-50%); white-space:nowrap; }

.poster.api-poster.poster-10 .poster-copy { background:radial-gradient(circle at 0 100%,rgba(13,14,11,.9) 0,rgba(13,14,11,.55) 35%,transparent 67%); }
.poster.api-poster.poster-10 .poster-copy small { left:6% !important; top:auto !important; bottom:32% !important; }
.poster.api-poster.poster-10 .poster-copy strong { left:6% !important; right:auto !important; top:auto !important; bottom:14% !important; max-width:50% !important; font:950 clamp(17px,2.3vw,35px)/.88 Arial,sans-serif !important; letter-spacing:-1px !important; text-transform:uppercase !important; }
.poster.api-poster.poster-10 .poster-copy span { left:6% !important; bottom:5% !important; }
.poster-1 { background: linear-gradient(0deg,rgba(27,12,5,.55),transparent 56%), url("assets/kopi-gula-aren.png") center / cover; color: #fff5df; }
.poster-1::after { content:""; position:absolute; z-index:2; width:40%; aspect-ratio:1; border:clamp(7px,1vw,15px) solid var(--lime); border-radius:50%; right:-18%; top:25%; }
.poster-1 .poster-copy strong { position:absolute; left:8%; bottom:19%; font-family:Georgia,serif; font-weight:400; }
.poster-1 .poster-copy span { position:absolute; left:8%; bottom:8%; padding:5px 7px; background:var(--lime); color:#28301d; font-weight:800; text-transform:uppercase; }
.poster-2 { background: #e56743; color: #332119; }
.poster-2::before { content:""; position:absolute; width:72%; height:60%; right:-8%; bottom:-2%; background:url("assets/kopi-gula-aren.png") 48% 80% / cover; border-radius:48% 48% 0 0; filter:saturate(.75); }
.poster-2::after { content:"20%"; position:absolute; left:7%; top:27%; font-size:clamp(35px,5vw,76px); line-height:.7; font-weight:950; letter-spacing:-5px; transform:rotate(-5deg); }
.poster-2 .poster-copy small { position:absolute; left:8%; top:8%; }
.poster-2 .poster-copy strong { position:absolute; left:8%; top:15%; font-size:clamp(9px,1.2vw,18px); text-transform:uppercase; }
.poster-2 .poster-copy span { position:absolute; right:7%; top:8%; writing-mode:vertical-rl; letter-spacing:1px; }
.poster-3 { background: #ece0c7; color:#4d3025; }
.poster-3::before { content:""; position:absolute; width:75%; aspect-ratio:1; left:12.5%; top:22%; border-radius:50%; background:url("assets/kopi-gula-aren.png") center 75% / cover; }
.poster-3::after { content:""; position:absolute; inset:5%; border:1px solid rgba(79,48,36,.35); border-radius:48% 48% 0 0; }
.poster-3 .poster-copy { text-align:center; }
.poster-3 .poster-copy strong { font-family:Georgia,serif; font-style:italic; font-weight:400; }
.poster-3 .poster-copy span { position:absolute; bottom:6.5%; left:0; right:0; letter-spacing:1px; text-transform:uppercase; }
.poster-4 { background:#202820; color:var(--lime); }
.poster-4::before { content:""; position:absolute; inset:26% -8% -12% 18%; background:url("assets/kopi-gula-aren.png") center / cover; transform:rotate(8deg); filter:contrast(1.1); }
.poster-4::after { content:"LOKAL"; position:absolute; z-index:3; left:-3%; top:19%; font-size:clamp(35px,5.4vw,82px); font-weight:950; line-height:1; letter-spacing:-5px; transform:rotate(-90deg) translateX(-75%); transform-origin:left top; -webkit-text-stroke:1px var(--lime); color:transparent; }
.poster-4 .poster-copy strong { position:absolute; right:7%; top:7%; text-align:right; text-transform:uppercase; }
.poster-4 .poster-copy small { position:absolute; right:8%; bottom:7%; }
.poster-4 .poster-copy span { display:none; }
.poster-5 { background:#f6dca9; color:#3b281f; }
.poster-5::before { content:""; position:absolute; width:85%; height:55%; left:7.5%; bottom:5%; background:url("assets/kopi-gula-aren.png") center 72% / cover; clip-path:polygon(50% 0,100% 25%,87% 100%,13% 100%,0 25%); }
.poster-5::after { content:"✦"; position:absolute; right:9%; top:7%; font-size:clamp(20px,2.5vw,37px); color:#d86342; }
.poster-5 .poster-copy strong { font-family:Georgia,serif; font-style:italic; font-weight:400; }
.poster-5 .poster-copy span { margin-top:8px; text-transform:uppercase; letter-spacing:1px; }
.poster-6 { background:linear-gradient(135deg,#f0eee3 0 49.7%,#5b3227 50%); color:#41291f; }
.poster-6::before { content:""; position:absolute; width:52%; height:64%; right:5%; bottom:4%; background:url("assets/kopi-gula-aren.png") center / cover; border-radius:90px 90px 4px 4px; }
.poster-6 .poster-copy strong { max-width:55%; margin-top:14%; font-size:clamp(18px,2.3vw,36px); text-transform:uppercase; font-weight:900; letter-spacing:-2px; }
.poster-6 .poster-copy span { position:absolute; left:8%; bottom:8%; color:#d56343; font-weight:700; }
.poster-7 { background:#9db2a3; color:#213229; }
.poster-7::before { content:""; position:absolute; width:70%; height:60%; left:15%; bottom:9%; background:url("assets/kopi-gula-aren.png") center 76% / cover; border-radius:50% 50% 2px 2px; filter:sepia(.15) saturate(.65); }
.poster-7::after { content:""; position:absolute; z-index:2; inset:4%; border:1px solid #30463a; }
.poster-7 .poster-copy strong { text-align:center; font:italic 400 clamp(15px,1.8vw,29px) Georgia,serif; }
.poster-7 .poster-copy small { position:absolute; left:8%; bottom:6%; }
.poster-7 .poster-copy span { position:absolute; right:8%; bottom:6%; }
.poster-8 { background:#d95e3e; color:#fbe5bd; }
.poster-8::before { content:""; position:absolute; width:76%; height:57%; left:12%; bottom:7%; background:url("assets/kopi-gula-aren.png") center 75% / cover; filter:grayscale(1) contrast(1.15); mix-blend-mode:multiply; }
.poster-8::after { content:"SEDARI\A DULU"; white-space:pre; position:absolute; z-index:3; right:4%; top:17%; font-size:clamp(29px,4.5vw,67px); font-weight:950; line-height:.72; letter-spacing:-4px; text-align:right; }
.poster-8 .poster-copy small { writing-mode:vertical-rl; }
.poster-8 .poster-copy strong { display:none; }
.poster-8 .poster-copy span { position:absolute; left:8%; bottom:6%; text-transform:uppercase; letter-spacing:1px; }
.poster-9 { background:#38241e; color:#f5deb7; }
.poster-9::before { content:""; position:absolute; inset:19% 9% 13%; background:url("assets/kopi-gula-aren.png") center 69% / cover; border-radius:200px 200px 0 0; filter:saturate(.8); }
.poster-9::after { content:""; position:absolute; inset:6%; border:1px solid #b98760; border-radius:50% 50% 0 0; }
.poster-9 .poster-copy { text-align:center; }
.poster-9 .poster-copy strong { font:400 clamp(14px,1.8vw,29px) Georgia,serif; }
.poster-9 .poster-copy span { position:absolute; bottom:5%; left:0; right:0; font-style:italic; }
.poster-10 { background:var(--lime); color:#28311e; }
.poster-10::before { content:""; position:absolute; width:58%; height:56%; right:7%; bottom:7%; background:url("assets/kopi-gula-aren.png") center 72% / cover; clip-path:polygon(0 14%,100% 0,90% 100%,10% 90%); }
.poster-10::after { content:"01\A 02\A 03"; white-space:pre; position:absolute; left:8%; bottom:8%; font-size:clamp(22px,3.2vw,49px); line-height:.78; font-weight:900; color:#e26140; }
.poster-10 .poster-copy strong { width:70%; font-size:clamp(18px,2.6vw,40px); text-transform:uppercase; font-weight:950; letter-spacing:-2px; }
.poster-10 .poster-copy span { position:absolute; right:7%; top:8%; writing-mode:vertical-rl; text-transform:uppercase; }
.poster-10 .poster-copy small { display:none; }
.concept-card.loading .poster { background:#e2e1dc; }
.concept-card.loading .poster::before, .concept-card.loading .poster::after, .concept-card.loading .poster-copy { display:none; }
.concept-card.loading .poster { background:linear-gradient(90deg,#e3e2dd 25%,#eeede9 42%,#e3e2dd 65%); background-size:400% 100%; animation:shimmer 1.4s infinite; }
.concept-card.loading .concept-meta span, .concept-card.loading .concept-meta small { height:7px; border-radius:5px; color:transparent; background:#ddddd7; }
.concept-card.loading .concept-meta span { width:45%; }.concept-card.loading .concept-meta small { width:24%; }
.concept-card.generation-error .poster { background: repeating-linear-gradient(135deg,#deddd7 0 12px,#e8e7e2 12px 24px); }
.concept-card.generation-error .poster::before { content:"!"; position:absolute; inset:0; display:grid; place-items:center; color:#a16c58; font:700 25px Georgia,serif; }
.concept-card.generation-error .poster::after, .concept-card.generation-error .poster-copy { display:none; }
.concept-card.generation-error { cursor: default; opacity: .8; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:0 0; } }

.selection-bar { position:fixed; z-index:25; left:calc(228px + 355px + (100vw - 228px - 355px)/2); bottom:18px; transform:translateX(-50%); width:min(630px, calc(100vw - 620px)); height:64px; display:flex; align-items:center; gap:10px; padding:7px 9px; border:1px solid #d9d8d2; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 15px 45px rgba(0,0,0,.16); backdrop-filter:blur(14px); }
.selected-thumb { width:40px; height:50px; flex:0 0 40px; }
.selected-thumb::before, .selected-thumb::after, .selected-thumb .poster-copy { display:none; }
.selection-copy { flex:1; min-width:0; }
.selection-copy span, .selection-copy strong { display:block; }
.selection-copy span { color:#809822; font-size:6px; font-weight:800; letter-spacing:1px; }
.selection-copy strong { margin-top:3px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selection-bar button { white-space:nowrap; font-size:8px; }
.selection-bar > .icon-button { width:28px; font-size:17px; color:#b91c1c; background:transparent; }

/* Modal, refinement and notifications */
.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(20,20,17,.52); backdrop-filter:blur(5px); }
.modal { position:relative; width:min(100%,485px); padding:34px; border-radius:17px; background:#fbfaf7; box-shadow:0 30px 80px rgba(0,0,0,.25); animation:modal-in .25s ease; }
.modal.delete-library-modal { width:min(100%,465px); color:#f7f2ff; border:1px solid #665080; background:#211838; }
.modal.delete-library-modal > p { color:#d2c6e4; line-height:1.55; }
.delete-library-modal .modal-close { color:#b91c1c; background:transparent; }
#project-modal .modal { max-height:calc(100vh - 40px); overflow:auto; }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.98); } }
.modal-close { position:absolute; right:17px; top:17px; width:30px; height:30px; border-radius:50%;  font-size:18px; color:#b91c1c; background:transparent; }
.modal h2 { margin:9px 0 7px; font:400 29px Georgia,serif; letter-spacing:-1px; }
.modal > p { margin:0 0 26px; color:#7f7e78; font-size:10px; }
.modal form > label { margin-top:15px; }
.category-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.category-option { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid #deddd7; border-radius:9px; background:white; font-size:9px; cursor:pointer; }
.category-option span { width:25px; height:25px; display:grid; place-items:center; border-radius:6px; background:#eeede7; }
.category-option.selected { border-color:#665080; box-shadow:0 0 0 1px #665080; }
.category-option.selected span { background:#e5f1bf; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:25px; }
.modal-actions button { font-size:9px; }
.account-modal { width:min(100%,680px); max-height:calc(100vh - 40px); overflow:auto; }
.all-projects-modal { width:min(1080px,100%); max-height:calc(100vh - 48px); display:flex; flex-direction:column; padding:0; overflow:hidden; }
.all-projects-head { flex:0 0 auto; padding:31px 34px 24px; border-bottom:1px solid var(--line); }
.all-projects-head h2 { margin-top:8px; }
.all-projects-head p { margin:5px 0 0; color:#7f7e78; font-size:13px; }
.all-projects-content { min-height:220px; overflow:auto; padding:25px 34px 34px; }
.all-projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.all-projects-empty { min-height:300px; display:grid; place-items:center; align-content:center; text-align:center; }
.all-projects-empty > span { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#718d14; background:#e5efc5; font-size:20px; }
.all-projects-empty h3 { margin:15px 0 5px; font:400 23px Georgia,serif; }
.all-projects-empty p { max-width:370px; margin:0 0 20px; color:#7f7e78; font-size:13px; line-height:1.55; }
.help-modal { width:min(100%,570px); }
.help-modal > p { max-width:470px; line-height:1.6; }
.help-contacts { display:grid; gap:10px; }
.help-contact-card { min-width:0; display:flex; align-items:center; gap:13px; padding:15px; border:1px solid #deddd7; border-radius:11px; background:white; transition:border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.help-contact-card:hover { transform:translateY(-2px); border-color:#b9c681; background:#fcfff3; box-shadow:0 9px 22px rgba(44,53,29,.08); }
.help-contact-card:focus-visible { outline:3px solid rgba(183,218,70,.32); outline-offset:2px; }
.help-contact-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:#657c19; background:#e8f1cb; }
.help-contact-icon svg { width:19px; height:19px; }
.help-contact-card > span:nth-child(2) { min-width:0; flex:1; }
.help-contact-card small,
.help-contact-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.help-contact-card small { color:#85847d; font-size:12px; }
.help-contact-card strong { margin-top:4px; font-size:15px; }
.help-contact-card > b { color:#738b22; font-size:17px; }
.account-tabs { display:flex; gap:5px; margin:8px 0 24px; padding:5px; border-radius:10px; background:#eeede7; }
.account-tab { flex:1; min-height:38px; border:0; border-radius:7px; color:#6c6b65; background:transparent; font-weight:700; cursor:pointer; }
.account-tab.active { color:var(--ink); background:white; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.account-panel form > label { margin-top:16px; }
.account-panel form > label:first-child { margin-top:0; }
.account-panel input,
.account-panel select { width:100%; height:46px; padding:0 13px; border:1px solid #d8d7d1; border-radius:9px; outline:0; background:white; }
.account-panel input:focus,
.account-panel select:focus { border-color:#96b530; box-shadow:0 0 0 3px rgba(183,218,70,.16); }
.account-panel input[readonly] { color:#77766f; background:#efeee9; }
.account-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.account-field-grid label { margin-bottom:8px; }
.account-field-grid input[type="color"] { padding:6px; cursor:pointer; }
.field-note { margin:8px 0 0; color:#85847d; font-size:12px; line-height:1.5; }
.drawer-scrim { position:fixed; z-index:80; inset:0; background:rgba(20,20,17,.35); backdrop-filter:blur(2px); }
.refine-drawer { position:fixed; z-index:90; top:0; right:0; width:min(390px,100%); height:100vh; overflow:auto; padding:25px; background:#faf9f6; box-shadow:-18px 0 55px rgba(0,0,0,.15); transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.refine-drawer.open { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.drawer-head > div { min-width:0; }
.drawer-head h2 { margin:7px 0 0; font:400 26px Georgia,serif; }
.drawer-head .icon-button { width:40px; height:40px; flex:0 0 40px; border:0; border-radius:50%; color:#b91c1c; background:transparent; }
.drawer-head .icon-button:hover { color:#991b1b; background:transparent; }
.drawer-head .icon-button:focus-visible { outline:3px solid #ffb4b4; outline-offset:3px; }
.drawer-head .icon-button svg { width:20px; height:20px; stroke-width:2.5; }
.drawer-preview { display:grid; place-items:center; margin:25px 0; padding:20px; border-radius:12px; background:#e6e4dd; }
.drawer-preview .poster { width:210px; box-shadow:0 13px 29px rgba(0,0,0,.2); }
.refine-drawer textarea { width:100%; height:105px; resize:none; outline:0; padding:12px; border:1px solid #d8d7d1; border-radius:9px; background:white; font-size:10px; line-height:1.5; }
.refine-drawer textarea:focus { border-color:#95ad35; box-shadow:0 0 0 3px rgba(182,211,81,.15); }
.refine-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.refine-drawer .generate-button { margin-top:22px; }
.toast { position:fixed; z-index:200; right:22px; top:20px; min-width:min(260px,calc(100vw - 44px)); max-width:calc(100vw - 44px); display:flex; align-items:center; gap:11px; padding:12px 15px; border:1px solid #665080; color:#f8f3ff; border-radius:12px; background:#281d43; box-shadow:0 13px 35px rgba(4,2,16,.35); transform:translateY(-120px); opacity:0; transition:.3s ease; overflow-wrap:anywhere; }
.toast.show { transform:translateY(0); opacity:1; }
.toast > span { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%; background:#49316c; color:#e3caff; font-size:14px; }
.toast p { margin:0; }
.toast strong, .toast small { display:block; }
.toast strong { font-size:9px; }.toast small { margin-top:3px; color:#c8badc; font-size:7px; }

/* Readability pass: keep the visual hierarchy, but remove overly tiny UI copy. */
.eyebrow { font-size: 14px; }
.mini-label,
.modal-kicker { font-size: 13px; }
.nav-item { font-size: 16px; }
.soon-badge { font-size: 12px; }
.plan-card strong { font-size: 15px; }
.plan-card > span,
.plan-card button { font-size: 13px; }
.profile-button strong { font-size: 14px; }
.profile-button small { font-size: 12px; }
.profile-button b { font-size: 14px; }
.quick-copy p { font-size: 15px; }
.section-heading > div span,
.section-heading .text-button { font-size: 14px; }
.project-card-body h3 { font-size: 17px; }
.project-meta,
.project-card-actions span { font-size: 13px; }
.tips-strip p { font-size: 14px; }
.workspace-title span { font-size: 13px; }
.workspace-title h1 { font-size: 18px; }
.workspace-actions button { font-size: 14px; }
.save-status { font-size: 13px; }
.step-count { font-size: 13px; }
.prompt-panel-head p,
.results-head p { font-size: 13px; }
.prompt-panel > label { font-size: 15px; }
.prompt-box textarea { font-size: 15px; }
.prompt-meta button { font-size: 13px; }
.prompt-meta span { font-size: 12px; }
.prompt-suggestions span,
.prompt-suggestions button,
.refine-chips button { font-size: 12px; }
.control-title > span { font-size: 15px; }
.control-title button { font-size: 12px; }
.style-option strong { font-size: 14px; }
.style-option small { font-size: 12px; }
.form-row label { font-size: 14px; }
.form-row select { font-size: 13px; }
.quality-control { margin-top:14px; }
.quality-control label { display:block; margin-bottom:7px; font-size:14px; font-weight:700; }
.quality-control select { width:100%; min-height:40px; padding:0 11px; border:1px solid #d7d6cf; border-radius:8px; background:#fff; font-size:13px; }
.quality-control small { display:block; margin-top:6px; color:#85847e; font-size:11px; }
.quality-control option:disabled { color:#aaa; }
.generate-button strong { font-size: 15px; }
.generate-button small { font-size: 12px; }
.private-note { font-size: 12px; }
.empty-results p { font-size: 14px; }
.progress-copy strong { font-size: 14px; }
.progress-copy small { font-size: 12px; }
.progress-copy > b { font-size: 14px; }
.concept-meta span { font-size: 13px; }
.concept-meta small { font-size: 12px; }
.selection-copy span { font-size: 11px; }
.selection-copy strong { font-size: 14px; }
.selection-bar button { font-size: 13px; }
.modal > p { font-size: 15px; }
.category-option { font-size: 14px; }
.modal-actions button { font-size: 14px; }
.refine-drawer textarea { font-size: 15px; }
.toast strong { font-size: 14px; }
.toast small { font-size: 12px; }

/* Authentication copy follows the same +3 px legibility scale. */
.form-heading p { font-size: 16px; }
#login-form > label,
#register-form > label,
.label-row label,
.modal label,
.refine-drawer > label { font-size: 15px; }
.input-wrap input,
.modal input { font-size: 16px; }
.text-button.subtle { font-size: 16px; }
.check-row { font-size: 15px; }
.terms { font-size: 12px; }

/* Inspiration catalog, generation count, logo branding, and plan limits */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; clip-path:inset(50%) !important; }
.inspiration-view { max-width:1280px; margin:0 auto; padding:54px clamp(30px,5vw,72px) 70px; background:#f7f6f2; }
.inspiration-header { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.inspiration-header h1 { margin:13px 0 7px; font:400 clamp(38px,4vw,52px) Georgia,serif; letter-spacing:-2px; }
.inspiration-header p { max-width:680px; margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.inspiration-grid { display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:20px; }
.inspiration-card { overflow:hidden; border:1px solid #deddd7; border-radius:15px; background:#fff; box-shadow:0 4px 15px rgba(35,35,31,.035); }
.inspiration-card .project-preview { height:240px; }
.inspiration-card-body { padding:19px; }
.inspiration-card-body h2 { margin:0; font-size:18px; }
.inspiration-card-body > p { min-height:44px; margin:9px 0 17px; color:#7d7c76; font-size:13px; line-height:1.55; }
.inspiration-card-meta { display:flex; align-items:center; gap:8px; margin-bottom:17px; color:#8c8b85; font-size:12px; }
.inspiration-card-body button { width:100%; justify-content:center; }

.optional-label { margin-left:4px; color:#97968f; font-size:10px; font-weight:500; }
.creation-source-section { margin-top:22px; padding:15px; border:1px solid #deddd7; border-radius:11px; background:#fff; }
.creation-source-section .control-title small { color:#85847e; font-size:11px; }
.creation-mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.creation-mode-option { min-width:0; min-height:62px; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:9px; padding:10px; border:1px solid #deddd7; border-radius:9px; background:#faf9f6; color:#66655f; text-align:left; cursor:pointer; }
.creation-mode-option > span { grid-row:1 / 3; width:34px; height:34px; display:grid; place-items:center; border-radius:7px; background:#eeede8; color:#72871f; font-size:16px; }
.creation-mode-option strong,.creation-mode-option small { min-width:0; display:block; line-height:1.25; }
.creation-mode-option strong { font-size:13px; }
.creation-mode-option small { color:#96958f; font-size:10px; }
.creation-mode-option.selected { border-color:#829b28; background:#f2f7df; box-shadow:0 0 0 1px rgba(130,155,40,.12); }
.creation-mode-option.selected > span { background:#d8ed91; color:#4f6811; }
.source-upload-stack { display:grid; gap:15px; margin-top:12px; }
.source-upload-stack > section,.product-upload-panel,.source-logo-section { min-width:0; }
.source-logo-section > label,.source-upload-title { display:block; margin-bottom:7px; font-size:11px; font-weight:700; }
.source-upload-gallery { display:flex; align-items:stretch; gap:8px; width:100%; overflow-x:auto; padding:2px 2px 7px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.product-image-preview-list,.brand-logo-preview-list { display:flex; gap:8px; flex:0 0 auto; }
.source-upload-tile,.source-image-card { flex:0 0 90px; width:90px; min-height:118px; box-sizing:border-box; border-radius:9px; scroll-snap-align:start; }
.source-upload-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:0; padding:10px 5px; border:1px dashed #bfc4ae; background:#f7f9f0; color:#536b0d; text-align:center; cursor:pointer; }
.source-upload-tile:hover { border-color:#829b28; background:#f0f6df; }
.source-upload-tile.at-capacity { opacity:.55; cursor:not-allowed; }
.source-upload-tile > span { font-size:36px; line-height:1; font-weight:300; }
.source-upload-tile strong { font-size:11px; line-height:1.2; }
.source-image-card { position:relative; display:flex; flex-direction:column; gap:5px; padding:7px; border:1px solid #d7dec0; background:#f4f8e8; }
.source-image-card > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:20px; color:#33420e; font-size:10px; font-weight:800; }
.source-image-card img { display:block; width:100%; height:82px; border-radius:5px; background:#fff; object-fit:cover; }
.brand-logo-preview img { object-fit:contain; }
.source-image-card button[data-remove-product-image],.source-image-card button[data-remove-brand-logo] { position:absolute; top:4px; right:4px; width:21px; height:21px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;   font-size:16px; line-height:1; cursor:pointer; color:#b91c1c; background:transparent; }
.product-model-notice { margin:8px 0 0; padding:8px; border-radius:7px; background:#fff2eb; color:#9c3d20; font-size:10px; line-height:1.4; }
.source-logo-note { margin:5px 0 0; color:#777970; font-size:10px; line-height:1.4; }

.generation-count-section { margin-top:22px; padding-top:20px; border-top:1px solid #e3e2dc; }
.generation-count-section .control-title small { color:#72871f; font-size:12px; font-weight:700; }
.generation-count-section > p { margin:7px 0 11px; color:#85847e; font-size:12px; line-height:1.45; }
.generation-count-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.generation-count-option { position:relative; min-width:0; min-height:62px; display:flex; align-items:center; gap:10px; padding:11px 10px; border:1px solid #deddd7; border-radius:10px; background:#fff; color:#5f5e58; text-align:left; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; }
.generation-count-option:hover { transform:translateY(-1px); border-color:#9aae54; }
.generation-count-option:disabled { cursor:not-allowed; opacity:.62; transform:none; }
.generation-count-option.selected { border-color:#829b28; background:#f2f7df; box-shadow:0 0 0 1px rgba(130,155,40,.13); }
.generation-count-option > b { width:36px; height:36px; display:grid; place-items:center; flex:0 0 36px; border-radius:8px; background:#efeee9; color:#85847e; font-size:14px; }
.generation-count-option.selected > b { background:#d8ed91; color:#4f6811; }
.generation-count-option span { min-width:0; }
.generation-count-option strong,.generation-count-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.generation-count-option strong { font-size:14px; }
.generation-count-option small { margin-top:3px; color:#96958f; font-size:11px; }
.generation-count-option > i { position:absolute; top:5px; right:6px; padding:2px 4px; border-radius:4px; background:#20221b; color:#d9f775; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.05em; }
.agent-picker-section { margin-top:18px; }
.agent-picker-section .control-title { margin-bottom:8px; }
.agent-picker-section .control-title small { color:#72871f; font-size:12px; font-weight:700; }
.agent-dropdown { position:relative; }
.agent-trigger { width:100%; min-height:62px; display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid #d7d6cf; border-radius:10px; background:#fff; color:#34342f; text-align:left; cursor:pointer; transition:border-color .18s,box-shadow .18s; }
.agent-trigger:hover,.agent-trigger[aria-expanded="true"] { border-color:#91a847; box-shadow:0 0 0 3px rgba(145,168,71,.12); }
.agent-trigger:disabled,.agent-option:disabled { cursor:not-allowed; opacity:.58; }
.agent-trigger > .agent-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:9px; background:#edf6c9; color:#607616; font-size:16px; }
.agent-trigger > span:nth-child(2) { min-width:0; flex:1; }
.agent-trigger strong,.agent-trigger small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-trigger strong { font-size:14px; }
.agent-trigger small { margin-top:3px; color:#85847e; font-size:11px; }
.agent-trigger > b { color:#77766f; font-size:18px; transition:transform .18s; }
.agent-trigger[aria-expanded="true"] > b { transform:rotate(180deg); }
.agent-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; display:grid; gap:5px; padding:6px; border:1px solid #deddd7; border-radius:11px; background:#fff; box-shadow:0 14px 34px rgba(30,31,25,.16); }
.agent-option { display:flex; align-items:center; gap:9px; width:100%; min-height:58px; padding:9px 10px; border:0; border-radius:8px; background:#fff; color:#4b4a45; text-align:left; cursor:pointer; }
.agent-option:hover { background:#f5f7ed; }
.agent-option.selected { background:#eff5dc; color:#33420e; }
.agent-option > span:first-child { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:8px; background:#efeee9; font-size:15px; }
.agent-option.selected > span:first-child { background:#d8ed91; }
.agent-option > span:nth-child(2) { min-width:0; flex:1; }
.agent-option strong,.agent-option small { display:block; }
.agent-option strong { font-size:13px; }
.agent-option small { margin-top:3px; color:#909089; font-size:10px; }
.agent-option > b { visibility:hidden; color:#63791c; }
.agent-option.selected > b { visibility:visible; }
.agent-option > i { padding:2px 4px; border-radius:4px; background:#20221b; color:#d9f775; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.05em; }
.agent-option.locked { opacity:.68; }
.poster-brand-logo { position:absolute; z-index:7; right:auto; box-sizing:border-box; display:flex; align-items:center; justify-content:center; max-height:18%; padding:clamp(2px,.45vw,7px); overflow:hidden; border:1px solid transparent; border-radius:clamp(3px,.45vw,7px); background:transparent; box-shadow:none; backdrop-filter:blur(0); pointer-events:auto; transition:background-color .2s,border-color .2s,box-shadow .2s,backdrop-filter .2s; }
.poster-brand-logo > img { display:block; width:100%; height:auto; max-height:100%; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.28)); pointer-events:none; }
.poster-brand-logo[data-logo-plate="pending"],
.poster-brand-logo[data-logo-plate="light"] { border-color:rgba(20,25,30,.2); background:#fff; box-shadow:0 3px 14px rgba(10,15,20,.24); }
.poster-brand-logo[data-logo-plate="dark"] { border-color:rgba(255,255,255,.35); background:#101419; box-shadow:0 3px 14px rgba(0,0,0,.4); }
.poster-brand-logo[data-logo-busy="true"] { box-shadow:0 4px 18px rgba(0,0,0,.42); }
.poster-brand-logo[data-logo-plate="none"][data-logo-surface="dark"] > img { filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.poster-brand-logo[data-logo-plate="none"][data-logo-surface="light"] > img { filter:drop-shadow(0 1px 2px rgba(255,255,255,.8)) drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.poster-brand-logo.draggable { cursor:grab; touch-action:none; user-select:none; outline:1px dashed transparent; outline-offset:4px; }
.poster-brand-logo.draggable:hover { outline-color:rgba(255,255,255,.75); }
.poster-brand-logo.dragging { cursor:grabbing; outline-color:var(--lime); }
.poster-brand-logo.resizing { outline-color:var(--lime); }
.logo-resize-handle { position:absolute; right:2px; bottom:2px; width:clamp(9px,1.2vw,16px); height:clamp(9px,1.2vw,16px); border:1px solid rgba(255,255,255,.9); border-radius:50%; background:#718b1c; box-shadow:0 1px 5px rgba(0,0,0,.35); cursor:nwse-resize; touch-action:none; }
.logo-resize-handle::after { content:'↘'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:clamp(6px,.7vw,9px); line-height:1; }

.library-preview-modal { width:min(1180px,calc(100vw - 34px)); max-height:calc(100vh - 34px); overflow:hidden; border-radius:18px; background:#f8f7f2; box-shadow:0 30px 90px rgba(0,0,0,.35); animation:modal-in .25s ease; }
.library-preview-head { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; border-bottom:1px solid #deddd7; background:#fbfaf7; }
.library-preview-head h2 { margin:3px 0 0; font:400 23px Georgia,serif; }
.library-preview-head p { margin:3px 0 0; color:#8c8b85; font-size:12px; }
.library-preview-head .icon-button { width:34px; height:34px; flex:0 0 34px; border-radius:50%;  font-size:21px; color:#b91c1c; background:transparent; }
.library-preview-body { height:min(760px,calc(100vh - 112px)); display:grid; grid-template-columns:minmax(0,1fr) 265px; }
.library-preview-stage { min-width:0; overflow:auto; display:grid; place-items:center; padding:42px; background:radial-gradient(circle at 50% 35%,#efeee9,#d8d6cf); }
#library-preview-poster-shell { width:min(540px,70vh); transform-origin:center; transition:transform .16s ease; }
#library-preview-poster { width:100%; box-shadow:0 18px 50px rgba(28,27,23,.26); }
#library-preview-poster.api-poster .poster-copy { background:none !important; }
.grading-panel { overflow:auto; padding:23px 20px; border-left:1px solid #deddd7; background:#fbfaf7; }
.zoom-control-head,.grading-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.zoom-control-head strong,.grading-title strong { font-size:14px; }
.zoom-control-head output,.grading-title small { color:#83827c; font-size:10px; }
.zoom-controls { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:7px; margin-bottom:24px; }
.zoom-controls button { width:34px; height:34px; border:1px solid #d8d7d1; border-radius:8px; background:#fff; font-size:18px; cursor:pointer; }
.zoom-controls input { width:100%; accent-color:#7b941f; }
.grading-title { padding-top:20px; border-top:1px solid #e2e1dc; }
.grading-panel > label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:17px 0 5px; color:#55544f; font-size:11px; font-weight:700; }
.grading-panel > label output { color:#7b941f; font-variant-numeric:tabular-nums; }
.grading-panel > input[type="range"] { width:100%; accent-color:#7b941f; }
.grading-panel > button { width:100%; justify-content:center; margin-top:10px; }
.grading-panel > #reset-color-grade { margin-top:25px; }

.design-result-edit { margin:0 12px 12px; }.library-card-actions .library-design-edit { grid-column:1/-1; }

/* Project creation and the library notice share the studio's dark palette. */
#project-modal .modal { color:var(--studio-text,#f7f3ff); border:1px solid var(--studio-border,#3e3355); background:var(--studio-panel,#1b1530); max-height:calc(100dvh - 40px); }
#project-modal .modal-kicker { color:var(--studio-accent,#bb9bff); }
#project-modal h2 { padding-right:20px; font:700 27px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:-.8px; }
#project-modal .modal > p { color:var(--studio-muted,#b6abc9); font-size:13px; line-height:1.7; }
#project-modal label { color:#eee4ff; font-size:13px; }
#project-modal input { color:var(--studio-text,#f7f3ff); border-color:#5b476f; background:var(--studio-raised,#251d3e); }
#project-modal input::placeholder { color:#b0a0c1; }
#project-modal input:focus { border-color:var(--studio-accent,#bb9bff); box-shadow:0 0 0 3px #bb9bff24; }
#project-modal input:focus-visible { outline:2px solid var(--studio-focus,#d5bdff); outline-offset:2px; }
#project-modal .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#project-modal .category-option { min-height:46px; color:#eee4ff; border-color:#514063; background:var(--studio-raised,#251d3e); font-size:13px; line-height:1.5; text-align:left; }
#project-modal .category-option:hover { border-color:#ab87d8; background:#342546; }
#project-modal .category-option span { flex:0 0 25px; color:#d5bdff; background:#3a2c4d; }
#project-modal .category-option.selected { color:#fff; border-color:var(--studio-accent,#bb9bff); background:#39274f; box-shadow:0 0 0 1px var(--studio-accent,#bb9bff); }
#project-modal .category-option.selected span { color:#fff; background:#614080; }
#project-modal .modal-close { color:#b91c1c; background:transparent; }
#project-modal .modal-close:hover { color:#991b1b; background:transparent; }
#project-modal .secondary-button { color:#eee4ff; border-color:#665080; background:#302440; }
#project-modal .secondary-button:hover { color:#fff; border-color:#ab87d8; background:#47315e; }
.library-lock-note > span { color:#dfc8ff; background:#49316c; }

.modal.upgrade-modal { width:min(100%,680px); max-height:calc(100svh - 32px); overflow-y:auto; color:#f7f2ff; border:1px solid #665080; background:radial-gradient(circle at 100% 0,rgba(146,95,224,.2),transparent 50%),#211838; box-shadow:0 28px 90px rgba(4,2,16,.5); }
.upgrade-modal .modal-kicker { color:#c9a6ff; }
.upgrade-modal h2 { padding-right:20px; font-family:"Segoe UI",Arial,sans-serif; font-weight:750; letter-spacing:-.04em; }
.upgrade-modal > p,.upgrade-modal .field-note { color:#d2c6e4; }
.upgrade-modal .modal-close { width:36px; height:36px; color:#b91c1c; background:transparent; }
.upgrade-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.upgrade-comparison > div { display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid #51416d; border-radius:14px; background:#281e40; }
.upgrade-comparison > div.featured { border-color:#ae88f4; background:linear-gradient(145deg,#483067,#30224e); }
.upgrade-comparison small { color:#d4b6ff; font-size:11px; font-weight:800; letter-spacing:.8px; }
.upgrade-comparison strong { margin-bottom:4px; color:#fff7ff; font-size:19px; font-weight:700; }
.upgrade-comparison span { color:#ddd2ee; font-size:13px; line-height:1.5; }
.upgrade-comparison span::before { content:'✓'; margin-right:7px; color:#d6b4ff; font-weight:800; }
.upgrade-modal .field-note { margin:16px 0 0; }
.upgrade-modal .upgrade-message { white-space:pre-line; line-height:1.55; }

/* Responsive */
@media (max-width: 1050px) {
  .auth-screen { grid-template-columns: 1fr 1fr; }
  .auth-visual { padding-inline: 40px; }
  .auth-art { transform: scale(.9); transform-origin: left top; }
  .sidebar { width: 205px; }
  .app-main { width: calc(100% - 205px); margin-left:205px; }
  .quick-start { grid-template-columns: 1fr 1fr; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .library-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .inspiration-grid { grid-template-columns:repeat(2,minmax(210px,1fr)); }
  .project-card:nth-child(3) { display:none; }
  .all-projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .all-projects-grid .project-card:nth-child(3) { display:block; }
  .workspace-body { grid-template-columns:325px minmax(0,1fr); }
  .results-grid { grid-template-columns:repeat(2,minmax(150px,1fr)); }
  .selection-bar { left:calc(205px + 325px + (100vw - 205px - 325px)/2); width:min(550px,calc(100vw - 555px)); }
}
@media (max-width: 820px) {
  .auth-screen { display:block; min-height:100vh; }
  .auth-visual { display:none; }
  .auth-panel { min-height:100vh; padding:35px 25px; }
  .mobile-brand { display:inline-flex; }
  .sidebar { transform:translateX(-105%); width:230px; transition:transform .25s ease; box-shadow:14px 0 40px rgba(0,0,0,.12); }
  .sidebar.mobile-open { transform:translateX(0); }
  .app-main { width:100%; margin-left:0; }
  .mobile-header { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); background:#faf9f6; }
  .mobile-header .brand { font-size:18px; }
  .mobile-header .brand-mark { transform:scale(.82); }
  .mini-avatar { width:29px; height:29px; border:0; font-size:8px; }
  .dashboard-view { padding:35px 22px 45px; }
  .library-view { padding: 35px 22px 50px; }
  .inspiration-view { padding:35px 22px 50px; }
  .inspiration-header { align-items:flex-start; flex-direction:column; }
  .library-header { align-items: flex-start; flex-direction: column; }
  .library-lock-note { min-width: 0; width: 100%; }
  .quick-start { height:280px; }
  .quick-copy { padding:34px 28px; }
  .quick-visual { overflow:hidden; }
  .card-a { left:5%; }.card-b { left:45%; }.card-c { display:none; }
  .workspace-view { height:auto; min-height:calc(100vh - 60px); overflow:visible; }
  .workspace-header { position:sticky; z-index:20; top:60px; height:60px; padding:0 14px; }
  .workspace-title span, .save-status, .workspace-actions .secondary-button { display:none; }
  .workspace-actions .dark-button { font-size:8px; padding:8px 10px; }
  .workspace-body { height:auto; display:block; }
  .prompt-panel { overflow:visible; padding:24px 22px; border-right:0; border-bottom:1px solid var(--line); }
  .results-panel { overflow:visible; min-height:600px; padding:24px 20px 110px; }
  .results-grid { grid-template-columns:repeat(2,minmax(130px,1fr)); }
  .selection-bar { left:12px; right:12px; bottom:12px; transform:none; width:auto; }
  .selection-bar .selection-copy { display:none; }
  .selection-bar .secondary-button, .selection-bar .dark-button { flex:1; }
  .library-preview-body { height:calc(100vh - 102px); display:block; overflow:auto; }
  .library-preview-stage { min-height:65vh; padding:30px; }
  .grading-panel { border-top:1px solid #deddd7; border-left:0; }
  #library-preview-poster-shell { width:min(520px,78vw); }
}
@media (max-width: 600px) {
  .account-modal { padding:28px 22px; }
  .help-modal { padding:29px 22px 24px; }
  .help-contact-card { padding:13px; }
  .all-projects-modal { max-height:calc(100vh - 24px); }
  .all-projects-head { padding:27px 22px 20px; }
  .all-projects-content { padding:19px 22px 25px; }
  .all-projects-grid { grid-template-columns:1fr; }
  .account-field-grid { grid-template-columns:1fr; gap:16px; }
  .dashboard-header { align-items:flex-start; }
  .dashboard-header h1 { font-size:38px; }
  .dashboard-header .primary-button { width:43px; height:43px; padding:0; font-size:0; }
  .dashboard-header .primary-button span { font-size:20px; }
  .quick-start { height:auto; display:block; }
  .quick-copy { padding:31px 27px 27px; }
  .quick-visual { height:185px; }
  .idea-card { width:110px; height:145px; }
  .card-a { left:20%; top:14px; }.card-b { left:50%; top:10px; }
  .project-grid { grid-template-columns:1fr; }
  .library-grid { grid-template-columns: 1fr; }
  .inspiration-grid { grid-template-columns:1fr; }
  .upgrade-comparison { grid-template-columns:1fr; }
  .library-heading { align-items: flex-start; gap: 15px; }
  .library-heading .secondary-button { padding-inline: 10px; }
  .project-card:nth-child(3) { display:block; }
  .project-preview { height:220px; }
  .section-heading { margin-top:30px; }
  .tips-strip { align-items:flex-start; }
  .workspace-title h1 { max-width:165px; }
  .results-panel { padding-inline:14px; }
  .results-head h2 { font-size:17px; }
  .view-toggles { display:none; }
  .results-grid { gap:7px; }
  .concept-card { padding:3px; }
  .concept-meta { display:block; padding:7px 3px 4px; }
  .concept-meta small { display:block; margin-top:3px; }
  .poster-copy small { font-size:5px; }.poster-copy strong { font-size:14px; }.poster-copy span { font-size:5px; }
  .selection-bar { gap:6px; }
  .selected-thumb { width:34px; height:43px; flex-basis:34px; }
  .selection-bar button { padding:8px 9px; }
  .modal { padding:28px 20px 22px; }
  .category-grid { grid-template-columns:1fr; }
  .library-preview-modal { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .library-preview-head { min-height:70px; padding:13px 15px; }
  .library-preview-stage { min-height:55vh; padding:22px; }
  .library-card-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-card-actions .library-edit { grid-column:1/-1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Pixgin's dark, gridded creative studio theme. */
:root {
  --ink:#211b32;
  --muted:#79718d;
  --paper:#f4f1fb;
  --panel:#fcfaff;
  --line:#ded8ed;
  --lime:#aa82fa;
  --lime-dark:#c3a2ff;
  --shadow:0 22px 52px rgba(32,20,74,.12);
}
body { background:var(--paper); }
.brand-mark i:first-child { background:#9571f4; }
.brand-mark i:last-child { background:#e493ed; }
.primary-button,.generate-button { background:linear-gradient(110deg,#8e6cf2,#dc8eeb 62%,#8bbcff); color:#fff; box-shadow:0 10px 24px rgba(116,76,205,.18); }
.primary-button:hover,.generate-button:hover { background:linear-gradient(110deg,#a384ff,#e8a4f3 62%,#a8cbff); box-shadow:0 13px 28px rgba(116,76,205,.27); }
.primary-button span,.generate-button small { color:#fff; }
.dark-button,.side-create { background:#281b4d; color:#fff; }
.dark-button:hover,.side-create:hover { background:#38255f; }
.text-button,.mini-label,.modal-kicker,.prompt-meta button { color:#7654c3; }

.auth-screen { background:#0c0922; grid-template-columns:minmax(490px,1.12fr) minmax(400px,.88fr); }
.auth-visual { overflow:hidden; background:
  radial-gradient(circle at 76% 58%,rgba(107,56,177,.31),transparent 42%),
  linear-gradient(rgba(164,139,238,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(164,139,238,.045) 1px,transparent 1px),
  #0c0922; background-size:auto,70px 70px,70px 70px,auto; }
.auth-visual::before { width:560px; height:560px; right:-210px; top:26%; border:1px solid rgba(183,150,255,.15); background:transparent; box-shadow:0 0 0 70px rgba(171,128,253,.025),0 0 0 145px rgba(171,128,253,.018); }
.auth-copy { margin-top:clamp(90px,13vh,150px); }
.auth-copy h1 { margin:22px 0 25px; font:900 clamp(52px,5.7vw,100px)/.96 "Segoe UI",Arial,sans-serif; letter-spacing:-.075em; text-transform:uppercase; }
.auth-copy h1 em { font-style:normal; background:linear-gradient(105deg,#9c79ff,#eda4e9 58%,#8cbdff); color:transparent; -webkit-background-clip:text; background-clip:text; }
.auth-copy p { color:#b6aece; font-size:15px; }
.eyebrow-light { color:#cbbaf7; }
.auth-art { margin-top:30px; }
.auth-art::before { content:""; position:absolute; width:410px; height:260px; left:22%; top:2%; border:1px solid rgba(191,151,255,.19); border-radius:50%; transform:rotate(-22deg); }
.auth-poster { border:1px solid rgba(234,208,255,.37); box-shadow:0 28px 60px rgba(7,3,24,.55); }
.poster-photo::after { border-color:#a177f8; }
.poster-type { background:linear-gradient(155deg,#f29fdd,#9f7aff 72%,#7eb8ff); color:#231342; }
.float-tag { color:#e9ddff; background:#251846; border:1px solid rgba(208,172,255,.35); }
.float-tag span,.avatar-dots { color:#dcb3ff; }
.avatar-dots { background:#56398b; }
.auth-footnote { color:#9d91bd; letter-spacing:.12em; text-transform:uppercase; font-size:10px; }
.auth-panel { border-left:1px solid rgba(186,158,250,.12); background:radial-gradient(circle at 100% 0,rgba(106,64,164,.16),transparent 43%),#100c29; color:#f6f2ff; }
.auth-form-wrap { width:min(100%,450px); padding:32px; border:1px solid rgba(183,148,251,.19); border-radius:22px; background:rgba(34,26,64,.65); box-shadow:0 24px 70px rgba(4,2,16,.19); }
.auth-submit { margin-top:22px; }
.form-heading h2 { font-family:"Segoe UI",Arial,sans-serif; font-weight:700; letter-spacing:-1.8px; }
.form-heading p,.check-row,.terms { color:#aaa0c4; }
.auth-panel .text-button.subtle { color:#c4b4de; }
.input-wrap input { color:#f9f5ff; border-color:#51416e; background:#211936; }
.input-wrap input::placeholder { color:#9f95b3; }
.input-wrap input:focus { border-color:#aa82fa; box-shadow:0 0 0 3px rgba(170,130,250,.2); }
.input-wrap > svg,.eye-button { color:#b8a8d2; }
.auth-error { color:#ffc8bb; background:#432438; border-color:#9b5262; }
.verification-status { margin:12px 0 0; color:#c8badc; font-size:13px; line-height:1.6; }
#verification-form > label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; }
#verification-code { padding-inline:14px; letter-spacing:.15em; font-size:18px; }
#verification-email { overflow-wrap:anywhere; color:#e6d5ff; }
.verification-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:18px; }
.verification-actions .text-button { color:#d0afff; font-size:13px; padding-block:6px; }
.verification-actions .text-button:disabled { color:#aaa0c4; cursor:wait; }
.terms a { color:#c8acff; }

.app-shell { background:#f4f1fb; }
.sidebar { color:#f7f2ff; border-color:#352952; background:radial-gradient(circle at -30% 0,rgba(136,83,213,.18),transparent 55%),#120e2b; }
.sidebar .brand { color:#f8f3ff; }
.sidebar .nav-item { color:#aaa0c7; }
.sidebar .nav-item:hover,.sidebar .nav-item.active { color:#fff; background:#2b214b; }
.sidebar .nav-item.active::before { background:#be94ff; }
.sidebar .side-create { width:100%; margin-left:0; background:linear-gradient(100deg,#8e6cf2,#ca83e9); }
.sidebar .side-create span { color:#fff; }
.sidebar .nav-count,.sidebar .soon-badge { color:#e4d6ff; background:#372858; }
.sidebar .plan-card { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:8px; align-items:center; align-content:start; height:auto; min-height:0; flex:0 0 auto; border:1px solid #4a356d; background:linear-gradient(145deg,#312153,#21183e); }
.sidebar .plan-card > span,.sidebar .plan-progress,.sidebar .plan-card button { grid-column:1/-1; }
.sidebar .plan-icon,.sidebar .plan-card button { color:#d1adff; }
.sidebar .plan-progress { background:#584573; }
.sidebar .plan-progress i { background:linear-gradient(90deg,#8e6cf2,#eca1ea); }
.sidebar .profile-button { border-color:#40345b; color:#f6f1ff; }
.sidebar .profile-button:hover,.sidebar .profile-button.menu-open { background:#2b214b; }
.sidebar .profile-button small { color:#a99fc2; }
.avatar,.account-mini-avatar { background:#966fea; }
.app-main { background:radial-gradient(circle at 95% 0,rgba(191,157,253,.13),transparent 38%),#f4f1fb; }
.dashboard-view,.library-view,.inspiration-view { background:transparent; }
.dashboard-header h1,.library-header h1,.section-heading h2,.library-heading h2 { font-family:"Segoe UI",Arial,sans-serif; font-weight:750; letter-spacing:-.055em; }
.quick-start { background:radial-gradient(circle at 75% 48%,rgba(173,103,237,.3),transparent 47%),linear-gradient(135deg,#17112f,#2f1e58); border:1px solid #4a386a; }
.quick-copy h2 { font-family:"Segoe UI",Arial,sans-serif; font-weight:750; }
.quick-copy p { color:#c9c0df; }
.quick-visual::before { border-color:rgba(219,174,255,.22); box-shadow:0 0 0 65px rgba(182,116,249,.045),0 0 0 130px rgba(182,116,249,.025); }
.card-a { background:#af8aff; color:#291448; }
.card-b { background:#e99ad8; color:#321949; }
.card-c { background:#b3cbff; color:#24335c; }
.project-card,.library-card,.inspiration-card { border-color:#e5def2; box-shadow:0 7px 22px rgba(49,32,95,.04); }
.tips-strip,.library-lock-note { background:#eee8fb; border-color:#dfd3f5; }
.tip-icon,.library-empty-icon { color:#6b48bd; background:#dfcff9; }
.library-empty { background:#fcfaff; border-color:#d9cff0; }
.workspace-header { color:#f7f3ff; border-color:#3c2b62; background:#17112f; }
.workspace-title span,.workspace-title span b,.save-status { color:#bcb0d7; }
.workspace-header .back-button { color:#f7f3ff; border-color:#514170; }
.workspace-view { background:#eae4f6; }
.prompt-panel { border-color:#ded6ef; background:#fbfaff; }
.prompt-box:focus-within { border-color:#a981f5; box-shadow:0 0 0 3px rgba(169,129,245,.19); }
.step-count { color:#653eaf; background:#e8dcff; }
.creation-mode-option.selected,.generation-count-option.selected { color:#543586; border-color:#9c75e7; background:#f1e9ff; box-shadow:0 0 0 1px rgba(156,117,231,.12); }
.creation-mode-option.selected > span,.generation-count-option.selected > b { color:#5d3a9c; background:#e3d0ff; }
.source-upload-tile { color:#6646ac; border-color:#bea8e9; background:#f7f2ff; }
.source-upload-tile:hover { border-color:#9973e6; background:#eee4ff; }
.source-image-card { border-color:#dacbf2; background:#f3edff; }
.source-image-card > span { color:#4c3481; }
.agent-option.selected { color:#4e307f; background:#f0e7ff; }
.agent-option.selected > span:first-child { background:#e1ceff; }
.results-panel { color:#f6f2ff; background:radial-gradient(circle at 76% 24%,rgba(141,93,225,.18),transparent 41%),#140f2b; }
.results-head p,.empty-results p,.concept-meta small { color:#b5aacb; }
.empty-orbit { color:#d5aaff; border-color:#74608f; }
.empty-orbit::before { background:#39275d; }
.empty-orbit i { background:#eaa0e0; }
.empty-orbit i:last-child { background:#91b7ff; }
.concept-card:hover,.concept-card.selected { background:#2c204a; }
.concept-card.selected { border-color:#b48af5; box-shadow:0 0 0 1px #b48af5,0 10px 26px rgba(10,5,27,.3); }
.concept-check { color:#fff; background:#916be4; }
.generation-progress { color:#3b2b59; background:#f3edff; border-color:#cdb9ef; }
.progress-track i { background:linear-gradient(90deg,#8d6aed,#e694e2); }
.view-toggles { border-color:#62517e; background:#2c204a; }
.view-toggles button.active { color:#fff; background:#6d4baa; }
.poster.api-poster { background:#211a39; }
.library-preview-stage { background:radial-gradient(circle at 50% 34%,#eae0fa,#cfc0e9); }

@media (max-width:900px) {
  .auth-panel { min-height:100vh; border:0; }
  .auth-form-wrap { border-radius:16px; }
  .mobile-brand { color:#f7f2ff; }
}
@media (max-width:560px) {
  .auth-panel { padding:22px; }
  .auth-form-wrap { padding:26px 20px; }
}

/* Full-width creative studio layout: editorial hero, orbit artwork, top navigation. */
.auth-screen { display:block; position:relative; min-height:100vh; }
.auth-visual { min-height:100vh; padding:0; overflow:hidden; }
.auth-visual > .brand { position:absolute; z-index:3; top:43px; left:clamp(30px,8vw,160px); }
.auth-header-actions { position:absolute; z-index:3; top:40px; right:clamp(30px,8vw,160px); display:flex; align-items:center; gap:18px; }
.auth-live-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(174,146,240,.2); border-radius:30px; color:#c5b8dc; background:rgba(35,27,64,.7); font-size:10px; font-weight:800; letter-spacing:.15em; }
.auth-live-badge i { width:7px; height:7px; border-radius:50%; background:#b78afb; box-shadow:0 0 0 5px rgba(183,138,251,.13); }
.auth-header-actions button { min-height:37px; padding:0 16px; border:1px solid rgba(190,163,255,.46); border-radius:24px; color:#f5edff; background:rgba(112,73,181,.16); font-size:12px; font-weight:700; cursor:pointer; }
.auth-header-actions button:hover { background:rgba(142,98,213,.3); }
.auth-header-actions button span { margin-left:12px; color:#dba7ff; }
.auth-copy { position:absolute; top:clamp(180px,26vh,280px); left:clamp(30px,8vw,160px); width:min(51vw,800px); max-width:none; margin:0; }
.auth-copy h1 { font-size:clamp(60px,6.35vw,118px); line-height:.96; letter-spacing:-.08em; }
.auth-copy p { max-width:490px; font-size:16px; line-height:1.7; }
.auth-signature { display:block; margin-top:27px; padding-top:23px; border-top:1px solid rgba(189,164,245,.3); width:max-content; max-width:100%; color:#a89cc3; font-size:10px; font-weight:750; letter-spacing:.2em; }
.hero-entry-button { display:inline-flex; align-items:center; justify-content:space-between; gap:42px; min-height:54px; margin-top:31px; padding:0 22px; border:0; border-radius:10px; color:#22113e; background:linear-gradient(105deg,#a68bff,#eba4df 58%,#9ccaff); font-size:14px; font-weight:850; cursor:pointer; box-shadow:0 13px 36px rgba(115,70,212,.25); transition:transform .2s,box-shadow .2s; }
.hero-entry-button:hover { transform:translateY(-3px); box-shadow:0 18px 43px rgba(115,70,212,.35); }
.hero-entry-button span { font-size:20px; font-weight:500; }
.auth-art { position:absolute; top:21vh; right:6%; width:43vw; max-width:none; height:58vh; min-height:410px; margin:0; transform:none; }
.auth-art::before { display:none; }
.art-orbit { position:absolute; inset:7% 2%; border:1px solid rgba(186,151,255,.16); border-radius:50%; transform:rotate(-17deg); }
.art-orbit-inner { inset:21% 12%; border-color:rgba(186,151,255,.11); transform:rotate(21deg); }
.art-ribbon { position:absolute; z-index:1; width:100%; height:100%; filter:drop-shadow(0 0 32px rgba(142,100,247,.16)); }
.art-pixel { position:absolute; z-index:2; width:15px; height:15px; border-radius:4px; background:#a986fb; box-shadow:0 0 21px rgba(170,137,251,.55); }
.art-pixel-one { left:7%; top:24%; }.art-pixel-two { right:5%; bottom:23%; width:11px; height:11px; background:#e9a1e3; }.art-pixel-three { left:15%; bottom:20%; width:7px; height:7px; background:#9cc3ff; }
.art-caption { position:absolute; right:8%; bottom:0; color:#a59abb; font-size:9px; font-weight:800; letter-spacing:.23em; }
.auth-footnote { right:clamp(30px,8vw,160px); width:auto; padding-top:22px; border-top:1px solid rgba(182,152,243,.15); }
.auth-footnote span { float:right; margin-left:35vw; }
.auth-panel { position:fixed; z-index:160; inset:0; display:grid; place-items:center; min-height:0; padding:20px; border:0; background:rgba(5,3,17,.78); backdrop-filter:blur(14px); }
.auth-form-wrap { position:relative; width:min(100%,470px); max-height:calc(100vh - 40px); overflow:auto; padding:38px; border-radius:20px; background:#1b1435; box-shadow:0 35px 100px rgba(0,0,0,.48); }
.auth-panel-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:50%;   font-size:22px; line-height:1; cursor:pointer; color:#b91c1c; background:transparent; }
.auth-panel-close:hover { background:transparent; }

@media (min-width:821px) {
  .sidebar { inset:0 auto 0 0; width:248px; height:100vh; flex-direction:column; align-items:stretch; gap:0; overflow-y:auto; padding:0; border-right:1px solid rgba(185,155,250,.23); border-bottom:0; box-shadow:12px 0 32px rgba(4,2,15,.18); }
  .sidebar-top { display:block; flex:0 0 auto; padding:29px 19px 32px; }
  .sidebar-top .brand { display:inline-flex; margin:0 0 0 8px; font-size:23px; }
  .sidebar .side-create { width:100%; min-width:0; height:48px; margin:30px 0 0; padding:0 14px; font-size:14px; }
  .sidebar .side-create span { font-size:21px; }
  .side-nav { display:grid; gap:10px; padding:0 13px; }
  .sidebar .nav-item { width:100%; min-height:48px; height:auto; padding:11px 13px; white-space:normal; font-size:14px; }
  .sidebar .nav-item.active::before { width:3px; height:23px; left:0; right:auto; top:50%; bottom:auto; transform:translateY(-50%); }
  .sidebar .nav-item svg { width:20px; height:20px; flex:0 0 20px; }
  .sidebar .nav-count { min-width:25px; height:25px; font-size:12px; }
  .sidebar .soon-badge { font-size:9px; }
  .side-spacer { flex:1 0 24px; min-width:0; }
  .sidebar .plan-card { width:auto; flex:0 0 auto; margin:16px 13px 12px; padding:13px 14px 10px; border-color:#7454ac; background:linear-gradient(145deg,#442a75,#2c1e52); box-shadow:0 12px 28px rgba(5,2,22,.24); }
  .sidebar .plan-icon { display:block; margin:0; color:#dcabff; font-size:20px; line-height:1; }
  .sidebar .plan-card strong { font-size:17px; line-height:1.2; }
  .sidebar .plan-card > span { margin-top:7px; color:#e0d3f1; font-size:12px; line-height:1.35; }
  .sidebar .plan-progress { height:6px; margin:9px 0 4px; background:#62487e; }
  .sidebar .plan-card button { display:inline-flex; justify-self:start; min-height:28px; align-items:center; color:#eed4ff; font-size:13px; }
  .sidebar-bottom { flex:0 0 auto; padding:0 13px 17px; }
  .sidebar-bottom > #help-button { display:flex; }
  .sidebar .profile-button { width:100%; min-height:64px; margin-top:6px; padding:10px 7px; border-top:1px solid #40345b; border-left:0; border-radius:0 0 9px 9px; }
  .sidebar .profile-button strong { font-size:13px; }
  .sidebar .profile-button small { font-size:11px; }
  .sidebar .avatar { flex-basis:36px; height:36px; font-size:11px; }
  .account-popover { inset:auto auto 18px 258px; width:320px; }
  .app-main { width:calc(100% - 248px); margin-left:248px; padding-top:0; }
}
@media (max-width:1100px) and (min-width:821px) {
  .sidebar { width:220px; }
  .sidebar .plan-card { padding:13px 13px 10px; }
  .account-popover { left:230px; }
  .app-main { width:calc(100% - 220px); margin-left:220px; }
}
@media (max-height:700px) and (min-width:821px) {
  .sidebar-top { padding-top:16px; padding-bottom:22px; }
  .sidebar .side-create { margin-top:17px; }
  .side-nav { gap:6px; }
  .sidebar .nav-item { min-height:42px; padding-block:8px; }
  .sidebar .plan-card { margin-block:8px; padding-block:10px; }
  .sidebar .plan-icon { margin-bottom:0; }
  .sidebar-bottom > #help-button { display:none; }
}

.app-main { color:#f5f1ff; background:
  radial-gradient(circle at 88% 15%,rgba(86,48,150,.22),transparent 38%),
  linear-gradient(rgba(164,139,238,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(164,139,238,.035) 1px,transparent 1px),
  #0d0a22; background-size:auto,72px 72px,72px 72px,auto; }
.dashboard-view,.library-view,.inspiration-view { max-width:1510px; padding:46px clamp(28px,5.5vw,96px) 82px; }
.dashboard-header { align-items:center; }
.dashboard-header h1 { margin:0 0 6px; color:#f9f5ff; font:800 clamp(22px,2vw,30px)/1.15 "Segoe UI",Arial,sans-serif; letter-spacing:-.04em; }
.dashboard-header p,.library-header p,.inspiration-header p { color:#b5aacc; }
.quick-start { min-height:520px; height:auto; grid-template-columns:1.05fr .95fr; margin-top:27px; border:1px solid rgba(177,137,246,.23); border-radius:22px; background:radial-gradient(circle at 76% 52%,rgba(89,44,159,.4),transparent 40%),#15102e; box-shadow:0 27px 75px rgba(2,1,12,.34); }
.quick-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(36px,5vw,78px); }
.quick-copy .mini-label { color:#c7a7ff; letter-spacing:.2em; }
.quick-copy h2 { margin:21px 0 18px; font:900 clamp(47px,4.6vw,80px)/.97 "Segoe UI",Arial,sans-serif; letter-spacing:-.075em; }
.quick-copy h2 em { font-style:normal; color:transparent; background:linear-gradient(95deg,#a784ff,#e6a0e7 55%,#9bc7ff); -webkit-background-clip:text; background-clip:text; }
.quick-copy p { max-width:480px; font-size:15px; line-height:1.65; }
.quick-copy .cream-button { min-height:45px; display:inline-flex; align-items:center; gap:26px; padding:0 18px; border-radius:8px; color:#22123c; background:linear-gradient(110deg,#ae90ff,#e6a4ea); font-size:13px; font-weight:800; cursor:pointer; }
.quick-visual { min-height:520px; overflow:hidden; }
.quick-visual::before { width:480px; height:480px; right:6%; top:4%; border-color:rgba(190,152,255,.18); box-shadow:0 0 0 72px rgba(185,130,244,.025),0 0 0 145px rgba(185,130,244,.013); }
.quick-orbit { position:absolute; width:440px; height:310px; top:19%; right:3%; border:1px solid rgba(203,161,252,.18); border-radius:50%; transform:rotate(-18deg); }
.quick-orbit-inner { width:340px; height:240px; top:26%; right:11%; transform:rotate(20deg); }
.idea-card { width:170px; height:225px; border:1px solid rgba(246,226,255,.33); border-radius:10px; box-shadow:0 24px 50px rgba(3,1,17,.46); }
.card-a { left:13%; top:32%; transform:rotate(-13deg); }
.card-b { left:43%; top:20%; transform:rotate(7deg); }
.card-c { left:67%; top:37%; transform:rotate(17deg); }
.section-heading h2,.library-heading h2,.library-header h1,.inspiration-header h1 { color:#f9f5ff; font-family:"Segoe UI",Arial,sans-serif; font-weight:800; }
.section-heading > div span,.library-heading span { color:#9e93b6; }
.section-heading .text-button { color:#d1b4ff; }
.project-card,.library-card,.inspiration-card { color:#f5efff; border:1px solid #403258; background:#1d1638; box-shadow:0 10px 28px rgba(2,1,12,.2); }
.project-card:hover,.library-card:hover { box-shadow:0 20px 45px rgba(2,1,12,.38); }
.project-card { border-radius:18px; }
.project-card:hover { border-color:#8d68c2; }
.project-card:focus-visible { outline:3px solid #c4a1ff; outline-offset:4px; }
.project-card .project-preview.empty { background:
  radial-gradient(ellipse at 65% 20%,rgba(168,108,237,.27),transparent 60%),
  radial-gradient(ellipse at 15% 100%,rgba(108,133,236,.18),transparent 65%),
  #17102f; border-bottom:1px solid #44315f; }
.project-card .project-preview.empty::before { z-index:1; color:#d9b6ff; font-size:52px; text-shadow:0 0 28px rgba(180,126,255,.55); }
.project-card .project-preview.empty::after { background:
  linear-gradient(rgba(196,161,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(196,161,255,.05) 1px,transparent 1px);
  background-size:38px 38px; box-shadow:inset 0 -25px 35px rgba(9,5,24,.2); pointer-events:none; }
.project-card .project-preview.empty i { position:absolute; width:100px; height:100px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(211,172,255,.38); border-radius:50%; background:radial-gradient(circle,rgba(181,128,255,.14),transparent 70%); box-shadow:0 0 0 22px rgba(196,161,255,.035),0 0 0 45px rgba(196,161,255,.025); }
.project-card .project-options-button { display:grid; place-items:center; min-width:32px; min-height:30px; border-radius:8px; color:#d9c5fa; }
.project-card .project-options-button:hover,.project-card .project-options-button:focus-visible { color:#fff; background:#473062; }
.project-card-actions,.account-popover-email { border-color:#3c3057; }
.project-meta,.project-card-actions span,.project-card-actions button,.library-card-title small,.library-card-body > p,.inspiration-card-body > p,.inspiration-card-meta { color:#afa4c7; }
.tips-strip,.library-lock-note { color:#ded5ef; border-color:#44345e; background:#21193c; }
.tips-strip p,.tips-strip p strong,.library-lock-note small { color:#bfb4d3; }
.library-empty { color:#f8f4ff; border-color:#4c3d68; background:#1e1737; }
.library-empty p { color:#b6aacb; }
.library-card-preview { background:#302443; }
.version-strip { background:#302542; }
.version-pill { color:#bfb2d7; }
.version-pill.active { color:#2b174d; border-color:#ae88f4; background:#d9c5ff; }
.original-lock { color:#e0caff; background:#3e2b63; }
.inspiration-view,.library-view { min-height:100vh; }

.workspace-view { height:100vh; background:transparent; }
.workspace-header { height:74px; padding:0 clamp(25px,4vw,68px); border-color:rgba(185,155,250,.18); background:rgba(17,12,40,.77); }
.workspace-title h1 { color:#fff; font-size:16px; }
.workspace-body { height:calc(100% - 74px); grid-template-columns:minmax(355px,405px) minmax(0,1fr); gap:18px; padding:18px clamp(20px,3vw,52px) 24px; }
.prompt-panel,.results-panel { border:1px solid rgba(182,145,245,.21); border-radius:18px; box-shadow:0 22px 60px rgba(2,1,14,.22); }
.prompt-panel { padding:26px 24px 45px; color:#f6f1ff; background:rgba(31,23,58,.95); }
.prompt-panel-head h2,.results-head h2 { color:#f8f4ff; font-family:"Segoe UI",Arial,sans-serif; font-weight:750; }
.prompt-panel-head p,.results-head p,.private-note,.prompt-suggestions span,.optional-label { color:#aa9fc3; }
.prompt-panel > label,.source-logo-section > label,.source-upload-title,.form-row label,.quality-control label { color:#eee7fc; }
.prompt-box,.creation-source-section,.generation-count-option,.agent-trigger,.form-row select,.quality-control select,.agent-menu,.agent-option { color:#f7f2ff; border-color:#51416d; background:#251b42; }
.prompt-box textarea { color:#faf7ff; }
.prompt-box textarea::placeholder { color:#a99cbe; }
.prompt-meta { border-color:#443458; }
.prompt-meta span { color:#a99cbd; }
.prompt-suggestions button,.refine-chips button { color:#ddcdf8; border-color:#51416d; background:#2e224d; }
.creation-source-section .control-title small,.creation-mode-option small,.generation-count-section > p,.generation-count-option small,.agent-trigger small,.agent-option small,.quality-control small,.source-logo-note { color:#b4a9ca; }
.creation-mode-option,.source-upload-tile,.source-image-card { color:#e5d9fa; border-color:#5e4a7d; background:#291e49; }
.creation-mode-option.selected,.generation-count-option.selected,.agent-option.selected { color:#fff; border-color:#af89f4; background:#493073; }
.creation-mode-option > span,.generation-count-option > b,.agent-trigger > .agent-icon,.agent-option > span:first-child { color:#d4b4ff; background:#46335f; }
.creation-mode-option.selected > span,.generation-count-option.selected > b,.agent-option.selected > span:first-child { color:#fff; background:#7752bd; }
.source-upload-tile:hover,.agent-option:hover { background:#3c2a62; }
.source-image-card > span { color:#eee1ff; }
.generation-count-section { border-color:#49365e; }
.generation-count-section .control-title small,.agent-picker-section .control-title small { color:#caabff; }
.agent-trigger > b { color:#c3b2dd; }
.agent-trigger:hover,.agent-trigger[aria-expanded="true"] { border-color:#b28cf0; box-shadow:0 0 0 3px rgba(178,140,240,.13); }
.results-panel { padding:30px 34px 110px; background:radial-gradient(circle at 55% 33%,rgba(93,59,159,.25),transparent 44%),rgba(20,14,44,.88); }
.selection-bar { left:calc(248px + 405px + (100vw - 248px - 405px)/2); width:min(630px,calc(100vw - 723px)); color:#f9f4ff; border-color:#665081; background:rgba(39,27,71,.95); }
.selection-copy span { color:#d3b0ff; }
.selection-copy strong { color:#f9f5ff; }
.account-popover,.project-action-menu { color:#f5efff; border-color:#51406d; background:#231a3f; }
.account-popover-actions button,.account-current-row,.account-menu-item:hover,.project-action-menu button:hover { color:#f8f3ff; border-color:#51406d; background:#382751; }
.account-menu-item,.project-action-menu button { color:#f3ebff; }
.account-menu-item small,.account-popover-head small,.account-popover-email { color:#b7aaca; }
.refine-drawer { color:#f8f3ff; background:#211838; }
.refine-drawer .modal-kicker,.delete-library-modal .modal-kicker { color:#c9a6ff; }
.refine-drawer .drawer-head p { color:#c3b7d2; }
.refine-drawer textarea { color:#f8f3ff; border-color:#5d4975; background:#302449; }
.library-preview-modal,.library-preview-head,.grading-panel { color:#f7f2ff; border-color:#53416d; background:#211838; }
.library-preview-head h2 { font-family:"Segoe UI",Arial,sans-serif; font-weight:700; }
.library-preview-head p { color:#b5a9cb; }

@media (max-width:1100px) and (min-width:821px) {
  .selection-bar { left:calc(220px + 405px + (100vw - 220px - 405px)/2); width:min(550px,calc(100vw - 695px)); }
}
@media (max-width:1000px) and (min-width:821px) {
  .workspace-view { height:auto; min-height:100vh; overflow:visible; }
  .workspace-body { height:auto; display:block; }
  .prompt-panel { overflow:visible; }
  .results-panel { min-height:650px; margin-top:18px; overflow:visible; }
  .selection-bar { left:calc(220px + (100vw - 220px)/2); width:min(550px,calc(100vw - 280px)); }
}

@media (max-width:820px) {
  .auth-visual { display:block; min-height:100svh; }
  .auth-visual > .brand { top:26px; left:24px; }
  .auth-header-actions { top:26px; right:22px; }
  .auth-live-badge { display:none; }
  .auth-copy { top:21vh; left:7vw; width:86vw; }
  .auth-copy h1 { font-size:clamp(45px,9vw,82px); }
  .auth-copy p { max-width:510px; }
  .auth-art { top:52%; right:-18%; width:80vw; height:43vh; min-height:280px; opacity:.57; }
  .auth-footnote { left:7vw; right:7vw; bottom:19px; }
  .auth-footnote span { display:none; }
  .auth-panel { min-height:0; padding:16px; }
  .auth-form-wrap { padding:30px 23px; }
  .sidebar { inset:0 auto 0 0; width:min(290px,83vw); height:100vh; flex-direction:column; align-items:stretch; gap:0; overflow-y:auto; padding:0; border-bottom:0; border-right:1px solid #4e3a69; transform:translateX(-105%); }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-top { display:block; padding:26px 19px 32px; }
  .sidebar .side-create { width:100%; height:48px; margin-top:25px; font-size:14px; }
  .side-nav { display:grid; gap:8px; padding:0 12px; }
  .sidebar .nav-item { width:100%; min-height:46px; height:auto; font-size:14px; }
  .sidebar .nav-item svg { width:19px; height:19px; flex:0 0 19px; }
  .side-spacer { flex:1; }
  .sidebar .plan-card { display:grid; margin:15px 14px 11px; padding:13px 14px 10px; border-color:#7454ac; background:linear-gradient(145deg,#442a75,#2c1e52); }
  .sidebar .plan-icon { margin:0; font-size:20px; line-height:1; }
  .sidebar .plan-card strong { font-size:16px; }
  .sidebar .plan-card > span { color:#e0d3f1; font-size:12px; }
  .sidebar .plan-progress { height:6px; margin:9px 0 4px; }
  .sidebar .plan-card button { justify-self:start; min-height:28px; font-size:13px; }
  .sidebar-bottom { padding:0 12px 16px; }
  .sidebar-bottom > #help-button { display:flex; }
  .sidebar .profile-button { width:100%; }
  .account-popover.mobile-anchor { inset:68px 12px auto auto; }
  .app-main { width:100%; margin-left:0; padding-top:0; }
  .mobile-header { color:#fff; border-color:#42335e; background:#17112e; }
  .mobile-header .brand { color:#fff; }
  .dashboard-view,.library-view,.inspiration-view { padding:28px 20px 58px; }
  .quick-start { min-height:0; grid-template-columns:1fr 1fr; }
  .quick-copy { padding:33px 28px; }
  .quick-copy h2 { font-size:clamp(35px,5vw,55px); }
  .quick-visual { min-height:310px; }
  .idea-card { width:118px; height:160px; }
  .card-a { left:4%; }.card-b { left:37%; }.card-c { display:none; }
  .workspace-view { height:auto; min-height:calc(100vh - 60px); }
  .workspace-header { position:sticky; top:60px; height:62px; }
  .workspace-body { height:auto; display:block; padding:14px; }
  .prompt-panel { overflow:visible; padding:24px 20px; }
  .results-panel { overflow:visible; min-height:600px; margin-top:14px; padding:24px 20px 110px; }
  .selection-bar { left:12px; right:12px; bottom:12px; width:auto; transform:none; }
}
@media (max-width:600px) {
  .auth-copy { top:18vh; }
  .auth-copy h1 { font-size:clamp(43px,12vw,70px); }
  .auth-copy p { font-size:14px; line-height:1.5; }
  .auth-signature { font-size:8px; }
  .hero-entry-button { margin-top:23px; }
  .auth-art { top:58%; right:-30%; width:105vw; }
  .auth-header-actions button { padding:0 10px; font-size:10px; }
  .auth-header-actions button span { margin-left:4px; }
  .quick-start { display:block; }
  .quick-copy h2 { font-size:clamp(37px,10vw,54px); }
  .quick-visual { height:210px; min-height:210px; }
  .idea-card { width:110px; height:145px; }
  .card-a { left:15%; top:18px; }.card-b { left:48%; top:9px; }
  .dashboard-header h1 { font-size:23px; }
  .workspace-body { padding:10px; }
  .results-panel { padding-inline:14px; }
}

/* Keep the studio and saved-design actions usable on narrow screens. */
@media (max-width:820px) {
  .app-shell,.app-main,.view { min-width:0; max-width:100%; }
  .dashboard-view,.library-view,.inspiration-view { width:100%; }
  .library-header,.library-header > div,.library-heading,.library-heading > div { min-width:0; max-width:100%; }
  .library-header h1,.library-header p { max-width:100%; overflow-wrap:anywhere; }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-card,.library-card-body,.library-card-actions { min-width:0; }
  .library-card-actions button { min-width:0; white-space:normal; }
}
@media (max-width:600px) {
  .dashboard-view,.library-view,.inspiration-view { padding-inline:clamp(14px,5vw,22px); }
  .dashboard-header,.inspiration-header,.quick-start,.quick-copy,.workspace-body,.prompt-panel,.results-panel { min-width:0; max-width:100%; }
  .quick-copy h2,.inspiration-header h1 { max-width:100%; overflow-wrap:anywhere; }
  .inspiration-header h1 { font-size:clamp(31px,9vw,42px); line-height:1.08; letter-spacing:-.055em; }
  .inspiration-header .primary-button { width:100%; justify-content:center; }
  .library-header { gap:20px; }
  .library-header h1 { font-size:clamp(31px,9vw,42px); line-height:1.08; letter-spacing:-.055em; }
  .library-header p { font-size:14px; }
  .library-heading { flex-direction:column; align-items:stretch; gap:14px; margin-top:28px; }
  .library-heading > div { flex-wrap:wrap; gap:5px 10px; }
  .library-heading h2 { font-size:clamp(21px,6vw,25px); }
  .library-heading .secondary-button { align-self:stretch; min-height:44px; color:#281946; font-weight:700; }
  .library-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .library-card-preview { padding:12px 12px 0; }
  .library-card-body { padding:15px 14px; }
  .library-selection-toolbar { gap:8px 14px; top:8px; padding:11px 12px; }
  .library-selection-actions { width:100%; margin-left:0; display:grid; grid-template-columns:1fr 1fr; }
  .library-selection-actions button { min-width:0; min-height:44px; padding:8px; }
  .library-card-select { top:19px; right:19px; }
  .library-card-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-card-actions button { min-height:42px; }
  .library-card-actions .library-edit { grid-column:1/-1; }
}
@media (max-width:380px) {
  .creation-mode-options,.generation-count-selector,.results-grid { grid-template-columns:minmax(0,1fr); }
  .library-card-actions { grid-template-columns:minmax(0,1fr); }
  .library-card-actions .library-edit { grid-column:auto; }
}

/* Original Pixgin identity, refined: consistent spacing, readable controls,
   balanced hero composition, and a responsive canvas. */
:root {
  --studio-bg:#100d23; --studio-panel:#1b1530; --studio-raised:#251d3e;
  --studio-border:#3e3355; --studio-text:#f7f3ff; --studio-muted:#b6abc9;
  --studio-accent:#bb9bff; --studio-focus:#d5bdff;
}
button,a,input,textarea,select { touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid var(--studio-focus); outline-offset:4px; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--studio-focus); outline-offset:2px; }
.noise { opacity:.018; }
.brand { letter-spacing:-.8px; }
.primary-button,.dark-button,.secondary-button,.cream-button { min-height:44px; border-radius:9px; font-size:13px; }
.primary-button,.generate-button { color:#241538; background:#bea3fb; box-shadow:none; }
.primary-button:hover,.generate-button:hover { color:#241538; background:#d0bbff; transform:translateY(-2px); box-shadow:0 6px 18px #ab82f51a; }
.primary-button span,.generate-button small { color:inherit; }
.dark-button { background:#38254f; }
.dark-button:hover { background:#4b3268; }

/* Keep the original ribbon and palette; let the layout place the artwork. */
.auth-visual { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(0,1fr); align-items:center; gap:30px; min-height:100svh; padding:145px 7vw 125px; background:radial-gradient(ellipse at 79% 49%,#57338a24,transparent 46%),linear-gradient(#a48bee05 1px,transparent 1px),linear-gradient(90deg,#a48bee05 1px,transparent 1px),#0d0a20; background-size:auto,80px 80px,80px 80px,auto; }
.auth-visual::before { opacity:.4; }
.auth-visual::after { content:""; position:absolute; top:103px; left:7vw; right:7vw; height:1px; background:#c9aff516; }
.auth-visual > .brand { top:36px; left:7vw; font-size:25px; }
.auth-header-actions { top:33px; right:7vw; gap:22px; }
.auth-live-badge { padding:8px 11px; color:#b6a8cc; border-color:#bba0ec26; background:#21173580; font-size:8px; letter-spacing:1px; }
.auth-live-badge i { width:5px; height:5px; box-shadow:0 0 0 4px #b78afb0f; }
.auth-header-actions button { min-height:40px; padding-inline:17px; border-radius:8px; border-color:#9f80d55c; background:#3b285a40; font-size:11px; }
.auth-copy { position:relative; top:auto; left:auto; width:auto; max-width:600px; margin:0; }
.auth-copy .eyebrow { color:#c2aedf; font-size:9px; letter-spacing:1.7px; }
.auth-copy h1 { margin:24px 0 24px; font:800 clamp(48px,5.7vw,88px)/1.05 "Segoe UI",Arial,sans-serif; letter-spacing:-.065em; }
.auth-copy h1 em { font-weight:800; font-style:normal; background:linear-gradient(100deg,#ac8bfa,#dfa8e4 57%,#a2c6ff); -webkit-background-clip:text; background-clip:text; }
.auth-copy p { max-width:440px; color:#b9adc9; font-size:14px; line-height:1.85; }
.hero-entry-button { min-height:49px; gap:43px; margin-top:29px; padding-inline:21px; border-radius:9px; color:#28133e; background:linear-gradient(105deg,#b299f8,#dfb0e7 60%,#afd0fc); font-size:13px; font-weight:750; box-shadow:0 8px 25px #9b6ae51a; }
.hero-entry-button:hover { transform:translateY(-2px); box-shadow:0 12px 28px #9b6ae526; }
.auth-signature { width:auto; max-width:340px; margin-top:26px; padding-top:20px; border-color:#b69ad42b; color:#998bae; font-size:8px; letter-spacing:1.6px; }
.auth-art { position:relative; top:auto; right:auto; width:100%; height:400px; min-height:0; max-width:none; margin:0; transform:none; }
.art-ribbon { filter:drop-shadow(0 10px 32px #9e74ea17); }
.art-ribbon path:first-of-type { opacity:.32; }
.art-ribbon path:last-of-type { stroke-dasharray:none; stroke-opacity:.18; stroke-width:2px; }
.art-orbit { inset:10% -5%; border-color:#b999ee21; }
.art-orbit-inner { inset:23% 6%; border-color:#b999ee14; }
.art-pixel { width:9px; height:9px; border-radius:3px; box-shadow:0 0 18px #aa89fb35; }
.art-pixel-two { width:7px; height:7px; }
.art-pixel-three { width:5px; height:5px; }
.art-caption { right:8%; bottom:14px; color:#9686ad; font-size:7px; letter-spacing:1.8px; }
.auth-footnote { position:absolute; left:7vw; right:7vw; bottom:26px; width:auto; margin:0; padding-top:22px; color:#8f809f; font-size:8px; line-height:1.7; letter-spacing:1.3px; border-color:#b698e01f; }
.auth-footnote span { float:right; margin-left:0; }
.auth-form-wrap { max-height:calc(100dvh - 40px); border-color:#ad89df38; border-radius:16px; background:#1c1531; box-shadow:0 30px 80px #0006; }
.auth-panel { background:#070412b8; backdrop-filter:blur(10px); }
.form-heading h2 { font-size:32px; line-height:1.1; letter-spacing:-1.2px; }
.form-heading p { font-size:13px; line-height:1.7; }
.input-wrap input { min-height:48px; font-size:14px; background:#241b3b; border-color:#55416d; }
.input-wrap input:focus { border-color:#bb9bff; box-shadow:0 0 0 3px #bb9bff18; }
.auth-panel label { font-size:13px; }
.terms { font-size:10px; line-height:1.7; }

/* A calmer studio, with the original navigation and floating campaign cards. */
.sidebar { background:#151027; border-right-color:#393048; box-shadow:none; }
.sidebar-top { padding-top:29px; padding-bottom:25px; }
.sidebar-top .brand { font-size:25px; }
.sidebar .side-create { margin-top:27px; background:#bea3fb; color:#2a1843; font-size:13px; }
.sidebar .side-create span { color:inherit; }
.sidebar .side-create:hover { background:#d0bbff; transform:translateY(-2px); }
.side-nav { gap:5px; }
.sidebar .nav-item { min-height:45px; color:#b0a4c4; font-size:13px; }
.sidebar .nav-item.active { color:#eadcff; background:#302344; }
.sidebar .nav-item:hover { background:#2a203b; }
.sidebar .nav-item.active::before { height:18px; background:#c4a3ff; }
.sidebar .plan-card { background:#2b2042; border-color:#5c4479; box-shadow:none; }
.sidebar .plan-card strong { font-size:15px; }
.sidebar .plan-card > span { color:#beafcf; font-size:11px; line-height:1.6; }
.sidebar .plan-card button { min-height:32px; font-size:12px; }
.sidebar .profile-button { border-color:#3b2f4d; }
.sidebar .profile-button strong { font-size:12px; }
.sidebar .profile-button small { color:#ab9bbb; font-size:10px; }
.app-main { background:radial-gradient(ellipse at 90% 0,#50367512,transparent 50%),var(--studio-bg); }
.dashboard-view,.library-view,.inspiration-view { padding:38px clamp(28px,4vw,64px) 55px; }
.dashboard-header h1 { font-size:28px; line-height:1.2; font-weight:700; letter-spacing:-1px; }
.dashboard-header p { color:var(--studio-muted); font-size:13px; line-height:1.7; }
.quick-start { min-height:350px; margin-top:26px; grid-template-columns:1.08fr 1fr; border-radius:16px; border-color:#60468166; background:radial-gradient(ellipse at 82% 50%,#62449333,transparent 57%),#1a132e; box-shadow:none; }
.quick-copy { padding:36px; }
.quick-copy .mini-label { font-size:8px; color:#ba9ce3; letter-spacing:1.5px; }
.quick-copy h2 { margin:18px 0 15px; font-size:clamp(34px,3.7vw,53px); font-weight:800; line-height:1.02; letter-spacing:-.055em; }
.quick-copy p { max-width:350px; color:#b6a9c7; font-size:12px; line-height:1.8; }
.quick-copy .cream-button { min-height:43px; padding-inline:18px; color:#2a1843; background:#d9c4fb; border-radius:8px; font-size:12px; }
.quick-copy .cream-button:hover { background:#e5d6ff; transform:translateY(-2px); box-shadow:none; }
.quick-visual { min-height:350px; }
.quick-visual::before { width:330px; height:330px; top:10px; right:-20px; border-color:#c7a2ff1f; box-shadow:0 0 0 45px #b982f407,0 0 0 90px #b982f404; }
.quick-orbit { width:300px; height:220px; top:65px; right:0; border-color:#cba1fc1f; }
.quick-orbit-inner { width:240px; height:180px; top:85px; right:35px; }
.idea-card { width:135px; height:183px; padding:13px; border-radius:7px; box-shadow:0 18px 30px #0501124d; }
.idea-card strong { font-size:25px; }
.card-a { top:104px; left:1%; transform:rotate(-11deg); }
.card-b { top:66px; left:32%; transform:rotate(5deg); }
.card-c { top:113px; left:60%; transform:rotate(14deg); }
.card-b::after { width:65px; height:65px; top:25px; right:-15px; }
.spark-a { top:42px; left:7%; }
.spark-b { right:6%; bottom:30px; font-size:21px; }
.section-heading { margin-top:32px; }
.section-heading h2,.library-heading h2 { font-size:22px; font-weight:700; letter-spacing:-.6px; }
.section-heading > div span { color:#ac9cbd; font-size:11px; }
.section-heading .text-button { font-size:11px; color:#c8aceb; }
.project-grid { gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-card,.library-card,.inspiration-card { background:var(--studio-panel); border-color:var(--studio-border); box-shadow:none; border-radius:12px; }
.project-card:hover,.library-card:hover { border-color:#816399; box-shadow:0 10px 25px #05021133; transform:translateY(-3px); }
.project-card-body { padding:17px; }
.project-card-body h3 { font-size:13px; }
.project-meta { color:#b5a7c5; font-size:10px; line-height:1.6; flex-wrap:wrap; }
.project-card-actions { border-color:#3d304f; }
.project-card-actions > span { font-size:10px; color:#a99aba; }
.project-card .project-preview.empty { background:#241b39; }
.project-card .project-preview.empty::before { font-size:36px; color:#bc9ce6; text-shadow:none; }
.project-card .project-preview.empty::after { background:none; box-shadow:none; }
.project-card .project-preview.empty i { width:78px; height:78px; border-color:#79609066; background:#b580ff05; box-shadow:0 0 0 17px #c4a1ff06; }
.tips-strip { border-color:#3d304f; background:#211932; }
.tips-strip p { color:#b9adca; font-size:11px; line-height:1.7; }
.dashboard-empty { display:flex; align-items:center; gap:20px; min-height:170px; padding:27px; border:1px dashed #66517c; border-radius:12px; background:#1a142c; }
.dashboard-empty > span { flex-shrink:0; width:52px; height:52px; display:grid; place-items:center; color:#c7a5f5; background:#342343; border-radius:14px; font-size:27px; }
.dashboard-empty h3 { margin:0 0 8px; color:#f2eafd; font-size:20px; letter-spacing:-.5px; }
.dashboard-empty p { margin:0; color:#b4a4c5; font-size:12px; line-height:1.7; }
.dashboard-empty .secondary-button { flex-shrink:0; margin-left:auto; color:#3a2352; background:#e5d6f8; border-color:#e5d6f8; font-size:11px; }

/* Improve the original workspace's reading sizes and control contrast. */
.workspace-body { grid-template-columns:minmax(345px,375px) minmax(0,1fr); gap:16px; padding:18px 22px 24px; }
.workspace-header { height:74px; padding-inline:28px; background:#151025; border-color:#41324f; }
.workspace-title h1 { font-size:15px; }
.workspace-title span,.save-status { font-size:10px; }
.workspace-body { height:calc(100% - 74px); }
.prompt-panel { padding:25px 22px 40px; background:#1d1631; border-color:var(--studio-border); border-radius:13px; box-shadow:none; scrollbar-width:thin; scrollbar-color:#5d4874 transparent; }
.prompt-panel-head h2,.results-head h2 { font-size:19px; line-height:1.2; letter-spacing:-.4px; }
.prompt-panel-head p,.results-head p { color:#b2a2c4; font-size:11px; line-height:1.7; }
.prompt-panel > label,.source-logo-section > label,.source-upload-title,.form-row label,.quality-control label,.control-title > span { font-size:12px; color:#e0d5ee; }
.step-count { width:29px; height:29px; flex-basis:29px; font-size:10px; color:#d0b1ff; background:#3c2955; }
.creation-source-section { border:0; padding:0; background:transparent; }
.control-title { gap:9px; }
.control-title small,.optional-label { font-size:10px; }
.creation-mode-option,.generation-count-option,.agent-trigger { background:#281e40; border-color:#5b4772; }
.creation-mode-option strong,.generation-count-option strong { font-size:11px; }
.creation-mode-option small,.generation-count-option small { font-size:10px; line-height:1.5; color:#b7a7c9; }
.creation-mode-option.selected,.generation-count-option.selected { background:#3b2956; border-color:#ac88dc; box-shadow:none; }
.source-logo-note,.generation-count-section > p,.agent-trigger small,.agent-option small,.quality-control small { color:#b7a6c8; font-size:10px; line-height:1.7; }
.prompt-box { border-color:#624b79; background:#241b3b; }
.prompt-box textarea { height:155px; font-size:12px; line-height:1.8; }
.prompt-box textarea::placeholder { color:#b09fc2; }
.prompt-box:focus-within { border-color:#c6a5f8; box-shadow:0 0 0 3px #c6a5f812; }
.prompt-meta { padding:11px; }
.prompt-meta button { font-size:10px; color:#d6b7ff; }
.prompt-meta > span,.prompt-suggestions span,.prompt-suggestions button,.refine-chips button { font-size:9px; }
.prompt-suggestions button,.refine-chips button { padding:7px 9px; }
.agent-trigger strong,.agent-option strong { font-size:12px; }
.form-row select,.quality-control select { min-height:44px; font-size:12px; }
.generate-button { min-height:56px; border-radius:9px; }
.generate-button strong { font-size:12px; }
.generate-button small { font-size:10px; color:#513866; }
.generate-icon { color:#e6d3ff; background:#573c78; }
.private-note { font-size:10px; color:#b29fc2; }
.results-panel { padding:27px 25px 110px; border-color:var(--studio-border); border-radius:13px; background:radial-gradient(ellipse at 50% 35%,#4b316a18,transparent 60%),#151027; box-shadow:none; }
.empty-results h3 { font:700 24px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:-.8px; }
.empty-results p { max-width:320px; font-size:12px; color:#b9a9ca; line-height:1.8; }
.empty-orbit { border-color:#7b6194; color:#c9a5f5; }
.empty-orbit::before { background:#352247; }
.selection-bar { left:calc(248px + 375px + (100vw - 248px - 375px)/2); width:min(620px,calc(100vw - 670px)); border-color:#756087; background:#2a1e43f5; }
.selection-bar button { font-size:11px; }
.concept-meta > span,.concept-meta small { font-size:10px; }
.library-header h1,.inspiration-header h1 { font-size:38px; line-height:1.1; letter-spacing:-1.5px; }
.library-header p,.inspiration-header p { font-size:13px; line-height:1.8; }
.modal h2 { font-size:29px; }
.modal > p,.category-option { font-size:12px; line-height:1.6; }
.modal-actions button { font-size:12px; }

@media (max-width:1180px) and (min-width:821px) {
  .auth-visual { padding-inline:6vw; gap:20px; }
  .auth-visual > .brand,.auth-footnote { left:6vw; }
  .auth-header-actions,.auth-footnote { right:6vw; }
  .auth-copy h1 { font-size:clamp(48px,5.7vw,68px); }
  .auth-art { height:350px; }
  .dashboard-view,.library-view,.inspiration-view { padding-inline:30px; }
  .quick-copy { padding:30px; }
  .quick-copy h2 { font-size:39px; }
  .idea-card { width:116px; height:165px; }
  .card-a { left:-1%; }.card-b { left:30%; }.card-c { left:57%; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card:nth-child(3) { display:block; }
  .dashboard-empty { flex-wrap:wrap; }
  .dashboard-empty .secondary-button { margin-left:72px; }
}
@media (max-width:1000px) and (min-width:821px) {
  .workspace-view { height:auto; overflow:visible; }
  .workspace-body { display:block; height:auto; padding:18px; }
  .prompt-panel { overflow:visible; }
  .results-panel { margin-top:16px; min-height:600px; overflow:visible; }
  .selection-bar { left:calc(220px + (100vw - 220px)/2); width:calc(100vw - 270px); }
  .auth-live-badge { display:none; }
}
@media (max-width:820px) {
  .auth-visual { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:100svh; padding:140px 7vw 95px; }
  .auth-visual > .brand { top:30px; left:7vw; }
  .auth-header-actions { top:27px; right:7vw; }
  .auth-visual::after { top:90px; }
  .auth-copy { top:auto; left:auto; width:100%; max-width:620px; margin:0 auto; }
  .auth-copy h1 { font-size:clamp(55px,9vw,76px); }
  .auth-copy p { max-width:500px; }
  .auth-art { position:relative; top:auto; right:auto; width:100%; max-width:560px; height:300px; min-height:0; margin:8px auto 0; opacity:1; }
  .art-orbit { inset:5% 5%; }
  .art-orbit-inner { inset:20% 13%; }
  .art-caption { bottom:0; right:5%; }
  .auth-footnote { left:7vw; right:7vw; bottom:24px; font-size:8px; }
  .auth-footnote span { display:none; }
  .auth-panel { min-height:0; padding:20px; }
  .auth-form-wrap { max-height:calc(100dvh - 40px); }
  .app-main { padding-top:60px; }
  .mobile-header { position:fixed; z-index:25; top:0; left:0; width:100%; background:#17112ef5; backdrop-filter:blur(12px); }
  .dashboard-view,.library-view,.inspiration-view { padding:30px 24px 50px; }
  .quick-start { min-height:320px; grid-template-columns:1.1fr 1fr; }
  .quick-copy { padding:29px; }
  .quick-copy h2 { font-size:38px; }
  .quick-visual { min-height:320px; }
  .idea-card { width:116px; height:160px; }
  .card-a { left:0; top:104px; }.card-b { left:37%; top:64px; }.card-c { display:none; }
  .workspace-header { position:sticky; top:60px; height:66px; padding-inline:18px; }
  .workspace-body { height:auto; display:block; padding:14px; }
  .prompt-panel { overflow:visible; padding:24px; }
  .results-panel { min-height:550px; margin-top:14px; overflow:visible; padding:24px 22px 110px; }
  .selection-bar { left:12px; right:12px; width:auto; transform:none; }
  .account-popover,.account-popover.mobile-anchor { inset:auto 12px 18px auto; width:min(320px,calc(100vw - 24px)); }
}
@media (max-width:600px) {
  .auth-visual { padding:130px 25px 90px; }
  .auth-visual > .brand { top:27px; left:25px; font-size:24px; }
  .auth-header-actions { top:24px; right:25px; }
  .auth-header-actions button { font-size:10px; padding-inline:12px; }
  .auth-visual::after { left:25px; right:25px; top:82px; }
  .auth-copy { top:auto; }
  .auth-copy .eyebrow { font-size:8px; letter-spacing:1.3px; }
  .auth-copy h1 { margin-top:24px; font-size:clamp(43px,10.9vw,62px); line-height:1.07; }
  .auth-copy h1 em { white-space:nowrap; }
  .auth-copy p { font-size:13px; line-height:1.85; }
  .hero-entry-button { margin-top:25px; min-height:48px; }
  .auth-signature { margin-top:22px; padding-top:17px; font-size:7px; }
  .auth-art { top:auto; right:auto; width:100%; height:250px; min-height:0; margin-top:7px; }
  .art-orbit { inset:9% -2%; }
  .art-orbit-inner { inset:22% 9%; }
  .art-caption { bottom:1px; font-size:6px; }
  .auth-footnote { left:25px; right:25px; bottom:22px; font-size:7px; letter-spacing:.7px; }
  .auth-form-wrap { padding:38px 24px 26px; }
  .form-heading h2 { font-size:29px; }
  .dashboard-view,.library-view,.inspiration-view { padding:27px 20px 45px; }
  .dashboard-header h1 { font-size:26px; }
  .quick-start { display:block; }
  .quick-copy { padding:28px 25px 12px; }
  .quick-copy h2 { font-size:37px; }
  .quick-visual { min-height:220px; height:220px; max-width:350px; margin:auto; }
  .idea-card { width:117px; height:155px; }
  .card-a { top:36px; left:17%; }.card-b { top:18px; left:48%; }
  .quick-visual::before { width:260px; height:260px; right:0; top:-20px; }
  .quick-orbit { top:4px; }
  .quick-orbit-inner { top:27px; }
  .spark-a { top:12px; left:8%; }
  .spark-b { bottom:28px; }
  .project-grid { grid-template-columns:minmax(0,1fr); }
  .project-preview { height:220px; }
  .section-heading h2 { font-size:22px; }
  .section-heading > div { gap:8px; }
  .section-heading > div span { font-size:10px; }
  .section-heading .text-button { font-size:10px; white-space:nowrap; }
  .dashboard-empty { align-items:flex-start; flex-direction:column; padding:24px; }
  .dashboard-empty .secondary-button { margin:0; }
  .tips-strip p { font-size:10px; }
  .workspace-header { padding-inline:13px; }
  .workspace-title h1 { font-size:13px; max-width:170px; }
  .workspace-actions .dark-button { min-height:38px; font-size:11px; padding:8px 13px; }
  .workspace-body { padding:10px; }
  .prompt-panel { padding:23px 18px; }
  .results-panel { padding-inline:17px; }
  .results-head h2 { font-size:19px; }
  .empty-results h3 { font-size:23px; }
  .library-header h1,.inspiration-header h1 { font-size:34px; }
  .selection-bar button { font-size:10px; padding:8px; min-width:0; }
}

/* Canva handoff is available on saved Koleksi cards. */
.library-card-actions .library-canva-button {
  grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 14px; border:1px solid #9b8cdd; border-radius:9px;
  background:transparent; color:#e3d9ff; font:600 13px/1.4 "Segoe UI",Arial,sans-serif; cursor:pointer;
}
.library-card-actions .library-canva-button:hover { background:#38254f; border-color:#c8b6ff; }
.library-card-actions .library-canva-button:disabled { cursor:wait; opacity:.65; }
.canva-transfer-page { min-height:100svh; display:grid; place-items:center; padding:24px; box-sizing:border-box; background:#100d23; color:#f7f3ff; }
.canva-transfer-card { width:min(100%,480px); padding:32px; border:1px solid #49355d; border-radius:16px; background:#1b1530; }
.canva-transfer-card h1 { font-size:24px; line-height:1.3; }
.canva-transfer-card p { color:#c8bddc; font-size:14px; line-height:1.7; }
.canva-transfer-card button { margin-top:16px; }
.canva-connection-settings { margin-top:24px; padding-top:20px; border-top:1px solid #665080; }
.canva-connection-settings h3 { margin:0 0 8px; font-size:16px; }
.canva-connection-settings p { font-size:13px; line-height:1.6; }

/* Slightly larger text throughout the generation form, from heading to status. */
.prompt-panel .prompt-panel-head h2 { font-size:21px; }
.prompt-panel .prompt-panel-head p { font-size:13px; }
.prompt-panel .step-count { font-size:12px; }
.prompt-panel > label,
.prompt-panel .source-logo-section > label,
.prompt-panel .source-upload-title,
.prompt-panel .form-row label,
.prompt-panel .quality-control label,
.prompt-panel .control-title > span { font-size:14px; }
.prompt-panel .control-title { flex-wrap:wrap; }
.prompt-panel .control-title small,
.prompt-panel .optional-label,
.prompt-panel .creation-mode-option small,
.prompt-panel .generation-count-option small,
.prompt-panel .source-logo-note,
.prompt-panel .product-model-notice,
.prompt-panel .generation-count-section > p,
.prompt-panel .agent-trigger small,
.prompt-panel .agent-option small,
.prompt-panel .quality-control small,
.prompt-panel .generate-button small,
.prompt-panel .private-note { font-size:12px; }
.prompt-panel .creation-mode-option strong,
.prompt-panel .generation-count-option strong,
.prompt-panel .source-upload-tile strong,
.prompt-panel .source-image-card > span { font-size:13px; }
.prompt-panel .prompt-box textarea,
.prompt-panel .agent-trigger strong,
.prompt-panel .agent-option strong,
.prompt-panel .form-row select,
.prompt-panel .quality-control select,
.prompt-panel .generate-button strong { font-size:14px; }
.prompt-panel .prompt-meta button { font-size:12px; }
.prompt-panel .prompt-meta > span,
.prompt-panel .prompt-suggestions span,
.prompt-panel .prompt-suggestions button { font-size:11px; }
.prompt-panel .generation-count-option strong,
.prompt-panel .generation-count-option small { white-space:normal; overflow-wrap:anywhere; }
.prompt-panel .generation-count-option > b { font-size:16px; }
.prompt-panel .generation-count-option > i,
.prompt-panel .agent-option > i { font-size:9px; }

/* Readable project names and details in Proyek Saya and its full project list. */
.project-card-body h3 { font-size:17px; line-height:1.4; }
.project-meta, .project-card-actions > span { font-size:13px; line-height:1.6; }
#dashboard-view .section-heading h2 { font-size:26px; }
#dashboard-view .section-heading > div span,
#dashboard-view .section-heading .text-button { font-size:14px; }
#dashboard-view .section-heading,
#dashboard-view .section-heading > div { flex-wrap:wrap; gap:12px; }
#dashboard-view .tips-strip p { font-size:13px; }

/* Consistent close and dismiss controls across dialogs, drawers and previews. */
body button[type="button"].close-button, #project-modal .close-button {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:0;
  color:#b91c1c; background:transparent; font-weight:600; line-height:1;
  cursor:pointer; box-shadow:none;
}
body button[type="button"].close-button:hover, #project-modal .close-button:hover { color:#991b1b; background:transparent; }
body button[type="button"].close-button:focus-visible, #project-modal .close-button:focus-visible { outline:3px solid #ffb4b4; outline-offset:3px; }
body .close-button:disabled { opacity:.5; cursor:not-allowed; }
body .close-button svg { width:20px; height:20px; stroke-width:2.5; }
.modal h2, #project-modal .modal h2 { padding-right:44px; }
.auth-panel .form-heading { padding-right:28px; }
.source-image-card > span { min-height:38px; padding-right:40px; }
@media (max-width:820px) {
  .selection-bar .secondary-button, .selection-bar .dark-button { min-width:0; white-space:normal; }
}