:root{
  --bg-0:#07040d;
  --bg-1:#0d0715;
  --bg-2:#171024;
  --panel:rgba(25,15,39,.88);
  --panel-2:rgba(34,20,50,.86);
  --panel-3:rgba(12,7,20,.72);
  --purple:#8e32ff;
  --violet:#b943ff;
  --magenta:#e248d6;
  --pink:#ff64df;
  --text:#f8f3ff;
  --text-2:#c8badb;
  --muted:#9486a8;
  --border:rgba(223,114,255,.16);
  --border-strong:rgba(224,112,255,.38);
  --success:#62e6ae;
  --danger:#ff667f;
  --warning:#ffc86b;
  --blue:#7d78ff;
  --shadow:0 22px 60px rgba(0,0,0,.34);
  --glow:0 0 34px rgba(180,55,255,.16);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 6%,rgba(183,53,255,.22),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(231,65,213,.16),transparent 27%),
    radial-gradient(circle at 52% 100%,rgba(117,39,191,.14),transparent 36%),
    linear-gradient(145deg,var(--bg-0),var(--bg-1) 48%,var(--bg-2));
  background-attachment:fixed;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.36;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:34px 34px;
}

body:after{
  content:"";
  position:fixed;
  width:440px;height:440px;
  left:-180px;top:34%;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(12px);
  background:radial-gradient(circle,rgba(198,54,255,.13),transparent 68%);
}

a{color:#d69dff;text-decoration:none}
a:hover{color:#f0c7ff}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.container{
  width:min(1320px,94%);
  margin:30px auto 60px;
}

.auth{
  width:min(520px,94%);
  margin:64px auto;
}

.card{
  position:relative;
  overflow:hidden;
  padding:24px;
  margin-bottom:18px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:
    linear-gradient(145deg,rgba(33,19,49,.91),rgba(16,9,27,.91));
  box-shadow:var(--shadow),var(--glow);
  backdrop-filter:blur(18px);
}

.card:before{
  content:"";
  position:absolute;
  width:190px;height:190px;
  right:-98px;top:-98px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(205,65,255,.14),transparent 70%);
}

.card:hover{border-color:var(--border-strong)}

h1,h2,h3{letter-spacing:-.025em}
h1{margin:0 0 6px;font-size:clamp(28px,4vw,40px)}
h2{margin:0 0 12px}
h3{margin:0}
.muted{color:var(--muted);line-height:1.55}
.small,.mini{font-size:12px}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.actions,.toolbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

button,.btn{
  border:0;
  min-height:42px;
  padding:10px 15px;
  border-radius:11px;
  font-weight:750;
  transition:transform .14s ease,opacity .14s ease,box-shadow .2s ease,border-color .2s ease;
}

button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:scale(.98)}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}

.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--magenta));
  box-shadow:0 11px 28px rgba(173,48,255,.24);
}

.primary:hover{
  box-shadow:0 14px 35px rgba(203,58,255,.32);
}

.secondary{
  color:var(--text);
  border:1px solid var(--border);
  background:rgba(255,255,255,.065);
}

.secondary:hover{border-color:var(--border-strong)}

.danger{
  color:#fff;
  background:linear-gradient(135deg,#d9365c,var(--danger));
}

.warn{
  color:#1a1020;
  background:linear-gradient(135deg,#ffc96f,#ff9b65);
}

.blue{
  color:#fff;
  background:linear-gradient(135deg,#736fff,#a25cff);
}

.field label{
  display:block;
  margin-bottom:7px;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
}

.field input,
input.full,
input,
select,
textarea{
  width:100%;
  color:var(--text);
  background:rgba(7,4,13,.74);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:12px 13px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

input::placeholder,textarea::placeholder{color:#746a83}

input:focus,select:focus,textarea:focus{
  border-color:#bd5cff;
  background:rgba(10,5,17,.88);
  box-shadow:0 0 0 4px rgba(177,58,255,.10),0 0 24px rgba(186,57,255,.08);
}

.grid2{
  display:grid;
  grid-template-columns:minmax(180px,.65fr) minmax(280px,1.4fr) auto;
  gap:12px;
  align-items:end;
}

.create-layout{
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(240px,1fr);
  gap:14px;
  margin-bottom:13px;
}

.form-actions{margin-top:15px}

.msg{
  margin-top:13px;
  padding:0;
  line-height:1.5;
}
.ok{color:var(--success)}
.err{color:#ff9cad}

.resultbox{
  margin-top:14px;
  padding:14px;
  word-break:break-all;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(8,4,14,.65);
}

.hidden{display:none!important}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin:16px 0;
}

.stat{
  min-width:0;
  padding:16px 17px;
  border:1px solid var(--border);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(37,21,55,.78),rgba(12,7,20,.76));
}

.stat:before{
  content:"";
  display:block;
  width:34px;height:3px;
  margin-bottom:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--magenta));
  box-shadow:0 0 16px rgba(207,65,255,.28);
}

.stat b{
  display:block;
  margin-top:5px;
  color:var(--text);
  font-size:24px;
  word-break:break-word;
}

.search{
  width:100%;
  margin:14px 0;
  padding:12px 14px;
  color:#fff;
  background:rgba(7,4,13,.72);
  border:1px solid var(--border);
  border-radius:11px;
}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.tablewrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(8,4,14,.35);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:880px;
}

th,td{
  text-align:left;
  padding:14px 13px;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:14px;
  vertical-align:middle;
}

th{
  position:sticky;
  top:0;
  z-index:2;
  color:var(--muted);
  background:rgba(17,9,27,.97);
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}

tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(190,61,255,.055)}
tbody tr:last-child td{border-bottom:0}

.analytics-table{min-width:1220px}
.admin-analytics-table{min-width:1480px}
.rotation-table{min-width:1480px}
.admin-rotation-table{min-width:1680px}

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid transparent;
}
.badge.single{
  color:#e8dff2;
  background:rgba(255,255,255,.065);
  border-color:var(--border);
}
.badge.rotation{
  color:#f0d7ff;
  background:linear-gradient(135deg,rgba(142,50,255,.18),rgba(226,72,214,.14));
  border-color:rgba(212,94,255,.22);
}

.section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.section-title h2{margin:0 0 6px}

.rotation-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.rotation-head label{margin:0}

.target-editor{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.target-input-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}

.target-input-row input{
  margin:0;
}

.target-index,.target-pos{
  color:var(--muted);
  text-align:center;
  font-weight:800;
}

.target-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:320px;
}

.target-line{
  display:grid;
  grid-template-columns:24px minmax(180px,1fr) auto;
  gap:8px;
  align-items:center;
}

.target-url{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-2);
}

.target-clicks{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.dest-single{
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* MODAL */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,2,7,.79);
  backdrop-filter:blur(12px);
}

.modal-card{
  width:min(720px,96vw);
  max-height:88vh;
  overflow:auto;
  padding:0;
  border:1px solid rgba(219,105,255,.24);
  border-radius:22px;
  background:linear-gradient(145deg,#1c102a,#0d0716);
  box-shadow:0 34px 100px rgba(0,0,0,.58),0 0 55px rgba(181,57,255,.14);
}

.modal-title{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
  background:rgba(20,11,31,.96);
  backdrop-filter:blur(14px);
}
.modal-title h3{margin:0 0 5px}

.modal-card>.field,
.modal-card>.rotation-head,
.modal-card>.target-editor,
.modal-card>.muted,
.modal-card>.msg{
  margin-left:22px;
  margin-right:22px;
}
.modal-card>.field:first-of-type{margin-top:20px}

.modal-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
  padding:15px 22px;
  border-top:1px solid var(--border);
  background:rgba(15,8,24,.97);
  backdrop-filter:blur(14px);
}

/* TOAST */
.toast-container{
  position:fixed;
  top:18px;
  right:18px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:11px;
  align-items:center;
  padding:13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(23,13,35,.95);
  box-shadow:0 18px 52px rgba(0,0,0,.42),0 0 30px rgba(182,57,255,.10);
  backdrop-filter:blur(18px);
  animation:toastIn .26s ease both;
}

.toast.toast-out{animation:toastOut .22s ease both}

.toast-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:11px;
  font-size:17px;
  font-weight:900;
}

.toast-success .toast-icon{
  color:var(--success);
  background:rgba(98,230,174,.11);
}
.toast-error .toast-icon{
  color:var(--danger);
  background:rgba(255,102,127,.11);
}
.toast-warning .toast-icon{
  color:var(--warning);
  background:rgba(255,200,107,.10);
}
.toast-info .toast-icon{
  color:#d8a7ff;
  background:rgba(176,77,255,.12);
}

.toast-title{
  color:var(--text);
  font-size:13px;
  font-weight:800;
}

.toast-message{
  margin-top:2px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.45;
}

.toast-close{
  min-height:0;
  padding:5px 8px;
  color:var(--muted);
  background:transparent;
  font-size:19px;
}

@keyframes toastIn{
  from{opacity:0;transform:translateX(28px) scale(.97)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes toastOut{
  to{opacity:0;transform:translateX(28px) scale(.96)}
}

@media(max-width:760px){
  .container{width:94%;margin:18px auto 44px}
  .auth{margin:34px auto}
  .card{padding:18px;border-radius:18px}
  .grid2,.create-layout{grid-template-columns:1fr}
  .top,.section-title,.rotation-head{align-items:flex-start;flex-direction:column}
  .top>.actions,.top>button{width:100%}
  .actions>a,.actions>a>button{width:100%}
  .target-input-row{grid-template-columns:25px 1fr}
  .target-input-row button{grid-column:2}
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-height:92vh;border-radius:22px 22px 0 0}
  .modal-actions{flex-direction:column}
  .modal-actions button{width:100%}
  .toast-container{top:auto;bottom:14px;left:14px;right:14px;width:auto}
}