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

body {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--page-background);
    min-height: 100vh;
    color: var(--foreground);
    padding-bottom: env(safe-area-inset-bottom);
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

header {
    text-align: left;
    margin-bottom: 16px;
    padding: 24px;
    background: var(--card);
    backdrop-filter: blur(12px);
    border-radius: calc(var(--radius) + 0.25rem);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--foreground);
    letter-spacing: -0.04em;
}

.time-display {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--muted-foreground);
}

.time-label {
    font-weight: 600;
    color: var(--foreground);
}

.update-info {
    font-size: 12px;
    color: var(--muted-foreground);
    font-weight: 500;
    background: var(--muted);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 999px;
    display: inline-block;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--tabs-background);
    padding: 6px;
    border-radius: calc(var(--radius) + 0.1rem);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

.tab {
    flex: 1;
    padding: 12px 18px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: 0.85rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tab:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.tab.active {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: inset 0 0 0 1px var(--tab-active-border);
}

.chart-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chart-card {
    background: var(--card);
    border-radius: calc(var(--radius) + 0.05rem);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}

.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.chart-card.current {
    background: var(--current-gradient);
    color: var(--current-foreground);
    border-color: var(--current-border);
}

.chart-card.available {
    background: var(--card);
    color: var(--card-foreground);
}

.chart-card.available:hover {
    border-color: var(--interactive-border);
}

.chart-card.old {
    background: var(--old-bg);
    color: var(--old-fg);
    border-color: var(--old-border);
}

.chart-card.old:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.chart-card.forecast {
    background: var(--forecast-bg);
    color: var(--card-foreground);
    border-color: var(--forecast-border);
}

.chart-card.forecast:hover {
    border-color: var(--interactive-border);
}

.chart-card.unavailable {
    background: var(--unavailable-bg);
    color: var(--unavailable-fg);
    opacity: 0.82;
    cursor: not-allowed;
}

.chart-card.unavailable:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.chart-time {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.chart-status {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--status-default-bg);
    border: 1px solid var(--status-default-border);
    color: var(--status-default-fg);
    white-space: nowrap;
}

.chart-status.old {
    background: var(--status-old-bg);
    border-color: var(--status-old-border);
    color: var(--status-old-fg);
}

.chart-status.forecast,
.chart-status.available {
    background: var(--status-accent-bg);
    border-color: var(--status-accent-border);
    color: var(--status-accent-fg);
}

.chart-card.current .chart-status {
    background: var(--status-current-bg);
    border-color: var(--status-current-border);
    color: var(--current-foreground);
}

.chart-card.available .chart-status {
    background: var(--status-accent-bg);
    border-color: var(--status-accent-border);
    color: var(--status-accent-fg);
}

.chart-card.old .chart-status {
    background: var(--status-old-bg);
    border-color: var(--status-old-border);
    color: var(--status-old-fg);
}

.chart-card.forecast .chart-status {
    background: var(--status-accent-bg);
    border-color: var(--status-accent-border);
    color: var(--status-accent-fg);
}

.chart-card.unavailable .chart-status {
    background: var(--status-unavailable-bg);
    border-color: var(--status-unavailable-border);
    color: var(--status-unavailable-fg);
}

.chart-date {
    font-size: 14px;
    opacity: 0.88;
    margin-bottom: 10px;
    font-weight: 500;
}

.availability-info {
    font-size: 12px;
    opacity: 0.76;
    font-weight: 500;
    line-height: 1.5;
}

.countdown {
    font-size: 13px;
    font-weight: 600;
    color: var(--danger);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.countdown-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.loading {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: var(--muted-foreground);
    font-weight: 500;
    background: var(--loading-bg);
    border: 1px dashed var(--border);
    border-radius: calc(var(--radius) + 0.05rem);
}

.tap-hint {
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-size: 11px;
    opacity: 0.58;
    font-weight: 600;
}

.notification-btn {
    margin: 20px auto;
    display: block;
    padding: 10px 20px;
    font-weight: 600;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: 0.9rem;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
}

.legend-btn {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 8px 12px;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin: 20px auto;
    font-family: inherit;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.notification-btn:hover {
    background: var(--secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.legend-btn:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.legend-btn.active {
    background: linear-gradient(180deg, #2e7cf6 0%, #1d6cf0 100%);
    color: #ffffff;
    border-color: rgba(29, 108, 240, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

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

.legend-container {
    display: none;
    margin-top: 30px;
    padding: 20px;
    background: var(--card);
    border-radius: calc(var(--radius) + 0.25rem);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.legend-container.show {
    display: block;
}

.footer-links {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.footer-link:hover {
    background: var(--secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.external-icon {
    font-size: 13px;
    line-height: 1;
}

.legend-section {
    margin-bottom: 25px;
}

.legend-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 15px;
    text-align: center;
}

.legend-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.legend-table th {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

.legend-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--foreground);
}

.legend-table tr:hover {
    background: var(--table-hover);
}

.abbreviation-code,
.cloud-amount-code {
    font-weight: 700;
    color: var(--foreground);
}

.cloud-amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.cloud-amount-item,
.symbol-item {
    padding: 10px;
    background: var(--muted);
    border-radius: 0.8rem;
    border: 1px solid var(--border);
}

.cloud-amount-item {
    text-align: center;
}

.cloud-amount-code {
    display: block;
    margin-bottom: 5px;
}

.symbols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.symbol-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.symbol-icon {
    font-size: 20px;
    width: 30px;
    text-align: center;
    color: var(--foreground);
}

.symbol-desc {
    font-size: 13px;
    color: var(--foreground);
}

.legend-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    display: block;
    border: 1px solid var(--border);
}

.front-link {
    display: block;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 0.05rem);
    text-decoration: none;
    color: var(--foreground);
    font-weight: 500;
    transition: all 0.2s ease;
    word-break: break-all;
    font-size: 14px;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.front-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.front-link.old {
    background: var(--old-bg);
    border-color: var(--old-border);
}

.front-link.current {
    background: var(--current-gradient);
    color: var(--current-foreground);
    border-color: var(--current-border);
}

.front-link.current .front-date,
.front-link.current .front-desc {
    color: var(--current-foreground) !important;
    opacity: 1 !important;
}

.front-link.current .chart-status {
    background: var(--status-current-bg);
    border-color: var(--status-current-border);
    color: var(--current-foreground);
}

.front-link.forecast {
    background: var(--forecast-bg);
    border-color: var(--forecast-border);
}

.front-link.forecast:hover {
    border-color: var(--interactive-border);
}

.front-date {
    font-weight: 700;
    color: var(--foreground);
    margin-right: 10px;
}

.front-desc {
    font-size: 12px;
    opacity: 0.74;
    display: block;
}

.fronts-error {
    text-align: center;
    padding: 40px 20px;
    background: var(--error-bg);
    border-radius: calc(var(--radius) - 0.05rem);
    color: var(--error-fg);
    font-weight: 500;
    border: 1px solid var(--error-border);
}

@media (max-width: 480px) {
    .container {
        padding: 14px 14px 32px;
    }

    h1 {
        font-size: 26px;
    }

    header,
    .chart-card {
        padding: 18px;
    }

    .tab {
        font-size: 13px;
        padding: 10px 12px;
    }

    .footer-link {
        width: 100%;
    }
}

@supports (-webkit-touch-callout: none) {
    .chart-card:active,
    .front-link:active,
    .tab:active {
        transform: scale(0.98);
    }
}