@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");
:root { --bg:#f5f8ff; --surface:#fff; --ink:#13224b; --muted:#687799; --line:#dfe7f6; --blue:#2860e8; --blue-soft:#eaf0ff; --green:#0da26c; --shadow:0 18px 50px rgba(26,57,124,.1); }
body[data-theme="dark"] { --bg:#0b1428; --surface:#131f38; --ink:#f1f5ff; --muted:#aab9d5; --line:#28395e; --blue-soft:#192e60; --shadow:0 18px 50px rgba(0,0,0,.3); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 0 0,#dcecff,transparent 36%),var(--bg); font:14px "DM Sans",sans-serif; } button,input { font:inherit; } button,a { cursor:pointer; } a { text-decoration:none; color:inherit; }
header { height:76px; padding:0 clamp(20px,6vw,90px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 92%,transparent); } .brand { display:flex; align-items:center; gap:10px; font:800 22px Outfit,sans-serif; letter-spacing:-.04em; } .brand-icon { width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,#22c8d4,#3e47ee);font-size:24px; } .header-actions { display:flex;gap:10px;align-items:center; }
.icon-button,.ghost { border:1px solid var(--line); border-radius:9px; padding:9px 13px; color:var(--ink); background:var(--surface); } .icon-button { width:40px; padding:8px; font-size:20px; } .ghost:hover { border-color:var(--blue); }
.page { min-height:calc(100vh - 76px); max-width:1080px; margin:auto; padding:clamp(34px,8vw,100px) 20px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:70px; } .hero h1,.intro h1 { margin:10px 0; font:800 clamp(34px,5vw,62px)/1 Outfit,sans-serif; letter-spacing:-.06em; } .hero p,.intro p { max-width:570px; color:var(--muted); font-size:17px; line-height:1.6; } .eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.16em; } .flow { display:flex; align-items:center; gap:13px; margin-top:28px; color:var(--blue); font-weight:800; } .flow span { padding:10px 13px; border-radius:9px; background:var(--blue-soft); } .flow b { font-size:20px; }
.card { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); } .access-card { text-align:center; } .card-icon { width:62px;height:62px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;color:var(--blue);background:var(--blue-soft);font-size:30px; } .card h2 { margin:0 0 8px;font:700 21px Outfit,sans-serif; } .card p { color:var(--muted); line-height:1.5; } form { display:grid; gap:13px; margin-top:22px; text-align:left; } label { display:grid; gap:7px; font-size:12px;font-weight:700; } input { width:100%;min-height:45px;padding:0 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--bg);outline:none; } input:focus { border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent); } small { color:#d04b58; }
.primary { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border:0;border-radius:9px;color:#fff;background:linear-gradient(100deg,#2059e7,#4381ee);font-weight:800;box-shadow:0 8px 16px rgba(40,96,232,.2); } .primary:disabled,.disabled { opacity:.45;cursor:not-allowed;pointer-events:none; } .link-button { width:100%; }
.dashboard { max-width:1180px;margin:auto;padding:38px 20px 70px; } .intro { display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:25px; } .intro h1 { font-size:36px; } .intro p { font-size:15px;margin-bottom:0; } .sync { white-space:nowrap; }
.grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; } .provider { min-height:212px; } .card-top { display:flex;align-items:center;justify-content:space-between; } .provider-mark { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#1ed760;background:#e5f9ec;font-size:30px; } .apple-mark { color:#fff;background:#121827; } .badge { padding:6px 9px;border-radius:99px;font-size:11px;font-weight:800; } .badge.ok { color:var(--green);background:#e5faf2; } .badge.off { color:#9b6e26;background:#fff5dc; } .provider h2 { margin-top:22px; } .provider .ghost,.provider .primary { margin-top:13px; }
.summary-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0; } .metric { padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--surface); } .metric strong { display:block;font:800 25px Outfit,sans-serif; } .metric span { color:var(--muted);font-size:11px; } .log-card { margin-top:18px; } .card-title { display:flex;align-items:center;justify-content:space-between;gap:16px; } .card-title span { color:var(--muted);font-size:11px; } table { width:100%;margin-top:15px;border-collapse:collapse;font-size:12px; } th,td { padding:11px 8px;text-align:left;border-top:1px solid var(--line); } th { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em; } .status { padding:4px 7px;border-radius:6px;font-size:10px;font-weight:800; } .status.synced,.status.already { color:var(--green);background:#e5faf2; } .status.not_found { color:#9b6e26;background:#fff5dc; } .status.error { color:#c64f5d;background:#ffebed; } .status.pending { color:var(--muted);background:var(--blue-soft); } .empty { padding:30px 0;color:var(--muted);text-align:center; } .hint,.notice { color:var(--muted);font-size:11px;line-height:1.5; } .notice { min-height:22px;margin-top:12px;color:#c64f5d; }
@media(max-width:760px) { .page { display:block;padding-top:46px; } .hero { margin-bottom:30px; } .hero h1 { font-size:42px; } .intro { display:block; } .sync { width:100%;margin-top:16px; } .grid,.summary-grid { grid-template-columns:1fr 1fr; } .provider { min-height:250px; } table { display:block;overflow:auto;white-space:nowrap; } }
@media(max-width:470px) { .grid,.summary-grid { grid-template-columns:1fr; } .provider { min-height:auto; } header { height:66px; } .brand { font-size:19px; } }