/* Bundled Assets */
/* Bundled by: me! :3 */

/* === main.css === */
:root{
    --bg: #020304;
    --bg-2: #050709;
    --bg-3: #08090c;
    --paper: #040608;

    --ink: #e8eef5;
    --ink-2: #a8b4c0;
    --muted: #5a6a7a;

    --accent: #4d9fff;
    --accent-2: #b055ff;

    --good: #10d060;
    --warn: #f0b020;
    --bad: #f04040;

    --edge-0: rgba(255, 255, 255, .008);
    --edge-1: rgba(255, 255, 255, .015);
    --edge-2: rgba(255, 255, 255, .025);

    --shadow: 0 2px 8px rgba(0, 0, 0, .3);

    --radius: 8px;
    --radius-lg: 12px;

    --gap: 3px;
    --left-col: 380px;
    --col-min: 280px;

    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto,
    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

    --btn-red: #f03030;
    --btn-yellow: #f0a010;
    --btn-green: #10d060;

    --dock-reserve: 96px;
    --dock-reserve-player: 180px;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--edge-2) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--edge-2) 100%, var(--muted) 30%);
    border-radius: 8px;
    border: 2px solid var(--bg);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

*{box-sizing:border-box}
html,body{height:100%;width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    margin: 0;
    background: var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    font-family:var(--font);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    opacity: .85;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

*:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
    outline-offset: 2px;
}

.status-indicator {
    --s: 10px;
    display: inline-block;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    margin-right: 6px;
    background: #444;
    border: 2px solid rgba(0, 0, 0, .4);
    vertical-align: middle;
    cursor: default;
}

.status-online {
    background: var(--good);
    box-shadow: 0 0 6px var(--good);
}

.status-online:hover {
    cursor: pointer;
}

.status-loading {
    background: var(--warn);
    box-shadow: 0 0 6px var(--warn);
}

.status-offline {
    background: var(--bad);
    box-shadow: 0 0 6px var(--bad);
}

.btn, .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--edge-2);
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease;
}

.btn:hover, .icon-btn:hover {
    background: linear-gradient(180deg, color-mix(in oklch, var(--bg-3) 70%, var(--accent)), var(--bg-2));
    border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}

.btn:active, .icon-btn:active {
    transform: none;
}

.icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
}

.toast-root {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 40px);
}

.toast {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    transform: translateX(420px);
    transition: transform .2s ease;
    max-width: 320px;
    border: 1px solid var(--edge-1);
}
.toast.in{transform:translateX(0)}

.ripple-host{position:relative;overflow:hidden}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    pointer-events: none;
    transform: scale(0);
    animation: ripple-animation .5s ease-out;
}

@keyframes ripple-animation {
    0% {
        transform: scale(0);
        opacity: .5;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px clamp(12px, 3vw, 28px);
    padding-bottom: var(--dock-reserve);
}

body:has(#custom-music-player:not([style*="none"])) .container {
    padding-bottom: var(--dock-reserve-player);
}

[class$="-section"]{
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px var(--edge-0);
}

[class$="-section"] .plugin__inner {
    padding: 14px 14px 20px;
}

.js .container{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    align-items: stretch;
}

.js .container > .profile-section {
    position: relative;
    width: 100%;
    align-self: flex-start;
    margin: 0 0 calc(var(--gap) * 2) 0;
}

.js .mosaic > .profile-section {
    width: auto;
    margin: 0;
    align-self: start;
    min-height: 0;
}

.mosaic-prebaked > .profile-section,
.mosaic-prebaked > .profile-section > .plugin__inner {
    overflow: visible;
    max-height: none;
}

.js .mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 1px;
    row-gap: 0;
    column-gap: 12px;
    width: 100%;
    align-items: start;
    padding-bottom: 48px;
    overflow-x: clip;
}

.plugin {
    background: linear-gradient(180deg, rgba(255, 255, 255, .004), var(--bg-3));
    border-radius: var(--radius);
    border: 1px solid var(--edge-0);
    position: relative;
    min-height: 120px;
    height: auto;
    align-self: start;
    overflow: visible;
    contain: layout style;
    will-change: auto;
}

.plugin.is-front {
    z-index: 1500;
}

.plugin:hover {
    border-color: var(--edge-2);
}

.profile-section {
    background: linear-gradient(180deg, var(--paper) 0%, var(--bg-2) 100%);
    border-radius: var(--radius-lg);
    padding: 18px;
    border: 1px solid var(--edge-0);
    margin-bottom: 20px;
    min-height: 200px;
}

.profile-content {
    gap: 14px;
    display: flex;
    align-items: center;
}

.profile-text {
    flex: 1;
    min-width: 0;
}

.profile-name {
    margin: .25rem 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
}

.profile-titles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: .25rem 0 .5rem;
}

.profile-title, .profile-subtitle {
    flex: 0 1 auto;
    min-width: 0;
}

.profile-title {
    font-weight: 700;
    color: var(--ink-2);
}

.profile-subtitle {
    font-weight: 700;
    color: var(--accent);
}

.profile-bio {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
}

.profile-image img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--edge-0);
}

@media (max-width: 520px) {
    .profile-titles {
        flex-direction: column;
        gap: 4px;
    }

    .profile-title, .profile-subtitle {
        width: 100%;
    }
}

.plugin__inner {
    padding: 14px 14px 20px;
    display: flow-root;
    overflow: visible;
}

.meme-section .plugin__inner img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 440px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
}

.plugin.is-collapsed .plugin__inner > *:not(.plugin-header) {
    display: none;
}
.plugin[data-w="2"]{grid-column:span 2}
.plugin[data-w="3"]{grid-column:span 3}

.plugin-header{
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 6px 16px 6px 54px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .2));
    box-shadow: inset 0 -1px 0 var(--edge-1);
    min-height: 30px;
}

.plugin-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--ink-2);
}

.plugin-toolbar {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.plugin-btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
    cursor: pointer;
    transition: transform .1s ease;
}

.plugin-btn:hover {
    transform: scale(1.15);
}

.plugin-header:hover .plugin-btn,
.plugin-btn:hover,
.plugin-btn:focus-visible {
    font-size: 9px;
}

.plugin-btn[data-action="collapse"] {
    background: linear-gradient(180deg, #ff5f56, #e53935);
}

.plugin-btn[data-action="w-dec"] {
    background: linear-gradient(180deg, #ffbd2e, #f9a825);
}

.plugin-btn[data-action="w-inc"] {
    background: linear-gradient(180deg, #27c93f, #1b9e2e);
}

.plugin-btn[data-action="expand"] {
    background: linear-gradient(180deg, var(--accent), #2979ff);
}

.plugin-btn[data-action="view"] {
    background: linear-gradient(180deg, var(--accent-2), #9c27b0);
}

@media (max-width: 780px) {
    .plugin-toolbar {
        display: none;
    }
}

.drag-handle{cursor:grab}

.dragging-cursor,
.plugin.dragging .drag-handle {
    cursor: grabbing;
}

.drag-proxy {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: var(--radius);
    overflow: hidden;
}
.plugin.dragging{opacity:.35}

.plugin-placeholder {
    visibility: visible;
    opacity: .2;
    background: var(--edge-0);
    border: 2px dashed var(--edge-1);
}
.plugin-overlay{
    position: fixed;
    inset: 0;
    display: flex;
    place-items: center;
    background: rgba(3, 5, 8, .92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
    z-index: 1000000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.plugin-overlay.in {
    opacity: 1;
    pointer-events: auto;
}

.plugin--expanded {
    width: min(1100px, 92vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--edge-1);
    margin: auto;
    transform: translateZ(0);
}

.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 999999;
    width: max-content;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--paper);
    border: 1px solid var(--edge-1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    will-change: transform;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.tech-filter-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    border-radius: var(--radius);
    padding: 12px 16px;
    border: 1px solid var(--edge-1);
    z-index: 9999999;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.tech-filter-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.tech-filter-popup .filter-icon {
    font-size: 16px;
    color: var(--accent);
}

.tech-filter-popup .filter-text {
    font-weight: 600;
    color: var(--ink-2);
}

.tech-filter-popup .filter-tech {
    color: var(--accent);
    font-weight: 700;
}

.tech-filter-popup .clear-filter-btn {
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bad);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s ease;
}

.tech-filter-popup .clear-filter-btn:hover {
    background: #dc2626;
}

.plugin-header {
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    :root {
        --col-min: 300px;
    }
}
@media (max-width:1200px){
    :root {
        --col-min: 260px;
    }
    .plugin[data-w="3"]{grid-column:span 2}
}
@media (max-width:900px){
    :root {
        --col-min: 240px;
        --gap: 3px;
    }
}
@media (max-width:780px){
    :root {
        --dock-reserve: 84px;
        --dock-reserve-player: 210px;
    }

    .js .container{
        gap: calc(var(--gap) * 1.2);
        padding:16px;
        padding-bottom: var(--dock-reserve);
    }

    body:has(#custom-music-player:not([style*="none"])) .js .container {
        padding-bottom: var(--dock-reserve-player);
    }

    .js .profile-section {
        position:static;
        max-width:100%;
        margin-bottom:var(--gap);
    }

    :root {
        --col-min: 220px;
    }

    .js .mosaic {
        grid-template-columns:repeat(auto-fill, minmax(var(--col-min), 1fr));
        grid-auto-rows:1px;
    }
    .plugin[data-w]{grid-column:span 1}
    .plugin__inner{padding:12px 12px 16px}

    .plugin-toolbar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .drag-handle {
        cursor: default;
        -webkit-user-select: auto;
        user-select: auto;
    }

    .plugin-header {
        cursor: default;
        padding-left: 16px;
    }
}
@media (max-width:520px){
    .container{padding:12px;padding-bottom:var(--dock-reserve)}
    .plugin-header{padding:8px 10px;margin:0 0 8px}

    :root {
        --col-min: 160px;
        --gap: 3px;
    }
}

@media (prefers-color-scheme: light){
    :root {
        --bg: #f8f9fa;
        --bg-2: #f0f1f3;
        --bg-3: #e8eaed;
        --paper: #ffffff;
        --ink: #1a1f26;
        --ink-2: #4a5568;
        --muted: #718096;
        --accent: #2563eb;
        --accent-2: #7c3aed;
        --good: #16a34a;
        --warn: #ca8a04;
        --bad: #dc2626;
        --edge-0: rgba(0, 0, 0, .04);
        --edge-1: rgba(0, 0, 0, .08);
        --edge-2: rgba(0, 0, 0, .12);
        --shadow: 0 1px 3px rgba(0, 0, 0, .06);
        --btn-red: #ef4444;
        --btn-yellow: #eab308;
        --btn-green: #22c55e;
    }

    body {
        background: var(--bg);
    }

    a {
        color: var(--accent);
    }

    a:hover {
        color: color-mix(in oklch, var(--accent) 85%, black);
    }

    .btn, .icon-btn {
        background: var(--paper);
        color: var(--ink);
        border: 1px solid var(--edge-1);
    }

    .btn:hover, .icon-btn:hover {
        background: var(--bg-2);
        color: var(--ink);
    }

    .plugin {
        background: var(--paper);
        border: 1px solid var(--edge-1);
    }

    .plugin-header {
        background: linear-gradient(180deg, rgba(0, 0, 0, .01), transparent);
    }

    .profile-section {
        background: var(--paper);
    }

    .toast {
        background: var(--paper);
        border: 1px solid var(--edge-1);
    }

    .status-bar {
        background: var(--paper);
        border: 1px solid var(--edge-1);
    }

    .plugin-overlay {
        background: rgba(248, 249, 250, .92);
    }

    .plugin-btn {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .plugin-btn[data-action="collapse"] {
        background: linear-gradient(180deg, #ff5f56, #e53935);
    }

    .plugin-btn[data-action="w-dec"] {
        background: linear-gradient(180deg, #ffbd2e, #f9a825);
    }

    .plugin-btn[data-action="w-inc"] {
        background: linear-gradient(180deg, #27c93f, #1b9e2e);
    }

    .plugin-btn[data-action="expand"] {
        background: linear-gradient(180deg, #2563eb, #1d4ed8);
    }

    .plugin-btn[data-action="view"] {
        background: linear-gradient(180deg, #7c3aed, #6d28d9);
    }
}

body.scroll-locked {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    width: 100%;
}

.custom-music-player{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent) 10%, var(--bg-3)) 0%,
    color-mix(in oklch, var(--accent-2) 8%, var(--bg-3)) 100%);
    border-radius: 10px;
    margin-top: 12px;
    border: 1px solid var(--edge-0);
}
.player-artwork-mini{
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.player-artwork-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
}
.player-track-name{
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom:2px;
}
.player-artist-name{
    font-size: 12px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-progress-container {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}
.player-progress-bar{
    width: 100%;
    height: 5px;
    background: var(--bg);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.player-progress-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: 3px;
    width: 0%;
    transition: width .1s linear;
    position:relative;
}
.player-time{
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.player-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.player-btn{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-3);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    border: 1px solid var(--edge-0);
}
.player-btn:hover{
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}
.player-btn:active{transform:scale(.95)}

#player-play-pause{
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: white;
    border: none;
}
#player-play-pause:hover{
    background: color-mix(in oklch, var(--accent) 85%, white);
}
.player-volume{
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg);
    border-radius: 2px;
    outline: none;
}
.player-volume::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition:transform .15s ease;
}
.player-volume::-webkit-slider-thumb:hover{transform:scale(1.2)}
.player-volume::-moz-range-thumb{
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition:transform .15s ease;
}
.player-volume::-moz-range-thumb:hover{transform:scale(1.2)}

.play-btn-large{
    width: 60px !important;
    height: 60px !important;
    background: var(--accent) !important;
}
.play-btn-large:hover{
    background: color-mix(in oklch, var(--accent) 85%, white) !important;
}

#lastfm-audio-element{display:none}

@media (max-width:900px){
    .custom-music-player {
        flex-wrap: wrap;
        gap: 10px;
    }

    .player-progress-container {
        order: 4;
        width: 100%;
        max-width: none;
    }
    .player-volume{width:60px}
}
@media (max-width:520px){
    .player-artwork-mini {
        width: 40px;
        height: 40px;
    }
    .player-track-name{font-size:13px}
    .player-artist-name{font-size:11px}

    .player-btn {
        width: 30px;
        height: 30px;
    }

    #player-play-pause {
        width: 34px;
        height: 34px;
    }
    .player-volume{display:none}
}

.plugin.profile-section {
    border-radius: var(--radius-lg);
    background: linear-gradient(
            180deg,
            color-mix(in oklab, var(--paper) 92%, transparent) 0%,
            var(--paper) 100%
    );
}

.profile-section .plugin__inner {
    padding: 0;
}

.status-separator {
    color: var(--muted);
    margin: 0 4px;
}

.potato-toggle {
    background: transparent;
    border: 1px solid var(--edge-1);
    border-radius: 6px;
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.12s ease, transform 0.12s ease;
}

.potato-toggle:hover {
    background: var(--bg-3);
    transform: scale(1.1);
}

.potato-toggle.active {
    background: var(--accent);
    border-color: var(--accent);
}

.mosaic-prebaked {
    grid-auto-rows: 1px !important;
}

.mosaic-prebaked > .plugin {
    overflow: visible;
    contain: layout style;
}

.mosaic-prebaked > .plugin > .plugin__inner {
    max-height: none;
    overflow: visible;
}

.mosaic-prebaked > .profile-section > .plugin__inner,
.mosaic-prebaked > .visitors-section > .plugin__inner {
    max-height: none;
    overflow: visible;
}

.js .mosaic {
    padding-bottom: 12px;
}

.js .container > .projects-section {
    display: block;
    position: relative;

    /* Opaque, stacked above the mosaic: the projects tail is a flex sibling
       after .mosaic, so if any mosaic item's content ever spills past the grid
       box (e.g. a first-paint flash where server-measured heights differ from
       the device's font metrics), it must not show through the tail. Matches
       the page background, so there is no visual change when nothing spills. */
    background: var(--bg);
    z-index: 1;

    width: 100%;
    max-width: none;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 24px;
    align-self: stretch;

    grid-column: auto !important;
    grid-row: auto !important;
}

.js .container > .projects-section .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.js .container > .projects-section .plugin-header {
    cursor: default;
}

.js .container > .projects-section .plugin-toolbar {
    display: none !important;
}

.music-mini-player {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 64px;
    z-index: 999998;
    width: min(520px, calc(100vw - 24px));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

/* === plugin-beatleader.css === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .2s ease;
    min-height: 80px;
}

/* stat cards that link to the BeatLeader profile keep the plain card look */
a.stat-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat-item:hover {
    border-color: var(--edge-1);
}

.stat-label {
    font-weight: 700;
    font-size: 11px;
    color: var(--ink-2);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-value {
    font-weight: 800;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    color: var(--accent);
    white-space: nowrap;
    line-height: 1;
}

.maps-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.map-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .15s ease;
    position: relative;
    cursor: pointer;
}

.map-item:hover {
    border-color: var(--edge-1);
}

.map-item[style*="cursor: pointer"]:hover {
    border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}

.map-cover {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.map-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.map-name {
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ink);
}

.map-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--muted);
    font: 11px/1.2 var(--mono);
    align-items: center;
}

.map-stats span {
    background: rgba(255, 255, 255, .04);
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.replay-indicator {
    background: var(--accent);
    color: white;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.beatleader-section h4 {
    margin: 16px 0 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-profile-btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s ease;
    border: none;
}

.view-profile-btn:hover {
    background: color-mix(in oklch, var(--accent) 85%, white);
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .maps-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-item {
        padding: 12px 10px;
        min-height: 70px;
    }

    .maps-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 10px;
    }

    .map-cover {
        width: 44px;
        height: 44px;
    }

    .map-name {
        font-size: 12px;
    }
}

/* === plugin-bike.css === */
.bike-section .plugin-header { box-shadow: none; border: none }

.bike-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bike-stat {
    flex: 1 1 0;
    min-width: 80px;
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .15s ease;
}

.bike-stat:hover { border-color: var(--edge-1) }

.bike-stat-value {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--mono);
    color: #ff8c42;
    line-height: 1;
    margin-bottom: 4px;
}

.bike-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.bike-map-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--edge-0);
    margin-bottom: 12px;
}

.bike-map {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--bg-2);
}

.bike-map-container .map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bike-map-container .map-control-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(10, 10, 12, .92);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bike-map-container .map-control-btn svg { display: block }

.bike-map-container .map-control-btn:hover {
    background: rgba(24, 24, 28, .98);
}

.bike-map-container .map-control-btn[aria-pressed="true"] {
    color: #ff8c42;
    border-color: rgba(255, 140, 66, .55);
}

.bike-map-container .map-control-btn.is-unavailable {
    color: rgba(255, 255, 255, .38);
}

.bike-map-toast {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 8px);
    z-index: 1100;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(10, 10, 12, .95);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.bike-map-toast.in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bike-speed-legend {
    position: absolute;
    left: 10px;
    bottom: 14px;
    z-index: 1000;
    width: min(220px, 60%);
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(10, 10, 12, .88);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.bike-speed-legend[hidden] { display: none }

.bike-speed-legend__label {
    font: 700 9px/1 var(--mono);
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.bike-speed-legend__bar {
    height: 8px;
    border-radius: 4px;
    background: #333;
}

.bike-speed-legend__ticks {
    display: flex;
    justify-content: space-between;
    font: 600 9px/1 var(--mono);
    color: rgba(255, 255, 255, .65);
}

.bike-hover-dot {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.bike-hover-dot span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 3px;
    border-radius: 50%;
    background: #ff8c42;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .55);
}

.bike-profile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--edge-0);
    background: rgba(255, 255, 255, .012);
}

.bike-profile[hidden] { display: none }

.bike-profile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.bike-profile-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bike-profile-readout {
    font: 600 11px/1.2 var(--mono);
    color: #ff8c42;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bike-profile-chart {
    width: 100%;
    height: 150px;
    cursor: crosshair;
    touch-action: none;
}

.bike-profile-svg {
    display: block;
    width: 100%;
    height: 150px;
    overflow: visible;
}

.bike-profile-grid {
    stroke: var(--edge-1);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.bike-profile-axis {
    fill: var(--muted);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
}

.bike-profile-cursor {
    stroke: var(--ink-2);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.bike-profile-dot {
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.bike-arrow {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    overflow: visible !important;
    width: 14px !important;
    height: 14px !important;
}

.bike-arrow svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.bike-map-container .map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-2);
    z-index: 1200;
    transition: opacity .3s ease;
}

.bike-map-container .map-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.bike-rides-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 280px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--edge-2) transparent;
    padding-right: 4px;
    scroll-behavior: smooth;
}

.bike-rides-list::-webkit-scrollbar { width: 4px }
.bike-rides-list::-webkit-scrollbar-track { background: transparent }
.bike-rides-list::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 2px }

/* Mobile: the rides list is collapsed by default (JS controls its height and
   overflow inline) so it doesn't trap page scrolling; this styles the toggle. */
.bike-rides-toggle {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-3);
    border: 1px solid var(--edge-0);
    border-radius: 8px;
    color: var(--ink-2);
    font: 600 12px/1 var(--mono);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.bike-rides-toggle:hover { border-color: var(--edge-2); color: var(--ink); }

.bike-ride-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--edge-0);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    flex-shrink: 0;
}

.bike-ride-item:hover,
.bike-ride-item.active {
    border-color: var(--edge-2);
    background: rgba(255, 140, 66, .04);
}

.bike-ride-color {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
    background: #ff8c42;
}

.bike-ride-info {
    flex: 1;
    min-width: 0;
}

.bike-ride-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bike-ride-date {
    font-size: 10px;
    color: var(--muted);
    font-family: var(--mono);
}

.bike-ride-chips {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.bike-chip {
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 140, 66, .08);
    color: #ff8c42;
    white-space: nowrap;
}

.bike-toggle-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--ink-2);
    opacity: 0.7;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: opacity .15s ease, background .15s ease;
}

.bike-toggle-btn:hover {
    opacity: 1;
    background: var(--edge-1);
}

.bike-toggle-btn[aria-pressed="true"] {
    opacity: 0.3;
}

.bike-ride-item.ride-hidden {
    opacity: 0.45;
}

.bike-ride-sparkline {
    margin-top: 3px;
    height: 24px;
    width: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.bike-ride-sparkline svg {
    display: block;
}

.bike-map-container:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    border: none;
    background: var(--bg-2);
}

.bike-map-container:fullscreen .bike-map {
    width: 100%;
    height: 100%;
}

@media (max-width: 780px) {
    .bike-stats { gap: 6px }
    .bike-stat { padding: 10px 6px; min-width: 60px }
    .bike-stat-value { font-size: 15px }
    .bike-map-container { height: 240px }
    .bike-ride-chips { flex-wrap: wrap }
    .bike-profile-chart, .bike-profile-svg { height: 120px }
    .bike-speed-legend { width: min(180px, 70%) }
}

@media (max-width: 520px) {
    .bike-map-container { height: 200px }
    .bike-ride-item { flex-wrap: wrap; gap: 6px }
    .bike-ride-chips { width: 100% }
    .bike-profile-readout { font-size: 10px }
}

@media (prefers-color-scheme: light) {
    .bike-stat-value { color: #d96a1e }
    .bike-chip { background: rgba(217, 106, 30, .08); color: #d96a1e }
    .bike-ride-item:hover,
    .bike-ride-item.active { background: rgba(217, 106, 30, .04) }
    .bike-profile { background: rgba(0, 0, 0, .015) }
    .bike-profile-readout { color: #d96a1e }
    .bike-hover-dot span { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3) }
}

.bike-nospeed-chip {
    display: none;
    background: rgba(140, 150, 165, .12);
    color: #97a2b3;
}

.bike-section.speed-on .bike-ride-item[data-no-speed="1"] .bike-nospeed-chip {
    display: inline-flex;
}

.bike-section.speed-on .bike-ride-item[data-no-speed="1"] .bike-ride-color {
    background: #5b6472 !important;
}

.bike-map-container .map-control-btn.is-unavailable {
    color: rgba(255, 255, 255, .38);
}

.bike-map-toast {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 8px);
    z-index: 1100;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(10, 10, 12, .95);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.bike-map-toast.in {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* === plugin-code.css === */
.code-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.code-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid var(--edge-0);
    background: rgba(255, 255, 255, .012);
    flex: 1 1 90px;
    min-width: 80px;
    max-width: 180px;
    min-height: 62px;
    transition: border-color .15s ease;
}

.code-stat:hover {
    border-color: var(--edge-1);
}

.code-stat-value {
    font: 800 16px/1.1 var(--mono);
    color: var(--accent);
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-stat-label {
    font: 600 9px/1.2 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: center;
}

@media (max-width: 520px) {
    .code-stat {
        flex: 1 1 calc(33.33% - 6px);
        min-width: 72px;
        max-width: none;
        padding: 10px 6px;
    }
    .code-stat-value {
        font-size: 14px;
    }
}

.code-section .git-activity--top {
    margin-bottom: 14px;
}

.code-block {
    border: 1px solid var(--edge-0);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.code-block > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    font: 700 12px/1 var(--mono);
    color: var(--ink-2);
    user-select: none;
    list-style: none;
}

.code-block > summary::-webkit-details-marker {
    display: none;
}

.code-block > summary > span:first-child::before {
    content: '▸ ';
    color: var(--muted);
}

.code-block[open] > summary > span:first-child::before {
    content: '▾ ';
}

.code-block > summary:hover {
    color: var(--accent);
}

.code-block-meta {
    font: 600 10px/1 var(--mono);
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    padding: 3px 7px;
    border-radius: 10px;
}

.code-block-body {
    padding: 4px 12px 12px;
}

.code-lang-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-lang-row {
    display: grid;
    grid-template-columns: 120px 1fr 84px;
    align-items: center;
    gap: 10px;
}

.code-lang-row:has(> :last-child:nth-child(2)) {
    grid-template-columns: 140px 1fr;
}

.code-lang-name {
    font: 600 11px/1.2 var(--mono);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-lang-name em {
    font-style: normal;
    color: var(--muted);
}

.code-lang-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}

.code-lang-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.code-lang-val {
    font: 600 10px/1 var(--mono);
    color: var(--accent);
    text-align: right;
    white-space: nowrap;
}

.code-editors {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--edge-0);
}

.code-editor {
    font: 700 11px/1 var(--mono);
    color: var(--ink-2);
}

.code-editor em {
    font-style: normal;
    color: var(--muted);
}

.code-langbar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 12px;
}

.code-langbar i {
    display: block;
    height: 100%;
}

.code-langbar--thin {
    height: 5px;
    margin: 7px 0 0;
}

.code-repo {
    text-decoration: none;
    transition: background .12s ease;
}

.code-repo:hover {
    background: rgba(255, 255, 255, .02);
}

.code-repo:hover .code-repo-name {
    color: var(--accent);
}

.code-repo--compact {
    display: block;
    padding: 6px 4px 7px;
    border-radius: 6px;
    border-bottom: 1px solid var(--edge-0);
}

.code-repo--compact:last-child {
    border-bottom: none;
}

.code-repo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.code-repo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.code-repo--compact .code-repo-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-repo-cmeta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font: 600 10px/1 var(--mono);
    color: var(--muted);
    white-space: nowrap;
}

.code-repo-cmeta em {
    font-style: normal;
}

.code-repo-cmeta b {
    color: var(--accent);
    font-weight: 700;
}

.code-repo-stars {
    color: var(--warn);
}

.code-repo--compact .code-langbar--thin {
    margin: 5px 0 0 16px;
}

.plugin-header .code-header-link {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 24px;
    padding: 0;
    z-index: 11;
}

@media (max-width: 780px) {
    .plugin-header .code-header-link {
        display: inline-flex;
    }
}

@media (max-width: 520px) {
    .code-lang-row {
        grid-template-columns: 90px 1fr 64px;
        gap: 6px;
    }
}

.code-repo-src {
    color: color-mix(in srgb, var(--sc, var(--muted)) 75%, var(--muted));
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.code-os {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--edge-0);
    border-radius: 10px;
    margin-bottom: 12px;
}

.code-os-label {
    font: 700 10px/1 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.code-os-bar {
    margin-bottom: 0;
}

.code-os-chips {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.code-os-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: -1px;
}

/* === plugin-git.css === */
.git-activity {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.git-activity--top {
    margin: 4px 0 12px;
    padding-top: 0;
    border-top: none;
}

.git-activity--feed {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--edge-0);
}

.git-heatmap-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.git-heatmap-scroll {
    overflow-x: auto;
    padding: 0 6px 4px 0;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.git-hm-inner {
    min-width: max-content;
}

.git-months {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 13px;
    font: 600 10px/1 var(--mono);
    color: var(--muted);
    margin: 0 0 4px 26px;
    min-width: max-content;
}

.git-months span {
    grid-row: 1;
    white-space: nowrap;
}

.git-hm-row {
    display: flex;
    gap: 4px;
}

.git-weekdays {
    display: grid;
    grid-template-rows: repeat(7, 10px);
    gap: 3px;
    width: 22px;
    flex-shrink: 0;
}

.git-weekdays span {
    font: 600 8px/10px var(--mono);
    color: var(--muted);
    text-align: right;
}

.git-heatmap {
    display: grid;
    grid-template-rows: repeat(7, 10px);
    grid-auto-flow: column;
    grid-auto-columns: 10px;
    gap: 3px;
    min-width: max-content;
}

.git-day {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .04);
    cursor: default;
    transition: transform .1s ease, background .15s ease;
}

.git-day[data-count]:not([data-count="0"]) {
    cursor: pointer;
}

.git-day[data-level="1"] { background: color-mix(in srgb, var(--gc) 30%, transparent); }
.git-day[data-level="2"] { background: color-mix(in srgb, var(--gc) 55%, transparent); }
.git-day[data-level="3"] { background: color-mix(in srgb, var(--gc) 80%, transparent); }
.git-day[data-level="4"] { background: var(--gc); }

.git-day:not(.git-day--scale):hover {
    transform: scale(1.35);
    outline: 1px solid var(--ink-2);
    outline-offset: 1px;
    z-index: 2;
}

.git-heatmap-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.git-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.git-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 11px/1 var(--mono);
    color: var(--ink-2);
    border-radius: 6px;
    padding: 3px 6px;
    margin: -3px -6px;
    transition: background .12s ease, opacity .15s ease;
    user-select: none;
}

.git-src[data-key] {
    cursor: pointer;
}

.git-src[data-key]:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--ink);
}

.git-src i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--gc);
}

.git-src em {
    font-style: normal;
    color: var(--muted);
}

.git-src--off {
    opacity: .35;
    text-decoration: line-through;
}

.git-src--off i {
    background: var(--muted);
}

.git-src-lock {
    display: inline-flex;
    align-items: center;
    color: var(--warn);
}

.git-scale {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font: 600 10px/1 var(--mono);
    color: var(--muted);
}

.git-day--scale {
    cursor: default !important;
}

.git-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.git-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--edge-0);
    flex: 1 1 110px;
    min-width: 96px;
    max-width: 200px;
    transition: border-color .15s ease;
}

.git-stat:hover {
    border-color: var(--edge-1);
}

.git-stat--wide {
    flex: 1.5 1 170px;
    max-width: 280px;
}

.git-stat-value {
    font: 800 15px/1 var(--mono);
    color: var(--accent);
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.git-stat-value .git-add,
.git-stat-value .git-del {
    font-style: normal;
    font-size: 13px;
}

.git-stat-label {
    font: 600 10px/1 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
}

.git-add { color: var(--good); }
.git-del { color: var(--bad); }

.git-feed {
    display: flex;
    flex-direction: column;
}

.git-feed-list {
    display: flex;
    flex-direction: column;
}

.git-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 6px;
    border-bottom: 1px solid var(--edge-0);
    border-radius: 6px;
    transition: background .12s ease, opacity .15s ease;
}

.git-item:hover {
    background: rgba(255, 255, 255, .02);
}

.git-item:last-child {
    border-bottom: none;
}

.git-item--hidden {
    display: none;
}

.git-item--off {
    display: none;
}

.git-item--dim {
    opacity: .25;
}

.git-item-icon {
    color: var(--sc, var(--accent));
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
}

.git-item-body {
    flex: 1;
    min-width: 0;
}

.git-item-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.git-item-title:hover {
    color: var(--accent);
}

.git-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font: 600 11px/1 var(--mono);
    color: var(--muted);
    flex-wrap: wrap;
}

.git-repo {
    color: var(--ink-2);
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
}

.git-ref {
    color: var(--ink-2);
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
}

.git-commits {
    color: var(--accent);
}

.git-item-src {
    margin-left: auto;
    color: color-mix(in srgb, var(--sc, var(--muted)) 75%, var(--muted));
    font-size: 10px;
}

.git-blocks {
    display: inline-flex;
    gap: 2px;
}

.gb {
    width: 7px;
    height: 7px;
    border-radius: 1.5px;
}

.gb-a { background: var(--good); }
.gb-d { background: var(--bad); }

.git-feed-more {
    margin-top: 6px;
    padding: 7px 10px;
    width: 100%;
    border: 1px solid var(--edge-1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
    color: var(--ink-2);
    font: 700 11px/1 var(--mono);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.git-feed-more:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.git-tooltip {
    position: fixed;
    z-index: 100000;
    background: var(--paper);
    border: 1px solid var(--edge-1);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 240px;
    max-width: 380px;
    box-shadow: var(--shadow);
    pointer-events: none;
    font-size: 12px;
}

.git-tooltip--pinned {
    pointer-events: auto;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--edge-1));
}

.git-tooltip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: 700 12px/1.3 var(--mono);
    color: var(--ink);
    margin-bottom: 6px;
    position: sticky;
    top: -10px;
    background: var(--paper);
    padding: 2px 0;
}

.git-tooltip-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.git-tooltip-close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .1);
}

.git-tooltip-sources {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--edge-0);
}

.git-tooltip-src {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 10px/1 var(--mono);
    color: var(--ink-2);
}

.git-tooltip-src i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--gc);
}

.git-tooltip-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 0;
    min-width: 0;
}

.git-tooltip-ico {
    color: var(--gc, var(--accent));
    flex-shrink: 0;
    display: flex;
    margin-top: 1px;
}

.git-tooltip-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.git-tooltip-title {
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: none;
}

a.git-tooltip-title {
    cursor: pointer;
}

a.git-tooltip-title:hover {
    color: var(--accent);
    text-decoration: underline;
}

.git-tooltip-meta {
    font: 600 10px/1.3 var(--mono);
    color: var(--muted);
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.git-tooltip-diff em {
    font-style: normal;
}

.git-tooltip-more {
    padding-top: 4px;
    font: 600 10px/1 var(--mono);
    color: var(--muted);
}

.git-tooltip-private {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--edge-0);
    font: 600 11px/1 var(--mono);
    color: var(--warn);
}

.git-tooltip-private svg {
    display: inline-block;
}

.git-tooltip-loading {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
}

.plugin--expanded .git-feed .git-item--hidden {
    display: flex;
}

.plugin--expanded .git-feed .git-item--hidden.git-item--off {
    display: none;
}

.plugin--expanded .git-heatmap-scroll {
    overflow-x: visible;
}

@media (max-width: 780px) {
    .plugin--expanded .git-heatmap-scroll {
        overflow-x: auto;
    }
}

@media (max-width: 520px) {
    .git-heatmap, .git-weekdays { grid-template-rows: repeat(7, 8px); }
    .git-heatmap { grid-auto-columns: 8px; }
    .git-day { width: 8px; height: 8px; }
    .git-months { grid-auto-columns: 11px; }
    .git-stat { flex: 1 1 90px; min-width: 84px; padding: 8px 8px; }
    .git-stat--wide { flex: 1 1 100%; max-width: none; }
    .git-stat-value { font-size: 13px; }
    .git-tooltip { max-width: calc(100vw - 16px); }
}

.git-months {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--cell, 10px) + var(--cgap, 3px));
    font: 600 10px/1 var(--mono);
    color: var(--muted);
    margin: 0 0 4px 26px;
    min-width: max-content;
}

.git-weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--cell, 10px));
    gap: var(--cgap, 3px);
    width: 22px;
    flex-shrink: 0;
}

.git-weekdays span {
    font: 600 8px/var(--cell, 10px) var(--mono);
    color: var(--muted);
    text-align: right;
}

.git-heatmap {
    display: grid;
    grid-template-rows: repeat(7, var(--cell, 10px));
    grid-auto-flow: column;
    grid-auto-columns: var(--cell, 10px);
    gap: var(--cgap, 3px);
    min-width: max-content;
}

.git-day {
    width: var(--cell, 10px);
    height: var(--cell, 10px);
    border-radius: 2px;
    background: rgba(255, 255, 255, .04);
    cursor: default;
    transition: transform .1s ease, background .15s ease;
}

@media (max-width: 520px) {
    .git-months { margin-left: 26px; }
    .git-stat { flex: 1 1 90px; min-width: 84px; padding: 8px 8px; }
    .git-stat--wide { flex: 1 1 100%; max-width: none; }
    .git-stat-value { font-size: 13px; }
    .git-tooltip { max-width: calc(100vw - 16px); }
}

.git-months span {
    grid-row: 1;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc((var(--cell, 10px) + var(--cgap, 3px)) * 5);
}

.git-feed {
    display: block;
}

.git-feed-body {
    display: flex;
    flex-direction: column;
}

.plugin--expanded .git-feed[open] .git-item--hidden {
    display: flex;
}

.plugin--expanded .git-feed[open] .git-item--hidden.git-item--off {
    display: none;
}

.git-months span {
    grid-row: 1;
    white-space: nowrap;
    overflow: visible;
    max-width: none;
}

.git-month--year em {
    font-style: normal;
    color: var(--accent);
    margin-left: 3px;
    font-size: 9px;
}

.git-years {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--cell, 10px) + var(--cgap, 3px));
    font: 700 10px/1 var(--mono);
    color: var(--accent);
    margin: 0 0 3px 26px;
    min-width: max-content;
}

.git-years .git-year {
    grid-row: 1;
    white-space: nowrap;
    border-left: 1px solid var(--edge-2);
    padding-left: 5px;
    overflow: hidden;
}

/* === plugin-health.css === */
.health-section {
    --health-steps: #4ade80;
    --health-calories: #f97316;
    --health-workout: #8b5cf6;
    --health-sleep: #6366f1;
    --health-heart: #ef4444;
    --health-hydration: #06b6d4;
}

.health-section .plugin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.health-updated {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
}

.health-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.health-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--edge-0);
    min-width: 0;
    overflow: hidden;
    transition: border-color .15s ease;
}

.health-card:hover {
    border-color: var(--edge-1);
}

.health-card-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.health-card-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.health-card--steps .health-card-icon {
    background: rgba(74, 222, 128, 0.12);
}

.health-card--steps .health-card-icon svg {
    fill: #4ade80;
}

.health-card--calories .health-card-icon {
    background: rgba(249, 115, 22, 0.12);
}

.health-card--calories .health-card-icon svg {
    fill: #f97316;
}

.health-card--workouts .health-card-icon {
    background: rgba(139, 92, 246, 0.12);
}

.health-card--workouts .health-card-icon svg {
    fill: #8b5cf6;
}

.health-card--sleep .health-card-icon {
    background: rgba(99, 102, 241, 0.12);
}

.health-card--sleep .health-card-icon svg {
    fill: #6366f1;
}

.health-card--heart .health-card-icon {
    background: rgba(239, 68, 68, 0.12);
}

.health-card--heart .health-card-icon svg {
    fill: #ef4444;
}

.health-card--hydration .health-card-icon {
    background: rgba(6, 182, 212, 0.12);
}

.health-card--hydration .health-card-icon svg {
    fill: #06b6d4;
}

.health-card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.health-card-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-card-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.health-card-sub {
    font-size: 9px;
    color: var(--muted);
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.health-card--steps .health-card-value {
    color: var(--health-steps);
}

.health-card--calories .health-card-value {
    color: var(--health-calories);
}

.health-card--workouts .health-card-value {
    color: var(--health-workout);
}

.health-card--sleep .health-card-value {
    color: var(--health-sleep);
}

.health-card--heart .health-card-value {
    color: var(--health-heart);
}

.health-card--hydration .health-card-value {
    color: var(--health-hydration);
}

.health-card-value.updated {
    animation: health-pulse .4s ease;
}

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

.health-heartbeat {
    --heartbeat-duration: 857ms;
    display: block;
}

.health-heartbeat.beating {
    animation: heartbeat-pulse var(--heartbeat-duration) ease-out;
}

@keyframes heartbeat-pulse {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
        fill: #ff4444;
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.15);
        fill: #ff6666;
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@media (min-width: 1100px) {
    .health-section[data-w="2"] .health-grid,
    .health-section[data-w="3"] .health-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .health-grid {
        grid-template-columns:1fr;
    }
}


@media (prefers-color-scheme: light) {
    .health-card {
        border: 1px solid var(--edge-1);
    }

    .health-card--steps .health-card-icon {
        background: rgba(74, 222, 128, 0.1);
    }

    .health-card--calories .health-card-icon {
        background: rgba(249, 115, 22, 0.1);
    }

    .health-card--workouts .health-card-icon {
        background: rgba(139, 92, 246, 0.1);
    }

    .health-card--sleep .health-card-icon {
        background: rgba(99, 102, 241, 0.1);
    }

    .health-card--heart .health-card-icon {
        background: rgba(239, 68, 68, 0.1);
    }

    .health-card--hydration .health-card-icon {
        background: rgba(6, 182, 212, 0.1);
    }
}

/* === plugin-info.css === */
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.info-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);min-height:42px}
.info-label{color:var(--muted);font-size:12px;font-family:var(--mono);min-width:70px;text-align:left}
.info-value{font-weight:600;text-align:right;flex:1;word-break:break-word}
.source-links{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:8px}

.aka-section{margin-bottom:20px}
.aka-title{margin:0 0 12px 0;font-size:14px;font-weight:700;color:var(--ink-2);padding-bottom:6px;border-bottom:1px solid var(--edge-0)}
.aka-list{display:flex;flex-wrap:wrap;gap:8px}
.aka-tag{display:inline-block;padding:4px 10px;background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-radius:12px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .15s ease;border:1px solid var(--edge-0);font-family:var(--mono)}

.aka-tag:hover {
    background: linear-gradient(135deg, var(--accent) 20%, var(--accent-2) 80%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}
.aka-tag:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.1)}

@media (max-width:780px){.info-grid{grid-template-columns:1fr}}
@media (max-width:520px){
    .aka-list{gap:6px}
    .aka-tag{padding:3px 8px;font-size:11px}
}

/* === plugin-meme.css === */
.meme-section .plugin-header{box-shadow:none;border:none}

.meme-content {
    padding: 6px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meme-section{overflow-anchor: none;}
.meme-content{transition:min-height .25s ease}

.meme-image, .meme-gif {
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--edge-0);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meme-image img, .meme-gif img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .2s ease
}
.meme-caption{margin:.6rem 0 0;color:var(--ink-2);text-align:center}

.meme-section .plugin-toolbar{gap:6px;flex-wrap:nowrap;overflow:hidden}

.meme-refresh-btn {
    transition: all 0.2s ease;
    will-change: transform;
}

.meme-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.meme-refresh-btn svg {
    display: block;
}

.meme-refresh-btn .loading {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.meme-refresh-btn:not(:disabled):hover {
    transform: translateY(-1px) scale(1.05);
}

.meme-refresh-btn:not(:disabled):active {
    transform: translateY(0) scale(0.95);
}

.meme-mobile-btn {
    display: none;
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}

@media (max-width: 780px) {
    .meme-mobile-btn {
        display: flex;
    }
}

.meme-section {
    overflow: hidden;
}

.meme-section .meme-content,
.meme-section .meme-image,
.meme-section .meme-gif {
    max-height: none;
    overflow: visible;
}

.meme-section .meme-image img,
.meme-section .meme-gif img {
    max-height: 800px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 780px) {
    .meme-section .meme-image img,
    .meme-section .meme-gif img {
        max-height: 560px;
    }
}

/* === plugin-music.css === */
.text-muted { color: var(--muted); }
.music-likes { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }

.music-now { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.music-now__cover {
    position: relative; width: 132px; height: 132px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden; background: var(--bg-3);
    box-shadow: inset 0 0 0 1px var(--edge-0), 0 4px 12px rgba(0,0,0,.3);
}
.music-now__cover img { width: 100%; height: 100%; object-fit: cover; }
.music-now__ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); }
.music-now__play {
    position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
    border: none; border-radius: 50%; background: rgba(77,159,255,.92);
    cursor: pointer; opacity: 0; display: grid; place-items: center;
    transition: opacity .2s ease, transform .15s ease;
}
.music-now__play::before {
    content: ""; width: 0; height: 0; border-style: solid;
    border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; margin-left: 3px;
}
.music-now__cover:hover .music-now__play { opacity: 1; }
.music-now__play:hover { transform: scale(1.06); }

.music-now__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.music-now__status { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.music-now.is-playing .music-now__status { color: var(--good); }
.music-now__name { font-size: clamp(15px, 3vw, 19px); font-weight: 800; color: var(--ink); line-height: 1.2; word-break: break-word; }
.music-now__artist { font-size: 13px; color: var(--ink-2); font-weight: 600; }

.music-badges { display: flex; gap: 6px; margin-top: 2px; }
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
    font-size: 12px; line-height: 1; background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px var(--edge-0);
}
.badge.loved { color: #ff5c7a; }
.badge.liked { color: var(--good); }
.badge.is-off { opacity: .28; filter: grayscale(1); }

.music-progress { margin-top: 8px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.28); overflow: hidden; }
.music-progress__fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s linear; }

.music-recent { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.music-recent__item {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
    background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--edge-0);
    cursor: pointer; transition: background .15s ease, transform .12s ease;
}
.music-recent__item:hover { background: rgba(255,255,255,.05); transform: translateX(2px); }
.music-recent__cover { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.music-recent__cover img { width: 100%; height: 100%; object-fit: cover; }
.music-recent__ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.music-recent__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.music-recent__name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-recent__artist { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-recent__badges { display: flex; gap: 4px; }
.music-recent__badges .badge { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
.music-recent__time { font-size: 11px; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.music-stats { margin-top: 14px; }
.music-stats__summary {
    cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2);
    padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.02);
    box-shadow: inset 0 0 0 1px var(--edge-0); list-style: none; user-select: none;
}
.music-stats__summary::-webkit-details-marker { display: none; }
.music-stats__summary::before { content: "▸ "; color: var(--muted); }
.music-stats[open] > .music-stats__summary::before { content: "▾ "; }
.music-stats__body { padding-top: 12px; display: flex; flex-direction: column; gap: 14px; }

.music-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.music-total {
    position: relative; padding: 10px 12px; border-radius: 10px; overflow: hidden;
    background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge-0);
}
.music-total::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad, var(--accent)); }
.music-total__label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.music-total__value { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.music-total__delta { font-size: 11px; font-weight: 700; }
.music-total__delta.up { color: var(--good); }
.music-total__delta.down { color: var(--bad); }
.music-total__spark { display: block; width: 100%; height: 24px; margin-top: 4px; color: color-mix(in oklch, var(--accent) 70%, transparent); }

.music-weekly {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    box-shadow: inset 0 0 0 1px var(--edge-0);
}
.music-weekly__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.music-weekly__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.music-weekly__peak {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.music-weekly__bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    align-items: end;
}
.music-weekly__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.music-weekly__track {
    width: 100%;
    height: 104px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.music-weekly__bar {
    width: 100%;
    max-width: 52px;
    min-height: 6px;
    border-radius: 8px 8px 5px 5px;
    background: linear-gradient(180deg, #1f6f3f, #0c3a1f);
    transition: height .4s cubic-bezier(.2, .8, .2, 1);
}
.music-weekly__col.is-peak .music-weekly__bar {
    background: linear-gradient(180deg, #45f086, #12c05e);
    box-shadow: 0 0 18px rgba(69, 240, 134, .4);
}
.music-weekly__day {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.music-weekly__col.is-peak .music-weekly__day {
    color: var(--good);
    font-weight: 700;
}
@media (prefers-color-scheme: light) {
    .music-weekly { background: rgba(0, 0, 0, .02); }
    .music-weekly__bar { background: linear-gradient(180deg, #56c483, #1f8f4d); }
    .music-weekly__col.is-peak .music-weekly__bar {
        background: linear-gradient(180deg, #2fd071, #12a552);
        box-shadow: 0 0 14px rgba(47, 208, 113, .35);
    }
}
@media (max-width: 520px) {
    .music-weekly__track { height: 82px; }
    .music-weekly__bars { gap: 7px; }
    .music-weekly__day { font-size: 10px; }
}

.music-sub { border-radius: 8px; }
.music-sub > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 6px 4px; list-style: none; user-select: none; }
.music-sub > summary::-webkit-details-marker { display: none; }
.music-sub > summary::before { content: "▸ "; color: var(--muted); }
.music-sub[open] > summary::before { content: "▾ "; }

.music-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; padding: 8px 2px; }
.music-cover { display: flex; flex-direction: column; gap: 4px; }
.music-cover img, .music-cover__ph { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--grad, var(--bg-3)); box-shadow: inset 0 0 0 1px var(--edge-0); }
.music-cover__name { font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-cover__plays { font-size: 10px; color: var(--muted); }

.music-tags { display: flex; flex-wrap: wrap; gap: 4px 11px; padding: 12px 6px; align-items: center; justify-content: center; line-height: 1.05; }
.music-tag { font-weight: 800; line-height: 1.05; letter-spacing: -.01em; padding: 0; background: none; box-shadow: none; }
.music-tag__count { font-size: .5em; opacity: .55; font-weight: 600; margin-left: 1px; vertical-align: super; }

.music-mini-player {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px;
    z-index: 100000; width: min(520px, calc(100vw - 24px)); box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

@media (max-width: 900px) {
    .music-now { flex-direction: column; align-items: center; text-align: center; }
    .music-now__cover { width: 160px; height: 160px; }
    .music-badges { justify-content: center; }
    .music-mini-player { bottom: 60px; }
}
@media (max-width: 520px) {
    .music-now__cover { width: 130px; height: 130px; }
    .music-totals { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-color-scheme: light) {
    .music-recent__item, .music-total, .music-stats__summary, .music-tag { background: rgba(0,0,0,.03); }
    .music-progress { background: rgba(0,0,0,.1); }
}

.music-likes { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.music-likes__item { display: inline-flex; align-items: center; gap: 4px; }
.music-likes__item.loved svg { color: #ff5c7a; }
.music-likes__item.liked svg { color: var(--good); }
.music-likes__sep { opacity: .5; }
.music-likes svg { width: 13px; height: 13px; }

.badge svg { width: 13px; height: 13px; display: block; }

.music-progress__time { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

.music-stats__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.music-period {
    appearance: none; background: rgba(255,255,255,.04); color: var(--ink-2);
    border: 1px solid var(--edge-1); border-radius: 6px; padding: 3px 24px 3px 8px;
    font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6a7a' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center; background-size: 10px;
}
.music-period:hover { color: var(--ink); border-color: var(--edge-2); }
.music-period option { background: var(--paper); color: var(--ink); }

.music-cover__ph {
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
    background: var(--grad, var(--bg-3));
}
@media (prefers-color-scheme: light) { .music-period { background-color: rgba(0,0,0,.04); } }
.plugin--expanded.music-section { width: min(720px, 92vw); max-height: 92vh; overflow: auto; }
.plugin--expanded.music-section .plugin__inner { max-height: none; }

.music-weekly__col.is-today .music-weekly__bar {
    background: linear-gradient(180deg, #45f086, #12c05e);
}
.music-weekly__col.is-today .music-weekly__day {
    color: var(--good);
    font-weight: 700;
}

@media (prefers-color-scheme: light) {
    .music-weekly { background: rgba(0, 0, 0, .02); }
    .music-weekly__bar { background: linear-gradient(180deg, #56c483, #1f8f4d); }
    .music-weekly__col.is-today .music-weekly__bar {
        background: linear-gradient(180deg, #2fd071, #12a552);
    }
}

@media (hover: none) {
    .music-now__play { opacity: 1; }
    .music-now__cover:hover .music-now__play { opacity: 1; }
}

/* === plugin-neofetch.css === */
.neofetch-section h3{margin:0}

.machine-buttons{
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0px 0 14px;
    flex-wrap: wrap
}
.machine-btn{
    padding:8px 14px;border:none;border-radius:12px;background:var(--paper);color:var(--ink);
    font-size:13px;font-weight:700;cursor:pointer;
    transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
    text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    box-shadow:inset 0 0 0 1px var(--edge-0)
}
.machine-btn:hover{background:var(--bg-3);transform:translateY(-1px)}
.machine-btn[data-active="true"],.machine-btn.active{
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

.neofetch-outputs{margin-top:4px}
.neofetch-output{display:none}
.neofetch-output:first-child{display:block}

.terminal{
    --neo-scale: 1;
    background: #0c0c0c;
    border-radius:12px;
    color: #cccccc;
    /* Reduced shadow blur and complexity */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 4px 12px rgba(0, 0, 0, .5);
    overflow:hidden;
    width:100%;
    position:relative;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    will-change: height;
}

.terminal::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,
    transparent 0%,
    rgba(122,162,255,.2) 50%,
    transparent 100%);
    opacity:.6;
}

.terminal-header{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: #1a1a1a;
}

.terminal-header .light{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow:0 0 4px currentColor, inset 0 1px 2px rgba(255,255,255,.3);
    position:relative;
}

.terminal-header .light::after{
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent);
}

.terminal-header .light.red {
    background: #ff5f56;
    color: #ff5f56
}

.terminal-header .light.yellow {
    background: #ffbd2e;
    color: #ffbd2e
}

.terminal-header .light.green {
    background: #27c93f;
    color: #27c93f
}

.terminal-body{
    position: relative;
    padding: 16px;
    overflow: auto;
    background: #0c0c0c;
}

.terminal-body::before{
    content:'';position:absolute;inset:0;
    background:
            radial-gradient(ellipse at top, rgba(122,162,255,.03), transparent 60%),
            radial-gradient(ellipse at bottom, rgba(182,146,255,.02), transparent 60%);
    pointer-events:none;
}

.neofetch-pre{
    margin: 0;
    white-space: pre;
    overflow: visible;
    word-wrap: normal;
    overflow-wrap: normal;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', var(--mono), sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #cccccc;
    transform-origin: left top;
    transform: scale(var(--neo-scale));
    position: relative;
    z-index: 1;
    will-change: transform;
}

.color-palette{
    margin-top: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    background: #1a1a1a;
    border-radius:8px;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.color-block{
    width: 28px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow:
            inset 0 1px 2px rgba(255,255,255,.1),
            0 1px 3px rgba(0, 0, 0, .4);
    flex-shrink:0;
    position:relative;
    overflow:hidden;
}
.color-block::after{
    content: '';
    position: absolute;
    inset: 0;
    background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 50%);
}

@media (max-width:1400px){ .neofetch-pre{font-size:11px} }
@media (max-width:1200px){ .neofetch-pre{font-size:10.5px} }
@media (max-width:900px) { .neofetch-pre{font-size:10px} }
@media (max-width:680px) {
    .neofetch-pre{font-size:9.5px}
    .machine-btn{padding:6px 10px;font-size:12px}
    .color-block{width:24px;height:16px}
}
@media (max-width:420px){
    .neofetch-pre{font-size:9px;line-height:1.22}
    .color-block{width:20px;height:14px}
}

.plugin--expanded .neofetch-pre{transform:scale(1);font-size:13.5px}

/* === plugin-personal.css === */
.personal-section {
    background: linear-gradient(180deg, rgba(255,255,255,.012), color-mix(in oklab, var(--bg-3) 26%, transparent));
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px var(--edge-0), var(--shadow);
}

.personal-section .plugin__inner {
    padding: 14px 14px 20px;
}

.personal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.personal-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.personal-category {
    margin-bottom: 24px;
}

.personal-category:last-child {
    margin-bottom: 0;
}

.category-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--edge-1);
    text-transform: capitalize;
}

.personal-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.personal-item {
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--edge-0);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.personal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    border-color: var(--edge-1);
}

.personal-image {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-2);
    box-shadow: inset 0 0 0 1px var(--edge-0);
}

.personal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.personal-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.personal-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.personal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.personal-text {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

.personal-text p {
    margin: 0 0 8px 0;
}

.personal-text p:last-child {
    margin-bottom: 0;
}

.personal-text h1,
.personal-text h2,
.personal-text h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 12px 0 8px 0;
}

.personal-text h1:first-child,
.personal-text h2:first-child,
.personal-text h3:first-child {
    margin-top: 0;
}

.personal-text ul {
    margin: 8px 0;
    padding-left: 20px;
}

.personal-text li {
    margin: 4px 0;
}

.personal-text code {
    background: rgba(255,255,255,.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent);
}

.personal-text pre {
    background: var(--bg-2);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
    border: 1px solid var(--edge-0);
}

.personal-text pre code {
    background: none;
    padding: 0;
}

.personal-text a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.personal-text a:hover {
    border-bottom-color: var(--accent);
}

.personal-text strong {
    color: var(--ink);
    font-weight: 700;
}

.personal-text em {
    font-style: italic;
    color: var(--ink-2);
}

@media (max-width: 900px) {
    .personal-grid,
    .personal-items {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }

    .personal-image {
        height: 140px;
    }
}

@media (max-width: 520px) {
    .personal-grid,
    .personal-items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .personal-item {
        padding: 12px;
    }

    .personal-image {
        height: 180px;
    }

    .personal-title {
        font-size: 14px;
    }

    .personal-text {
        font-size: 13px;
    }
}

/* === plugin-photos.css === */
.photos-section .plugin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plugin-header-link {
    display: flex;
    align-items: center;
    color: var(--muted);
    transition: color 0.2s ease;
}

.plugin-header-link:hover {
    color: var(--accent);
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.photos-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--edge-0);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.photos-card:hover {
    transform: translateY(-2px);
    border-color: var(--edge-1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.photos-cover {
    aspect-ratio: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-3);
}

.photos-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
    gap: 2px;
}

.photos-preview-item {
    overflow: hidden;
    background: var(--bg-3);
}

.photos-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photos-card:hover .photos-preview-item img {
    transform: scale(1.05);
}

.photos-no-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.photos-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--mono);
}

.photos-info {
    padding: 10px 12px;
}

.photos-name {
    display: block;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 520px) {
    .photos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .photos-info {
        padding: 8px 10px;
    }

    .photos-name {
        font-size: 12px;
    }
}

/* === plugin-places.css === */
.places-section .plugin-header {
    box-shadow: none;
    border: none;
}

.places-map-container {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--edge-0);
}

.places-map {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--bg-2);
}

.map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-2);
    z-index: 10;
    transition: opacity .3s ease;
}

.map-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.map-loading span {
    font-size: 13px;
    color: var(--muted);
}

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
}

.map-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.map-control-btn:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.map-control-btn.active {
    background: var(--accent);
    color: white;
}

.place-popup {
    min-width: 180px;
    max-width: 260px;
}

.place-popup-content {
    padding: 4px 0;
}

.place-popup-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.place-popup-location {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.place-popup-description {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.4;
    margin-bottom: 8px;
}

.place-popup-date {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
}

.place-popup-category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-left: 8px;
}

.plugin--expanded .places-map-container {
    height: 600px;
}

.plugin-overlay .places-map-container {
    height: calc(80vh - 100px);
    min-height: 500px;
}

.leaflet-popup-content-wrapper {
    background: var(--paper) !important;
    border-radius: 12px !important;
    border: 1px solid var(--edge-1) !important;
}

.leaflet-popup-content {
    margin: 12px 14px !important;
    color: var(--ink) !important;
}

.leaflet-popup-tip {
    background: var(--paper) !important;
    border: 1px solid var(--edge-1) !important;
    border-top: none !important;
    border-left: none !important;
}

.leaflet-container {
    font-family: var(--font) !important;
    background: var(--bg-2) !important;
}

.leaflet-tile-pane {
    opacity: 1 !important;
}

.leaflet-control-zoom {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-2) !important;
}

.leaflet-control-attribution {
    background: rgba(0, 0, 0, .6) !important;
    color: rgba(255, 255, 255, .7) !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    border-radius: 4px 0 0 0 !important;
}

.leaflet-control-attribution a {
    color: var(--accent) !important;
}

@media (max-width: 780px) {
    .places-map-container {
        height: 260px;
    }

    .map-control-btn {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 520px) {
    .places-map-container {
        height: 220px;
    }
}

@media (prefers-color-scheme: light) {
    .places-map-container {
        background: #f0f0f0;
    }

    .map-control-btn {
        background: white;
    }

    .leaflet-popup-content-wrapper {
        background: white !important;
    }

    .leaflet-popup-tip {
        background: white !important;
    }

    .leaflet-control-attribution {
        background: rgba(255, 255, 255, .8) !important;
        color: rgba(0, 0, 0, .6) !important;
    }

    .leaflet-container {
        background: #f0f0f0 !important;
    }
}

.places-section .places-map-container {
    height: 320px !important;
    max-height: 320px;
}

.places-section.plugin--expanded .places-map-container,
.plugin-overlay .places-section .places-map-container {
    height: calc(80vh - 100px) !important;
    max-height: none;
}

.places-section {
    overflow: hidden;
}

.places-section .places-map-container {
    height: 320px !important;
    max-height: 320px;
}

.places-section.plugin--expanded .places-map-container,
.plugin-overlay .places-section .places-map-container {
    height: calc(80vh - 100px) !important;
    max-height: none;
}

@media (max-width: 780px) {
    .places-section .places-map-container {
        height: 240px !important;
        max-height: 240px;
    }
}

@media (max-width: 520px) {
    .places-section .places-map-container {
        height: 200px !important;
        max-height: 200px;
    }
}

.places-section .places-map-container:fullscreen,
.places-map-container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0;
    border-radius: 0;
    border: none;
    background: var(--bg-2);
}

.places-map-container:fullscreen .places-map {
    width: 100%;
    height: 100%;
}

.places-map-container:fullscreen .map-controls {
    z-index: 1100;
}

/* === plugin-profile.css === */
.profile-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: .25rem 0 .5rem;
}

.profile-title {
    font-weight: 700;
}

.profile-title-web {
    color: var(--accent-2);
}

.profile-title-rest {
    color: var(--ink-2);
}

.profile-subtitle {
    font-weight: 700;
    display: inline-block;
}

.subtitle-dev {
    color: var(--accent);
}

.subtitle-sec {
    color: var(--good);
}

.subtitle-ops {
    color: var(--warn);
}

/* === plugin-projects.css === */
.projects-section {
    grid-column: 1 / -1;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.project-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .01), var(--bg-2));
    border: 1px solid var(--edge-0);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    will-change: transform;
}

.project-card:hover {
    border-color: var(--edge-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.project-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--bg-3);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
    will-change: transform;
}

.project-card:hover .project-image img {
    transform: scale(1.03);
}

.project-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.project-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.project-description {
    margin: 0;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all .12s ease;
}

.project-link--github {
    background: rgba(255, 255, 255, .04);
    color: var(--ink-2);
    border: 1px solid var(--edge-0);
}

.project-link--github:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--ink);
    border-color: var(--edge-1);
}

.project-link--live {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
}

.project-link--live:hover {
    background: color-mix(in oklch, var(--accent) 85%, white);
    box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 30%, transparent);
}

.project-tech {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: auto;
}

.tech-tag {
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .03);
    font: 600 10px/1 var(--mono);
    color: var(--ink-2);
    border: 1px solid var(--edge-0);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.tech-tag:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.project-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--edge-0);
    background: rgba(255, 255, 255, .015);
}

.project-dates {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.project-date {
    font: 600 10px/1.4 var(--mono);
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 10px;
    }

    .project-image {
        height: 140px;
    }
}

@media (max-width: 520px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-image {
        height: 180px;
    }

    .project-content {
        padding: 12px;
    }
}

/* === plugin-services.css === */
.services-section .plugin-header {
    border: none !important;
    box-shadow: none !important;
    align-items: center;
}

.services-header { display: flex; gap: 12px; }

.services-header__meta {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
    font-size: 12px; color: var(--muted);
}

.services-updated {
    padding: 4px 8px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--edge-0);
    font-weight: 700;
}
.services-section[data-stale="true"] .services-updated {
    color: var(--warn);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 20%, transparent) inset;
}

.services-legend { display: none; }
@media (min-width: 680px) {
    .services-legend { display: flex; align-items: center; gap: 8px; }
}
.legend-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 999px; font-weight: 700;
    color: var(--ink-2); background: rgba(255,255,255,.03); border: 1px solid var(--edge-0);
}

.services-grid {
    --min: 220px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.services-section.is-compact .services-grid {
    --min: 200px;
    gap: 8px;
}

.card-overlay {
    position: absolute; inset: 0; border-radius: inherit; z-index: 1; opacity: 0;
}

.service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--edge-0);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
}

.service-item:hover {
    transform: translateY(-2px);
    /* Reduced shadow size */
    box-shadow: inset 0 0 0 1px var(--edge-1), 0 4px 12px rgba(0, 0, 0, .25);
}

.service-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-title, .service-title-link {
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease;
}

.service-item:hover .service-title,
.service-item:hover .service-title-link {
    color: var(--accent);
}

.service-statuschip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
}

.status-dot {
    --s: 8px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #888;
    flex-shrink: 0;
}
.status-online { background: var(--good) !important; }
.status-offline { background: var(--bad) !important; }

.service-description {
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--mono);
    margin-top: auto;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
}
.chip-rt { color: var(--good); }
.chip-code[data-code^="2"] { color: var(--good); }
.chip-code[data-code^="3"] { color: var(--warn); }
.chip-code[data-code^="4"], .chip-code[data-code^="5"] { color: var(--bad); }
.chip-last { color: var(--ink-2); }

.chip-skeleton { position: relative; color: transparent !important; }
.chip-skeleton::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.06) 80%);
    background-size: 200% 100%;
    /* Removed animation for perf */
    opacity: 0.5;
}

.services-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    box-shadow: inset 0 0 0 1px var(--edge-0);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
}

.summary-label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.summary-count {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--mono);
    line-height: 1;
}

.online-count {
    color: var(--good);
}

.offline-count {
    color: var(--bad);
}

.total-count {
    color: var(--accent);
}

.no-services { text-align: center; padding: 32px 20px; color: var(--muted); }
.no-services p { margin: 6px 0; font-size: 13px; }

@media (max-width: 900px) {
    .services-grid {
        --min: 200px;
        gap: 8px;
    }

    .services-summary {
        gap: 8px;
        padding: 10px;
    }

    .summary-count {
        font-size: 18px;
    }
}

@media (max-width: 520px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .services-summary {
        gap: 6px;
        padding: 8px;
    }

    .summary-item {
        padding: 6px;
    }

    .summary-count {
        font-size: 16px;
    }
}

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === plugin-social.css === */
.social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    color: var(--ink-2);
    text-decoration: none;
    will-change: transform;
}

.social-link:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .06));
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    color: var(--accent);
}

.social-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.85;
    transition: filter .2s ease, opacity .2s ease;
}

.social-link:hover img {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .social-link img {
        filter: none;
    }
}

@media (prefers-color-scheme: light) {
    .social-link {
        background: linear-gradient(135deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02));
        border: 1px solid var(--edge-1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

    .social-link:hover {
        background: linear-gradient(135deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .04));
        box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
    }

    .social-link:hover img {
        opacity: 0.9;
    }
}

.social-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--edge-1, rgba(255, 255, 255, 0.08));
}

.social-page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    color: var(--ink-2, #b0b0b0);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    will-change: transform;
}

.social-page-link:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .06));
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    color: var(--accent, #6a9fff);
}

.social-page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.social-page-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.social-page-name {
    white-space: nowrap;
}

@media (prefers-color-scheme: light) {
    .social-pages {
        border-top-color: var(--edge-1, rgba(0, 0, 0, 0.08));
    }

    .social-page-link {
        background: linear-gradient(135deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02));
        border: 1px solid var(--edge-1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        color: var(--ink-2, #555);
    }

    .social-page-link:hover {
        background: linear-gradient(135deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .04));
        box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
    }
}

/* === plugin-steam.css === */
.steam-section {
    position: relative;
    overflow: visible;
}

.steam-section .plugin-header {
    border: none !important;
    box-shadow: none !important;
}

.current-game {
    background: transparent;
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid var(--edge-0);
}

.current-game-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.current-game-status {
    font-weight: 700;
    font-size: 11px;
    color: var(--good);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.current-game-cover {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.game-cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

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

.current-game-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.2;
}

.current-game-actions {
    display: flex;
    gap: 6px;
}

.player-status {
    background: transparent;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--edge-0);
}

.status-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.games-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.game-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .15s ease;
    cursor: default;
    position: relative;
    align-items: center;
    overflow: hidden;
}

.game-item:hover {
    border-color: var(--edge-1);
}

.game-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.game-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.game-name {
    font-weight: 700;
    font-size: 12px;
    word-break: break-word;
    color: var(--ink);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--muted);
    font: 10px/1 var(--mono);
    align-items: center;
}

.game-stats span {
    background: rgba(255, 255, 255, .03);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.game-actions {
    display: none;
}

.view-steam-btn {
    padding: 5px 8px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}

.view-steam-btn:hover {
    background: color-mix(in oklch, var(--accent) 85%, white);
}

.steam-profile-link {
    margin-top: 12px;
    text-align: center;
}

.view-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--edge-0);
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s ease;
}

.view-profile-btn:hover {
    border-color: var(--edge-1);
    color: var(--ink);
}

@media (prefers-color-scheme: light) {
    .current-game {
        background: transparent;
        border: 1px solid var(--edge-1);
    }

    .player-status {
        background: transparent;
        border: 1px solid var(--edge-1);
    }

    .game-item {
        background: transparent;
        border: 1px solid var(--edge-1);
    }

    .game-item:hover {
        border-color: var(--edge-2);
    }

    .game-stats span {
        background: rgba(0, 0, 0, .04);
    }

    .view-profile-btn {
        background: transparent;
        border: 1px solid var(--edge-1);
        color: var(--ink-2);
    }

    .view-profile-btn:hover {
        border-color: var(--edge-2);
        color: var(--ink);
    }
}

@media (max-width: 780px) {
    .games-list {
        grid-template-columns: 1fr 1fr;
    }

    .game-icon {
        width: 36px;
        height: 36px;
    }

    .game-name {
        font-size: 11px;
    }
}

@media (max-width: 520px) {
    .games-list {
        grid-template-columns: 1fr;
    }
}

/* Actions row: the two links are peers, so they share the quiet bordered style
   already used by the profile link rather than a filled slab. */
.steam-section .steam-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
}

/* Both actions share one fixed box so they line up regardless of the count pill
   and of any inherited sizing from the surrounding plugin styles. */
.steam-section .steam-actions > a {
    height: 34px;
    min-height: 0;
    /* the profile link carries a 12px top margin of its own, which offsets it
       from its sibling once both are centred */
    margin: 0;
    align-self: center;
    line-height: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.steam-section .steam-all-games-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    background: transparent;
    color: var(--ink);
    border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--edge-0));
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .15s ease;
}

/* Only the accent-tinted count marks this as the primary of the two. */
.steam-section .steam-all-games-btn .steam-count {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 16px;
    height: 16px;
    padding: 0 7px;
    border-radius: 99px;
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--accent);
}

/* The profile link is the sibling action, so it gets the same box. */
.steam-section .steam-actions .view-profile-btn {
    padding: 0 14px;
    justify-content: center;
}

.steam-section .steam-all-games-btn:hover {
    border-color: var(--accent);
    color: var(--ink);
}

@media (prefers-color-scheme: light) {
    .steam-section .steam-all-games-btn {
        background: transparent;
        border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--edge-1));
        color: var(--ink);
    }

    .steam-section .steam-all-games-btn:hover {
        border-color: var(--accent);
    }
}


/* === plugin-tech.css === */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}

.tech-item {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .014);
    box-shadow: inset 0 0 0 1px var(--edge-0);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
    overflow: hidden;
    will-change: transform;
}

.tech-item:hover {
    background: rgba(255, 255, 255, .024);
    box-shadow: inset 0 0 0 1px var(--edge-1), var(--shadow);
    transform: translateY(-2px);
}

.tech-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.tech-item .tech-name {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, bottom .2s ease;
    z-index: 10;
    border: 1px solid var(--edge-1);
    color: var(--ink);
    will-change: opacity, bottom;
}

.tech-item:hover .tech-name {
    opacity: 1;
    bottom: -35px;
}

.tech-item.filtered {
    background: var(--accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    transform: scale(1.05);
}

.tech-item.filtered img {
    filter: brightness(1.3) contrast(1.1);
}

@media (prefers-color-scheme: light) {
    .tech-item {
        background: rgba(0, 0, 0, .04);
        border: 1px solid var(--edge-1);
    }

    .tech-item:hover {
        background: rgba(0, 0, 0, .08);
    }

    .tech-item img {
        filter: none;
    }

    .tech-item .tech-name {
        background: var(--paper);
        color: var(--ink);
        border-color: var(--edge-1);
    }

    .tech-item.filtered {
        background: var(--accent);
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    }

    .tech-item.filtered img {
        filter: brightness(10);
    }
}

/* === plugin-visitors.css === */
.visitors-section {
    background: linear-gradient(135deg, var(--paper) 0%, var(--bg-2) 100%);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: inset 0 0 0 1px var(--edge-0);
    overflow: hidden;
}

.visitors-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.visitors-stats:has(> .visitor-stat:only-child) {
    grid-template-columns: 1fr;
}

.visitors-stats:has(> .visitor-stat:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.visitor-stat {
    text-align: center;
    padding: 10px 4px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--edge-0);
    transition: border-color .15s ease;
    min-width: 0;
}

.visitor-stat:hover {
    border-color: var(--edge-1);
}

.visitor-number {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visitor-label {
    font-size: 9px;
    color: var(--muted);
    margin-top: 5px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.visitor-uptime {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2);
}

.visitor-stat[data-tooltip] {
    cursor: help;
    position: relative;
}

.visitor-stat[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    color: var(--ink);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--edge-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 100;
}

.visitor-stat[data-tooltip]:hover::before {
    opacity: 1;
}

.visitor-stat[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 100;
}

.visitor-stat[data-tooltip]:hover::after {
    opacity: 1;
}

.visitors-block-label {
    font: 700 9px/1 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.visitors-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--edge-0);
    background: rgba(255, 255, 255, .01);
}

.visitors-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
}

.visitors-day {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    flex: 0 0 auto;
}

.visitors-heat-scale .visitors-day {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.visitors-day[data-level="1"] {
    background: color-mix(in oklch, var(--accent) 25%, transparent);
}

.visitors-day[data-level="2"] {
    background: color-mix(in oklch, var(--accent) 48%, transparent);
}

.visitors-day[data-level="3"] {
    background: color-mix(in oklch, var(--accent) 74%, transparent);
}

.visitors-day[data-level="4"] {
    background: var(--accent);
}

.visitors-heatmap .visitors-day:hover {
    outline: 1px solid var(--ink-2);
    cursor: default;
}

.visitors-heat-scale {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-end;
    font: 600 9px/1 var(--mono);
    color: var(--muted);
}

.region-scale {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .05);
}

.region-scale[data-level="1"] {
    background: color-mix(in oklch, var(--accent) 22%, transparent);
}

.region-scale[data-level="2"] {
    background: color-mix(in oklch, var(--accent) 44%, transparent);
}

.region-scale[data-level="3"] {
    background: color-mix(in oklch, var(--accent) 70%, transparent);
}

.region-scale[data-level="4"] {
    background: var(--accent);
}

.visitors-regions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--edge-0);
    background: rgba(255, 255, 255, .01);
}

.visitors-map {
    aspect-ratio: 2.2 / 1;
    min-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0e14;
    box-shadow: inset 0 0 0 1px var(--edge-1);
}

.visitors-map .leaflet-container {
    background: #0a0e14;
    font-family: var(--font);
}

.visitors-map .leaflet-interactive {
    transition: fill-opacity .15s ease;
    outline: none;
}

.visitors-map-tooltip {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--edge-1);
    border-radius: 8px;
    box-shadow: var(--shadow);
    font: 600 11px/1.4 var(--mono);
    padding: 5px 9px;
}

.visitors-map-tooltip::before {
    display: none;
}

.plugin--expanded .visitors-map {
    aspect-ratio: 2 / 1;
    min-height: 300px;
}

@media (prefers-color-scheme: light) {
    .visitors-chart,
    .visitors-regions {
        background: rgba(0, 0, 0, .015);
    }

    .visitors-day,
    .region-scale {
        background: rgba(0, 0, 0, .05);
    }
}

/* === plugin-webring.css === */
.webring-section .plugin-header {
    box-shadow: none;
    border: none;
}

.webring-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
    padding: 0;
    background: transparent;
}

.webring-prev,
.webring-home,
.webring-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--edge-0);
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease;
}

.webring-prev:hover,
.webring-next:hover {
    border-color: var(--edge-1);
    background: rgba(255, 255, 255, .02);
}

.webring-home {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}

.webring-home:hover {
    background: color-mix(in oklch, var(--accent) 90%, white);
}

.webring-prev,
.webring-next {
    flex: 1 1 0;
    max-width: 40%;
}

.webring-home {
    flex: 0 0 auto;
    min-width: 100px;
}

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

.webring-prev img,
.webring-home img,
.webring-next img,
.webring-prev svg,
.webring-home svg,
.webring-next svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (min-width: 1440px) {
    .webring-nav {
        gap: 10px;
    }

    .webring-prev,
    .webring-home,
    .webring-next {
        height: 44px;
        font-size: 14px;
        padding: 0 20px;
    }
}

@media (max-width: 900px) {
    .webring-prev,
    .webring-home,
    .webring-next {
        height: 38px;
        font-size: 12px;
        padding: 0 12px;
    }
}

@media (max-width: 520px) {
    .webring-nav {
        gap: 6px;
    }

    .webring-prev,
    .webring-next {
        padding: 0 10px;
        height: 36px;
        font-size: 11px;
    }

    .webring-home {
        padding: 0 12px;
        height: 36px;
        min-width: 80px;
    }
}

@media (max-width: 380px) {
    .webring-prev .webring-text,
    .webring-next .webring-text {
        display: none;
    }

    .webring-prev::after {
        content: "←";
        font-weight: 900;
    }

    .webring-next::after {
        content: "→";
        font-weight: 900;
    }
}

@media (prefers-color-scheme: light) {
    .webring-prev,
    .webring-next {
        background: transparent;
        border-color: var(--edge-1);
        color: var(--ink);
    }

    .webring-prev:hover,
    .webring-next:hover {
        background: rgba(0, 0, 0, .02);
        border-color: var(--edge-2);
    }

    .webring-home {
        background: var(--accent);
        color: #fff;
    }

    .webring-home:hover {
        background: color-mix(in oklch, var(--accent) 90%, black);
    }
}