Deploy complete premium UI application

static/assets/css/auth.css

@@ -239,3 +239,253 @@
         max-width: 100%;
     }
 }
+
+
+/* ============================================
+   AUTH PAGES - RESPONSIVE DESIGN
+   ============================================ */
+
+/* Tablets (768px - 1023px) */
+@media (max-width: 1023px) {
+    .auth-container {
+        flex-direction: column;
+        padding: var(--spacing-md);
+        gap: var(--spacing-lg);
+    }
+    
+    .auth-card {
+        max-width: 100%;
+        padding: var(--spacing-lg);
+    }
+    
+    .auth-features {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-width: 100%;
+    }
+    
+    .feature-item {
+        flex: 1;
+        min-width: 200px;
+        max-width: 250px;
+        text-align: center;
+        align-items: center;
+    }
+}
+
+/* Small Tablets / Large Phones (600px - 767px) */
+@media (max-width: 767px) {
+    .auth-container {
+        padding: var(--spacing-sm);
+        min-height: 100vh;
+        justify-content: flex-start;
+        padding-top: var(--spacing-lg);
+    }
+    
+    .auth-card {
+        padding: var(--spacing-md);
+        border-radius: var(--radius-lg);
+    }
+    
+    .auth-title {
+        font-size: 26px;
+    }
+    
+    .auth-subtitle {
+        font-size: 14px;
+    }
+    
+    .brand-logo {
+        margin-bottom: var(--spacing-md);
+    }
+    
+    .brand-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+    
+    .brand-text {
+        font-size: 20px;
+    }
+    
+    .form-input {
+        padding: 12px 14px;
+        font-size: 16px; /* Prevents zoom on iOS */
+    }
+    
+    .form-options {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+        align-items: flex-start;
+    }
+    
+    .btn-primary, .btn-secondary {
+        padding: 14px 20px;
+        font-size: 15px;
+    }
+    
+    .social-login {
+        gap: var(--spacing-xs);
+    }
+    
+    .btn-social {
+        padding: 12px;
+        font-size: 18px;
+    }
+    
+    .auth-features {
+        display: none; /* Hide features on mobile to save space */
+    }
+    
+    .feature-icon {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+    
+    .feature-item h3 {
+        font-size: 16px;
+    }
+    
+    .feature-item p {
+        font-size: 13px;
+    }
+}
+
+/* Extra Small Phones (< 480px) */
+@media (max-width: 479px) {
+    .auth-container {
+        padding: var(--spacing-xs);
+        padding-top: var(--spacing-md);
+    }
+    
+    .auth-card {
+        padding: var(--spacing-sm);
+        border-radius: var(--radius-md);
+    }
+    
+    .auth-header {
+        margin-bottom: var(--spacing-md);
+    }
+    
+    .auth-title {
+        font-size: 22px;
+    }
+    
+    .auth-subtitle {
+        font-size: 13px;
+    }
+    
+    .brand-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 18px;
+    }
+    
+    .brand-text {
+        font-size: 18px;
+    }
+    
+    .form-label {
+        font-size: 13px;
+    }
+    
+    .form-input {
+        padding: 10px 12px;
+    }
+    
+    .checkbox-label {
+        font-size: 13px;
+    }
+    
+    .link-primary {
+        font-size: 13px;
+    }
+    
+    .btn-primary {
+        padding: 12px 16px;
+        font-size: 14px;
+    }
+    
+    .btn-social {
+        padding: 10px;
+        font-size: 16px;
+    }
+    
+    .auth-divider span {
+        font-size: 12px;
+    }
+    
+    .auth-footer {
+        font-size: 13px;
+    }
+    
+    .alert {
+        padding: var(--spacing-sm);
+        font-size: 13px;
+    }
+}
+
+/* Landscape Mode for Phones */
+@media (max-height: 600px) and (orientation: landscape) {
+    .auth-container {
+        flex-direction: row;
+        align-items: flex-start;
+        padding-top: var(--spacing-sm);
+    }
+    
+    .auth-card {
+        max-width: 400px;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+    
+    .auth-features {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+    
+    .feature-item {
+        flex-direction: row;
+        text-align: left;
+        align-items: center;
+    }
+    
+    .feature-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 18px;
+        flex-shrink: 0;
+    }
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) and (pointer: coarse) {
+    .form-input,
+    .btn-primary,
+    .btn-secondary,
+    .btn-social {
+        min-height: 48px;
+    }
+    
+    .checkbox-label input[type="checkbox"] {
+        width: 22px;
+        height: 22px;
+    }
+    
+    .btn-social:hover {
+        transform: none;
+    }
+}
+
+/* Safe Area for Notched Phones */
+@supports (padding: max(0px)) {
+    .auth-container {
+        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
+        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
+        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+    }
+}

static/assets/css/premium.css

@@ -1374,3 +1374,626 @@ body.exam-mode .interview-section.coding-mode .interview-actions {
     flex-shrink: 0;
     margin-top: 1rem;
 }
+
+
+/* ============================================
+   RESPONSIVE DESIGN - Mobile, Tablet, iPad, Laptop
+   ============================================ */
+
+/* Extra Large Screens (1400px+) */
+@media (min-width: 1400px) {
+    .premium-main {
+        max-width: 1400px;
+    }
+    .hero-title {
+        font-size: 72px;
+    }
+}
+
+/* Large Screens / Laptops (1024px - 1399px) */
+@media (max-width: 1399px) {
+    .premium-main {
+        max-width: 1200px;
+    }
+    .hero-title {
+        font-size: 56px;
+    }
+    .results-grid {
+        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    }
+}
+
+/* Tablets / iPad (768px - 1023px) */
+@media (max-width: 1023px) {
+    :root {
+        --spacing-xl: 2rem;
+        --spacing-lg: 1.5rem;
+    }
+    
+    .premium-main {
+        padding-top: 80px;
+        padding-left: var(--spacing-md);
+        padding-right: var(--spacing-md);
+    }
+    
+    .nav-container {
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .brand-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+    
+    .brand-text {
+        font-size: 20px;
+    }
+    
+    .nav-link {
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+    
+    .hero-title {
+        font-size: 42px;
+        letter-spacing: -1px;
+    }
+    
+    .hero-subtitle {
+        font-size: 18px;
+    }
+    
+    .hero-stats {
+        flex-wrap: wrap;
+        gap: var(--spacing-md);
+    }
+    
+    .stat-divider {
+        display: none;
+    }
+    
+    .stat-value {
+        font-size: 28px;
+    }
+    
+    .glass-card {
+        padding: var(--spacing-lg);
+    }
+    
+    .glass-card.large {
+        padding: var(--spacing-lg);
+    }
+    
+    .card-title {
+        font-size: 24px;
+    }
+    
+    .header-icon {
+        width: 56px;
+        height: 56px;
+        font-size: 24px;
+    }
+    
+    .upload-icon {
+        font-size: 48px;
+    }
+    
+    .upload-title {
+        font-size: 20px;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .score-circle {
+        width: 160px;
+        height: 160px;
+    }
+    
+    .score-value {
+        font-size: 40px;
+    }
+    
+    .question-text {
+        font-size: 20px;
+    }
+    
+    .section-title {
+        font-size: 28px;
+    }
+    
+    .results-header {
+        flex-direction: column;
+        gap: var(--spacing-md);
+        align-items: flex-start;
+    }
+    
+    .results-header > div {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* Small Tablets / Large Phones (600px - 767px) */
+@media (max-width: 767px) {
+    :root {
+        --spacing-xl: 1.5rem;
+        --spacing-lg: 1rem;
+        --spacing-md: 0.75rem;
+    }
+    
+    .premium-main {
+        padding-top: 70px;
+        padding-left: var(--spacing-sm);
+        padding-right: var(--spacing-sm);
+    }
+    
+    .nav-container {
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+    
+    .nav-menu {
+        gap: var(--spacing-xs);
+    }
+    
+    .nav-link {
+        padding: var(--spacing-xs);
+    }
+    
+    .nav-link span {
+        display: none;
+    }
+    
+    .nav-user {
+        padding: var(--spacing-xs);
+    }
+    
+    .user-info {
+        display: none;
+    }
+    
+    .user-avatar {
+        width: 36px;
+        height: 36px;
+    }
+    
+    .brand-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 18px;
+    }
+    
+    .brand-text {
+        font-size: 18px;
+    }
+    
+    .hero-section {
+        min-height: auto;
+        padding: var(--spacing-lg) 0;
+    }
+    
+    .hero-title {
+        font-size: 32px;
+        letter-spacing: -0.5px;
+    }
+    
+    .hero-subtitle {
+        font-size: 16px;
+        margin-bottom: var(--spacing-lg);
+    }
+    
+    .hero-badge {
+        font-size: 12px;
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+    
+    .hero-actions {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+    
+    .btn-primary, .btn-secondary {
+        width: 100%;
+        justify-content: center;
+        padding: 14px 24px;
+        font-size: 15px;
+    }
+    
+    .hero-stats {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+        padding: var(--spacing-md);
+    }
+    
+    .stat-item {
+        width: 100%;
+        padding: var(--spacing-sm) 0;
+        border-bottom: 1px solid var(--glass-border);
+    }
+    
+    .stat-item:last-child {
+        border-bottom: none;
+    }
+    
+    .stat-value {
+        font-size: 24px;
+    }
+    
+    .stat-label {
+        font-size: 12px;
+    }
+    
+    .glass-card {
+        padding: var(--spacing-md);
+        border-radius: var(--radius-lg);
+    }
+    
+    .card-header {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--spacing-sm);
+    }
+    
+    .header-icon {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+    
+    .card-title {
+        font-size: 20px;
+    }
+    
+    .card-subtitle {
+        font-size: 14px;
+    }
+    
+    .upload-area {
+        padding: var(--spacing-lg);
+    }
+    
+    .upload-icon {
+        font-size: 40px;
+    }
+    
+    .upload-title {
+        font-size: 18px;
+    }
+    
+    .upload-text {
+        font-size: 14px;
+    }
+    
+    .upload-formats {
+        flex-wrap: wrap;
+    }
+    
+    .format-badge {
+        font-size: 11px;
+        padding: 4px 12px;
+    }
+    
+    /* Interview Section Mobile */
+    .interview-header {
+        flex-direction: column;
+        gap: var(--spacing-md);
+        align-items: center;
+    }
+    
+    .progress-circle {
+        width: 70px;
+        height: 70px;
+    }
+    
+    .progress-number {
+        font-size: 16px;
+    }
+    
+    .timer {
+        font-size: 20px;
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+    
+    .question-tags {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .tag {
+        font-size: 12px;
+        padding: 4px 12px;
+    }
+    
+    .question-text {
+        font-size: 18px;
+        text-align: center;
+    }
+    
+    .answer-input {
+        min-height: 150px;
+        font-size: 15px;
+        padding: var(--spacing-sm);
+    }
+    
+    .interview-actions {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+    
+    .interview-actions button {
+        width: 100%;
+    }
+    
+    /* Results Section Mobile */
+    .results-header {
+        text-align: center;
+    }
+    
+    .section-title {
+        font-size: 24px;
+    }
+    
+    .results-header > div {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+    
+    .results-header button {
+        width: 100%;
+    }
+    
+    .score-circle {
+        width: 140px;
+        height: 140px;
+    }
+    
+    .score-value {
+        font-size: 36px;
+    }
+    
+    .score-label {
+        font-size: 14px;
+    }
+    
+    .recommendation {
+        font-size: 14px;
+        padding: var(--spacing-sm);
+    }
+    
+    .score-name, .score-percent {
+        font-size: 14px;
+    }
+    
+    .insights-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-md);
+    }
+    
+    /* Exam Mode Mobile */
+    body.exam-mode .interview-section {
+        padding: var(--spacing-sm);
+    }
+    
+    body.exam-mode .interview-section .glass-card {
+        max-height: 100vh;
+        padding: var(--spacing-md);
+    }
+    
+    /* Coding Editor Mobile */
+    .coding-language-selector {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-sm);
+    }
+    
+    .language-dropdown {
+        width: 100%;
+    }
+    
+    #codingEditor {
+        min-height: 400px !important;
+    }
+}
+
+/* Extra Small Phones (< 480px) */
+@media (max-width: 479px) {
+    :root {
+        --spacing-sm: 0.75rem;
+        --spacing-xs: 0.375rem;
+    }
+    
+    .premium-main {
+        padding-top: 60px;
+    }
+    
+    .nav-container {
+        padding: var(--spacing-xs);
+    }
+    
+    .brand-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+    }
+    
+    .brand-text {
+        font-size: 16px;
+    }
+    
+    .hero-title {
+        font-size: 26px;
+    }
+    
+    .hero-subtitle {
+        font-size: 14px;
+    }
+    
+    .btn-primary, .btn-secondary {
+        padding: 12px 20px;
+        font-size: 14px;
+    }
+    
+    .glass-card {
+        padding: var(--spacing-sm);
+        border-radius: var(--radius-md);
+    }
+    
+    .card-title {
+        font-size: 18px;
+    }
+    
+    .upload-area {
+        padding: var(--spacing-md);
+    }
+    
+    .upload-icon {
+        font-size: 32px;
+    }
+    
+    .upload-title {
+        font-size: 16px;
+    }
+    
+    .question-text {
+        font-size: 16px;
+    }
+    
+    .answer-input {
+        min-height: 120px;
+        font-size: 14px;
+    }
+    
+    .score-circle {
+        width: 120px;
+        height: 120px;
+    }
+    
+    .score-value {
+        font-size: 32px;
+    }
+    
+    .section-title {
+        font-size: 20px;
+    }
+    
+    .progress-circle {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .progress-number {
+        font-size: 14px;
+    }
+    
+    .timer {
+        font-size: 18px;
+    }
+}
+
+/* iPad Pro and Large Tablets (Portrait) */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+    .hero-title {
+        font-size: 48px;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .hero-actions {
+        flex-direction: row;
+    }
+}
+
+/* iPad Pro and Large Tablets (Landscape) */
+@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
+    .hero-title {
+        font-size: 52px;
+    }
+    
+    .results-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Touch Device Optimizations */
+@media (hover: none) and (pointer: coarse) {
+    .btn-primary:hover,
+    .btn-secondary:hover,
+    .glass-card:hover,
+    .upload-area:hover {
+        transform: none;
+    }
+    
+    .btn-primary, .btn-secondary {
+        min-height: 48px;
+    }
+    
+    .nav-link {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    .upload-area {
+        min-height: 200px;
+    }
+}
+
+/* High DPI / Retina Displays */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .brand-icon,
+    .header-icon,
+    .user-avatar {
+        image-rendering: -webkit-optimize-contrast;
+    }
+}
+
+/* Landscape Mode for Phones */
+@media (max-height: 500px) and (orientation: landscape) {
+    .hero-section {
+        min-height: auto;
+        padding: var(--spacing-md) 0;
+    }
+    
+    .hero-title {
+        font-size: 28px;
+    }
+    
+    .hero-stats {
+        display: none;
+    }
+    
+    body.exam-mode .interview-section .glass-card {
+        max-height: none;
+        overflow: visible;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .premium-bg,
+    .premium-nav,
+    .hero-section,
+    .upload-section,
+    .interview-section,
+    .loading-overlay {
+        display: none !important;
+    }
+    
+    .results-section {
+        display: block !important;
+        padding: 0;
+    }
+    
+    .glass-card {
+        background: white;
+        border: 1px solid #ccc;
+        box-shadow: none;
+    }
+    
+    body {
+        background: white;
+        color: black;
+    }
+}