:root {
    /* Theme colors */
    --color-scheme: 0;
    --theme-background-color: 186 21 20;
    --theme-primary-color: 97 13 80;
    --theme-success-color: 140 70 70;
    --theme-warning-color: 40 70 70;
    --theme-error-color: 0 70 60;
    --theme-dimmed-color: 0 0 50;

    /* Layout */
    --container-max-width: 1600px;

    /* Spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;

    /* Typography */
    --font-family-mono: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.122rem;
    --font-size-xl: 1.25rem;

    /* Animation durations */
    --duration-xs: 0.2s;
    --duration-md: 0.5s;
    --duration-lg: 0.8s;

    /* Borders */
    --border-width: 1px;
    --border-radius: 5px;
    --border-color-subtle: rgb(128 128 128 / 0.1); /* TODO: no matching opacity variable */
    --border-color-light: rgb(128 128 128 / 0.15); /* TODO: no matching opacity variable */
    --border-color-medium: rgb(128 128 128 / var(--opacity-muted));
    --border-color-strong: rgb(128 128 128 / var(--opacity-soft));

    /* Opacities */
    --opacity-muted: 0.2;
    --opacity-soft: 0.4;
    --opacity-medium: 0.6;
    --opacity-visible: 0.8;
    --opacity-full: 1;

    /* Backgrounds */
    --bg-subtle: hsl(var(--color-background) / var(--opacity-soft));
    --bg-medium: hsl(var(--color-background) / var(--opacity-medium));
    --bg-strong: hsl(var(--color-background) / var(--opacity-visible));

    /* Status colors */
    --color-primary: hsl(var(--theme-primary-color));
    --color-success: hsl(var(--theme-success-color));
    --color-warning: hsl(var(--theme-warning-color));
    --color-error: hsl(var(--theme-error-color));

}

body {
    /* Derived colors */
    --color-background: hsl(var(--theme-background-color));
    --color-widget-background: hsl(from hsl(var(--theme-background-color)) h s calc(l + 5 - (10 * var(--color-scheme))));
    --color-dimmed: hsl(var(--theme-dimmed-color));

    /* Utility colors */
    --color-text-muted: hsl(var(--theme-dimmed-color) / var(--opacity-soft));
    --color-text-dimmed: hsl(var(--theme-dimmed-color) / var(--opacity-medium));

    background-color: var(--color-background);
    font-size: 13px;
    color: hsl(0, 0%, calc((90% - (80% * var(--color-scheme))) + (10% * var(--color-scheme))));
}

/* Light theme support */
body.light-theme {
    --color-scheme: 1;
    --theme-background-color: 0 0 98;
    --theme-primary-color: 230 100 30;
    --border-color-subtle: rgb(0 0 0 / 0.1); /* TODO: no matching opacity variable */
    --border-color-light: rgb(0 0 0 / 0.15); /* TODO: no matching opacity variable */
    --border-color-medium: rgb(0 0 0 / 0.25); /* TODO: no matching opacity variable */
    --border-color-strong: rgb(0 0 0 / var(--opacity-soft));

    --color-text-muted: rgb(0 0 0 / var(--opacity-soft));
    --color-text-dimmed: rgb(0 0 0 / var(--opacity-medium));
    --color-text-highlight: rgb(0 0 0 / var(--opacity-visible));
    color: hsl(0, 0%, 10%);
}

a {
    color: hsl(var(--theme-primary-color));
    text-decoration: none;
    transition: var(--duration-md);
}

a:hover {
    opacity: var(--opacity-visible);
}

/* Visited link color - only for widgets with visited feature */
.wdg--has-visited a:visited {
    color: var(--color-text-muted);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
}

h1 {
    font-size: var(--font-size-xl);
}

h2 {
    font-size: var(--font-size-md);
}

/* Form inputs with focus states */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
    transition: border-color var(--duration-xs) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: hsl(var(--theme-primary-color));
    box-shadow: 0 0 0 2px hsl(var(--theme-primary-color) / 0.1); /* TODO: no matching opacity variable */
}


/* ==========================================================================
   CSS Reset
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

button {
    cursor: pointer;
}

/* ==========================================================================
   Scrollbars - Discreet thin scrollbars
   ========================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.light-theme * {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

body.light-theme *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

body.light-theme *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   Page Layout
   ========================================================================== */

html {
    font-size: 13px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-mono);
    line-height: 1.4;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#main-content {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header {
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color-medium);
    background: var(--bg-medium);
    margin: var(--spacing-xl) auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.page-title {
    display: none;
}

.header-logo {
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-right: var(--border-width) solid var(--border-color-medium);
    padding: var(--spacing-lg);
}

.header-logo svg {
    height: 2rem;
    width: 2rem;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.page-nav {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    height: 100%;
    flex: 1;
    min-width: 0;
}

.nav-tab {
    display: block;
    line-height: 3rem;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-lg);
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-text-highlight, rgba(255, 255, 255, 0.85));
}

.nav-tab:not(.nav-tab-active):hover {
    opacity: var(--opacity-visible);
}

.nav-tab-active {
    border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   Theme Switcher
   ========================================================================== */

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
    padding-right: var(--spacing-lg);
}

.theme-switch {
    display: flex;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.theme-option {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color-medium);
    padding: var(--spacing-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 32px;
    height: 32px;
    opacity: var(--opacity-medium);
}

.theme-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.theme-option:last-child {
    border-right: none;
}

.theme-option:hover {
    background: var(--bg-subtle);
    opacity: var(--opacity-visible);
}

.theme-option.active {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    opacity: var(--opacity-full);
}

body.light-theme .theme-option.active {
    background: #000;
    color: #fff;
}

/* ==========================================================================
   Column Grid
   ========================================================================== */

.columns {
    display: flex;
    gap: var(--spacing-xl);
}

.col-sm,
.col-md,
.col-full {
    display: grid;
    gap: var(--spacing-xl);
    align-content: start;
}

.col-sm {
    flex: 0 0 24rem;
}

.col-md {
    flex: 0 0 50%;
}

.col-full {
    flex: 1;
}

@media (max-width: 1023px) {
    .columns {
        flex-direction: column;
    }

    .col-sm,
    .col-md,
    .col-full {
        flex: 1;
    }
}

/* ==========================================================================
   Page Variants
   ========================================================================== */

/* Center vertically */
.main-wrapper.center-vertically {
    justify-content: center;
    align-items: center;
}

.main-wrapper.center-vertically #main-content {
    width: 100%;
}

/* Slim page width */
.main-wrapper.page-width-slim #main-content {
    max-width: 1100px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

body.loading #main-content {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--duration-xs);
}

#loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 1rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    font-size: 1.1rem;
    display: none;
    z-index: 1000;
}

body.loading #loading-indicator {
    display: block;
}

.spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    margin-top: auto;
    padding: var(--spacing-xl);
    opacity: var(--opacity-soft);
    text-align: center;
}

.footer-icon {
    width: var(--font-size-xs);
    height: var(--font-size-xs);
    fill: currentColor;
    margin-left: var(--spacing-sm);
    display: inline-block;
}

/* ==========================================================================
   Misc UI Elements
   ========================================================================== */

.show-more-btn {
    display: inline-block;
    margin: 0.5rem 0;
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    cursor: pointer;
    font-size: 1.1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.show-more-btn:hover {
    background: rgba(128, 128, 128, 0.1);
    border-color: rgba(128, 128, 128, 0.3);
}


/* ==========================================================================
   Widget Base Styles - Semantic HTML5 with BEM naming
   ========================================================================== */

.wdg {
    /* Spacing handled by column grid gap */
}

.wdg__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
}

.wdg__title-link {
    text-decoration: none;
    color: inherit;
}

.wdg__title-link:hover {
    text-decoration: underline;
}

.wdg__content {
    padding: var(--spacing-lg);
    background: var(--color-widget-background);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color-medium);
    overflow: auto;
}

.wdg--no-content-wrapper > .wdg__content {
    background: none;
    border: none;
    padding: 0;
}

.wdg__empty {
    padding: var(--spacing-lg);
    text-align: center;
    opacity: var(--opacity-soft);
    font-size: var(--font-size-md);
}

/* ==========================================================================
   Widget Loading State
   ========================================================================== */

.wdg--loading .wdg__content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: var(--spacing-xl);
}

.wdg__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}

.wdg__spinner {
    border: 2px solid var(--color-text-dimmed);
    border-top: 2px solid hsl(var(--theme-primary-color));
    border-radius: 5rem;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
}

.wdg__loading-timer {
    font-size: var(--font-size-xs);
    opacity: var(--opacity-soft);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Widget Refresh Button
   ========================================================================== */

.wdg__refresh {
    background: none;
    border: none;
    opacity: var(--opacity-medium);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdg__refresh-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.wdg__refresh:hover {
    opacity: var(--opacity-full);
}

.wdg__refresh.refreshing {
    animation: spin 1s linear infinite;
}

.wdg__refresh.refreshing::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: hsl(var(--theme-primary-color));
    animation: spin 0.8s linear infinite reverse;
}

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

/* ==========================================================================
   Collapsible Containers
   ========================================================================== */

.collapsible-container:not(.container-expanded) > .collapsible-item {
    display: none;
}

.collapsible-item {
    animation: collapsibleItemReveal 0.25s backwards;
}

@keyframes collapsibleItemReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.expand-toggle-button {
    font: inherit;
    border: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    color: inherit;
    text-transform: uppercase;
    padding-top: var(--spacing-lg);
    background: transparent;
    opacity: var(--opacity-visible);
}

.expand-toggle-button:hover {
    opacity: var(--opacity-full);
}

.expand-toggle-button-icon {
    display: inline-block;
    margin-left: 0.5rem;
}

.expand-toggle-button-icon::before {
    content: '›';
    font-size: 1.2rem;
    transform: rotate(90deg);
    line-height: 1;
    display: inline-block;
}

.expand-toggle-button.container-expanded .expand-toggle-button-icon::before {
    transform: rotate(-90deg);
}

/* ==========================================================================
   Icon Utilities
   ========================================================================== */

/* Icon auto-invert for theme-aware icons */
.icon-auto-invert {
    filter: invert(1);
}

body.light-theme .icon-auto-invert {
    filter: invert(0);
}

/* ==========================================================================
   Visited Link Tracking
   ========================================================================== */

/* Visited link dimming - applies to text and images */
.wdg a.wdg--visited {
    opacity: var(--opacity-soft);
}

.wdg a.wdg--visited:hover {
    opacity: var(--opacity-medium);
}

/* Unread count text - dimmed text in parentheses */
.wdg__unread-count {
    opacity: var(--opacity-medium);
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
    cursor: pointer;
    flex: 1;
}

.wdg__unread-count:hover {
    opacity: var(--opacity-visible);
}

/* ==========================================================================
   Shared Widget Meta Line
   ========================================================================== */

/* Meta line with em dash separators */
.wdg__meta {
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.wdg__meta > *:not(:first-child)::before {
    content: "—";
    margin-right: var(--spacing-sm);
    opacity: var(--opacity-soft);
}

/* ==========================================================================
   Widget Error State
   ========================================================================== */

.widget-error {
    padding: var(--spacing-lg);
    text-align: center;
    opacity: var(--opacity-medium);
}

.widget-error__title {
    font-size: var(--font-size-md);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--color-negative);
}

.widget-error__message {
    font-size: var(--font-size-sm);
    opacity: var(--opacity-soft);
    margin-bottom: var(--spacing-sm);
    word-break: break-word;
}

.widget-error__hint {
    font-size: var(--font-size-xs);
    opacity: var(--opacity-soft);
    text-transform: uppercase;
}


/* Popover styles */
.popover {
    font-size: var(--font-size-sm);
}

.popover .popover-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.popover .popover-row + .popover-row {
    margin-top: var(--spacing-xs);
}

.popover .popover-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    opacity: var(--opacity-medium);
    flex-shrink: 0;
}

.popover .popover-value {
    color: var(--color-text-highlight);
    margin-left: auto;
}

.popover .popover-separator {
    flex: 1;
    border-bottom: 1px dotted var(--border-color-light);
    margin: 0 var(--spacing-xs);
    align-self: center;
}

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

.popover .popover-list li {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.popover .popover-list li + li {
    margin-top: var(--spacing-xs);
}

/* Hide popover content in normal view */
[data-popover-html] {
    display: none;
}




.wdg--repository__container {
    padding: var(--spacing-lg);
    border-bottom: 2px solid rgba(128, 128, 128, 0.1);
}

.wdg--repository__container:last-child {
    border-bottom: none;
}

.wdg--repository__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.wdg--repository__name {
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}

.wdg--repository__name:hover {
    text-decoration: underline;
}

.wdg--repository__stats {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-xs);
}

.wdg--repository__stat {
    opacity: var(--opacity-visible);
}

.wdg--repository__description {
    margin-bottom: 1rem;
    opacity: var(--opacity-visible);
    font-size: var(--font-size-sm);
}

.wdg--repository__section {
    margin-top: 1rem;
}

.wdg--repository__section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    opacity: var(--opacity-medium);
    margin-bottom: var(--spacing-sm);
}

.wdg--repository__item {
    padding: 0.5rem 0;
    border-bottom: var(--border-width) solid var(--border-color-subtle);
}

.wdg--repository__item:last-child {
    border-bottom: none;
}

.wdg--repository__item-title {
    display: block;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.wdg--repository__item-title:hover {
    text-decoration: underline;
}

.wdg--repository__item-meta {
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
}



.wdg--iframe__container {
    width: 100%;
    overflow: hidden;
}

.wdg--iframe__container iframe {
    width: 100%;
    display: block;
    border: none;
    border-radius: var(--border-radius);
}



.wdg--weather__widget {
    padding: 0;
}

.wdg--weather__content {
    padding: var(--spacing-lg);
    text-align: center;
}

.wdg--weather__condition {
    font-size: var(--font-size-xl);
    font-weight: 400;
    margin-bottom: 8px;
    opacity: var(--opacity-visible);
}

.wdg--weather__feels-like {
    font-size: 1.05rem;
    opacity: var(--opacity-medium);
    margin-bottom: var(--spacing-xl);
}

.wdg--weather__hourly-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}

.wdg--weather__column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    width: calc(100% / 12);
    padding-top: 3px;
}

/* Temperature value - hidden by default, shown on hover/current */
.wdg--weather__value {
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: -0.1rem;
    margin-right: 0.1rem;
    position: relative;
    margin-bottom: 0.3rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity .2s, transform .2s;
    user-select: none;
}

/* When not hovering chart: show current column */
.wdg--weather__column--current .wdg--weather__value {
    opacity: 1;
    transform: translateY(0);
}

/* When hovering chart: hide all (including current), only show hovered */
.wdg--weather__hourly-chart:hover .wdg--weather__value {
    opacity: 0;
    transform: translateY(0.5rem);
}

.wdg--weather__hourly-chart:hover .wdg--weather__column:hover .wdg--weather__value {
    opacity: 1;
    transform: translateY(0);
}

.wdg--weather__value::after {
    position: absolute;
    content: '°';
    left: 100%;
    opacity: var(--opacity-medium);
}

.wdg--weather__value--negative::before {
    position: absolute;
    content: '-';
    right: 100%;
}

/* Weather bar */
.wdg--weather__bar,
.wdg--weather__hourly-chart:hover .wdg--weather__bar {
    height: calc(20px + var(--weather-bar-height) * 60px);
    width: 10px;
    background: var(--color-text-muted);
    border: 1px solid var(--border-color-medium);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    mask-image: linear-gradient(0deg, transparent 0, #000 10px);
    transition: background-color .2s, border-color .2s, width .2s;
}

.wdg--weather__column--current .wdg--weather__bar,
.wdg--weather__column:hover .wdg--weather__bar {
    background: var(--color-text-dimmed);
    border-color: var(--border-color-strong);
}

/* Time label - hidden by default, shown on specific columns */
.wdg--weather__time {
    margin-top: 0.3rem;
    font-size: var(--font-size-xs);
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity .2s, transform .2s;
    user-select: none;
}

/* Show time on every 4th column (3rd, 7th, 11th) and current */
.wdg--weather__column:nth-child(3) .wdg--weather__time,
.wdg--weather__column:nth-child(7) .wdg--weather__time,
.wdg--weather__column:nth-child(11) .wdg--weather__time,
.wdg--weather__column--current .wdg--weather__time {
    opacity: 1;
    transform: translateY(0);
}

/* When hovering chart: hide all times, only show hovered */
.wdg--weather__hourly-chart:hover .wdg--weather__time {
    opacity: 0;
    transform: translateY(-0.5rem);
}

.wdg--weather__hourly-chart:hover .wdg--weather__column:hover .wdg--weather__time {
    opacity: 1;
    transform: translateY(0);
}

/* Daylight indicator - single seamless element */
.wdg--weather__daylight {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(0deg, transparent 30px, hsla(50, 50%, 30%, 0.2));
    border-radius: 20px 20px 0 0;
}

/* Rain effect - single seamless element like daylight */
.wdg--weather__rain {
    position: absolute;
    top: 0;
    bottom: 20%;
    overflow: hidden;
    mask-image: linear-gradient(0deg, transparent 40%, #000);
    -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000);
}

.wdg--weather__rain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 5px 5px, hsla(200, 90%, 70%, 0.4) 1px, transparent 0),
        radial-gradient(circle at 10px 10px, hsla(200, 90%, 70%, 0.3) 1px, transparent 0);
    background-size: 10px 10px, 10px 10px;
}

.wdg--weather__location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
    margin-top: 15px;
}

.wdg--weather__location-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    opacity: var(--opacity-medium);
}



.wdg--videos__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wdg--videos__item {
    display: flex;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.wdg--videos__thumbnail-small {
    height: 3rem; /* TODO: no matching spacing variable */
    aspect-ratio: 16 / 8.9;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.wdg--videos__content {
    flex: 1;
    min-width: 0;
}

.wdg--videos__title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wdg--videos__title:hover {
    opacity: var(--opacity-visible);
}

.wdg--videos__meta {
    flex-wrap: nowrap;
}

.wdg--videos__time {
    flex-shrink: 0;
}

.wdg--videos__channel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Horizontal Video Cards */
.wdg--videos__horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.wdg--videos__card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    padding: var(--spacing-lg);
    background: var(--color-widget-background);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color-medium);
    text-decoration: none;
}

.wdg--videos__card:hover {
    opacity: 0.9; /* TODO: no matching opacity variable */
}

.wdg--videos__thumbnail {
    aspect-ratio: 16 / 9;
    width: calc(100% + 2 * var(--spacing-lg));
    margin-top: calc(var(--spacing-lg) * -1);
    margin-left: calc(var(--spacing-lg) * -1);
    max-width: inherit;
    object-fit: cover;
}

.wdg--videos__info {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.wdg--videos__card .wdg--videos__title {
    overflow: hidden;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Collapsed Items */
.collapsed {
    display: none;
}



.wdg--extension {
    padding: 0;
}

.wdg--extension--frameless {
    background: transparent;
    border: none;
}


.wdg--extension__content {
    padding: var(--spacing-lg);
}

.wdg--extension--frameless .wdg--extension__content {
    padding: 0;
}

.wdg--extension__title-link {
    text-decoration: none;
    color: inherit;
}

.wdg--extension__title-link:hover {
    text-decoration: underline;
}

.wdg--extension__loading {
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}



.twitch-channel {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.twitch-channel + .twitch-channel {
    margin-top: 14px;
}

.twitch-channel-avatar-container {
    width: 4.4rem;
    height: 4.4rem;
    border: 2px solid var(--color-text-subdue);
    padding: 2px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.twitch-channel-live .twitch-channel-avatar-container {
    border-color: var(--color-positive);
    margin-bottom: 1rem;
}

.twitch-channel-live .twitch-channel-avatar-container::after {
    content: 'LIVE';
    position: absolute;
    background: var(--color-positive);
    color: var(--color-background);
    font-size: var(--font-size-xs);
    font-weight: 600;
    left: 50%;
    bottom: -35%;
    border-radius: var(--border-radius);
    padding-inline: 0.3rem;
    transform: translateX(-50%);
    border: 2px solid var(--color-background);
}

.twitch-channel-avatar {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.twitch-channel-info {
    min-width: 0;
    flex: 1;
}

.twitch-channel-name {
    font-size: var(--font-size-lg);
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitch-channel-name:hover {
    text-decoration: underline;
}

.twitch-channel-live .twitch-channel-name {
    color: var(--color-text-highlight);
}

.twitch-channel-category {
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: inherit;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: var(--opacity-medium);
}

.twitch-channel-category:hover {
    text-decoration: underline;
}

.twitch-channel-meta {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0 0;
}

.twitch-channel-meta li + li::before {
    content: '•';
    margin-right: 0.5rem;
    opacity: var(--opacity-soft);
}

.twitch-channel-offline {
    font-size: var(--font-size-sm);
    opacity: var(--opacity-medium);
}

.twitch-channel-not-found {
    font-size: var(--font-size-sm);
    color: var(--color-negative);
}



.wdg--reddit__posts {
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

.wdg--reddit__post {
    display: flex;
    gap: var(--spacing-sm);
}

.wdg--reddit__post:last-child {
    border-bottom: none;
}

.wdg--reddit__thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.wdg--reddit__content {
    flex: 1;
}

.wdg--reddit__title {
    display: block;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.wdg--reddit__title:hover {
    text-decoration: underline;
}

.wdg--reddit__score {
    font-weight: 500;
}



/* Vertical list (default) */
.wdg--rss__items {
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}


.wdg--rss__title {
    font-size: var(--font-size-lg);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}



.wdg--rss__feed {
    font-weight: 400;
    opacity: var(--opacity-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Horizontal cards */
.wdg--rss__carousel {
    position: relative;
}

.wdg--rss__cards-horizontal {
    display: flex;
    gap: calc(var(--spacing-lg) * 0.7);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--spacing-sm);
}

.wdg--rss__card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 250px;
    overflow: hidden;
    padding: var(--spacing-lg);
    background: var(--bg-subtle);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color-medium);
}

.wdg--rss__card:hover {
    opacity: 0.9; /* TODO: no matching opacity variable */
}

.wdg--rss__card-image {
    height: var(--rss-thumbnail-height, 10rem);
    width: calc(100% + 2 * var(--spacing-lg));
    margin-top: calc(var(--spacing-lg) * -1);
    margin-left: calc(var(--spacing-lg) * -1);
    max-width: inherit;
    object-fit: cover;
}

.wdg--rss__card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.1);
    color: var(--color-text-subdue, rgba(255, 255, 255, 0.4));
}

.wdg--rss__placeholder-icon {
    width: 3rem; /* TODO: no matching spacing variable */
    height: 3rem; /* TODO: no matching spacing variable */
    fill: currentColor;
}

.wdg--rss__card-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.wdg--rss__card-title {
    display: block;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: auto;
    font-size: 1.1rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.wdg--rss__card-title:hover {
    opacity: var(--opacity-visible);
}

.wdg--rss__card-meta {
    margin-top: 0.7rem;
    font-size: 1rem;
    opacity: var(--opacity-medium);
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.wdg--rss__time {
    flex-shrink: 0;
}

.wdg--rss__channel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Horizontal cards style 2 (background image) */
.wdg--rss__card-2 {
    position: relative;
    height: var(--rss-card-height, 27rem);
    width: 250px;
    overflow: hidden;
}

.wdg--rss__card-2::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        0deg,
        var(--color-widget-background, rgba(0, 0, 0, 0.9)),
        rgba(0, 0, 0, 0.6) 6rem,
        transparent 14rem
    );
    z-index: 2;
}

.wdg--rss__card-2-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9; /* TODO: no matching opacity variable */
    z-index: 1;
}

.wdg--rss__card-2-image.wdg--rss__card-placeholder {
    background: rgba(128, 128, 128, 0.2);
}

.wdg--rss__card-2-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    z-index: 3;
}



.wdg--split-column {
    gap: var(--spacing-xl);
    display: flex;
}

.wdg--split-column__item {
    flex: 1;
}

.wdg--split-column__item .wdg {
    margin: 0;
}



.wdg--monitor__sites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    padding: 0;
}

.wdg--monitor__site {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
}

.wdg--monitor__site--no-icon {
    grid-template-columns: 1fr auto;
}

.wdg--monitor__icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    opacity: var(--opacity-medium);
    transition: opacity var(--duration-md);
}

.wdg--monitor__site:hover .wdg--monitor__icon {
    opacity: var(--opacity-full);
}

.wdg--monitor__info {
    min-width: 0;
}

.wdg--monitor__title {
    text-decoration: none;
    color: inherit;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-md);
    margin-bottom: 0.25rem;
}



.wdg--monitor__status-text--ok {
    color: var(--color-success);
}

.wdg--monitor__status-text--error {
    color: var(--color-error);
}

.wdg--monitor__status {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.wdg--monitor__status svg {
    width: 100%;
    height: 100%;
}

.wdg--monitor__status.up svg {
    fill: var(--color-success);
}

.wdg--monitor__status.down svg {
    fill: var(--color-error);
}

@media (max-width: 768px) {
    .wdg--monitor__sites {
        grid-template-columns: 1fr;
    }
}



.wdg--search__form {
    position: relative;
}

.wdg--search__input {
    width: 100%;
    padding: var(--spacing-xl);
    padding-left: calc(1rem + 31px + var(--spacing-lg));
    border: var(--border-width) solid var(--border-color-medium);
    border-radius: var(--border-radius);
    background: var(--color-widget-background);
    color: inherit;
}

.wdg--search__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(147, 71, 255, 0.1);
}


.wdg--search__button {
    position: absolute;
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: inherit;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--opacity-soft);
    transition: opacity var(--duration-xs) ease;
}

.wdg--search__button:hover {
    opacity: var(--opacity-full);
}

.wdg--search__icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

.wdg--search__bangs {
    display: grid;
    margin: var(--spacing-sm) 0;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}

.wdg--search__bang {
    font-size: var(--font-size-xs);
    display: flex;
    gap: var(--spacing-xs);
}

.wdg--search__bang-shortcut {
    font-weight: 600;
    font-family: var(--font-family-mono);
}



.twitch-category {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.twitch-category + .twitch-category {
    margin-top: 14px;
}

.twitch-category-thumbnail {
    width: 5rem;
    aspect-ratio: 3 / 4;
    border-radius: var(--border-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.twitch-category-info {
    min-width: 0;
    flex: 1;
}

.twitch-category-name {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text-highlight);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitch-category-name:hover {
    text-decoration: underline;
}

.twitch-category-meta {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
}

.twitch-category-meta li + li::before {
    content: '•';
    margin-right: 0.5rem;
    opacity: var(--opacity-soft);
}

.twitch-category-new {
    color: var(--color-primary);
    font-weight: 600;
}

.twitch-category-tags {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.twitch-category-tags li + li::before {
    content: '•';
    margin-right: 0.5rem;
    opacity: var(--opacity-soft);
}

.twitch-category-tags li:first-child {
    flex-shrink: 0;
}

.twitch-category-tags li:not(:first-child) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}



.wdg--group {
    width: 100%;
}

.wdg--group__header {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-separator);
    margin-left: var(--spacing-md);
}

.wdg--group__tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-md);
    text-transform: uppercase;
    color: var(--color-text-base);
    opacity: var(--opacity-medium);
}

.wdg--group__tab-btn:hover {
    opacity: var(--opacity-visible);
    background: var(--bg-subtle);
}

.wdg--group__tab-btn--active {
    opacity: var(--opacity-full);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.wdg--group__tab-title {
    /* Title text in tab button */
}

.wdg--group__tab-unread {
    margin-left: 4px;
    font-size: var(--font-size-sm);
    opacity: var(--opacity-medium);
}

.wdg--group__tab-refresh {
    margin-left: 6px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: var(--opacity-medium);
    cursor: pointer;
    vertical-align: middle;
}

.wdg--group__tab-refresh:hover {
    opacity: var(--opacity-full);
}

.wdg--group__tab-refresh svg {
    width: 14px;
    height: 14px;
}

.wdg--group__content {
    display: none;
}

.wdg--group__content--active {
    display: block;
}

.wdg--group__body {
    width: 100%;
}




.wdg--clock__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wdg--clock__date-section {
    text-align: left;
}

.wdg--clock__time-section {
    text-align: right;
}

.wdg--clock__date, .wdg--clock__main-time {
    font-size: var(--font-size-xl);
}

.wdg--clock__main-time .wdg--clock__seconds {
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
}

.wdg--clock__year {
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
}

.wdg--clock__weekday {
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
}

.wdg--clock__separator {
    margin: 10px 0;
    border: none;
    border-top: 1px solid var(--border-color-subtle);
}

.wdg--clock__timezones {
    display: grid;
    gap: 0.5rem;
}

.wdg--clock__timezone {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wdg--clock__diff {
    flex: 1;
    color: var(--color-text-dimmed);
    font-size: var(--font-size-sm);
}

.wdg--clock__time {
    font-size: var(--font-size-md);
    text-align: right;
}



.wdg--hackernews__stories {
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

.wdg--hackernews__story {
    display: flex;
    flex-direction: column;
}

.wdg--hackernews__title {
    display: block;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.wdg--hackernews__title:hover {
    text-decoration: underline;
}

.wdg--hackernews__score {
    font-weight: 500;
}

.wdg--hackernews__comments {
    text-decoration: none;
}

.wdg--hackernews__comments:hover {
    text-decoration: underline;
}



.server {
    gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.server-info {
    align-items: center;
    display: flex;
    gap: 1.5rem;
}

.server-details {
    min-width: 0;
    flex-grow: 1;
}

.server-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-highlight);
}

.server-uptime {
    font-size: var(--font-size-sm);
    opacity: var(--opacity-medium);
}

.server-icon {
    height: calc(var(--font-size-md) * 3);
    width: calc(var(--font-size-md) * 3);
    stroke: var(--color-primary);
}

.server-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.server-stat {
    flex: 1;
    min-width: 0;
}

.server-stat-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.server-stat-label {
    opacity: var(--opacity-medium);
}

.server-stat-value {
    color: var(--color-text-highlight);
    font-weight: 500;
}

.server-stat-value .unit {
    color: var(--color-text-base);
    opacity: var(--opacity-medium);
}

.progress-bar {
    height: 8px;
    background: var(--bg-medium);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar-combined {
    display: flex;
    gap: 2px;
}

.progress-value {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-value-notice {
    background: var(--color-negative);
}








.wdg--releases__list {
    padding: 0 1rem 1rem;
}

.wdg--releases__item {
    padding: 0.75rem 0;
    border-bottom: var(--border-width) solid var(--border-color-subtle);
}

.wdg--releases__item:last-child {
    border-bottom: none;
}

.wdg--releases__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 0.25rem;
}

.wdg--releases__name {
    font-weight: 500;
    text-decoration: none;
}

.wdg--releases__name:hover {
    text-decoration: underline;
}

.wdg--releases__tag {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius);
    background: var(--bg-subtle);
    font-family: var(--font-family-mono);
}




.wdg--markets,
.wdg--stocks {
    padding: 0;
}

.wdg--markets__list,
.wdg--stocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wdg--markets__item,
.wdg--stocks__item {
    display: grid;
    grid-template-columns: 1fr auto 90px;
    gap: 15px;
    align-items: center;
}

.wdg--markets__identity,
.wdg--stocks__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wdg--markets__symbol,
.wdg--stocks__symbol {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-base);
}

.wdg--markets__name,
.wdg--stocks__name {
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
}

.wdg--markets__sparkline,
.wdg--stocks__sparkline {
    display: flex;
    align-items: center;
    opacity: var(--opacity-medium);
}

.sparkline {
    display: block;
}

.sparkline polyline {
    color: var(--color-text-base);
}

.wdg--markets__data,
.wdg--stocks__data {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.wdg--markets__change,
.wdg--stocks__change {
    font-size: 1.05rem;
    font-weight: 500;
}

.wdg--markets__change--positive,
.wdg--stocks__change--positive {
    color: var(--color-success);
}

.wdg--markets__change--negative,
.wdg--stocks__change--negative {
    color: var(--color-error);
}

.wdg--markets__price,
.wdg--stocks__price {
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
}

.wdg--markets__loading,
.wdg--stocks__loading {
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}



.wdg--change-detection {
    padding: 0;
}

.wdg--change-detection__list {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wdg--change-detection__item {
    padding: 10px 0;
    border-bottom: var(--border-width) solid var(--border-color-subtle);
}

.wdg--change-detection__item:last-child {
    border-bottom: none;
}

.wdg--change-detection__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.wdg--change-detection__title {
    font-size: var(--font-size-md);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text-base);
}

.wdg--change-detection__title:hover {
    text-decoration: underline;
}

.wdg--change-detection__status {
    font-size: var(--font-size-md);
    padding: 3px var(--spacing-sm);
    border-radius: var(--border-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.wdg--change-detection__status--changed {
    background: var(--color-warning);
    color: #D4AF7A;
}

.wdg--change-detection__status--unchanged {
    background: var(--bg-subtle);
    color: var(--color-text-dimmed);
}

.wdg--change-detection__status--paused {
    background: var(--bg-subtle);
    color: var(--color-text-muted);
}

.wdg--change-detection__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-md);
    opacity: var(--opacity-medium);
    gap: var(--spacing-md);
}

.wdg--change-detection__url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdg--change-detection__checked {
    flex-shrink: 0;
}

.wdg--change-detection__empty {
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}



.wdg--bookmarks__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.wdg--bookmarks__column {
    display: flex;
    flex-direction: column;
}

.wdg--bookmarks__column > div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.wdg--bookmarks__group-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    opacity: var(--opacity-visible);
    color: hsl(var(--theme-primary-color));
}

.wdg--bookmarks__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: inherit;
}


.wdg--bookmarks__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.wdg--bookmarks__arrow {
    width: 12px;
    height: 12px;
    fill: currentColor;
    opacity: var(--opacity-soft);
    flex-shrink: 0;
}

.wdg--bookmarks__link:hover .wdg--bookmarks__arrow {
    opacity: var(--opacity-full);
}



.wdg--todo__input-container {
    position: relative;
    margin-bottom: 1rem;
}

.wdg--todo__input {
    width: 100%;
    padding: 0 0 0 calc(1rem + var(--spacing-sm));
    border: none;
    font-size: var(--font-size-sm);
    background: transparent;
    color: inherit;
}

.wdg--todo__add-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    line-height: 1;
    width: var(--spacing-lg);
    color: var(--text-muted);
}

.wdg--todo__add-btn:hover {
    color: var(--text-base);
}

.wdg--todo__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.wdg--todo__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wdg--todo__checkbox {
    cursor: pointer;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color-medium);
    border-radius: 3px;
    background: var(--bg-base);
    position: relative;
    flex-shrink: 0;
}

.wdg--todo__checkbox:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.wdg--todo__checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    line-height: 1;
}

.wdg--todo__text {
    flex: 1;
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.wdg--todo__text-input {
    flex: 1;
    font-size: var(--font-size-sm);
    padding: 2px 4px;
    border: 1px solid var(--border-color-medium);
    border-radius: 3px;
    background: var(--bg-base);
    color: inherit;
    font-family: inherit;
}

.wdg--todo__item--completed .wdg--todo__text {
    text-decoration: line-through;
    opacity: var(--opacity-soft);
}

.wdg--todo__delete-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: opacity var(--duration-xs) ease;
}

.wdg--todo__item:hover .wdg--todo__delete-btn {
    opacity: 1;
}

.wdg--todo__delete-btn:hover {
    color: #ef4444;
}



.wdg--lobsters__stories {
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

.wdg--lobsters__story {
    display: flex;
    flex-direction: column;
}

.wdg--lobsters__title {
    display: block;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.wdg--lobsters__title:hover {
    text-decoration: underline;
}

.wdg--lobsters__tags {
    margin-bottom: 0.25rem;
}

.wdg--lobsters__tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius);
    background: var(--bg-subtle);
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.wdg--lobsters__score {
    font-weight: 500;
}

.wdg--lobsters__comments {
    text-decoration: none;
}

.wdg--lobsters__comments:hover {
    text-decoration: underline;
}



.wdg--dns-stats {
    padding: 0;
}

.wdg--dns-stats__content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.wdg--dns-stats__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.wdg--dns-stats__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wdg--dns-stats__label {
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: var(--opacity-medium);
}

.wdg--dns-stats__value {
    font-size: var(--font-size-xl);
    font-weight: 600;
    font-family: var(--font-family-mono);
}

.wdg--dns-stats__value--blocked {
    color: #D4AF7A;
}

.wdg--dns-stats__value--percent {
    color: var(--color-primary);
}

.wdg--dns-stats__graph {
    margin-bottom: 15px;
}

.wdg--dns-stats__graph-bar {
    width: 100%;
    height: 20px;
    background: var(--bg-medium);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: var(--border-width) solid var(--border-color-light);
}

.wdg--dns-stats__graph-blocked {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--border-radius);
}

.wdg--dns-stats__top-domains {
    margin-top: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    padding-top: 15px;
}

.wdg--dns-stats__domains-header {
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: var(--opacity-visible);
    margin-bottom: 10px;
    font-weight: 500;
}

.wdg--dns-stats__domain-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.wdg--dns-stats__domain-item:last-child {
    border-bottom: none;
}

.wdg--dns-stats__domain-name {
    font-size: var(--font-size-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.wdg--dns-stats__domain-count {
    font-size: var(--font-size-md);
    font-weight: 500;
    opacity: var(--opacity-medium);
    margin-left: 12px;
    font-family: var(--font-family-mono);
}

.wdg--dns-stats__loading {
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}



.wdg--custom-api {
    padding: 0;
}

.wdg--custom-api__content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    overflow-x: auto;
}

.wdg--custom-api__json {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-md);
    line-height: 1.6;
    margin: 0;
    white-space: pre;
    color: var(--color-text-base);
}

.wdg--custom-api__json .wdg--custom-api__key {
    color: var(--color-primary);
    font-weight: 500;
}

.wdg--custom-api__json .wdg--custom-api__string {
    color: #D4AF7A;
}

.wdg--custom-api__json .wdg--custom-api__number {
    color: #89ddff;
}

.wdg--custom-api__json .wdg--custom-api__bool {
    color: #c792ea;
}

.wdg--custom-api__json .wdg--custom-api__null {
    color: #808080;
    opacity: var(--opacity-medium);
}

.wdg--custom-api__loading {
    padding: var(--spacing-xl);
    text-align: center;
    opacity: var(--opacity-medium);
}



.wdg--calendar__widget {
    padding: 0;
}

.wdg--calendar__container {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.wdg--calendar__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: 12px;
    border-bottom: var(--border-width) solid var(--border-color-subtle);
}

.wdg--calendar__month-year {
    display: flex;
    gap: var(--spacing-sm);
    align-items: baseline;
}

.wdg--calendar__month-name {
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--color-text-base);
}

.wdg--calendar__year {
    font-size: var(--font-size-xl);
    font-weight: 400;
    opacity: var(--opacity-visible);
}

.wdg--calendar__controls {
    display: flex;
    align-items: center;
}

.wdg--calendar__nav-btn, .wdg--calendar__return-btn {
    border: none;
    padding: var(--spacing-xs);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
}

.wdg--calendar__nav-btn:hover, .wdg--calendar__return-btn:hover {
    background: var(--bg-subtle);
}

.wdg--calendar__current-day {
    font-size: var(--font-size-md);
    font-weight: 500;
    min-width: 24px;
    text-align: center;
    color: var(--color-text-base);
}

.wdg--calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.wdg--calendar__day-name {
    text-align: center;
    font-size: var(--font-size-xs);
    opacity: var(--opacity-medium);
}

.wdg--calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.wdg--calendar__day--current-month {
    opacity: var(--opacity-full);
}

.wdg--calendar__day--other-month {
    opacity: var(--opacity-soft);
}

.wdg--calendar__day--today {
    background: var(--color-text-muted);
    color: var(--color-primary);
    font-weight: 500;
}

.wdg--calendar__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}


/* Custom CSS from style.css */
.content-bounds {
  max-width: 2000px;
}
.list-gap-14 {
  --list-half-gap: 0.4rem;
}
.page-column-small {
  width: 400px;
}