| |
| |
| |
| |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap'); |
|
|
| |
| *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } |
|
|
| :root { |
| --black: #0a0a0a; |
| --black-2: #111111; |
| --black-3: #161616; |
| --white: #efefef; |
| --white-dim: rgba(239,239,239,0.55); |
| --white-faint: rgba(239,239,239,0.22); |
| --white-ghost: rgba(239,239,239,0.08); |
| --accent: rgba(239,239,239,0.9); |
| --success: #4a8a4a; |
| --success-bg: rgba(20,50,20,0.4); |
| --error: #cc4444; |
| --error-bg: rgba(40,10,10,0.5); |
| --glass: rgba(255,255,255,0.04); |
| --glass-border:rgba(255,255,255,0.09); |
| --radius: 0px; |
| } |
|
|
| html { height:100%; scroll-behavior:smooth; overflow-x:hidden; } |
|
|
| body { |
| background:#0a0a0a; |
| color:var(--white); |
| font-family:'DM Mono',monospace; |
| font-size:13px; |
| line-height:1.6; |
| min-height:100dvh; |
| -webkit-font-smoothing:antialiased; |
| overflow-x:hidden; |
| max-width:100vw; |
| } |
|
|
| |
| h1,h2,h3,.serif { font-family:'Cormorant Garamond',serif; } |
| .mono { font-family:'DM Mono',monospace; } |
|
|
| |
| ::-webkit-scrollbar { width:3px; height:3px; } |
| ::-webkit-scrollbar-track { background:transparent; } |
| ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); } |
| ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); } |
|
|
| |
| |
| |
| .loader-overlay { |
| position:fixed; inset:0; background:var(--black); |
| display:flex; flex-direction:column; |
| align-items:center; justify-content:center; |
| z-index:9999; |
| transition:opacity 0.5s ease, visibility 0.5s ease; |
| } |
| .loader-overlay.hide { opacity:0; visibility:hidden; pointer-events:none; } |
|
|
| .loader { |
| position:relative; |
| width:64px; height:64px; |
| border-radius:50%; |
| perspective:800px; |
| } |
| .inner { |
| position:absolute; |
| box-sizing:border-box; |
| width:100%; height:100%; |
| border-radius:50%; |
| } |
| .inner.one { |
| left:0%; top:0%; |
| animation:rotate-one 1.4s linear infinite; |
| border-bottom:3px solid rgba(239,239,239,0.7); |
| } |
| .inner.two { |
| right:0%; top:0%; |
| animation:rotate-two 1.9s linear infinite; |
| border-right:3px solid rgba(239,239,239,0.5); |
| } |
| .inner.three { |
| right:0%; bottom:0%; |
| animation:rotate-three 2.6s linear infinite; |
| border-top:3px solid rgba(239,239,239,0.3); |
| } |
|
|
| @keyframes rotate-one { |
| 0% { transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } |
| 100% { transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } |
| } |
| @keyframes rotate-two { |
| 0% { transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg); } |
| 100% { transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg); } |
| } |
| @keyframes rotate-three { |
| 0% { transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg); } |
| 100% { transform:rotateX(35deg) rotateY(55deg) rotateZ(-360deg); } |
| } |
|
|
| .loader-text { |
| margin-top:28px; |
| font-size:10px; |
| letter-spacing:3px; |
| color:var(--white-dim); |
| animation:pulse-text 2s ease-in-out infinite; |
| } |
| @keyframes pulse-text { |
| 0%,100% { opacity:0.4; } |
| 50% { opacity:1; } |
| } |
|
|
| |
| |
| |
| .upload-progress-wrap { |
| margin:14px 0; |
| display:none; |
| } |
| .upload-progress-wrap.show { display:block; } |
| .progress { |
| background:rgba(255,255,255,0.07); |
| border-radius:100px; |
| align-items:center; |
| position:relative; |
| padding:0 5px; |
| display:flex; |
| height:36px; |
| width:100%; |
| overflow:hidden; |
| } |
| .progress-value { |
| box-shadow:0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1); |
| border-radius:100px; |
| background:var(--white); |
| height:26px; |
| width:0%; |
| transition:width 0.6s cubic-bezier(0.25,0.46,0.45,0.94); |
| position:relative; |
| overflow:hidden; |
| } |
| .progress-value::after { |
| content:''; |
| position:absolute; inset:0; |
| background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); |
| animation:shimmer 2s ease-in-out infinite; |
| } |
| @keyframes shimmer { |
| 0% { transform:translateX(-100%); } |
| 100% { transform:translateX(100%); } |
| } |
| .progress-label { |
| font-size:9px; letter-spacing:2px; color:var(--white-dim); |
| margin-top:7px; text-align:center; |
| } |
| .progress-pct { |
| position:absolute; right:14px; top:50%; |
| transform:translateY(-50%); |
| font-size:10px; letter-spacing:1px; color:var(--black); |
| mix-blend-mode:difference; |
| pointer-events:none; |
| } |
|
|
| |
| |
| |
| .topbar { |
| position:sticky; top:0; z-index:100; |
| height:52px; |
| background:rgba(10,10,10,0.92); |
| backdrop-filter:blur(1px) saturate(180%); |
| -webkit-backdrop-filter:blur(1px) saturate(180%); |
| border-bottom:1px solid var(--glass-border); |
| display:flex; align-items:center; padding:0 16px; gap:12px; |
| } |
| .topbar-logo { |
| display:flex; align-items:center; gap:8px; |
| text-decoration:none; color:var(--white); |
| flex-shrink:0; |
| } |
| .topbar-logo img { width:22px; height:22px; } |
| .topbar-name { font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:3px; } |
| .topbar-divider { width:1px; height:18px; background:var(--glass-border); } |
| .topbar-section { font-size:9px; letter-spacing:3px; color:var(--white-dim); } |
| .topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; } |
| .role-tag { |
| font-size:8px; letter-spacing:2px; padding:3px 8px; |
| border:1px solid var(--glass-border); color:var(--white-dim); |
| } |
| .online-dot { |
| width:6px; height:6px; border-radius:50%; |
| background:#4a8a4a; |
| box-shadow:0 0 6px rgba(74,138,74,0.8); |
| animation:blink 3s ease-in-out infinite; |
| } |
| @keyframes blink { |
| 0%,100% { opacity:1; } 50% { opacity:0.4; } |
| } |
|
|
| |
| |
| |
| .main { |
| max-width:820px; margin:0 auto; |
| padding:20px 14px 60px; |
| width:100%; overflow-x:hidden; |
| } |
|
|
| |
| .card { |
| background:var(--glass); |
| backdrop-filter:blur(1px) saturate(150%); |
| -webkit-backdrop-filter:blur(1px) saturate(150%); |
| border:1px solid var(--glass-border); |
| padding:20px 18px; |
| margin-bottom:14px; |
| transition:border-color 0.2s; |
| } |
| .card:hover { border-color:rgba(255,255,255,0.14); } |
| .card-title { |
| font-family:'Cormorant Garamond',serif; |
| font-size:17px; font-weight:600; |
| letter-spacing:1px; margin-bottom:14px; |
| color:var(--white); |
| } |
|
|
| |
| .label { |
| font-size:9px; letter-spacing:3px; color:var(--white-dim); |
| margin:20px 0 8px; text-transform:uppercase; |
| } |
|
|
| |
| .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } |
| @media(max-width:480px) { .grid-2 { grid-template-columns:1fr; } } |
|
|
| |
| .stats-row { |
| display:grid; grid-template-columns:repeat(4,1fr); gap:10px; |
| margin-bottom:20px; |
| } |
| @media(max-width:500px) { .stats-row { grid-template-columns:repeat(2,1fr); } } |
| .stat-box { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:14px 12px; text-align:center; |
| transition:border-color 0.2s, transform 0.2s; |
| } |
| .stat-box:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-1px); } |
| .stat-num { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; } |
| .stat-lbl { font-size:8px; letter-spacing:3px; color:var(--white-dim); margin-top:2px; } |
|
|
| |
| .tabs { display:flex; gap:0; border-bottom:1px solid var(--glass-border); margin-bottom:18px; overflow-x:auto; scrollbar-width:none; } |
| .tabs::-webkit-scrollbar { display:none; } |
| .tab-btn { |
| background:transparent; border:none; border-bottom:2px solid transparent; |
| color:var(--white-dim); padding:10px 14px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; white-space:nowrap; margin-bottom:-1px; |
| transition:all 0.2s; -webkit-tap-highlight-color:transparent; |
| } |
| .tab-btn:hover { color:var(--white); } |
| .tab-btn.active { color:var(--white); border-bottom-color:var(--white); } |
| .tab-pane { display:none; } |
| .tab-pane.active { display:block; } |
|
|
| |
| .field { margin-bottom:12px; } |
| .field label { |
| display:block; font-size:9px; letter-spacing:2px; |
| color:var(--white-dim); margin-bottom:6px; |
| } |
| input, select, textarea { |
| width:100%; background:rgba(255,255,255,0.04); |
| border:1px solid rgba(255,255,255,0.1); |
| color:var(--white); padding:10px 12px; |
| font-family:'DM Mono',monospace; font-size:12px; |
| outline:none; transition:border-color 0.2s; |
| -webkit-appearance:none; appearance:none; |
| border-radius:0; |
| } |
| input:focus, select:focus { border-color:rgba(255,255,255,0.35); } |
| input::placeholder { color:var(--white-faint); } |
| select option { background:#111; color:var(--white); } |
|
|
| |
| .btn-primary { |
| background:var(--white); color:var(--black); |
| border:none; padding:11px 20px; |
| font-family:'DM Mono',monospace; font-size:10px; letter-spacing:3px; |
| cursor:pointer; transition:all 0.2s; font-weight:500; |
| -webkit-tap-highlight-color:transparent; |
| position:relative; overflow:hidden; |
| } |
| .btn-primary::after { |
| content:''; position:absolute; inset:0; |
| background:rgba(0,0,0,0.1); opacity:0; transition:opacity 0.15s; |
| } |
| .btn-primary:hover::after { opacity:1; } |
| .btn-primary:active { transform:scale(0.98); } |
| .btn-primary:disabled { opacity:0.4; cursor:not-allowed; } |
|
|
| .btn-ghost { |
| background:transparent; border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:8px 14px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; |
| } |
| .btn-ghost:hover { border-color:rgba(255,255,255,0.3); color:var(--white); } |
|
|
| .btn-danger { |
| background:transparent; border:1px solid rgba(120,30,30,0.5); |
| color:#cc5555; padding:6px 12px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; |
| cursor:pointer; transition:all 0.2s; |
| } |
| .btn-danger:hover { background:rgba(40,10,10,0.5); border-color:#cc4444; } |
|
|
| .btn-outline { |
| background:transparent; border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:8px 14px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; display:inline-block; |
| text-decoration:none; |
| } |
| .btn-outline:hover { border-color:rgba(255,255,255,0.3); color:var(--white); } |
|
|
| |
| .alert { |
| font-size:10px; letter-spacing:1px; padding:10px 12px; |
| display:none; line-height:1.7; |
| } |
| .alert.show { display:block; } |
| .alert.error { border:1px solid rgba(120,30,30,0.4); color:#e06060; background:var(--error-bg); } |
| .alert.success { border:1px solid rgba(40,90,40,0.5); color:#6ab06a; background:var(--success-bg); } |
| .alert.info { border:1px solid rgba(255,255,255,0.1); color:var(--white-dim); background:var(--glass); } |
| .err-code { font-size:8px; opacity:0.55; margin-right:5px; letter-spacing:1px; } |
|
|
| |
| .pill { |
| display:inline-block; font-size:8px; letter-spacing:2px; |
| padding:3px 8px; border:1px solid var(--glass-border); color:var(--white-dim); |
| } |
| .pill.success { border-color:rgba(40,90,40,0.5); color:#6ab06a; background:var(--success-bg); } |
| .pill.empty { border-color:rgba(100,60,20,0.4); color:rgba(200,140,60,0.8); background:rgba(30,15,5,0.4); } |
| .pill.pending { border-color:rgba(80,80,20,0.5); color:rgba(200,200,60,0.8); background:rgba(20,20,5,0.4); } |
|
|
| |
| .data-table { border:1px solid var(--glass-border); } |
| .dt-head { |
| display:grid; gap:8px; padding:8px 12px; |
| font-size:8px; letter-spacing:3px; color:var(--white-faint); |
| background:rgba(255,255,255,0.02); border-bottom:1px solid var(--glass-border); |
| } |
| .dt-row { |
| display:grid; gap:8px; padding:11px 12px; |
| border-bottom:1px solid rgba(255,255,255,0.03); |
| align-items:center; transition:background 0.15s; |
| } |
| .dt-row:last-child { border-bottom:none; } |
| .dt-row:hover { background:rgba(255,255,255,0.025); } |
|
|
| |
| .status-dot { |
| width:7px; height:7px; border-radius:50%; display:inline-block; |
| margin-right:6px; vertical-align:middle; |
| } |
| .status-dot.online { background:#4a8a4a; box-shadow:0 0 6px rgba(74,138,74,0.7); } |
| .status-dot.offline { background:rgba(255,255,255,0.2); } |
|
|
| |
| .toast { |
| position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(80px); |
| background:var(--white); color:var(--black); |
| padding:10px 20px; font-size:10px; letter-spacing:2px; |
| transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s; |
| opacity:0; z-index:9998; white-space:nowrap; pointer-events:none; |
| } |
| .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } |
|
|
| |
| .footer { |
| margin-top:60px; padding-top:24px; |
| border-top:1px solid var(--glass-border); text-align:center; |
| } |
| .footer-top { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; } |
| .footer-top img { width:16px; height:16px; opacity:0.4; } |
| .footer-top span { font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:3px; opacity:0.4; } |
| .footer-divider { width:40px; height:1px; background:var(--glass-border); margin:0 auto 10px; } |
| .footer-meta { font-size:9px; letter-spacing:2px; color:var(--white-faint); margin-bottom:4px; } |
| .footer-copy { font-size:8px; letter-spacing:1px; color:rgba(239,239,239,0.15); line-height:2; } |
|
|
| |
| |
| |
| .login-page { |
| display:flex; flex-direction:column; |
| align-items:center; justify-content:center; |
| min-height:100dvh; padding:24px 16px; |
| } |
| .login-wrap { width:100%; max-width:360px; } |
|
|
| .login-header { text-align:center; margin-bottom:28px; } |
| .login-header img { width:40px; height:40px; margin:0 auto 14px; display:block; } |
| .login-header h1 { |
| font-family:'Cormorant Garamond',serif; font-size:28px; |
| font-weight:600; letter-spacing:5px; margin-bottom:5px; |
| } |
| .login-header p { font-size:9px; letter-spacing:2px; color:var(--white-dim); } |
|
|
| |
| .role-tabs { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--glass-border); margin-bottom:0; } |
| .role-tab { |
| background:transparent; border:none; border-right:1px solid var(--glass-border); |
| color:var(--white-dim); padding:12px 6px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; |
| cursor:pointer; transition:all 0.2s; |
| display:flex; flex-direction:column; align-items:center; gap:6px; |
| -webkit-tap-highlight-color:transparent; |
| } |
| .role-tab:last-child { border-right:none; } |
| .role-tab:hover { color:var(--white); background:rgba(255,255,255,0.03); } |
| .role-tab.active { background:var(--white); color:var(--black); } |
| .role-tab svg { width:16px; height:16px; transition:transform 0.2s; } |
| .role-tab.active svg { transform:scale(1.1); } |
|
|
| |
| .role-fields-wrap { |
| border:1px solid var(--glass-border); border-top:none; |
| padding:20px 16px; |
| position:relative; overflow:hidden; |
| min-height:180px; |
| } |
| .fields { display:none; animation:fadeSlideIn 0.3s ease forwards; } |
| .fields.show { display:block; } |
| .fields.out { animation:fadeSlideOut 0.2s ease forwards; } |
|
|
| @keyframes fadeSlideIn { |
| from { opacity:0; transform:translateY(6px); } |
| to { opacity:1; transform:translateY(0); } |
| } |
| @keyframes fadeSlideOut { |
| from { opacity:1; transform:translateY(0); } |
| to { opacity:0; transform:translateY(-6px); } |
| } |
|
|
| |
| .btn-signup { |
| width:100%; background:transparent; |
| border:1px solid rgba(255,255,255,0.18); |
| color:var(--white); padding:11px; |
| font-family:'DM Mono',monospace; font-size:10px; letter-spacing:3px; |
| cursor:pointer; transition:all 0.25s; display:none; margin-top:10px; |
| position:relative; overflow:hidden; |
| } |
| .btn-signup.show { display:block; } |
| .btn-signup:hover { border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.04); } |
|
|
| .signup-hint { |
| font-size:10px; color:var(--white-dim); letter-spacing:1px; |
| text-align:center; margin-top:10px; line-height:1.8; display:none; |
| } |
| .signup-hint.show { display:block; } |
|
|
| .server-status { |
| display:flex; align-items:center; justify-content:center; |
| gap:7px; margin-bottom:16px; font-size:9px; |
| color:var(--white-dim); letter-spacing:1px; |
| } |
|
|
| |
| |
| |
| .steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:28px; } |
| .step { display:flex; flex-direction:column; align-items:center; gap:5px; } |
| .step-dot { |
| width:28px; height:28px; border-radius:50%; |
| border:1.5px solid rgba(255,255,255,0.15); |
| display:flex; align-items:center; justify-content:center; |
| font-size:10px; color:var(--white-dim); |
| transition:all 0.4s ease; |
| } |
| .step-dot.active { border-color:var(--white); color:var(--white); background:rgba(255,255,255,0.08); } |
| .step-dot.done { border-color:rgba(60,120,60,0.6); background:rgba(20,50,20,0.4); color:#5a9a5a; } |
| .step-label { font-size:8px; letter-spacing:1px; color:var(--white-faint); white-space:nowrap; } |
| .step-label.active { color:var(--white-dim); } |
| .step-line { width:24px; height:1px; background:rgba(255,255,255,0.08); margin:0 3px; margin-bottom:14px; } |
|
|
| .phase { display:none; animation:fadeSlideIn 0.3s ease forwards; } |
| .phase.active { display:block; } |
|
|
| |
| .vpass-card { |
| background:var(--glass); backdrop-filter:blur(1px); |
| -webkit-backdrop-filter:blur(1px); |
| border:1px solid var(--glass-border); |
| padding:16px 16px; margin-bottom:16px; |
| display:flex; align-items:center; gap:14px; |
| } |
| .vpass-card .vc-icon img { width:26px; height:26px; opacity:0.5; } |
| .vpass-card .vc-name { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; } |
| .vpass-card .vc-id { font-size:10px; color:var(--white-dim); letter-spacing:2px; margin-top:2px; } |
|
|
| |
| .phone-wrap { display:flex; border:1px solid rgba(255,255,255,0.12); } |
| .phone-prefix { |
| background:rgba(255,255,255,0.06); border:none; border-right:1px solid rgba(255,255,255,0.1); |
| color:var(--white); padding:10px 12px; |
| font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; |
| flex-shrink:0; display:flex; align-items:center; |
| } |
| .phone-input { |
| flex:1; background:transparent; border:none; color:var(--white); |
| padding:10px 12px; font-family:'DM Mono',monospace; font-size:13px; |
| letter-spacing:2px; outline:none; |
| } |
| .phone-input::placeholder { color:var(--white-faint); letter-spacing:1px; font-size:11px; } |
| .phone-format { font-size:9px; color:var(--white-faint); letter-spacing:1px; margin-top:5px; } |
|
|
| |
| .waiting-indicator { |
| display:flex; align-items:center; gap:10px; |
| padding:14px 16px; background:var(--glass); |
| border:1px solid var(--glass-border); margin-bottom:14px; |
| } |
| .pulse-dot { |
| width:8px; height:8px; border-radius:50%; |
| background:rgba(255,255,255,0.4); |
| animation:pulse 2s ease-in-out infinite; flex-shrink:0; |
| } |
| @keyframes pulse { |
| 0%,100% { opacity:0.3; transform:scale(0.8); } |
| 50% { opacity:1; transform:scale(1.2); } |
| } |
| .wi-text { font-size:11px; color:var(--white-dim); letter-spacing:1px; } |
| .wi-code { font-size:10px; color:var(--white-faint); margin-top:2px; } |
|
|
| |
| .sms-waiting-box { |
| text-align:center; padding:20px 16px; |
| background:var(--glass); border:1px solid var(--glass-border); margin-bottom:14px; |
| } |
| .sms-waiting-box .sw-title { font-family:'Cormorant Garamond',serif; font-size:17px; letter-spacing:2px; margin-bottom:8px; } |
| .sms-waiting-box .sw-sub { font-size:10px; color:var(--white-dim); letter-spacing:1px; line-height:1.9; } |
| .sms-waiting-box .sw-phone { font-size:14px; color:var(--white); letter-spacing:2px; margin-top:10px; font-family:'DM Mono',monospace; } |
|
|
| |
| .success-anim { text-align:center; padding:22px 0; } |
| .success-anim svg { width:44px; height:44px; margin:0 auto 14px; display:block; } |
| .success-anim .sa-title { font-family:'Cormorant Garamond',serif; font-size:24px; letter-spacing:2px; margin-bottom:6px; } |
|
|
| |
| |
| |
| .notif-badge { |
| display:inline-flex; align-items:center; justify-content:center; |
| width:16px; height:16px; border-radius:50%; |
| background:rgba(200,60,60,0.9); color:#fff; |
| font-size:8px; margin-left:5px; line-height:1; |
| } |
|
|
| .notif-card { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:18px 16px 16px; margin-bottom:12px; position:relative; |
| transition:border-color 0.2s; |
| } |
| .notif-card.unread { border-color:rgba(255,255,255,0.18); } |
| .notif-card .nc-type { font-size:9px; letter-spacing:2px; color:var(--white-dim); margin-bottom:8px; } |
| .notif-card .nc-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; margin-bottom:2px; } |
| .notif-card .nc-vpass { font-size:10px; color:var(--white-dim); letter-spacing:2px; margin-bottom:14px; } |
| .nc-phone-block { |
| display:flex; align-items:center; gap:10px; |
| background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); |
| padding:10px 14px; margin-bottom:14px; |
| } |
| .nc-phone-block .ph-label { font-size:8px; letter-spacing:2px; color:var(--white-dim); } |
| .nc-phone-block .ph-num { font-family:'DM Mono',monospace; font-size:15px; color:var(--white); letter-spacing:2px; margin-top:3px; } |
| .nc-code-block { |
| display:flex; align-items:center; gap:14px; margin-bottom:14px; |
| padding:14px 16px; |
| background:rgba(20,18,5,0.6); border:1px solid rgba(255,220,60,0.18); |
| } |
| .nc-code-block .nc-code { |
| font-family:'Cormorant Garamond',serif; font-size:40px; letter-spacing:12px; color:var(--white); |
| } |
| .nc-code-block .nc-code-info { font-size:9px; color:rgba(255,215,60,0.55); letter-spacing:1px; line-height:2.2; } |
| .nc-code-block .nc-code-info strong { color:rgba(255,215,60,0.85); } |
| .nc-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } |
| .btn-copy-sms { |
| background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); |
| color:var(--white); padding:9px 14px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:7px; |
| } |
| .btn-copy-sms:hover { background:rgba(255,255,255,0.13); } |
| .btn-copy-sms.copied { border-color:rgba(60,120,60,0.6); color:#5a9a5a; } |
| .btn-copy-sms svg { width:13px; height:13px; } |
| .notif-card .nc-time { position:absolute; top:14px; right:14px; font-size:9px; color:var(--white-faint); letter-spacing:1px; } |
| .notif-card.done { opacity:0.35; pointer-events:none; } |
| .notif-empty { font-size:11px; color:var(--white-dim); padding:30px 0; letter-spacing:1px; text-align:center; } |
|
|
| |
| .push-banner { |
| position:fixed; top:62px; right:14px; z-index:9990; |
| background:rgba(12,12,12,0.97); backdrop-filter:blur(1px); |
| border:1px solid rgba(255,255,255,0.14); |
| padding:14px 36px 14px 16px; max-width:290px; |
| transform:translateX(340px); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); |
| box-shadow:0 8px 40px rgba(0,0,0,0.7); |
| } |
| .push-banner.show { transform:translateX(0); } |
| .pb-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#cc4444; margin-right:6px; vertical-align:middle; animation:blink 1.5s ease-in-out infinite; } |
| .pb-title { font-size:8px; letter-spacing:2px; color:var(--white-dim); margin-bottom:5px; } |
| .pb-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; } |
| .pb-sub { font-size:10px; color:var(--white-dim); margin-top:3px; letter-spacing:1px; } |
| .pb-close { position:absolute; top:9px; right:11px; background:none; border:none; color:var(--white-dim); cursor:pointer; font-size:15px; line-height:1; } |
|
|
| |
| |
| |
| .materii-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:20px; } |
| .materie-btn { |
| background:var(--glass); border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:16px 10px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; text-align:center; line-height:1.6; |
| -webkit-tap-highlight-color:transparent; |
| } |
| .materie-btn:hover { border-color:rgba(255,255,255,0.3); color:var(--white); background:rgba(255,255,255,0.06); } |
| .materie-btn.selected { background:var(--white); color:var(--black); border-color:var(--white); } |
| .materie-btn .mb-icon { font-size:20px; margin-bottom:7px; opacity:0.7; } |
|
|
| |
| .upload-zone { |
| border:1px dashed rgba(255,255,255,0.15); padding:28px 20px; |
| text-align:center; cursor:pointer; transition:all 0.25s; |
| position:relative; |
| } |
| .upload-zone:hover, .upload-zone.drag { border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.03); } |
| .upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; } |
| .upload-zone .uz-icon { margin-bottom:10px; opacity:0.5; } |
| .upload-zone .uz-text { font-size:11px; color:var(--white-dim); letter-spacing:1px; } |
| .upload-zone .uz-sub { font-size:9px; color:var(--white-faint); margin-top:5px; letter-spacing:1px; } |
|
|
| |
| .file-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); align-items:center; transition:background 0.15s; } |
| .file-row:hover { background:rgba(255,255,255,0.02); } |
| .file-row:last-child { border-bottom:none; } |
| .file-name { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } |
| .file-size { font-size:9px; color:var(--white-faint); letter-spacing:1px; } |
|
|
| |
| |
| |
| .prof-spinner { display:none; flex-direction:column; align-items:center; padding:40px 20px; gap:20px; } |
| .prof-spinner.show { display:flex; } |
| .ps-text { font-size:10px; letter-spacing:2px; color:var(--white-dim); text-align:center; } |
|
|
| |
| .elev-card { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:14px 16px; margin-bottom:8px; cursor:pointer; |
| transition:all 0.2s; display:flex; justify-content:space-between; align-items:center; |
| } |
| .elev-card:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); } |
| .elev-card .ec-name { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600; } |
| .elev-card .ec-vpass { font-size:9px; color:var(--white-dim); letter-spacing:2px; margin-top:2px; } |
| .elev-card .ec-count { font-size:11px; color:var(--white-dim); } |
|
|
| |
| |
| |
| .fade-in { animation:fadeIn 0.5s ease forwards; } |
| .fade-in-2 { animation:fadeIn 0.5s ease 0.1s both; } |
| .fade-in-3 { animation:fadeIn 0.5s ease 0.2s both; } |
| .fade-in-4 { animation:fadeIn 0.5s ease 0.3s both; } |
| .fade-in-5 { animation:fadeIn 0.5s ease 0.4s both; } |
|
|
| @keyframes fadeIn { |
| from { opacity:0; transform:translateY(8px); } |
| to { opacity:1; transform:translateY(0); } |
| } |
|
|
| |
| |
| |
| .elev-row { grid-template-columns:100px 1fr 90px 80px 80px; } |
| .prof-row { grid-template-columns:1fr 140px 70px 70px; } |
| .mat-row { grid-template-columns:1fr 70px; } |
| @media(max-width:600px) { |
| .elev-row { grid-template-columns:1fr auto; } |
| .elev-row .col-vpass, .elev-row .col-pin, .elev-row .col-status { display:none; } |
| .prof-row { grid-template-columns:1fr auto; } |
| .prof-row .col-mat, .prof-row .col-pin { display:none; } |
| } |
|
|
| |
| .vpass-preview { |
| background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); |
| color:var(--white); padding:10px 12px; |
| font-family:'Cormorant Garamond',serif; font-size:17px; letter-spacing:3px; |
| min-height:42px; display:flex; align-items:center; |
| } |
|
|
| |
| .danger-box { border:1px solid rgba(120,30,30,0.4); padding:20px 16px; background:rgba(20,5,5,0.5); } |
| .danger-box h4 { font-size:9px; letter-spacing:3px; color:#cc5555; margin-bottom:10px; } |
|
|
| |
| |
| |
| .page-404 { |
| min-height:100dvh; display:flex; flex-direction:column; |
| align-items:center; justify-content:center; text-align:center; padding:24px; |
| } |
| .page-404 .e-code { |
| font-family:'Cormorant Garamond',serif; font-size:80px; font-weight:600; |
| line-height:1; letter-spacing:8px; color:rgba(255,255,255,0.06); |
| margin-bottom:0; |
| } |
| .page-404 .e-title { font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:3px; margin-bottom:8px; } |
| .page-404 .e-sub { font-size:10px; color:var(--white-dim); letter-spacing:2px; line-height:2; margin-bottom:28px; } |
| .page-404 .e-db { font-size:9px; color:var(--white-faint); letter-spacing:1px; line-height:2.2; font-family:'DM Mono',monospace; } |
| .page-404 .e-db .db-ok { color:rgba(74,138,74,0.7); } |
| .page-404 .e-db .db-err { color:rgba(180,60,60,0.7); } |
|
|
| |
| |
| |
| .reset-page { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100dvh; padding:20px 14px; } |
| .reset-wrap { width:100%; max-width:360px; } |
|
|
| |
| |
| |
| .footer-mini { text-align:center; margin-top:20px; font-size:9px; color:var(--white-faint); letter-spacing:1px; line-height:2.2; } |
| .sep { height:1px; background:var(--glass-border); margin:16px 0; } |
| .text-dim { color:var(--white-dim); } |
| .text-faint{ color:var(--white-faint); } |
| .mt-10 { margin-top:10px; } |
| .mt-16 { margin-top:16px; } |
|
|
| |
| |
| |
| .vhelp-fab { |
| position:fixed; |
| bottom:24px; right:20px; |
| width:52px; height:52px; |
| border-radius:50%; |
| background:rgba(255,255,255,0.13); |
| backdrop-filter:blur(14px) saturate(160%); |
| -webkit-backdrop-filter:blur(14px) saturate(160%); |
| border:1px solid rgba(255,255,255,0.22); |
| box-shadow: |
| 0 4px 24px rgba(255,255,255,0.08), |
| 0 1px 6px rgba(0,0,0,0.4), |
| inset 0 1px 0 rgba(255,255,255,0.18); |
| display:flex; align-items:center; justify-content:center; |
| cursor:pointer; z-index:8000; |
| text-decoration:none; |
| transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1), |
| box-shadow 0.2s ease, |
| background 0.2s ease; |
| animation:fab-appear 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.8s both; |
| } |
| .vhelp-fab:hover { |
| transform:scale(1.1); |
| background:rgba(255,255,255,0.2); |
| box-shadow: |
| 0 6px 32px rgba(255,255,255,0.15), |
| 0 2px 8px rgba(0,0,0,0.5), |
| inset 0 1px 0 rgba(255,255,255,0.25); |
| } |
| .vhelp-fab:active { transform:scale(0.96); } |
| .vhelp-fab svg { |
| width:22px; height:22px; |
| filter:drop-shadow(0 0 4px rgba(255,255,255,0.4)); |
| } |
|
|
| |
| .vhelp-fab::before { |
| content:'VHelp'; |
| position:absolute; right:calc(100% + 10px); top:50%; |
| transform:translateY(-50%) translateX(6px); |
| background:rgba(255,255,255,0.1); |
| backdrop-filter:blur(10px); |
| -webkit-backdrop-filter:blur(10px); |
| border:1px solid rgba(255,255,255,0.15); |
| color:rgba(255,255,255,0.8); |
| padding:4px 10px; font-size:9px; letter-spacing:2px; |
| font-family:'DM Mono',monospace; |
| white-space:nowrap; pointer-events:none; |
| opacity:0; transition:opacity 0.15s, transform 0.15s; |
| } |
| .vhelp-fab:hover::before { |
| opacity:1; transform:translateY(-50%) translateX(0); |
| } |
|
|
| |
| .vhelp-fab::after { |
| content:''; |
| position:absolute; inset:-4px; |
| border-radius:50%; |
| border:1px solid rgba(255,255,255,0.15); |
| animation:fab-pulse 3s ease-in-out infinite; |
| pointer-events:none; |
| } |
| @keyframes fab-pulse { |
| 0%,100% { transform:scale(1); opacity:0.5; } |
| 50% { transform:scale(1.15); opacity:0; } |
| } |
| @keyframes fab-appear { |
| from { transform:scale(0) rotate(-20deg); opacity:0; } |
| to { transform:scale(1) rotate(0deg); opacity:1; } |
| } |
|
|
