.sound-id-page { max-width: 720px; margin: 0 auto; padding: 18px 16px 110px; color: #0f2f26; }
.sound-id-hero { position: relative; text-align: center; padding: 24px 18px 30px; border-radius: 0 0 30px 30px; background: linear-gradient(145deg,#073b2d,#126b4e); color: #fff; }
.sound-id-back { position: absolute; left: 16px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.13); text-decoration: none; }
.sound-id-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .13em; color: #fde68a; }
.sound-id-hero h1 { margin: 10px 0 8px; color: #fff !important; font: 800 2rem/1.1 'Outfit',sans-serif; }
.sound-id-hero p { max-width: 520px; margin: 0 auto; color: rgba(255,255,255,.84); font-size: .92rem; line-height: 1.5; }
.sound-id-card, .sound-id-results { background: #fff; border: 1px solid #dce9e3; border-radius: 24px; box-shadow: 0 12px 34px rgba(15,47,38,.08); }
.sound-id-card { margin-top: 16px; padding: 28px 20px; text-align: center; }
.sound-id-visual { height: 72px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sound-id-visual i { width: 4px; height: 10px; border-radius: 99px; background: #21a675; transition: height .12s ease; }
.sound-id-location { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 7px; max-width: 100%; margin: 0 auto 8px; padding: 7px 11px; border-radius: 999px; background: #eef4f1; color: #60766f; font-size: .72rem; font-weight: 750; line-height: 1.25; }
.sound-id-location.is-locating { background: #fff4d6; color: #8a6419; }
.sound-id-location.is-ready { background: #dff4e8; color: #08734f; }
.sound-id-location.is-error { border-radius: 14px; background: #fff0ec; color: #9b2c24; }
.sound-id-status { margin: 10px 0 2px; font-weight: 750; color: #385b50; }
.sound-id-time { font: 800 1.8rem/1 'Outfit',sans-serif; font-variant-numeric: tabular-nums; margin: 8px 0 20px; }
.sound-id-start { min-width: 210px; border: 0; border-radius: 999px; padding: 15px 22px; background: #08734f; color: #fff; font: 750 1rem 'Outfit',sans-serif; box-shadow: 0 8px 20px rgba(8,115,79,.24); }
.sound-id-start i { margin-right: 8px; }
.sound-id-start.is-listening { background: #b42318; }
.sound-id-start:disabled { opacity: .65; cursor: wait; }
.sound-id-privacy { margin: 16px 0 0; font-size: .78rem; color: #70827c; }
.sound-id-attribution { margin: 6px 0 0; font-size: .68rem; color: #82928d; }
.sound-id-attribution a { color: #51776a; }
.sound-id-results { margin-top: 14px; padding: 20px; }
.sound-id-results-head { display: flex; align-items: center; justify-content: space-between; }
.sound-id-results h2 { margin: 0; font: 800 1.15rem 'Outfit',sans-serif; }
.sound-id-results-head span { font-size: .76rem; font-weight: 700; color: #58726a; background: #edf5f1; border-radius: 99px; padding: 6px 10px; }
.sound-id-empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #71837d; gap: 7px; }
.sound-id-empty i { font-size: 1.7rem; color: #c38b25; }
.sound-id-empty strong { color: #315047; }
.sound-id-empty span { font-size: .82rem; line-height: 1.45; max-width: 330px; }
.sound-id-result-list { display: grid; gap: 10px; margin-top: 16px; }
.sound-id-result { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #dbe7e1; border-radius: 16px; color: inherit; text-decoration: none; background: #fbfdfc; }
.sound-id-result img { width: 58px; height: 58px; object-fit: cover; border-radius: 13px; background: #edf3f0; }
.sound-id-result-copy { min-width: 0; flex: 1; }
.sound-id-result-copy strong, .sound-id-result-copy em { display: block; }
.sound-id-result-copy strong { font: 750 .96rem 'Outfit',sans-serif; color: #123c30; }
.sound-id-result-copy em { font-size: .76rem; color: #6b7c77; margin-top: 2px; }
.sound-id-result-copy small { display: block; margin-top: 5px; color: #08734f; font-size: .68rem; font-weight: 700; }
.sound-id-result-copy small.is-possible { color: #8a6419; }
.sound-id-result-copy small.is-unusual { color: #a44825; }
.sound-id-confidence { max-width: 92px; text-align: center; font-size: .68rem; line-height: 1.15; font-weight: 800; color: #08734f; background: #e8f6ef; border-radius: 999px; padding: 8px 10px; }
.sound-id-confidence.is-very-strong { color: #075f43; background: #d9f3e6; }
.sound-id-confidence.is-strong { color: #08734f; background: #e8f6ef; }
.sound-id-confidence.is-possible { color: #805b12; background: #fff3cf; }
.sound-id-confidence.is-weak { color: #7b4b38; background: #f7e8e1; }
.sound-id-disclaimer { font-size: .74rem; line-height: 1.45; color: #6d7f79; text-align: center; margin: 15px 4px 0; }
.sound-id-error { padding: 18px; text-align: center; color: #9b2c24; background: #fff1ef; border-radius: 14px; font-size: .86rem; }

@media (max-width: 768px) {
    body:has(.sound-id-page) { background: #f6f5ee !important; }
    main:has(.sound-id-page) { padding: 0 !important; background: linear-gradient(180deg,#eef7f1 0,#faf7ee 330px,#f6f7f4 100%) !important; }
    .sound-id-page { padding: 0 0 95px; background: transparent; min-height: 100vh; }
    .sound-id-hero { border-radius: 0; border-bottom: 1px solid #dbe7df; padding: 18px 18px 17px; background: linear-gradient(145deg,#eef7f1,#fbf7ed); text-align: left; }
    .sound-id-back { left: auto; right: 16px; top: 17px; width: 46px; height: 46px; color: #176c4f; background: #fff; border: 1px solid #cfe1d6; }
    .sound-id-kicker { color: #1b7655; font-size: .65rem; }
    .sound-id-hero h1 { max-width: calc(100% - 58px); margin: 7px 0 5px; color: #0b4a36 !important; font-size: 1.5rem; }
    .sound-id-hero p { max-width: 335px; margin: 0; color: #62776d; font-size: .8rem; line-height: 1.4; }
    .sound-id-card, .sound-id-results { margin-left: 14px; margin-right: 14px; }
    .sound-id-card, .sound-id-results { border-radius: 18px; box-shadow: 0 8px 24px rgba(16,59,38,.07); }
    .sound-id-card { margin-top: 14px; padding: 12px 18px 11px; }
    .sound-id-visual { height: 34px; }
    .sound-id-location { margin-bottom: 2px; padding: 5px 9px; font-size: .68rem; }
    .sound-id-status { margin: 2px 0 0; font-size: .86rem; }
    .sound-id-time { margin: 2px 0 8px; font-size: 1.55rem; }
    .sound-id-start { width: min(100%, 280px); min-height: 48px; padding: 11px 22px; border-radius: 14px; font-size: .92rem; }
    .sound-id-privacy { margin-top: 6px; font-size: .72rem; line-height: 1.3; }
    .sound-id-attribution { margin-top: 2px; font-size: .64rem; }
    .sound-id-results { padding: 14px; }
    .sound-id-empty { min-height: 80px; gap: 4px; padding: 8px 0; }
    .sound-id-empty i { font-size: 1.35rem; }
    .sound-id-empty span { font-size: .76rem; line-height: 1.3; }
    .sound-id-result { gap: 9px; }
    .sound-id-confidence { max-width: 78px; font-size: .63rem; padding: 7px 8px; }
}