/* C:\wamp\www\dash\assets\stussy-skin\stussy-skin.css
   The Stussy skin: the profile and commands pages' stone, gold and parchment look, laid over the streamy.tools
   (OneUI) layout of the pages that opt in (inc/_global/stussy_skin.php adds "stussy-skin sk-<page>" to <body>):
   integrations.php (Stussy Bot Hub), overlay-editor.php (Alert Editor), stussy.php (What is Stussy?),
   stussy_admin.php (Stussy admin) and stussy/callback.php (Channel connected).
   EVERY rule is scoped under body.stussy-skin, and this file is only ever linked on those pages, so the rest of
   the site keeps its normal look. The shared header, navigation and footer keep their markup and behaviour; only
   their colours, fonts and edges change here.
   Why the selectors are long: the dash's dark theme (assets/css/oneui.min.css, "html.dark ...") styles the frame
   with id selectors and some utilities with !important, so a rule here matches that weight (and wins by coming
   later) or, only where the theme itself uses !important, uses it too.
   sk-frame-only pages (the profile and the commands page, which style their own content with profile.css and
   commands.css) get only the FRAME rules: page background, header, gold logo, navigation, footer, account menu
   and the focus ring. Every content rule reads "body.stussy-skin:not(.sk-frame-only)" (tools/frame-only.js).
   Rules: text meets WCAG AA on its own background (every panel has a flat colour under its texture); every
   control shows a gold focus ring; nothing may push a 390 px phone sideways; no em or en dash anywhere. */

/* ==== 1. the page and the Bootstrap variables ============================================================== */
/* the dark theme paints <html> navy; below a short page that would show under the footer */
html:has(> body.stussy-skin) { background-color: #0e0f0b; }
body.stussy-skin {
  --bs-body-bg: var(--sk-stone-dark); --bs-body-bg-rgb: 21, 22, 15;
  --bs-body-color: var(--sk-text); --bs-body-color-rgb: 244, 236, 216;
  --bs-body-font-family: var(--sk-font-body);
  --bs-emphasis-color: #fff8e6; --bs-secondary-color: var(--sk-muted); --bs-tertiary-color: var(--sk-faint);
  --bs-secondary-bg: var(--sk-stone-lit); --bs-tertiary-bg: var(--sk-stone);
  --bs-border-color: rgba(215, 180, 106, .28); --bs-border-color-translucent: rgba(215, 180, 106, .22);
  --bs-heading-color: var(--sk-gold-hi);
  --bs-link-color: var(--sk-gold-hi); --bs-link-color-rgb: 244, 220, 146; --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-primary: var(--sk-gold); --bs-primary-rgb: 215, 180, 106;
  --bs-code-color: var(--sk-gold-hi);
  --bs-font-monospace: var(--sk-font-mono);
  background: var(--sk-cavern);
  color: var(--sk-text);
  font-family: var(--sk-font-body);
}
body.stussy-skin #page-container {
  color: var(--sk-text);
  background-color: var(--sk-cavern);
  background-image: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 176, 86, .10), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35));
  background-repeat: no-repeat;
}
body.stussy-skin #main-container { overflow-wrap: break-word; }   /* break-word, not anywhere: tables and buttons keep their natural width */
body.stussy-skin #main-container input, body.stussy-skin #main-container textarea, body.stussy-skin #main-container select { overflow-wrap: normal; }

/* type: Cinzel for titles, Inter for reading */
body.stussy-skin:not(.sk-frame-only) h1, body.stussy-skin:not(.sk-frame-only) h2, body.stussy-skin:not(.sk-frame-only) h3, body.stussy-skin:not(.sk-frame-only) h4, body.stussy-skin:not(.sk-frame-only) h5, body.stussy-skin:not(.sk-frame-only) h6,
body.stussy-skin:not(.sk-frame-only) .h1, body.stussy-skin:not(.sk-frame-only) .h2, body.stussy-skin:not(.sk-frame-only) .h3, body.stussy-skin:not(.sk-frame-only) .h4, body.stussy-skin:not(.sk-frame-only) .h5, body.stussy-skin:not(.sk-frame-only) .h6 {
  color: var(--sk-gold-hi); font-family: var(--sk-font-display); font-weight: 600; letter-spacing: .03em;
}
body.stussy-skin:not(.sk-frame-only) #main-container .text-muted, body.stussy-skin #page-footer .text-muted { color: var(--sk-muted) !important; }
body.stussy-skin:not(.sk-frame-only) .form-text, body.stussy-skin:not(.sk-frame-only) .small.text-muted { color: var(--sk-muted); }
body.stussy-skin:not(.sk-frame-only) code { color: var(--sk-gold-hi); background: rgba(0, 0, 0, .4); padding: 1px 5px; border-radius: 4px; font-family: var(--sk-font-mono); overflow-wrap: anywhere; }
body.stussy-skin:not(.sk-frame-only) hr { border-color: rgba(215, 180, 106, .5); opacity: 1; }
/* the dark theme colours every plain link (a selector 17 classes heavy); the skin's links are gold */
body.stussy-skin:not(.sk-frame-only) #main-container a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item):not(.nav-main-link):not(.block):not(.button1),
body.stussy-skin #page-footer a { color: var(--sk-gold-hi) !important; text-decoration: underline; text-decoration-color: rgba(244, 220, 146, .45); text-underline-offset: 2px; }
body.stussy-skin:not(.sk-frame-only) #main-container a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item):not(.nav-main-link):not(.block):not(.button1):hover,
body.stussy-skin #page-footer a:hover { color: #fff !important; text-decoration-color: #fff; }

/* one focus ring everywhere: gold, 3 px, never hidden */
body.stussy-skin a:focus-visible, body.stussy-skin button:focus-visible, body.stussy-skin input:focus-visible, body.stussy-skin select:focus-visible,
body.stussy-skin textarea:focus-visible, body.stussy-skin [tabindex]:focus-visible, body.stussy-skin .btn:focus-visible, body.stussy-skin .nav-link:focus-visible,
body.stussy-skin .nav-main-link:focus-visible, body.stussy-skin .dropdown-item:focus-visible, body.stussy-skin .page-link:focus-visible {
  outline: 3px solid var(--sk-gold-hi) !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .65) !important;
}

/* ==== 2. the shared header (logo, login button, account menu) ============================================= */
body.stussy-skin #page-container #page-header {
  color: var(--sk-text);
  background-color: var(--sk-stone-dark);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)), var(--sk-tex-stone);
  background-size: 100% 100%, 512px 512px;
  border-bottom: 1px solid rgba(215, 180, 106, .55);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 8px 18px rgba(0, 0, 0, .45);
}
body.stussy-skin #page-header .btn-alt-secondary {
  --bs-btn-color: var(--sk-text); --bs-btn-bg: rgba(0, 0, 0, .45); --bs-btn-border-color: var(--sk-gold-dim);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(0, 0, 0, .7); --bs-btn-hover-border-color: var(--sk-gold);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(0, 0, 0, .7); --bs-btn-active-border-color: var(--sk-gold-hi);
}
/* the logo in gold (logo-gold-*.png, made from assets/media/logo.png by the plan's tools/make-logo.js). The <img>
   and its link stay exactly as they are; the gold picture is painted as the image's background and the blue one is
   pushed out of its content box (padding as wide as the image), so the size, the link and the layout never change.
   907 x 278 is the logo's own shape: 40 px tall is 130.5 px wide (32 px on a phone is 104.4 px). */
body.stussy-skin #page-header img[src$="media/logo.png"] {
  box-sizing: border-box; width: calc(40px * 907 / 278); height: 40px; padding: 0 0 0 calc(40px * 907 / 278); overflow: hidden;
  background: url('logo-gold-2x.png') 0 0 / 100% 100% no-repeat;
  background-image: -webkit-image-set(url('logo-gold-1x.png') 1x, url('logo-gold-2x.png') 2x, url('logo-gold-3x.png') 3x);
  background-image: image-set(url('logo-gold-1x.png') 1x, url('logo-gold-2x.png') 2x, url('logo-gold-3x.png') 3x);
}
/* the "Login with Twitch" button (logged out) is a gold plaque, like the pages' main buttons */
body.stussy-skin #page-header .btn-primary { color: #1a1207; }
/* phone: the header wraps instead of pushing the page sideways (the profile's fix, inc_header.php is shared) */
@media (max-width: 575.98px) {
  body.stussy-skin #page-header .content-header { flex-wrap: wrap; row-gap: 8px; padding-left: 16px; padding-right: 16px; }
  body.stussy-skin #page-header .btn-lg { font-size: .875rem; padding: .4rem .7rem; white-space: nowrap; }
  body.stussy-skin #page-header img[src$="logo.png"] { height: 32px !important; }
  body.stussy-skin #page-header img[src$="media/logo.png"] { width: calc(32px * 907 / 278); padding-left: calc(32px * 907 / 278); }
}
/* the account dropdown */
body.stussy-skin .dropdown-menu {
  color: var(--sk-text); background-color: var(--sk-stone); border: 1px solid var(--sk-gold-dim);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .7);
}
body.stussy-skin .dropdown-menu .bg-body-light { background-color: var(--sk-stone-lit) !important; border-color: rgba(215, 180, 106, .3) !important; }
body.stussy-skin .dropdown-menu .dropdown-item { color: var(--sk-text); }
body.stussy-skin .dropdown-menu .dropdown-item:hover, body.stussy-skin .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(215, 180, 106, .18); }
body.stussy-skin .dropdown-menu .dropdown-divider { border-color: rgba(215, 180, 106, .3); }
body.stussy-skin .dropdown-menu .text-muted { color: var(--sk-muted) !important; }

/* ==== 3. the shared navigation bar ======================================================================= */
body.stussy-skin #main-container > .bg-primary-darker {
  background-color: var(--sk-stone) !important;
  background-image: linear-gradient(180deg, rgba(255, 240, 200, .05), rgba(0, 0, 0, .35)), var(--sk-tex-stone) !important;
  background-size: 100% 100%, 512px 512px !important;
  border-bottom: 2px solid; border-image: linear-gradient(90deg, transparent, var(--sk-gold-dim) 10%, var(--sk-gold) 50%, var(--sk-gold-dim) 90%, transparent) 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .45);
}
body.stussy-skin #main-container > .bg-primary-darker > .bg-black-10 { background-color: rgba(0, 0, 0, .25) !important; }
body.stussy-skin #main-container .nav-main-link { color: var(--sk-muted); font-weight: 600; }
body.stussy-skin #main-container .nav-main-link > .nav-main-link-icon { color: var(--sk-gold); }
body.stussy-skin #main-container .nav-main-link:hover, body.stussy-skin #main-container .nav-main-link:focus { color: #fff; background-color: rgba(215, 180, 106, .14); }
body.stussy-skin #main-container .nav-main-link:hover > .nav-main-link-icon, body.stussy-skin #main-container .nav-main-link:focus > .nav-main-link-icon { color: var(--sk-gold-hi); }
body.stussy-skin #main-container .nav-main-link.active { color: var(--sk-gold-hi); background-color: rgba(0, 0, 0, .35); box-shadow: inset 0 -3px 0 var(--sk-gold); }
body.stussy-skin #main-container .nav-main-link.active > .nav-main-link-icon { color: var(--sk-gold-hi); }
body.stussy-skin #main-container .nav-main-link .nav-main-link-name { font-family: var(--sk-font-body); }
/* the phone "Menu" button */
body.stussy-skin #main-container > .bg-primary-darker .btn-alt-secondary {
  --bs-btn-color: var(--sk-gold-hi); --bs-btn-bg: rgba(0, 0, 0, .45); --bs-btn-border-color: var(--sk-gold-dim);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(0, 0, 0, .65); --bs-btn-hover-border-color: var(--sk-gold);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(0, 0, 0, .65); --bs-btn-active-border-color: var(--sk-gold-hi);
  font-family: var(--sk-font-display); letter-spacing: .12em; text-transform: uppercase; min-height: 44px;
}

/* ==== 4. the shared footer =============================================================================== */
body.stussy-skin #page-footer.bg-body-extra-light, body.stussy-skin #page-footer {
  background-color: var(--sk-stone-dark) !important; color: var(--sk-muted);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .6)), var(--sk-tex-stone);
  background-size: 100% 100%, 512px 512px;
  border-top: 1px solid rgba(215, 180, 106, .45);
}
body.stussy-skin #page-footer .text-danger { color: var(--sk-bad) !important; }

/* ==== 5. content panels: carved stone tablets, recessed slate inside ===================================== */
body.stussy-skin:not(.sk-frame-only) .block {
  color: var(--sk-text);
  background-color: var(--sk-stone);
  background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25)), var(--sk-tex-stone);
  background-repeat: no-repeat, repeat; background-size: 100% 100%, 512px 512px;
  border: 2px solid; border-color: var(--sk-bevel-stone);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--sk-stone-dark), inset 0 0 0 4px #3f4139, inset 0 0 0 5px #191a15, 0 14px 26px rgba(0, 0, 0, .5);
}
body.stussy-skin:not(.sk-frame-only) .block.block-rounded { border-radius: 8px; }
/* a panel inside a panel is a recessed slate field under a thin gold edge (the commands page's card) */
body.stussy-skin:not(.sk-frame-only) .block .block, body.stussy-skin:not(.sk-frame-only) .block .border.rounded, body.stussy-skin:not(.sk-frame-only) .block .border.rounded-3 {
  background-color: var(--sk-stone-dark);
  background-image: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .52)), var(--sk-tex-stone);
  background-size: 100% 100%, 512px 512px;
  border: 1px solid var(--sk-stone-edge) !important; border-top: 2px solid var(--sk-gold-dim) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, .45);
}
/* the theme paints this header navy with !important (html.dark .block .block-header-default) */
body.stussy-skin:not(.sk-frame-only) .block .block-header-default, body.stussy-skin:not(.sk-frame-only) .block-header-default, body.stussy-skin:not(.sk-frame-only) .block > .block-header {
  background-color: rgba(0, 0, 0, .3) !important;
  background-image: linear-gradient(180deg, rgba(255, 240, 200, .05), rgba(0, 0, 0, .15));
  border-bottom: 2px solid; border-image: linear-gradient(90deg, transparent, var(--sk-gold-dim) 10%, var(--sk-gold) 50%, var(--sk-gold-dim) 90%, transparent) 1;
  border-radius: 6px 6px 0 0;
}
body.stussy-skin:not(.sk-frame-only) .block-title {
  color: var(--sk-gold); font-family: var(--sk-font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem;
  text-shadow: 0 1px 0 #000, 0 2px 2px rgba(0, 0, 0, .8);
}
body.stussy-skin:not(.sk-frame-only) .block-title .fa, body.stussy-skin:not(.sk-frame-only) .block-title .fa-solid, body.stussy-skin:not(.sk-frame-only) .block-title [class*="fa-"] { color: var(--sk-gold-hi) !important; }
body.stussy-skin:not(.sk-frame-only) .block-content { color: var(--sk-text); }
body.stussy-skin:not(.sk-frame-only) .bg-body-light { background-color: var(--sk-stone-lit) !important; }
body.stussy-skin:not(.sk-frame-only) .bg-body-extra-light { background-color: var(--sk-stone-dark) !important; }
body.stussy-skin:not(.sk-frame-only) .border, body.stussy-skin:not(.sk-frame-only) .border-top, body.stussy-skin:not(.sk-frame-only) .border-bottom { border-color: rgba(215, 180, 106, .3) !important; }

/* state colours, lifted so they read on stone */
body.stussy-skin:not(.sk-frame-only) #main-container .text-primary { color: var(--sk-gold-hi) !important; }
body.stussy-skin:not(.sk-frame-only) #main-container .text-info { color: var(--sk-info) !important; }
body.stussy-skin:not(.sk-frame-only) #main-container .text-success { color: var(--sk-ok) !important; }
body.stussy-skin:not(.sk-frame-only) #main-container .text-warning { color: var(--sk-warn) !important; }
body.stussy-skin:not(.sk-frame-only) #main-container .text-danger { color: var(--sk-bad) !important; }
/* "text-dark" sits on a light chip in the plain theme; here those chips are stone (the Alert Editor's value badges) */
body.stussy-skin:not(.sk-frame-only) #main-container .text-dark:not(.btn) { color: var(--sk-text) !important; }

/* ==== 6. buttons: gold plaques for actions, stone for quiet ones, deep red for danger ===================== */
body.stussy-skin:not(.sk-frame-only) .btn { font-family: var(--sk-font-body); font-weight: 600; border-width: 2px; }
body.stussy-skin:not(.sk-frame-only) .btn-primary, body.stussy-skin:not(.sk-frame-only) .btn-warning, body.stussy-skin:not(.sk-frame-only) .btn-light, body.stussy-skin:not(.sk-frame-only) .btn-info,
body.stussy-skin #page-header .btn-primary {
  --bs-btn-color: #1a1207; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #1a1207;
  color: #1a1207 !important;
  background: linear-gradient(rgba(255, 240, 200, .28), rgba(0, 0, 0, .18)), var(--sk-tex-gold), var(--sk-gold);
  background-size: 100% 100%, 512px 128px, auto;
  border-color: var(--sk-bevel-gold);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .35);
}
body.stussy-skin:not(.sk-frame-only) .btn-primary:hover, body.stussy-skin:not(.sk-frame-only) .btn-warning:hover, body.stussy-skin:not(.sk-frame-only) .btn-light:hover, body.stussy-skin:not(.sk-frame-only) .btn-info:hover,
body.stussy-skin #page-header .btn-primary:hover { filter: brightness(1.08); color: #000 !important; }
body.stussy-skin:not(.sk-frame-only) .btn-primary .fa, body.stussy-skin:not(.sk-frame-only) .btn-warning .fa, body.stussy-skin:not(.sk-frame-only) .btn-light .fa, body.stussy-skin:not(.sk-frame-only) .btn-info .fa { color: inherit !important; }
/* quiet buttons: dark stone with a gold edge */
body.stussy-skin:not(.sk-frame-only) .btn-alt-secondary, body.stussy-skin:not(.sk-frame-only) .btn-secondary, body.stussy-skin:not(.sk-frame-only) .btn-alt-primary, body.stussy-skin:not(.sk-frame-only) .btn-alt-info,
body.stussy-skin:not(.sk-frame-only) .btn-alt-warning, body.stussy-skin:not(.sk-frame-only) .btn-alt-success, body.stussy-skin:not(.sk-frame-only) .btn-link, body.stussy-skin:not(.sk-frame-only) .btn-outline-secondary, body.stussy-skin:not(.sk-frame-only) .btn-outline-primary {
  --bs-btn-color: var(--sk-gold-hi); --bs-btn-bg: rgba(0, 0, 0, .42); --bs-btn-border-color: var(--sk-gold-dim);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(0, 0, 0, .65); --bs-btn-hover-border-color: var(--sk-gold);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(0, 0, 0, .7); --bs-btn-active-border-color: var(--sk-gold-hi);
  --bs-btn-disabled-color: var(--sk-muted); --bs-btn-disabled-bg: rgba(0, 0, 0, .3); --bs-btn-disabled-border-color: var(--sk-stone-edge);
  box-shadow: none;
}
body.stussy-skin:not(.sk-frame-only) .btn-alt-success { --bs-btn-color: var(--sk-ok); --bs-btn-border-color: #4f7a3f; }
body.stussy-skin:not(.sk-frame-only) .btn-alt-warning { --bs-btn-color: var(--sk-warn); }
body.stussy-skin:not(.sk-frame-only) .btn-alt-info { --bs-btn-color: var(--sk-info); --bs-btn-border-color: #3f6a82; }
/* danger: deep red, never a bright alarm */
body.stussy-skin:not(.sk-frame-only) .btn-danger, body.stussy-skin:not(.sk-frame-only) .btn-alt-danger {
  --bs-btn-color: #ffe6dc; --bs-btn-bg: #6e2417; --bs-btn-border-color: #b25a44;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #862d1d; --bs-btn-hover-border-color: #d27659;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #862d1d; --bs-btn-active-border-color: #d27659;
}
body.stussy-skin:not(.sk-frame-only) .btn-alt-danger { --bs-btn-color: var(--sk-bad); --bs-btn-bg: rgba(0, 0, 0, .42); }
body.stussy-skin:not(.sk-frame-only) .btn-success {
  --bs-btn-color: #eaf7df; --bs-btn-bg: #2e5424; --bs-btn-border-color: #5f8f4c;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #376330; --bs-btn-hover-border-color: #79ad63;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #376330; --bs-btn-active-border-color: #79ad63;
}
body.stussy-skin:not(.sk-frame-only) .btn-group > .btn.active, body.stussy-skin:not(.sk-frame-only) .btn-check:checked + .btn {
  color: #1a1207 !important; background: var(--sk-gold); border-color: var(--sk-gold-hi);
}

/* ==== 7. forms ============================================================================================ */
body.stussy-skin:not(.sk-frame-only) .form-control, body.stussy-skin:not(.sk-frame-only) .form-select {
  color: var(--sk-text); background-color: var(--sk-stone-dark); border: 1px solid var(--sk-gold-dim);
}
body.stussy-skin:not(.sk-frame-only) .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d7b46a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
body.stussy-skin:not(.sk-frame-only) .form-control:focus, body.stussy-skin:not(.sk-frame-only) .form-select:focus {
  color: #fff; background-color: #0f100b; border-color: var(--sk-gold-hi); box-shadow: 0 0 0 .2rem rgba(244, 220, 146, .3);
}
body.stussy-skin:not(.sk-frame-only) .form-control::placeholder { color: #a79f88; opacity: 1; }
body.stussy-skin:not(.sk-frame-only) .form-control:disabled, body.stussy-skin:not(.sk-frame-only) .form-select:disabled, body.stussy-skin:not(.sk-frame-only) .form-control[readonly] {
  color: var(--sk-muted); background-color: #1d1e18; border-color: var(--sk-stone-edge);
}
body.stussy-skin:not(.sk-frame-only) .form-control-color { background-color: var(--sk-stone-dark); }
body.stussy-skin:not(.sk-frame-only) .form-label, body.stussy-skin:not(.sk-frame-only) .col-form-label { color: var(--sk-gold); font-weight: 600; font-size: .9rem; letter-spacing: .02em; }
body.stussy-skin:not(.sk-frame-only) .form-check-label { color: var(--sk-text); }
body.stussy-skin:not(.sk-frame-only) .form-check-input { background-color: var(--sk-stone-dark); border: 1px solid var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only) .form-check-input:checked { background-color: var(--sk-gold); border-color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only) .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1207' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
body.stussy-skin:not(.sk-frame-only) .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d7b46a'/%3e%3c/svg%3e"); }
body.stussy-skin:not(.sk-frame-only) .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1207'/%3e%3c/svg%3e"); }
body.stussy-skin:not(.sk-frame-only) .form-check-input:focus { border-color: var(--sk-gold-hi); box-shadow: 0 0 0 .2rem rgba(244, 220, 146, .3); }
body.stussy-skin:not(.sk-frame-only) .form-range::-webkit-slider-thumb { background: var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only) .form-range::-moz-range-thumb { background: var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only) .form-range::-webkit-slider-runnable-track { background: rgba(0, 0, 0, .5); }
body.stussy-skin:not(.sk-frame-only) .input-group-text { color: var(--sk-gold-hi); background-color: var(--sk-stone-lit); border-color: var(--sk-gold-dim); }
body.stussy-skin:not(.sk-frame-only) .invalid-feedback { color: var(--sk-bad); }

/* ==== 8. tables, tabs, pills, pagination, badges, alerts ================================================= */
body.stussy-skin:not(.sk-frame-only) .table {
  --bs-table-color: var(--sk-text); --bs-table-bg: transparent; --bs-table-border-color: rgba(215, 180, 106, .18);
  --bs-table-striped-color: var(--sk-text); --bs-table-striped-bg: rgba(255, 240, 200, .03);
  --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(215, 180, 106, .08);
  --bs-table-active-color: #fff; --bs-table-active-bg: rgba(215, 180, 106, .12);
  color: var(--sk-text); border-color: rgba(215, 180, 106, .18);
}
body.stussy-skin:not(.sk-frame-only) .table > :not(caption) > * > * { border-bottom-color: rgba(215, 180, 106, .16); }
body.stussy-skin:not(.sk-frame-only) .table > thead > tr > th, body.stussy-skin:not(.sk-frame-only) .table thead th {
  color: var(--sk-gold); font-family: var(--sk-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid var(--sk-gold-dim);
}
body.stussy-skin:not(.sk-frame-only) .st-admin-sticky thead th { background: var(--sk-stone-dark); }
body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link { color: var(--sk-muted); font-weight: 600; }
body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link:hover, body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link:focus { color: #fff; background-color: rgba(215, 180, 106, .14); }
body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link.active, body.stussy-skin:not(.sk-frame-only) .nav-pills .show > .nav-link {
  color: #1a1207; background: linear-gradient(rgba(255, 240, 200, .25), rgba(0, 0, 0, .12)), var(--sk-gold);
}
body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link.active .fa, body.stussy-skin:not(.sk-frame-only) .nav-pills .nav-link.active [class*="fa-"] { color: inherit !important; }
body.stussy-skin:not(.sk-frame-only) .nav-tabs { border-bottom-color: var(--sk-gold-dim); }
body.stussy-skin:not(.sk-frame-only) .nav-tabs-block { background-color: rgba(0, 0, 0, .35); border-radius: 6px 6px 0 0; }
body.stussy-skin:not(.sk-frame-only) .nav-tabs .nav-link, body.stussy-skin:not(.sk-frame-only) .nav-tabs-block .nav-link { color: var(--sk-muted); border-color: transparent; font-weight: 600; }
body.stussy-skin:not(.sk-frame-only) .nav-tabs .nav-link:hover, body.stussy-skin:not(.sk-frame-only) .nav-tabs-block .nav-link:hover, body.stussy-skin:not(.sk-frame-only) .nav-tabs-block .nav-link:focus {
  color: #fff; background-color: rgba(215, 180, 106, .12); border-color: transparent;
}
body.stussy-skin:not(.sk-frame-only) .nav-tabs .nav-link.active, body.stussy-skin:not(.sk-frame-only) .nav-tabs-block .nav-link.active {
  color: var(--sk-gold-hi); background-color: var(--sk-stone); border-color: transparent; box-shadow: inset 0 -3px 0 var(--sk-gold);
}
body.stussy-skin:not(.sk-frame-only) .page-link { color: var(--sk-gold-hi); background-color: rgba(0, 0, 0, .42); border-color: var(--sk-gold-dim); }
body.stussy-skin:not(.sk-frame-only) .page-link:hover { color: #fff; background-color: rgba(0, 0, 0, .65); border-color: var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only) .page-item.active .page-link { color: #1a1207; background-color: var(--sk-gold); border-color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only) .page-item.disabled .page-link { color: var(--sk-muted); background-color: rgba(0, 0, 0, .3); border-color: var(--sk-stone-edge); }
body.stussy-skin:not(.sk-frame-only) .badge { font-weight: 600; letter-spacing: .03em; }
body.stussy-skin:not(.sk-frame-only) .badge.bg-success { background-color: var(--sk-ok-bg) !important; color: #dff3cf !important; box-shadow: inset 0 0 0 1px #5f8f4c; }
body.stussy-skin:not(.sk-frame-only) .badge.bg-secondary { background-color: #3a3b33 !important; color: var(--sk-parchment) !important; box-shadow: inset 0 0 0 1px var(--sk-stone-edge); }
body.stussy-skin:not(.sk-frame-only) .badge.bg-danger { background-color: var(--sk-bad-bg) !important; color: #ffe3da !important; box-shadow: inset 0 0 0 1px #b25a44; }
body.stussy-skin:not(.sk-frame-only) .badge.bg-warning { background-color: var(--sk-gold) !important; color: #1a1207 !important; }
body.stussy-skin:not(.sk-frame-only) .badge.bg-info { background-color: var(--sk-info-bg) !important; color: #dff1fb !important; box-shadow: inset 0 0 0 1px #3f6a82; }
body.stussy-skin:not(.sk-frame-only) .badge.bg-primary { background-color: #6b5226 !important; color: #fff5d6 !important; box-shadow: inset 0 0 0 1px var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only) .alert {
  color: var(--sk-text); background-color: var(--sk-stone-dark); border: 1px solid var(--sk-stone-edge); border-left: 4px solid var(--sk-gold);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .4);
}
body.stussy-skin:not(.sk-frame-only) .alert-success { border-left-color: #6fa35a; }
body.stussy-skin:not(.sk-frame-only) .alert-danger { border-left-color: #c8664d; }
body.stussy-skin:not(.sk-frame-only) .alert-warning { border-left-color: var(--sk-warn); }
body.stussy-skin:not(.sk-frame-only) .alert-info { border-left-color: #5b93b5; }

/* ==== 9. the Stussy Bot Hub (integrations.php) ============================================================ */
/* the hero: the cavern banner, a gold title */
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-hero {
  color: var(--sk-text);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 176, 86, .22), transparent 60%),
    linear-gradient(180deg, rgba(10, 11, 9, .5), rgba(10, 11, 9, .88)), var(--sk-cavern-banner) center / cover no-repeat, #15160f;
  border: 1px solid rgba(215, 180, 106, .5); border-radius: 10px;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .7), 0 14px 28px rgba(0, 0, 0, .5);
}
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-hero::before, body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-hero::after { display: none; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-hero h1 { color: var(--sk-gold-hi) !important; text-shadow: 0 2px 0 #000, 0 0 18px rgba(215, 180, 106, .25); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-hero .text-white-75 { color: var(--sk-muted) !important; opacity: 1 !important; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-status-pill {
  color: var(--sk-gold-hi); background: rgba(0, 0, 0, .5); border: 1px solid var(--sk-gold-dim); font-family: var(--sk-font-display); letter-spacing: .12em;
}
/* the numbers: gold-framed plaques over recessed slate (the profile's plaque) */
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-card {
  position: relative; isolation: isolate; color: var(--sk-text); border: 2px solid; border-color: var(--sk-bevel-gold); border-radius: 8px;
  background: linear-gradient(rgba(255, 240, 200, .16), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .28)), var(--sk-tex-gold), var(--sk-stone);
  background-size: 100% 100%, 512px 128px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .35), 0 0 0 1px #2a1d08, 0 3px 0 #1a1207, 0 14px 24px rgba(0, 0, 0, .55);
}
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-card::before {
  content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 5px;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .38)), var(--sk-tex-stone), var(--sk-stone);
  background-size: 100% 100%, 512px 512px, auto;
  box-shadow: inset 0 0 0 1px #000, inset 0 8px 14px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 240, 200, .3);
}
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-card { padding: 20px 20px 18px; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-label { color: var(--sk-gold); font-family: var(--sk-font-display); font-weight: 600; letter-spacing: .14em; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-value { color: var(--sk-gold-hi); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-value .text-muted { color: var(--sk-muted) !important; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-panel-card,
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-range-wrap,
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-setting-card {
  color: var(--sk-text); border: 1px solid var(--sk-stone-edge); border-top: 2px solid var(--sk-gold-dim); border-radius: 6px;
  background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .52)), var(--sk-tex-stone), var(--sk-stone-dark); background-size: 100% 100%, 512px 512px, auto;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, .45);
}
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-panel-card h4 { color: var(--sk-gold-hi); font-size: 1.15rem; }
/* notes: parchment slips, dark ink */
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-inline-note {
  color: var(--sk-ink); border: 0; border-radius: 6px;
  background: linear-gradient(rgba(255, 250, 235, .18), rgba(120, 90, 40, .12)), var(--sk-tex-parchment), var(--sk-parchment); background-size: 100% 100%, 512px 512px, auto;
  box-shadow: 0 0 0 2px var(--sk-gold-dim), 0 10px 18px rgba(0, 0, 0, .45);
}
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-warning-note { box-shadow: 0 0 0 2px #9a4a2c, inset 5px 0 0 #9a4a2c, 0 10px 18px rgba(0, 0, 0, .45); }
body.stussy-skin:not(.sk-frame-only).sk-integrations #main-container .stussy-shell .stussy-inline-note .text-muted { color: var(--sk-ink-soft) !important; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-inline-note .fw-semibold { color: var(--sk-ink); }
body.stussy-skin:not(.sk-frame-only).sk-integrations #main-container .stussy-shell .stussy-inline-note a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item):not(.nav-main-link):not(.block):not(.button1) { color: #6a2f0a !important; text-decoration-color: rgba(106, 47, 10, .6); font-weight: 600; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-save-hint { color: var(--sk-muted); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-obs-url { font-family: var(--sk-font-mono); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .home-mini-list li { border-bottom-color: rgba(215, 180, 106, .18); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .home-mini-list span { color: var(--sk-muted); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .home-mini-list strong { color: var(--sk-text); }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .block-content > p.text-muted { color: var(--sk-muted) !important; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .input-group { flex-wrap: nowrap; }
body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .input-group > .form-control { min-width: 0; }

/* ==== 10. the Alert Editor (overlay-editor.php, stussy/overlay/editor/editor.css) ======================== */
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .overlay-editor-head h1 { color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile {
  color: var(--sk-text); border: 2px solid var(--sk-stone-edge);
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .5)), var(--sk-tex-stone), var(--sk-stone-dark); background-size: 100% 100%, 512px 512px, auto;
}
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile:hover { border-color: var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile.active {
  border-color: var(--sk-gold-hi); background-color: var(--sk-stone-dark);
  box-shadow: 0 0 0 2px rgba(244, 220, 146, .3), inset 0 0 18px rgba(215, 180, 106, .18);
}
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile .preset-name { color: var(--sk-gold-hi); font-family: var(--sk-font-display); letter-spacing: .03em; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile .preset-desc { color: var(--sk-muted); opacity: 1; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .preset-tile .preset-check { color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .chip { color: var(--sk-gold-hi); border-color: var(--sk-gold-dim); background: rgba(0, 0, 0, .4); min-height: 32px; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .chip:hover { color: #1a1207; background: var(--sk-gold); border-color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .card-help { color: var(--sk-muted); opacity: 1; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor .pane-head { border-bottom-color: rgba(215, 180, 106, .35); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor #tabs .nav-link { color: var(--sk-muted); }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor #tabs .nav-link.active { color: #1a1207; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor #previewWrap { border: 2px solid; border-color: var(--sk-bevel-stone); background-color: #07080a !important; }
body.stussy-skin:not(.sk-frame-only).sk-overlay-editor #status.bg-success { background-color: var(--sk-ok-bg) !important; color: #dff3cf !important; }

/* ==== 11. What is Stussy? (stussy.php) ==================================================================== */
body.stussy-skin:not(.sk-frame-only).sk-stussy .block.bg-image { border-color: var(--sk-bevel-gold); background-color: #15160f; }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block.bg-image .bg-primary-dark-op {
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 176, 86, .24), transparent 65%), linear-gradient(180deg, rgba(10, 11, 9, .55), rgba(10, 11, 9, .9)) !important;
  border-radius: 6px;
}
body.stussy-skin:not(.sk-frame-only).sk-stussy .block.bg-image h1 { color: var(--sk-gold-hi) !important; font-size: 2rem; text-shadow: 0 2px 0 #000, 0 0 18px rgba(215, 180, 106, .3); }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block.bg-image h2 { color: var(--sk-muted) !important; font-family: var(--sk-font-body); letter-spacing: 0; }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content h3, body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content h4 { color: var(--sk-gold-hi); }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content ul { padding-left: 1.1rem; }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content ul b { color: var(--sk-gold-hi); font-family: var(--sk-font-mono); font-weight: 700; }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content ul i { color: var(--sk-gold); }
body.stussy-skin:not(.sk-frame-only).sk-stussy .block-content strong { color: var(--sk-gold-hi); }

/* ==== 12. Stussy admin (stussy_admin.php) ================================================================= */
/* the six numbers at the top: gold plaques, like the Bot Hub's */
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-kpi .block {
  position: relative; isolation: isolate; border: 2px solid !important; border-color: var(--sk-bevel-gold) !important; border-radius: 8px !important;
  background: linear-gradient(rgba(255, 240, 200, .16), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .28)), var(--sk-tex-gold), var(--sk-stone);
  background-size: 100% 100%, 512px 128px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .35), 0 0 0 1px #2a1d08, 0 10px 18px rgba(0, 0, 0, .5);
}
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-kpi .block::before {
  content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 5px;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .4)), var(--sk-tex-stone), var(--sk-stone); background-size: 100% 100%, 512px 512px, auto;
  box-shadow: inset 0 0 0 1px #000, inset 0 6px 12px rgba(0, 0, 0, .6);
}
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-kpi .text-uppercase { font-family: var(--sk-font-display); letter-spacing: .12em; color: var(--sk-gold) !important; }
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-kpi .fs-2 { color: var(--sk-gold-hi); font-variant-numeric: tabular-nums; }
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-avatar {
  color: #1a1207; background: linear-gradient(145deg, var(--sk-gold-hi), var(--sk-gold) 60%, var(--sk-gold-dim)), var(--sk-gold);
  box-shadow: 0 0 0 2px #2a1d08, 0 4px 10px rgba(0, 0, 0, .6);
}
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-code { color: var(--sk-muted); }
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .block-options .text-muted { color: var(--sk-muted) !important; }
body.stussy-skin:not(.sk-frame-only).sk-stussy-admin .st-admin-card-grid .border.rounded .text-uppercase { color: var(--sk-gold) !important; font-family: var(--sk-font-display); letter-spacing: .1em; }

/* ==== 13. Channel connected (stussy/callback.php: its own page, no site frame) ============================ */
body.stussy-skin.sk-callback {
  padding: 32px 16px 48px; color: var(--sk-text); font-family: var(--sk-font-body);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 176, 86, .12), transparent 70%), var(--sk-cavern);
  min-height: 100vh;
}
body.stussy-skin.sk-callback .card {
  display: block; max-width: 760px; margin: 0 auto; padding: 28px 24px; color: var(--sk-text); text-align: center;
  background-color: var(--sk-stone);
  background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .22)), var(--sk-tex-stone);
  background-repeat: no-repeat, repeat; background-size: 100% 100%, 512px 512px;
  border: 3px solid; border-color: var(--sk-bevel-stone); border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--sk-stone-dark), inset 0 0 0 5px #4a4c43, inset 0 0 0 7px #191a15, 0 18px 34px rgba(0, 0, 0, .6);
}
body.stussy-skin.sk-callback .card > img {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover; padding: 5px; margin-bottom: 12px;
  background: linear-gradient(145deg, var(--sk-gold-hi), var(--sk-gold-dim) 55%, var(--sk-gold-deep));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 240, 200, .5);
}
body.stussy-skin.sk-callback h1 {
  margin: 0 0 6px; color: var(--sk-gold-hi); font-family: var(--sk-font-display); font-weight: 600; font-size: 2rem; letter-spacing: .04em; line-height: 1.2;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(215, 180, 106, .25);
}
body.stussy-skin.sk-callback h3 { color: var(--sk-gold); font-family: var(--sk-font-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; }
body.stussy-skin.sk-callback .success { color: var(--sk-ok); font-weight: 600; font-size: 1.1rem; }
body.stussy-skin.sk-callback .danger {
  max-width: 560px; margin: 14px auto; padding: 12px 16px; text-decoration: none; text-align: center;
  color: var(--sk-ink); border-radius: 6px;
  background: linear-gradient(rgba(255, 250, 235, .18), rgba(120, 90, 40, .12)), var(--sk-tex-parchment), var(--sk-parchment); background-size: 100% 100%, 512px 512px, auto;
  box-shadow: 0 0 0 2px #9a4a2c, inset 5px 0 0 #9a4a2c, 0 10px 18px rgba(0, 0, 0, .45);
}
body.stussy-skin.sk-callback .danger a { color: #6a2f0a; font-weight: 700; text-decoration: underline; }
body.stussy-skin.sk-callback a { color: var(--sk-gold-hi); }
body.stussy-skin.sk-callback a:hover { color: #fff; }
/* the generated command list (stussy-commands/lib/sc_view.php prints its own small stylesheet) */
body.stussy-skin.sk-callback .sc-onb { max-width: 680px; }
body.stussy-skin.sk-callback .sc-onb h2 { color: var(--sk-gold-hi); font-family: var(--sk-font-display); font-weight: 600; letter-spacing: .04em; font-size: 1.2rem; }
body.stussy-skin.sk-callback .sc-onb h3 { color: var(--sk-gold); }
body.stussy-skin.sk-callback .sc-onb p { color: var(--sk-muted); }
body.stussy-skin.sk-callback .sc-onb li { border-bottom-color: rgba(215, 180, 106, .18); }
body.stussy-skin.sk-callback .sc-onb code { color: var(--sk-gold-hi); background: rgba(0, 0, 0, .55); font-family: var(--sk-font-mono); }
body.stussy-skin.sk-callback .sc-onb .sc-onb-sum { color: var(--sk-muted); }
body.stussy-skin.sk-callback .sc-onb .sc-onb-more a { color: var(--sk-gold-hi); }
/* the browser source link box and its copy button */
body.stussy-skin.sk-callback #obsUrl {
  color: var(--sk-text); background: var(--sk-stone-dark); border: 1px solid var(--sk-gold-dim); font-family: var(--sk-font-mono); font-size: .9rem;
}
body.stussy-skin.sk-callback #obsUrl + #copyBtn { min-width: 44px; min-height: 44px; }
body.stussy-skin.sk-callback #obsUrl + #copyBtn i { color: var(--sk-gold-hi) !important; }
body.stussy-skin.sk-callback .card > div[style] { margin: 20px auto !important; max-width: 600px; }
body.stussy-skin.sk-callback .card > div[style] > div[style] { margin: 0 auto; }
/* the two buttons: Unlink (deep red) and Go Back (gold) */
body.stussy-skin.sk-callback form button[type=submit] {
  min-height: 44px; color: #ffe6dc; background: #6e2417; border: 2px solid #b25a44; border-radius: 22px; font-weight: 600; font-family: var(--sk-font-body);
}
body.stussy-skin.sk-callback form button[type=submit]:hover { background: #862d1d; color: #fff; }
body.stussy-skin.sk-callback a.button1 {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 26px;
  color: #1a1207; font-weight: 600; text-decoration: none; border: 2px solid; border-color: var(--sk-bevel-gold); border-radius: 22px;
  background: linear-gradient(rgba(255, 240, 200, .28), rgba(0, 0, 0, .18)), var(--sk-tex-gold), var(--sk-gold); background-size: 100% 100%, 512px 128px, auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
body.stussy-skin.sk-callback a.button1:hover { color: #000; filter: brightness(1.08); }
body.stussy-skin.sk-callback :focus-visible { outline: 3px solid var(--sk-gold-hi); outline-offset: 2px; }

/* ==== 14. phones and reduced motion ====================================================================== */
@media (max-width: 575.98px) {
  body.stussy-skin:not(.sk-frame-only) .btn:not(.btn-sm) { min-height: 44px; }
  body.stussy-skin:not(.sk-frame-only) .block-content { overflow-wrap: break-word; }
  body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-stat-value { font-size: 1.6rem; }
  body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .stussy-panel-card { padding: 16px; }
  body.stussy-skin:not(.sk-frame-only).sk-integrations .stussy-shell .home-mini-list li { flex-wrap: wrap; }
  body.stussy-skin:not(.sk-frame-only).sk-stussy .block.bg-image h1 { font-size: 1.5rem; }
  body.stussy-skin.sk-callback { padding: 16px 10px 32px; }
  body.stussy-skin.sk-callback .card { padding: 22px 14px; }
  body.stussy-skin.sk-callback h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.stussy-skin *, body.stussy-skin *::before, body.stussy-skin *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}