:root{
  --bg:#030905;
  --bg-deep:#010402;
  --surface:#081a0f;
  --surface-2:#0d2617;
  --border:#123a20;
  --border-bright:#1d5c31;
  --green:#00ff6a;
  --green-dim:#16c957;
  --green-mute:#5c9276;
  --text:#c9ffdb;
  --text-dim:#7fa891;
  --amber:#ffb020;
  --red:#ff4d4d;
  --glow: 0 0 10px rgba(0,255,106,.45);
  --mono: 'Share Tech Mono', 'Consolas', monospace;
  --disp: 'VT323', 'Consolas', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  min-height:100%;
  position:relative;
  overflow-x:hidden;
}

#rain{position:fixed; inset:0; z-index:-2; opacity:.5;}
#rain-fade{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(3,9,5,.2), var(--bg) 78%),
    linear-gradient(180deg, rgba(3,9,5,.55), rgba(3,9,5,.85) 40%, var(--bg) 100%);
}

a{color:inherit; text-decoration:none;}

.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 60px; position:relative;}
.wrap.narrow{max-width:640px;}

/* ---------- header ---------- */
header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding-bottom:18px; margin-bottom:24px;
}
.brand{display:flex; align-items:baseline; gap:12px;}
.brand.center{justify-content:center; margin-bottom:22px;}
.brand .glyph{
  font-family:var(--disp); font-size:2.6rem; line-height:1;
  color:var(--green); text-shadow:var(--glow); letter-spacing:2px;
}
.brand h1{
  font-family:var(--disp); font-size:2.1rem; letter-spacing:4px; font-weight:400;
  color:var(--green); text-shadow:var(--glow); margin:0;
  animation:flicker 7s infinite;
}
.brand .tag{
  font-size:.72rem; color:var(--text-dim); letter-spacing:2px;
  text-transform:uppercase; margin-top:2px;
}
.brand .tag b{color:var(--green-dim);}
@keyframes flicker{
  0%,93%,100%{opacity:1;} 94%{opacity:.55;} 95%{opacity:1;} 96%{opacity:.7;} 97%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){ .brand h1{animation:none;} }

.header-right{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.header-actions{display:flex; gap:10px;}

.stats{display:flex; gap:22px; flex-wrap:wrap;}
.stat{text-align:right; min-width:70px;}
.stat .n{font-size:1.5rem; color:var(--green); text-shadow:var(--glow); font-variant-numeric:tabular-nums;}
.stat .l{font-size:.66rem; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase;}

/* ---------- search console ---------- */
.console{
  background:var(--surface); border:1px solid var(--border-bright); border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,255,106,.05), 0 18px 40px -20px rgba(0,255,106,.15);
  padding:14px 16px; margin-bottom:18px;
}
.console-row{display:flex; align-items:center; gap:10px; font-size:1.05rem;}
.prompt{color:var(--green-dim); white-space:nowrap; user-select:none;}
#search{
  flex:1; background:transparent; border:none; outline:none; color:var(--text);
  font-family:var(--mono); font-size:1.05rem; caret-color:var(--green); min-width:0;
}
#search::placeholder{color:var(--green-mute); opacity:.7;}
.cursor{width:9px; height:1.15rem; background:var(--green); box-shadow:var(--glow); animation:blink 1s steps(1) infinite; flex-shrink:0;}
@keyframes blink{50%{opacity:0;}}
.console-meta{margin-top:8px; font-size:.72rem; color:var(--text-dim); letter-spacing:.5px;}
.console-meta b{color:var(--green-dim);}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  border:1px solid var(--border-bright); background:transparent; color:var(--text-dim);
  font-family:var(--mono); font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; cursor:pointer; transition:.15s;
}
.chip:hover{border-color:var(--green-dim); color:var(--text);}
.chip.active{background:rgba(0,255,106,.1); border-color:var(--green); color:var(--green); box-shadow:var(--glow);}

.actions{display:flex; gap:10px; flex-wrap:wrap; position:relative;}
.btn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:1px; text-transform:uppercase;
  padding:9px 16px; border-radius:5px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:.15s; border:1px solid var(--border-bright); background:transparent; color:var(--text);
}
.btn.nowrap{white-space:nowrap;}
.btn.full{width:100%; justify-content:center;}
.btn svg{width:14px; height:14px; flex-shrink:0;}
.btn-primary{background:rgba(0,255,106,.08); border-color:var(--green); color:var(--green);}
.btn-primary:hover{background:rgba(0,255,106,.18); box-shadow:var(--glow);}
.btn-ghost:hover{border-color:var(--green-dim); color:var(--green);}
.btn-danger{background:rgba(255,77,77,.08); border-color:var(--red); color:var(--red);}
.btn-danger:hover{background:rgba(255,77,77,.2); box-shadow:0 0 10px rgba(255,77,77,.35);}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.dropdown{position:relative;}
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  background:var(--surface); border:1px solid var(--border-bright); border-radius:6px;
  min-width:180px; overflow:hidden; box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  padding:6px 0;
}
.dropdown-menu.wide{min-width:230px;}
.dropdown-menu button{
  display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--text); font-family:var(--mono); font-size:.8rem; padding:10px 14px; cursor:pointer;
}
.dropdown-menu button:hover{background:rgba(0,255,106,.1); color:var(--green);}
.dropdown-menu button.active{color:var(--green); font-weight:600;}
.dropdown-menu button.active::before{content:"\2713\0020"; color:var(--green);}
.dropdown-section-label{
  font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--green-mute);
  padding:8px 14px 4px;
}
.dropdown-menu select.dropdown-select{
  display:block; width:calc(100% - 20px); margin:2px 10px 6px; padding:6px 8px;
  background:var(--bg-deep); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:.78rem; border-radius:4px;
}

/* ---------- bulk selection bar ---------- */
.bulk-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(0,255,106,.06); border:1px solid var(--green-dim); border-radius:6px;
  padding:10px 16px; margin-bottom:14px; font-size:.8rem;
}
.bulk-bar[hidden]{display:none;}
.bulk-count{color:var(--green); }
.bulk-count b{font-variant-numeric:tabular-nums;}

/* ---------- table ---------- */
.table{border:1px solid var(--border); border-radius:6px; overflow:hidden;}
.row{
  display:grid; grid-template-columns:26px 1.5fr 1.1fr 1.3fr .9fr .95fr 120px;
  gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border);
}
.col-check{display:flex; align-items:center; justify-content:center;}
.col-check input[type=checkbox], .rowCheck{
  width:16px; height:16px; accent-color:var(--green); cursor:pointer;
}
.row:last-child{border-bottom:none;}
.row.head{background:var(--surface-2); font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim);}
.row.item{background:var(--bg-deep); transition:background .12s;}
.row.item:hover{background:var(--surface);}
.row.item:nth-child(even){background:rgba(13,38,23,.35);}
.row.item:nth-child(even):hover{background:var(--surface);}

.site{display:flex; flex-direction:column; gap:2px; min-width:0;}
.site .name{color:var(--text); font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.site .name mark{background:rgba(0,255,106,.22); color:var(--green); border-radius:2px; padding:0 1px;}
.user{color:var(--text-dim); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.pw-cell{display:flex; flex-direction:column; gap:4px; min-width:0;}
.pw-field{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--text); min-width:0;}
.pw-field .val{
  letter-spacing:1px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-block; width:100px; flex:0 0 100px;
}
.pin-field{font-size:.78rem;}
.pin-tag{font-size:.6rem; letter-spacing:1px; text-transform:uppercase; color:var(--amber); flex-shrink:0; width:22px; display:inline-block;}
.pin-field .val{width:72px; flex:0 0 72px;}
.icon-btn{background:transparent; border:none; color:var(--text-dim); cursor:pointer; padding:4px; display:inline-flex; border-radius:4px; flex-shrink:0;}
.icon-btn svg{width:15px; height:15px;}
.icon-btn:hover{color:var(--green); background:rgba(0,255,106,.1);}
.icon-btn.danger:hover{color:var(--red); background:rgba(255,77,77,.1);}

.badge{
  font-size:.68rem; letter-spacing:.5px; padding:4px 9px; border-radius:20px;
  border:1px solid var(--border-bright); color:var(--text-dim); white-space:nowrap; width:fit-content;
}
/* Category badge colors are now set per-category via inline style, driven by the
   color each user picks in Impostazioni (see assets/app.js / settings.php). */
.user-badge{display:inline-block; margin:0 6px 6px 0; color:var(--text);}

.updated{color:var(--text-dim); font-size:.78rem;}
.row-actions{display:flex; gap:2px; justify-content:flex-end;}

.cat-group-header{
  padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--border);
  border-left:3px solid var(--green-dim);
}
.cat-group-header .badge{background:rgba(0,0,0,.15);}

.empty{padding:40px 16px; text-align:center; color:var(--text-dim); font-size:.9rem;}
.empty .big{font-family:var(--disp); font-size:1.8rem; color:var(--green-dim); display:block; margin-bottom:6px;}

footer{margin-top:22px; text-align:center; color:var(--green-mute); font-size:.68rem; letter-spacing:1px;}

/* ---------- mobile stacked rows ---------- */
@media (max-width:760px){
  .row{grid-template-columns:1fr; gap:6px; padding:14px 16px;}
  .row.head{display:none;}
  .row.item{border-radius:4px; margin:8px; border:1px solid var(--border); position:relative; padding-top:34px;}
  .row.item [data-label]{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .row.item [data-label]::before{
    content:attr(data-label); font-size:.62rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--text-dim); flex-shrink:0;
  }
  .row.item .col-check{
    position:absolute; top:8px; right:10px; justify-content:flex-end;
  }
  .row-actions{justify-content:flex-start; margin-top:4px;}
  header{flex-direction:column; align-items:flex-start;}
  .header-right{width:100%; justify-content:space-between;}
  .bulk-bar{justify-content:space-between;}
}

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(1,4,2,.75); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
}
.overlay[hidden]{display:none;}
.modal{
  width:100%; max-width:480px; background:var(--surface); border:1px solid var(--border-bright);
  border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,106,.06);
  overflow:hidden; max-height:92vh; display:flex; flex-direction:column;
}
.modal.wide{max-width:560px;}
.modal-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:.75rem; color:var(--text-dim);}
.dot{width:9px; height:9px; border-radius:50%; background:var(--border-bright);}
.modal-bar .title{margin-left:6px; color:var(--green-dim);}
.modal-bar .close{margin-left:auto; cursor:pointer; color:var(--text-dim); background:none; border:none; font-family:var(--mono); font-size:.85rem;}
.modal-bar .close:hover{color:var(--red);}
.modal-body{padding:18px; overflow-y:auto;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;}
.field .input-row{display:flex; gap:8px;}
input[type=text], input[type=password], select, textarea{
  width:100%; background:var(--bg-deep); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:.88rem; padding:9px 10px; border-radius:4px; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--green-dim); box-shadow:0 0 0 1px var(--green-dim);}
textarea{resize:vertical; min-height:56px;}
input[type=color]{
  width:46px; min-width:46px; height:38px; padding:3px; background:var(--bg-deep);
  border:1px solid var(--border); border-radius:4px; cursor:pointer; flex-shrink:0;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
input[type=color]::-webkit-color-swatch{border:none; border-radius:2px;}
.modal-footer{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--border);}

.drop{
  border:1.5px dashed var(--border-bright); border-radius:6px; padding:26px 14px; text-align:center;
  color:var(--text-dim); font-size:.82rem; cursor:pointer; transition:.15s;
}
.drop:hover, .drop.drag{border-color:var(--green); color:var(--green); background:rgba(0,255,106,.05);}
.drop svg{width:26px; height:26px; margin-bottom:8px; color:var(--green-dim);}
.drop-hint{font-size:.68rem; margin-top:6px; color:var(--green-mute);}
.import-preview{margin-top:14px; max-height:180px; overflow:auto; border:1px solid var(--border); border-radius:4px;}
.import-row{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; padding:7px 10px; font-size:.78rem; border-bottom:1px solid var(--border);}
.import-row:last-child{border-bottom:none;}
.import-row.head{background:var(--surface-2); color:var(--text-dim); text-transform:uppercase; font-size:.62rem; letter-spacing:1px;}

/* ---------- toast ---------- */
#toasts{position:fixed; bottom:20px; right:20px; left:20px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:80; pointer-events:none;}
.toast{
  background:var(--surface); border:1px solid var(--green-dim); color:var(--green); font-size:.8rem;
  padding:10px 14px; border-radius:5px; box-shadow:var(--glow); animation:toastin .2s ease-out; max-width:320px;
}
.toast.err{border-color:var(--red); color:var(--red); box-shadow:0 0 10px rgba(255,77,77,.35);}
@keyframes toastin{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-wrap{width:100%; max-width:400px;}
.login-card{
  background:var(--surface); border:1px solid var(--border-bright); border-radius:10px;
  padding:30px 26px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,106,.06);
}
.login-form .field:last-of-type{margin-bottom:20px;}
.login-hint{margin-top:16px; text-align:center; font-size:.68rem; color:var(--text-dim); letter-spacing:.3px;}
.login-hint b{color:var(--green-dim);}
.alert{
  border:1px solid var(--red); color:var(--red); background:rgba(255,77,77,.08);
  padding:9px 12px; border-radius:5px; font-size:.8rem; margin-bottom:16px;
}

/* ---------- settings panels ---------- */
.panel{
  background:var(--surface); border:1px solid var(--border-bright); border-radius:8px;
  padding:20px; margin-bottom:20px;
}
.panel-title{font-family:var(--disp); font-size:1.3rem; letter-spacing:1px; color:var(--green-dim); margin-bottom:6px;}
.panel-hint{font-size:.78rem; color:var(--text-dim); margin:0 0 16px;}
.user-list{border-top:1px solid var(--border); padding-top:6px;}

.cat-color-list{display:flex; flex-direction:column; gap:10px;}
.cat-color-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg-deep);
}

/* ---------- scroll to top ---------- */
#scrollTopBtn{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  background:var(--surface); border:1px solid var(--green-dim); color:var(--green);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,106,.08);
  opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
#scrollTopBtn svg{width:20px; height:20px;}
#scrollTopBtn.show{opacity:1; transform:translateY(0); pointer-events:auto;}
#scrollTopBtn:hover{border-color:var(--green); box-shadow:var(--glow);}
@media (max-width:760px){
  #scrollTopBtn{right:14px; bottom:14px; width:44px; height:44px;}
}