/* Shared surface and interaction system for marketing and seller workflows. */
:root {
  --control-border: #c5bdb2;
  --control-surface: linear-gradient(160deg, #fffefa, #f3eee5);
  --control-primary: linear-gradient(135deg, #ff9670 0%, #ff704b 48%, #f45c3b 100%);
  --control-shadow: 0 1px 2px #19172412, 0 4px 10px #1917240a, inset 0 1px 0 #ffffff80;
  --control-hover-shadow: 0 3px 5px #19172412, 0 8px 18px #19172412, inset 0 1px 0 #ffffff80;
}
:root[data-theme="dark"] {
  --control-border: #4c5870;
  --control-surface: linear-gradient(160deg, #293246, #1d2535);
  --control-primary: linear-gradient(135deg, #ffad87, #ff8e69 55%, #f87857);
  --control-shadow: 0 1px 2px #0003, 0 4px 12px #0002, inset 0 1px 0 #ffffff12;
  --control-hover-shadow: 0 4px 6px #0003, 0 10px 22px #0003, inset 0 1px 0 #ffffff18;
}
/* Include generated controls inside reviews and photo editors. */
:root body button, :root body .button, #account-panel .auth-button {
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--control-surface);
  color: var(--ink);
  box-shadow: var(--control-shadow);
  min-height: 40px;
  padding: 10px 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}
:root body .button, #account-panel .auth-email {
  background: var(--control-primary);
  border-color: #c94d2c;
  color: #211912;
  padding: 14px 20px;
  min-height: 48px;
}
:root body .button.outline, #account-panel .auth-secondary {
  background: var(--control-surface);
  border-color: var(--control-border);
  color: var(--ink);
}
:root body .button.small { min-height: 40px; padding: 10px 14px; }
:root body .pilot .button {
  background: linear-gradient(135deg, #fff39b, #ffe16a);
  color: #211912;
  border-color: #9c721e;
}
#account-panel .auth-google { background: linear-gradient(160deg,#fff,#f5f6f8); color:#1f1f1f; border-color:#a6a9ad; }
:root body button.danger { color:#a42c25; border-color:#deb0aa; background:linear-gradient(160deg,#fff7f5,#fce9e5); }
[data-theme="dark"] button.danger { color:#ffc0b5; border-color:#7e4743; background:linear-gradient(160deg,#422d33,#33252e); }
:root body .text-button { font-size:12px; padding:9px 12px; }
:root body .icon-button { min-width:40px; padding:6px; font-size:22px; }
:root body .batch-item { text-align:left; box-shadow:none; background:transparent; border-color:transparent; }
:root body .batch-item.active { background:var(--control-surface); border-color:var(--control-border); box-shadow:inset 3px 0 0 var(--orange); }
:root body .panel-step { border-radius:0; border-width:0 1px 0 0; box-shadow:none; font-size:9px; }
:root body .panel-step.active { background:linear-gradient(135deg,#fff4b1,#ffe570); color:#211912; }
:root body .theme-toggle { background:transparent; border-color:transparent; box-shadow:none; padding:4px; }
:root body .motion-toggle { font-size:10px; background:transparent; box-shadow:none; border-color:transparent; color:var(--muted); padding:8px; }
:root body .row-actions button, :root body .photo-toolbar button, :root body .photo-card button { font-size:11px; min-height:36px; padding:8px 11px; }
@media (hover:hover) {
  :root body button:hover:not(:disabled), :root body .button:hover, #account-panel .auth-button:hover:not(:disabled) {
    box-shadow:var(--control-hover-shadow); border-color:var(--muted); filter:brightness(1.035); transform:none;
  }
  :root body .button:hover, #account-panel .auth-email:hover:not(:disabled) { background:var(--control-primary); color:#211912; border-color:#bd4528; }
  :root body .button.outline:hover, #account-panel .auth-secondary:hover:not(:disabled) { background:var(--control-surface); color:var(--ink); }
  :root body .pilot .button:hover { background:linear-gradient(135deg,#fff39b,#ffe16a); }
}
:root body button:active:not(:disabled), :root body .button:active, #account-panel .auth-button:active:not(:disabled) {
  transform:none; box-shadow:inset 0 2px 4px #19172418;
}
:root body button:disabled, :root body button[aria-disabled="true"] { opacity:.48; box-shadow:none; filter:none; cursor:not-allowed; }
:root body :is(button,.button):focus-visible { outline:3px solid #176e8c; outline-offset:4px; }
[data-theme="dark"] :is(button,.button):focus-visible { outline-color:#8adce9; }
/* Quiet gradients give the familiar palette a little depth. */
.hero { background-image:radial-gradient(ellipse at 85% 15%,#ffad7a24,transparent 55%),radial-gradient(ellipse at 10% 90%,#a5eced38,transparent 60%); background-size:auto; }
.hero-copy > .lead { background:transparent; }
#pricing { background:linear-gradient(160deg,#f4efe5,#ebe5da); }
.pilot { background:linear-gradient(125deg,#ff9a6e,#ff704b 80%); }
[data-theme="dark"] .hero { background-image:radial-gradient(ellipse at 85% 15%,#ff906b18,transparent 55%),radial-gradient(ellipse at 10% 90%,#79d7df12,transparent 60%); }
[data-theme="dark"] #pricing { background:linear-gradient(160deg,#1c2333,#141a27); }
[data-theme="dark"] .pilot { background:linear-gradient(125deg,#2f2830,#202333); }
.steps article, .channel, .plans article { border-radius:14px; border-color:var(--control-border); box-shadow:0 2px 4px #19172408,0 12px 28px #1917240a; }
.steps article:hover, .channel:hover { transform:none; }
.workspace { background:linear-gradient(155deg,var(--paper),var(--soft)); }
.workspace aside { background:var(--paper); }
:root body dialog { border:1px solid var(--control-border); border-radius:18px; box-shadow:0 24px 80px #0004; }
:root body dialog::backdrop { background:#11182766; backdrop-filter:blur(4px); }
:root body input:not([type="checkbox"]):not([type="radio"]), :root body select, :root body textarea { border-radius:8px; }
:root body .table-wrap, :root body .local-notice, :root body .notice, :root body #account-panel { border-radius:12px; }
/* Motion handles entrances. Content remains visible if JavaScript fails. */
.hero-copy, .comic-stage { animation:none; }
.reveal-ready { opacity:1; transform:none; transition:none; }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { transition:none !important; }
@media (max-width:700px) {
  :root body .motion-toggle { font-size:8px; padding:4px; }
  :root body .theme-toggle { padding:2px; }
  :root body .button.small { font-size:10px; padding:10px; }
  :root body header { flex-wrap:wrap; gap:12px; }
  :root body header nav { flex-wrap:wrap; gap:8px; }
  :root body .row-actions button, :root body .photo-toolbar button, :root body .photo-card button { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  :root body *, :root body *::before, :root body *::after { transition:none !important; animation:none !important; }
}

:root body .dialog-actions .button { box-shadow:var(--control-shadow); }
:root body input[type="file"]::file-selector-button {
  font:700 12px/1.35 "DM Sans",sans-serif;
  min-height:40px;
  margin:4px 10px 4px 0;
  padding:10px 14px;
  border:1px solid var(--control-border);
  border-radius:8px;
  background:var(--control-surface);
  color:var(--ink);
  box-shadow:var(--control-shadow);
  cursor:pointer;
}
:root body input[type="file"]::file-selector-button:hover { box-shadow:var(--control-hover-shadow); }