:root {
  --brand:linear-gradient(113deg,#ed7909 0%,#cb5716 52%,#8b3420 100%);
  --brand-soft:linear-gradient(125deg,#fff9f4,#fffdfb);
  --orange:#d96316;
  --orange-dark:#a9471f;
  --brown:#652d23;
  --ink:#26252d;
  --ink2:#423b3d;
  --muted:#7e808d;
  --quiet:#9da0aa;
  --line:#e9e9ed;
  --line2:#f0f0f2;
  --page:#fbfbfc;
  --white:#fff;
  --green:#248462;
  --red:#b64547;
  --amber:#ad781d;
  --blue:#4d72a0;
  --shadow:0 12px 36px rgba(39,30,29,.042);
  --shadow2:0 19px 60px rgba(65,37,30,.075);
  --radius:16px
}
* {
  box-sizing:border-box
}
html {
  min-height:100%;
  scroll-behavior:smooth
}
body {
  margin:0;
  min-height:100vh;
  background:var(--page);
  font-family:"Avenir Next","Inter","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.47;
  cursor:not-allowed
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #ffd5ac;
  outline-offset:2px
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  display:inline-block;
  flex-shrink:0
}
h1,h2,h3,h4,p {
  margin-top:0
}
h1 {
  letter-spacing:-.9px
}
h2 {
  letter-spacing:-.35px
}
small {
  font-size:11px
}
input[type="checkbox"] {
  accent-color:#cc5b17
}
::selection {
  background:#fbdac3
}
::-webkit-scrollbar {
  width:9px;
  height:9px
}
::-webkit-scrollbar-thumb {
  background:#d8d8de;
  border:2px solid #fff;
  border-radius:14px
}
::-webkit-scrollbar-track {
  background:#fff
}
#app {
  min-height:100vh
}
.hidden {
  display:none!important
}
.muted {
  color:var(--muted)
}
.tiny {
  font-size:10px;
  color:var(--quiet)
}
.upper {
  font-size:10px;
  letter-spacing:1.15px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--orange)
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.45px;
  font-weight:850;
  color:#b95625;
  text-transform:uppercase
}
.brandInk {
  background:var(--brand);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}
.noWrap {
  white-space:nowrap
}
.textRight {
  text-align:right
}
.flex {
  display:flex
}
.alignCenter {
  align-items:center
}
.grow {
  flex:1
}
.gap8 {
  gap:8px
}
.gap12 {
  gap:12px
}
.pushRight {
  margin-left:auto
}
.subtle {
  color:#a2a0a2
}
.w100 {
  width:100%
}
.stack {
  display:flex;
  flex-direction:column;
  gap:12px
}
.divider {
  height:1px;
  background:var(--line2);
  margin:18px 0
}
.sep {
  width:1px;
  background:#ebeaee;
  align-self:stretch
}
.linktext {
  color:#b24c21;
  font-weight:800;
  text-decoration:underline;
  text-decoration-color:#eed4c2;
  text-underline-offset:3px;
  background:none;
  border:none;
  padding:4px
}
.surface {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.pad {
  padding:20px
}
.badge {
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:5px 9px;
  border-radius:30px;
  font-size:10px;
  font-weight:780;
  white-space:nowrap;
  background:#f4f4f6;
  color:#6b707b
}
.badge.green {
  background:#edf9f2;
  color:#217859
}
.badge.red {
  background:#fff0ef;
  color:#b94343
}
.badge.amber {
  background:#fff7e7;
  color:#9c701e
}
.badge.orange {
  background:#fff3e9;
  color:#af4e20
}
.badge.blue {
  background:#eef5ff;
  color:#476e9f
}
.badge.neutral {
  background:#f3f4f6;
  color:#747884
}
.dot {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:100px;
  background:currentColor
}
.btn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 15px;
  border-radius:10px;
  border:1px solid #dcdce2;
  background:#ffffff;
  color:#3b3b42;
  font-size:12px;
  font-weight:790;
  white-space:nowrap;
  cursor:pointer;
  transition:box-shadow .16s,transform .16s,border-color .16s,background .16s,color .16s
}
.btn:hover:not(:disabled) {
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transform:translateY(-1px)
}
.btn.primary {
  background:var(--brand);
  border-color:#d76c1d;
  color:#ffffff !important;
  box-shadow:0 8px 20px rgba(187,74,23,.18)
}
.btn.primary:hover:not(:disabled) {
  background:#c85a18 !important;
  border-color:#b34d11 !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(181,72,19,.32) !important;
  transform:translateY(-1px)
}
.btn.soft {
  background:#fff8f2;
  color:#a64b23;
  border-color:#f1dece
}
.btn.soft:hover:not(:disabled) {
  background:#feece0 !important;
  border-color:#e5bd9c !important;
  color:#8c3b16 !important;
  box-shadow:0 4px 14px rgba(166,75,35,.12) !important;
  transform:translateY(-1px)
}
.btn.ghost {
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  color:#64748b
}
.btn.ghost:hover:not(:disabled) {
  background:#f1f5f9 !important;
  color:#0f172a !important;
  box-shadow:none !important;
  transform:none
}
.btn.danger {
  color:#b91c1c;
  background:#fef2f2;
  border-color:#fecaca
}
.btn.danger:hover:not(:disabled) {
  background:#fee2e2 !important;
  border-color:#fca5a5 !important;
  color:#991b1b !important;
  box-shadow:0 4px 12px rgba(185,28,28,.15) !important;
  transform:translateY(-1px)
}
.btn.xs {
  padding:6px 10px;
  min-height:31px;
  font-size:11px;
  border-radius:8px
}
.btn.iconOnly {
  width:40px;
  min-width:40px;
  padding:0
}
.btn.wide {
  width:100%
}
.btn svg {
  width:16px;
  height:16px
}
.btn-pill {
  border-radius:100px
}
.btn-row {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.input,.select,.textarea {
  width:100%;
  border:1px solid #e2e4e9;
  background:#fff;
  color:#2d2c32;
  border-radius:10px;
  padding:10px 12px;
  min-height:41px;
  outline:0;
  font-size:12px;
  transition:border-color .13s,box-shadow .13s
}
.input:focus,.select:focus,.textarea:focus {
  border-color:#db985f;
  box-shadow:0 0 0 3px #ffefdf
}
.textarea {
  resize:vertical;
  min-height:90px
}
.input::placeholder,.textarea::placeholder {
  color:#a0a2a9
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}
.field label {
  font-weight:760;
  font-size:11px;
  color:#595961
}
.formgrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.formgrid .span2 {
  grid-column:1/-1
}
.fieldhint {
  font-size:10px;
  color:#9699a0
}
.required {
  color:#bc5222
}
.featureCheck {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:680;
  line-height:1.55
}
.featureCheck small {
  font-weight:500;
  color:#92949d
}
.featureCheck input {
  width:17px;
  height:17px;
  margin-top:3px
}
/* Logo and global header */
.logo-img {
  object-fit:contain;
  width:165px;
  height:102px;
  display:block;
  mix-blend-mode:multiply
}
.logo-top {
  width:118px;
  height:72px
}
.logo-auth {
  width:205px;
  height:139px
}
.brandblock {
  display:flex;
  align-items:center;
  gap:2px
}
.brandlabel {
  border-left:1px solid #eee5df;
  padding:4px 0 4px 11px;
  font-weight:850;
  letter-spacing:1.35px;
  font-size:9px;
  color:#8d766b;
  line-height:1.4
}
.global-header {
  height:80px;
  padding:0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border-bottom:1px solid #f0eef0;
  position:relative;
  z-index:10
}
.global-header .right {
  display:flex;
  gap:14px;
  align-items:center
}
.userchip {
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  text-align:left;
  padding:7px 0 7px 8px
}
.userinitials {
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#f8efeb;
  border:1px solid #f2e3dc;
  color:#9f4d2f;
  font-weight:850
}
.usercopy {
  font-size:11px;
  font-weight:800;
  color:#373136;
  line-height:1.3
}
.usercopy small {
  display:block;
  color:#999299;
  font-weight:530;
  margin-top:3px
}
.notif-btn {
  position:relative
}
.notifcount {
  position:absolute;
  top:-3px;
  right:-3px;
  background:#e7720e;
  color:#fff;
  font-size:9px;
  font-weight:900;
  width:17px;
  height:17px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid #fff
}
.top-menu {
  position:absolute;
  right:24px;
  top:69px;
  width:224px;
  background:white;
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  padding:8px;
  border-radius:13px;
  z-index:50
}
.top-menu button {
  width:100%;
  text-align:left;
  border:0;
  background:white;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#4b4448;
  font-size:12px;
  border-radius:8px
}
.top-menu button:hover {
  background:#fff8f3
}
/* Login */
.login-shell {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 490px;
  background:white
}
.login-visual {
  background:linear-gradient(164deg,#fff,#fffcf9);
  position:relative;
  overflow:hidden;
  border-right:1px solid #f2ede9;
  display:flex;
  flex-direction:column;
  padding:29px 50px 46px
}
.login-visual::after {
  content:"";
  position:absolute;
  width:800px;
  height:800px;
  border-radius:50%;
  background:radial-gradient(circle,#fff5e9 0%,#fff8f300 66%);
  bottom:-390px;
  left:-210px;
  pointer-events:none
}
.login-visual::before {
  content:"";
  position:absolute;
  inset:22% -25% -8% 2%;
  opacity:.53;
  pointer-events:none;
  background:repeating-radial-gradient(ellipse 750px 240px at 50% 110%,transparent 0 18px,#fbe7d6 20px 22px,transparent 24px 48px);
  transform:rotate(-4deg)
}
.login-content {
  position:relative;
  margin:auto 0;
  z-index:1;
  max-width:670px
}
.login-kicker {
  font-weight:850;
  color:#ad5a2b;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:11px
}
.login-content h1 {
  font-size:clamp(48px,5.3vw,86px);
  letter-spacing:-3.3px;
  line-height:1.06;
  font-weight:820;
  margin:19px 0 22px;
  color:#2c2527
}
.login-content p {
  max-width:510px;
  font-size:16px;
  color:#89858a;
  line-height:1.72
}
.login-footer {
  position:relative;
  font-size:11px;
  color:#aaa0a0
}
.login-side {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:45px;
  background:#fff
}
.login-card {
  width:100%;
  max-width:365px
}
.login-card .overline {
  font-weight:840;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#bc6031;
  font-size:10px
}
.login-card h2 {
  font-size:30px;
  letter-spacing:-.75px;
  margin:12px 0 8px
}
.login-card .intro {
  font-size:13px;
  color:#898792;
  line-height:1.6;
  margin-bottom:26px
}
.login-form {
  display:flex;
  flex-direction:column;
  gap:18px
}
.login-form .input {
  height:49px
}
.login-form .btn.primary {
  height:49px;
  font-size:13px;
  margin-top:2px
}
.login-note {
  border:1px solid #f2ebe6;
  background:#fffdfa;
  color:#817c7d;
  padding:13px;
  border-radius:10px;
  font-size:11px;
  line-height:1.7;
  margin-top:22px
}
.error-msg {
  color:#b1403e;
  font-size:11px;
  font-weight:750;
  margin-top:9px
}
.auth-row {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center
}
.auth-row label {
  font-size:11px;
  color:#6d6870;
  display:flex;
  gap:7px;
  align-items:center
}
.auth-help {
  border:0;
  background:transparent;
  color:#ab5228;
  font-weight:800;
  font-size:11px
}
.password-wrap {
  position:relative
}
.password-wrap .input {
  padding-right:43px
}
.password-wrap button {
  position:absolute;
  right:6px;
  top:5px;
  border:0;
  background:transparent;
  color:#969096;
  width:38px;
  height:38px;
  display:grid;
  place-items:center
}
/* AI home */
.home-page {
  min-height:100vh;
  background:#fff;
  position:relative;
  overflow:hidden
}
.home-main {
  max-width:1530px;
  margin:auto;
  padding:32px 40px 66px;
  position:relative;
  z-index:1
}
.home-softwave {
  position:absolute;
  left:0;
  right:0;
  top:160px;
  height:450px;
  pointer-events:none;
  opacity:.65
}
.home-softwave svg {
  width:100%;
  height:100%
}
.voice-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:2;
  padding:21px 12px 12px
}
.voice-hero .greet {
  color:#9a7370;
  font-size:16px;
  font-weight:580;
  margin-bottom:8px
}
.voice-hero h1 {
  font-size:clamp(34px,3.35vw,55px);
  line-height:1.12;
  letter-spacing:-1.6px;
  margin-bottom:13px;
  font-weight:810;
  color:#2b2228
}
.voice-hero .lede {
  font-size:14px;
  color:#93888c;
  margin-bottom:24px
}
.voiceorb-shell {
  width:202px;
  height:202px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  margin:3px 0 23px
}
.voiceorb-shell::before {
  content:"";
  inset:9px;
  border:1px solid #f2dcc8;
  border-radius:50%;
  position:absolute;
  box-shadow:0 0 0 16px rgba(243,190,150,.14),0 0 0 32px rgba(251,229,212,.35)
}
.voiceorb {
  width:150px;
  height:150px;
  border:0;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 17px 44px rgba(203,85,17,.24),inset 0 0 0 1px rgba(255,255,255,.24);
  z-index:1;
  position:relative;
  transition:transform .2s
}
.voiceorb:hover {
  transform:scale(1.045)
}
.voiceorb svg {
  width:66px;
  height:66px;
  stroke-width:1.45
}
.voiceorb.listening {
  animation:voicepulse 1.7s infinite
}
.voiceorb.listening:before {
  content:"";
  position:absolute;
  inset:-16px;
  border:2px dashed #e58947;
  border-radius:50%;
  animation:spin 8s linear infinite
}
@keyframes voicepulse {
  50% {
    box-shadow:0 0 0 12px rgba(235,120,25,.12),0 17px 44px rgba(203,85,17,.2)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.voice-hero .question {
  font-size:27px;
  font-weight:850;
  letter-spacing:-.85px;
  margin:0 0 7px
}
.voice-hero .instruction {
  font-size:12px;
  color:#9b8a8c
}
.commandbar {
  width:min(700px,100%);
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #ebdbd0;
  background:#fff;
  box-shadow:0 18px 46px rgba(96,57,27,.07);
  border-radius:15px;
  padding:7px 7px 7px 17px;
  margin:22px auto 0;
  position:relative
}
.commandbar>svg {
  color:#bd6632;
  width:19px;
  height:19px
}
.commandbar input {
  height:42px;
  border:0;
  outline:none;
  min-width:0;
  flex:1;
  color:#3d3539;
  font-size:12px
}
.commandbar .btn {
  min-height:42px
}
.voice-hint {
  font-size:11px;
  color:#948a8c;
  margin:12px 0
}
.samplechips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:10px
}
.samplechips button {
  padding:8px 11px;
  border-radius:30px;
  border:1px solid #f0e6dd;
  background:white;
  color:#8a6d5e;
  font-size:10px;
  transition:background .14s
}
.samplechips button:hover {
  background:#fff6ef;
  border-color:#e9c7ad
}
.home-idle {
  min-height:calc(100vh - 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.home-idle .voice-hero {
  padding:0 10px 75px
}
.workspace-area {
  margin-top:20px
}
.workspace-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:15px;
  margin:28px 0 14px
}
.workspace-top h2 {
  font-size:23px;
  margin-bottom:5px;
  letter-spacing:-.7px
}
.workspace-top p {
  font-size:12px;
  color:#8a858d;
  margin-bottom:0
}
.workspace-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px
}
.workspace-card {
  min-height:152px;
  background:white;
  border:1px solid #efeff1;
  border-radius:16px;
  padding:19px 18px;
  position:relative;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 8px 27px rgba(38,32,30,.025)
}
.workspace-card:hover {
  border-color:#e8c9b0;
  box-shadow:0 12px 28px rgba(115,65,30,.075);
  transform:translateY(-2px)
}
.workspace-card::after {
  content:"";
  position:absolute;
  width:140px;
  height:100px;
  border-radius:80% 0 0 0;
  background:linear-gradient(130deg,rgba(255,231,206,.14),rgba(245,157,87,.35));
  bottom:-50px;
  right:-37px;
  transform:rotate(-8deg)
}
.workspace-card .icon-frame {
  width:48px;
  height:48px;
  background:#fff7f1;
  color:#d3601f;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:11px
}
.workspace-card .icon-frame svg {
  height:25px;
  width:25px
}
.workspace-card .workspace-mini {
  letter-spacing:.8px;
  color:#c96324;
  font-size:9px;
  font-weight:850;
  margin-bottom:2px
}
.workspace-card h3 {
  font-size:15px;
  letter-spacing:-.25px;
  margin:0 0 6px
}
.workspace-card p {
  font-size:11px;
  color:#96929b;
  margin:0;
  max-width:205px
}
.workspace-card .arrow {
  position:absolute;
  right:15px;
  bottom:18px;
  z-index:1;
  box-shadow:0 3px 13px #9b644024;
  background:white;
  border-radius:50%;
  height:31px;
  width:31px;
  display:grid;
  place-items:center;
  color:#ca6020
}
.workspace-card .arrow svg {
  width:16px;
  height:16px
}
.workspace-card.task-focus {
  border-color:#e8b993;
  box-shadow:0 0 0 1px #f5ddc8 inset
}
.taskbox {
  background:white;
  border:1px solid #eed8c8;
  border-radius:15px;
  padding:17px 20px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 8px 28px #603c2410;
  margin:0 0 16px
}
.taskbox-left {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.taskbox-icon {
  width:46px;
  height:46px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#fff4e9;
  color:#b85d25
}
.taskbox h3 {
  font-size:13px;
  margin:0 0 3px
}
.taskbox p {
  margin:0;
  color:#8f8585;
  font-size:11px
}
.taskbox .btn-row {
  flex-shrink:0
}
/* ERP layout */
.erp-shell {
  min-height:100vh;
  display:flex;
  background:var(--page)
}
.sidebar {
  width:242px;
  flex:0 0 242px;
  background:white;
  border-right:1px solid var(--line);
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  z-index:20;
  box-shadow:3px 0 20px rgba(34,31,31,.013)
}
.sidebar-head {
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #f0f0f2;
  padding:8px 16px;
  min-height:109px
}
.sidebar-head .logo-img {
  height:88px;
  width:155px
}
.sidebar-scroll {
  flex:1;
  overflow-y:auto;
  padding:14px 11px 20px
}
.navgroup-title {
  font-size:9px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  font-weight:800;
  color:#a4a0a4;
  padding:14px 11px 8px
}
.navbtn {
  border:1px solid transparent;
  border-radius:11px;
  background:white;
  color:#62636e;
  text-align:left;
  width:100%;
  min-height:39px;
  display:flex;
  align-items:center;
  gap:11px;
  font-size:11px;
  font-weight:750;
  padding:10px 12px;
  margin:2px 0;
  transition:background .12s,color .12s
}
.navbtn svg {
  width:17px;
  height:17px;
  color:#85828a
}
.navbtn:hover {
  background:#fff8f3;
  color:#a95029
}
.navbtn.active {
  background:var(--brand);
  border-color:#bf6229;
  color:#fff;
  box-shadow:0 7px 18px rgba(167,75,28,.12)
}
.navbtn.active svg {
  color:#fff
}
.navbtn .mini-count {
  margin-left:auto;
  background:#f0f0f2;
  color:#666;
  padding:2px 6px;
  font-size:9px;
  border-radius:100px
}
.navbtn.active .mini-count {
  background:#ffffff38;
  color:#fff
}
.sidebar-bottom {
  padding:11px;
  border-top:1px solid var(--line)
}
.side-avatar {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px;
  border-radius:10px
}
.side-avatar .userinitials {
  width:34px;
  height:34px
}
.sidebar-backdrop {
  display:none
}
.erp-body {
  flex:1;
  min-width:0
}
.erp-top {
  height:71px;
  background:white;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:8
}
.erp-top-left {
  display:flex;
  gap:12px;
  align-items:center
}
.erp-top .breadcrumb {
  color:#91939f;
  font-size:11px
}
.erp-top .breadcrumb strong {
  color:#353139
}
.erp-top .btn-row {
  gap:8px
}
.erp-main {
  max-width:1700px;
  margin:0 auto;
  padding:29px 31px 65px
}
.pagehead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.pagehead h1 {
  font-size:26px;
  font-weight:840;
  margin-bottom:6px
}
.pagehead p {
  font-size:12px;
  color:#888a95;
  margin-bottom:0
}
.pagehead .btn-row {
  justify-content:flex-end
}
.statgrid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:17px
}
.statcard {
  padding:18px 18px 17px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  min-height:108px;
  display:flex;
  gap:13px;
  align-items:flex-start;
  box-shadow:var(--shadow)
}
.statcard .icobg {
  height:45px;
  width:45px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#fff6ee;
  color:#d26320
}
.statcard .icobg svg {
  width:23px;
  height:23px
}
.statcard .value {
  font-size:27px;
  letter-spacing:-1px;
  font-weight:840;
  line-height:1.1;
  margin-top:7px
}
.statcard .label {
  font-size:11px;
  color:#858795;
  font-weight:700
}
.statcard .sub {
  font-size:10px;
  color:#a6a5aa;
  margin-top:5px
}
.panel {
  border-radius:15px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  min-width:0
}
.panel.pad {
  padding:18px 20px
}
.panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:13px
}
.panel-header h2 {
  font-size:15px;
  font-weight:820;
  margin:0
}
.panel-header p {
  margin:3px 0 0;
  color:#9c9ba2;
  font-size:11px
}
.grid-2 {
  display:grid;
  grid-template-columns:1.43fr 1fr;
  gap:16px
}
.grid-2.equal {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.mini-action {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 0;
  border-bottom:1px solid #f2f0f0
}
.mini-action:last-child {
  border-bottom:0
}
.mini-action .icon-frame {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff6f0;
  color:#c75b22
}
.mini-action .label {
  font-size:12px;
  font-weight:750
}
.mini-action .desc {
  font-size:10px;
  color:#9c98a0;
  margin-top:2px
}
.kpi-line {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #f0f0f2;
  padding:11px 0;
  font-size:12px
}
.kpi-line:last-child {
  border:0
}
.kpi-line span {
  color:#858490
}
.kpi-line strong {
  font-weight:820
}
.filterbar {
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:13px 15px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:14px
}
.filterbar .field {
  min-width:122px;
  flex:1
}
.filterbar .field.searchfield {
  min-width:220px;
  flex:1.8
}
.filterbar .field label {
  font-size:10px;
  color:#93929b
}
.filterbar .field .select,.filterbar .field .input {
  height:39px;
  min-height:39px
}
.tabs {
  display:flex;
  gap:5px;
  overflow-x:auto;
  border-bottom:1px solid #ededf0;
  margin:0 0 16px;
  padding-bottom:0;
  white-space:nowrap
}
.tab {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:#898894;
  font-size:11px;
  font-weight:750;
  padding:12px 15px
}
.tab.active {
  border-bottom-color:#d8671d;
  color:#a85124
}
.tab:hover {
  color:#b55924
}
.tablewrap {
  overflow-x:auto;
  max-width:100%;
  border:1px solid #ededf0;
  border-radius:10px
}
.datatable {
  width:100%;
  border-collapse:collapse;
  min-width:720px;
  background:white
}
.datatable th {
  text-align:left;
  background:#fafafb;
  color:#848995;
  font-size:10px;
  font-weight:850;
  letter-spacing:.45px;
  text-transform:uppercase;
  padding:13px 13px;
  border-bottom:1px solid #ebebef;
  white-space:nowrap
}
.datatable td {
  font-size:11px;
  color:#44444c;
  padding:13px;
  border-bottom:1px solid #f0f0f2;
  vertical-align:middle
}
.datatable tr:last-child td {
  border:0
}
.datatable tbody tr {
  transition:background .13s
}
.datatable tbody tr:hover {
  background:#fffdfa
}
.datatable .rowName {
  font-size:11px;
  font-weight:820;
  color:#323139
}
.datatable .rowSub {
  font-size:10px;
  color:#9996a0;
  margin-top:3px
}
.datatable tr.highlighted {
  background:#fff8f2
}
.tableFoot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 2px 2px;
  color:#9a97a0;
  font-size:10px;
  gap:10px
}
.pagination {
  display:flex;
  gap:5px
}
.pagination button {
  border:1px solid #e6e6ea;
  background:white;
  border-radius:6px;
  min-width:28px;
  min-height:28px;
  color:#7c7984;
  font-size:10px
}
.pagination button.active {
  background:var(--brand);
  color:white;
  border-color:#b25c23
}
.empty-table {
  padding:25px;
  color:#92919c;
  text-align:center;
  font-size:12px
}
.row-actions {
  display:flex;
  gap:6px;
  align-items:center
}
.row-actions .btn {
  min-height:31px
}
.infoBox {
  border:1px solid #eaeaec;
  background:#fdfdfd;
  border-radius:12px;
  padding:12px 14px;
  font-size:11px;
  color:#73737b;
  line-height:1.7
}
.infoBox.warn {
  border-color:#f1dbc8;
  background:#fffaf6;
  color:#9c613a
}
.infoBox.success {
  border-color:#d2ebde;
  background:#fbfefa;
  color:#317854
}
.recordHero {
  display:flex;
  align-items:center;
  gap:17px;
  padding-bottom:17px;
  border-bottom:1px solid #f0f0f0
}
.avatarLarge {
  width:68px;
  height:68px;
  border-radius:18px;
  background:#fff0e3;
  color:#b65b26;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:800
}
.recordHero h3 {
  font-size:20px;
  margin:0 0 5px
}
.recordMeta {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.detailgrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.detailgrid .item {
  padding:12px;
  border:1px solid #f0f0f2;
  border-radius:10px
}
.detailgrid .item .k {
  font-size:10px;
  color:#9996a0
}
.detailgrid .item .v {
  font-size:12px;
  font-weight:800;
  color:#3c3942;
  margin-top:3px
}
.processline {
  display:flex;
  align-items:center;
  gap:5px;
  justify-content:space-between;
  margin:18px 0
}
.process-step {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  font-weight:780;
  color:#9d9ba3
}
.process-step .bubble {
  width:23px;
  height:23px;
  border-radius:50%;
  background:#f1f1f2;
  display:grid;
  place-items:center;
  color:#9a9699
}
.process-step.done .bubble {
  background:#eff8f2;
  color:#2b865e
}
.process-step.now .bubble {
  background:#fff1e6;
  color:#c46722;
  border:1px solid #f0c7aa
}
.processline .bar {
  width:20px;
  height:2px;
  background:#e8e7e9
}
.readonly {
  font-size:11px;
  color:#858793
}
/* Settings */
.settings-layout {
  display:grid;
  grid-template-columns:218px minmax(0,1fr);
  gap:17px
}
.settings-nav {
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-self:start
}
.settings-nav button {
  border:0;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  background:white;
  text-align:left;
  border-radius:9px;
  color:#75717a;
  font-size:12px;
  font-weight:780
}
.settings-nav button.active {
  background:#fff3eb;
  color:#9b491f
}
.settings-nav button svg {
  width:17px;
  height:17px
}
.settingsection {
  padding:21px 22px
}
.settingsection h2 {
  font-size:17px;
  margin:0 0 6px
}
.settingsection>.desc {
  font-size:11px;
  color:#8d8e96;
  margin-bottom:21px
}
.toggleRow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 0;
  border-bottom:1px solid #f0f0f2
}
.toggleRow:last-child {
  border:0
}
.toggleRow .tt {
  font-weight:760;
  font-size:12px
}
.toggleRow .dd {
  font-size:11px;
  color:#96939d;
  margin-top:3px
}
.switch {
  appearance:none;
  width:39px;
  height:23px;
  border-radius:30px;
  background:#d7d8dd;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s
}
.switch:after {
  content:"";
  position:absolute;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
  top:3px;
  left:3px;
  transition:transform .2s;
  box-shadow:0 2px 5px #0002
}
.switch:checked {
  background:#d7681e
}
.switch:checked:after {
  transform:translateX(16px)
}
.permrow {
  display:grid;
  grid-template-columns:1.1fr repeat(4,.5fr);
  gap:4px;
  align-items:center;
  border-bottom:1px solid var(--line2);
  padding:11px 8px;
  font-size:11px
}
.permrow.header {
  font-size:10px;
  color:#9d9ba1;
  font-weight:780
}
.permrow:last-child {
  border:0
}
.permrow b {
  font-size:11px
}
.permrow span {
  text-align:center
}
.pillControl {
  display:inline-flex;
  gap:4px;
  padding:4px;
  background:#f7f6f6;
  border-radius:11px
}
.pillControl button {
  border:0;
  background:transparent;
  padding:7px 12px;
  font-size:11px;
  color:#777582;
  font-weight:750;
  border-radius:8px
}
.pillControl button.active {
  background:white;
  color:#b75b27;
  box-shadow:0 2px 9px #28232110
}
/* Portal preview */
.preview-banner {
  padding:13px 17px;
  background:#fff9f5;
  border:1px solid #f3e3d4;
  color:#926444;
  font-size:11px;
  border-radius:12px;
  margin-bottom:16px;
  display:flex;
  gap:9px;
  align-items:center
}
.portal-shell {
  min-height:100vh;
  background:#fff
}
.portal-content {
  padding:26px 30px 70px;
  max-width:1620px;
  margin:auto
}
.portal-hero {
  display:flex;
  align-items:center;
  gap:22px;
  padding:22px 24px;
  margin-bottom:20px;
  background:white;
  border:1px solid var(--line);
  border-radius:15px
}
.portal-avatar {
  height:88px;
  width:88px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:#fff4e8;
  color:#b65525;
  font-size:30px;
  font-weight:900
}
.portal-hero h1 {
  font-size:26px;
  margin:0 0 6px
}
.portal-hero p {
  font-size:12px;
  color:#95919a;
  margin:0
}
.portal-tabs {
  display:flex;
  gap:6px;
  margin-bottom:19px;
  border-bottom:1px solid var(--line);
  padding-bottom:7px;
  overflow:auto
}
.portal-tab {
  border:1px solid transparent;
  background:#fff;
  color:#777887;
  padding:10px 13px;
  border-radius:10px;
  font-size:11px;
  font-weight:820;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}
.portal-tab svg {
  height:17px;
  width:17px
}
.portal-tab.active {
  color:#fff;
  background:var(--brand);
  box-shadow:0 5px 15px #bf5a211d
}
.portal-tab:hover:not(.active) {
  background:#fff9f6
}
.gradeRing {
  width:114px;
  height:114px;
  border-radius:50%;
  background:conic-gradient(#de6b18 0 88%,#f3ece8 88% 100%);
  display:grid;
  place-items:center;
  flex-shrink:0
}
.gradeRing>div {
  width:87px;
  height:87px;
  background:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.gradeRing strong {
  font-size:23px;
  line-height:1.2
}
.gradeRing span {
  font-size:10px;
  color:#959099
}
.progressTrack {
  width:100%;
  height:8px;
  border-radius:90px;
  background:#f0f0f2;
  overflow:hidden
}
.progressTrack>div {
  height:100%;
  border-radius:90px;
  background:var(--brand)
}
/* Drawer, dialog, toast */
.dialogbackdrop {
  position:fixed;
  inset:0;
  background:rgba(25,22,24,.45);
  backdrop-filter:blur(2px);
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px
}
.dialog {
  background:#fff;
  border:1px solid #ece5e0;
  box-shadow:0 28px 90px #1a131633;
  border-radius:18px;
  width:min(600px,100%);
  max-height:min(88vh,900px);
  display:flex;
  flex-direction:column
}
.dialog.large {
  width:min(840px,100%)
}
.dialoghead {
  padding:21px 24px 17px;
  border-bottom:1px solid #ededf0;
  display:flex;
  align-items:flex-start;
  gap:8px
}
.dialoghead h2 {
  margin:0 0 5px;
  font-size:18px
}
.dialoghead p {
  margin:0;
  color:#91919a;
  font-size:11px
}
.dialoghead .btn {
  margin-left:auto
}
.dialogbody {
  overflow:auto;
  padding:21px 24px 25px
}
.dialogfooter {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:15px 24px;
  border-top:1px solid var(--line2)
}
.toast-stack {
  position:fixed;
  right:20px;
  bottom:17px;
  z-index:130;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:min(395px,calc(100vw - 40px))
}
.toast {
  border-radius:11px;
  box-shadow:0 14px 37px #28222b21;
  color:#fff;
  background:#393237;
  border:1px solid #534249;
  padding:13px 16px;
  font-size:11px;
  font-weight:740;
  display:flex;
  gap:9px;
  align-items:flex-start;
  animation:slidein .2s ease
}
.toast.success {
  background:#286750;
  border-color:#286750
}
.toast.warn {
  background:#855e35;
  border-color:#855e35
}
@keyframes slidein {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.mobilemenu {
  display:none
}
.loading-bar {
  height:3px;
  background:linear-gradient(90deg,#e48328,#e4b09c);
  border-radius:20px;
  animation:progress 1.2s ease-out
}
@keyframes progress {
  from {
    width:0
  }
  to {
    width:100%
  }
}
/* Responsive */
@media(max-width:1360px) {
  .workspace-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .statgrid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .sidebar {
    flex-basis:214px;
    width:214px
  }
  .erp-main {
    padding:23px 23px 60px
  }
  .global-header {
    padding:0 22px
  }
}
@media(max-width:1080px) {
  .workspace-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .login-shell {
    grid-template-columns:1fr 420px
  }
  .login-visual {
    padding:24px 27px
  }
  .login-content h1 {
    font-size:60px
  }
  .sidebar {
    flex-basis:195px;
    width:195px
  }
  .grid-2 {
    grid-template-columns:1fr
  }
  .erp-top {
    padding:0 17px
  }
  .erp-main {
    padding:22px 15px 44px
  }
  .settings-layout {
    grid-template-columns:170px 1fr
  }
}
@media(max-width:800px) {
  .login-shell {
    grid-template-columns:1fr
  }
  .login-visual {
    min-height:290px;
    padding:16px 25px 20px
  }
  .login-visual .brandblock .logo-auth {
    height:80px;
    width:128px
  }
  .login-content {
    margin:10px 0
  }
  .login-content h1 {
    font-size:41px;
    letter-spacing:-1.6px;
    margin:8px 0
  }
  .login-content p {
    font-size:12px;
    margin:0
  }
  .login-footer {
    display:none
  }
  .login-side {
    padding:18px 25px 45px
  }
  .login-card {
    max-width:440px
  }
  .login-card h2 {
    font-size:25px
  }
  .global-header {
    padding:0 14px;
    height:68px
  }
  .global-header .usercopy {
    display:none
  }
  .global-header .userinitials {
    height:33px;
    width:33px
  }
  .logo-top {
    height:63px;
    width:100px
  }
  .home-main {
    padding:17px 16px 43px
  }
  .voice-hero h1 {
    font-size:34px
  }
  .voice-hero .lede {
    font-size:12px
  }
  .voiceorb-shell {
    height:164px;
    width:164px
  }
  .voiceorb {
    height:120px;
    width:120px
  }
  .voiceorb svg {
    height:49px;
    width:49px
  }
  .voice-hero .question {
    font-size:22px
  }
  .home-idle {
    min-height:calc(100vh - 68px)
  }
  .home-idle .voice-hero {
    padding-bottom:25px
  }
  .home-softwave {
    top:150px;
    height:340px
  }
  .workspace-top {
    margin-top:22px
  }
  .workspace-grid {
    gap:9px
  }
  .workspace-card {
    min-height:159px;
    padding:15px
  }
  .workspace-card p {
    font-size:10px
  }
  .taskbox {
    flex-direction:column;
    align-items:stretch
  }
  .taskbox .btn-row {
    margin-left:0
  }
  .sidebar {
    position:fixed;
    left:-270px;
    top:0;
    height:100vh;
    width:244px;
    flex:0 0 244px;
    transition:left .2s;
    box-shadow:20px 0 60px #0001;
    z-index:70
  }
  .sidebar.open {
    left:0
  }
  .sidebar-backdrop.show {
    display:block;
    position:fixed;
    inset:0;
    background:#12121c66;
    z-index:65
  }
  .mobilemenu {
    display:inline-flex
  }
  .erp-top .breadcrumb {
    display:none
  }
  .erp-top .usercopy {
    display:none
  }
  .erp-top {
    height:64px
  }
  .erp-top .btn:not(.primary) {
    padding:8px
  }
  .erp-top .btn span.hideSm {
    display:none
  }
  .statgrid {
    gap:9px
  }
  .pagehead {
    align-items:flex-start
  }
  .pagehead h1 {
    font-size:23px
  }
  .settings-layout {
    grid-template-columns:1fr
  }
  .settings-nav {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow:auto;
    padding:8px;
    position:static
  }
  .settings-nav button {
    white-space:nowrap
  }
  .portal-content {
    padding:17px 13px 35px
  }
  .portal-hero {
    padding:14px
  }
  .portal-avatar {
    width:62px;
    height:62px;
    font-size:22px
  }
  .portal-hero h1 {
    font-size:20px
  }
}
@media(max-width:530px) {
  .login-content h1 {
    font-size:34px
  }
  .global-header .brandlabel {
    display:none
  }
  .global-header .right {
    gap:6px
  }
  .global-header .right>.btn {
    font-size:10px;
    min-height:35px;
    padding:8px 10px
  }
  .global-header .right>.btn svg {
    width:14px
  }
  .home-main {
    padding:10px 11px 32px
  }
  .voice-hero h1 {
    font-size:30px
  }
  .voice-hero .greet {
    font-size:12px
  }
  .voice-hero .lede {
    max-width:290px
  }
  .commandbar {
    padding-left:10px
  }
  .commandbar input {
    font-size:11px
  }
  .samplechips {
    gap:5px
  }
  .samplechips button {
    padding:7px 10px
  }
  .workspace-grid {
    grid-template-columns:1fr
  }
  .workspace-card {
    min-height:133px
  }
  .workspace-card .icon-frame {
    width:41px;
    height:41px;
    margin-bottom:5px
  }
  .workspace-card .icon-frame svg {
    width:21px;
    height:21px
  }
  .workspace-card p {
    max-width:270px
  }
  .workspace-top {
    flex-direction:column;
    align-items:stretch
  }
  .taskbox .btn-row .btn {
    flex:1
  }
  .erp-top {
    padding:0 10px
  }
  .erp-top .btn {
    min-height:36px;
    padding:7px
  }
  .erp-top .btn-row {
    gap:4px
  }
  .erp-main {
    padding:17px 11px 35px
  }
  .pagehead {
    flex-direction:column;
    gap:10px
  }
  .pagehead .btn-row {
    width:100%;
    justify-content:flex-start
  }
  .pagehead .btn {
    flex:1
  }
  .statgrid {
    grid-template-columns:repeat(2,1fr);
    gap:8px
  }
  .statcard {
    padding:13px 11px;
    min-height:110px;
    gap:8px
  }
  .statcard .icobg {
    height:35px;
    width:35px;
    border-radius:9px
  }
  .statcard .icobg svg {
    width:18px;
    height:18px
  }
  .statcard .value {
    font-size:22px
  }
  .statcard .label {
    font-size:10px
  }
  .panel.pad {
    padding:13px
  }
  .grid-3 {
    grid-template-columns:1fr
  }
  .filterbar .field {
    flex:1 1 135px
  }
  .formgrid {
    grid-template-columns:1fr
  }
  .formgrid .span2 {
    grid-column:1
  }
  .dialoghead,.dialogbody {
    padding:17px
  }
  .dialogfooter {
    padding:12px 17px
  }
  .settings-nav button {
    font-size:10px;
    padding:8px
  }
  .settingsection {
    padding:15px
  }
  .portal-hero {
    flex-wrap:wrap
  }
  .portal-hero .btn {
    width:100%
  }
  .portal-tabs {
    gap:3px
  }
  .portal-tab {
    padding:8px 9px
  }
}
/* Aagron School white-first admin polish and connected document builder */
.overline {
  font-size:10px;
  font-weight:850;
  letter-spacing:1.25px;
  text-transform:uppercase;
  color:#b85c28
}
.listMetric {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #f0f0f3;
  padding:15px 4px;
  font-size:12px;
  color:#7a7c83
}
.listMetric strong {
  font-size:16px;
  color:#27232a
}
.tdActions {
  white-space:nowrap
}
.tdActions .btn {
  margin:2px 3px 2px 0
}
.table-select {
  min-width:106px;
  padding:7px 8px;
  font-size:11px;
  min-height:35px;
  border-radius:8px
}
.templateCards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px
}
.templateTile {
  background:#fff;
  border:1px solid #e9e9ed;
  border-radius:13px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-start;
  padding:21px 18px;
  min-height:172px;
  position:relative;
  color:#3c343a;
  box-shadow:0 6px 20px #40302408;
  transition:border-color .15s,transform .15s
}
.templateTile:hover {
  border-color:#ebc5a9;
  transform:translateY(-2px)
}
.templateTile>svg:first-child {
  color:#c46527;
  width:27px;
  height:27px;
  margin-bottom:7px
}
.templateTile>strong {
  font-size:14px
}
.templateTile>span {
  font-size:11px;
  color:#92909b
}
.templateTile>svg:last-child {
  position:absolute;
  right:16px;
  top:20px;
  color:#b45f28
}
.dataForm .dialogfooter {
  margin-bottom:0
}
.formgrid>.field input[type=number] {
  appearance:textfield
}
.infoBox {
  line-height:1.65
}
.documentDialog {
  width:min(1280px,98vw);
  max-height:94vh
}
.documentDialog .dialoghead {
  flex-shrink:0
}
.documentBody {
  display:grid;
  grid-template-columns:minmax(280px,.66fr) minmax(0,1.34fr);
  min-height:0;
  overflow:hidden
}
.doc-editor {
  padding:20px 22px;
  overflow:auto;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:14px;
  border-right:1px solid var(--line)
}
.docBodyInput {
  min-height:260px;
  font-family:inherit;
  line-height:1.7
}
.doc-preview-wrap {
  overflow:auto;
  background:#f8f8fa;
  padding:18px 22px 32px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.doc-preview-label {
  align-self:stretch;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:850;
  letter-spacing:1.1px;
  color:#8a8490;
  margin:0 0 13px
}
.letterpaper {
  position:relative;
  width:min(100%,680px);
  max-width:680px;
  background:white;
  color:#29242b;
  box-shadow:0 13px 35px #24192518;
  border:1px solid #e5e4e8;
  min-height:775px;
  padding:39px 44px 34px;
  display:flex;
  flex-direction:column;
  font-size:11px;
  overflow:hidden
}
.letter-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:13px;
  position:relative;
  z-index:1
}
.letter-ident {
  display:flex;
  align-items:center;
  gap:12px
}
.letter-ident strong {
  font-weight:860;
  font-size:17px;
  letter-spacing:-.5px;
  color:#2e2427;
  display:block
}
.letter-ident small {
  display:block;
  color:#8c878a;
  margin-top:4px;
  font-size:10px
}
.logo-letter {
  width:106px;
  height:66px
}
.letter-seal {
  font-size:9px;
  font-weight:830;
  letter-spacing:1px;
  text-align:center;
  color:#aa9b94;
  line-height:1.5;
  border:1px solid #eee8e2;
  border-radius:50%;
  width:69px;
  height:69px;
  display:grid;
  place-content:center
}
.letter-contact {
  font-size:9px;
  color:#8f8588;
  margin-top:9px;
  min-height:15px
}
.letter-rule {
  height:2px;
  background:linear-gradient(90deg,#ea7d14,#bc571b,#8d3622);
  margin:15px 0 18px
}
.letter-meta {
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:10px;
  color:#848085;
  margin-bottom:22px
}
.letterpaper h2 {
  text-align:center;
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.25px;
  margin:7px 0 23px;
  color:#2e2a2c
}
.letter-recipient {
  font-weight:760;
  margin-bottom:14px;
  white-space:pre-wrap;
  word-break:break-word
}
.letter-subject {
  margin-bottom:21px;
  padding-bottom:12px;
  border-bottom:1px solid #f1f1f2;
  word-break:break-word
}
.letter-body {
  white-space:pre-wrap;
  line-height:1.78;
  font-size:11px;
  position:relative;
  z-index:1;
  word-break:break-word;
  flex:1;
  min-height:225px
}
.letter-watermark {
  position:absolute;
  transform:rotate(-27deg);
  top:43%;
  left:14%;
  font-size:100px;
  letter-spacing:6px;
  color:#9c9c9c0c;
  font-weight:900;
  pointer-events:none;
  user-select:none
}
.letter-signoff {
  margin-top:30px;
  font-size:11px;
  color:#6d686f;
  position:relative;
  z-index:1
}
.letter-signoff strong {
  color:#2f292d;
  display:block;
  margin:5px 0 17px;
  font-size:12px
}
.sign-line {
  border-top:1px solid #bab5b5;
  width:150px;
  margin-bottom:5px
}
.letter-signoff span {
  font-size:9px;
  color:#8d8b8f
}
.letter-bottom {
  border-top:1px solid #eae8e7;
  padding-top:13px;
  display:flex;
  gap:8px;
  justify-content:space-between;
  color:#9c9495;
  font-size:9px;
  line-height:1.5;
  margin-top:26px
}
.letter-bottom span {
  text-align:right
}
.docFooter {
  flex-shrink:0;
  background:white
}
.letterpaper .logo-img {
  mix-blend-mode:multiply
}
.letterpaper .letter-contact,.letterpaper .letter-bottom {
  overflow-wrap:anywhere
}
#doc-print-root {
  display:none
}
.print-root {
  display:none
}
.home-main.home-work .voice-hero {
  padding:10px 12px 15px
}
.home-main.home-work .voice-hero .greet {
  font-size:12px
}
.home-main.home-work .voice-hero h1 {
  font-size:30px;
  margin-bottom:6px
}
.home-main.home-work .voice-hero .lede {
  font-size:11px;
  margin-bottom:5px
}
.home-main.home-work .voiceorb-shell {
  height:99px;
  width:99px;
  margin:8px 0 13px
}
.home-main.home-work .voiceorb-shell::before {
  box-shadow:0 0 0 8px #f3be9620,0 0 0 16px #fbe5d440
}
.home-main.home-work .voiceorb {
  height:78px;
  width:78px
}
.home-main.home-work .voiceorb svg {
  height:35px;
  width:35px
}
.home-main.home-work .voice-hero .question {
  font-size:19px
}
.home-main.home-work .voice-hero .instruction {
  font-size:10px
}
.home-main.home-work .voice-hint {
  display:none
}
@media(max-width:1080px) {
  .documentBody {
    grid-template-columns:1fr 1.15fr
  }
  .letterpaper {
    padding:28px 30px 26px;
    min-height:700px
  }
  .letter-ident strong {
    font-size:13px
  }
  .letter-seal {
    width:56px;
    height:56px;
    font-size:8px
  }
  .letterpaper h2 {
    font-size:15px
  }
  .templateCards {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:720px) {
  .documentDialog {
    width:96vw;
    max-height:95vh
  }
  .documentBody {
    grid-template-columns:1fr;
    overflow:auto
  }
  .doc-editor {
    overflow:visible;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .doc-preview-wrap {
    overflow:visible;
    padding:14px
  }
  .documentDialog .dialoghead {
    padding:14px 16px
  }
  .doc-preview-wrap .letterpaper {
    min-height:610px;
    padding:22px 23px;
    font-size:9px
  }
  .letter-body {
    font-size:10px
  }
  .docBodyInput {
    min-height:135px
  }
  .templateCards {
    grid-template-columns:1fr
  }
  .templateTile {
    min-height:125px
  }
  .logo-letter {
    width:78px;
    height:50px
  }
  .letter-seal {
    display:none
  }
  .letterpaper .letter-body {
    min-height:165px
  }
  .letterpaper h2 {
    margin:2px 0 18px
  }
  .letter-bottom {
    font-size:8px
  }
}
@media print {
  @page {
    size:A4;
    margin:13mm
  }
  html,body {
    background:white!important
  }
  #app,.toast-stack {
    display:none!important
  }
  #print-root,#print-root.hidden {
    display:block!important;
    position:static!important;
    width:100%!important;
    visibility:visible!important
  }
  #print-root .letterpaper {
    border:0;
    box-shadow:none;
    min-height:255mm;
    width:100%;
    max-width:none;
    padding:12mm 11mm 8mm;
    font-size:12px;
    break-inside:avoid
  }
  #print-root .letter-paper h2 {
    font-size:17px
  }
  #print-root .letter-body {
    font-size:12px
  }
  #print-root .letter-watermark {
    font-size:120px;
    color:#88888816
  }
  #print-root .letter-bottom {
    margin-top:auto
  }
  #print-root .letter-top .logo-img {
    max-height:24mm
  }
  #print-root .letterpaper .letter-signoff {
    break-inside:avoid
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}
/* 2026 DESIGN REFINEMENT — PREMIUM WORKSPACE LIBRARY / DRAFT VIEWER */
:root {
  --ink:#211e24;
  --muted:#73737b;
  --page:#fafafa;
  --radius:18px;
  --shadow:0 8px 28px rgba(55,45,38,.035)
}
body {
  font-family:"Inter Display","Inter","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.008em;
  background:#fff
}
.btn:focus-visible,.asset-main:focus-visible,.back-link:focus-visible,.filter-pills button:focus-visible {
  outline:3px solid #c55a19;
  outline-offset:4px
}
.btn,.userchip,.filter-pills button,.asset-main {
  min-height:44px
}
.global-header {
  height:82px;
  padding:0 46px;
  box-shadow:0 1px 0 rgba(30,30,36,.025);
  background:#fff
}
.global-header .logo-top {
  height:73px;
  width:130px
}
.global-header .brandlabel {
  font-weight:750;
  color:#8f8581
}
.global-header .userinitials {
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fbf5f0;
  color:#8e4228
}
.global-header .right>.btn.soft {
  background:#fff;
  border-color:#eadfd9;
  box-shadow:0 3px 13px #31251d0a
}
.home-page {
  background:linear-gradient(#fff 0%,#fffaf8 43%,#fff 75%)
}
.home-main {
  max-width:1510px;
  padding:36px 52px 90px
}
.home-softwave {
  top:145px;
  opacity:.38
}
.home-idle {
  min-height:calc(100vh - 145px)
}
.home-idle .voice-hero {
  padding-bottom:64px
}
.voice-hero .greet {
  letter-spacing:1.9px;
  font-size:10px;
  text-transform:uppercase;
  font-weight:850;
  color:#bd592d;
  margin-bottom:14px
}
.voice-hero h1 {
  font-size:clamp(38px,4.5vw,67px);
  letter-spacing:-3.1px;
  line-height:1.08;
  font-weight:760;
  max-width:900px;
  margin-bottom:14px
}
.voice-hero .lede {
  font-size:14px;
  color:#77727b;
  font-weight:450
}
.voiceorb-shell {
  margin:10px 0 25px;
  width:210px;
  height:210px
}
.voiceorb-shell::before {
  border-color:#f1decf;
  box-shadow:0 0 0 17px #f3c7a425,0 0 0 35px #f5e4d03d
}
.voiceorb {
  width:149px;
  height:149px;
  box-shadow:0 21px 56px rgba(173,69,29,.20),0 0 0 7px #ffffffb8
}
.voiceorb:hover {
  transform:translateY(-3px) scale(1.015)
}
.voice-hero .question {
  font-size:29px;
  letter-spacing:-.9px;
  font-weight:760
}
.voice-hero .instruction {
  font-size:12px;
  color:#8a8084
}
.commandbar {
  width:min(760px,100%);
  border-color:#e8e0dd;
  border-radius:16px;
  box-shadow:0 14px 46px #655a5314;
  background:#fff;
  padding:9px 9px 9px 19px
}
.commandbar input {
  font-size:13px;
  height:45px;
  outline:0!important;
  box-shadow:none!important
}
.commandbar:focus-within {
  border-color:#d7a17d;
  box-shadow:0 0 0 3px #f8e4d8,0 14px 46px #655a5314
}
.commandbar .btn {
  min-height:45px;
  font-size:12px;
  padding:10px 16px
}
.voice-hint {
  margin:14px 0;
  font-size:11px;
  color:#9b969a
}
.hint-prompts {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:9px
}
.hint-prompts span {
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:850;
  color:#b3a6a0;
  margin-right:5px
}
.hint-prompts button {
  border:1px solid #ebe6e2;
  padding:10px 13px;
  background:#fff;
  border-radius:12px;
  font-size:11px;
  color:#7d7272;
  font-weight:670;
  transition:all .2s
}
.hint-prompts button:hover {
  border-color:#e4b294;
  color:#a64e21;
  background:#fff9f4;
  transform:translateY(-1px)
}
.work-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px
}
.workspace-eyebrow,.worktop-activity {
  font-size:10px;
  font-weight:800;
  letter-spacing:1.22px;
  color:#a85a34
}
.worktop-activity {
  letter-spacing:0;
  text-transform:none;
  color:#86796e;
  display:flex;
  gap:7px;
  align-items:center
}
.work-overview {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  border:1px solid #ece8e6;
  border-radius:23px;
  padding:29px 37px;
  background:linear-gradient(120deg,#fff 18%,#fffaf7 100%);
  box-shadow:0 12px 48px #44271408
}
.work-overview h1 {
  font-size:clamp(30px,3.6vw,51px);
  margin:7px 0 8px;
  letter-spacing:-2.3px;
  font-weight:780
}
.work-overview p {
  font-size:13px;
  color:#8d8589;
  margin:0
}
.work-counts {
  display:flex;
  gap:0;
  align-items:center
}
.work-counts>div {
  min-width:118px;
  text-align:center;
  border-left:1px solid #eee6e1;
  padding:0 20px
}
.work-counts strong {
  display:block;
  font-size:28px;
  letter-spacing:-1.2px;
  line-height:1.15;
  font-weight:800
}
.work-counts span {
  font-size:10px;
  color:#948a8e
}
.home-main.home-work .voice-hero {
  max-width:1240px;
  display:grid;
  grid-template-columns:1fr auto minmax(310px,1.55fr);
  grid-template-rows:auto auto auto;
  column-gap:19px;
  align-items:center;
  text-align:left;
  background:#fff;
  border:1px solid #ede8e5;
  border-radius:22px;
  margin:23px 0 32px;
  padding:18px 25px;
  box-shadow:0 5px 20px #30272107
}
.home-main.home-work .voice-hero .greet {
  grid-column:1;
  grid-row:1;
  font-size:9px;
  margin:0 0 5px
}
.home-main.home-work .voice-hero h1 {
  grid-column:1;
  grid-row:2;
  font-size:25px;
  letter-spacing:-.8px;
  margin:0;
  white-space:nowrap
}
.home-main.home-work .voice-hero .lede {
  grid-column:1;
  grid-row:3;
  margin:3px 0 0;
  font-size:11px
}
.home-main.home-work .voiceorb-shell {
  grid-column:2;
  grid-row:1/4;
  height:72px;
  width:72px;
  margin:0
}
.home-main.home-work .voiceorb-shell::before {
  inset:2px;
  box-shadow:0 0 0 5px #f6d7c529
}
.home-main.home-work .voiceorb {
  height:57px;
  width:57px
}
.home-main.home-work .voiceorb svg {
  height:25px;
  width:25px
}
.home-main.home-work .voice-hero .question,.home-main.home-work .voice-hero .instruction,.home-main.home-work .voice-hero .voice-hint {
  display:none
}
.home-main.home-work .voice-hero .commandbar {
  grid-column:3;
  grid-row:1/4;
  margin:0;
  width:100%;
  box-shadow:none;
  padding:5px 5px 5px 12px;
  border-radius:12px
}
.home-main.home-work .commandbar input {
  height:40px;
  font-size:11px
}
.home-main.home-work .commandbar .btn {
  min-height:41px;
  font-size:11px
}
.workspace-area {
  margin-top:9px
}
.workspace-top {
  margin:14px 0 24px;
  align-items:center
}
.workspace-top h2 {
  font-size:29px;
  letter-spacing:-1.05px;
  margin:5px 0
}
.workspace-top p {
  font-size:12px;
  color:#8c848a
}
.workspace-top .btn {
  background:#fff
}
.workspace-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  flex-wrap:wrap
}
.filter-pills {
  display:flex;
  gap:5px;
  background:#faf9f8;
  padding:5px;
  border:1px solid #efeeed;
  border-radius:12px
}
.filter-pills button {
  border:0;
  border-radius:9px;
  padding:9px 14px;
  font-size:11px;
  font-weight:740;
  color:#79757a;
  background:transparent;
  transition:all .15s
}
.filter-pills button.active {
  background:var(--brand);
  color:white;
  box-shadow:0 4px 14px #ba5a2b25
}
.filter-pills span {
  opacity:.7;
  margin-left:4px
}
.workspace-filter-right {
  display:flex;
  align-items:center;
  gap:10px
}
.asset-search {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #eceaec;
  background:#fff;
  border-radius:11px;
  padding:0 12px;
  color:#9b8f90;
  height:43px
}
.asset-search input {
  border:0;
  background:none;
  min-width:160px;
  color:#484249;
  outline:none;
  font-size:11px
}
.workspace-filter-right .select {
  width:auto;
  min-width:140px;
  min-height:43px
}
.workspace-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}
.asset-card {
  background:#fff;
  border:1px solid #eeeaeb;
  border-radius:19px;
  overflow:hidden;
  box-shadow:0 7px 28px #3c2d270a;
  position:relative;
  transition:transform .18s,box-shadow .18s,border-color .18s
}
.asset-card:hover {
  transform:translateY(-4px);
  border-color:#e3c3ae;
  box-shadow:0 18px 45px #4c2f2a15
}
.asset-head {
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:19px;
  left:21px;
  right:21px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.asset-icon {
  height:43px;
  width:43px;
  border-radius:12px;
  background:#fff5ee;
  display:grid;
  place-items:center;
  color:#c15b29
}
.asset-status {
  font-size:10px;
  font-weight:740;
  background:#fff6ec;
  color:#ab6f40;
  border:1px solid #f5e1d3;
  border-radius:40px;
  padding:6px 9px;
  display:flex;
  gap:6px;
  align-items:center
}
.asset-status.done {
  color:#28694f;
  background:#eff9f3;
  border-color:#dcefe4
}
.statusdot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.asset-main {
  border:0;
  background:none;
  text-align:left;
  color:inherit;
  padding:80px 21px 0;
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:360px;
  align-items:stretch;
  cursor:pointer
}
.asset-kind {
  font-size:9px;
  letter-spacing:1.06px;
  font-weight:830;
  color:#b35b2b;
  text-transform:uppercase
}
.asset-sep {
  color:#c1b8b3;
  margin:0 4px
}
.asset-title {
  font-weight:770;
  font-size:19px;
  line-height:1.24;
  letter-spacing:-.65px;
  color:#242126;
  margin:10px 0 8px;
  min-height:48px
}
.asset-excerpt {
  font-size:11px;
  line-height:1.62;
  color:#89848d;
  min-height:35px;
  max-width:340px
}
.asset-paper-preview {
  height:91px;
  max-width:100%;
  margin:15px 0 10px;
  padding:12px 13px 0;
  background:linear-gradient(165deg,#fff,#fcfcfd);
  border:1px solid #efedef;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  box-shadow:inset 0 0 0 3px #fff,0 -5px 22px #36314205;
  overflow:hidden
}
.paper-topline {
  display:flex;
  align-items:center;
  gap:8px
}
.paper-mark {
  color:#fff;
  background:var(--brand);
  width:22px;
  height:22px;
  border-radius:6px;
  display:grid;
  place-items:center;
  font-weight:950
}
.paper-smallbars {
  display:flex;
  flex-direction:column;
  gap:4px
}
.paper-smallbars i {
  height:3px;
  width:78px;
  background:#d9d5d5;
  border-radius:10px
}
.paper-smallbars i:last-child {
  width:46px;
  background:#e9e6e6
}
.paper-accentline {
  display:block;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#ec8a37,#d66e33,#fff0e5);
  margin:7px 0
}
.paper-titleline {
  display:block;
  width:39%;
  height:5px;
  border-radius:9px;
  background:#d5d0d0;
  margin-bottom:9px
}
.paper-rows {
  display:flex;
  flex-direction:column;
  gap:5px
}
.paper-rows i {
  display:block;
  height:3px;
  width:90%;
  background:#f0eded
}
.paper-rows i:nth-child(2) {
  width:78%
}
.paper-rows i:nth-child(3) {
  width:86%
}
.asset-bottom {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  min-height:56px;
  border-top:1px solid #f2f0ef
}
.asset-date {
  font-size:10px;
  color:#9c959a;
  font-weight:620
}
.asset-view {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:850;
  font-size:11px;
  color:#a94b25
}
.asset-card:hover .asset-view {
  color:#d46720
}
.workspace-none {
  grid-column:1/-1;
  padding:50px;
  text-align:center;
  border:1px dashed #e5dddb;
  border-radius:16px
}
.workspace-none svg {
  color:#c97d44
}
.workspace-none h3 {
  font-size:16px;
  margin:8px 0
}
.workspace-none p {
  font-size:11px;
  color:#999
}
.detail-shell {
  min-height:100vh;
  background:#fafafa
}
.detail-layout {
  max-width:1510px;
  margin:auto;
  padding:30px 40px 60px
}
.detail-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:23px
}
.back-link {
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#6b6468;
  font-weight:760;
  padding:10px 0
}
.back-link:hover {
  color:#bd5725
}
.detail-breadcrumb {
  font-size:11px;
  color:#999297
}
.detail-breadcrumb span {
  margin:0 9px;
  color:#c8bdba
}
.detail-breadcrumb b {
  color:#4b4549
}
.detail-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:22px;
  margin-bottom:24px
}
.detail-heading h1 {
  font-size:clamp(28px,3.2vw,43px);
  font-weight:780;
  letter-spacing:-1.6px;
  margin:5px 0 9px
}
.detail-heading p {
  color:#89838a;
  font-size:12px;
  margin:0;
  line-height:1.6
}
.detail-heading-actions {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.detail-body {
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:19px;
  align-items:start
}
.detail-aside {
  border:1px solid #eae6e5;
  border-radius:17px;
  background:white;
  box-shadow:var(--shadow);
  overflow:hidden
}
.detail-aside-section {
  padding:22px 20px;
  border-bottom:1px solid #f1eff0
}
.detail-aside-section:last-of-type {
  border-bottom:0
}
.aside-kicker {
  font-size:10px;
  font-weight:840;
  letter-spacing:1.4px;
  color:#af5d30;
  margin-bottom:16px
}
.detail-fact {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #f6f4f4;
  font-size:11px
}
.detail-fact:last-child {
  border:0
}
.detail-fact span {
  color:#9b959c
}
.detail-fact strong {
  color:#4c454c;
  font-weight:750;
  text-align:right;
  max-width:180px
}
.prompt-quote {
  margin:0;
  background:#fbf8f6;
  border-left:3px solid #e6a474;
  padding:14px;
  color:#565052;
  font-size:12px;
  line-height:1.72;
  border-radius:0 9px 9px 0
}
.review-line {
  display:flex;
  align-items:flex-start;
  gap:11px;
  cursor:pointer;
  font-size:11px;
  color:#484249;
  font-weight:720;
  line-height:1.5
}
.review-line input {
  width:18px;
  height:18px;
  margin-top:1px
}
.detail-explainer {
  color:#9b9397;
  font-size:10px;
  line-height:1.55;
  margin:10px 0 14px
}
.detail-actions-list {
  display:flex;
  flex-direction:column;
  gap:8px
}
.detail-actions-list .btn {
  justify-content:flex-start;
  width:100%;
  font-weight:730
}
.detail-demo-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:17px 20px;
  background:#fcfaf8;
  font-size:10px;
  line-height:1.6;
  color:#98847a
}
.detail-demo-note svg {
  flex-shrink:0;
  color:#b66d3a
}
.detail-paper-stage {
  padding:18px;
  border:1px solid #e9e7e8;
  border-radius:18px;
  box-shadow:var(--shadow);
  min-height:870px;
  background:#f6f6f7;
  display:flex;
  flex-direction:column;
  align-items:center
}
.paper-stage-top {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  color:#59535c
}
.paper-stage-title {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800
}
.paper-stage-title span {
  color:#9b9499;
  font-weight:550
}
.paper-stage-meta {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#8c8c93
}
.stage-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#65a987
}
.detail-paper-stage .letterpaper {
  width:100%;
  max-width:780px;
  min-height:850px;
  padding:42px 50px 33px;
  box-shadow:0 15px 45px rgba(33,27,30,.09);
  border-color:#e9e7ea;
  border-radius:2px
}
.paper-stage-caption {
  font-size:10px;
  color:#989299;
  margin-top:14px;
  text-align:center
}
.letterpaper {
  line-height:1.5
}
.letterpaper h2 {
  font-size:19px;
  font-weight:820;
  letter-spacing:-.5px
}
.letter-contact {
  line-height:1.55
}
.letterpaper .letter-body {
  white-space:normal;
  line-height:1.7
}
.rich-body {
  font-size:11px;
  line-height:1.69;
  color:#39383d
}
.rich-body h3 {
  font-size:12px;
  color:#393139;
  letter-spacing:-.15px;
  margin:13px 0 6px
}
.rich-body h3:first-child {
  margin-top:0
}
.rich-body p {
  margin:0 0 8px
}
.rich-body ul {
  padding-left:18px;
  margin:0 0 9px
}
.rich-body li {
  padding:0 0 3px
}
.paper-table-wrap {
  overflow:auto;
  max-width:100%;
  margin:13px 0 18px;
  border:1px solid #e9e5e3;
  border-radius:6px
}
.paper-datatable {
  width:100%;
  border-collapse:collapse;
  font-size:9px
}
.paper-datatable th {
  text-align:left;
  background:#faf6f2!important;
  color:#6c5350;
  border-bottom:1px solid #e8d9cd;
  padding:10px 7px;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:.4px;
  white-space:nowrap
}
.paper-datatable td {
  padding:9px 7px;
  border-bottom:1px solid #ede8e5;
  vertical-align:top
}
.paper-datatable tr:last-child td {
  border:0
}
.letter-body-structured {
  flex:1;
  min-height:300px
}
.settings-nav button.active {
  background:var(--brand);
  color:white
}
.settings-nav button.active svg {
  color:white
}
.settings-nav button {
  min-height:43px
}
.settingsection h2 {
  font-size:21px;
  letter-spacing:-.6px
}
.settings-nav {
  border:1px solid #eee8e6;
  border-radius:16px;
  background:#fff
}
.workspace-grid.compact .asset-main {
  min-height:289px
}
.workspace-grid.compact .asset-excerpt {
  min-height:20px
}
.workspace-grid.compact .asset-paper-preview {
  height:54px
}
.workspace-grid.compact .asset-title {
  min-height:23px;
  margin-bottom:5px
}
.workspace-grid.compact .asset-status {
  font-size:9px
}
@media(min-width:1200px) {
  .home-main.home-work .voice-hero {
    max-width:none
  }
  .asset-card .asset-title {
    max-width:340px
  }
}
@media(max-width:1199px) {
  .workspace-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .home-main.home-work .voice-hero {
    grid-template-columns:minmax(190px,1fr) auto minmax(245px,1.3fr)
  }
  .home-main.home-work .voice-hero h1 {
    font-size:21px;
    white-space:normal
  }
  .work-overview {
    padding:24px
  }
  .work-counts>div {
    min-width:95px;
    padding:0 12px
  }
  .detail-body {
    grid-template-columns:268px minmax(0,1fr)
  }
  .detail-paper-stage .letterpaper {
    padding:30px
  }
}
@media(max-width:850px) {
  .home-main {
    padding:22px 17px 45px
  }
  .home-main.home-work .voice-hero {
    display:flex;
    align-items:stretch;
    gap:10px;
    padding:17px 18px;
    text-align:left
  }
  .home-main.home-work .voice-hero .greet {
    display:none
  }
  .home-main.home-work .voice-hero .lede {
    font-size:11px
  }
  .home-main.home-work .voice-hero .voiceorb-shell {
    display:none
  }
  .home-main.home-work .voice-hero .commandbar {
    margin:0
  }
  .work-overview {
    flex-direction:column;
    align-items:stretch;
    gap:21px
  }
  .work-counts {
    justify-content:flex-start
  }
  .work-counts>div:first-child {
    border-left:0;
    padding-left:0
  }
  .detail-layout {
    padding:18px 15px 45px
  }
  .detail-body {
    grid-template-columns:1fr
  }
  .detail-aside {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .detail-aside-section {
    border-right:1px solid #eee;
  }
  .detail-demo-note {
    grid-column:1/-1
  }
  .detail-heading {
    flex-direction:column;
    align-items:flex-start
  }
  .detail-paper-stage {
    min-height:0
  }
  .global-header {
    padding:0 18px
  }
}
@media(max-width:630px) {
  .workspace-grid {
    grid-template-columns:1fr
  }
  .workspace-top {
    flex-wrap:wrap;
    align-items:flex-start
  }
  .workspace-top h2 {
    font-size:24px
  }
  .workspace-controls {
    align-items:stretch
  }
  .workspace-filter-right {
    width:100%
  }
  .asset-search {
    flex:1;
    min-width:0
  }
  .asset-search input {
    min-width:0;
    width:100%
  }
  .workspace-filter-right .select {
    min-width:120px;
    width:120px;
    font-size:10px
  }
  .work-overview h1 {
    font-size:36px
  }
  .work-counts>div {
    min-width:0;
    flex:1
  }
  .work-overview {
    padding:22px
  }
  .work-topline {
    display:none
  }
  .voice-hero h1 {
    font-size:40px;
    letter-spacing:-1.4px
  }
  .home-idle .voice-hero {
    padding:28px 4px
  }
  .home-idle {
    min-height:calc(100vh - 85px)
  }
  .voiceorb-shell {
    width:180px;
    height:180px
  }
  .voiceorb {
    height:126px;
    width:126px
  }
  .voiceorb svg {
    width:50px;
    height:50px
  }
  .voice-hero .question {
    font-size:23px
  }
  .commandbar {
    padding:8px 8px 8px 12px;
    gap:5px
  }
  .commandbar input {
    font-size:11px
  }
  .commandbar .btn {
    font-size:10px;
    padding:9px 10px
  }
  .detail-topbar {
    align-items:flex-start
  }
  .detail-breadcrumb {
    display:none
  }
  .detail-aside {
    display:block
  }
  .detail-aside-section {
    border-right:0
  }
  .detail-heading h1 {
    font-size:29px
  }
  .detail-heading-actions {
    width:100%
  }
  .detail-heading-actions .btn {
    flex:1
  }
  .detail-paper-stage {
    padding:8px
  }
  .detail-paper-stage .letterpaper {
    padding:20px 20px 18px;
    min-height:650px
  }
  .paper-datatable {
    font-size:7.5px
  }
  .paper-datatable td,.paper-datatable th {
    padding:6px 3px
  }
  .paper-stage-title span {
    display:none
  }
  .detail-paper-stage .letter-ident strong {
    font-size:12px
  }
  .detail-paper-stage .letterpaper h2 {
    font-size:13px
  }
  .detail-paper-stage .logo-letter {
    width:64px;
    height:47px
  }
  .detail-paper-stage .rich-body {
    font-size:10px
  }
  .detail-paper-stage .letter-meta,.detail-paper-stage .letter-subject {
    font-size:9px
  }
  .detail-paper-stage .letter-signoff {
    font-size:9px
  }
  .filter-pills {
    width:100%
  }
  .filter-pills button {
    flex:1;
    padding:9px 5px
  }
  .asset-main {
    min-height:335px
  }
}
@media print {
  @page {
    size:A4;
    margin:9mm
  }
  #print-root .letterpaper {
    padding:7mm 8mm 6mm!important;
    font-size:10.5px!important;
    min-height:0!important;
    break-inside:auto!important
  }
  #print-root .letter-top .logo-img {
    height:16mm!important
  }
  #print-root .letter-contact {
    margin-top:4px!important
  }
  #print-root .letter-rule {
    margin:8px 0 10px!important
  }
  #print-root .letter-meta {
    margin-bottom:11px!important
  }
  #print-root .letterpaper h2 {
    font-size:15px!important;
    margin:0 0 10px!important
  }
  #print-root .letter-recipient {
    margin-bottom:6px!important
  }
  #print-root .letter-subject {
    margin-bottom:10px!important;
    padding-bottom:6px!important
  }
  #print-root .letter-signoff {
    margin-top:11px!important
  }
  #print-root .letter-bottom {
    margin-top:11px!important;
    padding-top:8px!important
  }
  #print-root .paper-table-wrap {
    margin:7px 0 8px!important
  }
  #print-root .paper-datatable th,#print-root .paper-datatable td {
    padding:4px 5px!important
  }
  #print-root .rich-body h3 {
    margin:7px 0 3px!important
  }
  #print-root .rich-body p {
    margin-bottom:4px!important
  }
}
@media print {
  #print-root .paper-table-wrap {
    overflow:visible
  }
  #print-root .paper-datatable {
    font-size:9px
  }
  #print-root .paper-datatable th,#print-root .paper-datatable td {
    padding:7px 5px
  }
  #print-root .rich-body {
    font-size:10.5px
  }
  #print-root .letterpaper {
    min-height:0!important;
    break-inside:auto!important
  }
  #print-root .letter-body {
    min-height:0!important
  }
  #print-root .letter-signoff {
    margin-top:14px!important
  }
}
/* Aagron complete ERP: reference-aligned modules, white-first premium controls */
.ref-shell {
  display:flex;
  flex-direction:column;
  gap:17px;
  min-width:0
}
.ref-tabs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  padding:9px;
  background:#fff;
  border:1px solid #eae8e7;
  border-radius:17px;
  box-shadow:0 10px 24px rgba(56,36,25,.035)
}
.ref-tab {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid transparent;
  border-radius:11px;
  padding:10px 13px;
  color:#747079;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
  white-space:nowrap;
  transition:.16s
}
.ref-tab:hover {
  background:#fff8f4;
  color:#a54d1d;
  border-color:#f7e9dd
}
.ref-tab.active {
  background:linear-gradient(116deg,#ea7911,#c65b17 70%,#96381f);
  color:white;
  box-shadow:0 8px 17px rgba(184,89,30,.16)
}
.ref-body {
  min-width:0
}
.ref-titlebar {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:4px 0 18px
}
.ref-titlebar h2 {
  font-size:24px;
  letter-spacing:-.8px;
  margin:0 0 6px;
  color:#2b2326
}
.ref-titlebar p {
  color:#83818a;
  font-size:12px;
  max-width:700px;
  line-height:1.6;
  margin:0
}
.ref-actions {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.ref-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:17px
}
.ref-stat {
  background:#fff;
  border:1px solid #ebe7e8;
  border-radius:17px;
  min-height:115px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  box-shadow:0 9px 27px rgba(41,29,23,.032)
}
.ref-stat-ico {
  height:44px;
  width:44px;
  border-radius:13px;
  background:#fff1e6;
  color:#cb591c;
  display:grid;
  place-items:center;
  flex:0 0 44px
}
.ref-stat-ico svg {
  width:22px;
  height:22px
}
.ref-stat:nth-child(2) .ref-stat-ico {
  background:#eaf8f2;
  color:#29936c
}
.ref-stat:nth-child(3) .ref-stat-ico {
  background:#eaf2ff;
  color:#527db4
}
.ref-stat:nth-child(4) .ref-stat-ico {
  background:#f4eefe;
  color:#9064af
}
.ref-stat .k {
  color:#8d8990;
  font-size:10px;
  line-height:1.45;
  font-weight:750
}
.ref-stat .v {
  font-size:24px;
  color:#30262a;
  letter-spacing:-.7px;
  font-weight:850;
  margin:5px 0 3px;
  line-height:1.2
}
.ref-stat .d {
  font-size:10px;
  color:#9d979a
}
.ref-card {
  background:#fff;
  border:1px solid #ebe8e9;
  border-radius:18px;
  box-shadow:0 11px 32px rgba(54,31,25,.035);
  overflow:hidden
}
.ref-cardpad {
  padding:18px
}
.ref-cardtitle {
  font-weight:840;
  font-size:16px;
  color:#28212b;
  margin:0 0 5px
}
.ref-carddesc {
  font-size:11px;
  color:#969198;
  margin:0 0 14px
}
.ref-filterbar {
  padding:16px;
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:11px;
  border-bottom:1px solid #f1eff0;
  background:#fff
}
.ref-filterbar>.field {
  flex:1 1 137px;
  max-width:240px
}
.ref-filterbar .field.searchfield {
  min-width:225px;
  max-width:none;
  flex:2 1 260px
}
.ref-filterbar .btn {
  margin-left:auto
}
.ref-tablebox {
  overflow:auto;
  max-width:100%;
  max-height:650px
}
.ref-table {
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  min-width:780px
}
.ref-table thead th {
  background:#f9f9fa;
  color:#83838c;
  text-align:left;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15px;
  padding:13px 13px;
  border-bottom:1px solid #efeff2;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:2
}
.ref-table td {
  padding:12px 13px;
  border-bottom:1px solid #f3f2f3;
  color:#5b555b;
  vertical-align:middle;
  line-height:1.45
}
.ref-table tr:hover td {
  background:#fffcf9
}
.ref-table tbody tr:last-child td {
  border-bottom:0
}
.ref-table .record-strong {
  font-weight:820;
  color:#2d272b
}
.ref-table .ref-dim {
  color:#a29ca0;
  font-size:10px
}
.ref-table .ref-actions-cell {
  white-space:nowrap
}
.ref-table .ref-actions-cell .btn {
  margin:0 3px 0 0
}
.ref-table tbody tr[data-selected="yes"] td {
  background:#fff9f4
}
.ref-tablefoot {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  background:#fcfbfa;
  font-size:10px;
  color:#878189;
  border-top:1px solid #f1eff0
}
.ref-mini-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px
}
.ref-panel {
  background:#fff;
  border:1px solid #ebe8e9;
  border-radius:18px;
  padding:19px;
  box-shadow:0 9px 28px rgba(54,31,25,.035)
}
.ref-panel h3 {
  font-size:16px;
  margin:0 0 5px
}
.ref-panel>p {
  color:#89828a;
  font-size:12px;
  line-height:1.6;
  margin:0 0 14px
}
.ref-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.ref-detail {
  padding:12px 14px;
  border-radius:12px;
  background:#fbfaf9;
  border:1px solid #efeded
}
.ref-detail label {
  font-size:10px;
  color:#a0989e;
  display:block;
  margin-bottom:5px
}
.ref-detail strong {
  font-size:12px;
  color:#302a30;
  font-weight:800;
  overflow-wrap:anywhere
}
.ref-stage {
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:5px
}
.ref-stage button {
  border:1px solid #eae8ea;
  background:#fff;
  color:#7c767d;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:10px;
  padding:9px 11px;
  white-space:nowrap;
  font-size:11px;
  font-weight:760
}
.ref-stage button.active {
  border-color:#ecb58d;
  background:#fff4ec;
  color:#ba5422
}
.ref-timeline {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:15px 0
}
.ref-timeline .step {
  display:flex;
  align-items:center;
  gap:6px;
  color:#9b9299;
  font-size:10px;
  font-weight:760
}
.ref-timeline .step:before {
  content:"";
  width:18px;
  height:18px;
  border:2px solid #dddce0;
  border-radius:50%;
  background:#fff
}
.ref-timeline .step.done:before {
  border-color:#cc6c2e;
  background:#f8e0cd
}
.ref-timeline .step.done {
  color:#a44b24
}
.ref-timeline .bar {
  height:1px;
  flex:1;
  min-width:11px;
  background:#e7e1df
}
.ref-weekly {
  width:100%;
  overflow:auto
}
.ref-weekly table {
  border-collapse:separate;
  border-spacing:5px;
  width:100%;
  min-width:740px
}
.ref-weekly th {
  font-size:10px;
  color:#8d8288;
  padding:8px 5px;
  text-align:left
}
.ref-weekly td {
  vertical-align:top;
  background:#f9f9fa;
  border:1px solid #f0eef0;
  border-radius:12px;
  min-width:118px;
  padding:10px
}
.ref-weekly td.subject {
  background:#fff4e8;
  border-color:#f4ddc9
}
.ref-weekly td.lab {
  background:#edf7f4;
  border-color:#dcece7
}
.ref-weekly td.activity {
  background:#f2f0fd;
  border-color:#e4e0f5
}
.ref-weekly td strong {
  display:block;
  font-size:11px;
  color:#3f3030
}
.ref-weekly td span {
  display:block;
  font-size:10px;
  color:#8f7e79;
  margin-top:3px
}
.ref-weekly td button {
  margin-top:7px;
  color:#a94a20;
  border:0;
  background:none;
  padding:0;
  font-size:10px;
  font-weight:800;
  text-decoration:underline
}
.ref-schedule-legend {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  font-size:10px;
  color:#827c83;
  padding-top:12px
}
.ref-schedule-legend span:before {
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  background:#ffe5cf;
  border-radius:3px;
  margin-right:6px
}
.ref-schedule-legend span:nth-child(2):before {
  background:#e2f4ec
}
.ref-schedule-legend span:nth-child(3):before {
  background:#ece8f8
}
.ref-split {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);
  gap:16px
}
.ref-split-wide {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.65fr);
  gap:16px
}
.ref-profile-top {
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #efeef0;
  padding-bottom:18px;
  margin-bottom:15px
}
.ref-profile-avatar {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,#fff7f0,#fbe0c9);
  color:#b75a29;
  font-size:23px;
  font-weight:850;
  flex:0 0 66px
}
.ref-profile-top h3 {
  font-size:21px;
  margin:0 0 5px
}
.ref-profile-top p {
  color:#8a8389;
  font-size:12px;
  margin:0
}
.ref-profile-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap
}
.ref-profile-actions {
  margin-left:auto;
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.ref-calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px
}
.ref-calendar .day {
  border-radius:8px;
  background:#f8f8fa;
  min-height:42px;
  display:grid;
  place-items:center;
  font-size:11px;
  color:#7f747a
}
.ref-calendar .day.present {
  background:#e8f6ee;
  color:#23805e;
  font-weight:800
}
.ref-calendar .day.absent {
  background:#fcebec;
  color:#ae4a4b;
  font-weight:800
}
.ref-calendar .day.late {
  background:#fff3e5;
  color:#b96a20;
  font-weight:800
}
.ref-calendar .label {
  font-size:9px;
  font-weight:800;
  min-height:22px;
  background:none;
  color:#948f96
}
.ref-bars {
  display:flex;
  align-items:end;
  gap:9px;
  height:125px;
  padding:12px 8px 0;
  border-bottom:1px solid #e7e4e6
}
.ref-bars .ref-column {
  flex:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  color:#8f8589;
  font-size:9px
}
.ref-bars .ref-bar {
  width:100%;
  max-width:33px;
  min-height:4px;
  background:linear-gradient(0deg,#d46419,#ee9f50);
  border-radius:7px 7px 1px 1px
}
.ref-fee-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:13px 0
}
.ref-fee-tabs button {
  border:1px solid #eae7e8;
  background:#fff;
  border-radius:9px;
  padding:8px 11px;
  font-weight:750;
  font-size:11px;
  color:#716a74
}
.ref-fee-tabs button.active {
  color:#af5221;
  background:#fff3e9;
  border-color:#f3dbc8
}
.ref-highlight {
  padding:12px;
  background:#fff8f3;
  border:1px solid #f5e5d8;
  border-radius:13px;
  font-size:11px;
  color:#785f51;
  line-height:1.6
}
.ref-chat {
  display:grid;
  grid-template-columns:255px 1fr;
  min-height:480px;
  border:1px solid #ece8e6;
  border-radius:17px;
  overflow:hidden;
  background:#fff
}
.ref-chatlist {
  background:#fcfbfb;
  border-right:1px solid #efecee;
  padding:10px;
  max-height:560px;
  overflow:auto
}
.ref-chatperson {
  border:1px solid transparent;
  border-radius:12px;
  padding:12px;
  display:flex;
  gap:11px;
  align-items:center;
  width:100%;
  background:transparent;
  text-align:left;
  margin:0 0 4px
}
.ref-chatperson.active {
  background:#fff3eb;
  border-color:#f2d7c4
}
.ref-chatperson .avatar {
  height:36px;
  width:36px;
  border-radius:12px;
  background:#eae9ee;
  display:grid;
  place-items:center;
  color:#695b67;
  font-size:12px;
  font-weight:800;
  flex-shrink:0
}
.ref-chatperson .person {
  font-size:11px;
  font-weight:800;
  color:#373139
}
.ref-chatperson .preview {
  font-size:10px;
  color:#979098;
  white-space:nowrap;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis
}
.ref-chat-main {
  display:flex;
  flex-direction:column;
  min-width:0
}
.ref-chat-heading {
  padding:16px 18px;
  border-bottom:1px solid #f0eff1;
  font-size:12px;
  font-weight:800
}
.ref-bubbles {
  flex:1;
  overflow:auto;
  display:flex;
  gap:10px;
  flex-direction:column;
  padding:18px
}
.ref-bubble {
  font-size:12px;
  line-height:1.55;
  padding:11px 14px;
  max-width:75%;
  border-radius:15px;
  background:#f2f1f4;
  align-self:start;
  color:#574f58
}
.ref-bubble.sent {
  align-self:end;
  background:#fff1e5;
  color:#8c4e2f
}
.ref-chat-compose {
  padding:12px;
  border-top:1px solid #f0eef0;
  display:flex;
  gap:8px
}
.ref-chat-compose input {
  flex:1
}
.ref-modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(31,21,22,.53);
  z-index:250;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  backdrop-filter:blur(4px)
}
.ref-dialog {
  background:#fff;
  border-radius:19px;
  width:min(780px,98vw);
  max-height:94vh;
  overflow:auto;
  box-shadow:0 25px 90px rgba(0,0,0,.22)
}
.ref-dialoghead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eeecec;
  padding:20px 23px
}
.ref-dialoghead h3 {
  font-size:19px;
  letter-spacing:-.4px;
  margin:0
}
.ref-dialog .body {
  padding:22px 23px
}
.ref-dialogfooter {
  padding:16px 23px;
  border-top:1px solid #eeecec;
  display:flex;
  justify-content:flex-end;
  gap:9px
}
.ref-dialognote {
  font-size:11px;
  color:#8b8489;
  margin-bottom:15px;
  line-height:1.5
}
.ref-dialogform {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}
.ref-dialogform .wide {
  grid-column:1/-1
}
.ref-empty {
  text-align:center;
  color:#8d858a;
  padding:35px 20px;
  font-size:12px
}
.ref-kpi-band {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.ref-kpi-pill {
  background:#fff8f1;
  border-radius:11px;
  padding:9px 12px;
  font-size:11px;
  color:#a35b35;
  border:1px solid #f3ddc9;
  font-weight:760
}
@media(max-width:1150px) {
  .ref-stats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .ref-split,.ref-split-wide {
    grid-template-columns:1fr
  }
  .ref-chat {
    grid-template-columns:225px 1fr
  }
}
@media(max-width:800px) {
  .ref-titlebar {
    align-items:stretch;
    flex-direction:column
  }
  .ref-titlebar h2 {
    font-size:22px
  }
  .ref-actions {
    justify-content:flex-start
  }
  .ref-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  .ref-stat {
    min-height:100px;
    padding:11px;
    gap:8px
  }
  .ref-stat-ico {
    height:36px;
    width:36px;
    flex-basis:36px
  }
  .ref-stat .v {
    font-size:20px
  }
  .ref-filterbar>.field,.ref-filterbar .field.searchfield {
    flex:1 1 160px;
    min-width:140px;
    max-width:none
  }
  .ref-mini-grid {
    grid-template-columns:1fr
  }
  .ref-chat {
    grid-template-columns:1fr
  }
  .ref-chatlist {
    max-height:144px;
    display:flex;
    overflow:auto;
    gap:8px
  }
  .ref-chatperson {
    min-width:168px;
    flex-shrink:0
  }
  .ref-chat-main {
    min-height:390px
  }
  .ref-dialogform {
    grid-template-columns:1fr
  }
  .ref-dialogform .wide {
    grid-column:auto
  }
}
/* Premium ERP dashboard and illustrated campus login */
.login-visual {
  background:linear-gradient(167deg,#fffefa 0%,#fff9f5 65%,#fff3e7 100%);
  padding-bottom:32px
}
.login-content {
  max-width:565px
}
.login-content h1 {
  font-size:clamp(42px,4.5vw,72px);
  letter-spacing:-2.8px;
  line-height:1.085
}
.login-content p {
  max-width:530px;
  font-size:14px;
  line-height:1.72
}
.login-kicker {
  display:inline-flex;
  padding:8px 12px;
  border:1px solid #efdfcf;
  background:#fffdfb;
  border-radius:99px;
  box-shadow:0 9px 24px rgba(164,111,75,.04)
}
.campus-tags {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px
}
.campus-tag {
  display:inline-flex;
  padding:8px 12px;
  border:1px solid #efd8c7;
  background:rgba(255,255,255,.79);
  border-radius:99px;
  color:#9b512c;
  font-size:10px;
  font-weight:790
}
.campus-photo {
  width:min(38%,302px);
  height:390px;
  border:1px solid #f2ded0;
  position:absolute;
  right:26px;
  bottom:35px;
  z-index:1;
  background:linear-gradient(160deg,#eaf5ff 0%,#fff7ed 100%);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(115,61,34,.16)
}
.campus-photo svg {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.campus-photo .caption {
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.88);
  padding:10px 12px;
  border-radius:12px;
  color:#654437;
  font-size:10px;
  line-height:1.5;
  backdrop-filter:blur(7px)
}
.login-footer {
  max-width:490px;
  padding:9px 12px;
  border-radius:11px;
  box-shadow:0 10px 25px rgba(97,52,30,.025);
  background:rgba(255,255,255,.85);
  font-size:10px
}
.dash-head-controls {
  display:flex;
  gap:9px;
  align-items:flex-end;
  justify-content:flex-end;
  flex-wrap:wrap
}
.compact-field {
  display:flex;
  flex-direction:column;
  min-width:118px;
  gap:5px
}
.compact-field label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.65px;
  font-weight:840;
  color:#a0715d
}
.compact-field .select {
  height:39px;
  min-height:39px;
  border-radius:10px
}
.dashboard-shell {
  display:grid;
  gap:17px
}
.dashboard-hero {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(290px,.78fr);
  gap:20px;
  background:linear-gradient(122deg,#fff8f2 0%,#fff 68%);
  border:1px solid #f0e8e2;
  border-radius:21px;
  padding:21px;
  box-shadow:0 12px 35px rgba(62,32,25,.04)
}
.dashboard-hero h2 {
  font-size:clamp(22px,2.2vw,29px);
  font-weight:850;
  letter-spacing:-1.15px;
  margin:7px 0 8px;
  color:#302229
}
.dashboard-hero p {
  font-size:12px;
  line-height:1.65;
  color:#8a7c81;
  margin:0;
  max-width:690px
}
.hero-chip-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:14px 0
}
.hero-chip {
  font-size:10px;
  font-weight:760;
  color:#a65c38;
  background:#fff;
  border:1px solid #eedfd2;
  border-radius:999px;
  padding:7px 10px;
  box-shadow:0 8px 20px rgba(77,44,27,.03)
}
.metric-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}
.metric-card {
  background:#fff;
  border:1px solid #efe8e2;
  border-radius:13px;
  padding:13px;
  box-shadow:0 8px 20px rgba(36,22,16,.03)
}
.metric-card .k {
  font-size:10px;
  color:#92888e;
  font-weight:740
}
.metric-card .v {
  font-size:clamp(19px,1.65vw,25px);
  font-weight:860;
  color:#2c2329;
  letter-spacing:-.7px;
  line-height:1.15;
  margin:7px 0 4px
}
.metric-card .d {
  font-size:10px;
  line-height:1.5;
  color:#9e969a
}
.dashboard-side {
  display:flex;
  flex-direction:column;
  gap:10px
}
.focus-card {
  background:linear-gradient(130deg,#703323 0%,#a34223 100%);
  border-radius:17px;
  padding:17px;
  color:#fff;
  box-shadow:0 13px 37px rgba(92,39,22,.15)
}
.focus-card .eyebrow {
  color:#ffe3d0;
  font-weight:800
}
.focus-card .big {
  font-size:39px;
  font-weight:880;
  letter-spacing:-1px;
  line-height:1.1;
  margin:9px 0 7px
}
.focus-card p {
  color:#f6e8de;
  font-size:11px;
  line-height:1.65
}
.focus-split {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:13px
}
.focus-mini {
  padding:9px 11px;
  border:1px solid #fff3;
  border-radius:11px;
  background:#fff1
}
.focus-mini b {
  display:block;
  font-size:17px;
  font-weight:860
}
.focus-mini span {
  font-size:10px;
  color:#fff9;
  line-height:1.35;
  display:block
}
.insight-card {
  flex:1;
  background:#fff;
  border:1px solid #f0e8e4;
  border-radius:16px;
  padding:13px 15px
}
.insight-card h3 {
  font-size:13px;
  color:#30252a;
  margin:0 0 6px
}
.insight-card p {
  font-size:10px;
  line-height:1.65;
  color:#928891;
  margin:0 0 9px
}
.insight-list {
  display:grid;
  gap:7px
}
.insight-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:8px 10px;
  background:#fffcfa;
  border:1px solid #f3ede8;
  border-radius:10px
}
.insight-row strong {
  display:block;
  font-size:11px;
  color:#33282f
}
.insight-row span {
  font-size:10px;
  color:#a09aa1
}
.dashboard-bottom {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:16px
}
.chart-card,.priority-card,.activity-card {
  background:#fff;
  border:1px solid #ebe8e8;
  border-radius:17px;
  padding:19px;
  box-shadow:0 10px 25px rgba(42,24,20,.035)
}
.chart-card h3,.priority-card h3,.activity-card h3 {
  font-size:16px;
  color:#32262b;
  letter-spacing:-.45px;
  margin:0 0 4px
}
.chart-card>p,.priority-card>p,.activity-card>p {
  color:#90878d;
  font-size:11px;
  margin:0 0 13px
}
.chart-stack {
  display:grid;
  gap:14px;
  margin-top:18px
}
.barrow {
  display:grid;
  gap:7px
}
.barrow-meta,.barrow-foot {
  display:flex;
  justify-content:space-between;
  gap:10px
}
.barrow-meta strong {
  display:block;
  font-size:12px;
  color:#2c262c
}
.barrow-meta span,.barrow-foot {
  font-size:10px;
  color:#918a91
}
.barrow-meta b {
  font-size:12px;
  color:#9f502b
}
.bartrack {
  background:#f8eee6;
  height:10px;
  border-radius:999px;
  overflow:hidden
}
.bartrack span {
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#df842b,#bf531c)
}
.dashboard-side-grid {
  display:grid;
  gap:14px;
  align-content:start
}
.priority-list,.activity-list {
  display:grid;
  gap:8px;
  margin-top:12px
}
.priority-item,.activity-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid #f2edec;
  border-radius:12px;
  background:#fffcfb
}
.priority-icon,.activity-icon {
  width:36px;
  height:36px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff0e3;
  color:#c05c1c
}
.priority-icon svg,.activity-icon svg {
  height:18px;
  width:18px
}
.priority-copy,.activity-copy {
  min-width:0;
  flex:1
}
.priority-copy .title,.activity-copy .title {
  font-size:11px;
  color:#352c32;
  font-weight:830
}
.priority-copy .desc,.activity-copy .desc {
  font-size:10px;
  color:#978f94;
  margin-top:3px
}
.activity-copy .meta {
  font-size:10px;
  color:#a59aa0;
  margin-top:3px
}
@media(max-width:1350px) {
  .login-content h1 {
    font-size:clamp(38px,4.1vw,61px)
  }
  .campus-photo {
    width:33%;
    height:315px
  }
  .dashboard-hero {
    grid-template-columns:1fr
  }
  .dashboard-bottom {
    grid-template-columns:1fr
  }
  .dashboard-side {
    display:grid;
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:1000px) {
  .campus-photo {
    display:none
  }
  .login-content {
    max-width:100%
  }
  .dashboard-side {
    grid-template-columns:1fr
  }
}
@media(max-width:800px) {
  .dashboard-hero {
    padding:15px
  }
  .dash-head-controls {
    justify-content:stretch;
    width:100%
  }
  .compact-field {
    flex:1 1 110px
  }
  .metric-strip {
    grid-template-columns:1fr
  }
  .dashboard-bottom {
    grid-template-columns:1fr
  }
  .dashboard-shell {
    gap:12px
  }
}
/* Aagron School V4 – elevated, accessible, white-first product design */
:root {
  --v4-orange:#e97122;
  --v4-ember:#ad4826;
  --v4-ink:#211f26;
  --v4-slate:#777984;
  --v4-stroke:#ebe8e7;
  --v4-rose:#fef7f2;
  --v4-light-shadow:0 5px 14px rgba(42,27,29,.025),0 20px 55px rgba(42,27,29,.045);
}
html,body {
  font-family:'DM Sans','Aptos','Segoe UI Variable','Segoe UI',sans-serif!important;
  letter-spacing:-.07px;
  color:var(--v4-ink)
}
h1,h2,h3,h4,.value,.statcard .value,.ref-stat .v,.metric-card .v {
  font-family:'Manrope','Aptos Display','Segoe UI Variable','Segoe UI',sans-serif!important;
  letter-spacing:-.65px
}
h1 {
  font-weight:800
}
.ref-titlebar h2,.pagehead h1 {
  font-weight:800;
  letter-spacing:-1.15px
}
button,input,textarea,select {
  font-family:'DM Sans','Aptos','Segoe UI',sans-serif!important
}
.btn {
  font-weight:750;
  letter-spacing:-.05px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.btn:hover:not(:disabled) {
  transform:translateY(-1px)
}
.btn:active:not(:disabled) {
  transform:translateY(0)
}
/* Enlarged, clearer login brand statement */
.login-shell {
  grid-template-columns:minmax(0,1fr) minmax(440px,490px)
}
.login-visual {
  padding:30px clamp(34px,4vw,65px) 38px;
  background:linear-gradient(156deg,#fffefa 5%,#fff9f5 55%,#fff4ee 100%)
}
.login-content {
  max-width:690px;
  margin:auto 0;
  padding:38px 0 46px
}
.login-content h1 {
  font-family:'Manrope','Segoe UI',sans-serif!important;
  font-size:clamp(54px,5.4vw,90px)!important;
  line-height:1.055!important;
  letter-spacing:-4.7px!important;
  max-width:700px;
  font-weight:800!important;
  margin:18px 0 23px!important
}
.login-content p {
  font-size:15.5px!important;
  line-height:1.85!important;
  max-width:560px;
  color:#777783
}
.login-kicker {
  font-family:'DM Sans',sans-serif;
  font-size:11px!important;
  letter-spacing:1.5px!important
}
.login-card h2 {
  font-family:'Manrope',sans-serif!important;
  font-weight:800;
  font-size:32px;
  letter-spacing:-1.35px
}
.login-card .intro {
  font-size:13px;
  line-height:1.65
}
.login-card .input {
  min-height:48px;
  border-radius:12px
}
.login-card .btn.primary {
  min-height:48px;
  border-radius:12px
}
.campus-photo {
  width:min(36%,285px);
  right:22px;
  bottom:27px;
  border-radius:25px;
  box-shadow:0 20px 55px rgba(91,56,43,.13)
}
.login-content:has(+ .campus-photo) {
  max-width:570px
}
.login-footer {
  max-width:560px
}
/* Uniform ERP typography, breathing room and accessible sub-navigation */
.erp-main {
  background:#fdfcfc
}
.erp-body {
  background:#fcfbfb
}
.erp-top,.global-header {
  box-shadow:0 1px 0 rgba(36,31,35,.025)
}
.ref-shell {
  padding-bottom:36px
}
.ref-shell>div:first-child h1 {
  font-family:'Manrope',sans-serif!important;
  font-size:30px!important;
  letter-spacing:-1.25px!important;
  font-weight:800!important
}
.ref-tabs {
  gap:5px;
  background:#fff;
  border:1px solid #ece8e6;
  border-radius:15px;
  padding:7px;
  box-shadow:0 6px 20px rgba(35,25,21,.025)
}
.ref-tab {
  border-radius:10px;
  font-weight:750;
  white-space:nowrap;
  min-height:39px
}
.ref-tab.active {
  box-shadow:0 4px 13px rgba(168,79,30,.1)
}
.ref-body,.ref-card,.ref-panel,.statcard {
  box-shadow:var(--v4-light-shadow)
}
.ref-card,.ref-panel {
  border-radius:16px
}
.ref-table th {
  letter-spacing:.15px;
  font-weight:800;
  text-transform:none;
  color:#62636d
}
.ref-table td {
  font-size:11.2px;
  color:#45424b;
  vertical-align:middle
}
.ref-table tr:hover td {
  background:#fffaf7
}
.ref-filterbar {
  gap:12px
}
.ref-filterbar .field label,.v4-inputfield label {
  font-weight:800;
  font-size:10px;
  letter-spacing:.2px;
  color:#6c6671
}
.ref-filterbar .select,.ref-filterbar .input {
  border-radius:11px;
  min-height:41px
}
.ref-titlebar {
  align-items:flex-start
}
.ref-titlebar h2 {
  font-size:23px
}
.ref-titlebar p {
  font-size:12px
}
.ref-stats {
  gap:12px
}
.ref-stat {
  padding:15px;
  min-width:0
}
.ref-stat .v {
  font-size:24px;
  font-weight:800
}
.v4-portal-launch {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px
}
.v4-mod-sectionline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap
}
.v4-screen-note {
  font-size:10px;
  color:#86848a;
  line-height:1.65
}
.v4-filter-shell {
  background:#fff;
  border-bottom:1px solid #f2ece9;
  padding:15px 18px
}
.v4-filter-shell .ref-filterbar {
  border:0;
  padding:0
}
.v4-pages {
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:space-between;
  padding:14px 18px;
  border-top:1px solid #f1eeee;
  flex-wrap:wrap
}
.v4-pages .pagebuttons {
  display:flex;
  align-items:center;
  gap:5px
}
.v4-pages .v4-pageno {
  border:1px solid #eae5e2;
  background:#fff;
  border-radius:9px;
  min-width:31px;
  height:31px;
  padding:0 9px;
  font-size:11px;
  color:#55505a;
  font-weight:750
}
.v4-pages .v4-pageno.active {
  background:linear-gradient(120deg,#e97828,#ae4427);
  color:#fff;
  border-color:transparent
}
.v4-detailaside {
  background:linear-gradient(170deg,#fffefa,#fffaf7);
  border-radius:14px;
  padding:15px;
  border:1px solid #efe9e5;
  margin-top:13px
}
.v4-detailaside h3 {
  font-size:13px;
  margin:0 0 8px
}
.v4-detailaside p {
  margin:0;
  font-size:11px;
  line-height:1.65;
  color:#81818a
}
.v4-special {
  display:grid;
  gap:12px;
  margin-top:13px
}
.v4-special .v4-barline {
  display:grid;
  grid-template-columns:110px 1fr 45px;
  gap:9px;
  align-items:center;
  font-size:11px;
  color:#62616a
}
.v4-special .v4-barline strong {
  text-align:right
}
.v4-special .v4-track {
  height:9px;
  border-radius:99px;
  background:#f3ece8;
  overflow:hidden
}
.v4-special .v4-track span {
  display:block;
  height:100%;
  background:linear-gradient(120deg,#f29c50,#c35c30);
  border-radius:99px
}
.v4-route-navigator {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px
}
.v4-route-navigator button {
  text-align:left;
  background:#fff;
  border:1px solid #eee8e3;
  border-radius:13px;
  padding:13px;
  min-height:95px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  transition:border-color .2s,transform .2s,box-shadow .2s
}
.v4-route-navigator button:hover {
  border-color:#edb189;
  box-shadow:0 12px 22px #7036190d;
  transform:translateY(-2px)
}
.v4-route-navigator .ico {
  height:34px;
  width:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff1e7;
  color:#b8572e
}
.v4-route-navigator strong {
  font-size:12px
}
.v4-route-navigator small {
  font-size:10px;
  line-height:1.5;
  color:#979098
}
/* Student preview matches ERP, and is deliberately read-only for controlled records. */
.student-app {
  min-height:100vh;
  background:#fbfaf9;
  color:var(--v4-ink)
}
.student-top {
  height:80px;
  background:#fff;
  border-bottom:1px solid #f0ece8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  gap:18px;
  position:sticky;
  top:0;
  z-index:20
}
.student-top-brand {
  display:flex;
  align-items:center;
  gap:13px
}
.student-top-brand .brandlabel {
  color:#a06c50
}
.student-top-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.student-app-grid {
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  min-height:calc(100vh - 80px)
}
.student-sidebar {
  background:#fff;
  border-right:1px solid #f0ece8;
  padding:18px 12px 26px;
  position:sticky;
  top:80px;
  align-self:start;
  height:calc(100vh - 80px);
  overflow:auto
}
.student-sidebar .cap {
  font-size:10px;
  letter-spacing:1.1px;
  font-weight:800;
  color:#ae7762;
  padding:12px 14px
}
.student-nav {
  display:grid;
  gap:4px
}
.student-nav button {
  border:0;
  background:none;
  text-align:left;
  color:#6b6770;
  min-height:42px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:12px;
  font-weight:740;
  border-radius:11px
}
.student-nav button svg {
  width:18px;
  height:18px
}
.student-nav button:hover {
  background:#fff7f1;
  color:#923e28
}
.student-nav button.active {
  background:linear-gradient(107deg,#f1842b,#ba462b);
  color:#fff;
  box-shadow:0 9px 18px rgba(189,77,32,.12)
}
.student-nav-footer {
  margin:22px 6px 0;
  padding:16px;
  border:1px solid #f1e4de;
  border-radius:14px;
  background:linear-gradient(150deg,#fff9f4,#fffefe);
  font-size:11px;
  color:#77686c;
  line-height:1.6
}
.student-content {
  padding:27px 30px 50px;
  max-width:1700px;
  width:100%;
  margin:0 auto;
  min-width:0
}
.student-preview-banner {
  background:#fff5ed;
  border:1px solid #f6e0cf;
  border-radius:12px;
  color:#99532f;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  margin-bottom:20px
}
.student-preview-banner .btn {
  margin-left:auto
}
.student-page-heading {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  margin:0 0 19px;
  flex-wrap:wrap
}
.student-page-heading .minor {
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800;
  color:#bc6337;
  text-transform:uppercase;
  margin-bottom:7px
}
.student-page-heading h1 {
  font-family:'Manrope',sans-serif!important;
  font-size:clamp(26px,2.7vw,36px);
  letter-spacing:-1.3px;
  font-weight:800;
  margin:0 0 7px
}
.student-page-heading p {
  font-size:12px;
  color:#88858c;
  margin:0;
  max-width:640px;
  line-height:1.65
}
.student-hint {
  background:linear-gradient(110deg,#fff9f5,#fff);
  border:1px solid #f2e5dc;
  border-radius:15px;
  padding:12px 16px;
  font-size:11px;
  color:#8f706a;
  max-width:295px;
  line-height:1.6;
  display:flex;
  gap:12px;
  align-items:center
}
.student-hero {
  border:1px solid #f2e4d8;
  background:linear-gradient(130deg,#fff9f4 0%,#fff 78%);
  border-radius:19px;
  padding:23px;
  box-shadow:var(--v4-light-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:17px
}
.student-hero h2 {
  font-size:24px;
  font-weight:800;
  letter-spacing:-1.05px;
  margin:7px 0 7px
}
.student-hero p {
  font-size:12px;
  color:#898187;
  max-width:650px;
  margin:0;
  line-height:1.7
}
.student-hero .welcome-tag {
  font-size:10px;
  font-weight:800;
  color:#b86b42;
  text-transform:uppercase;
  letter-spacing:1px
}
.student-metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:16px 0 19px
}
.student-metric {
  background:white;
  border:1px solid #eee9e6;
  border-radius:16px;
  padding:18px;
  box-shadow:var(--v4-light-shadow);
  display:flex;
  gap:13px;
  align-items:center;
  min-width:0
}
.student-metric .metric-icon {
  background:#fff2e7;
  border-radius:13px;
  color:#cb6132;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px
}
.student-metric .metric-icon svg {
  width:22px;
  height:22px
}
.student-metric .metric-label {
  font-size:11px;
  color:#8d8991;
  font-weight:700
}
.student-metric .metric-value {
  font-family:'Manrope',sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  margin-top:3px;
  line-height:1.2;
  overflow-wrap:anywhere
}
.student-metric .metric-hint {
  font-size:10px;
  color:#a49da3;
  margin-top:3px
}
.student-duo {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);
  gap:16px;
  align-items:start
}
.student-card {
  background:#fff;
  border:1px solid #eee9e7;
  border-radius:16px;
  padding:19px;
  box-shadow:var(--v4-light-shadow);
  min-width:0;
  margin-bottom:15px
}
.student-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px
}
.student-card h3 {
  font-family:'Manrope',sans-serif;
  font-size:16px;
  letter-spacing:-.65px;
  font-weight:800;
  margin:0
}
.student-card .sub {
  font-size:11px;
  color:#9a9398;
  margin-top:4px
}
.student-miniitem {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #f3f0ee
}
.student-miniitem:last-child {
  border:0
}
.student-miniitem .mini-icon {
  width:36px;
  height:36px;
  background:#fff3e9;
  color:#c65b2f;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex:0 0 36px
}
.student-miniitem .mini-copy {
  flex:1;
  min-width:0
}
.student-miniitem .mini-title {
  font-size:12px;
  font-weight:800;
  color:#353039
}
.student-miniitem .mini-sub {
  font-size:10px;
  color:#9e979c;
  line-height:1.6
}
.student-filter {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.student-filter .input,.student-filter .select {
  width:auto;
  min-width:125px;
  max-width:245px
}
.student-filter .btn {
  min-height:39px
}
.student-table-wrap {
  overflow-x:auto
}
.student-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:11px;
  min-width:650px
}
.student-table th {
  background:#faf9f8;
  color:#75747d;
  font-size:10px;
  font-weight:800;
  text-align:left;
  padding:11px 12px;
  border-top:1px solid #f0ebea;
  border-bottom:1px solid #f0ebea
}
.student-table td {
  padding:12px;
  border-bottom:1px solid #f2eeee;
  color:#5e5a63;
  vertical-align:middle
}
.student-table .strong {
  font-weight:800;
  color:#332e34
}
.student-table tr:hover td {
  background:#fffcfa
}
.student-chip {
  font-size:10px;
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  background:#f6f2f0;
  color:#827780;
  font-weight:780
}
.student-chip.orange {
  background:#fff0e6;
  color:#b35c2a
}
.student-chip.green {
  background:#ecf8ef;
  color:#277b59
}
.student-chip.red {
  background:#ffeded;
  color:#b64f50
}
.student-chip.amber {
  background:#fff8e8;
  color:#986d2d
}
.student-chip.blue {
  background:#eef5fc;
  color:#5171a3
}
.student-progress {
  height:9px;
  border-radius:100px;
  background:#f4edeb;
  overflow:hidden;
  margin:13px 0
}
.student-progress span {
  display:block;
  height:100%;
  background:linear-gradient(108deg,#f18d32,#bf4f2d);
  border-radius:100px
}
.student-ring {
  width:140px;
  height:140px;
  border-radius:50%;
  background:conic-gradient(#ed8231 var(--progress),#f7e7d9 var(--progress) 100%);
  padding:18px;
  margin:8px auto 16px
}
.student-ring-inner {
  background:#fff;
  border-radius:50%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.student-ring-inner strong {
  font-family:'Manrope',sans-serif;
  font-size:25px;
  letter-spacing:-.8px
}
.student-ring-inner span {
  font-size:10px;
  color:#aaa0a6
}
.student-day-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px
}
.student-day {
  font-size:10px;
  text-align:center;
  padding:9px 2px;
  border:1px solid #f1eceb;
  border-radius:8px;
  color:#8f8991;
  background:#fff
}
.student-day.present {
  background:#edf8f0;
  color:#248262;
  border-color:#d9eedf
}
.student-day.absent {
  background:#ffeff0;
  color:#b1514d;
  border-color:#ffe1df
}
.student-day.late {
  background:#fff3de;
  color:#a57319;
  border-color:#f8e4c5
}
.student-timeline {
  display:grid;
  gap:10px
}
.student-step {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #f3eeeb;
  border-radius:12px;
  background:#fffdfc
}
.student-step .time {
  width:84px;
  flex:0 0 84px;
  color:#a46a4a;
  font-weight:800;
  font-size:11px
}
.student-step .detail {
  flex:1;
  font-size:11px
}
.student-step strong {
  font-size:12px;
  display:block
}
.student-step small {
  color:#989199;
  font-size:10px
}
.student-choice {
  width:100%;
  border:1px solid #f0e7e1;
  border-radius:13px;
  background:#fff;
  padding:13px 14px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
  color:var(--v4-ink)
}
.student-choice:hover,.student-choice.active {
  border-color:#efb68f;
  background:#fffbf8
}
.student-choice .choice-body {
  flex:1;
  min-width:0
}
.student-choice strong {
  display:block;
  font-size:12px
}
.student-choice span {
  font-size:10px;
  color:#918791
}
.student-side-quote {
  font-size:14px;
  font-weight:750;
  color:#865335;
  line-height:1.6
}
.student-empty {
  padding:29px;
  text-align:center;
  color:#87838c;
  font-size:12px;
  line-height:1.8;
  background:#fffaf7;
  border:1px dashed #e9dacc;
  border-radius:13px
}
.student-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 18px
}
.student-detail-grid .pair {
  padding:11px 0;
  border-bottom:1px solid #f3eeee
}
.student-detail-grid .pair label {
  display:block;
  font-size:10px;
  color:#9d959c;
  margin-bottom:4px
}
.student-detail-grid .pair strong {
  font-size:12px;
  color:#38313a;
  overflow-wrap:anywhere
}
.student-a4 {
  background:#fff;
  border:1px solid #eae6e3;
  border-radius:10px;
  padding:24px;
  box-shadow:0 9px 22px #20202006
}
.student-a4 .company-title {
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:800;
  color:#432727
}
.student-a4 hr {
  border:0;
  height:2px;
  background:linear-gradient(90deg,#ef892b,#b44b27);
  margin:13px 0
}
.student-a4 .muted {
  font-size:11px
}
.student-action-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:15px
}
@media(max-width:1350px) {
  .login-content h1 {
    font-size:clamp(48px,4.75vw,76px)!important;
    letter-spacing:-3.4px!important
  }
  .student-duo {
    grid-template-columns:1fr
  }
  .student-metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:1100px) {
  .v4-route-navigator {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .campus-photo {
    display:none
  }
  .student-app-grid {
    grid-template-columns:210px minmax(0,1fr)
  }
}
@media(max-width:850px) {
  .login-shell {
    grid-template-columns:1fr
  }
  .login-visual {
    padding:28px
  }
  .login-content {
    margin:25px 0;
    max-width:none
  }
  .login-content h1 {
    font-size:clamp(46px,8vw,66px)!important
  }
  .login-side {
    padding:32px 24px
  }
  .v4-route-navigator {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .student-top {
    padding:0 15px
  }
  .student-app-grid {
    grid-template-columns:1fr
  }
  .student-sidebar {
    position:static;
    height:auto;
    max-height:170px;
    overflow:auto;
    border-bottom:1px solid #f0ece8;
    border-right:0;
    padding:9px 13px
  }
  .student-sidebar .cap,.student-nav-footer {
    display:none
  }
  .student-nav {
    display:flex;
    overflow:auto;
    gap:6px
  }
  .student-nav button {
    white-space:nowrap;
    padding:8px 10px;
    min-height:39px
  }
  .student-content {
    padding:21px 15px 35px
  }
}
@media(max-width:580px) {
  .student-metric-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .student-metric {
    padding:13px;
    gap:8px
  }
  .student-metric .metric-icon {
    width:33px;
    height:33px;
    flex-basis:33px
  }
  .student-metric .metric-value {
    font-size:20px
  }
  .student-hero {
    padding:15px
  }
  .student-page-heading h1 {
    font-size:26px
  }
  .student-duo {
    grid-template-columns:minmax(0,1fr)
  }
  .student-card {
    padding:14px
  }
  .student-detail-grid {
    grid-template-columns:1fr
  }
  .student-top-brand .brandlabel,.student-hint {
    display:none
  }
  .student-filter {
    width:100%
  }
  .student-filter .input,.student-filter .select {
    max-width:100%;
    width:100%
  }
  .student-top-actions .btn {
    font-size:10px
  }
  .v4-route-navigator {
    grid-template-columns:1fr
  }
  .metric-strip {
    grid-template-columns:1fr
  }
  .v4-pages {
    justify-content:center
  }
}

/* Central Role Selection & Admin Command Hub Styles */
.role-options-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 22px;
}
.role-select-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #ece6e0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: inherit;
  width: 100%;
}
.role-select-btn:hover {
  transform: translateY(-2px);
  border-color: #d17b45;
  box-shadow: 0 10px 24px rgba(189, 87, 31, 0.1);
}
.role-select-btn.role-rep {
  border-color: #d7e2ff;
}
.role-select-btn.role-rep:hover {
  border-color: #356df3;
  box-shadow: 0 10px 24px rgba(53, 109, 243, 0.12);
}
.role-select-btn.role-student {
  border-color: #fce1cd;
}
.role-select-btn.role-student:hover {
  border-color: #bd571f;
  box-shadow: 0 10px 24px rgba(189, 87, 31, 0.12);
}
.role-select-btn.role-admin {
  border-color: #d3e8d8;
}
.role-select-btn.role-admin:hover {
  border-color: #198454;
  box-shadow: 0 10px 24px rgba(25, 132, 84, 0.12);
}
.role-select-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.role-rep .role-select-icon {
  background: #edf2ff;
  color: #356df3;
}
.role-student .role-select-icon {
  background: #fff0e3;
  color: #bd571f;
}
.role-admin .role-select-icon {
  background: #e9f6ed;
  color: #198454;
}
.role-select-text {
  flex: 1;
  min-width: 0;
}
.role-select-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #201b21;
  margin-bottom: 3px;
}
.role-select-text small {
  display: block;
  font-size: 11px;
  color: #77727c;
  line-height: 1.45;
}
.role-select-badge {
  font-size: 10px;
  font-weight: 850;
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.role-rep .role-select-badge {
  background: #edf2ff;
  color: #356df3;
}
.role-student .role-select-badge {
  background: #fff0e3;
  color: #bd571f;
}
.role-admin .role-select-badge {
  background: #e9f6ed;
  color: #198454;
}

/* Admin Hub Page 2 Cards */
.admin-hub-shell {
  width: 100%;
  max-width: 490px;
}
.admin-hub-grid {
  display: grid;
  gap: 12px;
  margin: 18px 0 20px;
}
.admin-hub-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  background: #ffffff;
  border: 1.5px solid #e9e4df;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: left;
}
.admin-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(32, 27, 33, 0.08);
}
.admin-hub-card.hub-cos {
  border-color: #fed7aa;
}
.admin-hub-card.hub-cos:hover {
  border-color: #d86a19;
  background: #fffbf7;
}
.admin-hub-card.hub-ops {
  border-color: #bfdbfe;
}
.admin-hub-card.hub-ops:hover {
  border-color: #356df3;
  background: #f8fbff;
}
.admin-hub-card.hub-exp {
  border-color: #e9d5ff;
}
.admin-hub-card.hub-exp:hover {
  border-color: #8755e8;
  background: #fbf8ff;
}
.admin-hub-card.hub-erp {
  border-color: #bbf7d0;
}
.admin-hub-card.hub-erp:hover {
  border-color: #198454;
  background: #f7fdf9;
}
.hub-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hub-cos .hub-card-icon {
  background: #fff0e3;
  color: #bd571f;
}
.hub-ops .hub-card-icon {
  background: #edf2ff;
  color: #356df3;
}
.hub-exp .hub-card-icon {
  background: #f3e8ff;
  color: #8755e8;
}
.hub-erp .hub-card-icon {
  background: #e9f6ed;
  color: #198454;
}
.hub-card-body {
  flex: 1;
  min-width: 0;
}
.hub-card-kicker {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.hub-cos .hub-card-kicker { color: #bd571f; }
.hub-ops .hub-card-kicker { color: #356df3; }
.hub-exp .hub-card-kicker { color: #8755e8; }
.hub-erp .hub-card-kicker { color: #198454; }
.hub-card-body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #201b21;
  margin-bottom: 4px;
}
.hub-card-body p {
  font-size: 11px;
  color: #77727c;
  line-height: 1.5;
  margin: 0 0 7px;
}
.hub-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hub-tag {
  font-size: 9px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f5f2ee;
  color: #6a646c;
}
.hub-arrow {
  margin-left: auto;
  font-size: 18px;
  align-self: center;
  font-weight: 700;
  transition: transform 0.15s;
}
.admin-hub-card:hover .hub-arrow {
  transform: translateX(3px);
}
.demo-fill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  color: #bd571f;
  background: #fff6ee;
  border: 1px dashed #f1cdb5;
  border-radius: 9px;
  padding: 6px 12px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}
.demo-fill-btn:hover {
  background: #ffede0;
}