/* Ratin Special — Apple-style look for the inner pages
   (login.html, dashboard.html, refund.html, enhancer.html).
   Loaded AFTER each page's own CSS and theme.css. Design only: no JS / API / IDs are touched.
   Same palette as css/apple.css (homepage). To recolour: change --accent / --accent-rgb below.
   - login.html + enhancer.html: always dark (like the homepage hero)
   - dashboard.html + refund.html: light, and they follow the device's dark mode automatically */

:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ap-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- shared base ---------- */
body.ap { font-family: var(--ap-font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
body.ap::before { display: none !important; }
body.ap .aurora, body.ap .cursor-glow, body.ap .cursor-ring { display: none !important; }
body.ap h1, body.ap h2, body.ap h3 { font-family: var(--ap-font); }

/* =====================================================================
   LOGIN  (always dark)
   ===================================================================== */
html:has(body.ap-login) { background: #000; }
body.ap-login {
  --bg: #000; --surface: #1d1d1f; --surface-2: #2a2a2d; --field: #1d1d1f;
  --line: rgba(255,255,255,.12); --line-strong: #424245;
  --text: #f5f5f7; --muted: #a1a1a6;
  --accent: #ffca0a; --accent-rgb: 255,202,10; --accent-ink: #111100;
  --danger: #ff453a; --danger-bg: rgba(255,69,58,.12);
  --ok: #30d158; --ok-bg: rgba(48,209,88,.12);
  --font-display: var(--ap-font); --font-body: var(--ap-font);
  background: #000; color: var(--text); font-size: 17px;
}
.ap-login :focus-visible { outline: 2px solid #ffd60a; outline-offset: 3px; }

/* left image becomes a big rounded card */
.ap-login .auth-shell { padding: 16px; gap: 16px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ap-login .auth-stage { top: 16px; height: calc(100vh - 32px); border-radius: 28px; background: #000; box-shadow: 0 40px 100px -40px rgba(255,202,10,.35); }
.ap-login .auth-stage img { object-position: 24% 50%; }
.ap-login .auth-stage::after { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%); }

.ap-login .auth-main { padding: 20px clamp(24px, 5vw, 72px) 28px; }
.ap-login .auth-brand { font-family: var(--ap-font); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.ap-login .auth-brand img { width: 36px; height: 36px; border: 0; border-radius: 9px; }
.ap-login .auth-brand small { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.ap-login .auth-back { color: #ffd60a; font-size: 15px; font-weight: 400; border: 0; padding: 8px 0; }
.ap-login .auth-back::before { content: "\2039\00a0"; font-size: 1.2em; }
.ap-login .auth-back:hover { color: #ffd60a; text-decoration: underline; }

.ap-login .auth-box { max-width: 400px; }

/* segmented switch (iOS style) */
.ap-login .seg { padding: 3px; margin-bottom: 36px; background: rgba(118,118,128,.24); border: 0; border-radius: 10px; }
.ap-login .seg-thumb { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: #ffca0a; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.25), 0 3px 1px rgba(0,0,0,.08); }
.ap-login .seg button { padding: 8px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: #ebebf5; }
.ap-login .seg button[aria-selected="true"] { color: #111100; font-weight: 600; }
.ap-login .seg button:not([aria-selected="true"]):hover { color: #fff; }

.ap-login .auth-head h1 { font-family: var(--ap-font); font-weight: 700; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.07; letter-spacing: -.035em; margin-bottom: 10px; }
.ap-login .auth-head p { font-size: 17px; line-height: 1.4; color: var(--muted); margin-bottom: 30px; max-width: 32ch; }

.ap-login .alert { border-radius: 12px; font-size: 14px; }
.ap-login .alert-error { border-color: rgba(255,69,58,.35); }
.ap-login .alert-success { border-color: rgba(48,209,88,.35); }

.ap-login .field { margin-bottom: 16px; }
.ap-login .field > label, .ap-login .label-row label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 6px; }
.ap-login .input { height: 50px; border: 1px solid #424245; border-radius: 12px; background: #1d1d1f; font-size: 17px; letter-spacing: -.01em; }
.ap-login .input::placeholder { color: #6e6e73; }
.ap-login .input:hover { border-color: #636366; }
.ap-login .input:focus { border-color: var(--accent) !important; background: #1d1d1f; box-shadow: 0 0 0 4px rgba(255,202,10,.28); }
.ap-login .eye:hover { background: rgba(255,255,255,.08); }
.ap-login .link-btn { color: #ffd60a; text-decoration: none; font-size: 13px; font-weight: 400; }
.ap-login .link-btn:hover { color: #ffd60a; text-decoration: underline; }

.ap-login .meter i { background: rgba(255,255,255,.14); }
.ap-login .meter[data-level="1"] i:nth-child(-n+1) { background: #ff453a; }
.ap-login .meter[data-level="2"] i:nth-child(-n+2) { background: #ff9f0a; }
.ap-login .meter[data-level="3"] i:nth-child(-n+3) { background: #ffd60a; }
.ap-login .meter[data-level="4"] i { background: #30d158; }

.ap-login .cta { height: 50px; margin-top: 8px; border-radius: 980px; background: var(--accent); color: #111100; font-size: 17px; font-weight: 500; letter-spacing: -.01em; box-shadow: none; }
.ap-login .cta:hover:not(:disabled) { background: #ffd60a; filter: none; }
.ap-login .cta:active:not(:disabled) { background: #006edb; transform: none; }
.ap-login .cta .spin { border-color: rgba(255,255,255,.35); border-top-color: #111100; }

.ap-login .or-divider { color: #6e6e73; margin: 24px 0 18px; }
.ap-login .gbtn { height: 50px; border-radius: 980px; background: transparent; border: 1px solid #424245; font-size: 16px; font-weight: 500; }
.ap-login .gbtn:hover:not(:disabled) { background: rgba(255,255,255,.06); filter: none; }

.ap-login .auth-foot { font-size: 15px; color: var(--muted); }
.ap-login .auth-foot button { color: #ffd60a; font-weight: 400; text-decoration: none; }
.ap-login .auth-foot button:hover { text-decoration: underline; }
.ap-login .auth-legal { color: #6e6e73; font-size: 12.5px; }

@media (max-width: 960px) {
  .ap-login .auth-shell { padding: 0; grid-template-columns: 1fr; }
  .ap-login .auth-main { padding: 18px 20px 24px; }
  .ap-login .auth-head h1 { font-size: 36px; }
}

/* =====================================================================
   DASHBOARD + REFUND  (light by default, dark when the device is dark)
   ===================================================================== */
body.ap-dash, body.ap-doc {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7; --field: #ffffff;
  --line: rgba(0,0,0,.1); --line-strong: #d2d2d7;
  --text: #1d1d1f; --muted: #6e6e73; --body-text: #424245;
  --accent: #ffca0a; --accent-rgb: 255,202,10; --accent-ink: #111100; --link: #0066cc;
  --danger: #d70015; --danger-bg: rgba(255,59,48,.1);
  --ok: #248a3d; --ok-bg: rgba(52,199,89,.14);
  --warn: #a15c00; --warn-bg: rgba(255,159,10,.16);
  --card-shadow: 0 2px 20px rgba(0,0,0,.05);
  --nav-bg: rgba(245,245,247,.8); --nav-line: rgba(0,0,0,.1);
  --toast-bg: #1d1d1f; --toast-text: #f5f5f7;
  --font-display: var(--ap-font); --font-body: var(--ap-font); --font-mono: var(--ap-mono);
  background: var(--bg); color: var(--text); color-scheme: light; font-size: 17px;
}
body.ap-doc { --bg: #ffffff; --surface-2: #f5f5f7; --nav-bg: rgba(255,255,255,.8); }
html:has(body.ap-dash) { background: #f5f5f7; }
html:has(body.ap-doc) { background: #fff; }

@media (prefers-color-scheme: dark) {
  body.ap-dash, body.ap-doc {
    --bg: #000; --surface: #1d1d1f; --surface-2: #2a2a2d; --field: #2a2a2d;
    --line: rgba(255,255,255,.12); --line-strong: #424245;
    --text: #f5f5f7; --muted: #a1a1a6; --body-text: #c7c7cc;
    --link: #ffd60a;
    --danger: #ff453a; --danger-bg: rgba(255,69,58,.14);
    --ok: #30d158; --ok-bg: rgba(48,209,88,.14);
    --warn: #ffb340; --warn-bg: rgba(255,159,10,.16);
    --card-shadow: none;
    --nav-bg: rgba(22,22,23,.8); --nav-line: rgba(255,255,255,.1);
    --toast-bg: #2c2c2e;
    color-scheme: dark;
  }
  html:has(body.ap-dash), html:has(body.ap-doc) { background: #000; }
}

body.ap-dash :focus-visible, body.ap-doc :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- buttons: pills (dashboard + refund) ---------- */
.ap-dash .btn, .ap-doc .btn { border-radius: 980px; height: 44px; padding: 0 22px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; box-shadow: none; border: 1px solid transparent; }
.ap-dash .btn::after, .ap-doc .btn::after { display: none !important; }
.ap-dash .btn-primary, .ap-doc .btn-primary { background: var(--accent); color: #111100; }
.ap-dash .btn-primary:hover:not(:disabled), .ap-doc .btn-primary:hover:not(:disabled) { background: #ffd60a; filter: none; transform: none; }
.ap-dash .btn-ghost, .ap-doc .btn-ghost { background: transparent; color: var(--link); border-color: var(--link); }
.ap-dash .btn-ghost:hover, .ap-doc .btn-ghost:hover { background: rgba(var(--accent-rgb), .08); }
.ap-dash .btn-sm { height: 34px; padding: 0 16px; font-size: 13.5px; border-radius: 980px; }

/* ---------- top bar (dashboard) ---------- */
.ap-dash .top { background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nav-line); }
.ap-dash .top-in { height: 56px; }
.ap-dash .brand { font-family: var(--ap-font); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.ap-dash .brand img { width: 32px; height: 32px; border: 0; border-radius: 8px; }
.ap-dash .brand small { font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.ap-dash .avatar { font-family: var(--ap-font); font-size: 15px; font-weight: 600; background: var(--accent); color: #111100; width: 32px; height: 32px; }
.ap-dash .user-chip { font-weight: 500; }

/* ---------- page header ---------- */
.ap-dash .page { padding-top: 56px; }
.ap-dash .greeting h1 { font-family: var(--ap-font); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.07; letter-spacing: -.035em; }
.ap-dash .greeting p { font-size: 19px; line-height: 1.4; max-width: 46ch; }

/* ---------- side navigation (undo the old pill-shaped .nav from theme.css) ---------- */
.ap-dash .layout { margin-top: 44px; }
.ap-dash .layout > .nav { top: 84px; margin: 0; width: auto; max-width: none; zoom: 1; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.ap-dash .nav button { border-radius: 12px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; padding: 11px 14px; }
.ap-dash .nav button:hover { background: rgba(127,127,127,.12); color: var(--text); }
.ap-dash .nav button[aria-selected="true"] { background: rgba(var(--accent-rgb), .12); color: var(--link); font-weight: 600; }

/* ---------- cards ---------- */
.ap-dash .block { background: var(--surface); border: 0; border-radius: 24px; padding: 34px; box-shadow: var(--card-shadow); }
.ap-dash .block h2 { font-family: var(--ap-font); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 6px; }
.ap-dash .block h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.ap-dash .lead { font-size: 17px; line-height: 1.45; margin-bottom: 26px; }
.ap-dash .divider { border-top-color: var(--line); }
.ap-dash .empty { font-size: 16px; }
.ap-dash .empty a, .ap-dash .block a { color: var(--link); }
.ap-dash .block a.btn-primary { color: #111100; }
.ap-dash .block a.btn-ghost { color: var(--link); }

.ap-dash .pill { border: 0; font-size: 12.5px; font-weight: 500; padding: 4px 11px; letter-spacing: 0; }
.ap-dash .pill-ok { background: var(--ok-bg); }
.ap-dash .pill-warn { background: var(--warn-bg); }
.ap-dash .pill-bad { background: var(--danger-bg); }

.ap-dash .license { background: var(--surface-2); border: 0; border-radius: 18px; padding: 22px; }
.ap-dash .key { height: 50px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; font-family: var(--ap-mono); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .02em; }
.ap-dash .download { background: rgba(var(--accent-rgb), .07); border: 0; border-radius: 18px; padding: 22px; }
.ap-dash .free-key-help { border: 0; background: var(--surface-2); border-radius: 16px; padding: 18px 20px; }

/* tables */
.ap-dash .table-wrap { border: 1px solid var(--line); border-radius: 16px; }
.ap-dash th { background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ap-dash td { font-size: 15px; }
.ap-dash td.mono { font-family: var(--ap-mono); }

/* stats */
.ap-dash .stat { background: var(--surface-2); border: 0; border-radius: 18px; padding: 20px; }
.ap-dash .stat span { font-size: 13.5px; }
.ap-dash .stat b { font-family: var(--ap-font); font-size: 34px; font-weight: 700; letter-spacing: -.035em; }
.ap-dash .stat.main b { color: var(--accent); }
.ap-dash .subpanel { background: var(--surface-2); border: 0; border-radius: 18px; }

/* forms */
.ap-dash .field > label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ap-dash .input, .ap-dash textarea.input, .ap-dash select.input { height: 48px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 12px; font-size: 16px; letter-spacing: -.01em; }
.ap-dash textarea.input { height: 120px; }
.ap-dash .input::placeholder { color: #8e8e93; }
.ap-dash .input:hover { border-color: #86868b; }
.ap-dash .input:focus { border-color: var(--accent) !important; background: var(--field); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25); }
.ap-dash .input[readonly] { font-family: var(--ap-mono); }
.ap-dash .eye:hover { background: rgba(127,127,127,.14); }

/* rating stars */
.ap-dash .stars button { color: #c7c7cc; }
.ap-dash .stars button:hover { background: rgba(127,127,127,.12); }
.ap-dash .stars button.on { color: #ff9f0a; }

/* toast */
.ap-dash .toast { background: var(--toast-bg); color: var(--toast-text); border: 0; border-radius: 14px; font-size: 15px; box-shadow: 0 14px 40px rgba(0,0,0,.28); }

@media (max-width: 860px) {
  .ap-dash .page { padding-top: 36px; }
  .ap-dash .layout > .nav { position: static; }
  .ap-dash .nav button { border: 0; background: rgba(127,127,127,.12); border-radius: 980px; padding: 9px 16px; font-size: 14px; }
  .ap-dash .nav button[aria-selected="true"] { background: rgba(var(--accent-rgb), .16); }
  .ap-dash .block { padding: 24px 20px; border-radius: 20px; }
  .ap-dash .greeting p { font-size: 17px; }
}

/* =====================================================================
   REFUND / POLICY PAGE
   ===================================================================== */
.ap-doc .nav { top: 0; margin: 0; width: 100%; max-width: none; zoom: 1; border: 0; border-bottom: 1px solid var(--nav-line); border-radius: 0; background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; }
.ap-doc .nav-in { height: 56px; padding: 0 24px; }
.ap-doc .brand { font-family: var(--ap-font); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ap-doc .brand img { width: 32px; height: 32px; border-radius: 8px; }
.ap-doc .brand small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ap-doc .nav-actions .btn { height: 32px; padding: 0 16px; font-size: 13px; }
.ap-doc .nav-actions .btn-ghost { border-color: transparent; }
.ap-doc .nav-actions .btn-ghost:hover { background: transparent; text-decoration: underline; }

.ap-doc main { zoom: 1; }
.ap-doc .policy { max-width: 720px; margin: 88px auto 0; line-height: 1.47; }
.ap-doc .policy h1 { font-family: var(--ap-font); font-size: clamp(34px, 5.4vw, 56px); font-weight: 700; line-height: 1.07; letter-spacing: -.04em; color: var(--text); margin: 0 0 18px; }
.ap-doc .policy h1 + p { font-size: 21px; line-height: 1.38; letter-spacing: -.015em; color: var(--muted); }
.ap-doc .policy h2 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.17; color: var(--text); margin: 48px 0 14px; padding-top: 30px; border-top: 1px solid var(--line); }
.ap-doc .policy p, .ap-doc .policy li { font-size: 17px; line-height: 1.47; letter-spacing: -.01em; color: var(--body-text); }
.ap-doc .policy li { margin: 9px 0; }
.ap-doc .policy ul, .ap-doc .policy ol { padding-left: 24px; }
.ap-doc .policy li::marker { color: var(--muted); }
.ap-doc .policy strong { color: var(--text); font-weight: 600; }

.ap-doc .foot { zoom: 1; margin-top: 120px; background: #f5f5f7; border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0; font-size: 12px; color: #6e6e73; }
.ap-doc .foot a { color: #424245; }
.ap-doc .foot a:hover { color: var(--accent); text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .ap-doc .foot { background: #111113; border-top-color: rgba(255,255,255,.1); color: #86868b; }
  .ap-doc .foot a { color: #a1a1a6; }
}
@media (max-width: 700px) {
  .ap-doc .nav-in { padding: 0 16px; }
  .ap-doc .policy { margin-top: 48px; }
  .ap-doc .policy h1 + p { font-size: 18px; }
  .ap-doc .policy h2 { font-size: 21px; margin-top: 36px; padding-top: 24px; }
  .ap-doc .policy p, .ap-doc .policy li { font-size: 16px; }
  .ap-doc .foot { margin-top: 72px; }
}

/* =====================================================================
   AUDIO ENHANCER  (always dark; this page has its own inline CSS)
   ===================================================================== */
body.ap-enh {
  --bg: #000; --card: #1d1d1f; --line: rgba(255,255,255,.14); --text: #f5f5f7; --muted: #a1a1a6;
  --yellow: #ffca0a; --green: #30d158; --red: #ff453a;
  font-family: var(--ap-font); background: #000; color: var(--text);
}
html:has(body.ap-enh) { background: #000; }
.ap-enh .brand { font-weight: 600; letter-spacing: -.02em; }
.ap-enh .brand i { background: var(--yellow); color: #111100; border-radius: 9px; }
.ap-enh .card { background: #1d1d1f; border: 0; border-radius: 24px; box-shadow: none; padding: 26px 22px; }
.ap-enh h1 { font-weight: 700; font-size: 26px; letter-spacing: -.035em; }
.ap-enh p.sub { font-size: 14px; }
.ap-enh label { font-size: 12.5px; font-weight: 500; }
.ap-enh input[type=text] { background: #2a2a2d; border: 1px solid transparent; border-radius: 12px; font-weight: 500; font-size: 16px; }
.ap-enh input[type=text]:focus { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,202,10,.28); }
.ap-enh button { font-weight: 500; font-size: 14.5px; border-radius: 980px; background: #2a2a2d; border: 0; padding: 13px 20px; }
.ap-enh button.primary { background: var(--yellow); color: #111100; }
.ap-enh button.primary:hover:not(:disabled) { background: #ffd60a; }
.ap-enh .plan { background: #2a2a2d; border: 1.5px solid transparent; border-radius: 16px; }
.ap-enh .plan.sel { border-color: var(--yellow); background: rgba(255,202,10,.16); }
.ap-enh .plan .pr { font-weight: 700; letter-spacing: -.02em; }
.ap-enh .chip { border-radius: 14px; font-weight: 600; }
.ap-enh .pay { background: #2a2a2d; border: 0; border-radius: 16px; }
.ap-enh a { color: #ffd60a; }
.ap-enh .ver { border-radius: 16px; }
.ap-enh .foot { color: #6e6e73; }

/* small fixes found while testing */
.ap-dash .free-key-help .key-row .input { flex: 1 1 260px; width: auto; }
.ap-dash .free-key-help .key-row .btn { flex: none; }
.ap-dash .free-key-help p { font-size: 14px; }