@charset "UTF-8";
/* vendor/pico/pico-2.0.6.min.css */
/*!
 * Pico CSS ✨ v2.0.6 (https://picocss.com)
 * Copyright 2019-2024 - Licensed under MIT
 */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){:root{--pico-font-size:106.25%}}@media (min-width:768px){:root{--pico-font-size:112.5%}}@media (min-width:1024px){:root{--pico-font-size:118.75%}}@media (min-width:1280px){:root{--pico-font-size:125%}}@media (min-width:1536px){:root{--pico-font-size:131.25%}}a{--pico-text-decoration:underline}a.contrast,a.secondary{--pico-text-decoration:underline}small{--pico-font-size:0.875em}h1,h2,h3,h4,h5,h6{--pico-font-weight:700}h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-outline-width:0.0625rem}[type=search]{--pico-border-radius:5rem}[type=checkbox],[type=radio]{--pico-border-width:0.125rem}[type=checkbox][role=switch]{--pico-border-width:0.1875rem}details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}[role=search]{--pico-border-radius:5rem}[role=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}[role=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] button{--pico-form-element-spacing-horizontal:2rem}details summary[role=button]:not(.outline)::after{filter:brightness(0) invert(1)}[aria-busy=true]:not(input,select,textarea):is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0) invert(1)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(2, 154, 232, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#0172ad;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 114, 173, 0.5);--pico-primary-hover:#015887;--pico-primary-hover-background:#02659a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(2, 154, 232, 0.5);--pico-primary-inverse:#fff;--pico-secondary:#5d6b89;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(93, 107, 137, 0.5);--pico-secondary-hover:#48536b;--pico-secondary-hover-background:#48536b;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(93, 107, 137, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#181c25;--pico-contrast-background:#181c25;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(24, 28, 37, 0.5);--pico-contrast-hover:#000;--pico-contrast-hover-background:#000;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-secondary-hover);--pico-contrast-focus:rgba(93, 107, 137, 0.25);--pico-contrast-inverse:#fff;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),0 0 0 0.0625rem rgba(129, 145, 181, 0.015);--pico-h1-color:#2d3138;--pico-h2-color:#373c44;--pico-h3-color:#424751;--pico-h4-color:#4d535e;--pico-h5-color:#5c6370;--pico-h6-color:#646b79;--pico-mark-background-color:#fde7c0;--pico-mark-color:#0f1114;--pico-ins-color:#1d6a54;--pico-del-color:#883935;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#f3f5f7;--pico-code-color:#646b79;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#fbfcfc;--pico-form-element-selected-background-color:#dfe3eb;--pico-form-element-border-color:#cfd5e2;--pico-form-element-color:#23262c;--pico-form-element-placeholder-color:var(--pico-muted-color);--pico-form-element-active-background-color:#fff;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#b86a6b;--pico-form-element-invalid-active-border-color:#c84f48;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#4c9b8a;--pico-form-element-valid-active-border-color:#279977;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#bfc7d9;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#dfe3eb;--pico-range-active-border-color:#bfc7d9;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:var(--pico-background-color);--pico-card-border-color:var(--pico-muted-border-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#fbfcfc;--pico-dropdown-background-color:#fff;--pico-dropdown-border-color:#eff1f4;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#eff1f4;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(232, 234, 237, 0.75);--pico-progress-background-color:#dfe3eb;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:light}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]){--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}:root:not([data-theme]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}:root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}:root:not([data-theme]) [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}}[data-theme=dark]{--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}[data-theme=dark] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}[data-theme=dark] details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}[data-theme=dark] [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{text-decoration:inherit;vertical-align:inherit}:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family);text-underline-offset:var(--pico-text-underline-offset);text-rendering:optimizeLegibility;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:1024px){.container{max-width:950px}}@media (min-width:1280px){.container{max-width:1200px}}@media (min-width:1536px){.container{max-width:1450px}}.grid{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}address,blockquote,dl,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-style:normal;font-weight:var(--pico-font-weight)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family)}h1{--pico-color:var(--pico-h1-color)}h2{--pico-color:var(--pico-h2-color)}h3{--pico-color:var(--pico-h3-color)}h4{--pico-color:var(--pico-h4-color)}h5{--pico-color:var(--pico-h5-color)}h6{--pico-color:var(--pico-h6-color)}:where(article,address,blockquote,dl,figure,form,ol,p,pre,table,ul)~:is(h1,h2,h3,h4,h5,h6){margin-top:var(--pico-typography-spacing-top)}p{margin-bottom:var(--pico-typography-spacing-vertical)}hgroup{margin-bottom:var(--pico-typography-spacing-vertical)}hgroup>*{margin-top:0;margin-bottom:0}hgroup>:not(:first-child):last-child{--pico-color:var(--pico-muted-color);--pico-font-weight:unset;font-size:1rem}:where(ol,ul) li{margin-bottom:calc(var(--pico-typography-spacing-vertical) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--pico-mark-background-color);color:var(--pico-mark-color);vertical-align:baseline}blockquote{display:block;margin:var(--pico-typography-spacing-vertical) 0;padding:var(--pico-spacing);border-right:none;border-left:.25rem solid var(--pico-blockquote-border-color);border-inline-start:0.25rem solid var(--pico-blockquote-border-color);border-inline-end:none}blockquote footer{margin-top:calc(var(--pico-typography-spacing-vertical) * .5);color:var(--pico-blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--pico-ins-color);text-decoration:none}del{color:var(--pico-del-color)}::-moz-selection{background-color:var(--pico-text-selection-color)}::selection{background-color:var(--pico-text-selection-color)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;background-color:var(--pico-background-color);color:var(--pico-color);-webkit-text-decoration:var(--pico-text-decoration);text-decoration:var(--pico-text-decoration);text-decoration-color:var(--pico-underline);text-underline-offset:0.125em;transition:background-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition)}:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-primary-hover);--pico-underline:var(--pico-primary-hover-underline);--pico-text-decoration:underline}:where(a:not([role=button])):focus-visible,[role=link]:focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}:where(a:not([role=button])).secondary,[role=link].secondary{--pico-color:var(--pico-secondary);--pico-underline:var(--pico-secondary-underline)}:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[role=link].secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-underline:var(--pico-secondary-hover-underline)}:where(a:not([role=button])).contrast,[role=link].contrast{--pico-color:var(--pico-contrast);--pico-underline:var(--pico-contrast-underline)}:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[role=link].contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-underline:var(--pico-contrast-hover-underline)}a[role=button]{display:inline-block}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],button{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);--pico-color:var(--pico-primary-inverse);--pico-box-shadow:var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:1rem;line-height:var(--pico-line-height);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--pico-background-color:var(--pico-primary-hover-background);--pico-border-color:var(--pico-primary-hover-border);--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));--pico-color:var(--pico-primary-inverse)}[role=button]:focus,[role=button]:is([aria-current]:not([aria-current=false])):focus,[type=button]:focus,[type=button]:is([aria-current]:not([aria-current=false])):focus,[type=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,button:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}[type=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--pico-background-color:var(--pico-secondary-background);--pico-border-color:var(--pico-secondary-border);--pico-color:var(--pico-secondary-inverse);cursor:pointer}:is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border);--pico-color:var(--pico-secondary-inverse)}:is(button,[type=submit],[type=button],[role=button]).secondary:focus,:is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,[type=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}:is(button,[type=submit],[type=button],[role=button]).contrast{--pico-background-color:var(--pico-contrast-background);--pico-border-color:var(--pico-contrast-border);--pico-color:var(--pico-contrast-inverse)}:is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-contrast-hover-background);--pico-border-color:var(--pico-contrast-hover-border);--pico-color:var(--pico-contrast-inverse)}:is(button,[type=submit],[type=button],[role=button]).contrast:focus,:is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}:is(button,[type=submit],[type=button],[role=button]).outline,[type=reset].outline{--pico-background-color:transparent;--pico-color:var(--pico-primary);--pico-border-color:var(--pico-primary)}:is(button,[type=submit],[type=button],[role=button]).outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:transparent;--pico-color:var(--pico-primary-hover);--pico-border-color:var(--pico-primary-hover)}:is(button,[type=submit],[type=button],[role=button]).outline.secondary,[type=reset].outline{--pico-color:var(--pico-secondary);--pico-border-color:var(--pico-secondary)}:is(button,[type=submit],[type=button],[role=button]).outline.secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],:where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:left;text-align:start}tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}:where(iframe){border-style:none}img{max-width:100%;height:auto;border-style:none}:where(svg:not([fill])){fill:currentColor}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}figure{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}[hidden],template{display:none!important}canvas{display:inline-block}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:0}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2)}fieldset{width:100%;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),select,textarea{width:100%}input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}input,select,textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{opacity:var(--pico-form-element-disabled-opacity);pointer-events:none}label[aria-disabled=true] input[disabled]{opacity:1}:where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid]{padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal)!important;padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}:where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=false]:not(select){background-image:var(--pico-icon-valid)}:where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=true]:not(select){background-image:var(--pico-icon-invalid)}:where(input,select,textarea)[aria-invalid=false]{--pico-border-color:var(--pico-form-element-valid-border-color)}:where(input,select,textarea)[aria-invalid=false]:is(:active,:focus){--pico-border-color:var(--pico-form-element-valid-active-border-color)!important}:where(input,select,textarea)[aria-invalid=false]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color)!important}:where(input,select,textarea)[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}:where(input,select,textarea)[aria-invalid=true]:is(:active,:focus){--pico-border-color:var(--pico-form-element-invalid-active-border-color)!important}:where(input,select,textarea)[aria-invalid=true]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color)!important}[dir=rtl] :where(input,select,textarea):not([type=checkbox],[type=radio]):is([aria-invalid],[aria-invalid=true],[aria-invalid=false]){background-position:center left .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--pico-form-element-placeholder-color);opacity:1}input:not([type=checkbox],[type=radio]),select,textarea{margin-bottom:var(--pico-spacing)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple],[size]){padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal);padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);background-image:var(--pico-icon-chevron);background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}select[multiple] option:checked{background:var(--pico-form-element-selected-background-color);color:var(--pico-form-element-color)}[dir=rtl] select:not([multiple],[size]){background-position:center left .75rem}textarea{display:block;resize:vertical}textarea[aria-invalid]{--pico-icon-height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);background-position:top right .75rem!important;background-size:1rem var(--pico-icon-height)!important}:where(input,select,textarea,fieldset,.grid)+small{display:block;width:100%;margin-top:calc(var(--pico-spacing) * -.75);margin-bottom:var(--pico-spacing);color:var(--pico-muted-color)}:where(input,select,textarea,fieldset,.grid)[aria-invalid=false]+small{color:var(--pico-ins-color)}:where(input,select,textarea,fieldset,.grid)[aria-invalid=true]+small{color:var(--pico-del-color)}label>:where(input,select,textarea){margin-top:calc(var(--pico-spacing) * .25)}label:has([type=checkbox],[type=radio]){width:-moz-fit-content;width:fit-content;cursor:pointer}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25em;height:1.25em;margin-top:-.125em;margin-inline-end:.5em;border-width:var(--pico-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-checkbox);background-position:center;background-size:.75em auto;background-repeat:no-repeat}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-bottom:0;cursor:pointer}[type=checkbox]~label:not(:last-of-type),[type=radio]~label:not(:last-of-type){margin-inline-end:1em}[type=checkbox]:indeterminate{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-minus);background-position:center;background-size:.75em auto;background-repeat:no-repeat}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--pico-background-color:var(--pico-primary-inverse);border-width:.35em;background-image:none}[type=checkbox][role=switch]{--pico-background-color:var(--pico-switch-background-color);--pico-color:var(--pico-switch-color);width:2.25em;height:1.25em;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:1.25em;background-color:var(--pico-background-color);line-height:1.25em}[type=checkbox][role=switch]:not([aria-invalid]){--pico-border-color:var(--pico-switch-background-color)}[type=checkbox][role=switch]:before{display:block;aspect-ratio:1;height:100%;border-radius:50%;background-color:var(--pico-color);box-shadow:var(--pico-switch-thumb-box-shadow);content:"";transition:margin .1s ease-in-out}[type=checkbox][role=switch]:focus{--pico-background-color:var(--pico-switch-background-color);--pico-border-color:var(--pico-switch-background-color)}[type=checkbox][role=switch]:checked{--pico-background-color:var(--pico-switch-checked-background-color);--pico-border-color:var(--pico-switch-checked-background-color);background-image:none}[type=checkbox][role=switch]:checked::before{margin-inline-start:calc(2.25em - 1.25em)}[type=checkbox][role=switch][disabled]{--pico-background-color:var(--pico-border-color)}[type=checkbox][aria-invalid=false]:checked,[type=checkbox][aria-invalid=false]:checked:active,[type=checkbox][aria-invalid=false]:checked:focus,[type=checkbox][role=switch][aria-invalid=false]:checked,[type=checkbox][role=switch][aria-invalid=false]:checked:active,[type=checkbox][role=switch][aria-invalid=false]:checked:focus{--pico-background-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true]{--pico-background-color:var(--pico-form-element-invalid-border-color)}[type=checkbox][aria-invalid=false]:checked,[type=checkbox][aria-invalid=false]:checked:active,[type=checkbox][aria-invalid=false]:checked:focus,[type=checkbox][role=switch][aria-invalid=false]:checked,[type=checkbox][role=switch][aria-invalid=false]:checked:active,[type=checkbox][role=switch][aria-invalid=false]:checked:focus,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}input:not([type=checkbox],[type=radio],[type=range],[type=file]):is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--pico-icon-position:0.75rem;--pico-icon-width:1rem;padding-right:calc(var(--pico-icon-width) + var(--pico-icon-position));background-image:var(--pico-icon-date);background-position:center right var(--pico-icon-position);background-size:var(--pico-icon-width) auto;background-repeat:no-repeat}input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=time]{background-image:var(--pico-icon-time)}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{width:var(--pico-icon-width);margin-right:calc(var(--pico-icon-width) * -1);margin-left:var(--pico-icon-position);opacity:0}@-moz-document url-prefix(){[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{padding-right:var(--pico-form-element-spacing-horizontal)!important;background-image:none!important}}[dir=rtl] :is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){text-align:right}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal)}[type=file]:is(:hover,:active,:focus)::file-selector-button{--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border)}[type=file]:focus::file-selector-button{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-webkit-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}[type=range]::-moz-range-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-moz-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}[type=range]::-ms-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-ms-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-webkit-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-moz-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-ms-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}[type=range]:active,[type=range]:focus-within{--pico-range-border-color:var(--pico-range-active-border-color);--pico-range-thumb-color:var(--pico-range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);background-image:var(--pico-icon-search);background-position:center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);background-size:1rem auto;background-repeat:no-repeat}input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem)!important;background-position:center left 1.125rem,center right .75rem}input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=false]{background-image:var(--pico-icon-search),var(--pico-icon-valid)}input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=true]{background-image:var(--pico-icon-search),var(--pico-icon-invalid)}[dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{background-position:center right 1.125rem}[dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{background-position:center right 1.125rem,center left .75rem}details{display:block;margin-bottom:var(--pico-spacing)}details summary{line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--pico-transition)}details summary:not([role]){color:var(--pico-accordion-close-summary-color)}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary::after{display:block;width:1rem;height:1rem;margin-inline-start:calc(var(--pico-spacing,1rem) * .5);float:right;transform:rotate(-90deg);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:"";transition:transform var(--pico-transition)}details summary:focus{outline:0}details summary:focus:not([role]){color:var(--pico-accordion-active-summary-color)}details summary:focus-visible:not([role]){outline:var(--pico-outline-width) solid var(--pico-primary-focus);outline-offset:calc(var(--pico-spacing,1rem) * 0.5);color:var(--pico-primary)}details summary[role=button]{width:100%;text-align:left}details summary[role=button]::after{height:calc(1rem * var(--pico-line-height,1.5))}details[open]>summary{margin-bottom:var(--pico-spacing)}details[open]>summary:not([role]):not(:focus){color:var(--pico-accordion-open-summary-color)}details[open]>summary::after{transform:rotate(0)}[dir=rtl] details summary{text-align:right}[dir=rtl] details summary::after{float:left;background-position:left center}article{margin-bottom:var(--pico-block-spacing-vertical);padding:var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);border-radius:var(--pico-border-radius);background:var(--pico-card-background-color);box-shadow:var(--pico-card-box-shadow)}article>footer,article>header{margin-right:calc(var(--pico-block-spacing-horizontal) * -1);margin-left:calc(var(--pico-block-spacing-horizontal) * -1);padding:calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);background-color:var(--pico-card-sectioning-background-color)}article>header{margin-top:calc(var(--pico-block-spacing-vertical) * -1);margin-bottom:var(--pico-block-spacing-vertical);border-bottom:var(--pico-border-width) solid var(--pico-card-border-color);border-top-right-radius:var(--pico-border-radius);border-top-left-radius:var(--pico-border-radius)}article>footer{margin-top:var(--pico-block-spacing-vertical);margin-bottom:calc(var(--pico-block-spacing-vertical) * -1);border-top:var(--pico-border-width) solid var(--pico-card-border-color);border-bottom-right-radius:var(--pico-border-radius);border-bottom-left-radius:var(--pico-border-radius)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.2rem);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:""}nav details.dropdown{margin-bottom:0}details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-form-element-background-color);color:var(--pico-form-element-placeholder-color);line-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}details.dropdown summary:not([role]):active,details.dropdown summary:not([role]):focus{border-color:var(--pico-form-element-active-border-color);background-color:var(--pico-form-element-active-background-color)}details.dropdown summary:not([role]):focus{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}details.dropdown summary:not([role]):focus-visible{outline:0}details.dropdown summary:not([role])[aria-invalid=false]{--pico-form-element-border-color:var(--pico-form-element-valid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-valid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-valid-focus-color)}details.dropdown summary:not([role])[aria-invalid=true]{--pico-form-element-border-color:var(--pico-form-element-invalid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-invalid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-invalid-focus-color)}nav details.dropdown{display:inline;margin:calc(var(--pico-nav-element-spacing-vertical) * -1) 0}nav details.dropdown summary::after{transform:rotate(0) translateX(0)}nav details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}nav details.dropdown summary:not([role]):focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}details.dropdown summary+ul{display:flex;z-index:99;position:absolute;left:0;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;margin:0;margin-top:var(--pico-outline-width);padding:0;border:var(--pico-border-width) solid var(--pico-dropdown-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-dropdown-background-color);box-shadow:var(--pico-dropdown-box-shadow);color:var(--pico-dropdown-color);white-space:nowrap;opacity:0;transition:opacity var(--pico-transition),transform 0s ease-in-out 1s}details.dropdown summary+ul[dir=rtl]{right:0;left:auto}details.dropdown summary+ul li{width:100%;margin-bottom:0;padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);list-style:none}details.dropdown summary+ul li:first-of-type{margin-top:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);overflow:hidden;border-radius:0;color:var(--pico-dropdown-color);text-decoration:none;text-overflow:ellipsis}details.dropdown summary+ul li a:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,details.dropdown summary+ul li a[aria-current]:not([aria-current=false]){background-color:var(--pico-dropdown-hover-background-color)}details.dropdown summary+ul li label{width:100%}details.dropdown summary+ul li:has(label):hover{background-color:var(--pico-dropdown-hover-background-color)}details.dropdown[open] summary{margin-bottom:0}details.dropdown[open] summary+ul{transform:scaleY(1);opacity:1;transition:opacity var(--pico-transition),transform 0s ease-in-out 0s}details.dropdown[open] summary::before{display:block;z-index:1;position:fixed;width:100vw;height:100vh;inset:0;background:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{display:inline-flex;position:relative;width:100%;margin-bottom:var(--pico-spacing);border-radius:var(--pico-border-radius);box-shadow:var(--pico-group-box-shadow,0 0 0 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)}[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select,[role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),[role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--pico-button-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-border);--pico-button-hover-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-hover-border)}[role=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] button:focus{box-shadow:none}}[role=search]>:first-child{border-top-left-radius:5rem;border-bottom-left-radius:5rem}[role=search]>:last-child{border-top-right-radius:5rem;border-bottom-right-radius:5rem}[aria-busy=true]:not(input,select,textarea,html){white-space:nowrap}[aria-busy=true]:not(input,select,textarea,html)::before{display:inline-block;width:1em;height:1em;background-image:var(--pico-icon-loading);background-size:1em auto;background-repeat:no-repeat;content:"";vertical-align:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}:root{--pico-scrollbar-width:0px}dialog{display:flex;z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;width:inherit;min-width:100%;height:inherit;min-height:100%;padding:0;border:0;-webkit-backdrop-filter:var(--pico-modal-overlay-backdrop-filter);backdrop-filter:var(--pico-modal-overlay-backdrop-filter);background-color:var(--pico-modal-overlay-background-color);color:var(--pico-color)}dialog article{width:100%;max-height:calc(100vh - var(--pico-spacing) * 2);margin:var(--pico-spacing);overflow:auto}@media (min-width:576px){dialog article{max-width:510px}}@media (min-width:768px){dialog article{max-width:700px}}dialog article>header>*{margin-bottom:0}dialog article>header .close,dialog article>header :is(a,button)[rel=prev]{margin:0;margin-left:var(--pico-spacing);padding:0;float:right}dialog article>footer{text-align:right}dialog article>footer [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .5)}dialog article .close,dialog article :is(a,button)[rel=prev]{display:block;width:1rem;height:1rem;margin-top:calc(var(--pico-spacing) * -1);margin-bottom:var(--pico-spacing);margin-left:auto;border:none;background-image:var(--pico-icon-close);background-position:center;background-size:auto 1rem;background-repeat:no-repeat;background-color:transparent;opacity:.5;transition:opacity var(--pico-transition)}dialog article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),dialog article :is(a,button)[rel=prev]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){opacity:1}dialog:not([open]),dialog[open=false]{display:none}.modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}.modal-is-open dialog{pointer-events:auto;touch-action:auto}:where(.modal-is-opening,.modal-is-closing) dialog,:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}.modal-is-closing dialog,.modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{from{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent}}@keyframes modal{from{transform:translateY(-100%);opacity:0}}:where(nav li)::before{float:left;content:"​"}nav,nav ul{display:flex}nav{justify-content:space-between;overflow:visible}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}nav li :where(a,[role=link]):not(:hover){text-decoration:none}nav li [role=button],nav li [type=button],nav li button,nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb]{align-items:center;justify-content:start}nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}aside li a{display:block}aside li [role=button]{margin:inherit}[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}progress::-moz-progress-bar{background-color:var(--pico-progress-color)}@media (prefers-reduced-motion:no-preference){progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}[data-tooltip]:focus::after,[data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}@keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}@keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}
/* css/tl/tokens.css */
/* ==========================================================================
   Sports Index — "Terminal Light" tokens (design_handoff_terminal_light).
   Loaded site-wide, right after Pico. Light values are the handoff's exact
   literals. Every grey is the ink colour at an alpha, so dark mode only has
   to flip --tl-ink-rgb and the surfaces.

   Theme switch: html.si-light = light (site default); no class = dark.
   base.html's head script and siToggleTheme() own the class and persist it
   to localStorage['si-theme'].
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/static/fonts/robotomono-Variable.ttf') format('truetype'); }

:root {
  /* ---- Ink. rgb list so alphas can be derived: rgba(var(--tl-ink-rgb), a) ---- */
  --tl-ink-rgb: 16, 20, 24;
  --tl-ink: rgb(var(--tl-ink-rgb));
  --tl-ink-90: rgba(var(--tl-ink-rgb), 0.9);
  --tl-ink-75: rgba(var(--tl-ink-rgb), 0.75);
  --tl-ink-70: rgba(var(--tl-ink-rgb), 0.7);
  --tl-ink-65: rgba(var(--tl-ink-rgb), 0.65);
  --tl-ink-62: rgba(var(--tl-ink-rgb), 0.62);   /* inactive nav text */
  --tl-ink-60: rgba(var(--tl-ink-rgb), 0.6);    /* secondary copy, links */
  --tl-ink-55: rgba(var(--tl-ink-rgb), 0.55);   /* inactive segmented text */
  --tl-ink-50: rgba(var(--tl-ink-rgb), 0.5);    /* meta, sub-labels, column heads */
  --tl-ink-45: rgba(var(--tl-ink-rgb), 0.45);   /* mono kickers, timestamps */
  --tl-ink-40: rgba(var(--tl-ink-rgb), 0.4);    /* non-top rank numbers */
  --tl-ink-35: rgba(var(--tl-ink-rgb), 0.35);   /* flat-move dash, dimmed bars */
  --tl-line-20: rgba(var(--tl-ink-rgb), 0.2);   /* SOON tag outline */
  --tl-line-18: rgba(var(--tl-ink-rgb), 0.18);  /* dashed chips, odds underdog bar */
  --tl-line-15: rgba(var(--tl-ink-rgb), 0.15);  /* idle progress dots */
  --tl-line-14: rgba(var(--tl-ink-rgb), 0.14);  /* dashed sidebar card */
  --tl-line-12: rgba(var(--tl-ink-rgb), 0.12);  /* button outlines */
  --tl-line-10: rgba(var(--tl-ink-rgb), 0.1);   /* inputs, chips */
  --tl-line-08: rgba(var(--tl-ink-rgb), 0.08);
  --tl-line-07: rgba(var(--tl-ink-rgb), 0.07);  /* card border, band bottom rule */
  --tl-line-06: rgba(var(--tl-ink-rgb), 0.06);  /* rules under card headers */
  --tl-line-05: rgba(var(--tl-ink-rgb), 0.05);  /* dividers between rows */
  --tl-fill-07: rgba(var(--tl-ink-rgb), 0.07);  /* active sidebar conference */
  --tl-fill-06: rgba(var(--tl-ink-rgb), 0.06);  /* active nav bg */
  --tl-fill-05: rgba(var(--tl-ink-rgb), 0.05);  /* segmented track, league pill */
  --tl-fill-045: rgba(var(--tl-ink-rgb), 0.045);/* spotlight / own-row band */
  --tl-fill-04: rgba(var(--tl-ink-rgb), 0.04);  /* sidebar hover */
  --tl-fill-035: rgba(var(--tl-ink-rgb), 0.035);/* expanded row panel */
  --tl-fill-03: rgba(var(--tl-ink-rgb), 0.03);  /* row hover, search bg */
  --tl-fill-025: rgba(var(--tl-ink-rgb), 0.025);/* table column-head strip */

  /* ---- Surfaces ---- */
  --tl-page: #f4f5f7;                 /* page background */
  --tl-card: #fafafb;                 /* card surface as a solid colour */
  --tl-card-bg: #fafafb;              /* card background shorthand (a gradient in dark) */
  /* A card's two surfaces (components.css .tl-card): the head, the card
     colour frosted, and the body under it, flat and a step darker. Both
     follow --tl-card and --tl-page, so one line serves both themes. */
  --tl-card-head: color-mix(in srgb, var(--tl-card) 60%, transparent);
  --tl-card-body: color-mix(in srgb, var(--tl-card) 55%, var(--tl-page));
  --tl-control: #ffffff;              /* controls on cards, active segment, "next" rows */
  --tl-header-glass: rgba(244, 245, 247, 0.88);
  --tl-logo-chip: #eceef1;            /* round tile behind small crests */
  --tl-on-ink: #ffffff;               /* text on an ink button or chip */
  --tl-ink-hover: #000000;            /* ink button hover */
  --tl-tooltip-bg: #101418;           /* dark tooltip in both themes */
  --tl-tooltip-ink: #ffffff;

  /* ---- Semantic ---- */
  --tl-up: #15803d;        /* rank up, HIT, live status text */
  --tl-up-bg: rgba(22, 163, 74, 0.1);
  --tl-live: #22c55e;      /* live dot */
  --tl-live-strong: #16a34a;
  --tl-down: #c42b2b;      /* rank down, MISS, losses */
  --tl-down-bg: rgba(220, 38, 38, 0.08);
  --tl-pro: #0088d1;       /* PRO tag text: the one blue */
  --tl-pro-line: rgba(0, 168, 255, 0.5);
  --tl-pro-ring: #00a8ff;  /* sidebar points ring */

  /* ---- Type ---- */
  --tl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tl-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Radii ---- */
  --tl-r-card: 10px;
  --tl-r-btn: 8px;
  --tl-r-chip: 7px;
  --tl-r-pill: 6px;
  --tl-r-seg-in: 5px;
  --tl-r-tag: 4px;

  /* ---- Shadows ---- */
  --tl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(16, 20, 24, 0.035);
  --tl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 28px -16px rgba(16, 20, 24, 0.3);
  --tl-float-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 20, 24, 0.07), 0 1px 2px rgba(16, 20, 24, 0.04), 0 12px 24px -16px rgba(16, 20, 24, 0.18);
  --tl-seg-on-shadow: 0 1px 2px rgba(16, 20, 24, 0.12), 0 0 0 1px rgba(16, 20, 24, 0.05);
  --tl-pick-shadow: inset 0 0 0 1.5px var(--tl-ink), 0 10px 24px -14px rgba(16, 20, 24, 0.35);
  --tl-focus-ring: 0 0 0 2px var(--tl-page), 0 0 0 4px var(--tl-ink);

  /* ---- Pixel field ---- */
  --tl-field-rgb: 16, 20, 24;
  --tl-field-opacity: 0.13;
  --tl-field-opacity-banner: 0.16;
  --tl-field-opacity-edges: 0.10;

  /* ---- Motion ---- */
  --tl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* the only easing curve */

  /* ---- Layout ---- */
  --tl-topbar-h: 56px;
  --tl-sidebar-w: 232px;
}

/* ---- Dark (README "Dark mode": real tokens, not the prototype's invert) ---- */
html:not(.si-light) {
  color-scheme: dark;
  --tl-ink-rgb: 242, 244, 246;                 /* ink #f2f4f6 */
  --tl-page: #14171b;
  --tl-card: #25282c;                          /* solid equivalent of .075 white on the page */
  --tl-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --tl-control: rgba(255, 255, 255, 0.08);
  --tl-header-glass: rgba(20, 23, 27, 0.86);
  --tl-logo-chip: rgba(255, 255, 255, 0.1);
  --tl-on-ink: #101418;
  --tl-ink-hover: #ffffff;
  --tl-tooltip-bg: #f2f4f6;
  --tl-tooltip-ink: #101418;

  --tl-up: #22c55e;
  --tl-up-bg: rgba(34, 197, 94, 0.14);
  --tl-down: #ef4444;
  --tl-down-bg: rgba(239, 68, 68, 0.14);
  --tl-pro: #38bdf8;

  --tl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --tl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.8);
  --tl-float-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px -16px rgba(0, 0, 0, 0.8);
  --tl-seg-on-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --tl-pick-shadow: inset 0 0 0 1.5px var(--tl-ink), 0 10px 24px -14px rgba(0, 0, 0, 0.8);

  --tl-field-rgb: 232, 236, 240;
  --tl-field-opacity: 0.10;
  --tl-field-opacity-banner: 0.12;
  --tl-field-opacity-edges: 0.08;
}

/* ---- Pico bridge. Pico is still loaded; any of its styles that leak onto a
   control (buttons, groups, inputs, links, focus rings) must read as ink,
   never Pico blue. html[data-theme] outranks Pico's own :root/[data-theme]
   declarations; the tokens above already flip for dark. ---- */
html[data-theme] {
  --pico-font-family: var(--tl-font);
  --pico-font-family-monospace: var(--tl-mono);
  --pico-background-color: var(--tl-page);
  --pico-color: var(--tl-ink);
  --pico-muted-color: var(--tl-ink-50);
  --pico-muted-border-color: var(--tl-line-07);
  --pico-primary: var(--tl-ink);
  --pico-primary-background: var(--tl-ink);
  --pico-primary-border: var(--tl-ink);
  --pico-primary-underline: var(--tl-line-20);
  --pico-primary-hover: var(--tl-ink);
  --pico-primary-hover-background: var(--tl-ink-hover);
  --pico-primary-hover-border: var(--tl-ink-hover);
  --pico-primary-hover-underline: var(--tl-ink);
  --pico-primary-focus: var(--tl-line-20);
  --pico-primary-inverse: var(--tl-on-ink);
  --pico-secondary: var(--tl-ink-60);
  --pico-secondary-background: var(--tl-fill-06);
  --pico-secondary-border: var(--tl-line-12);
  --pico-secondary-hover: var(--tl-ink);
  --pico-secondary-hover-background: var(--tl-fill-05);
  --pico-secondary-hover-border: var(--tl-line-18);
  --pico-secondary-focus: var(--tl-line-20);
  --pico-secondary-inverse: var(--tl-ink);
  --pico-contrast: var(--tl-ink);
  --pico-contrast-background: var(--tl-ink);
  --pico-contrast-inverse: var(--tl-on-ink);
  --pico-form-element-background-color: var(--tl-control);
  --pico-form-element-selected-background-color: var(--tl-fill-06);
  --pico-form-element-border-color: var(--tl-line-10);
  --pico-form-element-color: var(--tl-ink);
  --pico-form-element-placeholder-color: var(--tl-ink-45);
  --pico-form-element-active-background-color: var(--tl-control);
  --pico-form-element-active-border-color: var(--tl-ink);
  --pico-form-element-focus-color: var(--tl-line-20);
  --pico-switch-background-color: var(--tl-line-18);
  --pico-switch-checked-background-color: var(--tl-ink);
  --pico-switch-color: var(--tl-control);
  --pico-range-thumb-color: var(--tl-ink);
  --pico-range-active-border-color: var(--tl-ink);
  --pico-group-box-shadow: none;
  --pico-group-box-shadow-focus-with-button: none;
  --pico-group-box-shadow-focus-with-input: none;
  --pico-card-background-color: var(--tl-card);
  --pico-card-sectioning-background-color: var(--tl-card);
  --pico-card-box-shadow: var(--tl-card-shadow);
  --pico-dropdown-background-color: var(--tl-card);
  --pico-dropdown-border-color: var(--tl-line-07);
  --pico-dropdown-hover-background-color: var(--tl-fill-04);
  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.32);
  --pico-text-selection-color: var(--tl-line-20);
  --pico-mark-background-color: var(--tl-fill-06);
  --pico-mark-color: var(--tl-ink);
  --pico-ins-color: var(--tl-up);
  --pico-del-color: var(--tl-down);
  --pico-code-background-color: var(--tl-fill-04);
  --pico-code-color: var(--tl-ink);
  --pico-table-border-color: var(--tl-line-05);
  --pico-table-row-stripped-background-color: var(--tl-fill-025);
}

/* ---- Pico element resets that change shape, not just colour. Placed here
   (right after Pico, before page CSS) at Pico's own specificity, so they
   cancel Pico by source order while every page class rule still wins. ---- */
/* role=button on a non-button: Pico paints it as a centred primary button. */
[role="button"] {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; font: inherit; line-height: inherit; text-align: inherit;
}
/* aria-busy: Pico injects a spinner and forces nowrap. The design uses
   skeletons, so the attribute stays purely semantic. */
[aria-busy="true"]:not(input, select, textarea, html, form)::before { content: none !important; display: none !important; }
[aria-busy="true"]:not(input, select, textarea, html, form) { white-space: inherit !important; }

/* css/variables.css */
/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Substack-style dark platform aesthetic
   ======================================== */

/* Brand typeface — one bundled web font (Inter, variable) so every device
   renders identically instead of falling back to each OS's system font. The
   server-rendered share cards use the same Inter, so site + cards match. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* Canonical font stack — Inter first, system fonts as fallback before load. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Override Pico's default body font so the whole UI uses Inter. */
  --pico-font-family: var(--font-sans);

  /* Primary Colors - Electric blue accent */
  --color-primary: #00a8ff;
  --color-primary-rgb: 0, 168, 255;
  --color-primary-light: rgba(0, 168, 255, 0.15);
  --color-primary-medium: rgba(0, 168, 255, 0.3);
  --color-primary-dark: rgba(0, 168, 255, 0.6);
  --color-primary-glow: 0 0 14px rgba(0, 168, 255, 0.5);
  
  /* Background Colors - Dark mode */
  --color-bg-primary: #14171b;
  --color-bg-primary-rgb: 20, 23, 27;
  --color-bg-base: #14171b;
  --color-bg-base-rgb: 20, 23, 27;
  --color-bg-base-darker: #0b0d10;
  --color-bg-base-mid: #1d2128;
  --color-bg-base-light: #252a33;
  --color-bg-card: rgba(30, 32, 40, 0.9);
  --color-bg-card-rgb: 30, 32, 40;
  --color-bg-card-hover: rgba(40, 42, 52, 0.95);
  --color-bg-overlay: rgba(20, 23, 27, 0.98);
  --color-bg-transparent: transparent;
  
  /* Text Colors (Dark Mode) */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.75);
  --color-text-muted: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.35);
  --color-text-input: #e0e0e0;
  
  /* Border Colors - More neutral, less blue (Dark Mode) */
  --color-border-primary: rgba(0, 168, 255, 0.5);
  --color-border-secondary: rgba(255, 255, 255, 0.06);
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-border-muted: rgba(255, 255, 255, 0.02);
  
  /* Shadow Colors */
  --color-shadow-primary: rgba(0, 168, 255, 0.25);
  --color-shadow-secondary: rgba(0, 0, 0, 0.4);
  --color-shadow-glow: rgba(0, 168, 255, 0.3);
  
  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 2.5rem;
  --spacing-4xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 50%;
  --radius-pill: 2rem;
  
  /* Typography */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index Scale */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1000;
  --z-modal: 10000;
  
  /* Backdrop Blur */
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(12px);
  --blur-xl: blur(16px);
}

/* css/base.css */
/* ========================================
   BASE STYLES - Global styles, resets, typography
   Clean platform aesthetic
   ======================================== */

/* Remove focus outline globally */
*:focus,
*:focus-visible,
*:focus-within,
*:active {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ensure buttons never show focus ring */
button:focus,
button:focus-visible,
button:active,
a:focus,
a:focus-visible,
a:active,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="button"]:active {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none;
}

/* Flat background */
/* Standardize the whole UI on Inter (see variables.css @font-face). Form
   controls don't inherit font by default, so set them explicitly. */
html,
body {
  font-family: var(--font-sans);
}
button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  position: relative;
  /* clip, NOT hidden: `hidden` defeats body→viewport overflow propagation and
     turns <body> into its own scroll container on top of the document scroll —
     the site-wide double scrollbar. `clip` clips the x-axis without creating a
     scroll container (and keeps position:sticky working). Same lesson as
     shared/core.css's explore-page rule. */
  overflow-x: clip;
  background: #14171b;
  min-height: 100vh;
  color: var(--color-text-primary);
  padding-top: var(--site-nav-h, 57px);
}

/* ========================================
   GLOBAL AMBIENT ANIMATION (Solar Storm)
   ======================================== */

.global-ambient-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.global-ambient-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ensure page content sits above ambient animation */
.top-nav-bar,
main,
footer,
header,
section,
.container {
  position: relative;
  z-index: 1;
}

/* ========================================
   LIGHT MODE - Complete Theme Overrides
   ======================================== */

/* Background */
@keyframes backgroundShiftLight {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* Top Navigation */
/* Footer */
/* Search */
/* Hero Subtitle */
/* Dropdown menus */
/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */

.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--color-shadow-secondary);
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px var(--color-shadow-primary);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(15deg);
}

.theme-toggle-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Hide label on mobile */
@media (max-width: 480px) {
  .theme-toggle-label {
    display: none;
  }
  
  .theme-toggle {
    padding: 0.6rem;
  }
}

/* Hide scrollbar chrome site-wide without disabling mouse, touch or keyboard scrolling. */
html, body, * { scrollbar-width:none !important; scrollbar-gutter:auto !important; }
html { overflow-y:auto; }
*::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar {
  display:none !important; width:0 !important; height:0 !important;
}

/* Header and Main Container Structure */
/* Header contains fixed-position nav buttons, so it shouldn't take up document flow space */
header.container {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  max-width: 100%;
}

header.container nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

header.container nav ul {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

header.container nav ul:first-child {
  flex: 0 0 auto;
}

header.container nav ul:last-child {
  flex: 1;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}

/* Main container - content starts right after stats bar */
main.container {
  padding-top: 0;
}

/* ========================================
   HERO BRAND TITLE COMPONENT - HIDDEN BY DEFAULT
   The big Sports Index title is now hidden globally
   ======================================== */

/* Hide hero brand sections globally */
.hero-brand-section,
.hero-brand-title,
.hero-brand-tagline,
.hero-brand-link,
.brand-dash,
.explore-hero {
  display: none !important;
}

/* ========================================
   PROMINENT SEARCH BAR
   Full-width centered search bar replacing the hero title
   ======================================== */

/* Explore Hero Section - Subtitle only (logo moved to nav) */
.explore-hero-section {
  text-align: center;
  padding: 1.5rem 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Hero Subtitle with Rotating Text */
.explore-hero-subtitle {
  margin: 0;
  max-width: 400px;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 768px) {
  .prominent-search-row .explore-hero-subtitle {
    text-align: center;
    max-width: 100%;
  }
}

.rotating-text-wrapper {
  display: inline-block;
  position: relative;
  min-width: 80px;
  text-align: left;
}

.rotating-text {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  animation: rotateTextFade 0.4s ease;
}

@keyframes rotateTextFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .explore-hero-section {
    padding: 1rem 1rem 0;
  }

  .explore-hero-subtitle {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .explore-hero-section {
    padding: 0.75rem 0.75rem 0;
  }

  .explore-hero-subtitle {
    font-size: 0.8rem;
  }
}

.prominent-search-section {
  /* Position below nav */
  padding: 1.5rem 0 0.75rem;
  text-align: center;
  /* Establish stacking context so dropdown appears above timeline sections */
  position: relative;
  z-index: var(--z-dropdown);
}

.prominent-search-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
}

.prominent-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}


.prominent-search-input {
  width: 100%;
  height: 40px;
  padding: 0 2.5rem 0 1.25rem;
  background: var(--color-bg-base-mid);
  border: 1px solid rgba(0, 168, 255, 0.35);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.prominent-search-input:hover {
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.2);
}

.prominent-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 16px rgba(0, 168, 255, 0.35), 0 0 0 2px rgba(0, 168, 255, 0.15);
}

.prominent-search-input::placeholder {
  color: var(--color-text-muted);
}

.prominent-clear-search {
  position: absolute;
  right: 1rem;
  top: 10px;
  background: none;
  border: none;
  color: var(--color-text-disabled);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s ease;
  display: none;
}

.prominent-clear-search:hover {
  color: var(--color-primary);
}

.prominent-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--color-bg-base-mid);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.prominent-search-results::-webkit-scrollbar {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .prominent-search-section {
    padding: 2rem 0 1.5rem;
  }
  
  .prominent-search-input {
    height: 50px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .prominent-search-input {
    height: 36px;
    font-size: 0.85rem;
  }
}

/* ========================================
   SITE FOOTER - Clean minimal style
   ======================================== */

.site-footer {
  margin-top: 4rem;
  padding: 3rem 0 1.5rem;
  background: #14171b; /* Match site background */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

/* Brand Column */
.footer-brand {
  max-width: 280px;
}

/* Brand mark + tagline + social chip — same treatment as the explore page's
   footer band (favicon + italic wordmark, bordered follow chip). */
.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0.75rem;
}

.footer-brand-mark img {
  border-radius: 6px;
  display: block;
}

.footer-tagline {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin: 0 0 1.1rem 0;
}

.footer-social-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  width: fit-content;
  transition: border-color 0.15s, color 0.15s;
}

.footer-social-chip:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Footer Columns */
.footer-column {
  min-width: 120px;
}

.footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-primary);
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-muted);
}

.footer-copyright {
  font-size: 0.8rem;
  color: var(--color-text-disabled);
  margin: 0;
}

.footer-disclaimer {
  font-size: 0.75rem;
  color: var(--color-text-disabled);
  margin: 0;
}

/* Footer Responsive */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 2rem 0 1rem;
  }
  
  .footer-container {
    padding: 0 1rem;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-brand {
    grid-column: span 1;
    text-align: center;
    max-width: 100%;
  }

  .footer-column {
    text-align: center;
  }

  .footer-links,
  .footer-links li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ============================================================================
   Top Navigation Bar (Sticky - replaces carousel)
   ============================================================================ */

/* Transparent at the top of the page; solid + blurred once the user scrolls
   (body.nav-scrolled, toggled in navigation.js). Applies to every page,
   including /explore. */
.top-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 0;
  transition: background 0.3s, backdrop-filter 0.3s;
}

body.nav-scrolled .top-nav-bar {
  background: rgba(20, 23, 27, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.top-nav-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.25rem;
}

.top-nav-left,
.top-nav-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Nav Brand (Logo + Text) in sticky bar */
.nav-brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.nav-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 16px rgba(0, 168, 255, 0.4);
}

@media (max-width: 768px) {
  .nav-logo {
    box-shadow: none;
  }
}

.nav-brand-text {
  font-size: 1.1rem;
  font-weight: 600;
  /* Oblique slant of the roman (avoid Inter true-italic's cursive letterforms). */
  font-style: normal;
  display: inline-block;
  transform: skewX(-10deg);
  transform-origin: 0 100%;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.nav-brand-link:hover .nav-logo {
  transform: scale(1.05);
}

.nav-brand-link:hover .nav-brand-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Hide brand text on smaller screens to save space — the narrow bar is
   logo + search on every page. */
@media (max-width: 900px) {
  .nav-brand-text {
    display: none;
  }
}

.top-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Global search bar - visible on all pages */
.nav-global-search {
  display: block;
  width: 400px;
}

/* Global search bar in nav */
.nav-global-search {
  position: relative;
}

.nav-global-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-global-search-input {
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 2rem 0 0.75rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.85rem;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.nav-global-search-input::placeholder {
  color: var(--color-text-muted);
}

.nav-global-search-input:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none;
}

.nav-global-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none;
}

.nav-global-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.nav-global-search-clear:hover {
  color: var(--color-text-primary);
}

.nav-global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  /* Opaque, but tinted like the page's card surfaces — a flat
     --color-bg-base slab reads darker than the page around it. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    var(--color-bg-base);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-global-search-results::-webkit-scrollbar {
  display: none;
}

.nav-global-search-results .search-result-preview {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #fff;
  object-fit: cover;
}

/* Team logos are dark-theme variants (white marks) — the #fff above is for
   athlete headshots (which cover the box) and would erase the logo. Restore
   the slate surface + contain fit, matching the explore hero dropdown. This
   needs to out-specify the rule above, hence the nav scope. */
.nav-global-search-results .search-result-preview--team {
  background: linear-gradient(135deg, #2e3742, #222a33);
  object-fit: contain;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-global-search-results .search-result-preview-placeholder {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #fff;
}

.nav-global-search-results .search-result-name {
  font-size: 0.95rem;
}

.top-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.top-nav-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.top-nav-link.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Responsive: Adjust link padding on smaller screens */
@media (max-width: 1024px) {
  .top-nav-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }

  .top-nav-center {
    gap: 0.25rem;
  }

  .nav-center-links {
    gap: 0.25rem;
  }
}

/* Responsive: Adjust center on mobile */
@media (max-width: 768px) {
  /* Mobile bar = logo + full-width search (+ account avatar when logged in).
     The wordmark, docs link, and Log In / Sign Up all yield their width to
     the search; auth stays reachable through /login and page CTAs. */
  .top-nav-left {
    display: flex;
  }

  /* !important: updateNavAuthState sets inline display on #navSignIn/#navSignUp */
  .nav-docs-btn,
  .nav-auth-btn {
    display: none !important;
  }

  .top-nav-right .nav-dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
  }

  .top-nav-center {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    margin: 0;
    margin-left: 0.75rem;
  }

  .nav-global-search {
    width: 100%;
  }

  /* 16px floor stops iOS Safari's auto-zoom on input focus. */
  .nav-global-search-input {
    font-size: 16px;
  }

  .nav-page-links {
    display: none !important;
  }

  .top-nav-container {
    padding: 0 1rem;
  }
}

/* ============================================================================
   Topic Carousel (Global - appears on all pages) - HIDDEN
   ============================================================================ */

.topic-carousel-section {
  /* Hidden visually but code remains functional */
  display: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.5rem 0;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fade effect on left and right - uses transparent gradients since bar is transparent */
.topic-carousel-section::before,
.topic-carousel-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 10;
  pointer-events: none;
}

.topic-carousel-section::before {
  left: 0;
  background: linear-gradient(to right, rgba(35, 37, 40, 0.9) 0%, transparent 100%);
}

.topic-carousel-section::after {
  right: 0;
  background: linear-gradient(to left, rgba(35, 37, 40, 0.9) 0%, transparent 100%);
}

.topic-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.35rem 0;
}

.topic-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.topic-carousel-track {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.5rem;
  min-width: min-content;
  will-change: transform;
}

.topic-carousel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 200px;
  height: 60px;
}

/* Topic carousel cards - compact style */
.topic-carousel-card {
  flex-shrink: 0;
  width: 110px;
  height: 65px;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  border: 1px solid var(--color-border-secondary);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background: #000;
}

.topic-carousel-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.topic-carousel-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

/* Legacy overlay - now handled by mask-image */
.topic-carousel-card-overlay {
  display: none;
}

.topic-carousel-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.35rem 0.5rem;
  z-index: 2;
}

.topic-carousel-card-name {
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fallback for topics without media */
.topic-carousel-card-no-media {
  background: linear-gradient(135deg, var(--color-bg-base-light) 0%, var(--color-bg-base-mid) 100%);
}

.topic-carousel-card-no-media .topic-carousel-card-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.topic-carousel-card-no-media .topic-carousel-card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
}

.topic-carousel-card-no-media .topic-carousel-card-name {
  text-align: center;
  white-space: normal;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive carousel */
@media (max-width: 768px) {
  .topic-carousel-section::before,
  .topic-carousel-section::after {
    width: 30px;
  }
  
  .topic-carousel-track {
    padding: 0 1rem;
    gap: 0.4rem;
  }
  
  .topic-carousel-card {
    width: 95px;
    height: 55px;
  }
  
  .topic-carousel-card-name {
    font-size: 0.6rem;
  }
}

/* ============================================================================
   EDITOR MOBILE GATE
   Show "use a wider screen" message on editor pages at mobile sizes.
   Targets the body classes set by each editor template.
   ============================================================================ */

@media (max-width: 768px) {
  .collection-unified-editor-mode #collection-unified-editor,
  .timeline-editor-mode #timeline-editor,
  .page-editor-mode #page-editor {
    display: none;
  }

  .collection-unified-editor-mode main,
  .timeline-editor-mode main,
  .page-editor-mode main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
    text-align: center;
  }

  .collection-unified-editor-mode main::after,
  .timeline-editor-mode main::after,
  .page-editor-mode main::after {
    content: 'Please use a wider screen to edit.';
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
  }
}

/* ============================================================================
   Nav tab dropdown (Leaderboard → Leaderboard / Stats / Newsroom)
   ============================================================================ */
.nav-tab-dropdown { position: relative; display: inline-flex; }
.nav-tab-caret { margin-left: 5px; opacity: 0.5; transition: transform 0.15s ease; }
.nav-tab-dropdown:hover .nav-tab-caret { transform: translateY(1px); opacity: 0.8; }
/* Transparent hover bridge so the menu doesn't close crossing the gap */
.nav-tab-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 9px; z-index: 1100;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}
.nav-tab-dropdown:hover .nav-tab-menu,
.nav-tab-dropdown:focus-within .nav-tab-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-tab-menu-inner {
  min-width: 165px; padding: 5px; border-radius: 10px;
  /* The site's standard dropdown surface (hamburger menu, search results):
     page base color + 3% white tint — NOT a hardcoded lighter slab. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    var(--color-bg-base);
  border: 1px solid var(--color-border-secondary);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.nav-tab-menu-inner a {
  display: block; padding: 8px 12px; border-radius: 7px;
  font-size: 0.86rem; font-weight: 500; color: rgba(255, 255, 255, 0.75);
  text-decoration: none; transition: background 0.1s ease, color 0.1s ease;
}
.nav-tab-menu-inner a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }


/* css/components/section-container.css */
/**
 * Section Container Component
 * Reusable container for page sections with consistent max-width and padding
 */

/* ============================================================================
   Container API
   ============================================================================ */

.section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================================
   Header API
   ============================================================================ */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary, #ffffff);
  margin: 0;
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
  margin: 0.25rem 0 0;
}

.section-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 768px) {
  .section-container {
    padding: 0 1rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .section-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .section-container {
    padding: 0 0.75rem;
  }
}

/* css/components/loading-states.css */
/**
 * Loading states: the generic spinners and skeletons used by older scripts,
 * aligned with Terminal Light's .tl-skel (css/tl/components.css): ink-alpha
 * fills, a single light sweep, tokens only. New UI should use .tl-skel in
 * the card's own shape instead of a spinner.
 */

/* ============================================================================
   Spinner API: an ink ring (still used by editors and embed renderers)
   ============================================================================ */

.loading-spinner {
  --spinner-size: 32px;
  --spinner-border-width: 3px;
  --spinner-color: var(--tl-ink-60);

  box-sizing: border-box;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: var(--spinner-border-width) solid var(--tl-line-10);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-spinner-small {
  --spinner-size: 14px;
  --spinner-border-width: 2px;
}

/* ============================================================================
   Skeleton API: same fill and sweep as .tl-skel
   ============================================================================ */

.skeleton-card,
.skeleton-text,
.skeleton-avatar {
  background: var(--tl-fill-05) linear-gradient(90deg, transparent, var(--tl-fill-04), transparent) no-repeat;
  background-size: 240px 100%;
  animation: tl-shimmer 1.2s linear infinite;
}

.skeleton-card { border-radius: var(--tl-r-card); }

.skeleton-text {
  height: 12px;
  margin: 6px 0;
  border-radius: 6px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card, .skeleton-text, .skeleton-avatar { animation: none; }
  .loading-spinner { animation-duration: 2.4s; }
}

/* ============================================================================
   Keyframes (names are global: other sheets still reference spin, shimmer
   and pulse-glow)
   ============================================================================ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* loadingDots and loadingBar owned by timeline-carousel.css */

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* css/components/global-search.css */
/* ===== Global search (gsx-*, global-search.js) in Terminal Light ==========
   The input box in the top bar is sized and coloured by css/tl/shell.css
   (.tl-topbar .gsx-*); the rules here are its token defaults plus the results
   panel: a TL card menu with mono uppercase kickers, rows with a .03 hover
   fill, chips for recents and quick jumps. Tokens only, so both themes
   follow without a light/dark split. */

@keyframes gsx-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes gsx-ring {
  0% { transform: scale(0.6); opacity: 0.8; }
  70% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes gsx-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gsx-caret, .gsx-dot i, .gsx-panel { animation: none !important; }
}

/* ---- input box (token defaults; the top bar refines them in shell.css) ---- */
.gsx-box {
  position: relative; display: flex; align-items: center; gap: 9px; height: 34px;
  padding: 0 8px 0 11px; border: 1px solid var(--tl-line-10);
  border-radius: var(--tl-r-btn); background: var(--tl-fill-03);
}
.gsx-box.is-open { border-color: var(--tl-line-18); background: var(--tl-control); }
.gsx-icon { flex: none; color: var(--tl-ink-50); }
.gsx-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.gsx-input {
  width: 100%; border: none !important; background: transparent !important;
  font-family: var(--tl-font); font-size: 13px; color: var(--tl-ink) !important;
  padding: 0 !important; margin: 0 !important; height: auto !important;
  min-height: 0 !important; box-shadow: none !important; outline: none !important;
  transition: none !important;   /* Pico fades input colour; stale on a theme flip */
}
.gsx-type, .gsx-ghost {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; pointer-events: none;
  font-size: 13px; white-space: pre; overflow: hidden; max-width: 100%;
}
.gsx-type { color: var(--tl-ink-50); }
.gsx-caret {
  display: inline-block; width: 1px; height: 14px; margin-left: 1px;
  background: var(--tl-ink-50);
  animation: gsx-caret 1.1s step-end infinite;
}
.gsx-ghost-q { color: transparent; }
.gsx-ghost-rest { color: var(--tl-ink-35); }
.gsx-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 6px;
  border: 1px solid var(--tl-line-12); border-radius: 5px;
  font: 400 10.5px var(--tl-mono); color: var(--tl-ink-50);
}

/* ---- panel: a TL card menu ---- */
.gsx-panel {
  position: absolute; top: 42px; right: 0;
  width: min(520px, calc(100vw - 24px)); z-index: 1002;
  box-sizing: border-box;
  padding: 6px 0 0;
  max-height: min(560px, calc(100vh - 80px)); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--tl-r-card);
  background: var(--tl-card);
  box-shadow: var(--tl-float-shadow), 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  color: var(--tl-ink);
  font-family: var(--tl-font);
  animation: gsx-drop 0.18s var(--tl-ease) both;
}
.gsx-scrim {
  position: fixed; left: 0; right: 0; top: var(--tl-topbar-h); bottom: 0;
  z-index: 1001; background: rgba(0, 0, 0, 0.16);   /* half the shell scrim */
}

/* ---- section kickers (.tl-kicker + a hairline) ---- */
.gsx-kick { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; }
.gsx-kick > span:not(.gsx-dot):not(.gsx-kick-rule) {
  font-family: var(--tl-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--tl-ink-45);
}
.gsx-kick-rule { flex: 1; height: 1px; background: var(--tl-line-06); }
.gsx-dot { position: relative; width: 6px; height: 6px; flex: none; }
.gsx-dot i {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--tl-ink); animation: gsx-ring 2.4s ease-out infinite;
}
.gsx-dot b { position: absolute; inset: 0; border-radius: 50%; background: var(--tl-ink); }
.gsx-dot.is-green i { border-color: var(--tl-live); animation-delay: 0.6s; }
.gsx-dot.is-green b { background: var(--tl-live); }

/* ---- rows (trending + results) ---- */
.gsx-row {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 16px;
  cursor: pointer;
}
.gsx-row:hover, .gsx-row.is-hl { background: var(--tl-fill-03); }
.gsx-row.is-hl { box-shadow: inset 2px 0 0 var(--tl-ink); }
.gsx-rank {
  width: 18px; flex: none; text-align: right;
  font-family: var(--tl-mono); font-size: 12.5px; color: var(--tl-ink-40);
  font-variant-numeric: tabular-nums;
}
.gsx-row-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--tl-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsx-row-name b { font-weight: 700; }
.gsx-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gsx-row-body .gsx-row-name { flex: none; }
.gsx-row-meta {
  font-size: 11.5px; color: var(--tl-ink-50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsx-rate {
  flex: none; font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tl-ink-45);
}
.gsx-rate.is-up { color: var(--tl-up); }
.gsx-rate.is-down { color: var(--tl-down); }

/* trending headshot */
.gsx-shot {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--tl-logo-chip);
  box-shadow: inset 0 0 0 1px var(--tl-line-07);
}
.gsx-shot.is-initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tl-mono); font-size: 10px; color: var(--tl-ink-60);
}

/* row art */
.gsx-matchup-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gsx-row-body .gsx-matchup-line .gsx-row-name { flex: 0 1 auto; }
.gsx-row.is-game .gsx-row-meta { padding-left: 28px; }
.gsx-matchup-line .gsx-team-logo {
  display: block; width: 20px; height: 20px; flex: none;
  margin: 0; border: 0; border-radius: 0; background: transparent;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.gsx-art {
  width: 24px; height: 24px; flex: none;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.gsx-art.is-round {
  border-radius: 50%; background-size: cover;
  background-color: var(--tl-logo-chip); box-shadow: inset 0 0 0 1px var(--tl-line-07);
}
.gsx-art.is-initials {
  border-radius: 50%; background: var(--tl-logo-chip);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tl-mono); font-size: 8.5px; color: var(--tl-ink-60);
}
.gsx-glyph {
  width: 24px; height: 24px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tl-r-pill); background: var(--tl-fill-05);
  color: var(--tl-ink-60);
}
.gsx-glyph svg, .gsx-jump svg {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- recent chips + quick jumps (.tl-chip, small) ---- */
.gsx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 6px; }
.gsx-chip {
  height: 28px; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px 0 10px; border: 1px solid var(--tl-line-10);
  border-radius: var(--tl-r-chip);
}
.gsx-chip:hover { border-color: var(--tl-line-18); }
.gsx-chip-name { font-size: 12.5px; color: var(--tl-ink-70); cursor: pointer; }
.gsx-chip-name:hover { color: var(--tl-ink); }
.gsx-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--tl-r-tag); font-size: 12px;
  color: var(--tl-ink-45); cursor: pointer;
}
.gsx-chip-x:hover { background: var(--tl-fill-06); color: var(--tl-ink); }

.gsx-jumps { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 12px; }
.gsx-panel .gsx-jump {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-chip);
  font-size: 12.5px; font-weight: 400; color: var(--tl-ink-70);
  cursor: pointer; text-decoration: none;
}
.gsx-panel .gsx-jump:hover { border-color: var(--tl-line-18); color: var(--tl-ink); background: var(--tl-fill-03); }
.gsx-jump svg { color: var(--tl-ink-50); }

/* ---- empty result / footer ---- */
.gsx-none { padding: 24px 16px; text-align: center; font-size: 13.5px; color: var(--tl-ink-50); }
.gsx-none b { font-weight: 600; color: var(--tl-ink); }
.gsx-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px;
  padding: 9px 16px; border-top: 1px solid var(--tl-line-05);
  background: var(--tl-fill-025);
}
.gsx-foot-label, .gsx-foot-keys {
  font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--tl-ink-50);
}
.gsx-foot-label, .gsx-foot-keys { white-space: nowrap; }
.gsx-foot-keys { margin-left: auto; color: var(--tl-ink-40); text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) { .gsx-foot-keys { display: none; } }
@media (max-width: 900px) { .gsx-key { display: none; } }
/* The tl focus ring would draw around the bare input inside the box; the
   box's own open state (shell.css .gsx-box.tl-search.is-open) is the focus cue.
   Four classes: the ring rule's :is() scores as [tabindex]:not(...) (0,3,0)
   and loads later, so an equal (0,3,0) here lost once typing made the input
   :focus-visible. */
.gsx-box.tl-search .gsx-input:focus-visible { box-shadow: none !important; }
/* Phone: the box is narrow and sits mid-bar, so a box-anchored 520px panel
   would run off the left edge. Pin it under the top bar with 12px gutters. */
@media (max-width: 720px) {
  .tl-topbar .tl-search-wrap .gsx-panel {
    position: fixed; top: calc(var(--tl-topbar-h) + 6px); left: 12px; right: 12px;
    width: auto; max-height: calc(100dvh - var(--tl-topbar-h) - 24px);
  }
}

/* css/components/points-bar.css */
/* ==========================================================================
   Points module (points-bar.js) in Terminal Light. The module now lives in
   the sidebar "Earn points" card (base.html .tl-earn-wrap); the panel,
   token flight and bottom action toast are shared. Tokens only, so dark
   mode needs no second block. Pico paints raw a/button: resets are explicit.
   ========================================================================== */

.sclvl { position: relative; }
.sclvl-badge { font-style: normal; font-variant-numeric: tabular-nums; }
.sclvl-label { font-size: 12.5px; font-weight: 600; color: var(--tl-ink); }
.sclvl-label.is-up { color: var(--tl-up); }
.sclvl-pts { font-size: 11.5px; color: var(--tl-ink-50); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.sclvl-pts.is-flash { color: var(--tl-up); }
.sclvl-fill { display: block; height: 100%; transition: width 0.6s var(--tl-ease); }
.sclvl.is-levelup .tl-earn { box-shadow: 0 0 0 4px var(--tl-up-bg); }
.tl-earn-wrap:not(.is-ghost) .tl-earn-ring > i { color: var(--tl-ink); }

/* ---- panel ---- */
@keyframes sclvl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sclvl-panel {
  z-index: 50; padding: 16px 18px 14px;
  border-radius: var(--tl-r-card); background: var(--tl-card);
  box-shadow: var(--tl-float-shadow); color: var(--tl-ink);
  animation: sclvl-in 0.25s var(--tl-ease) both;
}
.sclvl-phead { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.sclvl-badge.is-big {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-ink); color: var(--tl-on-ink); font-size: 12px; font-weight: 600;
}
.sclvl-pcol { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sclvl-pcol b { font-size: 15px; font-weight: 650; letter-spacing: -0.2px; }
.sclvl-pcol span { font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-50); }
.sclvl-ppts { flex: none; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sclvl-pbar { display: block; height: 4px; border-radius: 2px; background: var(--tl-line-08); overflow: hidden; }
.sclvl-pbar i { display: block; height: 100%; border-radius: 2px; background: var(--tl-ink); }
.sclvl-pcap { display: block; margin: 7px 0 0; font-size: 11.5px; color: var(--tl-ink-50); }
.sclvl-earnhead { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.sclvl-earnhead span { font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tl-ink-45); }
.sclvl-earnhead i { flex: 1; height: 1px; background: var(--tl-line-07); }
.sclvl-earn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tl-line-05); }
.sclvl-earns > .sclvl-earn:last-child { border-bottom: 0 !important; }
a.sclvl-earn, button.sclvl-earn {
  display: flex !important; width: 100% !important; margin: 0 !important;
  padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--tl-line-05) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font-family: inherit; text-align: left; text-decoration: none !important; line-height: inherit !important; cursor: pointer;
}
a.sclvl-earn:hover span, button.sclvl-earn:not(:disabled):hover span { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 2px; }
.sclvl-earn span { font-size: 13px; font-weight: 500; color: var(--tl-ink-75); }
.sclvl-earn b { font-family: var(--tl-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tl-ink); }
.sclvl-earn.is-done span { color: var(--tl-ink-45); }
.sclvl-earn.is-done b { color: var(--tl-up); }
.sclvl-earn.is-miss b { color: var(--tl-ink-45); }
.sclvl-earn.has-bar { flex-direction: column; align-items: stretch; gap: 6px; }
.sclvl-earn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sclvl-earn-bar { display: block; height: 3px; border-radius: 2px; background: var(--tl-line-08); overflow: hidden; }
.sclvl-earn-bar i { display: block; height: 100%; border-radius: 2px; background: var(--tl-up); }
.sclvl-pfoot {
  display: block; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--tl-line-07);
  font-size: 12.5px; font-weight: 600; color: var(--tl-ink) !important; text-decoration: none;
}
.sclvl-pfoot:hover { color: var(--tl-ink-60) !important; }

/* ---- token flight ---- */
.sclvl-tokens { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.sclvl-token {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tl-ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.75s cubic-bezier(0.35, 0, 0.25, 1), opacity 0.25s linear;
}

/* ---- bottom action toast ---- */
.sclvl-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 1300;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 16px; border-radius: var(--tl-r-card);
  background: var(--tl-card); box-shadow: var(--tl-float-shadow), var(--tl-card-shadow-hover);
  color: var(--tl-ink);
  transform: translate(-50%, 16px); opacity: 0;
  transition: transform 0.35s var(--tl-ease), opacity 0.35s var(--tl-ease);
}
.sclvl-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.sclvl-toast-kicker { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-50); white-space: nowrap; }
.sclvl-toast-act {
  display: inline-flex !important; align-items: center; margin: 0 !important;
  height: 30px; padding: 0 12px !important; width: auto !important;
  border: 0 !important; border-radius: var(--tl-r-btn) !important;
  background: var(--tl-ink) !important; color: var(--tl-on-ink) !important;
  font: 600 12.5px var(--tl-font) !important; line-height: 1 !important;
  cursor: pointer; box-shadow: none !important; white-space: nowrap; text-decoration: none !important;
}
.sclvl-toast-act.is-done { background: var(--tl-fill-06) !important; color: var(--tl-ink-50) !important; cursor: default; }
.sclvl-toast-x {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 26px !important; height: 26px; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: var(--tl-r-pill) !important; background: transparent !important;
  color: var(--tl-ink-50) !important; font-size: 15px; line-height: 1 !important; cursor: pointer; box-shadow: none !important;
}
.sclvl-toast-x:hover { background: var(--tl-fill-05) !important; color: var(--tl-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  .sclvl-panel { animation: none; }
  .sclvl-fill, .sclvl-pts { transition: none; }
  .sclvl-tokens { display: none; }
  .sclvl-toast { transition: none; }
}

/* ---- The sidebar's Strategies section on every page (base.html
   [data-side-pins], filled by points-bar.js). The same rows as Markets'
   sidebar (markets.css .mk-pins), which only Markets pages load. ---- */
.tl-sidebar .mk-pins { display: flex; flex-direction: column; flex-shrink: 0; }
.tl-sidebar .tl-side-link.mk-pins-empty { cursor: default; color: var(--tl-ink-45); }
.tl-sidebar .tl-side-link.mk-pin { height: auto; min-height: 34px; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; gap: 8px; }
.tl-sidebar .mk-pin-name { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.tl-sidebar .mk-pin .r { flex: none; line-height: 18px; font: 500 11px/18px var(--tl-mono); }
.tl-sidebar .mk-pin .r.is-pos { color: var(--tl-up); }
.tl-sidebar .mk-pin .r.is-neg { color: var(--tl-down); }
.tl-sidebar .mk-pins-pro { gap: 6px; color: var(--tl-ink-60); }
.tl-sidebar .mk-pins-pro svg { flex: none; color: var(--tl-pro); }

/* css/components/admin-tags.css */
/* Admin tag editor (admin-tags.js) — the floating tag icon + curation
   popover. Dark base, light overrides via html.si-light (site convention).
   Renders only for admins; zero footprint otherwise. */

.atg-btn {
  position: absolute; z-index: 1600;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 22px !important; height: 22px; margin: 0 !important; padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 6px !important;
  background: rgba(20, 23, 27, 0.92) !important; color: #fff !important;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  line-height: 1 !important;
}
.atg-btn:hover { border-color: #fff !important; }
html.si-light .atg-btn {
  border-color: rgba(16, 20, 24, 0.4) !important;
  background: rgba(255, 255, 255, 0.95) !important; color: #101418 !important;
  box-shadow: 0 2px 8px rgba(16, 20, 24, 0.2) !important;
}
html.si-light .atg-btn:hover { border-color: #101418 !important; }

.atg-pop {
  position: absolute; z-index: 1601; width: 290px;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px;
  background: #1e2028; color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 12px 14px 14px; font-size: 12.5px;
}
html.si-light .atg-pop {
  border-color: rgba(16, 20, 24, 0.35); background: #fff; color: #101418;
  box-shadow: 0 14px 40px rgba(16, 20, 24, 0.22);
}
.atg-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  opacity: 0.75; margin-bottom: 9px;
}
.atg-close {
  display: inline-flex !important; width: 22px !important; height: 22px;
  align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 6px !important; background: transparent !important;
  color: inherit !important; font-size: 15px; cursor: pointer; box-shadow: none !important;
  line-height: 1 !important;
}
.atg-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.atg-none { font-size: 12px; opacity: 0.6; }
.atg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 8px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); font-size: 11.5px; font-weight: 700;
}
html.si-light .atg-chip { border-color: rgba(16, 20, 24, 0.3); }
.atg-chip.is-busy { opacity: 0.4; pointer-events: none; }
.atg-chip i {
  font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; opacity: 0.55;
}
.atg-x {
  display: inline-flex !important; width: 16px !important; height: 16px;
  align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important; background: transparent !important;
  color: inherit !important; font-size: 13px; cursor: pointer; box-shadow: none !important;
  line-height: 1 !important; opacity: 0.65;
}
.atg-x:hover { opacity: 1; }
.atg-input {
  width: 100% !important; height: 30px !important; margin: 0 !important;
  padding: 0 10px !important; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 8px !important;
  background: transparent !important; color: inherit !important;
  font-size: 12px !important; font-family: inherit;
}
html.si-light .atg-input { border-color: rgba(16, 20, 24, 0.3) !important; }
.atg-results { margin-top: 6px; max-height: 180px; overflow: auto; }
.atg-res {
  display: flex !important; align-items: center; justify-content: space-between;
  width: 100% !important; margin: 0 !important; padding: 6px 8px !important;
  border: none !important; border-radius: 7px !important; background: transparent !important;
  color: inherit !important; font-size: 12px !important; font-weight: 600;
  font-family: inherit; text-align: left; cursor: pointer; box-shadow: none !important;
  line-height: 1.3 !important;
}
.atg-res:hover { background: rgba(255, 255, 255, 0.08) !important; }
html.si-light .atg-res:hover { background: rgba(16, 20, 24, 0.06) !important; }
.atg-res i {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; opacity: 0.5;
}

/* css/components/site-tour.css */
/* =============================================================================
   Help popover, spotlight walkthrough and the points landing sheet
   (site-tour.js) in Terminal Light. The walkthrough is one cutout + one coach
   card, both transitioning between steps; the scrim is the cutout's giant
   box-shadow, so there is exactly one hole in it. Tokens only.
   ============================================================================= */

/* ---- shared card surface (the .tl-menu / floating card) ---- */
.st-helppop, .st-card, .st-landing-card, .st-chip {
  box-sizing: border-box;
  border-radius: var(--tl-r-card);
  background: var(--tl-card);
  box-shadow: var(--tl-float-shadow), 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  color: var(--tl-ink);
  font-family: var(--tl-font);
}

/* ---- buttons (Pico resets included) ---- */
:is(.st-helppop, .st-card, .st-landing-card) button {
  width: auto; margin: 0; line-height: 1; box-shadow: none;
  font-family: var(--tl-font); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
:is(.st-helppop, .st-card, .st-landing-card) :is(button, a):focus { outline: none; }
:is(.st-helppop, .st-card, .st-landing-card) :is(button, a):focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--tl-card), 0 0 0 4px var(--tl-ink);
}
.st-next {                                   /* .tl-btn-ink */
  height: 32px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--tl-r-btn);
  background: var(--tl-ink); color: var(--tl-on-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.st-next:hover { background: var(--tl-ink-hover); color: var(--tl-on-ink); }
.st-card .st-back, .st-skip, .st-help-close {  /* quiet text buttons */
  height: 32px; padding: 0 8px;
  border: 0; border-radius: var(--tl-r-btn);
  background: transparent; color: var(--tl-ink-60);
  font-size: 13px; font-weight: 500;
}
.st-card .st-back:hover, .st-skip:hover, .st-help-close:hover { background: var(--tl-fill-04); color: var(--tl-ink); }

/* ---- help popover (pages without a guide) ---- */
.st-helppop {
  position: fixed; z-index: 1400;
  width: 260px; max-width: calc(100vw - 24px);
  padding: 0;
}
.st-helppop b {
  display: block; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--tl-line-06);
  font-size: 15px; font-weight: 650; letter-spacing: -0.2px;
}
.st-helppop span { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px; }
.st-helppop a {
  height: 32px; padding: 0 10px; display: flex; align-items: center;
  border-radius: var(--tl-r-seg-in);
  font-size: 13px; color: var(--tl-ink-70); text-decoration: none;
}
.st-helppop a:hover { background: var(--tl-fill-04); color: var(--tl-ink); }
.st-helppop .st-help-close { display: block; margin: 0 6px 8px auto; }

/* ---- accrual chip ---- */
.st-chip {
  position: fixed; z-index: 1450; padding: 6px 12px;
  font-family: var(--tl-mono); font-size: 12px; font-weight: 600; color: var(--tl-up);
  white-space: nowrap;
  animation: stChipPop 0.3s var(--tl-ease) both;
  transition: opacity 0.3s var(--tl-ease), transform 0.3s var(--tl-ease);
}
.st-chip.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes stChipPop {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---- walkthrough ---- */
.st-overlay { position: fixed; inset: 0; z-index: 1500; }
.st-cutout {
  position: fixed;
  box-shadow: 0 0 0 2px var(--tl-ink), 0 0 0 9999px rgba(0, 0, 0, 0.32);
  transition: all 0.45s var(--tl-ease);
}
.st-card {
  position: fixed; width: 320px;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 14px 16px 12px;
  transition: all 0.45s var(--tl-ease);
}
.st-eyebrow {                                /* .tl-kicker */
  display: block; margin: 0 0 6px;
  font-family: var(--tl-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--tl-ink-50);
}
.st-title { display: block; margin: 0 0 4px; font-size: 15px; font-weight: 650; letter-spacing: -0.2px; line-height: 1.35; }
.st-body { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--tl-ink-60); }
.st-foot {
  display: flex; align-items: center; gap: 6px;
  margin: 12px -16px 0; padding: 10px 16px 0;
  border-top: 1px solid var(--tl-line-05);
}
.st-dots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; }   /* .tl-dots */
.st-dots i {
  width: 6px; height: 4px; border-radius: 3px; font-style: normal;
  background: var(--tl-line-15); transition: width 0.3s, background 0.3s;
}
.st-dots i.is-on { background: var(--tl-ink); }
.st-dots i.is-cur { width: 18px; }

/* ---- points landing sheet (?tour=1&planted=1) ---- */
.st-landing {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.32);
}
.st-landing-card {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 22px 20px 18px; text-align: left;
}
.st-landing-total {
  display: block; margin: 2px 0 6px;
  font-size: 44px; font-weight: 300; letter-spacing: -1.4px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--tl-up);
}
.st-landing-card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -0.3px; color: var(--tl-ink); }
.st-landing-card p { margin: 0 0 12px; font-size: 13px; color: var(--tl-ink-60); }
.st-landing-row {
  display: flex; justify-content: space-between; gap: 15px;
  padding: 9px 0; font-size: 13.5px;
  border-top: 1px solid var(--tl-line-05);
}
.st-landing-row b { font-family: var(--tl-mono); font-size: 12.5px; font-weight: 600; color: var(--tl-up); }
.st-landing-card .st-next { width: 100%; height: 38px; margin-top: 16px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .st-cutout, .st-card, .st-chip, .st-dots i { transition: none; animation: none; }
}

/* css/components/cards.css */
/* ========================================
   CARD COMPONENTS - Award cards, stat cards, game cards
   Clean platform aesthetic
   ======================================== */

/* Award Cards - Simple dark card */
.award-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-base);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 160px;
  align-items: center;
}

.award-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.award-label {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
  font-weight: var(--font-weight-bold);
  position: relative;
  z-index: 2;
}

.award-value {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  margin-top: auto;
  position: relative;
  z-index: 2;
  line-height: 1.2;
}

/* Player Display in Award Cards */
.player-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
}

.player-display:hover {
  transform: none;
}

.award-card .player-headshot-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: visible;
  flex-shrink: 0;
}

.award-card .player-headshot {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  transition: all 0.3s ease;
  background: transparent;
  box-shadow: none;
  z-index: 1;
  position: relative;
  display: none;
}

.award-card .player-headshot:hover {
  transform: none;
}

.player-headshot-placeholder {
  display: none;
}

.award-card .team-badge-small {
  position: relative;
  bottom: auto;
  right: auto;
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: transparent;
  backdrop-filter: none;
  border-radius: 50%;
  border: 2px solid var(--color-border-secondary);
  padding: 15px;
  z-index: 1;
  transition: all 0.3s ease;
  box-sizing: border-box;
  display: block;
  overflow: visible;
}

.award-card:hover .team-badge-small {
  border-color: var(--color-primary);
}

.award-card .player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  margin-top: 0;
  flex: 1;
  justify-content: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.award-card .player-name {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.award-card .player-team {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* Award Team Flip Card */
.award-team-flip {
  display: block;
  perspective: 1000px;
  height: 80px;
  margin: 0.5rem 0;
  text-decoration: none;
}

.award-team-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.award-team-flip:hover .award-team-inner {
  transform: rotateY(180deg);
}

.award-team-front,
.award-team-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.award-team-front {
  background: transparent;
}

.award-team-back {
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 0.15rem;
}

.award-team-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.award-team-back .team-display {
  gap: 0.1rem;
}

.award-team-back .team-abbr {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.award-team-back .team-nickname {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Stat Cards - Simple dark style */
.stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.stat-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Game Cards */
.game-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.game-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.game-week {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  text-align: center;
}

.game-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.team-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.team-logo-small {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.team-name {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.score {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-left: auto;
}

.vs {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.game-result {
  margin-left: 1rem;
}

.win {
  background: #22c55e;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.loss {
  background: #ef4444;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.tie {
  background: #f59e0b;
  color: #000;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Team Game Cards (for team pages) */
.team-game-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
  flex: 0 0 380px;
  min-width: 280px;
}

.team-game-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.team-game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.team-game-week {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.team-game-result {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.team-game-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.team-game-team {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.team-game-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.team-game-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team-game-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.team-game-record {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.team-game-score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-left: auto;
}

.team-game-vs {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .award-card {
    min-height: 180px;
    padding: 1.25rem;
  }
  
  .player-headshot-wrapper {
    width: 120px;
    height: 120px;
  }
  
  .player-headshot,
  .player-headshot-placeholder {
    width: 120px;
    height: 120px;
  }
  
  .team-badge-small {
    width: 38px;
    height: 38px;
    bottom: -6px;
    right: -6px;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .team-game-card {
    flex: 0 0 320px;
    min-width: 280px;
    padding: 1rem;
  }
}

/* ========================================
   POST PLATFORM BADGES
   Styling for external media post cards
   ======================================== */

.post-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: white;
}

.post-platform-badge.platform-twitter { background: #000; }
.post-platform-badge.platform-youtube { background: #FF0000; }
.post-platform-badge.platform-tiktok { background: #000; }
.post-platform-badge.platform-instagram { 
  background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); 
}

/* Post Card in Grid */
.index-card.post-card {
  cursor: pointer;
}

.index-card.post-card .post-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Play overlay for video posts */
.post-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.index-card.post-card:hover .post-play-overlay {
  opacity: 1;
}

.post-play-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.post-play-icon svg {
  margin-left: 4px;
}

/* Mobile - phone */
@media (max-width: 480px) {
  .team-game-card {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* css/components/tables.css */
/* ========================================
   TABLE COMPONENTS - All table styles
   ======================================== */

/* General Table Styles */
.table-scroll {
  overflow: auto;
  border: 1px solid var(--muted-border-color, #e0e0e0);
  border-radius: .5rem;
}

table td, table th {
  white-space: nowrap;
}

/* Weekly Stats Table */
.weekly-stats-table {
  overflow-x: auto;
  border-radius: 0.5rem;
  background: rgba(26, 26, 46, 0.5);
}

.weekly-stats-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.weekly-stats-table th {
  background: rgba(0, 168, 255, 0.2);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  border-bottom: 2px solid rgba(0, 168, 255, 0.3);
}

.weekly-stats-table td {
  padding: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.weekly-stats-table tr:hover {
  background: rgba(0, 168, 255, 0.05);
}

.week-cell {
  font-weight: 600;
  color: #00a8ff !important;
}

.dnp-row {
  background: rgba(255, 255, 255, 0.02) !important;
  opacity: 0.6;
}

.dnp-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.dnp-cell {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-size: 0.9rem;
  padding: 1rem;
}




/* css/components/modal.css */
/* ==========================================================================
   Alert / confirm dialogs (modal.js showAlert, showConfirm) in Terminal Light:
   a scrim, one card with a header row, a 14px body and a footer with a ghost
   cancel and an ink confirm. A destructive confirm uses --tl-down.
   Tokens only (css/tl/tokens.css), so both themes follow.
   The legacy .btn-primary / .btn-secondary / .btn-close-x classes are still
   used by a few hand-built .custom-modal-* dialogs (topic page), so they map
   to the same ink / ghost buttons here.
   ========================================================================== */

.custom-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.32);   /* the shell scrim (.tl-scrim) */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--tl-ease), visibility 0.2s;
}
.custom-modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

.custom-modal-content {
  box-sizing: border-box;
  width: 440px; max-width: 100%; max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--tl-r-card);
  background: var(--tl-card);
  box-shadow: var(--tl-float-shadow), 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  color: var(--tl-ink);
  font-family: var(--tl-font);
  transform: translateY(6px);
  transition: transform 0.22s var(--tl-ease);
}
.custom-modal-overlay.show .custom-modal-content { transform: none; }

/* Header row = .tl-card-head.has-rule */
.custom-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--tl-line-06);
}
.custom-modal-title {
  margin: 0; padding: 0;
  font-size: 15px; font-weight: 650; letter-spacing: -0.2px; line-height: 1.35;
  color: var(--tl-ink); text-shadow: none;
}

.custom-modal-body { padding: 16px 18px 18px; overflow-y: auto; min-height: 0; }
.custom-modal-message {
  margin: 0;
  font-size: 14px; line-height: 1.5; color: var(--tl-ink-70);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.custom-modal-message a { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 2px; }

.custom-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--tl-line-05);
}

/* Buttons: .tl-btn-ghost (cancel) and .tl-btn-ink (confirm) */
.custom-modal-content .btn {
  box-sizing: border-box;
  height: 32px; min-width: 0; width: auto; margin: 0; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--tl-r-btn);
  font: 600 13px/1 var(--tl-font); white-space: nowrap; text-decoration: none;
  cursor: pointer; box-shadow: none; transform: none;
  -webkit-appearance: none; appearance: none;
}
/* !important on the colours: auth.css paints .btn-primary globally, and on
   si-themed pages with html.si-light body.si-themed specificity. */
.custom-modal-content .btn-primary {
  border: 0 !important; background: var(--tl-ink) !important; color: var(--tl-on-ink) !important;
}
.custom-modal-content .btn-primary:hover { background: var(--tl-ink-hover) !important; box-shadow: none; transform: none; }
.custom-modal-content :is(.btn-secondary, .btn-close-x) {
  border: 1px solid var(--tl-line-12) !important; background: var(--tl-control) !important; color: var(--tl-ink) !important;
}
.custom-modal-content :is(.btn-secondary, .btn-close-x):hover { background: var(--tl-page) !important; box-shadow: none; transform: none; }
.custom-modal-content .btn.is-danger { background: var(--tl-down) !important; }
.custom-modal-content .btn.is-danger:hover { background: var(--tl-down) !important; filter: brightness(0.92); }
html:not(.si-light) .custom-modal-content .btn.is-danger:hover { filter: brightness(1.08); }
.custom-modal-content .btn:focus { outline: none; }
.custom-modal-content .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tl-card), 0 0 0 4px var(--tl-ink); }

/* Share-link button inside legacy share dialogs */
#copyLinkBtn { flex: 0 0 auto !important; min-width: unset !important; width: auto !important; }

/* Scrollbar */
.custom-modal-body::-webkit-scrollbar { width: 8px; }
.custom-modal-body::-webkit-scrollbar-track { background: transparent; }
.custom-modal-body::-webkit-scrollbar-thumb { background: var(--tl-line-12); border-radius: 4px; }

@media (max-width: 720px) {
  .custom-modal-overlay { align-items: flex-end; padding: 16px; }
  .custom-modal-content { width: 100%; }
  .custom-modal-footer > .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-modal-overlay, .custom-modal-content { transition: none; }
  .custom-modal-content { transform: none; }
}

/* css/components/grid-system.css */
/* ============================================================================
   GRID SYSTEM - Core Layout
   ============================================================================
   
   Architecture:
   - Grid container with 3 fixed columns
   - Each slot is a perfect square (aspect-ratio: 1/1)
   - Slots are the CONSTANT - they never change size or position
   - Blocks cover slots completely when placed
   - Content adapts to block size, scrolls if needed
   
   ============================================================================ */

:root {
  --grid-columns: 3;
  --grid-gap: 16px;
  --grid-slot-border: 2px;
  --grid-slot-radius: 12px;
}

/* ============================================================================
   Grid Container
   ============================================================================ */

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--grid-gap);
}

/* ============================================================================
   Grid Slots - The Constant Foundation
   ============================================================================ */

.grid-slot {
  /* Square aspect ratio - this is the CONSTANT */
  aspect-ratio: 1 / 1;
  
  /* CRITICAL: Prevent content from affecting slot size */
  contain: strict;
  overflow: hidden;
  
  /* Visual appearance for empty slots */
  background: rgba(var(--color-bg-card-rgb, 48, 50, 52), 0.3);
  border: var(--grid-slot-border) dashed rgba(var(--color-border-light-rgb, 255, 255, 255), 0.2);
  border-radius: var(--grid-slot-radius);
  
  /* Positioning */
  position: relative;
  
  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Empty slot hover state */
.grid-slot:hover {
  background: rgba(var(--color-bg-card-rgb, 48, 50, 52), 0.5);
  border-color: rgba(var(--color-primary-rgb, 0, 168, 255), 0.5);
}

/* Add button inside empty slots */
.grid-slot::before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 300;
  color: rgba(var(--color-text-muted-rgb, 148, 163, 184), 0.5);
  transition: all 0.2s ease;
  pointer-events: none;
}

.grid-slot:hover::before {
  color: rgba(var(--color-primary-rgb, 99, 102, 241), 0.8);
  transform: translate(-50%, -50%) scale(1.2);
}

/* Slot position indicator (for debugging, hidden by default) */
.grid-slot::after {
  content: attr(data-row) ',' attr(data-col);
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.625rem;
  font-family: monospace;
  color: rgba(var(--color-text-muted-rgb, 148, 163, 184), 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.grid-container.debug .grid-slot::after {
  opacity: 1;
}

/* ============================================================================
   Covered Slots - Hidden when block is placed
   ============================================================================ */

.grid-slot.covered {
  /* Completely hidden - block covers this slot */
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================================
   Grid Blocks - Content that covers slots
   ============================================================================ */

.grid-block {
  /* Use CSS Grid positioning - matches slot sizes exactly */
  /* grid-column and grid-row set via inline styles */

  /* Fit content - container adapts to embed size */
  width: fit-content;
  height: fit-content;

  /* Visual appearance - subtle outline around content */
  background: transparent;
  border: 1px solid rgba(var(--color-primary-rgb, 0, 168, 255), 0.4);
  border-radius: var(--grid-slot-radius);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb, 0, 168, 255), 0.15);

  /* Layout - position relative for overlay header */
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: visible;

  /* Layering */
  z-index: 10;

  /* Transitions */
  transition: all 0.2s ease;
}

.grid-block:hover {
  border-color: rgba(var(--color-primary-rgb, 0, 168, 255), 0.7);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 0, 168, 255), 0.25);
}

/* Block selected state */
.grid-block.selected {
  border-color: var(--color-primary, #00a8ff);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 0, 168, 255), 0.35);
}

/* Block dragging state */
.grid-block.dragging {
  opacity: 0.85;
  cursor: grabbing;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Block resizing state */
.grid-block.resizing {
  z-index: 1000;
  border-color: var(--color-primary, #00a8ff);
  box-shadow: 0 0 25px rgba(var(--color-primary-rgb, 0, 168, 255), 0.4);
}

/* ============================================================================
   Block Content Area - Scrollable
   ============================================================================ */

.grid-block-content {
  /* Content determines size */
  overflow: visible;
  padding: 0;
  color: var(--color-text-primary, #f1f5f9);
}

/* Custom scrollbar for block content */
.grid-block-content::-webkit-scrollbar {
  width: 6px;
}

.grid-block-content::-webkit-scrollbar-track {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
  border-radius: 3px;
}

.grid-block-content::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.4);
  border-radius: 3px;
}

.grid-block-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.6);
}

/* ============================================================================
   Block Controls - Overlay header (WYSIWYG - doesn't take up content space)
   ============================================================================ */

.grid-block-header {
  /* Position as overlay at top of block */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  
  /* Layout - buttons aligned to the right */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 10px;
  
  /* Transparent background */
  background: transparent;
  border-bottom: none;
  border-radius: var(--grid-slot-radius) var(--grid-slot-radius) 0 0;
  
  /* Hidden by default - show on hover */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show header on block hover (only when NOT editing) */
.grid-block:hover:not([data-editing="true"]) .grid-block-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hide header completely when editing - buttons move inside block */
.grid-block[data-editing="true"] .grid-block-header {
  display: none;
}

/* ============================================================================
   Edit Mode: Floating buttons inside block corners
   ============================================================================ */

/* Container for edit mode buttons - positioned inside the block (top-right) */
.grid-block-edit-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  display: none;
  gap: 6px;
}

/* Show edit controls only when editing */
.grid-block[data-editing="true"] .grid-block-edit-controls {
  display: flex;
}

/* Inline edit controls buttons */
.grid-block-edit-controls .btn-action {
  all: unset;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
  border: 1px solid rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}

.grid-block-edit-controls .btn-action:hover {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.4);
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 99, 102, 241), 0.6);
}

.grid-block-edit-controls .btn-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

/* Save button - green */
.grid-block-edit-controls .btn-edit-save-inline {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}

.grid-block-edit-controls .btn-edit-save-inline:hover {
  color: #fff;
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.4);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

/* Delete button - red */
.grid-block-edit-controls .btn-delete-inline {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}

.grid-block-edit-controls .btn-delete-inline:hover {
  color: #fff;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.grid-block-header .block-type-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #6366f1);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(var(--color-primary-rgb, 99, 102, 241), 0.8);
}

.grid-block-header .block-actions {
  display: flex;
  gap: 8px;
}

.grid-block-header .btn-action {
  /* Reset Pico CSS button styles */
  all: unset;
  box-sizing: border-box;
  
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
  border: 1px solid rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}

.grid-block-header .btn-action:hover {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.4);
  border-color: var(--color-primary, #6366f1);
  color: #fff;
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 99, 102, 241), 0.6);
}

.grid-block-header .btn-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* Ensure SVG is visible */
  display: block;
}

/* Drag handle */
.grid-block-header .btn-drag {
  cursor: grab;
}

.grid-block-header .btn-drag:active {
  cursor: grabbing;
}

/* Edit/Save button - changes based on state */
.grid-block-header .btn-action.btn-edit-save {
  color: var(--color-primary, #6366f1);
}

.grid-block-header .btn-action.btn-edit-save:hover {
  color: #fff;
}

/* Save state - green */
.grid-block-header .btn-action.btn-edit-save[data-editing="true"] {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}

.grid-block-header .btn-action.btn-edit-save[data-editing="true"]:hover {
  color: #fff;
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.4);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

/* Delete button - red accent */
.grid-block-header .btn-action.btn-delete {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}

.grid-block-header .btn-action.btn-delete:hover {
  color: #fff;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

/* ============================================================================
   Resize Handle
   ============================================================================ */

.grid-block-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  z-index: 20;
  
  /* Glowing triangle corner indicator */
  background: linear-gradient(
    -45deg,
    var(--color-primary, #6366f1) 0%,
    var(--color-primary, #6366f1) 50%,
    transparent 50%
  );
  border-radius: 0 0 var(--grid-slot-radius) 0;
  opacity: 0.8;
  
  transition: all 0.2s ease;
}

.grid-block-resize:hover {
  opacity: 1;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 8px rgba(var(--color-primary-rgb, 99, 102, 241), 0.8));
}

/* Show resize handle more prominently when block is hovered */
.grid-block:hover .grid-block-resize {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(var(--color-primary-rgb, 99, 102, 241), 0.5));
}

/* ============================================================================
   Resize Preview Overlay
   ============================================================================ */

.grid-resize-preview {
  /* Uses CSS Grid positioning - matches slots exactly */
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
  border: 2px dashed var(--color-primary, #6366f1);
  border-radius: var(--grid-slot-radius);
  pointer-events: none;
  z-index: 999;
}

/* Invalid resize indicator */
.grid-resize-preview.invalid {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* ============================================================================
   Drop Target Indicator
   ============================================================================ */

.grid-drop-target {
  /* Uses CSS Grid positioning - matches slots exactly */
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
  border: 2px solid var(--color-primary, #6366f1);
  border-radius: var(--grid-slot-radius);
  pointer-events: none;
  z-index: 998;
  animation: pulse-border 1s ease-in-out infinite alternate;
}

@keyframes pulse-border {
  from {
    border-color: rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
  }
  to {
    border-color: var(--color-primary, #6366f1);
  }
}

/* ============================================================================
   Responsive - Maintain square slots at all sizes
   ============================================================================ */

/* Tablet: Keep 3 columns but smaller */
@media (max-width: 1024px) {
  .grid-container {
    max-width: 100%;
    padding: 12px;
  }
  
  :root {
    --grid-gap: 12px;
  }
}

/* Mobile: Single column, still square */
@media (max-width: 640px) {
  .grid-container {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  
  :root {
    --grid-gap: 8px;
  }
  
  /* Limit slot height on mobile so they're not too tall */
  .grid-slot {
    max-height: 300px;
  }
}

/* ============================================================================
   Viewer Mode Styles
   ============================================================================ */

.grid-container.viewer-mode {
  /* Match editor gap for consistency */
  gap: var(--spacing-lg);
}

.grid-container.viewer-mode .grid-slot.viewer-slot {
  /* Hidden slots for maintaining grid structure */
  border: none;
  background: transparent;
  pointer-events: none;
}

.grid-block.viewer-block,
.grid-block.viewer-block:hover,
.grid-block.viewer-block:focus,
.grid-block.viewer-block:active {
  /* Viewer blocks - clean appearance with no glow */
  cursor: default;
  transition: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

/* Hide resize handle in viewer */
.grid-block.viewer-block .grid-block-resize {
  display: none !important;
}

.grid-block.viewer-block .grid-block-content {
  /* Use flex sizing - inherited from base .grid-block-content */
  padding: 16px;
}

/* Custom scrollbar for viewer blocks */
.grid-block.viewer-block .grid-block-content::-webkit-scrollbar {
  width: 6px;
}

.grid-block.viewer-block .grid-block-content::-webkit-scrollbar-track {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
  border-radius: 3px;
}

.grid-block.viewer-block .grid-block-content::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.4);
  border-radius: 3px;
}

.grid-block.viewer-block .grid-block-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.6);
}

/* Text content inside viewer blocks - no extra height constraints */
.grid-block.viewer-block .grid-block-content .text-block-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-primary, #f1f5f9);
}

.grid-block.viewer-block .grid-block-content .text-block-content p {
  margin: 0 0 0.75em 0;
}

.grid-block.viewer-block .grid-block-content .text-block-content p:last-child {
  margin-bottom: 0;
}


/* css/components/media-block.css */
/**
 * Media Block Styles
 * 
 * Styling for simple media blocks (images, GIFs, videos) in the grid system.
 */

/* ============================================================================
   BASE CONTAINER
   ============================================================================ */

.media-block-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
}

/* ============================================================================
   PLACEHOLDER STATE
   ============================================================================ */

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted, #64748b);
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}

.media-placeholder .placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

.media-placeholder .placeholder-text {
    font-size: 0.875rem;
    font-style: italic;
}

/* ============================================================================
   VIEW MODE
   ============================================================================ */

.media-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.media-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}

.media-element {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.media-image {
    width: auto;
    height: auto;
}

.media-video {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.media-caption {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   EDIT MODE
   ============================================================================ */

.media-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 12px;
    padding-top: 48px; /* Account for floating edit controls in grid block */
    box-sizing: border-box;
    overflow-y: auto;
    gap: 12px;
}

/* Upload Section */
.media-upload-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.media-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 16px;
    box-sizing: border-box;
    border: 2px dashed rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
    border-radius: 12px;
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.media-drop-zone:hover {
    border-color: rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
}

.media-drop-zone.drag-over {
    border-color: var(--color-primary, #6366f1);
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.2);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 2rem;
    opacity: 0.7;
    line-height: 1;
}

.upload-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary, #f1f5f9);
    margin: 0;
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0;
}

.upload-formats {
    font-size: 0.65rem;
    color: var(--color-text-muted, #64748b);
    margin: 4px 0 0 0;
}

.upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--color-primary-rgb, 99, 102, 241), 0.2);
    border-top-color: var(--color-primary, #6366f1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* @keyframes spin defined in loading-states.css */

/* Preview Section */
.media-preview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.media-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    min-height: 100px;
}

.media-preview-element {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.media-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-shrink: 0;
}

.media-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-primary, #f1f5f9);
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
    border: 1px solid rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.media-btn:hover {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.25);
    border-color: rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
}

.media-btn-upload {
    background: var(--color-primary, #6366f1);
    border-color: transparent;
    color: white;
}

.media-btn-upload:hover {
    background: var(--color-primary-light, #818cf8);
}

.media-btn-remove {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.media-btn-remove:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-icon {
    font-size: 0.9rem;
}

/* Caption Section */
.media-caption-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.caption-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.caption-input {
    all: unset;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--color-text-primary, #f1f5f9);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    width: 100%;
}

.caption-input:focus {
    border-color: rgba(var(--color-primary-rgb, 99, 102, 241), 0.5);
}

.caption-input::placeholder {
    color: var(--color-text-muted, #64748b);
}

.caption-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */

.media-editor::-webkit-scrollbar {
    width: 4px;
}

.media-editor::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.media-editor::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
    border-radius: 2px;
}


/* css/components/embed-blocks.css */
/* ==========================================================================
   Embed Block Styles - Reddit, Spotify, YouTube
   ========================================================================== */

/* Common Embed Styles */
.reddit-block-content,
.spotify-block-content,
.youtube-block-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Placeholder Styles */
.reddit-placeholder,
.spotify-placeholder,
.youtube-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  gap: 10px;
  padding: 20px;
}

.reddit-placeholder .placeholder-icon,
.spotify-placeholder .placeholder-icon,
.youtube-placeholder .placeholder-icon {
  opacity: 0.7;
}

.reddit-placeholder .placeholder-text,
.spotify-placeholder .placeholder-text,
.youtube-placeholder .placeholder-text {
  font-size: 0.9rem;
}

/* Editor Styles */
.reddit-editor,
.spotify-editor,
.youtube-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  height: 100%;
  overflow-y: auto;
}

.embed-input-section {
  flex-shrink: 0;
}

.embed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.embed-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.embed-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 12px 0;
}

.embed-url-input-wrapper {
  display: flex;
  gap: 8px;
}

.embed-url-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(var(--color-bg-card-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.embed-url-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.embed-url-input::placeholder {
  color: var(--color-text-muted);
}

.embed-paste-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(var(--color-bg-card-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.embed-paste-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.embed-preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(var(--color-bg-card-rgb), 0.3);
}

.embed-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  gap: 10px;
  padding: 20px;
}

.embed-preview-placeholder p {
  margin: 0;
  font-size: 0.85rem;
}

/* ==========================================================================
   Reddit Block Specific Styles
   ========================================================================== */

.reddit-view {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.reddit-embed-container,
.reddit-preview-card {
  background: #1a1a1b;
  border: 1px solid #343536;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  max-width: 400px;
}

.reddit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.reddit-subreddit {
  font-size: 0.85rem;
  font-weight: 600;
  color: #d7dadc;
}

.reddit-author {
  font-size: 0.8rem;
  color: #818384;
}

.reddit-author::before {
  content: "•";
  margin-right: 8px;
}

.reddit-title {
  font-size: 1rem;
  font-weight: 500;
  color: #d7dadc;
  margin-bottom: 12px;
  line-height: 1.4;
  text-transform: capitalize;
}

.reddit-link {
  display: inline-block;
  font-size: 0.85rem;
  color: #FF4500;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.reddit-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ==========================================================================
   Spotify Block Specific Styles
   ========================================================================== */

.spotify-view {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.spotify-embed-iframe {
  border-radius: 12px;
  max-width: 100%;
}

.spotify-preview-wrapper {
  width: 100%;
  padding: 8px;
}

.spotify-preview-iframe {
  border-radius: 12px;
}

.spotify-type-indicator {
  margin-top: 8px;
  min-height: 24px;
}

.type-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(29, 185, 84, 0.2);
  color: #1DB954;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   YouTube Block Specific Styles
   ========================================================================== */

.youtube-view {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.youtube-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.youtube-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.youtube-preview-wrapper {
  width: 100%;
  padding: 8px;
}

.youtube-preview-video {
  padding-bottom: 56.25%;
}

.youtube-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.youtube-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.youtube-start-input {
  width: 80px;
  padding: 6px 10px;
  background: rgba(var(--color-bg-card-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 0.85rem;
}

.youtube-start-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ==========================================================================
   Scrollbar styling for editors
   ========================================================================== */

.reddit-editor::-webkit-scrollbar,
.spotify-editor::-webkit-scrollbar,
.youtube-editor::-webkit-scrollbar {
  width: 6px;
}

.reddit-editor::-webkit-scrollbar-track,
.spotify-editor::-webkit-scrollbar-track,
.youtube-editor::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.reddit-editor::-webkit-scrollbar-thumb,
.spotify-editor::-webkit-scrollbar-thumb,
.youtube-editor::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.3);
  border-radius: 3px;
}

.reddit-editor::-webkit-scrollbar-thumb:hover,
.spotify-editor::-webkit-scrollbar-thumb:hover,
.youtube-editor::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.5);
}

/* Mobile - constrain embed containers to viewport */
@media (max-width: 600px) {
  .reddit-embed-container,
  .reddit-preview-card {
    max-width: 100%;
  }

  .spotify-embed-iframe {
    max-width: 100%;
  }
}


/* css/components/post-card.css */
/**
 * PostCard Component Styles
 * 
 * Unified styling for all content post card types.
 */

/* Base Card Styles */
.post-card {
    display: flex;
    flex-direction: column;
    background: var(--card-background, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-color, #e0e0e0);
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.post-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card Header */
.post-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
}

.post-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-index { background: #dbeafe; color: #1d4ed8; }
.badge-media { background: #ede9fe; color: #7c3aed; }
.badge-chart { background: #d1fae5; color: #059669; }
.badge-table { background: #fef3c7; color: #d97706; }
.badge-take { background: #fef3c7; color: #d97706; }
.badge-timeline { background: #fee2e2; color: #dc2626; }
.badge-default { background: #f3f4f6; color: #6b7280; }

.post-topic-link {
    font-size: 13px;
    color: var(--text-secondary, #666);
    text-decoration: none;
}

.post-topic-link:hover {
    color: var(--primary-color, #3b82f6);
    text-decoration: underline;
}

/* Card Media */
.post-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-color, #f5f5f5);
}

.post-media-image,
.post-media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Card Body */
.post-card-body {
    flex: 1;
    padding: 16px;
}

.post-card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--text-primary, #111);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary, #666);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Tags */
.post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.post-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    background: var(--surface-color, #f5f5f5);
    color: var(--text-secondary, #666);
}

/* Card Footer */
.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color-light, #f0f0f0);
}

.post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111);
    text-decoration: none;
}

.author-name:hover {
    text-decoration: underline;
}

.post-date {
    font-size: 12px;
    color: var(--text-tertiary, #999);
    margin-left: 4px;
}

.post-stats {
    display: flex;
    gap: 12px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.stat svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Type-Specific Styles
   ========================================================================== */

/* Take Card */
.post-card-take .take-content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary, #111);
    font-style: italic;
    margin-bottom: 12px;
}

.take-quote {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color, #3b82f6);
    vertical-align: text-top;
    line-height: 1;
}

.take-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

/* External Media Card */
.post-card-embed-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-color, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.embed-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.platform-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.platform-icon {
    font-size: 14px;
}

/* Timeline Card */
.post-card-timeline-preview {
    padding: 20px;
    background: var(--surface-color, #f5f5f5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.timeline-thumbnail-stack {
    position: relative;
    width: 180px;
    height: 100px;
}

.timeline-thumb {
    position: absolute;
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.timeline-thumb:nth-child(1) { left: 0; z-index: 3; }
.timeline-thumb:nth-child(2) { left: 30px; top: 10px; z-index: 2; }
.timeline-thumb:nth-child(3) { left: 60px; top: 20px; z-index: 1; }

.post-card-timeline:hover .timeline-thumb:nth-child(1) { transform: translateX(-5px) rotate(-3deg); }
.post-card-timeline:hover .timeline-thumb:nth-child(2) { transform: rotate(1deg); }
.post-card-timeline:hover .timeline-thumb:nth-child(3) { transform: translateX(5px) rotate(3deg); }

.timeline-empty-stack {
    font-size: 48px;
    opacity: 0.3;
}

.timeline-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #666);
}

/* Chart Card */
.post-card-chart-preview {
    aspect-ratio: 16 / 9;
    background: var(--surface-color, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #666);
}

.chart-icon {
    font-size: 48px;
    opacity: 0.5;
}

.chart-type {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

/* Table Card */
.post-card-table-preview {
    padding: 30px;
    background: var(--surface-color, #f5f5f5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #666);
}

.table-icon {
    font-size: 36px;
    opacity: 0.5;
}

/* Media Placeholder */
.media-placeholder {
    font-size: 48px;
    opacity: 0.3;
}

/* ==========================================================================
   Card Grid Layouts
   ========================================================================== */

.post-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.post-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-cards-list .post-card {
    flex-direction: row;
}

.post-cards-list .post-card-media {
    width: 200px;
    flex-shrink: 0;
    aspect-ratio: auto;
    height: 150px;
}

/* ==========================================================================
   Compact Card Variant
   ========================================================================== */

.post-card-compact .post-card-body {
    padding: 12px;
}

.post-card-compact .post-card-title {
    font-size: 15px;
    -webkit-line-clamp: 1;
}

.post-card-compact .post-card-description {
    font-size: 13px;
    -webkit-line-clamp: 2;
}

.post-card-compact .post-card-footer {
    padding: 8px 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .post-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .post-cards-list .post-card {
        flex-direction: column;
    }
    
    .post-cards-list .post-card-media {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    .post-card-title {
        font-size: 16px;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .post-card {
        background: var(--card-background-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
    }
    
    .post-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    
    .post-card-header,
    .post-card-footer {
        border-color: var(--border-color-dark, #374151);
    }
    
    .post-card-title {
        color: var(--text-primary-dark, #f3f4f6);
    }
    
    .post-card-description,
    .post-topic-link,
    .stat {
        color: var(--text-secondary-dark, #9ca3af);
    }
    
    .author-name {
        color: var(--text-primary-dark, #f3f4f6);
    }
    
    .post-tag {
        background: var(--surface-color-dark, #374151);
        color: var(--text-secondary-dark, #9ca3af);
    }
    
    .post-card-embed-preview,
    .post-card-chart-preview,
    .post-card-table-preview,
    .post-card-timeline-preview,
    .post-card-media {
        background: var(--surface-color-dark, #111827);
    }
}

/* css/components/widgets/search.css */
/* ========================================
   GLOBAL SEARCH DROPDOWN STYLES
   Styles for the search results dropdown
   (Input styles are in base.css as .prominent-search-*)
   ======================================== */

/* Prominent Search Results - extends base.css styles */
.prominent-search-results {
    background: var(--color-bg-base-mid);
    border: 1px solid var(--color-border-secondary);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prominent-search-results::-webkit-scrollbar {
    display: none;
}

/* ========================================
   SEARCH TABS
   ======================================== */

.search-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 0.25rem;
}

.search-tab {
    flex: 1;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.search-tab:hover {
    color: var(--color-text-secondary);
}

.search-tab.active {
    color: white;
}

.search-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.search-tab-count {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    background: rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-sm);
    color: inherit;
}

.search-tab.active .search-tab-count {
    background: rgba(var(--color-primary-rgb), 0.3);
}

.search-tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   TAB CONTENT
   ======================================== */

.search-tab-content {
    display: none;
}

.search-tab-content.active {
    display: block;
}

.search-section {
    padding: 0.25rem;
}

/* ========================================
   RESULT ITEMS
   ======================================== */

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.search-result-item.active {
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: -2px;
}

/* Preview Images */
.search-result-preview {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    /* Dark surface: team logos are the ESPN dark-theme variants (white
       marks) — on #fff they vanish. Headshots cover the box anyway. */
    background: rgba(255, 255, 255, 0.06);
}

/* Team logos: a medium slate surface (all-white marks need more than the
   near-black avatar shade) + contain so the mark never crops, with a little
   breathing room. Works for both <img> renderers (nav + hero dropdowns). */
img.search-result-preview--team,
.search-result-preview--team {
    object-fit: contain;
    padding: 6px;
    background: linear-gradient(135deg, #2e3742, #222a33);
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.search-result-preview-placeholder {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.search-result-avatar {
    border-radius: 50%;
}

/* Content */
.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    text-align: left;
}

/* Athlete context line: team logo + "School · POS" */
.search-result-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: left;
}

.search-result-school-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;   /* transparent team-logo PNGs — never crop */
    background: transparent;
    flex-shrink: 0;
}

.search-result-detail {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.search-result-detail + .search-result-footer,
.search-result-tags + .search-result-footer,
.search-result-detail + .search-result-tags + .search-result-footer {
    margin-top: 0.5rem;
}

.search-result-meta {
    color: var(--color-text-muted);
}

.search-result-author {
    color: var(--color-text-disabled);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-result-author-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

/* Tags */
.search-result-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.search-result-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(var(--color-primary-rgb), 0.2);
    border: 1px solid rgba(var(--color-primary-rgb), 0.4);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search Highlight */
.search-highlight {
    background: rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-primary);
    padding: 0 0.125rem;
    border-radius: 2px;
}

/* ========================================
   STATES
   ======================================== */

/* No Results */
.search-no-results {
    padding: 1rem;
    text-align: center;
}

.search-no-results-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.search-no-results-text {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.search-no-results-hint {
    color: var(--color-text-disabled);
    font-size: 0.75rem;
}

.search-no-results-cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.search-cta-text {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.search-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--color-primary-rgb), 0.15);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.search-cta-button:hover {
    background: rgba(var(--color-primary-rgb), 0.25);
    border-color: rgba(var(--color-primary-rgb), 0.5);
    transform: translateY(-1px);
}

.search-cta-button svg {
    flex-shrink: 0;
}

/* More Results */
.search-result-more {
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--color-text-disabled);
    font-size: 0.875rem;
    font-style: italic;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
}

/* Loading */
.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.search-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--color-primary-rgb), 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: searchSpin 0.8s linear infinite;
}

@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

/* Error */
.search-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.search-error-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.search-error-text {
    color: var(--color-error, #ef4444);
    font-size: 0.95rem;
}

/* ========================================
   LIGHT MODE
   ======================================== */

/* css/components/lazy-load.css */
/**
 * Lazy Loading Styles
 * 
 * Provides visual feedback during image loading states:
 * - Placeholder state (before load)
 * - Loading state (during load)
 * - Loaded state (after load)
 * - Error state (failed to load)
 */

/* Base lazy image styles */
.lazy-image,
img[data-src],
img[loading="lazy"] {
    background-color: var(--color-bg-secondary, #0c0c0e);
    transition: opacity 0.3s ease-in-out;
}

/* Placeholder state */
.lazy-placeholder {
    opacity: 1;
    background: linear-gradient(
        135deg,
        var(--color-bg-secondary, #0c0c0e) 0%,
        var(--color-bg-tertiary, #252540) 50%,
        var(--color-bg-secondary, #0c0c0e) 100%
    );
    background-size: 200% 200%;
    animation: lazyShimmer 1.5s ease-in-out infinite;
}

/* Loading state - shimmer animation */
.lazy-loading {
    opacity: 0.7;
    animation: lazyShimmer 1s ease-in-out infinite;
}

/* Loaded state */
.lazy-loaded {
    opacity: 1;
    animation: none;
    background: transparent;
}

/* Error state */
.lazy-error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Shimmer animation */
@keyframes lazyShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Fade in animation */
@keyframes lazyFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply fade-in to newly loaded images */
.lazy-loaded {
    animation: lazyFadeIn 0.3s ease-out forwards;
}

/* ============================================================================
   Card Header Images - Specific optimizations
   ============================================================================ */

.card-header-image {
    /* Ensure images don't cause layout shift */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    
    /* Smooth loading */
    background-color: var(--color-bg-secondary, #0c0c0e);
    
    /* Hardware acceleration for smooth animations */
    will-change: opacity;
    transform: translateZ(0);
}

.card-header-media {
    /* Prevent layout shift */
    min-height: 140px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-secondary, #0c0c0e);
    transition: background-color 0.3s ease;
}

/* Hide placeholder background when image is loaded */
.card-header-media:has(.lazy-loaded) {
    background-color: transparent;
}

/* Loading indicator for card images */
.card-header-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: cardImageShimmer 1.5s infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-header-media:not(:has(.lazy-loaded))::before {
    opacity: 1;
}

@keyframes cardImageShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ============================================================================
   Index Header Images
   ============================================================================ */

.index-header-image {
    /* Prevent layout shift */
    aspect-ratio: 21 / 9;
    object-fit: cover;
    width: 100%;
    max-height: 400px;
    
    /* Smooth loading */
    background-color: var(--color-bg-secondary, #0c0c0e);
    border-radius: var(--radius-lg, 12px);
}

/* ============================================================================
   Search Result Previews
   ============================================================================ */

.search-result-preview {
    /* Fixed size to prevent layout shift */
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-secondary, #0c0c0e);
    flex-shrink: 0;
}

/* ============================================================================
   Avatar Images
   ============================================================================ */

.profile-avatar img,
.avatar-preview-container img,
#avatarImage,
#avatarPreview {
    background-color: var(--color-bg-secondary, #0c0c0e);
    object-fit: cover;
}

/* ============================================================================
   GIF-specific optimizations
   ============================================================================ */

/* Pause GIF animations when not in viewport (via JS) */
.gif-paused {
    animation-play-state: paused !important;
}

/* Indicator for GIF content */
.card-header-media[data-media-type="gif"]::after {
    content: 'GIF';
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 10; /* Ensure GIF label appears above the image */
}

/* ============================================================================
   Video elements (converted from GIF)
   ============================================================================ */

/* Videos that replace GIFs should behave like images */
.gif-video,
video[data-src] {
    /* Same styling as lazy images */
    background-color: var(--color-bg-secondary, #0c0c0e);
    transition: opacity 0.3s ease-in-out;
    
    /* Ensure video fills container */
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Remove video controls styling */
    outline: none;
}

/* Loading state for videos */
video.lazy-loading {
    opacity: 0.7;
}

/* Loaded state for videos */
video.lazy-loaded {
    opacity: 1;
    animation: lazyFadeIn 0.3s ease-out forwards;
}

/* Video in card headers */
.card-header-media video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Indicator for video content (converted from GIF) */
.card-header-media[data-media-type="video"]::after {
    content: '▶';
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10; /* Ensure video label appears above the video */
}

/* ============================================================================
   Responsive images (srcset)
   ============================================================================ */

/* Images with srcset should maintain aspect ratio */
img[srcset],
img[data-srcset] {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Ensure proper sizing hints are respected */
img[sizes] {
    width: 100%;
}

/* ============================================================================
   Responsive adjustments
   ============================================================================ */

@media (max-width: 768px) {
    .card-header-image {
        aspect-ratio: 4 / 3;
    }
    
    .index-header-image {
        aspect-ratio: 16 / 9;
        max-height: 250px;
    }
}

/* ============================================================================
   Print styles - load all images
   ============================================================================ */

@media print {
    .lazy-image,
    img[data-src] {
        opacity: 1 !important;
    }
}

/* ============================================================================
   Reduced motion preference
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .lazy-placeholder,
    .lazy-loading,
    .card-header-media::before {
        animation: none;
    }
    
    .lazy-loaded {
        animation: none;
        opacity: 1;
    }
}


/* css/utilities.css */
/* ========================================
   UTILITY CLASSES - Helper classes, animations
   ======================================== */

/* Text Utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-blue {
  color: #00a8ff;
}

.text-white {
  color: #ffffff;
}

.text-muted {
  color: rgba(255, 255, 255, 0.6);
}

.text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Display Utilities */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }

/* Size Utilities */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Border Utilities */
.border { border: 1px solid rgba(255, 255, 255, 0.1); }
.border-top { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.border-left { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.border-right { border-right: 1px solid rgba(255, 255, 255, 0.1); }

.border-blue { border-color: #00a8ff; }
.border-blue-light { border-color: rgba(0, 168, 255, 0.3); }

.rounded { border-radius: 0.25rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 50%; }

/* Background Utilities */
.bg-transparent { background: transparent; }
.bg-blue { background: #00a8ff; }
.bg-blue-light { background: rgba(0, 168, 255, 0.1); }
.bg-blue-dark { background: rgba(0, 168, 255, 0.2); }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); }

.shadow-blue { box-shadow: 0 4px 20px rgba(0, 168, 255, 0.3); }
.shadow-blue-lg { box-shadow: 0 8px 25px rgba(0, 168, 255, 0.4); }

/* Animation Utilities */
.transition { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }

.hover-scale:hover { transform: scale(1.05); }
.hover-scale-lg:hover { transform: scale(1.1); }
.hover-lift:hover { transform: translateY(-2px); }
.hover-lift-lg:hover { transform: translateY(-4px); }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Z-index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-5px);
  }
  90% {
    transform: translateY(-2px);
  }
}

/* @keyframes spin defined in loading-states.css */

/* Animation Classes */
.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
.animate-fade-out { animation: fadeOut 0.5s ease-in-out; }
.animate-slide-in-up { animation: slideInUp 0.5s ease-out; }
.animate-slide-in-down { animation: slideInDown 0.5s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* Responsive Utilities */
@media (max-width: 768px) {
  .mobile-hidden { display: none; }
  .mobile-block { display: block; }
  .mobile-flex { display: flex; }
  .mobile-grid { display: grid; }
  
  .mobile-text-center { text-align: center; }
  .mobile-text-left { text-align: left; }
  .mobile-text-right { text-align: right; }
  
  .mobile-w-100 { width: 100%; }
  .mobile-h-100 { height: 100%; }
  
  .mobile-p-0 { padding: 0; }
  .mobile-p-1 { padding: 0.25rem; }
  .mobile-p-2 { padding: 0.5rem; }
  .mobile-p-3 { padding: 0.75rem; }
  .mobile-p-4 { padding: 1rem; }
  
  .mobile-m-0 { margin: 0; }
  .mobile-m-1 { margin: 0.25rem; }
  .mobile-m-2 { margin: 0.5rem; }
  .mobile-m-3 { margin: 0.75rem; }
  .mobile-m-4 { margin: 1rem; }
}

@media (min-width: 769px) {
  .desktop-hidden { display: none; }
  .desktop-block { display: block; }
  .desktop-flex { display: flex; }
  .desktop-grid { display: grid; }
}

/* Quick Links */
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.quick-link-card {
  background: rgba(0, 168, 255, 0.08);
  border: 2px solid rgba(0, 168, 255, 0.2);
  border-radius: 12px;
  padding: 2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quick-link-card:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: #00a8ff;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 168, 255, 0.3);
}

.quick-link-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.quick-link-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #00a8ff;
}

.quick-link-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* css/pages/auth.css */
/* =============================================================================
   Auth screens (login, resend verification, forgot / reset password, verify
   email, creator signup) in Terminal Light. EXTEND_TO_ALL_SCREENS "Auth":
   a centred single card on the off-white page with the pixel field behind
   it, the logo, a mono step label and a solid ink primary button. The shell
   is bare (no sidebar); the top bar keeps the logo. Tokens only.

   base.html links this sheet on every page, so everything new is scoped
   under .tla. The short "Global legacy" block at the end keeps the generic
   .btn-primary / .btn-secondary / .empty-state classes that admin and modal
   markup still reads from this file, now on tokens.
   ============================================================================= */

.tla {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--tl-topbar-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 16px 72px;
}
.tla > canvas.tl-field { position: absolute; left: 0; top: 0; opacity: var(--tl-field-opacity-edges); pointer-events: none; }
.tla > *:not(canvas) { position: relative; }

/* ---- Card ---- */
.tla-card {
  width: min(420px, 100%);
  padding: 26px 28px 24px;
  background: var(--tl-card);
  box-shadow: var(--tl-float-shadow);
  border: 0;
  line-height: normal;
}
.tla-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
img.tla-logo { width: 34px; height: 34px; flex: none; border-radius: 9px; background: transparent; }
.tla-step { margin-left: auto; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.6px; color: var(--tl-ink-50); text-transform: uppercase; white-space: nowrap; }
.tla-title { margin: 0 0 6px; padding: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; color: var(--tl-ink); }
.tla-dek { margin: 0 0 22px; font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-60); }
.tla-dek strong { color: var(--tl-ink); font-weight: 600; }

/* ---- Form ---- */
.tla-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.tla-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tla-field > label, .tla-label { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--tl-ink-70); }
.tla .tl-input { height: 40px !important; font-size: 14px !important; }
.tla .tl-input[aria-invalid="true"] { border-color: var(--tl-down) !important; }
.tla .tl-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--tl-down-bg) !important; }
.tla-hint { font-size: 11.5px; line-height: 1.45; color: var(--tl-ink-50); }
.tla-err { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tl-down); }
.tla-err:empty { display: none; }
.tla-ok {
  margin: 0; padding: 10px 12px; border-radius: var(--tl-r-btn);
  background: var(--tl-up-bg); color: var(--tl-up);
  font-size: 12.5px; line-height: 1.45;
}
.tla-ok:empty, .tla-ok[hidden] { display: none; }
.tla-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Checkbox: 16px, ink when checked. Pico styles input[type=checkbox]. */
.tla-check { display: inline-flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--tl-ink-70); cursor: pointer; }
.tla-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 16px !important; height: 16px !important; margin: 1px 0 0 !important; padding: 0 !important;
  border: 1px solid var(--tl-line-18) !important; border-radius: var(--tl-r-tag) !important;
  background: var(--tl-control) !important; background-image: none !important;
  box-shadow: none; cursor: pointer;
}
.tla-check input[type="checkbox"]:checked { background: var(--tl-ink) !important; border-color: var(--tl-ink) !important; }
.tla-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--tl-on-ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.tla-check input[type="checkbox"]:focus-visible { box-shadow: var(--tl-focus-ring) !important; outline: none; }
.tla-check input[aria-invalid="true"] { border-color: var(--tl-down) !important; }
.tla-check a { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Buttons ---- */
.tla .tla-btn { width: 100%; height: 40px; font-size: 13.5px; }
.tla a.tla-btn { text-decoration: none; }
.tla .tl-btn-ghost.tla-btn:disabled { background: var(--tl-fill-05); color: var(--tl-ink-45); }
.tla-link { font-size: 12.5px; color: var(--tl-ink-60); text-decoration: none; }
.tla-link:hover { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 2px; }
.tla-google svg { flex: none; }

.tla-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.6px; color: var(--tl-ink-40); }
.tla-or::before, .tla-or::after { content: ''; flex: 1; height: 1px; background: var(--tl-line-07); }

/* ---- Foot ---- */
.tla-foot {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  margin: 22px -28px -24px; padding: 14px 28px;
  border-top: 1px solid var(--tl-line-06);
  font-size: 12.5px; color: var(--tl-ink-50); text-align: center;
}
.tla-foot p { margin: 0; }
.tla-foot a { color: var(--tl-ink); font-weight: 600; }
.tla-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tla-foot a.tla-link { font-weight: 400; color: var(--tl-ink-60); }
.tla-legal { margin: 18px 0 0; font-size: 11.5px; color: var(--tl-ink-45); text-align: center; }
.tla-legal a:hover { color: var(--tl-ink); }

/* ---- Verify states ---- */
.tla-state[hidden] { display: none; }
.tla-badge {
  width: 40px; height: 40px; margin-bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--tl-fill-06); color: var(--tl-ink);
}
.tla-badge.is-up { background: var(--tl-up-bg); color: var(--tl-up); }
.tla-badge.is-down { background: var(--tl-down-bg); color: var(--tl-down); }
.tla-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tla-skel-title { width: 62%; height: 22px; margin: 4px 0 12px; }
.tla-skel-line { width: 88%; }
.tla-skel-line.is-short { width: 54%; margin-bottom: 18px; }

@media (max-width: 720px) {
  .tla { justify-content: flex-start; padding: 28px 16px 48px; }
  .tla-card { padding: 22px 20px 20px; }
  .tla-foot { margin: 20px -20px -20px; padding: 14px 20px; }
  .tla-title { font-size: 22px; }
}

/* =============================================================================
   Global legacy: generic classes other markup still reads from this sheet
   (modal.js buttons, admin pages, topic settings, collection editor).
   ============================================================================= */
.btn-primary, .btn-secondary {
  display: inline-block; padding: 9px 20px; border-radius: var(--tl-r-btn);
  font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--tl-ink); border: 1px solid var(--tl-ink); color: var(--tl-on-ink); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--tl-ink-hover); border-color: var(--tl-ink-hover); color: var(--tl-on-ink); transform: none; box-shadow: none; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--tl-control); border: 1px solid var(--tl-line-12); color: var(--tl-ink); }
.btn-secondary:hover:not(:disabled) { background: var(--tl-page); }
.empty-state { text-align: center; color: var(--tl-ink-50); padding: 2rem; font-size: 0.95rem; }
/* A title in the top row, beside the logo (login). */
.tla-top .tla-title { margin: 0; }
.tla-top:has(.tla-title) { margin-bottom: 10px; }

/* css/pages/profile.css */
/**
 * Profile Pages Styling
 * 
 * Styles for user profile view and edit pages
 */

/* ============================================================================
   Profile View
   ============================================================================ */

/* Profile page uses explore-page as base for consistent styling */
.profile-page {
  /* Matches .explore-page layout from core.css (used on topic page) */
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
}

/* Override Pico CSS .container max-width for profile page (matches core.css for topic page) */
main.container:has(.profile-page) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Match topic page scroll container hierarchy for sticky positioning */
html:has(.profile-page),
body:has(.profile-page) {
  overflow-x: clip;
}

/* Profile timeline area - wrapper for timeline sections */
.profile-timeline-area {
  position: relative;
  width: 100%;
}

/* Profile content container - centered content area */
.profile-content-container {
  /* Inherits from .section-container in explore-v2.css */
  padding-bottom: var(--spacing-xl);
}

.profile-card {
  max-width: calc(1200px - 4rem);
  width: calc(100% - 4rem);
  margin: 1.5rem auto 0;
  border-radius: var(--radius-xl);
  overflow: visible;
}

.profile-card .profile-banner {
  max-width: none;
  width: 100%;
  margin: 0;
}

.profile-header {
  padding: 16px 24px 24px 192px;
  position: relative;
  min-height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.profile-identity {
  position: absolute;
  left: 16px;
  top: 0;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -72px;
  z-index: 4;
}

.profile-avatar {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-bg-base, #1a1a2e);
  flex-shrink: 0;
  background: var(--color-bg-base, #1a1a2e);
}

.profile-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  width: 100%;
}

.profile-meta-item {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.2;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Profile Header Actions (Share & Settings buttons) — positioned in banner */
.profile-header-actions {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

/* Affiliations — right side of profile header, aligned with author name */
.profile-affiliations {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.profile-affiliations-label {
  display: inline;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.profile-affiliation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.profile-affiliation:hover {
  color: #fff;
}

.profile-affiliation-img {
  display: none;
}

.profile-affiliation-name {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.profile-action-btn:hover {
  background: rgba(0, 168, 255, 0.4);
  color: #fff;
  border-color: rgba(0, 168, 255, 0.6);
}

.profile-action-btn:focus,
.profile-action-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  -webkit-tap-highlight-color: transparent;
}

.profile-action-btn svg {
  width: 18px;
  height: 18px;
}

/* Toast Notification for Copy Link */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  background: #10b981;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============================================================================
   Profile Banner (Substack-style)
   ============================================================================ */

.profile-banner {
  max-width: calc(1200px - 4rem);
  width: calc(100% - 4rem);
  height: 280px;
  margin: 0 auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  position: relative;
  overflow: hidden;
}

.profile-banner-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.profile-banner-image.loaded {
  opacity: 1;
}



/* Handle / @username */
.profile-handle {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin: 2px 0 0;
}

@media (max-width: 768px) {
  /* Full-width banner, no card container */
  .profile-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .profile-card .profile-banner,
  .profile-card .profile-banner-image {
    border-radius: 0;
  }

  .profile-banner {
    width: 100%;
    max-width: 100%;
    height: 180px;
    border-radius: 0;
  }

  /* Stack layout: avatar above name/bio */
  .profile-header {
    padding: 0 1rem 1rem;
    border: none;
    border-radius: 0;
  }

  .profile-identity {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin-top: -48px;
    align-items: flex-start;
    text-align: left;
  }

  .profile-avatar {
    width: 96px;
    height: 96px;
  }

  .profile-info {
    margin-top: 8px;
  }

  .profile-affiliations-label {
    font-size: 0.7rem;
  }

  .profile-affiliation-name {
    font-size: 0.7rem;
  }

  .profile-action-btn {
    width: 28px;
    height: 28px;
  }

  .profile-action-btn svg {
    width: 14px;
    height: 14px;
  }

  .profile-stats-bar {
    display: none !important;
  }

  .profile-content-container {
    padding-bottom: 0 !important;
  }

  .profile-header {
    padding-bottom: 0;
  }

  .profile-social-links {
    gap: 3px;
  }

  .profile-social-link {
    font-size: 7px;
    padding: 1px 3px;
    gap: 2px;
    border-radius: 2px;
  }

  .profile-social-link svg {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 480px) {
  .profile-banner {
    height: 150px;
  }

  .profile-avatar {
    width: 84px;
    height: 84px;
  }

  .profile-identity {
    margin-top: -42px;
  }
}

/* Share Menu Dropdown - Glassmorphism style */
.share-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  background: var(--color-bg-base-mid);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.share-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: left;
}

.share-menu-item:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-text-primary);
}

.share-menu-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.share-menu-item:hover svg {
  opacity: 1;
}

.share-menu-divider {
  height: 1px;
  background: rgba(var(--color-primary-rgb), 0.2);
  margin: 0.25rem 0;
}

/* Copy success state */
.share-menu-item.copied span {
  color: var(--color-primary);
}

.profile-info {
  flex: 1;
}

.profile-info h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.profile-joined {
  color: var(--text-secondary, #666);
  font-size: 0.9rem;
}

.profile-actions {
  flex-shrink: 0;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profile-section {
  background: rgba(24, 34, 54, 0.5);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15);
  padding: 2rem;
  transition: all var(--transition-slower);
  position: relative;
  overflow: hidden;
}

.profile-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(var(--color-primary-rgb), 0.3), 
    rgba(var(--color-primary-rgb), 0.1)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.profile-section:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.25);
}

.profile-section h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.2);
  padding-bottom: 0.5rem;
  color: var(--color-text-primary);
  position: relative;
  z-index: 1;
}

.profile-bio {
  color: var(--color-text-secondary);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   Favorite Teams
   ============================================================================ */

.favorite-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(24, 34, 54, 0.4);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  transition: all var(--transition-slow);
  cursor: pointer;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-primary-rgb), 0.5);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.2);
  background: rgba(24, 34, 54, 0.6);
}

.team-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.team-card span {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

/* ============================================================================
   Dashboards Grid
   ============================================================================ */

.dashboards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ============================================================================
   Profile Edit
   ============================================================================ */

.profile-edit-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.profile-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.profile-edit-header h1 {
  margin: 0;
}

.profile-edit-form {
  background: transparent;
  padding: 0;
  position: relative;
}

.form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h2 {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================================
   Avatar Upload
   ============================================================================ */

.avatar-upload {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.avatar-preview {
  flex-shrink: 0;
}

.avatar-preview img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s ease;
}

.avatar-preview img:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.avatar-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Banner Upload */
.banner-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.banner-preview {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.banner-upload-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============================================================================
   Team Selector
   ============================================================================ */

.team-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(24, 34, 54, 0.3);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  max-height: 400px;
  overflow-y: auto;
}

.team-selector-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem;
  background: rgba(24, 34, 54, 0.5);
  border: 2px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.team-selector-btn:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
  background: rgba(24, 34, 54, 0.7);
}

.team-selector-btn.selected {
  border-color: rgba(var(--color-primary-rgb), 0.8);
  background: rgba(var(--color-primary-rgb), 0.2);
  box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
}

.team-selector-btn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.team-selector-btn span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.selected-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  min-height: 50px;
}

.team-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--color-primary-rgb), 0.3);
  border: 1px solid rgba(var(--color-primary-rgb), 0.5);
  color: var(--color-text-primary);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-slow);
}

.team-chip:hover {
  background: rgba(var(--color-primary-rgb), 0.4);
  border-color: rgba(var(--color-primary-rgb), 0.7);
}

.team-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 2px;
}

.remove-team-btn {
  background: rgba(var(--color-primary-rgb), 0.3);
  border: 1px solid rgba(var(--color-primary-rgb), 0.5);
  color: var(--color-text-primary);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-slow);
}

.remove-team-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.5);
  border-color: rgba(var(--color-primary-rgb), 0.8);
  transform: scale(1.1);
}

/* ============================================================================
   Buttons
   ============================================================================ */

.profile-edit-form .btn-primary,
.profile-edit-form .btn-secondary {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.profile-edit-form .btn-primary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-edit-form .btn-primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  transform: none;
}

.profile-edit-form .btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.profile-edit-form .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-edit-form .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.profile-edit-form .btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Cancel/Back link button */
.btn-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  display: inline-block;
}

.btn-link:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* ============================================================================
   Form Actions
   ============================================================================ */

.form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

/* ============================================================================
   Profile Edit Form - Dark Theme Overrides
   Match portfolio page styling (dark translucent inputs, consistent colors)
   ============================================================================ */

.profile-edit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.profile-edit-form .form-group:last-child {
  margin-bottom: 0;
}

.profile-edit-form .form-group label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.profile-edit-form .form-group input[type="text"],
.profile-edit-form .form-group input[type="email"],
.profile-edit-form .form-group input[type="url"],
.profile-edit-form .form-group textarea,
.profile-edit-form .form-group select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.profile-edit-form .form-group input:hover,
.profile-edit-form .form-group textarea:hover,
.profile-edit-form .form-group select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.profile-edit-form .form-group input:focus,
.profile-edit-form .form-group textarea:focus,
.profile-edit-form .form-group select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}

.profile-edit-form .form-group input::placeholder,
.profile-edit-form .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.profile-edit-form .form-group input:disabled,
.profile-edit-form .form-group input[readonly] {
  opacity: 0.4;
  cursor: not-allowed;
}

.profile-edit-form .form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.profile-edit-form .form-hint {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.profile-edit-form .form-error {
  font-size: 0.85rem;
  color: #ef4444;
  min-height: 1.2rem;
}

.profile-edit-form .form-success {
  font-size: 0.9rem;
  color: #10b981;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-md);
  text-align: center;
  min-height: 1.2rem;
}

.profile-edit-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
  color: var(--color-text-primary);
  text-shadow: none;
}

.profile-edit-form .checkbox-label input[type="checkbox"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ============================================================================
   Profile Topics Section (Scrollable Topic Cards Row)
   ============================================================================ */

.profile-topics-section {
  width: calc(100% - 160px);
  margin: 0 auto 2.5rem;
}

.profile-topics-section .section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.profile-topics-section .section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.profile-topics-section .section-title-text {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.profile-topics-section .section-title-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00a8ff 0%, #33c4ff 50%, #00a8ff 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
}

.profile-topics-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.75rem 0 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Scroll snap for card alignment */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.profile-topics-grid::-webkit-scrollbar {
  display: none;
}

/* Topic cards in profile - uses topic-preview-card base from explore-v2 */
/* Card width calculated to fit exactly 4 cards with gaps: (100% - 3 gaps) / 4 */
.profile-topics-grid .topic-preview-card {
  flex: 0 0 calc((100% - 2.25rem) / 4);
  height: 150px;
  min-height: 150px;
  scroll-snap-align: start;
}

/* Topic rank pill - top right corner */
.profile-topics-grid .topic-rank-pill {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   Profile Timeline Section (Horizontal Carousel - uses explore-v2.css styles)
   ============================================================================ */

/* Profile timeline section - positioned outside container like explore page */
.profile-timeline-section {
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
}

/* Override explore-v2 carousel padding to accommodate topic pills and action buttons */
.profile-timeline-section .timeline-carousel-wrapper {
  overflow: visible;
  padding-bottom: 80px; /* Space for timeline bar */
  min-height: 400px;
}

.profile-timeline-section .timeline-carousel {
  /* No topic pills on profile page, so less top padding needed */
  padding-top: 12px;
  padding-bottom: 16px;
  overflow-x: auto;
  overflow-y: visible;
  min-height: 320px;
}

/* Ensure cards can show content above/below */
.profile-timeline-section .carousel-post-card {
  overflow: visible;
}

/* Twitter embed cards - ALL transparent (matching explore page behavior) */
.profile-timeline-section .carousel-post-card.twitter-embed-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.profile-timeline-section .carousel-post-card.twitter-embed-card.featured {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  height: auto !important;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-timeline-section .carousel-post-card.twitter-embed-card.featured .post-embed-container {
  height: auto;
  flex: 0 0 auto;
}

.profile-timeline-section .carousel-post-card.twitter-embed-card.featured .tweet-container {
  height: auto;
}

.profile-timeline-section .carousel-post-card.twitter-embed-card.featured .carousel-card-actions {
  position: relative;
  bottom: auto;
  margin-top: -20px;
}

.profile-timeline-section .carousel-post-card.twitter-embed-card:not(.featured) {
  opacity: 0.5;
  filter: brightness(0.7);
  transform: scale(0.9);
  overflow: hidden;
}

/* Post embed container - transparent and overflow visible for Twitter cards */
.profile-timeline-section .carousel-post-card.twitter-embed-card .post-embed-container {
  background: transparent !important;
  overflow: visible;
}

/* Tweet container - match explore grid style */
.profile-timeline-section .carousel-post-card .tweet-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: 100%;
  background: transparent !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* Top-align overflowing tweets */
.profile-timeline-section .carousel-post-card .tweet-container.tweet-overflows {
  align-items: flex-start;
  padding-top: 12px;
}

/* Twitter tweet element */
.profile-timeline-section .carousel-post-card .twitter-tweet {
  margin: 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Twitter iframe - match explore grid */
.profile-timeline-section .carousel-post-card .twitter-tweet iframe {
  max-height: 100% !important;
  max-width: 100% !important;
  transform: scale(0.85);
  transform-origin: center center;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  color-scheme: light !important;
}

/* Overflowing tweets anchor to top */
.profile-timeline-section .carousel-post-card .tweet-container.tweet-overflows iframe {
  transform-origin: top center;
}

/* Target the Twitter widget wrapper after it renders */
.profile-timeline-section .carousel-post-card .twitter-tweet-rendered-true {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Timeline bar positioning - override default margin-top */
.profile-timeline-section .carousel-timeline-bar {
  margin-top: 360px; /* Default, JS will adjust based on card height */
}

/* Timeline empty state */
.timeline-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-secondary);
}

.timeline-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.timeline-empty-state h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
  color: var(--color-text-primary);
}

.timeline-empty-state p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--color-text-muted);
}

/* ============================================================================
   Responsive Timeline & Topics
   ============================================================================ */

@media (max-width: 768px) {
  .profile-topics-section {
    width: calc(100% - 80px);
    margin-bottom: 1.5rem;
  }

  .profile-topics-section .section-title {
    font-size: 1.1rem;
  }

  /* Fit exactly 3 cards on tablet */
  .profile-topics-grid .topic-preview-card {
    flex: 0 0 calc((100% - 1.5rem) / 3);
    height: 130px;
    min-height: 130px;
  }

  .profile-timeline-section {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* Fit exactly 2 cards on mobile */
  .profile-topics-grid .topic-preview-card {
    flex: 0 0 calc((100% - 0.75rem) / 2);
    height: 120px;
    min-height: 120px;
  }
}

/* ============================================================================
   Loading & Empty States
   ============================================================================ */

.loading-state,
.empty-state,
.error-state {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-xl);
  color: var(--color-text-secondary);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(var(--color-primary-rgb), 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--spacing-xl);
}

/* @keyframes spin defined in loading-states.css */

/* Profile Loading Animation (matches explore page style) */
.profile-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 1rem;
  transition: opacity 0.2s ease-out;
}

.profile-loading-state.fade-out {
  opacity: 0;
  pointer-events: none;
}

.profile-loading-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  line-height: 1.4; /* Fixed line-height prevents reflow from dots animation */
}

.profile-loading-state .loading-dots {
  display: inline-block;
}

.profile-loading-state .loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

.profile-loading-bar {
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.profile-loading-bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-primary, #00a8ff), transparent);
  border-radius: 3px;
  animation: loadingBar 1.5s ease-in-out infinite;
}

@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.error-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-xl);
}

.empty-state p {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
}

.empty-state .btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-2xl);
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.3);
}

.empty-state .btn:hover {
  background: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 0 24px rgba(var(--color-primary-rgb), 0.5);
  transform: translateY(-1px);
}

/* ============================================================================
   Edit Profile Button
   ============================================================================ */

.btn-edit-profile {
  padding: var(--spacing-sm) var(--spacing-xl);
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.3);
}

.btn-edit-profile:hover {
  background: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 0 24px rgba(var(--color-primary-rgb), 0.5);
  transform: translateY(-1px);
}

.profile-username {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.profile-bio {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================================
   Profile Social Links
   ============================================================================ */

.profile-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.profile-social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.profile-social-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.profile-social-link svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Legacy support */
.profile-twitter-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(var(--color-primary-rgb), 0.1);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-sm);
  transition: all 0.2s ease;
}

.profile-twitter-link:hover {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-primary);
}

.profile-twitter-link svg {
  flex-shrink: 0;
}

/* ============================================================================
   Profile Stats Bar
   ============================================================================ */

.profile-stats-bar {
  display: none;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  padding: 0;
}

.profile-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  padding: 0 8px;
}

.profile-stat:first-child {
  padding-left: 0;
}

.profile-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

.profile-stat-label {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

.profile-stat-divider {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .profile-stats-bar {
    /* inherits width from parent */
  }
  .profile-stat {
    padding: 0 10px;
  }
  .profile-stat-value {
    font-size: 16px;
  }
}

/* ============================================================================
   Featured Link Cards
   ============================================================================ */

.featured-links-row {
  display: none;
  gap: 16px;
  justify-content: center;
  width: calc(100% - 160px);
  margin: 0 auto 8px;
  padding: 0;
}

.featured-link-card {
  flex: 1;
  min-width: 0;
  height: 180px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: none;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease;
}

.featured-link-card:hover {
  transform: scale(1.02);
}

.featured-link-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0c0c0e;
  transition: transform 0.4s ease;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.featured-link-card:hover .featured-link-media {
  transform: scale(1.05);
}

.featured-link-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.featured-link-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Placeholder cards (own profile, empty state) */
.featured-link-placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.12);
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.featured-link-placeholder:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  transform: none;
  box-shadow: none;
}

.featured-link-placeholder svg {
  opacity: 0.6;
}

/* Card wrapper for positioning edit button */
.featured-link-card-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.featured-link-card-wrapper .featured-link-card {
  flex: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* Circular delete button for featured links */
.featured-link-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 2;
}

.featured-link-delete-btn svg {
  width: 14px;
  height: 14px;
}

.featured-link-card-wrapper:hover .featured-link-delete-btn {
  opacity: 1;
}

.featured-link-delete-btn:hover {
  background: rgba(239, 68, 68, 0.6);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
  transform: scale(1.1);
}

/* Circular image button for featured links (add/change image) */
.featured-link-image-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 2;
}

.featured-link-image-btn svg {
  width: 14px;
  height: 14px;
}

.featured-link-card-wrapper:hover .featured-link-image-btn {
  opacity: 1;
}

.featured-link-image-btn:hover {
  background: rgba(0, 168, 255, 0.4);
  border-color: rgba(0, 168, 255, 0.6);
  color: #fff;
  transform: scale(1.1);
}

/* Circular remove-image button (only when image exists) */
.featured-link-remove-image-btn {
  position: absolute;
  bottom: 10px;
  left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 2;
}

.featured-link-remove-image-btn svg {
  width: 12px;
  height: 12px;
}

.featured-link-card-wrapper:hover .featured-link-remove-image-btn {
  opacity: 1;
}

.featured-link-remove-image-btn:hover {
  background: rgba(239, 68, 68, 0.6);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
  transform: scale(1.1);
}

/* Inline edit form for empty featured link slots */
.featured-link-inline-edit {
  flex: 1;
  min-width: 0;
  height: 180px;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(0, 168, 255, 0.3);
  background: rgba(0, 168, 255, 0.03);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 10px;
}

.fl-inline-url-row {
  width: 100%;
}

.fl-inline-url {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.fl-inline-url:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.fl-inline-url::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.fl-inline-image-upload {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  transition: border-color 0.2s, color 0.2s;
  overflow: hidden;
}

.fl-inline-image-upload:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}

.fl-inline-status {
  font-size: 11px;
  color: rgba(0, 168, 255, 0.7);
  text-align: center;
}

/* When no image, center the title */
.featured-link-card:not(:has(.featured-link-media)) .featured-link-content {
  inset: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  align-items: center;
  justify-content: center;
}

.featured-link-card:not(:has(.featured-link-media)) .featured-link-title {
  white-space: normal;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .featured-links-row {
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
  }
  .featured-link-card {
    max-width: 100%;
    width: 100%;
    height: 140px;
  }
  .featured-link-inline-edit {
    max-width: 100%;
    width: 100%;
    height: 140px;
    padding: 12px;
  }
  .featured-link-delete-btn,
  .featured-link-image-btn,
  .featured-link-remove-image-btn {
    opacity: 1;
  }
}


/* Empty slot on public view (invisible spacer to hold position) */
.featured-link-empty-slot {
  visibility: hidden;
  pointer-events: none;
  border: none;
  background: none;
  box-shadow: none;
}

/* Social Links Edit Form Group */
.social-links-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.social-link-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.social-link-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.social-link-icon svg {
  width: 18px;
  height: 18px;
}

.social-link-input input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(var(--color-primary-rgb), 0.05);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.social-link-input input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.social-link-input input::placeholder {
  color: var(--color-text-disabled);
}

/* ============================================================================
   Profile Favorites Display
   ============================================================================ */

.profile-favorites,
.profile-favorites-tab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--spacing-lg);
}

.favorites-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: var(--spacing-md);
  background: rgba(var(--color-bg-card-rgb), 0.5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}

.favorites-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #33c4ff;
  text-shadow: 0 0 10px rgba(0, 168, 255, 0.6), 0 0 20px rgba(0, 168, 255, 0.4);
  min-width: 80px;
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.favorites-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  flex: 1;
}

.favorite-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.favorite-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.favorite-pill.sport,
.favorite-pill.league,
.favorite-pill.topic {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   Multi-Select Dropdowns (Edit Modal)
   ============================================================================ */

.multi-select-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.selected-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 32px;
}

.selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: default;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.selected-pill.sport,
.selected-pill.league,
.selected-pill.topic {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.selected-pill .remove-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.selected-pill .remove-pill:hover {
  background: rgba(255, 255, 255, 0.2);
}

.multi-select-dropdown {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(24, 34, 54, 0.8);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.multi-select-dropdown:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  background: rgba(24, 34, 54, 0.9);
}

.multi-select-dropdown:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.multi-select-dropdown option {
  background: rgb(24, 34, 54);
  color: var(--color-text-primary);
  padding: 0.5rem;
}

/* Topics Search Input */
.topics-search-wrapper {
  position: relative;
  z-index: 10;
}

/* Ensure the form group containing topics allows overflow */
.edit-form-group:has(.topics-search-wrapper) {
  overflow: visible;
}

.topics-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(var(--color-bg-base-rgb), 0.5);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.topics-search-input:focus {
  outline: none;
  border-color: var(--color-border-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.topics-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-top: 4px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.topics-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.topics-dropdown-item:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.topics-dropdown-empty {
  padding: 0.75rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ============================================================================
   Toast Notification
   ============================================================================ */

.toast-saved {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  padding: 12px 24px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-saved.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-saved .toast-icon {
  font-size: 1.2em;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 1200px) {
  .indexes-grid {
    grid-template-columns: repeat(2, 340px);
  }
}

@media (max-width: 768px) {
  .profile-content-container {
    padding: 0 0 var(--spacing-xl) !important;
  }

  .profile-actions {
    width: 100%;
  }

  .profile-actions .btn-secondary {
    width: 100%;
  }

  .avatar-upload {
    flex-direction: column;
    text-align: center;
  }

  .team-selector {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }

  .favorite-teams-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .indexes-grid {
    grid-template-columns: 1fr;
  }

  .indexes-grid .index-card {
    max-width: none;
  }

  .profile-tabs {
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .profile-edit-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions .btn-primary {
    width: 100%;
  }
}

/* ============================================================================
   Edit Profile Modal
   ============================================================================ */

.edit-profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: var(--spacing-lg);
}

.edit-profile-modal-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-profile-modal {
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 0 40px rgba(var(--color-primary-rgb), 0.2),
    0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}

.edit-profile-modal-overlay.show .edit-profile-modal {
  transform: translateY(0) scale(1);
}

.edit-profile-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
}

.edit-profile-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.edit-profile-modal-body {
  padding: var(--spacing-xl);
  padding-bottom: calc(var(--spacing-xl) + 60px); /* Extra padding for dropdown overflow */
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  min-height: 0; /* Important for flex overflow */
}

.edit-profile-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(90vh - 60px); /* Account for header */
  overflow: hidden;
}

.edit-form-group {
  margin-bottom: var(--spacing-xl);
}

.edit-form-group:last-child {
  margin-bottom: 0;
}

.edit-form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.edit-form-group input[type="text"],
.edit-form-group textarea {
  width: 100%;
  padding: var(--spacing-md);
  background: rgba(var(--color-primary-rgb), 0.05);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-form-group input[type="text"]:focus,
.edit-form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.edit-form-group input[type="text"]::placeholder,
.edit-form-group textarea::placeholder {
  color: var(--color-text-disabled);
}

.edit-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.field-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.field-error {
  display: block;
  font-size: var(--font-size-xs);
  color: #ef4444;
  margin-top: var(--spacing-xs);
  min-height: 1.2em;
}

/* Avatar Upload Section */
.avatar-upload-section {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.avatar-preview-container {
  flex-shrink: 0;
}

.avatar-preview-container img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
}

.avatar-upload-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-upload:hover {
  background: rgba(var(--color-primary-rgb), 0.2);
  border-color: var(--color-primary);
}

.btn-remove-avatar {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-avatar:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

/* Modal Footer */
.edit-profile-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.2);
  background: var(--color-bg-card);
  flex-shrink: 0; /* Prevent footer from shrinking */
}

.edit-profile-modal-footer .btn {
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-profile-modal-footer .btn-close-x {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(220, 53, 69, 0.15) 100%);
  color: #ff6b6b;
  border: 2px solid rgba(220, 53, 69, 0.5);
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
  border-radius: var(--radius-md);
}

.edit-profile-modal-footer .btn-close-x:hover {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.35) 0%, rgba(220, 53, 69, 0.3) 100%);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
  transform: translateY(-2px);
  color: #ff8a8a;
}

.edit-profile-modal-footer .btn-primary {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15));
  border: 2px solid #22c55e;
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  font-weight: var(--font-weight-bold);
  min-width: 140px;
}

.edit-profile-modal-footer .btn-primary:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.5);
}

.edit-profile-modal-footer .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.edit-profile-modal-footer .btn-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Privacy Settings Toggle */
.privacy-settings-group {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.privacy-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: rgba(var(--color-primary-rgb), 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}

.privacy-toggle-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.privacy-toggle-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.privacy-toggle-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* Privacy Status Indicator */
.privacy-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all 0.3s ease;
}

.privacy-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Private state (default) */
.privacy-status.private {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.privacy-status.private .status-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Public state */
.privacy-status.public {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.privacy-status.public .status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-primary-rgb), 0.2);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  transition: all 0.3s ease;
  border-radius: 28px;
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--color-text-tertiary);
  transition: all 0.3s ease;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(var(--color-primary-rgb), 0.4);
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
  background: var(--color-primary);
  box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.6);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3);
}

/* Responsive */
@media (max-width: 480px) {
  .edit-profile-modal-overlay {
    padding: var(--spacing-md);
  }
  
  .edit-profile-modal {
    max-height: 95vh;
  }
  
  .edit-profile-modal-header,
  .edit-profile-modal-body,
  .edit-profile-modal-footer {
    padding: var(--spacing-md);
  }
  
  .avatar-upload-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .edit-profile-modal-footer {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .edit-profile-modal-footer .btn-secondary {
    width: 40px;
  }
  
  .edit-profile-modal-footer .btn-primary {
    flex: 1;
    max-width: none;
  }
}

/* ============================================================================
   Profile Overview Section - Three Block Layout
   ============================================================================ */

.profile-overview-section {
  margin-bottom: 2rem;
}

/* Featured Header (matches explore page) */
.profile-overview-section .featured-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.profile-overview-section .featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.profile-overview-section .featured-title-text {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.profile-overview-section .featured-title-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00a8ff 0%, #33c4ff 50%, #00a8ff 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
}

.profile-overview-section .featured-description {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* Three Block Row Layout */
.overview-blocks-row {
  display: flex;
  gap: 1rem;
}

.overview-block {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.overview-block:hover {
  border-color: rgba(0, 168, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.15);
}

.overview-block-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem;
}

.overview-block-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.overview-block-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Block 1: Total Influence */
.overview-influence-block {
  background: rgba(0, 168, 255, 0.05);
  border-color: rgba(0, 168, 255, 0.2);
}

.overview-influence-block:hover {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 30px rgba(0, 168, 255, 0.25);
}

.influence-display {
  text-align: center;
}

.influence-value {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}

.influence-glow {
  color: #33c4ff;
  text-shadow: 
    0 0 10px rgba(0, 168, 255, 0.7),
    0 0 20px rgba(0, 168, 255, 0.5),
    0 0 30px rgba(0, 168, 255, 0.3),
    0 0 40px rgba(0, 168, 255, 0.2);
}

.influence-number {
  display: inline-block;
  animation: influence-pulse 2s ease-in-out infinite;
}

@keyframes influence-pulse {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(0, 168, 255, 0.7),
      0 0 20px rgba(0, 168, 255, 0.5),
      0 0 30px rgba(0, 168, 255, 0.3);
  }
  50% {
    text-shadow: 
      0 0 15px rgba(0, 168, 255, 0.9),
      0 0 30px rgba(0, 168, 255, 0.7),
      0 0 45px rgba(0, 168, 255, 0.5),
      0 0 60px rgba(0, 168, 255, 0.3);
  }
}

.influence-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.influence-loading,
.stat-loading {
  opacity: 0.5;
}

/* Block 2: Total Indexes */
.overview-indexes-block .indexes-display {
  text-align: center;
}

.indexes-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}

.indexes-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* Block 3: Top Rankings */
.overview-rankings-block {
  min-height: 200px;
}

.overview-rankings-block .overview-block-content {
  justify-content: flex-start;
  align-items: stretch;
}

.rankings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
}

.ranking-row:hover {
  background: rgba(0, 168, 255, 0.15);
  transform: translateX(2px);
}

.ranking-badge {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.rank-medal.gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.rank-medal.silver {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  color: #000;
  box-shadow: 0 0 10px rgba(156, 163, 175, 0.4);
}

.rank-medal.bronze {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.4);
}

.rank-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.05);
}

.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-topic-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ranking-influence {
  flex-shrink: 0;
  text-align: right;
}

.ranking-influence-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #33c4ff;
}

/* Rankings loading/empty states */
.rankings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 150px;
}

.rankings-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Responsive Design for Overview */
@media (max-width: 992px) {
  .overview-blocks-row {
    flex-wrap: wrap;
  }
  
  .overview-block {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
  }
  
  .overview-rankings-block {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .profile-overview-section .featured-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .profile-overview-section .featured-title {
    font-size: 1.25rem;
  }
  
  .overview-blocks-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .overview-block {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: calc(50% - 0.375rem);
    padding: 0.875rem;
  }
  
  .overview-rankings-block {
    flex: 1 1 100%;
    min-width: 100%;
  }
  
  .influence-value,
  .indexes-value {
    font-size: 2.25rem;
  }
  
  .overview-block-title {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .overview-blocks-row {
    gap: 0.5rem;
  }
  
  .overview-block {
    padding: 0.75rem;
  }
  
  .influence-value,
  .indexes-value {
    font-size: 2rem;
  }
  
  .ranking-row {
    padding: 0.4rem 0.5rem;
    gap: 0.5rem;
  }
  
  .ranking-badge {
    width: 30px;
  }
  
  .rank-medal,
  .rank-number {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }
  
  .ranking-topic-name {
    font-size: 0.8rem;
  }
  
  .ranking-influence-value {
    font-size: 0.75rem;
  }
}

/* ============================================================================
   Profile Topic Filter Bar
   Styles now in components/discovery-bar.css
   ============================================================================ */

/* ============================================================================
   Profile Influence Chart Section
   ============================================================================ */

.profile-influence-chart-section {
  padding: 2rem 0 3rem;
  margin-top: 1rem;
}

.profile-influence-chart-section .section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.influence-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.influence-chart-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary, rgba(255, 255, 255, 0.9));
  margin: 0;
}

.influence-chart-timeframe-selector {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem;
  border-radius: 8px;
}

.timeframe-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeframe-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.timeframe-btn.active {
  background: rgba(59, 130, 246, 0.2);
  color: rgba(59, 130, 246, 1);
}

.influence-chart-container {
  position: relative;
  width: 100%;
  height: 350px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem;
}

.influence-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.influence-chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(15, 20, 30, 0.8);
  border-radius: 12px;
  z-index: 10;
}

.influence-chart-loading span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  .influence-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .influence-chart-timeframe-selector {
    width: 100%;
    justify-content: space-between;
  }

  .timeframe-btn {
    padding: 0.5rem 0.75rem;
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
  }

  .influence-chart-container {
    height: 280px;
  }

  .influence-chart-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .profile-influence-chart-section {
    padding: 1.5rem 0 2rem;
  }

  .influence-chart-container {
    height: 240px;
    padding: 0.75rem;
  }

  .timeframe-btn {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* ============================================================================
   Profile Timeline - View Toggle and No Discussion Layout
   ============================================================================ */

/* Full-width vertical timeline when no discussion panel */
.topic-panels-no-discussion {
  display: flex;
  justify-content: center;
}

.topic-panels-no-discussion .topic-panel-timeline-full {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* View toggle wrapper on profile pages */
.profile-timeline-section .timeline-view-toggle-wrapper {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}

/* Vertical timeline loading overlay */
.vertical-timeline-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(var(--color-bg-primary-rgb, 26, 28, 30), 0.9);
  z-index: 10;
}

/* Ensure vertical timeline posts container has proper styling */
.topic-panels-no-discussion .vertical-timeline-posts {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem 1rem 3rem; /* Left padding for timeline bar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topic-panels-no-discussion .vertical-timeline-posts::-webkit-scrollbar {
  display: none;
}

/* ============================================================================
   Profile Posts Grid (for standard accounts)
   ============================================================================ */

.profile-posts-grid-section {
  padding: 1.5rem 0 3rem;
}

.profile-posts-grid-section .section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.profile-posts-heading {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #888);
  margin: 0 0 0.75rem;
  text-align: left;
}

.profile-posts-grid-section .explore-grid-container {
  margin-top: 1rem;
}

.profile-posts-grid-section .explore-grid-show-more {
  margin-top: 1.5rem;
}

/* Grid embed placeholder for posts without images */
.profile-posts-grid-section .embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, rgba(0, 168, 255, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  box-sizing: border-box;
  border-radius: 12px;
}

.profile-posts-grid-section .embed-placeholder span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Empty state for profile posts */
.profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-text-muted);
  grid-column: 1 / -1;
}

.profile-empty-state svg {
  opacity: 0.5;
  margin-bottom: 1rem;
}

.profile-empty-state h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.profile-empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .profile-posts-grid-section {
    padding: 1rem 0 2rem;
  }

  .profile-posts-grid-section .section-container {
    padding: 0 1rem;
  }
}

/* ============================================================================
   Profile Topic Filter Bar
   ============================================================================ */

#topicFilterSection.profile-topic-filter-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0.25rem 2rem 0.5rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: auto;
  position: relative;
  z-index: 10;
}

#topicFilterSection .section-container {
  display: block;
  padding: 0;
}

#topicFilterSection .discovery-bar-wrapper {
  display: flex;
  padding: 0;
}

#topicFilterSection .discovery-bar {
  display: flex;
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md, 8px);
  padding: 0.5rem 0.75rem;
}

#topicFilterSection .discovery-links-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#topicFilterSection .discovery-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.1rem 0;
}

#topicFilterSection .discovery-links::-webkit-scrollbar {
  display: none;
}

#topicFilterSection .discovery-link {
  display: inline-flex;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  #topicFilterSection.profile-topic-filter-section {
    padding: 0.25rem 1rem 0.5rem;
  }
}

@media (max-width: 480px) {
  #topicFilterSection.profile-topic-filter-section {
    padding: 0.25rem 0.5rem 0.25rem;
  }
}

/* ============================================================================
   Profile Content Grid - Instagram-style 3-column grid
   ============================================================================ */

.profile-content-grid-section {
  width: 100%;
  padding: 0 2rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Content Grid Container */
.profile-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}

/* Individual Grid Item */
.profile-grid-item {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
}

.profile-grid-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.profile-grid-item:hover .profile-grid-item-platform {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.85);
}

/* Grid Item Media Container */
.profile-grid-item-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
}

.profile-grid-item-media img,
.profile-grid-item-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text Post Preview (for tweets/articles without images) */
.profile-grid-item-text-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: linear-gradient(135deg,
    rgba(var(--color-bg-card-rgb), 0.98) 0%,
    rgba(var(--color-bg-base-rgb), 0.95) 100%);
  overflow: hidden;
}

.profile-grid-item-text-preview .preview-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-grid-item-text-preview .preview-excerpt {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Page Post - Title/Description Overlay on Image */
.profile-grid-item-page .profile-grid-item-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
  z-index: 1;
}

.profile-grid-item-page-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-info-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.page-info-description {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Page Post - No Image Preview (styled card) */
.profile-grid-item-page-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
  background: linear-gradient(135deg,
    rgba(var(--color-primary-rgb), 0.15) 0%,
    rgba(var(--color-bg-card-rgb), 0.98) 50%,
    rgba(var(--color-bg-base-rgb), 0.95) 100%);
  overflow: hidden;
}

.page-preview-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-preview-description {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Page Type Indicator (bottom right) - icon + text label */
.profile-grid-page-type-indicator {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: auto;
  height: auto;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-grid-page-type-indicator svg {
  width: 12px;
  height: 12px;
}

.profile-grid-item-page:hover .profile-grid-page-type-indicator {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
}

/* Page Topic Pill (top left) - blue rectangular pill */
/* Matches .carousel-featured-topic-pill from timeline-carousel.css for consistency */
.profile-grid-page-topic-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 168, 255, 0.3);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  max-width: calc(100% - 44px); /* Leave room for page type indicator */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid-page-topic-pill:hover {
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.6);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.4);
}

/* Hide default platform indicator for page posts (we use page-type-indicator instead) */
.profile-grid-item-page .profile-grid-item-platform {
  display: none;
}

/* Timeline Post - Apply same styles as pages */
.profile-grid-item-timeline .profile-grid-item-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
  z-index: 1;
}

/* Timeline Type Indicator hover effect */
.profile-grid-item-timeline:hover .profile-grid-page-type-indicator {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
}

/* Hide default platform indicator for timeline posts */
.profile-grid-item-timeline .profile-grid-item-platform {
  display: none;
}

/* Collection Type Indicator hover effect */
.profile-grid-item-collection:hover .profile-grid-page-type-indicator {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
}

/* Hide default platform indicator for collection posts */
.profile-grid-item-collection .profile-grid-item-platform {
  display: none;
}

/* Tweet Embed in Grid */
.profile-grid-item-tweet-embed {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.profile-grid-item-tweet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}

/* Twitter tweet widget container */
.profile-grid-item-tweet .twitter-tweet {
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Hide white background corners by clipping the container */
.profile-grid-item-tweet .twitter-tweet-rendered {
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
}

/* Scale down and center the tweet iframe - match explore grid style */
.profile-grid-item-tweet iframe {
  max-height: 100% !important;
  transform: scale(0.85);
  transform-origin: center center;
  display: block;
  margin: 0 auto;
  border-radius: 12px !important;
  background: transparent !important;
  color-scheme: light !important;
}

/* Overflowing tweets anchor to top */
.profile-grid-item-tweet.tweet-overflows {
  align-items: flex-start;
  padding-top: 12px;
}

.profile-grid-item-tweet.tweet-overflows iframe {
  transform-origin: top center;
}

.profile-grid-item-tweet .tweet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.profile-grid-item-tweet .tweet-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.profile-grid-item-tweet .tweet-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}

/* YouTube Posts in Grid - Full iframe embed */

/* YouTube embed container - fills entire grid cell */
.youtube-embed-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.youtube-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Hide default overlay for YouTube posts */
.profile-grid-item-youtube .profile-grid-item-overlay {
  display: none;
}

/* ============================================================================
   Twitter/X Posts in Grid - Hover to reveal embed
   Default: Topic image with author overlay (like page posts)
   Hover: Tweet embed appears
   ============================================================================ */

/* Main container - fills grid cell */
.tweet-grid-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ============================================================================
   Tweet Card - Default State (Topic Image + Author)
   ============================================================================ */

.tweet-card-default {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Topic image background */
.tweet-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-card, #0c0c0e);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

/* Legacy gradient overlay - now handled by mask-image */
.tweet-card-gradient {
  display: none;
}

/* Author info overlay */
.tweet-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Author display name - white, bold (like page title) */
.tweet-card-author-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Author handle - smaller, grey (like page description) */
.tweet-card-author-handle {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   Tweet Card - Embed State (shown on hover)
   ============================================================================ */

.tweet-card-embed {
  position: absolute;
  inset: 0;
  background: #15202b; /* Twitter dark theme background */
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

/* Loading spinner */
.tweet-card-embed .tweet-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.tweet-card-embed .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #1d9bf0;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Scale the tweet to fill container - crop overflow to hide white corners */
.tweet-card-embed .twitter-tweet,
.tweet-card-embed .twitter-tweet-rendered {
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
  transform-origin: center center !important;
  z-index: 2;
}

/* Error state styling */
.tweet-card-embed .tweet-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8899a6;
  font-size: 0.8rem;
  text-align: center;
  z-index: 1;
}

/* ============================================================================
   Tweet Card - Hover Transition
   ============================================================================ */

.tweet-grid-card:hover .tweet-card-default {
  opacity: 0;
  visibility: hidden;
}

.tweet-grid-card:hover .tweet-card-embed {
  opacity: 1;
  visibility: visible;
}

/* Hide default grid overlay for tweet posts */
.profile-grid-item-x .profile-grid-item-overlay,
.profile-grid-item-twitter .profile-grid-item-overlay,
.profile-grid-item-tweet-embed .profile-grid-item-overlay {
  display: none;
}

/* Chart Embed in Grid */
.profile-grid-item-chart-embed {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.profile-grid-item-chart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}

/* Chart wrapper - constrained with margin */
.profile-grid-item-chart .chart-embed-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-grid-item-chart .chart-embed-wrapper canvas {
  max-width: 100%;
  max-height: 100%;
}

.profile-grid-item-chart .chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.profile-grid-item-chart .chart-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3B82F6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.profile-grid-item-chart .chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}

/* Platform Indicator - Top right corner */
.profile-grid-item-platform {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.15s ease, background 0.15s ease;
}

.profile-grid-item:hover .profile-grid-item-platform {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.85);
}

.profile-grid-item-platform svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Platform-specific colors */
.profile-grid-item-platform.platform-twitter,
.profile-grid-item-platform.platform-x {
  color: #ffffff;
}

.profile-grid-item-platform.platform-youtube {
  color: #FF0000;
}

.profile-grid-item-platform.platform-tiktok {
  color: #ffffff;
}

.profile-grid-item-platform.platform-instagram {
  color: #E4405F;
}

.profile-grid-item-platform.platform-sports-index {
  color: var(--color-primary);
}

/* Topic Indicator - Bottom right corner (hidden) */
.profile-grid-item-topics {
  display: none;
}

.profile-grid-item-topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 6px rgba(var(--color-primary-rgb), 0.5);
  transition: transform 0.15s ease;
}

.profile-grid-item:hover .profile-grid-item-topic-dot {
  transform: scale(1.2);
}

/* Additional topic dots - slightly different shades */
.profile-grid-item-topic-dot:nth-child(2) {
  background: rgba(var(--color-primary-rgb), 0.7);
}

.profile-grid-item-topic-dot:nth-child(3) {
  background: rgba(var(--color-primary-rgb), 0.5);
}

/* Limit to max 3 topic indicators */
.profile-grid-item-topic-dot:nth-child(n+4) {
  display: none;
}

/* Hover Overlay with Metadata - Hidden, using scale effect instead */
.profile-grid-item-overlay {
  display: none;
}

.profile-grid-item-overlay-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-grid-item-overlay-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
}

.profile-grid-item-overlay-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.profile-grid-item-overlay-meta svg {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.profile-grid-item-overlay-action {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.profile-grid-item-overlay-action:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
  transform: translateY(-1px);
}

/* Video indicator icon (top right, for video content) */
.profile-grid-item-video-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.profile-grid-item-video-indicator svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

/* Multi-image indicator (gallery) */
.profile-grid-item-gallery-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.profile-grid-item-gallery-indicator svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

/* Loading state for grid items */
.profile-grid-item.loading {
  animation: gridItemPulse 1.5s ease-in-out infinite;
}

@keyframes gridItemPulse {
  0%, 100% {
    background: rgba(var(--color-bg-card-rgb), 0.5);
  }
  50% {
    background: rgba(var(--color-bg-card-rgb), 0.8);
  }
}

/* Grid Loading Skeleton */
.profile-content-grid-skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}

.profile-grid-skeleton-item {
  aspect-ratio: 1 / 1;
  background: rgba(var(--color-bg-card-rgb), 0.5);
  animation: gridItemPulse 1.5s ease-in-out infinite;
}

.profile-grid-skeleton-item:nth-child(2) {
  animation-delay: 0.1s;
}

.profile-grid-skeleton-item:nth-child(3) {
  animation-delay: 0.2s;
}

.profile-grid-skeleton-item:nth-child(4) {
  animation-delay: 0.3s;
}

.profile-grid-skeleton-item:nth-child(5) {
  animation-delay: 0.4s;
}

.profile-grid-skeleton-item:nth-child(6) {
  animation-delay: 0.5s;
}

/* Infinite Scroll Loading Indicator */
.profile-grid-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  grid-column: 1 / -1;
}

.profile-grid-load-more .loading-spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* End of content message */
.profile-grid-end-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
  .profile-content-grid-section {
    padding: 0 1rem 2rem;
  }

  .profile-content-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }

  .profile-grid-item-platform {
    width: 22px;
    height: 22px;
    bottom: 6px;
    left: 6px;
  }

  .profile-grid-item-platform svg {
    width: 12px;
    height: 12px;
  }

  .profile-grid-item-topics {
    bottom: 6px;
    right: 6px;
  }

  .profile-grid-item-topic-dot {
    width: 6px;
    height: 6px;
  }

  .profile-grid-item-overlay {
    padding: 0.75rem;
  }

  .profile-grid-item-overlay-title {
    font-size: 0.75rem;
  }

  .profile-grid-item-overlay-meta {
    font-size: 0.65rem;
  }

  .profile-grid-item-video-indicator,
  .profile-grid-item-gallery-indicator {
    width: 24px;
    height: 24px;
    top: 6px;
    right: 6px;
  }

  .profile-grid-item-video-indicator svg,
  .profile-grid-item-gallery-indicator svg {
    width: 12px;
    height: 12px;
  }

  .profile-content-grid-skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
}

@media (max-width: 480px) {
  .profile-content-grid-section {
    padding: 0 0.5rem 1.5rem;
  }

  .profile-content-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .profile-grid-item {
    aspect-ratio: 4 / 3;
  }

  .profile-content-grid-skeleton {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .profile-grid-skeleton-item {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================================
   LIBRARY SECTION STYLES
   ============================================================================ */

.library-section {
  padding: 0 0 var(--spacing-xl) 0; /* No top padding to match Posts tab */
}

.library-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Library filter buttons - discovery-link style with blue glow */
.library-filters {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding-left: 1rem;
}

/* "+ Add" button - glowing blue */
.library-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.4);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.2);
}

.library-add-btn:hover {
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.35);
  color: #ffffff;
}

.library-filter-btn {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.library-filter-btn:hover {
  color: white;
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.4);
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
}

.library-filter-btn.active {
  color: white;
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.4);
}

/* Library Grid - JS masonry layout (MasonryLayout handles positioning) */
.library-grid {
  position: relative;
  padding: 0; /* Horizontal padding comes from parent .section-container */
  min-height: 200px; /* Prevent collapse during load */
}

/* Masonry items are positioned absolutely by MasonryLayout */
.library-grid .masonry-item {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

/* Instagram items - matches topic page styling */
.library-item.library-item-instagram {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover bump effect - matches tweet embeds */
.library-item.library-item-instagram:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Instagram embed - rounded corners matching timeline tab */
.library-item.library-item-instagram .instagram-media {
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.library-item.library-item-instagram iframe {
  border-radius: 16px !important;
  overflow: hidden;
}

/* Instagram container - rounded corners matching timeline tab */
.library-item.library-item-instagram .instagram-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

/* Instagram loading indicator */
.library-item .instagram-container {
  position: relative;
  min-height: 200px;
}

.library-item .instagram-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  gap: 12px;
}

.library-item .instagram-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #E4405F;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* TikTok items - direct iframe approach for full width control */
.library-item.library-item-tiktok {
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-item.library-item-tiktok:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* TikTok embed container - holds the iframe */
.library-item-tiktok .tiktok-embed-container {
  position: relative;
  width: 100%;
  background: transparent;
}

/* TikTok iframe - fills column width, fixed height for 9:16 aspect */
.library-item-tiktok .tiktok-embed-container iframe {
  display: block;
  width: 100%;
  height: 780px;
  border: none;
  border-radius: 12px;
}

.library-item .tiktok-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  gap: 12px;
}

.library-item .tiktok-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #00f2ea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Library items use .masonry-item from core.css */
/* Consistent spacing and left-aligned in columns */
.library-item {
  position: relative;
  margin-bottom: 16px;
}

/* Circular delete button - matches collection page action buttons */
.library-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 10;
}

.library-item:hover .library-delete-btn {
  opacity: 1;
}

.library-delete-btn:hover {
  background: rgba(239, 68, 68, 0.6);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
  transform: scale(1.1);
}

.library-delete-btn svg {
  width: 16px;
  height: 16px;
}

/* Media placeholder when no thumbnail */
.library-item .media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.3);
}

/* Type indicator colors for library items */
.library-item .type-indicator.twitter { color: #1da1f2; }
.library-item .type-indicator.youtube { color: #ff0000; }
.library-item .type-indicator.tiktok { color: #00f2ea; }
.library-item .type-indicator.instagram { color: #e4405f; }
.library-item .type-indicator.uploaded_media { color: #00a8ff; }
.library-item .type-indicator.generic { color: #9ca3af; }
.library-item .type-indicator.espn { color: #d00; }
.library-item .type-indicator.substack { color: #ff6719; }

/* YouTube embeds in library - render larger, scale down for sharper thumbnail */
.library-item .youtube-responsive-wrapper,
.library-item .youtube-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.library-item .youtube-responsive-wrapper iframe,
.library-item .youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  /* Render at 150% size so YouTube serves higher quality thumbnail, then scale to fit */
  width: 150%;
  height: 150%;
  border: none;
  transform: scale(0.6667);
  transform-origin: top left;
}

/* YouTube loading state for library items */
.library-item .youtube-responsive-wrapper.youtube-loading .youtube-thumbnail-placeholder,
.library-item .youtube-wrapper.youtube-loading .youtube-thumbnail-placeholder {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 2;
}

.library-item .youtube-responsive-wrapper.youtube-loading .youtube-loading-overlay,
.library-item .youtube-wrapper.youtube-loading .youtube-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  z-index: 3;
}

.library-item .youtube-responsive-wrapper.youtube-loading iframe,
.library-item .youtube-wrapper.youtube-loading iframe {
  opacity: 0;
}

.library-item .youtube-responsive-wrapper:not(.youtube-loading) .youtube-thumbnail-placeholder,
.library-item .youtube-responsive-wrapper:not(.youtube-loading) .youtube-loading-overlay,
.library-item .youtube-wrapper:not(.youtube-loading) .youtube-thumbnail-placeholder,
.library-item .youtube-wrapper:not(.youtube-loading) .youtube-loading-overlay {
  display: none !important;
}

.library-item .youtube-responsive-wrapper:not(.youtube-loading) iframe,
.library-item .youtube-wrapper:not(.youtube-loading) iframe {
  opacity: 1;
}

/* External link card enhancements */
.library-item .card-link-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.library-item .card-provider {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.library-item .card-open-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.library-item .card-open-link:hover {
  color: #00a8ff;
}

.library-item .card-open-link svg {
  width: 12px;
  height: 12px;
}

/* Library Empty State */
.library-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.library-empty svg {
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.library-empty h3 {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.library-empty p {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  font-size: 0.9rem;
}

/* Library Loading */
.library-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 1rem;
  transition: opacity 0.2s ease-out;
}

.library-loading.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Library Table Loading (inside tbody) */
.library-table-loading-row td {
  padding: 0 !important;
  border: none !important;
}

.library-table-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 1rem;
}

/* Library Load More - matches explore show more button */
.library-load-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.library-load-more .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.library-load-more .btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Library Upload Card - Glowing Blue "+" Button */
.library-upload-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: rgba(0, 168, 255, 0.08);
  border: 2px dashed rgba(0, 168, 255, 0.4);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.library-upload-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(0, 168, 255, 0.3), rgba(0, 168, 255, 0.1), rgba(0, 168, 255, 0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.library-upload-card:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow:
    0 0 20px rgba(0, 168, 255, 0.4),
    0 0 40px rgba(0, 168, 255, 0.2),
    inset 0 0 20px rgba(0, 168, 255, 0.1);
  transform: translateY(-2px);
}

.library-upload-card:hover::before {
  opacity: 1;
  animation: library-upload-glow 2s ease-in-out infinite;
}

@keyframes library-upload-glow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.library-upload-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
  position: relative;
}

.library-upload-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 168, 255, 0.2);
  border: 2px solid rgba(0, 168, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a8ff;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 168, 255, 0.3);
}

.library-upload-card:hover .library-upload-card-icon {
  background: rgba(0, 168, 255, 0.3);
  border-color: rgba(0, 168, 255, 0.8);
  box-shadow:
    0 0 20px rgba(0, 168, 255, 0.5),
    0 0 30px rgba(0, 168, 255, 0.3);
  transform: scale(1.1);
}

.library-upload-card-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.library-upload-card-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(0, 168, 255, 0.9);
  text-align: center;
  transition: color 0.3s ease;
}

.library-upload-card:hover .library-upload-card-label {
  color: #00a8ff;
}

/* ============================================================================
   Library Filters Container - Dropdowns + Topic Filter Bar
   ============================================================================ */

.library-filters-container {
  margin-bottom: var(--spacing-lg);
  padding: 0; /* Horizontal padding comes from parent .section-container */
}

.library-filters-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Row 1: Dropdowns Row */
.library-dropdowns-row {
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

/* Source Toggle (Official / All) */
.source-filter-toggle {
  display: flex;
  gap: 0;
}

.source-filter-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.2;
  margin: 0;
  margin-bottom: 0;
}

.source-filter-btn:first-child {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

.source-filter-btn:last-child {
  border-radius: 0 4px 4px 0;
}

.source-filter-btn.active {
  background: rgba(0, 168, 255, 0.12);
  border-color: rgba(0, 168, 255, 0.3);
  color: #00a8ff;
}

.source-filter-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

/* Topic Tab Header */
.topic-tab-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 2rem;
  margin-bottom: 1rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .topic-tab-header {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  .topic-tab-header {
    padding: 0.75rem 0.75rem;
  }
}

.topic-tab-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.topic-tab-header-title {
  font-size: 0.75rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.topic-tab-header-desc {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.25rem 0 0 0;
}

/* Library Filter Dropdowns */
.library-filter-dropdown {
  position: relative;
}

.library-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.2;
  margin: 0;
  margin-bottom: 0;
}

.library-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

.library-filter-dropdown.open .library-dropdown-trigger,
.library-dropdown-trigger.active {
  background: rgba(0, 168, 255, 0.12);
  border-color: rgba(0, 168, 255, 0.3);
  color: #00a8ff;
  box-shadow: none;
}

.library-dropdown-label {
  color: inherit;
  opacity: 0.7;
}

.library-dropdown-value {
  color: inherit;
  opacity: 1;
}

.library-dropdown-chevron {
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.library-filter-dropdown.open .library-dropdown-chevron {
  transform: rotate(180deg);
}

.library-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
}

.library-filter-dropdown.open .library-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.library-dropdown-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.library-dropdown-option:hover {
  background: rgba(0, 168, 255, 0.15);
  color: white;
}

.library-dropdown-option.active {
  background: rgba(0, 168, 255, 0.25);
  color: white;
}

/* Hierarchical sub-menu styles */
.library-dropdown-group {
  position: relative;
}

.library-dropdown-option.has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.library-dropdown-option.has-submenu .submenu-chevron {
  margin-left: 0.5rem;
  opacity: 0.5;
  font-size: 0.85em;
}

.library-dropdown-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 160px;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: all 0.15s ease;
  z-index: 101;
}

.library-dropdown-group:hover > .library-dropdown-submenu,
.library-dropdown-group.submenu-open > .library-dropdown-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Checkmark icon in multi-select options */
.library-dropdown-option .check-icon {
  display: inline-block;
  width: 14px;
  margin-right: 0.35rem;
  opacity: 0;
  font-size: 0.75rem;
  color: rgba(0, 168, 255, 0.9);
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.library-dropdown-option.selected .check-icon {
  opacity: 1;
}

/* Domain count badge */
.library-dropdown-option .domain-count {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

/* Submenu divider */
.library-submenu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.5rem;
}

/* Keep dropdown open in multi-select mode */
.library-filter-dropdown.multi-select.open .library-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Row 2: Topic Filter Bar - EXACT match to Posts tab (#topicFilterSection) styles */
.library-topic-filter-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* No horizontal padding - parent .section-container provides it */
  padding: 0.25rem 0 0.5rem;
  margin: 0;
  margin-top: 0.25rem;
  min-height: auto;
  position: relative;
  z-index: 10;
  transform: none !important;
}

.library-topic-filter-section .discovery-bar-wrapper,
.library-discovery-bar-wrapper {
  display: flex;
  padding: 0;
}

/* Transparent background on topic filter bars */
.library-topic-filter-section .discovery-bar,
.profile-topic-filter-section .discovery-bar {
  background: transparent;
  background-color: transparent;
}

/* Topic filter bar overrides (library-specific) */
.library-topic-filter-section .discovery-links-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.library-topic-filter-section .discovery-links {
  flex-wrap: nowrap;
}

.library-topic-filter-section .discovery-links::-webkit-scrollbar {
  display: none;
}

/* Responsive - masonry columns handled by JS MasonryLayout breakpoints */
@media (max-width: 768px) {
  /* Match Posts tab vertical padding at 768px */
  .library-topic-filter-section {
    padding: 0.25rem 0 0.5rem;
  }
}

@media (max-width: 700px) {
  /* Library grid padding handled by parent .section-container */

  .library-filters {
    justify-content: center;
  }

  /* Always show delete button on mobile */
  .library-item .library-delete-btn {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  /* Match Posts tab vertical padding at 480px */
  .library-topic-filter-section {
    padding: 0.25rem 0 0.25rem;
  }

  .library-dropdowns-row {
    flex-wrap: wrap;
  }

  .library-topic-filter-section .discovery-search-pill.expanded .discovery-search-input {
    width: 120px;
  }
}

/* ============================================================================
   Featured Embed Styles (page/timeline/collection types)
   Matches the sidebar featured card styling in timeline/collection editors
   ============================================================================ */

/* Profile grid items with featured embed need no special treatment - featured-embed fills them */
.profile-grid-item.featured-embed-card {
  background: transparent;
}

/* Remove border-radius from featured-embed inside grid items (no rounded corners on grid) */
.profile-grid-item.featured-embed-card .featured-embed {
  border-radius: 0;
}

/* Hide default platform indicator and overlay for featured embed cards */
.profile-grid-item.featured-embed-card .profile-grid-item-platform,
.profile-grid-item.featured-embed-card .profile-grid-item-overlay,
.profile-grid-item.featured-embed-card .profile-grid-item-topics {
  display: none !important;
}

/* Featured embed card - remove default border/shadow treatments */
.carousel-post-card.featured-embed-card {
  background: transparent !important;
  border-color: transparent !important;
}

.carousel-post-card.featured-embed-card .post-embed-container {
  background: transparent;
}

/* ============================================================================
   Library Platform Icons
   ============================================================================ */

.library-platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.library-platform-icon svg {
  opacity: 0.8;
}

.library-platform-icon.instagram {
  background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.library-platform-icon.instagram svg {
  color: white;
}

.library-platform-icon.twitter {
  background: #000;
}

.library-platform-icon.twitter svg {
  color: white;
}

.library-platform-icon.youtube {
  background: #282828;
}

.library-platform-icon.youtube svg {
  color: #FF0000;
}

.library-platform-icon.tiktok {
  background: #000;
}

.library-platform-icon.tiktok svg {
  color: #00F2EA;
}

/* ============================================================================
   Library Embed Preview Modal
   ============================================================================ */

.library-embed-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.library-embed-modal.active {
  opacity: 1;
  visibility: visible;
}

.library-embed-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.library-embed-modal-content {
  position: relative;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  background: var(--color-bg-secondary, #0c0c0e);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.library-embed-modal.active .library-embed-modal-content {
  transform: scale(1);
}

.library-embed-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.library-embed-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.library-embed-modal-body {
  padding: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.library-embed-iframe {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #FFF;
}

.library-embed-iframe.instagram {
  min-height: 600px;
  max-width: 540px;
}

.library-embed-iframe.youtube {
  aspect-ratio: 16/9;
  min-height: 315px;
}

.embed-error {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 40px;
}

.embed-link {
  color: var(--color-primary);
  text-decoration: none;
  padding: 12px 24px;
  background: rgba(0, 168, 255, 0.1);
  border-radius: 8px;
  transition: background 0.2s;
}

.embed-link:hover {
  background: rgba(0, 168, 255, 0.2);
}

.embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Library Embed Preview Card (for platforms that block iframes) */
.library-embed-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  text-align: center;
  width: 100%;
  min-height: 300px;
  border-radius: 12px;
}

.library-embed-preview.instagram {
  background: linear-gradient(135deg, #405DE6 0%, #5851DB 20%, #833AB4 40%, #C13584 60%, #E1306C 80%, #FD1D1D 100%);
}

.library-embed-preview-icon {
  color: white;
  opacity: 0.9;
}

.library-embed-preview-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-embed-preview-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}

.library-embed-preview-name {
  font-size: 16px;
  font-weight: 500;
  color: white;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-embed-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s;
}

.library-embed-preview-link:hover {
  background: rgba(255, 255, 255, 0.3);
}

.library-embed-preview-link svg {
  flex-shrink: 0;
}

/* Instagram embed container for library modal */
.library-embed-modal .instagram-embed-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.library-embed-modal .instagram-embed-iframe {
  display: block;
  margin: 0 auto;
  max-width: 540px;
  min-width: 280px;
  width: 100%;
  min-height: 600px;
  border: none;
  border-radius: 12px;
  background: #FFF;
}

/* ============================================
   Library Table View
   ============================================ */

/* View Toggle Buttons */
.library-view-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.library-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  margin: 0;
  margin-bottom: 0;
}

.library-view-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

.library-view-btn.active {
  background: rgba(0, 168, 255, 0.12);
  border-color: rgba(0, 168, 255, 0.3);
  color: #00a8ff;
}

.library-view-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Table View Container */
.library-table-view {
  width: 100%;
  padding: 0; /* Horizontal padding comes from parent .section-container */
}

/* Bulk Actions Toolbar */
.library-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(0, 168, 255, 0.1);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: 8px;
  gap: 16px;
}

.bulk-actions-left,
.bulk-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bulk-selection-count {
  font-size: 14px;
  font-weight: 500;
  color: #00a8ff;
}

.bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bulk-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bulk-action-btn.bulk-action-delete {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.bulk-action-btn.bulk-action-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ff6b6b;
}

.bulk-action-dropdown {
  position: relative;
}

.bulk-action-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 150px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

/* Bulk tag menu with search enabled */
.bulk-action-dropdown-menu.bulk-tag-menu-with-search {
  min-width: 220px;
  max-width: 240px;
  left: auto;
  right: 0; /* Anchor to right to prevent viewport overflow */
  display: flex;
  flex-direction: column;
}

/* Wider mode when creating new tag */
.bulk-action-dropdown-menu.bulk-tag-new-tag-mode {
  min-width: 250px;
  max-width: 270px;
}

/* Bulk tag search styles */
.bulk-tag-search-wrapper {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.bulk-tag-search {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bulk-tag-search:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.bulk-tag-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Bulk tag results container */
.bulk-tag-results {
  flex: 1;
  overflow-y: auto;
  max-height: 200px;
}

/* Bulk tag section labels */
.bulk-tag-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Loading and no results states */
.bulk-tag-loading,
.bulk-tag-no-results {
  padding: 16px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.bulk-action-dropdown-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bulk-action-dropdown-option:hover {
  background: rgba(0, 168, 255, 0.15);
  color: #fff;
}

.bulk-action-dropdown-option.bulk-action-new-tag {
  color: #00a8ff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* New tag input - styling for bulk actions */
.bulk-tag-new-input-wrapper {
  display: flex;
  padding: 10px;
  gap: 8px;
  align-items: center;
}

.bulk-tag-new-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bulk-tag-new-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.bulk-tag-new-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.bulk-tag-new-input-submit {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #00a8ff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.bulk-tag-new-input-submit:hover {
  background: #0090e0;
}

/* Legacy bulk tag input wrapper (for backwards compat) */
.bulk-tag-input-wrapper {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bulk-tag-input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-family: inherit;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.bulk-tag-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.bulk-tag-input:focus {
  background: transparent;
}

.bulk-tag-input-submit {
  padding: 0;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  top: -10px;
  transition: color 0.15s ease;
}

.bulk-tag-input-submit:hover {
  color: #fff;
}

.library-table-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 500px;
}

/* Table Panel (Left) - Glassomorphism container */
.library-table-panel {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.5rem 1rem 1rem;
  overflow: hidden;
}

/* Table header with count and search */
.library-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0.25rem;
  gap: 12px;
}

/* Table count indicator */
.library-table-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  min-height: 1.5em;
}

/* Library search */
.library-search-pill {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: text;
}

.library-search-pill svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
}

.library-search-pill .library-search-pill-input {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  width: 100px;
  -webkit-appearance: none;
  appearance: none;
}

.library-search-pill .library-search-pill-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.library-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  font-size: 14px;
  margin: 0;
}

/* Table Load More Row */
.library-table .load-more-row td {
  background: transparent;
  border: none;
}

.library-table .table-load-more-btn {
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.library-table .table-load-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.library-table .table-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.library-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  background: transparent;
}

.library-table th:first-child {
  padding-left: 1rem;
}

/* Sortable column headers */
.library-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.library-table th.sortable:hover {
  color: rgba(255, 255, 255, 0.8);
}

.library-table th.sortable .th-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.library-table th.sortable .sort-indicator {
  font-size: 0.65rem;
  opacity: 0.7;
  min-width: 10px;
}

.library-table th.sorted-asc,
.library-table th.sorted-desc {
  color: rgba(255, 255, 255, 0.9);
}

.library-table th.sorted-asc .sort-indicator,
.library-table th.sorted-desc .sort-indicator {
  opacity: 1;
  color: #00a8ff;
}

.library-table td {
  padding: 0.625rem 0.5rem;
  vertical-align: middle;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

/* First column gets more left padding, last column handled separately */
.library-table td:first-child {
  padding-left: 1rem;
}

.library-table tbody tr {
  cursor: pointer;
  transition: all 0.2s ease;
}

.library-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}

.library-table tbody tr.hovered td {
  background: rgba(255, 255, 255, 0.04);
}

.library-table tbody tr.selected td {
  background: rgba(0, 168, 255, 0.15);
}

.library-table tbody tr.selected:hover td {
  background: rgba(0, 168, 255, 0.2);
}


/* Apply border-radius to first and last cells */
.library-table tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}

.library-table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
  padding-right: 0.5rem;
}

.library-table th:last-child {
  padding-right: 0.5rem;
}

/* Column widths - fixed widths for horizontal scroll */
.library-table .col-checkbox { width: 36px; padding: 0 0 0 8px !important; }
.library-table .col-name {
  width: 200px;
  overflow: hidden;
}
.library-table .col-type { width: 70px; white-space: nowrap; overflow: visible; }
.library-table .col-tags { width: 240px; overflow: visible; padding-left: 2rem; }
.library-table .col-date { width: 90px; white-space: nowrap; }
.library-table .col-status { width: 80px; white-space: nowrap; }
.library-table .col-actions { width: 60px; }

/* Custom checkbox styling */
.library-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 18px;
  height: 18px;
}

.library-checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.library-checkbox-visual {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.library-checkbox-wrapper:hover .library-checkbox-visual {
  border-color: rgba(255, 255, 255, 0.25);
}

.library-checkbox-wrapper input[type="checkbox"]:checked + .library-checkbox-visual {
  background: rgba(0, 168, 255, 0.15);
  border-color: #00a8ff;
}

.library-checkbox-wrapper input[type="checkbox"]:checked + .library-checkbox-visual::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #00a8ff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  left: 4px;
  top: 1px;
}

.library-checkbox-wrapper input[type="checkbox"]:indeterminate + .library-checkbox-visual {
  background: rgba(0, 168, 255, 0.15);
  border-color: #00a8ff;
}

.library-checkbox-wrapper input[type="checkbox"]:indeterminate + .library-checkbox-visual::after {
  content: '';
  width: 8px;
  height: 2px;
  background: #00a8ff;
  border-radius: 1px;
}

/* Name cell with editable input */
.library-table-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Read-only name text (public profile view) */
.library-table-name-text {
  display: block;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  color: #fff;
  font-size: 14px;
}

.library-table-name-input {
  flex: 1;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  resize: none;
  overflow: hidden;
  min-height: 1.4em;
  line-height: 1.4;
}

.library-table-name-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.library-table-name-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

/* Type cell with platform icon */
.library-table-type {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
}

.library-table-type svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
}

.library-table-type.twitter { color: #1da1f2; }
.library-table-type.youtube { color: #ff0000; }
.library-table-type.tiktok { color: #00f2ea; }
.library-table-type.instagram { color: #e4405f; }
.library-table-type.espn { color: #d00; }
.library-table-type.substack { color: #ff6719; }
.library-table-type.generic { color: #6b7280; }
.library-table-type.uploaded_media { color: white; }
.library-table-type.data_table { color: white; }
.library-table-type.sports_index,
.library-table-type.sports_index_timeline,
.library-table-type.sports_index_collection,
.library-table-type.sports_index_page,
.library-table-type.sports_index_topic,
.library-table-type.sports_index_author { color: white; }
.library-table-type.portfolio_tab { color: rgba(255, 255, 255, 0.5); }

/* Disabled status indicator for portfolio tabs */
.library-table-status-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 18px;
  padding: 4px 12px;
  cursor: default;
}

/* Uneditable topic pill for portfolio tabs */
.library-table-tag.tab-topic-pill {
  cursor: default;
  opacity: 0.6;
}
.library-table-tag.tab-topic-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Tags cell with editable pills - max 2 per row */
.library-table-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: flex-start;
  align-content: flex-start;
  position: relative;
  max-width: 240px;
}

.library-table-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 4px 6px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.6rem;
  line-height: 1.2;
  color: white;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: grab;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.library-table-tag .tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.library-table-tag:hover {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
}

/* Drag handle for tag reordering */
.tag-drag-handle {
  color: rgba(255, 255, 255, 0.3);
  font-size: 8px;
  letter-spacing: -2px;
  user-select: none;
  cursor: grab;
  transition: color 0.15s ease;
}

.library-table-tag:hover .tag-drag-handle {
  color: rgba(255, 255, 255, 0.5);
}

.tag-drag-handle:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Tag text */
.tag-text {
  line-height: 1.2;
}

/* Dragging state */
.library-table-tag.dragging {
  opacity: 0.5;
  cursor: grabbing;
  background: rgba(0, 168, 255, 0.2);
}

.library-table-tag.dragging .tag-drag-handle {
  cursor: grabbing;
}

/* More tags overflow pill */
.library-table-tag.more-tags {
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  overflow: visible;
}

.library-table-tag.more-tags:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Tooltip showing all tags */
.more-tags-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 300px;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 5px;
}

.library-table-tag.more-tags:hover .more-tags-tooltip,
.library-table-tag.more-tags.pinned .more-tags-tooltip {
  display: flex;
}

/* Arrow pointing down */
.more-tags-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Tags inside tooltip */
.tooltip-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tooltip-tag:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.3);
  color: #fff;
}

.library-table-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
  font-size: 10px;
  line-height: 1;
  padding: 0;
}

.library-table-tag-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.library-table-add-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 4px 6px;
  height: 22px;
  background: transparent;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.6rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.library-table-add-tag:hover {
  background: rgba(0, 168, 255, 0.1);
  border-color: rgba(0, 168, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

/* Individual row tag dropdown (matches bulk actions dropdown style) */
.tag-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

/* Dropdown with search enabled */
.tag-dropdown-menu.tag-dropdown-with-search {
  min-width: 240px;
  display: flex;
  flex-direction: column;
}

/* Wider mode when creating new tag */
.tag-dropdown-menu.tag-dropdown-new-tag-mode {
  min-width: 280px;
}

/* Search input at top */
.tag-dropdown-search-wrapper {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.tag-dropdown-search {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: none;
  outline: none !important;
  box-shadow: none;
  -webkit-appearance: none;
}

.tag-dropdown-search:focus {
  background: transparent;
}

.tag-dropdown-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Results container */
.tag-dropdown-results {
  flex: 1;
  overflow-y: auto;
  max-height: 200px;
}

/* Section labels */
.tag-dropdown-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Loading and no results states */
.tag-dropdown-loading,
.tag-dropdown-no-results {
  padding: 16px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.tag-dropdown-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tag-dropdown-option:hover {
  background: rgba(0, 168, 255, 0.15);
  color: #fff;
}

.tag-dropdown-option.tag-dropdown-new {
  color: #00a8ff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* New tag input - wider styling */
.tag-dropdown-new-input-wrapper {
  display: flex;
  padding: 12px;
  gap: 10px;
  align-items: center;
}

.tag-dropdown-new-input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tag-dropdown-new-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.tag-dropdown-new-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.tag-dropdown-new-input-submit {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #00a8ff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.tag-dropdown-new-input-submit:hover {
  background: #0090e0;
}

/* Legacy input wrapper (for backwards compat) */
.tag-dropdown-input-wrapper {
  display: flex;
  padding: 8px;
  gap: 8px;
}

.tag-dropdown-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  outline: none;
}

.tag-dropdown-input:focus {
  border-color: #00a8ff;
}

.tag-dropdown-input-submit {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #00a8ff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tag-dropdown-input-submit:hover {
  background: #0090e0;
}

/* Date cell - clickable button */
.library-table-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.library-table-date:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.library-table-date.admin-override {
  color: #6ec1e4;
}

/* Topic Date Override Popup */
.topic-date-override-popup {
  background: var(--color-bg-base-mid, #0c0c0e);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.topic-date-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #fff;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.topic-date-actions {
  display: flex;
  gap: 6px;
}

.topic-date-actions button {
  flex: 1;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.topic-date-save {
  background: #6ec1e4;
  color: #000;
}

.topic-date-clear {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* Date Edit Popover */
.date-edit-popover {
  background: var(--color-bg-base-mid, #0c0c0e);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  min-width: 240px;
}

.date-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.date-edit-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}


/* Date wheel picker container */
.date-wheel-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.date-wheel-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-wheel-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.date-wheel {
  position: relative;
  height: 120px;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.date-wheel-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: y mandatory;
  padding: 48px 0;
}

.date-wheel-scroll::-webkit-scrollbar {
  display: none;
}

.date-wheel-option {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  scroll-snap-align: center;
  transition: color 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.date-wheel-option:hover {
  color: rgba(255, 255, 255, 0.5);
}

.date-wheel-option.selected {
  color: #fff;
  font-weight: 600;
  transform: scale(1.1);
}

/* Selection highlight overlay */
.date-wheel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 28px;
  transform: translateY(-50%);
  background: rgba(0, 168, 255, 0.15);
  border-top: 1px solid rgba(0, 168, 255, 0.3);
  border-bottom: 1px solid rgba(0, 168, 255, 0.3);
  pointer-events: none;
  z-index: 1;
}

/* Fade overlays for wheel edges */
.date-wheel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-base-mid, #0c0c0e) 0%,
    transparent 30%,
    transparent 70%,
    var(--color-bg-base-mid, #0c0c0e) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Direct date input */
.date-direct-input-wrapper {
  margin-bottom: 12px;
}

.date-direct-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  outline: none;
  text-align: center;
  letter-spacing: 1px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.date-direct-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.date-direct-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0;
}

.date-direct-input.invalid {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}

.date-edit-actions {
  display: flex;
  gap: 6px;
}

.date-edit-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.date-edit-btn:hover {
  opacity: 0.9;
}

.date-edit-save {
  background: rgba(0, 168, 255, 0.3);
  color: #00a8ff;
  border: 1px solid rgba(0, 168, 255, 0.3);
}

.date-edit-save:hover {
  background: rgba(0, 168, 255, 0.4);
}

.date-edit-clear {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.date-edit-clear:hover {
  background: rgba(239, 68, 68, 0.25);
}

.date-edit-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.date-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Status cell - clickable toggle */
.library-table-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.library-table-status:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.library-table-status:active {
  transform: scale(0.98);
}

.library-table-status.private {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.library-table-status.public {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

/* Actions cell */
.library-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.library-table tbody tr:hover .library-table-actions {
  opacity: 1;
}

.library-table-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.library-table-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.library-table-action-btn.delete:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.library-table-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Preview Panel (Right) - sticky on scroll */
.library-preview-panel {
  width: 400px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  align-self: flex-start; /* Required for sticky to work in flex container */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px); /* Viewport height minus top offset and padding */
  overflow: visible;
}

.library-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: rgba(255, 255, 255, 0.4);
  gap: 16px;
  text-align: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.library-preview-empty svg {
  opacity: 0.5;
}

.library-preview-content {
  width: 100%;
  overflow: visible;
  max-height: none;
  padding: 4px 0; /* Space for hover scale to expand without clipping */
}

/* Preview content styling */
.library-preview-content .tweet-container {
  width: 100%;
  min-height: 150px;
  border-radius: 12px;
  overflow: hidden;
}

.library-preview-content .youtube-wrapper,
.library-preview-content .youtube-responsive-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.library-preview-content .youtube-wrapper iframe,
.library-preview-content .youtube-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  /* Render at 150% size so YouTube serves higher quality thumbnail, then scale to fit */
  width: 150%;
  height: 150%;
  border: none;
  transform: scale(0.6667);
  transform-origin: top left;
}

/* TikTok embeds in preview - container styling */
.library-preview-content .tiktok-embed-container {
  position: relative;
  width: 100%;
  min-height: 780px;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  /* Force proper clipping of iframe content */
  isolation: isolate;
  transform: translateZ(0);
}

/* TikTok iframe - height for 9:16 + UI, with clip-path for white background */
.library-preview-content .tiktok-embed-container iframe {
  display: block;
  width: 100%;
  height: 780px;
  border: none;
  border-radius: 12px;
  /* Clip sides to reduce white space, with rounded corners */
  clip-path: inset(0 10% round 12px);
}

.library-preview-content .tiktok-embed-container .tiktok-embed {
  margin: 0 !important;
  max-width: 100% !important;
}

.library-preview-content .instagram-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.library-preview-content .instagram-skeleton {
  max-width: 328px;
  border-radius: 12px;
}

.library-preview-content .instagram-media {
  margin: 0 !important;
  max-width: 100% !important;
  border-radius: 12px !important;
}

.library-preview-content .instagram-container iframe {
  border-radius: 12px !important;
}
}

.library-preview-description {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
  padding: 0 4px;
}

.library-preview-content .media-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.library-preview-content .media-card img,
.library-preview-content .media-card video {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 12px;
}

/* ESPN Preview */
.espn-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.espn-preview img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.espn-preview-overlay {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.espn-preview-overlay h3 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.espn-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.espn-preview-link:hover {
  color: #fff;
  opacity: 0.8;
}

.espn-preview-no-image {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espn-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.espn-preview-placeholder svg {
  opacity: 0.5;
}

.espn-preview-placeholder h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/* Substack Preview */
.substack-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.substack-preview img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: cover;
}

.substack-preview-overlay {
  position: absolute;
  inset: -2px;
  padding: 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 80%, rgba(0, 0, 0, 1));
}

.substack-preview-overlay h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.substack-preview-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.substack-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #ff6719;
  text-decoration: none;
  transition: color 0.2s ease;
}

.substack-preview-link:hover {
  color: #ff8c4d;
}

/* Substack Profile Card (for notes without content images) */
.substack-preview-profile {
  background: linear-gradient(135deg, rgba(255, 103, 25, 0.15) 0%, rgba(255, 103, 25, 0.05) 100%);
  border: 1px solid rgba(255, 103, 25, 0.2);
  border-radius: 12px;
  padding: 32px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.substack-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 400px;
}

.substack-profile-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 103, 25, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.substack-profile-icon svg {
  color: #ff6719;
}

.substack-profile-icon .substack-profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.substack-profile-author {
  font-size: 0.9rem;
  color: #ff6719;
  font-weight: 500;
}

.substack-profile-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.substack-profile-desc {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* Generic Link Preview */
.generic-link-preview {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.generic-link-preview img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: cover;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.generic-link-overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  padding-bottom: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.generic-link-title {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.generic-link-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generic-link-url:hover {
  color: rgba(255, 255, 255, 0.8);
}

.generic-link-url svg {
  flex-shrink: 0;
}

.generic-link-no-image {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.generic-link-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.generic-link-content svg {
  opacity: 0.5;
}

.generic-link-content .generic-link-title {
  display: block;
  -webkit-line-clamp: unset;
}

/* Preview loading states */
.library-preview-content .tweet-loading,
.library-preview-content .instagram-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  gap: 12px;
  min-height: 150px;
}

.library-preview-content .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-primary, #1da1f2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.library-preview-content .instagram-loading .loading-spinner {
  border-top-color: #E4405F;
}

/* Twitter white corners fix */
.library-preview-content .tweet-container .twitter-tweet,
.library-preview-content .tweet-container .twitter-tweet-rendered {
  margin: 0 !important;
  background: transparent !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.library-preview-content .tweet-container iframe {
  border: none !important;
  border-radius: 12px !important;
  color-scheme: light !important; /* Prevents browser dark mode from causing white corners */
}

/* TikTok fallback */
.library-preview-content .tiktok-embed-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 12px;
}

.library-preview-content .tiktok-embed-fallback a {
  color: #00f2ea;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 24px;
  border: 1px solid #00f2ea;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.library-preview-content .tiktok-embed-fallback a:hover {
  background: #00f2ea;
  color: #000;
}

/* Responsive: Shrink preview panel on smaller screens but keep sticky */
@media (max-width: 1200px) {
  .library-preview-panel {
    width: 300px;
  }
}

@media (max-width: 768px) {
  /* Show table view on mobile but hide the side preview panel */
  .library-preview-panel { display: none; }

  /* Collapse table to checkbox + Name + Type */
  .library-table .col-tags,
  .library-table thead .col-tags,
  .library-table .col-date,
  .library-table thead .col-date,
  .library-table .col-status,
  .library-table thead .col-status,
  .library-table .col-actions,
  .library-table thead .col-actions { display: none; }

  .library-table .col-checkbox { width: 28px; padding: 0 0 0 4px !important; }
  .library-table .col-name { width: auto !important; }
  .library-table .col-type { width: auto !important; border-radius: 0 8px 8px 0; }

  /* Entire table view: constrain to viewport */
  .library-table-view {
    overflow: visible;
    max-width: 100vw;
  }

  /* Table container: constrain to viewport */
  .library-table-container {
    display: block;
    width: 100%;
    min-height: auto;
    overflow: visible;
    max-width: 100%;
  }

  /* Table panel: remove glassmorphism, constrain width */
  .library-table-panel {
    border: none;
    border-radius: 0;
    padding: 0.5rem 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    max-width: 100%;
  }

  /* Table: ensure it fits within viewport */
  .library-table {
    width: 100% !important;
    table-layout: fixed;
    max-width: 100%;
  }

  .library-table td,
  .library-table th {
    overflow: hidden;
    text-overflow: ellipsis;
  }


  /* Inline preview row (inserted by JS on tap) */
  .library-inline-preview td {
    padding: 12px 0;
    background: transparent;
    border: none;
  }

  .library-inline-preview .library-inline-preview-content {
    width: 100%;
    overflow: hidden;
  }

  /* Inline preview: tweet embed — full width, no black background */
  .library-inline-preview .tweet-container {
    background: transparent;
    border-radius: 0;
    width: 100%;
    min-height: 0;
  }
  .library-inline-preview .tweet-container .twitter-tweet,
  .library-inline-preview .tweet-container .twitter-tweet-rendered,
  .library-inline-preview .tweet-container > * {
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
  }
  .library-inline-preview .tweet-container iframe {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Inline preview: TikTok embed — match timeline mobile */
  .library-inline-preview .tiktok-embed-container {
    background: transparent;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
  }
  .library-inline-preview .tiktok-embed-container iframe {
    border: none;
    border-radius: 0;
    margin: -1px;
    width: calc(100% + 2px);
    height: 782px;
    clip-path: inset(0 1% 0 1% round 12px);
  }

  /* Inline preview: YouTube embed — match timeline mobile */
  .library-inline-preview .youtube-wrapper,
  .library-inline-preview .youtube-responsive-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
  }
  .library-inline-preview .youtube-wrapper iframe,
  .library-inline-preview .youtube-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    transform: none;
  }

  /* Active row highlight */
  .library-table tbody tr.preview-open td {
    background: rgba(0, 168, 255, 0.1);
  }
}

/* ============================================================================
   Sports Index Internal Link Preview
   Override featured-embed positioning for standalone use in library
   ============================================================================ */

.si-internal-preview.featured-embed {
  /* Override absolute positioning to make it a standalone block element */
  position: relative;
  display: block;
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* In grid view (masonry), constrain max-width */
.library-item .si-internal-preview.featured-embed {
  max-width: 100%;
  height: 260px;
}

/* In preview panel, center and constrain */
.library-preview-panel .si-internal-preview.featured-embed,
#libraryPreviewContent .si-internal-preview.featured-embed {
  max-width: 380px;
  height: 280px;
  margin: 0 auto;
}

.si-internal-preview.featured-embed:hover {
  transform: scale(1.02);
}

.si-internal-preview.featured-embed:hover .featured-embed-bg {
  transform: scale(1.05);
}

/* ============================================================================
   Topic and Author Card Specific Styles
   ============================================================================ */

/* Topic library items - use library-item class selector */
.library-item-sports_index_topic .featured-embed-bg {
  /* Topic cards typically have landscape images, center positioning works well */
  background-position: center;
}

/* Author library items - position avatar towards top to show face */
.library-item-sports_index_author .featured-embed-bg {
  /* Avatar images are typically portraits, position towards top to show face */
  background-position: center top;
}

/* Author cards may have smaller/square avatars - ensure they scale nicely */
.library-item-sports_index_author .si-internal-preview.featured-embed {
  /* Minimum background color for cards without images - dark to match other cards */
  background: #0a0a0f;
}

/* Library card author avatars - ensure perfect circle */
.library-item .featured-embed-author img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================================
   Topic Cards in Library - Match explore page style
   ============================================================================ */

/* Remove masonry border for topic/author cards */
.library-item-sports_index_topic,
.library-item-sports_index_author {
  border: none;
}

/* Topic card container - matches explore page .all-topic-card */
.si-topic-preview.all-topic-card {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  text-decoration: none;
  background: #000;
  cursor: pointer;
}

.si-topic-preview .all-topic-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.si-topic-preview:hover .all-topic-card-media {
  transform: scale(1.05);
}

.si-topic-preview .all-topic-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
  pointer-events: none;
}

.si-topic-preview .all-topic-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 1;
}

.si-topic-preview .all-topic-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   Create/Import Modal
   ========================================== */
.create-import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.create-import-modal-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.create-import-modal-close {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 10003;
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  transition: color 0.2s ease;
}

.create-import-modal-close:hover {
  color: #fff;
}

/* Hide glowing orbs when modal is open */
.create-import-modal-overlay.show ~ .global-ambient-container,
body:has(.create-import-modal-overlay.show) .global-ambient-container {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

/* Choice View */
.create-import-choice-view {
  display: flex;
  gap: 24px;
  padding: 20px;
}

.create-import-choice-card {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl, 16px);
  padding: 40px 48px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 220px;
}

.create-import-choice-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--color-primary-rgb, 0, 168, 255), 0.4);
  transform: translateY(-2px);
}

.create-import-choice-card svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: rgba(var(--color-primary-rgb, 0, 168, 255), 0.8);
}

.create-import-choice-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.create-import-choice-card p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Create View (Collection/Timeline cards) */
.create-import-create-view {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.create-import-create-view .create-import-back-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: color 0.2s;
}

.create-import-create-view .create-import-back-btn:hover {
  color: #fff;
}

.create-import-create-cards {
  display: flex;
  gap: 24px;
}

/* Import View (iframe) */
.create-import-iframe-view {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  overflow: hidden;
}

.create-import-iframe-view iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* Mobile */
@media (max-width: 600px) {
  .create-import-choice-view {
    flex-direction: column;
    gap: 16px;
  }

  .create-import-choice-card {
    padding: 28px 24px;
    min-width: unset;
  }

  .create-import-create-cards {
    flex-direction: column;
    gap: 16px;
  }

  .create-import-iframe-view {
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* css/components/pro-sheet.css */
/* Settings account dialogs (#setDialog, .set-*: owned by the settings page)
   and, below, the Terminal Light Pro checkout sheet (#siProDialog). */
.set-page, .set-dialog, .set-toast { --set-ink: 241,243,245; --set-bg: #14171b; --set-on: #14171b; color: rgb(var(--set-ink)); font-variant-numeric: tabular-nums; }
html.si-light :is(.set-page,.set-dialog,.set-toast) { --set-ink: 16,20,24; --set-bg: #edeef0; --set-on: #fff; }
.set-page { max-width: 1080px; margin: 0 auto; padding: 32px 32px 72px; }
:is(.set-page,.set-dialog) *, :is(.set-page,.set-dialog) *::before, :is(.set-page,.set-dialog) *::after { box-sizing: border-box; }
:is(.set-page,.set-dialog,.set-toast)[hidden], :is(.set-page,.set-dialog) [hidden] { display: none !important; }
:is(.set-page,.set-dialog) :is(h1,h2,h3,p,section,header,footer,nav,label) { margin: 0; padding: 0; color: inherit; background: none; border: 0; }
:is(.set-page,.set-dialog) :is(button,a,input,textarea,select) { font: inherit; }
:is(.set-page,.set-dialog) button { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; background-image: none; box-shadow: none; line-height: 1.4; cursor: pointer; }
:is(.set-page,.set-dialog) a { color: inherit; text-decoration: none; }
:is(.set-page,.set-dialog) button:disabled { cursor: default; opacity: .45; }
:is(.set-page,.set-dialog) :is(button,a,input,textarea,select):focus-visible { outline: 2px solid rgba(var(--set-ink),.65); outline-offset: 3px; box-shadow: none; }
:is(.set-page,.set-dialog) :is(button,a):focus:not(:focus-visible) { outline: none; box-shadow: none; }
:is(.set-page,.set-dialog) .set-button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid rgba(var(--set-ink),.28); padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 750; white-space: nowrap; min-height: 32px; }
:is(.set-page,.set-dialog) .set-button:hover { background: rgba(var(--set-ink),.06); }
:is(.set-page,.set-dialog) .set-primary { background: rgb(var(--set-ink)); color: var(--set-on); border-color: transparent; }
:is(.set-page,.set-dialog) .set-primary:hover { background: rgba(var(--set-ink),.85); }
.set-dialog { inset: 0; margin: auto; width: min(580px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); height: auto; padding: 26px; border: 1px solid rgba(var(--set-ink),.15); border-radius: 20px; background: var(--set-bg); box-shadow: 0 24px 90px #0004; overflow: auto; }
.set-dialog:not([open]) { display: none; }
.set-dialog[open] { display: block; }
.set-dialog::backdrop { background: #0006; backdrop-filter: blur(3px); }
body:has(:is(#setDialog,#siProDialog)[open]) { overflow: hidden; }
.set-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.set-dialog h2 { font-size: 21px; font-weight: 850; letter-spacing: -.4px; }
.set-dialog .set-close { width: 30px; height: 30px; font-size: 28px; color: rgba(var(--set-ink),.5); }
.set-dialog p { font-size: 14px; line-height: 1.6; margin: 8px 0 16px; }
.set-dialog :is(input,textarea,select) { width: 100%; padding: 11px 12px; margin: 8px 0 16px; border: 1px solid rgba(var(--set-ink),.25); border-radius: 9px; background: rgba(var(--set-ink),.025); color: inherit; font-size: 15px; box-shadow: none; }
.set-dialog select option { background: var(--set-bg); color: rgb(var(--set-ink)); }
.set-dialog textarea { min-height: 140px; resize: vertical; }
.set-dialog label { display: block; font-size: 13px; font-weight: 700; }
.set-dialog .set-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.set-dialog .set-counter { text-align: right; font-size: 12px; color: rgba(var(--set-ink),.5); }
.set-dialog .set-danger { color: white; background: #b91c1c; border-color: #b91c1c; }
.set-dialog .set-list-row { padding: 16px 0; border-bottom: 1px solid rgba(var(--set-ink),.12); display: flex; align-items: center; gap: 12px; }
.set-list-row img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.set-list-row .set-button { margin-left: auto; }
.set-dialog .set-report { padding: 16px 0; border-bottom: 1px solid rgba(var(--set-ink),.15); }
.set-report small { font-size: 11px; color: rgba(var(--set-ink),.55); }
.set-dialog ul { padding-left: 20px; font-size: 14px; line-height: 1.6; }
:is(.set-page,.set-dialog) .set-error { color: #c43c3c; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.set-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 10030; padding: 12px 22px; border-radius: 999px; background: rgb(var(--set-ink)); color: var(--set-on); box-shadow: 0 4px 24px #0002; font-size: 13px; font-weight: 700; }
/* Pico treats dialog itself as a viewport-sized overlay. Native dialogs use
   ::backdrop for that layer; the dialog must retain its own bounded box. */
dialog#setDialog { min-width: 0; min-height: 0; box-sizing: border-box; max-width: calc(100vw - 32px); backdrop-filter: none; -webkit-backdrop-filter: none; }
.set-sf-symbol {display:block;width:24px;height:24px;background:currentColor;mask:var(--symbol) center/contain no-repeat;-webkit-mask:var(--symbol) center/contain no-repeat;}

/* ==========================================================================
   Pro checkout sheet (pro-sheet.js, <dialog id="siProDialog" class="tl-pro-sheet">)
   in Terminal Light. One card: header row (title + PRO tag + close), a
   scrolling body with the plan cards (modelled on the Home "Plans" cards)
   and the perk rows, then a footer with the ink purchase button.
   Tokens only (css/tl/tokens.css).
   ========================================================================== */
dialog#siProDialog {
  position: fixed; inset: 0; z-index: 10010;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px)); min-width: 0; max-width: none;
  height: fit-content; min-height: 0; max-height: calc(100dvh - 40px);
  margin: auto; padding: 0;
  border: 0; border-radius: var(--tl-r-card);
  background: var(--tl-card);
  box-shadow: var(--tl-float-shadow), 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  color: var(--tl-ink);
  font-family: var(--tl-font);
  overflow: hidden;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
dialog#siProDialog:not([open]) { display: none; }
dialog#siProDialog[open] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: stretch; justify-items: stretch; align-content: stretch; justify-content: stretch;
  animation: tlp-in 0.22s var(--tl-ease) both;
}
dialog#siProDialog::backdrop { background: rgba(0, 0, 0, 0.32); }
@keyframes tlp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#siProDialog *, #siProDialog *::before, #siProDialog *::after { box-sizing: border-box; }
#siProDialog [hidden] { display: none !important; }
#siProDialog :is(h2, h3, p, header, footer) { margin: 0; padding: 0; background: none; border: 0; color: inherit; }
#siProDialog :is(button, a) { font-family: var(--tl-font); }
#siProDialog button {
  width: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; box-shadow: none;
  line-height: normal; cursor: pointer;
}
#siProDialog a { color: inherit; text-decoration: none; }
#siProDialog :is(button, a):focus { outline: none; }
#siProDialog :is(button, a):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tl-card), 0 0 0 4px var(--tl-ink); }

/* Header row = .tl-card-head.has-rule */
#siProDialog > header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--tl-line-06);
}
#siProDialog #siProTitle {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  font-size: 15px; font-weight: 650; letter-spacing: -0.2px; line-height: 1.35; color: var(--tl-ink);
}
#siProDialog .set-close {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tl-line-12); border-radius: var(--tl-r-chip);
  background: var(--tl-control); color: var(--tl-ink-70);
  font-size: 18px; line-height: 1;
}
#siProDialog .set-close:hover { color: var(--tl-ink); }

/* Body */
#siProDialog #siProBody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 6px; }
#siProDialog .set-pro-pitch { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-60); }
#siProBody > p:not([class]) { font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-60); margin: 0 0 12px; }
#siProBody > h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.2px; margin: 0 0 6px; }
#siProDialog .set-unlocked-title {
  margin: 20px 0 4px; font-family: var(--tl-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-50);
}

/* Loading skeleton in the plan-card shape */
#siProDialog .tlp-skel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
#siProDialog .tlp-skel .tl-skel.is-block { height: 118px; border-radius: var(--tl-r-card); }

/* Plan cards: Home "Plans" card head row + big light price */
#siProDialog .set-plan-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
#siProDialog .set-plan-option {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; min-width: 0; padding: 0; text-align: left; white-space: normal;
  border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-card);
  background: var(--tl-control); color: var(--tl-ink);
  transition: box-shadow 0.2s var(--tl-ease), border-color 0.2s var(--tl-ease);
}
#siProDialog button.set-plan-option:hover { border-color: var(--tl-line-18); }
#siProDialog .set-plan-option[aria-pressed="true"] { border-color: transparent; box-shadow: var(--tl-pick-shadow); }
#siProDialog .set-plan-option:disabled { cursor: default; opacity: 0.6; }
#siProDialog .set-plan-option:focus-visible { box-shadow: 0 0 0 2px var(--tl-card), 0 0 0 4px var(--tl-ink); }
#siProDialog .set-plan-head {
  display: flex; align-items: center; gap: 8px; min-height: 45px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--tl-line-06);
}
#siProDialog .set-plan-label { flex: 1; font-size: 15px; font-weight: 650; letter-spacing: -0.2px; color: var(--tl-ink); }
#siProDialog .set-plan-saving { flex: none; }
#siProDialog .set-plan-option[aria-pressed="false"] .set-plan-saving { background: var(--tl-fill-06); color: var(--tl-ink-60); }
#siProDialog .set-plan-amount { display: block; padding: 14px 14px 6px; font-size: 30px; font-weight: 300; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
#siProDialog .set-plan-caption {
  display: block; padding: 0 14px 14px;
  font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px; line-height: 1.45;
  text-transform: uppercase; color: var(--tl-ink-50);
}
#siProDialog .set-plan-unavailable .set-plan-amount { font-size: 15px; font-weight: 500; color: var(--tl-ink-50); letter-spacing: 0; padding-bottom: 16px; }

/* Perk rows */
#siProDialog .set-pro-perks { border-top: 1px solid var(--tl-line-06); }
#siProDialog .set-pro-perk { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; }
#siProDialog .set-pro-perk + .set-pro-perk { border-top: 1px solid var(--tl-line-05); }
#siProDialog .set-perk-icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-chip);
  background: var(--tl-control); color: var(--tl-ink-70);
}
#siProDialog .set-perk-icon .set-sf-symbol { width: 16px; height: 16px; }
#siProDialog .set-perk-heading strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--tl-ink); padding-top: 5px; }
#siProDialog .set-pro-perk p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tl-ink-60); }

/* Member actions + retry */
#siProDialog .set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
#siProDialog .set-button {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--tl-line-12); border-radius: var(--tl-r-btn);
  background: var(--tl-control); color: var(--tl-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
#siProDialog .set-button:hover { background: var(--tl-page); }

/* Error line */
#siProDialog > .set-error { margin: 0; padding: 8px 18px 0; max-height: 64px; overflow: auto; font-size: 12.5px; line-height: 1.5; color: var(--tl-down); }

/* Footer */
#siProDialog #siProFooter { padding: 12px 18px 14px; border-top: 1px solid var(--tl-line-06); background: var(--tl-card); }
#siProDialog .set-pro-account {
  margin: 0 0 8px; text-align: center;
  font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tl-ink-50);
}
#siProDialog .set-pro-purchase {
  width: 100%; height: 38px; padding: 0 14px;
  border: 0; border-radius: var(--tl-r-btn);
  background: var(--tl-ink); color: var(--tl-on-ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#siProDialog .set-pro-purchase:hover { background: var(--tl-ink-hover); color: var(--tl-on-ink); }
#siProDialog .set-pro-purchase:disabled { cursor: not-allowed; background: var(--tl-fill-06); color: var(--tl-ink-40); }
#siProDialog .set-pro-renewal { margin: 8px 0 6px; text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--tl-ink-50); }
#siProDialog .set-pro-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
#siProDialog .set-pro-links :is(button, a) { font-size: 11.5px; font-weight: 400; color: var(--tl-ink-50); }
#siProDialog .set-pro-links :is(button, a):hover { color: var(--tl-ink); }
#siProDialog .set-pro-links > * + *::before { content: '\00b7'; display: inline-block; margin: 0 8px; color: var(--tl-ink-35); }

@media (max-width: 720px) {
  dialog#siProDialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  #siProDialog .set-plan-amount { font-size: 26px; }
  #siProDialog .set-plan-head { padding: 10px 12px 8px; }
  #siProDialog :is(.set-plan-amount, .set-plan-caption) { padding-left: 12px; padding-right: 12px; }
  #siProDialog .set-pro-purchase { white-space: normal; height: auto; min-height: 38px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog#siProDialog[open] { animation: none; }
  #siProDialog .set-plan-option { transition: none; }
}

/* css/tl/components.css */
/* ==========================================================================
   Terminal Light — shared components. Requires tl/tokens.css.
   Values are the handoff's code/components.css with every literal grey and
   white swapped for its token so dark mode follows. Pico is still loaded, so
   interactive elements carry explicit resets (see memory: pico-css-gotchas).
   ========================================================================== */

/* ---------- Base ---------- */
html, body { background: var(--tl-page); }
body {
  margin: 0;
  font-family: var(--tl-font);
  color: var(--tl-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum', 'cv11';
}
.tl-mono { font-family: var(--tl-mono); }
.tl-num { font-variant-numeric: tabular-nums; }
.tl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Links and buttons inside TL surfaces: inherit, no Pico chrome. :where keeps
   the specificity at a single class so every component rule below wins. */
:where([class^="tl-"], [class*=" tl-"]) :where(a),
a:where([class^="tl-"], [class*=" tl-"]) { color: inherit; text-decoration: none; }
/* Attribute selectors (0,1,1) so this outranks Pico's [type=button] and
   button margins, while any TL class rule (.tl-x or deeper) still wins. */
button[class*="tl-"],
[class*="tl-"] > button {
  margin: 0; font-family: var(--tl-font); line-height: normal;
  text-align: center; box-shadow: none; appearance: none; -webkit-appearance: none;
}

/* Visible focus: an ink ring, everywhere in the system. Not on tabindex="-1"
   targets (dialog panels and headings focused by script on open). */
:where([class^="tl-"], [class*=" tl-"]):focus-visible,
:where([class^="tl-"], [class*=" tl-"]) :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--tl-focus-ring) !important;
}

/* The prototypes run at line-height: normal. Pico sets 1.5 on body, which
   inflates bands, tabs and card titles; TL surfaces reset it. Body copy that
   wants 1.45-1.5 sets it explicitly, as in the prototypes. */
.tl-topbar, .tl-sidebar, .tl-main { line-height: normal; }
.tl-nav, .tl-tabs { justify-content: flex-start; }

/* ---------- App shell ---------- */
.tl-topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--tl-topbar-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 20px;
  background: var(--tl-header-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tl-line-07);
}
.tl-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.tl-brand img { width: 26px; height: 26px; border-radius: 7px; background: transparent; }
.tl-brand span { font-size: 16.5px; font-weight: 700; letter-spacing: -0.3px; font-style: italic; white-space: nowrap; color: var(--tl-ink); }
.tl-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.tl-nav a {
  position: relative; height: 32px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--tl-r-chip);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  color: var(--tl-ink-62);
}
.tl-nav a:hover { color: var(--tl-ink); }
.tl-nav a[aria-current="page"] { color: var(--tl-ink); background: var(--tl-fill-06); }
.tl-pro-tag { font-family: var(--tl-mono); font-size: 9px; font-weight: 400; line-height: normal; padding: 1px 4px; border-radius: var(--tl-r-tag); border: 1px solid var(--tl-pro-line); color: var(--tl-pro); }
/* PRO tag, always blue (design_handoff_stats_screener E2). The CREATOR tag stays grey. */
.si-tag-pro {
  display: inline-flex; align-items: center; flex: none;
  font-family: var(--tl-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.4px; line-height: normal;
  padding: 1px 5px; border-radius: var(--tl-r-tag);
  color: var(--tl-pro); background: color-mix(in srgb, var(--tl-pro-ring) 6%, transparent); box-shadow: inset 0 0 0 1px var(--tl-pro-line);
}
.tl-soon { font-family: var(--tl-mono); font-size: 9px; font-weight: 400; line-height: normal; padding: 1px 4px; border-radius: var(--tl-r-tag); border: 1px solid var(--tl-line-20); color: var(--tl-ink-45); }
.tl-topbar-spacer { flex: 1; }
.tl-topbar-right { display: flex; align-items: center; gap: 16px; }
.tl-topbar-actions { display: flex; align-items: center; gap: 8px; }
.tl-search {
  width: 300px; height: 34px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px 0 11px;
  border-radius: var(--tl-r-btn);
  border: 1px solid var(--tl-line-10);
  background: var(--tl-fill-03);
  font-size: 13px; color: var(--tl-ink-50);
}
.tl-kbd { height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 5px; border: 1px solid var(--tl-line-12); font-family: var(--tl-mono); font-size: 10.5px; color: var(--tl-ink-50); }
.tl-iconbtn {
  position: relative; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tl-r-btn); border: 1px solid var(--tl-line-12);
  background: transparent; color: var(--tl-ink-70); cursor: pointer;
}
.tl-iconbtn:hover { background: var(--tl-fill-05); color: var(--tl-ink); }
.tl-iconbtn .tl-badge-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tl-down); box-shadow: 0 0 0 2px var(--tl-page); }
.tl-btn-outline-lg {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: var(--tl-r-btn); border: 1px solid var(--tl-line-12);
  background: transparent; color: var(--tl-ink);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tl-btn-outline-lg:hover { background: var(--tl-fill-05); color: var(--tl-ink); }
.tl-btn-ink-lg {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center;
  border: 0; border-radius: var(--tl-r-btn);
  background: var(--tl-ink); color: var(--tl-on-ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tl-btn-ink-lg:hover { background: var(--tl-ink-hover); color: var(--tl-on-ink); }

/* Shell grid: sidebar + main */
.tl-shell { display: grid; grid-template-columns: var(--tl-sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--tl-topbar-h)); }
.tl-shell.is-bare { grid-template-columns: minmax(0, 1fr); }
.tl-main { min-width: 0; }

/* Sidebar */
.tl-sidebar {
  position: sticky; top: var(--tl-topbar-h);
  height: calc(100vh - var(--tl-topbar-h));
  display: flex; flex-direction: column;
  padding: 18px 12px 12px;
  border-right: 1px solid var(--tl-line-07);
  overflow-y: auto;
  background: var(--tl-page);
}
.tl-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 14px; }
.tl-side-head > span { font-size: 15px; font-weight: 600; }
.tl-side-edit {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 !important; padding: 0 !important;
  border: 1px solid transparent !important; border-radius: var(--tl-r-btn); background: transparent !important;
  color: var(--tl-ink-55) !important; box-shadow: none !important; cursor: pointer;
}
.tl-side-edit[hidden] { display: none; }
.tl-side-edit:hover:not(:disabled), .tl-side-edit.is-on { color: var(--tl-ink) !important; background: var(--tl-fill-05) !important; }
.tl-side-edit:disabled { cursor: default; opacity: 1; }
.tl-side-label { padding: 0 8px 8px; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.6px; color: var(--tl-ink-40); }
/* Each sidebar section after the first sits under a hairline, with room above it. */
.tl-side-label ~ .tl-side-label { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--tl-line-10); }
.tl-side-link {
  height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 8px;
  border-radius: var(--tl-r-chip); font-size: 13.5px; color: var(--tl-ink-60);
}
.tl-side-link:hover { background: var(--tl-fill-04); color: var(--tl-ink); }
.tl-side-link[aria-current="true"], .tl-side-link.is-on { background: var(--tl-fill-06); color: var(--tl-ink); font-weight: 500; }
.tl-side-link.is-more { gap: 6px; color: var(--tl-ink-45); }
.tl-side-link.is-more .chev { display: inline-block; transition: transform 0.25s var(--tl-ease); }
.tl-side-link.is-more[aria-expanded="true"] .chev { transform: rotate(90deg); }
.tl-side-spacer { flex: 1; min-height: 16px; }
.tl-earn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 10px;
  border-radius: var(--tl-r-btn); border: 1px dashed var(--tl-line-14);
}
.tl-earn:hover { background: var(--tl-fill-03); }
.tl-earn-ring {
  --p: 0;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--tl-pro-ring) 0 calc(var(--p) * 1%), var(--tl-line-10) calc(var(--p) * 1%) 100%);
}
.tl-earn-ring > i {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-page); font-style: normal; font-size: 10px; font-weight: 600; color: var(--tl-ink-60);
}
.tl-earn-text { display: flex; flex-direction: column; min-width: 0; }
.tl-earn-text > span:first-child { font-size: 12.5px; font-weight: 600; }
.tl-earn-text > span:last-child { font-size: 11.5px; color: var(--tl-ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Outline promo card (design_handoff_stats_screener E1): the Stats Screener
   card, the sidebar "Make Home yours" card and the sidebar plan card. */
.si-outline-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px;
  border-radius: var(--tl-r-card); border: 1px solid rgba(var(--tl-ink-rgb), 0.09); background: transparent;
}
html:not(.si-light) .si-outline-card { border-color: rgba(var(--tl-ink-rgb), 0.1); }
.si-outline-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.si-outline-card__label { font: 400 10px/1 var(--tl-mono); letter-spacing: 1.2px; color: var(--tl-ink-45); }
.si-outline-card__title { font: 700 15px/1.25 var(--tl-font); letter-spacing: -0.2px; color: var(--tl-ink); }
.si-outline-card__body { margin-bottom: 6px; font-size: 12.5px; line-height: 1.45; color: var(--tl-ink-60); text-wrap: pretty; }
.si-outline-card__btn {
  width: 100%; height: 32px; margin: 0; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--tl-r-btn); border: 1px solid rgba(var(--tl-ink-rgb), 0.12); background: transparent; color: var(--tl-ink);
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
html:not(.si-light) .si-outline-card__btn { border-color: rgba(var(--tl-ink-rgb), 0.14); }
.si-outline-card__btn:hover { background: var(--tl-fill-04); border-color: rgba(var(--tl-ink-rgb), 0.22); color: var(--tl-ink); }
html:not(.si-light) .si-outline-card__btn:hover { background: rgba(var(--tl-ink-rgb), 0.05); }
.tl-promo {
  position: relative; overflow: hidden; padding: 14px;
  border-radius: var(--tl-r-card); border: 1px solid rgba(var(--tl-ink-rgb), 0.09); background: transparent;
}
html:not(.si-light) .tl-promo { border-color: rgba(var(--tl-ink-rgb), 0.1); }
.tl-promo-title { margin-bottom: 6px; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; }
.tl-promo-body { font-size: 12.5px; line-height: 1.45; color: var(--tl-ink-60); margin-bottom: 12px; text-wrap: pretty; }
.tl-promo-actions { display: flex; gap: 6px; }
.tl-btn-ink-sm, .tl-btn-outline-sm {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center;
  border-radius: var(--tl-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tl-btn-ink-sm { border: 0; background: var(--tl-ink); color: var(--tl-on-ink); }
.tl-btn-ink-sm:hover { background: var(--tl-ink-hover); color: var(--tl-on-ink); }
.tl-btn-outline-sm { border: 1px solid var(--tl-line-12); background: transparent; color: var(--tl-ink-70); font-weight: 500; }
.tl-btn-outline-sm:hover { background: var(--tl-fill-05); color: var(--tl-ink); }

/* Drawer toggle (hidden on wide screens) */
.tl-menu-btn { display: none; }
.tl-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--tl-ease); }

/* ---------- Header band ---------- */
.tl-band { position: relative; overflow: hidden; padding: 22px 28px 0; border-bottom: 1px solid var(--tl-line-07); }
.tl-band > canvas.tl-field { position: absolute; left: 0; top: 0; opacity: var(--tl-field-opacity); pointer-events: none; }
.tl-band > *:not(canvas) { position: relative; }
.tl-band-head { margin-bottom: 18px; }
.tl-league-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; margin: 0 0 8px -2px; padding: 0 8px 0 9px;
  border: 0; border-radius: var(--tl-r-pill);
  background: var(--tl-fill-05); box-shadow: inset 0 0 0 1px var(--tl-line-08);
  font-family: var(--tl-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--tl-ink-60);
  cursor: pointer;
}
.tl-h1 { margin: 0; padding-bottom: 4px; font-size: 34px; font-weight: 500; letter-spacing: -0.9px; line-height: 1.2; color: var(--tl-ink); }
.tl-h1 .is-muted { color: var(--tl-ink-45); }
.tl-dek { margin: 6px 0 0; max-width: 520px; font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-60); }

/* Underline tabs */
.tl-tabs { display: flex; justify-content: flex-start; gap: 4px; margin: 0 -10px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tl-tabs::-webkit-scrollbar { display: none; }
.tl-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px 13px; border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--tl-ink-50);
}
.tl-tab:hover, .tl-tab.is-on, .tl-tab[aria-selected="true"], .tl-tab[aria-current="page"] { color: var(--tl-ink); }
.tl-tab::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--tl-ink);
  transform: scaleX(0); transition: transform 0.3s var(--tl-ease);
}
.tl-tab.is-on::after, .tl-tab[aria-selected="true"]::after, .tl-tab[aria-current="page"]::after { transform: scaleX(1); }
.tl-tab .count { font-family: var(--tl-mono); font-size: 10.5px; color: var(--tl-ink-40); }

/* ---------- Page body + grid ---------- */
.tl-body { padding: 18px 28px 56px; }
.tl-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tl-grid12.is-stretch { align-items: stretch; }
.tl-span-3 { grid-column: span 3; } .tl-span-4 { grid-column: span 4; } .tl-span-5 { grid-column: span 5; }
.tl-span-6 { grid-column: span 6; } .tl-span-7 { grid-column: span 7; } .tl-span-8 { grid-column: span 8; }
.tl-span-12 { grid-column: 1 / -1; }
.tl-split-8-4 { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.tl-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tl-sticky { position: sticky; top: calc(var(--tl-topbar-h) + 16px); }
.tl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tl-toolbar .spacer { flex: 1; }
.tl-toolbar-note { font-size: 12.5px; color: var(--tl-ink-50); }

/* ---------- Card ----------
   Every card reads the same way: its head (the title strip, and a list's
   or table's column names) is the card colour, frosted, and the body under
   it is flat and a step darker, whatever the card's height. Marks drawn on
   a card knock out to --tl-card-body. */
.tl-card {
  border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07);
  background: var(--tl-card-body); box-shadow: var(--tl-card-shadow);
  overflow: hidden; min-width: 0;
}
.tl-card.is-visible { overflow: visible; }
.tl-card.is-lift { transition: transform 0.3s var(--tl-ease), box-shadow 0.3s; }
.tl-card.is-lift:hover { transform: translateY(-2px); box-shadow: var(--tl-card-shadow-hover); }
.tl-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; min-width: 0; }
.tl-card-head.has-rule { border-bottom: 1px solid var(--tl-line-06); }
.tl-card > .tl-card-head { background: var(--tl-card-head); }
.tl-card > .tl-card-head:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tl-card-title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.2px; white-space: nowrap; color: var(--tl-ink); }
.tl-card-sub { font-size: 12px; color: var(--tl-ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-card-head .spacer { flex: 1; }
.tl-card-link { font-size: 12.5px; color: var(--tl-ink-60); white-space: nowrap; }
.tl-card-link:hover { color: var(--tl-ink); }
.tl-card-body { padding: 0 18px 16px; }
.tl-card-foot { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--tl-line-05); font-size: 12px; color: var(--tl-ink-50); }
.tl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tl-ink-50); white-space: nowrap; }
.tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tl-live); flex: none; }
.tl-section-title { display: flex; align-items: center; gap: 10px; padding: 18px 2px 0; margin-bottom: 12px; }
.tl-section-title > :first-child { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.3px; color: var(--tl-ink); }
.tl-section-title .spacer { flex: 1; }

/* ---------- Tables / list rows ---------- */
.tl-colhead {
  display: grid; gap: 8px; align-items: center; padding: 8px 18px;
  border-top: 1px solid var(--tl-line-06); border-bottom: 1px solid var(--tl-line-06);
  background: var(--tl-fill-025);
  font-size: 11.5px; font-weight: 500; color: var(--tl-ink-50);
}
/* Column names on a card are part of its head. */
.tl-card .tl-colhead, .tl-card table.tl-table thead th { background: var(--tl-card-head); }
.tl-row { display: grid; gap: 8px; align-items: center; padding: 9px 18px; font-size: 14px; color: var(--tl-ink); }
.tl-row + .tl-row { border-top: 1px solid var(--tl-line-05); }
a.tl-row:hover, .tl-row.is-hover:hover, button.tl-row:hover { background: var(--tl-fill-03); }
.tl-row.is-me, .tl-row.is-spot { background: var(--tl-fill-045); font-weight: 650; }
.tl-rank { font-family: var(--tl-mono); font-size: 12.5px; color: var(--tl-ink-40); }
.tl-rank.is-top { color: var(--tl-ink); }
.tl-logo { flex: none; display: inline-block; background: center / contain no-repeat; }
img.tl-logo { object-fit: contain; background: transparent; }
.tl-rec { font-family: var(--tl-mono); font-size: 10.5px; color: var(--tl-ink-40); }
.tl-move { font-size: 12.5px; text-align: right; }
.tl-move.is-up { color: var(--tl-up); }
.tl-move.is-down { color: var(--tl-down); }
.tl-move.is-flat { color: var(--tl-ink-35); }
.tl-num-r { text-align: right; font-variant-numeric: tabular-nums; }

/* Real <table> in the system (Pico paints td; reset it) */
.tl-table-wrap { overflow-x: auto; }
table.tl-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; color: var(--tl-ink); }
table.tl-table :is(th, td) { padding: 9px 12px; border: 0; background: transparent; color: inherit; text-align: left; white-space: nowrap; }
table.tl-table :is(th, td):first-child { padding-left: 18px; }
table.tl-table :is(th, td):last-child { padding-right: 18px; }
table.tl-table thead th {
  padding-top: 8px; padding-bottom: 8px;
  background: var(--tl-fill-025);
  border-top: 1px solid var(--tl-line-06); border-bottom: 1px solid var(--tl-line-06);
  font-size: 11.5px; font-weight: 500; color: var(--tl-ink-50);
}
table.tl-table thead th.is-sort { color: var(--tl-ink); }
table.tl-table tbody tr + tr td { border-top: 1px solid var(--tl-line-05); }
table.tl-table tbody tr:hover td { background: var(--tl-fill-03); }
table.tl-table td.is-sort { font-weight: 650; }
table.tl-table tr.is-next td { background: var(--tl-control); }
table.tl-table tr.is-total td { background: var(--tl-fill-025); font-weight: 600; }

/* ---------- Controls ---------- */
.tl-seg { display: inline-flex; padding: 2px; border-radius: var(--tl-r-chip); background: var(--tl-fill-05); }
.tl-seg > button, .tl-seg > a {
  height: 26px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: var(--tl-r-seg-in); cursor: pointer;
  font: 500 12.5px var(--tl-font); white-space: nowrap;
  background: transparent; color: var(--tl-ink-55);
  transition: background 0.2s var(--tl-ease), color 0.2s var(--tl-ease);
}
.tl-seg > :is(button, a):hover { color: var(--tl-ink); }
.tl-seg > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .is-on) {
  background: var(--tl-control); color: var(--tl-ink); box-shadow: var(--tl-seg-on-shadow);
}
.tl-seg.is-sm > :is(button, a) { height: 24px; padding: 0 10px; font-size: 12px; }
/* Pico skins [role=group] (and tablist) as a joined, full-width button group
   with a blue focus ring and flex:1 children. A segmented control carries
   those roles for accessibility, so undo all of it here, whatever the role. */
.tl-seg[role] { display: inline-flex; width: auto; margin: 0; vertical-align: middle; border-radius: var(--tl-r-chip); }
.tl-seg, .tl-seg[role]:focus-within, .tl-seg[role]:has(:focus) { box-shadow: none !important; }
.tl-seg[role] > * { flex: none; position: static; margin: 0 !important; border-radius: var(--tl-r-seg-in) !important; }
.tl-seg[role] > :is(button, a):not(:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .is-on)) { box-shadow: none; }
.tl-chip {
  height: 30px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--tl-r-chip); border: 1px solid var(--tl-line-10);
  background: transparent; color: var(--tl-ink-70);
  font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer;
}
.tl-chip:hover { color: var(--tl-ink); border-color: var(--tl-line-18); }
.tl-chip:is(.is-on, [aria-pressed="true"]) { border-color: var(--tl-ink); background: var(--tl-ink); color: var(--tl-on-ink); font-weight: 600; }
.tl-chip.is-dashed { border-style: dashed; border-color: var(--tl-line-18); color: var(--tl-ink-50); }
.tl-btn-ink {
  height: 32px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--tl-r-btn);
  background: var(--tl-ink); color: var(--tl-on-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tl-btn-ink:hover { background: var(--tl-ink-hover); color: var(--tl-on-ink); }
.tl-btn-ghost {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--tl-r-btn); border: 1px solid var(--tl-line-12);
  background: var(--tl-control); color: var(--tl-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tl-btn-ghost:hover { background: var(--tl-page); color: var(--tl-ink); }
:is(.tl-btn-ink, .tl-btn-ghost, .tl-btn-ink-lg, .tl-chip):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed; opacity: 1; background: var(--tl-fill-06); color: var(--tl-ink-40); border-color: transparent;
}
.tl-arrow-btn {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tl-r-chip); border: 1px solid var(--tl-line-12);
  background: var(--tl-control); color: var(--tl-ink-70); cursor: pointer;
}
.tl-arrow-btn:hover { color: var(--tl-ink); }
.tl-input {
  height: 32px !important; margin: 0 !important; padding: 0 11px !important;
  border-radius: var(--tl-r-btn) !important; border: 1px solid var(--tl-line-10) !important;
  background: var(--tl-control) !important; color: var(--tl-ink) !important;
  font: 400 13px var(--tl-font) !important; box-shadow: none !important;
}
.tl-input::placeholder { color: var(--tl-ink-45); }
.tl-input:focus { border-color: var(--tl-ink) !important; box-shadow: 0 0 0 3px var(--tl-fill-06) !important; }
textarea.tl-input { height: auto !important; padding: 10px 12px !important; line-height: 1.5; resize: vertical; }

/* Tags */
.tl-tag {
  height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--tl-r-pill);
  font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.tl-tag.is-up { background: var(--tl-up-bg); color: var(--tl-up); }
.tl-tag.is-down { background: var(--tl-down-bg); color: var(--tl-down); }
.tl-tag.is-neutral { background: var(--tl-fill-06); color: var(--tl-ink-60); }
.tl-tag.is-ink { background: var(--tl-ink); color: var(--tl-on-ink); }
.tl-kicker { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.5px; color: var(--tl-ink-50); text-transform: uppercase; }

/* Progress dots */
.tl-dots { display: flex; gap: 4px; }
.tl-dots > :is(span, button) {
  width: 6px; height: 4px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--tl-line-15); transition: width 0.3s, background 0.3s;
}
.tl-dots > .is-on { width: 18px; background: var(--tl-ink); }

/* Stat tile */
.tl-tile { border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07); background: var(--tl-card-bg); box-shadow: var(--tl-card-shadow); padding: 11px 14px; }
.tl-tile .k { font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.5px; color: var(--tl-ink-50); margin-bottom: 4px; text-transform: uppercase; }
.tl-tile .v { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.tl-tile .v.is-up { color: var(--tl-up); }

/* Odds bar */
.tl-odds-head { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.tl-odds-head b { font-size: 14px; font-weight: 650; }
.tl-odds-bar { display: flex; gap: 2px; height: 5px; }
.tl-odds-bar > i { border-radius: 3px; }
.tl-odds-bar > i.fav { background: var(--tl-ink); }
.tl-odds-bar > i.dog { flex: 1; background: var(--tl-line-18); }

/* Percentile bar with a median tick */
.tl-pct { position: relative; height: 4px; border-radius: 2px; background: var(--tl-line-08); }
.tl-pct > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--tl-ink); transition: width 0.6s var(--tl-ease); }
.tl-pct::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--tl-ink-35); }

/* Tooltip */
.tl-tooltip {
  position: absolute; z-index: 30; pointer-events: none;
  padding: 7px 9px; border-radius: 7px;
  background: var(--tl-tooltip-bg); color: var(--tl-tooltip-ink);
  font-size: 11.5px; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

/* Swap animation (carousels, leader card) */
.tl-swap { transition: opacity 0.22s var(--tl-ease), transform 0.22s var(--tl-ease); }
.tl-swap.is-leaving { opacity: 0; transform: translateY(6px); }
.tl-chev { display: inline-block; transition: transform 0.25s var(--tl-ease); }
[aria-expanded="true"] > .tl-chev, .is-open .tl-chev { transform: rotate(180deg); }

/* ---------- States ---------- */
.tl-empty { padding: 28px 18px; text-align: center; font-size: 13.5px; color: var(--tl-ink-50); }
.tl-empty > p { margin: 0 0 12px; }
.tl-empty.is-error > p { color: var(--tl-down); }
@keyframes tl-shimmer { from { background-position: -240px 0; } to { background-position: 240px 0; } }
.tl-skel {
  display: block; border-radius: 6px;
  background: var(--tl-fill-05) linear-gradient(90deg, transparent, var(--tl-fill-04), transparent) no-repeat;
  background-size: 240px 100%;
  animation: tl-shimmer 1.2s linear infinite;
}
.tl-skel.is-line { height: 12px; margin: 6px 0; }
.tl-skel.is-block { height: 120px; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .tl-shell { grid-template-columns: minmax(0, 1fr); }
  .tl-menu-btn { display: inline-flex; }
  .tl-sidebar {
    position: fixed; z-index: 45; top: 0; left: 0; bottom: 0; height: 100vh;
    width: min(300px, 86vw); padding-top: 18px;
    transform: translateX(-100%); transition: transform 0.3s var(--tl-ease);
    box-shadow: var(--tl-card-shadow-hover);
  }
  body.tl-drawer-open .tl-sidebar { transform: none; }
  body.tl-drawer-open .tl-scrim { opacity: 1; pointer-events: auto; }
  .tl-topbar { gap: 16px; }
  .tl-search { width: 220px; }
}
@media (max-width: 1100px) {
  .tl-split-8-4 { grid-template-columns: minmax(0, 1fr); }
  .tl-grid12 > [class*="tl-span-"] { grid-column: 1 / -1; }
  .tl-grid12 > .tl-span-6.is-pair, .tl-grid12 > .tl-span-4.is-pair, .tl-grid12 > .tl-span-3.is-pair { grid-column: span 6; }
  .tl-sticky { position: static; }
}
@media (max-width: 1023px) {
  .tl-topbar .tl-nav { display: none; }
  .tl-sidebar .tl-side-nav { display: flex; }
}
@media (max-width: 720px) {
  .tl-topbar { padding: 0 12px; gap: 10px; }
  .tl-brand span { display: none; }
  .tl-search { width: auto; flex: 1; min-width: 0; }
  .tl-search .tl-kbd { display: none; }
  .tl-topbar-right { flex: 1; min-width: 0; gap: 8px; }
  .tl-topbar-actions .tl-btn-outline-lg { display: none; }
  .tl-band { padding: 18px 16px 0; }
  .tl-h1 { font-size: 28px; letter-spacing: -0.7px; }
  .tl-body { padding: 14px 16px 40px; }
  .tl-grid12 > [class*="tl-span-"].is-pair { grid-column: 1 / -1; }
  .tl-card-head { padding: 12px 14px 10px; flex-wrap: wrap; }
  .tl-row, .tl-colhead { padding-left: 14px; padding-right: 14px; }
}
.tl-side-nav { display: none; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--tl-line-07); }

@media (prefers-reduced-motion: reduce) {
  .tl-card.is-lift, .tl-tab::after, .tl-swap, .tl-chev, .tl-sidebar, .tl-pct > i, .tl-dots > * { transition: none !important; }
  .tl-card.is-lift:hover { transform: none; }
  .tl-skel { animation: none; }
}

/* ---------- Image placeholder (tl/img-field.js): the pixel field over a news
   card's media box while its thumbnail loads, fading out once it arrives, or
   kept as the card's art when it has no image. ---------- */
.tl-imgph.is-rel { position: relative; }
.tl-imgph.tl-imgph img { background: transparent; }
.tl-imgph > canvas.tl-imgph-field {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  opacity: 0.22; transition: opacity 0.3s var(--tl-ease);
}
.tl-imgph > canvas.tl-imgph-field.is-done { opacity: 0; }
.tl-imgph > canvas.tl-imgph-field.is-art { z-index: 0; }