:root { --ink:#1f2f2b; --muted:#5d6d67; --cream:#f7f7f2; --blue:#0074bf; --blue-dark:#005d99; --green:#2f6f54; --green-dark:#245740; --line:#dce4df; --white:#fff; --mint:#e4f0e8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
.hidden { display:none !important; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:0 28px; border-bottom:1px solid rgba(24,33,43,.1); }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-size:21px; font-weight:800; }
.brand img { width:40px; height:40px; object-fit:contain; }
.account { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:14px; }
main { max-width:1180px; margin:auto; padding:0 28px 70px; }
.hero { min-height:calc(100vh - 78px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 0 100px; }
.eyebrow { color:var(--blue); font-size:12px; letter-spacing:.18em; font-weight:800; }
.eyebrow.light { color:#cbd8ff; }
h1,h2 { margin:0; }
.hero h1 { margin:18px 0; max-width:850px; font-size:clamp(54px,8vw,92px); line-height:.98; letter-spacing:-.06em; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero>p { max-width:620px; margin:0 0 32px; color:var(--muted); font-size:19px; line-height:1.6; }
.hero>.consent-copy { max-width:520px; margin:15px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.consent-copy a { color:var(--blue-dark); font-weight:700; }
.button { border:0; border-radius:10px; padding:13px 19px; cursor:pointer; font-weight:700; transition:.18s ease; }
.button:disabled { opacity:.65; cursor:wait; transform:none; }
.button-primary { color:#fff; background:var(--green); box-shadow:0 7px 18px rgba(47,111,84,.18); }
.button-primary:hover { background:var(--green-dark); transform:translateY(-1px); }
.button-primary:disabled:hover { transform:none; }
.button-dark { color:#fff; background:var(--ink); }
.button-danger { color:#fff; background:#a2483f; }
.button-danger:hover { background:#873a33; }
.button-outline { color:var(--ink); background:transparent; border:1px solid #bfc2bd; }
.button-outline:hover { background:#fff; border-color:#969b96; }
.button-ghost { padding:9px 13px; color:var(--ink); background:transparent; border:1px solid var(--line); }
.google-g { display:inline-grid; place-items:center; margin-right:10px; width:22px; height:22px; color:#4285f4; background:white; border-radius:50%; }
.auth-button { display:inline-flex; min-width:226px; align-items:center; justify-content:center; }
.button-spinner { display:none; width:16px; height:16px; margin-left:10px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; }
.auth-button.is-loading .button-spinner { display:block; }
.auth-error { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) 30px; gap:14px; width:min(100%,560px); margin-top:24px; padding:18px; text-align:left; background:linear-gradient(135deg,#fff 0%,#fff9f7 100%); border:1px solid #edc8bd; border-radius:16px; box-shadow:0 16px 42px rgba(91,48,36,.1); animation:auth-error-in .22s ease-out; }
.auth-error-icon { display:grid; place-items:center; width:42px; height:42px; color:#9b4935; background:#f9e2da; border-radius:13px; font-size:20px; font-weight:800; }
.auth-error-copy strong { display:block; margin:1px 0 5px; color:#633326; font-size:16px; }
.auth-error-copy p { margin:0; color:#765b53; font-size:14px; line-height:1.5; }
.auth-error-details { margin-top:9px; color:#876b63; font-size:12px; }
.auth-error-details summary { width:max-content; cursor:pointer; font-weight:700; }
.auth-error-details code { display:block; overflow-wrap:anywhere; margin-top:7px; padding:8px 10px; color:#6f4c42; background:#faeee9; border-radius:7px; }
.auth-error-close { width:30px; height:30px; padding:0; color:#876b63; background:transparent; border:0; border-radius:50%; cursor:pointer; font-size:22px; line-height:1; }
.auth-error-close:hover { color:#633326; background:#f9e2da; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes auth-error-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .button,.button-spinner,.auth-error { transition:none; animation:none; } }
.trust-row { display:flex; gap:28px; margin-top:38px; color:var(--muted); font-size:13px; }
.dashboard { padding-top:64px; }
.dashboard-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.dashboard-heading h1 { margin:8px 0 7px; font-size:46px; letter-spacing:-.045em; }
.dashboard-heading p,.panel p { color:var(--muted); margin:0; }
.heading-actions { display:flex; gap:10px; flex-shrink:0; }
.pair-card { display:grid; grid-template-columns:210px 1fr auto; align-items:center; gap:32px; margin-bottom:24px; padding:28px 32px; color:#fff; background:var(--blue); border-radius:18px; box-shadow:0 18px 45px rgba(0,116,191,.2); }
.pair-code { margin-top:5px; font-size:34px; font-weight:800; letter-spacing:.18em; }
.pair-card p { margin:5px 0 0; color:#dce4ff; }
.icon-button { width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.14); cursor:pointer; font-size:24px; }
.protection-guide { margin-bottom:24px; padding:32px; background:#fff; border:1px solid #d8d5cc; border-radius:20px; box-shadow:0 18px 55px rgba(24,33,43,.08); }
.guide-heading { display:flex; justify-content:space-between; gap:28px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.guide-heading h2 { margin:7px 0 6px; font-size:28px; letter-spacing:-.035em; }
.guide-heading p { max-width:700px; margin:0; color:var(--muted); line-height:1.5; }
.guide-close { flex-shrink:0; color:var(--ink); background:#eeece6; }
.setup-steps { display:grid; grid-template-columns:1fr 1fr; gap:0 38px; margin:4px 0 0; padding:0; list-style:none; counter-reset:steps; }
.setup-steps li { display:grid; grid-template-columns:36px 1fr; gap:13px; padding:22px 0; border-bottom:1px solid var(--line); }
.step-number { display:grid; place-items:center; width:32px; height:32px; color:var(--blue); background:#e9edff; border-radius:10px; font-weight:800; }
.setup-steps strong { display:block; margin:4px 0 5px; }
.setup-steps p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.domain-list { display:flex; gap:9px; margin-top:13px; }
.domain { display:flex; align-items:center; overflow:hidden; border:1px solid #ced1cc; border-radius:8px; background:#fafaf8; }
.domain code { padding:8px 10px; color:var(--ink); }
.copy-domain { align-self:stretch; padding:0 9px; color:var(--blue); background:#edf0ff; border:0; border-left:1px solid #ced1cc; cursor:pointer; font-size:12px; font-weight:800; }
.guide-note { display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding:15px 17px; color:#704c0f; background:#fff4d9; border-radius:10px; }
.guide-note>span { display:grid; place-items:center; flex:0 0 24px; height:24px; color:#fff; background:#c1841c; border-radius:50%; font-weight:800; }
.guide-note p { margin:1px 0 0; line-height:1.45; }
.guide-footer { display:flex; justify-content:space-between; gap:25px; align-items:center; margin-top:20px; font-size:13px; color:var(--muted); }
.guide-footer a { color:var(--blue); font-weight:700; text-decoration:none; white-space:nowrap; }
.grid { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(400px,1.18fr); gap:24px; }
.panel { padding:32px; background:rgba(255,255,255,.74); border:1px solid var(--line); border-radius:20px; }
.panel-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:22px; border-radius:12px; color:var(--blue); background:#e9edff; font-size:25px; }
.panel h2 { font-size:23px; letter-spacing:-.025em; }
.panel>p { margin-top:8px; line-height:1.55; }
form { margin-top:28px; }
label { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
input { width:100%; height:50px; padding:0 14px; color:var(--ink); background:#fff; border:1px solid #cfd1cc; border-radius:9px; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,116,191,.12); }
form .button { width:100%; margin-top:12px; }
.fine-print { padding-top:24px; font-size:12px; border-top:1px solid var(--line); margin-top:28px !important; }
.panel-title { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); }
.panel-title p { margin-top:3px; color:var(--muted); font-size:13px; }
.shield { display:grid; place-items:center; width:36px; height:36px; color:#19714d; background:var(--mint); border-radius:50%; font-weight:bold; }
.empty-state { display:flex; min-height:270px; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.empty-state strong { color:var(--ink); margin-top:14px; }
.empty-state p { margin:5px 0; font-size:14px; }
.empty-illustration { display:grid; place-items:center; width:66px; height:66px; border:1px dashed #b9bcb7; border-radius:50%; font-size:28px; }
.channel { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); }
.channel img { width:48px; height:48px; object-fit:cover; border-radius:50%; background:#e4e4e0; }
.channel strong { display:block; }
.channel small { color:var(--muted); }
.remove { padding:8px 10px; color:#a23d3d; background:transparent; border:0; cursor:pointer; font-weight:700; }
.devices-panel { margin-top:24px; }
.device-shield { display:grid; place-items:center; width:36px; height:36px; color:var(--blue); background:#e5f2fa; border-radius:50%; font-size:23px; font-weight:800; }
.device-empty-state { padding:30px 0 5px; text-align:center; color:var(--muted); }
.device-empty-state strong { color:var(--ink); }
.device-empty-state p { margin:5px 0 0; font-size:14px; }
.device-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); }
.device-row:last-child { border-bottom:0; padding-bottom:0; }
.device-icon { position:relative; display:block; width:28px; height:40px; margin-left:7px; border:2px solid #5a766c; border-radius:7px; background:#edf4f0; }
.device-icon::after { position:absolute; bottom:3px; left:50%; width:4px; height:4px; background:#5a766c; border-radius:50%; content:""; transform:translateX(-50%); }
.device-info strong { display:block; font-size:15px; }
.device-info small { display:block; margin-top:3px; color:var(--muted); }
.device-actions { display:flex; align-items:center; gap:4px; }
.device-name { padding:8px 10px; color:var(--blue-dark); background:transparent; border:0; border-radius:8px; cursor:pointer; font-weight:700; }
.device-name:hover { background:#eaf3f8; }
.device-remove { border-radius:8px; }
.device-remove:hover { background:#fae9e6; }
.remove-device-dialog,.rename-device-dialog { width:min(calc(100% - 32px),460px); padding:0; color:var(--ink); background:#fff; border:0; border-radius:20px; box-shadow:0 28px 90px rgba(20,31,27,.24); }
.remove-device-dialog::backdrop,.rename-device-dialog::backdrop { background:rgba(24,38,33,.48); backdrop-filter:blur(3px); }
.remove-device-dialog form,.rename-device-dialog form { margin:0; padding:32px; }
.dialog-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:19px; color:#94443a; background:#f9e2de; border-radius:14px; font-size:27px; }
.remove-device-dialog h2 { font-size:25px; letter-spacing:-.035em; }
.remove-device-dialog p { margin:10px 0 0; color:var(--muted); line-height:1.5; }
.remove-device-dialog p strong { color:var(--ink); }
.rename-device-dialog h2 { font-size:25px; letter-spacing:-.035em; }
.rename-device-dialog>form>p { margin:10px 0 0; color:var(--muted); line-height:1.5; }
.rename-device-dialog label { margin-top:22px; }
.rename-device-dialog form .button { width:auto; margin-top:0; }
.rename-icon { color:var(--blue-dark); background:#e5f2fa; }
.remove-device-dialog .dialog-note { padding:11px 13px; color:#76564f; background:#faf0ed; border-radius:9px; font-size:13px; }
.dialog-error { color:#a23d3d !important; font-size:13px; font-weight:700; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
.status { margin:-14px 0 24px; padding:13px 16px; color:#35584b; background:#e8f2ec; border:1px solid #c8dfd0; border-radius:10px; text-align:left; }
.status:empty { display:none; }
.status.error { color:#713d32; background:#fff3ef; border-color:#e9c2b7; font-weight:700; }
.status:focus,.auth-error:focus,.dialog-error:focus { outline:3px solid rgba(0,116,191,.24); outline-offset:3px; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:14px 28px; max-width:1180px; margin:auto; padding:28px; color:var(--muted); border-top:1px solid var(--line); font-size:12px; }
.site-footer>div { display:flex; gap:10px; align-items:baseline; }
.site-footer strong { color:var(--ink); font-size:14px; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; }
.site-footer a { color:var(--blue-dark); font-weight:700; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.site-footer p { grid-column:1/-1; margin:0; }
@media (max-width:760px) { .grid,.setup-steps{grid-template-columns:1fr}.dashboard-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%}.heading-actions .button{flex:1}.pair-card{grid-template-columns:1fr auto}.pair-card>div:nth-child(2){grid-column:1/-1;grid-row:2}.guide-footer{align-items:flex-start;flex-direction:column}.domain-list{align-items:flex-start;flex-direction:column}.trust-row{flex-direction:column;gap:9px}.hero h1{font-size:52px}.account #userName{display:none}.device-row{grid-template-columns:44px minmax(0,1fr)}.device-actions{grid-column:2}.dialog-actions{flex-direction:column-reverse}.dialog-actions .button{width:100%} }
@media (max-width:760px) { .site-footer{grid-template-columns:1fr}.site-footer nav{justify-content:flex-start}.site-footer p{grid-column:1} }