/* ═══════════════════════════════════════════════════════════════════
   Volley — Design System
   Hand-crafted CSS · No build step · Cache-busted at server startup
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Design Tokens ──────────────────────────────────────────── */
:root {
  --c-50:  #fafaf9; --c-100: #f5f5f4; --c-200: #e7e5e4; --c-300: #d6d3d1;
  --c-400: #a8a29e; --c-500: #78716c; --c-600: #57534e; --c-700: #44403c;
  --c-800: #292524; --c-900: #1c1917; --c-950: #0c0a09;
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0/.05);
  --shadow-card: 0 20px 48px -20px rgb(0 0 0/.12);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0/.1), 0 2px 4px -2px rgb(0 0 0/.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0/.1), 0 8px 10px -6px rgb(0 0 0/.1);
}

/* ─── 2. Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; line-height: 1.5; }
body { background-color: var(--c-50); color: var(--c-900); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font-family: inherit; font-size: 100%; line-height: inherit; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ─── 3. Semantic Components ────────────────────────────────────── */

.card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--c-200); border-radius: 1.5rem; padding: 1.75rem; box-shadow: var(--shadow-card); }
@media (min-width: 1024px) { .card { padding: 2.5rem; } }

.card-dark { position: relative; z-index: 1; background: var(--c-900); color: var(--c-50); border-radius: 1.5rem; padding: 1.75rem; }
@media (min-width: 1024px) { .card-dark { padding: 2.5rem; } }

.page-section { max-width: 56rem; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1.25rem; }
@media (min-width: 1024px) { .page-section { margin-bottom: 1.5rem; } }

.page-section-xl { max-width: 56rem; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 4rem; }
@media (min-width: 1024px) { .page-section-xl { margin-bottom: 6rem; } }

.btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 600; border-radius: 9999px; transition: background .15s, transform .1s; cursor: pointer; border: none; white-space: nowrap; text-decoration: none; user-select: none; touch-action: manipulation; }
.btn-primary { background: var(--c-900); color: var(--c-50); font-size: .875rem; padding: .75rem 1.25rem; }
.btn-primary:hover { background: var(--c-800); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 9999px; white-space: nowrap; text-decoration: none; cursor: pointer; background: #fff; color: var(--c-900); font-size: .875rem; border: 1px solid var(--c-200); padding: .5rem 1rem; transition: background .15s; touch-action: manipulation; }
.btn-outline:hover { background: var(--c-50); }
.btn-sm { font-size: .75rem; padding: .375rem .875rem; }
.btn-lg { font-size: 1rem; padding: .875rem 1.75rem; }

.form-input { position: relative; z-index: 1; width: 100%; min-width: 0; padding: .75rem 1rem; border-radius: 9999px; border: 1px solid var(--c-200); background: #fff; font-family: inherit; font-size: .875rem; outline: none; transition: border-color .15s, box-shadow .15s; cursor: text; touch-action: manipulation; -webkit-user-select: text; user-select: text; }
.form-input:focus { border-color: var(--c-400); box-shadow: 0 0 0 3px rgb(28 25 23/.08); }
.form-textarea { position: relative; z-index: 1; width: 100%; min-width: 0; padding: .75rem 1rem; border-radius: 1rem; border: 1px solid var(--c-200); background: #fff; font-family: inherit; font-size: .875rem; line-height: 1.5rem; outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; touch-action: manipulation; -webkit-user-select: text; user-select: text; }
.form-textarea:focus { border-color: var(--c-400); box-shadow: 0 0 0 3px rgb(28 25 23/.08); }

.badge { display: inline-flex; align-items: center; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .125rem .5rem; border-radius: 9999px; }
.badge-dark  { background: var(--c-900); color: var(--c-50); }
.badge-stone { background: var(--c-100); color: var(--c-500); border: 1px solid var(--c-200); }

.step-num { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--c-900); color: var(--c-50); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }

.theme-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: 9999px; border: 1px solid var(--c-300); background: var(--c-100); color: var(--c-900); font-size: .75rem; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; user-select: none; }
.theme-pill:hover { background: var(--c-200); }

/* ─── 4. Typography ─────────────────────────────────────────────── */
.font-sans { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; }
.font-mono { font-family: ui-monospace, 'Cascadia Code', monospace; }
.antialiased { -webkit-font-smoothing: antialiased; }

.text-\[0\.6rem\]  { font-size: .6rem; }
.text-\[0\.65rem\] { font-size: .65rem; }
.text-xs    { font-size: .75rem;   line-height: 1rem; }
.text-sm    { font-size: .875rem;  line-height: 1.25rem; }
.text-base  { font-size: 1rem;     line-height: 1.5rem; }
.text-lg    { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl    { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl   { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl   { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl   { font-size: 3rem;     line-height: 1; }
.text-6xl   { font-size: 3.75rem;  line-height: 1; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.tracking-tight  { letter-spacing: -.025em; }
.tracking-wide   { letter-spacing:  .025em; }
.tracking-wider  { letter-spacing:  .05em; }
.tracking-widest { letter-spacing:  .1em; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.08\] { line-height: 1.08; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase      { text-transform: uppercase; }
.lowercase      { text-transform: lowercase; }
.capitalize     { text-transform: capitalize; }
.underline      { text-decoration-line: underline; }
.no-underline   { text-decoration: none; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words    { overflow-wrap: break-word; }
.select-none    { user-select: none; }
.italic         { font-style: italic; }

/* ─── 5. Colors ─────────────────────────────────────────────────── */
.text-white     { color: #fff; }
.text-stone-50  { color: #fafaf9; } .text-stone-100 { color: #f5f5f4; }
.text-stone-200 { color: #e7e5e4; } .text-stone-300 { color: #d6d3d1; }
.text-stone-400 { color: #a8a29e; } .text-stone-500 { color: #78716c; }
.text-stone-600 { color: #57534e; } .text-stone-700 { color: #44403c; }
.text-stone-800 { color: #292524; } .text-stone-900 { color: #1c1917; }
.text-emerald-400 { color: #34d399; }
.text-red-400   { color: #f87171; } .text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; }
.text-amber-500 { color: #f59e0b; } .text-sky-400 { color: #38bdf8; }

/* ── Chip accent colours ─────────────────────────────────────────── */
.bg-rose-50   { background-color: #fff1f2; } .bg-rose-100  { background-color: #ffe4e6; } .text-rose-600   { color: #e11d48; }
.bg-violet-50 { background-color: #f5f3ff; } .bg-violet-100{ background-color: #ede9fe; } .text-violet-600 { color: #7c3aed; }
.bg-amber-100 { background-color: #fef3c7; }                                               .text-amber-600  { color: #d97706; }
.bg-sky-50    { background-color: #f0f9ff; } .bg-sky-100   { background-color: #e0f2fe; } .text-sky-600    { color: #0284c7; }
.hover\:bg-rose-100:hover   { background-color: #ffe4e6; }
.hover\:bg-violet-100:hover { background-color: #ede9fe; }
.hover\:bg-amber-100:hover  { background-color: #fef3c7; }
.hover\:bg-sky-100:hover    { background-color: #e0f2fe; }
html.dark .bg-rose-50   { background-color: #2d0a10 !important; } html.dark .text-rose-600   { color: #fb7185 !important; }
html.dark .bg-violet-50 { background-color: #1e1030 !important; } html.dark .text-violet-600 { color: #a78bfa !important; }
html.dark .bg-amber-100 { background-color: #1c1200 !important; } html.dark .text-amber-600  { color: #fbbf24 !important; }
html.dark .bg-sky-50    { background-color: #021b2a !important; } html.dark .text-sky-600    { color: #38bdf8 !important; }
html.dark .hover\:bg-rose-100:hover   { background-color: #3d0f17 !important; }
html.dark .hover\:bg-violet-100:hover { background-color: #2a1545 !important; }
html.dark .hover\:bg-amber-100:hover  { background-color: #241800 !important; }
html.dark .hover\:bg-sky-100:hover    { background-color: #042538 !important; }

.bg-white      { background-color: #fff; }
.bg-white\/90  { background-color: rgb(255 255 255/.9); }
.bg-white\/95  { background-color: rgb(255 255 255/.95); }
.bg-transparent{ background-color: transparent; }
.bg-stone-50   { background-color: #fafaf9; } .bg-stone-100 { background-color: #f5f5f4; }
.bg-stone-200  { background-color: #e7e5e4; } .bg-stone-800 { background-color: #292524; }
.bg-stone-900  { background-color: #1c1917; } .bg-stone-950 { background-color: #0c0a09; }
.bg-red-50     { background-color: #fef2f2; } .bg-emerald-50 { background-color: #ecfdf5; }
.bg-amber-50   { background-color: #fffbeb; }

.border   { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-r-2 { border-right-width: 2px; border-right-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-stone-100 { border-color: #f5f5f4; } .border-stone-200 { border-color: #e7e5e4; }
.border-stone-300 { border-color: #d6d3d1; } .border-stone-900 { border-color: #1c1917; }
.border-white { border-color: #fff; }
.border-red-200 { border-color: #fecaca; } .border-transparent { border-color: transparent; }
.divide-y > * + *         { border-top: 1px solid var(--c-200); }
.divide-stone-100 > * + * { border-top: 1px solid var(--c-100); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; }
.w-10 { width: 2.5rem; }

/* ─── 6. Border Radius ──────────────────────────────────────────── */
.rounded    { border-radius: .25rem; }  .rounded-sm  { border-radius: .125rem; }
.rounded-md { border-radius: .375rem; } .rounded-lg  { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }  .rounded-2xl { border-radius: 1rem; }
.rounded-3xl{ border-radius: 1.5rem; }  .rounded-full{ border-radius: 9999px; }
.rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.rounded-b-2xl { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }

/* ─── 7. Shadows ────────────────────────────────────────────────── */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-xl   { box-shadow: var(--shadow-xl); }

/* ─── 8. Display & Flex/Grid ────────────────────────────────────── */
.block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
.flex  { display: flex; }  .inline-flex  { display: inline-flex; }
.grid  { display: grid; }  .hidden       { display: none; }  .contents { display: contents; }

.flex-col { flex-direction: column; } .flex-row { flex-direction: row; }
.flex-wrap{ flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
.flex-1   { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; } .flex-none { flex: none; }

.items-start { align-items: flex-start; } .items-center  { align-items: center; }
.items-end   { align-items: flex-end; }   .items-stretch { align-items: stretch; }
.justify-start   { justify-content: flex-start; }  .justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }.justify-end     { justify-content: flex-end; }
.self-start { align-self: flex-start; } .self-center { align-self: center; } .self-end { align-self: flex-end; }

.gap-0{ gap:0; } .gap-0\.5{ gap:.125rem; } .gap-1{ gap:.25rem; } .gap-1\.5{ gap:.375rem; }
.gap-2{ gap:.5rem; } .gap-2\.5{ gap:.625rem; } .gap-3{ gap:.75rem; } .gap-3\.5{ gap:.875rem; }
.gap-4{ gap:1rem; } .gap-5{ gap:1.25rem; } .gap-6{ gap:1.5rem; } .gap-7{ gap:1.75rem; }
.gap-8{ gap:2rem; } .gap-10{ gap:2.5rem; } .gap-12{ gap:3rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.col-span-2  { grid-column: span 2/span 2; }

/* ─── 9. Spacing ────────────────────────────────────────────────── */
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}
.p-8{padding:2rem}.p-10{padding:2.5rem}

.px-0{padding-left:0;padding-right:0}
.px-0\.5{padding-left:.125rem;padding-right:.125rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-12{padding-left:3rem;padding-right:3rem}

.py-0{padding-top:0;padding-bottom:0}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}

.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}
.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}
.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-10{padding-top:2.5rem}
.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}

.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}
.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}
.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}
.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-24{padding-bottom:6rem}

.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}
.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}
.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}
.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-12{padding-right:3rem}

.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-auto{margin:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.mx-2{margin-left:.5rem;margin-right:.5rem}
.mx-3{margin-left:.75rem;margin-right:.75rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}

.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}

.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}.mb-24{margin-bottom:6rem}

.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}
.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}
.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-auto{margin-right:auto}

/* ─── 10. Sizing ────────────────────────────────────────────────── */
.w-0{width:0}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}
.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}
.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}
.w-24{width:6rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}
.w-full{width:100%}.w-auto{width:auto}.w-screen{width:100vw}

.h-0{height:0}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}
.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}
.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}
.h-24{height:6rem}.h-full{height:100%}.h-dvh{height:100dvh}.h-screen{height:100vh}

.min-w-0{min-width:0}.min-w-full{min-width:100%}
.min-h-0{min-height:0}.min-h-dvh{min-height:100dvh}.min-h-screen{min-height:100vh}

.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}.max-w-none{max-width:none}.max-w-full{max-width:100%}
.max-w-\[16rem\]{max-width:16rem}.max-w-\[20rem\]{max-width:20rem}

.max-h-48{max-height:12rem}.max-h-64{max-height:16rem}
.max-h-96{max-height:24rem}.max-h-full{max-height:100%}

/* ─── 11. Position ──────────────────────────────────────────────── */
.static{position:static}.relative{position:relative}
.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}

.top-0{top:0}.top-1\/2{top:50%}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}
.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}
.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-3{bottom:.75rem}.bottom-4{bottom:1rem}
.left-0{left:0}.left-2{left:.5rem}
.inset-0{top:0;right:0;bottom:0;left:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}

.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}
.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}

.-translate-y-0\.5{transform:translateY(-.125rem)}
.-translate-y-1{transform:translateY(-.25rem)}
.-translate-y-1\/2{transform:translateY(-50%)}
.translate-y-0{transform:translateY(0)}
.scale-95{transform:scale(.95)}.scale-100{transform:scale(1)}

/* ─── 12. Overflow ──────────────────────────────────────────────── */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}
.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}

/* ─── 13. Interactions ──────────────────────────────────────────── */
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
.cursor-not-allowed{cursor:not-allowed}.pointer-events-none{pointer-events:none}
.resize-none{resize:none}.outline-none{outline:none}.border-none{border:none}
.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}
.select-all{user-select:all}.appearance-none{-webkit-appearance:none;appearance:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ─── 14. Transitions & Animations ─────────────────────────────── */
.transition-all    { transition: all .15s ease; }
.transition-colors { transition: color .15s, background-color .15s, border-color .15s; }
.transition-shadow { transition: box-shadow .15s; }
.transition-none   { transition: none; }

.active\:scale-\[\.98\]:active { transform: scale(.98); }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(.94)}      to{opacity:1;transform:scale(1)} }

.animate-spin  { animation: spin  1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.anim-up       { animation: fadeUp  .16s cubic-bezier(.2,.8,.4,1) both; }
.anim-scale    { animation: scaleIn .14s cubic-bezier(.2,.8,.4,1) both; }

/* ─── 15. Hover / Focus ─────────────────────────────────────────── */
.hover\:bg-stone-50:hover  { background-color:#fafaf9; }
.hover\:bg-stone-100:hover { background-color:#f5f5f4; }
.hover\:bg-stone-200:hover { background-color:#e7e5e4; }
.hover\:bg-stone-800:hover { background-color:#292524; }
.hover\:bg-white:hover     { background-color:#fff; }
.hover\:bg-red-50:hover    { background-color:#fef2f2; }

.hover\:text-stone-900:hover { color:#1c1917; }
.hover\:text-stone-700:hover { color:#44403c; }
.hover\:text-stone-400:hover { color:#a8a29e; }
.hover\:text-stone-200:hover { color:#e7e5e4; }
.hover\:text-red-500:hover   { color:#ef4444; }
.hover\:text-white:hover     { color:#fff; }

.hover\:border-stone-300:hover { border-color:#d6d3d1; }
.hover\:border-red-200:hover   { border-color:#fecaca; }
.hover\:border-stone-900:hover { border-color:#1c1917; }

.hover\:shadow-md:hover       { box-shadow:var(--shadow-md); }
.hover\:-translate-y-0\.5:hover { transform:translateY(-.125rem); }
.hover\:scale-105:hover        { transform:scale(1.05); }

.focus\:outline-none:focus { outline:none; }
.focus\:border-stone-400:focus { border-color:#a8a29e; }
.focus\:ring-2:focus { box-shadow:0 0 0 2px; }
.focus\:ring-stone-900\/8:focus  { box-shadow:0 0 0 2px rgb(28 25 23/.08); }
.focus\:ring-stone-900\/10:focus { box-shadow:0 0 0 3px rgb(28 25 23/.08); }
.focus-within\:border-stone-400:focus-within { border-color:#a8a29e; }

.group:hover .group-hover\:opacity-100    { opacity:1; }
.group:hover .group-hover\:text-stone-400 { color:#a8a29e; }
.group:hover .group-hover\:border-stone-300 { border-color:#d6d3d1; }
.focus\:opacity-100:focus { opacity:1; }

/* details/summary group-open utilities */
details[open] .group-open\:hidden { display:none; }
details[open] .group-open\:inline { display:inline; }
details:not([open]) .group-open\:hidden { display:inline; }
details:not([open]) .group-open\:inline { display:none; }

.backdrop-blur { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ─── 16. Safe Area ─────────────────────────────────────────────── */
.pt-safe   { padding-top:    max(.6rem, env(safe-area-inset-top, 0px)); }
.pb-safe   { padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); }
.pb-safe-4 { padding-bottom: max(1rem,  calc(env(safe-area-inset-bottom, 0px) + 1rem)); }
.mb-safe   { margin-bottom:  env(safe-area-inset-bottom, 0px); }

/* ─── 17. Misc ──────────────────────────────────────────────────── */
[x-cloak] { display:none !important; }

/* Prevent iOS zoom on input focus */
@media (max-width:1024px) {
  input, textarea, select { font-size: max(16px, 1em) !important; }
}

/* Chat-specific */
.bubble-strip { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.insert-role-btn    { background: var(--c-100); color: var(--c-700); }
.insert-role-active { background: var(--c-900); color: var(--c-50);  }
.bubble.is-selected { outline:2px solid #a8a29e; outline-offset:2px; }

/* Prose (legal pages) */
.prose { color:#44403c; font-size:.875rem; line-height:1.7; }
.prose h2 { font-size:1rem; font-weight:600; color:#1c1917; margin-bottom:.25rem; }
.prose p  { margin-bottom:.75rem; }
.prose a  { text-decoration:underline; }
.prose-stone { color:#57534e; }

/* ─── 18. Responsive — sm (≥640px) ─────────────────────────────── */
@media (min-width:640px) {
  .sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:hidden{display:none !important}
  .sm\:table-cell{display:table-cell}
  .sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}
  .sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}
  .sm\:justify-between{justify-content:space-between}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:gap-4{gap:1rem}.sm\:gap-6{gap:1.5rem}
  .sm\:px-0{padding-left:0;padding-right:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:w-auto{width:auto}.sm\:max-w-sm{max-width:24rem}
}

/* ─── 19. Responsive — lg (≥1024px) ────────────────────────────── */
@media (min-width:1024px) {
  .lg\:hidden{display:none !important}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:\!flex{display:flex !important}
  .lg\:inline-flex{display:inline-flex}.lg\:grid{display:grid}

  .lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}
  .lg\:flex-1{flex:1 1 0%}.lg\:flex-shrink-0{flex-shrink:0}
  .lg\:items-start{align-items:flex-start}.lg\:items-center{align-items:center}
  .lg\:justify-between{justify-content:space-between}

  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

  .lg\:gap-4{gap:1rem}.lg\:gap-5{gap:1.25rem}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}

  .lg\:px-0{padding-left:0;padding-right:0}
  .lg\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:px-12{padding-left:3rem;padding-right:3rem}
  .lg\:py-0{padding-top:0;padding-bottom:0}
  .lg\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .lg\:py-16{padding-top:4rem;padding-bottom:4rem}
  .lg\:p-6{padding:1.5rem}.lg\:p-10{padding:2.5rem}
  .lg\:pt-0{padding-top:0}.lg\:pt-4{padding-top:1rem}.lg\:pt-5{padding-top:1.25rem}
  .lg\:pt-6{padding-top:1.5rem}.lg\:pt-16{padding-top:4rem}.lg\:pt-24{padding-top:6rem}
  .lg\:pb-0{padding-bottom:0}.lg\:pb-4{padding-bottom:1rem}.lg\:pb-14{padding-bottom:3.5rem}

  .lg\:mb-6{margin-bottom:1.5rem}.lg\:mb-24{margin-bottom:6rem}.lg\:mt-0{margin-top:0}
  .lg\:mx-auto{margin-left:auto;margin-right:auto}

  .lg\:w-72{width:18rem}.lg\:w-80{width:20rem}.lg\:w-auto{width:auto}.lg\:w-full{width:100%}
  .lg\:max-w-4xl{max-width:56rem}.lg\:max-w-6xl{max-width:72rem}

  .lg\:border{border-width:1px;border-style:solid}.lg\:border-none{border:none}
  .lg\:border-stone-200{border-color:#e7e5e4}
  .lg\:rounded-3xl{border-radius:1.5rem}
  .lg\:shadow-card{box-shadow:var(--shadow-card)}.lg\:shadow-none{box-shadow:none}

  .lg\:bg-transparent{background-color:transparent}
  .lg\:bg-white{background-color:#fff}.lg\:bg-stone-50{background-color:#fafaf9}.lg\:bg-stone-100{background-color:#f5f5f4}
  .lg\:border-r-2{border-right-width:2px;border-right-style:solid}

  .lg\:text-xs{font-size:.75rem;line-height:1rem}
  .lg\:text-sm{font-size:.875rem;line-height:1.25rem}
  .lg\:text-base{font-size:1rem;line-height:1.5rem}
  .lg\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}

  .lg\:overflow-hidden{overflow:hidden}
  .lg\:sticky{position:sticky}
}

/* ─── 20. Dark Mode ─────────────────────────────────────────────── */
html.dark body { background-color:#0c0a09 !important; color:#e7e5e4; }

/* Dark mode surface hierarchy (light → dark):
   body #0c0a09 → panel #1c1917 → chip/btn #2d2a27 → hover #3d3935 → active-btn #0f0e0d
   bg-stone-900 is forced darker than panels so active buttons have shape. */

html.dark .composer-input    { background-color:#3d3935 !important; }  /* input wrapper: clearly lighter than any panel */
html.dark .composer-input textarea { color:#e7e5e4 !important; }       /* explicit — never dark-on-dark */
html.dark .bg-white,
html.dark .bg-white\/90      { background-color:rgb(28 25 23/.92) !important; }
html.dark .bg-white\/95      { background-color:#1c1917 !important; }
html.dark .bg-stone-50       { background-color:#141210 !important; }
html.dark .bg-stone-100      { background-color:#2d2a27 !important; }  /* was same as bg-white — now clearly elevated */
html.dark .bg-stone-200      { background-color:#3d3935 !important; }
html.dark .bg-stone-900      { background-color:#0f0e0d !important; }  /* active buttons: darker than panels, white text pops */
html.dark .card              { background-color:#1c1917 !important; border-color:#3f3834 !important; }
html.dark .btn-outline       { background-color:#2d2a27 !important; border-color:#3f3834 !important; color:#e7e5e4 !important; }
html.dark .form-input,
html.dark .form-textarea     { background-color:#2d2a27 !important; border-color:#3f3834 !important; color:#e7e5e4 !important; }
html.dark .theme-pill        { background:#2d2a27; border-color:#44403c; color:#e7e5e4; }
html.dark .theme-pill:hover  { background:#3d3935; }

@media (min-width:640px) {
  html.dark .sm\:bg-white    { background-color:#1c1917 !important; }
  html.dark .sm\:bg-stone-50 { background-color:#141210 !important; }
}
@media (min-width:1024px) {
  html.dark .lg\:bg-white       { background-color:#1c1917 !important; }
  html.dark .lg\:bg-stone-50    { background-color:#141210 !important; }
  html.dark .lg\:bg-stone-100   { background-color:#2d2a27 !important; }
  html.dark .lg\:bg-transparent { background-color:transparent !important; }
  html.dark .lg\:border-stone-100 { border-color:#292524 !important; }
  html.dark .lg\:border-stone-200 { border-color:#3f3834 !important; }
}

html.dark .border-stone-100  { border-color:#2d2a27 !important; }
html.dark .border-stone-200  { border-color:#3f3834 !important; }
html.dark .border-white      { border-color:#44403c !important; }

html.dark .text-stone-900    { color:#fafaf9 !important; }
html.dark .text-stone-800    { color:#e7e5e4 !important; }
html.dark .text-stone-700    { color:#d6d3d1 !important; }
html.dark .text-stone-600    { color:#a8a29e !important; }
html.dark .text-stone-500    { color:#78716c !important; }
html.dark .text-stone-400    { color:#78716c !important; }

html.dark .hover\:bg-stone-50:hover  { background-color:#252220 !important; }
html.dark .hover\:bg-stone-100:hover { background-color:#3d3935 !important; }
html.dark .hover\:bg-stone-200:hover { background-color:#4a4540 !important; }
html.dark .hover\:bg-white:hover     { background-color:#2d2a27 !important; }
html.dark .hover\:bg-stone-800:hover { background-color:#2d2a27 !important; }
html.dark .focus\:border-stone-400:focus { border-color:#78716c !important; }
html.dark .focus-within\:border-stone-400:focus-within { border-color:#78716c !important; }

/* insert role toggle (uses CSS vars — must override explicitly in dark) */
html.dark .insert-role-btn    { background:#2d2a27 !important; color:#d6d3d1 !important; }
html.dark .insert-role-active { background:#0f0e0d !important; color:#fafaf9 !important; }

html.dark input, html.dark textarea, html.dark select { color-scheme:dark; }
html.dark ::placeholder { color:#57534e; }

html.dark .shadow-card { box-shadow:0 20px 48px -20px rgba(0,0,0,.65) !important; }
html.dark .shadow-sm   { box-shadow:0 1px 3px 0 rgba(0,0,0,.45) !important; }
html.dark .shadow-md   { box-shadow:0 4px 12px -2px rgba(0,0,0,.5) !important; }

html.dark .bubble--them { background-color:#292524 !important; border-color:#44403c !important; color:#e7e5e4 !important; }
html.dark .bubble--you  { background-color:#44403c !important; color:#fafaf9 !important; }
html.dark #volley-list li.self-start { background-color:#292524 !important; border-color:#44403c !important; color:#e7e5e4 !important; }
html.dark #volley-list li.self-end   { background-color:#44403c !important; color:#fafaf9 !important; }
html.dark .insert-composer,
html.dark .bubble-editor { background-color:#292524 !important; border-color:#44403c !important; color:#e7e5e4 !important; }

html.dark * { scrollbar-color:#3f3834 transparent; }

.bg-stone-50\/90 { background-color: rgb(250 250 249 / .9); }

/* ─── Additions ─────────────────────────────────────────────────── */
.rounded-4xl { border-radius: 2rem; }


/* Login page: slightly wider left panel on desktop */
@media (min-width: 1024px) {
  .lg\:grid-cols-login { grid-template-columns: 1.15fr 1fr; }
}

/* OTP input — large centred monospace digits */
.otp-input {
  width: 100%;
  padding: .875rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--c-200);
  background: var(--c-50);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-align: center;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.otp-input:focus {
  border-color: var(--c-900);
  box-shadow: 0 0 0 3px rgb(28 25 23/.1);
}
html.dark .otp-input {
  background: #292524 !important;
  border-color: #3f3834 !important;
  color: #fafaf9 !important;
}

/* Auth button — full-width, rounded-2xl (form-native, not pill) */
.btn-auth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .8125rem 1rem;
  border-radius: 1rem;
  background: var(--c-900);
  color: var(--c-50);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-auth:hover  { background: var(--c-800); }
.btn-auth:active { transform: scale(.99); }

/* ─── Dark mode: coloured status cards ─────────────────────────── */
/* Amber (trial) */
html.dark .bg-amber-50   { background-color: #1c1500 !important; }
html.dark .border-amber-200 { border-color: #78500a !important; }
html.dark .text-amber-900   { color: #fde68a !important; }
html.dark .text-amber-700   { color: #fbbf24 !important; }
html.dark .bg-amber-900     { background-color: #92400e !important; }
html.dark .text-amber-50    { color: #fffbeb !important; }
html.dark .hover\:bg-amber-800:hover { background-color: #78350f !important; }

/* Emerald (active) */
html.dark .bg-emerald-50    { background-color: #022c1a !important; }
html.dark .border-emerald-200 { border-color: #065f46 !important; }
html.dark .text-emerald-900   { color: #6ee7b7 !important; }
html.dark .text-emerald-700   { color: #34d399 !important; }
html.dark .bg-emerald-900     { background-color: #064e3b !important; }
html.dark .text-emerald-50    { color: #ecfdf5 !important; }

/* Red (expired) */
html.dark .bg-red-50      { background-color: #1c0505 !important; }
html.dark .border-red-200 { border-color: #991b1b !important; }
html.dark .text-red-900   { color: #fca5a5 !important; }
html.dark .text-red-700   { color: #f87171 !important; }
html.dark .bg-red-900     { background-color: #7f1d1d !important; }
html.dark .text-red-50    { color: #fef2f2 !important; }
html.dark .hover\:bg-red-800:hover { background-color: #991b1b !important; }

/* Also fix red error banners in auth/forms */
html.dark .text-red-600   { color: #f87171 !important; }
html.dark .border-red-100 { border-color: #7f1d1d !important; }
html.dark .border-emerald-100 { border-color: #065f46 !important; }
html.dark .text-emerald-700   { color: #34d399 !important; }

/* btn-primary in dark mode: invert to light so it's visible on dark cards */
html.dark .btn-primary,
html.dark .btn-primary:hover {
  background: #e7e5e4 !important;
  color: #1c1917 !important;
}
html.dark .btn-primary:hover { background: #f5f5f4 !important; }

/* ─── App logo mark + user avatar — invert in dark mode ────────── */
.logo-mark {
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: #1c1917; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: #fafaf9;
  position: relative;
}
html.dark .logo-mark { background: #f5f5f4 !important; color: #1c1917; }

.user-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: #1c1917; color: #fafaf9;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; text-decoration: none;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 0 0 2px #e7e5e4;
}
.user-avatar:hover { background: #44403c; }
html.dark .user-avatar { background: #e7e5e4 !important; color: #1c1917; box-shadow: 0 0 0 2px #44403c; }
html.dark .user-avatar:hover { background: #d6d3d1 !important; }

/* Desktop profile pill */
.profile-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .625rem .25rem .25rem;
  border-radius: 9999px; border: 1px solid var(--c-200);
  background: var(--c-50); color: var(--c-700);
  font-size: .75rem; font-weight: 600;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.profile-pill:hover { background: var(--c-100); border-color: var(--c-300); }
.profile-pill-avatar {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: var(--c-900); color: var(--c-50);
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
html.dark .profile-pill { background: #292524; border-color: #3f3834; color: #d6d3d1; }
html.dark .profile-pill:hover { background: #3f3834; border-color: #57534e; }
html.dark .profile-pill-avatar { background: #e7e5e4; color: #1c1917; }

/* ─── Workspace components ──────────────────────────────────────── */

/* Sidebar panel — flat on mobile, card on desktop */
.sidebar-card {
  padding: .75rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--c-100);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (min-width: 1024px) {
  .sidebar-card {
    border-radius: 1.5rem;
    border: 1px solid var(--c-200);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    border-bottom-width: 1px;
  }
}
html.dark .sidebar-card { background-color: #1c1917 !important; border-color: #3f3834 !important; }

/* Match list row */
.match-card {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem;
  padding-right: 3rem;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--c-200);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
  color: inherit;
}
.match-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-.125rem);
  border-color: var(--c-300);
}
html.dark .match-card { background-color: #1c1917 !important; border-color: #3f3834 !important; }
html.dark .match-card:hover { border-color: #57534e !important; }

/* Match avatar circle */
.match-avatar {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  border-radius: 9999px;
  background: var(--c-100);
  border: 1px solid var(--c-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: var(--c-500);
  text-transform: uppercase;
}

/* ─── Bottom drawer dark mode ───────────────────────────────────── */
html.dark .rounded-t-3xl.bg-white { background-color: #1c1917 !important; }
html.dark .rounded-t-3xl .border-stone-100 { border-color: #292524 !important; }
html.dark .rounded-t-3xl .bg-stone-50 { background-color: #141210 !important; }
html.dark .rounded-t-3xl .border-stone-200 { border-color: #3f3834 !important; }
html.dark .rounded-t-3xl .text-stone-700 { color: #d6d3d1 !important; }
html.dark .rounded-t-3xl .bg-stone-200 { background-color: #3f3834 !important; }

/* translate-y for bottom drawer */
.translate-y-full { transform: translateY(100%); }

/* ─── Table dark mode ───────────────────────────────────────────── */
html.dark table { color: #e7e5e4; }
html.dark thead tr { border-color: #292524 !important; }
html.dark tbody tr { border-color: #292524 !important; }
html.dark tbody tr:hover { background-color: #292524 !important; }
html.dark .divide-stone-100 > * + * { border-color: #292524 !important; }

/* ─── Chat page components ──────────────────────────────────────── */
.bubble-editor {
  margin-top: .5rem;
  background: #fff; border: 1px solid var(--c-200); border-radius: 1.5rem;
  padding: 0.75rem; display: flex; flex-direction: column; gap: .625rem;
  box-shadow: var(--shadow-md);
}

.insert-composer {
  list-style: none; align-self: stretch; max-width: 100%;
  background: #fff; border: 1px solid var(--c-200); border-radius: 1.5rem;
  padding: .625rem; display: flex; flex-direction: column; gap: .5rem;
  box-shadow: var(--shadow-sm);
}

.bubble-strip {
  display: flex; gap: .375rem; flex-wrap: wrap;
}

/* Chat textareas */
.chat-textarea {
  width: 100%; border: 1px solid var(--c-200); background: var(--c-50);
  border-radius: 0.75rem; padding: .625rem 0.75rem; text-sm;
  font-family: inherit; font-size: .875rem; resize: none;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.chat-textarea:focus { border-color: var(--c-400); box-shadow: 0 0 0 3px rgb(28 25 23 / .08); }

/* Role toggle button — pair of buttons where one is active */
.btn-role {
  font-size: .75rem; font-weight: 600; padding: .375rem 0.75rem;
  border-radius: 9999px; border: none; cursor: pointer; transition: background .15s;
}
.btn-role--active { background: #1c1917; color: #fafaf9; }
.btn-role--inactive { background: #f1f0ef; color: #44403c; }
.btn-role--inactive:hover { background: #e8e6e1; }

/* Status message */
.status-text {
  font-size: .75rem; color: var(--c-400); min-height: 1em;
}

/* Action buttons on bubble (↑ Insert, Edit, Delete, ↓ Insert) */
.btn-bubble-action {
  font-size: .7rem; font-weight: 600; padding: .375rem 0.75rem;
  border-radius: 9999px; border: 1px solid var(--c-200); background: #fff;
  color: var(--c-700); cursor: pointer; transition: background .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.btn-bubble-action:hover { background: var(--c-50); border-color: var(--c-300); }
.btn-bubble-action--danger {
  background: #fef2f2; border-color: #fecaca; color: #dc2626;
}
.btn-bubble-action--danger:hover { background: #fee2e2; }

/* Dark mode overrides */
html.dark .bubble-editor { background: #1c1917; border-color: #3f3834; }
html.dark .insert-composer { background: #1c1917; border-color: #3f3834; }
html.dark .chat-textarea { background: #292524; border-color: #3f3834; color: #e7e5e4; }
html.dark .chat-textarea:focus { border-color: #57534e; }
html.dark .btn-bubble-action { background: #292524; border-color: #3f3834; color: #d6d3d1; }
html.dark .btn-bubble-action:hover { background: #3f3834; }
html.dark .btn-bubble-action--danger { background: #1c0505; border-color: #7f1d1d; color: #fca5a5; }
html.dark .btn-bubble-action--danger:hover { background: #450a0a; }

/* ─── Chat page: thoughtful color scheme ───────────────────────── */

/* Header bar — sits above panels, needs its own identity */
.chat-header {
  background-color: #fafaf9;   /* stone-50, slightly off-white */
}
html.dark .chat-header {
  background-color: #111 !important;
  border-color: #292524 !important;
}

/* Header buttons (back + Settings) — must be visible on dark header */
.header-btn {
  background-color: #e7e5e4;
  color: #1c1917;
}
.header-btn:hover { background-color: #d6d3d1; }
html.dark .header-btn {
  background-color: #3d3935 !important;
  color: #e7e5e4 !important;
}
html.dark .header-btn:hover { background-color: #4a4540 !important; }

/* Mobile tab pills */
.tab-active {
  background-color: #1c1917;
  color: #fafaf9;
}
.tab-inactive {
  background-color: transparent;
  color: #78716c;
}
.tab-inactive:hover { background-color: #f5f5f4; color: #44403c; }
html.dark .tab-active {
  background-color: #e7e5e4 !important;
  color: #1c1917 !important;
}
html.dark .tab-inactive { color: #57534e !important; }
html.dark .tab-inactive:hover { background-color: #2d2a27 !important; color: #a8a29e !important; }

/* Settings modal card — must read on its own against dark backdrop */
.modal-card {
  background-color: #fff;
}
html.dark .modal-card {
  background-color: #252220 !important;   /* clearly lighter than panels */
  border-color: #3f3834 !important;
}
html.dark .modal-card .border-stone-100,
html.dark .modal-card .border-stone-200 { border-color: #3a3532 !important; }
/* Cancel + Save buttons consistent in dark modal on all viewports */
html.dark .modal-card .bg-stone-100  { background-color: #3d3935 !important; color: #e7e5e4 !important; }
html.dark .modal-card .bg-stone-900  { background-color: #e7e5e4 !important; color: #1c1917 !important; }

/* Settings form inputs */
.settings-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #78716c;
}
html.dark .settings-label { color: #57534e !important; }

.settings-input {
  width: 100%; padding: .625rem .875rem; border-radius: .75rem;
  border: 1px solid #e7e5e4; background: #f5f5f4;
  font-family: inherit; font-size: .875rem; outline: none;
  transition: border-color .15s;
}
.settings-input:focus { border-color: #78716c; }
html.dark .settings-input {
  background: #1c1917 !important;
  border-color: #3f3834 !important;
  color: #e7e5e4 !important;
}
html.dark .settings-input:focus { border-color: #57534e !important; }
html.dark .settings-input::placeholder { color: #57534e; }

/* Reorder mode — styles live in chat.html <style> block (chat-page only) */

/* Amber reorder active chip */
.bg-amber-100   { background-color: #fef3c7; }
.text-amber-700 { color: #b45309; }
.border-amber-200 { border-color: #fde68a; }
.hover\:bg-amber-200:hover { background-color: #fde68a; }
html.dark .bg-amber-100   { background-color: #3a2400 !important; }
html.dark .text-amber-700 { color: #f59e0b !important; }
html.dark .border-amber-200 { border-color: #78450a !important; }
html.dark .hover\:bg-amber-200:hover { background-color: #4a3000 !important; }

/* Emerald profile badge */
.bg-emerald-50    { background-color: #ecfdf5; }
.text-emerald-600 { color: #059669; }
.border-emerald-200 { border-color: #a7f3d0; }
html.dark .bg-emerald-50    { background-color: #022c1a !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .border-emerald-200 { border-color: #065f46 !important; }

/* Volley clear button hover (red tint) */
html.dark .hover\:bg-red-50:hover   { background-color: #1c0505 !important; }
html.dark .hover\:text-red-500:hover { color: #f87171 !important; }
html.dark .hover\:border-red-200:hover { border-color: #991b1b !important; }