:root{--primary-color: #ff9000;--secondary-color: #1a1a1a;--footer-color: #0d0d0d;--background-color: #0f0f0f;--card-background: #222222;--text-primary: #ffffff;--text-secondary: #b3b3b3;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--card-min-width: 350px;--accent-color: #ff9000;--border-color: #333333;--hover-color: #ffa31a} body{font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12pt;color: var(--text-primary);background-color: var(--background-color)} .tekstboxid{font-size: 12px;font-family: verdana,arial;background-color: var(--secondary-color);color: var(--text-primary);border: 1px solid var(--border-color)} .button{font-size: 12px;font-family: verdana,arial;background-color: var(--secondary-color);color: var(--text-primary);border: 1px solid var(--border-color);font-weight: bold;cursor: pointer;transition: background-color 0.2s ease} .button:hover{background-color: var(--card-background)} *{margin: 0;padding: 0;box-sizing: border-box} body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height: 1.6;background-color: var(--background-color);color: var(--text-primary)} nav{position: fixed;top: 0;left: 0;right: 0;background-color: var(--secondary-color);border-bottom: 2px solid var(--primary-color);z-index: 1000;height: 60px;display: flex;align-items: center;padding: 0 1rem} .nav-left{position: relative} .nav-center{position: absolute;left: 50%;transform: translateX(-50%)} .logo{color: var(--primary-color);font-weight: 600;font-size: 0.95rem;text-decoration: none} .hamburger{padding: 0;width: 20px;height: 16px;background: none;border: none;cursor: pointer;display: flex;flex-direction: column;justify-content: space-between} .hamburger span{display: block;width: 100%;height: 1px;background-color: var(--primary-color);transition: 0.2s ease} .nav-items{display: flex;gap: 1.5rem;align-items: center} .nav-items a{color: var(--text-primary);text-decoration: none;font-size: 0.9rem;transition: color 0.2s ease} .nav-items a:hover{color: var(--primary-color)} .grid-container{max-width: 800px;margin: 0 auto;padding: var(--spacing-sm);display: flex;flex-direction: column;gap: 1rem;padding-top: calc(60px + 1rem)} .card.block-style{position: relative;min-width: 280px;width: 100%;padding: 1rem;background: var(--card-background);border-radius: 6px;box-shadow: 0 1px 3px rgba(0,0,0,0.05);border: 1px solid var(--border-color);max-width: 800px;margin: 0 auto 12px;display: flex;flex-direction: column} .card-content{width: 100%;display: flex;flex-direction: column;gap: 1rem} .card-layout{display: flex;gap: 1rem;width: 100%;align-items: flex-start} .card-image{flex-shrink: 0;width: 100px;height: 100px;border-radius: 4px;overflow: hidden;background: #2d2d2d} .card-image img{width: 100%;height: 100%;object-fit: cover} .info-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(120px,1fr));gap: 0.5rem;flex: 1;min-width: 0;order: 1;align-self: flex-start} .card-layout.no-image .info-grid{flex: 1;width: 100%} .info-item{display: flex;flex-direction: column;margin-bottom: 4px;line-height: 1.3;min-width: 0;width: 100%} .info-item b{color: var(--primary-color);font-size: 0.85rem;display: inline-block;min-width: 60px;margin-bottom: 0.25rem} .info-item:first-child{word-break: break-word;hyphens: auto;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} @media (max-width: 480px){.info-item:first-child{white-space: normal;word-break: break-word;hyphens: auto} } .info-item span{white-space: normal;word-wrap: break-word;overflow-wrap: break-word;flex: 1;min-width: 0} .info-item.full-width{grid-column: 1 / -1;margin: 0.5rem 0;padding: 0.5rem;background: #2d2d2d;border-radius: 4px;font-size: 0.9rem;white-space: pre-wrap;overflow-wrap: break-word;display: flex;flex-direction: column;width: 100%} .info-item.full-width b{margin-bottom: 0.25rem} .info-item.full-width span{white-space: pre-wrap} .contact-info{grid-column: 1 / -1;margin: 0.5rem 0;padding: 0.5rem;background: #2d2d2d;border-radius: 4px;font-size: 0.9rem} .interaction-bar,.interaction-stats,.action-buttons,.action-btn,.stat-item{display: none !important} .info-item.timestamp{grid-column: 1 / -1;text-align: center;color: var(--text-secondary);font-size: 0.8rem;margin: 0.5rem 0;padding: 0.25rem;background: rgba(45,45,45,0.3);border-radius: 4px} .info-item.timestamp b{color: var(--text-secondary);font-weight: 500;margin-right: 0.5rem} .info-item.timestamp span{color: var(--text-secondary);opacity: 0.8} @media (max-width: 768px){.card-layout{flex-direction: column} .card-image{width: 100%;height: 200px} .profile-img{max-width: 150px;max-height: 150px} .info-grid{grid-template-columns: 1fr} .interaction-bar{flex-direction: column;gap: 0.5rem;align-items: flex-start} .timestamp{order: -1} } .profile-image{display: flex;justify-content: center;align-items: center;flex: 0 0 auto;width: 160px;height: 160px;order: 2;position: relative;align-self: center} .profile-img{width: 160px !important;height: 160px !important;border-radius: 8px;object-fit: cover !important;object-position: center !important;border: 2px solid var(--border-color);box-shadow: 0 2px 8px rgba(0,0,0,0.3)} .image-placeholder{width: 160px;height: 160px;background: linear-gradient(135deg,#2d2d2d 0%,#1a1a1a 100%);border-radius: 8px;border: 2px solid var(--border-color);display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 8px rgba(0,0,0,0.3);position: relative;overflow: hidden} .image-placeholder::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 60px;height: 60px;background: var(--primary-color);border-radius: 50%;opacity: 0.1} .image-placeholder::after{content: '💕';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 2.5rem;opacity: 0.6} .placeholder-icon{font-size: 2rem;color: var(--text-secondary);opacity: 0.3} .image-placeholder.person::after{content: '👤';font-size: 3rem} .image-placeholder.heart::after{content: '💕';font-size: 2.5rem} .card-image,.card-btn{display: none} footer{flex-shrink: 0;background-color: var(--footer-color);padding: var(--spacing-md);border-top: 2px solid var(--primary-color)} .footer-content{max-width: 900px;margin: 0 auto;display: flex;justify-content: center;align-items: center;gap: var(--spacing-md)} .footer-left,.footer-right{display: flex;align-items: center;gap: var(--spacing-md)} .footer-right a{color: var(--primary-color);text-decoration: none;font-weight: 500;transition: color 0.2s ease} .footer-right a:hover{color: var(--primary-color-hover,#0056b3);text-decoration: underline} @media (max-width: 480px){.footer-content{flex-direction: column;text-align: center;gap: var(--spacing-md)} } @media (max-width: 768px){.nav-links{display: flex;justify-content: space-between;width: 100%;padding: 0 1rem} .logo{order: 1} .hamburger{order: 3} .nav-right{position: relative} .nav-items{display: none;position: absolute;top: 100%;right: 0;background-color: var(--secondary-color);border: 2px solid var(--primary-color);border-top: none;min-width: 200px;z-index: 1000} .nav-items.active{display: block} .nav-items a{display: block;padding: 0.75rem 1.5rem;color: var(--text-primary);text-decoration: none;transition: all 0.2s ease} .nav-items a:hover{background-color: #333;color: var(--primary-color)} .footer-content{flex-direction: column;text-align: center;gap: var(--spacing-md)} .card{flex-direction: row} .card-image{width: 100px;height: 100px} body.menu-open{overflow: hidden} } .hamburger{display: block;width: 30px;height: 20px;position: relative;background: none;border: none;cursor: pointer;padding: 0} .hamburger span{display: block;width: 100%;height: 2px;background-color: var(--primary-color);position: absolute;transition: all 0.3s ease} .hamburger span:first-child{top: 0} .hamburger span:nth-child(2){top: 50%;transform: translateY(-50%)} .hamburger span:last-child{bottom: 0} .hamburger.active span:first-child{transform: rotate(45deg);top: 50%} .hamburger.active span:nth-child(2){opacity: 0} .hamburger.active span:last-child{transform: rotate(-45deg);bottom: 40%} @media (min-width: 768px){.hamburger{display: none} } main{flex: 1 0 auto} .nav-items{display: none;position: absolute;top: 100%;left: 0;right: 0;background-color: var(--secondary-color);padding: var(--spacing-md);box-shadow: 0 2px 5px rgba(0,0,0,0.1);border: 1px solid var(--border-color)} .footer-content span{margin: 0;padding: 0} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px)} to{opacity: 1;transform: translateY(0)} } .status-badge{position: absolute;top: 0.5rem;left: 0.5rem;padding: 0.2rem 0.5rem;font-size: 0.7rem;border-radius: 4px;white-space: nowrap;z-index: 1;font-weight: 500} .status-badge{background: #2d2d2d;color: var(--primary-color);border: 1px solid var(--primary-color)} .loading-indicator{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 2rem;gap: 1rem;background: var(--card-background);border-radius: 8px;border: 1px solid var(--border-color);margin: 1rem 0} .loading-spinner{width: 40px;height: 40px;border: 4px solid var(--border-color);border-top: 4px solid var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .loading-indicator span{color: var(--text-secondary);font-size: 0.9rem} .status-badge.pending{background: #2d2d2d;color: #ffd700;border: 1px solid #ffd700} .status-badge.inactive{background: #2d2d2d;color: #ff4444;border: 1px solid #ff4444} @media (max-width: 350px){.info-grid{grid-template-columns: 1fr} } .nav-items{display: flex;gap: 1.5rem} @media (min-width: 769px){.nav-items{display: flex !important;position: static;border: none;padding: 0;background: none} }  .logo-section{flex: 1} .logo{color: var(--primary-color) !important;font-weight: 600;font-size: 1.2rem;text-decoration: none} .menu-section{display: flex;align-items: center} .nav-items{display: flex;gap: 1.5rem} @media (max-width: 480px) and (max-height: 950px){.info-item:nth-child(1),.info-item:nth-child(2),.info-item:nth-child(3){display: block !important;width: 100% !important;margin-right: 0 !important;margin-bottom: 0.5rem !important;white-space: normal !important;overflow: visible !important;text-overflow: clip !important} .info-item:nth-child(1){order: 1 !important} .info-item:nth-child(2){order: 2 !important} .info-item:nth-child(3){order: 3 !important} } @media (max-width: 768px){nav{position: fixed} .grid-container{padding: 0.5rem !important;padding-top: calc(60px + 0.5rem) !important;margin: 0 !important} .profile-cards{width: 100% !important;margin: 0 !important} .card{margin: 0.5rem 0 !important;width: 100% !important;box-sizing: border-box !important} .info-item:nth-child(1),.info-item:nth-child(2),.info-item:nth-child(3){display: block !important;width: 100% !important;margin-right: 0 !important;margin-bottom: 0.25rem !important}  .nav-items{display: none;margin-top: 1rem;flex-direction: column;gap: 0;height: auto;opacity: 0;transition: opacity 0.3s ease} .nav-items.active{display: flex;opacity: 1} .nav-items a{display: block;padding: 0.75rem 0;color: var(--text-primary);text-decoration: none;text-align: center;border-top: 1px solid var(--border-color);transition: background-color 0.2s ease} .nav-items a:last-child{border-bottom: 1px solid var(--border-color)} .menu-section{justify-content: flex-end}  body.menu-open{overflow: visible} .nav-items{position: static;width: 100%;box-shadow: none} } @media (min-width: 769px){.hamburger{display: none} } nav{position: fixed;top: 0;left: 0;right: 0;background-color: var(--secondary-color);border-bottom: 2px solid var(--primary-color);z-index: 1000;height: 60px}   .nav-items{display: flex;gap: 1.5rem;align-items: center} .nav-items a{color: var(--text-primary);text-decoration: none;font-size: 0.9rem;transition: color 0.2s ease} .nav-items a:hover{color: var(--primary-color)} @media (max-width: 768px){ .hamburger{order: 1;padding: 0;width: 20px;height: 16px;background: none;border: none;cursor: pointer;display: flex;flex-direction: column;justify-content: space-between} .hamburger span{display: block;width: 100%;height: 1px;background-color: var(--primary-color);transition: 0.2s ease} .logo{order: 2;font-size: 0.95rem;color: var(--primary-color);text-decoration: none;font-weight: 600} .nav-items{display: none;flex-direction: column;opacity: 0;transition: opacity 0.2s ease} .nav-items.active{display: flex;opacity: 1} .nav-items a{display: block;padding: 0.4rem 0;text-align: center;border-top: 1px solid rgba(255,255,255,0.1)} .nav-items a:last-child{border-bottom: 1px solid rgba(255,255,255,0.1)} } @media (min-width: 769px){.hamburger{display: none}  .nav-items{margin-left: auto} } main{margin-top: 60px;padding-top: 1rem} .email-cards{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 1.5rem;padding: 1rem} #last-updated{color: #666;font-size: 0.9rem;margin-left: 1rem} .sms-action{background: #f8f9fa;padding: 1rem;margin: 1rem 0;border-radius: 4px;text-align: center} .sms-action p{margin: 0;font-size: 1.1rem;color: #333} .sms-action strong{color: #4CAF50;font-weight: 600} .email-link{color: #0066cc;text-decoration: none;word-break: keep-all;white-space: nowrap;overflow: visible} .email-link:hover{text-decoration: underline} .post-content{white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;line-height: 1.5;padding: 0.5rem;background: #2d2d2d;border-radius: 4px;margin-top: 0.5rem} .info-item{margin-bottom: 8px;line-height: 1.4} .info-item.full-width{width: 100%;margin-top: 0.5rem} .info-item b{color: var(--primary-color);font-size: 0.85rem;display: inline-block;margin-right: 4px;min-width: 80px} @media (max-width: 768px){.card-layout{flex-direction: column;gap: 1rem} .profile-image{order: 1;width: 100%;height: auto;min-height: 120px;display: flex;justify-content: center;align-items: center;padding: 0.5rem;background: linear-gradient(135deg,#2d2d2d 0%,#1a1a1a 100%);border-radius: 8px} .profile-img{width: 120px !important;height: 120px !important;border-radius: 8px;object-fit: cover !important} .info-grid{order: 2;width: 100%} .info-item:nth-child(1),.info-item:nth-child(2),.info-item:nth-child(3){display: inline-block;width: calc(33.333% - 0.25rem);margin-right: 0.25rem;vertical-align: top;margin-bottom: 0.5rem} .info-item:nth-child(3){margin-right: 0} .info-item:nth-child(1){order: 1} .info-item:nth-child(2){order: 2} .info-item:nth-child(3){order: 3} .info-item.contact-info{order: 4} .info-item.full-width{order: 5} .info-item.timestamp{order: 6;text-align: center;opacity: 0.7;margin-top: 0.5rem;padding-top: 0.5rem;border-top: 1px solid var(--border-color)} } .empty-state{display: flex;justify-content: center;align-items: center;min-height: calc(100vh - 45px - 34px);padding: 2rem;text-align: center} .empty-state-content{max-width: 600px;background: var(--card-background);border: 1px solid var(--border-color);border-radius: 12px;padding: 1.5rem 1.25rem;box-shadow: 0 4px 20px rgba(0,0,0,0.1)} .empty-state-title{color: var(--primary-color);font-size: 2rem;font-weight: 600;margin-bottom: 0.75rem;line-height: 1.3} .empty-state-description{color: var(--text-secondary);font-size: 1.1rem;line-height: 1.6;margin-bottom: 1.5rem;max-width: 500px;margin-left: auto;margin-right: auto} .empty-state-suggestions{background: linear-gradient(135deg,var(--secondary-color),var(--card-background));border-radius: 8px;padding: 0.75rem;margin-bottom: 1rem;text-align: left} .empty-state-suggestions h3{color: var(--primary-color);margin-bottom: 0.5rem;font-size: 1.2rem;font-weight: 600;text-align: left;margin-left: 0;margin-right: 0} .empty-state-suggestions ul{list-style: none;padding: 0;margin: 0;text-align: left} .empty-state-suggestions li{padding: 0.5rem 0;border-bottom: 1px solid rgba(255,255,255,0.1);color: var(--text-primary);line-height: 1.5;text-align: left;margin-left: 0;margin-right: 0} .empty-state-suggestions li strong{color: var(--primary-color);font-weight: 600;display: block;margin-bottom: 0.25rem} .empty-state-suggestions li:last-child{border-bottom: none} .empty-state-stats{display: flex;justify-content: center;gap: 2rem;margin-top: 1rem} .stat-item{text-align: center;padding: 1rem;background: var(--secondary-color);border-radius: 8px;border: 1px solid var(--border-color);min-width: 120px} .stat-number{font-size: 1.2rem;font-weight: 600;color: var(--primary-color);margin-bottom: 0.5rem} .stat-label{font-size: 0.9rem;color: var(--text-secondary);line-height: 1.3} .notification-message{margin-top: 1rem;padding: 0.75rem;border-radius: 6px;font-weight: 500} .notification-message.success{background: rgba(40,167,69,0.1);color: #28a745;border: 1px solid rgba(40,167,69,0.2)} .notification-message.error{background: rgba(220,53,69,0.1);color: #dc3545;border: 1px solid rgba(220,53,69,0.2)} @media (max-width: 768px){.empty-state{padding: 1rem;min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 1.25rem 0.75rem} .empty-state-title{font-size: 1.6rem} .empty-state-description{font-size: 1rem} .empty-state-stats{flex-direction: column;gap: 1rem} .stat-item{min-width: auto;width: 100%} .form-group{flex-direction: column;gap: 0.75rem} .notify-btn{width: 100%} } @media (max-width: 480px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 1rem 0.75rem} .empty-state-suggestions{padding: 1rem} .empty-state-notifications{padding: 0.75rem} .notification-description{font-size: 0.95rem} } .privacy-content{line-height: 1.6;color: var(--text-primary)} .privacy-content h1{color: var(--primary-color);font-size: 2rem;margin-bottom: 2rem;text-align: center} .privacy-content h2{color: var(--primary-color);font-size: 1.4rem;margin-top: 2rem;margin-bottom: 1rem;font-weight: 600} .privacy-content p{margin-bottom: 1rem} .privacy-content ul{margin: 1rem 0;padding-left: 1.5rem} .privacy-content li{margin-bottom: 0.5rem;color: var(--text-secondary)} .privacy-content em{color: var(--text-secondary);font-style: italic;display: block;margin-top: 2rem;text-align: center} @media (max-width: 375px) and (max-height: 667px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 0.75rem 0.5rem;max-width: 95%} .empty-state-title{font-size: 1.6rem;margin-bottom: 0.5rem} .empty-state-description{font-size: 0.95rem;margin-bottom: 1rem} .empty-state-suggestions{padding: 0.75rem;margin-bottom: 0.75rem} .empty-state-suggestions h3{font-size: 1rem;margin-bottom: 0.25rem} .empty-state-stats{gap: 1rem;margin-top: 0.75rem} .stat-item{padding: 0.75rem;min-width: 100px} .stat-number{font-size: 1rem} .stat-label{font-size: 0.8rem} } @media (max-width: 390px) and (max-height: 844px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 1rem 0.75rem} .empty-state-title{font-size: 1.8rem} .empty-state-suggestions{padding: 0.875rem} .empty-state-stats{gap: 1.25rem} } @media (max-width: 430px) and (max-height: 932px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 1.25rem 1rem;max-width: 95%} .empty-state-title{font-size: 2rem;margin-bottom: 0.75rem} .empty-state-description{font-size: 1.1rem;margin-bottom: 1.25rem} .empty-state-suggestions{padding: 1rem;margin-bottom: 1.25rem} .empty-state-suggestions h3{font-size: 1.25rem} .empty-state-stats{gap: 1.5rem;margin-top: 1rem} .stat-item{padding: 1rem;min-width: 120px} } @media (max-width: 414px) and (max-height: 896px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 1.125rem 0.875rem} .empty-state-title{font-size: 1.9rem} .empty-state-suggestions{padding: 0.9375rem} .empty-state-stats{gap: 1.375rem} } @media (max-width: 360px) and (max-height: 740px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 0.75rem 0.5rem;max-width: 95%} .empty-state-title{font-size: 1.5rem;margin-bottom: 0.5rem} .empty-state-description{font-size: 0.9rem;margin-bottom: 1rem} .empty-state-suggestions{padding: 0.75rem;margin-bottom: 0.75rem} .empty-state-suggestions h3{font-size: 1rem;margin-bottom: 0.25rem} .empty-state-stats{gap: 1rem;margin-top: 0.75rem} .stat-item{padding: 0.75rem;min-width: 95px} .stat-number{font-size: 1rem} .stat-label{font-size: 0.8rem} } @media (max-width: 375px) and (max-height: 812px){.empty-state{min-height: calc(100vh - 45px - 34px)} .empty-state-content{padding: 0.875rem 0.625rem} .empty-state-title{font-size: 1.7rem} .empty-state-suggestions{padding: 0.8125rem} } .pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 0} .pagination-info{font-size:14px;color:#666} .pagination-controls{display:flex;gap:8px} .page-link{display:inline-block;padding:6px 10px;border:1px solid #ccc;border-radius:6px;color:#333;text-decoration:none;background:#fff} .page-link:hover{border-color:#999} .page-link.active{background:#111;color:#fff;border-color:#111}.site-header-banner{background-color:var(--secondary-color);border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);padding:0.75rem 0;text-align:center;margin-bottom:0 !important;border-radius:6px;margin-top:0}.banner-content{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--text-secondary)}.banner-date,.banner-tagline,.banner-description,.banner-latest{white-space:nowrap}.banner-separator{color:var(--text-secondary);opacity:0.5;margin:0 0.25rem}@media (max-width:768px){.site-header-banner{top:60px;padding:0.4rem 0}.banner-content{font-size:0.75rem;gap:0.3rem;padding:0 0.5rem}.banner-separator{margin:0 0.15rem}}.login-btn{color:var(--primary-color);text-decoration:none;font-size:0.9rem;padding:0.4rem 1rem;border:1px solid var(--primary-color);border-radius:4px;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}.login-btn:hover{background-color:var(--primary-color);color:var(--text-primary)}@media (max-width:768px){.login-btn{font-size:0.8rem;padding:0.3rem 0.75rem}}.logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1}.login-btn{position:absolute;right:0;z-index:2}.login-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:2rem 1rem;margin-top:60px}.login-card{background:var(--card-background);border:1px solid var(--border-color);border-radius:8px;padding:2rem;max-width:400px;width:100%;box-shadow:0 4px 20px rgba(0,0,0,0.1)}.login-title{color:var(--primary-color);font-size:2rem;font-weight:600;margin-bottom:0.5rem;text-align:center}.login-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:2rem;font-size:0.95rem}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:0.5rem}.form-group label{color:var(--text-primary);font-size:0.9rem;font-weight:500}.form-input{background:var(--secondary-color);border:1px solid var(--border-color);border-radius:4px;padding:0.75rem;color:var(--text-primary);font-size:1rem;transition:border-color 0.2s ease}.form-input:focus{outline:none;border-color:var(--primary-color)}.form-input::placeholder{color:var(--text-secondary)}.login-submit-btn{background:var(--primary-color);color:var(--text-primary);border:none;border-radius:4px;padding:0.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;margin-top:0.5rem}.login-submit-btn:hover{background:var(--hover-color)}.login-submit-btn:active{transform:scale(0.98)}.error-message{background:rgba(220,53,69,0.1);color:#dc3545;border:1px solid rgba(220,53,69,0.2);border-radius:4px;padding:0.75rem;font-size:0.9rem;text-align:center}.login-footer{margin-top:1.5rem;text-align:center}.back-link{color:var(--primary-color);text-decoration:none;font-size:0.9rem;transition:color 0.2s ease}.back-link:hover{color:var(--hover-color);text-decoration:underline}@media (max-width:768px){.login-container{padding:1rem}.login-card{padding:1.5rem}.login-title{font-size:1.75rem}}nav{display:flex;align-items:center;width:100%}.nav-container{width:100%;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;position:relative;height:60px}.top-row{display:flex;justify-content:space-between;align-items:center;width:100%;position:relative;height:100%}.logo{position:absolute;left:50%;transform:translateX(-50%);z-index:10;color:var(--primary-color);font-weight:600;font-size:0.95rem;text-decoration:none}.login-btn{position:absolute;right:0;z-index:10;color:var(--primary-color);text-decoration:none;font-size:0.9rem;padding:0.4rem 1rem;border:1px solid var(--primary-color);border-radius:4px;transition:all 0.2s ease}.login-btn:hover{background-color:var(--primary-color);color:var(--text-primary)}@media (max-width:768px){.login-btn{font-size:0.8rem;padding:0.3rem 0.75rem}}.site-header-banner{margin-bottom:1rem !important}.grid-container{gap:0.75rem}.profile-cards{margin-top:0}.site-header-banner{margin-bottom:1rem !important}.success-message{background:rgba(40,167,69,0.1);color:#28a745;border:1px solid rgba(40,167,69,0.2);border-radius:4px;padding:0.75rem;font-size:0.9rem;text-align:center;margin-bottom:1rem}.form-hint{color:var(--text-secondary);font-size:0.8rem;margin-top:0.25rem}.top-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.top-row form{display:flex;align-items:center}.top-row form button{margin:0;height:auto;line-height:normal}.user-info{display:flex;align-items:center;gap:1rem;margin-left:auto}.success-message{background:linear-gradient(135deg,rgba(40,167,69,0.15),rgba(40,167,69,0.05));border:2px solid rgba(40,167,69,0.3);border-radius:8px;padding:1.25rem;margin-bottom:1.5rem;box-shadow:0 4px 12px rgba(40,167,69,0.1)}.success-message h3{margin:0 0 0.75rem 0;color:#28a745;font-size:1.3rem;display:flex;align-items:center;gap:0.5rem}.success-message p{margin:0.5rem 0;line-height:1.6}.success-message strong{color:var(--primary-color);font-size:1.1rem;font-weight:600;letter-spacing:0.05em;background:rgba(255,144,0,0.1);padding:0.25rem 0.5rem;border-radius:4px;display:inline-block}.copy-btn{background:var(--primary-color);color:var(--text-primary);border:none;padding:0.4rem 0.8rem;border-radius:4px;cursor:pointer;font-size:0.85rem;margin-left:0.5rem;transition:all 0.2s ease}.copy-btn:hover{background:var(--hover-color);transform:translateY(-1px)}.copy-btn:active{transform:translateY(0)}.user-info{display:flex;align-items:center;gap:1rem;margin-left:auto}.user-info span{display:inline-block;white-space:nowrap}.user-info form{display:flex;align-items:center;margin:0}.user-info button{display:inline-block;white-space:nowrap}.site-header-banner{margin-bottom:1rem !important}.success-message{margin-top:0;margin-bottom:1rem}.grid-container>.success-message:first-child{margin-top:0}.user-info form button{display:inline-block;white-space:nowrap;flex-shrink:0}.user-info span{display:inline-block;white-space:nowrap;flex-shrink:0}.site-header-banner{margin-bottom:1rem !important}.success-message{margin-top:0;margin-bottom:1rem}.user-info{display:flex;align-items:center;gap:1rem;margin-left:auto;flex-wrap:nowrap}.user-info>span{display:inline-block;white-space:nowrap;flex-shrink:0;order:1}.user-info>form{display:inline-block;flex-shrink:0;order:2;margin:0;padding:0}.user-info form button{display:inline-block;white-space:nowrap;flex-shrink:0;margin:0;padding:0.4rem 1rem}.user-info{display:flex;align-items:center;gap:1rem;margin-left:auto;flex-wrap:nowrap}.account-number{display:inline-block;white-space:nowrap;flex-shrink:0;order:1}.logout-form{display:inline-block;flex-shrink:0;order:2;margin:0;padding:0;border:none;background:none}.logout-btn{display:inline-block;white-space:nowrap;flex-shrink:0;margin:0;padding:0.4rem 1rem;background:none;border:1px solid var(--primary-color);cursor:pointer}.top-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:100%;gap:1rem}.nav-left{display:flex;align-items:center;justify-content:flex-start}.nav-center{display:flex;align-items:center;justify-content:center}.nav-right{display:flex;align-items:center;justify-content:flex-end;height:100%}.nav-left .account-number{white-space:nowrap}.nav-right .logout-form{margin:0;padding:0}.nav-right .login-btn{margin:0}.nav-container{max-width:800px;margin:0 auto;padding:0 var(--spacing-sm);width:100%;height:100%;display:flex;align-items:center}.register-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:2rem 1rem;margin-top:60px}.register-card{background:var(--card-background);border:1px solid var(--border-color);border-radius:12px;padding:3rem;max-width:600px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.3);position:relative}.account-created{text-align:center}.close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-btn:hover{background:var(--secondary-color);color:var(--text-primary)}.account-warning{background:rgba(255,144,0,0.15);border:2px solid var(--primary-color);border-radius:8px;padding:1rem;margin-bottom:2rem;color:var(--primary-color);font-size:0.9rem;font-weight:600;line-height:1.5}.account-number-display{margin:2rem 0}.account-number-large{display:inline-block;font-size:2rem;font-weight:700;letter-spacing:0.1em;color:var(--text-primary);background:var(--secondary-color);padding:1.5rem 2rem;border-radius:8px;border:2px solid var(--border-color);font-family:monospace}.account-actions{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}.action-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--primary-color);color:var(--text-primary);border:none;border-radius:6px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.2s ease}.action-btn:hover{background:var(--hover-color);transform:translateY(-2px)}.action-btn:active{transform:translateY(0)}.action-btn span{font-size:1.1rem}.account-login-section{margin:3rem 0;padding:2rem;background:var(--secondary-color);border-radius:8px;border:1px solid var(--border-color)}.account-login-section h2{color:var(--primary-color);font-size:1.5rem;margin-bottom:0.5rem;font-weight:600}.account-hint{color:var(--text-secondary);font-size:0.9rem;margin-bottom:1.5rem}.account-login-form{display:flex;flex-direction:column;gap:1rem}.account-input{background:var(--card-background);border:1px solid var(--border-color);border-radius:6px;padding:0.75rem 1rem;color:var(--text-primary);font-size:1rem;font-family:monospace;text-align:center;letter-spacing:0.1em;transition:border-color 0.2s ease}.account-input:focus{outline:none;border-color:var(--primary-color)}.account-input::placeholder{color:var(--text-secondary);letter-spacing:normal}.account-login-btn{background:var(--primary-color);color:var(--text-primary);border:none;border-radius:6px;padding:0.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;text-transform:uppercase;letter-spacing:0.05em}.account-login-btn:hover{background:var(--hover-color)}.account-info{color:var(--text-secondary);font-size:0.85rem;line-height:1.6;margin-top:2rem}.register-form-section{text-align:center}.register-title{color:var(--primary-color);font-size:2.5rem;font-weight:600;margin-bottom:0.5rem}.register-subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:2rem;line-height:1.6}.register-form{display:flex;flex-direction:column;gap:1.5rem}.register-submit-btn{background:var(--primary-color);color:var(--text-primary);border:none;border-radius:6px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;text-transform:uppercase;letter-spacing:0.05em}.register-submit-btn:hover{background:var(--hover-color)}.register-footer{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.register-link{color:var(--primary-color);text-decoration:none;font-size:0.9rem;transition:color 0.2s ease}.register-link:hover{color:var(--hover-color);text-decoration:underline}.login-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);padding:2rem 1rem;margin-top:60px}.login-card{background:var(--card-background);border:1px solid var(--border-color);border-radius:12px;padding:3rem;max-width:500px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.3);text-align:center}.login-title{color:var(--primary-color);font-size:2rem;font-weight:600;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em}.login-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:2rem;font-size:1rem}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:0.5rem;text-align:left}.form-group label{color:var(--text-primary);font-size:0.9rem;font-weight:500}.account-input{background:var(--secondary-color);border:1px solid var(--border-color);border-radius:6px;padding:0.75rem 1rem;color:var(--text-primary);font-size:1rem;font-family:monospace;text-align:center;letter-spacing:0.1em;transition:border-color 0.2s ease}.account-input:focus{outline:none;border-color:var(--primary-color)}.account-input::placeholder{color:var(--text-secondary);letter-spacing:normal}.form-hint{color:var(--text-secondary);font-size:0.8rem;margin-top:0.25rem}.account-login-btn{background:var(--primary-color);color:var(--text-primary);border:none;border-radius:6px;padding:0.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;text-transform:uppercase;letter-spacing:0.05em;width:100%}.account-login-btn:hover{background:var(--hover-color)}.login-footer{text-align:center;margin-top:1.5rem}.register-link{color:var(--primary-color);text-decoration:none;font-size:0.9rem;transition:color 0.2s ease}.register-link:hover{color:var(--hover-color);text-decoration:underline}.login-card{padding:2rem 2.5rem}.login-title{margin-bottom:0.25rem;font-size:1.75rem}.login-subtitle{margin-bottom:1.5rem;font-size:0.95rem}.login-form{gap:1.25rem}.form-group{gap:0.4rem}.form-group label{font-size:0.85rem;margin-bottom:0.25rem}.account-input{padding:0.65rem 1rem;font-size:0.95rem}.form-hint{margin-top:0.15rem;font-size:0.75rem}.account-login-btn{padding:0.65rem 1.25rem;font-size:0.95rem;margin-top:0.5rem}.login-footer{margin-top:1.25rem}.login-footer p{margin-bottom:0.4rem;font-size:0.85rem}.register-link{font-size:0.85rem}.login-card{padding:1.5rem 2rem;max-width:450px}.login-title{margin-bottom:1.5rem;font-size:1.5rem}.login-form{gap:1rem}.account-input{margin-bottom:0}.account-login-btn{margin-top:0}.login-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}.login-footer a{font-size:0.85rem}.login-card{padding:1.5rem 2rem;max-width:450px}.login-title{margin-bottom:0.5rem;font-size:1.5rem}.login-subtitle{margin-bottom:1.5rem;font-size:0.95rem}.login-form{gap:1rem}.form-group{gap:0.4rem;text-align:left}.form-group label{font-size:0.85rem;margin-bottom:0.25rem}.account-input{margin-bottom:0}.form-hint{margin-top:0.15rem;font-size:0.75rem}.account-login-btn{margin-top:0}.login-footer{text-align:center;margin-top:1rem}.login-footer p{margin-bottom:0.4rem;font-size:0.85rem}.register-link{font-size:0.85rem}.account-number-wrapper{position:relative;display:inline-block}.account-number-masked{letter-spacing:0.15em;user-select:none}.toggle-account-btn{display:flex;align-items:center;gap:0.5rem;margin-top:0.75rem;padding:0.5rem 1rem;background:var(--secondary-color);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:0.85rem;cursor:pointer;transition:all 0.2s ease}.toggle-account-btn:hover{background:var(--card-background);border-color:var(--primary-color)}.toggle-account-btn span:first-child{font-size:1rem}.account-security-message{background:rgba(255,144,0,0.1);border:1px solid rgba(255,144,0,0.3);border-radius:6px;padding:0.75rem 1rem;margin-top:1rem;color:var(--text-secondary);font-size:0.8rem;line-height:1.5;text-align:center}.register-card{padding:1.5rem 2rem}.register-title{font-size:1.75rem;margin-bottom:0.5rem}.register-subtitle{font-size:0.9rem;margin-bottom:1.25rem;line-height:1.4}.register-form-section{gap:1rem}.register-form{gap:1rem}.register-submit-btn{padding:0.75rem 1.5rem;font-size:1rem}.register-footer{gap:0.75rem;margin-top:1.25rem}.register-link{font-size:0.85rem}.account-created{padding:0}.account-warning{padding:0.75rem;margin-bottom:1.25rem;font-size:0.85rem}.account-number-display{margin:1.25rem 0}.account-number-large{font-size:1.75rem;padding:1rem 1.5rem}.account-actions{margin:1.25rem 0;gap:0.75rem}.action-btn{padding:0.65rem 1.25rem;font-size:0.85rem}.account-login-section{margin:1.5rem 0;padding:1.25rem}.account-login-section h2{font-size:1.25rem;margin-bottom:0.4rem}.account-hint{font-size:0.85rem;margin-bottom:1rem}.account-info{font-size:0.8rem;margin-top:1.25rem;line-height:1.5}