/* =============================================================
   Pitch Detector Pro — pitch-detector-pro.css  v1.5.0
   Competitor-style arc dial · micaudiotest.com identity
   ============================================================= */

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

/* ── Variables ─────────────────────────────────────────────── */
.pdp-root {
    --pdp-green:      #1a7a4a;
    --pdp-green-mid:  #22a060;
    --pdp-green-pale: #e8f5ee;
    --pdp-green-glow: rgba(26,122,74,0.15);
    --pdp-dark:       #111814;
    --pdp-text:       #1c2620;
    --pdp-muted:      #6b7d74;
    --pdp-muted2:     #9aada3;
    --pdp-border:     #e2e8e2;
    --pdp-bg:         #f5f7f5;
    --pdp-white:      #ffffff;
    --pdp-red:        #e05050;
    --pdp-amber:      #e08820;
    --pdp-radius:     16px;
    --pdp-radius-sm:  10px;
    --pdp-mono:       'JetBrains Mono', monospace;
    --pdp-sans:       'Figtree', sans-serif;

    font-family:   var(--pdp-sans);
    background:    var(--pdp-white);
    border:        1px solid var(--pdp-border);
    border-radius: calc(var(--pdp-radius) + 4px);
    box-shadow:    0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    overflow:      hidden;
    max-width:     700px;
    margin:        2rem auto;
    color:         var(--pdp-text);
}

/* ── Header ────────────────────────────────────────────────── */
.pdp-header {
    background:      var(--pdp-dark);
    padding:         16px 28px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
}
.pdp-logo {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       #fff;
    font-size:   16px;
    font-weight: 300;
    letter-spacing: -.02em;
}
.pdp-logo svg    { width:26px; height:26px; color:var(--pdp-green-mid); flex-shrink:0; }
.pdp-logo strong { font-weight:700; color:var(--pdp-green-mid); }
.pdp-byline      { font-size:12px; color:rgba(255,255,255,.4); }
.pdp-byline a    { color:rgba(255,255,255,.6); text-decoration:none; }
.pdp-byline a:hover { color:#fff; }

/* ── Dial container ────────────────────────────────────────── */
.pdp-dial-wrap {
    position:      relative;
    background:    var(--pdp-bg);
    overflow:      hidden;
    padding-top:   12px;
    border-bottom: 1px solid var(--pdp-border);
}

/* Pointer triangle at top center */
.pdp-pointer {
    position:       absolute;
    top:            0;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        10;
    pointer-events: none;
    line-height:    0;
}
.pdp-pointer svg { width:30px; height:18px; display:block; }

/* Canvas fills container */
.pdp-dial-canvas {
    display: block;
    width:   100%;
    height:  auto;
}

/* ── Cents bar ─────────────────────────────────────────────── */
.pdp-cents-wrap {
    padding:       14px 28px 18px;
    border-bottom: 1px solid var(--pdp-border);
}
.pdp-cents-labels {
    display:         flex;
    justify-content: space-between;
    font-family:     var(--pdp-mono);
    font-size:       10px;
    color:           var(--pdp-muted2);
    margin-bottom:   6px;
}
.pdp-cents-track {
    height:        8px;
    background:    var(--pdp-border);
    border-radius: 4px;
    position:      relative;
    overflow:      visible;
}
.pdp-cents-center {
    position:   absolute;
    left:50%; top:-4px;
    width:2px; height:16px;
    background: var(--pdp-border);
    transform:  translateX(-50%);
}
.pdp-cents-fill {
    position:      absolute;
    top:0; height:8px;
    border-radius: 4px;
    background:    var(--pdp-green);
    transition:    all .08s ease;
}
.pdp-cents-needle {
    position:      absolute;
    top:-5px;
    width:4px; height:18px;
    border-radius: 2px;
    background:    var(--pdp-green);
    transform:     translateX(-50%);
    transition:    left .08s ease, background .15s;
    box-shadow:    0 0 8px var(--pdp-green-glow);
}

/* ── Controls ──────────────────────────────────────────────── */
.pdp-controls {
    padding:        20px 28px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    border-bottom:  1px solid var(--pdp-border);
}
.pdp-btn-start {
    width:100%; background:var(--pdp-green); color:#fff;
    border:none; border-radius:var(--pdp-radius-sm);
    padding:18px 24px; font-family:var(--pdp-sans);
    font-size:17px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:background .18s, transform .15s, box-shadow .18s;
    box-shadow:0 4px 20px rgba(26,122,74,.35);
}
.pdp-btn-start:hover   { background:var(--pdp-green-mid); transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,122,74,.45); }
.pdp-btn-start:active  { transform:translateY(0); }
.pdp-btn-start.pdp-active { background:var(--pdp-red); box-shadow:0 4px 20px rgba(224,80,80,.35); }
.pdp-btn-start.pdp-active:hover { background:#c84040; }
.pdp-btn-icon { width:22px; height:22px; flex-shrink:0; }

.pdp-status-badge {
    display:flex; align-items:center; justify-content:center;
    gap:8px; background:var(--pdp-bg); border:1px solid var(--pdp-border);
    border-radius:8px; padding:9px 16px; font-family:var(--pdp-mono);
    font-size:12px; font-weight:500; color:var(--pdp-muted);
    letter-spacing:1px; text-transform:uppercase;
}
.pdp-status-dot { width:9px; height:9px; border-radius:50%; background:var(--pdp-muted2); flex-shrink:0; transition:background .3s; }
.pdp-status-dot.pdp-listening { background:var(--pdp-green); animation:pdp-pulse 1.2s ease-in-out infinite; }
.pdp-status-dot.pdp-error     { background:var(--pdp-red); }
@keyframes pdp-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(26,122,74,.4); }
    50%      { box-shadow:0 0 0 5px rgba(26,122,74,0); }
}

/* ── Notes grid ────────────────────────────────────────────── */
.pdp-grid-section { padding:20px 28px 24px; }
.pdp-grid-title   { font-size:11px; font-weight:700; color:var(--pdp-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.pdp-notes-grid   { display:grid; grid-template-columns:repeat(9,1fr); gap:8px; }
.pdp-note-chip {
    background:var(--pdp-bg); border:1.5px solid var(--pdp-border);
    border-radius:10px; padding:12px 4px 10px; text-align:center;
    cursor:default; transition:all .15s;
    display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;
}
.pdp-note-chip.pdp-detected { background:var(--pdp-green-pale); border-color:var(--pdp-green); box-shadow:0 0 0 3px var(--pdp-green-glow); }
.pdp-chip-name { font-family:var(--pdp-sans); font-size:16px; font-weight:700; color:var(--pdp-dark); line-height:1; }
.pdp-note-chip.pdp-detected .pdp-chip-name { color:var(--pdp-green); }
.pdp-chip-freq { font-family:var(--pdp-mono); font-size:10px; color:var(--pdp-muted2); line-height:1; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:600px) {
    .pdp-root             { margin:1rem; border-radius:var(--pdp-radius); }
    .pdp-header           { padding:14px 16px; }
    .pdp-cents-wrap       { padding:12px 16px 14px; }
    .pdp-controls         { padding:16px; }
    .pdp-btn-start        { font-size:15px; padding:16px 20px; }
    .pdp-grid-section     { padding:16px 16px 20px; }
    .pdp-notes-grid       { grid-template-columns:repeat(6,1fr); gap:6px; }
    .pdp-chip-name        { font-size:14px; }
    .pdp-chip-freq        { font-size:9px; }
}
@media (max-width:400px) {
    .pdp-btn-start  { font-size:14px; padding:15px 16px; }
    .pdp-notes-grid { grid-template-columns:repeat(4,1fr); gap:5px; }
    .pdp-note-chip  { padding:10px 2px 8px; }
    .pdp-chip-name  { font-size:13px; }
    .pdp-chip-freq  { font-size:8px; }
}