:root{--navy:#0b1736;--blue:#0b3b95;--cyan:#1d7cf2;--bg:#f4f7fb;--text:#182230;--muted:#6d7890;--border:#e4e9f2;--danger:#c83b3b;--success:#14804a;--warning:#9b6a00}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:var(--navy);color:#fff;padding:22px 16px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;gap:12px;align-items:center;margin:3px 7px 28px}.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#0e66ff,#62a7ff);display:grid;place-items:center;font-weight:900;font-size:20px}.brand strong{display:block;font-size:18px;letter-spacing:.12em}.brand span{display:block;font-size:10px;color:#8ca2c6;letter-spacing:.2em;margin-top:2px}.brand.big{margin-bottom:16px}.brand.big .brand-mark{width:48px;height:48px}nav{display:grid;gap:4px}nav a{padding:11px 12px;border-radius:10px;color:#cbd5ea;font-size:14px}nav a:hover{background:#15264d;color:#fff}.nav-label{font-size:10px;color:#6f84ac;letter-spacing:.16em;margin:17px 12px 5px}.sidebar-footer{margin-top:auto;padding:14px 10px;border-top:1px solid #213358;font-size:13px}.sidebar-footer small{display:block;color:#7790ba;margin:3px 0 9px}.sidebar-footer a{color:#9db0d3}.main{margin-left:250px;min-height:100vh;flex:1}.topbar{background:#fff;border-bottom:1px solid var(--border);padding:23px 32px;display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--blue);font-weight:800}.topbar h1{margin:3px 0 0;font-size:28px}.user-pill{padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:#f9fbff;color:var(--muted);font-size:12px}.content{padding:28px 32px}.grid{display:grid;gap:18px}.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.metric,.panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 5px 20px rgba(21,42,87,.05)}.metric{padding:20px}.metric span,.metric small{display:block;color:var(--muted)}.metric strong{display:block;font-size:29px;margin:8px 0}.metric.warning{border-color:#eed9a1;background:#fffdf6}.panel{padding:0;overflow:hidden}.panel-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.panel-head h2{font-size:16px;margin:0}.panel-head span{font-size:12px;color:var(--muted)}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:13px 16px;border-bottom:1px solid #edf0f5;text-align:left}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#7a8498;background:#fbfcfe}tr:last-child td{border-bottom:0}.empty{padding:30px!important;text-align:center;color:var(--muted)}.toolbar{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px}.toolbar form{display:flex;gap:8px;flex:1;max-width:650px}.toolbar input{flex:1}.btn{display:inline-flex;justify-content:center;align-items:center;padding:10px 15px;border:1px solid var(--border);background:#fff;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:#082f79}.text-link{color:var(--blue);font-weight:700}.form-panel{padding:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#43516a}.form-grid input,.form-grid select,.toolbar input{padding:11px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;background:#fff;color:var(--text)}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.stock-note{grid-column:1/-1;padding:12px 13px;background:#f5f8ff;border:1px solid #dce7fb;border-radius:10px;font-size:12px;color:#4e648a}.alert{padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:13px}.alert.error{background:#fff1f1;color:#a02e2e;border:1px solid #f0caca}.alert.success{background:#eefaf4;color:#136c40;border:1px solid #c7e9d6}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tag{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px}.tag.in{background:#e8f8f0;color:#137543}.tag.out{background:#fff0f0;color:#a02d2d}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#e8efff,transparent 35%),radial-gradient(circle at 80% 90%,#dfe8ff,transparent 30%),#f3f6fb}.login-card{width:min(420px,92vw);background:#fff;padding:34px;border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px rgba(19,45,95,.12)}.login-card form{display:grid;gap:14px}.login-card label{font-size:12px;font-weight:700;color:#43516a;display:grid;gap:7px}.login-card input{padding:12px;border:1px solid var(--border);border-radius:10px}.muted{color:var(--muted);font-size:13px}@media(max-width:1100px){.cards-4{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}@media(max-width:800px){.sidebar{position:static;width:100%;min-height:auto}.app-shell{display:block}.main{margin-left:0}.sidebar nav{grid-template-columns:repeat(2,1fr)}.content,.topbar{padding:20px}.form-grid{grid-template-columns:1fr}}


/* responsive-professional-v1 */
.mobile-menu-button{display:none}
img,svg{max-width:100%;height:auto}
input,select,button{max-width:100%}

@media(max-width:1000px){
  .content{padding:22px}
  .topbar{padding:20px 22px}
  .panel-head{gap:12px;flex-wrap:wrap}
  table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
  .toolbar{align-items:stretch;flex-wrap:wrap}
  .toolbar form{width:100%;max-width:none;flex-wrap:wrap}
}

/* tikei-brand-v1 */
.brand-logo{width:62px;height:46px;object-fit:contain;border-radius:8px;background:#fff;padding:3px;flex:0 0 auto}
.brand.big .brand-logo{width:104px;height:75px}
.logout-form{margin:0}
.logout-button{border:0;padding:0;background:transparent;color:#9db0d3;font:inherit;cursor:pointer}
.logout-button:hover{color:#fff;text-decoration:underline}

@media(max-width:800px){
  .brand-logo{width:50px;height:38px}
}

@media(max-width:800px){
  .app-shell{display:block}
  .sidebar{position:sticky;inset:auto;top:0;z-index:1000;width:100%;min-height:auto;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;box-shadow:0 4px 14px rgba(4,15,41,.18)}
  .brand{margin:0;min-width:0}
  .brand-mark{width:36px;height:36px}
  .mobile-menu-button{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #35466c;border-radius:10px;background:#15264d;color:#fff;font:inherit;font-weight:700;cursor:pointer}
  .sidebar nav{display:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #213358}
  .sidebar.menu-open nav{display:grid}
  .sidebar-footer{display:none;grid-column:1/-1;margin-top:12px}
  .sidebar.menu-open .sidebar-footer{display:block}
  .main{margin-left:0;min-width:0}
  .topbar{padding:16px 18px;gap:12px;align-items:center}
  .topbar h1{font-size:23px;line-height:1.2}
  .content{padding:18px}
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid>*{min-width:0}
  .form-grid input,.form-grid select{width:100%;min-width:0}
  .panel>form[method="get"]{align-items:stretch!important}
  .panel>form[method="get"] label{flex:1 1 180px}
}

@media(max-width:520px){
  .sidebar{padding:10px 12px}
  .sidebar nav{grid-template-columns:1fr}
  .brand strong{font-size:16px}
  .brand span{font-size:9px}
  .content{padding:12px}
  .topbar{padding:14px 12px;align-items:flex-start}
  .topbar h1{font-size:20px}
  .user-pill{padding:6px 9px}
  .cards-4{grid-template-columns:1fr}
  .metric{padding:16px}
  .metric strong{font-size:25px}
  .panel,.metric{border-radius:12px}
  .panel-head{padding:15px}
  .form-panel{padding:14px}
  .toolbar{flex-direction:column}
  .toolbar form{flex-direction:column}
  .toolbar .btn,.toolbar form .btn{width:100%}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
  .panel>form[method="get"]{display:grid!important;grid-template-columns:1fr!important}
  .panel>form[method="get"] label,.panel>form[method="get"] button{width:100%}
  th,td{padding:11px 12px}
  .login-card{padding:24px 18px}
}

/* tikei-login-v2 */
.login-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  padding:32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 12%,rgba(29,124,242,.13),transparent 32%),
    radial-gradient(circle at 92% 88%,rgba(67,182,73,.12),transparent 30%),
    linear-gradient(135deg,#f8faff 0%,#eef4ff 100%);
}
.login-page::before,.login-page::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  border-radius:50%;
  filter:blur(1px);
}
.login-page::before{top:-150px;right:8%;background:rgba(248,197,28,.14)}
.login-page::after{bottom:-170px;left:7%;background:rgba(20,141,213,.11)}
.login-shell{
  display:grid;
  grid-template-columns:minmax(290px,.88fr) minmax(390px,1.12fr);
  width:min(920px,100%);
  min-height:580px;
  overflow:hidden;
  border:1px solid rgba(190,202,222,.72);
  border-radius:28px;
  background:#fff;
  box-shadow:0 32px 80px rgba(10,24,56,.16);
}
.login-brand-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:44px 40px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 110% -5%,rgba(29,124,242,.55),transparent 42%),
    linear-gradient(150deg,#0b1736 0%,#102a56 100%);
}
.login-brand-panel::after{
  content:"";
  position:absolute;
  right:-94px;
  bottom:-108px;
  width:270px;
  height:270px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 84px rgba(255,255,255,.025);
}
.login-brand-lockup{position:relative;z-index:1;display:flex;align-items:center;gap:15px}
.login-brand-logo{width:82px;height:64px;padding:5px;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.login-brand-lockup strong{display:block;font-size:25px;line-height:1;letter-spacing:.13em}
.login-brand-lockup span{display:block;margin-top:7px;color:#a9bee3;font-size:11px;font-weight:700;letter-spacing:.24em}
.login-brand-message{position:relative;z-index:1;margin:auto 0}
.login-eyebrow{display:block;color:#1d7cf2;font-size:11px;font-weight:900;letter-spacing:.18em}
.login-brand-message .login-eyebrow{color:#f8c51c}
.login-brand-message h2{margin:14px 0 16px;font-size:38px;line-height:1.08;letter-spacing:-.035em}
.login-brand-message p{max-width:290px;margin:0;color:#cad7ed;font-size:15px;line-height:1.65}
.login-brand-status{position:relative;z-index:1;display:flex;align-items:center;gap:9px;color:#cbd8ed;font-size:12px;font-weight:650}
.login-brand-status span{width:9px;height:9px;border-radius:50%;background:#43b649;box-shadow:0 0 0 5px rgba(67,182,73,.15)}
.login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:58px 64px}
.login-form-heading{margin-bottom:28px}
.login-form-heading h1{margin:9px 0 10px;color:var(--navy);font-size:36px;line-height:1.12;letter-spacing:-.035em}
.login-form-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.login-alerts{margin:-10px 0 20px}
.login-alerts .alert{margin:0}
.login-form{display:grid;gap:10px}
.login-form>label{margin-top:6px;color:#34425d;font-size:13px;font-weight:800}
.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-wrap input{
  width:100%;
  height:52px;
  padding:0 16px 0 46px;
  border:1px solid #d9e1ed;
  border-radius:12px;
  outline:none;
  background:#fbfcff;
  color:var(--text);
  font:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-input-wrap input::placeholder{color:#99a4b7}
.login-input-wrap input:hover{border-color:#b8c5d9}
.login-input-wrap input:focus{border-color:#1d7cf2;background:#fff;box-shadow:0 0 0 4px rgba(29,124,242,.12)}
.login-input-icon{position:absolute;left:16px;width:20px;height:20px;fill:none;stroke:#73809a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.login-password-wrap input{padding-right:112px}
.password-toggle{
  position:absolute;
  right:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:6px 9px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#52627d;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.password-toggle:hover{background:#edf4ff;color:var(--blue)}
.password-toggle:focus-visible{outline:2px solid #1d7cf2;outline-offset:1px}
.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-submit{width:100%;min-height:52px;margin-top:12px;gap:12px;border-radius:12px;font-size:14px;box-shadow:0 10px 24px rgba(11,59,149,.2);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(11,59,149,.25)}
.login-submit span{font-size:19px;line-height:1}
.login-help{margin:24px 0 0;color:#7c879b;font-size:12px;line-height:1.5;text-align:center}

@media(max-width:760px){
  .login-page{padding:20px}
  .login-shell{grid-template-columns:1fr;width:min(500px,100%);min-height:0}
  .login-brand-panel{padding:26px 28px}
  .login-brand-message{margin:34px 0 24px}
  .login-brand-message h2{font-size:29px}
  .login-brand-message p{display:none}
  .login-brand-status{display:none}
  .login-form-panel{padding:38px 34px 40px}
}

@media(max-width:440px){
  .login-page{padding:12px;align-items:start}
  .login-shell{border-radius:20px}
  .login-brand-panel{padding:22px}
  .login-brand-logo{width:66px;height:52px}
  .login-brand-lockup strong{font-size:21px}
  .login-brand-message{margin:26px 0 4px}
  .login-brand-message h2{margin-bottom:4px;font-size:25px}
  .login-form-panel{padding:30px 22px 32px}
  .login-form-heading h1{font-size:31px}
  .password-toggle-text{display:none}
  .login-password-wrap input{padding-right:58px}
  .password-toggle{right:9px;padding:8px}
}

/* tikei-login-v3-fix */
.password-toggle svg[hidden]{display:none!important}

.login-brand-panel{
  justify-content:center;
  align-items:center;
  text-align:center;
}

.login-brand-lockup{
  flex-direction:column;
  gap:20px;
}

.login-brand-logo{
  width:152px;
  height:116px;
  padding:7px;
  border-radius:20px;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}

.login-brand-lockup strong{font-size:31px}
.login-brand-lockup span{margin-top:9px;font-size:12px}

.login-brand-status{
  position:absolute;
  bottom:44px;
  left:40px;
}

@media(max-width:760px){
  .login-brand-panel{
    min-height:180px;
    align-items:flex-start;
    text-align:left;
  }

  .login-brand-lockup{
    flex-direction:row;
    gap:15px;
  }

  .login-brand-logo{
    width:82px;
    height:64px;
    padding:5px;
    border-radius:14px;
  }

  .login-brand-lockup strong{font-size:25px}
  .login-brand-lockup span{margin-top:7px;font-size:11px}
}
