:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#17202a;
  background:#eef2f5;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eef2f5}
body{min-height:100vh}
a{color:#175ea8}
.tl-login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at top left,rgba(29,111,163,.18),transparent 34rem),
    linear-gradient(145deg,#eaf1f6,#f7f9fb);
}
.tl-login-card{
  width:min(100%,430px);
  padding:36px;
  border:1px solid rgba(23,32,42,.1);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(30,54,72,.16);
}
.tl-brand-mark{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:#133f5f;
  color:#fff;
  font-size:28px;
  font-weight:800;
}
.tl-eyebrow{
  margin:24px 0 6px;
  color:#667786;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
}
.tl-login-card h1{margin:0;font-size:30px;line-height:1.15}
.tl-login-intro{margin:10px 0 24px;color:#617180}
.tl-login-form{display:grid;gap:17px}
.tl-login-form label>span{display:block;margin-bottom:7px;font-size:14px;font-weight:700}
.tl-login-form input[type=text],
.tl-login-form input[type=password]{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid #b7c3cc;
  border-radius:9px;
  background:#fff;
  font-size:16px;
}
.tl-login-form input:focus{outline:3px solid rgba(29,111,163,.18);border-color:#1d6fa3}
.tl-login-options{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px}
.tl-small-checkbox{display:inline-flex!important;align-items:center;gap:7px;font-weight:500!important}
.tl-small-checkbox input{width:16px;height:16px;margin:0}
.tl-login-form button,
.tl-primary-link{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:0 20px;
  border:0;
  border-radius:9px;
  background:#133f5f;
  color:#fff;
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.tl-login-error{margin-bottom:18px;padding:12px 14px;border-radius:8px;background:#fce8e8;color:#8f1d1d}
.tl-app-shell{height:100vh;display:grid;grid-template-rows:68px 1fr;overflow:hidden}
.tl-app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  background:#133f5f;
  color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.16);
}
.tl-app-brand{display:flex;align-items:center;gap:12px}
.tl-brand-small{width:38px;height:38px;border-radius:10px;background:#fff;color:#133f5f;font-size:20px}
.tl-app-brand strong,.tl-app-brand small{display:block}
.tl-app-brand small{margin-top:2px;color:#c9d8e2;font-size:12px}
.tl-app-user{display:flex;align-items:center;gap:14px;font-size:14px}
.tl-app-user a{color:#fff;font-weight:700}
.tl-app-frame-wrap{min-height:0}
#touksiladu-app-frame{display:block;width:100%;height:100%;border:0;background:#f4f6f8}
@media(max-width:640px){
  .tl-login-card{padding:26px 22px}
  .tl-login-options{align-items:flex-start;flex-direction:column}
  .tl-app-header{height:auto;padding:10px 14px}
  .tl-app-brand small,.tl-app-user span{display:none}
}

/* 0.5.2 persistent sidebar */
.tl-app-shell{
  height:100vh;
  display:grid;
  grid-template-rows:68px 1fr;
  overflow:hidden;
}
.tl-app-body{
  min-height:0;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
}
.tl-app-sidebar{
  min-height:0;
  overflow-y:auto;
  background:#0f334d;
  border-top:1px solid rgba(255,255,255,.08);
}
.tl-app-sidebar nav{
  display:grid;
  gap:4px;
  padding:14px 10px 22px;
}
.tl-app-sidebar a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:0 12px;
  border-radius:8px;
  color:#dce8ef;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}
.tl-app-sidebar a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.tl-app-sidebar a.is-active{
  background:#fff;
  color:#133f5f;
  box-shadow:0 5px 18px rgba(0,0,0,.14);
}
.tl-nav-icon{
  display:inline-grid;
  place-items:center;
  width:24px;
  min-width:24px;
  font-size:17px;
}
.tl-sidebar-toggle{
  display:none;
  width:38px;
  height:38px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.tl-app-frame-wrap{
  min-width:0;
  min-height:0;
}
@media(max-width:900px){
  .tl-app-shell{grid-template-rows:60px 1fr}
  .tl-app-body{display:block;position:relative}
  .tl-sidebar-toggle{display:inline-grid;place-items:center}
  .tl-app-sidebar{
    position:absolute;
    z-index:20;
    top:0;
    bottom:0;
    left:0;
    width:min(82vw,280px);
    transform:translateX(-102%);
    transition:transform .2s ease;
    box-shadow:12px 0 30px rgba(0,0,0,.22);
  }
  .tl-app-sidebar.is-open{transform:translateX(0)}
  .tl-app-header{padding:0 12px}
}

/* 0.5.4 mobile full-screen fix */
html,body{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.tl-app-shell{
  width:100%;
  max-width:100vw;
  height:100vh;
  height:100dvh;
}
.tl-app-body,
.tl-app-frame-wrap{
  width:100%;
  max-width:100%;
  height:100%;
  overflow:hidden;
}
#touksiladu-app-frame{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:0;
}
@media(max-width:900px){
  .tl-app-body{
    height:100%;
    width:100vw;
    max-width:100vw;
  }
  .tl-app-frame-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  #touksiladu-app-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
}
@supports(height:100dvh){
  .tl-app-shell{height:100dvh}
}