:root{
  --bg:#f6f8fc;
  --bg-2:#ffffff;
  --panel:rgba(255,255,255,.74);
  --soft:#eef4fb;
  --line:rgba(208,220,235,.9);
  --line-2:rgba(255,255,255,.9);
  --text:#132033;
  --muted:#708095;
  --primary:#4f7cff;
  --primary-2:#7d5cff;
  --cyan:#39c8ff;
  --success:#18b56b;
  --danger:#e04f5f;
  --shadow:0 24px 60px rgba(58,96,160,.10);
  --shadow-strong:0 30px 80px rgba(58,96,160,.16);
  --radius:28px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:"Inter",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(79,124,255,.11), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(57,200,255,.10), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(125,92,255,.10), transparent 35%),
    linear-gradient(180deg,#fbfdff 0%, #f3f7fc 100%);
  overflow-x:hidden;
}

.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(19,32,51,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,32,51,.025) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 95%);
  z-index:0;
}

.bg-orb{
  position:fixed;
  border-radius:50%;
  filter:blur(55px);
  pointer-events:none;
  z-index:0;
  animation: drift 12s ease-in-out infinite alternate;
}

.orb-a{
  width:380px;
  height:380px;
  left:-100px;
  top:120px;
  background:rgba(79,124,255,.12);
}

.orb-b{
  width:420px;
  height:420px;
  right:-100px;
  top:40px;
  background:rgba(125,92,255,.12);
  animation-duration:15s;
}

@keyframes drift{
  from{transform:translateY(0) translateX(0) scale(1)}
  to{transform:translateY(24px) translateX(16px) scale(1.06)}
}

.page-enter{
  position:relative;
  z-index:2;
  animation: pageIn .55s ease;
}

@keyframes pageIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(208,220,235,.65);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2),var(--cyan));
  box-shadow:0 0 0 8px rgba(79,124,255,.08), 0 8px 20px rgba(79,124,255,.18);
}

.brand{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.03em;
}

.brand-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(208,220,235,.8);
  box-shadow:0 6px 18px rgba(58,96,160,.05);
  transition:.25s ease;
}

.nav a:hover{
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(58,96,160,.10);
}

.container{
  max-width:1500px;
  margin:30px auto;
  padding:0 20px 46px;
}

.hero-panel,
.card,
.chart-card,
.glass-card,
.extract-card,
.voice-recorder-card,
.kpi-card,
.mini-kpi{
  position:relative;
  background:var(--panel);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

.hero-panel::before,
.card::before,
.chart-card::before,
.glass-card::before,
.extract-card::before,
.voice-recorder-card::before,
.kpi-card::before,
.mini-kpi::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.card{padding:24px;margin-bottom:20px}
.hero-panel{padding:28px}
.chart-card{padding:20px; min-height:340px; height:340px}
.glass-card{padding:22px}
.extract-card{padding:24px}
.voice-recorder-card{padding:28px}
.kpi-card,.mini-kpi{padding:22px}

.tilt-card{
  transition:transform .25s ease, box-shadow .25s ease;
  transform-style:preserve-3d;
}

.floating-card{
  animation: floaty 5.5s ease-in-out infinite;
}

.floating-card:nth-child(2){animation-delay:.4s}
.floating-card:nth-child(3){animation-delay:.8s}
.floating-card:nth-child(4){animation-delay:1.2s}

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(79,124,255,.10);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.hero-copy h1{
  margin:0;
  font-size:44px;
  line-height:1.03;
  letter-spacing:-.04em;
}

.hero-copy p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:16px;
}

.kpi-grid,
.kpi-strip,
.chart-grid,
.voice-grid,
.extract-grid,
.grid-main,
.grid-2,
.admin-chart-grid{
  display:grid;
  gap:18px;
}

.kpi-grid{grid-template-columns:repeat(4,1fr);margin:20px 0}
.kpi-strip{grid-template-columns:repeat(4,1fr);margin:20px 0}
.chart-grid{grid-template-columns:repeat(2,1fr);margin-top:20px}
.admin-chart-grid .full-span{grid-column:1/-1}
.voice-grid{grid-template-columns:1fr 1fr;margin:20px 0}
.extract-grid{grid-template-columns:repeat(3,1fr)}
.grid-main{grid-template-columns:1.15fr .85fr}
.grid-2{grid-template-columns:1fr 1fr}

.kpi-card span,
.mini-kpi span,
.extract-item span,
.chart-title{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.kpi-card strong,
.mini-kpi strong{
  display:block;
  font-size:36px;
  font-weight:900;
  letter-spacing:-.05em;
  margin-top:10px;
}

.chart-title{
  margin-bottom:14px;
}

.record-center{
  position:relative;
  min-height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.hero-record-card{
  overflow:hidden;
}

.pulse-rings{
  position:absolute;
  width:320px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.pulse-rings span{
  position:absolute;
  border:1px solid rgba(79,124,255,.20);
  border-radius:50%;
  animation:pulseRing 3s linear infinite;
}

.pulse-rings span:nth-child(1){width:180px;height:180px}
.pulse-rings span:nth-child(2){width:250px;height:250px;animation-delay:1s}
.pulse-rings span:nth-child(3){width:320px;height:320px;animation-delay:2s}

@keyframes pulseRing{
  0%{opacity:0;transform:scale(.75)}
  20%{opacity:.45}
  100%{opacity:0;transform:scale(1.06)}
}

.voice-main-btn{
  width:220px;
  height:220px;
  border:none;
  border-radius:50%;
  color:#fff;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.03em;
  cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-2),var(--cyan));
  box-shadow:
    0 20px 50px rgba(79,124,255,.24),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}

.voice-main-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 28px 60px rgba(79,124,255,.30),
    inset 0 1px 0 rgba(255,255,255,.4);
}

.voice-stop-btn,
.save-visit-btn,
.glass-link,
.btn-link,
button{
  border:none;
  cursor:pointer;
  text-decoration:none;
  border-radius:18px;
  padding:14px 18px;
  font-weight:800;
  transition:.2s ease;
  background:linear-gradient(135deg,var(--primary),#7295ff);
  color:#fff;
  box-shadow:0 14px 24px rgba(79,124,255,.16);
}

.voice-stop-btn{
  background:linear-gradient(135deg,#ff8b98,#f26474);
  box-shadow:0 14px 24px rgba(224,79,95,.14);
}

.secondary-btn,
.btn-link.secondary{
  background:linear-gradient(135deg,#f4f7fb,#e4ebf5);
  color:var(--text);
  box-shadow:none;
}

button:hover,
.glass-link:hover,
.btn-link:hover{
  transform:translateY(-1px);
}

.voice-status{
  font-weight:800;
  color:var(--muted);
}

.speak-helper{
  max-width:760px;
  text-align:center;
}

.speak-helper p{
  color:var(--muted);
  margin:0 0 10px;
}

.helper-flow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.helper-flow span{
  background:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:999px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  box-shadow:0 10px 18px rgba(58,96,160,.05);
}

textarea,
input,
pre{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 16px;
  background:rgba(249,252,255,.95);
  color:var(--text);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

textarea:focus,
input:focus{
  border-color:rgba(79,124,255,.45);
  box-shadow:0 0 0 5px rgba(79,124,255,.08);
}

textarea{
  min-height:170px;
  resize:vertical;
}

pre{
  white-space:pre-wrap;
  overflow:auto;
}

label{
  display:block;
  font-size:14px;
  font-weight:800;
  margin:14px 0 8px;
}

.extract-item{
  background:rgba(249,252,255,.96);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  min-height:122px;
  box-shadow:0 10px 18px rgba(58,96,160,.04);
}

.extract-item strong{
  display:block;
  margin-top:10px;
  font-size:18px;
  line-height:1.5;
  font-weight:800;
}

.extract-item.full{
  grid-column:1/-1;
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.section-head h2{
  margin:8px 0 0;
  font-size:30px;
  letter-spacing:-.04em;
}

.table-wrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  background:rgba(255,255,255,.76);
  border-radius:20px;
  overflow:hidden;
}

th,td{
  text-align:left;
  padding:14px 14px;
  border-bottom:1px solid rgba(208,220,235,.7);
  vertical-align:top;
}

th{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.flash{
  background:rgba(24,181,107,.10);
  border:1px solid rgba(24,181,107,.18);
  color:#0f7a49;
  padding:14px 16px;
  border-radius:18px;
  margin-bottom:16px;
  font-weight:700;
}

.example-block{
  padding:16px;
  background:rgba(249,252,255,.96);
  border:1px solid var(--line);
  border-radius:20px;
  margin-bottom:14px;
  box-shadow:0 8px 16px rgba(58,96,160,.04);
}

.example-block p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.hint{
  color:var(--muted);
  line-height:1.7;
}

.reveal{
  animation:popIn .32s ease;
}

@keyframes popIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}

.recording-live .voice-main-btn{
  animation:recordBreath 1.4s ease-in-out infinite;
}

@keyframes recordBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

.danger-btn{
  background:linear-gradient(135deg,#ff8d99,#eb5c6c);
  color:#fff;
  width:auto;
  padding:10px 14px;
}

.actions-col form{display:inline}

@media (max-width: 1200px){
  .kpi-grid,
  .kpi-strip,
  .voice-grid,
  .extract-grid,
  .chart-grid,
  .grid-main,
  .grid-2{
    grid-template-columns:1fr;
  }

  .admin-chart-grid .full-span{
    grid-column:auto;
  }
}

@media (max-width: 700px){
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .nav{
    width:100%;
  }

  .hero-copy h1{
    font-size:34px;
  }

  .voice-main-btn{
    width:180px;
    height:180px;
    font-size:20px;
  }

  .pulse-rings{
    width:260px;
    height:260px;
  }
}