@media screen{
  :root{
    --premium-blue:#073a91;
    --premium-blue-2:#087fc6;
    --premium-cyan:#0aa6df;
    --premium-green:#00a878;
    --premium-green-dark:#08785b;
    --premium-ink:#102f58;
    --premium-muted:#617b95;
    --premium-line:#c9e3ef;
    --premium-soft:#f5fbfe;
    --premium-radius:28px;
    --premium-shadow:0 22px 60px rgba(5,68,126,.11);
  }

  ::selection{background:#bcefe0;color:#073a91}
  body{
    background:
      radial-gradient(circle at 91% 4%,rgba(0,168,120,.15),transparent 27rem),
      radial-gradient(circle at 4% 22%,rgba(10,166,223,.16),transparent 32rem),
      linear-gradient(180deg,#f8fdff 0%,#eaf7fd 48%,#f5fcfa 100%);
  }

  /* Login */
  .gate{
    padding:38px 38px 155px;
    background:
      radial-gradient(circle at 7% 24%,rgba(5,155,221,.18),transparent 25rem),
      radial-gradient(circle at 91% 12%,rgba(0,182,129,.12),transparent 24rem),
      linear-gradient(135deg,#dff5ff 0%,#ffffff 47%,#e8fbf5 100%);
  }
  .login-shell{
    width:min(1120px,100%);
    grid-template-columns:minmax(370px,1fr) 1px minmax(370px,1fr);
    gap:54px;
    padding:24px 34px;
  }
  .login-mark{width:min(390px,100%);height:390px}
  .login-separator{
    height:450px;
    background:linear-gradient(180deg,transparent,#72b4e2 12%,#65cbb0 88%,transparent);
  }
  .login-shell .login-heading h1{
    padding-bottom:12px;
    border-bottom-color:#75c5e8;
    text-shadow:0 8px 25px rgba(7,74,153,.08);
  }
  .login-tagline{margin-top:13px;color:#315d87;font-size:21px}
  .login-card{
    padding:28px 30px 26px;
    border:1px solid rgba(255,255,255,.98);
    border-radius:28px;
    background:rgba(255,255,255,.88);
    box-shadow:0 24px 65px rgba(5,73,139,.14);
  }
  .login-lock{
    width:60px;
    height:60px;
    margin-bottom:10px;
    background:linear-gradient(145deg,#d8f4ff,#c9f3e5);
    box-shadow:0 10px 25px rgba(8,126,183,.12);
  }
  .login-card h2{font-size:32px}
  .login-card>p{margin:6px 0 20px;font-size:17px}
  .login-card .username-wrap{margin-bottom:13px}
  .login-card .username-wrap input,
  .login-card .password-wrap input{
    min-height:60px;
    padding-top:13px;
    padding-bottom:13px;
    border:1.5px solid #a9d8ed;
    border-radius:16px;
    background:#fbfeff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  }
  .login-card .username-wrap input:focus,
  .login-card .password-wrap input:focus{
    border-color:var(--premium-cyan);
    box-shadow:0 0 0 5px rgba(10,166,223,.11);
  }
  .login-card .username-wrap .password-leading,
  .login-card .password-wrap .password-leading{top:17px}
  .login-card .icon-button{top:10px}
  .login-card .login-button{
    min-height:62px;
    margin-top:18px;
    border-radius:16px;
    background:linear-gradient(120deg,var(--premium-blue),#078bd5 68%,var(--premium-green));
    box-shadow:0 13px 30px rgba(6,91,170,.22);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }
  .login-card .login-button:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
    box-shadow:0 17px 36px rgba(6,91,170,.27);
  }

  /* Main shell and header */
  .app-shell{
    width:min(1540px,100%);
    max-width:1540px;
    padding:32px clamp(18px,3vw,48px) 70px;
  }
  .topbar{
    min-height:238px;
    padding:25px 30px;
    margin-bottom:24px;
    border:1px solid rgba(130,196,224,.62);
    border-radius:32px;
    background:
      radial-gradient(circle at 100% 0,rgba(0,170,121,.12),transparent 19rem),
      linear-gradient(120deg,rgba(255,255,255,.98),rgba(237,249,255,.96));
    box-shadow:var(--premium-shadow);
  }
  .topbar::before{
    content:"";
    position:absolute;
    width:270px;
    height:270px;
    left:-95px;
    bottom:-185px;
    border:34px solid rgba(10,166,223,.07);
    border-radius:50%;
    pointer-events:none;
  }
  .topbar::after{height:6px}
  .brand{gap:26px}
  .brand h1{
    color:var(--premium-blue);
    font-size:clamp(34px,3.4vw,48px);
    line-height:1.06;
  }
  .clock{
    min-height:32px;
    margin-top:11px;
    padding:5px 13px;
    color:#355f82;
    background:rgba(237,249,254,.92);
    border-color:#c6e6f3;
    font-size:14px;
  }
  .topbar-actions{
    width:min(560px,100%);
    max-width:560px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:
      "user user user"
      "trash settings exit"
      ". lock .";
    gap:11px;
  }
  #currentUserBadge{grid-area:user;margin:0;justify-content:center}
  #trashBtn{grid-area:trash}
  #settingsBtn{grid-area:settings}
  #topReferralBtn{grid-area:referral}
  #lockBtn{grid-area:lock}
  #exitBtn{grid-area:exit}
  .role-entry{
    padding-bottom:32px;
  }
  .role-entry>:not(.topbar){
    display:none!important;
  }
  .role-entry .topbar{
    margin-bottom:0;
  }
  .role-entry #currentUserBadge{
    display:none!important;
  }
  .role-entry .topbar-actions{
    width:min(720px,100%);
    max-width:720px;
    grid-template-columns:1.35fr 1fr 1fr;
    grid-template-areas:"referral lock exit";
    gap:14px;
  }
  .role-entry .topbar-actions .button{
    min-height:66px;
    padding:14px 20px;
    border-radius:18px;
    font-size:16px;
    font-weight:900;
  }
  .role-entry #topReferralBtn{
    min-height:78px;
    padding:17px 24px;
    font-size:18px;
    border-radius:20px;
    box-shadow:0 12px 26px rgba(4,126,94,.22);
  }
  .role-entry #topReferralBtn svg{
    width:24px;
    height:24px;
  }
  .user-badge{
    min-height:44px;
    padding:9px 15px;
    color:#0a4d82;
    background:linear-gradient(120deg,#eaf8fd,#e8faf4);
    border-color:#bfe2ed;
    font-size:14px;
  }
  .top-action,
  .button-compact{
    min-height:48px;
    padding:10px 15px;
    border-radius:14px;
    box-shadow:0 7px 18px rgba(8,80,137,.07);
  }
  .top-action{
    color:#075a9b;
    background:#f0faff;
    border-color:#c3e4f2;
  }
  .top-action:hover{transform:translateY(-1px);background:#e2f5fc}
  .lock-action{
    color:#087159;
    background:linear-gradient(120deg,#e8faf3,#edfaff);
    border-color:#bce5d6;
  }
  .lock-action:hover{background:#d9f5e9}
  .button-danger:hover{transform:translateY(-1px)}

  /* Summary */
  .summary-strip{
    min-height:102px;
    padding:20px 29px;
    margin-bottom:24px;
    border-radius:28px;
    background:linear-gradient(118deg,#06358d 0%,#087fc8 58%,#00a878 100%);
    box-shadow:0 22px 45px rgba(6,76,151,.2);
  }
  .summary-strip::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-120px;
    bottom:-190px;
    border:30px solid rgba(255,255,255,.07);
    border-radius:50%;
  }
  .summary-label{font-size:16px}
  .summary-strip strong{min-width:62px;font-size:45px}
  .storage-note{
    min-height:45px;
    padding:10px 17px;
    font-size:15px;
    background:rgba(255,255,255,.14);
  }

  /* Shared panels */
  .panel{
    border-color:rgba(142,201,227,.67);
    border-radius:var(--premium-radius);
    background:rgba(255,255,255,.95);
    box-shadow:var(--premium-shadow);
  }
  .form-panel{padding:32px 34px 35px}
  .form-panel::before{height:7px}
  .section-heading,.table-head{margin-bottom:27px}
  .section-heading h2,.table-head h2,.search-copy h2{
    font-size:27px;
    letter-spacing:-.025em;
  }
  .section-heading .eyebrow,
  .table-head .eyebrow,
  .search-copy .eyebrow{margin-bottom:6px;font-size:13px;font-weight:900}
  .text-button{
    min-height:42px;
    padding:9px 15px;
    border:1px solid #c3e3ef;
    border-radius:12px;
    background:#eff9fd;
  }

  /* Form */
  .case-form{gap:23px 22px}
  .field{gap:9px}
  .field label{color:#174c71;font-size:15px;font-weight:900}
  .field small{font-size:12.5px;color:#6a849c}
  .field input,
  .field textarea,
  .search-control input{
    border:1.5px solid #c4e0ec;
    border-radius:15px;
    background:#fbfeff;
    color:var(--premium-ink);
    box-shadow:inset 0 1px 0 #fff;
  }
  .field input{height:58px;padding:0 16px}
  .field textarea{
    min-height:132px;
    padding:16px;
    line-height:1.7;
  }
  .field input:hover,
  .field textarea:hover,
  .search-control input:hover{border-color:#8fc8df}
  .field input:focus,
  .field textarea:focus,
  .search-control input:focus{
    border-color:var(--premium-cyan);
    background:#fff;
    box-shadow:0 0 0 5px rgba(10,166,223,.1);
  }
  .auto-number-wrap{
    height:58px;
    display:flex;
    align-items:center;
    direction:ltr;
    overflow:hidden;
    border:1.5px solid #c4e0ec;
    border-radius:15px;
    background:#fbfeff;
    box-shadow:inset 0 1px 0 #fff;
    transition:border-color .16s,box-shadow .16s,background .16s;
  }
  .auto-number-wrap:hover{border-color:#8fc8df}
  .auto-number-wrap:focus-within{
    border-color:var(--premium-cyan);
    background:#fff;
    box-shadow:0 0 0 5px rgba(10,166,223,.1);
  }
  .auto-number-wrap input,
  .auto-number-wrap input:hover,
  .auto-number-wrap input:focus{
    flex:1;
    min-width:0;
    height:100%;
    padding:0 7px 0 16px;
    text-align:right;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    outline:0;
  }
  .auto-year-suffix{
    flex:0 0 auto;
    padding:0 16px 0 2px;
    color:#07599a;
    font-size:17px;
    font-weight:900;
    white-space:nowrap;
  }
  .form-actions{gap:13px;padding-top:5px;flex-wrap:wrap}
  .export-excel{color:#087159;background:#e8f8f0;border-color:#78cfae}
  .export-print{color:#075bb8;background:#edf6ff;border-color:#9cc8f0}
  .button{
    min-height:52px;
    padding:11px 19px;
    border-radius:14px;
    font-size:15px;
    box-shadow:0 7px 18px rgba(6,74,128,.06);
  }
  .button-primary{
    background:linear-gradient(120deg,var(--premium-blue),#087fc7);
    box-shadow:0 10px 23px rgba(7,69,147,.18);
  }
  .button-primary:hover{transform:translateY(-2px);background:linear-gradient(120deg,#062f7e,#0796d6)}
  .button-muted{color:#42617b;background:#edf5f8}
  .button-outline{color:#087159;background:#eefaf6;border-color:#bce4d6}

  /* Search */
  .search-panel{
    grid-template-columns:minmax(260px,.62fr) minmax(400px,1.38fr);
    gap:34px;
    padding:27px 32px;
    margin-top:24px;
  }
  .search-copy p:last-child{margin-top:7px;font-size:14px}
  .search-control input{
    height:62px;
    padding-right:52px;
    padding-left:72px;
    font-size:17px;
  }
  .search-icon{right:18px;top:20px;width:22px;height:22px}
  .clear-search{
    left:10px;
    top:10px;
    height:42px;
    padding:0 15px;
    color:#087159;
    background:#e6f8f1;
    border-radius:12px;
  }
  .search-suggestions{
    top:69px;
    padding:9px;
    border-color:#c4e1ee;
    border-radius:17px;
    box-shadow:0 22px 55px rgba(7,67,120,.17);
  }
  .suggestion{padding:13px;border-radius:12px}

  /* Records table */
  .records-panel{padding:30px 32px 34px;margin-top:24px}
  .count-badge{
    min-height:39px;
    padding:7px 14px;
    color:#087159;
    background:#e6f9f2;
    border:1px solid #bce8d8;
    font-size:14px;
  }
  .table-wrap{
    border-color:#b6d8e7;
    border-radius:20px;
    box-shadow:0 12px 32px rgba(7,75,128,.08);
  }
  table{
    min-width:1100px;
    table-layout:fixed;
  }
  th:nth-child(1),td:nth-child(1){width:5%}
  th:nth-child(2),td:nth-child(2){width:14%}
  th:nth-child(3),td:nth-child(3){width:14%}
  th:nth-child(4),td:nth-child(4){width:13%}
  th:nth-child(5),td:nth-child(5){width:30%}
  th:nth-child(6),td:nth-child(6){width:11%}
  th:nth-child(7),td:nth-child(7){width:13%}
  thead th{
    padding:18px 12px;
    text-align:center;
    color:#fff;
    background:linear-gradient(180deg,#0b62a8,#08488b);
    border-bottom:2px solid #063b73;
    font-size:14px;
    font-weight:900;
    line-height:1.35;
  }
  thead th+th{border-right:1px solid rgba(255,255,255,.14)}
  thead th:first-child{border-top-right-radius:18px}
  thead th:last-child{border-top-left-radius:18px}
  tbody tr{height:70px}
  tbody td{
    padding:15px 13px;
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid #d7e8ef;
    color:#244b6b;
    font-size:14.5px;
    line-height:1.55;
    overflow-wrap:anywhere;
  }
  tbody td+td{border-right:1px solid #e2edf2}
  tbody tr:nth-child(odd){background:#ffffff}
  tbody tr:nth-child(even){background:#f1f9fc}
  tbody tr:hover{background:#e8f8f2}
  td:first-child{
    color:var(--premium-blue);
    background:rgba(232,247,252,.65);
    font-size:16px;
    font-weight:900;
  }
  td:nth-child(2),td:nth-child(3){font-weight:700}
  .subject-cell{
    padding-right:19px;
    padding-left:19px;
    text-align:right;
    line-height:1.7;
  }
  .auto-cell{
    direction:ltr;
    text-align:center!important;
    color:#07599a;
    font-size:15px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .auto-cell span{
    min-width:112px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border:1px solid #c7e4ef;
    border-radius:11px;
    background:#eaf7fc;
    line-height:1.2;
  }
  .date-cell{text-align:center!important;font-variant-numeric:tabular-nums}
  .actions-cell{
    width:auto;
    text-align:center!important;
    white-space:normal;
  }
  .row-action{
    min-width:58px;
    min-height:39px;
    padding:8px 10px;
    border-radius:11px;
    transition:transform .15s ease,filter .15s ease;
  }
  .row-action:hover{transform:translateY(-1px);filter:saturate(1.1)}
  .row-action.edit{color:#08654f;background:#e3f8f0}
  .row-action.delete{color:#ad3c35;background:#ffefed}
  .empty-state{padding:66px 20px}
  .empty-mark{width:66px;height:66px;border-radius:20px}

  /* Lock screen */
  body.app-locked{overflow:hidden}
  .lock-screen{
    position:fixed;
    z-index:5000;
    inset:0;
    display:grid;
    place-items:center;
    padding:22px;
    background:
      radial-gradient(circle at 12% 18%,rgba(10,166,223,.24),transparent 24rem),
      radial-gradient(circle at 88% 80%,rgba(0,168,120,.2),transparent 24rem),
      rgba(235,248,253,.93);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .lock-card{
    width:min(460px,100%);
    padding:35px 34px 28px;
    text-align:center;
    border:1px solid rgba(255,255,255,.96);
    border-radius:30px;
    background:rgba(255,255,255,.94);
    box-shadow:0 32px 90px rgba(4,52,105,.24);
    animation:lock-in .28s ease both;
  }
  @keyframes lock-in{
    from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  .lock-emblem{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    color:#0754a2;
    border:1px solid #bce5dc;
    border-radius:24px;
    background:linear-gradient(145deg,#ddf4ff,#dff8ef);
    box-shadow:0 13px 30px rgba(6,103,154,.13);
  }
  .lock-emblem svg{width:38px;height:38px;stroke-width:2}
  .lock-card .eyebrow{margin-bottom:5px;color:#008e68;font-size:13px}
  .lock-card h2{
    margin:0;
    color:var(--premium-blue);
    font-size:34px;
    font-weight:900;
    letter-spacing:-.03em;
  }
  .lock-user-label{
    display:inline-flex;
    margin:13px 0 0;
    padding:6px 12px;
    color:#0a5a87;
    background:#eaf8fd;
    border:1px solid #c7e7f2;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
  }
  .lock-copy{margin:15px 0 17px;color:var(--premium-muted);font-size:16px}
  .lock-password-wrap{position:relative}
  .lock-password-wrap>span{
    position:absolute;
    z-index:2;
    right:16px;
    top:16px;
    color:#477397;
    pointer-events:none;
  }
  .lock-password-wrap>span svg{width:25px;height:25px}
  .lock-password-wrap input{
    width:100%;
    height:60px;
    padding:0 52px 0 16px;
    direction:rtl;
    text-align:right;
    color:var(--premium-ink);
    background:#fbfeff;
    border:1.5px solid #b9dce9;
    border-radius:16px;
    outline:none;
    font-size:18px;
    font-weight:800;
  }
  .lock-password-wrap input:focus{
    border-color:var(--premium-cyan);
    box-shadow:0 0 0 5px rgba(10,166,223,.11);
  }
  .lock-open-button{width:100%;margin-top:14px}
  .lock-switch-user{
    margin-top:2px;
    padding:8px 12px;
    color:#55758f;
    background:transparent;
    border:0;
    border-radius:10px;
    font-weight:800;
  }
  .lock-switch-user:hover{color:#075a9b;background:#edf8fc}

  /* Dialogs */
  .modal{padding:26px}
  .modal-backdrop{background:rgba(3,31,69,.63);backdrop-filter:blur(11px)}
  .modal-card{
    border-radius:30px;
    background:#f8fcfe;
    box-shadow:0 35px 100px rgba(3,31,69,.32);
  }
  .modal-header{padding:23px 28px}
  .modal-header h2{font-size:28px}
  .modal-close{width:46px;height:46px;border-radius:14px}
  .settings-layout{gap:28px;padding:29px}
  .user-form{padding:24px;border-radius:21px}
  .user-form input{min-height:52px;border-radius:13px}
  .user-row,.trash-item{padding:17px 18px;border-radius:17px}
  .trash-toolbar{padding:20px 28px 9px}
  .trash-list{padding:16px 28px 30px}
  .restore-button,.danger-button{min-height:42px;border-radius:11px}

  .toast{
    padding:15px 22px;
    border-radius:15px;
    background:linear-gradient(120deg,#073a91,#087fc6);
  }

  .developer-credit{
    position:fixed;
    z-index:1200;
    left:max(14px,env(safe-area-inset-left));
    bottom:max(10px,env(safe-area-inset-bottom));
    color:#315d87;
    font:700 12px/1.3 Arial,sans-serif;
    letter-spacing:.02em;
    direction:ltr;
    white-space:nowrap;
    opacity:.82;
    pointer-events:none;
    user-select:none;
  }

  @media(max-width:1100px){
    .topbar{align-items:center;flex-wrap:wrap}
    .brand{width:100%}
    .topbar-actions{width:100%;max-width:none}
    .topbar-actions .button{flex:1}
    .search-panel{grid-template-columns:1fr;gap:18px}
  }

  @media(max-width:820px){
    .app-shell{padding:16px 13px 45px}
    .topbar{padding:18px;min-height:0;border-radius:25px}
    .brand{gap:15px}
    .brand h1{font-size:31px}
    .topbar-actions{gap:9px}
    .summary-strip{min-height:90px;padding:17px 20px}
    .summary-strip strong{font-size:38px}
    .form-panel,.search-panel,.records-panel{padding:23px;border-radius:23px}
    .case-form{gap:19px}
    .table-wrap{width:100%;overflow:visible;box-shadow:none}
    table{width:100%;min-width:0!important;table-layout:auto}
    tbody{width:100%;gap:15px}
    tbody tr{
      border-color:#bdddea;
      border-right:6px solid var(--premium-cyan);
      border-radius:18px;
      box-shadow:0 12px 28px rgba(7,79,132,.08);
    }
    tbody tr{height:auto}
    tbody td,
    tbody td:nth-child(n){
      width:100%;
      padding:14px 15px;
      text-align:right!important;
      border-right:0;
      border-bottom-color:#dcebf1;
    }
    tbody td:first-child{background:linear-gradient(90deg,#e7f7fd,#e9faf4)}
    .auto-cell{direction:rtl!important}
    .auto-cell span{
      min-width:118px;
      direction:ltr;
      justify-self:start;
    }
    .subject-cell{text-align:right!important}
    .date-cell{text-align:right!important}
    .actions-cell{text-align:center!important}
  }

  @media(max-width:700px){
    .gate{padding:24px 14px 115px}
    .login-shell{padding:0;gap:12px}
    .login-mark{width:210px;height:210px}
    .login-card{padding:22px 18px;border-radius:23px}
    .lock-card{padding:29px 20px 22px;border-radius:25px}
    .lock-card h2{font-size:30px}
    .lock-emblem{width:68px;height:68px;border-radius:21px}
    .login-card h2{font-size:27px}
    .login-card>p{font-size:15px}
    .login-card .username-wrap input,
    .login-card .password-wrap input{min-height:57px}
    .topbar{padding:16px 14px}
    .brand{align-items:center}
    .brand h1{font-size:26px}
    .clock{font-size:12px}
    .topbar-actions{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .topbar-actions .button{min-height:48px}
    .summary-strip{align-items:flex-start;gap:12px;border-radius:22px}
    .summary-label{font-size:13px}
    .summary-strip strong{font-size:33px}
    .storage-note{font-size:12px}
    .section-heading h2,.table-head h2,.search-copy h2{font-size:23px}
    .field input,.auto-number-wrap{height:56px}
    .field textarea{min-height:124px}
    .form-actions{gap:10px}
    .search-control input{height:58px;font-size:16px}
    .search-icon{top:18px}
    .clear-search{top:8px}
    .records-panel{padding-left:14px;padding-right:14px}
    .modal{padding:8px}
    .modal-card{border-radius:23px}
  }

  @media(max-width:430px){
    .app-shell{padding-right:9px;padding-left:9px}
    .login-mark{width:178px;height:178px}
    .topbar{border-radius:21px}
    .brand{gap:9px}
    .brand h1{font-size:23px}
    .brand .eyebrow{font-size:15px}
    .topbar-actions .button{padding:8px 5px;font-size:11px}
    .user-badge{font-size:12px}
    .summary-strip{padding:15px}
    .storage-note{padding:8px 10px}
    .form-panel,.search-panel{padding:19px 16px}
    .records-panel{padding:19px 11px}
    .form-actions{grid-template-columns:1fr}
    .form-actions .button{grid-column:1;width:100%}
    tbody td{grid-template-columns:minmax(88px,33%) minmax(0,1fr)}
  }
}
@media print{
  .lock-screen,
  .developer-credit{display:none!important}
}