:root { color-scheme: light; --ink:#162231; --muted:#657386; --line:#e4e9f0; --panel:#fff; --bg:#f6f8fb; --blue:#2878e5; --blue-dark:#1e60bc; --orange:#fc4c02; --green:#15835b; --red:#b93b45; font-family:Arial,'Microsoft YaHei',system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
.topbar { height:68px; padding:0 max(24px,calc((100vw - 1040px)/2)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.84); display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:11px; align-items:center; text-decoration:none; color:var(--ink); font-weight:700; }
.brand-mark { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:#172b48; color:white; font-size:18px; font-weight:700; letter-spacing:-1px; box-shadow:0 8px 24px #193d6924; }
.brand-mark span { color:#ff7540; padding:0 2px; }.brand-mark.small { width:36px;height:36px;border-radius:12px;font-size:12px;box-shadow:none; }
.container { width:min(100% - 36px,980px); margin:38px auto 70px; }
.hero { padding:34px 38px; border-radius:24px; background:linear-gradient(118deg,#eaf3ff,#f4f8ff 58%,#fff1ea); display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; font-size:clamp(25px,4vw,34px); letter-spacing:-.7px; } h2 { font-size:21px; margin-bottom:0; letter-spacing:-.35px; }
.eyebrow { color:#6880a0; font-size:11px; font-weight:700; letter-spacing:1.5px; margin-bottom:9px; }.muted { color:var(--muted); line-height:1.65; font-size:14px; margin-bottom:0; }.hero .muted { max-width:630px; }.hero-icon { height:76px;width:76px;border:1px solid #ffffffb3;background:#ffffff91;border-radius:24px;display:grid;place-items:center;font-size:44px;color:var(--blue);transform:rotate(-10deg); }
.grid { display:grid; gap:18px; }.two { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 3px 14px #18324a05; }.connection-card { min-height:280px; }.card-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }.card-heading .eyebrow { margin-bottom:5px; }.connection-card > .muted { min-height:47px; margin-bottom:18px; }
.badge { color:#69788a;background:#f0f3f7;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;white-space:nowrap; }.badge.connected { color:#11714f;background:#e6f7ef; }
.stack { display:flex;flex-direction:column;gap:9px; }.stack.compact { gap:7px; }.stack label { font-size:12px;font-weight:600;color:#405168; }.stack input { margin-bottom:4px; }
input:not([type=checkbox]) { height:43px;width:100%;border:1px solid #d8e0e9;border-radius:10px;padding:0 12px;background:#fff;color:var(--ink);font:inherit;outline:none; }.stack input:focus { border-color:#77a9ef;box-shadow:0 0 0 3px #3384ef19; }
.button { display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:0;border-radius:10px;text-decoration:none;font:600 13px inherit; font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .12s,filter .12s; }.button:hover:not(:disabled) { transform:translateY(-1px);filter:brightness(.98); }.button:disabled { opacity:.48;cursor:not-allowed; }.primary { color:white;background:var(--blue); }.primary:hover:not(:disabled) { background:var(--blue-dark); }.secondary { background:#edf1f6;color:#30435d; }.strava-button { color:#fff;background:var(--orange); }.strava-button:hover:not(:disabled) { background:#e34500; }.connection-card .button { width:100%;margin-top:3px; }
.text-button { padding:6px 0;border:0;background:transparent;color:#527098;font:600 12px inherit;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer; }.text-button:hover { text-decoration:underline; }.text-button.danger { color:var(--red);margin-top:12px; }
.sync-card,.history-card { margin-top:18px; }.sync-heading { align-items:flex-end; }.sync-card > .muted { margin-top:-7px; }.toolbar { display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);margin-top:20px;padding-top:15px; }.toolbar .button { margin-left:auto; }.select-all { display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600; }.select-all input,.activity-row input { accent-color:var(--blue);width:16px;height:16px; }
.activity-list { margin-top:16px; }.activity-row { display:flex;align-items:center;gap:13px;padding:15px 4px;border-bottom:1px solid #edf0f4;cursor:pointer; }.activity-row:last-child { border-bottom:0; }.activity-info { display:flex;flex-direction:column;gap:4px;flex:1;min-width:0; }.activity-info strong,.history-row strong { font-size:13px;font-weight:700; }.activity-info span,.history-row small { color:var(--muted);font-size:12px; }.mini-state { font-size:11px;color:#61748a;background:#f0f3f6;border-radius:999px;padding:5px 9px; }.mini-state.is-error { color:var(--red);background:#fff0f0; }.activity-item { border-bottom:1px solid #edf0f4; }.activity-item .activity-row { border:0; }.activity-item small { display:block;color:var(--red);font-size:11px;padding:0 0 12px 34px; }
.history-list { display:grid; }.history-row { display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;padding:13px 2px;border-bottom:1px solid #edf0f4; }.history-row > span:first-child { display:flex;flex-direction:column;gap:4px; }.history-row .status-text { font-size:12px;font-weight:700;color:#708095; }.status-text.is-success { color:var(--green); }.status-text.is-error { color:var(--red); }.history-row .text-button { justify-self:end; }.history-message { grid-column:1/-1;color:#a14c30!important; }
.empty-state { color:#7b8998;text-align:center;font-size:13px;padding:26px 10px; }.footnote { color:#7c8997;font-size:12px;line-height:1.7;padding:10px 5px; }.notice { padding:12px 15px;border-radius:12px;font-size:13px;line-height:1.55;margin:0 0 17px; }.notice.info { color:#315e9b;background:#eaf3ff; }.notice.success { color:#16704f;background:#e8f7ef; }.notice.error { color:#9f333d;background:#fff0f0; }.hidden { display:none!important; }
.login-page { min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at top left,#e5efff,transparent 55%),var(--bg); }.login-card { width:min(100%,410px);padding:34px;border:1px solid var(--line);border-radius:24px;background:white;box-shadow:0 16px 50px #152b4710; }.login-card .brand-mark { margin-bottom:24px; }.login-card .muted { margin-bottom:24px; }.login-card .notice { margin-bottom:18px; }.login-card .button { width:100%;margin-top:10px; }
.confirm-dialog { width:min(460px,calc(100% - 28px));border:0;border-radius:20px;padding:28px;box-shadow:0 20px 70px #07172b38; }.confirm-dialog::backdrop { background:#12213771;backdrop-filter:blur(3px); }.confirm-dialog h2 { margin-bottom:10px; }.dialog-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:23px; }
@media(max-width:700px) { .container { width:min(100% - 24px,980px);margin:22px auto 48px; }.hero { padding:25px 22px; }.hero-icon { width:54px;height:54px;font-size:30px;border-radius:17px;margin-left:12px;flex-shrink:0; }.two { grid-template-columns:1fr;gap:12px; }.card { padding:19px; }.connection-card { min-height:0; }.connection-card > .muted { min-height:0; }.toolbar { gap:10px;flex-wrap:wrap; }.toolbar .button { width:100%;margin:4px 0 0; }.sync-heading { align-items:center; }.sync-heading .button { padding:0 12px; }.topbar { height:60px;padding:0 16px; } }

.login-page { grid-template-rows: 1fr auto; }
.login-page .icp-footer { align-self: end; }