@charset "UTF-8";
/* ============================================================
   Themes F — Grunge · Risograph · Vaporwave · Frutiger Aero ·
   Data-dense UI · Template SaaS
   ============================================================ */

/* ---------------- GRUNGE / DECONSTRUCTED ---------------- */
.s-grunge {
  --bg: #e9e4d8; --fg: #1b1a17; --muted: #3a3732; --accent: #8e1b1b; --on-accent: #e9e4d8;
  --surface: #d9d2c3; --line: #1b1a17; --r: 0; --icon-sw: 2;
  --font: "Special Elite", "Courier New", monospace; --display: "Anton", Impact, sans-serif;
  --torn: polygon(0% 3%, 8% 0%, 17% 4%, 28% 1%, 39% 5%, 51% 0%, 62% 4%, 73% 1%, 84% 5%, 93% 1%, 100% 4%, 99% 97%, 90% 100%, 79% 96%, 68% 99%, 57% 95%, 46% 100%, 34% 96%, 23% 99%, 12% 95%, 3% 99%, 0% 96%);
  font-size: 15px;
  background: linear-gradient(170deg, #ece7dc, #d6cebd);
}
.s-grunge .sp-bg i:nth-child(1) { display: block; inset: 0; background: repeating-linear-gradient(97deg, transparent 0 37px, rgba(27, 26, 23, .07) 37px 38px), repeating-linear-gradient(-8deg, transparent 0 61px, rgba(27, 26, 23, .05) 61px 62px); }
.s-grunge .sp-bg i:nth-child(5) { display: block; inset: 0; background: var(--noise); opacity: .32; }
.s-grunge .sp-nav { padding-bottom: 12px; border-bottom: 3px solid #1b1a17; }
.s-grunge .sp-logo { padding: 4px 10px; background: #1b1a17; color: #e9e4d8; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-3deg); clip-path: var(--torn); }
.s-grunge .sp-mark { display: none; }
.s-grunge .sp-links { font-size: 14px; }
.s-grunge .sp-links a:nth-child(2) { text-decoration: line-through; }
.s-grunge .sp-kicker { padding: 5px 16px; background: rgba(232, 211, 107, .9); font-size: 14px; font-weight: 400; letter-spacing: 0; transform: rotate(-3deg); clip-path: polygon(2% 12%, 98% 0, 100% 88%, 0 100%); }
.s-grunge .sp-title { font-weight: 400; font-size: clamp(50px, 10.5cqi, 124px); line-height: .86; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 2px 1px 0 rgba(27, 26, 23, .35), -1px 0 0 rgba(142, 27, 27, .4); }
.s-grunge .t2 { position: relative; z-index: 1; display: table; margin: -.22em 0 0 .6em; padding: 0 .1em; font-family: "Special Elite", monospace; font-size: .5em; line-height: 1.2; text-transform: lowercase; color: #e9e4d8; background: #8e1b1b; transform: rotate(-4deg); text-shadow: none; }
.s-grunge .sp-lede { padding: 12px 14px; background: #f4f0e6; color: #1b1a17; font-size: 15px; line-height: 1.55; transform: rotate(1deg); clip-path: var(--torn); }
.s-grunge .sp-btn { border-radius: 0; font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; padding: .8em 1.4em; transition: transform .1s; }
.s-grunge .sp-btn--primary { background: #1b1a17; color: #e9e4d8; clip-path: polygon(1% 6%, 99% 0, 100% 94%, 0 100%); }
.s-grunge .sp-btn--primary:hover { background: #8e1b1b; }
.s-grunge .sp-btn--secondary { background: transparent; color: #8e1b1b; box-shadow: none; outline: 2px dashed #8e1b1b; outline-offset: -4px; transform: rotate(-2deg); }
.s-grunge .sp-art i:nth-child(1) { inset: 4% 20% 14% 2%; background: var(--noise), radial-gradient(circle at 40% 38%, #a39d91 0, #4a4640 55%, #1b1a17 100%); filter: contrast(1.35); transform: rotate(-4deg); box-shadow: 4px 5px 0 rgba(0, 0, 0, .25); }
.s-grunge .sp-art i:nth-child(2) { right: 0; top: 16%; width: 46%; height: 42%; background: #f4f0e6; transform: rotate(6deg); clip-path: var(--torn); }
.s-grunge .sp-art i:nth-child(2)::after { content: "orbit\A issue no. 02\A no rules, just work"; position: absolute; inset: 14% 10%; white-space: pre; font: 14px/1.5 "Special Elite", monospace; color: #1b1a17; }
.s-grunge .sp-art i:nth-child(3) { right: 16%; top: 12%; width: 24%; height: 9%; background: rgba(232, 211, 107, .85); transform: rotate(-10deg); }
.s-grunge .sp-art i:nth-child(4) { left: 8%; bottom: 2%; width: 24%; aspect-ratio: 1; opacity: .88; background: linear-gradient(45deg, transparent 44%, #8e1b1b 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #8e1b1b 44% 56%, transparent 56%); }
.s-grunge .sp-card { padding: 22px 20px 26px; border-radius: 0; clip-path: var(--torn); }
.s-grunge .sp-card:nth-child(1) { background: #c8b28a; transform: rotate(-1.5deg); }
.s-grunge .sp-card:nth-child(2) { background: #1b1a17; color: #e9e4d8; transform: rotate(1deg); }
.s-grunge .sp-card:nth-child(3) { background: #f4f0e6; transform: rotate(-.5deg); }
.s-grunge .sp-card:nth-child(2) p { color: #d8d2c4; }
.s-grunge .sp-card h3 { font-family: var(--display); font-size: 28px; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.s-grunge .sp-card p { color: #2b2925; font-size: 14px; }
.s-grunge .sp-icon { border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit; }
.s-grunge .sp-panel { --line: #6b6660; --muted: #b9b2a4; background: var(--noise), #1b1a17; color: #e9e4d8; clip-path: var(--torn); padding: 26px 22px; }
.s-grunge .sp-label { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.s-grunge .sp-input { border: 0; border-radius: 0; background: #f4f0e6; color: #1b1a17; }
.s-grunge .sp-panel .sp-btn--primary { background: #8e1b1b; }
.s-grunge .sp-switch { border-radius: 0; background: #4a4640; }
.s-grunge .sp-switch::after { border-radius: 0; background: #e9e4d8; box-shadow: none; }
.s-grunge .is-on .sp-switch { background: #8e1b1b; }
.s-grunge .sp-bar { height: 10px; border-radius: 0; background: #4a4640; }
.s-grunge .sp-bar > span { border-radius: 0; background: repeating-linear-gradient(-60deg, #e8d36b 0 4px, #c9b453 4px 7px); }
.s-grunge .sp-chips span { border: 0; border-radius: 0; background: rgba(232, 211, 107, .9); color: #1b1a17; transform: rotate(-2deg); }
.s-grunge .sp-chips span:nth-child(2) { transform: rotate(3deg); background: #c8b28a; }

/* ---------------- RISOGRAPH ---------------- */
.s-riso {
  --bg: #f4efe4; --fg: #0078bf; --muted: #2f6fa8; --accent: #ff48b0; --on-accent: #f4efe4;
  --surface: #f4efe4; --line: #0078bf; --r: 0; --icon-sw: 2.2;
  --font: "IBM Plex Mono", ui-monospace, monospace; --display: "Archivo Black", "Arial Black", sans-serif;
  font-size: 14px;
}
.s-riso::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: var(--noise); opacity: .2; mix-blend-mode: multiply; }
.s-riso .sp-logo { font-size: 22px; font-weight: 400; }
.s-riso .sp-mark { width: 22px; height: 22px; border: 0; background: #ff48b0; mix-blend-mode: multiply; box-shadow: 5px 3px 0 #0078bf; }
.s-riso .sp-links { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.s-riso .sp-kicker { padding: 3px 8px; background: #ff48b0; color: #f4efe4; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; mix-blend-mode: multiply; }
.s-riso .sp-title { font-weight: 400; font-size: clamp(40px, 8cqi, 92px); line-height: .98; letter-spacing: -.02em; text-shadow: 4px 3px 0 rgba(255, 72, 176, .88); mix-blend-mode: multiply; }
.s-riso .t2 { color: #ff48b0; text-shadow: -4px 2px 0 rgba(255, 232, 0, .95); }
.s-riso .sp-lede { color: #0078bf; font-size: 14px; line-height: 1.6; }
.s-riso .sp-btn { border-radius: 0; font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.s-riso .sp-btn--primary { background: #ff48b0; color: #0078bf; box-shadow: 3px 3px 0 rgba(0, 120, 191, .55); mix-blend-mode: multiply; }
.s-riso .sp-btn--secondary { background: transparent; color: #0078bf; box-shadow: inset 0 0 0 2px #0078bf; }
.s-riso .sp-art i { mix-blend-mode: multiply; }
.s-riso .sp-art i:nth-child(1) { width: 60%; aspect-ratio: 1; left: 4%; top: 8%; border-radius: 50%; background: #ff48b0; }
.s-riso .sp-art i:nth-child(2) { width: 54%; aspect-ratio: 1; right: 4%; top: 24%; border-radius: 50%; background: #0078bf; }
.s-riso .sp-art i:nth-child(3) { width: 34%; height: 50%; left: 32%; top: 2%; background: #ffe800; transform: rotate(14deg); }
.s-riso .sp-art i:nth-child(4) { left: 6%; right: 6%; bottom: 0; height: 30%; background: radial-gradient(circle, #0078bf 42%, transparent 46%) 0 0 / 9px 9px; -webkit-mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .05)); mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .05)); }
.s-riso .sp-card { padding: 20px; background: rgba(255, 72, 176, .82); mix-blend-mode: multiply; }
.s-riso .sp-card:nth-child(2) { background: rgba(255, 232, 0, .9); }
.s-riso .sp-card:nth-child(3) { background: rgba(0, 169, 92, .55); }
.s-riso .sp-card::after { content: ""; position: absolute; inset: 0; transform: translate(5px, 4px); border: 2px solid #0078bf; pointer-events: none; }
.s-riso .sp-card h3 { font-size: 19px; font-weight: 400; }
.s-riso .sp-card p { color: #0078bf; }
.s-riso .sp-icon { border-radius: 50%; background: #f4efe4; color: #0078bf; }
.s-riso .sp-panel { background: rgba(255, 232, 0, .92); mix-blend-mode: multiply; }
.s-riso .sp-label { font-family: var(--display); font-size: 16px; font-weight: 400; }
.s-riso .sp-input { border: 2px solid #0078bf; border-radius: 0; background: #f4efe4; color: #0078bf; }
.s-riso .sp-input::placeholder { color: #5b93c7; }
.s-riso .sp-switch { background: #9fc4e0; }
.s-riso .is-on .sp-switch { background: #ff48b0; }
.s-riso .sp-switch::after { background: #f4efe4; box-shadow: none; }
.s-riso .sp-bar { background: rgba(0, 120, 191, .25); }
.s-riso .sp-bar > span { background: #0078bf; }
.s-riso .sp-chips span { border: 2px solid #0078bf; border-radius: 0; background: transparent; color: #0078bf; }
.s-riso .sp-chips span:nth-child(2) { border-color: #ff48b0; color: #ff48b0; }

/* ---------------- VAPORWAVE ---------------- */
.s-vaporwave {
  --bg: #ffc6ec; --fg: #3d1e6d; --muted: #5d3d8f; --accent: #ff71ce; --on-accent: #fff;
  --surface: #e9dcff; --line: #b967ff; --r: 0; --icon-sw: 2;
  --font: Tahoma, "MS Sans Serif", Verdana, sans-serif; --display: "Times New Roman", Times, serif;
  --bevel-out: inset -1px -1px #3d1e6d, inset 1px 1px #fff, inset -2px -2px #9d86c7, inset 2px 2px #f3ecff;
  --bevel-in: inset -1px -1px #fff, inset 1px 1px #9d86c7, inset -2px -2px #f3ecff, inset 2px 2px #3d1e6d;
  font-size: 13px;
  background: linear-gradient(180deg, #ffb3e6 0%, #d6b3ff 48%, #9eeaff 100%);
}
.s-vaporwave .sp-bg i:nth-child(1) { display: block; left: -30%; right: -30%; bottom: 0; height: 30%; background: repeating-conic-gradient(#b967ff 0 25%, #fff 0 50%) 0 0 / 48px 48px; transform: perspective(260px) rotateX(58deg); transform-origin: 50% 100%; opacity: .55; }
.s-vaporwave .sp-logo { font-family: var(--display); font-size: 22px; font-style: italic; font-weight: 400; letter-spacing: .3em; }
.s-vaporwave .sp-mark { width: 20px; height: 20px; border: 0; background: linear-gradient(135deg, #ff71ce, #01cdfe); box-shadow: var(--bevel-out); border-radius: 0; }
.s-vaporwave .sp-links { gap: 20px; letter-spacing: .2em; }
.s-vaporwave .sp-kicker { padding: 3px 8px; border: 1px solid #3d1e6d; background: #ffffe1; color: #3d1e6d; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.s-vaporwave .sp-kicker::before { content: "ヴェイパー ・ "; }
.s-vaporwave .sp-title { font-weight: 400; font-style: italic; font-size: clamp(34px, 6.4cqi, 74px); line-height: 1.08; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #ff71ce, 6px 6px 0 #01cdfe; }
.s-vaporwave .sp-lede { color: #3d1e6d; font-size: 14px; line-height: 1.6; letter-spacing: .04em; }
.s-vaporwave .sp-btn { min-width: 96px; padding: 6px 16px; border-radius: 0; font-size: 13px; font-weight: 400; color: #3d1e6d; box-shadow: var(--bevel-out); transition: none; }
.s-vaporwave .sp-btn:active { box-shadow: var(--bevel-in); }
.s-vaporwave .sp-btn--primary { background: #ffd6f5; box-shadow: 0 0 0 1px #3d1e6d, var(--bevel-out); }
.s-vaporwave .sp-btn--secondary { background: #d9f7ff; }
.s-vaporwave .sp-art { overflow: hidden; }
.s-vaporwave .sp-art i:nth-child(1) { left: 6%; bottom: 8%; width: 13%; height: 62%; background: repeating-linear-gradient(90deg, #f4f1fa 0 6px, #d4cde8 6px 8px); box-shadow: inset -6px 0 10px rgba(61, 30, 109, .25); }
.s-vaporwave .sp-art i:nth-child(1)::before, .s-vaporwave .sp-art i:nth-child(1)::after { content: ""; position: absolute; left: -16%; right: -16%; height: 7%; background: #ece6f7; box-shadow: inset 0 -3px 0 #c9bfe3; }
.s-vaporwave .sp-art i:nth-child(1)::before { top: -7%; }
.s-vaporwave .sp-art i:nth-child(1)::after { bottom: -7%; }
.s-vaporwave .sp-art i:nth-child(2) { right: 4%; top: 12%; width: 60%; height: 42%; background: #e9dcff; box-shadow: var(--bevel-out), 6px 6px 0 rgba(61, 30, 109, .25); }
.s-vaporwave .sp-art i:nth-child(2)::before { content: "aesthetic.exe"; position: absolute; top: 3px; left: 3px; right: 3px; height: 18px; padding: 0 6px; background: linear-gradient(90deg, #ff71ce, #01cdfe); color: #fff; font: 700 12px/18px Tahoma, sans-serif; }
.s-vaporwave .sp-art i:nth-child(2)::after { content: "未来へようこそ\A welcome to the future"; position: absolute; left: 14px; right: 10px; top: 36px; white-space: pre; font: 13px/1.6 Tahoma, sans-serif; color: #3d1e6d; }
.s-vaporwave .sp-art i:nth-child(3) { right: 2%; bottom: 2%; }
.s-vaporwave .sp-art i:nth-child(3)::after { content: "\1F334"; font-size: 64px; line-height: 1; }
.s-vaporwave .sp-art i:nth-child(4) { left: 24%; top: 4%; writing-mode: vertical-rl; }
.s-vaporwave .sp-art i:nth-child(4)::after { content: "ヴェイパーウェイヴ"; font: 700 18px/1 system-ui, sans-serif; letter-spacing: .1em; color: #ff71ce; text-shadow: 2px 2px 0 #fff; }
.s-vaporwave .sp-art i:nth-child(5) { left: 30%; bottom: 10%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, #fffb96, #ff71ce); -webkit-mask: linear-gradient(#000 0 58%, transparent 58% 64%, #000 64% 74%, transparent 74% 80%, #000 80%); mask: linear-gradient(#000 0 58%, transparent 58% 64%, #000 64% 74%, transparent 74% 80%, #000 80%); }
.s-vaporwave .sp-card { padding: 3px 3px 12px; gap: 8px; border-radius: 0; background: #e9dcff; box-shadow: var(--bevel-out); }
.s-vaporwave .sp-card h3 { order: -1; display: flex; align-items: center; height: 20px; margin: 0; padding: 0 6px; background: linear-gradient(90deg, #ff71ce, #01cdfe); color: #fff; font: 700 12px/1 Tahoma, sans-serif; letter-spacing: .2em; }
.s-vaporwave .sp-icon { margin: 6px 10px 0; background: transparent; color: #b967ff; }
.s-vaporwave .sp-card p { padding: 0 10px; color: #3d1e6d; font-size: 13px; }
.s-vaporwave .sp-panel { position: relative; padding: 32px 14px 14px; border-radius: 0; background: #e9dcff; box-shadow: var(--bevel-out); }
.s-vaporwave .sp-panel::before { content: "ｖａｐｏｒ．ｅｘｅ"; position: absolute; top: 3px; left: 3px; right: 3px; height: 20px; padding: 0 6px; background: linear-gradient(90deg, #b967ff, #01cdfe); color: #fff; font: 700 12px/20px Tahoma, sans-serif; }
.s-vaporwave .sp-label { font-size: 13px; font-weight: 400; }
.s-vaporwave .sp-input { border: 0; border-radius: 0; background: #fff; font-size: 13px; box-shadow: var(--bevel-in); }
.s-vaporwave .sp-controls { font-size: 13px; }
.s-vaporwave .sp-switch { border-radius: 0; background: #fff; box-shadow: var(--bevel-in); }
.s-vaporwave .sp-switch::after { border-radius: 0; background: #d6b3ff; box-shadow: var(--bevel-out); }
.s-vaporwave .is-on .sp-switch { background: #ffd6f5; }
.s-vaporwave .sp-bar { height: 16px; border-radius: 0; background: #fff; box-shadow: var(--bevel-in); }
.s-vaporwave .sp-bar > span { top: 3px; bottom: 3px; left: 3px; border-radius: 0; background: linear-gradient(90deg, #ff71ce, #b967ff, #01cdfe); }
.s-vaporwave .sp-chips span { border: 0; border-radius: 0; background: #d9f7ff; box-shadow: var(--bevel-out); font-size: 12px; }

/* ---------------- FRUTIGER AERO ---------------- */
.s-aero {
  --bg: #dff4ff; --fg: #0b3d5c; --muted: #2f6282; --accent: #1fa3e0; --on-accent: #fff;
  --surface: rgba(255, 255, 255, .75); --line: rgba(31, 163, 224, .35); --r: 12px; --icon-sw: 2.2;
  --font: "Segoe UI", "Frutiger", "Myriad Pro", "Open Sans", sans-serif; --display: var(--font);
  background: linear-gradient(180deg, #38aef0 0%, #8fd6ff 36%, #e4f7ff 70%);
}
.s-aero .sp-bg i { display: block; }
.s-aero .sp-bg i:nth-child(1) { left: -25%; right: -25%; bottom: -34%; height: 58%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 0%, #b4ec78, #4caf2e 70%); box-shadow: 0 -6px 30px rgba(255, 255, 255, .5); }
.s-aero .sp-bg i:nth-child(2), .s-aero .sp-bg i:nth-child(3) { border-radius: 50%; background: #fff; filter: blur(14px); opacity: .85; }
.s-aero .sp-bg i:nth-child(2) { width: 30%; height: 70px; left: 6%; top: 10%; }
.s-aero .sp-bg i:nth-child(3) { width: 24%; height: 56px; right: 10%; top: 4%; }
.s-aero .sp-bg i:nth-child(4), .s-aero .sp-bg i:nth-child(5) { border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 12%, rgba(255, 255, 255, .15) 36%, rgba(120, 210, 255, .25) 70%, rgba(255, 255, 255, .6) 72%, transparent 74%); }
.s-aero .sp-bg i:nth-child(4) { width: 90px; height: 90px; left: 44%; top: 40%; }
.s-aero .sp-bg i:nth-child(5) { width: 54px; height: 54px; right: 6%; bottom: 30%; }
.s-aero .sp-nav { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(225, 244, 255, .8)); box-shadow: 0 2px 10px rgba(0, 80, 140, .18), inset 0 1px 0 #fff; }
.s-aero .sp-logo { font-weight: 600; font-size: 20px; color: #0a6fa6; }
.s-aero .sp-mark { width: 22px; height: 22px; border: 0; background: radial-gradient(circle at 35% 30%, #fff 0 14%, #7fd6ff 38%, #1fa3e0 70%, #0a6fa6 100%); box-shadow: 0 1px 3px rgba(0, 60, 110, .4); }
.s-aero .sp-links { color: #0b3d5c; }
.s-aero .sp-kicker { padding: 5px 14px; border-radius: 99px; background: linear-gradient(180deg, #b4ec78, #5bbd2b 55%, #4aa820); color: #fff; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0, 60, 0, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 6px rgba(40, 120, 20, .35); }
.s-aero .sp-title { font-weight: 300; font-size: clamp(36px, 6.6cqi, 76px); line-height: 1.05; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0, 90, 160, .5); }
.s-aero .t2 { font-weight: 600; }
.s-aero .sp-lede { color: #0b3d5c; font-size: 16px; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.s-aero .sp-btn { border-radius: 8px; font-weight: 600; padding: .72em 1.45em; text-shadow: 0 -1px 0 rgba(0, 50, 90, .35); }
.s-aero .sp-btn--primary { border: 1px solid #0a6fa6; background: linear-gradient(180deg, #86dbff 0%, #1fa3e0 50%, #0a86c7 51%, #3cbcf2 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 8px rgba(10, 110, 170, .35); }
.s-aero .sp-btn--secondary { border: 1px solid #3f9a1c; background: linear-gradient(180deg, #c3f28f 0%, #6cc644 50%, #4aa820 51%, #7fd552 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(40, 120, 20, .3); }
.s-aero .sp-btn:hover { filter: brightness(1.07); }
.s-aero .sp-art i:nth-child(1), .s-aero .sp-art i:nth-child(2), .s-aero .sp-art i:nth-child(3) { border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, .2) 30%, rgba(90, 200, 255, .35) 66%, rgba(255, 255, 255, .75) 71%, transparent 72%); box-shadow: inset 0 0 18px rgba(255, 255, 255, .5); }
.s-aero .sp-art i:nth-child(1) { width: 44%; aspect-ratio: 1; left: 4%; top: 2%; }
.s-aero .sp-art i:nth-child(2) { width: 22%; aspect-ratio: 1; left: 44%; top: 0; }
.s-aero .sp-art i:nth-child(3) { width: 12%; aspect-ratio: 1; left: 34%; top: 46%; }
.s-aero .sp-art i:nth-child(4) { right: 2%; bottom: 6%; width: 60%; height: 50%; border: 1px solid rgba(255, 255, 255, .95); border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(190, 235, 255, .4)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0, 80, 140, .28), inset 0 1px 0 #fff; }
.s-aero .sp-art i:nth-child(4)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, rgba(160, 225, 255, .9), rgba(60, 170, 230, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.s-aero .sp-art i:nth-child(4)::after { content: ""; position: absolute; left: 16px; right: 16px; top: 44px; height: 16px; border-radius: 8px; background: linear-gradient(#c3f28f, #4caf2e 50%, #3a9a22 51%, #6fd14a); box-shadow: 0 0 0 1px #3f8a1c; clip-path: inset(0 30% 0 0 round 8px); }
.s-aero .sp-art i:nth-child(5) { width: 30px; height: 30px; left: 60%; top: 28%; background: #fff; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 6px #fff); }
.s-aero .sp-card { border: 1px solid rgba(255, 255, 255, .95); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 50%, rgba(232, 247, 255, .82) 51%, rgba(255, 255, 255, .92) 100%); box-shadow: 0 4px 16px rgba(0, 80, 140, .18); }
.s-aero .sp-card h3 { font-weight: 600; color: #0a6fa6; }
.s-aero .sp-icon { position: relative; overflow: hidden; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #c9f0ff 0 10%, var(--i1) 45%, var(--i2) 100%); box-shadow: 0 2px 5px rgba(0, 60, 110, .3); }
.s-aero .sp-card:nth-child(1) { --i1: #3cbcf2; --i2: #0a6fa6; }
.s-aero .sp-card:nth-child(2) { --i1: #7fd552; --i2: #3a9a22; }
.s-aero .sp-card:nth-child(3) { --i1: #ffb44d; --i2: #e0780a; }
.s-aero .sp-panel { border: 1px solid rgba(255, 255, 255, .95); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(230, 246, 255, .8)); box-shadow: 0 4px 16px rgba(0, 80, 140, .18); }
.s-aero .sp-input { border: 1px solid #9ccfe8; border-radius: 6px; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 60, 110, .15); }
.s-aero .sp-switch { background: linear-gradient(#cfe6f2, #eef8fd); box-shadow: inset 0 1px 3px rgba(0, 60, 110, .3); }
.s-aero .is-on .sp-switch { background: linear-gradient(#86dbff, #1fa3e0); }
.s-aero .sp-switch::after { background: radial-gradient(circle at 35% 30%, #fff, #d9eef8); }
.s-aero .sp-bar { height: 14px; border-radius: 7px; background: linear-gradient(#dfeef5, #f7fcff); box-shadow: inset 0 1px 2px rgba(0, 60, 110, .25), 0 0 0 1px #9ccfe8; }
.s-aero .sp-bar > span { background: linear-gradient(#c3f28f, #4caf2e 50%, #3a9a22 51%, #6fd14a); }
.s-aero .sp-chips span { border: 1px solid #9ccfe8; background: linear-gradient(#fff, #e3f4fd); color: #0a6fa6; font-weight: 600; }

/* ---------------- DATA-DENSE / UTILITARIAN UI ---------------- */
.s-dataui {
  --bg: #f3f4f6; --fg: #111827; --muted: #6b7280; --accent: #2563eb; --on-accent: #fff;
  --surface: #fff; --line: #d1d5db; --r: 3px; --icon-sw: 1.8;
  --font: "IBM Plex Sans", system-ui, sans-serif; --display: var(--font);
  --pad: 14px; --gap: 12px;
  font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.s-dataui .sp-nav { margin: -14px -14px 0; padding: 7px 14px; gap: 18px; background: #111827; color: #e5e7eb; font-size: 12px; }
.s-dataui .sp-logo { gap: 7px; font-size: 13px; font-weight: 600; }
.s-dataui .sp-mark { width: 12px; height: 12px; border: 0; border-radius: 2px; background: #2563eb; }
.s-dataui .sp-links { gap: 2px; font-size: 12px; }
.s-dataui .sp-links a { padding: 3px 9px; border-radius: 3px; color: #9ca3af; }
.s-dataui .sp-links a:first-child { background: #1f2937; color: #fff; }
.s-dataui .sp-nav::after { content: "\25CF  LIVE  14:32:07 UTC"; order: 5; font: 500 11px "IBM Plex Mono", monospace; color: #34d399; }
.s-dataui .sp-nav .sp-btn--secondary { color: #e5e7eb; box-shadow: inset 0 0 0 1px #374151; }
.s-dataui .sp-hero { gap: 12px; align-items: stretch; }
@container (min-width: 720px) { .s-dataui .sp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.s-dataui .sp-copy { gap: 8px; padding: 14px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; }
.s-dataui .sp-kicker { font-size: 0; }
.s-dataui .sp-kicker::before { content: "Workspace  \203A  Overview"; font-size: 12px; font-weight: 400; letter-spacing: 0; color: #6b7280; }
.s-dataui .sp-title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.s-dataui .sp-title span { display: inline; }
.s-dataui .sp-lede { max-width: 60ch; font-size: 13px; }
.s-dataui .sp-actions { gap: 6px; margin-top: auto; }
.s-dataui .sp-btn { padding: .45em .85em; border-radius: 3px; font-size: 12px; font-weight: 500; }
.s-dataui .sp-btn--primary { background: #2563eb; color: #fff; }
.s-dataui .sp-btn--primary:hover { background: #1d4ed8; }
.s-dataui .sp-btn--secondary { background: #fff; color: #111827; box-shadow: inset 0 0 0 1px #d1d5db; }
.s-dataui .sp-art { width: 100%; height: auto; min-height: 210px; aspect-ratio: auto; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; }
.s-dataui .sp-art::before { content: "Active projects \00B7  last 30 days"; position: absolute; left: 12px; top: 9px; font-size: 12px; font-weight: 600; color: #111827; }
.s-dataui .sp-art i:nth-child(1) {
  left: 12px; right: 12px; top: 32px; height: 38%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L20 52 L40 56 L60 40 L80 44 L100 30 L120 34 L140 22 L160 26 L180 14 L200 18 L200 70 L0 70 Z' fill='%232563eb' fill-opacity='.1'/%3E%3Cpath d='M0 60 L20 52 L40 56 L60 40 L80 44 L100 30 L120 34 L140 22 L160 26 L180 14 L200 18' fill='none' stroke='%232563eb' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    repeating-linear-gradient(0deg, #eef0f3 0 1px, transparent 1px 25%);
  border-bottom: 1px solid #d1d5db;
}
.s-dataui .sp-art::after {
  content: "PROJECT       OWNER   TASKS   DONE    \0394 7D\A Launch Q3     AM        142    68%   +12%\A Research      JL         87    41%    -3%\A Brand site    KO         64    92%    +5%";
  position: absolute; left: 12px; right: 12px; bottom: 10px; white-space: pre; overflow: hidden;
  font: 11px/1.7 "IBM Plex Mono", monospace; color: #374151;
}
.s-dataui .sp-cards { gap: 8px; }
.s-dataui .sp-card { gap: 2px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; }
.s-dataui .sp-icon { display: none; }
.s-dataui .sp-card h3 { order: 0; font-size: 12px; font-weight: 500; color: #6b7280; }
.s-dataui .sp-card::after { order: 1; font-size: 22px; font-weight: 600; color: #111827; }
.s-dataui .sp-card:nth-child(1)::after { content: "12,480"; }
.s-dataui .sp-card:nth-child(2)::after { content: "342"; }
.s-dataui .sp-card:nth-child(3)::after { content: "1,207"; }
.s-dataui .sp-card p { order: 2; font-size: 12px; }
.s-dataui .sp-card::before { position: absolute; right: 10px; top: 9px; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; }
.s-dataui .sp-card:nth-child(1)::before { content: "\25B2  4.2%"; background: #ecfdf5; color: #047857; }
.s-dataui .sp-card:nth-child(2)::before { content: "\25BC  1.1%"; background: #fef2f2; color: #b91c1c; }
.s-dataui .sp-card:nth-child(3)::before { content: "\25B2  0.8%"; background: #ecfdf5; color: #047857; }
.s-dataui .sp-panel { gap: 10px 20px; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; }
.s-dataui .sp-label { font-size: 12px; font-weight: 500; }
.s-dataui .sp-input { padding: .4em .7em; border: 1px solid #d1d5db; border-radius: 3px; font-size: 13px; }
.s-dataui .sp-panel .sp-btn--primary { padding: .45em .85em; }
.s-dataui .sp-controls { gap: 8px 18px; font-size: 12px; color: #374151; }
.s-dataui .sp-switch { width: 28px; height: 16px; background: #d1d5db; }
.s-dataui .sp-switch::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.s-dataui .is-on .sp-switch { background: #2563eb; }
.s-dataui .is-on .sp-switch::after { transform: translateX(12px); }
.s-dataui .sp-bar { width: 90px; height: 6px; border-radius: 1px; background: #e5e7eb; }
.s-dataui .sp-bar > span { border-radius: 1px; }
.s-dataui .sp-chips span { padding: 1px 7px; border: 1px solid #d1d5db; border-radius: 3px; background: #f9fafb; font-size: 11px; }

/* ---------------- TEMPLATE SAAS ---------------- */
.s-saas {
  --bg: #fff; --fg: #0f172a; --muted: #64748b; --accent: #6366f1; --on-accent: #fff;
  --surface: #f8fafc; --line: #e2e8f0; --r: 16px; --icon-sw: 2;
  --font: "Inter", system-ui, sans-serif; --display: var(--font);
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(99, 102, 241, .16), transparent 70%), #fff;
}
.s-saas .sp-logo { font-weight: 700; font-size: 19px; }
.s-saas .sp-mark { border: 0; background: linear-gradient(135deg, #6366f1, #a855f7); border-radius: 7px; }
.s-saas .sp-links { color: #475569; font-weight: 500; }
.s-saas .sp-nav .sp-btn--secondary { border-radius: 10px; }
.s-saas .sp-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.s-saas .sp-copy { align-items: center; gap: 18px; }
.s-saas .sp-copy::after { content: "No credit card required \00B7  Cancel anytime"; font-size: 12px; color: #94a3b8; }
.s-saas .sp-kicker { padding: 4px 12px; border: 1px solid #c7d2fe; border-radius: 99px; background: #eef2ff; color: #4f46e5; font-weight: 500; letter-spacing: 0; font-size: 13px; }
.s-saas .sp-kicker::before { content: "\2728  "; }
.s-saas .sp-kicker::after { content: "  \2192"; }
.s-saas .sp-title { font-weight: 700; font-size: clamp(38px, 6.6cqi, 72px); line-height: 1.04; letter-spacing: -.035em; }
.s-saas .t2 { display: table; margin-inline: auto; color: transparent; background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899); -webkit-background-clip: text; background-clip: text; }
.s-saas .sp-lede { margin-inline: auto; max-width: 52ch; font-size: 18px; }
.s-saas .sp-actions { justify-content: center; }
.s-saas .sp-btn { border-radius: 12px; font-weight: 600; }
.s-saas .sp-btn--primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 10px 25px -5px rgba(99, 102, 241, .45); }
.s-saas .sp-btn--primary:hover { transform: translateY(-1px); }
.s-saas .sp-btn--secondary { background: #fff; color: #0f172a; box-shadow: 0 0 0 1px #e2e8f0, 0 1px 2px rgba(15, 23, 42, .06); }
.s-saas .sp-art { justify-self: center; width: min(100%, 780px); height: auto; min-height: 0; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e2e8f0, 0 30px 60px -20px rgba(99, 102, 241, .45); }
.s-saas .sp-art i:nth-child(1) { left: 0; right: 0; top: 0; height: 30px; border-bottom: 1px solid #e2e8f0; background: radial-gradient(circle at 16px 50%, #f87171 4px, transparent 4.5px), radial-gradient(circle at 30px 50%, #fbbf24 4px, transparent 4.5px), radial-gradient(circle at 44px 50%, #34d399 4px, transparent 4.5px), #f8fafc; }
.s-saas .sp-art i:nth-child(2) { left: 0; top: 30px; bottom: 0; width: 20%; border-right: 1px solid #e2e8f0; background: linear-gradient(#e2e8f0 0 0) 14px 18px / 60% 8px no-repeat, linear-gradient(#eef2ff 0 0) 10px 40px / 80% 22px no-repeat, linear-gradient(#e2e8f0 0 0) 14px 74px / 50% 8px no-repeat, linear-gradient(#e2e8f0 0 0) 14px 96px / 66% 8px no-repeat, #f8fafc; }
.s-saas .sp-art i:nth-child(3) { left: 24%; right: 3%; top: 44px; height: 46%; border-radius: 12px; background: linear-gradient(180deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, 0) 80%), #fff; box-shadow: 0 0 0 1px #e2e8f0; }
.s-saas .sp-art i:nth-child(4), .s-saas .sp-art i:nth-child(5) { bottom: 14px; height: 26%; border-radius: 12px; background: linear-gradient(#e2e8f0 0 0) 14px 16px / 40% 8px no-repeat, linear-gradient(#0f172a 0 0) 14px 34px / 30% 14px no-repeat, #fff; box-shadow: 0 0 0 1px #e2e8f0; }
.s-saas .sp-art i:nth-child(4) { left: 24%; width: 34%; }
.s-saas .sp-art i:nth-child(5) { left: 61%; right: 3%; }
.s-saas .sp-card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); transition: box-shadow .2s, transform .2s; }
.s-saas .sp-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(99, 102, 241, .3); }
.s-saas .sp-icon { display: none; }
.s-saas .sp-card::before { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: #eef2ff; font-size: 20px; }
.s-saas .sp-card:nth-child(1)::before { content: "\270D\FE0F"; }
.s-saas .sp-card:nth-child(2)::before { content: "\1F5C2\FE0F"; }
.s-saas .sp-card:nth-child(3)::before { content: "\1F680"; }
.s-saas .sp-card h3 { font-weight: 600; }
.s-saas .sp-panel { --muted: #e0e7ff; --line: rgba(255, 255, 255, .35); border-radius: 20px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 20px 40px -18px rgba(99, 102, 241, .6); }
.s-saas .sp-input { border: 0; border-radius: 10px; background: #fff; color: #0f172a; }
.s-saas .sp-panel .sp-btn--primary { background: #0f172a; box-shadow: none; }
.s-saas .sp-switch { background: rgba(255, 255, 255, .3); }
.s-saas .is-on .sp-switch { background: #fff; }
.s-saas .is-on .sp-switch::after { background: #6366f1; }
.s-saas .sp-bar { background: rgba(255, 255, 255, .3); }
.s-saas .sp-bar > span { background: #fff; }
.s-saas .sp-chips span { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .15); color: #fff; }