/* ============================================================
   Themes B — Retro OS · Skeuomorphism · Flat · Material ·
   Neumorphism · Glassmorphism · Claymorphism
   ============================================================ */

/* ---------------- RETRO OS (Windows 95 era) ---------------- */
.s-retro-os {
  --bg: #008080; --fg: #000; --muted: #222; --accent: #000080; --on-accent: #fff;
  --surface: #c0c0c0; --line: #808080; --r: 0; --icon-sw: 2;
  --font: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif; --display: var(--font);
  --bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
  --bevel-in: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  gap: 18px; padding: 18px 18px 0;
  font-size: 12px; -webkit-font-smoothing: none;
}
.s-retro-os .sp-nav { order: 9; margin: auto -18px 0; padding: 4px 5px; gap: 5px; background: #c0c0c0; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; }
.s-retro-os .sp-logo { margin-right: 4px; padding: 3px 8px 3px 5px; gap: 5px; font-size: 12px; font-weight: 700; background: #c0c0c0; box-shadow: var(--bevel-out); }
.s-retro-os .sp-mark { width: 16px; height: 14px; border: 0; border-radius: 0; background: conic-gradient(#20a020 0 25%, #f2c400 0 50%, #1c46c8 0 75%, #e0271d 0); transform: skewY(-6deg); }
.s-retro-os .sp-links { flex: 1; gap: 4px; font-size: 12px; }
.s-retro-os .sp-links a { min-width: 96px; padding: 3px 10px; box-shadow: var(--bevel-out); }
.s-retro-os .sp-links a:first-child { font-weight: 700; box-shadow: var(--bevel-in); background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
.s-retro-os .sp-nav .sp-btn--nav { margin-left: auto; min-width: 0; padding: 3px 10px; box-shadow: var(--bevel-in); outline: 0; }
.s-retro-os .sp-hero, .s-retro-os .sp-panel { position: relative; padding: 32px 12px 12px; gap: 16px; background: #c0c0c0; border-radius: 0; box-shadow: var(--bevel-out); }
.s-retro-os .sp-hero::before, .s-retro-os .sp-panel::before, .s-retro-os .sp-card h3 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0;
  background: linear-gradient(90deg, #000080, #1084d0);
}
.s-retro-os .sp-hero::before { content: "Welcome to Orbit 2.0"; position: absolute; top: 3px; left: 3px; right: 3px; height: 18px; }
.s-retro-os .sp-panel::before { content: "Newsletter Setup"; position: absolute; top: 3px; left: 3px; right: 3px; height: 18px; }
.s-retro-os .sp-hero::after, .s-retro-os .sp-panel::after, .s-retro-os .sp-card h3::after {
  content: "\00D7"; width: 16px; height: 14px; display: grid; place-items: center;
  background: #c0c0c0; color: #000; font: 700 12px/1 Tahoma, Verdana, sans-serif; box-shadow: var(--bevel-out);
}
.s-retro-os .sp-hero::after, .s-retro-os .sp-panel::after { position: absolute; top: 5px; right: 5px; }
.s-retro-os .sp-copy { gap: 10px; }
.s-retro-os .sp-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.s-retro-os .sp-kicker::before { content: "i"; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #000080; color: #fff; font: italic 700 11px/1 Georgia, serif; }
.s-retro-os .sp-title { font-size: clamp(22px, 3.4cqi, 34px); font-weight: 700; line-height: 1.15; letter-spacing: 0; }
.s-retro-os .sp-title span { display: inline; }
.s-retro-os .sp-lede { max-width: 54ch; color: #000; font-size: 12px; line-height: 1.45; }
.s-retro-os .sp-btn { min-width: 86px; padding: 5px 14px; border-radius: 0; background: #c0c0c0; color: #000; font-size: 12px; font-weight: 400; box-shadow: var(--bevel-out); transition: none; }
.s-retro-os .sp-btn:active { box-shadow: var(--bevel-in); padding: 6px 13px 4px 15px; }
.s-retro-os .sp-btn--primary { background: #c0c0c0; color: #000; box-shadow: 0 0 0 1px #000, var(--bevel-out); outline: 1px dotted #000; outline-offset: -5px; }
.s-retro-os .sp-btn--secondary { background: #c0c0c0; }
.s-retro-os .sp-art { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: linear-gradient(#1f5fd0, #86b8ff); box-shadow: var(--bevel-in); }
.s-retro-os .sp-art i { background: #fff; border-radius: 40px; }
.s-retro-os .sp-art i:nth-child(1) { width: 62px; height: 24px; left: 12%; top: 20%; box-shadow: 18px -10px 0 4px #fff, 38px 0 0 0 #fff; }
.s-retro-os .sp-art i:nth-child(2) { width: 84px; height: 28px; left: 50%; top: 46%; box-shadow: 24px -14px 0 6px #fff, 52px 0 0 0 #fff; }
.s-retro-os .sp-art i:nth-child(3) { width: 52px; height: 20px; left: 20%; top: 72%; box-shadow: 16px -9px 0 3px #fff, 32px 0 0 0 #fff; }
.s-retro-os .sp-art i:nth-child(n+4) { display: none; }
.s-retro-os .sp-cards { gap: 14px; }
.s-retro-os .sp-card { padding: 3px 3px 12px; gap: 8px; border-radius: 0; background: #c0c0c0; box-shadow: var(--bevel-out); }
.s-retro-os .sp-card h3 { order: -1; margin: 0; height: 18px; }
.s-retro-os .sp-icon { margin: 6px 8px 0; width: 34px; height: 34px; border-radius: 0; background: transparent; color: #000080; }
.s-retro-os .sp-icon svg { width: 30px; height: 30px; }
.s-retro-os .sp-card p { padding: 0 8px; color: #000; font-size: 12px; }
.s-retro-os .sp-label { font-size: 12px; font-weight: 400; }
.s-retro-os .sp-input { flex-basis: 140px; padding: 5px 6px; border: 0; border-radius: 0; background: #fff; font-size: 12px; box-shadow: var(--bevel-in); }
.s-retro-os .sp-controls { gap: 12px 20px; font-size: 12px; }
.s-retro-os .sp-switch { width: 13px; height: 13px; border-radius: 0; background: #fff; box-shadow: var(--bevel-in); }
.s-retro-os .sp-switch::after { top: 2px; left: 3px; width: 7px; height: 4px; border-radius: 0; background: none; border-left: 2px solid #000; border-bottom: 2px solid #000; box-shadow: none; opacity: 0; transform: rotate(-45deg); }
.s-retro-os .is-on .sp-switch { background: #fff; }
.s-retro-os .is-on .sp-switch::after { opacity: 1; transform: rotate(-45deg); }
.s-retro-os .sp-bar { width: 140px; height: 18px; border-radius: 0; background: #fff; box-shadow: var(--bevel-in); }
.s-retro-os .sp-bar > span { top: 3px; bottom: 3px; left: 3px; width: 60%; border-radius: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); }
.s-retro-os .sp-chips span { padding: 2px 8px; border: 0; border-radius: 0; background: #c0c0c0; font-size: 11px; box-shadow: var(--bevel-out); }

/* ---------------- SKEUOMORPHISM ---------------- */
.s-skeuo {
  --bg: #e6e0d4; --fg: #2d2a26; --muted: #5d574e; --accent: #3a78d4; --on-accent: #fff;
  --surface: #fbf9f3; --line: #c9c1b1; --r: 8px; --icon-sw: 2;
  --font: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 3px),
    #e6e0d4;
}
.s-skeuo .sp-nav {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0; padding: 15px var(--pad);
  background: radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.4px) 0 0 / 4px 4px, linear-gradient(#7a5638, #553821);
  color: #f3e6d4; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .2);
}
.s-skeuo .sp-nav::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(255, 230, 200, .5); border-radius: 4px; pointer-events: none; }
.s-skeuo .sp-logo { font-size: 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.s-skeuo .sp-mark { width: 22px; height: 22px; border: 0; background: radial-gradient(circle at 35% 30%, #fff 0, #9fc3f5 18%, #2f6bc4 60%, #1c4687 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.s-skeuo .sp-links a { text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.s-skeuo .sp-kicker { padding: 4px 11px; border-radius: 99px; background: linear-gradient(#fdf1a6, #f1d34f); color: #6b4f00; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .8); }
.s-skeuo .sp-title { font-size: clamp(34px, 6.6cqi, 70px); color: #3b3730; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .15); }
.s-skeuo .sp-lede { color: #57514a; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.s-skeuo .sp-btn { border-radius: 8px; font-weight: 700; padding: .75em 1.4em; }
.s-skeuo .sp-btn--primary { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); background: linear-gradient(#8fc0f7 0%, #4b8ee6 49%, #2f73d3 50%, #3b86e3 100%); border: 1px solid #1f56a8; box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .15); }
.s-skeuo .sp-btn--primary:active { background: linear-gradient(#2f73d3, #4b8ee6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.s-skeuo .sp-btn--secondary { color: #333; text-shadow: 0 1px 0 #fff; background: linear-gradient(#fff 0%, #eee 49%, #dcdcdc 50%, #ececec 100%); border: 1px solid #a9a9a9; box-shadow: inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .25); }
.s-skeuo .sp-art i:nth-child(1) { left: 2%; right: 2%; bottom: 12%; height: 15%; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 9px), linear-gradient(#b27c47, #8a5a2e 60%, #6c4421); box-shadow: 0 12px 18px rgba(0, 0, 0, .35), inset 0 2px rgba(255, 255, 255, .25); }
.s-skeuo .sp-art i:nth-child(2) { width: 32%; aspect-ratio: 1; left: 10%; bottom: 27%; border-radius: 22%; background: linear-gradient(#78b4ff, #1f5fc9); box-shadow: 0 6px 10px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .2); }
.s-skeuo .sp-art i:nth-child(2)::before { content: ""; position: absolute; left: 6%; right: 6%; top: 4%; height: 48%; border-radius: 18% 18% 50% 50% / 18% 18% 30% 30%; background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .08)); }
.s-skeuo .sp-art i:nth-child(2)::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.s-skeuo .sp-art i:nth-child(3) {
  width: 38%; aspect-ratio: 3 / 4; right: 12%; bottom: 27%; border-radius: 2px 2px 6px 6px; transform: rotate(4deg);
  border-top: 14px solid #6b4a2f;
  background: linear-gradient(90deg, transparent 17%, #e57373 17% calc(17% + 1px), transparent 0), repeating-linear-gradient(#fdf6b3 0 15px, #c3d5ea 15px 16px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, .3);
}
.s-skeuo .sp-art i:nth-child(n+4) { display: none; }
.s-skeuo .sp-card { background: linear-gradient(#fffdf8, #f4efe4); border: 1px solid #d6cdbb; box-shadow: inset 0 1px #fff, 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px rgba(0, 0, 0, .08); }
.s-skeuo .sp-card h3 { text-shadow: 0 1px 0 #fff; }
.s-skeuo .sp-icon { position: relative; overflow: hidden; width: 46px; height: 46px; border-radius: 11px; color: #fff; background: linear-gradient(var(--i1), var(--i2)); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 -2px 4px rgba(0, 0, 0, .18); }
.s-skeuo .sp-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; border-radius: 11px 11px 50% 50% / 11px 11px 20% 20%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); }
.s-skeuo .sp-icon svg { position: relative; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .3)); }
.s-skeuo .sp-card:nth-child(1) { --i1: #ffcf5c; --i2: #ef8a00; }
.s-skeuo .sp-card:nth-child(2) { --i1: #8ee07c; --i2: #2f9e2f; }
.s-skeuo .sp-card:nth-child(3) { --i1: #7fb6ff; --i2: #2463c9; }
.s-skeuo .sp-panel { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 4px), linear-gradient(#ebebeb, #c9c9c9); border: 1px solid #9a9a9a; border-radius: 10px; box-shadow: inset 0 1px #fff, 0 3px 8px rgba(0, 0, 0, .25); }
.s-skeuo .sp-label, .s-skeuo .sp-controls { color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
.s-skeuo .sp-input { background: #fff; border: 1px solid #9d9d9d; border-radius: 6px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); }
.s-skeuo .sp-switch { overflow: hidden; width: 58px; height: 26px; border-radius: 13px; background: linear-gradient(#dcdcdc, #fafafa); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 1px rgba(255, 255, 255, .8); }
.s-skeuo .sp-switch::before { content: "OFF"; position: absolute; right: 8px; top: 0; font: 700 10px/26px "Helvetica Neue", Arial, sans-serif; color: #8a8a8a; text-shadow: none; }
.s-skeuo .sp-switch::after { top: 0; left: 0; width: 26px; height: 26px; border: 1px solid #a5a5a5; background: linear-gradient(#cfcfcf, #fdfdfd); box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 1px #fff; }
.s-skeuo .is-on .sp-switch { background: linear-gradient(#1d62d6, #5ca1f2); }
.s-skeuo .is-on .sp-switch::before { content: "ON"; left: 9px; right: auto; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, .35); }
.s-skeuo .is-on .sp-switch::after { transform: translateX(32px); }
.s-skeuo .sp-bar { height: 14px; border-radius: 7px; background: linear-gradient(#bdbdbd, #efefef); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.s-skeuo .sp-bar > span { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px), linear-gradient(#9bc8ff 0%, #3c86e6 50%, #2a70d2 51%, #5aa0f0 100%); box-shadow: inset 0 1px rgba(255, 255, 255, .6); }
.s-skeuo .sp-chips span { border: 1px solid #aaa; background: linear-gradient(#fff, #e4e4e4); color: #444; font-weight: 700; text-shadow: 0 1px 0 #fff; box-shadow: inset 0 1px #fff, 0 1px 1px rgba(0, 0, 0, .15); }

/* ---------------- FLAT DESIGN ---------------- */
.s-flat {
  --bg: #ecf0f1; --fg: #2c3e50; --muted: #5d6d7e; --accent: #e74c3c; --on-accent: #fff;
  --surface: #fff; --line: #bdc3c7; --r: 4px; --icon-sw: 2.4;
  --font: "Open Sans", "Segoe UI", sans-serif; --display: var(--font);
  padding: 0; gap: 0;
}
.s-flat .sp-nav { padding: 16px var(--pad); background: #34495e; color: #fff; }
.s-flat .sp-logo { font-size: 20px; }
.s-flat .sp-mark { width: 22px; height: 22px; border: 0; border-radius: 4px; background: #1abc9c; }
.s-flat .sp-links a { color: #ecf0f1; font-weight: 600; }
.s-flat .sp-hero { padding: clamp(28px, 5cqi, 58px) var(--pad); background: #1abc9c; color: #fff; }
.s-flat .sp-kicker { padding: 5px 10px; border-radius: 4px; background: #16a085; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.s-flat .sp-title { font-weight: 300; font-size: clamp(36px, 6.8cqi, 74px); line-height: 1.05; letter-spacing: -.02em; }
.s-flat .t2 { font-weight: 700; }
.s-flat .sp-lede { color: #e8fff9; font-size: 17px; }
.s-flat .sp-btn { border-radius: 4px; font-weight: 700; }
.s-flat .sp-btn--primary { background: #e74c3c; color: #fff; }
.s-flat .sp-btn--primary:hover { background: #c0392b; }
.s-flat .sp-btn--secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.s-flat .sp-btn--secondary:hover { background: #fff; color: #16a085; }
.s-flat .sp-art { justify-self: center; width: min(100%, 330px); height: auto; aspect-ratio: 1; min-height: 0; border-radius: 50%; overflow: hidden; background: #16a085; }
@container (max-width: 719px) { .s-flat .sp-art { width: 180px; } }
.s-flat .sp-art i:nth-child(1) { left: 50%; top: 50%; width: 110%; height: 42%; transform-origin: 0 0; transform: rotate(45deg) translateY(-50%); background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 80%); }
.s-flat .sp-art i:nth-child(2) { left: 33%; top: 29%; width: 34%; height: 42%; border-radius: 4px; background: #fff; }
.s-flat .sp-art i:nth-child(3) { left: 39%; top: 38%; width: 22%; height: 4%; border-radius: 2px; background: #e74c3c; }
.s-flat .sp-art i:nth-child(4) { left: 39%; top: 47%; width: 22%; height: 4%; border-radius: 2px; background: #bdc3c7; }
.s-flat .sp-art i:nth-child(5) { left: 39%; top: 56%; width: 14%; height: 4%; border-radius: 2px; background: #bdc3c7; }
.s-flat .sp-cards { gap: 12px; padding: clamp(24px, 4cqi, 40px) var(--pad) 0; }
.s-flat .sp-card { min-height: 170px; padding: 24px 22px; border-radius: 0; color: #fff; }
.s-flat .sp-card:nth-child(1) { background: #3498db; }
.s-flat .sp-card:nth-child(2) { background: #9b59b6; }
.s-flat .sp-card:nth-child(3) { background: #e67e22; }
.s-flat .sp-card h3 { font-size: 20px; font-weight: 600; }
.s-flat .sp-card p { color: rgba(255, 255, 255, .92); }
.s-flat .sp-icon { width: auto; height: auto; place-items: start; margin-bottom: auto; padding-bottom: 18px; background: transparent; color: #fff; }
.s-flat .sp-icon svg { width: 34px; height: 34px; }
.s-flat .sp-panel { margin: clamp(24px, 4cqi, 40px) var(--pad) var(--pad); background: #fff; border-radius: 4px; }
.s-flat .sp-input { border: 2px solid #bdc3c7; border-radius: 4px; background: #fff; }
.s-flat .sp-panel .sp-btn--primary { background: #1abc9c; }
.s-flat .sp-switch { border-radius: 4px; background: #bdc3c7; }
.s-flat .sp-switch::after { border-radius: 3px; box-shadow: none; }
.s-flat .is-on .sp-switch { background: #1abc9c; }
.s-flat .sp-bar { height: 10px; border-radius: 0; background: #ecf0f1; }
.s-flat .sp-bar > span { border-radius: 0; background: #3498db; }
.s-flat .sp-chips span { border: 0; border-radius: 3px; color: #fff; font-weight: 700; }
.s-flat .sp-chips span:nth-child(1) { background: #9b59b6; }
.s-flat .sp-chips span:nth-child(2) { background: #3498db; }
.s-flat .sp-chips span:nth-child(3) { background: #e67e22; }

/* ---------------- MATERIAL DESIGN ---------------- */
.s-material {
  --bg: #fafafa; --fg: #212121; --muted: #616161; --accent: #3f51b5; --on-accent: #fff;
  --surface: #fff; --line: #e0e0e0; --r: 4px; --icon-sw: 2;
  --font: "Roboto", system-ui, sans-serif; --display: var(--font);
  --e1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  --e2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
  --e3: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  padding: 0; gap: 30px;
}
.s-material .sp-nav { z-index: 2; padding: 14px var(--pad); background: #3f51b5; color: #fff; box-shadow: var(--e2); }
.s-material .sp-logo { font-size: 20px; font-weight: 500; }
.s-material .sp-logo::before { content: ""; width: 18px; height: 12px; margin-right: 14px; background: linear-gradient(#fff 0 2px, transparent 2px 5px, #fff 5px 7px, transparent 7px 10px, #fff 10px 12px); }
.s-material .sp-mark { display: none; }
.s-material .sp-links a { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.s-material .sp-hero, .s-material .sp-cards, .s-material .sp-panel { margin-inline: var(--pad); }
.s-material .sp-panel { margin-bottom: var(--pad); }
.s-material .sp-kicker { padding: 7px 12px; border-radius: 16px; background: #e0e0e0; color: #212121; font-size: 13px; font-weight: 400; letter-spacing: .01em; }
.s-material .sp-title { font-weight: 400; font-size: clamp(34px, 6.2cqi, 64px); line-height: 1.1; letter-spacing: -.01em; }
.s-material .t2 { color: #3f51b5; }
.s-material .sp-lede { font-size: 16px; }
.s-material .sp-btn { position: relative; overflow: hidden; padding: .75em 1.4em; border-radius: 4px; font-size: 14px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.s-material .sp-btn--primary { background: #3f51b5; color: #fff; box-shadow: var(--e1); }
.s-material .sp-btn--primary:hover { box-shadow: var(--e2); }
.s-material .sp-btn--secondary { background: transparent; color: #3f51b5; box-shadow: none; }
.s-material .sp-btn--secondary:hover { background: rgba(63, 81, 181, .08); }
.s-material .sp-nav .sp-btn--secondary { color: #fff; }
.s-material .sp-art i:nth-child(-n+3) { width: 56%; height: 48%; border-radius: 4px; background: #fff; }
.s-material .sp-art i:nth-child(1) { left: 4%; top: 6%; box-shadow: var(--e1); }
.s-material .sp-art i:nth-child(2) { left: 20%; top: 24%; box-shadow: var(--e2); }
.s-material .sp-art i:nth-child(3) { left: 36%; top: 42%; box-shadow: var(--e3); background: linear-gradient(#7986cb 0 30%, #fff 30%); }
.s-material .sp-art i:nth-child(-n+3)::after { position: absolute; left: 10px; top: 8px; font: 500 11px/1 Roboto, sans-serif; color: #9e9e9e; }
.s-material .sp-art i:nth-child(1)::after { content: "1dp"; }
.s-material .sp-art i:nth-child(2)::after { content: "3dp"; }
.s-material .sp-art i:nth-child(3)::after { content: "8dp"; color: #fff; }
.s-material .sp-art i:nth-child(4) { right: 4%; bottom: 0; width: 56px; height: 56px; border-radius: 50%; background: #ff4081; box-shadow: var(--e3); }
.s-material .sp-art i:nth-child(4)::before, .s-material .sp-art i:nth-child(4)::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.s-material .sp-art i:nth-child(4)::before { width: 18px; height: 2px; }
.s-material .sp-art i:nth-child(4)::after { width: 2px; height: 18px; }
.s-material .sp-card { background: #fff; box-shadow: var(--e1); transition: box-shadow .25s; }
.s-material .sp-card:hover { box-shadow: var(--e3); }
.s-material .sp-card h3 { font-size: 18px; font-weight: 500; }
.s-material .sp-card::after { content: "LEARN MORE"; margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: .09em; color: #3f51b5; }
.s-material .sp-icon { border-radius: 50%; background: #3f51b5; color: #fff; }
.s-material .sp-card:nth-child(2) .sp-icon { background: #ff4081; }
.s-material .sp-card:nth-child(3) .sp-icon { background: #009688; }
.s-material .sp-panel { background: #fff; box-shadow: var(--e1); }
.s-material .sp-label { font-size: 12px; font-weight: 500; color: #3f51b5; }
.s-material .sp-input { padding: .9em 1em .7em; border: 0; border-bottom: 1px solid #9e9e9e; border-radius: 4px 4px 0 0; background: #f5f5f5; }
.s-material .sp-controls { font-size: 14px; color: #616161; }
.s-material .sp-switch { width: 36px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .38); }
.s-material .sp-switch::after { top: -3px; left: -2px; width: 20px; height: 20px; background: #fafafa; box-shadow: var(--e1); }
.s-material .is-on .sp-switch { background: rgba(255, 64, 129, .5); }
.s-material .is-on .sp-switch::after { background: #ff4081; transform: translateX(20px); }
.s-material .sp-bar { height: 4px; border-radius: 0; background: rgba(63, 81, 181, .25); }
.s-material .sp-bar > span { border-radius: 0; }
.s-material .sp-chips span { padding: .45em .9em; border: 0; border-radius: 16px; background: #e0e0e0; font-size: 13px; }

/* ---------------- NEUMORPHISM ---------------- */
.s-neumorph {
  --bg: #e4e9f0; --fg: #3d4a5c; --muted: #76849a; --accent: #6c63ff; --on-accent: #fff;
  --surface: #e4e9f0; --line: #c8d0de; --r: 18px; --icon-sw: 2;
  --font: "Poppins", sans-serif; --display: var(--font);
  --out: 8px 8px 16px #bec8d6, -8px -8px 16px #fff;
  --out-sm: 4px 4px 8px #bec8d6, -4px -4px 8px #fff;
  --in: inset 5px 5px 10px #bec8d6, inset -5px -5px 10px #fff;
  --in-sm: inset 3px 3px 6px #bec8d6, inset -3px -3px 6px #fff;
}
.s-neumorph .sp-logo { font-weight: 600; }
.s-neumorph .sp-mark { position: relative; width: 30px; height: 30px; border: 0; background: var(--bg); box-shadow: var(--out-sm); }
.s-neumorph .sp-mark::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--accent); }
.s-neumorph .sp-links { font-weight: 500; color: var(--muted); }
.s-neumorph .sp-kicker { padding: 8px 15px; border-radius: 99px; color: var(--accent); box-shadow: var(--in-sm); }
.s-neumorph .sp-title { font-weight: 600; letter-spacing: -.02em; text-shadow: 2px 2px 3px #c3ccd9, -2px -2px 3px #fff; }
.s-neumorph .sp-btn { padding: .95em 1.75em; border-radius: 99px; background: var(--bg); color: var(--fg); box-shadow: var(--out); }
.s-neumorph .sp-btn:active { box-shadow: var(--in); }
.s-neumorph .sp-btn--primary { color: var(--accent); }
.s-neumorph .sp-btn--secondary { color: var(--muted); box-shadow: var(--in); }
.s-neumorph .sp-btn--nav { box-shadow: var(--out-sm); }
.s-neumorph .sp-art i { left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.s-neumorph .sp-art i:nth-child(1) { width: min(64%, 260px); background: var(--bg); box-shadow: 18px 18px 36px #bec8d6, -18px -18px 36px #fff; }
.s-neumorph .sp-art i:nth-child(2) { width: min(46%, 186px); box-shadow: var(--in); }
.s-neumorph .sp-art i:nth-child(3) { width: min(30%, 118px); background: linear-gradient(145deg, #f0f4fa, #d0d8e4); box-shadow: 6px 6px 12px #bec8d6, -6px -6px 12px #fff; }
.s-neumorph .sp-art i:nth-child(4) { width: 10px; background: var(--accent); box-shadow: 0 0 8px rgba(108, 99, 255, .6); transform: translate(-50%, -50%) rotate(-40deg) translateY(-34px); }
.s-neumorph .sp-art i:nth-child(5) { display: none; }
.s-neumorph .sp-card { padding: 24px; border-radius: 22px; background: var(--bg); box-shadow: var(--out); }
.s-neumorph .sp-card h3 { font-weight: 600; }
.s-neumorph .sp-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--bg); box-shadow: var(--in-sm); }
.s-neumorph .sp-panel { padding: 26px; border-radius: 24px; background: var(--bg); box-shadow: var(--out); }
.s-neumorph .sp-input { padding: .9em 1.3em; border: 0; border-radius: 99px; background: var(--bg); box-shadow: var(--in); }
.s-neumorph .sp-panel .sp-btn--primary { box-shadow: var(--out-sm); }
.s-neumorph .sp-switch { width: 52px; height: 28px; background: var(--bg); box-shadow: var(--in-sm); }
.s-neumorph .sp-switch::after { top: 4px; left: 4px; width: 20px; height: 20px; background: var(--bg); box-shadow: 2px 2px 4px #bec8d6, -2px -2px 4px #fff; }
.s-neumorph .is-on .sp-switch { background: var(--bg); }
.s-neumorph .is-on .sp-switch::after { transform: translateX(24px); background: var(--accent); box-shadow: 0 0 8px rgba(108, 99, 255, .5); }
.s-neumorph .sp-bar { height: 12px; background: var(--bg); box-shadow: var(--in-sm); }
.s-neumorph .sp-bar > span { top: 3px; bottom: 3px; left: 3px; background: linear-gradient(90deg, #938cff, #6c63ff); }
.s-neumorph .sp-chips span { padding: .45em 1em; border: 0; background: var(--bg); color: var(--muted); box-shadow: var(--out-sm); }

/* ---------------- GLASSMORPHISM ---------------- */
.s-glass {
  --bg: #1b1036; --fg: #fff; --muted: rgba(255, 255, 255, .74); --accent: #fff; --on-accent: #2b1a5e;
  --surface: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .28); --r: 20px; --icon-sw: 2;
  --font: -apple-system, "SF Pro Text", system-ui, "Inter", sans-serif;
  --display: -apple-system, "SF Pro Display", system-ui, "Inter", sans-serif;
  --blur: blur(18px) saturate(160%);
  background: linear-gradient(135deg, #2a1466, #140b2e 60%, #0d1a3d);
}
.s-glass .sp-bg i { display: block; aspect-ratio: 1; border-radius: 50%; filter: blur(18px); }
.s-glass .sp-bg i:nth-child(1) { width: 44%; left: -8%; top: -12%; background: #ff5fa2; }
.s-glass .sp-bg i:nth-child(2) { width: 38%; right: -6%; top: 10%; background: #7b5cff; }
.s-glass .sp-bg i:nth-child(3) { width: 32%; left: 32%; top: 50%; background: #22c1f2; }
.s-glass .sp-bg i:nth-child(4) { width: 30%; right: 8%; bottom: -10%; background: #ffb86b; }
.s-glass .sp-bg i:nth-child(5) { width: 22%; left: 4%; bottom: 2%; background: #4df2c9; opacity: .8; }
.s-glass .sp-nav, .s-glass .sp-card, .s-glass .sp-panel {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 8px 32px rgba(10, 5, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.s-glass .sp-nav { padding: 12px 16px; border-radius: 18px; }
.s-glass .sp-mark { border-color: #fff; }
.s-glass .sp-links { color: var(--muted); }
.s-glass .sp-kicker { padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.s-glass .sp-title { letter-spacing: -.03em; text-shadow: 0 2px 24px rgba(20, 10, 60, .4); }
.s-glass .sp-btn { border-radius: 14px; }
.s-glass .sp-btn--primary { background: rgba(255, 255, 255, .92); color: #2b1a5e; box-shadow: 0 8px 24px rgba(10, 5, 30, .35); }
.s-glass .sp-btn--secondary { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.s-glass .sp-btn:hover { filter: brightness(1.1); }
.s-glass .sp-art i:nth-child(1) { width: 44%; aspect-ratio: 1; right: 10%; top: 2%; border-radius: 50%; background: linear-gradient(135deg, #ff8ac2, #ff4f8b); }
.s-glass .sp-art i:nth-child(2) { width: 30%; aspect-ratio: 1; left: 8%; bottom: 4%; border-radius: 50%; background: linear-gradient(135deg, #6ae3ff, #3b82f6); }
.s-glass .sp-art i:nth-child(3) {
  left: 14%; right: 10%; top: 24%; height: 52%; border-radius: 22px; transform: rotate(-8deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .42); box-shadow: 0 20px 40px rgba(10, 5, 30, .35);
}
.s-glass .sp-art i:nth-child(3)::before { content: ""; position: absolute; left: 9%; top: 20%; width: 15%; aspect-ratio: 1.3; border-radius: 6px; background: linear-gradient(135deg, #ffe08a, #d9a43b); }
.s-glass .sp-art i:nth-child(3)::after { content: "\2022\2022\2022\2022  4402"; position: absolute; left: 9%; bottom: 16%; font: 600 15px/1 var(--font); letter-spacing: .16em; color: #fff; }
.s-glass .sp-card, .s-glass .sp-panel { border-radius: 22px; }
.s-glass .sp-icon { border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: rgba(255, 255, 255, .18); color: #fff; }
.s-glass .sp-input { border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; }
.s-glass .sp-input::placeholder { color: rgba(255, 255, 255, .65); }
.s-glass .sp-switch { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.s-glass .is-on .sp-switch { background: rgba(255, 255, 255, .5); }
.s-glass .sp-bar { background: rgba(255, 255, 255, .18); }
.s-glass .sp-bar > span { background: linear-gradient(90deg, #ff8ac2, #8f7bff); }
.s-glass .sp-chips span { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------------- CLAYMORPHISM ---------------- */
.s-clay {
  --bg: #f6efe9; --fg: #3a2e4f; --muted: #6f6385; --accent: #ff7eb3; --on-accent: #fff;
  --surface: #fff; --line: #e6dcf0; --r: 28px; --icon-sw: 2.6;
  --font: "Nunito", sans-serif; --display: var(--font);
  --clay: 0 18px 30px -8px rgba(122, 92, 170, .35), inset -8px -10px 18px rgba(80, 50, 120, .12), inset 8px 10px 18px rgba(255, 255, 255, .75);
  --clay-sm: 0 10px 18px -6px rgba(122, 92, 170, .35), inset -4px -6px 10px rgba(80, 50, 120, .14), inset 4px 6px 10px rgba(255, 255, 255, .7);
  background: radial-gradient(circle at 80% 0%, #f7dff0 0, transparent 40%), radial-gradient(circle at 0% 100%, #dff3ea 0, transparent 40%), #f6efe9;
}
.s-clay .sp-logo { font-size: 22px; font-weight: 900; }
.s-clay .sp-mark { width: 26px; height: 26px; border: 0; background: #b9a4ff; box-shadow: var(--clay-sm); }
.s-clay .sp-links { font-weight: 700; color: var(--muted); }
.s-clay .sp-kicker { padding: 8px 16px; border-radius: 99px; background: #fff3b8; color: #7a5c00; font-weight: 800; box-shadow: var(--clay-sm); }
.s-clay .sp-title { font-weight: 900; letter-spacing: -.02em; }
.s-clay .t2 { color: #9b7bff; }
.s-clay .sp-lede { font-weight: 600; }
.s-clay .sp-btn { padding: .95em 1.75em; border-radius: 99px; font-size: 16px; font-weight: 800; }
.s-clay .sp-btn--primary { background: #ff7eb3; color: #fff; box-shadow: 0 14px 24px -8px rgba(255, 90, 150, .55), inset -4px -6px 10px rgba(160, 20, 80, .25), inset 4px 6px 10px rgba(255, 255, 255, .55); }
.s-clay .sp-btn--secondary { background: #fff; color: var(--fg); box-shadow: var(--clay-sm); }
.s-clay .sp-btn:hover { transform: translateY(-2px) scale(1.02); }
.s-clay .sp-btn:active { transform: scale(.97); }
.s-clay .sp-art i:nth-child(1) { width: 50%; aspect-ratio: 1; left: 14%; top: 6%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffd1e4 0, #ff8cbc 45%, #f06aa2 100%); box-shadow: 0 30px 40px -12px rgba(240, 106, 162, .5), inset -12px -16px 26px rgba(150, 20, 80, .25), inset 12px 14px 24px rgba(255, 255, 255, .55); }
.s-clay .sp-art i:nth-child(2) { width: 40%; height: 20%; right: 2%; top: 14%; border-radius: 99px; background: #9ee8c4; transform: rotate(24deg); box-shadow: 0 18px 26px -10px rgba(60, 160, 110, .5), inset -6px -8px 14px rgba(20, 90, 60, .2), inset 6px 8px 14px rgba(255, 255, 255, .6); }
.s-clay .sp-art i:nth-child(3) { width: 34%; aspect-ratio: 1; right: 10%; bottom: 2%; border-radius: 50%; background: radial-gradient(circle, transparent 0 27%, #9b82f0 28%, #cbbcff 44%, #9b82f0 70%); box-shadow: 0 18px 26px -10px rgba(110, 80, 200, .45); }
.s-clay .sp-art i:nth-child(4) { width: 16%; aspect-ratio: 1; left: 4%; bottom: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8d6, #ffd95e 60%, #f5c030); box-shadow: 0 12px 18px -6px rgba(220, 170, 30, .5); }
.s-clay .sp-card { padding: 26px; border-radius: 30px; box-shadow: var(--clay); }
.s-clay .sp-card:nth-child(1) { background: #ffe0ec; }
.s-clay .sp-card:nth-child(2) { background: #dcf6e9; }
.s-clay .sp-card:nth-child(3) { background: #e6ddff; }
.s-clay .sp-card h3 { font-size: 20px; font-weight: 900; }
.s-clay .sp-card p { font-weight: 600; }
.s-clay .sp-icon { width: 50px; height: 50px; border-radius: 18px; background: #fff; color: var(--fg); box-shadow: var(--clay-sm); }
.s-clay .sp-panel { border-radius: 32px; background: #fff; box-shadow: var(--clay); }
.s-clay .sp-label, .s-clay .sp-controls { font-weight: 800; }
.s-clay .sp-input { padding: .9em 1.3em; border: 0; border-radius: 99px; background: #f4eefb; box-shadow: inset 4px 5px 10px rgba(80, 50, 120, .14), inset -4px -4px 10px rgba(255, 255, 255, .9); }
.s-clay .sp-switch { width: 52px; height: 30px; background: #eee6f7; box-shadow: inset 3px 4px 8px rgba(80, 50, 120, .18); }
.s-clay .sp-switch::after { top: 4px; left: 4px; width: 22px; height: 22px; box-shadow: 0 4px 8px rgba(80, 50, 120, .3), inset -2px -3px 5px rgba(80, 50, 120, .15); }
.s-clay .is-on .sp-switch { background: #9ee8c4; }
.s-clay .is-on .sp-switch::after { transform: translateX(22px); }
.s-clay .sp-bar { height: 14px; background: #eee6f7; box-shadow: inset 2px 3px 6px rgba(80, 50, 120, .18); }
.s-clay .sp-bar > span { background: linear-gradient(90deg, #b9a4ff, #ff8cbc); box-shadow: inset 0 3px 4px rgba(255, 255, 255, .5); }
.s-clay .sp-chips span { padding: .45em 1em; border: 0; font-weight: 800; box-shadow: var(--clay-sm); }
.s-clay .sp-chips span:nth-child(1) { background: #ffe0ec; }
.s-clay .sp-chips span:nth-child(2) { background: #dcf6e9; }
.s-clay .sp-chips span:nth-child(3) { background: #e6ddff; }