/* Clearer onboarding and a compact chart view after connecting. */
.collection-more {text-align:center;padding:24px 0;color:#627366;font-size:13px}
.collection-more button {border:1px solid #cbd7c4;border-radius:8px;padding:12px 20px;color:#244f40}
.collection-date {display:block;font-size:12px;color:#627366;margin-top:4px}
.sidebar nav {margin-top:32px}
.docs-link {margin-top:auto}
.sidebar-bottom {margin-top:auto}
.sidebar-bottom .account {flex-wrap:wrap;padding:20px 7px}
.sidebar-bottom .badge {background:#244437;border-color:#476253;color:#d9e5dc}
.sidebar-bottom #logout {color:#d9e5dc;padding:6px 0}
.sidebar-bottom .docs-link {display:block}
main {padding-top:28px}
.has-ranking main {padding-top:20px}
.has-ranking .charts {padding-top:0}
.chart-heading h2 {margin-top:0}
.range-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.share-trigger {padding:8px 12px;color:#244f40;border:1px solid #cbd7c4;border-radius:8px;white-space:nowrap;font-size:13px}
.row,.top-card {position:relative;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.row {grid-template-columns:33px 72px minmax(0,1fr) minmax(70px,.65fr) 24px;padding-top:16px;padding-bottom:16px}
.row-art {width:72px;height:72px;transition:transform .18s ease,box-shadow .18s ease}
.card-art {height:clamp(130px,14vw,190px)}
.row:focus-within {transform:scale(1.055);background:#e5eed9;box-shadow:0 10px 28px #17352b22;border-radius:10px;z-index:1}
.row:focus-within .row-art {transform:scale(1.18);box-shadow:0 5px 15px #17352b28}
@media(hover:hover) and (pointer:fine){
 .row:hover {transform:scale(1.055);background:#e5eed9;box-shadow:0 10px 28px #17352b22;border-radius:10px;z-index:1}
 .row:hover .row-art {transform:scale(1.18);box-shadow:0 5px 15px #17352b28}
 .top-card:hover {transform:translateY(-6px) scale(1.04);box-shadow:0 12px 28px #17352b22;z-index:1}
}
@media(prefers-reduced-motion:reduce){
 .row,.row-art,.top-card {transition:none}
 .row:hover,.row:focus-within,.row:hover .row-art,.row:focus-within .row-art,.top-card:hover {transform:none}
}
@media(max-width:1100px){
 .row {grid-template-columns:25px 64px minmax(0,1fr) 20px}
 .row-art {width:64px;height:64px}
}
.topbar {height:72px}
.topbar .primary {padding:10px 16px;font-size:13px}
.charts .section-kicker {display:none}
.row-name {font-size:17px;line-height:1.5}
.row-sub {font-size:14px;line-height:1.5}
.top-card h3 {font-size:16px;line-height:1.5}
.top-card p {font-size:12px;line-height:1.5}
.hero {min-height:0;padding:24px 0}
.guide-source {font-size:12px;color:#627366;line-height:1.8;margin:-12px 0 28px}
.guide-source a {color:#255647;text-decoration:underline}
.share-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}
.share-toolbar p,.share-hint {font-size:13px;color:#627366;line-height:1.8}
.share-content {padding:0 24px 24px}
.share-options {display:flex;flex-wrap:wrap;align-items:end;gap:16px;padding-top:20px}
.share-options label {display:grid;gap:8px;font-size:13px;color:#526157}
.share-options select {padding:12px 18px;border:1px solid #ccd6c7;border-radius:8px;background:#f4f6ef;color:#17352b;font:inherit}
.share-options .quiet {border:1px solid #ccd6c7;border-radius:8px;padding:12px 18px}
.share-preview {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.share-preview label {font-size:13px;color:#526157;min-width:0}
.share-preview textarea {width:100%;height:440px;margin-top:10px;padding:18px;border:1px solid #ccd6c7;border-radius:10px;background:#f7f8f2;font:14px/1.8 "Microsoft JhengHei",sans-serif;resize:vertical;box-sizing:border-box}
.share-preview canvas {display:block;width:100%;height:auto;border-radius:10px;border:1px solid #dce3d7}
.share-status {font-size:13px;color:#255647;min-height:24px;margin:12px 0}
[hidden] {display:none!important}
.connect-copy small {color:#607268;line-height:1.8;display:block}
.connect-copy p {max-width:620px;line-height:1.8}
.connect-actions {flex-wrap:wrap}
.callback code,.guide-content code {white-space:normal;overflow-wrap:anywhere;display:block;font-size:13px;line-height:1.8}
.callback button {display:block;padding:8px 0;color:#255647;text-decoration:underline;text-underline-offset:4px}
.settings-grid small {font-weight:400;line-height:1.7}
.guide-panel {background:#fff;border:1px solid #dce3d7;border-radius:16px;margin:22px 0 32px;scroll-margin-top:24px}
.guide-panel>summary {display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;font-weight:700;list-style:none}
.guide-panel>summary::after {content:'+';font-size:24px;color:#527366}
.guide-panel[open]>summary::after {content:'−'}
.guide-tag {font-size:12px;color:#527366;margin-left:auto;font-weight:400}
.guide-content {padding:0 24px 24px;border-top:1px solid #edf0e8}
.guide-content h2 {font-size:20px;margin:24px 0 10px}
.guide-content p {line-height:1.85;color:#526157;font-size:14px;margin:8px 0}
.guide-content a {color:#255647;text-decoration:underline;text-underline-offset:3px}
.guide-steps {list-style:none;counter-reset:steps;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.guide-steps li {counter-increment:steps;background:#f4f6ef;border-radius:12px;padding:20px;min-width:0}
.guide-steps h3 {font-size:16px;margin:0 0 12px;line-height:1.6}
.guide-steps h3::before {content:counter(steps,decimal-leading-zero);display:inline-block;color:#527366;font-size:12px;margin-right:10px;font-weight:600}
.guide-steps li:last-child {grid-column:1/-1}
.guide-steps code {background:#e7ecdf;padding:10px;border-radius:6px;color:#17352b}
.guide-steps button {padding:10px 0;color:#255647;text-decoration:underline}
.guide-limits {border-left:3px solid #c9df7a;padding:4px 18px;margin-top:24px}
.guide-limits>a {font-size:13px}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid #6d8946;outline-offset:4px}
.has-ranking .hero {padding-top:30px;padding-bottom:32px;min-height:0}
.has-ranking .hero h1 {font-size:38px}
.has-ranking .hero p {margin-bottom:0}
.has-ranking .record {transform:scale(.7);transform-origin:right center}
.has-ranking .hero .eyebrow {margin-bottom:14px}
@media(max-width:760px){
 .row {grid-template-columns:22px 56px minmax(0,1fr) 15px}
 .row-art {width:56px;height:56px}
 .card-art {height:96px}
 main {padding-top:20px}
 .sidebar-bottom {margin-top:14px}
 .sidebar-bottom .account {padding:0;gap:12px}
 .sidebar-bottom .docs-link {display:none}
 .range-actions {gap:8px;margin-bottom:12px}
 .row-name {font-size:16px}
 .row-sub {font-size:13px}
 .top-card h3 {font-size:14px}
 .top-card p {font-size:11px}
 .share-toolbar {align-items:start;flex-direction:column}
 .share-content {padding:0 16px 16px}
 .share-preview {grid-template-columns:1fr}
 .share-preview textarea {height:280px}
 .guide-panel>summary {padding:16px;flex-wrap:wrap;gap:8px}
 .guide-tag {font-size:11px;margin-left:0}
 .guide-content {padding:0 16px 16px}
 .guide-steps {grid-template-columns:1fr}
 .guide-steps li:last-child {grid-column:auto}
 .has-ranking .hero h1 {font-size:28px}
 .has-ranking .record {transform:scale(.8)}
 .connect-actions {width:100%;gap:10px}
}