/* MULTISERVER PRO - CSS GLOBAL */
/* assets/css/main.css */

:root {
  --bg:    #12151F;
  --s1:    #161922;
  --s2:    #1A1E2A;
  --s3:    #1E2232;
  --s4:    #22273A;
  --a:     #4F8EFF;
  --a2:    #7AADFF;
  --ag:    rgba(79,142,255,.35);
  --ad:    rgba(79,142,255,.1);
  --ab:    rgba(79,142,255,.2);
  --gr:    #00E676;
  --grd:   rgba(0,230,118,.1);
  --grb:   rgba(0,230,118,.22);
  --re:    #FF3B5C;
  --red:   rgba(255,59,92,.1);
  --reb:   rgba(255,59,92,.22);
  --go:    #FFD700;
  --god:   rgba(255,215,0,.1);
  --gob:   rgba(255,215,0,.2);
  --cy:    #00E5CC;
  --cyd:   rgba(0,229,204,.1);
  --cyb:   rgba(0,229,204,.22);
  --t1:    #EAF0FF;
  --t2:    #4A5A80;
  --t3:    #252E45;
  --b1:    rgba(79,142,255,.07);
  --b2:    rgba(79,142,255,.14);
  --b3:    rgba(79,142,255,.26);
  --mono:  'JetBrains Mono', monospace;
  --sans:  'Inter', system-ui, sans-serif;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 14px; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--a); text-decoration: none; transition: color .2s; }
a:hover { color: var(--a2); }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }

#cv { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); }
.o1 { width:800px;height:800px;top:-300px;left:-250px;background:radial-gradient(circle,rgba(79,142,255,.13) 0%,transparent 70%);animation:orbf 14s ease-in-out infinite; }
.o2 { width:600px;height:600px;bottom:-200px;right:-150px;background:radial-gradient(circle,rgba(0,229,204,.09) 0%,transparent 70%);animation:orbf 18s ease-in-out infinite reverse; }
.o3 { width:400px;height:400px;top:40%;left:42%;background:radial-gradient(circle,rgba(0,230,118,.06) 0%,transparent 70%);animation:orbf 22s ease-in-out infinite 3s; }
@keyframes orbf { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(35px,-25px) scale(1.06)} 66%{transform:translate(-20px,35px) scale(.94)} }

.grid-bg { position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(79,142,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(79,142,255,.025) 1px,transparent 1px);background-size:54px 54px; }

.page { position: relative; z-index: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.btn-primary { display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);background:linear-gradient(135deg,var(--a),#2A50E0);color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 0 20px var(--ag); }
.btn-primary::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);border-radius:inherit; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 0 32px var(--ag);color:#fff; }

.btn-secondary { display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);border:1px solid var(--b2);background:transparent;color:var(--t2);font-weight:600;font-size:13px;transition:all .2s; }
.btn-secondary:hover { border-color:var(--ab);color:var(--a);background:var(--ad); }

.btn-danger { display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);background:var(--red);border:1px solid var(--reb);color:var(--re);font-weight:700;font-size:13px;transition:all .2s; }
.btn-danger:hover { background:var(--re);color:#fff; }

.btn-green { display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);background:var(--grd);border:1px solid var(--grb);color:var(--gr);font-weight:700;font-size:13px;transition:all .2s; }
.btn-green:hover { background:var(--gr);color:#000; }

.badge { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:700;border:1px solid; }
.badge-green  { background:var(--grd);color:var(--gr);border-color:var(--grb); }
.badge-blue   { background:var(--ad);color:var(--a2);border-color:var(--ab); }
.badge-yellow { background:var(--god);color:var(--go);border-color:var(--gob); }
.badge-red    { background:var(--red);color:var(--re);border-color:var(--reb); }
.badge-cyan   { background:var(--cyd);color:var(--cy);border-color:var(--cyb); }

.alert { padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;margin-bottom:16px;border:1px solid;display:flex;align-items:center;gap:8px; }
.alert-error   { background:var(--red);border-color:var(--reb);color:var(--re); }
.alert-success { background:var(--grd);border-color:var(--grb);color:var(--gr); }
.alert-info    { background:var(--ad);border-color:var(--ab);color:var(--a2); }
.alert-warn    { background:var(--god);border-color:var(--gob);color:var(--go); }

.data-table { width:100%;border-collapse:collapse; }
.data-table thead th { font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding:10px 16px;text-align:left;border-bottom:1px solid var(--b2);background:var(--s2); }
.data-table tbody td { padding:12px 16px;border-bottom:1px solid var(--b1);vertical-align:middle;font-size:13px; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr { transition:background .1s;cursor:pointer; }
.data-table tbody tr:hover td { background:var(--ad); }

.field { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.field label { font-size:12px;font-weight:600;color:var(--t2);letter-spacing:.03em; }
.field input,.field select,.field textarea { width:100%;padding:10px 14px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--radius);color:var(--t1);font-family:var(--sans);font-size:13px;transition:border-color .2s,box-shadow .2s;outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--a);box-shadow:0 0 0 3px var(--ad); }
.field input::placeholder,.field textarea::placeholder { color:var(--t3); }
.field small { font-size:11px;color:var(--t3); }
.field .req { color:var(--re); }
.field .opt { color:var(--t3);font-weight:400; }

.field-check { display:flex;align-items:flex-start;gap:10px;margin-bottom:20px; }
.field-check input[type="checkbox"] { width:16px;height:16px;flex-shrink:0;accent-color:var(--a);margin-top:2px; }
.field-check label { font-size:12px;color:var(--t2);line-height:1.5; }

.input-pass { position:relative; }
.input-pass input { padding-right:44px; }
.pass-toggle { position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--t3);transition:color .2s;display:flex;align-items:center; }
.pass-toggle:hover { color:var(--a); }

.reveal { opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }

.counter { font-variant-numeric:tabular-nums; }

.spinner { width:20px;height:20px;border:2px solid var(--b2);border-top-color:var(--a);border-radius:50%;animation:spin .7s linear infinite;display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state { padding:48px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; }
.empty-icon { font-size:40px;opacity:.5; }
.empty-txt { font-size:14px;color:var(--t3); }

.modal-overlay { position:fixed;inset:0;z-index:500;background:rgba(6,7,13,.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s; }
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal { background:var(--s1);border:1px solid var(--b2);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:480px;margin:20px;position:relative;transform:translateY(16px);transition:transform .25s; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal::before { content:'';position:absolute;top:0;left:10%;right:10%;height:1.5px;background:linear-gradient(90deg,transparent,var(--a),var(--cy),transparent); }
.modal-close { position:absolute;top:16px;right:16px;color:var(--t3);font-size:18px;cursor:pointer;transition:color .2s; }
.modal-close:hover { color:var(--t1); }
.modal-title { font-size:17px;font-weight:700;margin-bottom:6px; }
.modal-sub { font-size:13px;color:var(--t2);margin-bottom:20px; }

.pagination { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap; }
.page-btn { padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--b2);background:var(--s1);color:var(--t2);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s; }
.page-btn:hover { border-color:var(--ab);color:var(--a); }
.page-btn.active { background:var(--a);border-color:var(--a);color:#fff; }
.page-btn:disabled { opacity:.4;pointer-events:none; }

#toast-container { position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px; }
.toast { padding:12px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;border:1px solid;backdrop-filter:blur(12px);animation:toastIn .3s ease,toastOut .3s ease 2.7s forwards;max-width:320px; }
.toast-success { background:rgba(0,230,118,.15);border-color:var(--grb);color:var(--gr); }
.toast-error   { background:rgba(255,59,92,.15);border-color:var(--reb);color:var(--re); }
.toast-info    { background:rgba(79,142,255,.15);border-color:var(--ab);color:var(--a2); }
@keyframes toastIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateX(20px)} }

@media (max-width:768px) { .container { padding:0 16px; } html { font-size:13px; } }