/* Keep explicit hidden state above component display rules. */
[hidden] { display: none !important; }
:root {
  --blue: #2864f0;
  --ink: #142035;
  --muted: #65738a;
  --line: #e5eaf2;
  --pale: #edf2fa;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f6f8fc;
  color: var(--ink);
  font:
    15px/1.65 system-ui,
    -apple-system,
    "PingFang SC",
    sans-serif;
}
header {
  height: 76px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - 1080px) / 2));
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-size: 25px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
  text-decoration: none;
}
.tagline {
  color: var(--muted);
  flex: 1;
}
#account {
  margin-left: auto;
}
main {
  max-width: 1080px;
  margin: 28px auto;
  padding: 0 24px 110px;
}
h1 {
  font-size: 28px;
  line-height: 1.3;
  margin: 8px 0 12px;
}
h2 {
  font-size: 21px;
  margin: 6px 0 15px;
}
h3 {
  font-size: 17px;
  margin: 6px 0;
}
p {
  margin: 8px 0;
}
.muted,
small {
  color: var(--muted);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.button {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
button:hover {
  border-color: var(--blue);
  color: var(--blue);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.primary {
  background: var(--blue);
  color: white !important;
  border-color: var(--blue);
}
.danger {
  color: #ba3445;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.stack {
  display: grid;
  gap: 16px;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
}
.toolbar {
  margin-bottom: 18px;
}
.home-active {margin:0 0 14px;padding:10px 12px;border-radius:14px;background:#edf5ff;min-width:0;}
.home-active[hidden] {display:none;}
.home-active-heading {display:flex;align-items:center;gap:10px;font-size:12px;}
.home-active-heading strong {margin-right:auto;}
.home-active-heading a {white-space:nowrap;}
.home-active-heading button {min-height:32px;padding:4px 8px;font-size:12px;}
.home-active-list {display:flex;gap:8px;overflow-x:auto;padding-top:6px;}
.home-active-task {flex:0 0 auto;display:flex;align-items:center;gap:6px;max-width:230px;min-height:36px;padding:5px 9px;background:white;border-radius:9px;color:inherit;text-decoration:none;font-size:12px;}
.home-active-task span {flex-shrink:0;color:var(--blue);}
.home-active-task strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.home-active .error {margin:5px 0 0;font-size:12px;}
.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 24px;
}
.quick button {
  text-align: left;
  justify-content: flex-start;
  padding: 16px 20px;
  background: white;
  border-radius: 18px;
}
.quick strong {
  display: block;
}
.quick span {
  color: var(--muted);
  font-size: 13px;
}
.categories {
  display: flex;
  gap: 10px;
  overflow: auto;
  margin: 0 0 18px;
  padding: 2px;
}
.categories button {
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 24px;
}
.active {
  background: var(--pale);
  color: var(--blue);
  border-color: #abc3ff;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.template {
  padding: 0;
  overflow: hidden;
  display: block;
  text-align: left;
  border-radius: 18px;
  width: 100%;
}
.template img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--pale);
}
.template .caption {
  padding: 13px 16px;
  display: block;
}
.template strong {
  display: block;
  font-size: 17px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.photo {
  width: 100%;
  max-height: 590px;
  object-fit: contain;
  background: var(--pale);
  border-radius: 16px;
}
.badge {
  display: inline-block;
  color: var(--blue);
  background: var(--pale);
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12px;
}
.empty {
  text-align: center;
  padding: 45px 20px;
  color: var(--muted);
}
label {
  display: block;
  font-weight: 600;
  margin: 12px 0 5px;
}
input:not([type="checkbox"]),
textarea,
select {
  display: block;
  width: 100%;
  border: 1px solid #d4dce9;
  border-radius: 10px;
  background: white;
  color: var(--ink);
  padding: 11px 12px;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid #b3cbff;
  outline-offset: 2px;
}
.help {
  font-size: 13px;
  color: var(--muted);
}
.price {
  font-size: 32px;
  color: var(--blue);
  font-weight: 750;
}
.error {
  color: #b92e40;
  background: #fff0f1;
  padding: 12px;
  border-radius: 10px;
}
.note {
  background: var(--pale);
  padding: 12px 15px;
  border-radius: 12px;
}
.list-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child {
  border: 0;
}
.list-item img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}
.grow {
  flex: 1;
  min-width: 140px;
}
.prompt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.tabs button {
  white-space: nowrap;
}
nav#nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 50px;
  background: #ffffffed;
  border-top: 1px solid var(--line);
  padding: 9px 20px calc(9px + env(safe-area-inset-bottom));
  z-index: 20;
  backdrop-filter: blur(14px);
}
nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 20px;
  border-radius: 12px;
  font-weight: 650;
}
nav a.active {
  color: var(--blue);
}
dialog {
  border: none;
  border-radius: 22px;
  width: min(500px, calc(100% - 28px));
  padding: 26px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 100px #17315b33;
}
dialog::backdrop {
  background: #13223e66;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modal-head button {
  padding: 7px 12px;
}
#notice:not(:empty) {
  position: fixed;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  background: #142035;
  color: white;
  max-width: 92vw;
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 100;
  box-shadow: 0 8px 30px #0002;
}
.checkdays {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.checkday {
  padding: 13px 5px;
  text-align: center;
  background: #f3f6fc;
  border-radius: 12px;
}
.checkday.done {
  background: #e1edff;
  color: var(--blue);
}
canvas {
  width: 100%;
  height: auto;
  display: block;
  max-height: 650px;
  object-fit: contain;
  background: #edf2fa;
  border-radius: 12px;
}
.editor-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.editor-controls label {
  font-size: 12px;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  background: #f2f5fa;
  padding: 12px;
  border-radius: 10px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
@media (max-width: 760px) {
  header {
    height: 65px;
    padding: 0 18px;
    gap: 10px;
  }
  .tagline {
    display: none;
  }
  main {
    margin: 18px auto;
    padding: 0 16px 100px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 18px;
  }
  .quick {
    gap: 10px;
    margin-bottom: 18px;
  }
  .quick button {
    padding: 12px;
    min-height: 76px;
  }
  .quick span {
    font-size: 12px;
  }
  .template .caption {
    padding: 10px;
  }
  .template strong {
    font-size: 15px;
  }
  .template small {
    font-size: 12px;
  }
  h1 {
    font-size: 24px;
  }
  nav#nav {
    gap: 8px;
    justify-content: space-around;
  }
  nav a {
    padding: 8px 12px;
  }
  .editor-controls {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo {
    max-height: 430px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button {
    transition:
      border-color 0.15s,
      background 0.15s;
  }
}
.region-stage {position:relative;width:100%;aspect-ratio:1;touch-action:none;user-select:none;cursor:crosshair;overflow:hidden;border-radius:12px;background:#eef5ff;}
.region-stage img {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;}
.region-box {position:absolute;border:2px solid #1765d9;background:rgba(39,112,240,.14);box-sizing:border-box;pointer-events:none;box-shadow:0 0 0 1px white inset;}
/* Keep enlarged text within the header instead of clipping or widening the page. */
header {height:auto;min-height:76px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;}
#account {min-width:0;max-width:100%;}
.quick {grid-template-columns:repeat(2,minmax(0,1fr));}
.quick button {min-width:0;overflow-wrap:anywhere;}
@media (max-width:760px) {header {min-height:65px;}}
main, dialog {overflow-wrap:anywhere;}
.policy-document { margin: 16px 0 24px; }
.policy-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
#registration-policies details { margin: 10px 0; padding: 10px; border: 1px solid #d7e5f5; border-radius: 10px; }
#registration-policies .policy-body { max-height: 340px; overflow: auto; }
#policy-preview { margin-top: 20px; }

.project-version-detail { margin-top: 16px; }
.project-version-preview { display: block; width: 100%; max-height: 36vh; object-fit: contain; border-radius: 14px; margin-top: 14px; background: var(--pale, #f3f7ff); }

/* Responsive product surfaces: content wraps instead of widening the page. */
.split {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.split > *, .grid > *, .row > *, .card, .list-item {min-width:0;max-width:100%}
button,.button {max-width:100%;overflow-wrap:anywhere;line-height:1.45}
input,select,textarea {min-width:0;max-width:100%}
input[type=file] {font-size:13px;padding:10px}
input[type=file]::file-selector-button {border:0;border-radius:7px;background:var(--pale);color:var(--blue);padding:8px 12px;margin-right:10px;font:inherit;cursor:pointer}
input[type=color] {height:44px;padding:5px}
summary {cursor:pointer;color:var(--muted);font-size:14px;line-height:1.5;padding:10px 0}
summary:focus-visible {outline:3px solid #b3cbff;outline-offset:2px}
.usage-details {margin:10px 0;border-top:1px solid var(--line)}
.usage-details > p {margin-bottom:12px}
.account-more {flex:1 0 100%}
.account-more > .row {padding:8px 0}
.account-shortcuts {gap:8px}
.account-shortcuts > .button {font-size:14px}
.list-item img.photo {width:100%;height:auto;max-height:300px;object-fit:contain}
.compose-reference .photo {max-height:340px;display:block}
.compose-form textarea {min-height:168px}
#task-history {margin-bottom:20px}
[data-page=task] .photo {max-height:52vh}
[data-page=edit] #editor-canvas {max-height:65vh}
#account {display:flex;align-items:center;gap:12px}
dialog {max-height:90dvh;overscroll-behavior:contain;scrollbar-gutter:stable}
.modal-head {position:sticky;top:-26px;background:white;padding:10px 0;z-index:2}
[data-page=admin] .tabs button {flex-shrink:0}
[data-page=admin] .price {font-size:clamp(22px,3vw,32px)}
@media(max-width:760px){
 .split {grid-template-columns:minmax(0,1fr);gap:16px}
 header {padding:8px 16px}
 header #account > a.help {display:none}
 input:not([type=checkbox]):not([type=file]),select,textarea {font-size:16px}
 .compose-reference .photo {max-height:220px}
 .compose-layout {gap:12px}
 .compose-reference {padding:14px}
 .compose-reference h2 {font-size:17px;margin-bottom:6px}
 .compose-reference label {margin-top:6px}
 .compose-form textarea {min-height:140px}
 .compose-reference .usage-details {margin-bottom:0}
 .quick button {min-height:80px;align-items:flex-start}
 .quick span {font-size:12px;line-height:1.5;display:block;margin-top:6px}
 [data-page=edit] #editor-canvas {max-height:45vh}
 .account-shortcuts > .button {flex:1 1 42%}
 dialog {padding:18px;border-radius:18px}
 .modal-head {top:-18px}
 .modal-head h2 {font-size:20px}
 .modal-head button {flex:0 0 44px}
 nav#nav {gap:0;padding-left:8px;padding-right:8px}
 nav#nav a {flex:1;text-align:center;padding:10px 4px;font-size:14px}
 .card .card {padding:14px}
}
@media(max-width:360px){
 main {padding-left:12px;padding-right:12px}
 .card {padding:14px}
 .row {gap:8px}
 .template strong {font-size:14px}
 .price {font-size:28px}
 .grid {gap:10px}
}
#task-history > summary, details.card > summary {font-weight:650;color:var(--ink);font-size:16px}
.asset-more > summary {padding:10px 5px}
.asset-more[open] {flex:1 0 100%}
.asset-more .row {padding-top:6px}
#private-more {display:flex;margin:18px auto}
[data-private-card] .photo {aspect-ratio:1;object-fit:contain;display:block;margin-bottom:10px}
[data-private-card] small {font-size:12px}
/* Keep modal previews useful without pushing the form off the screen. */
dialog img.photo{max-height:32dvh;object-fit:contain}
dialog textarea+button,dialog input+button{margin-top:8px}
@media(max-width:760px){
  #app[data-page="mine"]>details.card{padding:10px 16px}
  #app[data-page="mine"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #app[data-page="mine"] [data-private-card] .row{gap:5px}
  #app[data-page="mine"] [data-private-card] button{padding:8px 10px}
}

@media(max-width:760px){.region-stage{width:min(100%,calc(34dvh * var(--region-ratio,1)));margin-inline:auto}}

@media(max-width:760px){.compose-form textarea{min-height:125px;height:125px}.compose-reference>label:first-of-type{margin-top:0}.compose-reference .photo{max-height:180px}}

.grid>.empty{grid-column:1/-1}
@media(max-width:760px){.account-shortcuts #mine-checkin-entry{flex:1 1 calc(50% - 8px)}.account-shortcuts #mine-checkin-entry button{width:100%}}

.admin-section-picker{display:none}.admin-sections{flex-wrap:wrap;overflow:visible}
@media(max-width:760px){.admin-sections{display:none}.admin-section-picker{display:block;margin:0 0 16px}#admin-content>.card{padding:14px}}
/* Empty feedback placeholders must not render as coloured strips. */
.error:empty,.note:empty{display:none}
.list-item>.row+.row{margin-top:8px}
@media(max-width:360px){
 .account-shortcuts>.button{padding-inline:8px;font-size:13px}
 .checkday{font-size:13px;padding-inline:2px}
}

.template-preview{position:relative;display:block;aspect-ratio:1;background:var(--pale)}
.template-image-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px;color:var(--muted)}
.template-image-status[hidden]{display:none}
.template-preview img{position:relative;height:auto;background:transparent}

/* The crop overlay shares the exact displayed canvas bounds. */
[data-page=edit]{--editor-max-height:55vh}
#editor-stage{position:relative;margin:0 auto;max-width:100%;overflow:hidden;border-radius:12px}
[data-page=edit] #editor-stage #editor-canvas{width:100%;height:auto;max-height:none;border-radius:0}
#crop-overlay{position:absolute;inset:0;overflow:hidden;touch-action:none}
#crop-overlay[hidden],#crop-panel[hidden]{display:none}
#crop-selection{position:absolute;border:2px solid white;box-shadow:0 0 0 2000px #07142b80;touch-action:none;cursor:move;box-sizing:border-box}
.crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33%,#ffffff70 33%,#ffffff70 33.5%,transparent 33.5%,transparent 66%,#ffffff70 66%,#ffffff70 66.5%,transparent 66.5%),linear-gradient(to bottom,transparent 33%,#ffffff70 33%,#ffffff70 33.5%,transparent 33.5%,transparent 66%,#ffffff70 66%,#ffffff70 66.5%,transparent 66.5%)}
.crop-handle{position:absolute;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;background:transparent;border:0;touch-action:none}.crop-handle::after{content:"";position:absolute;width:28px;height:28px;box-sizing:border-box;background:white;border:2px solid var(--blue);border-radius:50%;pointer-events:none}.crop-nw::after{left:0;top:0}.crop-ne::after{right:0;top:0}.crop-sw::after{left:0;bottom:0}.crop-se::after{right:0;bottom:0}
.crop-nw{left:-2px;top:-2px;cursor:nwse-resize}.crop-ne{right:-2px;top:-2px;cursor:nesw-resize}.crop-sw{left:-2px;bottom:-2px;cursor:nesw-resize}.crop-se{right:-2px;bottom:-2px;cursor:nwse-resize}
#crop-start{margin-top:12px}#crop-panel label{margin-top:10px}#crop-panel .help{margin:8px 0}
@media(max-width:760px){[data-page=edit]{--editor-max-height:32vh}#crop-panel .row{gap:6px}#crop-panel .row button{padding:10px 12px;font-size:14px}}

/* Open lifestyle creation: independent customer choices, calm brand surfaces. */
.life-entry{display:flex;align-items:center;gap:16px;border:1px solid #b9cff0;border-radius:20px;background:linear-gradient(115deg,#e9f0ff,#fcebf4);color:#203f70;padding:20px;margin:20px 0;text-decoration:none}.life-entry>span{font-size:30px}.life-entry>div{flex:1;min-width:0}.life-entry strong,.life-entry small{display:block}.life-entry small{margin-top:5px;color:#607590}.life-layout{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:24px;align-items:start}.life-card{background:#fff;border:1px solid #d7e1f3;border-radius:24px;padding:24px;margin-bottom:20px;min-width:0}.life-identity{background:linear-gradient(150deg,#f0f5ff,#fff5f9);position:sticky;top:96px}.life-label{display:flex;align-items:center;gap:12px;margin-bottom:18px}.life-label>span{font-size:13px;font-weight:700;color:#5475ac;background:#e8efff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}.life-label h2{font-size:20px;margin:0}.life-image{display:block;padding:0!important;aspect-ratio:1;width:100%;overflow:hidden;background:#eef2f8;border:0;border-radius:18px;margin:12px 0}.life-image img{display:block;width:100%;height:100%;object-fit:contain}.life-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.life-modes button{flex:1;white-space:nowrap;font-size:14px;padding:10px;border:1px solid #e0e7f2;background:#f6f8fc}.life-modes button.selected{border-color:#9cb9ef;background:linear-gradient(115deg,#e6efff,#f8eaf3);color:#244e8f}.life-upload{display:block;border:1px dashed #a9bfdf;background:#f6f9ff;border-radius:14px;padding:18px;text-align:center;color:#345a8e;cursor:pointer;margin:12px 0}.life-upload{position:relative}.life-upload:focus-within{outline:2px solid #9bb8ed}.life-upload input{position:absolute;clip-path:inset(50%);width:1px;height:1px;padding:0;border:0}.life-card .life-refinement{min-height:80px}.life-card textarea{min-height:125px}.life-ideas{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.life-ideas>span{width:100%;font-size:13px;color:#718096;margin-bottom:4px}.life-ideas button{font-size:12px;padding:7px 10px;background:#f5f7fc;color:#59719a}.life-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.97);border:1px solid #d6e2f5;border-radius:20px;padding:18px 22px;position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));box-shadow:0 8px 35px #26496b12;z-index:5}.life-footer small{display:block;color:#74839b;margin-top:6px}.life-footer button{min-width:200px;margin:0}
@media(max-width:680px){.life-layout{grid-template-columns:1fr;gap:0}.life-card{padding:18px;border-radius:20px}.life-identity{position:static}.life-identity .life-image{max-width:240px;margin:12px auto}.life-footer{bottom:calc(76px + env(safe-area-inset-bottom));padding:14px;flex-direction:column;align-items:stretch}.life-footer>div{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}.life-footer small{margin:0;font-size:11px}.life-footer button{width:100%;min-width:0}.life-entry{padding:18px}.life-label h2{font-size:18px}}

/* Optional inspiration uses only compressed public thumbnails. */
.life-examples{margin:12px 0 22px;padding:16px 20px;border:1px solid #d6e2f4;border-radius:20px;background:linear-gradient(120deg,#f0f5ff,#fff4f9)}
.life-examples summary{cursor:pointer;color:#31527c;font-weight:600;font-size:15px}.life-examples summary small{color:#788aa3;font-weight:400;margin-left:10px}.life-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:580px;margin:16px 0}.life-example-grid button{display:grid;gap:8px;padding:0;border:0;background:transparent;color:#4c6789;box-shadow:none;overflow:hidden;font-size:13px}.life-example-grid img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:14px;background:#f1f3f8}.life-examples>.help{font-size:12px;margin:8px 0 0}
@media(max-width:680px){.life-examples{padding:14px}.life-example-grid{gap:9px}.life-examples summary small{font-size:11px}}

/* User creation flow: one photo, one clear next step. */
.compose-section-title{display:flex;align-items:center;gap:10px;margin:18px 0 14px}.compose-section-title h2{margin:0;font-size:18px;line-height:1.4}.compose-step{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#e8efff;color:#345887;font-weight:700;font-size:13px}.compose-optional{margin-left:auto;color:#536981;font-size:13px}.compose-eyebrow{display:block;font-size:12px;color:#536981;letter-spacing:.06em}.compose-template-teaser{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:16px;padding:14px;border:1px solid #dce4f7;border-radius:18px;background:linear-gradient(125deg,#f0f5ff,#fff6fa)}.compose-template-teaser strong{display:block;font-size:16px;margin:3px 0}.compose-template-teaser .help{margin:5px 0;line-height:1.7}.compose-template-example{position:relative;padding:0;border:0;border-radius:14px;overflow:hidden;aspect-ratio:1;background:#eaf0f7;width:100%}.compose-template-example img{display:block;width:100%;height:100%;object-fit:contain}.compose-template-example span,.compose-photo-preview>span{position:absolute;right:7px;bottom:7px;border-radius:6px;background:rgba(17,32,51,.78);color:white;padding:2px 6px;font-size:11px}.compose-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:154px;margin:12px 0;padding:22px;border:1px dashed #a9bde8;border-radius:18px;background:linear-gradient(120deg,#f0f5ff,#fff6fa);cursor:pointer;text-align:center;overflow:hidden}.compose-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0;z-index:1}.compose-upload:focus-within{outline:3px solid #9abbff;outline-offset:3px}.compose-upload strong{font-size:16px;color:#284f87}.compose-upload-icon{font-size:30px;line-height:1;color:#3767ae}.compose-upload .help{font-weight:400;color:#506581}.compose-upload.is-locked{min-height:90px;cursor:default}.compose-upload.is-locked .compose-upload-icon{display:none}.compose-upload.is-locked input{cursor:default}.compose-photo-preview{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:#edf1f8;border-radius:18px;overflow:hidden}.compose-reference .compose-photo-preview .photo{width:100%;height:100%;max-height:none;object-fit:contain}.compose-form .compose-section-title{margin-top:0}.compose-form textarea{min-height:120px;height:120px}.compose-optimize{margin:10px 0 2px;color:#315789;background:#f1f5ff}.compose-lightbox-photo{max-height:70vh;object-fit:contain}.compose-layout .help,.compose-layout .muted{color:#536781}.compose-layout select{margin-bottom:8px}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.gallery-heading h1{margin:0}.gallery-rewards-link{color:#536781;font-size:13px;white-space:nowrap}.gallery-community h2,.gallery-official h2{font-size:19px;margin:5px 0 16px}.gallery-community{margin-top:26px}.gallery-community-sparse{grid-template-columns:repeat(auto-fill,minmax(180px,250px));gap:16px}.gallery-empty{border:1px solid #dae4f5;border-radius:20px;padding:24px;background:linear-gradient(120deg,#eff5ff,#fff7fb);max-width:680px}.gallery-empty strong{font-size:18px}.gallery-empty .button{margin-top:8px}.gallery-official{margin-top:32px;padding-top:26px;border-top:1px solid #dbe3f0}.gallery-official>.help{margin:0 0 18px;color:#536781}.gallery-official .template-image-status{font-size:12px}.gallery-campaign-details{margin-top:28px;color:#536781}.gallery-campaign-details>summary{cursor:pointer;margin-bottom:12px}.gallery-heading .muted,.gallery-community small{color:#536781}
@media(max-width:760px){.compose-template-teaser{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px}.compose-template-teaser .help{font-size:12px;line-height:1.55}.compose-template-teaser strong{font-size:14px}.compose-section-title h2{font-size:17px}.compose-upload{min-height:140px}.compose-form textarea{min-height:108px;height:108px}.gallery-heading{align-items:flex-start;gap:8px}.gallery-rewards-link{font-size:12px;margin-top:10px}.gallery-community-sparse{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-official .row.between{align-items:flex-start}.gallery-official h2{font-size:18px}.gallery-official .row>a{font-size:13px}.gallery-empty{padding:20px}}
.mine-projects{margin:26px 0}.mine-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.mine-project-card{padding:14px;min-width:0}.mine-project-title h3{font-size:16px;margin:2px 0 4px;overflow-wrap:anywhere}.mine-project-title .help{font-size:12px;color:#536781}.mine-project-modes{display:flex;padding:3px;border-radius:12px;background:#edf2f9;gap:4px;margin:12px 0}.mine-project-modes button{flex:1;border:0;padding:7px 8px;background:transparent;color:#536781}.mine-project-modes button[aria-pressed=true]{background:linear-gradient(120deg,#e4eeff,#fff1f7);color:#254f90;box-shadow:0 0 0 1px #b9cef1}.mine-project-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border:0;border-radius:14px;background:#edf1f7;padding:0;overflow:hidden}.mine-project-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.mine-project-preview>span:not(.help){position:absolute;right:8px;bottom:8px;background:rgba(17,32,51,.78);color:white;border-radius:6px;font-size:11px;padding:2px 6px}.mine-project-state{font-size:12px;color:#536781;min-height:38px}.mine-project-actions{display:flex;flex-wrap:wrap;gap:8px}.mine-project-actions>button,.mine-project-actions>details>summary{font-size:13px;padding:7px 10px}.mine-project-actions details>summary{cursor:pointer}.mine-loose-assets{margin-top:22px}.mine-loose-assets>summary{cursor:pointer;color:#31527c;font-weight:600}.mine-loose-assets .grid{margin-top:16px}
@media(max-width:900px){.mine-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.mine-group-grid{grid-template-columns:1fr}.mine-project-card{padding:16px}.mine-project-preview{max-height:none}.mine-project-state{min-height:0}}

/* Account overview: keep balance, shortcuts and optional activities aligned. */
.mine-account{margin-bottom:20px}.mine-account-heading{display:flex;align-items:center;gap:12px;margin:0 0 18px;min-width:0}.mine-avatar{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid #c9d9f4;border-radius:17px;background:linear-gradient(135deg,#e4eeff,#fff1f7);color:#28568e;font-size:23px;font-weight:750}.mine-account-identity{min-width:0;flex:1}.mine-account-identity h1{font-size:23px;margin:0 0 2px}.mine-account-identity p{margin:0;color:#536781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.mine-account-heading .mine-logout{flex:none;color:#536781;border:0;background:transparent;box-shadow:none;padding:9px 2px;font-size:12px}.mine-wallet-card{padding:20px 22px;border:1px solid #bed2f4;border-radius:22px;background:linear-gradient(115deg,#e5efff 0%,#eff2ff 57%,#fff0f6 100%);box-shadow:0 8px 26px rgba(67,102,163,.06);color:#254f83}.mine-wallet-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}.mine-wallet-heading>a{color:#315887;font-size:12px;text-decoration:none;white-space:nowrap}.mine-wallet-balance{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:12px 0 16px}.mine-wallet-balance strong{font-size:42px;line-height:1.2;letter-spacing:-1px;overflow-wrap:anywhere;max-width:100%}.mine-wallet-balance>span{font-size:13px;color:#4d6482}.mine-wallet-unavailable{margin:16px 0;font-size:18px;font-weight:600}.mine-wallet-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(89,125,181,.15);padding-top:12px;font-size:13px}.mine-wallet-footer>a{color:#254f83;text-decoration:none;font-weight:600}.mine-wallet-footer>a>span{margin-left:8px}.mine-wallet-footer #mine-checkin-entry:empty{display:none}.mine-wallet-footer #mine-checkin-entry{max-width:100%;font-size:12px}.mine-wallet-footer #mine-checkin-entry button{font-size:12px;padding:5px 12px;background:rgba(255,255,255,.65);border-color:#c3d3ee;color:#315887}.mine-wallet-footer #mine-checkin-entry .help{display:block;margin:0 0 4px;color:#4d6482}.mine-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 8px}.mine-quick-grid>a,.mine-quick-grid>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;border:0;background:transparent;box-shadow:none;text-decoration:none;color:#354e70;font-size:13px;padding:10px 2px;border-radius:14px;line-height:1.5}.mine-quick-grid>a:hover,.mine-quick-grid>button:hover{background:#eaf0fa}.mine-quick-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#4266b0;background:linear-gradient(140deg,#e9efff,#f8eff8)}.mine-quick-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.mine-account-more{font-size:12px;color:#536781}.mine-account-more>summary{cursor:pointer;padding:6px 0}.mine-account-more>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.mine-account-more button,.mine-account-more .button{font-size:13px}@media(min-width:900px){.mine-account{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px 20px;align-items:stretch}.mine-account-heading,.mine-account-more{grid-column:1/-1}.mine-account-heading{margin-bottom:0}.mine-wallet-card{min-width:0;max-width:none}.mine-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:12px;max-width:none}.mine-quick-grid>a,.mine-quick-grid>button{flex-direction:row;gap:9px;background:#fff;border:1px solid #dce5f3;padding:12px 8px}.mine-account-more>summary{padding:0}}@media(max-width:480px){.mine-wallet-card{padding:18px;border-radius:20px}.mine-account-identity h1{font-size:21px}.mine-avatar{width:42px;height:42px;flex-basis:42px;border-radius:14px}.mine-quick-grid{gap:4px}.mine-quick-grid>a,.mine-quick-grid>button{font-size:12px}.mine-wallet-balance strong{font-size:40px}}

.task-result-viewer{width:100%;max-width:680px;margin:auto}.task-result-switch{display:flex;gap:6px;margin-bottom:12px;padding:4px;background:#edf2f9;border-radius:14px}.task-result-switch>button{flex:1;min-width:0;border:0;background:transparent;color:#536781;font-size:13px;padding:8px 6px}.task-result-switch>button[aria-pressed=true]{background:linear-gradient(120deg,#e4eeff,#fff1f7);color:#254f90;box-shadow:0 0 0 1px #b9cef1}.task-result-frame{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:0;overflow:hidden;border-radius:18px;background:#edf1f7}.task-result-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.task-result-frame>span{position:absolute;bottom:9px;right:9px;background:rgba(17,32,51,.8);border-radius:7px;color:white;padding:3px 8px;font-size:11px}.task-result-lightbox{display:block;width:100%;max-height:70vh;object-fit:contain}.task-result-next{width:100%;max-width:680px;margin:0 auto}.task-result-next h2{margin-bottom:4px}.task-result-next>.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.task-result-next>.row>button{min-width:0;padding:10px 7px;font-size:13px;white-space:normal}.task-result-viewer #task-preview-status:empty{display:none}@media(max-width:480px){.task-result-switch>button{font-size:12px}.task-result-next{padding:14px}.task-result-next>.row{gap:6px}.task-result-next>.row>button{font-size:12px;padding:10px 5px}}

/* Language is a display preference: it never alters account or creation data. */
.header-actions{display:flex;align-items:center;gap:14px;min-width:0}.language-control{display:flex;align-items:center;gap:4px;margin:0;color:#3a587a;white-space:nowrap}.language-control select{width:auto;min-height:38px;padding:7px 24px 7px 8px;border:1px solid #cbd8ef;border-radius:12px;background:#f8faff;font:inherit;font-size:13px;color:#244970}.language-control select:focus-visible{outline:3px solid #a3c4ff;outline-offset:2px}
html[lang="en"] .creation-hero h1{font-size:clamp(30px,4.7vw,58px);line-height:1.08;max-width:14ch}html[lang="en"] button,html[lang="en"] .button{overflow-wrap:break-word}html[lang="en"] .creation-kicker,html[lang="en"] .compose-eyebrow{letter-spacing:.035em}html[lang="en"] .life-footer{gap:12px}html[lang="en"] nav a{min-width:0;font-size:14px}
@media(max-width:640px){.header-actions{gap:7px}.language-control{gap:0}.language-control>span{display:none}.language-control select{font-size:12px;max-width:82px;padding:7px 3px}.header-actions #account{gap:5px}html[lang="en"] #account>a.help{display:none}html[lang="en"] .life-footer>div{min-width:0}html[lang="en"] .life-footer button{max-width:54%;white-space:normal}html[lang="en"] .creation-hero h1{font-size:36px}html[lang="en"] .creation-toolbar{flex-wrap:wrap;gap:8px}}

/* Keep template price legible without joining it to a long translated category. */
.template .template-meta{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline}.template-meta .template-category{min-width:0}.template-meta .template-cost{white-space:nowrap}.wallet-balance-card .help,.wallet-balance-card .wallet-hold{color:#4d6482}.wallet-hold{font-size:13px;margin:6px 0}@media(max-width:600px){.template .template-meta{display:grid;gap:2px}.template-meta .template-category{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

.wallet-balance-card{margin-top:14px}