@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700;900&display=swap');

:root{
  --bg:#0e0e12;--surface:#16161e;--surface2:#1e1e2a;--border:#2a2a3a;
  --text:#e8e8f0;--muted:#888899;
  --accent:#2060c8;--gold:#d4a017;--green:#1a8a4a;--red:#c8102e;
  --r:10px;
}
*{box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;margin:0}

.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100}
.topbar-logo{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--accent);letter-spacing:3px}
.topbar-logo-img{height:28px;display:block}
.topbar-spacer{flex:1}
.topbar-user{font-size:11px;color:var(--muted)}

.btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:9px 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.3px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#1a4fa8;color:#fff}
.btn-danger{background:transparent;border-color:var(--border);color:var(--muted)}
.btn-danger:hover{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.wrap{max-width:1100px;margin:0 auto;padding:28px 20px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.list-row{display:flex;align-items:center;gap:14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.list-row:hover{border-color:var(--accent)}
.list-logo{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--border);flex-shrink:0}
.list-name{font-weight:700;font-size:14px}
.list-meta{font-size:11px;color:var(--muted)}
.badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.5px}
.badge-on{background:#1a8a4a22;color:var(--green)}
.badge-off{background:#88889922;color:var(--muted)}
.btn-edit{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;width:30px;height:30px;padding:0;font-size:13px;cursor:pointer;flex-shrink:0}
.btn-edit:hover{border-color:var(--accent);color:var(--accent)}
.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:6px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

label{display:block;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin:14px 0 6px}
label:first-child{margin-top:0}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  padding:10px 12px;color:var(--text);font-size:13px;font-family:'Montserrat',sans-serif;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:70px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row.three{grid-template-columns:1fr 1fr 1fr}

.logo-preview{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--surface2);border:1px solid var(--border)}
.logo-picker{display:flex;align-items:center;gap:14px;margin-top:6px}

.toast{position:fixed;top:16px;left:50%;max-width:min(560px,calc(100vw - 32px));background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:8px;padding:12px 18px;font-size:12px;font-weight:700;z-index:999;opacity:0;transform:translate(-50%,-8px);transition:all .25s;pointer-events:none;box-shadow:0 6px 24px #00000080}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.err{border-left-color:var(--red)}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
.login-shell::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('JNAccess_logo_transparente.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(80vw, 700px) auto;
  opacity:.12;
  pointer-events:none;
}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;position:relative;z-index:1}
.login-logo{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--accent);letter-spacing:3px;text-align:center;margin-bottom:4px}
.login-logo-img{height:44px;display:block;margin:0 auto}
.login-sub{text-align:center;color:var(--muted);font-size:11px;margin-bottom:24px}
.login-err{color:var(--red);font-size:11px;margin-top:10px;min-height:14px}

.modal-overlay{display:none;position:fixed;inset:0;background:#00000090;z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-overlay.on{display:flex}
.modal{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px}
.modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

.empty-state{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px}