/* =============================================
   COMPONENTS
   Self-contained, reusable UI pieces that appear in multiple places.
   Includes: cards, modals, nav menus, filters, dropdowns, buttons, badges.
   If it's a chunk of UI you could pick up and drop somewhere else, it belongs here.
   ============================================= */

/* Responsive logo */
.responsive-logo { max-width: 200px; max-height: 55px; margin: 5px 0; margin-left: 0; opacity: 0; transition: opacity 0.4s ease-in-out; }
.responsive-logo[src*="logo"] { opacity: 1; }

/* User email display */
.usr-email, .usr-email .navbar-email { color: var(--neut300); margin-top: 10px; font-size: 1.6rem; font-family: var(--head); border-bottom: none!important; }
.usr-email { line-height: 1.5em; }

/* =============================================
   HEADER / NAV
   ============================================= */
/* Logout button reset */
#logged-in-logout { padding: 0; }

/* Top & side menu links */
#top-menu li a, #side-main-menu li a { font-size: 12px; font-size: 1.2rem; font-family: var(--body); color: var(--neut400); font-weight: 600; line-height: normal; letter-spacing: 1px; text-transform: uppercase; }
#top-menu li a:hover, #side-main-menu li a:hover { color: var(--purp500); }
#top-menu .current_page_item a, #side-main-menu .current_page_item a { color: var(--purp500); }

/* Nav & admin menu links */
#nav-menu li a, #admin-menu li a, .uk-offcanvas-bar .nav-menu li a { box-sizing: border-box; padding: 15px 10px; font-family: var(--body); font-size: 14px; 
    font-weight: 400; color: var(--neut300); letter-spacing: 0.035em; }
#nav-menu li a:hover .menu-icon { color: #fff; }
#nav-menu li a:hover { background: var(--neut300); color: #fff; border-radius: 4px; }
#admin-panel-item { margin: 10px 0; padding-left: 10px; }

/* Logout button */
.navbar-logout-btn { color: var(--secondr)!important; }
.navbar-logout-btn:hover { color: var(--neut300); }

/* Sidebar navbar overrides */
.menu-sidebar .uk-navbar-container, .menu-sidebar .uk-navbar-container:not(.uk-navbar-transparent) { box-shadow: none; }
.menu-sidebar .footer-wrap .uk-container { padding: 0; }
.menu-sidebar .uk-navbar-container, .uk-navbar-container:not(.uk-navbar-transparent) { background: transparent; }

.icon-overview path {fill: var(--neut300); }


/* Nav menu item dividers */
.menu-sidebar .nav-menu li,
.uk-offcanvas-bar .nav-menu li { border-bottom: 1px solid rgba(169, 168, 178, 0.15); }
.menu-sidebar .nav-menu li:last-of-type, .uk-offcanvas-bar .nav-menu li:last-of-type { border-bottom: none; }
.uk-nav-sub li a { font-size: 1.35rem !important; }

/* Active / selected nav item */
.selected-nav-item, .insights-page #insights-menu-item { background-color: rgba(255, 255, 255, 0.644) !important; color: white !important; border-radius: 4px !important;  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);  }
.selected-nav-item a, .selected-nav-item a:hover, .insights-page #insights-menu-item a, .insights-page #insights-menu-item a:hover { pointer-events: none; cursor: default; 
    color: rgb(7, 7, 7) !important; text-decoration: none; }

#admin-panel-item.selected-nav-item { background-color: transparent!important; color: white !important; border-radius: 4px !important; 
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); line-height: 1.5 !important; }

/* Nav logo spacing */
.nav-logo.image_loaded { margin-bottom: 40px; }

/* Open accordion/dropdown parent */
.uk-parent.uk-open { background-color: rgba(255, 255, 255, 0.644) !important; color: white !important; padding: 0 0 11px 0; border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); }
.uk-parent.uk-open .uk-nav-sub li a:hover { color: var(--purp600)!important; background: none!important; }
.uk-parent.uk-open .selected-nav-item { box-shadow: none; background: transparent!important; }
.uk-parent.uk-open .selected-nav-item a { color: var(--purp700); }

/* Sub-nav list */
ul.uk-nav-sub { padding: 5px 0; }
ul.uk-nav-sub li { width: 90%; margin: 0 auto; }

/* Menu icons */
.selected-nav-item .menu-icon { width:17px; color: var(--neut400); margin-right: 10px }
.menu-icon { width:17px; color: var(--neut200); margin-right: 10px }


.iframe-container { position:relative; }
.iframe-fullscreen-btn { position:absolute; top:-55px; right:12px; z-index:10; display:flex; align-items:center; justify-content:center; height:32px; width:80px; background:var(--purp700); color:var(--neut100); border:1px solid rgba(0,0,0,0.1); border-radius:6px; cursor:pointer; transition:background 0.2s ease; }
.iframe-fullscreen-btn:hover { background:var(--neut300); color:var(--neut100); }

/* =============================================
   DASHBOARD BLOCKS
   ============================================= */
.ob-card { background:rgba(253,253,253,0.25); border:1px solid rgba(255,255,255,0.5); border-radius:12px; padding:1.25rem 1.5rem; height:100%; box-sizing:border-box; }
.ob-eyebrow { font-family:var(--head); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--neut300); margin:0 0 0.75rem; }
.ob-body { display:flex; flex-direction:column; }
.ob-changelog-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.85rem; }
.ob-changelog-item strong { display:block; font-size:0.9rem; color:var(--neut400); }
.ob-changelog-item p { margin:0.2rem 0 0; font-size:0.8rem; color:var(--neut300); line-height:1.5; }
.ob-placeholder { font-size:0.85rem; color:var(--neut200); margin:0; }
.ob-stat { font-family:var(--head); font-size:2.75rem; font-weight:700; color:var(--neut400); margin:0.25rem 0 0; line-height:1; }
.ob-shortcut-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--purp200); color:var(--purp600); font-size:1.5rem; line-height:1; text-decoration:none; margin-top:0.5rem; transition:background 0.2s; }
.ob-shortcut-btn:hover { background:var(--purp300); color:var(--purp700); }
.ob-row { margin-bottom:1.25rem; }


/* =============================================
   OVERVIEW BLOCKS
   ============================================= */
.ob-grid { display:grid; grid-template-columns:1fr 2fr; grid-template-rows:auto auto; gap:1.25rem; grid-template-areas:'changelog tones' 'shortcuts shortcuts'; }
.ob-shortcuts { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
.ob-card { background:rgba(253,253,253,0.25); border:1px solid rgba(255,255,255,0.5); border-radius:12px; padding:1.25rem 1.5rem; min-height: 205px; overflow-x: auto;  }
.ob-eyebrow { font-family:var(--head); font-size:1.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--neut300); margin:0; }
.ob-body { display:flex; flex-direction:column; justify-content: center; height: 205px; }
.ob-changelog-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.85rem; max-height: 180px; }
.ob-changelog-item strong { display:block; font-size: 1.2rem; color:var(--neut400); }
.ob-changelog-item p { margin:0.2rem 0 0; font-size:1.2rem; color:var(--neut300); line-height:1.5; }
.ob-placeholder { font-size:0.85rem; color:var(--neut200); margin:0; }
.ob-stat { font-family:var(--head); font-size: 2.75rem; font-weight:600; color:var(--neut400); margin:0.25rem 0 0; }
.ob-stat--muted { color: var(--neut200); }
.ob-shortcut-btn { display:flex; align-items:center; justify-content:center; width: 60px; height: 60px; border-radius:50%; background:var(--neut200); color:var(--purp600); font-size: 4.75rem; line-height:1; text-decoration:none; margin:0.5rem auto 0; transition:background 0.2s; color: #FFF; }
.ob-shortcut-btn:hover { background:var(--purp300); text-decoration:none; }

/* Project Detail Back Button */
.selected-nav-item a, .selected-nav-item a:hover { pointer-events: none; cursor: default; }


/* =============================================
   ARTICLE CARDS
   ============================================= */
/* Content visibility toggle */
#content-toggle-form::before { content: "Show or hide:"; font-size: 1.2rem; letter-spacing: 0.05em; }
#content-toggle-form { flex-direction: row; margin-top: 0; }
#content-toggle-form label { margin: 0 0 0 20px; font-size: 1.2rem; text-transform: capitalize; letter-spacing: 0.05em; }
#content-toggle-form label input { margin-right: 5px; }
.content-toggle-form { padding: 10px; }

/* Checkbox & radio overrides */
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked, .uk-checkbox:checked:focus, .uk-radio:checked:focus { background-color: #7869bf; 
    border: 1px solid #7869bf; }

/* Card container */
#articles-menu-item.selected-nav-item a { color: var(--purp700)!important; }
.news-card { background-color: white; padding: 15px; box-shadow: 1px 1px 6px rgba(85, 84, 89, 0.25) !important; border: 1px solid var(--neut100); border-radius: 12px; 
    overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease-in-out; }
.news-card:hover { transform: translateY(-5px); }

/* Card image */
.image-container { max-height:200px; overflow:hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative;  }
.article-image { width:100%; height:200px; object-fit:cover; }

.feed_by { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 8px 10px; border-top-right-radius: 8px; 
    border-bottom-right-radius: 8px; font-size: 12px; font-family: var(--head); border: none; font-weight: 500; letter-spacing: 0.5px; }

/* Card title */
.news-content h3 { font-size: 18px; margin-top: 10px; margin-bottom: 10px; font-family: var(--head); font-weight: 600; line-height: 1.35em; color: var(--neut400); }
.news-content h3 a { color: var(--neut400) !important; text-decoration: none !important; font-family: var(--head) !important; }

/* Score display */
.content-section { margin: 12px 0; }
.score-container { display: flex; margin: 12px 0; flex-direction: row; justify-content: left; align-items: center; font-size: 1.4rem; }
.score-circles-container { display: flex; justify-content: center; }
.score-circle { width: 12px; height: 12px; border-radius: 50%; margin: 0 2px; }

/* Card meta fields */
#additional-metrics-section {margin-bottom:40px;}
.source, .date, .category, .overtone_type, .description, .show-source_location, .show-source_zip_code { font-size: 1.5rem; font-family: var(--body); font-weight: 400; 
    color: var(--neut300); display: block; padding: 5px; margin: 5px 0; border-top: 1px solid var(--neut100); }
.additional-metric span { display: block; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; }
.metric-label, .score-label { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.125em; }
.date-range { color: var(--neut300); }
.description { line-height: 1.45em; }
.show-Tone_Label { text-transform: capitalize; }

/* Skeleton loading states */
.source.skeleton, .date.skeleton { color: transparent; border: 1px solid transparent; }
.overtone_type_skeleton { display: inline-block; background-color: #ffffff; color: #00accc; font-size: 16px; font-weight: 400; padding: 5px 10px; border-radius: 5px; 
    margin: 5px 5px 5px 0; transition: all 0.3s ease; }
.category_skeleton { display: inline-block; background-color: #ffffff; color: #9f54f0; font-size: 16px; font-weight: 400; padding: 5px 10px; border-radius: 5px; 
    margin: 5px 5px 5px 0; transition: all 0.3s ease; }

/* Hide empty tags */
.category:empty, .overtone_type:empty { display: none; }

/* Card body */
.news-content { padding: 3px 3px 20px 3px; background-color: #fff; position: relative; z-index: 0; }

/* Feedback button */
.feedback-button { color: var(--lavender); font-size: 12px; cursor: pointer; background: var(--neut100); border: none; padding: 10px 0 10px 20px; position: absolute; 
    bottom: 0; left: 0; border-top: 1px solid var(--lavender); width: 100%; font-size: 1.2rem; }

/* Table row stripes */
.even-stripe { background-color: #fff; }
.odd-stripe { background-color: var(--neut100); }


/* =============================================
   FILTERS
   ============================================= */
/* Filter panel container */
.uk-offcanvas-bar { background: var(--neutral); color: var(--neut400); }
.search-left-panel h2, .search-left-panel h3, .search-left-panel h4, .uk-offcanvas-bar h2, .uk-offcanvas-bar h3, .uk-offcanvas-bar h4 { color: var(--neut400)!important; 
    font-weight: 600!important; }
.search-left-panel h4 { margin-top:20px; }

/* Filter action buttons */
.submit-btn { background: var(--purp900); border-radius: 2px!important; border: 1px solid var(--purp900); font-size: 1.2rem!important; font-weight: 400!important; 
    color: #fff!important; }
.filter-btn { margin-left: 20px; padding: 0 30px; height: 44px; line-height: 44px; }
.filter-btn:hover { background: var(--neut300); color: #fff !important; }
.filter-btn { background: #7869bf; color: #fff; border: 1px solid var(--purp500); font-size: 1.2rem; letter-spacing: 2px; border-radius: 4px; font-family: var(--body); }
.filter-button { background: #fbfaff; color: var(--purp900); border: 1px solid var(--neut100); font-size: 1.2rem; letter-spacing: 2px; border-radius: 4px; 
    font-family: var(--body); }
.filter-off-button { background: var(--neut100); border-color: var(--neut100); padding: 0 20px; border-radius: 3px; font-size: 1rem; }
.filter-off-button span { margin-left: 4px; }
.filter-sort-btns { align-items: center!important; }

/* Accordion */
.uk-accordion-title { font-weight: 600; }
.filters-date-grid, .filters-accordion { width:100%; }

/* Checklist */
.filters-check { text-transform: capitalize; }
.filters-check input { margin-right:5px; }
.filters-checklist { list-style: none; padding-left:5px; }
.filters-divider { background-color: var(--neut100); display: block; width: 100%; height: 1px; }

/* Dropdown list */
.uk-nav.drop-list { margin: 10px 0; }
.uk-nav.drop-list a, .uk-dropdown li a { font-size: 14px; font-family: var(--body); color: var(--neut300); text-transform: capitalize; }
.double, .dropdown-submenu .dropdown-menu { width: 100%; border: none !important; border-radius: 0 !important; padding: 20px !important; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }
.dropdown-submenu .dropdown-menu.show { max-height: 363px; overflow: auto; }
.dropdown-submenu .dropdown-menu li { margin: 10px 0; }
.dropdown-menu.show { left: 0; }
.dropdown-menu.show li a { text-wrap: balance; }
.dropdown-menu.show li a:focus { background: #f1eefc; }

/* Metric dropdown */
.form-check { display: flex; flex-direction: column; align-items: center; margin-right: 5px; }
.form-check .form-check-input { float: none; margin-left: auto; width: 26px; }
.form-check-label { margin-right: 5px; }
.metric-drop-label { text-align: center; width: 100%; margin: 5px 0 !important; }
.metric-drop-label:nth-of-type(1) { margin-top: 0 !important; }

/* Result count */
.text-count p { font-size: 14px; color: #555459; letter-spacing: 1px; margin: 0; }
.article-count { border-right: 1px solid var(--neut200); padding-right: 30px; }

/* =============================================
   SEARCH CARDS
   ============================================= */
#project-hits { margin-top:40px; }
/* Election filter select */
#election-select { height: 40px; padding: 10px 15px; width: 66%; border: 1px solid var(--neut200); border-radius: 5px; margin-right: 5px; }

/* Refresh button */
#refresh-button { border: 1px solid var(--neut200); border-radius: 5px; background: var(--purp500); height: 40px; padding: 10px 15px; color: #fff; font-family: var(--body); }

/* Clear refinements */
#clear-refinements { margin-top: 30px; margin-bottom: 30px; }
#clear-refinements button:not(:disabled) { background: var(--neut400); padding: 20px 0; border-radius: 7px; color: #fff; font-family: var(--body); font-size: 14px; text-transform: capitalize; }
#clear-refinements button:not(:disabled):hover { background: var(--neut100); color: var(--neut300); }

/* Search box */
#searchbox { width: 76%; box-sizing: border-box; flex: 1; margin-top: -20px; }
#tone-label { margin: 2rem auto; text-align: left; }
.search-panel { display: flex; align-items: center; margin-bottom: 40px; }
.ais-SearchBox-form:before { height: 20px !important; width: 20px !important; margin-top: 1px !important; background-repeat: no-repeat !important; left: .8rem !important; }
.ais-SearchBox-form { flex-direction: row; width: 100%; height: 42px; }
.ais-SearchBox-input { height: 44px; padding-left: 30px!important; font-size: 1.2rem!important; }

/* AlgoliaSearch overrides */
.ais-Hits-item:first-of-type, .ais-InfiniteHits-item:first-of-type, .ais-Hits-item, .ais-InfiniteHits-item { border-radius: 15px!important; align-items: baseline!important; }
.ais-RefinementList-item { font-size: 1.4rem!important; margin: 5px 0; }
.ais-RefinementList-count { padding: 4px 5px!important; font-size: 1.1rem!important; }
.ais-RefinementList-checkbox { height: 14px!important; min-width:14px!important; color: var(--lavender)!important; }
.ais-ClearRefinements-button:disabled[disabled] { font-size: 1.2rem; color: var(--neut200); background: var(--neut300); }
.ais-Pagination-link { height: 40px!important; padding: 0 15px!important; font-size: 1.2rem!important; }

/* Offcanvas panel overrides */
.uk-offcanvas-overlay::before { background: rgba(0, 0, 0, 0.75); }
.uk-offcanvas-bar hr { border-top-color: rgba(0, 0, 0, 0.2); }
.uk-offcanvas-bar .uk-close { color: var(--neut400); }
.uk-offcanvas-bar .uk-button-default { background: var(--purp500); font-family: var(--body); font-size: 14px; color: #fff; text-transform: capitalize; border: none; }
.search-left-panel .dropdown-container { margin-top: 30px; }
.panel-title { margin-top: 30px; color: #555459 !important; font-weight: 700; }

/* Article meta */
.article-concepts { letter-spacing: 0.015em; font-family: var(--body); font-size: 14px; font-weight: 300; }
.articles-paragraph-label { font-family: var(--body); font-size: 12px; line-height: 1.45em; color: var(--neut300); }
.article-pub-date, .article-concepts { font-size: 14px; font-family: var(--body); font-weight: 400; text-transform: uppercase; color: var(--neut300); }
.article-details { margin: 20px 0; }
.article-details div { padding: 0; }

/* Card image */
.hit-img-wrap { width: 100%; height: 165px; overflow: hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.seacrh-article-image { height: 200px; overflow: hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* Panel dropdown button */
/*.drop-btn{ width: 100%; margin: 5px 0 20px; line-height: 1em!important; padding: 20px 0; } */
.panel-drop { width: 100%; margin: 5px 0 10px; line-height: 1em !important; padding: 14px 0; border-radius: 7px; }
.panel-drop:hover { background: var(--neut300) !important; color: #fff; }


/* =============================================
   OFFCANVAS PANEL
   ============================================= */
.vue-offcanvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* Show overlay */
.vue-offcanvas-overlay.active { opacity: 1; pointer-events: auto; }

/* Offcanvas panel base */
.offcanvas-panel { position: fixed; top: 0; bottom: 0; width: 280px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3); padding: 20px; z-index: 1001; transition: transform 0.3s ease-in-out; }

/* Slide from left (default) */
.offcanvas-panel.left { left: 0; transform: translateX(-100%); }
.vue-offcanvas-overlay.active .offcanvas-panel.left { transform: translateX(0); }

/* Slide from right */
.offcanvas-panel.right { right: 0; left: auto; transform: translateX(100%); }
.vue-offcanvas-overlay.active .offcanvas-panel.right { transform: translateX(0); }

@media (max-width: 640px) {
  .offcanvas-panel { width: 90%; }
}

/* =============================================
   UPLOADS / ARTICLE ZOOM-IN
   ============================================= */
/* Upload wrapper */
.submit-upload-wrapper { display: flex; justify-content: space-between; align-items: center; margin: 30px 0; box-sizing: border-box; width: 90%; }

/* Article card */
.article-card-title { font-weight: 600; color: var(--purp800); text-transform: uppercase; }
.article-summary { border-radius: 15px; max-width: 620px; }
.article-content-wrap { display: flex; justify-content: center; align-items: center; }

/* Text clip & fade */
.text-clipped { position: relative; max-height: 300px; overflow: hidden; }
.fade-overlay { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, white); pointer-events: none; }

/* Icon text label */
.icon-txt { text-transform: uppercase; color: var(--purp400); font-weight: 600; }

/* Icons — active (purple) */
.icon-audience { width: 18px; height: 16.2px; color: var(--purp400); }
.icon-type { width: 18px; height: 17.5px; color: var(--purp400); }
.icon-tone { width: 18px; height: 15.48px; color: var(--purp400); }
.icon-safety { width: 15px; height: 17.5px; color: var(--purp400); }
.icon-voice { width: 15.31px; height: 18px; color: var(--purp400); }
.icon-share { width: 28px; height: 28px; color: var(--purp400); }
.icon-add { width: 28px; height: 28px; color: var(--purp400); }
.icon-arrow { width: 28px; height: 28px; color: var(--purp400); }

/* Icons — inactive (grey) */
.icon-audience-grey { width: 18px; height: 16.2px; color: var(--neut200)!important; }
.icon-type-grey { width: 18px; height: 17.5px; color: var(--neut200)!important; }
.icon-tone-grey { width: 18px; height: 15.48px; color: var(--neut200)!important; }
.icon-safety-grey { width: 15px; height: 17.5px; color: var(--neut200)!important; }
.icon-voice-grey { width: 15.31px; height: 18px; color: var(--neut200)!important; }
.icon-share-grey { width: 28px; height: 28px; color: var(--neut200)!important; }
.icon-add-grey { width: 28px; height: 28px; color: var(--neut200)!important; }
.icon-arrow-grey { width: 28px; height: 28px; color: var(--neut200)!important; }

/* Icon button */
.icon-btn { background: transparent; color: var(--neut400); padding: 2px; }

/* Small button */
.btn-small { line-height: 24px; border-radius: 4px; background: var(--purp500); padding: 0 20px; }
.btn-small:hover { background: var(--purp800); }

/* UIkit close button */
.uk-close { color: var(--purp900); background: var(--neut200); }
.uk-close:hover { color: var(--neut100); background: var(--neut400); }

/* Recommendation panel */
.recommendation-box { position: absolute; width: 45%; bottom: 120px; margin: 30px 0; }
.recommendation-footer { position: absolute; width: 45%; bottom: 40px; text-align: center; justify-content: center; align-items: center; }
.recommendation-footer > div > p { margin-top: 10px; }

/* Upload inputs */
#remaining-uploads-count { font-weight: 600; font-size: 1.6rem; }
#url-box { width: 90%; max-width: 100%; border-radius: 15px; padding: 15px; font-size: 16px; resize: vertical; box-sizing: border-box; }

/* Upload progress */
#progress-text { margin-top: 0.5rem; font-size: 1.2rem; }
.spinner { width: 50px; height: 50px; border: 6px solid #ccc; border-top: 6px solid var(--purp500); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
#global-progress { display: block !important; width: 320px; height: 30px; margin: 1rem auto 0; appearance: auto; -webkit-appearance: progress-bar; accent-color: var(--purp500); }
#global-progress::-webkit-progress-bar { background-color: #eee; }
#global-progress::-webkit-progress-value { background-color: var(--purp500); transition: width 0.2s ease-in-out; }
#global-progress::-moz-progress-bar { background-color: var(--purp500); }

/* Collections */
.collect-options { padding-top: 15px; }
.collection-title { margin: 0; }

/* Filter menu frame */
.filter_menu-frame { margin-top: 20px; padding: 10px 0; width: 100%; max-width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--neut100); }


/* =============================================
   SETTINGS PANELS
   Tab transitions, status indicators, toggle labels.
   ============================================= */
.uk-tab>.uk-active>a { border-color: var(--secondm); font-size: 1.2rem; color: var(--neut400); }
.uk-tab>*>a { font-size: 1.2rem; color: var(--neut300); }
.uk-form-controls { min-width: 50%; width: 320px; }
.panel-fade-enter-active, .panel-fade-leave-active { transition: opacity 0.15s ease; }
.panel-fade-enter-from, .panel-fade-leave-to { opacity: 0; }
.uk-table th { font-size: 1.2rem; color: var(--neut300); }
.uk-table-small td, .uk-table-small th { font-size: 1.2rem; position: relative; }
.account-feeds {  max-width:180px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-panel { padding: 0; }

/* Status */
.status-paused { background-color: #888780; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-dot--active { background-color: var(--teal); }
.status-dot--inactive { background-color: var(--neut200); }

/* Feedback */
.label-downgrade::before { background-color: var(--secondr)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-add::before  { background-color: var(--secondp)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-comment::before  { background-color: var(--neut200); width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-upgrade::before  { background-color: var(--teal)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-remove::before  { background-color: var(--secondm)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }

/* Toggle */
.switch-label { display: inline-flex; align-items: center; cursor: pointer; gap: 8px; }
.switch-label input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 44px; height: 24px; background: #d1d5db; 
    border-radius: 9999px; position: relative; cursor: pointer; transition: background 0.25s ease; flex-shrink: 0; }
.switch-label input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff;
    border-radius: 50%; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.switch-label input[type="checkbox"]:checked { background: var(--secondp); }
.switch-label input[type="checkbox"]:checked::before { transform: translateX(20px); }
.switch-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--secondp); outline-offset: 2px; }
.panel-date { font-size: 1.1rem; width: 90px; }
.status { width: 90px; }
.score { display: flex; align-items: center; }

/* Chips */
.feed-chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 6px 8px; border: none; 
    cursor: text; background: #fff; transition: border-color 0.15s ease; }
.feed-chips-input:focus-within { border-color: var(--purp500); outline: none; }
.feed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--purp200); color: var(--purp700); 
    border-radius: 99px; font-size: 1.2rem; font-family: var(--body); font-weight: 600; white-space: nowrap; line-height: 1.6; }
.feed-chip-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; 
    color: var(--purp400); padding: 0; font-size: 1rem; line-height: 1; width: 16px; height: 16px; border-radius: 50%; 
    transition: background 0.15s ease, color 0.15s ease; }
.feed-chip-remove:hover { background: var(--purp400); color: #fff; }
.feed-chip-text-input { border: none; outline: none; flex: 1; min-width: 200px; font-size: 1.3rem; font-family: var(--body); color: var(--neut400); 
    background: transparent; padding: 2px 0; }
.feed-chip-text-input::placeholder { color: var(--neut200); font-style: italic; }

/* Wikipedia autocomplete dropdown (project create) */
.create-project__wiki-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
}
.create-project__wiki-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}
.create-project__wiki-option:hover { background: #f3f4f6; }

/* Notifications */
.uk-notification-message-success { color: var(--secondp)!important; font-size: 16px; font-weight: 700; text-align: center; }
.uk-notification-message-danger { color: var(--secondr)!important; font-size: 16px; font-weight: 700; text-align: center; }
.uk-notification-message-warning { color: var(--secondm)!important; font-size: 16px; font-weight: 700; text-align: center; }