* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

body {
    background-color: #f8faff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: 
        radial-gradient(circle at 20% 5%, rgba(48, 79, 254, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(48, 79, 254, 0.05) 0%, transparent 40%);
}

/* Login/Signup page styles */
.container {
    display: flex;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px;
    max-width: 100%;
}

.train-container {
    flex: 1;
    background-color: #4facfe;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 500px;
}

.login-container {
    flex: 1.5;
    padding: 40px;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    overflow-y: auto;
}

/* Login/signup form styles */
.input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-weight: 500;
    font-size: 14px;
}

input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border 0.3s;
}

input:focus {
    outline: none;
    border-color: #4facfe;
}

.login-btn {
    background-color: #3050a0;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #20397b;
}

.alternative-options {
    margin-bottom: 20px;
    margin-top: 10px;
}

.google-login-btn {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.google-login-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.google-login-btn:active {
    background-color: #f2f2f2;
}

.google-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 48 48"><path fill="%23EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="%234285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="%23FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="%2334A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.google-text {
    margin-left: 4px;
    white-space: nowrap;
}

.signup-link {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 20px;
}

.signup-link a {
    color: #4facfe;
    text-decoration: none;
    font-weight: 500;
}

.signup-link a:hover {
    text-decoration: underline;
}

/* Checkbox styling */
.checkbox-group {
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: auto;
    margin-top: 3px;
}

.checkbox-group label {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
    line-height: 1.4;
}

.terms-link, .privacy-link {
    color: #4facfe;
    text-decoration: none;
    font-weight: 500;
}

.terms-link:hover, .privacy-link:hover {
    text-decoration: underline;
}

.dashboard-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo {
    display: flex;
    align-items: center;
}

.train-logo {
    position: relative;
    width: 40px;
    height: 30px;
    margin-right: 10px;
}

.train-front-mini {
    position: absolute;
    width: 12px;
    height: 18px;
    background-color: #dd2c00;
    border-radius: 4px 8px 4px 4px;
    left: 0;
    top: 6px;
}

.train-body-mini {
    position: absolute;
    width: 28px;
    height: 18px;
    background-color: #304ffe;
    border-radius: 4px;
    left: 8px;
    top: 6px;
}

.train-wheels-mini {
    position: absolute;
    width: 30px;
    height: 6px;
    left: 8px;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

.train-wheels-mini::before, .train-wheels-mini::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
}


.logo h1 {
    color: #333;
    font-size: 20px;
}

.user-button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.user-button:hover {
    background-color: #f5f5f5;
}

.user-button i {
    font-size: 20px;
    color: #304ffe;
}

/* Login/Signup Train Styles */
.train {
    position: relative;
    width: 280px;
    height: 180px;
}

.train-front {
    position: absolute;
    width: 60px;
    height: 70px;
    background-color: #dd2c00;
    border-radius: 10px 30px 10px 10px;
    left: 0;
    top: 40px;
    z-index: 2;
}

.train-headlight {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #ffeb3b;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(255, 235, 59, 0.7);
}

.train-headlight.left {
    top: 15px;
    left: 5px;
}

.train-headlight.right {
    top: 15px;
    right: 5px;
}

.train-body {
    position: absolute;
    width: 200px;
    height: 90px;
    background-color: #3050a0;
    background-image: linear-gradient(to right, #304ffe, #4c6ef5);
    border-radius: 10px;
    left: 55px;
    top: 20px;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.train-window {
    position: absolute;
    width: 80px;
    height: 45px;
    background-color: #e1f5fe;
    border-radius: 10px;
    top: 15px;
    left: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.train-window-frame {
    position: absolute;
    width: 84px;
    height: 49px;
    border: 2px solid #1a237e;
    border-radius: 12px;
    top: 13px;
    left: 58px;
    pointer-events: none;
}

.train-cab {
    position: absolute;
    width: 40px;
    height: 55px;
    background-color: #3949ab;
    border-radius: 5px;
    right: 0;
    top: 55px;
    z-index: 0;
}

.train-connector {
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #424242;
    right: -10px;
    top: 80px;
    z-index: 0;
}

.train-chimney {
    position: absolute;
    width: 25px;
    height: 40px;
    background-color: #dd2c00;
    border-radius: 5px 5px 0 0;
    left: 75px;
    top: -20px;
    z-index: 3;
}

.chimney-top {
    position: absolute;
    width: 35px;
    height: 10px;
    background-color: #bf360c;
    border-radius: 5px;
    top: 0;
    left: -5px;
}

.smoke {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 3;
}

.smoke-1 {
    width: 15px;
    height: 15px;
    left: 5px;
    top: -20px;
    animation: smoke 3s infinite;
}

.smoke-2 {
    width: 20px;
    height: 20px;
    left: 10px;
    top: -25px;
    animation: smoke 3s infinite 0.6s;
}

.smoke-3 {
    width: 18px;
    height: 18px;
    left: 0;
    top: -22px;
    animation: smoke 3s infinite 1.2s;
}

@keyframes smoke {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-30px) scale(1.8);
        opacity: 0;
    }
}

.train-wheels {
    position: absolute;
    width: 230px;
    left: 30px;
    top: 110px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

.wheel {
    width: 35px;
    height: 35px;
    background-color: #212121;
    border-radius: 50%;
    border: 5px solid #616161;
    position: relative;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

.wheel::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #9e9e9e;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wheel::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #9e9e9e;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.front-wheel {
    left: 15px;
    animation: wheelRotate 2s linear infinite;
}

.middle-wheel {
    left: 115px;
    animation: wheelRotate 2s linear infinite;
}

.back-wheel {
    right: 15px;
    animation: wheelRotate 2s linear infinite;
}

.train-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15px;
    background-color: #1a237e;
    border-radius: 0 0 10px 10px;
}

/* Eyes Styles */
.eyes {
    display: flex;
    justify-content: space-around;
    width: 60px;
}

.eye {
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.pupil {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.eyelid {
    position: absolute;
    width: 100%;
    height: 0;
    background-color: #304ffe;
    top: 0;
    left: 0;
    transition: height 0.3s ease;
    z-index: 2;
}

/* Train Hands */
.train-hands {
    position: absolute;
    bottom: 60px;
    left: 40px;
    width: 160px;
    display: flex;
    justify-content: space-between;
}

.hand {
    width: 15px;
    height: 40px;
    background-color: #3050a0;
    border-radius: 8px;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.left-hand {
    transform: rotate(30deg) translateY(20px);
}

.right-hand {
    transform: rotate(-30deg) translateY(20px);
}

.hands-visible .hand {
    opacity: 1;
    transform: rotate(0) translateY(0);
}

/* Eyes closed state */
.eyes-closed .eyelid {
    height: 100%;
    background-color: #304ffe;
}

.eyes-closed .pupil {
    opacity: 0;
}

/* Enhanced animation for closed eyes */
@keyframes closingEyes {
    0% { height: 0; }
    100% { height: 100%; }
}

.eyes-closed .eyelid {
    animation: closingEyes 0.3s forwards;
}

.hands-visible .hand {
    animation: raiseHands 0.4s forwards;
}

@keyframes raiseHands {
    0% {
        opacity: 0;
        transform: rotate(30deg) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

/* Main Content Styles */
.dashboard-main {
    flex: 1;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.welcome-section {
    text-align: center;
    margin-bottom: 30px;
}

.welcome-section h2 {
    color: #1a1a2e;
    font-size: 32px;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.welcome-section p {
    color: #4a4a68;
    font-size: 17px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
}

.app-creation-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 35px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(240, 240, 250, 0.9);
}

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

.description-section label {
    display: block;
    color: #1a1a2e;
    font-weight: 500;
    margin-bottom: 12px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
}

#app-description {
    width: 100%;
    padding: 18px;
    border: 1px solid #e0e0f0;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    resize: vertical;
    min-height: 160px;
    transition: all 0.3s;
    color: #2c2c3d;
    background-color: #fcfcfd;
}

#app-description:focus {
    outline: none;
    border-color: #304ffe;
    box-shadow: 0 0 0 3px rgba(48, 79, 254, 0.1);
    background-color: white;
}

#app-description::placeholder {
    color: #9999aa;
    font-size: 15px;
}

.inspiration-section h3 {
    font-size: 17px;
    color: #1a1a2e;
    margin-bottom: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.inspiration-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

.chip {
    background-color: #f4f6ff;
    border: 1px solid #e2e7ff;
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #304ffe;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
}

.chip i {
    font-size: 14px;
}

.chip:hover {
    background-color: #e9edff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(48, 79, 254, 0.12);
}

.chip.active {
    background-color: #304ffe;
    color: white;
    border-color: #304ffe;
    box-shadow: 0 4px 12px rgba(48, 79, 254, 0.25);
}

.create-app-btn {
    position: relative;
}

.create-app-btn::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -30px;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23f0f4ff"><path d="M320 95.5l0-50.5c0-9.625-5.625-18.5-14.38-22.5s-19-2.125-26.5 4L192 99.75V56c0-13.25-10.75-24-24-24h-32c-13.25 0-24 10.75-24 24v135.1L45.75 245.4C35.75 254.5 30.5 268 32.5 281.5s11.88 25.75 25 30l41.25 13.5c30.75 10 54.75 34.5 64 65.38l13.62 46.75c4.75 12.75 17 21.38 31 21.38h14.38c17.88 0 32.63-14.5 32.25-32.38L252.1 358C251.5 341.2 257.1 324.6 269 313.4l101.9-102c6.25-6.25 9.125-14.88 7.875-23.38L363.5 52c-1.5-10.38-10.75-18-21.25-18s-19.75 7.625-21.25 18l-17.75 94.25c-1.5 8.25 1.5 16.63 7.5 22.5l8.875 8.875L230.8 266.4c-7 7-16.25 10.88-26.1 10.88c-20.5 0-37-16.75-37-37.25c0-10.5 4.25-20.5 11.88-27.88L273 135l5.25 5.125c5.875 5.75 14.25 8 22.1 6.625l-27.25 27.25c-6.25 6.25-6.25 16.25 0 22.5s16.38 6.25 22.63 0l45.38-45.5L320 95.5z"/></svg>');
    background-repeat: no-repeat;
    opacity: 0.5;
    transform: rotate(30deg);
}

.create-app-btn::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: -25px;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23f0f4ff"><path d="M491.6 373.4L385.9 288H344c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h32v64h-32c-35.35 0-64-28.65-64-64v-64c0-35.35 28.65-64 64-64h57.46l68.31-54.65C446.9 207.7 416 176.3 416 136C416 78.4 457.6 32 512 32c0 180.9-205.9 278.1-205.9 278.1C334.2 330.6 365.1 366.7 368 384H240c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h144c0 22.09-17.91 40-40 40l-128 .0002c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16L384 512c52.94 0 96-43.06 96-96v-8h32V248.3l-20.4-15.32L491.6 373.4zM432 456c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24s24 10.74 24 24C456 445.3 445.3 456 432 456zM265.4 140c-14.58 0-24.53-5.223-33.72-10.88c-7.625-4.691-14.19-8.742-24.34-10.1c-6.758-.8398-12.91 3.812-13.85 10.48c-.9453 6.769 3.812 12.94 10.47 13.93c3.957 .4922 6.773 2.1 13.16 6.164c11.48 7.059 28.53 17.41 48.28 17.41c18.14 0 33.04-8.77 45.17-15.7c8.027-4.578 15.82-9.023 22.66-9.023c7.128 0 9.298 1.969 9.298 1.969c.793 .5352 1.432 1.141 1.969 1.77l10.72-10.39C347.4 127.8 335.9 124.1 324.5 124.1c-13.6 0-24.95 6.723-35.32 12.89C279.5 143.5 272.4 140 265.4 140zM371.7 96.22l-10.49 10.15c6.312 6.723 9.459 14.95 9.459 24.34c0 5.812-1.129 11.45-3.371 16.77l12.89 6.047c2.922-6.969 4.48-14.42 4.48-22.82C384.7 117.4 380.1 105.6 371.7 96.22zM328.7 76.43l-10.54 10.2c13.37 14.06 20.07 32.4 20.07 52.06c0 7.242-1.129 14.31-3.266 21.07l12.8 6.047c2.693-8.77 4.145-17.82 4.145-27.12C352 116.4 343.8 93.37 328.7 76.43zM257.3 76.43C242.2 93.37 234 116.4 234 142.7c0 9.297 1.432 18.35 4.145 27.12l12.89-6.047c-2.238-6.758-3.371-13.82-3.371-21.07c0-19.66 6.793-38 20.07-52.06L257.3 76.43zM214.3 96.22c-8.332 9.408-12.94 21.19-12.94 33.52c0 8.395 1.559 15.85 4.48 22.82l12.89-6.047c-2.238-5.324-3.371-10.96-3.371-16.77c0-9.396 3.145-17.62 9.459-24.34L214.3 96.22zM54.39 32C125.2 32 147.9 84.75 147.9 84.75c9.703 18.53 24.25 41.5 39.56 41.5c11.09 0 21.34 7.527 28.38 15.03c7.527-7.504 17.78-15.03 28.88-15.03c23.45 0 39.27-29.3 47.92-45.22c8.156-14.96 25.09-24.28 43.66-24.28C374.6 32 416 78.4 416 136c0 40.26-31.03 71.72-56.16 97.48L416 280v-32h32v32l32 24V32H54.39z"/></svg>');
    background-repeat: no-repeat;
    opacity: 0.5;
    transform: rotate(-15deg);
}

@keyframes wheelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.action-section {
    text-align: center;
    margin-top: 35px;
    position: relative;
}

.create-app-btn {
    background-color: #304ffe;
    color: white;
    border: none;
    padding: 16px 36px;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 20px rgba(48, 79, 254, 0.3);
    position: relative;
    z-index: 1;
    letter-spacing: 0.2px;
}

.create-app-btn i {
    font-size: 20px;
}

.create-app-btn:hover {
    background-color: #1a39da;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(48, 79, 254, 0.4);
}

.create-app-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(48, 79, 254, 0.35);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 79, 254, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(48, 79, 254, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(48, 79, 254, 0);
    }
}

.create-app-btn.pulse {
    animation: pulse 0.6s ease-out;
}

.action-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(48, 79, 254, 0.1), transparent);
    top: -15px;
    left: 0;
}

/* Footer Styles */
.dashboard-footer {
    padding: 20px 0;
    text-align: center;
    color: #888;
    font-size: 14px;
    border-top: 1px solid #eee;
    background-color: white;
}

/* Responsive Styles */
@media (min-width: 1200px) {
    .app-screen {
        width: calc(25% - 15px);
    }
}

@media (max-width: 991px) {
    .app-screen {
        width: calc(50% - 10px);
    }
    
    .container {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        padding: 15px 20px;
    }
    
    .dashboard-main {
        padding: 20px;
    }
    
    .app-creation-card {
        padding: 20px;
    }
    
    .inspiration-chips {
        gap: 8px;
    }
    
    .chip {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* Adjust screen layout for tablets */
    .app-screen {
        width: calc(50% - 10px);
        max-width: 350px;
    }
    
    .screens-container {
        gap: 15px;
        padding: 15px;
    }
    
    .design-animation {
        height: 140px;
    }
    
    .loading-text {
        font-size: 16px;
    }
    
    .loading-container {
        padding: 15px;
    }
    
    /* Login page responsive updates */
    .container {
        flex-direction: column;
        width: 90%;
        max-width: 500px;
        min-height: auto;
    }
    
    .train-container {
        padding: 30px 0;
        min-height: 300px;
    }
    
    .login-container {
        min-height: auto;
        padding: 30px 20px;
    }
    
    .countdown-container {
        flex-wrap: wrap;
        gap: 15px 20px;
    }
    
    .countdown-value {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .user-button span {
        display: none;
    }
    
    .welcome-section h2 {
        font-size: 24px;
    }
    
    .create-app-btn {
        width: 100%;
        justify-content: center;
    }
    
    .app-screen {
        width: 100%;
        max-width: 320px;
    }
    
    .screen-image {
        padding-top: 100%; /* Square images on mobile */
    }
    
    .screens-container {
        gap: 15px;
        padding: 10px;
    }
    
    .design-animation {
        height: 120px;
    }
    
    .loading-text {
        font-size: 14px;
    }
    
    .loading-container {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    .loading-progress {
        max-width: 250px;
    }
    
    /* Login page additional mobile styles */
    .container {
        width: 95%;
        margin: 20px auto;
        border-radius: 15px;
    }
    
    .train-container {
        min-height: 250px;
        border-radius: 15px 15px 0 0;
    }
    
    .train {
        transform: scale(0.8);
    }
    
    .login-container {
        padding: 25px 15px;
        border-radius: 0 0 15px 15px;
    }
    
    .login-container h1 {
        font-size: 24px;
    }
    
    .coming-soon-heading {
        font-size: 22px;
    }
    
    .coming-soon-message {
        font-size: 14px;
    }
    
    .countdown-container {
        gap: 10px;
    }
    
    .countdown-value {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    
    .countdown-label {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .countdown-container {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .countdown-value {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .train {
        transform: scale(0.7);
    }
}

/* App Screens Styles */
.screens-body {
    background-color: #f5f8ff;
    background-image: 
        radial-gradient(circle at 10% 5%, rgba(48, 79, 254, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(48, 79, 254, 0.06) 0%, transparent 40%);
}

/* Fullscreen Modal Styles */
.fullscreen-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fullscreen-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fullscreen-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.fullscreen-modal.active #fullscreen-image {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: -40px;
    right: -40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.close-modal:hover {
    transform: scale(1.2);
}

.modal-title {
    color: white;
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.screens-main {
    padding-bottom: 50px;
}

/* Loading Animation */
.loading-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 5;
    transition: background-color 1s ease;
}

.loading-container.design-mode {
    background-color: #f9faff;
}

.design-animation {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 80px; /* Reduced by 50% from 160px to 80px */
    background: #f4f6ff; /* Changed to blueprint color */
    border-radius: 8px;
    border: 1px solid rgba(48, 79, 254, 0.2);
    margin-bottom: 20px;
    overflow: hidden;
}

.blueprint {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f4f6ff;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.blueprint.active {
    opacity: 1;
}

.review-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.design-mode .review-layer {
    opacity: 0;
}

.review-item {
    height: 18px;
    background-color: #f0f4ff;
    border-radius: 4px;
    margin-bottom: 15px;
    position: relative;
    animation: reviewScan 6s infinite; /* Slowed down by 50% (from 3s to 6s) */
}

.review-item:nth-child(1) {
    width: 85%;
    animation-delay: 0s;
}

.review-item:nth-child(2) {
    width: 65%;
    animation-delay: 1s; /* Doubled delay (from 0.5s to 1s) */
}

.review-item:nth-child(3) {
    width: 75%;
    animation-delay: 2s; /* Doubled delay (from 1s to 2s) */
}

.review-highlight {
    position: absolute;
    height: 22px;
    background-color: rgba(48, 79, 254, 0.1);
    border: 1px solid rgba(48, 79, 254, 0.3);
    border-radius: 4px;
    width: 120px;
    top: 15px;
    left: 50px;
    animation: highlightMove 8s infinite; /* Slowed down by 50% (from 4s to 8s) */
}

.blueprint-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(48, 79, 254, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 79, 254, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridMove 40s linear infinite; /* Slowed down by 50% (from 20s to 40s) */
}

.blueprint-element {
    position: absolute;
    background-color: rgba(48, 79, 254, 0.2);
    border: 1px solid rgba(48, 79, 254, 0.4);
    border-radius: 4px;
    opacity: 1; /* Make visible immediately */
}

.blueprint-element.header {
    top: 5px;
    left: 10px;
    width: calc(100% - 20px);
    height: 15px;
}

.blueprint-element.box1 {
    top: 25px;
    left: 10px;
    width: 25%;
    height: 35px;
}

.blueprint-element.box2 {
    top: 25px;
    left: 40%;
    width: 25%;
    height: 20px;
}

.blueprint-element.box3 {
    top: 25px;
    right: 10px;
    width: 25%;
    height: 20px;
}

.blueprint-element.line1 {
    top: 65px;
    left: 10px;
    width: 30%;
    height: 3px;
}

.blueprint-element.line2 {
    top: 65px;
    left: 45%;
    width: 30%;
    height: 3px;
}

.blueprint-element.circle {
    bottom: 10px;
    right: 20px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.tools {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tool-cursor {
    position: absolute;
    width: 15px;
    height: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23304ffe"><path d="M13.1,4.9l-8,8C5,13,4.8,13,4.7,12.9l-2.7-2.7c-0.1-0.1-0.1-0.3,0-0.4l8-8c0.1-0.1,0.3-0.1,0.4,0l2.7,2.7C13.2,4.6,13.2,4.8,13.1,4.9z"/><path d="M8,2L8,2C7.5,1.9,7,2.1,6.7,2.4L2.4,6.7C2.1,7,1.9,7.5,2,8l0,0c0.1,0.5,0.5,0.9,1,1h0c0.5,0.1,1.1-0.1,1.4-0.4l4.3-4.3C9,3.9,9.2,3.4,9.1,2.9l0,0C9,2.5,8.5,2.1,8,2z"/></svg>');
    background-repeat: no-repeat;
    animation: moveCursor 8s infinite; /* Animation speed value */
    opacity: 1; /* Make it visible */
}

.tool-ruler {
    position: absolute;
    width: 80px;
    height: 15px;
    background-color: rgba(255, 152, 0, 0.7);
    border-radius: 2px;
    transform-origin: center left;
    animation: useRuler 8s infinite; /* Animation speed */
    opacity: 1; /* Make it visible */
}

.tool-pencil {
    position: absolute;
    width: 3px;
    height: 18px;
    background-color: #304ffe;
    transform: rotate(45deg);
    animation: usePencil 8s infinite; /* Animation speed */
    opacity: 1; /* Make it visible */
}

.tool-pencil::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 7px;
    height: 7px;
    background-color: #304ffe;
    transform: rotate(45deg);
}

.process-container {
    display: none;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 25px;
    background-color: #f4f6ff;
    border-radius: 30px;
    animation: fadeIn 0.5s ease-in-out;
}

.process-container.active {
    display: flex;
}

.process-icon {
    width: 50px;
    height: 50px;
    background-color: #304ffe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 20px;
    animation: pulseStep 2s infinite;
}

.process-text {
    font-size: 18px;
    color: #304ffe;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.loading-text-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: #f4f6ff;
    padding: 8px 15px;
    border-radius: 20px;
}

.loading-text {
    color: #1a1a2e;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

.loading-dots {
    display: inline-flex;
}

.dot {
    opacity: 0;
    animation: dotFade 1.5s infinite;
    font-size: 20px;
    line-height: 1;
    color: #304ffe;
}

.dot1 {
    animation-delay: 0s;
}

.dot2 {
    animation-delay: 0.3s;
}

.dot3 {
    animation-delay: 0.6s;
}

.loading-progress {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background-color: rgba(48, 79, 254, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.loading-progress-bar {
    height: 100%;
    width: 30%;
    background-color: #304ffe;
    border-radius: 3px;
    transition: width 0.3s ease-out;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
    /* Animation speed is controlled by animation-duration in the element */
}

@keyframes elementAppear {
    0% { opacity: 0; transform: scale(0.95); }
    15% { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes moveCursor {
    0%, 10% { opacity: 0; left: 30%; top: 30px; }
    15% { opacity: 1; left: 30%; top: 30px; }
    20% { left: 15%; top: 30px; }
    25% { left: 15%; top: 80px; }
    30% { left: 50%; top: 80px; }
    40% { left: 50%; top: 110px; }
    45% { left: 25%; top: 110px; }
    55% { left: 25%; top: 130px; }
    65% { left: 70%; top: 130px; }
    75% { opacity: 1; left: 70%; top: 60px; }
    80%, 100% { opacity: 0; left: 70%; top: 60px; }
}

@keyframes useRuler {
    0%, 20% { opacity: 0; top: 70px; left: 15%; transform: rotate(0deg); }
    25% { opacity: 1; top: 70px; left: 15%; transform: rotate(0deg); }
    30% { top: 70px; left: 15%; transform: rotate(0deg); }
    35% { top: 70px; left: 15%; transform: rotate(90deg); }
    40% { opacity: 1; top: 70px; left: 50%; transform: rotate(90deg); }
    45%, 100% { opacity: 0; top: 70px; left: 50%; transform: rotate(90deg); }
}

@keyframes usePencil {
    0%, 45% { opacity: 0; top: 120px; left: 30%; }
    50% { opacity: 1; top: 120px; left: 30%; }
    55% { top: 120px; left: 45%; }
    60% { top: 130px; left: 20%; }
    65% { opacity: 1; top: 130px; left: 40%; }
    70%, 100% { opacity: 0; top: 130px; left: 40%; }
}

@keyframes dotFade {
    0%, 25% { opacity: 0; }
    50% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

@keyframes progressGrow {
    0% { width: 0%; }
    40% { width: 40%; }
    60% { width: 60%; }
    80% { width: 75%; }
    100% { width: 95%; }
}

@keyframes pulseStep {
    0%, 100% { box-shadow: 0 0 0 0 rgba(48, 79, 254, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(48, 79, 254, 0); }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes reviewScan {
    0% { background-color: #f0f4ff; }
    50% { background-color: #e0e8ff; }
    100% { background-color: #f0f4ff; }
}

@keyframes highlightMove {
    0%, 20% { left: 30px; top: 15px; width: 120px; }
    30%, 45% { left: 100px; top: 15px; width: 80px; }
    55%, 70% { left: 50px; top: 50px; width: 100px; }
    80%, 100% { left: 150px; top: 50px; width: 60px; }
}

/* App Screens */
.screens-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.app-screen {
    width: calc(33.33% - 20px);
    max-width: 320px;
    min-width: 270px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.5s ease;
    transform: translateY(50px);
    opacity: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* New screen design from API response */
.new-screen {
    display: flex;
    flex-direction: column;
    transform: scale(0.98);
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(48, 79, 254, 0.15);
    transition: all 0.3s ease;
    background-color: white;
    overflow: hidden;
}

.screen-image {
    width: calc(100% - 10px);
    position: relative;
    padding-top: 177.78%; /* 9:16 aspect ratio (mobile portrait) */
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    margin: 5px 5px 0 5px;
}

.screen-image::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23304ffe"><path d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.screen-image:hover::after {
    opacity: 1;
}

.screen-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    background-color: #f8faff;
}

.new-screen .screen-content {
    padding: 12px 10px 15px;
    display: flex;
    flex-direction: column;
    background-color: white;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(48, 79, 254, 0.1);
    width: calc(100% - 10px);
    margin: 0 5px 5px 5px;
}

.screen-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a1a2e;
    font-family: 'Poppins', sans-serif;
    position: relative;
    display: inline-block;
}

.screen-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 30px;
    background-color: #304ffe;
    border-radius: 2px;
}

.new-screen .screen-description {
    color: #4a4a68;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 54px;
}

.feedback-btn {
    background-color: #304ffe;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(48, 79, 254, 0.25);
    margin-top: auto;
}

.feedback-btn:hover {
    background-color: #1a39da;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(48, 79, 254, 0.3);
}

.feedback-btn i {
    font-size: 14px;
}

.error-message {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    background-color: #fff0f0;
    border-radius: 12px;
    color: #e53935;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.app-screen.visible {
    transform: translateY(0);
    opacity: 1;
}

.new-screen.visible {
    transform: scale(1);
    opacity: 1;
}

.app-screen:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(48, 79, 254, 0.15);
}

.new-screen:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(48, 79, 254, 0.2);
}

.new-screen:hover .screen-image img {
    transform: scale(1.08);
}

.new-screen:hover .screen-title::after {
    width: 60px;
}

.screen-header {
    background-color: #304ffe;
    color: white;
    padding: 15px 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px 10px 0 0;
}

.screen-header i {
    font-size: 20px;
}

.screen-content {
    padding: 20px;
}

.screen-description {
    color: #444;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.screen-mockup {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    height: 180px;
    background-color: #f5f8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.mockup-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mockup-header {
    background-color: #304ffe;
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mockup-title {
    color: white;
    font-size: 12px;
    font-weight: 500;
}

.mockup-actions {
    display: flex;
    gap: 8px;
}

.mockup-action {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
}

.mockup-body {
    flex: 1;
    background-color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mockup-item {
    height: 14px;
    background-color: #e6ebff;
    border-radius: 3px;
}

.mockup-item.short {
    width: 40%;
}

.mockup-item.medium {
    width: 70%;
}

.mockup-item.long {
    width: 90%;
}

.mockup-footer {
    height: 40px;
    background-color: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
}

.mockup-nav-item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ddd;
}

.screen-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafbff;
    border-radius: 0 0 10px 10px;
}

.screen-number {
    font-size: 13px;
    color: #777;
    font-family: 'Inter', sans-serif;
}

.screen-icon {
    width: 30px;
    height: 30px;
    background-color: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #304ffe;
}