@media screen{
  .login-card .username-wrap{position:relative;margin-bottom:10px}
  .login-card .username-wrap input{
    width:100%;
    min-height:54px;
    padding:11px 48px 11px 16px;
    direction:rtl;
    text-align:right;
    color:#123e78;
    font-size:16px;
    font-weight:700;
    border:2px solid #b8dbf3;
    border-radius:11px;
    background:rgba(255,255,255,.72);
    outline:none;
  }
  .login-card .username-wrap input:focus{
    border-color:#168bd6;
    box-shadow:0 0 0 4px rgba(22,139,214,.12);
  }
  .login-card .username-wrap input::placeholder{color:#7d8fa8;font-weight:600}
  .login-card .username-wrap .password-leading{top:14px}

  .topbar{min-height:226px}
  .brand-mark{
    width:172px;
    height:210px;
    flex:0 0 172px;
    background-color:transparent;
    background-size:186%;
    background-position:center 50%;
    border:0;
    border-radius:0;
    box-shadow:none;
    mix-blend-mode:multiply;
  }
  .brand .eyebrow{
    position:relative;
    top:-50px;
    display:block;
    margin-bottom:-13px;
    font-size:19px;
    font-weight:900;
  }
  .topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }
  .user-badge{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:7px 12px;
    color:#17527e;
    background:#edf8fe;
    border:1px solid #cce7f4;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
  }
  .top-action{
    position:relative;
    min-height:42px;
    padding:8px 12px;
    color:#075a9b;
    background:#edf8fd;
    border-color:#c5e4f2;
  }
  .top-action:hover{background:#ddf1fa}
  .top-action svg{width:19px;height:19px}
  .action-badge{
    position:absolute;
    top:-7px;
    left:-6px;
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 5px;
    color:#fff;
    background:#d3423a;
    border:2px solid #fff;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }

  .modal{
    position:fixed;
    z-index:2000;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
  }
  .modal-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(4,31,67,.58);
    backdrop-filter:blur(8px);
  }
  .modal-card{
    position:relative;
    z-index:1;
    width:min(1040px,100%);
    max-height:min(90vh,850px);
    overflow:auto;
    background:#fafdff;
    border:1px solid rgba(255,255,255,.8);
    border-radius:24px;
    box-shadow:0 30px 90px rgba(3,35,75,.28);
  }
  .modal-header{
    position:sticky;
    z-index:5;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 24px;
    background:rgba(250,253,255,.96);
    border-bottom:1px solid #d5e8f2;
    backdrop-filter:blur(14px);
  }
  .modal-header h2{margin:0;color:#0a3b91;font-size:25px}
  .modal-close{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid #c9e0eb;
    border-radius:12px;
    color:#315d7e;
    background:#eef7fb;
    font-size:28px;
    line-height:1;
  }
  .modal-close:hover{background:#dfeff6}
  .settings-layout{
    display:grid;
    grid-template-columns:minmax(300px,380px) minmax(0,1fr);
    gap:22px;
    padding:24px;
  }
  .user-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-self:start;
    padding:20px;
    background:#fff;
    border:1px solid #cce4ef;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(5,82,137,.06);
  }
  .user-form h3,.users-panel h3{margin:0;color:#0b468f;font-size:19px}
  .user-form>p{margin:0 0 8px;color:#637e98;font-size:13px;line-height:1.5}
  .user-form label{color:#234d70;font-size:13px;font-weight:900}
  .user-form input{
    width:100%;
    min-height:47px;
    padding:9px 12px;
    color:#12375d;
    background:#fbfeff;
    border:1.5px solid #c5e0ed;
    border-radius:11px;
    outline:none;
  }
  .user-form input:focus{
    border-color:#078ed5;
    box-shadow:0 0 0 4px rgba(7,142,213,.1);
  }
  .user-form small{color:#71869a;font-size:11px}
  .user-form .button{margin-top:7px}
  .inline-error{min-height:20px;color:#b43d36;font-size:12px;font-weight:800}
  .users-panel{min-width:0}
  .users-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .users-list{display:grid;gap:10px}
  .user-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:14px 15px;
    background:#fff;
    border:1px solid #d2e6ef;
    border-radius:14px;
  }
  .user-row-main{min-width:0}
  .user-row strong{display:block;color:#103e71;font-size:15px}
  .user-row small{display:block;margin-top:3px;color:#6b8298;direction:ltr;text-align:right}
  .role-badge{
    display:inline-flex;
    margin-top:7px;
    padding:3px 8px;
    color:#087456;
    background:#e4faf2;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }
  .danger-button{
    min-height:38px;
    padding:7px 10px;
    color:#a83832;
    background:#fff0ee;
    border:1px solid #f0cbc7;
    border-radius:10px;
    font-weight:800;
  }
  .danger-button:hover{background:#ffe1dd}

  .trash-modal-card{width:min(980px,100%)}
  .trash-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 24px 8px;
  }
  .trash-toolbar p{margin:0;color:#657f97}
  .trash-list{
    display:grid;
    gap:12px;
    padding:14px 24px 26px;
  }
  .trash-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:16px;
    background:#fff;
    border:1px solid #d2e5ee;
    border-right:5px solid #d94a42;
    border-radius:15px;
  }
  .trash-item-info{min-width:0}
  .trash-item-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:7px;
  }
  .trash-item-title strong{color:#0b448a}
  .trash-item-title span{
    padding:3px 8px;
    color:#6d4d19;
    background:#fff3dc;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }
  .trash-item p{
    margin:0;
    color:#425f79;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  .trash-item small{display:block;margin-top:6px;color:#74899c}
  .trash-actions{display:flex;gap:8px}
  .restore-button{
    min-height:40px;
    padding:8px 12px;
    color:#087456;
    background:#e5faf2;
    border:1px solid #bdebd9;
    border-radius:10px;
    font-weight:900;
  }
  .restore-button:hover{background:#cdf3e5}
  .modal-empty{
    padding:55px 20px;
    text-align:center;
    color:#6a8298;
  }
  .modal-empty h3{margin:0;color:#0a3b91}
  .modal-empty p{margin:6px 0 0}
  body.modal-open{overflow:hidden}

  @media(max-width:900px){
    .topbar{
      min-height:0;
      flex-wrap:wrap;
      align-items:center;
    }
    .brand{width:100%}
    .brand-mark{
      width:136px;
      height:166px;
      flex-basis:136px;
      background-size:186%;
      background-position:center 50%;
    }
    .topbar-actions{
      width:100%;
      justify-content:stretch;
    }
    .topbar-actions .button{flex:1}
    .user-badge{margin-left:auto}
  }
  @media(max-width:700px){
    .brand-mark{
      width:124px;
      height:151px;
      flex-basis:124px;
      border-radius:0;
    }
    .brand .eyebrow{
      top:-38px;
      display:block;
      font-size:16px;
    }
    .brand h1{font-size:24px}
    .topbar-actions{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .user-badge{
      grid-column:1/-1;
      justify-content:center;
      width:100%;
      margin:0;
    }
    .topbar-actions .button{
      width:100%;
      min-width:0;
      padding:8px 6px;
      font-size:12px;
    }
    .topbar-actions .button span{display:inline}
    .settings-layout{grid-template-columns:1fr;padding:15px}
    .modal{padding:8px}
    .modal-card{max-height:94vh;border-radius:19px}
    .modal-header{padding:15px}
    .trash-toolbar{padding:14px 15px 6px}
    .trash-list{padding:12px 15px 20px}
    .trash-item{grid-template-columns:1fr}
    .trash-actions{display:grid;grid-template-columns:1fr 1fr}
    .trash-actions button{width:100%}
  }
  @media(max-width:410px){
    .brand-mark{
      width:110px;
      height:134px;
      flex-basis:110px;
    }
    .brand h1{font-size:21px}
    .clock{max-width:205px}
    .topbar-actions .button span{font-size:11px}
  }
}
@media print{
  .modal,.topbar-actions{display:none!important}
}