/* ==========================================================================
   Skeuomorphism panel — iOS 6 / Aqua-era realism: glossy buttons, brushed
   metal, engraved inset fields, stitched leather/paper, chrome tab bars.
   Every rule is scoped under .theme-skeuo. Pure CSS — no external assets.
   ========================================================================== */

.theme-skeuo {
  --skeu-metal-1: #eef0f2;
  --skeu-metal-2: #cdd0d5;
  --skeu-metal-3: #a6a9af;
  --skeu-metal-4: #75787e;
  --skeu-metal-5: #55575c;
  --skeu-ink: #2a2d33;
  --skeu-ink-soft: #565a61;
  --skeu-blue-1: #8ecbff;
  --skeu-blue-2: #3f96ea;
  --skeu-blue-3: #0a63d6;
  --skeu-blue-4: #063a7d;
  --skeu-green-1: #b7e89a;
  --skeu-green-2: #6bc24a;
  --skeu-green-3: #2f8f1f;
  --skeu-green-4: #155b10;
  --skeu-red-1: #ffab9e;
  --skeu-red-2: #e0503f;
  --skeu-red-3: #c22a1c;
  --skeu-red-4: #7a1108;
  --skeu-paper: #f7edc9;
  --skeu-paper-2: #f0e0ac;
  --skeu-paper-line: #c4d9ea;
  --skeu-paper-margin: #d9776a;

  background:
    radial-gradient(ellipse at 28% -10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .12) 0 2px, rgba(0, 0, 0, .025) 2px 4px),
    linear-gradient(160deg, var(--skeu-metal-1), var(--skeu-metal-2) 45%, var(--skeu-metal-3) 100%);
  color: var(--skeu-ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.theme-skeuo * { box-sizing: border-box; }

.theme-skeuo :is(button, a, input, select, label.switch)::-moz-focus-inner { border: 0; }

.theme-skeuo :is(.btn, .card-action, input, select, .switch input, input[type="range"]):focus-visible {
  outline: 3px solid rgba(10, 99, 214, .55);
  outline-offset: 2px;
}

/* ---------- Panel head ---------- */

.theme-skeuo .panel-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #23262c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .12);
}

.theme-skeuo .panel-desc {
  margin: 0;
  color: var(--skeu-ink-soft);
  font-size: 13.5px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------- demo-block plaque (visual only, no layout props) ---------- */

.theme-skeuo .demo-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 40%, rgba(0, 0, 0, .04));
  border: 1px solid rgba(255, 255, 255, .6);
  border-bottom-color: rgba(0, 0, 0, .12);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 22px rgba(35, 38, 44, .12);
}

.theme-skeuo .demo-block h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--skeu-metal-5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* ==========================================================================
   Buttons — glossy Aqua-style: top highlight strip, bevel border, layered
   drop shadow, hard offset "keycap" edge, inset pressed state.
   ========================================================================== */

.theme-skeuo .demo-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.theme-skeuo .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 11px;
  border: 1px solid var(--skeu-blue-4);
  font: 700 14.5px/1 -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  background:
    linear-gradient(to bottom, var(--skeu-blue-1) 0%, var(--skeu-blue-2) 46%, var(--skeu-blue-3) 47%, var(--skeu-blue-4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -8px 10px -6px rgba(0, 0, 0, .35),
    0 3px 0 #052c60,
    0 8px 14px rgba(6, 30, 65, .4);
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .12s ease-out;
}

/* glossy highlight cap on the top half of every button */
.theme-skeuo .btn::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  border-radius: 10px 10px 60% 60% / 10px 10px 100% 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  pointer-events: none;
}

@media (hover: hover) {
  .theme-skeuo .btn:not(:disabled):hover { filter: brightness(1.05); }
}

.theme-skeuo .btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .45),
    inset 0 -1px 0 rgba(255, 255, 255, .15),
    0 0 0 #052c60,
    0 1px 2px rgba(6, 30, 65, .3);
}

.theme-skeuo .btn:not(:disabled):active::before { opacity: .35; }

.theme-skeuo .btn-block { width: 100%; }

/* Secondary — brushed silver/chrome */
.theme-skeuo .btn-outline {
  color: #2c2f34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  border-color: var(--skeu-metal-5);
  background: linear-gradient(to bottom, #fbfbfc 0%, #dcdfe3 46%, #c1c4c9 47%, #9a9da3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -8px 10px -6px rgba(0, 0, 0, .18),
    0 3px 0 #797c82,
    0 8px 14px rgba(40, 42, 46, .28);
}

.theme-skeuo .btn-outline:not(:disabled):active {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .3),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 0 0 #797c82,
    0 1px 2px rgba(40, 42, 46, .2);
}

/* Icon-only — round chrome dial */
.theme-skeuo .btn-icon {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 50%;
  color: #2c2f34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  border-color: var(--skeu-metal-5);
  background: linear-gradient(to bottom, #fbfbfc 0%, #dcdfe3 46%, #c1c4c9 47%, #9a9da3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -6px 8px -5px rgba(0, 0, 0, .18),
    0 3px 0 #797c82,
    0 7px 12px rgba(40, 42, 46, .3);
}

.theme-skeuo .btn-icon::before { border-radius: 50%; }

.theme-skeuo .btn-icon .icon-gear {
  font-size: 19px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}

.theme-skeuo .btn-icon:not(:disabled):active {
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, .3),
    0 0 0 #797c82,
    0 1px 2px rgba(40, 42, 46, .2);
}

/* Danger — glossy red */
.theme-skeuo .btn-danger {
  border-color: var(--skeu-red-4);
  background: linear-gradient(to bottom, var(--skeu-red-1) 0%, var(--skeu-red-2) 46%, var(--skeu-red-3) 47%, var(--skeu-red-4) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 10px -6px rgba(0, 0, 0, .35),
    0 3px 0 #560c05,
    0 8px 14px rgba(90, 12, 5, .38);
}

.theme-skeuo .btn-danger:not(:disabled):active {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .5),
    0 0 0 #560c05,
    0 1px 2px rgba(90, 12, 5, .3);
}

/* Disabled — flat, no gloss, no depth */
.theme-skeuo .btn-disabled,
.theme-skeuo .btn:disabled {
  color: #8b8e94;
  text-shadow: none;
  border-color: #b6b9be;
  background: linear-gradient(to bottom, #dee0e3, #c7cacf);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  cursor: not-allowed;
}

.theme-skeuo .btn-disabled::before,
.theme-skeuo .btn:disabled::before { opacity: .18; }

/* ==========================================================================
   Form — engraved / carved-in inset fields, chrome select arrow, iOS-style
   glossy toggle switch.
   ========================================================================== */

.theme-skeuo .demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
}

.theme-skeuo .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-skeuo .field label,
.theme-skeuo .toggle-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--skeu-ink-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.theme-skeuo .field input[type="text"],
.theme-skeuo .field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--skeu-metal-4);
  background: linear-gradient(to bottom, #e9ebed, #ffffff 45%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(255, 255, 255, .55);
  font-size: 14.5px;
  color: var(--skeu-ink);
  appearance: none;
  -webkit-appearance: none;
}

.theme-skeuo .field input[type="text"]::placeholder { color: #9a9da3; }

.theme-skeuo .select-wrap { position: relative; }

.theme-skeuo .select-wrap select { padding-right: 32px; cursor: pointer; }

.theme-skeuo .select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: var(--skeu-metal-5) transparent transparent transparent;
  transform: translateY(-2px);
  pointer-events: none;
}

.theme-skeuo .field-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
}

.theme-skeuo .switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
  flex-shrink: 0;
}

.theme-skeuo .switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.theme-skeuo .switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, #9a9da3, #c7cacf);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(255, 255, 255, .3);
  transition: background .18s ease;
}

.theme-skeuo .switch input:checked + .switch-track {
  background: linear-gradient(to bottom, var(--skeu-green-3), var(--skeu-green-2));
  box-shadow: inset 0 2px 4px rgba(0, 40, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .25);
}

.theme-skeuo .switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff, #dcdfe3 65%, #b7bac0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .9);
  transition: transform .18s ease;
}

.theme-skeuo .switch input:checked ~ .switch-track .switch-knob { transform: translateX(24px); }

/* ==========================================================================
   Card — Notes-app paper: ruled lines, red margin, torn corner, pinned.
   ========================================================================== */

.theme-skeuo .demo-card {
  position: relative;
  max-width: 360px;
  padding: 24px 20px 20px 26px;
  border: 1px solid #d8c48a;
  border-left: 5px solid var(--skeu-paper-margin);
  border-radius: 3px 12px 12px 3px;
  color: #4a3c1d;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--skeu-paper-line) 27px 28px),
    linear-gradient(to bottom, var(--skeu-paper), var(--skeu-paper-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 3px 0 rgba(0, 0, 0, .04),
    0 12px 20px rgba(60, 42, 10, .28);
}

.theme-skeuo .demo-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent #ebdca4 transparent transparent;
  filter: drop-shadow(-1px 1px 2px rgba(0, 0, 0, .25));
}

.theme-skeuo .card-pin {
  position: absolute;
  top: -9px;
  left: 30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--skeu-red-1), var(--skeu-red-3) 60%, var(--skeu-red-4));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .7);
}

.theme-skeuo .card-icon {
  font-size: 26px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}

.theme-skeuo .card-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: #3a2e14;
}

.theme-skeuo .card-desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b5730;
}

.theme-skeuo .card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
  border: 1px solid var(--skeu-blue-4);
  background: linear-gradient(to bottom, var(--skeu-blue-1) 0%, var(--skeu-blue-2) 46%, var(--skeu-blue-3) 47%, var(--skeu-blue-4) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #052c60, 0 5px 8px rgba(6, 30, 65, .35);
}

.theme-skeuo .card-action:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }

/* ==========================================================================
   Mobile mock — brushed-metal header, glossy list rows, chrome tab bar.
   (.phone-mock / .phone-notch bezel chrome comes from the shared shell.)
   ========================================================================== */

.theme-skeuo .phone-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 13px;
  color: var(--skeu-ink);
  background: linear-gradient(180deg, #e9ebee, #cfd2d7 55%, #bcbfc5);
}

.theme-skeuo .app-header {
  padding: 14px 12px 11px;
  text-align: center;
  border-bottom: 1px solid #7d8086;
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .18) 0 2px, rgba(0, 0, 0, .04) 2px 4px),
    linear-gradient(180deg, #cdd0d5, #9a9da3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 5px rgba(0, 0, 0, .25);
  flex-shrink: 0;
}

.theme-skeuo .app-header-title {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .3px;
  color: #33363c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.theme-skeuo .app-list {
  list-style: none;
  margin: 0;
  padding: 8px 9px;
  flex: 1;
  overflow: auto;
}

.theme-skeuo .app-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid #d3d6db;
  background: linear-gradient(180deg, #fcfdfd, #eef0f2);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .16);
}

.theme-skeuo .row-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(180deg, var(--skeu-blue-1), var(--skeu-blue-3));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .3);
}

.theme-skeuo .row-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.theme-skeuo .row-title {
  font-weight: 700;
  font-size: 12px;
  color: #26282d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-skeuo .row-sub {
  font-size: 10px;
  color: #6b6e74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-skeuo .row-chevron {
  color: #9a9da3;
  font-size: 16px;
  flex-shrink: 0;
}

.theme-skeuo .app-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 14px 12px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #d3d6db, #a4a7ad);
  border-top: 1px solid #f4f5f6;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18);
}

.theme-skeuo .tab-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #4a4d52;
  background: linear-gradient(180deg, #f4f5f6, #c1c4c9);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .3);
}

.theme-skeuo .tab-item.active {
  color: #fff;
  background: linear-gradient(180deg, var(--skeu-blue-1), var(--skeu-blue-3));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 2px 4px rgba(0, 0, 0, .35);
}

.theme-skeuo .tab-fab {
  width: 38px;
  height: 38px;
  transform: translateY(-9px);
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--skeu-green-1), var(--skeu-green-3));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 4px 8px rgba(0, 0, 0, .4), 0 0 0 3px #d3d6db;
}

/* ==========================================================================
   Usage widget — brushed-aluminium music player, LCD screen, chrome
   transport buttons, inset scrub/volume sliders.
   ========================================================================== */

.theme-skeuo .demo-usage {
  display: flex;
  justify-content: center;
}

.theme-skeuo .player {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 16px 18px 20px;
  border-radius: 20px;
  border: 1px solid #9a9da3;
  background: linear-gradient(155deg, #f2f3f5, #cfd2d7 55%, #adb0b6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 6px rgba(0, 0, 0, .15),
    0 2px 0 rgba(255, 255, 255, .4),
    0 16px 30px rgba(20, 22, 26, .32);
}

.theme-skeuo .player-strip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .14) 0 2px, rgba(0, 0, 0, .03) 2px 4px);
  pointer-events: none;
}

.theme-skeuo .player-screen {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  padding: 13px 14px 11px;
  border-radius: 10px;
  color: #9df58f;
  font-family: "Courier New", Consolas, monospace;
  background: linear-gradient(180deg, #1d2c20, #0a120b);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .85), inset 0 0 16px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .4);
}

.theme-skeuo .screen-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  margin-bottom: 7px;
}

.theme-skeuo .screen-eq span {
  width: 4px;
  border-radius: 1px;
  background: linear-gradient(180deg, #cbffb2, #4fae3d);
  animation: skeuo-eq 1.1s ease-in-out infinite;
}

.theme-skeuo .screen-eq span:nth-child(1) { height: 40%; animation-delay: -.9s; }
.theme-skeuo .screen-eq span:nth-child(2) { height: 90%; animation-delay: -.5s; }
.theme-skeuo .screen-eq span:nth-child(3) { height: 55%; animation-delay: -1.1s; }
.theme-skeuo .screen-eq span:nth-child(4) { height: 100%; animation-delay: -.2s; }
.theme-skeuo .screen-eq span:nth-child(5) { height: 65%; animation-delay: -.7s; }

@keyframes skeuo-eq {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-skeuo .screen-eq span { animation: none; height: 55%; }
}

.theme-skeuo .screen-track {
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(157, 245, 143, .65);
}

.theme-skeuo .screen-artist {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .5px;
  opacity: .8;
}

.theme-skeuo .player-seek { position: relative; z-index: 1; margin-bottom: 14px; }

.theme-skeuo .player-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}

.theme-skeuo .ctrl-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #82858b;
  color: #43464c;
  font-size: 11px;
  letter-spacing: -1px;
  cursor: pointer;
  background: linear-gradient(180deg, #f5f6f7, #b3b6bc);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 0 -4px 5px rgba(0, 0, 0, .16),
    0 3px 5px rgba(0, 0, 0, .3);
}

.theme-skeuo .ctrl-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .4);
}

.theme-skeuo .ctrl-play {
  width: 54px;
  height: 54px;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
  border-color: var(--skeu-blue-4);
  background: linear-gradient(180deg, var(--skeu-blue-1), var(--skeu-blue-2) 46%, var(--skeu-blue-3) 47%, var(--skeu-blue-4));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -6px 8px -4px rgba(0, 0, 0, .3),
    0 4px 8px rgba(6, 30, 65, .4);
}

.theme-skeuo .player-volume {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.theme-skeuo .player-volume input[type="range"] { flex: 1; }

/* Chrome inset slider — shared by seek + volume */
.theme-skeuo input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b8f96, #d4d7db);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  cursor: pointer;
}

.theme-skeuo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -5.5px;
  border-radius: 50%;
  border: 1px solid #75787e;
  background: radial-gradient(circle at 35% 28%, #ffffff, #d3d6db 60%, #9a9da3);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .85);
}

.theme-skeuo input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b8f96, #d4d7db);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

.theme-skeuo input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #75787e;
  background: radial-gradient(circle at 35% 28%, #ffffff, #d3d6db 60%, #9a9da3);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .85);
}

/* ==========================================================================
   Narrow-viewport guard (~375px) — nothing here should force overflow.
   ========================================================================== */

@media (max-width: 420px) {
  .theme-skeuo .demo-card,
  .theme-skeuo .demo-form,
  .theme-skeuo .player { max-width: 100%; }

  .theme-skeuo .demo-buttons { gap: 10px; }

  .theme-skeuo .btn { padding: 11px 18px; font-size: 13.5px; }
}

/* ==========================================================================
   Alert — Aqua/iOS-sheet modal: brushed-metal card, bevel edge, glossy
   red badge icon, chrome divider, keycap action buttons.
   (.theme-alert-backdrop position/display comes from the shared shell —
   here we only style the tint + the box itself.)
   ========================================================================== */

.theme-skeuo .theme-alert-backdrop {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60, 63, 68, .35), rgba(20, 22, 26, .68));
  backdrop-filter: blur(1px);
}

.theme-skeuo .theme-alert-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 16px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  background:
    radial-gradient(ellipse at 30% -15%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%),
    linear-gradient(170deg, var(--skeu-metal-1), var(--skeu-metal-2) 55%, var(--skeu-metal-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 0 rgba(255, 255, 255, .4),
    0 24px 48px rgba(10, 12, 16, .55),
    0 4px 10px rgba(10, 12, 16, .3);
  animation: skeuo-alert-pop .18s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes skeuo-alert-pop {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-skeuo .theme-alert-box { animation: none; }
}

.theme-skeuo .alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  font-size: 24px;
  border: 1px solid var(--skeu-red-4);
  background: radial-gradient(circle at 35% 28%, var(--skeu-red-1), var(--skeu-red-2) 55%, var(--skeu-red-3) 85%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -6px 8px -4px rgba(0, 0, 0, .35),
    0 3px 6px rgba(90, 12, 5, .4);
}

.theme-skeuo .alert-title {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  color: #23262c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.theme-skeuo .alert-desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--skeu-ink-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.theme-skeuo .alert-actions {
  display: flex;
  gap: 10px;
}

.theme-skeuo .alert-actions .btn {
  flex: 1;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13.5px;
}

@media (max-width: 420px) {
  .theme-skeuo .theme-alert-box { max-width: calc(100% - 24px); padding: 20px 16px 16px; }
  .theme-skeuo .alert-actions { flex-direction: column; }
}

/* ==========================================================================
   Loading — brushed-chrome circular progress dial (spinning highlight),
   shimmering skeleton rows, success plaque.
   ========================================================================== */

.theme-skeuo .demo-loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.theme-skeuo .loading-panel {
  width: 100%;
  max-width: 340px;
  min-height: 92px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-bottom-color: rgba(0, 0, 0, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06) 40%, rgba(0, 0, 0, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px rgba(35, 38, 44, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Chrome bevel dial spinner */
.theme-skeuo .loading-spinner {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 28%, #fbfbfc, #c1c4c9 65%, #8b8e94);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 0 -4px 6px rgba(0, 0, 0, .25),
    0 3px 6px rgba(0, 0, 0, .3);
}

.theme-skeuo .loading-spinner::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 4px solid rgba(85, 87, 92, .22);
  border-top-color: var(--skeu-blue-3);
  border-right-color: var(--skeu-blue-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  animation: skeuo-spin .75s linear infinite;
}

.theme-skeuo .loading-spinner::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, var(--skeu-blue-1) 70%);
  box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation: skeuo-spin .75s linear infinite;
}

@keyframes skeuo-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-skeuo .loading-spinner::before,
  .theme-skeuo .loading-spinner::after { animation: none; }
}

/* Skeleton rows — brushed-metal shimmer sweep */
.theme-skeuo .loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.theme-skeuo .skel-line {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(100deg, #cdd0d5 20%, #eef0f2 42%, #fbfbfc 50%, #eef0f2 58%, #cdd0d5 80%);
  background-size: 220% 100%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), inset 0 -1px 0 rgba(255, 255, 255, .5);
  animation: skeuo-shimmer 1.4s ease-in-out infinite;
}

.theme-skeuo .skel-w1 { width: 78%; }
.theme-skeuo .skel-w2 { width: 92%; }
.theme-skeuo .skel-w3 { width: 60%; }

@keyframes skeuo-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-skeuo .skel-line { animation: none; }
}

.theme-skeuo .loading-result {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--skeu-green-4);
  background: linear-gradient(180deg, var(--skeu-green-1), var(--skeu-green-2) 55%, var(--skeu-green-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 6px -3px rgba(0, 0, 0, .25), 0 3px 6px rgba(21, 91, 16, .3);
}

.theme-skeuo .loading-result p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #103c0c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

/* State machine */
.theme-skeuo .loading-panel[data-state="idle"] .loading-spinner { display: none; }
.theme-skeuo .loading-panel[data-state="idle"] .loading-skeleton { display: flex; opacity: 1; }
.theme-skeuo .loading-panel[data-state="idle"] .loading-result { display: none; }

.theme-skeuo .loading-panel[data-state="loading"] .loading-spinner { display: block; }
.theme-skeuo .loading-panel[data-state="loading"] .loading-skeleton { display: flex; opacity: .4; }
.theme-skeuo .loading-panel[data-state="loading"] .loading-result { display: none; }

.theme-skeuo .loading-panel[data-state="done"] .loading-spinner { display: none; }
.theme-skeuo .loading-panel[data-state="done"] .loading-skeleton { display: none; }
.theme-skeuo .loading-panel[data-state="done"] .loading-result[hidden] { display: block; }

@media (max-width: 420px) {
  .theme-skeuo .loading-panel { max-width: 100%; }
}