:root {
  --dr-ink: #071827;
  --dr-text: #112433;
  --dr-muted: #607789;
  --dr-blue: #0c6f9f;
  --dr-sky: #58b9e9;
  --dr-cyan-soft: #e8f6fc;
  --dr-mint: #e7f5ef;
  --dr-lavender: #f0ecfb;
  --dr-sand: #f8f0e5;
  --dr-canvas: #f6f9fc;
  --dr-surface: #ffffff;
  --dr-line: #d8e4eb;
  --dr-success: #15745a;
  --dr-warning: #99610a;
  --dr-danger: #b33b45;
  --dr-shadow: 0 18px 50px rgb(26 75 104 / 0.09);
  --bg: var(--dr-canvas);
  --surface: var(--dr-surface);
  --card: var(--dr-surface);
  --line: var(--dr-line);
  --text: var(--dr-text);
  --muted: var(--dr-muted);
  --brand: var(--dr-blue);
  --primary: var(--dr-blue);
  --primary2: var(--dr-sky);
  --nav: #164f6f;
  color-scheme: light;
}

/* Quala application composition — DigitalResource UI v2 */
.dr-quala-login{
  --quala-ink:#13233b;
  --quala-muted:#61738d;
  --quala-line:#dbe5f0;
  --quala-blue:#247cab;
  --quala-blue-strong:#17658f;
  --quala-sky:#dff3ff;
  --quala-mint:#dff7ef;
  min-height:100%;
  overflow:auto;
  padding:clamp(18px,3vw,44px);
  display:grid;
  place-items:center;
  color:var(--quala-ink);
  background:
    radial-gradient(circle at 9% 12%,rgba(116,199,236,.26),transparent 28rem),
    radial-gradient(circle at 92% 88%,rgba(128,213,185,.18),transparent 26rem),
    #f4f8fc;
}
.dr-quala-login .shell{
  width:min(1180px,100%);
  min-height:min(760px,calc(100vh - 56px));
  height:auto;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);
  gap:0;
  overflow:hidden;
  border:1px solid rgba(193,210,228,.9);
  border-radius:30px;
  background:#fff;
  box-shadow:0 28px 80px rgba(35,67,104,.14);
}
.dr-quala-login .promo,
.dr-quala-login .login{
  border:0;
  border-radius:0;
  box-shadow:none;
}
.dr-quala-login .promo{
  position:relative;
  isolation:isolate;
  padding:clamp(34px,5vw,66px);
  display:flex;
  justify-content:space-between;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,249,255,.72)),
    #edf8fd;
}
.dr-quala-login .promo::before,
.dr-quala-login .promo::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:999px;
  filter:blur(1px);
}
.dr-quala-login .promo::before{width:340px;height:340px;right:-100px;top:-90px;background:rgba(101,194,231,.2)}
.dr-quala-login .promo::after{width:290px;height:290px;left:-120px;bottom:-130px;background:rgba(105,205,178,.16)}
.dr-quala-login .promo-brand,
.dr-quala-login .login-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.dr-quala-login .brand-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(146,190,218,.5);
  border-radius:15px;
  background:#fff;
  box-shadow:0 9px 24px rgba(48,111,151,.12);
}
.dr-quala-login .promo img,
.dr-quala-login .brand-mark img{width:42px;height:42px;max-width:none;object-fit:cover;object-position:left top;margin:0}
.dr-quala-login .promo-brand span:last-child,
.dr-quala-login .login-brand span{display:grid;gap:1px}
.dr-quala-login .promo-brand strong,
.dr-quala-login .login-brand strong{font-size:17px;letter-spacing:-.02em;color:#122943}
.dr-quala-login .promo-brand small,
.dr-quala-login .login-brand small{font-size:11px;color:#71829a}
.dr-quala-login .promo-copy{max-width:590px;margin:58px 0 48px}
.dr-quala-login .badge{
  margin:0 0 19px;
  padding:8px 12px;
  border:1px solid rgba(68,157,198,.24);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#246e96;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.dr-quala-login .title{
  max-width:580px;
  margin:0;
  color:#132944;
  font-size:clamp(38px,4.3vw,62px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.dr-quala-login .desc{
  max-width:555px;
  margin:22px 0 30px;
  color:#5e728c;
  font-size:16px;
  line-height:1.65;
}
.dr-quala-login .feature-list{display:grid;gap:10px}
.dr-quala-login .feature-list>div{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(201,220,235,.8);
  border-radius:15px;
  background:rgba(255,255,255,.64);
}
.dr-quala-login .feature-list>div>span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  color:#176b96;
  background:#dff2fb;
  font-size:11px;
  font-weight:800;
}
.dr-quala-login .feature-list p,
.dr-quala-login .security-note p{display:grid;gap:2px;margin:0}
.dr-quala-login .feature-list strong{font-size:13px;color:#193652}
.dr-quala-login .feature-list small{font-size:12px;line-height:1.4;color:#708198}
.dr-quala-login .promo-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:#5f7288;
}
.dr-quala-login .promo-status i{width:9px;height:9px;border-radius:50%;background:#30a67c;box-shadow:0 0 0 6px rgba(48,166,124,.11)}
.dr-quala-login .promo-status span{display:grid;gap:1px}
.dr-quala-login .promo-status strong{font-size:12px;color:#27475d}
.dr-quala-login .promo-status small{font-size:11px}
.dr-quala-login .login{
  padding:clamp(34px,5vw,68px);
  justify-content:center;
  background:#fff;
  border-left:1px solid #e0e8f1;
}
.dr-quala-login .login-brand{margin-bottom:32px}
.dr-quala-login .login-logo{
  width:46px;
  height:46px;
  margin:0;
  padding:3px;
  border:1px solid #dbe6f0;
  border-radius:14px;
  object-fit:cover;
  object-position:left top;
  background:#fff;
}
.dr-quala-login .login-kicker{margin-bottom:10px;color:#287ca5;font-size:11px;font-weight:800;letter-spacing:.14em}
.dr-quala-login h2{text-align:left;color:#13263e;font-size:34px;line-height:1.1;letter-spacing:-.04em}
.dr-quala-login .sub{max-width:360px;margin:10px 0 29px;text-align:left;color:#687a91;font-size:14px;line-height:1.55}
.dr-quala-login label{margin:0 0 8px;color:#344b65;font-size:12px}
.dr-quala-login input{
  min-height:50px;
  margin-bottom:18px;
  padding:13px 15px;
  border:1px solid #ccd9e7;
  border-radius:13px;
  color:#152941;
  background:#f9fbfd;
  font:inherit;
}
.dr-quala-login input:hover{border-color:#9db9cd}
.dr-quala-login input:focus{border-color:#56a6cf;background:#fff;box-shadow:0 0 0 4px rgba(73,160,204,.12)}
.dr-quala-login .field input{padding-right:82px}
.dr-quala-login .toggle{right:14px;top:25px;color:#25759f;font-size:11px}
.dr-quala-login .login-context{display:grid;grid-template-columns:1fr;gap:0}
.dr-quala-login select{
  width:100%;
  min-height:50px;
  margin-bottom:18px;
  padding:0 40px 0 14px;
  border:1px solid #c7d6e2;
  border-radius:11px;
  background:#f8fbfd;
  color:#13263e;
  font:inherit;
  font-size:13px;
}
.dr-quala-login select:hover{border-color:#9db9cd}
.dr-quala-login select:focus{outline:0;border-color:#56a6cf;background:#fff;box-shadow:0 0 0 4px rgba(73,160,204,.12)}
.dr-quala-login .context-help{display:block;margin:-10px 0 17px;color:#73849a;font-size:10px;line-height:1.35}
.dr-quala-login .cta{
  min-height:52px;
  margin-top:4px;
  padding:13px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:13px;
  background:linear-gradient(120deg,#176c98,#2496c3);
  box-shadow:0 12px 24px rgba(28,122,164,.22);
}
.dr-quala-login .cta:hover{transform:translateY(-1px);box-shadow:0 15px 29px rgba(28,122,164,.27)}
.dr-quala-login .cta b{font-size:20px;font-weight:500}
.dr-quala-login .err{min-height:0;margin:-14px 0 18px;padding:10px 12px;border:1px solid #ffd1d6;border-radius:10px;background:#fff5f6;text-align:left}
.dr-quala-login .err:empty{display:none}
.dr-quala-login .security-note{
  margin-top:24px;
  padding:12px 13px;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:center;
  border-radius:13px;
  background:#f1faf7;
  color:#24785d;
}
.dr-quala-login .security-note>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#d9f3e9;font-size:12px;font-weight:800}
.dr-quala-login .security-note strong{font-size:11px;color:#27654f}
.dr-quala-login .security-note small{font-size:10px;color:#66877c}
.dr-quala-login .foot{margin-top:22px;color:#8694a5;font-size:10px}

.dr-quala-app{--brand:#247ca8;--brand2:#72c8e9;background:#f3f7fb;color:#172b45}
.dr-quala-app .product-name{display:grid;gap:1px;min-width:0}
.dr-quala-app .product-name strong{font-size:18px;color:#15324f}
.dr-quala-app .product-name small{font-size:10px;color:#7a8ca2}
.dr-quala-app .panel{border-color:#dce5ee;background:#fff;box-shadow:0 10px 32px rgba(31,65,101,.07)}
.dr-quala-app .card,.dr-quala-app .card-form,.dr-quala-app .cfg-card{border-color:#dde6ef;background:#fbfcfe;box-shadow:none}
.dr-quala-app input,.dr-quala-app select,.dr-quala-app textarea{border-color:#ccd8e5;border-radius:10px;background:#fff}
.dr-quala-app input:focus,.dr-quala-app select:focus,.dr-quala-app textarea:focus{border-color:#5ba6cc;box-shadow:0 0 0 3px rgba(73,160,204,.12)}
.dr-quala-app .btn,.dr-quala-app button.save{background:linear-gradient(120deg,#176c98,#2496c3);box-shadow:0 7px 16px rgba(28,122,164,.16)}
.dr-quala-app .table th{background:#f1f6fa;color:#536980}
.dr-quala-app .table tbody tr:hover{background:#f6fafc}
@media(min-width:981px){
  .dr-quala-app.admin-layout .top{
    width:276px;
    padding:18px 14px;
    gap:15px;
    border-right:1px solid #d9e3ed;
    background:linear-gradient(180deg,#fbfdff 0%,#f3f8fc 62%,#eef5f8 100%);
    box-shadow:8px 0 28px rgba(31,65,101,.06);
  }
  .dr-quala-app.admin-layout .top-left{padding:8px 9px 17px;border-bottom-color:#dfe8f0}
  .dr-quala-app.admin-layout .logo{width:43px;height:43px;border-radius:13px;border-color:#d9e5ee;object-fit:cover;object-position:left top}
  .dr-quala-app.admin-layout .menu{gap:4px}
  .dr-quala-app.admin-layout .menu a{padding:11px 12px 11px 16px;border-radius:10px;color:#405970;font-size:13px;font-weight:650}
  .dr-quala-app.admin-layout .menu a:hover{border-color:#d4e4ee;background:#edf6fa;color:#1d5e7d}
  .dr-quala-app.admin-layout .menu a.active{border-color:#c4e1ed;background:#def1f8;color:#155d7f;box-shadow:none}
  .dr-quala-app.admin-layout .menu a.active::before{background:#238ab5}
  .dr-quala-app.admin-layout .session{border-color:#d9e6ed;border-radius:14px;background:rgba(255,255,255,.86);box-shadow:none}
  .dr-quala-app.admin-layout .session .chip{border-color:#dce7ee;background:#f5f9fb;color:#3d5c73}
  .dr-quala-app.admin-layout .session a{background:#e7f2f7;color:#205f7c}
  .dr-quala-app.admin-layout .wrap{width:calc(100% - 276px);margin-left:276px;padding:18px}
  .dr-quala-app.admin-layout .panel{min-height:calc(100dvh - 36px);padding:20px;border-radius:18px}
}
@media(max-width:980px){
  .dr-quala-login{padding:16px}
  .dr-quala-login .shell{grid-template-columns:1fr;max-width:560px;min-height:auto}
  .dr-quala-login .promo{display:none}
  .dr-quala-login .login{min-height:calc(100vh - 32px);padding:clamp(28px,8vw,54px);border-left:0}
  .dr-quala-login .login-brand{margin-bottom:42px}
  .dr-quala-app .product-name small{display:none}
}
@media(max-width:560px){
  .dr-quala-login{display:block;padding:0;background:#fff}
  .dr-quala-login .shell{width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
  .dr-quala-login .login{min-height:100dvh;padding:28px 22px}
  .dr-quala-login h2{font-size:31px}
}

* { box-sizing: border-box; }

html { background: var(--dr-canvas); }

body {
  background:
    radial-gradient(900px 480px at 100% 0, rgb(88 185 233 / 0.12), transparent 66%),
    radial-gradient(720px 420px at 0 100%, rgb(231 245 239 / 0.9), transparent 70%),
    var(--dr-canvas);
  color: var(--dr-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }

button, .btn, [role="button"] {
  border-radius: 10px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:not(:disabled):hover, .btn:not(:disabled):hover { transform: translateY(-1px); }

button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgb(88 185 233 / 0.42);
  outline-offset: 2px;
}

.btn.primary, button.primary, .cta, [type="submit"] {
  border-color: var(--dr-blue);
  background: linear-gradient(135deg, var(--dr-blue), #178fc1);
  color: #fff;
  box-shadow: 0 8px 20px rgb(12 111 159 / 0.18);
}

.btn.primary:not(:disabled):hover, button.primary:not(:disabled):hover,
.cta:not(:disabled):hover, [type="submit"]:not(:disabled):hover {
  background: linear-gradient(135deg, #095f89, #0c7fac);
  box-shadow: 0 10px 24px rgb(12 111 159 / 0.24);
}

input, select, textarea, .field {
  border-color: #c8d8e2;
  border-radius: 10px;
  background: #fff;
  color: var(--dr-text);
}

input:hover, select:hover, textarea:hover, .field:hover { border-color: #96bdcf; }

input:focus, select:focus, textarea:focus, .field:focus-within {
  border-color: var(--dr-sky);
  box-shadow: 0 0 0 3px rgb(88 185 233 / 0.16);
}

label { color: #314d60; letter-spacing: .01em; }

.top, .appbar, header.top, .navbar, .topbar {
  border-color: var(--dr-line);
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 6px 24px rgb(7 24 39 / 0.05);
  backdrop-filter: blur(16px);
}

.side, .sidebar, aside.navigation {
  border-color: #cfe1e9;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f1f8fb 72%, #edf7f3);
  box-shadow: var(--dr-shadow);
}

.nav button, .sidebar a, .side nav a {
  border: 1px solid transparent;
  color: #35566a;
}

.nav button:hover, .sidebar a:hover, .side nav a:hover {
  border-color: #cce6f1;
  background: #edf8fc;
  color: #095f89;
}

.nav button.active, .nav .active, .sidebar .active, .side nav .active {
  border-color: #add9e9;
  background: linear-gradient(135deg, #dff4fb, #e7f5ef);
  color: #084d70;
  box-shadow: inset 3px 0 0 var(--dr-blue);
}

.main { border-color: transparent; background: transparent; }

.card, .panel, .box, .widget, .metric, .login, .promo, .modal-content {
  border-color: var(--dr-line);
  border-radius: 16px;
  background: var(--dr-surface);
  box-shadow: var(--dr-shadow);
}

.promo {
  background: linear-gradient(145deg, #eef9fd, #fff 54%, #edf8f3);
}

.login { box-shadow: 0 24px 70px rgb(29 79 108 / 0.13); }

h1, h2, h3, h4 { color: var(--dr-text); letter-spacing: -.018em; }
.muted, .sub, .help, small { color: var(--dr-muted); }

.badge, .tag, .pill, .status {
  border-radius: 999px;
  font-weight: 750;
}

.result, .alert, .notice, .flash {
  border-radius: 12px;
}

.result.ok, .alert-success, .success {
  border-color: #b8dfd1;
  background: #eaf8f2;
  color: #155f4c;
}

.result.bad, .alert-danger, .error, .err {
  border-color: #efc3c7;
  background: #fff1f2;
  color: #9e2d38;
}

.table, .table-wrap { border-radius: 13px; }

table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--dr-line);
  border-radius: 12px;
  background: #fff;
}

table th {
  background: #edf6fa;
  color: #34576b;
  font-size: .75rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

table td, table th { border-color: #e3ebf0; }
table tbody tr:hover { background: #f7fbfd; }

.progress { background: #dce8ee; }
.progress-bar { background: linear-gradient(90deg, var(--dr-blue), var(--dr-sky)); }

@media (max-width: 820px) {
  .side, .sidebar { border-radius: 14px; }
  .card, .panel, .box, .widget, .metric { border-radius: 14px; }
}

body.dark, body.dark-mode, html[data-theme="dark"] {
  --dr-text: #f4f9fc;
  --dr-muted: #b7cbd8;
  --dr-canvas: #07131f;
  --dr-surface: #0b2033;
  --dr-line: #2a4960;
  --bg: var(--dr-canvas);
  --surface: var(--dr-surface);
  --card: var(--dr-surface);
  --line: var(--dr-line);
  --text: var(--dr-text);
  --muted: var(--dr-muted);
  color-scheme: dark;
}

body.dark, body.dark-mode, html[data-theme="dark"] body {
  background: radial-gradient(850px 420px at 100% 0, rgb(30 112 151 / .22), transparent 68%), #07131f;
  color: var(--dr-text);
}

body.dark .top, body.dark-mode .top, html[data-theme="dark"] .top,
body.dark .appbar, body.dark-mode .appbar, html[data-theme="dark"] .appbar {
  background: rgb(8 29 45 / .94);
  border-color: var(--dr-line);
}

body.dark .side, body.dark-mode .side, html[data-theme="dark"] .side,
body.dark .sidebar, body.dark-mode .sidebar, html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0a2134, #10344b);
  border-color: var(--dr-line);
}

body.dark .card, body.dark-mode .card, html[data-theme="dark"] .card,
body.dark .panel, body.dark-mode .panel, html[data-theme="dark"] .panel,
body.dark .box, body.dark-mode .box, html[data-theme="dark"] .box,
body.dark .widget, body.dark-mode .widget, html[data-theme="dark"] .widget,
body.dark .metric, body.dark-mode .metric, html[data-theme="dark"] .metric,
body.dark table, body.dark-mode table, html[data-theme="dark"] table {
  background: var(--dr-surface);
  color: var(--dr-text);
  border-color: var(--dr-line);
}

body.dark input, body.dark select, body.dark textarea,
body.dark-mode input, body.dark-mode select, body.dark-mode textarea,
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0e2a40;
  color: #f4f9fc;
  border-color: #3d6078;
}

body.dark table th, body.dark-mode table th, html[data-theme="dark"] table th { background: #12354c; color: #d8e7ef; }
body.dark table tbody tr:hover, body.dark-mode table tbody tr:hover, html[data-theme="dark"] table tbody tr:hover { background: #102d43; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}