/* BUFF OS v180 — Transcend + PowerBreath sheets (iOS action-sheet look) */
.v180-as .ap-as-t { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; color: #fff; }
.v180-as .ap-as-t small { color: #8e8e93; font-size: 12px; }
.v180-lotus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, #9d9dff 0%, #6c6cff 52%, #4a47d9 86%, #26245f 100%); box-shadow: 0 0 0 5px rgba(108,108,255,.2), 0 0 18px rgba(108,108,255,.45); margin-bottom: 4px; }
.v180-lt { width: 29px; height: 29px; fill: #07070c; }
.v180-pbi { width: 46px; height: 46px; border-radius: 50%; margin-bottom: 4px; }
.v180-as .ap-as-grp button.sel { color: #fff; font-weight: 600; background: rgba(120,120,128,.24); }
.v180-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: .5px solid rgba(84,84,88,.6); text-align: left; }
.v180-n { display: flex; flex-direction: column; min-width: 0; } .v180-n b { color: #fff; font-size: 16px; font-weight: 600; } .v180-n small { color: #8e8e93; font-size: 12px; }
.v180-seg { display: inline-grid; grid-template-columns: auto auto auto; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(120,120,128,.24); flex: none; }
.v180-pb .v180-seg button { display: inline-block; width: auto; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; }
.v180-pb .v180-seg button.on { background: #2a8cff; box-shadow: 0 0 10px rgba(42,140,255,.5); }

/* v466: Transcend gets morning / midday / evening too — periwinkle selection */
.v180-seg2 { grid-template-columns: auto auto; }
.v180-tr .v180-seg button { display: inline-block; width: auto; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; }
.v180-tr .v180-seg button.on { background: #7c7eff; box-shadow: 0 0 10px rgba(124,126,255,.55); }

/* v467: each sheet dressed like its own app (Marius: "make them make sense according to what their apps are") */
/* Transcend — near-black night, periwinkle light, soft gold, New York serif title, mono labels */
.v180-as:has(.v180-tr) .ap-as-grp { background: radial-gradient(120% 90% at 50% 0%, #1a1a3a 0%, #0b0b14 55%, #07070c 100%) !important; border: .5px solid rgba(108,108,255,.18); }
.v180-tr .v180-tt { font-family: "New York", "Iowan Old Style", Palatino, ui-serif, Georgia, serif; font-size: 24px; font-weight: 500; color: #edeff6; letter-spacing: .01em; }
.v180-tr .ap-as-t small { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #e8c88a; }
.v180-tr .ap-as-t em, .v180-pb .ap-as-t em { font-style: normal; font-size: 12px; color: #a6a8bc; }
.v180-tr .v180-row { border-top: .5px solid rgba(108,108,255,.16); }
.v180-tr .v180-n b { font-family: "New York", "Iowan Old Style", Palatino, ui-serif, Georgia, serif; font-weight: 500; font-size: 17px; color: #edeff6; }
.v180-tr .v180-n small { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #a6a8bc; }
.v180-tr .v180-seg { background: rgba(108,108,255,.14); }
.v180-tr .v180-seg button.on { background: linear-gradient(180deg, #8c8eff, #6c6cff) !important; color: #fff; box-shadow: 0 0 14px rgba(108,108,255,.55); }
.v180-as:has(.v180-tr) .ap-as-c { color: #e8c88a !important; }
/* PowerBreath — deep teal, the icon's teal→blue gradient, SF Mono labels */
.v180-as:has(.v180-pb) .ap-as-grp { background: radial-gradient(120% 90% at 50% 0%, #123138 0%, #0d272d 45%, #06171c 100%) !important; border: .5px solid rgba(98,230,210,.16); }
.v180-pb .v180-tt { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 17px; font-weight: 700; letter-spacing: .18em; background: linear-gradient(90deg, #3af0cf, #28c0e6, #2a7dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v180-pb .ap-as-t small { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #62e6d2; }
.v180-pb .v180-row { border-top: .5px solid rgba(98,230,210,.14); }
.v180-pb .v180-n b { color: #f3f7f6; }
.v180-pb .v180-n small { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: #7f9ca3; }
.v180-pb .v180-seg { background: rgba(98,230,210,.1); }
.v180-pb .v180-seg button.on { background: linear-gradient(90deg, #3af0cf, #2a7dff) !important; color: #06171c; box-shadow: 0 0 14px rgba(40,192,230,.55); }
.v180-as:has(.v180-pb) .ap-as-c { color: #62e6d2 !important; }

/* v468: Astra — deep indigo night, gold ring, a violet glow; Tarot — deep plum with amber and gold. Serif titles like the apps. */
.v180-as:has(.v180-astra) .ap-as-grp { background: radial-gradient(120% 90% at 50% 0%, #2a2470 0%, #15123a 50%, #0b0a1f 100%) !important; border: .5px solid rgba(243,200,119,.25); }
.v180-as:has(.v180-tarot) .ap-as-grp { background: radial-gradient(120% 90% at 50% 0%, #3d1f5c 0%, #22113a 50%, #120a1f 100%) !important; border: .5px solid rgba(246,207,128,.25); }
.v180-astra .v180-tt, .v180-tarot .v180-tt { font-family: "New York", "Iowan Old Style", Palatino, ui-serif, Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: .32em; color: #f3c877; }
.v180-astra .ap-as-t small, .v180-tarot .ap-as-t small { color: #ffe9c4; font-size: 13px; }
.v180-astra .ap-as-t em, .v180-tarot .ap-as-t em { font-style: normal; font-size: 12px; color: rgba(255,233,196,.6); }
.v180-astra .v180-row, .v180-tarot .v180-row { border-top: .5px solid rgba(243,200,119,.18); }
.v180-astra .v180-n b, .v180-tarot .v180-n b { font-family: "New York", "Iowan Old Style", Palatino, ui-serif, Georgia, serif; font-weight: 500; color: #fff6dc; }
.v180-astra .v180-seg, .v180-tarot .v180-seg { background: rgba(243,200,119,.12); }
.v180-astra .v180-seg button, .v180-tarot .v180-seg button { display: inline-block; width: auto; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: #fff6dc; font: inherit; font-size: 13px; font-weight: 600; }
.v180-astra .v180-seg button.on, .v180-tarot .v180-seg button.on { background: linear-gradient(180deg, #ffe9bd, #f3c877) !important; color: #2a1a05; box-shadow: 0 0 14px rgba(243,200,119,.5); }
.v180-as:has(.v180-astra) .ap-as-c, .v180-as:has(.v180-tarot) .ap-as-c { color: #f3c877 !important; }