@import url("https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@300;400;500;600;700&family=Syne:wght@500;600;700;800&display=swap");
@property --login-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
:root { --black:#050505; --white:#fff; --pink:#ff3fc6; --orange:#ff8800; --bg:#050505; --bg-card:rgba(255,255,255,0.03); --bg-card-hover:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.06); --text:#d4d4d4; --text-muted:#666; --text-heading:#fff; --input-bg:rgba(255,255,255,0.05); --radius:8px; --radius-lg:20px; --ease:cubic-bezier(0.4,0,0.2,1); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Outfit,system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; line-height:1.6; position:relative; }
body::before { content:""; position:fixed; inset:0; background:url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.04%27/%3E%3C/svg%3E") repeat; opacity:0.5; pointer-events:none; z-index:0; }
body::after { content:""; position:fixed; inset:0; background:radial-gradient(ellipse at top left, rgba(255,63,198,0.04), transparent 50%), radial-gradient(ellipse at bottom right, rgba(255,136,0,0.03), transparent 50%); pointer-events:none; z-index:0; }
body > * { position:relative; z-index:1; }
h1,h2 { font-family:Anton,sans-serif; text-transform:uppercase; color:var(--text-heading); font-weight:400; }
h1 { font-size:2rem; margin-bottom:1.5rem; }
h2 { font-family:Syne,sans-serif; font-size:1.4rem; margin-bottom:1rem; font-weight:700; text-transform:none; }
h3 { font-family:Syne,sans-serif; font-size:1rem; font-weight:600; color:var(--text-heading); margin-bottom:0.75rem; }
a { color:var(--pink); text-decoration:none; transition:color 0.3s var(--ease); } a:hover { color:var(--orange); }
.container { max-width:480px; margin:0 auto; padding:2rem 1.5rem; } .container.wide { max-width:960px; }
.card { background:var(--bg-card); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:all 0.3s var(--ease); }
.form-group { margin-bottom:1.25rem; }
label { display:block; margin-bottom:0.4rem; font-size:0.75rem; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; font-family:Outfit,sans-serif; }
input[type=text],input[type=password],input[type=email],select { width:100%; padding:0.75rem 1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:Outfit,sans-serif; font-size:0.9rem; outline:none; transition:all 0.3s var(--ease); }
input:focus,select:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,63,198,0.1); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 1.5rem; background:var(--pink); color:var(--white); border:none; border-radius:var(--radius); font-family:Outfit,sans-serif; font-size:0.85rem; font-weight:600; cursor:pointer; text-decoration:none; transition:all 0.3s var(--ease); text-transform:uppercase; letter-spacing:0.03em; }
.btn:hover { background:var(--orange); color:var(--white); transform:translateY(-1px); box-shadow:0 4px 15px rgba(255,136,0,0.2); }
.btn:active { transform:scale(0.97); }
.btn-danger { background:#dc3545; } .btn-danger:hover { background:#ff4757; box-shadow:0 4px 15px rgba(220,53,69,0.3); }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-ghost:hover { border-color:var(--pink); color:var(--pink); background:rgba(255,63,198,0.05); }
.btn-sm { padding:0.35rem 0.7rem; font-size:0.75rem; }
.alert { padding:0.8rem 1rem; border-radius:var(--radius); margin-bottom:1.25rem; font-size:0.85rem; backdrop-filter:blur(8px); }
.alert-error { background:rgba(220,53,69,0.12); border:1px solid rgba(220,53,69,0.2); color:#ff6b7a; }
.alert-success { background:rgba(40,167,69,0.12); border:1px solid rgba(40,167,69,0.2); color:#6bff8a; }
table { width:100%; border-collapse:collapse; margin-top:1rem; }
th,td { padding:0.7rem 0.8rem; text-align:left; border-bottom:1px solid var(--border); font-size:0.85rem; }
th { color:var(--text-muted); font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; font-family:Syne,sans-serif; }
tbody tr { transition:background 0.2s; }
tbody tr:nth-child(even) { background:rgba(255,255,255,0.015); }
tbody tr:hover { background:rgba(255,255,255,0.04); }
.badge { display:inline-block; padding:0.15rem 0.6rem; border-radius:100px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.badge-admin { background:rgba(255,63,198,0.15); color:var(--pink); } .badge-user { background:rgba(255,255,255,0.08); color:var(--text-muted); }
.nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-bottom:1px solid var(--border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(5,5,5,0.8); position:sticky; top:0; z-index:50; }
.nav-brand { display:flex; align-items:center; text-decoration:none; } .nav-brand img { height:28px; }
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:0.85rem; font-weight:500; padding:0.5rem 0.9rem; border-radius:100px; transition:all 0.3s var(--ease); position:relative; font-family:Outfit,sans-serif; }
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.nav-initials { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--pink), var(--orange)); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:#000; margin-left:0.75rem; font-family:Outfit,sans-serif; }
.login-wrapper { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
.login-logo { margin-bottom:2.5rem; animation:float 3s ease-in-out infinite; } .login-logo img { height:48px; }
.login-card { width:100%; max-width:400px; position:relative; }
.login-card::before { content:""; position:absolute; inset:-1px; border-radius:var(--radius-lg); background:conic-gradient(from var(--login-angle, 0deg), var(--pink), var(--orange), var(--pink)); z-index:-1; opacity:0.4; animation:rotateBorder 4s linear infinite; }
.actions { display:flex; gap:0.5rem; }
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:100; justify-content:center; align-items:center; backdrop-filter:blur(8px); }
.modal-overlay.active { display:flex; }
.modal { background:rgba(13,13,13,0.95); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; animation:modalIn 0.3s var(--ease); }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; } .page-header h1 { margin:0; }
.gradient-text { background:linear-gradient(135deg, var(--pink), var(--orange), var(--pink)); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradientShift 3s ease infinite; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1rem; margin-top:1.5rem; }
.app-card { background:var(--bg-card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; text-decoration:none; color:var(--text); transition:all 0.3s var(--ease); display:block; cursor:pointer; animation:fadeInUp 0.5s var(--ease) both; }
.app-card:hover { background:var(--bg-card-hover); border-color:rgba(255,63,198,0.3); color:var(--text); transform:translateY(-3px); box-shadow:0 0 30px rgba(255,63,198,0.08); }
.app-card .app-icon { font-size:2rem; margin-bottom:0.75rem; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:rgba(255,63,198,0.08); }
.app-card .app-name { font-family:Syne,sans-serif; font-weight:600; font-size:0.95rem; color:var(--white); margin-bottom:0.25rem; }
.app-card .app-desc { font-size:0.8rem; color:var(--text-muted); line-height:1.4; }
.app-card:nth-child(1){animation-delay:0s} .app-card:nth-child(2){animation-delay:0.05s} .app-card:nth-child(3){animation-delay:0.1s} .app-card:nth-child(4){animation-delay:0.15s} .app-card:nth-child(5){animation-delay:0.2s} .app-card:nth-child(6){animation-delay:0.25s} .app-card:nth-child(7){animation-delay:0.3s} .app-card:nth-child(8){animation-delay:0.35s}
.chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.7rem; border-radius:100px; font-size:0.8rem; border:1px solid var(--border); cursor:pointer; transition:all 0.15s; user-select:none; }
.chip:has(input:checked) { border-color:var(--pink); background:rgba(255,63,198,0.15); color:var(--pink); }
.chip input { display:none; }
.chip-grid { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.5rem; }
.section { margin-bottom:1.5rem; }
.tab-row { display:flex; gap:0.5rem; margin-bottom:1.5rem; }
.tab-row a { padding:0.5rem 1rem; border-radius:var(--radius); font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border:1px solid transparent; position:relative; transition:all 0.3s var(--ease); }
.tab-row a:hover { color:var(--white); } .tab-row a.active { color:var(--pink); border-color:var(--pink); background:rgba(255,63,198,0.08); }
.btn-ms { display:flex; align-items:center; justify-content:center; gap:0.75rem; width:100%; padding:0.85rem 1.5rem; background:rgba(255,255,255,0.04); color:#fff; border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); font-family:Outfit,sans-serif; font-size:0.95rem; font-weight:500; cursor:pointer; transition:all 0.3s var(--ease); text-decoration:none; backdrop-filter:blur(8px); }
.btn-ms:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); color:#fff; box-shadow:0 0 20px rgba(255,255,255,0.05); }
.btn-ms svg { flex-shrink:0; }
.divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:0.8rem; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--border); }
.sso-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.8rem; border-radius:100px; background:rgba(0,164,239,0.1); border:1px solid rgba(0,164,239,0.2); color:#00a4ef; font-size:0.8rem; font-weight:500; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes rotateBorder { from { --login-angle:0deg; } to { --login-angle:360deg; } }
@keyframes gradientShift { 0% { background-position:0% center; } 50% { background-position:200% center; } 100% { background-position:0% center; } }
@keyframes modalIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;flex-direction:column;gap:4px}.nav-burger span{display:block;width:20px;height:2px;background:var(--white);border-radius:1px;transition:all 0.3s var(--ease)}
.nav-right{display:none;align-items:center;gap:0.75rem}
@media(max-width:768px){.nav{flex-wrap:wrap}.nav-burger{display:flex}.nav-right{display:flex}.nav-links{display:none;width:100%;flex-direction:column;padding:0.75rem 0;gap:0;order:3}.nav-links a{padding:0.7rem 1rem;border-radius:0;font-size:0.9rem;width:100%}.nav-links a:hover{background:rgba(255,255,255,0.05)}.nav.nav-open .nav-links{display:flex}.nav.nav-open .nav-burger span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}.nav.nav-open .nav-burger span:nth-child(2){opacity:0}.nav.nav-open .nav-burger span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}.container{padding:1.25rem 1rem}.container.wide{max-width:100%}h1{font-size:1.5rem}.card{padding:1.25rem;border-radius:var(--radius)}.app-grid{grid-template-columns:1fr 1fr;gap:0.75rem}.app-card{padding:1rem}.app-card .app-icon{font-size:1.5rem;width:38px;height:38px;border-radius:10px}.app-card .app-name{font-size:0.85rem}.app-card .app-desc{font-size:0.75rem}.card table{display:block;overflow-x:auto}.page-header{flex-direction:column;align-items:flex-start;gap:0.75rem}.login-wrapper{padding:1.25rem}.login-card{max-width:100%}.modal{width:95%;padding:1.5rem}.tab-row{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.chip{font-size:0.7rem;padding:0.2rem 0.5rem}}
@media(max-width:380px){.app-grid{grid-template-columns:1fr}h1{font-size:1.3rem}.card{padding:1rem}}
.picker { position:relative; }
.picker-input { width:100%; padding:0.5rem 0.75rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:Outfit,sans-serif; font-size:0.85rem; outline:none; transition:border-color 0.3s; }
.picker-input:focus { border-color:var(--pink); }
.picker-input::placeholder { color:var(--text-muted); }
.picker-dropdown { position:absolute; top:100%; left:0; right:0; background:#1a1a1e; border:1px solid var(--border); border-radius:var(--radius); max-height:200px; overflow-y:auto; z-index:60; display:none; margin-top:4px; }
.picker-dropdown.open { display:block; }
.picker-item { padding:0.5rem 0.75rem; cursor:pointer; font-size:0.85rem; color:var(--text); transition:background 0.15s; }
.picker-item:hover { background:rgba(255,255,255,0.05); color:var(--white); }
.chip-removable { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.6rem; border-radius:100px; font-size:0.8rem; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text); transition:all 0.15s; }
.chip-removable .chip-x { cursor:pointer; opacity:0.5; font-size:0.7rem; padding:0 0.2rem; line-height:1; }
.chip-removable .chip-x:hover { opacity:1; color:var(--pink); }
.chip-removable.removing { opacity:0; transform:scale(0.8); }
.via-group { color:var(--text-muted); font-size:0.8rem; margin-left:0.5rem; }
.stat-grid { display:flex; gap:2rem; flex-wrap:wrap; text-align:center; }
.stat-value { font-size:1.5rem; font-weight:700; color:var(--white); }
.stat-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.pagination { display:flex; gap:0.5rem; justify-content:center; margin-top:1.5rem; }
.pagination a, .pagination span { padding:0.4rem 0.8rem; border-radius:var(--radius); font-size:0.85rem; border:1px solid var(--border); color:var(--text); text-decoration:none; transition:all 0.2s; }
.pagination a:hover { border-color:var(--pink); color:var(--pink); }
.pagination .current { background:var(--pink); color:#fff; border-color:var(--pink); }
.detail-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.25rem; }
.detail-section h3 { margin-bottom:0.75rem; }
.chip-list { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0.75rem; }
.info-item label { display:block; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.15rem; }
.info-item span { color:var(--white); font-size:0.9rem; }
@media(max-width:768px) { .picker-dropdown { position:fixed; left:1rem; right:1rem; max-height:40vh; } .stat-grid { gap:1rem; } .info-grid { grid-template-columns:1fr; } }
.hide-mobile{}@media(max-width:768px){.hide-mobile{display:none}}
.filter-section { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.5rem; }
.filter-row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.filter-row select { min-width:120px; }
.filter-row .filter-picker { position:relative; min-width:180px; flex:0 1 240px; }
.active-filters { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.active-filters .chip-removable { background:rgba(255,63,198,0.08); border-color:rgba(255,63,198,0.2); }
.active-filters .chip-removable:hover { border-color:var(--pink); }
@media(max-width:768px) { .filter-row { flex-direction:column; align-items:stretch; } .filter-row .filter-picker { flex:1; min-width:100%; } .filter-row select { width:100%; } }