:root {
  font-family:"Segoe UI",Arial,sans-serif;
  color:#131631;
  background:#eeedf8;
  --purple:#795aff;
  --muted:#7c819a;
  --line:#ebedf5;
  --green:#0bb780
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:360px;
  background:radial-gradient(ellipse at 95% 0,#e2f0ec88,transparent 45%),radial-gradient(ellipse at 5% 0,#f0eaff,transparent 50%),#edf0f7;
  font-size:15px
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default;
  opacity:.5
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

svg {
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

button svg {
  flex-shrink:0
}

h1,h2,p {
  margin:0
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #a694ff;
  outline-offset:4px
}

[hidden] {
  display:none!important
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:-60px;
  left:20px;
  padding:12px;
  background:white;
  z-index:10
}

.skip-link:focus {
  top:12px
}

.app-shell {
  display:flex;
  max-width:1680px;
  min-height:calc(100vh - 40px);
  margin:20px 32px;
  border-radius:24px;
  overflow:hidden;
  background:radial-gradient(ellipse at 58% 30%,#f2f6ff66,transparent 55%),#fcfdff;
  box-shadow:0 18px 70px #3d39650a;
  border:1px solid #ffffff
}

.sidebar {
  width:248px;
  flex-shrink:0;
  padding:28px 18px 22px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  background:linear-gradient(150deg,#fbfcff,#f8faff);
  position:sticky;
  top:0;
  align-self:flex-start;
  height:calc(100vh - 42px);
  min-height:560px
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 4px;
  white-space:nowrap
}

.brand strong {
  font-size:18px;
  letter-spacing:-.6px
}

.brand-wave {
  display:flex;
  align-items:center;
  gap:3px;
  height:30px;
  color:var(--green)
}

.brand-wave i {
  width:3px;
  border-radius:5px;
  background:currentColor;
  height:7px
}

.brand-wave i:nth-child(2) {
  height:17px
}

.brand-wave i:nth-child(3) {
  height:26px
}

.brand-wave i:nth-child(4) {
  height:13px
}

.beta {
  font-size:10px;
  font-weight:650;
  color:var(--purple);
  background:#eeebff;
  padding:5px 10px;
  border-radius:15px;
  margin-left:auto
}

nav {
  display:grid;
  gap:6px;
  margin-top:38px
}

nav a {
  display:flex;
  align-items:center;
  gap:16px;
  color:#747a94;
  padding:15px 17px;
  border-radius:15px;
  font-size:17px
}

nav a:hover {
  background:#f2f0fb
}

nav a.active {
  color:var(--purple);
  background:linear-gradient(110deg,#f1efff,#eeeaff)
}

.sidebar-note {
  margin-top:auto;
  background:linear-gradient(130deg,#efedff,#f1f3ff);
  padding:20px;
  border-radius:20px;
  font-size:14px
}

.sidebar-note strong {
  display:block;
  font-weight:600;
  line-height:1.35
}

.sidebar-note p {
  margin-top:6px;
  line-height:1.5;
  color:var(--muted)
}

.note-star {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#e7e1ff;
  color:var(--purple);
  font-size:27px;
  margin-bottom:12px
}

.api-link {
  display:flex;
  justify-content:space-between;
  padding:18px 12px 0;
  color:#9195a9;
  font-size:12px
}

main {
  min-width:0;
  flex:1;
  padding:0 6%;
  position:relative
}

.topbar {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 -3%
}

.local-label {
  font-size:12px;
  color:#9295a9;
  display:flex;
  align-items:center;
  gap:7px
}

.local-label i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#56c5a2
}

.button {
  border:1px solid #e4e6f0;
  border-radius:11px;
  background:#fff;
  padding:11px 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  font-weight:500;
  transition:background .15s,transform .15s
}

.button:hover:not(:disabled) {
  background:#f5f2ff;
  border-color:#d4caff
}

.button.primary {
  background:var(--purple);
  border-color:var(--purple);
  color:white;
  box-shadow:0 5px 15px #795aff20
}

.button.primary:hover:not(:disabled) {
  background:#6747ed
}

.button.small {
  padding:9px 13px;
  font-size:13px
}

.small svg {
  width:18px;
  height:18px
}

.icon-button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px;
  border-radius:10px
}

.icon-button:hover {
  background:#f0edff;
  color:var(--purple)
}

.search-hero {
  text-align:center;
  padding-top:10px
}

.orb-wrap {
  width:160px;
  height:160px;
  margin:0 auto 22px;
  position:relative;
  display:grid;
  place-items:center
}

.orb-wrap:before {
  content:"";
  position:absolute;
  inset:6px;
  background:conic-gradient(#bf9eff,#e4dcff,#86ebd4,#c5aaff);
  filter:blur(29px);
  opacity:.5;
  border-radius:50%
}

.orb {
  position:relative;
  width:119px;
  height:119px;
  border-radius:50%;
  overflow:hidden;
  transform:rotate(-25deg);
  background:radial-gradient(ellipse at 72% 18%,#ece2ff 0,transparent 26%),radial-gradient(ellipse at 65% 74%,#fff 0,transparent 27%),radial-gradient(ellipse at 27% 95%,#00c599 0,#60d7b780,transparent 65%),radial-gradient(ellipse at 65% 35%,#9c70e8 0,#c8b7f5 55%,#eafafa 100%);
  border:1.5px solid #fff;
  box-shadow:inset 0 0 10px #fff,0 0 3px 2px #d8ccff,0 14px 30px #9b8dd533
}

.orb-flow {
  position:absolute;
  inset:-25%;
  border-radius:50%;
  background:radial-gradient(ellipse at 28% 64%,#15d9adbb,transparent 48%),radial-gradient(ellipse at 72% 30%,#9762e5bb,transparent 48%),radial-gradient(ellipse at 62% 75%,#fff9,transparent 30%);
  opacity:.75;
  animation:orb-flow 18s linear infinite;
  will-change:transform
}

.orb:before,.orb:after,.orb i,.orb b {
  content:"";
  position:absolute;
  inset:14px -24px;
  border-radius:50%;
  border:1.5px solid #fff9;
  box-shadow:0 -4px 9px #ffffff80;
  transform:rotate(38deg)
}

.orb:before {
  animation:orb-ribbon-cross 14s ease-in-out infinite
}

.orb:after {
  inset:-30px 19px;
  transform:rotate(-15deg);
  box-shadow:inset 8px 0 16px #fff7
}

.orb i {
  inset:40px -40px -20px;
  transform:rotate(16deg);
  background:linear-gradient(#fff6,transparent);
  animation:orb-ribbon 11s ease-in-out infinite
}

.orb b {
  inset:-12px 40px;
  transform:rotate(-30deg);
  border-color:#fff5
}

.search-hero h1 {
  font-size:clamp(25px,2.35vw,36px);
  font-weight:650;
  letter-spacing:-1.1px;
  line-height:1.2
}

.search-hero>p {
  font-size:18px;
  color:var(--muted);
  margin-top:12px;
  line-height:1.5
}

.search-form {
  margin:30px auto 0;
  background:#fff;
  border:1px solid #eef0f8;
  border-radius:23px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 18px 12px 26px;
  box-shadow:0 12px 40px #b4c6e738;
  min-height:74px;
  text-align:left
}

.search-form>span {
  color:#484c6a
}

.search-form>span svg {
  width:28px;
  height:28px
}

.search-form input {
  min-width:0;
  flex:1;
  width:100%;
  border:0;
  outline:none;
  font-size:17px;
  background:transparent;
  color:var(--text);
  padding:8px 0
}

.search-form input::placeholder {
  color:#85889e
}

.search-form:focus-within {
  border-color:#bfb0ff;
  box-shadow:0 12px 40px #b4c6e738,0 0 0 3px #795aff0c
}

.search-form input:focus-visible {
  outline:none
}

.search-form button {
  border:0;
  border-radius:17px;
  width:52px;
  height:50px;
  flex-shrink:0;
  background:#eeebff;
  color:var(--purple);
  font-size:33px;
  line-height:1
}

.search-form button:hover {
  background:#e2dbff
}

.suggestions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 0;
  align-items:center;
  font-size:13px
}

.suggestions>span {
  color:#969aaf;
  margin-right:6px
}

.suggestions button {
  background:transparent;
  border:1px solid #e1e4f0;
  padding:10px 16px;
  border-radius:24px;
  color:#595e7a;
  font-size:12px
}

.suggestions button:hover {
  border-color:#b6a6ff;
  background:#f5f2ff
}
.suggestions button { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.suggestions>span.suggestions-message { display:block; }

.features {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin:48px 0 35px
}

.features article,.feature-upload {
  border:1px solid #f0f1f7;
  border-radius:20px;
  padding:24px;
  background:#fff9;
  box-shadow:0 10px 35px #b3c4dd12;
  text-align:left;
  position:relative
}

.features h2 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.35px;
  margin:16px 0 10px
}

.features p {
  font-size:16px;
  line-height:1.55;
  color:var(--muted)
}

.feature-icon {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:18px
}

.feature-icon svg {
  width:30px;
  height:30px;
  stroke-width:1.8
}

.green {
  background:#e4f8f0;
  color:#0db781
}

.purple {
  background:#eee3ff;
  color:#8051ff
}

.feature-arrow {
  position:absolute;
  top:24px;
  right:24px;
  color:#baaaf4
}

.feature-upload:hover {
  border-color:#d5c9ff;
  background:white
}

.searching .orb-flow {
  animation-duration:9s
}

.searching .orb-wrap:before {
  animation:pulse 2s ease-in-out infinite
}

.has-results .search-hero {
  padding-top:0
}

.has-results .orb-wrap {
  height:122px;
  margin-bottom:10px
}

.has-results .orb {
  width:103px;
  height:103px
}

.has-results .search-hero h1 {
  font-size:27px
}

.has-results .search-hero>p {
  font-size:15px;
  margin-top:6px
}

.has-results .search-form {
  margin-top:22px
}

.results-tools {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:28px;
  margin-bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:#666d87;
  font-size:14px
}

.results-tools h2 {
  font-size:17px;
  color:#222742;
  font-weight:600
}

.results-tools strong {
  color:#212540
}

.tool-actions {
  display:flex;
  align-items:center;
  gap:12px
}

select,input[type=date],input[type=datetime-local] {
  border:1px solid #e4e6f0;
  background:#fff;
  border-radius:9px;
  padding:9px 12px;
  color:#656b85;
  min-width:0
}

.tool-actions select {
  border-color:transparent;
  background:transparent;
  font-size:13px;
  max-width:210px
}

.filters {
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  border:1px solid var(--line);
  background:white;
  border-radius:15px;
  padding:18px;
  margin-bottom:16px
}

.filters label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  color:var(--muted)
}

.filters select {
  max-width:210px
}

.filter-hint {
  font-size:12px;
  color:var(--muted);
  flex-basis:100%
}

.result-card {
  display:flex;
  gap:18px;
  align-items:center;
  border:1px solid #e9edf4;
  background:#ffffffc9;
  border-radius:17px;
  padding:13px 17px;
  margin-bottom:12px;
  box-shadow:0 3px 12px #1d235603
}

.result-card:hover {
  border-color:#cec5ee
}

.preview {
  width:172px;
  height:96px;
  flex-shrink:0;
  border-radius:11px;
  border:0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#dce7e5,#aea4c6);
  color:white;
  display:grid;
  place-items:center
}

.preview:before {
  content:"";
  position:absolute;
  inset:-40%;
  background:repeating-radial-gradient(ellipse at 65% 20%,transparent 0 20px,#ffffff1a 21px 23px,transparent 24px 36px);
  transform:rotate(-25deg)
}

.preview:nth-child(even) {
  background:#bbb5cf
}

.preview .play {
  background:#fff;
  color:#827599;
  border-radius:50%;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  z-index:1;
  box-shadow:0 2px 10px #453f5930
}

.preview .play svg {
  width:16px;
  height:16px;
  fill:currentColor;
  stroke-width:0
}

.timestamp {
  position:absolute;
  right:7px;
  bottom:7px;
  background:#252d4266;
  padding:3px 6px;
  border-radius:5px;
  font-size:12px;
  font-variant-numeric:tabular-nums
}

.result-content {
  flex:1;
  min-width:0
}

.result-title {
  border:0;
  background:transparent;
  text-align:left;
  padding:0;
  font-size:16px;
  font-weight:600;
  max-width:100%;
  overflow-wrap:anywhere
}

.result-title:hover {
  color:var(--purple)
}

.result-meta {
  font-size:12px;
  color:#969aaf;
  margin:6px 0
}

.result-text {
  color:#737b91;
  line-height:1.55;
  font-size:14px
}

.result-text mark {
  background:#e2f7ec;
  color:#168764;
  border-radius:3px;
  padding:1px 3px
}

.result-open {
  align-self:center;
  color:#a499b9
}

.empty-state {
  text-align:center;
  padding:50px 20px;
  background:#ffffff80;
  border:1px dashed #dedfeb;
  border-radius:20px;
  margin:16px 0;
  color:var(--muted);
  line-height:1.6
}

.empty-state h2 {
  font-size:20px;
  color:#353a57;
  margin-bottom:8px
}

.empty-state .button {
  margin-top:20px
}

.skeleton {
  height:120px;
  background:linear-gradient(100deg,#f1f1f8,#fafbff,#f1f1f8);
  background-size:200% 100%;
  border-radius:17px;
  margin:12px 0;
  animation:shimmer 1.5s infinite
}

.notice {
  padding:13px 17px;
  border-radius:12px;
  background:#f3efff;
  color:#66589a;
  margin:14px 0;
  font-size:14px;
  line-height:1.5
}

.notice.error {
  background:#fff0f1;
  border:1px solid #f8dfe2;
  color:#a34351
}

.muted {
  color:var(--muted);
  font-size:13px
}

.page-view {
  padding-top:34px
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:38px
}

.page-heading h1 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-1px;
  margin:8px 0 12px
}

.page-heading p:not(.eyebrow) {
  color:var(--muted);
  font-size:16px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:#9691b3;
  font-weight:650
}

.call-card {
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  margin:12px 0;
  background:#fff
}

.call-icon {
  width:44px;
  height:44px;
  border-radius:13px;
  background:#f2efff;
  color:#9680dd;
  display:grid;
  place-items:center;
  flex-shrink:0
}

.call-info {
  flex:1;
  min-width:0
}

.call-info h3 {
  font-size:15px;
  margin:0 0 7px;
  font-weight:600;
  overflow-wrap:anywhere
}

.call-info p {
  font-size:12px;
  color:var(--muted);
  line-height:1.6
}

.call-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:end
}

.status {
  display:inline-flex;
  font-size:11px;
  padding:6px 9px;
  border-radius:20px;
  background:#f0eef9;
  color:#8971b8;
  white-space:nowrap
}

.status.ready {
  background:#e4f8ef;
  color:#198863
}

.status.failed {
  background:#fff0f0;
  color:#b95764
}

.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin:24px 0;
  color:var(--muted);
  font-size:12px
}

.dropzone {
  display:flex;
  align-items:center;
  flex-direction:column;
  width:100%;
  border:1.5px dashed #d3c9ef;
  border-radius:22px;
  background:linear-gradient(145deg,#f8f6ff,#fbfdfd);
  padding:42px 20px;
  color:var(--muted);
  gap:12px;
  line-height:1.5;
  text-align:center
}

.dropzone strong {
  font-size:21px;
  font-weight:600;
  color:#36314e;
  margin-top:8px
}

.dropzone>span:not(.feature-icon) {
  font-size:14px
}

.dropzone .upload-formats {
  font-size:12px!important;
  color:#a4a0b5;
  margin-top:4px
}

.dropzone:hover,.dropzone.dragover {
  background:#f0ecff;
  border-color:var(--purple)
}

.upload-options {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:20px 0;
  font-size:13px;
  color:#5e637d
}

.upload-options .muted {
  font-size:12px
}

.file-row {
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid var(--line);
  padding:14px 6px;
  font-size:14px
}

.file-row>div {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}

.file-row small {
  display:block;
  color:var(--muted);
  margin-top:4px
}

.upload-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  font-size:13px;
  color:var(--muted)
}

.upload-steps {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:34px 0 44px;
  font-size:13px;
  color:#9c98b2
}

.upload-steps span {
  display:flex;
  align-items:center;
  gap:8px
}

.upload-steps b {
  display:grid;
  place-items:center;
  font-size:11px;
  background:#eeebf8;
  width:23px;
  height:23px;
  border-radius:50%;
  font-weight:500
}

.upload-steps i {
  font-style:normal;
  color:#ccc5df
}

progress {
  width:100%;
  height:5px;
  display:block;
  margin-top:9px;
  accent-color:var(--purple)
}

footer {
  text-align:center;
  color:#b4b6c6;
  font-size:11px;
  padding:28px 0 22px
}

footer span {
  margin:0 8px
}

dialog {
  width:min(920px,calc(100vw - 40px));
  max-height:90vh;
  padding:26px;
  border:1px solid #e8e4f2;
  border-radius:22px;
  box-shadow:0 30px 120px #25204440;
  color:#20243e;
  background:#fcfdff
}

dialog::backdrop {
  background:#24233b6b;
  backdrop-filter:blur(5px)
}

.dialog-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding-bottom:20px
}

.dialog-heading h2 {
  font-size:20px;
  overflow-wrap:anywhere;
  margin-top:7px
}

.media-player {
  display:block;
  background:#181a26;
  border-radius:12px;
  width:100%;
  max-height:39vh
}

audio.media-player {
  background:#f1eef9;
  margin-bottom:20px
}

.transcript-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:22px 0 12px;
  gap:12px
}

.playback-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.transcript-header h3 {
  margin:0;
  font-size:17px;
  font-weight:600
}

.transcript-list {
  max-height:31vh;
  overflow-y:auto;
  border-top:1px solid var(--line);
  padding-top:6px
}

.utterance {
  display:flex;
  gap:16px;
  padding:10px;
  border-radius:9px;
  font-size:14px;
  line-height:1.5
}

.utterance.active {
  background:#f0ebff
}

.utterance button {
  font-size:12px;
  color:var(--purple);
  background:transparent;
  border:0;
  padding:2px 0;
  align-self:flex-start;
  font-variant-numeric:tabular-nums;
  min-width:54px
}

.utterance small {
  display:block;
  color:#9294a7;
  font-size:10px;
  margin-bottom:2px
}

.media-error {
  font-size:13px;
  line-height:1.6;
  background:#fff4e9;
  padding:12px;
  border-radius:10px;
  margin-top:10px
}

.media-error a {
  text-decoration:underline
}

.transcript-list:empty {
  display:none
}

.upload-failed-note {
  color:#ac4c5b;
  font-size:12px;
  margin-top:5px
}

/* Only transform and opacity change; gradients and shadows stay rasterized. */
@keyframes orb-flow {
  0% { transform:rotate(0deg) scale(1); opacity:.75; }
  50% { transform:rotate(180deg) scale(1.08); opacity:.95; }
  100% { transform:rotate(360deg) scale(1); opacity:.75; }
}

@keyframes orb-ribbon {
  0%,100% { transform:rotate(16deg) translateY(0); opacity:1; }
  50% { transform:rotate(-22deg) translateY(-6px); opacity:.65; }
}

@keyframes orb-ribbon-cross {
  0%,100% { transform:rotate(38deg) scale(1); opacity:1; }
  50% { transform:rotate(65deg) scale(.94); opacity:.6; }
}

@keyframes pulse {
  50% {
    opacity:.8;
    transform:scale(1.15)
  }
}

@keyframes shimmer {
  to {
    background-position:-200% 0
  }
}

@media(min-width:1744px) {
  .app-shell {
    margin:20px auto
  }
}

@media(max-width:1200px) {
  .app-shell {
    margin:14px;
    min-height:calc(100vh - 28px)
  }
  .sidebar {
    width:215px;
    padding:26px 14px;
    height:calc(100vh - 30px)
  }
  main {
    padding:0 4%
  }
  .brand {
    gap:8px
  }
  .brand strong {
    font-size:18px
  }
  .beta {
    padding:4px 7px;
    font-size:9px
  }
  .features {
    gap:14px
  }
  .features article,.feature-upload {
    padding:20px
  }
  .features h2 {
    font-size:16px
  }
  .features p {
    font-size:14px
  }
  .suggestions {
    gap:7px
  }
  .suggestions button {
    padding:9px 12px
  }
  .search-form input {
    font-size:15px
  }
  .search-hero>p {
    font-size:16px
  }
}

@media(max-width:850px) {
  .sidebar {
    width:180px;
    padding:24px 10px
  }
  .brand {
    gap:7px
  }
  .brand strong {
    font-size:16px
  }
  .brand-wave {
    gap:2px
  }
  .beta {
    display:none
  }
  nav a {
    font-size:15px;
    padding:13px;
    gap:10px
  }
  .sidebar-note {
    padding:15px;
    font-size:12px
  }
  .topbar {
    height:75px
  }
  .topbar .local-label {
    font-size:10px
  }
  .topbar .button {
    font-size:11px;
    padding:8px
  }
  .features {
    grid-template-columns:1fr;
    margin-top:30px
  }
  .features article,.feature-upload {
    padding:18px 18px 18px 87px;
    min-height:110px
  }
  .features .feature-icon {
    position:absolute;
    left:18px;
    top:22px;
    width:49px;
    height:49px
  }
  .features h2 {
    margin:2px 0 6px
  }
  .feature-arrow {
    display:none
  }
  .search-hero h1 {
    font-size:27px
  }
  .orb-wrap {
    height:138px
  }
  .search-form {
    gap:12px;
    padding:10px 12px 10px 18px
  }
  .search-form input {
    font-size:14px
  }
  .preview {
    width:110px;
    height:85px
  }
  .result-card {
    gap:12px;
    padding:12px
  }
  .result-open {
    display:none
  }
  .result-title {
    font-size:14px
  }
  .result-text {
    font-size:13px
  }
  .call-card {
    flex-wrap:wrap
  }
  .call-actions {
    width:100%;
    justify-content:start;
    padding-left:60px
  }
  .results-tools {
    flex-wrap:wrap
  }
  .upload-steps {
    gap:12px;
    font-size:11px
  }
  .upload-steps i {
    display:none
  }
  .page-heading {
    flex-wrap:wrap
  }
  .filters label {
    flex:1;
    min-width:125px
  }
  .filters input {
    width:100%
  }
}

@media(max-width:600px) {
  body {
    min-width:360px
  }
  .app-shell {
    margin:0;
    border:0;
    border-radius:0;
    display:block;
    min-height:100vh
  }
  .sidebar {
    width:100%;
    height:auto;
    min-height:0;
    padding:19px 20px 0;
    position:static;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .brand {
    padding:0;
    justify-content:center
  }
  .brand strong {
    font-size:19px
  }
  .beta {
    display:block;
    margin-left:4px
  }
  .brand-wave {
    gap:3px
  }
  .sidebar-note,.api-link {
    display:none
  }
  nav {
    display:flex;
    margin-top:20px;
    gap:8px;
    padding-bottom:12px
  }
  nav a {
    flex:1;
    justify-content:center;
    font-size:13px;
    padding:11px 7px;
    border-radius:11px;
    gap:8px
  }
  nav svg {
    width:18px;
    height:18px
  }
  nav:has(#users-nav:not([hidden])) {
    flex-wrap:wrap
  }
  nav:has(#users-nav:not([hidden])) a {
    flex:1 1 calc(50% - 8px)
  }
  main {
    padding:0 20px
  }
  .topbar {
    height:64px;
    margin:0
  }
  .local-label {
    font-size:10px
  }
  .search-hero {
    padding-top:0
  }
  .orb-wrap {
    height:122px;
    width:130px;
    margin-bottom:16px
  }
  .orb {
    width:100px;
    height:100px
  }
  .search-hero h1 {
    font-size:27px;
    letter-spacing:-.7px
  }
  .search-hero>p {
    font-size:14px;
    line-height:1.6;
    margin-top:12px
  }
  .search-form {
    margin-top:24px;
    border-radius:17px;
    min-height:66px;
    gap:10px;
    padding-left:15px
  }
  .search-form>span svg {
    width:22px;
    height:22px
  }
  .search-form button {
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:28px
  }
  .search-form input {
    font-size:13px
  }
  .suggestions {
    margin-top:16px;
    gap:7px
  }
  .suggestions>span {
    display:none
  }
  .suggestions button {
    font-size:10px;
    padding:8px 10px
  }
  .features {
    margin-top:30px
  }
  .features p {
    font-size:13px
  }
  .features h2 {
    font-size:16px
  }
  .has-results .orb-wrap {
    height:102px
  }
  .has-results .orb {
    width:84px;
    height:84px
  }
  .has-results .search-hero h1 {
    font-size:24px
  }
  .result-card {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .preview {
    width:84px;
    height:62px
  }
  .result-content {
    flex-basis:calc(100% - 100px)
  }
  .result-text {
    font-size:13px
  }
  .timestamp {
    font-size:10px;
    padding:2px 4px;
    bottom:4px;
    right:4px
  }
  .preview .play {
    width:25px;
    height:25px;
    margin-bottom:8px
  }
  .results-tools {
    gap:12px
  }
  .tool-actions {
    width:100%;
    justify-content:space-between
  }
  .tool-actions select {
    padding-left:0
  }
  .page-view {
    padding-top:15px
  }
  .page-heading {
    gap:18px;
    margin-bottom:26px
  }
  .page-heading h1 {
    font-size:30px
  }
  .page-heading p:not(.eyebrow) {
    font-size:14px
  }
  .dropzone {
    padding:32px 18px
  }
  .dropzone strong {
    font-size:19px
  }
  .upload-steps {
    gap:9px;
    flex-wrap:wrap;
    font-size:10px
  }
  .upload-steps span {
    gap:4px
  }
  .upload-steps b {
    width:19px;
    height:19px
  }
  .upload-options input {
    width:100%
  }
  .upload-controls {
    flex-direction:column;
    align-items:stretch
  }
  .call-card {
    padding:15px
  }
  .call-actions {
    padding-left:0;
    gap:8px
  }
  .call-actions .button {
    font-size:11px
  }
  .call-info h3 {
    font-size:13px
  }
  .status {
    font-size:10px
  }
  dialog {
    padding:18px;
    width:calc(100vw - 20px);
    max-height:94vh
  }
  .dialog-heading h2 {
    font-size:16px
  }
  .transcript-header {
    align-items:start;
    flex-direction:column
  }
  .utterance {
    padding:9px 3px;
    gap:10px;
    font-size:13px
  }
  footer {
    padding-bottom:25px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
  }
}

.profile { position:absolute; top:12px; right:16px; display:flex; align-items:center; gap:12px; min-width:0; }
.profile-toggle { display:flex; align-items:center; gap:8px; border:0; padding:4px; border-radius:30px; background:transparent; color:var(--muted); cursor:pointer; }
.profile-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .2s; }
.profile-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.profile-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:230px; max-width:calc(100vw - 50px); padding:18px; background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 40px #44347020; }
.profile-menu #logout { width:100%; margin-top:16px; }
.profile-avatar { position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#e8e0ff,#def5ec); color:#6950be; font-weight:600; font-size:15px; overflow:hidden; }
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-info { display:grid; gap:3px; min-width:0; }
.profile-info strong { font-size:13px; font-weight:600; }
.profile-info span { font-size:11px; color:var(--muted); }
.profile-info strong,.profile-info span { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-composer { border:1px solid #e7e1f5; border-radius:18px; background:#fff9; padding:22px 22px 0; margin-bottom:28px; }
.selected-file-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.selected-file-info label { display:block; margin:14px 0 7px; color:var(--muted); font-size:12px; }
.file-date-controls { display:flex; flex-wrap:wrap; gap:8px; }
.file-date-controls input,#settings-date { min-width:0; max-width:100%; border:1px solid var(--line); border-radius:10px; padding:9px; background:#fff; font:inherit; font-size:14px; color:var(--ink); }
.selected-file-info small { line-height:1.5; }
#recording-settings { width:min(480px,calc(100% - 28px)); }
#settings-filename { overflow-wrap:anywhere; margin:0 0 24px; color:var(--muted); }
#recording-settings label { display:block; font-size:14px; margin-bottom:8px; }
#settings-date { width:100%; font-size:16px; }
#recording-settings .muted { font-size:13px; line-height:1.6; }
.settings-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.upload-composer .dropzone { padding:24px; }
.upload-composer .upload-steps { margin:24px 0; }
.library-heading { margin-top:30px; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; }
.library-heading h2,#upload-activity h2 { font-size:19px; font-weight:600; }
.library-heading p,#upload-activity>.muted { font-size:13px; line-height:1.5; }
@media(max-width:850px) { .profile-info strong,.profile-info span { max-width:170px; } }
@media(max-width:600px) { .topbar .local-label { display:none; } .profile { top:8px; } .profile-avatar { width:38px; height:38px; } .upload-composer { padding:14px 14px 0; } .file-date-controls { flex-direction:column; } .file-date-controls input { width:100%; } .file-row { align-items:flex-start; gap:8px; } }
.media-player:fullscreen { width:100%; height:100%; max-height:none; border-radius:0; background:#000; object-fit:contain; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:28px 16px; }
.login-card { width:min(460px,100%); padding:32px; border:1px solid #fff; border-radius:28px; background:rgba(255,255,255,.93); box-shadow:0 24px 80px #6c639e18; }
.login-card .brand { justify-content:center; }
.login-symbol { margin:20px auto 16px; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; font-size:30px; color:var(--purple); background:#eee9ff; }
.login-card h1 { text-align:center; font-size:26px; line-height:1.25; letter-spacing:-.8px; }
.login-intro { text-align:center; color:var(--muted); font-size:15px; line-height:1.6; margin:12px 0 20px; }
.login-card label { display:block; font-size:13px; font-weight:600; margin:18px 0 8px; }
.login-card input { width:100%; min-height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px; font:inherit; font-size:16px; }
.password-field { position:relative; }
.password-field input { padding-right:88px; }
.password-field button { position:absolute; right:12px; top:0; height:100%; border:0; background:none; color:var(--purple); font:inherit; font-size:12px; }
#login-submit { width:100%; justify-content:center; margin-top:24px; min-height:48px; }
.login-hint { color:var(--muted); font-size:12px; text-align:center; margin:24px 0 0; }
.auth-tabs { display:flex; padding:4px; gap:4px; background:#f3f0fc; border-radius:12px; margin-bottom:20px; }
.auth-tabs button { flex:1; padding:10px; border:0; border-radius:9px; background:transparent; color:var(--muted); }
.auth-tabs button[aria-pressed="true"] { background:white; color:var(--purple); box-shadow:0 2px 8px #64539112; }
.google-button { width:100%; min-height:48px; justify-content:center; background:#fff; }
.auth-hint { color:var(--muted); font-size:12px; line-height:1.5; margin:10px 0; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.auth-links { display:flex; justify-content:center; margin-top:18px; }
.auth-link { color:var(--purple); background:none; border:0; padding:8px 0; font-size:13px; }
.auth-link:hover { text-decoration:underline; }
.login-card [hidden] { display:none !important; }
.login-card .notice { margin-top:16px; overflow-wrap:anywhere; }
@media(max-height:850px) { .login-symbol { display:none; } .login-card .brand { margin-bottom:20px; } .login-hint { margin-top:16px; } }
@media(max-width:600px) { .login-card { padding:28px 24px; } .account { margin:8px 0; } }
.user-create { display:flex; align-items:end; flex-wrap:wrap; gap:16px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:24px; }
.user-create label { flex:1 1 200px; display:grid; gap:8px; font-size:13px; }
.user-create input { min-height:44px; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:16px; }
.user-create p { flex-basis:100%; line-height:1.5; }
.result-export { margin-top:10px; color:var(--purple); }
.clip-panel { padding:20px; margin:18px 0 24px; border:1px solid #e4ddff; border-radius:16px; background:#f8f6ff; }
.clip-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.clip-heading h3 { margin:0; font-size:17px; }
.clip-heading span,.clip-hint { font-size:12px; }
.clip-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.clip-fields label { display:grid; gap:8px; font-size:13px; }
.clip-fields input { min-width:0; width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font-size:16px; font-variant-numeric:tabular-nums; background:white; }
.clip-fields button { justify-content:center; }
.clip-hint { margin:12px 0; }
.clip-actions { display:flex; flex-wrap:wrap; gap:10px; }
.clip-panel [role=status] { margin:12px 0 0; font-size:13px; line-height:1.5; }
@media(max-width:600px) { .clip-panel { padding:14px; } .clip-fields { gap:10px; } .clip-fields .button { font-size:11px; padding:9px 5px; } .clip-heading { align-items:start; flex-direction:column; gap:6px; } }

/* Theme overrides keep media and the decorative orb in their original colors. */
.login-page { padding-top:80px; }
.login-theme-toggle { position:absolute; top:20px; right:24px; }
:root[data-theme="dark"] {
  color:#ececf7; background:#10121b; --text:#ececf7; --ink:#ececf7;
  --purple:#b5a1ff; --muted:#a5aac3; --line:#34384b; --green:#53d4ad;
}
[data-theme="dark"] body { background:radial-gradient(ellipse at 95% 0,#15382f55,transparent 45%),radial-gradient(ellipse at 5% 0,#30224b66,transparent 50%),#11131d; }
[data-theme="dark"] .app-shell { background:radial-gradient(ellipse at 58% 30%,#29274630,transparent 55%),#171a26; border-color:#323446; box-shadow:0 18px 70px #0003; }
[data-theme="dark"] .sidebar { background:linear-gradient(150deg,#1b1d2b,#171a26); }
[data-theme="dark"] nav a { color:#adb1c9; }
[data-theme="dark"] nav a:hover { background:#242737; }
[data-theme="dark"] nav a.active { color:#c7b8ff; background:linear-gradient(110deg,#302740,#27253b); }
[data-theme="dark"] .sidebar-note { background:linear-gradient(130deg,#29253d,#222a3d); }
[data-theme="dark"] .note-star,[data-theme="dark"] .beta,[data-theme="dark"] .login-symbol,[data-theme="dark"] .call-icon { background:#322948; color:#c5b1ff; }
[data-theme="dark"] .local-label,[data-theme="dark"] .eyebrow,[data-theme="dark"] .result-meta,[data-theme="dark"] .suggestions>span,[data-theme="dark"] .upload-steps,[data-theme="dark"] .dropzone .upload-formats,[data-theme="dark"] footer { color:#a3a6bf; }
[data-theme="dark"] .button,[data-theme="dark"] select,[data-theme="dark"] input[type=date],[data-theme="dark"] input[type=datetime-local],[data-theme="dark"] .login-card input,[data-theme="dark"] .user-create input,[data-theme="dark"] .clip-fields input,[data-theme="dark"] .file-date-controls input,[data-theme="dark"] #settings-date { background:#242837; color:#e4e6f4; border-color:var(--line); }
[data-theme="dark"] .button:hover:not(:disabled) { background:#302d44; border-color:#675981; }
[data-theme="dark"] .button.primary { background:#7652d3; color:white; border-color:#7652d3; }
[data-theme="dark"] .button.primary:hover:not(:disabled) { background:#6945c4; border-color:#8669d5; }
[data-theme="dark"] .search-form,[data-theme="dark"] .features article,[data-theme="dark"] .feature-upload,[data-theme="dark"] .filters,[data-theme="dark"] .result-card,[data-theme="dark"] .call-card,[data-theme="dark"] .upload-composer,[data-theme="dark"] .user-create,[data-theme="dark"] .login-card,[data-theme="dark"] .profile-menu,[data-theme="dark"] .skip-link { background:#1f2331; border-color:var(--line); box-shadow:0 8px 25px #00000014; }
[data-theme="dark"] .search-form>span,[data-theme="dark"] .results-tools,[data-theme="dark"] .result-text,[data-theme="dark"] .upload-options { color:#b7bcd2; }
[data-theme="dark"] .search-form input { color:#ececf7; }
[data-theme="dark"] input::placeholder { color:#989eb8; }
[data-theme="dark"] .search-form:focus-within { border-color:#9f85ec; box-shadow:0 0 0 3px #9e81f01a; }
[data-theme="dark"] .search-form button { background:#342b4c; color:#c5b1ff; }
[data-theme="dark"] .search-form button:hover { background:#463861; }
[data-theme="dark"] .suggestions button { color:#c0c3d7; border-color:#3a3e53; }
[data-theme="dark"] .suggestions button:hover { background:#302a44; border-color:#8972bc; }
[data-theme="dark"] .feature-icon { background:#183e35; color:#61dab5; }
[data-theme="dark"] .feature-icon.purple { background:#342847; color:#c1a2ff; }
[data-theme="dark"] .feature-upload:hover,[data-theme="dark"] .result-card:hover { background:#252838; border-color:#67577f; }
[data-theme="dark"] .results-tools h2,[data-theme="dark"] .results-tools strong,[data-theme="dark"] .empty-state h2,[data-theme="dark"] .dropzone strong { color:#ececf7; }
[data-theme="dark"] .empty-state { background:#1c202d; border-color:#3b4056; }
[data-theme="dark"] .result-text mark,[data-theme="dark"] .status.ready { background:#1b3c33; color:#8ee1bb; }
[data-theme="dark"] .status,[data-theme="dark"] .notice { background:#302945; color:#ccbbea; }
[data-theme="dark"] .status.failed,[data-theme="dark"] .notice.error { background:#412733; border-color:#68404d; color:#f3b0bb; }
[data-theme="dark"] .skeleton { background-image:linear-gradient(100deg,#202331,#2a2e41,#202331); }
[data-theme="dark"] .dropzone { background:linear-gradient(145deg,#262238,#1d2b2d); border-color:#594b76; }
[data-theme="dark"] .dropzone:hover,[data-theme="dark"] .dropzone.dragover { background:#302845; border-color:#b5a1ff; }
[data-theme="dark"] .upload-steps b { background:#302a43; }
[data-theme="dark"] .upload-failed-note { color:#ecabba; }
[data-theme="dark"] dialog { background:#1a1e2b; color:#ececf7; border-color:#3f4059; box-shadow:0 30px 120px #0008; }
[data-theme="dark"] dialog::backdrop { background:#080b16b3; }
[data-theme="dark"] audio.media-player { background:#222638; }
[data-theme="dark"] .utterance.active { background:#342b4b; }
[data-theme="dark"] .utterance small { color:#a4aac2; }
[data-theme="dark"] .media-error { background:#3d3022; color:#eacb9e; }
[data-theme="dark"] .clip-panel { background:#252137; border-color:#493963; }
[data-theme="dark"] .auth-tabs { background:#151926; }
[data-theme="dark"] .auth-tabs button[aria-pressed="true"] { background:#302940; color:#c7b8ff; box-shadow:none; }
[data-theme="dark"] .profile-avatar { background:linear-gradient(135deg,#413451,#24433d); color:#d7c4ff; }
.collections-nav { display:flex; align-items:center; gap:16px; width:100%; padding:15px 18px; border:0; border-radius:16px; background:transparent; color:var(--muted); text-align:left; font:inherit; cursor:pointer; }
.collections-nav svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.collections-nav:hover { background:#f0edff; color:var(--purple); }
.collection-choice { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.upload-controls { flex-wrap:wrap; }
.collection-choice { flex-basis:100%; }
.collection-form { display:grid; gap:10px; margin:20px 0; }
.collection-form input,.collection-form textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:white; color:inherit; font:inherit; }
.collection-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.collection-row h3,.collection-row p { margin:0 0 6px; overflow-wrap:anywhere; }
.collection-row>div:first-child { min-width:0; }
.collection-row .tool-actions { flex-wrap:wrap; }
#collections-dialog { width:min(720px,calc(100% - 32px)); }
#delete-dialog { width:min(480px,calc(100% - 32px)); }
#delete-description { line-height:1.65; overflow-wrap:anywhere; }
.button.danger { color:#b23350; border-color:#e3b3c0; }
.button.danger:hover { background:#fff0f3; }
.collection-tag { color:var(--purple); }
.selection-tools,.bulk-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 0; }
.selection-tools { color:var(--muted); font-size:13px; }
.select-page,.bulk-apply { display:flex; align-items:center; gap:10px; cursor:pointer; }
.recording-check { display:grid; place-items:center; min-width:36px; min-height:44px; cursor:pointer; flex-shrink:0; }
.recording-check input,.select-page input,.bulk-apply input { width:18px; height:18px; accent-color:#795cff; cursor:pointer; }
.bulk-panel { position:sticky; top:8px; z-index:4; padding:14px 18px; border:1px solid #d4c8fb; border-radius:14px; background:#f2eeff; box-shadow:0 4px 16px #30205012; }
.bulk-panel>span { font-size:13px; font-weight:600; }
.library-row[data-open-row] { cursor:pointer; }
.library-row[data-open-row]:hover { border-color:#a48bdc; }
.library-row.selected { border-color:#9875e4; background:#f5f1ff; }
.recording-title { color:inherit; background:none; border:0; padding:0; text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.recording-title:hover { color:var(--purple); }
.page-size { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin-right:auto; }
.pagination { flex-wrap:wrap; }
.bulk-apply { margin:18px 0 10px; font-size:14px; }
#recording-settings .bulk-apply { display:flex; align-items:center; gap:10px; }
#delete-description { white-space:pre-line; max-height:260px; overflow:auto; }
#settings-error { max-height:220px; overflow:auto; }
[data-theme="dark"] .bulk-panel { background:#29243b; border-color:#675186; }
[data-theme="dark"] .library-row.selected { background:#2b2540; border-color:#9875e4; }
@media(max-width:600px) { .library-row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; } .library-row .call-icon { display:none; } .library-row .call-actions { grid-column:2; margin:0; width:auto; justify-content:flex-start; } .recording-check { min-width:28px; } .bulk-panel { top:4px; padding:12px; } .bulk-panel .tool-actions { flex-wrap:wrap; gap:8px; } .page-size { flex-basis:100%; } }
#settings-collection { width:100%; margin:8px 0 18px; }
[data-theme="dark"] .collections-nav:hover { background:#29253d; }
[data-theme="dark"] .collection-form input,[data-theme="dark"] .collection-form textarea { background:#242837; color:#e4e6f4; }
[data-theme="dark"] .button.danger { color:#f3b0bb; border-color:#68404d; }
[data-theme="dark"] .button.danger:hover { background:#412733; }
@media(max-width:600px) { .collection-row { align-items:flex-start; flex-direction:column; } .collection-choice select { width:100%; } .collections-nav { width:auto; font-size:13px; padding:10px; gap:6px; } }