@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  --page: #050d07;
  --jade: #3ecf8e;
  --jade-glow: rgba(62, 207, 142, 0.14);
  --jade-border: rgba(62, 207, 142, 0.24);
  --gold: #c9963a;
  --gold-glow: rgba(201, 150, 58, 0.14);
  --gold-border: rgba(201, 150, 58, 0.24);
  --coral: #e8715a;
  --coral-glow: rgba(232, 113, 90, 0.13);
  --coral-border: rgba(232, 113, 90, 0.24);
  --teal: #4dc9c0;
  --teal-glow: rgba(77, 201, 192, 0.13);
  --teal-border: rgba(77, 201, 192, 0.24);
  --ink: #e4ede6;
  --ink-soft: #899e90;
  --ink-muted: #506058;
  --glass-bg: rgba(8, 18, 11, 0.62);
  --glass-bg-inset: rgba(3, 9, 5, 0.48);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-border-strong: rgba(255, 255, 255, 0.11);
  --glass-blur: blur(30px) saturate(160%);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-card: 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-in: inset 0 1px 0 rgba(255,255,255,0.055), inset 0 -1px 0 rgba(0,0,0,0.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{min-height:100%;background:var(--page);}

body {
  min-height:100vh;
  color:var(--ink);
  font-family:'Outfit','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(ellipse 58% 52% at 14% 13%, rgba(18,80,45,.35) 0%,transparent 68%),
    radial-gradient(ellipse 42% 48% at 87% 82%, rgba(14,58,34,.28) 0%,transparent 64%),
    radial-gradient(ellipse 68% 38% at 50% 52%, rgba(62,207,142,.038) 0%,transparent 60%),
    linear-gradient(168deg,#081509 0%,#050d07 45%,#030a05 100%);
  overflow-x:hidden;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0px,transparent 39px,rgba(255,255,255,.016) 40px),
    repeating-linear-gradient(90deg,transparent 0px,transparent 39px,rgba(255,255,255,.01) 40px);
}

button,input,select{font:inherit;}
h1,h2,p{margin:0;}

.app-shell {
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
  width:min(1100px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 52px;
}

.tuner-card,.quick-panel,.advanced-panel {
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--shadow-card),var(--shadow-in);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}

.tuner-card {
  position:relative;
  overflow:hidden;
  padding:28px;
}

.tuner-card::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(62,207,142,.065),transparent 62%);
  pointer-events:none;
}

.tuner-header {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:24px;
}

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

.brand-mark {
  display:grid;
  flex-shrink:0;
  place-items:center;
  width:50px;height:50px;
  border-radius:var(--r-sm);
  background:linear-gradient(145deg,rgba(62,207,142,.9),rgba(77,201,192,.72));
  border:1px solid rgba(62,207,142,.4);
  box-shadow:0 0 28px rgba(62,207,142,.24),inset 0 1px 0 rgba(255,255,255,.3);
  color:#031a09;
  font-size:.78rem;font-weight:900;letter-spacing:.04em;
}

.kicker {
  color:var(--ink-soft);
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:4px;
}

h1 {
  color:var(--ink);
  font-size:2.4rem;font-weight:900;line-height:1;letter-spacing:-.02em;
}

h2 {
  color:var(--ink-soft);
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:14px;
}

.status-pill,.mode-pill {
  display:inline-flex;
  align-items:center;justify-content:center;
  min-height:32px;
  border-radius:999px;
  padding:5px 14px;
  font-size:.76rem;font-weight:700;
  white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--gold-border);
  color:var(--gold);background:var(--gold-glow);
}

.status-pill.is-good{color:var(--jade);background:var(--jade-glow);border-color:var(--jade-border);}
.status-pill.is-bad{color:var(--coral);background:var(--coral-glow);border-color:var(--coral-border);}
.mode-pill{color:var(--teal);background:var(--teal-glow);border-color:var(--teal-border);}

.tuner-face {
  position:relative;
  padding:24px 20px 12px;
  border-radius:var(--r-md);
  background:var(--glass-bg-inset);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.24);
}

.string-rail{display:grid;gap:9px;margin-bottom:20px;}

.string-rail span {
  display:block;height:1.5px;border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,150,58,.12) 8%,
    rgba(201,150,58,.52) 28%,
    rgba(228,232,222,.68) 50%,
    rgba(201,150,58,.52) 72%,
    rgba(201,150,58,.12) 92%,
    transparent 100%
  );
}

.note-stage{display:grid;justify-items:center;gap:10px;text-align:center;}

.note-value {
  min-height:138px;
  color:var(--ink);
  font-size:9.8rem;font-weight:900;line-height:.88;
  font-family:'DM Mono','Courier New',monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;
  text-shadow:0 0 80px rgba(62,207,142,.1),0 20px 48px rgba(0,0,0,.4);
  transition:color 200ms ease,text-shadow 200ms ease;
}

.detected-string{color:var(--ink-soft);font-size:1.08rem;font-weight:600;}

.frequency-line {
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  color:var(--ink-soft);font-size:.86rem;font-weight:600;
  font-family:'DM Mono',monospace;
}

.frequency-line span {
  min-width:96px;border-radius:999px;padding:6px 12px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
}

.meter-zone{margin-top:16px;}

.needle-wrap {
  position:relative;
  width:min(680px,100%);height:216px;margin:0 auto;
}

.needle-scale {
  position:absolute;
  left:50%;bottom:38px;
  width:min(640px,calc(100% - 10px));height:180px;
  transform:translateX(-50%);
  border-radius:700px 700px 0 0;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 44%,transparent 66%),
    linear-gradient(90deg,
      rgba(232,113,90,.18) 0%,rgba(232,113,90,.06) 28%,
      rgba(62,207,142,.22) 50%,
      rgba(201,150,58,.06) 72%,rgba(201,150,58,.18) 100%
    ),
    repeating-conic-gradient(from 270deg at 50% 100%,rgba(228,235,228,.42) 0deg .7deg,transparent .7deg 6.5deg);
  border:1px solid rgba(255,255,255,.07);
  clip-path:inset(0 0 0 0 round 700px 700px 0 0);
}

.needle-safe {
  position:absolute;left:50%;bottom:38px;
  width:80px;height:180px;transform:translateX(-50%);
  border-radius:110px 110px 0 0;
  background:linear-gradient(180deg,rgba(62,207,142,.36),rgba(62,207,142,.03) 22%);
}

.needle {
  --angle:0deg;
  position:absolute;left:50%;bottom:34px;
  width:3px;height:158px;border-radius:999px;
  background:linear-gradient(180deg,#edfff5 0%,#4dc9c0 65%,rgba(77,201,192,.28) 100%);
  box-shadow:0 0 0 1px rgba(4,10,6,.8),0 -4px 22px rgba(77,201,192,.42),0 0 38px rgba(62,207,142,.14);
  transform:translateX(-50%) rotate(var(--angle));
  transform-origin:50% 100%;
  transition:transform 160ms cubic-bezier(.34,1.3,.64,1);
}

.needle-center {
  position:absolute;left:50%;bottom:18px;
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#d5e5d9,#587060 48%,#0c1a10);
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 14px rgba(62,207,142,.1);
}

.needle-mark {
  position:absolute;bottom:0;
  font-size:.69rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.needle-mark.left{left:4px;color:var(--coral);}
.needle-mark.center{left:50%;color:var(--jade);transform:translateX(-50%);}
.needle-mark.right{right:4px;color:var(--gold);}

.readout-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-top:16px;
}

.readout-grid div,.action-strip,.active-target,.advanced-section,.custom-table-wrap,#historyCanvas {
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
}

.readout-grid div{padding:14px 16px;box-shadow:var(--shadow-in);}

.readout-grid span,.active-target span,.field>span {
  display:block;margin-bottom:6px;
  color:var(--ink-muted);
  font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}

.readout-grid strong,.active-target strong {
  display:block;overflow-wrap:anywhere;
  color:var(--ink);font-size:.98rem;font-weight:700;
  font-family:'DM Mono',monospace;
  transition:color 200ms ease;
}

.action-strip {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;gap:12px;
  margin-top:14px;padding:14px 16px;
  transition:background 250ms ease,border-color 250ms ease;
}

.action-light {
  width:11px;height:11px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(201,150,58,.12),0 0 20px rgba(201,150,58,.22);
  flex-shrink:0;
  transition:background 250ms ease,box-shadow 250ms ease;
}

.action-strip strong{color:var(--ink);font-size:.9rem;font-weight:600;line-height:1.45;}

.primary-controls {
  display:grid;grid-template-columns:auto 1fr;
  gap:14px;align-items:center;margin-top:16px;
}

.btn {
  min-height:42px;
  border:1px solid var(--glass-border-strong);
  border-radius:var(--r-sm);
  padding:9px 18px;
  color:var(--ink);
  background:rgba(255,255,255,.07);
  cursor:pointer;
  font-weight:700;font-size:.86rem;letter-spacing:.02em;
  transition:background 130ms ease,border-color 130ms ease,transform 120ms ease,box-shadow 130ms ease;
}

.btn:hover {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.btn:active{transform:translateY(0);}

.btn-primary {
  color:#021309;
  background:linear-gradient(135deg,rgba(77,201,192,.92),rgba(62,207,142,.88));
  border-color:rgba(62,207,142,.38);
  box-shadow:0 0 28px rgba(62,207,142,.17),inset 0 1px 0 rgba(255,255,255,.32);
}

.btn-primary:hover {
  background:linear-gradient(135deg,#68d8cf,#56e09b);
  border-color:rgba(62,207,142,.58);
  box-shadow:0 0 36px rgba(62,207,142,.3),0 8px 22px rgba(0,0,0,.22);
}

.microcopy,.muted{color:var(--ink-soft);font-size:.87rem;line-height:1.5;}

.quick-panel {
  display:grid;
  grid-template-columns:1.2fr auto 1.2fr 1fr;
  gap:14px;align-items:end;padding:18px;
}

.field{display:grid;gap:7px;}

select,input[type="text"],input[type="number"] {
  width:100%;min-height:40px;
  border:1px solid var(--glass-border-strong);
  border-radius:var(--r-sm);
  padding:8px 12px;
  color:var(--ink);
  background:rgba(255,255,255,.065);
  transition:border-color 130ms ease,background 130ms ease;
}

select{color-scheme:dark;}

select:hover,input[type="text"]:hover,input[type="number"]:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
}

select:focus,input:focus,button:focus-visible {
  outline:2px solid rgba(77,201,192,.4);
  outline-offset:2px;
}

input[type="range"]{width:100%;accent-color:var(--jade);height:20px;}

.toggle-row {
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;color:var(--ink);font-weight:600;cursor:pointer;
}

.toggle-row input{width:17px;height:17px;accent-color:var(--jade);}

.active-target{padding:11px 14px;}

.advanced-panel{padding:0;}

.advanced-panel summary {
  min-height:52px;padding:16px 20px;
  color:var(--ink);cursor:pointer;
  font-weight:700;font-size:.88rem;letter-spacing:.02em;
  border-radius:var(--r-lg);
  transition:background 140ms ease;
}

.advanced-panel summary:hover{background:rgba(255,255,255,.04);}

.advanced-panel[open] summary {
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-bottom:1px solid var(--glass-border-strong);
}

.advanced-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;padding:16px;
}

.advanced-section{padding:16px;}
.advanced-section.wide{grid-column:span 2;}

.string-list {
  display:grid;gap:5px;
  max-height:260px;list-style:none;overflow:auto;padding:0;
}

.string-list li {
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  color:var(--ink-soft);font-size:.82rem;
  font-family:'DM Mono',monospace;
}

.string-list li.active {
  color:var(--jade);background:var(--jade-glow);
  border-color:var(--jade-border);font-weight:600;
}

.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}

#historyCanvas{display:block;width:100%;}

.custom-table-wrap{max-height:240px;overflow:auto;}

table{width:100%;border-collapse:collapse;font-size:.85rem;}

th,td{padding:9px 10px;text-align:left;vertical-align:middle;}

th {
  position:sticky;top:0;z-index:1;
  color:var(--ink-soft);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  background:rgba(6,14,8,.96);
  border-bottom:1px solid var(--glass-border-strong);
}

td{border-bottom:1px solid var(--glass-border);}
td:last-child{border-bottom-color:transparent;}
td input{min-width:72px;}

.is-good{color:var(--jade);}
.is-warn{color:var(--gold);}
.is-bad{color:var(--coral);}

.tuner-card[data-tune-state="in"] .note-value,
.tuner-card[data-tune-state="in"] #tuneStatus{
  color:var(--jade);
  text-shadow:0 0 48px rgba(62,207,142,.28),0 20px 48px rgba(0,0,0,.4);
}
.tuner-card[data-tune-state="near"] .note-value,
.tuner-card[data-tune-state="near"] #tuneStatus,
.tuner-card[data-tune-state="sharp"] .note-value,
.tuner-card[data-tune-state="sharp"] #tuneStatus{color:var(--gold);}
.tuner-card[data-tune-state="flat"] .note-value,
.tuner-card[data-tune-state="flat"] #tuneStatus{color:var(--coral);}

.tuner-card[data-tune-state="in"] .action-strip{background:var(--jade-glow);border-color:var(--jade-border);}
.tuner-card[data-tune-state="near"] .action-strip,
.tuner-card[data-tune-state="sharp"] .action-strip{background:var(--gold-glow);border-color:var(--gold-border);}
.tuner-card[data-tune-state="flat"] .action-strip{background:var(--coral-glow);border-color:var(--coral-border);}

.tuner-card[data-tune-state="in"] .action-light{
  background:var(--jade);
  box-shadow:0 0 0 5px rgba(62,207,142,.14),0 0 24px rgba(62,207,142,.32);
}
.tuner-card[data-tune-state="flat"] .action-light{
  background:var(--coral);
  box-shadow:0 0 0 5px rgba(232,113,90,.13),0 0 24px rgba(232,113,90,.28);
}
.tuner-card[data-tune-state="near"] .action-light,
.tuner-card[data-tune-state="sharp"] .action-light{
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(201,150,58,.13),0 0 20px rgba(201,150,58,.26);
}

@media(max-width:860px){
  .app-shell{width:min(100% - 20px,740px);padding-top:14px;}
  .tuner-card{padding:18px;}
  h1{font-size:2rem;}
  .note-value{min-height:110px;font-size:7rem;}
  .quick-panel,.advanced-grid{grid-template-columns:1fr;}
  .advanced-section.wide{grid-column:auto;}
  .primary-controls,.readout-grid{grid-template-columns:1fr;}
  .needle-wrap{height:175px;}
  .needle,.needle-safe,.needle-scale{height:140px;}
}

@media(max-width:520px){
  .tuner-header{flex-direction:column;}
  .status-pill{align-self:flex-start;}
  .brand-mark{width:44px;height:44px;}
  h1{font-size:1.75rem;}
  .note-value{min-height:88px;font-size:5.2rem;}
  .detected-string{font-size:.95rem;}
  .needle-mark{font-size:.64rem;}
  .tuner-card{padding:14px;}
}