/* SoundWave additions on top of the reference stylesheet (styles-DS4Hgrh5.css, used verbatim).
   Only utilities/components the reference build does not contain; values follow its theme tokens. */
[hidden]{display:none!important}
.contents{display:contents}
.cursor-pointer{cursor:pointer}
.blur-2xl{filter:blur(40px)}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.text-red-500{color:#ef4444}

.text-right{text-align:right}
/* toast: sonner (theme dark, top-center) exactly as configured in the reference */
.sw-toaster{position:fixed;z-index:999999999;top:24px;left:50%;transform:translateX(-50%);width:356px;display:flex;flex-direction:column;gap:14px;pointer-events:none;font-family:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
@media (max-width:600px){.sw-toaster{left:16px;right:16px;top:16px;width:auto;transform:none}}
.sw-toast{display:flex;align-items:center;gap:6px;padding:16px;border-radius:8px;background:#1c1c1c;border:1px solid #262626;color:#f4f4f5;font-size:13px;line-height:1.5;box-shadow:0 4px 12px #0000001a;animation:sw-tin .4s ease both;pointer-events:auto}
.sw-toast-title{font-weight:500;line-height:1.5}
.sw-toast.out{opacity:0;transform:translateY(-100%);transition:transform .4s,opacity .4s}
.sw-toast-icon{display:flex;flex-shrink:0;width:16px;height:16px;align-items:center;justify-content:flex-start;margin-left:-3px;margin-right:4px}
.sw-toast-icon>svg{flex-shrink:0}
.sw-toast-icon[data-kind=error]{color:#ef4444}
@keyframes sw-tin{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
/* form bits */
select.rounded-md{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.25rem}
textarea.rounded-md{resize:vertical;font:inherit}
.sw-check{width:18px;height:18px;accent-color:var(--color-primary)}
.sw-range{accent-color:var(--color-primary);height:4px}
.sw-prose a{color:var(--color-primary)}.sw-prose h2,.sw-prose h3{color:var(--color-fg);font-family:var(--font-display);font-weight:700;margin:1rem 0 .5rem}.sw-prose p{margin:.5rem 0}.sw-prose ul{list-style:disc;padding-left:1.25rem}
#fpVideoSlot video{width:100%;height:100%;object-fit:cover;background:#000}
/* admin / installer layout (built from the reference components) */
.sw-table{width:100%;border-collapse:collapse;font-size:13px}
.sw-table th{color:var(--color-subtle);font-weight:600;text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--color-border);white-space:nowrap}
.sw-table td{padding:.6rem .75rem;border-bottom:1px solid var(--color-border);vertical-align:middle}
.sw-table tr:hover td{background:var(--color-surface)}
.sw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:1024px){.sw-admin{display:grid;grid-template-columns:240px 1fr;max-width:1280px;margin:0 auto}.sw-admin-side{position:sticky;top:0;height:100dvh;overflow-y:auto;border-right:1px solid var(--color-border)}.sw-admin-nav{display:none!important}.sw-admin-sidebar-only{display:block!important}}
.sw-admin-sidebar-only{display:none}
.sw-grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:768px){.sw-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sw-bar{height:6px;border-radius:999px;background:var(--color-pill);overflow:hidden}.sw-bar>span{display:block;height:100%;background:var(--color-primary)}
.-mx-4{margin-inline:-1rem}.mx-2{margin-inline:.5rem}.inline-flex{display:inline-flex}.pb-6{padding-bottom:1.5rem}.py-1{padding-block:.25rem}
@media (hover:hover){.hover\:bg-elevated:hover{background-color:var(--color-elevated)}}

/* Update 18: desktop 2-column layout (content + sticky sidebar); mobile stays single column */
.sw-sidebar{display:none}
@media (min-width:900px){
  .sw-shell{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;padding-inline:1.5rem;align-items:start}
  .sw-shell>main.max-w-2xl{max-width:none!important;margin-inline:0!important}
  .sw-shell>header.sw-brandhead{grid-column:1/-1;grid-row:1}   /* update 35: explicit grid placement */
  .sw-shell>main{grid-column:1;grid-row:2}
  .sw-shell>aside.sw-sidebar{grid-column:2;grid-row:2}
  .sw-sidebar{display:block;position:sticky;top:1rem;min-width:0;max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:1.25rem 0 80px}
  body:has(#mini:not([hidden])) .sw-sidebar{padding-bottom:160px}   /* update 28: room for mini player + bottom nav */
}
.sw-side-card{background:var(--color-elevated);border:1px solid var(--color-border);border-radius:16px;padding:1rem;margin-bottom:1rem}
.sw-side-card h3{font-family:var(--font-display);font-weight:800;font-size:15px;margin-bottom:.75rem;color:var(--color-fg)}
.sw-side-card ol{list-style:none;display:flex;flex-direction:column;gap:.25rem;margin:0;padding:0}
.sw-side-card li a{display:flex;align-items:center;gap:.75rem;padding:.4rem;border-radius:10px}
.sw-side-card li a:hover{background:var(--color-pill)}
.sw-side-rank{width:1.25rem;flex-shrink:0;text-align:center;font-weight:800;font-size:14px;color:var(--color-subtle);font-variant-numeric:tabular-nums}
.sw-side-card img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--color-pill)}
.sw-side-meta{min-width:0;flex:1;display:flex;flex-direction:column}
.sw-side-meta b{font-size:13px;font-weight:600;color:var(--color-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-side-meta small{font-size:12px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-side-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.sw-side-tags a{padding:.4rem .8rem;border-radius:999px;background:var(--color-pill);font-size:12.5px;font-weight:600;color:var(--color-fg);border-left:3px solid var(--g,var(--color-primary))}
.sw-side-tags a:hover{background:var(--color-elevated)}

/* Update 19: settings — wrap long code/URLs (fix overflow), 2 equal columns on PC */
.sw-sf code{overflow-wrap:anywhere;word-break:break-word}
@media (min-width:1100px){
  .sw-sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem;align-items:start}
  .sw-sf--wide{grid-column:1/-1}
  .sw-sf-grid .sw-sf>:first-child{margin-top:0}
}

/* Update 37: the 4 header icons optically balanced to the same visual size (avatar stays 32px as before) */
.sw-brandhead .size-9{width:36px!important;height:36px!important;flex:none}
.sw-brandhead .size-9>svg.sw-ico{width:20px!important;height:20px!important;flex:none}
.sw-brandhead svg.lucide-mail{transform:scale(1.12)}      /* envelope ink is short — match visual weight */
.sw-brandhead svg.lucide-sun-moon{transform:scale(.94)}   /* sun rays overshoot the box */

/* Update 38a: chat form always floats above the bottom dock (nav, + mini player when visible) instead of sliding under it */
#chatForm{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
body:has(#mini:not([hidden])) #chatForm{bottom:calc(148px + env(safe-area-inset-bottom,0px))}
/* Update 38b: new-item pill on notifications / messages pages */
.sw-rt-pill{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 56px);left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:var(--color-primary);color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35);border:0;cursor:pointer;white-space:nowrap}
/* Update 38c: chat readability in dark theme — brighter timestamps, softer own-bubble text */
html[data-theme=dark] #chatBox .text-muted{color:#b5b5b5!important}
@media (prefers-color-scheme:dark){html[data-theme=auto] #chatBox .text-muted{color:#b5b5b5!important}}
#chatBox{overflow-wrap:anywhere}

/* Update 40: white text/icons on ALL orange (primary) backgrounds — one variable fixes every button, badge, bubble, chip and the logo mark (was dark #111, hard to read) */
:root{--color-primary-fg:#fff}

/* Update 41: non-current plan buttons turn orange on hover/tap (compiled CSS lacks hover: variants) */
.upg-btn{transition:background-color .15s ease,color .15s ease}
.upg-btn:not(.is-cur):hover,.upg-btn:not(.is-cur):active{background:var(--color-primary);color:var(--color-primary-fg)}
/* update 50: tinted plan cards + GET PRO banner so boxes stand out on light theme */
.upg-card{background:color-mix(in srgb,var(--color-primary) 6%,var(--color-elevated));border:1px solid color-mix(in srgb,var(--color-primary) 28%,transparent)}
.upg-card.is-cur{border:2px solid var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,var(--color-elevated))}
.pro-banner{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 68%,#000));box-shadow:0 10px 26px -10px color-mix(in srgb,var(--color-primary) 55%,transparent)}
.pro-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.pro-banner-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(115deg,color-mix(in srgb,var(--color-primary) 52%,transparent),color-mix(in srgb,var(--color-primary) 82%,#140404) 90%)}
.pro-banner-body{position:relative;z-index:1}
.pro-banner .text-primary{color:#fff}
.pro-banner .text-muted{color:rgba(255,255,255,.85)}