/* ===== PixyCloud — builds on pano.css design tokens ===== */

/* ---------- Login ---------- */
.cloud-login-page { display: flex; flex-direction: column; min-height: 100vh; }
.cloud-login-page .p360-footer { margin-top: auto; }

.cloud-login-wrap {
    display: flex; justify-content: center;
    padding: 64px 24px 32px;
}
.cloud-login-card {
    width: 100%; max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px 36px 32px;
}
.cloud-login-brand { text-align: center; margin-bottom: 28px; }
.cloud-login-logo { height: 44px; margin-bottom: 10px; }
.cloud-login-brand h1 { font-size: 1.8rem; font-weight: 700; }
.cloud-login-brand h1 .accent { color: var(--accent-red); }
.cloud-login-brand p { color: var(--text-secondary); font-size: 0.92rem; margin-top: 6px; }

.cloud-login-card label {
    display: block; font-weight: 600; font-size: 0.85rem; margin: 16px 0 6px;
}
.cloud-login-card input {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 0.95rem; font-family: inherit;
    color: var(--text-primary);
    background: #fff;
    transition: var(--transition);
}
.cloud-login-card input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(19, 38, 75, 0.12);
}
.cloud-login-btn {
    width: 100%; margin-top: 22px;
    background: var(--primary-blue); color: #fff;
    border: none; border-radius: var(--radius-sm);
    padding: 13px; font-size: 1rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: var(--transition);
}
.cloud-login-btn:hover:not(:disabled) { background: var(--primary-blue-hover); }
.cloud-login-btn:disabled { opacity: 0.7; cursor: wait; }

.cloud-login-error {
    color: var(--accent-red); font-size: 0.85rem; margin-top: 14px;
}
.cloud-newpass-intro { text-align: center; margin-bottom: 6px; }
.cloud-newpass-intro h2 { font-size: 1.25rem; }
.cloud-newpass-intro p { color: var(--text-secondary); font-size: 0.88rem; margin-top: 8px; }
.cloud-login-hint {
    text-align: center; font-size: 0.82rem; color: var(--text-secondary);
    background: #F1F4FA; border: 1px dashed #C3CCDD; border-radius: var(--radius-sm);
    padding: 10px 14px; margin-top: 20px;
}
.cloud-login-foot {
    text-align: center; font-size: 0.8rem; color: var(--text-secondary); margin-top: 22px;
}
.cloud-login-foot a { color: var(--primary-blue); font-weight: 600; text-decoration: none; }

/* ---------- Drive ---------- */
.drive-wrap { padding: 48px 0 64px; }
.drive-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.drive-sub { color: var(--text-secondary); margin-top: 6px; }

.drive-user-chip {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    background: #EEF2F9; border-radius: 999px; padding: 5px 14px;
}
.drive-signout {
    background: none; border: 1px solid var(--card-border);
    border-radius: 999px; padding: 5px 14px;
    font-size: 0.85rem; font-weight: 600; font-family: inherit;
    color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.drive-signout:hover { color: var(--accent-red); border-color: var(--accent-red); }

.drive-demo-banner {
    background: #FFF7E6; border: 1px solid #F0DCA8; color: #7A5C12;
    border-radius: var(--radius-sm); padding: 10px 16px;
    font-size: 0.85rem; margin-bottom: 24px;
}

.drive-tabs {
    display: flex; gap: 10px; margin: 28px 0 24px; flex-wrap: wrap;
}
.drive-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 999px; padding: 10px 22px;
    font-size: 0.95rem; font-weight: 600; font-family: inherit;
    color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.drive-tab:hover { color: var(--text-primary); box-shadow: var(--shadow-sm); }
.drive-tab.is-active {
    background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
    box-shadow: var(--shadow-sm);
}
.drive-tab-icon { font-size: 1.05rem; line-height: 1; }

.drive-status { color: var(--text-secondary); font-size: 0.9rem; padding: 8px 2px; }

.drive-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
}
.drive-empty {
    grid-column: 1 / -1;
    text-align: center; color: var(--text-secondary);
    background: var(--card-bg); border: 1px dashed #C3CCDD;
    border-radius: var(--radius-md); padding: 48px 24px; font-size: 0.95rem;
}

.drive-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: var(--transition); box-shadow: var(--shadow-sm);
}
.drive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.drive-thumb {
    position: relative; aspect-ratio: 2 / 1; overflow: hidden;
    background: #DDE4F0; display: flex; align-items: center; justify-content: center;
}
.drive-thumb--ar { background: linear-gradient(135deg, #13264B 0%, #1A3366 100%); }
.drive-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drive-thumb-icon { font-size: 2.4rem; }
.drive-thumb .badge-360 {
    position: absolute; top: 10px; right: 10px;
    background: rgba(19, 38, 75, 0.85); color: #fff;
    font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    letter-spacing: 0.08em;
}
.drive-thumb--ar .badge-360 { background: rgba(235, 30, 40, 0.9); }

.drive-card-body { padding: 14px 16px 16px; }
.drive-card-body h3 {
    font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drive-card-body p { color: var(--text-secondary); font-size: 0.8rem; margin-top: 2px; min-height: 1.2em; }

.drive-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.drive-btn {
    display: inline-block; text-decoration: none;
    border: 1px solid var(--card-border); border-radius: 999px;
    padding: 7px 16px; font-size: 0.83rem; font-weight: 600;
    color: var(--text-primary); background: #fff;
    cursor: pointer; transition: var(--transition);
}
.drive-btn:hover { box-shadow: var(--shadow-sm); }
.drive-btn--primary {
    background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
}
.drive-btn--primary:hover { background: var(--primary-blue-hover); }
.drive-demo-note { color: var(--text-secondary); font-size: 0.78rem; font-style: italic; }

@media (max-width: 640px) {
    .cloud-login-card { padding: 32px 24px 26px; }
    .drive-user-chip { display: none; }
}