/* MS Builder components v1 (.ms- prefix). Load tokens.css first. */
*{box-sizing:border-box}
body.ms-app{margin:0;background:var(--ms-bg);color:var(--ms-text);font:var(--ms-fs-body)/1.5 var(--ms-font-body)}
.ms-h1,.ms-h2,.ms-label,.ms-btn,.ms-chip,.ms-th{font-family:var(--ms-font-head);letter-spacing:.02em}
.ms-h1{font-size:var(--ms-fs-h1);font-weight:700;color:var(--ms-blue);margin:0 0 4px;text-transform:uppercase}
.ms-h2{font-size:var(--ms-fs-h2);font-weight:700;color:var(--ms-blue);margin:0 0 12px;text-transform:uppercase;border-bottom:3px solid var(--ms-teal);padding-bottom:6px;display:inline-block}
.ms-label{font-size:12px;font-weight:500;text-transform:uppercase;color:var(--ms-muted)}
.ms-muted{color:var(--ms-muted)}
.ms-example{display:inline-block;background:var(--ms-warn-bg);color:var(--ms-warn-fg);font:700 11px var(--ms-font-head);text-transform:uppercase;padding:2px 8px;border-radius:4px;letter-spacing:.06em}
/* top bar */
.ms-topbar{height:var(--ms-topbar-h);background:var(--ms-blue);color:#fff;display:flex;align-items:center;gap:24px;padding:0 24px;border-bottom:4px solid var(--ms-teal)}
.ms-topbar img{height:30px}
.ms-nav{display:flex;gap:4px;flex:1}
.ms-nav a{color:#D6E0F5;text-decoration:none;font:500 14px var(--ms-font-head);text-transform:uppercase;padding:8px 12px;border-radius:6px}
.ms-nav a[aria-current]{background:var(--ms-blue-deep);color:#fff;box-shadow:inset 0 -3px 0 var(--ms-teal)}
.ms-user{font-size:13px;color:#D6E0F5}
.ms-main{max-width:1280px;margin:0 auto;padding:24px}
.ms-card{background:var(--ms-surface);border:1px solid var(--ms-line);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow);padding:20px}
.ms-grid{display:grid;gap:16px}
/* forms */
.ms-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.ms-input,.ms-select{height:var(--ms-tap);border:1px solid #7A8594;border-radius:var(--ms-radius-sm);padding:0 12px;font:var(--ms-fs-ui) var(--ms-font-body);color:var(--ms-text);background:#fff;width:100%}
.ms-input:focus,.ms-btn:focus-visible,.ms-range:focus-visible{outline:none;box-shadow:var(--ms-focus-ring)}
.ms-btn{height:var(--ms-tap);padding:0 20px;border-radius:var(--ms-radius-sm);border:2px solid var(--ms-blue);background:var(--ms-blue);color:#fff;font-size:15px;font-weight:500;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ms-btn:hover{background:var(--ms-blue-hover)}
.ms-btn--ghost{background:#fff;color:var(--ms-blue)}
.ms-btn--approve{background:var(--ms-ok-fg);border-color:var(--ms-ok-fg)}
.ms-btn--reject{background:#fff;color:var(--ms-danger);border-color:var(--ms-danger)}
.ms-btn--block{width:100%}
/* chips */
.ms-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--ms-radius-chip);font-size:13px;font-weight:500;text-transform:uppercase;color:#fff}
.ms-chip--term{background:var(--ms-teal-ink)} .ms-chip--sites{background:var(--ms-blue)}
.ms-chip--pending{background:var(--ms-warn-bg);color:var(--ms-warn-fg);border:1px solid #E0C26E}
.ms-chip--approved{background:var(--ms-ok-bg);color:var(--ms-ok-fg);border:1px solid #7FCDB6}
.ms-chip--rejected{background:#FDE7E5;color:var(--ms-danger);border:1px solid #F1A39B}
.ms-chip--draft{background:var(--ms-panel);color:var(--ms-charcoal);border:1px solid var(--ms-rule)}
/* term columns (36/48/60) */
.ms-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ms-term{border:2px solid var(--ms-line);border-radius:var(--ms-radius);padding:16px;background:#fff;text-align:center}
.ms-term[aria-selected=true]{border-color:var(--ms-teal);box-shadow:inset 0 4px 0 var(--ms-teal)}
.ms-term .ms-label{display:block}
.ms-price{font:700 var(--ms-fs-price) var(--ms-font-head);color:var(--ms-blue)}
.ms-price small{font:400 13px var(--ms-font-body);color:var(--ms-muted)}
/* sliders */
.ms-slider{margin:12px 0 18px}
.ms-slider-head{display:flex;justify-content:space-between;align-items:baseline}
.ms-slider-val{font:700 18px var(--ms-font-head);color:var(--ms-blue)}
.ms-range{width:100%;accent-color:var(--ms-teal);height:var(--ms-tap);margin:0}
.ms-slider-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ms-muted)}
/* tables */
.ms-table{width:100%;border-collapse:collapse;font-size:14px}
.ms-th{font-size:var(--ms-fs-th);text-transform:uppercase;color:#fff;background:var(--ms-blue);text-align:left;padding:10px 12px;font-weight:500}
.ms-table td{padding:10px 12px;border-bottom:1px solid var(--ms-line);vertical-align:top}
.ms-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-table tfoot td{font:700 15px var(--ms-font-head);color:var(--ms-blue);border-top:3px solid var(--ms-teal);border-bottom:0;text-transform:uppercase}
.ms-table tbody tr:nth-child(even) td{background:#F8FAFC}
/* queue */
.ms-qrow{display:grid;grid-template-columns:1.6fr 1fr .8fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--ms-line)}
.ms-qhead{font:500 12px var(--ms-font-head);text-transform:uppercase;color:var(--ms-muted);background:var(--ms-panel)}
.ms-flag{color:var(--ms-danger);font-weight:700}
/* sign-in */
.ms-signin{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--ms-blue) 0%,var(--ms-blue-deep) 100%);padding:24px}
.ms-signin-card{width:100%;max-width:420px;background:#fff;border-radius:14px;padding:32px;border-top:6px solid var(--ms-teal);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ms-signin-card img{height:40px;display:block;margin:0 auto 20px}
/* mobile */
@media (max-width:600px){
  .ms-topbar{padding:0 14px;gap:10px}.ms-topbar img{height:24px}.ms-nav,.ms-user{display:none}
  .ms-main{padding:14px}.ms-terms{grid-template-columns:1fr}.ms-term{display:flex;justify-content:space-between;align-items:center;text-align:left}
  .ms-qhead{display:none}.ms-qrow{grid-template-columns:1fr auto;gap:6px}
  .ms-tabbar{position:sticky;bottom:0;height:64px;background:#fff;border-top:1px solid var(--ms-line);display:flex}
  .ms-tabbar a{flex:1;display:grid;place-items:center;font:500 12px var(--ms-font-head);text-transform:uppercase;color:var(--ms-muted);text-decoration:none}
  .ms-tabbar a[aria-current]{color:var(--ms-blue);box-shadow:inset 0 3px 0 var(--ms-teal)}
  .ms-qrow>div:first-child{grid-column:1/-1}
}
@media (min-width:601px){.ms-tabbar{display:none}}