:root{
  --support-bg:#f6f3ec;
  --support-surface:#ffffff;
  --support-surface-soft:#fbfaf6;
  --support-border:#ded7c8;
  --support-border-strong:#c8baa0;
  --support-ink:#242018;
  --support-muted:#756d60;
  --support-gold:#a57b35;
  --support-gold-soft:#f2eadc;
  --support-green:#376b55;
  --support-green-soft:#edf5f0;
  --support-sidebar:#211f1a;
  --support-sidebar-muted:#bcb4a5;
  --support-shadow:0 14px 38px rgba(45,38,25,.07);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

body{
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:var(--support-bg);
  color:var(--support-ink);
}

.support-topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:var(--support-surface);
  border-bottom:1px solid var(--support-border);
}

.support-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.support-brand-mark{
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:var(--support-sidebar);
  color:#e8c98e;
  font-weight:800;
  font-size:20px;
}

.support-brand-name{
  font-size:16px;
  font-weight:750;
  letter-spacing:-.01em;
}

.support-brand-subtitle{
  margin-top:2px;
  font-size:11px;
  color:var(--support-muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.support-environment{
  border:1px solid #c9dbd1;
  background:var(--support-green-soft);
  color:var(--support-green);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.support-layout{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:242px minmax(0,1fr);
}

.support-sidebar{
  background:var(--support-sidebar);
  color:#f8f4eb;
  padding:28px 18px 24px;
  display:flex;
  flex-direction:column;
}

.support-sidebar-label{
  padding:0 10px 12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:#918a7e;
}

.support-nav{
  display:grid;
  gap:6px;
}

.support-nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border-radius:9px;
  text-decoration:none;
  color:var(--support-sidebar-muted);
  font-size:14px;
  font-weight:650;
}

.support-nav-item.active{
  background:#343028;
  color:#fffaf0;
}

.support-nav-icon{
  width:20px;
  text-align:center;
}

.support-isolation{
  margin-top:auto;
  border-top:1px solid #3c382f;
  padding:20px 10px 0;
  display:grid;
  gap:5px;
}

.support-isolation strong{
  font-size:12px;
  color:#e5c68b;
}

.support-isolation span{
  font-size:11px;
  line-height:1.55;
  color:#9f988b;
}

.support-main{
  width:100%;
  max-width:none;
  padding:38px 42px 60px;
}

.support-page-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}

.support-eyebrow{
  color:var(--support-gold);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
}

.support-page-heading h1{
  margin:7px 0 7px;
  font-size:34px;
  letter-spacing:-.035em;
}

.support-page-heading p{
  margin:0;
  color:var(--support-muted);
  font-size:15px;
}

.support-status-pill{
  background:var(--support-green-soft);
  border:1px solid #c7dacf;
  color:var(--support-green);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:750;
}

.support-foundation-card{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:20px;
  padding:27px;
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:16px;
  box-shadow:var(--support-shadow);
}

.support-foundation-icon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:var(--support-green-soft);
  color:var(--support-green);
  font-size:23px;
  font-weight:800;
}

.support-foundation-card h2{
  margin:1px 0 7px;
  font-size:19px;
}

.support-foundation-card p{
  margin:0;
  max-width:760px;
  color:var(--support-muted);
  line-height:1.65;
}

.support-foundation-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.support-foundation-grid div{
  background:var(--support-surface-soft);
  border:1px solid var(--support-border);
  padding:15px;
  border-radius:11px;
  display:grid;
  gap:5px;
}

.support-foundation-grid span{
  color:var(--support-muted);
  font-size:11px;
}

.support-foundation-grid strong{
  font-size:13px;
}

.support-next-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.support-next-grid article{
  padding:20px;
  min-height:168px;
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:14px;
}

.support-next-grid article > span{
  color:var(--support-gold);
  font-size:11px;
  font-weight:800;
}

.support-next-grid h3{
  margin:17px 0 8px;
  font-size:16px;
}

.support-next-grid p{
  margin:0;
  color:var(--support-muted);
  font-size:12px;
  line-height:1.65;
}

.support-no-data{
  margin-top:18px;
  padding:13px 15px;
  border:1px dashed var(--support-border-strong);
  border-radius:10px;
  color:var(--support-muted);
  font-size:12px;
}

@media(max-width:1000px){
  .support-layout{
    grid-template-columns:1fr;
  }

  .support-sidebar{
    display:none;
  }

  .support-main{
    padding:28px 20px 45px;
  }

  .support-foundation-grid,
  .support-next-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){
  .support-topbar{
    padding:0 16px;
  }

  .support-environment{
    display:none;
  }

  .support-page-heading{
    display:block;
  }

  .support-status-pill{
    display:inline-block;
    margin-top:16px;
  }

  .support-foundation-card{
    grid-template-columns:1fr;
  }

  .support-foundation-grid,
  .support-next-grid{
    grid-template-columns:1fr;
  }
}

/* Phase 2 — dedicated staff authentication */

.support-staff-area{
  display:flex;
  align-items:center;
  gap:14px;
}

.support-staff-identity{
  display:grid;
  text-align:right;
}

.support-staff-identity strong{
  font-size:12px;
}

.support-staff-identity span{
  margin-top:2px;
  font-size:10px;
  color:var(--support-muted);
}

.support-logout-button{
  appearance:none;
  border:1px solid var(--support-border);
  background:var(--support-surface);
  color:var(--support-ink);
  border-radius:8px;
  padding:8px 11px;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.support-login-body{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    linear-gradient(
      125deg,
      #211f1a 0 44%,
      var(--support-bg) 44% 100%
    );
}

.support-login-shell{
  width:min(960px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--support-border);
  border-radius:20px;
  overflow:hidden;
  background:var(--support-surface);
  box-shadow:0 30px 80px rgba(25,21,15,.18);
}

.support-login-brand{
  min-height:560px;
  padding:52px;
  color:#f7f2e8;
  background:var(--support-sidebar);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.support-login-logo{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:36px;
  border-radius:14px;
  background:#383329;
  color:#e7c78a;
  font-size:25px;
  font-weight:850;
}

.support-login-brand h1{
  margin:8px 0 13px;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.support-login-brand p{
  margin:0;
  max-width:370px;
  color:#bbb3a5;
  line-height:1.7;
  font-size:14px;
}

.support-login-security{
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid #3a362e;
  display:grid;
  gap:5px;
}

.support-login-security strong{
  color:#e7c78a;
  font-size:12px;
}

.support-login-security span{
  color:#9e9688;
  font-size:11px;
}

.support-login-card{
  padding:52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.support-login-card h2{
  margin:8px 0 7px;
  font-size:27px;
  letter-spacing:-.025em;
}

.support-login-card > div > p{
  margin:0;
  color:var(--support-muted);
  font-size:13px;
}

.support-auth-form{
  display:grid;
  gap:17px;
  margin-top:30px;
}

.support-auth-form label{
  display:grid;
  gap:7px;
}

.support-auth-form label > span{
  font-size:12px;
  font-weight:700;
}

.support-auth-form input{
  width:100%;
  border:1px solid var(--support-border-strong);
  border-radius:9px;
  padding:12px 13px;
  background:#fff;
  color:var(--support-ink);
  font:inherit;
  font-size:14px;
  outline:none;
}

.support-auth-form input:focus{
  border-color:var(--support-gold);
  box-shadow:0 0 0 3px var(--support-gold-soft);
}

.support-primary-button{
  margin-top:4px;
  border:0;
  border-radius:9px;
  padding:13px 16px;
  background:var(--support-sidebar);
  color:#fffaf0;
  font:inherit;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}

.support-auth-error{
  margin-top:20px;
  padding:11px 13px;
  border:1px solid #dfb9af;
  border-radius:9px;
  background:#fff4f1;
  color:#863d31;
  font-size:12px;
  line-height:1.5;
}

.support-auth-footnote{
  margin-top:20px;
  color:var(--support-muted);
  font-size:11px;
  line-height:1.5;
}

.support-forbidden-card{
  max-width:700px;
  padding:34px;
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:15px;
  box-shadow:var(--support-shadow);
}

.support-forbidden-card h1{
  margin:8px 0 10px;
  font-size:25px;
}

.support-forbidden-card p{
  color:var(--support-muted);
  line-height:1.6;
}

.support-primary-link{
  display:inline-block;
  margin-top:8px;
  padding:10px 13px;
  border-radius:8px;
  background:var(--support-sidebar);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

@media(max-width:760px){
  .support-login-body{
    padding:16px;
    background:var(--support-bg);
  }

  .support-login-shell{
    grid-template-columns:1fr;
  }

  .support-login-brand{
    min-height:auto;
    padding:34px 28px;
  }

  .support-login-logo{
    margin-bottom:22px;
  }

  .support-login-brand h1{
    font-size:29px;
  }

  .support-login-security{
    margin-top:26px;
  }

  .support-login-card{
    padding:34px 28px;
  }
}

/* Phase 3B — real read-only operations */

.support-metric-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}

.support-metric-card{
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:14px;
  padding:18px;
  display:grid;
  gap:8px;
}

.support-metric-card span{
  color:var(--support-muted);
  font-size:11px;
  font-weight:650;
}

.support-metric-card strong{
  font-size:25px;
  letter-spacing:-.03em;
}

.support-panel{
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:15px;
  padding:22px;
  box-shadow:var(--support-shadow);
  margin-bottom:18px;
}

.support-panel > h2,
.support-panel > h3{
  margin-top:0;
}

.support-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.support-panel-heading h2{
  margin:0 0 4px;
  font-size:18px;
}

.support-panel-heading p{
  margin:0;
  color:var(--support-muted);
  font-size:12px;
}

.support-secondary-link,
.support-filter-bar a,
.support-back-row a{
  color:#6f5225;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

.support-table-wrap{
  overflow:auto;
}

.support-table{
  width:100%;
  border-collapse:collapse;
  min-width:850px;
}

.support-table th{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--support-border);
  color:var(--support-muted);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.support-table td{
  padding:13px 12px;
  border-bottom:1px solid #eee9df;
  vertical-align:top;
  font-size:12px;
}

.support-table tbody tr:last-child td{
  border-bottom:0;
}

.support-ticket-link{
  color:var(--support-ink);
  font-weight:750;
  text-decoration:none;
}

.support-ticket-link:hover{
  color:var(--support-gold);
}

.support-table-subtext{
  margin-top:4px;
  color:var(--support-muted);
  font-size:10px;
  line-height:1.4;
}

.support-badge{
  display:inline-flex;
  padding:5px 8px;
  border:1px solid var(--support-border);
  border-radius:999px;
  background:var(--support-surface-soft);
  font-size:10px;
  font-weight:750;
}

.support-unread{
  min-width:24px;
  height:24px;
  padding:0 7px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#332e25;
  color:#fff;
  font-size:10px;
  font-weight:800;
}

.support-empty-state{
  padding:28px;
  border:1px dashed var(--support-border-strong);
  border-radius:10px;
  color:var(--support-muted);
  text-align:center;
  font-size:12px;
}

.support-filter-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:14px;
  background:var(--support-surface);
  border:1px solid var(--support-border);
  border-radius:12px;
}

.support-filter-bar input{
  flex:1;
  min-width:240px;
}

.support-filter-bar input,
.support-filter-bar select{
  border:1px solid var(--support-border-strong);
  background:#fff;
  border-radius:8px;
  padding:10px 11px;
  font:inherit;
  font-size:12px;
}

.support-filter-bar button{
  border:0;
  border-radius:8px;
  padding:10px 14px;
  background:var(--support-sidebar);
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}

.support-back-row{
  margin-bottom:18px;
}

.support-ticket-state{
  display:flex;
  align-items:center;
  gap:8px;
}

.support-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}

.support-detail-sidebar{
  min-width:0;
}

.support-detail-list{
  margin:0;
  display:grid;
  gap:0;
}

.support-detail-list > div{
  padding:10px 0;
  border-bottom:1px solid #eee9df;
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:14px;
}

.support-detail-list > div:last-child{
  border-bottom:0;
}

.support-detail-list dt{
  color:var(--support-muted);
  font-size:10px;
}

.support-detail-list dd{
  margin:0;
  font-size:11px;
  font-weight:650;
  overflow-wrap:anywhere;
}

.support-conversation{
  display:grid;
  gap:13px;
}

.support-message{
  max-width:88%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--support-border);
}

.support-message-customer{
  background:#faf8f3;
}

.support-message-support{
  margin-left:auto;
  background:#f1f5f2;
  border-color:#cad9d0;
}

.support-message-internal{
  margin-left:auto;
  background:#fff8e8;
  border-color:#e5d09d;
}

.support-message-meta{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:8px;
}

.support-message-meta strong{
  font-size:11px;
}

.support-message-meta span{
  color:var(--support-muted);
  font-size:9px;
}

.support-message-body{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.65;
}

.support-readonly-notice{
  margin-top:18px;
  padding:12px 13px;
  border:1px dashed var(--support-border-strong);
  border-radius:9px;
  background:var(--support-surface-soft);
  color:var(--support-muted);
  font-size:11px;
}

.support-profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.support-stack{
  display:grid;
  gap:9px;
}

.support-mini-card{
  padding:12px;
  border:1px solid var(--support-border);
  border-radius:9px;
  display:grid;
  gap:3px;
}

.support-mini-card strong{
  font-size:11px;
}

.support-mini-card span{
  color:var(--support-muted);
  font-size:10px;
}

@media(max-width:1150px){
  .support-metric-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .support-detail-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .support-metric-grid,
  .support-profile-grid{
    grid-template-columns:1fr;
  }

  .support-filter-bar{
    align-items:stretch;
    flex-direction:column;
  }

  .support-filter-bar input{
    min-width:0;
  }

  .support-message{
    max-width:100%;
  }
}

/* Phase 3C-B2 — operational ticket controls */

.support-flash-stack{
  display:grid;
  gap:8px;
  margin-bottom:16px;
}

.support-flash{
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--support-border);
  font-size:11px;
  font-weight:650;
}

.support-flash-success{
  background:#eef7f0;
  border-color:#bfd7c4;
}

.support-flash-error{
  background:#fff1ef;
  border-color:#e2bbb5;
}

.support-action-form{
  margin-top:18px;
}

.support-action-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.support-action-grid label,
.support-compose-field{
  display:grid;
  gap:7px;
}

.support-action-grid label > span,
.support-compose-field > span{
  font-size:10px;
  font-weight:750;
  color:var(--support-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.support-action-grid select,
.support-compose-field textarea{
  width:100%;
  border:1px solid var(--support-border-strong);
  border-radius:9px;
  background:#fff;
  padding:10px 11px;
  color:var(--support-ink);
  font:inherit;
  font-size:12px;
  box-sizing:border-box;
}

.support-compose-field textarea{
  resize:vertical;
  line-height:1.55;
}

.support-compose-field small{
  color:var(--support-muted);
  font-size:9px;
  line-height:1.5;
}

.support-compose-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.support-compose-internal textarea{
  background:#fffbef;
  border-color:#ddc988;
}

.support-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:17px;
}

.support-action-buttons button{
  border-radius:8px;
  padding:10px 14px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.support-primary-action{
  border:1px solid var(--support-sidebar);
  background:var(--support-sidebar);
  color:#fff;
}

.support-secondary-action{
  border:1px solid var(--support-border-strong);
  background:#fff;
  color:var(--support-ink);
}

.support-danger-action{
  border:1px solid #c78b82;
  background:#fff5f3;
  color:#873f35;
}

.support-sla-state{
  display:grid;
  gap:3px;
  padding:12px;
  border-radius:9px;
  margin-bottom:10px;
  border:1px solid var(--support-border);
}

.support-sla-state strong{
  font-size:11px;
}

.support-sla-state span{
  font-size:9px;
  color:var(--support-muted);
}

.support-sla-level-0{
  background:#eef7f0;
  border-color:#bfd7c4;
}

.support-sla-level-1{
  background:#fff8e5;
  border-color:#dfca8e;
}

.support-sla-level-2{
  background:#fff0ed;
  border-color:#dfb0a8;
}

@media(max-width:900px){
  .support-action-grid,
  .support-compose-grid{
    grid-template-columns:1fr;
  }
}

/* Phase 3D-B — customer-authorised Support View */

.support-access-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);
  gap:18px;
}

.support-pin-panel{
  min-height:360px;
}

.support-pin-form{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:18px 0;
}

.support-pin-form label{
  display:grid;
  gap:7px;
  flex:1;
}

.support-pin-form label > span{
  font-size:10px;
  font-weight:800;
  color:var(--support-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.support-pin-form input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--support-border-strong);
  border-radius:10px;
  padding:13px 14px;
  font:inherit;
  font-size:21px;
  font-weight:800;
  letter-spacing:.16em;
  background:#fff;
}

.support-security-list{
  display:grid;
  gap:9px;
  margin-top:18px;
}

.support-security-list > div{
  display:grid;
  gap:3px;
  padding:11px 12px;
  border:1px solid var(--support-border);
  border-radius:9px;
  background:#fff;
}

.support-security-list strong{
  font-size:10px;
}

.support-security-list span{
  font-size:9px;
  color:var(--support-muted);
  line-height:1.5;
}

.support-security-notice{
  padding:11px 12px;
  border-radius:9px;
  margin:12px 0;
  font-size:10px;
  font-weight:700;
}

.support-security-danger{
  background:#fff1ef;
  border:1px solid #e2bbb5;
  color:#873f35;
}

.support-active-access{
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:9px;
  background:#eef7f0;
  border:1px solid #bfd7c4;
  margin:12px 0;
}

.support-active-access strong{
  font-size:11px;
}

.support-active-access span{
  color:var(--support-muted);
  font-size:9px;
}

.support-end-session-form{
  margin-top:18px;
}

@media(max-width:900px){
  .support-access-layout{
    grid-template-columns:1fr;
  }

  .support-pin-form{
    align-items:stretch;
    flex-direction:column;
  }
}