body {
    font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Arabic', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 16px 24px;
    background-image:
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.06) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.06) 0px, transparent 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.header-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: block;
}

.header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f3f4f6 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2px;
}

.header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.app-layout {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.footer-controls {
    width: 100%;
    max-width: 800px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.main-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.display-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.page-footer-lite {
    margin-top: 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.35;
    font-weight: 300;
}

.app-version {
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (max-width: 900px) {
    body {
        padding: 12px 16px;
    }
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 8px;
    }
    .header h1 {
        font-size: 1.5rem;
    }
    .header p {
        font-size: 0.8rem;
    }
    .display-card {
        padding: 16px;
        border-radius: 16px;
        gap: 12px;
    }
    .top-controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 10px;
    }
}