:root{
  --brand-mint:#a3e8d3;
  --brand-mint-2:#92dec7;
  --brand-purple:#432755;
  --brand-purple-2:#3a244d;

  --ink:#1f2937;
  --muted:#4b5563;
  --bg:#f6f7fb;
  --card:#ffffff;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --shadow-soft: 0 6px 16px rgba(0,0,0,.06);
  --border: rgba(0,0,0,.10);
  --focus: rgba(67,39,85,.25);

  --danger:#b91c1c;
  --ok:#0a7c2f;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--ink);
}

/* локально прибираємо underline, бо глобальний style.css підкреслює a:hover */
.card a, .card a:hover{ text-decoration:none !important; }

.wrap{
  max-width:1100px;
  margin:16px auto;
  padding:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
}

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.title{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--brand-purple);
}
.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  line-height:1.45;
}

/* tabs */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 0;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(67,39,85,.14);
  background: rgba(163,232,211,.18);
  color: var(--brand-purple) !important;
  font-weight:900;
  font-size:13px;
  box-shadow: 0 8px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .15s ease;
  user-select:none;
}
.tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
  filter: saturate(1.05);
}
.tab--active{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background: linear-gradient(180deg, var(--brand-purple), var(--brand-purple-2));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 18px rgba(67,39,85,.16);
}
.tab--active:hover{
  box-shadow: 0 14px 24px rgba(67,39,85,.22);
}

/* alerts */
.alert{
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  font-size:13px;
  line-height:1.55;
  margin: 12px 0 0;
  border: 1px solid transparent;
}
.alert--error{background: rgba(185,28,28,.08); color: var(--danger); border-color: rgba(185,28,28,.18);}
.alert--ok{background: rgba(10,124,47,.10); color: var(--ok); border-color: rgba(10,124,47,.18);}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .15s ease;
  text-decoration:none !important;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: linear-gradient(180deg, var(--brand-purple), var(--brand-purple-2));
  color:#fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 18px rgba(67,39,85,.16);
}
.btn--primary:hover{ box-shadow: 0 14px 24px rgba(67,39,85,.22); filter:saturate(1.05); }

.btn--danger{
  background: linear-gradient(180deg, #b91c1c, #991b1b);
  color:#fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 18px rgba(185,28,28,.18);
}
.btn--danger:hover{ box-shadow: 0 14px 24px rgba(185,28,28,.22); filter:saturate(1.05); }

.btn--ghost{
  background: rgba(163,232,211,.18);
  color: var(--brand-purple) !important;
  border: 1px solid rgba(67,39,85,.14);
  box-shadow: 0 8px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);
  filter: saturate(1.05);
}
.btn--ghost:active{ transform: translateY(1px); }

.is-disabled{
  pointer-events:none;
  opacity:.45;
  filter: grayscale(0.4);
}

/* tables */
.table-wrap{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-soft);
}
.messages-list{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  font-size:14px;
}
.messages-list th,.messages-list td{
  padding:12px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  vertical-align:middle;
}
.messages-list th{
  background: linear-gradient(135deg, rgba(67,39,85,.96) 0%, rgba(67,39,85,.86) 100%);
  color:#fff;
  font-weight:900;
  text-align:left;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.messages-list tr:last-child td{border-bottom:none;}

.messages-list tr.unread td{
  font-weight:900;
  background: rgba(163,232,211,.16);
}

.msg-link{
  color: var(--brand-purple) !important;
  font-weight: 900;
  line-height:1.25;
}
.msg-link:hover{
  color: var(--brand-purple-2) !important;
}

.muted{ color: var(--muted); font-weight:700; font-size:13px; }

/* message view */
.msg-view{
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow: var(--shadow-soft);
  padding:14px 14px;
}
.msg-view__subject{
  font-weight:1000;
  color: var(--brand-purple);
  font-size:16px;
  margin:0 0 8px;
  line-height:1.25;
}
.msg-view__meta{
  font-size:13px;
  color: var(--muted);
  font-weight:700;
  line-height:1.55;
  margin-bottom:10px;
}
.msg-view__body{
  white-space:pre-wrap;
  font-weight:700;
  color: var(--ink);
  line-height:1.55;
  margin-bottom:10px;
}

/* attachments */
.attachments-title{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}
.attachments-list{ list-style:none; margin:0; padding:0; }
.attachments-list li{ margin:0 0 10px; }
.attachments-list a{ color: var(--brand-purple) !important; font-weight:900; }
.attachments-list a:hover{ color: var(--brand-purple-2) !important; }

.attachments-thumb{
  margin-top:6px;
  display:block;
}
.attachments-thumb img{
  max-width:220px;
  max-height:160px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-soft);
  display:block;
  background:#fff;
}

/* forms */
.form{
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow: var(--shadow-soft);
  padding:14px 14px;
}
.form__row{ margin-bottom:12px; }
.form__label{
  display:block;
  font-size:13px;
  font-weight:900;
  margin-bottom:6px;
  color: var(--brand-purple);
}
.form__input,.form__select,.form__textarea{
  width:100%;
  padding:12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  font-size:15px;
  background:#fff;
  color: var(--ink);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form__input:focus,.form__select:focus,.form__textarea:focus{
  border-color: rgba(67,39,85,.35);
  box-shadow:0 0 0 4px var(--focus);
}
.form__textarea{ min-height:110px; resize:vertical; }

/* top spacing inside card */
.stack{ margin-top:12px; }

/* search bar */
.searchbar{
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow: var(--shadow-soft);
  padding:12px 12px;
}
.searchbar__row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.searchbar__input{
  flex:1 1 260px;
  min-width:220px;
  padding:12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  font-size:15px;
  outline:none;
}
.searchbar__input:focus{
  border-color: rgba(67,39,85,.35);
  box-shadow:0 0 0 4px var(--focus);
}
.searchbar__hint{
  margin-top:8px;
}

/* pager */
.pager{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.pager__buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* mobile: ховаємо дату в таблицях */
@media (max-width:700px){
  .wrap{padding:12px}
  .card{padding:16px;border-radius:14px}
  .messages-list th:nth-child(3),
  .messages-list td:nth-child(3){display:none;}
}

/* mobile: таблиця як картки для читабельності */
@media (max-width:520px){
  .table-wrap{ border:0; box-shadow:none; overflow:visible; }
  .messages-list{ border-collapse:separate; border-spacing:0 12px; table-layout:auto; background:transparent; }
  .messages-list thead{ display:none; }
  .messages-list tbody tr{
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:16px;
    box-shadow: var(--shadow-soft);
    padding:12px;
  }
  .messages-list td{
    border:0;
    padding:0;
  }
  .messages-list td:nth-child(1){
    font-weight:900;
    color: var(--brand-purple);
  }
  .messages-list td:nth-child(2) a{
    display:inline-block;
    font-weight:1000;
  }
  .messages-list td:nth-child(3){
    display:block;
    font-size:12px;
    color: var(--muted);
    font-weight:800;
  }

  .tabs{ gap:8px; }
  .tab{ width:100%; }
  .btn{ width:100%; }

  .pager{align-items:stretch;}
  .pager__buttons .btn{width:100%;}
}