:root{
    /* App look: white + gold */
    --bg0:#fbfaf7;
    --bg1:#f6f3ec;
  
    --card:#ffffff;
    --card2:#fffaf0;
  
    --line:#eadfcd;
    --line2:#f0e7d8;
  
    --text:#1e1c16;
    --muted:#7b7366;
  
    --gold:#b8872b;
    --gold2:#d9b46b;
  
    --danger:#d54a4a;
    --ok:#1f9e73;
  
    --radius:18px;
    --shadow: 0 18px 50px rgba(30,20,10,.12);
    --shadow2: 0 10px 30px rgba(30,20,10,.10);
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  
    --focus: 0 0 0 3px rgba(184,135,43,.18);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background: linear-gradient(180deg,var(--bg0),var(--bg1));
    overflow-x:hidden;
  }
  
  /* Subtle warm background (no neon) */
  .bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
  .bg__glow{
    position:absolute;
    width:720px; height:720px;
    filter: blur(70px);
    opacity:.35;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(184,135,43,.55), transparent 60%);
  }
  .bg__glow--a{left:-260px; top:-280px}
  .bg__glow--b{
    right:-260px; bottom:-300px;
    background: radial-gradient(circle at 40% 40%, rgba(217,180,107,.45), transparent 60%);
  }
  .bg__grid{
    position:absolute; inset:0;
    opacity:.12;
    background:
      linear-gradient(transparent 0 97%, rgba(184,135,43,.15) 97% 100%),
      linear-gradient(90deg, transparent 0 97%, rgba(184,135,43,.15) 97% 100%);
    background-size: 58px 58px;
  }
  
  .container{max-width:1375px; margin:0 auto; padding:22px}
  
  /* Topbar (white, gold accents) */
  .topbar{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
  }
  .brand{display:flex; align-items:center; gap:12px}
  .brand__logo{
    width:44px; height:44px;
    border-radius:14px;
    display:grid; place-items:center;
    font-weight:900;
    color:#fff;
    background: linear-gradient(180deg, var(--gold2), var(--gold));
    box-shadow: var(--shadow2);
    border:1px solid rgba(184,135,43,.35);
  }
  .brand__meta{display:flex; flex-direction:column}
  .brand__title{font-weight:900; letter-spacing:.2px}
  .brand__sub{color:var(--muted); font-size:12.5px; margin-top:2px}
  
  .topbar__right{display:flex; gap:10px; align-items:center}
  .pill{
    padding:9px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.75);
    color:var(--muted);
    font-size:13px;
  }
  
  /* Login */
  .login{
    min-height: calc(100vh - 40px);
    display:grid;
    place-items:center;
    padding: 10px 0;
  }
  .loginCard{
    width:min(420px, 92vw);
    border-radius: 22px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow);
    padding:18px;
  }
  .loginCard__head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 0 18px;
  }
  .logoMark{
    width:54px; height:54px;
    border-radius:18px;
    display:grid; place-items:center;
    font-weight:900;
    color:#fff;
    background: linear-gradient(180deg, var(--gold2), var(--gold));
    border:1px solid rgba(184,135,43,.35);
    box-shadow: var(--shadow2);
  }
  .loginTitle{
    font-weight:900;
    letter-spacing:.2px;
    font-size:18px;
  }
  
  /* Inputs */
  .field{margin-bottom:12px}
  .field label{display:block; color:var(--muted); font-size:12px; margin:0 0 6px}
  .field input, .field select{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background: #fff;
    color:var(--text);
    outline:none;
  }
  .field input:focus, .field select:focus{
    border-color: rgba(184,135,43,.55);
    box-shadow: var(--focus);
  }
  
  .passwordWrap{position:relative}
  .passwordWrap input{padding-right:48px}
  .pwToggle{
    position:absolute;
    right:8px;
    top:50%;
    transform: translateY(-50%);
    width:38px; height:38px;
    border-radius:12px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.85);
    cursor:pointer;
    color:var(--muted);
  }
  .pwToggle:hover{border-color: rgba(184,135,43,.45); color: var(--text)}
  
  /* Buttons */
  .btn{
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.85);
    color:var(--text);
    cursor:pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .btn:hover{
    transform: translateY(-1px);
    border-color: rgba(184,135,43,.40);
    box-shadow: 0 8px 18px rgba(184,135,43,.10);
  }
  .btn:active{transform: translateY(0px)}
  .btn--primary{
    border-color: rgba(184,135,43,.55);
    background: linear-gradient(180deg, var(--gold2), var(--gold));
    color:#fff;
    box-shadow: 0 10px 24px rgba(184,135,43,.20);
  }
  .btn--ghost{
    background: rgba(255,255,255,.75);
  }
  .btn--block{width:100%}
  
  /* Tabs */
  .tabs{
    display:flex; gap:10px; flex-wrap:wrap;
    margin:18px 0 0;
  }
  .tab{
    border:1px solid var(--line);
    background: rgba(255,255,255,.75);
    color:var(--text);
    padding:10px 12px;
    border-radius:14px;
    cursor:pointer;
  }
  .tab.active{
    border-color: rgba(184,135,43,.55);
    background: linear-gradient(180deg, rgba(217,180,107,.50), rgba(184,135,43,.35));
  }
  
  /* Panels */
  .panel{
    margin-top:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.80);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .panel__head{
    padding:16px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--line2);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,240,.70));
  }
  .panel__head h2{margin:0; font-size:18px}
  .muted{margin:6px 0 0; color:var(--muted); font-size:12.5px}
  
  .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .search input{
    width:min(360px, 72vw);
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background: #fff;
    color:var(--text);
    outline:none;
  }
  .search input:focus{
    border-color: rgba(184,135,43,.55);
    box-shadow: var(--focus);
  }
  
  /* Table */
  .tableWrap{overflow:auto}
  .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  .table thead th{
    text-align:left;
    font-size:12px;
    color: var(--muted);
    padding:12px;
    background: rgba(255,250,240,.70);
    position:sticky;
    top:0;
    border-bottom:1px solid var(--line2);
  }
  .table tbody td{
    padding:12px;
    border-bottom:1px solid rgba(234,223,205,.65);
    font-size:13px;
    white-space:nowrap;
  }
  .table tbody tr:hover td{
    background: rgba(217,180,107,.10);
  }
  
  .rowBtns{display:flex; gap:8px}
  .smallBtn{padding:8px 10px; border-radius:12px; font-size:12px}
  
  .empty{padding:16px; color:var(--muted)}
  
  /* Alerts */
  .error{
    margin-top:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(213,74,74,.35);
    background: rgba(213,74,74,.08);
    color: var(--text);
    font-size:13px;
  }
  .ok{
    margin-top:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(31,158,115,.35);
    background: rgba(31,158,115,.08);
    color: var(--text);
    font-size:13px;
  }
  
  /* Modal */
  .modal{position:fixed; inset:0; display:grid; place-items:center; z-index:50}
  .modal__overlay{position:absolute; inset:0; background: rgba(30,20,10,.45)}
  .modal__card{
    position:relative;
    width:min(860px, 94vw);
    border-radius: var(--radius);
    border:1px solid var(--line);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modal__head{
    padding:16px;
    border-bottom:1px solid var(--line2);
    display:flex; align-items:center; justify-content:space-between;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,240,.80));
  }
  .modal__title{font-weight:900}
  .modal__sub{color:var(--muted); font-size:12px; margin-top:4px}
  .modal__body{padding:16px}
  .modal__foot{
    padding:16px;
    border-top:1px solid var(--line2);
    display:flex; align-items:center; gap:10px;
    background: rgba(255,250,240,.60);
  }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media (max-width: 760px){ .grid2{grid-template-columns:1fr} }
  
  .iconBtn{
    width:40px; height:40px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.85);
    color:var(--text);
    cursor:pointer;
  }
  .iconBtn:hover{border-color: rgba(184,135,43,.40)}
  .spacer{flex:1}
  
  /* Optional: badges if you use them */
  .badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.78);
    color: var(--muted);
    font-size:12px;
  }
  .badge--ok{
    border-color: rgba(31,158,115,.35);
    background: rgba(31,158,115,.10);
    color: #127253;
  }
  .badge--warn{
    border-color: rgba(184,135,43,.45);
    background: rgba(217,180,107,.18);
    color: #7a5412;
  }
  .badge--danger{
    border-color: rgba(213,74,74,.35);
    background: rgba(213,74,74,.10);
    color: #8d1f1f;
  }
  
  /* Popis By User layout (ako koristiš pbu UI) */
  .pbu{
    display:grid;
    grid-template-columns: 260px 220px 1fr;
    gap:12px;
    padding:12px;
  }
  .pbu__col{
    border:1px solid var(--line);
    background: rgba(255,255,255,.82);
    border-radius: 16px;
    overflow:hidden;
    min-height: 480px;
    box-shadow: var(--shadow2);
  }
  .pbu__main{
    border:1px solid var(--line);
    background: rgba(255,255,255,.78);
    border-radius: 16px;
    overflow:hidden;
    min-height: 480px;
    display:flex;
    flex-direction:column;
    box-shadow: var(--shadow2);
  }
  .pbu__title{
    padding:12px;
    font-weight:900;
    border-bottom:1px solid var(--line2);
    color: var(--muted);
    font-size: 12px;
    background: rgba(255,250,240,.65);
  }
  .pbu__list{
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .pbuItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.85);
    cursor:pointer;
  }
  .pbuItem:hover{
    border-color: rgba(184,135,43,.45);
    box-shadow: 0 10px 20px rgba(184,135,43,.10);
  }
  .pbuItem.active{
    border-color: rgba(184,135,43,.65);
    background: linear-gradient(180deg, rgba(217,180,107,.35), rgba(184,135,43,.18));
  }
  .pbuItem__meta{
    font-size:12px;
    color: var(--muted);
  }
  .pbu__crumbs{
    padding:12px 14px;
    border-bottom:1px solid var(--line2);
    color: var(--muted);
    font-size: 13px;
    background: rgba(255,250,240,.60);
  }
  @media (max-width: 980px){
    .pbu{grid-template-columns: 1fr; }
    .pbu__col, .pbu__main{min-height:auto}
  }

  .passwordInline{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(10,16,35,.55);
  }
  
  .passwordInline .pwField{
    width:160px;
    border:0;
    outline:none;
    background:transparent;
    color:var(--text);
  }
  
  .pwToggleSmall{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(15,23,48,.20);
    cursor:pointer;
    display:grid;
    place-items:center;
    color:var(--text);
  }
  .pwToggleSmall:hover{
    border-color: rgba(255,255,255,.18);
  }