* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --bg: #0f1117;
    --card-bg: #1a1d2e;
    --card-active: #252840;
    --text: #e0e0e0;
    --text-dim: #888;
    --accent: #4A90D9;
    --accent-warm: #E8943A;
    --accent-green: #4CAF50;
    --accent-red: #E05555;
    --radius: clamp(6px, 1.25vw, 16px);
    --w03: rgba(255, 255, 255, 0.03);
    --w04: rgba(255, 255, 255, 0.04);
    --w05: rgba(255, 255, 255, 0.05);
    --w06: rgba(255, 255, 255, 0.06);
    --w08: rgba(255, 255, 255, 0.08);
    --w10: rgba(255, 255, 255, 0.10);
    --w14: rgba(255, 255, 255, 0.14);
    --w15: rgba(255, 255, 255, 0.15);
    --w16: rgba(255, 255, 255, 0.16);
    --card-border: rgba(255, 255, 255, 0.12)
}

.theme-light {
    --bg: #e8edf4;
    --card-bg: #ffffff;
    --card-active: #dde4ee;
    --text: #1c2333;
    --text-dim: #5b6a7e;
    --accent: #2f6fb2;
    --accent-warm: #cf7416;
    --accent-green: #3a9450;
    --accent-red: #c74545;
    --radius: clamp(6px, 1.25vw, 16px);
    --w03: rgba(28, 35, 51, 0.03);
    --w04: rgba(28, 35, 51, 0.04);
    --w05: rgba(28, 35, 51, 0.05);
    --w06: rgba(28, 35, 51, 0.06);
    --w08: rgba(28, 35, 51, 0.08);
    --w10: rgba(28, 35, 51, 0.10);
    --w14: rgba(28, 35, 51, 0.14);
    --w15: rgba(28, 35, 51, 0.15);
    --w16: rgba(28, 35, 51, 0.16);
    --card-border: #c9d4e2
}

.theme-light .card-icon-svg {
    color: #1c2333
}

html.theme-anim,
html.theme-anim * {
    transition: background-color 0.55s ease, color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease, fill 0.55s ease, stroke 0.55s ease !important
}

html,
body {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    font-family: -apple-system, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
    background: var(--bg);
    color: var(--text);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation
}

#app {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: clamp(4px, 1vw, 16px);
    gap: clamp(4px, 1vw, 16px);
    --sidebar-gap: clamp(14px, 1.8vw, 28px);
    --sidebar-w: clamp(140px, 25vw, 280px)
}

#sidebar {
    position: absolute;
    left: var(--sidebar-gap);
    top: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    width: var(--sidebar-w);
    min-width: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.75vw, 12px)
}

.card {
    flex: 1;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: clamp(6px, 1.25vw, 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--card-border);
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden
}

.card:active {
    background: var(--card-active)
}

.card.active {
    border-color: var(--accent)
}

.card-icon {
    font-size: clamp(16px, 2.75vw, 36px);
    margin-bottom: clamp(2px, 0.25vw, 6px)
}

.card-icon svg {
    width: clamp(24px, 3.5vw, 44px);
    height: clamp(24px, 3.5vw, 44px);
    color: #fff
}

.card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.25vw, 6px);
    min-width: 0
}

.card-left .card-icon {
    margin-bottom: 0
}

.card-left .card-label {
    margin-bottom: 0
}

.card-label {
    font-size: clamp(10px, 1.4vw, 16px);
    color: var(--text-dim);
    margin-bottom: clamp(2px, 0.25vw, 6px)
}

.card-value {
    font-size: clamp(11px, 1.6vw, 20px);
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#panel {
    flex: 1;
    min-width: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: clamp(10px, 2vw, 28px) clamp(12px, 2.5vw, 36px) clamp(10px, 2vw, 28px) calc(var(--sidebar-gap) + var(--sidebar-w) + var(--sidebar-gap));
    overflow-y: auto;
    position: relative
}

.panel-content {
    display: none;
    height: 100%
}

.panel-content.active {
    display: flex;
    flex-direction: column
}

.panel-content h2 {
    font-size: clamp(14px, 2vw, 26px);
    color: var(--text-dim);
    margin-bottom: clamp(8px, 1.5vh, 16px);
    font-weight: 400;
    border-bottom: 1px solid var(--w08);
    padding-bottom: clamp(6px, 1vh, 12px)
}

#panel-time.active {
    display: block
}

#panel-time {
    position: relative
}

.big-clock {
    font-size: clamp(32px, 7vw, 96px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    margin-bottom: clamp(2px, 0.5vh, 8px)
}

.date-str {
    font-size: clamp(12px, 2vw, 24px);
    color: var(--text-dim);
    margin-bottom: clamp(10px, 2vh, 24px)
}

.icp-footer {
    position: absolute;
    bottom: clamp(8px, 1.5vh, 16px);
    right: clamp(8px, 1.2vw, 18px);
    font-size: clamp(10px, 1.2vw, 14px);
    color: var(--text-dim);
    text-align: right;
    line-height: 1.8
}

.icp-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s
}

.icp-footer a:hover {
    color: var(--accent)
}

.icp-sep {
    margin: 0 clamp(4px, 0.5vw, 8px);
    opacity: 0.4
}

.iframe-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden
}

.iframe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(6px, 1vh, 12px) clamp(10px, 1.5vw, 18px);
    background: var(--w04);
    border-bottom: 1px solid var(--w08)
}

.iframe-title {
    font-size: clamp(12px, 1.6vw, 18px);
    color: var(--text-dim);
    font-weight: 500
}

.iframe-expand {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: clamp(2px, 0.3vw, 4px);
    transition: color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center
}

.iframe-expand:hover {
    color: var(--accent)
}

.iframe-expand svg {
    width: clamp(16px, 2vw, 22px);
    height: clamp(16px, 2vw, 22px)
}

iframe {
    flex: 1;
    border: none;
    width: 100%;
    min-height: 0;
    background: var(--bg)
}

.locked-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 24px);
    color: var(--text-dim)
}

.locked-placeholder svg {
    width: clamp(48px, 6vw, 80px);
    height: clamp(48px, 6vw, 80px);
    opacity: 0.4
}

.locked-placeholder p {
    font-size: clamp(14px, 2vw, 22px)
}

@media(max-width:600px) {
    #app {
        flex-direction: column;
        padding: clamp(3px, 1.5vw, 8px);
        gap: clamp(3px, 1.5vw, 8px)
    }

    #sidebar {
        position: static;
        flex-direction: row;
        width: 100%;
        height: clamp(60px, 15vh, 100px);
        gap: clamp(3px, 1.5vw, 8px)
    }

    #panel {
        flex: 1;
        padding: clamp(10px, 2vw, 28px) clamp(12px, 2.5vw, 36px)
    }

    .card {
        min-width: 0
    }

    .card-icon {
        font-size: clamp(14px, 4vw, 24px)
    }

    .card-label {
        font-size: clamp(9px, 2.5vw, 14px)
    }

    .card-value {
        font-size: clamp(10px, 2.8vw, 16px)
    }

    .icp-footer {
        position: static;
        margin-top: clamp(12px, 2vh, 24px);
        text-align: center
    }
}

@media(min-aspect-ratio:1601/900) {
    #sidebar .card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(8px, 1vw, 16px);
        padding: clamp(4px, 0.7vw, 10px) clamp(10px, 1.2vw, 18px)
    }

    #sidebar .card-left {
        flex: 1 1 0;
        min-width: 0
    }

    #sidebar .card-value {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        white-space: normal;
        line-height: 1.35;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

@media(min-width:1920px) {

    html,
    body {
        display: flex;
        align-items: center;
        justify-content: center
    }

    #app {
        max-width: 1920px;
        max-height: 1080px
    }
}

::-webkit-scrollbar {
    width: 4px
}

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

::-webkit-scrollbar-thumb {
    background: var(--w10);
    border-radius: 2px
}