/* ========================================================= License Manager — Theme System Default: Red Glass (dark glassmorphism) Alt: Professional White Toggle via ========================================================= */ :root{ --bg-1:#0c0407; --bg-2:#1a0508; --bg-3:#2b0710; --glass:rgba(255,255,255,0.06); --glass-border:rgba(255,60,80,0.35); --red:#ff2952; --red-dim:#b3182f; --red-glow:rgba(255,41,82,0.45); --text-1:#f5eef0; --text-2:#c9a9af; --text-muted:#8a6b70; --ok:#28e07c; --warn:#ffb020; --danger:#ff3b5c; --radius:16px; --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; } body.theme-white{ --bg-1:#f4f6fb; --bg-2:#ffffff; --bg-3:#eef1f8; --glass:rgba(255,255,255,0.85); --glass-border:rgba(20,30,60,0.08); --red:#c8102e; --red-dim:#9c0c24; --red-glow:rgba(200,16,46,0.15); --text-1:#141824; --text-2:#4a5169; --text-muted:#8890a6; --ok:#1a9c5a; --warn:#c98600; --danger:#c8102e; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font); color:var(--text-1); min-height:100vh; background: radial-gradient(circle at 15% 10%, var(--bg-3), transparent 45%), radial-gradient(circle at 85% 90%, var(--bg-3), transparent 40%), linear-gradient(160deg, var(--bg-1), var(--bg-2)); background-attachment:fixed; transition:background .4s ease, color .3s ease; } /* ---------- Layout ---------- */ .app{display:flex; min-height:100vh;} .sidebar{ width:230px; padding:26px 18px; background:var(--glass); border-right:1px solid var(--glass-border); backdrop-filter:blur(18px); display:flex; flex-direction:column; gap:6px; } .brand{ font-size:19px; font-weight:700; letter-spacing:.5px; margin-bottom:26px; display:flex; align-items:center; gap:10px; } .brand .dot{ width:10px;height:10px;border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red-glow); } .nav-link{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:var(--text-2); text-decoration:none; font-size:14px; font-weight:500; transition:.2s; } .nav-link:hover, .nav-link.active{ background:linear-gradient(120deg, var(--red-dim), var(--red)); color:#fff; box-shadow:0 4px 18px var(--red-glow); } .sidebar-footer{margin-top:auto; font-size:12px; color:var(--text-muted);} .main{flex:1; padding:28px 34px; overflow-x:hidden;} .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; } .topbar h1{font-size:22px; margin:0; font-weight:700;} .topbar .sub{color:var(--text-muted); font-size:13px; margin-top:4px;} .theme-toggle{ display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--glass-border); padding:8px 14px; border-radius:30px; cursor:pointer; font-size:13px; color:var(--text-1); backdrop-filter:blur(10px); } /* ---------- Glass Card ---------- */ .card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,0.25); padding:22px; } body.theme-white .card{ box-shadow:0 8px 24px rgba(20,30,60,0.06); } /* ---------- Stat Cards ---------- */ .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px; margin-bottom:26px; } .stat-card{ padding:20px; } .stat-card .label{font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px;} .stat-card .value{font-size:30px; font-weight:800; margin-top:8px;} .stat-card .value.accent{color:var(--red);} .stat-card .value.ok{color:var(--ok);} /* ---------- Table ---------- */ .table-wrap{overflow-x:auto;} table{width:100%; border-collapse:collapse; font-size:14px;} th{ text-align:left; padding:12px 14px; color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--glass-border); } td{ padding:14px; border-bottom:1px solid var(--glass-border); vertical-align:middle; } tr:last-child td{border-bottom:none;} tr:hover td{background:rgba(255,41,82,0.04);} .badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; } .badge.active{ background:rgba(40,224,124,0.15); color:var(--ok); } .badge.disabled{ background:rgba(255,59,92,0.15); color:var(--danger); } .badge .pulse{width:7px;height:7px;border-radius:50%; background:currentColor;} .domain-cell{font-weight:600;} .domain-cell small{display:block; font-weight:400; color:var(--text-muted); font-size:12px;} .btn{ border:none; cursor:pointer; padding:8px 16px; border-radius:9px; font-size:13px; font-weight:600; transition:.2s; } .btn-danger{ background:linear-gradient(120deg, var(--red-dim), var(--red)); color:#fff; } .btn-danger:hover{ box-shadow:0 4px 14px var(--red-glow); transform:translateY(-1px); } .btn-ok{ background:rgba(40,224,124,0.15); color:var(--ok); } .btn-ok:hover{ background:rgba(40,224,124,0.25); } .btn-ghost{ background:var(--glass); color:var(--text-1); border:1px solid var(--glass-border); } .actions-cell{display:flex; gap:8px;} /* ---------- Forms ---------- */ input, select, textarea{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.04); color:var(--text-1); font-size:14px; outline:none; } body.theme-white input, body.theme-white select, body.theme-white textarea{ background:#fff; } input:focus, select:focus, textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-glow); } label{font-size:12.5px; color:var(--text-muted); margin-bottom:6px; display:block; font-weight:600;} /* ---------- Login Page ---------- */ .login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; } .login-card{ width:380px; padding:38px 32px; } .login-card h1{margin:0 0 4px; font-size:22px;} .login-card p{color:var(--text-muted); font-size:13px; margin-bottom:24px;} .login-card .btn{width:100%; padding:12px; margin-top:14px; font-size:14px;} .error-msg{ background:rgba(255,59,92,0.12); color:var(--danger); padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; } @media (max-width:820px){ .sidebar{display:none;} .main{padding:20px;} }