:root {
    --ova-page-bg:#f6f9fc;
    --ova-border:#e3e9f2;
    --ova-brand:#0f766e;
    --ova-brand-dark:#0b4f4a;
    --ova-accent:#dfa667;
    --ova-muted:#5d6678;
    --ova-ink:#101828;
}

* { box-sizing:border-box; }

body {
    margin:0;
    font-family:"Poppins","Segoe UI",Arial,sans-serif;
    background:linear-gradient(180deg,#fff 0%,var(--ova-page-bg) 58%,#eef7f6);
    color:var(--ova-ink);
}

.ova-topbar { border-bottom:1px solid var(--ova-border); background:#fff; }
.ova-topbar-inner { width:min(1180px,100%); margin:0 auto; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ova-brand { display:inline-flex; align-items:center; gap:10px; color:var(--ova-brand-dark); font-family:"Aldrich","Segoe UI",Arial,sans-serif; font-size:22px; text-decoration:none; }
.ova-brand img { width:38px; height:38px; object-fit:contain; border-radius:8px; }
.ova-plan-badge { display:inline-flex; align-items:center; gap:7px; min-height:36px; border:1px solid #d7b483; border-radius:6px; background:#fffaf3; color:#533513; font-family:"Poppins","Segoe UI",Arial,sans-serif; font-size:12px; font-weight:900; line-height:1; padding:7px 11px; white-space:nowrap; }
.ova-plan-badge span { color:#8a5a24; font-size:10px; text-transform:uppercase; }
.ova-plan-badge strong { font-size:12px; }
.ova-plan-muted { border-color:#d7dde5; background:#f8fafc; color:#475569; }
.kv-user-chip,.kv-contact-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; border:1px solid #d7dde5; border-radius:6px; background:#f8fafc; color:#334155; font-size:12px; font-weight:900; line-height:1; padding:9px 12px; text-decoration:none; white-space:nowrap; }
.kv-user-chip { color:var(--ova-brand-dark); }
.kv-contact-link { border-color:#b7d7d4; border-radius:4px; background:#fff; color:var(--ova-brand-dark); font-size:13px; padding:0 12px; }
.kv-contact-link:hover { border-color:var(--ova-accent); background:#fffaf3; color:#111; }
.ova-nav { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ova-nav a { color:var(--ova-brand-dark); border:1px solid #b7d7d4; border-radius:6px; background:#eef7f6; font-size:12px; font-weight:900; line-height:1; padding:9px 12px; text-decoration:none; }
.ova-nav a:hover { border-color:var(--ova-brand); color:var(--ova-brand-dark); }
.ova-nav a.ova-home-link,.home-link { position:relative; display:inline-flex; align-items:center; gap:7px; min-height:34px; border:1px solid #b7d7d4; border-radius:6px; color:var(--ova-brand-dark); background:linear-gradient(180deg,#fff 0%,#eef7f6 100%); box-shadow:0 8px 18px rgba(12,95,90,.12); font-size:11px; font-weight:900; letter-spacing:.5px; line-height:1; padding:8px 12px; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.ova-nav a.ova-home-link:before,.home-link:before { content:""; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--ova-brand); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.ova-nav a.ova-home-link:after,.home-link:after { content:""; position:absolute; left:18px; top:50%; width:6px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-50%) rotate(45deg); }
.ova-nav a.ova-home-link:hover,.home-link:hover { border-color:var(--ova-brand); box-shadow:0 10px 24px rgba(12,95,90,.18); transform:translateY(-1px); }

.ova-shell { width:min(1080px,100%); margin:0 auto; padding:24px 22px 42px; }
.ova-header p:not(.ova-eyebrow) { max-width:760px; color:var(--ova-muted); font-weight:600; }
.ova-header h1 { font-size:30px; text-align:left; }
.ova-panel { margin-top:18px; background:#fff; border:1px solid var(--ova-border); border-radius:8px; box-shadow:0 16px 38px rgba(16,24,40,.09); padding:22px; }
.ova-eyebrow { margin:0 0 8px; color:var(--ova-accent); font-size:12px; font-weight:900; text-transform:uppercase; }
h1 { margin:0 0 8px; font-family:"Aldrich","Segoe UI",Arial,sans-serif; font-size:42px; font-weight:400; text-align:center; }
h2 { margin:0 0 12px; font-size:20px; }
.ova-muted { color:var(--ova-muted); font-weight:700; }
.ova-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.ova-stat { border:1px solid var(--ova-border); border-radius:8px; padding:14px; background:#f8fafc; }
.ova-stat strong { display:block; color:var(--ova-brand-dark); font-size:22px; }
.ova-stage { position:relative; display:grid; justify-items:center; gap:18px; padding:30px 16px; }
.ova-status-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ova-status-badge { display:inline-flex; align-items:center; justify-content:center; min-height:32px; border:1px solid var(--ova-border); border-radius:999px; background:#f8fafc; color:#64748b; font-size:12px; font-weight:900; padding:7px 12px; text-transform:uppercase; }
.ova-status-badge.active { border-color:#b7d7d4; background:#eef7f6; color:var(--ova-brand-dark); box-shadow:0 10px 22px rgba(15,118,110,.12); }
.ova-setting-summary { margin:0; color:var(--ova-muted); font-size:13px; font-weight:800; text-align:center; }
.ova-settings-toggle { position:absolute; top:8px; right:8px; width:40px; height:40px; border:1px solid #b7d7d4; border-radius:50%; background:#fff; color:var(--ova-brand-dark); font-size:22px; font-weight:900; cursor:pointer; }
.ova-talk-button { width:154px; height:154px; border:0; border-radius:50%; background:var(--ova-brand); color:#fff; font-size:18px; font-weight:900; box-shadow:0 22px 42px rgba(15,118,110,.28); cursor:pointer; }
.ova-talk-button.listening { background:#b42318; box-shadow:0 22px 42px rgba(180,35,24,.24); }
.ova-transcript-wrap { width:100%; max-width:1080px; }
.ova-transcript-title { font-size:16px; line-height:1.25; }
.ova-transcript { width:100%; min-height:220px; max-height:420px; overflow-y:auto; border:1px solid #dbe7e5; border-radius:8px; background:#f8fafc; padding:16px; white-space:pre-wrap; line-height:1.7; color:#334155; font-weight:700; }
.ova-settings-panel { display:none; margin-top:16px; }
.ova-settings-panel.open { display:block; }
.ova-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.ova-field { margin-bottom:13px; }
label { display:block; margin-bottom:6px; color:#334155; font-size:13px; font-weight:800; }
.ova-field-help { margin:6px 0 0; color:var(--ova-muted); font-size:11px; font-weight:700; line-height:1.45; }
input[type="text"], input[type="password"], input[type="email"], textarea, select { width:100%; min-height:38px; border:1px solid #b8c5d3; border-radius:7px; padding:9px 11px; background:#fff; color:#101828; font:inherit; font-size:13px; }
textarea { min-height:116px; resize:vertical; }
.ova-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ova-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; border:0; border-radius:4px; background:var(--ova-brand); color:#fff; font-size:13px; font-weight:900; padding:0 14px; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(15,118,110,.16); }
.ova-button:hover { background:var(--ova-brand-dark); color:#fff; text-decoration:none; }
.ova-secondary { background:var(--ova-accent); }
.ova-message { display:block; margin:10px 0; color:#334155; font-weight:800; }
.ova-message.error { color:#b42318; }
.ova-message.success { color:#047857; }
.ova-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ova-plan { border:1px solid var(--ova-border); border-radius:8px; padding:18px; background:#f8fafc; }
.ova-plan strong { display:block; font-size:26px; color:var(--ova-brand-dark); }
.ova-table-wrap { overflow-x:auto; border:1px solid var(--ova-border); border-radius:8px; background:#fff; box-shadow:0 14px 30px rgba(16,24,40,.08); }
.ova-table { width:100%; min-width:960px; border-collapse:collapse; }
.ova-table th,.ova-table td { padding:13px 14px; border-bottom:1px solid var(--ova-border); color:#334155; font-size:13px; font-weight:700; text-align:left; vertical-align:top; }
.ova-table th { background:#f8fafc; color:#334155; font-size:12px; font-weight:900; text-transform:uppercase; white-space:nowrap; }
.ova-table tr:last-child td { border-bottom:0; }
.ova-music-table { min-width:880px; table-layout:fixed; }
.ova-music-table th:nth-child(1) { width:24%; }
.ova-music-table th:nth-child(2) { width:17%; }
.ova-music-table th:nth-child(3) { width:10%; }
.ova-music-table th:nth-child(4) { width:17%; }
.ova-music-table th:nth-child(5) { width:22%; }
.ova-music-table th:nth-child(6) { width:10%; }
.ova-music-table td { vertical-align:middle; overflow-wrap:anywhere; }
.ova-music-title { display:block; color:var(--ova-brand-dark); font-weight:900; }
.ova-song-audio { display:block; width:100%; min-width:180px; height:36px; }
.ova-history-table { width:100%; min-width:900px; border-collapse:collapse; table-layout:auto; }
.ova-history-table th,.ova-history-table td { border-bottom:1px solid var(--ova-border); padding:13px 14px; text-align:left; vertical-align:top; color:#334155; overflow-wrap:anywhere; font-size:13px; font-weight:600; }
.ova-history-table th { color:#334155; font-size:12px; font-weight:900; text-transform:uppercase; background:#f8fafc; }
.ova-status-paid { color:#047857; font-weight:900; }
.ova-status-pending { color:#92400e; font-weight:900; }
.ova-receipt-link { color:var(--ova-brand); font-weight:900; text-decoration:none; }
.ova-download-button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; border:0; border-radius:4px; background:var(--ova-brand); color:#fff; font-size:12px; font-weight:900; padding:8px 12px; text-decoration:none; white-space:nowrap; }
.ova-download-button.disabled { background:#cbd5e1; color:#475569; pointer-events:none; }
.ova-button-small { min-height:34px; box-shadow:none; font-size:12px; padding:8px 12px; white-space:nowrap; }
.ova-button.disabled { background:#cbd5e1; color:#475569; pointer-events:none; box-shadow:none; }
.ova-empty { padding:26px; border:1px solid var(--ova-border); border-radius:8px; background:#fff; color:#64748b; font-weight:700; }
.ova-receipt-shell { width:min(820px,100%); margin:0 auto; padding:28px 22px 42px; }
.ova-receipt { overflow:hidden; border:1px solid var(--ova-border); border-radius:8px; background:#fff; box-shadow:0 16px 38px rgba(16,24,40,.09); }
.ova-receipt h1 { font-size:30px; text-align:left; }
.ova-receipt-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px; border-top:4px solid var(--ova-accent); border-bottom:1px solid var(--ova-border); }
.ova-receipt-brand { display:inline-flex; align-items:center; gap:10px; color:var(--ova-brand-dark); font-family:"Aldrich","Segoe UI",Arial,sans-serif; font-size:22px; }
.ova-receipt-brand img { width:38px; height:38px; object-fit:contain; border-radius:8px; }
.ova-receipt-body { padding:22px; }
.ova-receipt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ova-receipt-item { min-width:0; border:1px solid var(--ova-border); border-radius:8px; padding:14px; background:#f8fafc; }
.ova-receipt-item span { display:block; color:var(--ova-muted); font-size:12px; font-weight:900; text-transform:uppercase; }
.ova-receipt-item strong { display:block; margin-top:4px; overflow-wrap:anywhere; }
.ova-receipt-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.auth-shell { min-height:100vh; display:grid; align-items:center; padding:28px; }
.auth-panel { width:min(1060px,100%); margin:0 auto; display:grid; grid-template-columns:390px minmax(0,1fr); gap:28px; }
.auth-card,.brand-panel { background:#fff; border:1px solid var(--ova-border); border-radius:8px; box-shadow:0 20px 48px rgba(16,24,40,.11); overflow:hidden; }
.auth-card { align-self:center; padding:26px; position:relative; }
.auth-card:before { position:absolute; inset:0 0 auto; height:4px; background:var(--ova-accent); content:""; }
.auth-card-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.brand-lockup { display:inline-flex; align-items:center; gap:10px; color:var(--ova-brand-dark); font-size:20px; font-family:"Aldrich","Segoe UI",Arial,sans-serif; }
.brand-lockup img { width:36px; height:36px; object-fit:contain; border-radius:8px; box-shadow:0 10px 26px rgba(15,118,110,.16); }
.auth-card h1 { margin-bottom:18px; font-size:26px; text-align:left; }
.auth-card .ova-button { width:100%; min-height:42px; margin-top:4px; }
.auth-help { margin:16px 0 0; color:var(--ova-muted); font-size:12px; font-weight:700; }
.auth-help a { color:var(--ova-brand); font-weight:900; }
.auth-section { display:none; }
body.auth-login .auth-login, body.auth-forgot .auth-forgot, body.auth-register .auth-register { display:block; }
.link-row { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:16px; }
.mode-link { border:0; padding:0; background:transparent; color:var(--ova-brand); font-weight:800; cursor:pointer; font:inherit; }
.action-link,.privacy-link { display:inline-block; color:var(--ova-brand); font-weight:800; overflow-wrap:anywhere; }
.privacy-link { margin-top:18px; color:var(--ova-muted); font-size:12px; }
.consent-box { display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px; border:1px solid var(--ova-border); border-left:4px solid var(--ova-brand); border-radius:8px; background:#f8fafc; color:#334155; font-size:12px; font-weight:600; line-height:1.45; }
.consent-box label { display:inline; margin:0; font-size:inherit; font-weight:inherit; }
.brand-art { min-height:260px; display:grid; align-content:end; padding:34px; background:linear-gradient(135deg,#0f766e,#1f2937 58%,#0e7490); color:#fff; }
.brand-art h1 { margin:0 0 12px; color:#fff; font-size:34px; text-align:left; }
.brand-art p { max-width:620px; margin:0; color:#f8fafc; font-weight:600; }
.brand-copy { padding:22px 24px 24px; }
.feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.feature-list li { border:1px solid var(--ova-border); border-left:4px solid var(--ova-accent); border-radius:8px; padding:10px 12px; background:#f8fafc; color:#334155; font-size:13px; font-weight:800; }
@media (max-width:900px) { .auth-panel { grid-template-columns:1fr; } }
@media print { .ova-topbar,.ova-receipt-actions { display:none; } body { background:#fff; } }
@media (max-width:760px) { .ova-topbar-inner { align-items:flex-start; flex-direction:column; } .ova-form-grid,.ova-status-grid,.ova-plans,.ova-receipt-grid { grid-template-columns:1fr; } .ova-receipt-head { align-items:flex-start; flex-direction:column; } }
@media (max-width:700px) {
    .ova-music-table-wrap { overflow-x:visible; border:0; background:transparent; box-shadow:none; }
    .ova-music-table { display:block; min-width:0; border-collapse:separate; }
    .ova-music-table thead { display:none; }
    .ova-music-table tbody { display:grid; gap:12px; }
    .ova-music-table tr { display:grid; gap:9px; border:1px solid var(--ova-border); border-radius:8px; background:#fff; box-shadow:0 12px 26px rgba(16,24,40,.08); padding:14px; }
    .ova-music-table td { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:10px; border:0; padding:0; font-size:13px; }
    .ova-music-table td:before { content:attr(data-label); color:#64748b; font-size:11px; font-weight:900; line-height:1.5; text-transform:uppercase; }
    .ova-song-audio { min-width:0; }
    .ova-music-table .ova-button { width:100%; }
}
@media (max-width:560px) { .auth-shell { padding:16px; } .feature-list { grid-template-columns:1fr; } .auth-card-header { align-items:flex-start; flex-direction:column; } .ova-talk-button { width:132px; height:132px; } }