body { margin:0; font-family:Arial, sans-serif; background:#fff; color:#333; }
.topbar { padding:10px 20px; font-size:0.9rem; background:#f8f9fa; border-bottom:1px solid #ddd;
          display:flex; justify-content:space-between; align-items:center; }
.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.topbar-left {
    justify-self: start;
}

.topbar-center {
    justify-self: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.topbar-right {
    justify-self: end;
    font-size: 0.9rem;
}

.logout-button {
    background: none;
    border: none;
    color: #4285f4;
    cursor: pointer;
    font-size: 0.9rem;
}

.subpage-title {
    display: block;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

.content { min-height:70vh; padding:20px; }
.footer { text-align:center; font-size:0.6rem; color:#666; padding:15px; border-top:1px solid #eee; background:#fafafa; }
/* Default (Desktop) */
.logo {
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
}

/* Tablet */
@media (max-width: 992px) {
    .logo {
        font-size: 1.6rem;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .logo {
        font-size: 1.3rem;
    }
    .topbar {
        grid-template-columns: 1fr auto; /* shrink layout */
        grid-template-rows: auto auto;   /* stack title */
        text-align: center;
    }
    .topbar-center {
        grid-column: 1 / span 2;
        margin-top: 8px;
        font-size: 1.2rem;
    }
}

.logo span {
    font-weight: bold;
}
.logo .v { color: #4285F4; }   /* Google blue */
.logo .i { color: #DB4437; }   /* Google red */
.logo .c { color: #F4B400; }   /* Google yellow */
.logo .s { color: #0F9D58; }   /* Google green */
.logo .k { color: #DB4437; }   /* Red again */
.logo .y { color: #4285F4; }   /* Blue again */
.logo .dot { color: #F4B400; } /* Yellow for dot */
.logo .ca { color: #0F9D58; }  /* Green for "ca" */

.back-arrow {
    font-size: 1.5rem;
    color: #4285f4;
    text-decoration: none;
    transition: transform 0.2s;
}

.back-arrow:hover {
    transform: translateX(-3px);
    text-decoration: none;
}