:root{
    --bg:#0b0b0b;
    --card:#121212;
    --text:#ffffff;
    --muted:#b9b9b9;
    --yellow:#ffd400;
    --border: rgba(255,255,255,.08);
  }
  
  *{box-sizing:border-box}
  body.bg{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #0f0f0f;
    color:var(--text);
  }
  a{color:var(--yellow); text-decoration:none}
  a:hover{text-decoration:underline}
  
  .container{max-width:1100px; margin:18px auto; padding:0 14px;}
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    margin-bottom:14px;
  }
  h1,h2{margin:0 0 10px}
  .muted{color:var(--muted)}
  .small{font-size:.88rem}
  
  .topbar{
    display:flex; gap:14px; align-items:center; justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    position:sticky; top:0; background: rgba(11,11,11,.85); backdrop-filter: blur(10px);
  }
  .brand-row{display:flex; gap:10px; align-items:center}
  .logo{max-width:220px; height:auto}
  .logo-sm{width:54px; height:auto}
  .title{font-weight:800}
  .top-actions{display:flex; gap:8px; flex-wrap:wrap}
  
  .auth-wrap{min-height:100vh; display:grid; place-items:center; padding:18px}
  .auth-card{max-width:520px; width:100%}
  
  .form{display:grid; gap:10px}
  label{font-weight:650}
  input, select{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#0f0f0f;
    color:var(--text);
    outline:none;
  }
  input:focus, select:focus{border-color: rgba(255,212,0,.55)}
  
  .btn{
    border:1px solid var(--border);
    background:#101010;
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
  }
  .btn-sm{padding:8px 10px; border-radius:10px; font-size:.92rem}
  .btn-primary{background: var(--yellow); color:#101010; border-color: rgba(255,212,0,.6)}
  .btn-secondary{background:#151515}
  .btn-outline{background:transparent}
  .btn-ghost{background:transparent; border-color:transparent}
  .btn:hover{filter:brightness(1.06)}
  
  .pass-row{display:flex; gap:8px; align-items:center}
  .pass-row input{flex:1}
  
  .alert{
    background: rgba(255,212,0,.12);
    border:1px solid rgba(255,212,0,.35);
    padding:10px 12px;
    border-radius:12px;
    margin-bottom:10px;
  }
  
  .table-wrap{overflow:auto; border-radius:12px; border:1px solid var(--border)}
  table{width:100%; border-collapse:collapse; min-width:740px}
  th,td{padding:12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
  th{color:#f5f5f5; font-size:.92rem; background:rgba(255,255,255,.03)}
  .actions{display:flex; gap:8px; flex-wrap:wrap}
  
  .filecell{display:flex; gap:10px; align-items:center}
  .fileext{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.78rem; font-weight:900;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid rgba(255,212,0,.35);
    background: rgba(255,212,0,.08);
    min-width:56px;
  }

  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .login-header .logo {
    max-width: 220px;
    height: auto;
  }
  
  .login-header h1 {
    margin: 0;
    font-weight: 800;
  }
  
  .login-header .muted {
    margin: 0;
  }
  
  
  .badge{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:.82rem;
    border:1px solid var(--border);
  }
  .badge-off{background: rgba(255,255,255,.05)}
  .badge-new{background: rgba(255,212,0,.18); border-color: rgba(255,212,0,.35)}
  .badge-warn{background: rgba(255,212,0,.12); border-color: rgba(255,212,0,.28)}
  .badge-ok{background: rgba(0,255,140,.10); border-color: rgba(0,255,140,.25)}
  
  .footer.global{
    text-align:center; padding:18px 14px; color:var(--muted)
  }
  .footer{margin-top:10px; text-align:center}
  
  .grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
  }
  .grid > div{grid-column: span 2}
  .grid-end{display:flex; align-items:end}
  .grid-end button{width:100%}
  
  .calendar-hint{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px}
  
  .link{
    margin-top:4px;
    background:transparent; border:none; color:var(--yellow);
    cursor:pointer; font-weight:800;
  }
  
  .modal{
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,.65);
    padding:16px;
  }
  .modal.show{display:grid; place-items:center}
  .modal-content{
    width:min(560px, 96vw);
    background:#121212;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
  }
  .modal-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
  }
  .strength{font-weight:800}
  @media (max-width: 920px){
    .grid{grid-template-columns: 1fr 1fr}
    .grid > div{grid-column: span 1}
    table{min-width:640px}
  }
  @media (max-width: 520px){
    .topbar{flex-direction:column; align-items:flex-start}
    .top-actions{width:100%}
    .top-actions a, .top-actions button{flex:1}
  }

  .two-cols{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  .card.mini{padding:14px}
  .user-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    margin-top:10px;
    cursor:pointer;
    background: rgba(255,255,255,.02);
  }
  .user-row:hover{filter:brightness(1.06)}
  .fw{font-weight:850}
  @media (max-width: 920px){
    .two-cols{grid-template-columns: 1fr;}
  }