/* Inter Local Font Face */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/inter/Inter-Light.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2");
}

* { font-family: 'Inter', sans-serif; }
.hero-bg { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)); background-size: cover; background-position: center; background-attachment: fixed; }
.input-field { background: rgba(255, 255, 255, 0.9); border: none; transition: all 0.3s ease; }
.input-field:focus { background: rgba(255, 255, 255, 1); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3); }
.btn-primary { background: linear-gradient(135deg, #22c55e, #16a34a); transition: all 0.3s ease; }
.btn-primary:hover { background: linear-gradient(135deg, #16a34a, #15803d); transform: translateY(-1px); }
.social-icon { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; }
.social-icon:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.form-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
.slide-in { animation: slideIn 0.5s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.photo-credit { position: fixed; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.4); color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; z-index: 1000; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.photo-credit:hover { background: rgba(0, 0, 0, 0.8); transform: translateY(-2px) scale(1.1); border-color: rgba(255,255,255,0.4); }
@media (max-width: 768px) { .hero-bg { background-attachment: scroll; } .photo-credit { display: none; } .hide-mobile { display: none !important; } }
.hidden { display: none !important; }
.login-error, .success-message { display: none; padding: 10px; margin-bottom: 15px; border-radius: 5px; color: white; }
.login-error { background: rgba(220, 53, 69, 0.2); border: 1px solid rgba(220, 53, 69, 0.5); }
.success-message { background: rgba(40, 167, 69, 0.2); border: 1px solid rgba(40, 167, 69, 0.5); }
.telegram-login-button { width: 100%; margin-top: 10px; display: flex; justify-content: center; }
#photoCreditModal.hidden #modalContent { transform: scale(0.95); opacity: 0; }
#modalContent { transition: transform 0.2s ease-out, opacity 0.2s ease-out; }

/* SVG icon styles */
.svg-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.svg-icon-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* PWA Install Banner */
.pwa-install-banner { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #16a34a, #22c55e); color: white; padding: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.2); z-index: 9999; transform: translateY(100%); transition: transform 0.3s ease; display: none; }
.pwa-install-banner.show { transform: translateY(0); display: block; }
.pwa-banner-content { display: flex; align-items: center; gap: 12px; max-width: 500px; margin: 0 auto; }
.pwa-banner-icon { width: 48px; height: 48px; background: white; border-radius: 12px; padding: 8px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; }
.pwa-banner-title { font-weight: 600; font-size: 15px; margin: 0 0 4px 0; }
.pwa-banner-subtitle { font-size: 13px; opacity: 0.9; margin: 0; }
.pwa-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pwa-banner-btn { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.pwa-banner-install { background: white; color: #16a34a; }
.pwa-banner-install:hover { background: #f0fdf4; }
.pwa-banner-close { background: rgba(255,255,255,0.2); color: white; }
.pwa-banner-close:hover { background: rgba(255,255,255,0.3); }
@media (min-width: 769px) { .pwa-install-banner { display: none !important; } }

/* Saved Account - Ultra Minimalist */
.account-card { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 32px; 
    padding: 30px; 
    text-align: center; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer; 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.account-card:hover { 
    background: rgba(255, 255, 255, 0.1); 
    transform: scale(1.05); 
    border-color: rgba(255, 255, 255, 0.3);
}
.account-photo-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 12px;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}
.account-card:hover .account-photo-container {
    border-color: #22c55e;
    transform: scale(1.1);
}
.account-photo { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    object-fit: cover; 
}
.account-name { 
    color: white; 
    font-weight: 600; 
    font-size: 1.1rem; 
    opacity: 0.9;
}
.remove-account-btn { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    color: rgba(255,255,255,0.4); 
    font-size: 0.9rem;
    transition: all 0.2s; 
}
.remove-account-btn:hover { 
    color: #ef4444; 
    transform: scale(1.2); 
}
.btn-use-other {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    transition: all 0.3s;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.btn-use-other:hover {
    color: white;
    opacity: 1;
}