:root{
  --bg:#09070d;
  --panel:#120d18;
  --panel2:#181020;
  --line:#2f203f;
  --text:#f8f6fb;
  --muted:#a99ab9;

  --purple:#8b5cf6;
  --purple2:#b379ff;

  --green:#39d98a;
  --yellow:#f4c95d;
  --red:#ff6577;

  --page-pad:34px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  width:100%;
  max-width:100%;

  background:var(--bg);

  color-scheme:dark;

  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;

  overflow-x:hidden;
}

body{
  margin:0;

  width:100%;
  max-width:100%;
  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  overflow-x:hidden;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 82% 5%,
      rgba(139,92,246,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 18%,
      rgba(91,33,182,.12),
      transparent 30%
    ),
    var(--bg);

  color:var(--text);
}

img,
svg,
video,
canvas{
  display:block;

  max-width:100%;

  height:auto;
}

a{
  color:inherit;

  overflow-wrap:anywhere;
}

button,
input,
select,
textarea{
  font:inherit;
}

button,
a,
input,
select,
textarea{
  -webkit-tap-highlight-color:transparent;
}

h1,
h2,
h3,
h4,
p{
  margin-top:0;
}

h1{
  margin-bottom:8px;

  font-size:clamp(
    28px,
    4vw,
    48px
  );

  line-height:1.05;

  letter-spacing:-.04em;

  overflow-wrap:anywhere;
}

.muted{
  color:var(--muted);
}

.eyebrow{
  color:#aa89d7;

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.14em;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.shell{
  width:100%;
  max-width:100%;
  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  display:grid;

  grid-template-columns:
    250px
    minmax(0,1fr);

  overflow-x:hidden;
}


.sidebar{
  position:sticky;

  top:0;

  width:100%;
  min-width:0;

  height:100vh;
  height:100dvh;

  padding:24px 18px;

  display:flex;

  flex-direction:column;

  gap:24px;

  overflow-y:auto;
  overflow-x:hidden;

  border-right:
    1px solid
    var(--line);

  background:
    rgba(
      11,
      7,
      16,
      .88
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.brand{
  min-width:0;
}


.brand img{
  width:min(
    190px,
    100%
  );

  height:auto;
}


.nav{
  min-width:0;

  display:grid;

  gap:8px;
}


.nav a{
  display:block;

  min-width:0;

  padding:
    11px
    13px;

  border-radius:
    12px;

  color:
    var(--muted);

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.nav a.active,
.nav a:hover{
  background:
    rgba(
      139,
      92,
      246,
      .13
    );

  color:#fff;
}


.nav a:active{
  transform:
    translateY(1px);
}


.contact{
  min-width:0;

  margin-top:auto;

  padding:16px;

  border:
    1px solid
    #4b3267;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(139,92,246,.12),
      rgba(255,255,255,.02)
    );
}


.contact a{
  display:block;

  width:100%;

  padding:11px;

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      #a56cff,
      #7137df
    );

  box-shadow:
    0 10px 30px
    rgba(
      124,
      58,
      237,
      .25
    );

  text-align:center;

  text-decoration:none;

  font-weight:700;
}


.main{
  width:100%;
  max-width:1380px;
  min-width:0;

  margin:0 auto;

  padding:
    var(--page-pad);

  overflow-x:hidden;
}


.main > *{
  max-width:100%;
  min-width:0;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
  width:100%;
  min-width:0;

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:22px;

  margin-bottom:28px;
}


.topbar > *{
  min-width:0;
}


.month-nav{
  flex:
    0 0 auto;

  max-width:100%;

  display:flex;

  align-items:center;

  gap:8px;

  padding:6px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    rgba(
      20,
      13,
      28,
      .75
    );

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .18
    );
}


.month-nav a{
  flex:
    0 0 40px;

  width:40px;
  height:40px;

  display:grid;

  place-items:center;

  border-radius:
    10px;

  background:
    #1a1223;

  text-decoration:none;

  transition:
    transform .2s ease,
    background .2s ease;
}


.month-nav a:hover{
  background:
    #21162d;

  transform:
    translateY(-1px);
}


.month-label{
  min-width:135px;

  padding:
    0 10px;

  text-align:center;

  font-weight:650;

  white-space:nowrap;
}


/* =========================================================
   CARDS / METRICS
   ========================================================= */

.grid4{
  width:100%;
  max-width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:14px;

  margin-bottom:16px;
}


.metric,
.card{
  min-width:0;
  max-width:100%;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(27,18,37,.92),
      rgba(15,10,21,.92)
    );

  box-shadow:
    0 14px 40px
    rgba(
      0,
      0,
      0,
      .16
    );
}


.metric{
  position:relative;

  overflow:hidden;

  padding:19px;
}


.metric::after{
  content:"";

  position:absolute;

  width:120px;
  height:120px;

  right:-60px;
  top:-65px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.12),
      transparent 66%
    );

  pointer-events:none;
}


.metric strong{
  display:block;

  margin:
    7px
    0
    2px;

  font-size:30px;

  line-height:1;

  letter-spacing:-.03em;
}


.metric-label{
  display:block;

  color:#b9a9c9;

  font-size:13px;
  font-weight:700;

  line-height:1.35;

  overflow-wrap:anywhere;
}


.metric-caption{
  display:block;

  color:#8f819d;

  font-size:12px;

  line-height:1.4;

  overflow-wrap:anywhere;
}


/* =========================================================
   ORDER DELIVERY
   ========================================================= */

.hero{
  width:100%;
  max-width:100%;
  min-width:0;

  position:relative;

  overflow:hidden;

  padding:25px;

  margin-bottom:18px;
}


.hero::before{
  content:"";

  position:absolute;

  right:-80px;
  top:-100px;

  width:300px;
  height:300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(153,91,255,.23),
      transparent 65%
    );

  pointer-events:none;
}


.hero-head{
  width:100%;
  max-width:100%;
  min-width:0;

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:18px;

  margin-bottom:18px;
}


.hero-copy,
.hero-percentage{
  min-width:0;
}


.hero-total{
  display:flex;

  align-items:baseline;

  gap:12px;
}


.hero-number{
  font-size:50px;

  font-weight:800;

  line-height:1;

  letter-spacing:-.06em;
}


.hero-quota{
  color:
    var(--muted);

  font-size:22px;

  font-weight:500;

  letter-spacing:-.02em;
}


.hero-summary{
  margin:
    8px
    0
    0;

  color:
    var(--muted);

  line-height:1.45;

  overflow-wrap:anywhere;
}


.hero-divider{
  color:#765f8e;

  padding:
    0 6px;
}


.hero-percentage{
  flex:
    0 0 auto;

  text-align:right;
}


.hero-percent-number{
  color:#c8a6ff;

  font-size:34px;

  font-weight:800;

  letter-spacing:-.04em;
}


.hero-percent-label{
  color:
    var(--muted);

  font-size:12px;

  font-weight:700;

  text-transform:
    uppercase;

  letter-spacing:.08em;
}


.progress-track{
  width:100%;
  max-width:100%;
  min-width:0;

  height:20px;

  overflow:hidden;

  border:
    1px solid
    #3e2a50;

  border-radius:
    999px;

  background:
    #291b35;

  box-shadow:
    inset 0 3px 8px
    rgba(
      0,
      0,
      0,
      .35
    );
}


.progress-fill{
  width:
    var(--progress);

  max-width:100%;

  height:100%;

  position:relative;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #7137df 0%,
      #a85fff 58%,
      #d2adff 100%
    );

  box-shadow:
    0 0 28px
    rgba(
      168,
      95,
      255,
      .45
    );

  animation:
    grow
    1s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );
}


.progress-fill::before{
  content:"";

  position:absolute;

  inset:
    2px
    6px
    55%
    6px;

  background:
    rgba(
      255,
      255,
      255,
      .34
    );

  border-radius:
    999px;
}


.progress-fill::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  width:26%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent
    );

  transform:
    translateX(-140%)
    skewX(-18deg);

  animation:
    shine
    2.7s
    ease-in-out
    infinite;
}


@keyframes grow{
  from{
    width:0;
  }

  to{
    width:
      var(--progress);
  }
}


@keyframes shine{

  0%,
  20%{
    transform:
      translateX(-140%)
      skewX(-18deg);
  }

  70%,
  100%{
    transform:
      translateX(480%)
      skewX(-18deg);
  }

}


/* =========================================================
   TABLE / MEETING DETAILS
   ========================================================= */

.table-card{
  width:100%;
  max-width:100%;
  min-width:0;

  overflow:hidden;
}


.table-head{
  width:100%;
  min-width:0;

  padding:
    20px
    22px;

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:16px;

  border-bottom:
    1px solid
    var(--line);
}


.table-head > *{
  min-width:0;
}


.table-title{
  margin-bottom:5px;
}


.table-subtitle{
  display:block;

  color:
    var(--muted);

  font-size:13px;

  line-height:1.4;
}


.table-status-summary{
  min-width:0;

  display:flex;

  flex-wrap:wrap;

  justify-content:
    flex-end;

  gap:8px;
}


.table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;

  overflow-x:auto;

  -webkit-overflow-scrolling:
    touch;
}


table{
  width:100%;

  min-width:720px;

  border-collapse:
    collapse;
}


th,
td{
  padding:
    15px
    22px;

  text-align:left;

  border-bottom:
    1px solid
    rgba(
      57,
      39,
      74,
      .65
    );

  overflow-wrap:anywhere;
}


th{
  color:#9f8eaf;

  font-size:12px;

  text-transform:
    uppercase;

  letter-spacing:.08em;
}


td{
  font-size:14px;
}


.meeting-row{
  transition:
    background .2s ease;
}


.meeting-row:hover{
  background:
    rgba(
      139,
      92,
      246,
      .035
    );
}


.prospect-name{
  font-weight:750;

  overflow-wrap:anywhere;
}


.badge{
  display:inline-flex;

  align-items:center;

  gap:7px;

  max-width:100%;

  padding:
    6px
    10px;

  border:
    1px solid;

  border-radius:
    999px;

  font-size:12px;

  font-weight:700;

  line-height:1.2;

  white-space:nowrap;
}


.badge::before{
  content:"";

  flex:
    0 0 7px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    currentColor;
}


.held{
  color:
    var(--green);

  background:
    rgba(
      57,
      217,
      138,
      .08
    );

  border-color:
    rgba(
      57,
      217,
      138,
      .26
    );
}


.scheduled{
  color:#c69cff;

  background:
    rgba(
      139,
      92,
      246,
      .1
    );

  border-color:
    rgba(
      139,
      92,
      246,
      .34
    );
}


.rescheduled{
  color:
    var(--yellow);

  background:
    rgba(
      244,
      201,
      93,
      .08
    );

  border-color:
    rgba(
      244,
      201,
      93,
      .28
    );
}


.document-link{
  display:inline-flex;

  align-items:center;

  gap:7px;

  max-width:100%;

  min-height:40px;

  color:#d4b7ff;

  font-size:13px;

  font-weight:750;

  text-decoration:none;

  overflow-wrap:anywhere;
}


.document-link:hover{
  color:#fff;
}


.document-icon{
  flex:
    0 0 26px;

  width:26px;
  height:26px;

  display:inline-grid;

  place-items:center;

  border:
    1px solid
    rgba(
      139,
      92,
      246,
      .22
    );

  border-radius:
    8px;

  background:
    rgba(
      139,
      92,
      246,
      .13
    );
}


.document-pending{
  display:inline-block;

  max-width:100%;

  color:#857691;

  font-size:12px;

  overflow-wrap:anywhere;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-control{
  margin-bottom:16px;
}


label{
  display:block;

  margin-bottom:7px;

  color:#d8cde3;

  font-size:13px;
}


input,
select,
textarea{
  width:100%;
  max-width:100%;

  min-height:46px;

  padding:
    13px
    14px;

  border:
    1px solid
    #3b294c;

  border-radius:
    12px;

  outline:none;

  background:
    #100b16;

  color:#fff;
}


textarea{
  min-height:120px;

  resize:vertical;
}


input:focus,
select:focus,
textarea:focus{
  border-color:
    #9d68f8;

  box-shadow:
    0 0 0 3px
    rgba(
      139,
      92,
      246,
      .14
    );
}


.btn{
  max-width:100%;

  min-height:46px;

  padding:
    13px
    16px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border:0;

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      #a666ff,
      #7137df
    );

  box-shadow:
    0 12px 32px
    rgba(
      124,
      58,
      237,
      .25
    );

  color:#fff;

  font-weight:750;

  text-align:center;

  text-decoration:none;

  cursor:pointer;

  overflow-wrap:anywhere;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.btn:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 16px 38px
    rgba(
      124,
      58,
      237,
      .32
    );
}


.btn.secondary{
  border:
    1px solid
    #49325e;

  background:
    #21172c;

  box-shadow:none;
}


.error,
.success{
  max-width:100%;

  padding:
    12px
    14px;

  margin:
    0
    0
    16px;

  border-radius:
    12px;

  font-size:14px;

  line-height:1.45;

  overflow-wrap:anywhere;
}


.error{
  color:#ff9aa7;

  background:
    rgba(
      255,
      101,
      119,
      .1
    );

  border:
    1px solid
    rgba(
      255,
      101,
      119,
      .3
    );
}


.success{
  color:#8ff0bc;

  background:
    rgba(
      57,
      217,
      138,
      .1
    );

  border:
    1px solid
    rgba(
      57,
      217,
      138,
      .28
    );
}


/* =========================================================
   LOGIN / RESET / FORGOT
   ========================================================= */

.login-page{
  width:100%;
  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  padding:28px;

  display:grid;

  place-items:center;

  overflow-x:hidden;
}


.login-wrap{
  width:min(
    1080px,
    100%
  );

  max-width:100%;
  min-width:0;

  min-height:650px;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(0,.95fr);

  overflow:hidden;

  border:
    1px solid
    rgba(
      154,
      108,
      220,
      .28
    );

  border-radius:
    30px;

  background:
    rgba(
      12,
      8,
      17,
      .82
    );

  box-shadow:
    0 40px 110px
    rgba(
      0,
      0,
      0,
      .48
    );

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


.login-art{
  min-width:0;

  position:relative;

  padding:50px;

  display:flex;

  flex-direction:column;

  justify-content:
    space-between;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(170,93,255,.28),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #1a0d2c,
      #0b0710 68%
    );
}


.login-art::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-160px;
  bottom:-150px;

  border:
    1px solid
    rgba(
      188,
      130,
      255,
      .22
    );

  border-radius:50%;

  box-shadow:
    0 0 80px
    rgba(
      139,
      92,
      246,
      .15
    ),
    inset 0 0 80px
    rgba(
      139,
      92,
      246,
      .12
    );

  animation:
    float
    6s
    ease-in-out
    infinite;
}


@keyframes float{

  50%{
    transform:
      translateY(-18px)
      scale(1.03);
  }

}


.login-form{
  min-width:0;

  padding:55px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  background:
    linear-gradient(
      160deg,
      rgba(25,16,34,.96),
      rgba(12,8,17,.98)
    );
}


/* =========================================================
   ADMIN
   ========================================================= */

.admin-grid{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    minmax(0,380px)
    minmax(0,1fr);

  gap:18px;
}


.form-card{
  min-width:0;

  padding:22px;
}


.nav-count{
  display:inline-grid;

  place-items:center;

  min-width:22px;

  height:22px;

  padding:
    0 6px;

  margin-left:6px;

  border-radius:
    999px;

  background:
    rgba(
      139,
      92,
      246,
      .2
    );

  color:#d8baff;

  font-size:11px;

  font-weight:800;
}


.upload-queue{
  width:100%;
  min-width:0;

  margin:
    18px
    0;
}


.pending-pill{
  display:inline-flex;

  max-width:100%;

  padding:
    7px
    10px;

  border:
    1px solid
    rgba(
      244,
      201,
      93,
      .3
    );

  border-radius:
    999px;

  background:
    rgba(
      244,
      201,
      93,
      .08
    );

  color:
    var(--yellow);

  font-size:12px;

  font-weight:800;
}


.pending-list{
  min-width:0;

  display:grid;
}


.pending-item{
  min-width:0;

  padding:
    17px
    22px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:18px;

  border-bottom:
    1px solid
    rgba(
      57,
      39,
      74,
      .65
    );
}


.pending-item > *{
  min-width:0;
}


.pending-item:last-child{
  border-bottom:0;
}


.pending-prospect{
  margin:
    4px
    0;

  font-size:17px;

  font-weight:750;

  overflow-wrap:anywhere;
}


.queue-empty{
  padding:
    28px
    22px;

  display:grid;

  gap:6px;
}


.staff-card{
  width:100%;
  min-width:0;

  overflow:hidden;
}


.staff-grid{
  min-width:0;

  display:grid;

  grid-template-columns:
    minmax(0,360px)
    minmax(0,1fr);
}


.staff-form{
  min-width:0;

  padding:22px;

  border-right:
    1px solid
    var(--line);
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop{
  position:fixed;

  inset:0;

  z-index:1000;

  padding:
    max(
      20px,
      env(safe-area-inset-top)
    )
    max(
      20px,
      env(safe-area-inset-right)
    )
    max(
      20px,
      env(safe-area-inset-bottom)
    )
    max(
      20px,
      env(safe-area-inset-left)
    );

  display:grid;

  place-items:center;

  background:
    rgba(
      4,
      2,
      7,
      .76
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.modal-backdrop[hidden]{
  display:none;
}


.upload-modal{
  width:min(
    520px,
    100%
  );

  max-width:100%;
  min-width:0;

  max-height:
    calc(
      100dvh - 40px
    );

  overflow:auto;

  position:relative;

  padding:28px;

  border:
    1px solid
    #543470;

  border-radius:
    24px;

  background:
    linear-gradient(
      150deg,
      #1c1127,
      #0d0912
    );

  box-shadow:
    0 35px 120px
    rgba(
      0,
      0,
      0,
      .65
    ),
    0 0 70px
    rgba(
      139,
      92,
      246,
      .15
    );
}


.modal-close{
  position:absolute;

  right:16px;
  top:13px;

  width:44px;
  height:44px;

  display:grid;

  place-items:center;

  border:0;

  background:
    transparent;

  color:#bdaecb;

  font-size:28px;

  cursor:pointer;
}


.pdf-drop{
  max-width:100%;

  padding:18px;

  border:
    1px dashed
    #5f3d7d;

  border-radius:
    16px;

  background:
    rgba(
      139,
      92,
      246,
      .06
    );
}


/* =========================================================
   WELCOME
   ========================================================= */

.welcome{
  width:100%;
  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  display:grid;

  place-items:center;

  padding:
    max(
      30px,
      env(safe-area-inset-top)
    )
    max(
      20px,
      env(safe-area-inset-right)
    )
    max(
      30px,
      env(safe-area-inset-bottom)
    )
    max(
      20px,
      env(safe-area-inset-left)
    );

  text-align:center;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.2),
      transparent 32%
    );
}


.welcome-logo{
  max-width:
    min(
      100%,
      420px
    );

  animation:
    welcomePulse
    1.25s
    ease
    both;
}


@keyframes welcomePulse{

  0%{
    opacity:0;

    transform:
      scale(.88);

    filter:
      blur(9px);
  }

  55%{
    opacity:1;

    transform:
      scale(1.03);

    filter:
      blur(0);
  }

  100%{
    transform:
      scale(1);
  }

}


/* =========================================================
   LARGE TABLETS
   ========================================================= */

@media(
  max-width:1100px
){

  :root{
    --page-pad:26px;
  }


  .grid4{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .admin-grid{
    grid-template-columns:
      minmax(0,1fr);
  }


  .staff-grid{
    grid-template-columns:
      minmax(0,1fr);
  }


  .staff-form{
    border-right:0;

    border-bottom:
      1px solid
      var(--line);
  }

}


/* =========================================================
   ALL TABLETS + MOBILE
   ========================================================= */

@media(
  max-width:900px
){

  .shell{
    display:block;

    width:100%;
    max-width:100%;
  }


  .sidebar{
    display:none;
  }


  .main{
    width:100%;
    max-width:100%;
    min-width:0;

    margin:0;

    padding:
      18px
      max(
        14px,
        env(safe-area-inset-right)
      )
      max(
        22px,
        env(safe-area-inset-bottom)
      )
      max(
        14px,
        env(safe-area-inset-left)
      );

    overflow-x:hidden;
  }


  .topbar{
    width:100%;
    max-width:100%;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:16px;

    margin-bottom:22px;
  }


  .topbar > div{
    width:100%;
    max-width:100%;
    min-width:0;
  }


  .topbar h1{
    width:100%;
    max-width:100%;

    font-size:
      clamp(
        28px,
        7vw,
        38px
      );

    line-height:1.08;

    overflow-wrap:anywhere;
  }


  .topbar .muted{
    font-size:13px;

    line-height:1.5;
  }


  .month-nav{
    width:100%;
    max-width:100%;

    display:grid;

    grid-template-columns:
      46px
      minmax(0,1fr)
      46px;

    gap:8px;
  }


  .month-nav a{
    width:46px;
    height:46px;
  }


  .month-label{
    min-width:0;

    width:100%;

    padding:
      0 6px;

    display:flex;

    align-items:center;

    justify-content:center;

    white-space:normal;

    line-height:1.2;
  }


  .grid4{
    width:100%;
    max-width:100%;
    min-width:0;

    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;
  }


  .metric{
    width:100%;
    max-width:100%;
    min-width:0;

    padding:15px;
  }


  .metric strong{
    font-size:27px;
  }


  .hero{
    width:100%;
    max-width:100%;
    min-width:0;

    padding:18px;
  }


  .hero-head{
    width:100%;
    max-width:100%;
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:12px;
  }


  .hero-copy,
  .hero-percentage{
    width:100%;
    max-width:100%;
    min-width:0;
  }


  .hero-percentage{
    display:flex;

    justify-content:
      space-between;

    align-items:baseline;

    gap:12px;

    text-align:left;
  }


  .progress-track{
    width:100%;
    max-width:100%;
  }


  /*
   * Mobile meeting cards.
   *
   * Critical: desktop's table min-width
   * is explicitly removed here.
   */

  .table-card{
    width:100%;
    max-width:100%;
    min-width:0;

    overflow:visible;

    border:0;

    background:transparent;

    box-shadow:none;
  }


  .table-head{
    width:100%;
    max-width:100%;

    padding:
      0 0 15px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    border-bottom:0;
  }


  .table-head > div{
    width:100%;
    max-width:100%;
    min-width:0;
  }


  .table-status-summary{
    width:100%;
    max-width:100%;

    justify-content:
      flex-start;
  }


  .table-wrap{
    width:100%;
    max-width:100%;
    min-width:0;

    overflow:visible;
  }


  table{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    display:block;
  }


  thead{
    display:none;
  }


  tbody{
    width:100%;
    max-width:100%;

    display:grid;

    gap:12px;
  }


  tr.meeting-row{
    width:100%;
    max-width:100%;
    min-width:0;

    display:block;

    overflow:hidden;

    border:
      1px solid
      var(--line);

    border-radius:
      18px;

    background:
      linear-gradient(
        145deg,
        rgba(27,18,37,.96),
        rgba(15,10,21,.96)
      );

    box-shadow:
      0 12px 32px
      rgba(
        0,
        0,
        0,
        .14
      );
  }


  td{
    width:100%;
    max-width:100%;
    min-width:0;

    min-height:50px;

    position:relative;

    padding:
      13px
      16px
      13px
      45%;

    display:flex;

    align-items:center;

    justify-content:
      flex-end;

    text-align:right;

    border-bottom:
      1px solid
      rgba(
        57,
        39,
        74,
        .5
      );

    overflow-wrap:anywhere;

    word-break:break-word;
  }


  td:last-child{
    border-bottom:0;
  }


  td::before{
    content:
      attr(data-label);

    position:absolute;

    left:16px;

    width:34%;

    color:#9f8eaf;

    font-size:10px;

    line-height:1.3;

    font-weight:700;

    text-align:left;

    text-transform:
      uppercase;

    letter-spacing:.07em;
  }


  .empty-meeting-row{
    display:block;

    width:100%;
  }


  .empty-meeting-row td{
    width:100%;

    padding:18px;

    justify-content:
      flex-start;

    text-align:left;

    border:
      1px solid
      var(--line);

    border-radius:
      16px;

    background:
      linear-gradient(
        145deg,
        rgba(27,18,37,.96),
        rgba(15,10,21,.96)
      );
  }


  .empty-meeting-row td::before{
    display:none;
  }


  .badge{
    white-space:normal;
  }


  .document-link{
    min-height:44px;

    justify-content:
      flex-end;
  }


  .login-wrap{
    grid-template-columns:
      minmax(0,1fr);

    min-height:0;
  }


  .login-art{
    min-height:260px;

    padding:32px;
  }


  .login-form{
    padding:34px;
  }


  .pending-item{
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .upload-modal{
    width:100%;

    padding:
      24px
      18px;

    border-radius:
      20px;

    max-height:
      calc(
        100dvh - 28px
      );
  }

}


/* =========================================================
   PHONES
   ========================================================= */

@media(
  max-width:560px
){

  body{
    background:
      radial-gradient(
        circle at 50% -8%,
        rgba(139,92,246,.20),
        transparent 32%
      ),
      var(--bg);
  }


  .main{
    padding-left:
      max(
        11px,
        env(safe-area-inset-left)
      );

    padding-right:
      max(
        11px,
        env(safe-area-inset-right)
      );
  }


  .grid4{
    gap:8px;
  }


  .metric{
    padding:13px;

    border-radius:
      17px;
  }


  .metric strong{
    font-size:24px;
  }


  .metric-label{
    font-size:11px;
  }


  .metric-caption{
    font-size:10px;
  }


  .hero{
    padding:16px;

    border-radius:
      18px;
  }


  .hero-number{
    font-size:36px;
  }


  .hero-quota{
    font-size:17px;
  }


  .hero-percent-number{
    font-size:27px;
  }


  .table-title{
    font-size:20px;
  }


  .table-subtitle{
    font-size:12px;
  }


  input,
  select,
  textarea,
  .btn{
    min-height:48px;
  }


  .pending-item{
    padding:
      15px
      16px;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(
  max-width:390px
){

  .grid4{
    grid-template-columns:
      minmax(0,1fr);
  }


  .metric strong{
    font-size:27px;
  }


  .topbar h1{
    font-size:25px;
  }


  td{
    padding-left:42%;
  }


  td::before{
    left:12px;

    width:30%;
  }

}


/* =========================================================
   LANDSCAPE PHONE
   ========================================================= */

@media(
  max-width:900px
)
and
(
  orientation:landscape
)
and
(
  max-height:520px
){

  .main{
    padding-top:14px;
  }


  .grid4{
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }


  .metric{
    padding:12px;
  }


  .hero{
    padding:
      14px
      16px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


:focus-visible{
  outline:
    2px solid
    #b379ff;

  outline-offset:
    3px;

  border-radius:
    8px;
}