about/static/css/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;

    --mosaic-fill-cap: 228px;
}

.js-loading .plugin {
    opacity: 0;
}

.js-loading .profile-section {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.js-loaded .plugin {
    animation: fadeIn 0.25s ease-out forwards;
}

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

.js-loaded .plugin:nth-child(1) {
    animation-delay: 0s;
}

.js-loaded .plugin:nth-child(2) {
    animation-delay: 0.02s;
}

.js-loaded .plugin:nth-child(3) {
    animation-delay: 0.04s;
}

.js-loaded .plugin:nth-child(4) {
    animation-delay: 0.06s;
}

.js-loaded .plugin:nth-child(5) {
    animation-delay: 0.08s;
}

.js-loaded .plugin:nth-child(n+6) {
    animation-delay: 0.1s;
}

*{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);
}

[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 .profile-section {
    position: relative;
    width: 100%;
    align-self: flex-start;
    margin: 0 0 calc(var(--gap) * 2) 0;
}

.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: content;
    will-change: transform, width, height;
}

.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;
}

.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: 999999;
    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){
    .js .container{
        gap: calc(var(--gap) * 1.2);
        padding:16px;
    }

    .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}
    .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);
}