/* Scoped commission experience: keep the portfolio's existing dark theme and header. */
.commission-page main { padding-bottom: clamp(46px, 7vw, 100px); }
.commission-page .commission-intro {
  width: min(1180px, calc(100% - 36px));
  margin: 28px auto 0;
  padding: clamp(24px,4vw,44px);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .48fr);
  align-items: center;
  gap: clamp(20px,4vw,58px);
  border-radius: 22px;
}
.commission-page .commission-intro h1 {
  font-size: clamp(26px,4vw,45px);
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 10px;
}
.commission-page .commission-intro p { max-width: 660px; color: var(--text-secondary); }
.commission-page .commission-intro .eyebrow { color: var(--primary-hover); }
.commission-page .commission-intro img {
  aspect-ratio: 1.8 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: 13px;
  border: 1px solid var(--border);
}
.commission-builder { width: min(1180px,calc(100% - 36px)); margin: 18px auto 0; }
.commission-builder * { box-sizing: border-box; }
.commission-builder button, .commission-builder input, .commission-builder textarea { font: inherit; }
.commission-builder button { cursor: pointer; }
.commission-builder-head {
  padding: clamp(20px,4vw,35px);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  margin-bottom: 16px;
}
.commission-builder h2 { color: var(--text); font-size: clamp(22px,3vw,31px); margin: 7px 0 8px; }
.commission-builder h3 { font-size: clamp(16px,2vw,20px); margin: 4px 0 12px; color: var(--text); }
.commission-builder-head p { margin-bottom: 0; color: var(--text-secondary); }
.commission-kicker { font-size: 11px; color: var(--primary-hover); font-weight: 800; letter-spacing: .12em; }
.commission-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.42fr); gap: 16px; align-items: start; }
.commission-main { min-width: 0; display: grid; gap: 16px; }
.commission-panel {
  padding: clamp(18px,3vw,28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  min-width: 0;
}
.commission-help { font-size: 12px; color: var(--text-secondary); line-height: 1.65; margin: 4px 0 16px; }
.commission-categories { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.commission-category {
  min-height: 95px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 5px; font-size: 12px; padding: 10px 4px;
}
.commission-category:hover,.commission-option:hover { border-color: var(--primary-hover); }
.commission-category.active,.commission-option.is-selected,.commission-pill.active {
  border-color: var(--primary-hover);
  box-shadow: inset 0 0 0 1px var(--primary-hover);
  background: var(--primary-soft);
  color: var(--text);
}
.commission-category-symbol { font-size: 30px; line-height: 1; color: var(--primary-hover); font-family: Georgia,serif; }
.commission-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.commission-item-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
.commission-option {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 13px; padding: 0;
  overflow: hidden; color: var(--text);
  text-align: left; min-width: 0;
}
.commission-option-image {
  height: 122px;
  width: 100%;
  display: block;
  background: var(--bg-deep);
  overflow: hidden;
}
.commission-artwork,.commission-option-image>svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.commission-option-copy { padding: 10px 11px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.commission-option-copy strong { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.commission-option-copy small { font-size: 11px; color: var(--primary-hover); margin-top: auto; }
.commission-background-choices .commission-option-image { height: 105px; }
.commission-variation-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
.commission-divider { height: 1px; background: var(--border); margin: 25px 0; }
.commission-people-title { font-size: clamp(20px,2.4vw,25px) !important; margin-bottom: 8px !important; }
.commission-quantity-help { font-size: 14px; max-width: 610px; }
.commission-quantity { display: inline-flex; max-width: 100%; border: 1px solid var(--border-light); border-radius: 12px; align-items: center; overflow: hidden; }
.commission-quantity button { background: var(--surface-hover); color: var(--text); border: 0; min-width: 58px; min-height: 55px; padding: 9px 16px; font-size: 26px; font-weight: 750; }
.commission-quantity strong { min-width: 112px; text-align: center; padding: 0 14px; font-size: 18px; font-variant-numeric: tabular-nums; }
.commission-extra { display: flex; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; }
.commission-check {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 52px; font-size: 16px; line-height: 1.5;
  color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.commission-check input {
  position: absolute; width: 30px; height: 30px;
  opacity: 0; margin: 0; cursor: pointer;
}
.commission-checkmark {
  position: relative; width: 30px; height: 30px; flex: 0 0 30px;
  border: 2px solid var(--border-light); border-radius: 8px;
  background: var(--bg); transition: background-color .15s, border-color .15s;
}
.commission-check input:checked + .commission-checkmark {
  background: var(--primary-hover); border-color: var(--primary-hover);
}
.commission-check input:checked + .commission-checkmark::after {
  content: ""; position: absolute; left: 9px; top: 4px;
  width: 7px; height: 13px; border: solid var(--bg-deep);
  border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.commission-check input:focus-visible + .commission-checkmark {
  outline: 3px solid var(--primary-hover); outline-offset: 3px;
}
.commission-check-label { min-width: 0; }
.commission-explicit-group {
  flex: 1 1 100%; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.commission-r18-title { margin: 0 0 12px !important; font-size: 19px !important; }
.commission-explicit-choices { display: grid; grid-template-columns: 1fr; margin-bottom: 8px; }
.commission-explicit-choices .commission-single-choice { text-align: left; }
.commission-explicit-note { margin: 12px 0 0; font-size: 14px; }
.commission-explicit-count {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  align-items: center; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 16px; color: var(--text);
}
.commission-explicit-stepper {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--border-light); border-radius: 10px;
}
.commission-explicit-stepper button {
  min-width: 46px; min-height: 46px; padding: 4px 12px; font-size: 23px;
  color: var(--text); background: var(--surface-hover); border: 0;
}
.commission-explicit-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.commission-explicit-stepper strong {
  min-width: 63px; padding: 0 10px; font-size: 18px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.commission-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.commission-pill {
  padding: 12px 15px; min-height: 48px;
  border-radius: 10px; border: 1px solid var(--border-light);
  background: var(--bg); color: var(--text-secondary); font-size: 14px; font-weight: 650; line-height: 1.5;
}
.commission-panel details { border: 1px solid var(--border); border-radius: 10px; margin: 9px 0; background: var(--bg); }
.commission-panel summary { cursor: pointer; padding: 12px 14px; font-weight: 750; color: var(--text); }
.commission-panel details p { color: var(--text-secondary); font-size: 14px; padding: 0 14px 13px; margin: 0; line-height: 1.7; }
.commission-terms-heading { margin-top: 26px !important; }
.commission-usage-choices,.commission-privacy-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.commission-usage-choices .commission-pill,.commission-privacy-choices .commission-pill { text-align: left; }
.commission-single-choice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 60px; padding: 12px 16px; text-align: left;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.commission-single-choice .commission-choice-indicator {
  position: relative; display: block; flex: 0 0 27px;
  width: 27px; height: 27px; border: 2px solid var(--border-light);
  border-radius: 50%; background: var(--bg);
}
.commission-single-choice.active .commission-choice-indicator {
  border-color: var(--primary-hover); background: var(--primary-hover);
}
.commission-single-choice.active .commission-choice-indicator::after {
  content: ""; position: absolute; left: 7px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg-deep);
}
.commission-single-choice:not(.active) {
  background: var(--bg); box-shadow: none; border-color: var(--border-light);
}
.commission-single-choice .commission-choice-label { flex: 1; min-width: 0; }
.commission-single-choice.active { font-weight: 800; }
.commission-single-choice:focus-visible { outline: 3px solid var(--primary-hover); outline-offset: 3px; }
.commission-policy-details { overflow: hidden; }
.commission-policy-grid { padding: 4px 15px 13px; display: grid; gap: 10px; }
.commission-policy-item { border-bottom: 1px solid var(--border); padding: 4px 0 10px; }
.commission-policy-item:last-child { border-bottom: 0; }
.commission-policy-item.is-current { border: none; padding: 4px 0 10px; }
.commission-policy-item.is-current strong { font-size: 16px; color: var(--primary-hover); }
.commission-policy-item.is-current p { font-size: 15px; }
.commission-policy-item strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 3px; }
.commission-policy-item p { font-size: 14px; line-height: 1.6; padding: 0 !important; margin: 0 !important; }
.commission-policy-details>.commission-help { padding: 4px 15px 15px !important; margin: 0 !important; }
.commission-schedule { scroll-margin-top:100px; }
.commission-schedule-reference {font-size:12px;line-height:1.65;color:var(--text-secondary);margin:9px 0 0;}
.commission-schedule-estimate strong small,.commission-duration-reference {display:block;font-size:11px;line-height:1.6;font-weight:600;color:var(--text-muted);margin-top:4px;}
.commission-schedule .commission-schedule-estimate { display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 16px;margin:16px 0;border:1px solid var(--border-purple);border-radius:11px;background:var(--primary-soft);font-size:13px; }
.commission-schedule-estimate span {color:var(--text-secondary);white-space:nowrap;}
.commission-schedule-estimate strong {color:var(--text);text-align:right;font-weight:800;line-height:1.6;}
.commission-calendar-head {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 10px;}
.commission-calendar-head>strong {font-size:18px;color:var(--text);}
.commission-calendar-head>div {display:flex;gap:7px;}
.commission-calendar-head button {border:1px solid var(--border-light);border-radius:10px;background:var(--surface-hover);color:var(--text);min-width:41px;min-height:39px;font-size:22px;cursor:pointer;}
.commission-calendar-week,.commission-calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
.commission-calendar-week span {color:var(--text-muted);font-size:12px;text-align:center;padding:6px 0;}
.commission-calendar-date,.commission-calendar-blank {box-sizing:border-box;display:flex;position:relative;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-width:0;min-height:63px;border-radius:9px;}
.commission-calendar-date {border:1px solid var(--border);background:var(--bg);color:var(--text-secondary);font-size:14px;}
.commission-calendar-date.is-unannounced {opacity:.58;}
.commission-calendar-date.is-open {cursor:pointer;color:var(--text);border-color:rgba(88,177,129,.65);background:rgba(88,177,129,.12);}
.commission-calendar-date.is-open:hover {background:rgba(88,177,129,.24);}
.commission-calendar-date.is-selected {outline:2px solid var(--primary-hover);outline-offset:-2px;}
/* Selecting a proposed start shades every projected production day, including any days
   not individually offered as a start date. This is a preview, never a reservation. */
.commission-calendar-date.is-range-core {background:rgba(161,117,214,.31);border-color:rgba(180,143,237,.77);color:var(--text);opacity:1;}
.commission-calendar-date.is-range-extra {background:repeating-linear-gradient(135deg,rgba(161,117,214,.22),rgba(161,117,214,.22) 5px,rgba(161,117,214,.09) 5px,rgba(161,117,214,.09) 10px);border-color:rgba(180,143,237,.46);color:var(--text);opacity:1;}
.commission-calendar-date.is-range-core.is-open:hover,.commission-calendar-date.is-range-extra.is-open:hover {background:rgba(161,117,214,.44);}
.commission-calendar-date.is-range-start {box-shadow:inset 0 0 0 2px var(--primary-hover);}
.commission-calendar-date.is-range-finish {border-color:var(--primary-hover);box-shadow:inset 0 -3px var(--primary-hover);}
.commission-date-marker {font-size:10px;color:var(--text);font-weight:800;line-height:1.25;text-align:center;}
.commission-calendar-legend {display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:12px;}
.commission-calendar-legend>span {display:inline-flex;gap:7px;align-items:center;color:var(--text-secondary);font-size:12px;}
.commission-calendar-legend i {display:inline-block;width:15px;height:15px;border:1px solid rgba(180,143,237,.65);border-radius:4px;}
.commission-legend-core {background:rgba(161,117,214,.31);}
.commission-legend-extra {background:repeating-linear-gradient(135deg,rgba(161,117,214,.26),rgba(161,117,214,.26) 4px,transparent 4px,transparent 8px);}
.commission-schedule-nav {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.commission-schedule-nav button {background:var(--surface-hover);border:1px solid var(--border-purple);border-radius:8px;color:var(--text);padding:8px 10px;font-size:12px;cursor:pointer;}
.commission-schedule-nav button:hover {border-color:var(--primary-hover);}
.commission-date-number {font-variant-numeric:tabular-nums;font-weight:800;}
.commission-date-tag {font-size:10px;color:#b9e7c8;line-height:1.2;font-weight:800;text-align:center;}
.commission-date-dot {position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--primary-hover);}
.commission-schedule-empty {padding:13px 14px;border-radius:9px;border:1px dashed var(--border-light);font-size:13px;color:var(--text-secondary);line-height:1.6;margin:13px 0 0;}
.commission-schedule-selected {padding:11px 0 5px;font-size:13px;line-height:1.65;color:var(--text-secondary);}
.commission-schedule-selected strong {color:var(--text);}
.commission-schedule-selected span {display:block;color:var(--primary-hover);}
.commission-schedule-disclaimer {font-size:12px;line-height:1.75;color:var(--text-muted);margin:8px 0 0;}
@media(max-width:620px){.commission-calendar-week,.commission-calendar-grid{gap:3px}.commission-calendar-date,.commission-calendar-blank{min-height:51px}.commission-date-tag{font-size:9px}.commission-schedule .commission-schedule-estimate{display:block}.commission-schedule-estimate strong{display:block;text-align:left;margin-top:5px}}
/* Conventional calendar cells + independently draggable multi-day production strips. */
.commission-calendar-grid {grid-auto-rows:74px;align-items:stretch;}
.commission-calendar-date {align-items:flex-start;justify-content:flex-start;padding:7px 8px;background:var(--bg);border-color:var(--border);min-height:0;width:100%;height:100%;opacity:1;}
.commission-calendar-date.is-outside {opacity:.46;}
.commission-calendar-date.is-unannounced {opacity:.68;}
.commission-calendar-date.is-unannounced.is-outside {opacity:.3;}
.commission-calendar-date.is-open {background:var(--bg);border-color:var(--border);color:var(--text);cursor:pointer;}
.commission-calendar-date.is-open:hover {background:var(--surface-hover);border-color:var(--border-purple);}
.commission-calendar-date.is-range-core,.commission-calendar-date.is-range-extra,.commission-calendar-date.is-range-core.is-open:hover,.commission-calendar-date.is-range-extra.is-open:hover {
  background:var(--bg);border-color:var(--border);color:var(--text);opacity:1;
}
.commission-calendar-date.is-range-start,.commission-calendar-date.is-range-finish {box-shadow:none;}
.commission-calendar-date.is-selected {outline:1px solid var(--primary-hover);outline-offset:-2px;}
.commission-calendar-date.is-drop-target {background:rgba(88,177,129,.18)!important;border-color:rgba(88,177,129,.9)!important;outline:2px solid rgba(88,177,129,.6);outline-offset:-2px;}
.commission-date-open {position:absolute;bottom:7px;right:8px;width:5px;height:5px;border-radius:50%;background:#78c09c;}
.commission-date-dot {top:8px;right:7px;width:5px;height:5px;}
.commission-range-bar {position:relative;z-index:3;align-self:end;display:flex;align-items:center;gap:4px;min-width:0;height:30px;margin:0 2px 6px;border-radius:6px;padding:0 7px;
 border:1px solid rgba(181,152,226,.9);background:rgba(140,100,198,.94);color:#fff;cursor:grab;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.2);
 touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;white-space:nowrap;font-size:11px;line-height:1.2;font-weight:700;font-family:inherit;}
.commission-range-bar.commission-range-extra {background:repeating-linear-gradient(135deg,rgba(140,100,198,.95),rgba(140,100,198,.95) 6px,rgba(107,72,154,.96) 6px,rgba(107,72,154,.96) 12px);}
.commission-range-bar:hover {filter:brightness(1.15);}
.commission-range-bar:active {cursor:grabbing;}
.commission-range-bar .commission-range-label {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.commission-range-handle {font-size:14px;flex:none;line-height:1;}
.commission-range-bar:focus-visible,.commission-drag-template:focus-visible {outline:2px solid var(--primary-hover);outline-offset:2px;}
.commission-drag-tray {margin:12px 0 18px;padding:13px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);display:grid;gap:9px;}
.commission-drag-tray>strong {font-size:13px;font-weight:700;color:var(--text);}
.commission-drag-tray>p {margin:0;font-size:12px;line-height:1.5;color:var(--text-muted);}
.commission-drag-template {display:flex;flex-wrap:wrap;align-items:center;gap:9px;width:fit-content;max-width:100%;border:1px solid var(--border-purple);border-radius:10px;background:var(--primary-soft);color:var(--text);padding:9px 12px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;font-size:13px;font-weight:700;}
.commission-drag-template:active {cursor:grabbing;}
.commission-drag-template b {font-size:13px;color:var(--primary-hover);}
.commission-drag-template small {font-size:11px;color:var(--text-muted);font-weight:500;}
.commission-drag-grip {font-size:20px;color:var(--primary-hover);line-height:1;}
.commission-drag-ghost {position:fixed;z-index:999999;pointer-events:none;background:rgba(137,99,191,.96);color:#fff;
 border:1px solid rgba(195,159,239,.85);box-shadow:0 6px 20px rgba(0,0,0,.35);border-radius:9px;padding:9px 12px;min-width:105px;
 font-weight:700;font-size:12px;white-space:nowrap;transform:translate(14px,14px);}
.commission-drag-ghost.is-invalid {background:rgba(100,100,100,.85);border-color:rgba(160,160,160,.8);}
.commission-builder.is-commission-dragging .commission-range-bar {pointer-events:none;}
@media(max-width:620px){
 .commission-calendar-grid {grid-auto-rows:57px;gap:3px;}
 .commission-calendar-date {min-height:0;padding:5px;}
 .commission-range-bar {height:23px;padding:0 3px;margin:0 1px 4px;gap:2px;}
 .commission-range-handle {font-size:11px;}
 .commission-range-bar .commission-range-label {font-size:9px;}
 .commission-date-open {bottom:5px;right:5px;}
 .commission-drag-template {width:100%;justify-content:flex-start;}
}
/* Calendar divider lines instead of one rounded box per date.  Production strips
   stay independent overlays and preserve the same 7-column drag targets. */
.commission-calendar-week {gap:0;border-bottom:1px solid var(--border);}
.commission-calendar-week span {padding:9px 0 11px;}
.commission-calendar-grid {
  gap:0;
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  overflow:hidden;
  border-radius:0;
}
.commission-calendar-date,
.commission-calendar-date.is-open,
.commission-calendar-date.is-unannounced,
.commission-calendar-date.is-range-core,
.commission-calendar-date.is-range-extra,
.commission-calendar-date.is-range-core.is-open:hover,
.commission-calendar-date.is-range-extra.is-open:hover {
  box-sizing:border-box;
  border:0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  outline:none;
  box-shadow:none;
}
.commission-calendar-date.is-open:hover {background:var(--surface-hover);border-color:var(--border);}
.commission-calendar-date.is-selected,
.commission-calendar-date.is-range-start.is-selected {
  background:var(--primary-soft);
  outline:none;
  box-shadow:inset 0 2px var(--primary-hover);
}
.commission-calendar-date.is-drop-target {
  background:rgba(88,177,129,.16)!important;
  border-right:1px solid var(--border)!important;
  border-bottom:2px solid #78c09c!important;
  outline:none!important;
}
.commission-calendar-date:focus-visible {
  outline:2px solid var(--primary-hover);
  outline-offset:-3px;
}
.commission-range-bar {margin-left:1px;margin-right:1px;}
@media(max-width:620px) {
  .commission-calendar-week,.commission-calendar-grid {gap:0;}
}
/* Detailed commission terms draft and local-only reading acknowledgment. */
.commission-agreement {margin-top:26px;padding-top:22px;border-top:1px solid var(--border);min-width:0;}
.commission-agreement-header {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 10px;}
.commission-agreement-header h3 {margin:0!important;font-size:19px;color:var(--text);}
.commission-agreement-header>span {font-size:11px;line-height:1.4;letter-spacing:.02em;color:var(--text-secondary);border:1px solid var(--border-light);border-radius:7px;padding:5px 8px;}
.commission-agreement-intro {font-size:13px;line-height:1.75;color:var(--text-secondary);margin:0 0 12px;}
.commission-agreement-scroll {min-width:0;max-height:min(58vh,590px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-light) transparent;border:1px solid var(--border-light);border-radius:10px;background:var(--bg);padding:10px 17px 14px;}
.commission-agreement-scroll:focus-visible {outline:2px solid var(--primary-hover);outline-offset:2px;}
.commission-agreement-chapter {padding:13px 2px 14px;border-bottom:1px solid var(--border);}
.commission-agreement-chapter h4 {font-size:14px;font-weight:800;line-height:1.55;color:var(--text);margin:0 0 9px;}
.commission-agreement-chapter ul {padding-left:19px;margin:0;display:grid;gap:8px;list-style:disc;}
.commission-agreement-chapter li {font-size:13px;line-height:1.75;color:var(--text-secondary);overflow-wrap:anywhere;}
.commission-agreement-chapter li::marker {color:var(--primary-hover);}
.commission-agreement-footer {font-size:12px;line-height:1.7;color:var(--text-muted);margin:15px 0 0;}
.commission-agreement-ack {display:flex;align-items:flex-start;gap:11px;padding:14px 12px;margin-top:14px;border:1px solid var(--border-light);border-radius:10px;background:var(--surface-hover);cursor:pointer;font-size:13px;line-height:1.65;color:var(--text);}
.commission-agreement-ack input {margin:2px 0 0;flex:0 0 19px;width:19px;height:19px;accent-color:var(--primary);cursor:pointer;}
.commission-agreement-status {font-size:12px;line-height:1.55;color:var(--text-muted);margin:8px 1px 0;}
@media(max-width:620px) {.commission-agreement-scroll{max-height:420px;padding:9px 12px}.commission-agreement-chapter li{font-size:12.5px}.commission-agreement-header h3{font-size:17px}}
/* Keep the full terms optional and collapsed until the visitor requests them. */
.commission-panel details.commission-agreement {
  margin:26px 0 0;padding:0;border:1px solid var(--border-light);
  border-radius:12px;background:var(--bg);overflow:hidden;
}
.commission-panel details.commission-agreement > summary.commission-agreement-header {
  display:flex;align-items:center;gap:11px;flex-wrap:nowrap;
  margin:0;padding:14px 16px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.commission-panel details.commission-agreement > summary::-webkit-details-marker {display:none;}
.commission-panel details.commission-agreement > summary.commission-agreement-header:hover {background:var(--surface-hover);}
.commission-panel details.commission-agreement > summary.commission-agreement-header:focus-visible {outline:2px solid var(--primary-hover);outline-offset:-2px;}
.commission-agreement-header h3 {flex:1;min-width:0;margin:0!important;line-height:1.45;}
.commission-agreement-header .commission-agreement-badge {
  font-size:11px;line-height:1.4;color:var(--text-secondary);
  border:1px solid var(--border-light);border-radius:7px;
  padding:5px 8px;max-width:42%;
}
.commission-agreement-arrow {display:inline-block;flex:none;margin-left:auto;font-size:22px;line-height:1;color:var(--primary-hover);transition:transform .18s ease;}
.commission-agreement[open] .commission-agreement-arrow {transform:rotate(180deg);}
.commission-agreement[open] > summary.commission-agreement-header {border-bottom:1px solid var(--border);}
.commission-agreement-body {padding:14px 16px 16px;}
/* Explicitly hide closed content even in browsers that still lay out a closed <details> child. */
.commission-panel details.commission-agreement:not([open]) > .commission-agreement-body {display:none !important;}
.commission-panel details.commission-agreement .commission-agreement-intro {padding:0;margin:0 0 12px;line-height:1.75;}
.commission-panel details.commission-agreement .commission-agreement-footer {padding:0;margin:15px 0 0;}
.commission-panel details.commission-agreement .commission-agreement-status {padding:0;margin:8px 1px 0;}
@media(max-width:620px) {
  .commission-panel details.commission-agreement > summary.commission-agreement-header {padding:13px 12px;gap:8px;}
  .commission-agreement-body {padding:12px;}
  .commission-agreement-header .commission-agreement-badge {font-size:10px;padding:4px 6px;}
}
.commission-summary { position: sticky; top: 90px; padding: 23px 19px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; min-width: 0; }
.commission-summary h3 { font-size: 18px; margin: 6px 0 21px; }
.commission-summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.commission-summary-row strong { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.commission-total { border: 1px solid var(--border-purple); background: var(--primary-soft); padding: 17px; border-radius: 11px; margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.commission-total small { color: var(--text-secondary); }
.commission-total>strong { font-size: clamp(22px,2.5vw,29px); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.commission-total span { font-size: 11px; color: var(--text-muted); }
.commission-rate-date { color: var(--text-muted); font-size: 11px; }
.commission-license-note { padding: 10px; border-radius: 9px; background: var(--primary-soft); color: var(--text); font-size: 12px; }
.commission-summary-foot { border-top: 1px solid var(--border); padding-top: 14px; font-size: 11px; color: var(--text-muted); margin-bottom: 0; }
.commission-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 17px; }
.commission-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; font-size: 12px; color: var(--text); }
.commission-field input,.commission-field textarea {
  display: block; width: 100%; background: var(--bg);
  border: 1px solid var(--border-light); border-radius: 9px;
  color: var(--text); padding: 11px 12px;
}
.commission-field input:focus,.commission-field textarea:focus,.commission-builder button:focus-visible {
  outline: 2px solid var(--primary-hover); outline-offset: 2px;
}
.commission-field textarea { resize: vertical; }
.commission-preview-button { border: 0; background: var(--primary); color: var(--bg-deep); border-radius: 9px; padding: 12px 18px; font-weight: 800; margin-top: 19px; }
.commission-preview-button:hover { background: var(--primary-hover); }
.commission-email-preview { margin-top: 18px; padding: 16px; border-radius: 11px; border: 1px solid var(--border); }
.commission-email-preview strong { color: var(--primary-hover); }
.commission-email-preview p { color: var(--text-secondary); font-size: 12px; }
.commission-email-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.8 ui-monospace,Consolas,monospace; color: var(--text); }
.commission-disabled-submit { margin: 13px 0 0; font-size: 11px; color: var(--text-muted); }
@media (max-width: 900px) {
  .commission-layout { grid-template-columns: minmax(0,1fr); }
  .commission-summary { position: static; grid-row: 1; }
  .commission-intro { grid-template-columns: minmax(0,1fr) !important; }
  .commission-intro img { max-height: 170px; }
}
@media (max-width: 620px) {
  .commission-page .commission-intro,.commission-builder { width: min(100% - 24px,1180px); }
  .commission-categories { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .commission-item-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commission-choices:not(.commission-item-choices) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commission-background-choices { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 5px; }
  .commission-background-choices .commission-option-image { height: 72px; }
  .commission-background-choices .commission-option-copy { padding: 6px; }
  .commission-usage-choices,.commission-privacy-choices { grid-template-columns: 1fr; }
  .commission-quantity button { min-width: 52px; }
  .commission-fields { grid-template-columns: 1fr; }
}