* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; }

.font-apple { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; }
.font-sans { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.bg-light { background: #F2F2F7; }
.bg-white { background: #fff; }
.bg-dark { background: #0d1117; }
.bg-admin { background: #030712; min-height: 100vh; }

.text-blue { color: #007AFF; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-xs { font-size: 12px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-15 { font-size: 15px; }
.text-17 { font-size: 17px; }
.text-20 { font-size: 20px; }
.text-22 { font-size: 22px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }
.text-xl { font-size: 20px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.p-4 { padding: 16px; }
.flex-1 { flex: 1; min-width: 0; }

/* ---- Home page ---- */
.header-bar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 16px; }
.app-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-decoration: none; color: inherit; }
.app-card:active { background: #f9fafb; }
.app-icon-64 { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex-shrink: 0; border: 1px solid #f3f4f6; }
.app-icon-64 img { width: 100%; height: 100%; object-fit: cover; }
.get-btn { background: #007AFF; color: #fff; font-size: 15px; font-weight: 600; border-radius: 999px; padding: 6px 20px; flex-shrink: 0; }

/* ---- iOS page ---- */
.announcement { background: #007AFF; color: #fff; text-align: center; font-size: 12px; padding: 8px 16px; }
.appstore-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.app-hero { display: flex; align-items: flex-start; gap: 16px; padding: 16px; padding-bottom: 20px; }
.app-icon-118 { width: 118px; height: 118px; border-radius: 26px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.15); border: 1px solid #f3f4f6; }
.app-icon-118 img { width: 100%; height: 100%; object-fit: cover; }
.app-hero-info { flex: 1; min-width: 0; padding-top: 2px; }
.app-hero-info h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-hero-info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.get-btn-large { background: #007AFF; color: #fff; font-size: 15px; font-weight: 600; border-radius: 999px; padding: 6px 28px; border: none; cursor: pointer; }
.get-btn-large:active { background: #0056CC; }
.get-btn-large:disabled { opacity: .6; }

.stats-bar { display: flex; align-items: center; justify-content: space-around; padding: 12px 16px; border-top: 1px solid #f3f4f6; }
.stat-item { text-align: center; flex: 1; }
.stat-label { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 20px; font-weight: 700; color: #374151; line-height: 1.2; margin-top: 2px; }
.stat-sub { font-size: 11px; color: #9ca3af; }
.stat-divider { width: 1px; height: 40px; background: #e5e7eb; }

.section { background: #fff; margin-top: 8px; padding: 16px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.rating-block { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.rating-big { text-align: center; }
.rating-number { font-size: 60px; font-weight: 700; color: #000; line-height: 1; }
.rating-bars { flex: 1; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bar-stars { font-size: 10px; color: #9ca3af; min-width: 40px; }
.bar-track { flex: 1; height: 3px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: #9ca3af; border-radius: 2px; }

.info-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.info-row:last-child { border-bottom: none; }

/* ---- iOS Modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-content { background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; padding: 24px 24px 40px; animation: slideUp .3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.guide-steps { display: flex; flex-direction: column; gap: 16px; }
.guide-step { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #374151; line-height: 1.6; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: #007AFF; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.modal-ok-btn { width: 100%; margin-top: 24px; background: #007AFF; color: #fff; font-size: 17px; font-weight: 600; border-radius: 12px; padding: 12px; border: none; cursor: pointer; }
.modal-ok-btn:active { background: #0056CC; }

/* ---- Android page ---- */
.android-page { min-height: 100vh; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 64px 24px 48px; }
.android-icon { width: 112px; height: 112px; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(245,158,11,.2); margin-bottom: 24px; border: 1px solid rgba(255,255,255,.1); }
.android-icon img { width: 100%; height: 100%; object-fit: cover; }
.android-download-btn { width: 100%; max-width: 280px; background: linear-gradient(to right, #f59e0b, #f97316); color: #000; font-size: 18px; font-weight: 700; border-radius: 12px; padding: 16px; text-align: center; display: block; text-decoration: none; box-shadow: 0 4px 16px rgba(245,158,11,.3); }
.android-download-btn:active { transform: scale(.95); }
.guide-steps-android { display: flex; flex-direction: column; gap: 12px; }
.guide-step-android { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #9ca3af; }

/* ---- Both platforms page ---- */
.dl-card-ios, .dl-card-android { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; text-decoration: none; color: inherit; transition: transform .1s; }
.dl-card-ios:active, .dl-card-android:active { transform: scale(.97); }
.dl-card-ios { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid rgba(255,255,255,.08); }
.dl-card-android { background: linear-gradient(135deg, #1a1a0e, #2a2010); border: 1px solid rgba(245,158,11,.12); }
.dl-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.08); }
.step-num-android { width: 24px; height: 24px; border-radius: 50%; background: rgba(245,158,11,.2); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---- Admin common ---- */
.admin-center { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.admin-login-box { width: 100%; max-width: 360px; }
.admin-container { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-top: 16px; }
.admin-card { background: #111827; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.admin-input { width: 100%; background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 14px; outline: none; }
.admin-input:focus { border-color: #3b82f6; }
.admin-input::placeholder { color: #6b7280; }
textarea.admin-input { font-family: inherit; }
.admin-btn-primary { width: 100%; background: #2563eb; color: #fff; font-weight: 600; border-radius: 8px; padding: 12px; border: none; cursor: pointer; font-size: 15px; }
.admin-btn-primary:hover { background: #1d4ed8; }
.admin-btn-primary:disabled { opacity: .5; }
.admin-btn-sm { background: #2563eb; color: #fff; font-size: 14px; font-weight: 600; border-radius: 8px; padding: 8px 16px; border: none; cursor: pointer; }
.admin-btn-sm:hover { background: #1d4ed8; }
.admin-btn-sm:disabled { opacity: .5; }
.admin-btn-xs { background: #374151; color: #fff; font-size: 12px; border-radius: 8px; padding: 6px 12px; border: none; cursor: pointer; text-decoration: none; text-align: center; display: block; }
.admin-btn-xs:hover { background: #4b5563; }
.admin-btn-danger { background: rgba(127,29,29,.5); color: #f87171; }
.admin-btn-danger:hover { background: rgba(127,29,29,.7); }
.admin-link-btn { background: none; border: none; cursor: pointer; font-size: 14px; text-decoration: none; }
.admin-link-btn:hover { color: #f87171 !important; }
.admin-message { padding: 12px; border-radius: 8px; font-size: 14px; background: rgba(6,78,59,.5); color: #6ee7b7; margin-bottom: 16px; }
.admin-file-input { width: 100%; font-size: 14px; color: #9ca3af; }
.admin-file-input::file-selector-button { margin-right: 8px; padding: 6px 12px; border-radius: 8px; border: none; font-size: 12px; background: #374151; color: #d1d5db; cursor: pointer; }

.app-list-item { display: flex; align-items: center; gap: 16px; }
.app-list-icon { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid #374151; background: #1f2937; }
.app-list-icon img { width: 100%; height: 100%; object-fit: cover; }

.status-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.status-on { background: rgba(6,78,59,.5); color: #4ade80; }
.status-off { background: rgba(127,29,29,.5); color: #f87171; }

.code-tag { background: #1f2937; padding: 2px 6px; border-radius: 4px; font-family: monospace; }

.sub-en { font-size: 14px; color: #9ca3af; font-weight: 400; margin-left: 4px; }
.sub-en-sm { font-size: 11px; color: #b0b0b0; }
.sub-en-line { color: #9ca3af; font-size: 13px; }

.lang-switcher { width: 60px; display: flex; justify-content: flex-end; }
.lang-dropdown { position: relative; }
.lang-btn { background: #f3f4f6; border: none; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: #333; cursor: pointer; white-space: nowrap; }
.lang-btn:active { background: #e5e7eb; }
.lang-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.15); overflow: hidden; z-index: 100; min-width: 100px; }
.lang-option { padding: 10px 16px; font-size: 14px; color: #333; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
.lang-option:last-child { border-bottom: none; }
.lang-option:active { background: #f3f4f6; }
.lang-btn-dark { background: rgba(255,255,255,.1); border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: #f59e0b; cursor: pointer; margin-top: 12px; white-space: nowrap; }
.lang-btn-dark:active { background: rgba(255,255,255,.2); }

.toggle-btn { width: 48px; height: 28px; border-radius: 14px; border: none; cursor: pointer; position: relative; transition: background .2s; }
.toggle-on { background: #22c55e; }
.toggle-off { background: #4b5563; }
.toggle-knob { position: absolute; top: 2px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.knob-on { left: 22px; }
.knob-off { left: 2px; }