@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');

:root{
  --lgs-bg:#edf2f9;--lgs-surface:#fff;--lgs-surface-2:#f7f9fc;--lgs-text:#12203b;
  --lgs-muted:#66758d;--lgs-line:#dbe3ee;--lgs-navy:#0b1730;--lgs-blue:#3276d8;
  --lgs-blue-dark:#15386f;--lgs-green:#238362;--lgs-amber:#b87519;--lgs-red:#bc4654;
  --lgs-shadow:0 22px 60px rgba(25,52,91,.08);--lgs-radius:18px;
  --bg:var(--lgs-bg);--paper:var(--lgs-bg);--panel:var(--lgs-surface);--surface:var(--lgs-surface);
  --white:var(--lgs-surface);--ink:var(--lgs-text);--text:var(--lgs-text);--muted:var(--lgs-muted);
  --line:var(--lgs-line);--navy:var(--lgs-navy);--blue:var(--lgs-blue);--blue2:#4b87df;
  font-family:"Noto Sans Thai",Inter,"Leelawadee UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--lgs-bg)}
body{font-family:"Noto Sans Thai",Inter,"Leelawadee UI",system-ui,sans-serif!important;color:var(--lgs-text);background:radial-gradient(circle at 86% 0,rgba(82,145,231,.14),transparent 31rem),var(--lgs-bg)}
button,input,select,textarea{font-family:inherit}
a,button{-webkit-tap-highlight-color:transparent}

.sidebar,.auth-screen,.login-screen,.login-shell,.landing-body{
  background:radial-gradient(circle at 90% 0,rgba(67,128,221,.34),transparent 28rem),linear-gradient(145deg,var(--lgs-navy),#102950)!important;
}
.brand-mark,.brand-logo,.login-mark,.app-icon{
  background:linear-gradient(145deg,var(--lgs-blue),var(--lgs-blue-dark))!important;color:#fff!important;
  border-radius:14px!important;box-shadow:0 12px 26px rgba(31,83,153,.22);
}
.eyebrow{color:var(--lgs-blue)!important;font-weight:900!important;letter-spacing:.16em!important}
.sidebar .eyebrow,.auth-screen .eyebrow,.login-screen>.eyebrow{color:#a9c9f8!important}

.topbar,.admin-topbar,.site-header,.workspace>header,.content>header{
  border-bottom-color:var(--lgs-line)!important;background:rgba(255,255,255,.88)!important;
  box-shadow:0 8px 28px rgba(18,42,77,.05);backdrop-filter:blur(16px);
}
.panel,.card,.login-card,.auth-card,.app-card,.hero-card,.metric,.summary-card,.team-dashboard,
.owner-portal,.layout-panel,.setup-panel,.result-column,.calculator-card,.request-card{
  border-color:var(--lgs-line)!important;border-radius:var(--lgs-radius)!important;
  background-color:var(--lgs-surface)!important;box-shadow:var(--lgs-shadow)!important;
}
.panel-head,.section-head,.card-head{border-bottom-color:var(--lgs-line)!important}

input,select,textarea{
  border:1px solid #cbd7e8!important;border-radius:11px!important;background:#fff!important;
  color:var(--lgs-text)!important;outline:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--lgs-blue)!important;box-shadow:0 0 0 3px rgba(50,118,216,.12)!important;
}
.primary,.primary-button,.login-button,.save-button,.save-claim,.submit-button,.button.primary,
button.primary,.modal-actions .primary,.install-button{
  border:0!important;border-radius:11px!important;color:#fff!important;
  background:linear-gradient(145deg,var(--lgs-blue),var(--lgs-blue-dark))!important;
  box-shadow:0 10px 24px rgba(42,96,173,.2)!important;font-weight:800!important;
}
.secondary,.ghost,.text-button,.icon-button,.month-picker,.signout{
  border-color:var(--lgs-line)!important;border-radius:10px!important;background:var(--lgs-surface)!important;color:var(--lgs-text)!important;
}
.status,.badge,.pill,.count,.count-badge{border-radius:999px!important;font-weight:800!important}
.status.approved,.status.done,.status.completed,.badge.success{background:#e1f4eb!important;color:#237657!important}
.status.pending,.status.waiting,.badge.warning{background:#fff2dc!important;color:#946014!important}
.status.rejected,.badge.danger{background:#fde8ea!important;color:#a33d49!important}
table th{background:var(--lgs-surface-2)!important;color:var(--lgs-muted)!important}
table td,table th{border-color:var(--lgs-line)!important}
.modal,.dialog{border-radius:20px!important;box-shadow:0 28px 90px rgba(4,16,38,.28)!important}
.modal-backdrop,.confirm-layer{background:rgba(5,18,40,.68)!important;backdrop-filter:blur(4px)}
.toast{border-radius:13px!important;box-shadow:0 18px 45px rgba(20,35,60,.25)!important}
.back-link,.login-back,.back-hub,.hub-link{color:var(--lgs-blue)!important;font-weight:700!important}

@media(max-width:700px){
  .panel,.card,.login-card,.auth-card,.app-card,.hero-card,.metric,.summary-card{border-radius:15px!important}
  input,select,textarea{font-size:16px!important}
}