| |
| |
| |
| |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap'); |
|
|
| |
| *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } |
|
|
| :root { |
| --black: #090909; |
| --black-2: #111; |
| --black-3: #181818; |
| --white: #f0f0f0; |
| --white-dim: rgba(240,240,240,0.55); |
| --white-faint: rgba(240,240,240,0.22); |
| --white-ghost: rgba(240,240,240,0.07); |
| --accent: #f0f0f0; |
| --success: #4d9a4d; |
| --success-bg: rgba(18,48,18,0.5); |
| --error: #c94444; |
| --error-bg: rgba(40,8,8,0.6); |
| --glass: rgba(255,255,255,0.035); |
| --glass-border: rgba(255,255,255,0.08); |
| --glass-hover: rgba(255,255,255,0.06); |
| --radius: 0px; |
| --gap: 14px; |
| } |
|
|
| html { height:100%; scroll-behavior:smooth; overflow-x:hidden; } |
|
|
| body { |
| background:var(--black); |
| color:var(--white); |
| font-family:'DM Mono', monospace; |
| font-size:13px; |
| line-height:1.65; |
| min-height:100dvh; |
| -webkit-font-smoothing:antialiased; |
| overflow-x:hidden; |
| } |
|
|
| |
| 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.1); border-radius:2px; } |
| ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); } |
|
|
| |
| |
| |
| .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:60px; height:60px; |
| border-radius:50%; perspective:800px; |
| } |
| .inner { |
| position:absolute; box-sizing:border-box; |
| width:100%; height:100%; border-radius:50%; |
| } |
| .inner.one { |
| animation:rotate-one 1.4s linear infinite; |
| border-bottom:2px solid rgba(240,240,240,0.7); |
| } |
| .inner.two { |
| animation:rotate-two 1.9s linear infinite; |
| border-right:2px solid rgba(240,240,240,0.45); |
| } |
| .inner.three { |
| animation:rotate-three 2.6s linear infinite; |
| border-top:2px solid rgba(240,240,240,0.25); |
| } |
| @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:26px; font-size:9px; letter-spacing:4px; |
| color:var(--white-dim); |
| animation:loader-pulse 2s ease-in-out infinite; |
| } |
| @keyframes loader-pulse { 0%,100%{opacity:0.35;} 50%{opacity:0.9;} } |
|
|
| |
| |
| |
| .upload-progress-wrap { margin:16px 0; display:none; } |
| .upload-progress-wrap.show { display:block; } |
| .progress { |
| background:rgba(255,255,255,0.06); |
| border-radius:100px; position:relative; |
| padding:0 5px; display:flex; align-items:center; |
| height:40px; width:100%; overflow:hidden; |
| } |
| .progress-value { |
| box-shadow:0 0 20px rgba(255,255,255,0.25); |
| border-radius:100px; background:var(--white); |
| height:28px; width:0%; |
| transition:width 0.5s 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.35) 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:8px; 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:56px; |
| background:rgba(9,9,9,0.94); |
| backdrop-filter:blur(12px) saturate(160%); |
| -webkit-backdrop-filter:blur(12px) saturate(160%); |
| border-bottom:1px solid var(--glass-border); |
| display:flex; align-items:center; padding:0 18px; gap:14px; |
| } |
| .topbar-logo { |
| display:flex; align-items:center; gap:9px; |
| 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:17px; letter-spacing:3px; } |
| .topbar-divider { width:1px; height:20px; 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:10px; } |
| .role-tag { |
| font-size:8px; letter-spacing:2px; padding:4px 10px; |
| border:1px solid var(--glass-border); color:var(--white-dim); |
| } |
| .online-dot { |
| width:7px; height:7px; border-radius:50%; |
| background:#4d9a4d; |
| box-shadow:0 0 7px rgba(77,154,77,0.8); |
| animation:blink 3s ease-in-out infinite; |
| } |
| @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} } |
|
|
| |
| |
| |
| .main { |
| max-width:840px; margin:0 auto; |
| padding:24px 16px 80px; |
| width:100%; |
| } |
|
|
| |
| .card { |
| background:var(--glass); |
| border:1px solid var(--glass-border); |
| padding:22px 20px; |
| margin-bottom:16px; |
| transition:border-color 0.2s; |
| } |
| .card:hover { border-color:rgba(255,255,255,0.12); } |
| .card-title { |
| font-family:'Cormorant Garamond',serif; |
| font-size:18px; font-weight:600; |
| letter-spacing:1px; margin-bottom:16px; |
| color:var(--white); |
| } |
|
|
| |
| .label { |
| font-size:9px; letter-spacing:3px; color:var(--white-dim); |
| margin:22px 0 10px; text-transform:uppercase; |
| } |
|
|
| |
| .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } |
| @media(max-width:500px) { .grid-2 { grid-template-columns:1fr; } } |
|
|
| |
| .stats-row { |
| display:grid; grid-template-columns:repeat(4,1fr); gap:10px; |
| margin-bottom:24px; |
| } |
| @media(max-width:520px) { .stats-row { grid-template-columns:repeat(2,1fr); } } |
| .stat-box { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:16px 14px; text-align:center; |
| transition:border-color 0.2s, transform 0.2s; |
| } |
| .stat-box:hover { border-color:rgba(255,255,255,0.16); transform:translateY(-1px); } |
| .stat-num { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; } |
| .stat-lbl { font-size:8px; letter-spacing:3px; color:var(--white-dim); margin-top:3px; } |
|
|
| |
| .tabs { |
| display:flex; gap:0; border-bottom:1px solid var(--glass-border); |
| margin-bottom:20px; 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:12px 16px; |
| 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:14px; } |
| .field label { |
| display:block; font-size:9px; letter-spacing:2px; |
| color:var(--white-dim); margin-bottom:7px; |
| } |
| input, select, textarea { |
| width:100%; background:rgba(255,255,255,0.04); |
| border:1px solid rgba(255,255,255,0.09); |
| color:var(--white); padding:12px 14px; |
| font-family:'DM Mono',monospace; font-size:13px; |
| outline:none; transition:border-color 0.2s, background 0.2s; |
| -webkit-appearance:none; appearance:none; |
| border-radius:0; |
| } |
| input:focus, select:focus { |
| border-color:rgba(255,255,255,0.3); |
| background:rgba(255,255,255,0.06); |
| } |
| input::placeholder { color:var(--white-faint); font-size:12px; } |
| select option { background:#111; color:var(--white); } |
|
|
| |
| .btn-primary { |
| background:var(--white); color:var(--black); |
| border:none; padding:13px 22px; |
| 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; display:inline-block; |
| } |
| .btn-primary:hover { background:#d8d8d8; } |
| .btn-primary:active { transform:scale(0.98); } |
| .btn-primary:disabled { opacity:0.35; cursor:not-allowed; } |
|
|
| .btn-ghost { |
| background:transparent; |
| border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:9px 16px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; |
| -webkit-tap-highlight-color:transparent; |
| } |
| .btn-ghost:hover { border-color:rgba(255,255,255,0.28); color:var(--white); } |
|
|
| .btn-danger { |
| background:transparent; border:1px solid rgba(120,30,30,0.45); |
| color:#c96060; padding:8px 14px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; |
| cursor:pointer; transition:all 0.2s; |
| } |
| .btn-danger:hover { background:rgba(40,8,8,0.5); border-color:#c94444; } |
|
|
| .btn-outline { |
| background:transparent; border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:9px 16px; |
| 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.28); color:var(--white); } |
|
|
| |
| .alert { |
| font-size:10px; letter-spacing:1px; padding:12px 14px; |
| display:none; line-height:1.8; |
| } |
| .alert.show { display:block; } |
| .alert.error { border:1px solid rgba(120,30,30,0.45); 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 var(--glass-border); color:var(--white-dim); background:var(--glass); } |
| .err-code { font-size:8px; opacity:0.5; margin-right:5px; letter-spacing:1px; } |
|
|
| |
| .pill { |
| display:inline-block; font-size:8px; letter-spacing:2px; |
| padding:3px 9px; 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:10px 14px; |
| 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:13px 14px; |
| 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:#4d9a4d; box-shadow:0 0 6px rgba(77,154,77,0.7); } |
| .status-dot.offline { background:rgba(255,255,255,0.18); } |
|
|
| |
| .toast { |
| position:fixed; bottom:24px; left:50%; |
| transform:translateX(-50%) translateY(80px); |
| background:var(--white); color:var(--black); |
| padding:11px 22px; 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:15px; height:15px; opacity:0.35; } |
| .footer-top span { font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:3px; opacity:0.35; } |
| .footer-divider { width:36px; 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(240,240,240,0.12); line-height:2.2; } |
| .footer-mini { text-align:center; margin-top:22px; font-size:9px; color:var(--white-faint); letter-spacing:1px; line-height:2.2; } |
|
|
| |
| |
| |
| .login-header { text-align:center; margin-bottom:30px; } |
| .login-header img { width:42px; height:42px; margin:0 auto 14px; display:block; } |
| .login-header h1 { |
| font-family:'Cormorant Garamond',serif; font-size:30px; |
| font-weight:600; letter-spacing:6px; 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); |
| } |
| .role-tab { |
| background:transparent; border:none; |
| border-right:1px solid var(--glass-border); |
| color:var(--white-dim); padding:14px 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:7px; |
| -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:17px; height:17px; } |
|
|
| .role-fields-wrap { |
| border:1px solid var(--glass-border); border-top:none; |
| padding:22px 18px; position:relative; |
| overflow:hidden; min-height:190px; |
| } |
| .fields { display:none; animation:fadeSlideIn 0.28s ease forwards; } |
| .fields.show { display:block; } |
|
|
| @keyframes fadeSlideIn { |
| from { opacity:0; transform:translateY(7px); } |
| to { opacity:1; transform:translateY(0); } |
| } |
|
|
| .btn-signup { |
| width:100%; background:transparent; |
| border:1px solid rgba(255,255,255,0.15); |
| color:var(--white); padding:13px; |
| font-family:'DM Mono',monospace; font-size:10px; letter-spacing:3px; |
| cursor:pointer; transition:all 0.25s; display:none; margin-top:12px; |
| } |
| .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:11px; line-height:1.9; display:none; |
| } |
| .signup-hint.show { display:block; } |
|
|
| .server-status { |
| display:flex; align-items:center; justify-content:center; |
| gap:7px; margin-bottom:18px; font-size:9px; |
| color:var(--white-dim); letter-spacing:1px; |
| } |
|
|
| |
| |
| |
| .steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:30px; } |
| .step { display:flex; flex-direction:column; align-items:center; gap:5px; } |
| .step-dot { |
| width:30px; height:30px; border-radius:50%; |
| border:1.5px solid rgba(255,255,255,0.14); |
| 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(18,48,18,0.5); color:#5aaa5a; } |
| .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:26px; height:1px; background:rgba(255,255,255,0.08); margin:0 3px; margin-bottom:15px; } |
| .phase { display:none; animation:fadeSlideIn 0.28s ease forwards; } |
| .phase.active { display:block; } |
|
|
| .vpass-card { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:18px 16px; margin-bottom:18px; |
| display:flex; align-items:center; gap:14px; |
| } |
| .vpass-card .vc-icon img { width:28px; height:28px; opacity:0.55; } |
| .vpass-card .vc-name { font-family:'Cormorant Garamond',serif; font-size:20px; 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.11); } |
| .phone-prefix { |
| background:rgba(255,255,255,0.05); border:none; |
| border-right:1px solid rgba(255,255,255,0.09); |
| color:var(--white); padding:12px 14px; |
| 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:12px 14px; font-family:'DM Mono',monospace; |
| font-size:14px; 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:6px; } |
|
|
| .waiting-indicator { |
| display:flex; align-items:center; gap:12px; |
| padding:15px 16px; background:var(--glass); |
| border:1px solid var(--glass-border); margin-bottom:16px; |
| } |
| .pulse-dot { |
| width:8px; height:8px; border-radius:50%; |
| background:rgba(255,255,255,0.4); |
| animation:pulse-anim 2s ease-in-out infinite; flex-shrink:0; |
| } |
| @keyframes pulse-anim { |
| 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:22px 16px; |
| background:var(--glass); border:1px solid var(--glass-border); margin-bottom:16px; |
| } |
| .sms-waiting-box .sw-title { font-family:'Cormorant Garamond',serif; font-size:18px; letter-spacing:2px; margin-bottom:8px; } |
| .sms-waiting-box .sw-sub { font-size:10px; color:var(--white-dim); letter-spacing:1px; line-height:2; } |
| .sms-waiting-box .sw-phone { font-size:15px; color:var(--white); letter-spacing:3px; margin-top:12px; font-family:'DM Mono',monospace; } |
|
|
| .success-anim { text-align:center; padding:24px 0; } |
| .success-anim svg { width:46px; height:46px; margin:0 auto 16px; display:block; } |
| .success-anim .sa-title { font-family:'Cormorant Garamond',serif; font-size:26px; letter-spacing:2px; margin-bottom:7px; } |
|
|
| |
| |
| |
| .notif-badge { |
| display:inline-flex; align-items:center; justify-content:center; |
| width:17px; height:17px; 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:20px 18px; margin-bottom:14px; 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:9px; } |
| .notif-card .nc-name { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; margin-bottom:2px; } |
| .notif-card .nc-vpass { font-size:10px; color:var(--white-dim); letter-spacing:2px; margin-bottom:16px; } |
| .nc-phone-block { |
| display:flex; align-items:center; gap:12px; |
| background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); |
| padding:12px 16px; 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:16px; color:var(--white); letter-spacing:3px; margin-top:3px; } |
| .nc-code-block { |
| display:flex; align-items:center; gap:14px; margin-bottom:14px; |
| padding:16px 18px; |
| background:rgba(20,18,5,0.65); border:1px solid rgba(255,220,60,0.2); |
| } |
| .nc-code-block .nc-code { |
| font-family:'Cormorant Garamond',serif; font-size:44px; letter-spacing:14px; 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.4; } |
| .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.06); border:1px solid rgba(255,255,255,0.16); |
| color:var(--white); padding:10px 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.12); } |
| .btn-copy-sms.copied { border-color:rgba(60,120,60,0.6); color:#5aaa5a; } |
| .btn-copy-sms svg { width:13px; height:13px; } |
| .notif-card .nc-time { position:absolute; top:16px; right:16px; font-size:9px; color:var(--white-faint); letter-spacing:1px; } |
| .notif-card.done { opacity:0.3; pointer-events:none; } |
| .notif-empty { font-size:11px; color:var(--white-dim); padding:40px 0; letter-spacing:1px; text-align:center; } |
|
|
| .push-banner { |
| position:fixed; top:66px; right:14px; z-index:9990; |
| background:rgba(11,11,11,0.97); backdrop-filter:blur(12px); |
| border:1px solid rgba(255,255,255,0.14); |
| padding:16px 38px 16px 16px; max-width:300px; |
| transform:translateX(350px); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); |
| box-shadow:0 8px 40px rgba(0,0,0,0.8); |
| } |
| .push-banner.show { transform:translateX(0); } |
| .pb-title { font-size:8px; letter-spacing:2px; color:var(--white-dim); margin-bottom:5px; } |
| .pb-name { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; } |
| .pb-sub { font-size:10px; color:var(--white-dim); margin-top:3px; letter-spacing:1px; } |
| .pb-close { position:absolute; top:10px; right:12px; background:none; border:none; color:var(--white-dim); cursor:pointer; font-size:16px; line-height:1; } |
|
|
| |
| .search-bar { position:relative; margin-bottom:14px; } |
| .search-bar input { padding-left:36px; } |
| .search-bar svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:0.3; pointer-events:none; } |
|
|
| |
| |
| |
| .materii-grid { |
| display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); |
| gap:10px; margin-bottom:22px; |
| } |
| .materie-btn { |
| background:var(--glass); border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:18px 12px; |
| font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; text-align:center; line-height:1.7; |
| -webkit-tap-highlight-color:transparent; |
| } |
| .materie-btn:hover { border-color:rgba(255,255,255,0.28); color:var(--white); background:var(--glass-hover); } |
| .materie-btn.selected { background:var(--white); color:var(--black); border-color:var(--white); } |
| .materie-btn .mb-icon { margin-bottom:9px; opacity:0.65; } |
|
|
| |
| .upload-zone { |
| border:1px dashed rgba(255,255,255,0.13); padding:32px 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.38); |
| background:rgba(255,255,255,0.025); |
| } |
| .upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; } |
| .upload-zone .uz-icon { margin-bottom:12px; opacity:0.45; } |
| .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:6px; letter-spacing:1px; } |
|
|
| |
| .file-row { |
| display:grid; grid-template-columns:1fr auto auto; gap:10px; |
| padding:12px 14px; 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; } |
|
|
| |
| |
| |
| .elev-card { |
| background:var(--glass); border:1px solid var(--glass-border); |
| padding:15px 18px; margin-bottom:10px; 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.18); background:var(--glass-hover); } |
| .elev-card .ec-name { font-family:'Cormorant Garamond',serif; font-size:17px; 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); } |
|
|
| |
| |
| |
| .filter-row { |
| display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; |
| } |
| .filter-btn { |
| background:transparent; border:1px solid var(--glass-border); |
| color:var(--white-dim); padding:7px 14px; |
| font-family:'DM Mono',monospace; font-size:8px; letter-spacing:2px; |
| cursor:pointer; transition:all 0.2s; |
| } |
| .filter-btn:hover { border-color:rgba(255,255,255,0.25); color:var(--white); } |
| .filter-btn.active { background:var(--white); color:var(--black); border-color:var(--white); } |
|
|
| .log-row { |
| display:grid; grid-template-columns:80px 90px 1fr 80px; |
| gap:10px; padding:12px 14px; |
| border-bottom:1px solid rgba(255,255,255,0.035); |
| align-items:center; transition:background 0.15s; font-size:11px; |
| } |
| .log-row:hover { background:rgba(255,255,255,0.02); } |
| .log-row:last-child { border-bottom:none; } |
| @media(max-width:600px) { |
| .log-row { grid-template-columns:70px 1fr 60px; } |
| .log-row > div:nth-child(2) { display:none; } |
| } |
|
|
| .log-type { |
| font-size:8px; letter-spacing:2px; padding:3px 7px; |
| border:1px solid var(--glass-border); display:inline-block; |
| white-space:nowrap; text-align:center; |
| } |
| .log-type.login { border-color:rgba(40,90,40,0.5); color:#6ab06a; background:var(--success-bg); } |
| .log-type.logout { border-color:var(--glass-border); color:var(--white-dim); } |
| .log-type.upload { border-color:rgba(40,70,120,0.5); color:#7090d0; background:rgba(10,20,40,0.4); } |
| .log-type.err_pass{ border-color:rgba(100,30,30,0.5); color:#d06060; background:rgba(30,8,8,0.4); } |
| .log-type.signup { border-color:rgba(80,60,20,0.5); color:rgba(220,180,60,0.85); background:rgba(20,15,5,0.4); } |
| .log-type.cleanup { border-color:rgba(80,40,100,0.4); color:rgba(160,100,200,0.8); background:rgba(15,8,20,0.4); } |
| .log-type.default { border-color:var(--glass-border); color:var(--white-faint); } |
|
|
| .log-empty { font-size:11px; color:var(--white-dim); padding:40px 0; text-align:center; letter-spacing:1px; } |
|
|
| |
| |
| |
| .elev-row-admin { grid-template-columns:80px 100px 1fr 90px 90px; } |
| .prof-row { grid-template-columns:1fr 140px 70px 70px; } |
| .mat-row { grid-template-columns:1fr 70px; } |
| @media(max-width:600px) { |
| .elev-row-admin { grid-template-columns:1fr auto; } |
| .elev-row-admin .col-vpass,.elev-row-admin .col-status,.elev-row-admin .col-pos { 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 var(--glass-border); |
| color:var(--white); padding:12px 14px; |
| font-family:'Cormorant Garamond',serif; font-size:17px; letter-spacing:3px; |
| min-height:44px; display:flex; align-items:center; |
| } |
| .danger-box { border:1px solid rgba(120,30,30,0.4); padding:20px 18px; background:rgba(20,5,5,0.5); } |
| .danger-box h4 { font-size:9px; letter-spacing:3px; color:#cc5555; margin-bottom:12px; } |
|
|
| |
| |
| |
| .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:88px; font-weight:600; |
| line-height:1; letter-spacing:8px; color:rgba(240,240,240,0.05); margin-bottom:0; |
| } |
| .page-404 .e-title { font-family:'Cormorant Garamond',serif; font-size:24px; letter-spacing:3px; margin-bottom:9px; } |
| .page-404 .e-sub { font-size:10px; color:var(--white-dim); letter-spacing:2px; line-height:2.2; margin-bottom:28px; } |
| .page-404 .e-db { font-size:9px; color:var(--white-faint); letter-spacing:1px; line-height:2.4; } |
| .page-404 .e-db .db-ok { color:rgba(77,154,77,0.7); } |
| .page-404 .e-db .db-err { color:rgba(180,60,60,0.7); } |
|
|
| |
| |
| |
| .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(9px); } |
| to { opacity:1; transform:translateY(0); } |
| } |
|
|
| |
| .sep { height:1px; background:var(--glass-border); margin:18px 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:26px; right:22px; |
| width:54px; height:54px; border-radius:50%; |
| background:rgba(255,255,255,0.12); |
| backdrop-filter:blur(16px) saturate(160%); |
| -webkit-backdrop-filter:blur(16px) saturate(160%); |
| border:1px solid rgba(255,255,255,0.2); |
| box-shadow:0 4px 28px rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.5), 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 36px rgba(255,255,255,0.14), 0 2px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25); |
| } |
| .vhelp-fab:active { transform:scale(0.95); } |
| .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.14); |
| color:rgba(255,255,255,0.8); |
| padding:5px 11px; 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:-5px; border-radius:50%; |
| border:1px solid rgba(255,255,255,0.12); |
| 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.18);opacity:0;} } |
| @keyframes fab-appear { from{transform:scale(0) rotate(-20deg);opacity:0;} to{transform:scale(1) rotate(0deg);opacity:1;} } |
|
|
| |
| |
| |
| body.light-mode { |
| background:#f5f4f0; |
| color:#111; |
| } |
| body.light-mode .topbar { |
| background:rgba(245,244,240,0.95); |
| border-bottom-color:rgba(0,0,0,0.1); |
| } |
| body.light-mode .card, |
| body.light-mode .stat-box, |
| body.light-mode .materie-btn, |
| body.light-mode .notif-card, |
| body.light-mode .elev-card, |
| body.light-mode .data-table, |
| body.light-mode .role-fields-wrap, |
| body.light-mode .vpass-card { |
| background:rgba(0,0,0,0.04); |
| border-color:rgba(0,0,0,0.1); |
| } |
| body.light-mode .card:hover, |
| body.light-mode .stat-box:hover { |
| border-color:rgba(0,0,0,0.2); |
| } |
| body.light-mode input, |
| body.light-mode select, |
| body.light-mode textarea { |
| background:rgba(0,0,0,0.04); |
| border-color:rgba(0,0,0,0.12); |
| color:#111; |
| } |
| body.light-mode input:focus, |
| body.light-mode select:focus { |
| border-color:rgba(0,0,0,0.35); |
| background:rgba(0,0,0,0.06); |
| } |
| body.light-mode input::placeholder { color:rgba(0,0,0,0.3); } |
| body.light-mode select option { background:#f5f4f0; color:#111; } |
| body.light-mode .btn-primary { background:#111; color:#f5f4f0; } |
| body.light-mode .btn-primary:hover { background:#333; } |
| body.light-mode .btn-ghost, |
| body.light-mode .btn-outline, |
| body.light-mode .btn-signup { |
| border-color:rgba(0,0,0,0.15); |
| color:rgba(0,0,0,0.6); |
| } |
| body.light-mode .btn-ghost:hover, |
| body.light-mode .btn-outline:hover { border-color:rgba(0,0,0,0.4); color:#111; } |
| body.light-mode .role-tab { color:rgba(0,0,0,0.5); border-right-color:rgba(0,0,0,0.1); } |
| body.light-mode .role-tab:hover { color:#111; background:rgba(0,0,0,0.03); } |
| body.light-mode .role-tab.active { background:#111; color:#f5f4f0; } |
| body.light-mode .role-tabs { border-color:rgba(0,0,0,0.12); } |
| body.light-mode .tabs { border-bottom-color:rgba(0,0,0,0.1); } |
| body.light-mode .tab-btn { color:rgba(0,0,0,0.5); } |
| body.light-mode .tab-btn:hover { color:#111; } |
| body.light-mode .tab-btn.active { color:#111; border-bottom-color:#111; } |
| body.light-mode .label, |
| body.light-mode .topbar-section, |
| body.light-mode .role-tag, |
| body.light-mode .stat-lbl { color:rgba(0,0,0,0.5); } |
| body.light-mode .card-title { color:#111; } |
| body.light-mode .topbar-name { color:#111; } |
| body.light-mode .topbar-logo { color:#111; } |
| body.light-mode .topbar-divider { background:rgba(0,0,0,0.12); } |
| body.light-mode .dt-head { background:rgba(0,0,0,0.03); border-bottom-color:rgba(0,0,0,0.08); color:rgba(0,0,0,0.4); } |
| body.light-mode .dt-row { border-bottom-color:rgba(0,0,0,0.05); } |
| body.light-mode .dt-row:hover { background:rgba(0,0,0,0.025); } |
| body.light-mode .upload-zone { border-color:rgba(0,0,0,0.15); } |
| body.light-mode .upload-zone:hover { border-color:rgba(0,0,0,0.4); background:rgba(0,0,0,0.02); } |
| body.light-mode .file-row { border-bottom-color:rgba(0,0,0,0.05); } |
| body.light-mode .file-row:hover { background:rgba(0,0,0,0.025); } |
| body.light-mode .log-row { border-bottom-color:rgba(0,0,0,0.05); } |
| body.light-mode .filter-btn { border-color:rgba(0,0,0,0.12); color:rgba(0,0,0,0.55); } |
| body.light-mode .filter-btn:hover { border-color:rgba(0,0,0,0.3); color:#111; } |
| body.light-mode .filter-btn.active { background:#111; color:#f5f4f0; border-color:#111; } |
| body.light-mode .materie-btn:hover { background:rgba(0,0,0,0.06); } |
| body.light-mode .materie-btn.selected { background:#111; color:#f5f4f0; border-color:#111; } |
| body.light-mode .loader-overlay, |
| body.light-mode .onboard-overlay { background:#f5f4f0; } |
| body.light-mode .footer { border-top-color:rgba(0,0,0,0.1); } |
| body.light-mode .footer-copy, |
| body.light-mode .footer-mini, |
| body.light-mode .footer-meta { color:rgba(0,0,0,0.35); } |
| body.light-mode .vhelp-fab { |
| background:rgba(0,0,0,0.08); |
| border-color:rgba(0,0,0,0.15); |
| } |
| body.light-mode .vhelp-fab svg { filter:drop-shadow(0 0 3px rgba(0,0,0,0.3)); stroke:rgba(0,0,0,0.7) !important; } |
| body.light-mode .online-dot { background:#2a7a2a; box-shadow:0 0 7px rgba(42,122,42,0.6); } |
| body.light-mode .toast { background:#111; color:#f5f4f0; } |
| body.light-mode .alert.error { background:rgba(200,40,40,0.08); } |
| body.light-mode .alert.success { background:rgba(40,150,40,0.08); } |
| body.light-mode ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); } |
|
|
