@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Righteous&family=Roboto:wght@400;700&display=swap');
:root { --theme-color: #00e5ff; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; outline: none; }
body { font-family: 'Roboto', sans-serif; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.phone-frame { width: 375px; height: 812px; background: #121212; border: 12px solid #333; border-radius: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; position: relative; margin: auto; transition: box-shadow 0.3s; }
.phone-content { flex: 1; overflow-y: auto; padding: 30px; padding-bottom: 50px; }
.phone-content::-webkit-scrollbar { width: 0; background: transparent; }
.header-logo { text-align: center; margin-top: 20px; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; }
.logo-mask { width: 80px; height: 80px; background-color: var(--theme-color); -webkit-mask-image: url(logo.svg); mask-image: url(logo.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-bottom: 10px; transition: background-color 0.3s; }
.brand-name { font-family: 'Righteous', cursive; font-size: 34px; color: #fff; letter-spacing: 2px; margin-bottom: 0px; text-transform: uppercase; }
.slogan { font-family: 'Dancing Script', cursive; color: var(--theme-color); font-size: 24px; margin-bottom: 30px; transition: color 0.3s; }
.auth-tabs { display: flex; border-bottom: 2px solid #333; margin-bottom: 30px; }
.tab-btn { flex: 1; background: none; border: none; padding: 15px; color: #aaa; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; transition: color 0.3s; text-decoration: none; }
.tab-btn.active { color: var(--theme-color); border-bottom: 2px solid var(--theme-color); position: relative; bottom: -2px; }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn 0.5s; }
.input-wrapper { position: relative; margin-bottom: 20px; }
.input-wrapper svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; fill: #666; transition: fill 0.3s; pointer-events: none; }
.input-wrapper:focus-within svg { fill: var(--theme-color); }
.input-wrapper input, .input-wrapper select { width: 100%; padding: 14px 14px 14px 48px; background: #1e1e1e; border: 1px solid #333; border-radius: 10px; font-size: 16px; color: #fff; transition: border-color 0.3s; }
.input-wrapper input:focus, .input-wrapper select:focus { border-color: var(--theme-color); }
.input-wrapper select { appearance: none; -webkit-appearance: none; }
.color-picker-title { text-align: center; color: #aaa; font-size: 14px; margin-bottom: 15px; margin-top: 5px; }
.color-picker { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: center; padding-bottom: 15px; }
.color-label { display: block; position: relative; cursor: pointer; flex-shrink: 0; }
.color-label input { position: absolute; opacity: 0; cursor: pointer; }
.color-circle { width: 34px; height: 34px; border-radius: 50%; display: block; border: 2px solid transparent; transition: transform 0.2s, border-color 0.2s; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.color-label input:checked ~ .color-circle { transform: scale(1.25); border-color: #fff; box-shadow: 0 0 15px currentColor; }
.btn-submit { width: 100%; padding: 16px; background: var(--theme-color); color: #000; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: background 0.3s, transform 0.1s; margin-top: 10px; }
.btn-submit:active { transform: scale(0.98); }
.forgot-link { display: block; text-align: center; margin-top: 15px; color: #888; text-decoration: none; font-size: 14px; transition: color 0.3s; }
.forgot-link:hover { color: var(--theme-color); }
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #121212; border-bottom: 1px solid #333; z-index: 10; }
.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo-small { width: 28px; height: 28px; background-color: var(--theme-color); -webkit-mask-image: url(logo.svg); mask-image: url(logo.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color 0.3s; }
.header-brand { font-family: 'Righteous', cursive; font-size: 20px; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.header-right { display: flex; align-items: center; gap: 15px; }
.header-icon { width: 24px; height: 24px; fill: #aaa; transition: fill 0.3s; cursor: pointer; }
.header-icon:hover { fill: var(--theme-color); }
.app-content { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 100px; background: #000; }
.progress-wrapper { position: relative; width: 240px; height: 240px; margin: 20px auto 10px; }
.progress-circle { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--theme-color) var(--progress, 0%), #1e1e1e var(--progress, 0%)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: background 0.5s; }
.progress-inner { width: 210px; height: 210px; background: #000; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 15px rgba(0,0,0,0.8); }
.progress-title { font-size: 14px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1px; margin-top: 5px; }
.progress-value { font-size: 42px; font-weight: bold; color: var(--theme-color); margin: 0; text-shadow: 0 0 15px rgba(0,0,0,0.5); line-height: 1; }
.progress-target { font-size: 14px; color: #999; margin-top: 5px; }
.stat-clean-card { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; }
.stat-clean-value { font-size: 32px; font-weight: bold; color: #fff; margin: 5px 0; line-height: 1; }
.stat-clean-unit { font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.bottom-nav { position: absolute; bottom: 0; left: 0; width: 100%; background: #121212; display: flex; justify-content: space-around; padding: 0 0 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: #666; text-decoration: none; font-size: 10px; flex: 1; transition: color 0.3s; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; position: relative; }
.nav-icon-wrapper { width: 50px; height: 50px; background: #1e1e1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateY(-20px); border: 4px solid #000; margin-bottom: -15px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: all 0.3s; }
.nav-item.active .nav-icon-wrapper { border-color: #121212; background: #1e1e1e; box-shadow: 0 0 15px var(--theme-color); }
.nav-item.active { color: var(--theme-color); }
.nav-item.active .nav-icon { fill: var(--theme-color); }
.nav-icon { width: 22px; height: 22px; fill: #aaa; transition: fill 0.3s; }
@media (max-width: 600px) { body { padding: 0; display: block; } .phone-frame { width: 100%; height: 100vh; border: none; border-radius: 0; box-shadow: none; margin: 0; } .bottom-nav { position: fixed; border-radius: 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.section-title { font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 5px; font-weight: bold; }
.challenge-card { background: #1e1e1e; border-radius: 16px; padding: 15px; margin-bottom: 12px; border: 1px solid #333; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.challenge-card:active { transform: scale(0.98); }
.challenge-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--theme-color); }
.ch-title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 5px; }
.ch-meta { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 5px; }
.ch-meta .material-icons-round { font-size: 14px; }
.btn-create-fab { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; background: var(--theme-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 25px rgba(0,0,0,0.6); z-index: 100; cursor: pointer; border: none; color: #000; transition: transform 0.2s; }
.btn-create-fab:active { transform: translate(-50%, 5px); }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 999; flex-direction: column; justify-content: flex-end; }
.modal-content { background: #121212; width: 100%; max-height: 90vh; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 25px 20px; overflow-y: auto; border-top: 2px solid #333; position: relative; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-close { position: absolute; top: 15px; right: 15px; color: #888; background: none; border: none; font-size: 28px; cursor: pointer; padding: 5px; z-index: 10; }
.broadcast-wrapper { background: #1e1e1e; border: 1px solid #333; border-radius: 10px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--theme-color); font-size: 12px; text-transform: uppercase; font-weight: bold; cursor: pointer; margin-bottom: 15px; transition: background 0.2s; }
.broadcast-wrapper:active { background: #2a2a2a; }
.share-btn { flex: 1; padding: 12px; background: #1e1e1e; border: 1px solid #333; border-radius: 10px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; text-transform: uppercase; font-weight: bold; }
.share-btn .material-icons-round { font-size: 28px; color: var(--theme-color); }
.leaderboard-item { display: flex; align-items: center; padding: 12px; background: #1e1e1e; border-radius: 12px; margin-bottom: 8px; transition: all 0.3s ease; border: 1px solid #333; }
.lb-rank { width: 30px; font-size: 16px; font-weight: bold; color: #888; text-align: center; }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; background: #000; margin: 0 15px 0 5px; border: 2px solid #333; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #fff; background-size: cover; background-position: center; flex-shrink: 0; }
.lb-info { flex: 1; overflow: hidden; }
.lb-name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.lb-name { font-size: 16px; font-weight: bold; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.lb-msg-icon { font-size: 20px; color: #666; cursor: pointer; transition: color 0.3s; flex-shrink: 0; padding: 2px; }
.lb-msg-icon:active { color: var(--theme-color); }
.lb-steps { font-size: 14px; color: var(--theme-color); font-weight: bold; }
.rank-1 { border-color: #FFD700; background: rgba(255,215,0,0.05); }
.rank-1 .lb-rank { color: #FFD700; }
.rank-1 .lb-avatar { border-color: #FFD700; }
.rank-2 { border-color: #C0C0C0; background: rgba(192,192,192,0.05); }
.rank-2 .lb-rank { color: #C0C0C0; }
.rank-2 .lb-avatar { border-color: #C0C0C0; }
.rank-3 { border-color: #CD7F32; background: rgba(205,127,50,0.05); }
.rank-3 .lb-rank { color: #CD7F32; }
.rank-3 .lb-avatar { border-color: #CD7F32; }
.friend-card { background: #1e1e1e; border-radius: 16px; padding: 15px; margin-bottom: 12px; border: 1px solid #333; display: flex; align-items: center; gap: 15px; }
.friend-avatar { width: 50px; height: 50px; border-radius: 50%; background: #121212; border: 2px solid #333; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 20px; color: #fff; background-size: cover; background-position: center; flex-shrink: 0; }
.friend-info { flex: 1; }
.friend-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.friend-name { font-size: 16px; font-weight: bold; color: #fff; }
.friend-steps { font-size: 15px; font-weight: bold; color: var(--theme-color); }
.friend-goal { font-size: 11px; color: #888; font-weight: normal; }
.friend-progress-bg { width: 100%; height: 6px; background: #121212; border-radius: 3px; overflow: hidden; }
.friend-progress-fill { height: 100%; background: var(--theme-color); border-radius: 3px; transition: width 0.5s ease-out; }
.route-header-row { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 10px 5px; }
.route-section-title { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; margin: 0; }
.history-link { font-size: 12px; color: var(--theme-color); text-transform: uppercase; font-weight: bold; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: opacity 0.2s; }
.history-link:active { opacity: 0.7; }
.route-banner { position: relative; width: 100%; height: 150px; z-index: 5; margin-bottom: 20px; }
.banner-img { position: absolute; top: 0; left: 0; width: calc(100% - 50px); height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.circular-start-btn { position: absolute; right: 0; top: 50%; margin-top: -50px; width: 100px; height: 100px; border-radius: 50%; background: var(--theme-color); border: 5px solid #000; box-shadow: 0 0 0 2px var(--theme-color), 0 6px 20px rgba(0,0,0,0.6); cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 20; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
.circular-start-btn:active { transform: scale(0.95); }
.circular-start-btn .material-icons-round { color: #fff; font-size: 56px; pointer-events: none; margin-left: 5px; }
.history-map-container { width: 100%; height: 300px; background: #222; border-radius: 12px; margin-bottom: 20px; overflow: hidden; border: 1px solid #333; position: relative; }
.history-map-container::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background: var(--theme-color); z-index: 1000; pointer-events: none; }
.history-list-compact { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.h-item-mini { background: #1e1e1e; border: 1px solid #333; border-radius: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color 0.3s; }
.h-item-mini.active { border-color: var(--theme-color); background: #252525; }
.h-item-mini .h-date-mini { font-size: 13px; font-weight: bold; color: #fff; }
.h-item-mini .h-stats-mini { font-size: 12px; color: var(--theme-color); font-weight: bold; }
.h-item-mini .delete-icon { font-size: 24px; color: #888; cursor: pointer; padding: 5px; transition: color 0.2s, transform 0.2s; }
.h-item-mini .delete-icon:hover { color: #ff073a; transform: scale(1.1); }
#route-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #121212; z-index: 9999; flex-direction: column; }
#map { flex: 1; width: 100%; background: #222; }
.route-stats { background: #1e1e1e; padding: 20px; border-top: 2px solid #333; }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.r-stat { text-align: center; }
.r-val { font-size: 24px; font-weight: bold; color: #fff; }
.r-lbl { font-size: 12px; color: #888; text-transform: uppercase; }
.route-controls { display: flex; gap: 10px; }
.btn-pause { flex: 1; padding: 15px; background: #333; color: #fff; border: none; border-radius: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
.btn-stop { flex: 1; padding: 15px; background: #ff073a; color: #fff; border: none; border-radius: 10px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
#countdown-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; justify-content: center; align-items: center; flex-direction: column; }
#countdown-text { font-size: 100px; font-weight: bold; color: var(--theme-color); }
.leaflet-control-attribution { display: none !important; }
#map::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background: var(--theme-color); z-index: 1000; }
.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-card { background: #1e1e1e; border: 1px solid #333; border-radius: 12px; padding: 15px; cursor: pointer; transition: transform 0.2s; position: relative; overflow: hidden; }
.history-card:active { transform: scale(0.98); }
.history-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--theme-color); }
.h-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 8px; }
.h-date { color: #fff; font-size: 14px; font-weight: bold; }
.h-card-stats { display: flex; justify-content: space-between; align-items: center; }
.h-stat { text-align: center; }
.h-val { font-size: 18px; font-weight: bold; color: #fff; }
#history-map::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background: var(--theme-color); z-index: 1000; }

.gold-shine-text { background: linear-gradient(110deg, #c59b27 0%, #c59b27 40%, #ffffff 50%, #c59b27 60%, #c59b27 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: goldPan 4s infinite linear; display: inline-block; }
.pro-badge-shiny { background: linear-gradient(110deg, #b08d1d 0%, #b08d1d 40%, #ffffff 50%, #b08d1d 60%, #b08d1d 100%); background-size: 200% auto; color: #fff; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 10px; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); border: 1px solid #d4af37; animation: goldPan 4s infinite linear; vertical-align: middle; }
@keyframes goldPan { 0% { background-position: 200% center; } 100% { background-position: 0% center; } }

.btn-pro-custom { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; background: linear-gradient(135deg, #222, #111); border: 1px solid #d4af37; color: #d4af37; font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.btn-pro-custom:active { transform: scale(0.95); }