@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap'); :root { --black: #080c0e; --surface: #0e1416; --surface-2: #141c1f; --surface-3: #1a2428; --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.14); --green: #00e87a; --green-dim: rgba(0,232,122,0.12); --green-glow: rgba(0,232,122,0.25); --red: #ff4757; --red-dim: rgba(255,71,87,0.12); --amber: #ffb800; --amber-dim: rgba(255,184,0,0.1); --text: #e8eff2; --text-muted: #5a7280; --text-mid: #8fa5b0; --radius: 14px; --radius-sm: 8px; --radius-lg: 20px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Single vertical scroll root on avoids wheel vs scrollbar mismatch (Chrome/Edge desktop). */ html { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; } body { overflow-x: hidden; overflow-y: visible; overscroll-behavior-y: contain; background: var(--black); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; position: relative; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,232,122,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,232,122,0.015) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(0,232,122,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } .app-container { width: 100%; max-width: 480px; padding: 0 0 80px; position: relative; z-index: 1; user-select: none; } .app-header { padding: 40px 24px 24px; display: flex; align-items: center; gap: 14px; position: relative; } .app-logo { width: 48px; height: 48px; background: var(--surface-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; border: 1px solid var(--border); box-shadow: 0 0 20px rgba(0, 232, 122, 0.12); overflow: hidden; } .app-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; } .app-logo::after { content: ''; position: absolute; inset: -1px; border-radius: 13px; background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent); pointer-events: none; } .logo-text { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--black); letter-spacing: -0.5px; } .app-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text); letter-spacing: -0.3px; } .app-title span { color: var(--green); } .view { display: none; flex-direction: column; gap: 12px; padding: 0 16px; animation: fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .view.active { display: flex; } /* ── Manager dashboard: full-width, stack on small screens; sidebar + main on wide ── */ .view-manager { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; flex-direction: column; } .view-manager .manager-layout { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .view-manager .manager-main, .view-manager .manager-sidebar { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .view-manager .manager-main .card, .view-manager .manager-sidebar .card { max-width: 100%; min-width: 0; } .view-manager #employee-list, .view-manager #site-list-display, .view-manager #team-list-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .view-manager .site-item, .view-manager .team-member-item { flex-wrap: wrap; gap: 10px; max-width: 100%; } .view-manager .site-item > div:first-child, .view-manager .team-member-item > div:first-child { min-width: 0; flex: 1 1 auto; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; transition: border-color 0.2s; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,232,122,0.3), transparent); opacity: 0; transition: opacity 0.3s; } .card:hover::before { opacity: 1; } .card:hover { border-color: var(--border-hover); } .card-accent { border-left: 3px solid var(--green); } h2 { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 20px; letter-spacing: -0.2px; display: flex; align-items: center; gap: 10px; } h2 .h2-icon { width: 28px; height: 28px; background: var(--green-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border: 1px solid rgba(0,232,122,0.2); } .auth-hero { padding: 8px 0 20px; text-align: center; } .auth-hero-title { font-family: 'Syne', sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--text); margin-bottom: 8px; } .auth-hero-title em { font-style: normal; color: var(--green); } .auth-hero-sub { font-size: 0.9rem; color: var(--text-muted); font-weight: 300; } .form-group { margin-bottom: 16px; } label { display: block; margin-bottom: 7px; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; } input, select { user-select: text; width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; transition: all 0.2s; outline: none; } input::placeholder { color: var(--text-muted); } input:focus, select:focus { border-color: var(--green); background: var(--surface-3); box-shadow: 0 0 0 3px var(--green-dim); } select option { background: var(--surface-2); } .btn { width: 100%; padding: 15px 20px; border: none; border-radius: var(--radius-sm); font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.08), transparent); pointer-events: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--green); color: var(--black); box-shadow: 0 4px 20px var(--green-glow); } .btn-primary:hover { box-shadow: 0 6px 28px rgba(0,232,122,0.4); background: #00ff87; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-mid); } .btn-outline:hover { border-color: var(--border-hover); color: var(--text); background: rgba(255,255,255,0.03); } .btn-danger { background: var(--red); color: white; box-shadow: 0 4px 20px rgba(255,71,87,0.3); } .btn-danger:hover { box-shadow: 0 6px 28px rgba(255,71,87,0.45); } .btn-sm { width: auto; padding: 8px 14px; font-size: 0.78rem; } .divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .divider span { font-size: 0.75rem; color: var(--text-muted); } .register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .register-btn { padding: 14px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mid); font-family: 'Syne', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .register-btn .reg-icon { font-size: 1.4rem; } .register-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); } .register-btn:active { transform: scale(0.97); } .gps-pill { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 16px; border: 1px solid; } .gps-pill.waiting { background: var(--amber-dim); border-color: rgba(255,184,0,0.2); color: var(--amber); } .gps-pill.success { background: var(--green-dim); border-color: rgba(0,232,122,0.2); color: var(--green); } .gps-pill.error { background: var(--red-dim); border-color: rgba(255,71,87,0.2); color: var(--red); } .gps-pill .gps-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: blink 1.4s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .gps-pill button { margin-left: auto; background: none; border: 1px solid currentColor; color: inherit; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-family: 'Syne', sans-serif; font-weight: 600; } .coordinates-display { font-family: monospace; font-size: 0.8rem; color: var(--text-muted); padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .status-indicator { padding: 36px 24px; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; margin-bottom: 4px; position: relative; overflow: hidden; transition: all 0.4s; } .status-indicator.checked-in { background: var(--green-dim); border-color: rgba(0,232,122,0.25); } .status-indicator.checked-out { background: var(--red-dim); border-color: rgba(255,71,87,0.2); } .status-icon { font-size: 3rem; display: block; margin-bottom: 12px; } #emp-status-text { font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; } #emp-timer { margin-top: 10px; font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 300; letter-spacing: 2px; color: var(--green); } .site-item { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; transition: border-color 0.2s; } .site-item:hover { border-color: var(--border-hover); } .team-member-item { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; transition: all 0.2s; } .team-member-item:hover { border-color: var(--border-hover); } .team-member-name { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text); } .text-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .team-member-status-icon { font-size: 1.1rem; } .checkout-reason-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .checkout-reason-panel.expanded { max-height: 240px; } .checkout-reason-panel textarea { user-select: text; width: 100%; min-height: 90px; resize: vertical; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; } .site-status-group { margin-bottom: 20px; } .site-header { font-family: 'Syne', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1.2px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .logs-table { width: 100%; border-collapse: collapse; } .logs-table th { text-align: left; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .logs-table td { padding: 11px 12px; font-size: 0.85rem; border-bottom: 1px solid var(--border); color: var(--text-mid); } .logs-table tr:last-child td { border-bottom: none; } .logs-table td:first-child { font-family: 'Syne', sans-serif; font-weight: 600; color: var(--text); font-size: 0.85rem; } .log-user-group { padding: 10px 0; } .log-user-group + .log-user-group { border-top: 1px solid var(--border); margin-top: 10px; } .log-user-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text); margin: 0 0 8px; } .log-user-title-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: 0; padding: 4px 0 8px; cursor: pointer; color: inherit; text-align: left; } .log-user-title-text { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text); } .log-user-title-icon { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--text-muted); line-height: 1; } .logs-table.logs-table-compact th, .logs-table.logs-table-compact td { padding-left: 0; padding-right: 0; } .otp-input { text-align: center; letter-spacing: 12px; font-size: 1.8rem; font-family: 'Syne', sans-serif; font-weight: 700; padding: 18px !important; } .verify-icon { width: 72px; height: 72px; background: var(--green-dim); border: 1px solid rgba(0,232,122,0.25); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; } #toast-container { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 420px); pointer-events: none; } .toast { pointer-events: auto; width: 100%; background: rgba(18, 24, 28, 0.95); color: var(--text); border: 1px solid var(--border-hover); padding: 12px 14px; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.55); font-size: 0.88rem; display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(-14px) scale(0.98); animation: toast-in 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards; backdrop-filter: blur(12px); } .toast-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; background: rgba(255,255,255,0.08); } .toast-copy { display: flex; flex-direction: column; gap: 2px; } .toast-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.2px; } .toast-message { color: var(--text-mid); line-height: 1.35; font-size: 0.82rem; } .toast.success { border-left: 3px solid var(--green); } .toast.error { border-left: 3px solid var(--red); } .toast.warning { border-left: 3px solid var(--amber); } .toast.info { border-left: 3px solid #4aa3ff; } @keyframes toast-in { to { opacity: 1; transform: translateY(0) scale(1); } } .toast.leaving { opacity: 0; transform: translateY(-8px) scale(0.98); transition: all 0.22s ease; } .debug-controls { margin-top: 8px; padding: 14px; border: 1px dashed rgba(255,255,255,0.06); border-radius: var(--radius); opacity: 0.5; transition: opacity 0.2s; } .debug-controls:hover { opacity: 1; } .debug-title { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.8px; } .text-center { text-align: center; } .text-small { font-size: 0.82rem; } .t-success { color: var(--green); } .t-danger { color: var(--red); } .monospace-text { font-family: monospace; } .gps-status-warning { color: var(--amber); background: var(--amber-dim); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,184,0,0.2); display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; } .gps-status-success { color: var(--green); background: var(--green-dim); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(0,232,122,0.2); display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; } .btn-retry-gps { background: transparent; border: 1px solid currentColor; color: inherit; padding: 3px 8px; font-size: 0.7rem; border-radius: 4px; cursor: pointer; font-family: 'Syne', sans-serif; } .section-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 0 4px; margin-top: 4px; } .badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; font-family: 'Syne', sans-serif; } .badge-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,232,122,0.25); } .badge-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,71,87,0.25); } .badge-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(255,184,0,0.25); } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* ═══════════════════════════════════════ DESKTOP LAYOUT (768px+) ═══════════════════════════════════════ */ @media (min-width: 768px) { html { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; } body { display: block !important; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: visible; padding: 0; } .app-container { width: 100% !important; max-width: 100vw !important; min-height: 100vh; min-height: 100dvh; height: auto; display: flex !important; flex-direction: column !important; padding: 0; margin: 0; border-radius: 0; border: none; box-sizing: border-box; } .app-header { padding: 20px 40px; border-bottom: 1px solid var(--border); background: rgba(8,12,14,0.9); backdrop-filter: blur(20px); flex-shrink: 0; z-index: 100; } .app-title { font-size: 1.1rem; } .view { display: none !important; } /* ── AUTH ── */ #view-auth.active { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; flex: 1; padding: 0; gap: 0; height: calc(100vh - 73px); overflow: hidden; } .auth-hero { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; border-right: 1px solid var(--border); background: linear-gradient(135deg, rgba(0,232,122,0.03) 0%, transparent 60%); text-align: left; overflow-y: auto; } .auth-hero-title { font-size: 3.8rem; margin-bottom: 16px; } .auth-hero-sub { font-size: 1rem; margin-bottom: 48px; } .auth-hero-features { display: flex; flex-direction: column; gap: 14px; } .auth-feature { display: flex; align-items: center; gap: 12px; color: var(--text-mid); font-size: 0.9rem; } .auth-feature-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 8px var(--green-glow); } #view-auth .card { grid-column: 2; grid-row: 1; border-radius: 0; border: none; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 56px; overflow-y: auto; background: var(--surface); } #view-auth .divider { margin: 16px 0; } #view-auth .register-grid { margin-top: 8px; } /* ── REGISTER / VERIFY ── */ #view-register.active, #view-register-emp.active, #view-verify.active { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; flex: 1; padding: 0; gap: 0; height: calc(100vh - 73px); overflow: hidden; } #view-register .card, #view-register-emp .card, #view-verify .card { grid-column: 2; grid-row: 1; border-radius: 0; border: none; border-left: 1px solid var(--border); padding: 48px 56px; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; background: var(--surface); } #view-register::before, #view-register-emp::before, #view-verify::before { content: attr(data-title); grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 800; color: var(--green); opacity: 0.08; letter-spacing: -2px; padding: 64px; border-right: 1px solid var(--border); } /* ── MANAGER DASHBOARD ── document scroll (no trapped inner scroll) */ #view-manager.active { display: flex !important; flex-direction: column; flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 16px clamp(12px, 3vw, 28px) 48px; overflow-x: hidden; overflow-y: visible; gap: 12px; box-sizing: border-box; } #view-manager.active > #subscription-status-card { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; } #view-manager.active > .manager-layout { flex: 0 1 auto; width: 100%; max-width: 100%; min-width: 0; } @media (min-width: 900px) { #view-manager.active > .manager-layout { display: grid; grid-template-columns: minmax(0, min(340px, 36vw)) minmax(0, 1fr); grid-template-rows: minmax(0, auto); align-items: start; column-gap: clamp(16px, 2.5vw, 28px); row-gap: 12px; } #view-manager.active .manager-sidebar { grid-column: 1; grid-row: 1; } #view-manager.active .manager-main { grid-column: 2; grid-row: 1; } } #view-manager.active > .btn.btn-outline:not(.btn-sm) { margin-top: 8px; align-self: stretch; max-width: 100%; width: 100%; box-sizing: border-box; } #view-manager.active > .debug-controls { margin-top: 8px; flex: 0 0 auto; width: 100%; max-width: 100%; box-sizing: border-box; } /* ── EMPLOYEE DASHBOARD ── */ #view-employee.active { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto 1fr; flex: 1; padding: 0; gap: 0; height: calc(100vh - 73px); align-items: start; overflow-x: hidden; overflow-y: auto; } #view-employee .status-indicator { grid-column: 1; grid-row: 1; border-radius: 0; border: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); margin: 0; padding: 60px 40px; } #view-employee .card { grid-column: 1; grid-row: 2; border-radius: 0; border: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } #view-employee #emp-actions { grid-column: 1; grid-row: 3; padding: 20px 24px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } #view-employee #emp-actions .btn { width: 100%; } #view-employee .btn.btn-outline:not(.btn-sm) { grid-column: 1; grid-row: 4; border-radius: 0; border: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); margin: 0; } #view-employee .debug-controls { grid-column: 1; grid-row: 5; border-radius: 0; border: none; border-right: 1px solid var(--border); margin: 0; align-self: end; } #view-employee::after { content: 'WW'; grid-column: 2; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 12rem; font-weight: 800; color: var(--green); opacity: 0.04; letter-spacing: -8px; pointer-events: none; } } /* ═══════════════════════════════════════ PRICING CARDS ═══════════════════════════════════════ */ .pricing-container { display: flex; flex-direction: column; gap: 16px; margin: 12px 0; } @media (min-width: 768px) { .pricing-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } .pricing-card { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all 0.3s ease; display: flex; flex-direction: column; } .pricing-card:hover { border-color: var(--border-hover); background: var(--surface-3); } .pricing-card.current { border: 2px solid var(--green); background: rgba(0, 232, 122, 0.05); } .pricing-badge { position: absolute; top: 12px; right: 12px; background: rgba(0, 232, 122, 0.2); color: var(--green); padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .pricing-badge.popular { background: rgba(74, 163, 255, 0.2); color: #4aa3ff; } .plan-name { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700; margin-top: 8px; margin-bottom: 12px; color: var(--text); } .plan-price { display: flex; align-items: baseline; gap: 4px; font-family: 'Syne', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--green); margin-bottom: 6px; } .plan-price span:first-child { font-size: 1.2rem; color: var(--text-muted); } .plan-price .period { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; } .plan-duration { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; } .plan-features { list-style: none; margin: 16px 0; flex-grow: 1; } .plan-features li { font-size: 0.85rem; color: var(--text-mid); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); display: flex; align-items: center; gap: 8px; } .plan-features li:last-child { border-bottom: none; } .pricing-card .btn { margin-top: 16px; width: 100%; } .pricing-card.current .btn:disabled { background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted); cursor: not-allowed; } #trial-status { animation: pulse-green 3s ease-in-out infinite; } @keyframes pulse-green { 0%, 100% { color: var(--text-muted); } 50% { color: var(--green); } } /* ═══════════════════════════════════════ SUBSCRIPTION / PRICING VIEWS (DESKTOP) ═══════════════════════════════════════ */ @media (min-width: 768px) { #view-subscription.active { display: grid !important; grid-template-columns: minmax(280px, 380px) 1fr; grid-template-rows: 1fr auto; flex: 1; padding: 0; gap: 0; height: calc(100vh - 73px); overflow: hidden; } #view-subscription.active > .card:first-of-type { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0; border: none; border-right: 1px solid var(--border); padding: 48px 40px; text-align: center; overflow-y: auto; min-height: 0; } #view-subscription.active > .pricing-container { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 28px 28px 16px; margin: 0; overflow-y: auto; align-content: start; min-height: 0; } #view-subscription.active > .card:last-of-type { grid-column: 2; grid-row: 2; border-radius: 0; border: none; border-top: 1px solid var(--border); margin: 0; padding: 20px 28px; } #view-pricing.active, #view-select-plan.active { display: flex !important; flex-direction: column; flex: 1; padding: 0; gap: 0; height: calc(100vh - 73px); overflow: hidden; } #view-pricing.active > .card:first-of-type, #view-select-plan.active > .card:first-of-type { flex: 0 0 auto; border-radius: 0; border: none; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 48px; text-align: center; } #view-pricing.active > .pricing-container, #view-select-plan.active > .pricing-container { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 24px 32px; margin: 0; overflow-y: auto; align-content: start; min-height: 0; } #view-pricing.active > .card:last-of-type, #view-select-plan.active > .card:last-of-type { flex: 0 0 auto; border-radius: 0; border: none; border-top: 1px solid var(--border); margin: 0; padding: 20px 28px; } }