:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color: #f5faff;
  background: #142d43;
  --mint: #a2f1db;
  --muted: #b6ccdf;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: clip;
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 78% 28%, #4e66816b, transparent 49%),
    radial-gradient(ellipse at 37% 92%, #49698855, transparent 57%),
    linear-gradient(120deg, #142c40, #293f56 53%, #132e44);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
button:active { transform: translateY(1px); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.guest-panel { display: grid; place-items: center; padding: 24px 16px; }
.sign-in-card { width: min(100%, 480px); padding: clamp(24px, 6vw, 48px); border: 1px solid #587085; border-radius: 24px; background: #193349; box-shadow: 0 20px 64px #0a192733; }
.sign-in-card img { display: block; }
.sign-in-card .sign-in-section { margin: 36px 0 8px; color: var(--mint); font-size: 14px; font-weight: 600; }
.sign-in-card h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.sign-in-card p { color: var(--muted); line-height: 1.55; }
.sign-in-button { display: inline-flex; align-items: center; gap: 18px; margin-top: 8px; padding: 14px 22px; border-radius: 12px; background: var(--mint); color: #142d43; font-weight: 700; }
.sign-in-button:hover { background: #bbffe9; }
.icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-solid { fill: currentColor; stroke: none; }
.page-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 65%, #83e1cb0b, transparent 45%); }
.ribbons { width: 100%; height: 100%; }
.shell { max-width: 1680px; margin: auto; padding-inline: 56px; overflow: clip; }
.skip-link { position: absolute; top: -80px; left: 20px; padding: 12px 20px; color: #142c40; background: var(--mint); border-radius: 8px; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 94px; display: flex; align-items: center; gap: 46px; border-bottom: 1px solid #b6d7f221; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 29px; font-weight: 700; letter-spacing: -1.3px; flex-shrink: 0; }
.brand-mark { width: 35px; height: 38px; }
.brand-kit { color: var(--mint); font-weight: 500; }
.services { display: flex; align-items: center; gap: 10px; }
.service { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 46px; padding: 10px 17px; color: #c3d7e8; font-size: 13px; background: none; border: 1px solid transparent; border-radius: 12px; white-space: nowrap; }
.service .icon { width: 20px; height: 20px; color: #a7c7d6; }
.service.active { color: #f5faff; border-color: #9ad9db42; background: linear-gradient(115deg, #92cadd0f, #a2f1db08); box-shadow: inset 0 1px 0 #ffffff08, 0 6px 18px #09212f1a; }
.service.active .icon { color: var(--mint); }
.service:hover { color: #fff; background-color: #b4dcff08; }
.account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.account button { min-height: 44px; padding: 10px 21px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
.login { color: #dceaf4; background: #b4dcff04; border: 1px solid #91b9c64d; }
.login:hover { background: #b4dcff12; }
.register { color: #153c3c; font-weight: 600; border: 1px solid #b8f6e2; background: linear-gradient(120deg, #a2f1db, #83dece); box-shadow: 0 4px 20px #a2f1db08, inset 0 1px 0 #ffffff55; }
.register:hover { background: #b2f4e1; }

:root{--line:#b6d7f224;--dim:#a9c2d4;--red:#ffaba8;--green:#95e6be}
body{background-attachment:scroll;font-size:14px;line-height:1.5}.shell{overflow:visible}.page-art{position:absolute}.brand-logo{width:138px;height:46px;object-fit:contain}.site-header{gap:32px}.account{position:relative}.account .user-toggle{display:flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;color:#dceaf4;font-size:12px}.avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#a2f1db13;border:1px solid #a2f1db35;color:var(--mint);font-size:11px}.panel{max-width:1080px;margin:auto;padding:48px 0 22px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:18px}.overline{font-size:10px;letter-spacing:1.8px;color:var(--dim);font-weight:600;margin:0 0 12px}.overline span{padding:0 10px;color:#7491a5}h1{font-size:36px;letter-spacing:-1.3px;font-weight:550;line-height:1.2;margin:0}h1 em{font-style:normal;color:var(--mint)}.subtitle{color:var(--dim);margin:12px 0 0;font-size:13px}.demo-badge{border:1px solid var(--line);border-radius:30px;padding:6px 12px;font-size:10px;color:var(--dim);white-space:nowrap}.accordion{border:1px solid #b6d7f22c;border-radius:18px;background:linear-gradient(120deg,#1a334abb,#153043ab);box-shadow:0 24px 65px #071c3228,inset 0 1px 0 #ffffff06;backdrop-filter:blur(18px)}.section+.section{border-top:1px solid var(--line)}.section:first-child .section-toggle{border-radius:18px 18px 0 0}.section:last-child .section-toggle{border-radius:0 0 18px 18px}.section-toggle{width:100%;display:flex;align-items:center;gap:17px;min-height:74px;background:none;border:0;color:inherit;text-align:left;padding:16px 27px}.section-toggle:hover{background:#c5e8ff05}.section-symbol{display:grid;place-items:center;width:34px;height:34px;border:1px solid #a3cbda29;border-radius:10px;color:#b7d4df;font-size:18px;background:#bbdfff04}.section-name{font-weight:550;font-size:15px}.section-summary{margin-left:auto;color:var(--dim);font-size:11px}.lamp{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #95e6be07,0 0 10px #95e6be40;flex-shrink:0}.lamp.red{background:var(--red);box-shadow:0 0 0 4px #ffaba807,0 0 10px #ffaba830}.chevron{color:#8eafc1;font-size:17px;transition:transform .25s;margin-left:4px}.section-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}.section-toggle[aria-expanded=true] .section-symbol{color:var(--mint);border-color:#a2f1db44;background:#a2f1db08}.section-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;visibility:hidden}.section.open .section-body{grid-template-rows:1fr;visibility:visible}.section-inner{min-height:0;overflow:hidden}.section.open.settled .section-inner{overflow:visible}.section-content{padding:4px 28px 28px}.alert{display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid #ffaba82a;border-radius:11px;background:linear-gradient(105deg,#ffaaa80c,#ffaaa803);margin-bottom:22px}.alert-icon{border:1px solid #ffaba860;color:var(--red);border-radius:50%;width:23px;height:23px;display:grid;place-items:center;flex-shrink:0}.alert strong{font-size:12px;color:#ffd2cb;font-weight:550}.alert p{margin:3px 0 0;font-size:12px;color:#c8c9d4}.alert .btn{margin-left:auto;white-space:nowrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:9px 14px;border-radius:8px;border:1px solid #9dc6d340;background:#a8dcf006;color:#dfeff7;font:inherit;font-size:12px;font-weight:500;transition:background .15s}.btn:hover{background:#b4dcff12;border-color:#b6d7f263}.btn.primary{color:#163c3c;background:linear-gradient(115deg,#a2f1db,#83dece);border-color:#b8f6e280;box-shadow:inset 0 1px 0 #ffffff30}.btn.primary:hover{background:#b7f6e4}.btn.danger{color:#ffd5d1;background:#ffaaa812;border-color:#ffaaa84a}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.text{background:none;border-color:transparent;padding-inline:4px;color:var(--mint)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px}.metric{padding:15px 17px;border:1px solid var(--line);border-radius:10px;background:#b4dcff03}.metric-label{color:var(--dim);font-size:11px;display:block;margin-bottom:8px}.metric-value{font-size:24px;letter-spacing:-.7px;font-weight:500}.metric-value small{font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0}.metric-value.oauth{font-size:15px;letter-spacing:0;display:flex;gap:9px;align-items:center;padding-top:7px}.activity{display:grid;grid-template-columns:190px 1fr;gap:28px}.activity-today{border-right:1px solid var(--line);padding-right:24px}.small-heading{font-size:12px;font-weight:550;margin:0 0 16px}.today-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--dim);font-size:11px;margin:12px 0}.today-row b{font-size:25px;font-weight:500;color:#eff9ff;letter-spacing:-.8px}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.legend{display:flex;gap:12px;font-size:10px;color:var(--dim)}.legend i{display:inline-block;width:6px;height:6px;border-radius:2px;background:#99ddcd;margin-right:5px}.legend span+span i{background:#7599b5}.chart{display:flex;align-items:end;justify-content:space-around;gap:12px;height:112px;background:repeating-linear-gradient(to top,transparent 0,transparent 31px,#b6d7f212 32px);padding-top:8px}.day{height:100%;flex:1;max-width:55px;display:flex;align-items:end;justify-content:center;gap:5px;position:relative}.bar{width:14px;border-radius:3px 3px 0 0;background:linear-gradient(#a2e4d4,#73baae);min-height:3px}.bar.direct{background:linear-gradient(#91aec5,#5f839f)}.day:focus-visible{outline:2px solid var(--mint)}.day:hover::after,.day:focus-visible::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#17364a;border:1px solid #a2f1db55;border-radius:6px;padding:6px 8px;font-size:10px;z-index:2}.chart-labels{display:flex;justify-content:space-around;gap:12px;font-size:10px;color:#aac1d0;padding-top:8px}.chart-labels span{flex:1;max-width:55px;text-align:center}.chart-note{font-size:10px;color:#9bb6c9;margin:10px 0 0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.counts{display:flex;gap:20px;color:var(--dim);font-size:12px}.counts b{color:#eef8fc;font-weight:550}.section-intro{margin-bottom:22px}.section-intro h2{font-size:18px;font-weight:550;margin:0 0 6px}.section-intro p,.muted{color:var(--dim);font-size:12px;margin:0;line-height:1.7}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice{position:relative;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:20px;border-radius:12px;border:1px solid var(--line);background:#b4dcff03;color:inherit;cursor:pointer}.choice.selected{border-color:#a2f1db65;background:#a2f1db07}.radio{width:15px;height:15px;border-radius:50%;border:1px solid #8eafc1;flex-shrink:0;margin-top:3px}.selected .radio{border:4px solid var(--mint)}.choice strong{display:block;font-weight:550;font-size:14px;margin-bottom:6px}.choice p{margin:0;color:var(--dim);font-size:12px;line-height:1.6}.tag{font-size:9px;font-weight:400;border-radius:4px;color:var(--mint);background:#a2f1db10;padding:3px 6px;margin-left:6px}.hint{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11px;margin-top:18px}.table-wrap{overflow:visible}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;font-weight:400;color:#9db7ca;padding:0 12px 12px;border-bottom:1px solid var(--line)}td{padding:16px 12px;border-bottom:1px solid #b6d7f213;color:#cce0ed}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0;text-align:right}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#b4dcff03}.account-name{display:block;color:#eff8fc;font-weight:550;margin-bottom:3px;overflow-wrap:anywhere}.row-note{font-size:10px;color:var(--dim)}.chip{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:10px;white-space:nowrap}.chip .lamp{width:5px;height:5px;box-shadow:none}.chip.bad{color:var(--red)}.icon-button{display:inline-grid;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#bfd4e3;width:34px;height:34px;font-size:21px}.icon-button:hover{background:#b4dcff0c;border-color:var(--line)}.row-actions{position:relative}.popover{position:absolute;right:0;top:calc(100% + 7px);width:220px;background:#203b51;border:1px solid #8ab7c94d;border-radius:11px;padding:6px;box-shadow:0 18px 45px #061c3270;z-index:20;text-align:left}.popover :is(button, .menu-item){display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;color:#dceaf4;padding:10px;border-radius:6px;text-align:left;font-size:12px}.popover :is(button, .menu-item):hover{background:#b4dcff10}.popover .destructive{color:var(--red)}.menu-caption{display:block;font-size:10px;color:var(--dim);padding:9px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}[hidden]{display:none!important}.client-list{display:grid;gap:10px}.client-row{display:flex;align-items:center;gap:15px;border:1px solid var(--line);border-radius:11px;padding:17px}.client-icon{display:grid;place-items:center;width:40px;height:40px;background:#a2f1db08;border:1px solid var(--line);border-radius:10px;color:var(--mint);font-size:23px}.client-info{flex:1}.client-info strong{font-size:13px;font-weight:550}.client-info p{font-size:11px;color:var(--dim);margin:4px 0 0}.connection-url{display:flex;align-items:center;gap:12px;border:1px solid #a2f1db35;background:#08243633;border-radius:10px;padding:12px 14px;margin-bottom:23px}.connection-url code{flex:1;overflow-wrap:anywhere;color:#c4eee3;font-size:13px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step-number{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid #a2f1db55;background:#a2f1db09;color:var(--mint);font-size:11px;margin-bottom:12px}.step h3{font-size:12px;margin:0 0 6px;font-weight:550}.step p{color:var(--dim);font-size:11px;margin:0;min-height:54px}.screenshot{height:102px;border:1px solid #b6d7f225;border-radius:9px;background:linear-gradient(140deg,#b4dcff08,#b4dcff01);padding:11px;margin-top:12px;position:relative;overflow:hidden}.screenshot::before{content:'•••';display:block;color:#829dae;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:2px;padding-bottom:4px;margin-bottom:8px}.mini-line{height:5px;width:75%;border-radius:2px;background:#aacbdf19;margin-bottom:6px}.mini-line.short{width:45%}.mini-control{font-size:8px;border:1px solid #a2f1db40;color:#b9e8dc;display:inline-block;padding:3px 7px;border-radius:4px;background:#a2f1db0a}.screenshot-label{font-size:9px;color:#89a8bb;margin-top:6px}.check-connection{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px;border-top:1px solid var(--line);padding-top:18px}.profile-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.profile-row:last-child{border:0}.profile-label{color:var(--dim);font-size:11px;display:block;margin-bottom:4px}.profile-value{font-size:14px}footer{display:flex;justify-content:space-between;gap:16px;color:#9ab4c7;font-size:10px;padding-top:22px}footer .lamp{width:4px;height:4px;margin-right:7px;box-shadow:none}dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:25px;border:1px solid #a2f1db40;border-radius:17px;background:linear-gradient(140deg,#29475e,#1b354b);color:#f5faff;box-shadow:0 30px 100px #06192699}dialog::backdrop{background:#061926a8;backdrop-filter:blur(7px)}.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal-top .overline{margin:0}.modal-top .icon-button{margin:-8px -8px 0 0}dialog h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:0 0 10px;font-weight:550}dialog p{font-size:13px;line-height:1.7;color:#bcd1df;margin:0 0 20px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px;flex-wrap:wrap}label.field{display:block;color:#c7dae6;font-size:12px;margin:16px 0}input{width:100%;display:block;font:inherit;color:#f0f8ff;background:#0c283f55;border:1px solid #a1c6d43a;border-radius:8px;padding:11px 12px;margin-top:7px;outline:none}input:focus{border-color:var(--mint);box-shadow:0 0 0 3px #a2f1db0b}input::placeholder{color:#819eb2}.field small{display:block;font-size:10px;color:var(--dim);margin-top:7px}.wizard-progress{display:flex;gap:6px;margin-bottom:23px}.wizard-progress i{height:3px;flex:1;border-radius:2px;background:#9db7ca28}.wizard-progress i.done{background:var(--mint)}dialog .choice-grid{grid-template-columns:1fr}dialog .choice{padding:14px}dialog .choice strong{font-size:13px}.verification{font-size:16px;letter-spacing:normal;text-align:left}.error{color:#ffc0b8;font-size:12px;margin-top:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.2s;padding:12px 18px;background:#234859;border:1px solid #a2f1db66;border-radius:10px;color:#e3fff7;font-size:12px;box-shadow:0 10px 35px #06192666;z-index:100;max-width:calc(100% - 32px);width:max-content}.toast.show{opacity:1;transform:translate(-50%,0)}.empty{text-align:center;padding:35px;color:var(--dim)}.empty strong{display:block;color:#dceaf4;margin-bottom:8px}.help-list{padding-left:20px;color:#c6d9e6;font-size:13px;line-height:1.8}.inline-code{color:var(--mint);overflow-wrap:anywhere}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media(min-width:1500px){.panel{padding-top:58px}.page-heading{margin-bottom:35px}.section-toggle{min-height:78px}}
@media(max-width:1200px){.shell{padding-inline:30px}.site-header{gap:20px}.service{padding-inline:10px;font-size:12px;gap:7px}.services{gap:3px}.brand-logo{width:120px;height:40px}.account .user-toggle{font-size:11px}}
@media(max-width:1000px){.site-header{flex-wrap:wrap;padding-top:16px;row-gap:12px}.services{order:3;width:100%;padding-bottom:13px;gap:8px}.service{font-size:12px}.panel{padding-top:32px}.steps{grid-template-columns:1fr 1fr}.step p{min-height:34px}}
@media(max-width:680px){.shell{padding-inline:16px}.site-header{gap:10px;row-gap:10px}.brand-logo{width:105px;height:35px}.account .user-toggle{font-size:10px;gap:6px}.avatar{width:24px;height:24px}.services{display:flex;overflow-x:auto;gap:4px;padding-bottom:12px}.service{font-size:10px;padding:8px;min-height:37px;gap:6px}.service .icon{width:16px;height:16px}.panel{padding-top:29px}.page-heading{align-items:flex-start;margin-bottom:25px}.overline{font-size:8px;letter-spacing:1.1px}h1{font-size:27px;letter-spacing:-1px}.subtitle{font-size:12px;max-width:230px}.demo-badge{font-size:8px;padding:5px 8px;margin-top:28px}.section-toggle{padding:14px 16px;min-height:68px;gap:11px}.section-name{font-size:13px}.section-symbol{width:29px;height:29px;font-size:15px}.section-summary{display:none}.section-toggle>.lamp{margin-left:auto}.chevron{margin-left:1px}.section-content{padding:4px 16px 22px}.alert{flex-wrap:wrap;padding:13px;gap:10px}.alert>div{flex:1;min-width:150px}.alert .btn{margin-left:32px}.metrics{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}.metric{padding:12px}.metric-label{font-size:10px}.metric-value{font-size:22px}.activity{grid-template-columns:1fr;gap:19px}.activity-today{border-right:0;border-bottom:1px solid var(--line);padding:0 0 13px;display:flex;align-items:center;flex-wrap:wrap;column-gap:26px}.activity-today .small-heading{width:100%;margin-bottom:0}.today-row{gap:14px;margin:8px 0 0}.chart-heading{align-items:flex-start}.chart-heading .small-heading{font-size:11px}.legend{font-size:9px;gap:7px}.chart{height:110px}.toolbar{flex-wrap:wrap;gap:13px}.counts{gap:15px;font-size:11px}.toolbar>.btn{width:100%}.choice-grid{grid-template-columns:1fr}.choice{padding:16px}.table-wrap table,.table-wrap tbody{display:block}.table-wrap thead{display:none}.table-wrap tr{display:grid;grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:9px;position:relative}.table-wrap td{display:block;border:0;padding:3px 0!important;text-align:left!important;font-size:11px}.table-wrap td:first-child{grid-column:1;grid-row:1;padding-right:40px!important}.table-wrap td:nth-child(2){grid-column:1;grid-row:2;color:var(--dim)}.table-wrap td:nth-child(3){grid-column:2;grid-row:3;text-align:right!important}.table-wrap td:nth-child(4){grid-column:1;grid-row:3}.table-wrap td:nth-child(5){grid-column:1;grid-row:4;color:var(--dim);font-size:10px}.table-wrap td:nth-child(5)::before{content:'Добавлен '}.table-wrap td:last-child{position:absolute;right:8px;top:9px}.client-row{flex-wrap:wrap;padding:13px;gap:10px}.client-info{min-width:170px}.client-row>.btn{margin-left:50px}.client-info p{font-size:10px}.connection-url{flex-wrap:wrap;padding:12px}.connection-url code{font-size:11px;min-width:180px}.connection-url .btn{width:100%}.steps{gap:19px 12px}.step p{min-height:54px;font-size:10px}.step h3{font-size:11px}.check-connection{flex-wrap:wrap}.check-connection .btn{width:100%}.profile-row{flex-wrap:wrap}.profile-value{font-size:13px}footer{flex-direction:column;gap:6px;padding-inline:4px;font-size:9px}dialog{padding:20px;border-radius:15px}dialog h2{font-size:21px}.modal-actions .btn{flex:1}.popover{width:208px}.page-art .ribbons{width:160%;margin-left:-30%;opacity:.65}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}



/* Soft light surfaces share component colors; the hero retains its blue palette. */
:is(.accordion, dialog) {
  color-scheme: light;
  --line: #dfe8ed;
  --dim: #586f7e;
  --mint: #147668;
  --green: #218252;
  --red: #bb4248;
  color: #203b4b;
  background: #eef1f3;
  border-color: #e2eaef;
  box-shadow: 0 24px 65px #071c3228, 0 2px 8px #071c3212;
  backdrop-filter: none;
}
:is(.accordion, dialog) .section-toggle:hover { background: #f5f9fa; }
:is(.accordion, dialog) .section-symbol {
  color: #587787;
  border-color: #dce7ec;
  background: #f7fafb;
}
:is(.accordion, dialog) .section-toggle[aria-expanded=true] .section-symbol {
  color: #147668;
  border-color: #b4dbd1;
  background: #edf8f4;
}
:is(.accordion, dialog) .chevron { color: #6c8493; }
:is(.accordion, dialog) .lamp { box-shadow: 0 0 0 4px #21825208, 0 0 9px #21825225; }
:is(.accordion, dialog) .lamp.red { box-shadow: 0 0 0 4px #bb424808, 0 0 9px #bb424820; }
:is(.accordion, dialog) .alert { background: #f6eae8; border-color: #f0d3cf; }
:is(.accordion, dialog) .alert-icon { border-color: #d6a09d; }
:is(.accordion, dialog) .alert strong { color: #a23c43; }
:is(.accordion, dialog) .alert p { color: #76575b; }
:is(.accordion, dialog) .btn { color: #365767; border-color: #cbdbe2; background: #eef1f3; }
:is(.accordion, dialog) .btn:hover { background: #f0f7f7; border-color: #9ebfbf; }
:is(.accordion, dialog) .btn.primary {
  color: #153e37;
  border-color: #9ddac8;
  background: linear-gradient(115deg, #b8efdb, #9de2d2);
}
:is(.accordion, dialog) .btn.primary:hover { background: #a9e9d4; }
:is(.accordion, dialog) .btn.text { color: #147668; background: transparent; border-color: transparent; }
:is(.accordion, dialog) .btn.text:hover { background: #edf8f4; }
:is(.accordion, dialog) .metric { background: #e8edf0; }
:is(.accordion, dialog) .today-row b,
:is(.accordion, dialog) .counts b,
:is(.accordion, dialog) .account-name,
:is(.accordion, dialog) .empty strong { color: #203b4b; }
:is(.accordion, dialog) .chart {
  background: repeating-linear-gradient(to top, transparent 0, transparent 31px, #e6edf1 32px);
}
:is(.accordion, dialog) .bar { background: linear-gradient(#50b5a0, #258f7d); }
:is(.accordion, dialog) .bar.direct { background: linear-gradient(#93b0c4, #62859e); }
:is(.accordion, dialog) .legend i { background: #258f7d; }
:is(.accordion, dialog) .legend span+span i { background: #62859e; }
:is(.accordion, dialog) .chart-labels,
:is(.accordion, dialog) .chart-note,
:is(.accordion, dialog) .screenshot-label { color: #586f7e; }
:is(.accordion, dialog) .day:hover::after,
:is(.accordion, dialog) .day:focus-visible::after { color: #f5faff; border-color: #537f88; }
:is(.accordion, dialog) .choice { background: #eef1f3; }
:is(.accordion, dialog) .choice:hover { background: #f7faf9; border-color: #a9ccc4; }
:is(.accordion, dialog) .choice.selected { background: #e4f1eb; border-color: #81bbaa; }
:is(.accordion, dialog) .radio { border-color: #95aaa8; }
:is(.accordion, dialog) .selected .radio { border-color: #147668; }
:is(.accordion, dialog) .tag { color: #147668; background: #ddf2e9; }
:is(.accordion, dialog) th { color: #586f7e; }
:is(.accordion, dialog) td { color: #3d5969; border-bottom-color: #e8eef1; }
:is(.accordion, dialog) tbody tr:hover { background: #f7fafb; }
:is(.accordion, dialog) .icon-button { color: #526f7e; }
:is(.accordion, dialog) .icon-button:hover { background: #edf4f6; }
:is(.accordion, dialog) .popover {
  background: #eef1f3;
  border-color: #d5e2e7;
  box-shadow: 0 12px 35px #173c5426;
}
:is(.accordion, dialog) .popover :is(button, .menu-item) { color: #294b5c; }
:is(.accordion, dialog) .popover :is(button, .menu-item):hover { background: #edf5f5; }
:is(.accordion, dialog) .popover .destructive { color: #b23840; }
:is(.accordion, dialog) .client-icon { color: #147668; background: #eff8f4; }
:is(.accordion, dialog) .connection-url { background: #f2f8f6; border-color: #cce3db; }
:is(.accordion, dialog) .connection-url code { color: #226b5a; }
:is(.accordion, dialog) .step-number { color: #147668; background: #eff8f4; border-color: #add6c8; }
:is(.accordion, dialog) .screenshot { background: linear-gradient(140deg, #f0f5f8, #f9fbfc); border-color: #d8e4ea; }
:is(.accordion, dialog) .screenshot::before { color: #6c8999; }
:is(.accordion, dialog) .mini-line { background: #d3e0e7; }
:is(.accordion, dialog) .mini-control { color: #236c5e; background: #e2f3ec; border-color: #badccc; }


/* Dialog-specific fields and feedback use the same light surface. */
dialog { box-shadow: 0 30px 100px #06192670; }
dialog p, dialog label.field, dialog .help-list { color: #486170; }
dialog input {
  color: #203b4b;
  background: #f6f8f9;
  border-color: #bfced6;
  font-size: 16px;
}
dialog input::placeholder { color: #627a89; }
dialog input:focus { border-color: #147668; box-shadow: 0 0 0 3px #14766818; }
dialog .btn.danger { color: #a42e38; background: #f4e2e2; border-color: #d9a7aa; }
dialog .btn.danger:hover { background: #ecd2d4; border-color: #c78c91; }
dialog .error { color: #ae303b; }
dialog .wizard-progress i { background: #cedbdc; }
dialog .wizard-progress i.done { background: #278774; }

/* Body copy and controls grow slightly; heading sizes stay unchanged. */
body { font-size: 15px; }
.service { font-size: 14px; }
.account .user-toggle { font-size: 13px; }
.avatar { font-size: 12px; }
.subtitle { font-size: 15px; }
.overline, .demo-badge { font-size: 11px; }
.section-summary, .metric-label, .today-row, .hint { font-size: 13px; }
.btn, .alert p, .section-intro p, .muted, .choice p, table,
.popover :is(button, .menu-item), dialog label.field, .error, .toast { font-size: 14px; }
.metric-value { font-size: 26px; }
.metric-value small { font-size: 14px; }
.metric-value.oauth { font-size: 16px; }
.today-row b { font-size: 27px; }
.legend, .chart-labels, .chart-note, th, .row-note, .chip,
.screenshot-label, .field small, .menu-caption, footer { font-size: 12px; }
.day:hover::after, .day:focus-visible::after { font-size: 12px; }
.counts, .client-info p, .step p { font-size: 13px; }
.tag, .mini-control { font-size: 11px; }
.connection-url code { font-size: 15px; }
.step-number { font-size: 13px; }
.profile-label { font-size: 13px; }
.profile-value { font-size: 16px; }
dialog p, .help-list { font-size: 15px; }
.activity { grid-template-columns: 210px minmax(0, 1fr); }
.chart-heading, .legend, .counts { flex-wrap: wrap; }
.step p { min-height: 64px; }
.choice > span:last-child, .client-info { min-width: 0; }
.client-info p { overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .site-header { column-gap: 16px; }
  .service { font-size: 13px; padding-inline: 9px; }
  .account .user-toggle { font-size: 12px; }
}
@media (max-width: 680px) {
  .service { font-size: 12px; }
  .account .user-toggle { font-size: 11px; }
  .subtitle { font-size: 14px; }
  .overline, .demo-badge { font-size: 10px; }
  .page-heading { flex-wrap: wrap; }
  .demo-badge { margin-top: 0; }
  .metric-label, .legend, .chart-labels, .chart-note { font-size: 12px; }
  .metric-value { font-size: 24px; }
  .metric-value.oauth { font-size: 16px; }
  .activity { grid-template-columns: 1fr; }
  .table-wrap td { font-size: 13px; }
  .table-wrap td:nth-child(5) { font-size: 12px; }
  .counts, .client-info p, .step p { font-size: 12px; }
  .connection-url code { font-size: 13px; }
  .profile-value { font-size: 15px; }
  footer { font-size: 11px; }
}
@media (max-width: 380px) {
  .table-wrap tr { grid-template-columns: minmax(0, 1fr); }
  .table-wrap td:nth-child(3) { grid-column: 1; grid-row: 4; text-align: left !important; }
  .table-wrap td:nth-child(5) { grid-row: 5; }
  .steps { grid-template-columns: 1fr; }
  .step p { min-height: 0; }
}

/* Dynamic data and component host; original Astra styles above are preserved. */
direct-panel { display:block; }
.section-heading { margin:0; }
.ready-hint { margin:0 0 22px; }
.account { min-width:0; }
.user-toggle > span:nth-child(2) { max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.section-summary { max-width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-value, .client-info strong, dialog h2, dialog p { overflow-wrap:anywhere; }
.profile-row > div { min-width:0; }
.table-wrap table { table-layout:fixed; }
.table-wrap td { overflow-wrap:anywhere; }
.table-wrap th:nth-child(1) { width:23%; }
.table-wrap th:nth-child(2) { width:21%; }
.table-wrap th:nth-child(3) { width:16%; }
.table-wrap th:nth-child(4) { width:17%; }
.table-wrap th:nth-child(5) { width:15%; }
.table-wrap th:nth-child(6) { width:8%; }
.icon-button { min-width:44px; min-height:44px; }
@media(max-width:680px) { .user-toggle > span:nth-child(2) { max-width:150px; } .profile-row { flex-wrap:wrap; } }

.client-info strong { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:680px) { .client-info { flex-basis:calc(100% - 60px); } }

/* Compact, reusable ChatGPT connection guide. */
.chatgpt-guide { color: #244457; }
.chatgpt-guide-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.chatgpt-guide-step { padding: 16px; border: 1px solid #d5e3e7; border-radius: 12px; background: #f8fbfa; min-width: 0; }
.chatgpt-guide-step .step-number { margin-bottom: 12px; color: #147668; background: #eff8f4; border-color: #add6c8; }
.chatgpt-guide-step h3 { margin: 0 0 9px; font-size: 15px; line-height: 1.35; font-weight: 600; }
.chatgpt-guide-step p { margin: 0; font-size: 13px; line-height: 1.65; color: #526c7c; overflow-wrap: anywhere; }
.chatgpt-guide-step strong { color: #244457; font-weight: 550; }
.chatgpt-guide-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #d5e3e7; }
.chatgpt-guide-footer p { flex: 1 1 300px; margin: 0; color: #526c7c; font-size: 13px; line-height: 1.6; }
.chatgpt-guide-footer a, .section-intro a { color: #147668; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.chatgpt-guide-footer a:hover, .section-intro a:hover { color: #0b5147; }
@media (max-width: 1000px) { .chatgpt-guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .chatgpt-guide-steps { grid-template-columns: 1fr; gap: 8px; }
  .chatgpt-guide-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 10px; padding: 12px; }
  .chatgpt-guide-step .step-number { grid-row: 1 / 3; margin: 0; }
  .chatgpt-guide-step h3 { margin-bottom: 5px; }
  .chatgpt-guide-step p { grid-column: 2; }
}

/* Footer copied from the instruction page, including responsive rules. */
.site-footer { display:block; margin:0; padding:0; color:#f5faff; font-size:14px; line-height:1.6; }
.site-footer .brand { gap:0; font-size:inherit; font-weight:inherit; letter-spacing:normal; }
.site-footer .brand{ display: inline-flex; align-items: center; flex-shrink: 0; }
.site-footer .brand-logo{ display: block; width: 138px; height: 46px; object-fit: contain; }
.site-footer .status-dot{ display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px #a2f1db0b, 0 0 12px #a2f1db55; }
.site-footer .window-title .status-dot{ width: 5px; height: 5px; background: #5f9f87; box-shadow: none; }
@media (max-width: 1200px){.site-footer .brand-logo{ width: 120px; height: 40px; }}
@media (max-width: 600px){.site-footer .brand-logo{ width: 105px; height: 35px; }}
.site-footer{border-top:1px solid var(--line);padding-top:44px}
.site-footer .footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:35px;padding-bottom:40px}
.site-footer .footer-top p{font-size:12px;color:#a6c0d3;margin:14px 0 0}
.site-footer .footer-top nav{display:flex;align-items:start;flex-direction:column;gap:11px;font-size:12px;color:#c4d9e7}
.site-footer .footer-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#93b2c5;margin-bottom:14px}
.site-footer .footer-top nav .footer-label{margin-bottom:4px}
.site-footer .future{color:#98b0c2}
.site-footer .future small{font-size:9px;margin-left:6px;color:#819caf}
.site-footer .footer-note{font-size:11px;padding-top:3px;color:#c4d9e7}
.site-footer .footer-note .status-dot{margin-right:7px}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding:20px 0 25px;font-size:10px;color:#97b3c6}
.site-footer .text-button{border:0;background:none;padding:0;color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:32px}
.site-footer .text-button:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer .quiet-note .text-button{color:var(--mint)}
.site-footer .toc-help .text-button{color:var(--mint)}
.site-footer .search-bar .text-button{font-size:11px;color:var(--mint)}
.site-footer .auth-dialog .text-button{color:var(--teal)}
@media(max-width:1200px){.site-footer .footer-top{grid-template-columns:1.1fr 1fr 1fr}
.site-footer .footer-note{display:none}}
@media(max-width:900px){.site-footer .article-toc .footer-label{width:100%;margin:0}
.site-footer .directory-nav .footer-label{margin:0}}
@media(max-width:600px){.site-footer .footer-top{grid-template-columns:1fr 1fr;gap:30px 20px}
.site-footer .footer-top>div:first-child{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;align-items:center}
.site-footer .footer-top>div:first-child p{margin:0;font-size:10px}
.site-footer .footer-top nav{font-size:11px;gap:9px}
.site-footer .footer-label{font-size:9px}
.site-footer .footer-bottom{flex-wrap:wrap;gap:8px 16px;font-size:9px}
.site-footer .footer-bottom>span:nth-child(2){order:3;width:100%}
.site-footer .footer-bottom .text-button{margin-left:auto;font-size:9px}
.site-footer{padding-top:30px}
.site-footer .directory-nav .footer-label{margin-bottom:10px}
.site-footer .search-bar .text-button{font-size:10px}}
@media(max-width:360px){.site-footer .footer-top{gap:26px 12px}}


.oauth-guide { margin-top:24px; padding-top:22px; border-top:1px solid #d5e3e7; }
.oauth-guide .chatgpt-guide-step a { color:#147668; text-decoration:underline; text-underline-offset:3px; }

/* Separate accordion navigation from the light content surface. */
.accordion {
  display: grid;
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.accordion .section {
  border: 1px solid #b5c7d2;
  border-radius: 14px;
  background: #eef1f3;
  box-shadow: 0 6px 18px #071c3220;
}
.accordion .section .section-toggle {
  border-radius: 13px;
  color: #203b4b;
  background: #d4e0e8;
  transition: background .15s;
}
.accordion .section .section-toggle:hover { background: #c6d6e1; }
.accordion .section-toggle[aria-expanded=true] {
  border-radius: 13px 13px 0 0;
}
.accordion .section-toggle:focus-visible {
  outline: 3px solid #a2f1db;
  outline-offset: 3px;
}
.accordion .section-toggle .section-summary { color: #486273; }
.accordion .section-toggle .chevron { color: #486273; }
.accordion .section-toggle .section-symbol,
.accordion .section-toggle[aria-expanded=true] .section-symbol {
  color: #36596e;
  border-color: #a8bfcd;
  background: #e8eff4;
}
.accordion .section-toggle .lamp { background: var(--green); }
.accordion .section-toggle .lamp.red { background: var(--red); }
.accordion .section-content { padding-top: 24px; }
@media (max-width: 680px) {
  .accordion { gap: 10px; }
  .accordion .section-content { padding-top: 20px; }
}

.popover .menu-item { text-decoration: none; }

.wordstat-account .client-info { min-width:0; flex:1 1 180px; overflow-wrap:anywhere; }