/* ==========================================
   RESPONSIVE DESIGN - Mobile First Approach
   NGAnalyse - All Screen Size Adaptations
   ========================================== */

/* ==========================================
   LARGE TABLETS & SMALL LAPTOPS (max-width: 1200px)
   ========================================== */
@media screen and (max-width: 1200px) {
    .container {
        padding: 40px 30px;
    }

    .banner {
        margin-left: 30px;
        margin-right: 30px;
    }

    .banner-content h1 {
        font-size: 2.8em;
    }

    #nfinderlist {
        grid-template-columns: repeat(2, 1fr);
    }

    #topSongs ol {
        grid-template-columns: repeat(4, 1fr);
    }

    .video-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Footer adjustments */
    .footer-main {
        gap: 35px;
    }

    .footer-brand {
        padding-right: 20px;
    }
}

/* ==========================================
   TABLETS (max-width: 1024px)
   ========================================== */
@media screen and (max-width: 1024px) {
    .container {
        padding: 30px 20px;
    }

    .statistics {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .channel-info h1,
    .video-info h2 {
        font-size: 1.8em;
    }

    .statistics p {
        font-size: 1em;
        padding: 15px;
        line-height: 45px;
    }

    /* Platform Stats Grid */
    .platform-stats-grid {
        grid-template-columns: 1fr;
    }

    #topSongs ol {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Header */
    .header {
        padding: 20px;
    }

    #logo {
        max-height: 70px;
    }

    #search-input {
        width: 280px;
    }

    /* Banner */
    .banner {
        min-height: 350px;
    }

    .banner-content {
        padding: 60px 35px;
    }

    .banner-content h1 {
        font-size: 2.4em;
    }

    .banner-content h5 {
        font-size: 1.1em;
    }

    /* Results container */
    #results-container {
        right: 15%;
    }

    /* Description cards */
    .description-header {
        padding: 16px 22px;
    }

    .description-content {
        padding: 18px 22px;
    }
}

/* ==========================================
   SMALL TABLETS & LARGE PHONES (max-width: 900px)
   ========================================== */
@media screen and (max-width: 900px) {
    /* Platform Stats */
    .platform-stat-card {
        padding: 20px;
        min-height: auto;
    }

    .stat-items {
        gap: 18px;
    }

    .stat-item span {
        font-size: 1.3em;
    }

    .platform-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .platform-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-tagline {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links h4 {
        text-align: center;
    }

    /* Top Songs */
    #topSongs ol {
        grid-template-columns: repeat(2, 1fr);
    }

    #topSongs h2 {
        font-size: 1.4em;
        padding: 0;
    }

    /* Show All sections */
    .showAll {
        padding: 20px;
    }

    .linkContainer {
        float: none;
        text-align: center;
        margin-top: 15px;
    }
}

/* ==========================================
   PHONES LANDSCAPE & SMALL TABLETS (max-width: 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* Header Container - top login area */
    .header-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 10px !important;
        padding: 14px 15px;
        gap: 8px;
    }

    .header-link {
        margin: 5px 8px;
        font-size: 0.9em;
        padding: 6px 12px;
    }

    /* Main Header */
    .header {
        display: flex;
        padding: 20px 15px;
        margin-top: 15px;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Logo - prevent squishing */
    #logo {
        max-height: 70px;
        width: auto;
        min-width: 70px;
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    /* Search Form - stack on very small screens */
    form {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 10px;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 10px;
    }

    #search-input {
        font-size: 1rem;
        flex: 1;
        min-width: 0;
        width: auto;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    #search-button {
        flex-shrink: 0;
        width: auto;
        padding: 14px 18px;
        white-space: nowrap;
        font-size: 0.9rem;
    }

    /* Results Container */
    #results-container {
        top: 32%;
        left: 5%;
        right: 5%;
        max-width: 90%;
        min-width: auto;
    }

    /* Banner - fix overflow */
    .banner {
        min-height: 300px;
        border-radius: 16px;
        margin: 20px 15px;
        width: calc(100% - 30px);
        max-width: calc(100vw - 30px);
        box-sizing: border-box;
    }

    .banner-content {
        padding: 45px 25px;
    }

    .banner-content h1 {
        font-size: 1.9em;
        line-height: 1.2;
    }

    .banner-content h5 {
        font-size: 1em;
        margin: 0 0 25px 0;
    }

    .btn-subtle {
        padding: 12px 22px;
        font-size: 0.9em;
    }

    /* Flying Logos - reduce for performance */
    .flying-logo {
        font-size: 1.8rem;
        opacity: 0.08;
    }

    .flying-logo:nth-child(7),
    .flying-logo:nth-child(8) {
        display: none;
    }

    /* Container */
    .container {
        padding: 25px 15px;
    }

    /* Channel Info */
    .channel-info h1 {
        font-size: 1.6em;
    }

    h1#channel-name {
        margin: 25px 0;
        font-size: 1.5em;
    }

    #channel-name img {
        width: 28px;
        margin-top: -2px;
    }

    /* Statistics */
    .statistics {
        grid-template-columns: 1fr;
    }

    .statistics p {
        font-size: 1em;
        padding: 15px;
        line-height: 40px;
    }

    /* Platform Stats Cards */
    .platform-stat-card {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }

    .platform-icon {
        margin: 0 auto 10px;
    }

    .stat-items {
        justify-content: center;
        gap: 20px;
    }

    .stat-item {
        min-width: 80px;
        text-align: center;
    }

    .platform-stats-content h3 {
        font-size: 1em;
        margin-bottom: 10px;
        text-align: center;
    }

    /* Video Tiles */
    .video-tiles {
        grid-template-columns: 1fr;
    }

    .video-tiles div {
        padding: 15px;
    }

    .video-tiles img {
        height: auto;
        max-height: 200px;
    }

    /* Top Songs & NFinder */
    #topSongs ol,
    #nfinderlist {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #topSongs li,
    #nfinderlist li {
        padding: 18px 15px;
    }

    #topSongs h2 {
        font-size: 1.3em;
    }

    /* NFinder Items */
    .nfinder-item {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }

    i.nfinder-icon.fab {
        padding: 0;
        margin-bottom: 15px;
    }

    .nfinder-desc {
        align-items: center;
    }

    /* Description Cards */
    .description-header {
        padding: 14px 18px;
        gap: 10px;
    }

    .description-header i {
        font-size: 1.2em;
    }

    .description-header span {
        font-size: 1em;
    }

    .description-content {
        padding: 15px 18px;
        font-size: 0.95em;
    }

    .description-body {
        max-height: 100px;
    }

    .expand-btn {
        padding: 12px 18px;
        font-size: 0.85em;
    }

    /* Stats Days Headers */
    h1.statsDays {
        font-size: 1.8em;
        margin-top: 50px;
        margin-bottom: 30px;
    }

    p.statsDays {
        font-size: 1.1em;
        margin-bottom: -25px;
    }

    /* Badges */
    a.badges {
        margin: 0 6px 6px 0;
        padding: 6px 12px;
        font-size: 0.7em;
    }

    /* Back Link */
    a.backToOverview {
        font-size: 1em;
        margin: 8px 0 25px;
    }

    /* Show All sections */
    .showAll {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 18px;
    }

    /* Footer */
    .footer-container {
        padding: 0 20px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 0 30px;
    }

    .footer-links {
        text-align: center;
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-links a:hover {
        transform: none;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* No Videos Section */
    section#noVideos .error-card {
        padding: 40px 25px;
        margin: 0 15px;
    }

    section#noVideos .error-icon {
        font-size: 3em;
    }

    section#noVideos h1 {
        font-size: 1.5em;
    }

    #noVideos img {
        width: 100%;
    }

    /* Channel Title */
    .channel-title {
        font-size: 1.8em;
    }

    /* Details View */
    .details-view .platform-stat-card {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
        min-height: auto;
    }

    .details-view .platform-icon {
        width: 64px;
        height: 64px;
        font-size: 30px;
        margin: 0 auto 15px;
    }

    .details-view .stat-items {
        justify-content: center;
        gap: 25px;
    }

    .details-view .stat-item span {
        font-size: 1.5em;
    }

    .details-view .stat-item {
        min-width: 90px;
    }

    .statsDays {
        font-size: 1.6em;
    }
}

/* ==========================================
   PHONES PORTRAIT (max-width: 600px)
   ========================================== */
@media screen and (max-width: 600px) {
    /* Container */
    .container {
        padding: 20px 12px;
        box-sizing: border-box;
        max-width: 100vw;
    }

    /* Header */
    .header {
        padding: 15px 10px;
    }

    #logo {
        max-height: 60px;
        min-width: 60px;
        margin-bottom: 18px;
    }

    /* Search - smaller padding */
    form {
        width: 100%;
        padding: 0 5px;
        gap: 8px;
    }

    #search-input {
        font-size: 0.9rem;
        padding: 12px 14px;
    }

    #search-button {
        padding: 12px 14px;
        font-size: 0.85rem;
    }

    /* Banner */
    .banner {
        min-height: 280px;
        margin: 15px 10px;
        width: calc(100% - 20px);
        border-radius: 14px;
    }

    .banner-content {
        padding: 35px 20px;
    }

    .banner-content h1 {
        font-size: 1.6em;
    }

    .banner-content h5 {
        font-size: 0.95em;
        margin-bottom: 20px;
    }

    .btn-subtle {
        padding: 11px 20px;
        font-size: 0.85em;
    }

    /* Flying logos - hide more */
    .flying-logo:nth-child(n+5) {
        display: none;
    }

    /* Channel Info */
    .channel-info h1 {
        font-size: 1.4em;
    }

    h1#channel-name {
        font-size: 1.3em;
    }

    /* Platform Stats */
    .channel-title {
        font-size: 1.5em;
    }

    .stat-item span {
        font-size: 1.2em;
    }

    .stat-item small {
        font-size: 0.85em;
    }

    /* Statistics */
    .statistics p {
        font-size: 0.95em;
        padding: 12px;
        line-height: 35px;
    }

    /* Video Tiles */
    .video-tiles {
        gap: 15px;
    }

    .video-tiles div {
        padding: 12px;
        border-radius: 14px;
    }

    .video-tiles p.video-title {
        font-size: 1em;
    }

    /* Top Songs */
    #topSongs ol {
        padding: 0.5rem;
        gap: 10px;
    }

    #topSongs li {
        padding: 15px 12px;
        font-size: 0.9em;
    }

    /* Show All */
    .showAll {
        padding: 12px;
        border-radius: 16px;
    }

    /* Stats Days */
    h1.statsDays {
        font-size: 1.5em;
        margin-top: 40px;
    }

    /* Description Cards */
    .description-card {
        border-radius: 16px;
    }

    .description-header {
        padding: 12px 15px;
    }

    .description-content {
        padding: 12px 15px;
        font-size: 0.9em;
        line-height: 1.7;
    }

    /* Footer */
    .site-footer {
        margin-top: 40px;
    }

    .footer-main {
        padding: 35px 0 25px;
    }

    .footer-logo {
        font-size: 1.3em;
    }

    .footer-tagline {
        font-size: 0.9em;
    }

    .footer-social a {
        width: 40px;
        height: 40px;
        font-size: 1.1em;
    }

    .footer-links h4 {
        font-size: 1em;
        margin-bottom: 15px;
    }

    .footer-links a {
        font-size: 0.9em;
    }

    .footer-bottom p {
        font-size: 0.85em;
    }

    /* Details View */
    .details-view .platform-stat-card {
        padding: 20px 15px;
    }

    .details-view .platform-icon {
        width: 56px;
        height: 56px;
        font-size: 26px;
    }

    .details-view .stat-items {
        gap: 20px;
    }

    .details-view .stat-item span {
        font-size: 1.3em;
    }

    .details-view .platform-stats-content h3 {
        font-size: 1.1em;
    }
}

/* ==========================================
   VERY SMALL PHONES (max-width: 400px)
   ========================================== */
@media screen and (max-width: 400px) {
    /* Header Container */
    .header-container {
        padding: 8px;
    }

    .header-link {
        font-size: 0.8em;
        padding: 5px 8px;
        margin: 3px 4px;
    }

    /* Logo */
    #logo {
        max-height: 55px;
        min-width: 55px;
    }

    /* Search - stack vertically on very small screens */
    form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 5px;
    }

    #search-input {
        font-size: 0.9rem;
        padding: 12px 14px;
        width: 100%;
    }

    #search-button {
        padding: 12px 20px;
        font-size: 0.85rem;
        width: 100%;
    }

    /* Banner */
    .banner {
        min-height: 300px;
        margin: 12px 8px;
        width: calc(100% - 16px);
    }

    .banner-content {
        padding: 30px 15px;
    }

    .banner-content h1 {
        font-size: 1.4em;
        line-height: 1.3;
    }

    .banner-content h5 {
        font-size: 0.9em;
        line-height: 1.5;
    }

    .btn-subtle {
        padding: 10px 18px;
        font-size: 0.8em;
    }

    /* Channel Info */
    .channel-info h1,
    h1#channel-name {
        font-size: 1.2em;
    }

    /* Stats */
    .channel-title {
        font-size: 1.3em;
    }

    .stat-item span {
        font-size: 1.1em;
    }

    .stat-items {
        gap: 15px;
    }

    /* Results Container */
    #results-container {
        top: 40%;
    }

    /* Footer */
    .footer-logo {
        font-size: 1.2em;
    }

    .footer-social a {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================
   LANDSCAPE MODE ADJUSTMENTS
   ========================================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Banner - reduce height */
    .banner {
        min-height: 220px;
    }

    .banner-content {
        padding: 25px 30px;
    }

    .banner-content h1 {
        font-size: 1.8em;
        margin-bottom: 10px;
    }

    .banner-content h5 {
        font-size: 0.9em;
        margin-bottom: 15px;
    }

    /* Header */
    #logo {
        max-height: 50px;
        margin-bottom: 10px;
    }

    /* Flying logos - hide most */
    .flying-logo:nth-child(n+3) {
        display: none;
    }

    /* Reduce padding */
    .container {
        padding: 20px;
    }

    /* Stats */
    .statistics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   HIGH DPI / RETINA DISPLAYS
   ========================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure sharp rendering */
    .banner-bg {
        image-rendering: -webkit-optimize-contrast;
    }

    #logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ==========================================
   REDUCED MOTION PREFERENCES
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .flying-logo {
        animation: none;
    }

    .floating-shape {
        animation: none;
    }

    .loader {
        animation: none;
        border-top-color: var(--accent-primary);
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .banner,
    .flying-logos,
    .site-footer,
    .header-container,
    #search-button,
    form,
    .btn-subtle,
    .back-home {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .container {
        max-width: 100%;
        padding: 20px;
    }

    .statistics p,
    .platform-stat-card,
    .showAll {
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        color: black !important;
        box-shadow: none !important;
    }

    a {
        color: black !important;
        text-decoration: underline;
    }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .header-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    #search-button {
        min-height: 48px;
    }

    .btn-subtle {
        min-height: 48px;
    }

    .footer-social a {
        min-width: 48px;
        min-height: 48px;
    }

    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Disable hover effects that might cause issues */
    .statistics p:hover,
    .platform-stat-card:hover,
    .showAll:hover,
    .nfinder-item:hover,
    #topSongs li:hover {
        transform: none;
    }

    /* Keep some subtle feedback */
    .statistics p:active,
    .platform-stat-card:active {
        transform: scale(0.98);
    }
}

/* ==========================================
   DARK MODE PREFERENCE (already dark, but ensure)
   ========================================== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ==========================================
   AUTH PAGES RESPONSIVE (Login/Register)
   ========================================== */
@media screen and (max-width: 500px) {
    body.auth-page {
        padding: 10px;
    }

    .auth-container {
        padding: 10px;
    }

    .auth-card {
        padding: 30px 20px;
        border-radius: 18px;
    }

    .auth-logo img {
        height: 45px;
    }

    .auth-logo h1 {
        font-size: 1.3em;
    }

    .auth-logo p {
        font-size: 0.9em;
    }

    .auth-form {
        gap: 16px;
    }

    .form-group label {
        font-size: 0.85em;
    }

    .input-wrapper input {
        padding: 12px 16px 12px 42px;
        font-size: 0.95em;
        border-radius: 10px;
    }

    .input-wrapper i.input-icon {
        left: 14px;
        font-size: 0.95em;
    }

    .password-toggle {
        right: 14px;
    }

    .password-requirements {
        padding: 10px 12px;
    }

    .password-requirements ul {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .password-requirements li {
        font-size: 0.7em;
    }

    .auth-submit {
        padding: 13px 24px;
        font-size: 0.95em;
        border-radius: 10px;
    }

    .auth-alert {
        padding: 12px 14px;
        font-size: 0.85em;
        border-radius: 10px;
    }

    .auth-footer {
        margin-top: 20px;
        padding-top: 20px;
    }

    .auth-footer p {
        font-size: 0.85em;
    }

    .back-home a {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 380px) {
    .auth-card {
        padding: 25px 15px;
    }

    .auth-logo h1 {
        font-size: 1.2em;
    }

    .input-wrapper input {
        padding: 11px 14px 11px 38px;
        font-size: 0.9em;
    }
}

/* ==========================================
   LEGAL PAGES RESPONSIVE (Impressum/Datenschutz)
   ========================================== */
@media screen and (max-width: 768px) {
    .legal-page {
        padding: 0;
    }

    .back-button {
        position: relative;
        top: 0;
        left: 0;
        margin: 15px;
        font-size: 0.85em;
        padding: 10px 16px;
    }

    .legal-container {
        padding: 0 15px 30px;
    }

    .legal-header-content {
        padding: 30px 20px;
    }

    .legal-header h1 {
        font-size: 1.3em;
    }

    .legal-header .subtitle {
        font-size: 0.8em;
    }

    .legal-header i {
        font-size: 2em;
    }

    .legal-content {
        padding: 25px 20px;
    }

    .legal-toc {
        padding: 20px;
        margin-bottom: 35px;
    }

    .legal-toc ol {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .legal-toc li::before {
        font-size: 0.8em;
    }

    .legal-toc a {
        font-size: 0.9em;
    }

    .legal-section {
        padding: 25px 20px;
        margin-bottom: 35px;
    }

    .legal-section::before {
        font-size: 0.65em;
        padding: 5px 10px;
    }

    .legal-section h2 {
        font-size: 1.15em;
        flex-wrap: wrap;
        gap: 12px;
    }

    .legal-section h2 i {
        width: 35px;
        height: 35px;
        font-size: 0.9em;
    }

    .legal-section h3 {
        font-size: 1em;
        margin: 25px 0 12px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 0.9em;
        line-height: 1.7;
    }

    .info-box {
        padding: 18px;
    }

    .info-box::before {
        font-size: 0.6em;
        padding: 2px 8px;
    }

    .rights-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .right-item {
        padding: 20px;
    }

    .right-item i {
        font-size: 1.6em;
    }

    .right-item h4 {
        font-size: 0.85em;
    }

    .right-item p {
        font-size: 0.85em;
    }

    .legal-footer {
        padding: 18px 20px;
    }

    .legal-footer p {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 500px) {
    .back-button {
        margin: 12px;
        padding: 8px 14px;
        font-size: 0.8em;
    }

    .legal-container {
        padding: 0 10px 25px;
    }

    .legal-header-content {
        padding: 25px 15px;
    }

    .legal-header h1 {
        font-size: 1.15em;
    }

    .legal-header i {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .legal-content {
        padding: 20px 15px;
    }

    .legal-section {
        padding: 20px 15px;
        margin-bottom: 30px;
    }

    .legal-section h2 {
        font-size: 1.05em;
    }

    .legal-section h2 i {
        width: 32px;
        height: 32px;
    }

    .info-box {
        padding: 15px;
    }

    .right-item {
        padding: 16px;
    }
}

/* ==========================================
   PROFIL PAGE RESPONSIVE
   ========================================== */
@media screen and (max-width: 900px) {
    .profile-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .profile-header {
        padding: 70px 20px 25px;
    }

    .back-link {
        top: 12px;
        left: 12px;
        font-size: 0.85em;
        padding: 8px 12px;
    }

    .profile-avatar {
        width: 75px;
        height: 75px;
        font-size: 1.8em;
    }

    .profile-header h1 {
        font-size: 1.5em;
    }

    .profile-subtitle {
        font-size: 1em;
    }

    .profile-card {
        padding: 22px;
    }

    .card-header h2 {
        font-size: 1.3em;
    }

    .card-description {
        padding-left: 0;
        font-size: 0.9em;
    }

    .platform-buttons {
        flex-direction: column;
    }

    .platform-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .input-group input {
        padding: 14px 45px;
        font-size: 0.95em;
    }
}

@media screen and (max-width: 500px) {
    .profile-header {
        padding: 65px 15px 20px;
    }

    .back-link {
        font-size: 0.8em;
        padding: 6px 10px;
    }

    .profile-avatar {
        width: 65px;
        height: 65px;
        font-size: 1.6em;
    }

    .profile-header h1 {
        font-size: 1.3em;
    }

    .profile-subtitle {
        font-size: 0.9em;
    }

    .profile-container {
        padding: 15px;
    }

    .profile-card {
        padding: 18px;
        border-radius: 18px;
    }

    .card-header {
        gap: 12px;
    }

    .card-header i {
        width: 40px;
        height: 40px;
        font-size: 1.2em;
        border-radius: 12px;
    }

    .card-header h2 {
        font-size: 1.15em;
    }

    .status-badge {
        padding: 10px 16px;
        font-size: 0.85em;
    }

    .platform-btn {
        padding: 12px 20px;
        font-size: 0.9em;
    }

    .platform-btn i {
        font-size: 1.1em;
    }

    .input-group input {
        padding: 12px 40px;
        font-size: 0.9em;
        border-radius: 12px;
    }

    .submit-btn {
        padding: 14px 20px;
        font-size: 0.95em;
    }
}