html {
    scroll-behavior: smooth;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
}

:root {
    --bg-color: #f2f2f7;
    --text-color: #1c1c1e;
    --link-color: #007aff;
    --button-text: #1c1c1e;
    --transition-time: 0.25s;
}

.dark-mode {
    --bg-color: #000000;
    --text-color: #f2f2f7;
    --button-text: #f2f2f7;
    --link-color: #0a84ff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time);
}

.top-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
}

.top-controls > .top-link {
    flex: 1 1 calc(25% - 8px);
    min-width: 100px;
    display: flex;
}

.top-controls > .top-link .button-func {
    width: 100%;
}

@media (max-width: 768px) {
    .top-controls > .top-link {
        flex: 1 1 calc(50% - 5px);
    }
}

@media (max-width: 480px) {
    .top-controls {
        gap: 6px;
        padding: 0 4px;
    }

    .top-controls > .top-link {
        flex: 1 1 100%;
    }
}

.button-link,
.button-2-link,
.button-3-link,
.button-func,
.sheet-btn,
.sheet-2-btn {
    font-size: 16px;
    padding: 12px 16px;

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: var(--button-text);

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 6px 16px rgba(0,0,0,0.08);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 99.5%;
    box-sizing: border-box;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition:
        background var(--transition-time),
        box-shadow var(--transition-time),
        transform 0.15s;
}

.button-link, 
.button-2-link, 
.button-3-link {
    justify-content: flex-start; 
    text-align: left; 
}

.button-link {
    margin: 2px;
}

.button-2-link {
    width: calc(50% - 10px);
    display: inline-flex;
    height: 56px;
    margin: 2px;
}

.button-3-link {
    width: calc(33.33333333333333% - 10px);
    display: inline-flex;
    height: 56px;
    margin: 2px;
}

.button-link img {
    width: 32px;
    height: auto;
    flex-shrink: 0;
}

.button-link:hover,
.button-2-link:hover,
.button-3-link:hover,
.button-func:hover,
.sheet-btn:hover,
.sheet-2-btn:hover {
    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 2px 4px rgba(0,0,0,0.1),
        0 10px 24px rgba(0,0,0,0.12);

    transform: translateY(-1px);
}

.button-link:active,
.button-2-link:active,
.button-3-link:active,
.button-func:active {
    transform: scale(0.96);

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.15);
}

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

/* TABLE WITH BORDER */
table {
    font-family: inherit;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow: hidden;
}

td, th {
    border: 1px solid rgba(0,0,0,0.15);
    text-align: left;
    padding: 10px;
}

th {
    background: rgba(0,0,0,0.03);
    font-weight: 600;
}

.popup {
    display: none;
    position: fixed;
    z-index: 999;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.popup-content {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    position: relative;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 60vh;
    overflow-y: auto;

    border-radius: 16px;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.15);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

.close-btn:hover {
    color: #000;
}

.dark-mode .close-btn:hover {
    color: #fff;
}

.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
}

summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary h2::before {
    content: "▶ ";
}

details[open] summary h2::before {
    content: "▼ ";
}

/* DARK MODE BUTTON = MID GRAY */
.dark-mode .button-link,
.dark-mode .button-2-link,
.dark-mode .button-3-link,
.dark-mode .button-func,
.dark-mode .sheet-btn,
.dark-mode .sheet-2-btn {
    background: rgba(70, 70, 70, 0.7);
    border: 1px solid rgba(255,255,255,0.1);

    box-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        0 6px 16px rgba(0,0,0,0.6);
}

.dark-mode .button-link:hover,
.dark-mode .button-2-link:hover,
.dark-mode .button-3-link:hover {
    background: rgba(90, 90, 90, 0.85);
}

.dark-mode .popup-content {
    background: rgba(40,40,40,0.7);
}

/* DARK MODE TABLE */
.dark-mode table {
    border: 1px solid rgba(255,255,255,0.2);
}

.dark-mode td,
.dark-mode th {
    border: 1px solid rgba(255,255,255,0.15);
}

.dark-mode th {
    background: rgba(255,255,255,0.05);
}