.b-video {
      width: 50vh;
      height: auto;
      position: relative;
      overflow: hidden;
}
.viedeo__file{
    width: 100%;
    height: 100%;
}

.upload-progress {
  max-width: 640px;
  margin: 1rem auto .5rem;
  padding: .75rem;
  background: #657b83;
  border: 1px solid rgba(255, 193, 7, .55);
  border-radius: 10px;
  box-shadow: 0 .15rem .35rem rgba(0, 0, 0, .18);
}

.upload-progress .progress {
  height: 1.35rem;
  background: #e8faff;
  border: 1px solid rgba(0, 43, 54, .28);
  border-radius: 7px;
}

.upload-progress .progress-bar {
  background-color: #ffc107;
  color: #002b36;
  font-weight: 700;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
}

.upload-progress-details {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .35rem;
  color: #e8faff;
  font-size: .9rem;
}

#UploadStatus:not(:empty) {
  max-width: 640px;
  margin: .5rem auto 0;
  padding: .5rem .75rem;
  color: #002b36;
  background: #e8faff;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .upload-progress-details {
    flex-direction: column;
    gap: .15rem;
    text-align: left;
  }
}



.parent {
  display: flex;
/*  border: 2px solid red; */
  height: auto;
  line-height: 26px;
}
.child {
  display: block;
/*  border: 2px solid blue; */
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  flex: 1;
}


/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}





.zebra{
	width: 70%;
	margin: 20px auto;
	border-collapse: collapse;
}
.zebra th{
	background: #555;
	color: #fff;
	text-align: left;
}
.zebra .foot{
	background: #d5d5d5;
	color: #000;
	text-align: left;
}
.zebra input{
	width: 100%;
	transition: all .5s;
}
.zebra input:focus{
	box-shadow: 0 0 5px #000;
}
.zebra th,
.zebra td{
	border-bottom: 1px solid #ccc; padding: 5px; vertical-align: middle; padding: 12px 5px;
}
.zebra tr{
	transition: all .5s;
}
.zebra tr:hover{
	/*background: #f1f1f1;*/
}

.edit{
	padding: 3px;
	transition: all .5s;
	border: 1px solid rgba(82, 168, 236, .5);
}
.edit:focus{
	border: 1px solid rgba(82, 168, 236, 1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.9);
	outline: 0 none;
}

#loader{
 position:fixed;
 display:none;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background:#f2f2f2;
 opacity:.9;
 z-index: 30;
}
#loader span{
 display: block;
 width: 64px;
 height: 64px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -32px 0 0 -32px;
 border: 6px solid #d8e0e3;
 border-top-color: #ffc107;
 border-radius: 50%;
 animation: loader-spin .8s linear infinite;
}

@keyframes loader-spin { to { transform: rotate(360deg); } }
#mes-edit{
 display: none;
 color: #000;
 font-size: 15px;
 border: 1px solid #ccc;
 box-shadow: 0 0 10px #ccc;
 padding: 10px;
 text-align: center;
 width: 400px;
 position: fixed;
 left: 50%;
 top: 50%;
 margin: -20px 0 0 -200px;
 font-weight: bold;
 background: #fff;
}



.chat__header {
  text-align: center;
}

.chat-directory,
.chat-page {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.chat-directory__header,
.chat-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  color: #e8faff;
  background: #657b83;
  border-radius: 10px;
}

.chat-directory__header h2,
.chat-directory__header p,
.chat-page__title h2 {
  margin: 0;
}

.chat-directory__header p {
  margin-top: .25rem;
  opacity: .85;
}

.chat-create {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #e8faff;
  border-left: 4px solid #ffc107;
  border-radius: 10px;
}

.chat-create form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: .75rem;
}

.chat-create label {
  display: none;
}

.chat-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .75rem;
}

.chat-room-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  color: #002b36;
  background: #fff;
  border: 1px solid #d8e0e3;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.chat-room-card:hover {
  color: #002b36;
  transform: translateY(-2px);
  box-shadow: 0 .25rem .7rem rgba(0, 43, 54, .14);
}

.chat-room-card__icon {
  display: grid;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #002b36;
  background: #ffc107;
  border-radius: 50%;
}

.chat-room-card small {
  display: block;
  color: #657b83;
}

.chat-page__title {
  flex: 1;
}

.chat-access-badge {
  font-size: .85rem;
  opacity: .85;
}

.chat-status {
  min-height: 1.5rem;
  color: #657b83;
  text-align: center;
}

.chat-message-list {
  display: flex;
  min-height: 40vh;
  max-height: 65vh;
  flex-direction: column;
  gap: .65rem;
  overflow-y: auto;
  padding: 1rem;
  background: #e8faff;
  border-radius: 10px;
}

.chat-bubble {
  align-self: flex-start;
  max-width: min(78%, 720px);
}

.chat-bubble--own {
  align-self: flex-end;
}

.chat-bubble__meta {
  display: flex;
  gap: .5rem;
  margin: 0 .35rem .2rem;
  color: #657b83;
  font-size: .75rem;
}

.chat-bubble--own .chat-bubble__meta {
  justify-content: flex-end;
}

.chat-bubble__text {
  padding: .65rem .8rem;
  color: #002b36;
  background: #fff;
  border-radius: 4px 10px 10px 10px;
  overflow-wrap: anywhere;
}

.chat-bubble--own .chat-bubble__text {
  background: #ffc107;
  border-radius: 10px 4px 10px 10px;
}

.chat-compose {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  padding: .75rem;
  background: #657b83;
  border-radius: 10px;
}

.chat-empty {
  margin: auto;
  color: #657b83;
}

@media (max-width: 640px) {
  .chat-create form {
    grid-template-columns: 1fr;
  }

  .chat-directory__header,
  .chat-page__header {
    align-items: flex-start;
  }

  .chat-bubble {
    max-width: 92%;
  }
}

.chat__item {
  display: flex;
  align-items: flex-start;
}

.chat__person-avatar {
  border-radius: 50%;
}

.chat__messages {
  margin-left: 10px;
}

.chat__message {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.chat__message-content {
  border-radius: 5px;
  padding: 7px;
  background-color: #ccc;
  display: inline-block;
  color: #657b83;
  margin-left: 5px;
}

.chat__item--responder {
  flex-direction: row-reverse;
}

  .chat__item--responder .chat__message {
    flex-direction: row-reverse;
  }

  .chat__item--responder .chat__message-content {
    margin-left: 0;
    margin-right: 5px;
  }













.parent {
  line-height: 26px;
  overflow: auto; /* Это чтобы родитель не терял высоту */
}
.child {
  display: block;
  float: left;
}
/* Растягиваем второй блок на максимальнуцю ширину */
.child.max {
  float: none;
  overflow: auto;
}


/*pre {*/
/*     font-size: 10pt;*/
/*     font-family: Arial,sans-serif;*/
/*     border-radius: 10px;*/
/*     white-space: pre-wrap;*/
/*     white-space: -moz-pre-wrap;*/
/*     white-space: -pre-wrap;*/
/*     white-space: -o-pre-wrap;*/
/*     background: #002b36;*/
/*     color: #ffc107;*/
/*     padding:10px;*/
/*}*/

wenote {
     border:#a0a0c0 1px solid; 
     border-radius: 10px;
     background:#e8faff; 
     color: red;
     margin:10px 0 10px 30px;
     padding:10px;
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     word-wrap: break-word;
}

.11btn {
    background-color: #2196F3;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    outline: none;
}

.dropdown {
    position: absolute;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {backgroaund-color: #ddd}

.dropdown:hover .dropdown-content {
    display: block;
}

.11btn:hover, .dropdown:hover .btn {
    background-color: #0b7dda;
}


/*
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: -5px;
    }
*/


/* Интересный футер */

main {
  /* make sure to cover the screen */
  min-height: 100vh;

  /* need a solid bg to hide the footer */
  background: #f6f7f8;

  /* put on top */
  position: relative;
  z-index: 1;

  font: 16px/1.4 system-ui, sans-serif;
  padding: 2px;
}
footer {
  /* place on the bottom */
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #252a47;
  display: grid;
  place-items: center;
  padding: 5px;
}

.site-footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem;
  color: #e8faff;
  font-size: .85rem;
}

.site-footer__content small {
  display: block;
  opacity: .7;
}

.site-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.release-badge {
  display: inline-block;
  margin-top: .35rem;
  padding: .3rem .65rem;
  color: #002b36;
  background: #ffc107;
  border-radius: 999px;
  font-weight: 600;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/*p {*/
/*  max-width: 600px;*/
/*  margin: 0 auto 1rem;*/
/*}*/

.chat__message-time {
     color: silver;
     font-size: 8pt;
     font-family: Arial,sans-serif;
}

blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
/*    padding:20px;*/
    padding-left: 15px;
    border-left: 3px solid #F63;
}


blockquote p { position: relative; }

blockquote p:before {
/*content: '"';*/
font-size: 30px;
position:absolute;
/*        top:-15px;*/
        left:0px;
}

blockquote p:after {
/*content: '"';*/
font-size: 30px;
        position:absolute;
/*        bottom:-30px;*/
        left:0px;
}

code {
     display: inline-block;
     font-size: 12pt;
     font-family: "Lucida Console", "Courier New", monospace;
     border-radius: 6px;
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     background: #002b36;
     color: #ffc107;
     padding:6px;
}


.info {
     color: gray;
     font-size: 8pt;
     font-family: Arial,sans-serif;
}

/* Unified navigation and legacy component overrides. */
.site-nav .dropdown {
  position: relative;
}

.site-nav .dropdown-content {
  top: calc(100% + .35rem);
  right: 0;
  min-width: 190px;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.site-nav .dropdown--open .dropdown-content {
  display: block;
}

.site-nav .dropdown-content a,
.site-nav .dropdown-content button {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 7px;
  text-align: left;
  text-decoration: none;
}

.site-nav .dropdown-content a:hover,
.site-nav .dropdown-content button:hover {
  background: var(--mist);
}

.site-footer a {
  color: var(--mist);
  opacity: .8;
}

.site-footer a:hover {
  color: var(--accent);
  opacity: 1;
}

.divTableHeading {
  color: var(--mist);
  background: var(--slate);
}

.divTableFoot {
  color: var(--ink);
  background: var(--mist);
}

@media (max-width: 767px) {
  .site-nav {
    align-items: stretch;
  }

  .site-nav__actions {
    justify-content: center;
  }

  .site-nav > div:last-child {
    text-align: center;
  }
}

/* 2026 interface clarity pass: compact navigation and explicit actions. */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  min-height: 0;
  flex: 1 0 auto;
  padding: 0;
}

footer {
  position: static;
  flex: 0 0 auto;
}

.site-header {
  padding: .5rem 0 0;
  background: color-mix(in srgb, var(--canvas) 90%, transparent);
  backdrop-filter: blur(10px);
}

.site-nav {
  min-height: 3.75rem;
  padding: .45rem .55rem;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  color: var(--mist) !important;
  text-decoration: none;
}

.site-nav__brand > span {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 9px;
  place-items: center;
}

.site-nav__brand img,
.institution-seal img,
.institution-about__seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.site-nav__brand img {
  transform: scale(1.04);
}

.site-nav__brand strong {
  letter-spacing: .01em;
}

.site-nav__actions {
  flex-wrap: nowrap;
  margin-left: auto;
}

.nav-item {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: .4rem;
  padding: .45rem .65rem;
  color: color-mix(in srgb, var(--mist) 82%, transparent) !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}

.nav-item:hover {
  color: var(--mist) !important;
  background: rgba(255, 255, 255, .11);
}

.nav-item--active {
  color: var(--accent-contrast) !important;
  background: var(--accent);
}

.nav-item--active:hover {
  color: var(--accent-contrast) !important;
  background: var(--accent-dark);
}

.profile-button {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: .4rem;
  padding: .45rem .65rem;
  white-space: nowrap;
}

.auth-link {
  min-height: 2.65rem;
  padding: .5rem .75rem;
}

.page-heading {
  padding: .85rem 1rem;
}

.page-heading__icon {
  flex-basis: 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 10px;
}

.page-action-bar {
  min-height: 0;
  justify-content: flex-start;
  padding: .5rem 0;
  background: transparent !important;
  border: 0;
}

.note-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.note-card__body {
  min-width: 0;
  flex: 1;
}

.note-card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.note-card h2 a {
  color: var(--ink) !important;
  text-decoration: none;
}

.note-card h2 a:hover {
  color: var(--accent) !important;
}

.note-card p {
  margin: .3rem 0;
  opacity: .78;
}

.note-card small {
  opacity: .58;
}

.note-card > .btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
}

.profile-section {
  margin-bottom: 1rem;
  padding: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .06);
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.profile-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  min-height: 6rem;
  padding: 1rem;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .06);
}

.profile-action-card:hover,
.profile-action-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.profile-action-card__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 12px;
  place-items: center;
}

.profile-action-card strong,
.profile-action-card small { display: block; }
.profile-action-card strong { margin-bottom: .2rem; }
.profile-action-card small { opacity: .68; line-height: 1.35; }
.profile-action-card > .fa-chevron-right { opacity: .42; }

.profile-action-card__count {
  min-width: 1.65rem;
  padding: .15rem .4rem;
  color: var(--accent-contrast);
  text-align: center;
  background: var(--accent);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

.profile-section--modal,
.theme-settings--modal {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.modal-intro { margin: 0 0 1rem; opacity: .72; }

@media (max-width: 900px) {
  .profile-actions { grid-template-columns: 1fr; }
  .profile-action-card { min-height: 4.75rem; }
}

@media (max-width: 540px) {
  .profile-action-card { padding: .8rem; }
  .profile-action-card__icon { width: 2.4rem; height: 2.4rem; }
  .profile-field { grid-template-columns: 1fr; }
  .profile-field .btn { width: 100%; }
}

.profile-fields,
.session-list {
  display: grid;
  gap: .6rem;
  margin-top: 1rem;
}

.profile-field {
  display: grid;
  grid-template-columns: minmax(8rem, .35fr) minmax(12rem, 1fr);
  align-items: center;
  gap: .65rem;
}

.profile-data-actions { justify-content: flex-end; }

.profile-field label {
  font-weight: 650;
}

.profile-field input {
  min-height: 2.65rem;
  padding: .5rem .65rem;
}

.profile-feedback {
  min-height: 1.4rem;
  margin: .65rem 0 0;
  font-size: .85rem;
}

.profile-feedback[data-state="success"] {
  color: #218739;
}

.profile-feedback[data-state="error"] {
  color: var(--danger);
}

.session-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  padding: .75rem;
  cursor: pointer;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.session-card:hover {
  border-color: var(--accent);
}

.session-card--current {
  cursor: default;
  border-left: 4px solid var(--accent);
}

.session-card__select {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.15rem;
}

.session-card__body,
.session-card__body strong,
.session-card__body small,
.session-card__body > span {
  display: block;
  min-width: 0;
}

.session-card__body small {
  margin-top: .1rem;
  opacity: .65;
}

.session-card__body > span {
  margin-top: .2rem;
  overflow: hidden;
  opacity: .55;
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-actions {
  justify-content: space-between;
  margin-bottom: 0;
}

.action-hint {
  opacity: .68;
  font-size: .8rem;
}

@media (max-width: 991px) {
  .site-nav__brand strong,
  .nav-item span,
  .profile-button span {
    display: none;
  }

  .nav-item {
    width: 2.65rem;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
  }
}

@media (max-width: 575px) {
  .site-header {
    position: static !important;
  }

  .site-nav {
    align-items: center;
  }

  .site-nav__brand {
    display: none;
  }

  .site-nav__actions {
    width: 100%;
    justify-content: space-between;
    overflow: visible;
  }

  .site-nav .dropdown-content {
    position: fixed;
    top: 4.35rem;
    right: .75rem;
    left: auto;
    z-index: 100;
    width: min(18rem, calc(100vw - 1.5rem));
  }

  .site-nav .dropdown--open .profile-button .fa-angle-down {
    transform: rotate(180deg);
  }

  .profile-field {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .profile-field .btn {
    justify-self: stretch;
  }

  .note-card {
    align-items: stretch;
    flex-direction: column;
  }

  .note-card > .btn {
    justify-content: center;
  }

  .session-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* One-to-one WebRTC calls. */
.call-network-note {
  display: flex;
  gap: .65rem;
  margin: .75rem 0;
  padding: .7rem .85rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-size: .84rem;
}

.call-network-note span,
.call-network-note strong { display: block; }

.call-directory,
.call-stage {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.call-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}

.call-contact {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.call-contact__avatar {
  display: grid;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
}

.call-contact__body { min-width: 0; flex: 1; }
.call-contact__body strong,
.call-contact__body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-contact__body small { opacity: .6; }
.call-contact .btn { display: inline-flex; align-items: center; gap: .4rem; }
.call-contact__avatar { position: relative; }
.call-presence { position: absolute; right: -.05rem; bottom: -.05rem; width: .72rem; height: .72rem; border: 2px solid var(--surface, #fff); border-radius: 50%; background: #98a1aa; }
.call-contact--online { border-color: rgba(35, 169, 89, .42); }
.call-contact--online .call-presence { background: #23a959; box-shadow: 0 0 0 3px rgba(35, 169, 89, .12); }
.call-contact--online [data-call-status] { color: #168542; opacity: 1; }
.call-contact .btn:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .55; }
.call-history { margin-top: 1.5rem; }
.call-history__list { display: grid; gap: .55rem; }
.call-history__item { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--border-color, #dfe3e7); border-radius: 10px; background: var(--surface, #fff); }
.call-history__item--unseen { border-left: 4px solid #dc3545; background: rgba(220, 53, 69, .06); }
.call-history__item > i { width: 1.6rem; text-align: center; opacity: .65; }
.call-history__item > span { min-width: 0; flex: 1; }
.call-history__item strong, .call-history__item small { display: block; }
.call-history__item small { opacity: .62; }
.call-history__status { font-size: .75rem; font-style: normal; font-weight: 700; }
.call-history__status--missed { color: #dc3545; }
.call-history__status--answered { color: #168542; }
.call-history__delete { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 50%; opacity: .65; }
.call-history__delete:hover, .call-history__delete:focus-visible { color: #dc3545; background: rgba(220, 53, 69, .1); opacity: 1; }
.call-history__delete:disabled { opacity: .3; }
.nav-item { position: relative; }
.nav-badge { position: absolute; top: .15rem; right: .15rem; display: grid; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; place-items: center; border: 2px solid var(--header-bg, #fff); border-radius: 999px; background: #dc3545; color: #fff; font-size: .61rem; line-height: 1; }
.nav-badge[hidden] { display: none; }
.dm-unread { display: grid; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; margin-left: auto; place-items: center; border-radius: 999px; background: var(--accent, #0d6efd); color: #fff; font-size: .7rem; }

/* User-collapsible page chrome. */
[data-compact-panel] { position: relative; }
[data-compact-panel][hidden],
.compact-panel-toggle[hidden] { display: none !important; }
.compact-panel-host { position: relative; }
.compact-panel-tools {
  display: flex;
  position: absolute;
  z-index: 80;
  top: 0;
  right: 0;
  transform: translateX(calc(100% + .45rem));
  justify-content: flex-end;
  gap: .35rem;
  margin: 0;
}
.compact-panel-tools[hidden] { display: none; }
.compact-panel-close {
  display: grid;
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  place-items: center;
  color: var(--muted, #6c757d);
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: .62;
}
.compact-panel-close:hover { color: var(--ink); background: var(--mist); opacity: 1; }
.compact-panel-toggle {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--muted, #6c757d);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dfe3e7);
  border-radius: 50%;
  box-shadow: 0 .15rem .4rem rgba(0,0,0,.08);
}
.compact-panel-toggle:hover { color: var(--accent); border-color: var(--accent); }
.page-heading[data-compact-panel],
.call-network-note[data-compact-panel],
.e2ee-notice[data-compact-panel] { padding-right: 2.6rem; }

@media (max-width: 1249px) {
  .compact-panel-tools {
    position: fixed;
    z-index: 120;
    top: calc(4.5rem + env(safe-area-inset-top, 0px));
    right: max(.45rem, env(safe-area-inset-right, 0px));
    transform: none;
    padding: .25rem;
    background: var(--surface, #fff);
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
    border: 1px solid var(--border, #dfe3e7);
    border-radius: 999px;
    box-shadow: 0 .25rem .8rem rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
  }

  .compact-panel-tools .compact-panel-toggle {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* Ephemeral P2P streams. */
.stream-create-card { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stream-create-card > div { min-width: 0; flex: 1; }
.stream-create-card strong, .stream-create-card small { display: block; }
.stream-create-card small { color: var(--muted); }
.stream-create-card form { display: flex; gap: .5rem; }
.stream-create-card input { min-width: min(20rem, 45vw); padding: .55rem .7rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.stream-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.stream-card { display: flex; align-items: center; gap: .7rem; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.stream-card > div { min-width: 0; flex: 1; }
.stream-card strong, .stream-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-card small { color: var(--muted); }
.stream-card__live { display: inline-flex; padding: .2rem .42rem; color: #fff; background: #dc3545; border-radius: 5px; font-size: .65rem; font-weight: 800; letter-spacing: .04em; }
.stream-stage { display: grid; height: 100%; min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); grid-template-rows: auto minmax(0, 1fr); }
.stream-stage__header { display: grid; align-items: center; gap: .75rem; padding: .65rem .8rem; border-bottom: 1px solid var(--border); grid-template-columns: minmax(0, 1fr) auto; }
.stream-stage__identity, .stream-stage__actions { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.stream-stage__title { display: grid; min-width: 0; }
.stream-stage__title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-stage__title small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.stream-layout { display: grid; height: 100%; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) 320px; }
.stream-video { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #080b0d; }
.stream-video video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; background: #080b0d; }
.stream-stage__audience { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .45rem .7rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); white-space: nowrap; }
.stream-stage__audience strong { color: var(--text-color); }
.stream-video > div { display: grid; position: absolute; inset: 0; color: #fff; place-items: center; align-content: center; gap: .6rem; background: #080b0d; }
.stream-video > div[hidden] { display: none; }
.stream-chat { display: grid; min-height: 0; grid-template-rows: auto 1fr auto; border-left: 1px solid var(--border); }
.stream-chat > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
.stream-chat > header small { color: var(--muted); font-size: .72rem; text-align: right; }
.stream-comments { min-height: 0; overflow-y: auto; padding: .7rem; }
.stream-comment { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.stream-comment strong, .stream-comment span { display: block; overflow-wrap: anywhere; }
.stream-comment strong { color: var(--accent); font-size: .76rem; }
.stream-comment--system { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .76rem; font-style: italic; }
.stream-comment--system span { display: inline; }
.stream-chat form { display: flex; gap: .4rem; padding: .65rem; border-top: 1px solid var(--border); }
.stream-chat textarea { min-width: 0; flex: 1; resize: none; padding: .55rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.public-stream-page { padding-top: 1rem; padding-bottom: 1rem; }
.public-stream-page > .alert { margin-bottom: .75rem; }
.public-stream-stage { height: min(78dvh, 820px); min-height: 520px; }

@media (max-width: 767px) {
  .stream-create-card { align-items: stretch; flex-direction: column; }
  .stream-create-card form { align-items: stretch; flex-direction: column; }
  .stream-create-card input { min-width: 0; width: 100%; }
  .stream-modal__dialog { height: calc(100dvh - 2rem); }
  .stream-layout { grid-template-columns: 1fr; grid-template-rows: minmax(130px, 42%) minmax(0, 1fr); }
  .stream-video { min-height: 0; }
  .stream-chat { min-height: 0; overflow: hidden; border-top: 1px solid var(--border); border-left: 0; }
  .stream-chat form { padding-bottom: max(.65rem, env(safe-area-inset-bottom, 0px)); }
  .stream-stage__header { gap: .45rem; padding: .5rem .55rem; }
  .stream-stage__title small { display: none; }
  .stream-stage__actions { gap: .35rem; }
  .public-stream-page { padding: 0; }
  .public-stream-stage { height: calc(100dvh - 4.25rem); min-height: 0; border-radius: 0; }
}

@media (max-width: 480px) {
  .stream-stage__header { grid-template-columns: minmax(0, 1fr) auto; }
  .stream-stage__actions .btn { width: 2.35rem; height: 2.35rem; padding: 0; }
  .stream-stage__actions .btn > span, .stream-stage__audience-label { display: none; }
  .stream-stage__audience { min-width: 2.75rem; justify-content: center; padding: .4rem .5rem; }
  .stream-layout { grid-template-rows: minmax(120px, 40%) minmax(0, 1fr); }
}

.call-stage { padding: 0; overflow: hidden; }
.call-stage__header {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
}
.call-stage__header strong,
.call-stage__header small { display: block; }
.call-stage__header small { margin-top: .15rem; opacity: .65; }
.call-stage__network { display: flex; align-items: center; gap: .45rem; }
.call-security { padding: .25rem .5rem; color: var(--accent-contrast); background: var(--accent); border-radius: 999px; font-size: .72rem; }
.call-quality { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; white-space: nowrap; }
.call-quality--good { color: #19692c; background: #e8f5eb; border-color: #a9d7b3; }
.call-quality--fair { color: #765400; background: #fff4cf; border-color: #e7cf7c; }
.call-quality--poor { color: #a3202d; background: #fdebed; border-color: #e9abb1; }
.call-stats { display: flex; align-items: stretch; gap: 0; padding: 0 .85rem; background: var(--canvas); border-bottom: 1px solid var(--border); overflow-x: auto; }
.call-stats > span, .call-stats > label { display: grid; min-width: 7rem; gap: .05rem; padding: .45rem .75rem; border-right: 1px solid var(--border); }
.call-stats b { color: var(--muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
.call-stats em { color: var(--ink); font-size: .78rem; font-style: normal; white-space: nowrap; }
.call-stats select { min-width: 5.25rem; padding: .15rem 1.4rem .15rem .35rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-size: .78rem; }

.call-video-grid {
  position: relative;
  min-height: min(65vh, 680px);
  background: #080b0d;
}

.call-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #080b0d; }
.call-video > span { position: absolute; left: .55rem; bottom: .45rem; padding: .2rem .45rem; color: #fff; background: rgba(0,0,0,.55); border-radius: 6px; font-size: .72rem; }
.call-video--remote { position: absolute; inset: 0; }
.call-video--local { position: absolute; right: 1rem; bottom: 1rem; width: min(28%, 220px); aspect-ratio: 4 / 3; overflow: hidden; background: #1c2428; border: 2px solid rgba(255,255,255,.8); border-radius: 12px; box-shadow: 0 .4rem 1rem rgba(0,0,0,.35); }

.call-controls { display: flex; justify-content: center; gap: .65rem; padding: .75rem; background: var(--surface); }
.call-control { display: grid; min-width: 5rem; gap: .2rem; padding: .55rem .75rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; place-items: center; }
.call-control span { font-size: .7rem; }
.call-control--off { color: #fff; background: var(--slate); }
.call-control--end { color: #fff; background: var(--danger); border-color: var(--danger); }
.call-control--end .fa { transform: rotate(135deg); }

.ui-modal__dialog--call {
  width: min(100%, 460px);
  overflow: hidden;
  transition: width .2s ease;
}

.ui-modal__dialog--call-active {
  width: min(96vw, 1400px);
  max-height: calc(100dvh - 2rem);
}

.call-ringing {
  display: grid;
  min-height: 430px;
  padding: 2rem 1.5rem 1.5rem;
  place-items: center;
  align-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    var(--surface);
}

.call-ringing[hidden] { display: none; }
.call-ringing small { color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.call-ringing h2 { max-width: 100%; margin: .45rem 0 .25rem; overflow: hidden; font-size: clamp(1.45rem, 5vw, 2rem); text-overflow: ellipsis; white-space: nowrap; }
.call-ringing p { min-height: 1.5rem; margin: 0; color: var(--muted); }
.call-ringing__pulse {
  display: grid;
  width: 6rem;
  height: 6rem;
  margin-bottom: 1.35rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent);
  place-items: center;
  font-size: 2rem;
  animation: call-ring-pulse 1.8s ease-out infinite;
}

.call-ringing__actions { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; }
.call-ringing__action {
  display: grid;
  min-width: 5.25rem;
  gap: .45rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  place-items: center;
  text-decoration: none;
}
.call-ringing__action i { display: grid; width: 3.75rem; height: 3.75rem; color: #fff; border-radius: 50%; place-items: center; font-size: 1.2rem; }
.call-ringing__action span { font-size: .78rem; font-weight: 700; }
.call-ringing__action--reject i { background: var(--danger); transform: rotate(135deg); }
.call-ringing__action--accept i { background: #168542; }
.call-ringing__action:disabled { cursor: wait; opacity: .55; }

@keyframes call-ring-pulse {
  65% { box-shadow: 0 0 0 1.25rem transparent; }
  100% { box-shadow: 0 0 0 1.25rem transparent; }
}

.incoming-call {
  position: fixed;
  z-index: 180;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  width: min(420px, calc(100vw - 2rem));
  align-items: center;
  gap: .65rem;
  padding: .8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.3);
}
.incoming-call[hidden] { display: none; }
.incoming-call__icon { display: grid; flex: 0 0 2.75rem; height: 2.75rem; color: var(--accent-contrast); background: var(--accent); border-radius: 50%; place-items: center; }
.incoming-call > div { min-width: 0; flex: 1; }
.incoming-call small,
.incoming-call strong { display: block; }
.incoming-call .btn { display: grid; width: 2.65rem; height: 2.65rem; padding: 0; border-radius: 50%; place-items: center; }
.incoming-call .btn-danger .fa { transform: rotate(135deg); }

@media (max-width: 575px) {
  .call-contact-grid { grid-template-columns: 1fr; }
  .call-contact .btn span { display: none; }
  .call-video-grid { min-height: 55vh; }
  .call-video--local { right: .65rem; bottom: .65rem; width: 34%; }
  .call-control { min-width: 0; flex: 1; padding-inline: .35rem; }
  .call-stage__header { align-items: flex-start; }
  .call-security { display: none; }
  .call-quality > span { display: none; }
  .call-stats { padding-inline: 0; }
  .call-stats > span, .call-stats > label { min-width: 6rem; padding-inline: .55rem; }
  .call-ringing { min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .call-ringing__pulse { animation: none; }
}

/* Institutional identity. */
.institution-seal,
.institution-about__seal {
  display: inline-grid;
  width: 4.25rem;
  height: 4.25rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border: .35rem double color-mix(in srgb, var(--accent-contrast) 38%, transparent);
  border-radius: 50%;
  overflow: hidden;
  place-items: center;
  font-size: 1.45rem;
}

.institution-abbr {
  display: block;
  margin: .7rem 0 .25rem;
  opacity: .72;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-card .institution-full-name {
  width: min(100%, 900px);
  margin: .7rem auto 0;
  opacity: .9;
  font-size: clamp(.88rem, 2vw, 1.05rem);
  line-height: 1.55;
}

.hero-card .hero-card__lead {
  width: min(100%, 680px);
  margin: 1rem auto 1.5rem;
  opacity: .7;
}

.institution-footer-name {
  max-width: 720px;
  margin-top: .15rem;
  line-height: 1.35;
}

.institution-about {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.institution-about__seal {
  flex: 0 0 4.25rem;
}

.institution-about .institution-abbr {
  margin-top: 0;
}

.institution-about h2 {
  margin: .25rem 0 .6rem;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1.35;
}

.institution-about p {
  margin: 0;
  opacity: .75;
}

.institution-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.institution-principles article {
  display: grid;
  min-height: 10rem;
  align-content: start;
  gap: .45rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.institution-principles .fa {
  color: var(--accent);
  font-size: 1.35rem;
}

.institution-principles span {
  opacity: .68;
  font-size: .86rem;
}

@media (max-width: 767px) {
  .institution-principles {
    grid-template-columns: 1fr;
  }

  .institution-principles article {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .institution-about {
    flex-direction: column;
  }
}

/* User themes. Components consume the same semantic palette in every preset. */
body[data-theme="classic-light"] {
  --ink: #002b36;
  --slate: #657b83;
  --slate-dark: #40545b;
  --mist: #e8faff;
  --canvas: #f6f7f8;
  --surface: #ffffff;
  --accent: #ffc107;
  --accent-dark: #d9a300;
  --accent-contrast: #002b36;
  --danger: #c94b55;
  --border: #d8e0e3;
  --header-bg: #657b83;
  --footer-bg: #252a47;
  --shadow: 0 .25rem .7rem rgba(0, 43, 54, .12);
}

body[data-theme="classic-dark"] {
  --ink: #e5edf7;
  --slate: #273449;
  --slate-dark: #182234;
  --mist: #dbeafe;
  --canvas: #111827;
  --surface: #1f2937;
  --accent: #60a5fa;
  --accent-dark: #3b82f6;
  --accent-contrast: #0b1220;
  --danger: #ef626c;
  --border: #3b485c;
  --header-bg: #1f2937;
  --footer-bg: #090f1b;
  --shadow: 0 .3rem .9rem rgba(0, 0, 0, .3);
}

body[data-theme="gitlab-dark"] {
  --ink: #f7f4fb;
  --slate: #2f2a3b;
  --slate-dark: #211c2d;
  --mist: #f1e8ff;
  --canvas: #171321;
  --surface: #24202f;
  --accent: #fc6d26;
  --accent-dark: #e24329;
  --accent-contrast: #211321;
  --danger: #ec5941;
  --border: #4a425b;
  --header-bg: linear-gradient(120deg, #29233a, #46237a);
  --footer-bg: #100d18;
  --shadow: 0 .3rem .9rem rgba(0, 0, 0, .32);
}

body[data-theme="instagram-light"] {
  --ink: #36243d;
  --slate: #5b2c6f;
  --slate-dark: #3f1f4d;
  --mist: #fff3fa;
  --canvas: #faf7fb;
  --surface: #ffffff;
  --accent: #e1306c;
  --accent-dark: #c13584;
  --accent-contrast: #ffffff;
  --danger: #ed4956;
  --border: #eadbe8;
  --header-bg: linear-gradient(120deg, #833ab4, #c13584 48%, #fd1d1d 78%, #fcb045);
  --footer-bg: #3f1f4d;
  --shadow: 0 .3rem .9rem rgba(193, 53, 132, .15);
}

body[data-theme="telegram-light"] {
  --ink: #183b4f;
  --slate: #2aabee;
  --slate-dark: #168acd;
  --mist: #eef8fc;
  --canvas: #eaf4f8;
  --surface: #ffffff;
  --accent: #ffffff;
  --accent-dark: #dff3fc;
  --accent-contrast: #168acd;
  --danger: #e85d75;
  --border: #c9e2ed;
  --header-bg: linear-gradient(120deg, #229ed9, #54b9e8);
  --footer-bg: #176b91;
  --shadow: 0 .25rem .75rem rgba(23, 107, 145, .16);
}

body[data-theme="youtube-light"] {
  --ink: #242424;
  --slate: #282828;
  --slate-dark: #151515;
  --mist: #f9f9f9;
  --canvas: #f5f5f5;
  --surface: #ffffff;
  --accent: #ff0033;
  --accent-dark: #cc0029;
  --accent-contrast: #ffffff;
  --danger: #ff0033;
  --border: #dedede;
  --header-bg: #282828;
  --footer-bg: #181818;
  --shadow: 0 .25rem .7rem rgba(0, 0, 0, .14);
}

body[data-theme="tiktok-dark"] {
  --ink: #f4f4f5;
  --slate: #25252d;
  --slate-dark: #17171d;
  --mist: #e9feff;
  --canvas: #101014;
  --surface: #1b1b21;
  --accent: #25f4ee;
  --accent-dark: #15c9c4;
  --accent-contrast: #101014;
  --danger: #fe2c55;
  --border: #393942;
  --header-bg: linear-gradient(110deg, #16161b, #25252d);
  --footer-bg: #08080a;
  --shadow: .2rem .2rem 0 rgba(254, 44, 85, .35), -.15rem -.15rem 0 rgba(37, 244, 238, .25);
}

body[data-theme="gitlab-light"] {
  --ink: #292436; --slate: #554488; --slate-dark: #40336b; --mist: #f5f1fb;
  --canvas: #f8f7fa; --surface: #ffffff; --accent: #fc6d26; --accent-dark: #e24329;
  --accent-contrast: #211321; --danger: #c0341d; --border: #ddd7e5;
  --header-bg: linear-gradient(120deg, #40336b, #6b4f9b); --footer-bg: #292436;
  --shadow: 0 .25rem .75rem rgba(64, 51, 107, .14);
}

body[data-theme="instagram-dark"] {
  --ink: #f5edf7; --slate: #302435; --slate-dark: #211824; --mist: #fbeefa;
  --canvas: #121016; --surface: #201a24; --accent: #e1306c; --accent-dark: #c13584;
  --accent-contrast: #ffffff; --danger: #ed4956; --border: #45364a;
  --header-bg: linear-gradient(120deg, #4b2462, #8f285f 55%, #a63131); --footer-bg: #0b090d;
  --shadow: 0 .3rem .9rem rgba(0, 0, 0, .32);
}

body[data-theme="telegram-dark"] {
  --ink: #e7f1f7; --slate: #242f3d; --slate-dark: #17212b; --mist: #d8edf7;
  --canvas: #17212b; --surface: #202b36; --accent: #2aabee; --accent-dark: #229ed9;
  --accent-contrast: #ffffff; --danger: #e85d75; --border: #344657;
  --header-bg: #242f3d; --footer-bg: #111a22; --shadow: 0 .3rem .9rem rgba(0, 0, 0, .28);
}

body[data-theme="youtube-dark"] {
  --ink: #f1f1f1; --slate: #272727; --slate-dark: #181818; --mist: #eeeeee;
  --canvas: #0f0f0f; --surface: #212121; --accent: #ff0033; --accent-dark: #cc0029;
  --accent-contrast: #ffffff; --danger: #ff4566; --border: #3f3f3f;
  --header-bg: #212121; --footer-bg: #080808; --shadow: 0 .3rem .85rem rgba(0, 0, 0, .35);
}

body[data-theme="tiktok-light"] {
  --ink: #17171b; --slate: #3a3a42; --slate-dark: #25252d; --mist: #f0feff;
  --canvas: #f7f7f8; --surface: #ffffff; --accent: #fe2c55; --accent-dark: #df1941;
  --accent-contrast: #ffffff; --danger: #d71945; --border: #dedee3;
  --header-bg: linear-gradient(110deg, #25252d, #3a3a42); --footer-bg: #17171b;
  --shadow: .16rem .16rem 0 rgba(254, 44, 85, .25), -.1rem -.1rem 0 rgba(37, 244, 238, .2);
}

body[data-theme] main {
  color: var(--ink);
  background: var(--canvas);
}

body[data-theme] a {
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}

body[data-theme] a:hover {
  color: var(--ink);
}

body[data-theme] .site-nav,
body[data-theme] .page-heading,
body[data-theme] .page-title,
body[data-theme] .hero-card,
body[data-theme] .auth-card,
body[data-theme] .chat-directory__header,
body[data-theme] .chat-page__header,
body[data-theme] .chat-compose {
  background: var(--header-bg);
}

body[data-theme] footer {
  background: var(--footer-bg);
}

body[data-theme] .btn-warning,
body[data-theme] .btn-success,
body[data-theme] .btn-primary,
body[data-theme] .btn-info,
body[data-theme] .page-heading__icon,
body[data-theme] .chat-room-card__icon,
body[data-theme] .chat-bubble--own .chat-bubble__text,
body[data-theme] .release-badge {
  color: var(--accent-contrast);
}

body[data-theme] .chat-message-list,
body[data-theme] .page-action-bar,
body[data-theme] .empty-state,
body[data-theme] .chat-create {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent));
  border-color: var(--border);
}

body[data-theme] .chat-room-card,
body[data-theme] .chat-bubble__text,
body[data-theme] .upload-progress,
body[data-theme] .divTableBody.alert {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
}

body[data-theme] .chat-room-card:hover,
body[data-theme] .chat-room-card small,
body[data-theme] .chat-status,
body[data-theme] .chat-bubble__meta,
body[data-theme] .chat-empty,
body[data-theme] .info {
  color: var(--ink);
}

.theme-settings {
  margin: 0 0 1rem;
  padding: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading p {
  margin-top: .2rem;
  opacity: .72;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 5.25rem;
  padding: .8rem;
  cursor: pointer;
  background: var(--canvas);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.theme-option:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.theme-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-option__preview {
  display: flex;
  flex: 0 0 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.theme-option__preview span {
  flex: 1;
  background: var(--swatch);
}

.theme-option__body {
  min-width: 0;
  flex: 1;
}

.theme-option__body strong,
.theme-option__body small {
  display: block;
}

.theme-option__body small {
  margin-top: .2rem;
  opacity: .7;
}

.theme-option__check {
  color: var(--accent);
  opacity: 0;
}

.theme-option:has(input:checked) .theme-option__check {
  opacity: 1;
}

.theme-actions {
  margin-bottom: 0;
  background: transparent !important;
  border: 0;
}

.appearance-group {
  min-width: 0;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.appearance-group legend {
  margin: 0;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 750;
}

.appearance-group .theme-grid {
  margin-top: .5rem;
}

.mode-switch {
  display: inline-flex;
  gap: .25rem;
  margin-top: .5rem;
  padding: .25rem;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mode-switch label {
  cursor: pointer;
}

.mode-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mode-switch span {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 7px;
  font-weight: 650;
}

.mode-switch input:checked + span {
  color: var(--accent-contrast);
  background: var(--accent);
}

/* Reusable dialogs for short tasks and destructive confirmations. */
body.modal-open {
  overflow: hidden;
}

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

.ui-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: 1rem;
  isolation: isolate;
  place-items: center;
}

.ui-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 18, .62);
  backdrop-filter: blur(3px);
}

.ui-modal__dialog {
  position: relative;
  width: min(100%, 640px);
  max-height: min(88vh, 760px);
  overflow: auto;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
}

.ui-modal__dialog--compact {
  width: min(100%, 440px);
}

.ui-modal__dialog--wide {
  width: min(100%, 920px);
}

.ui-modal__dialog--media {
  width: min(96vw, 1400px);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
}

.stream-modal__dialog { height: min(calc(100dvh - 2rem), 840px); }

.call-modal-close { position: absolute; z-index: 4; top: .62rem; right: .65rem; }
.call-stage__header { padding-right: 3.75rem; }
.ui-modal__dialog.ui-modal__dialog--call-active {
  width: min(96vw, 1400px);
  height: min(calc(100dvh - 2rem), 900px);
  max-height: none;
  overflow: hidden;
}
.ui-modal__dialog--call-active .call-stage:not([hidden]) {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ui-modal__dialog--call-active .call-video-grid { min-height: 0; }
.ui-modal__dialog--call-active .call-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  overflow: visible;
}
.ui-modal__dialog--call-active .call-stats > span,
.ui-modal__dialog--call-active .call-stats > label { min-width: 0; }
.ui-modal__dialog--media .call-stage,
.ui-modal__dialog--media .stream-stage { border: 0; border-radius: 0; box-shadow: none; }

.ui-modal__header {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.ui-modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.ui-modal__close {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  place-items: center;
}

.ui-modal__close:hover {
  background: var(--canvas);
}

.ui-modal__body {
  padding: 1rem;
}

.ui-modal__body > :last-child {
  margin-bottom: 0;
}

.ui-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
}

.chat-create--modal,
.storage-panel--modal {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.chat-create--modal form {
  grid-template-columns: 1fr;
}

.storage-panel--modal {
  grid-template-columns: 1fr;
}

.storage-panel--modal .storage-inline-form {
  align-items: stretch;
  flex-direction: column;
}

@media (max-width: 520px) {
  .ui-modal {
    align-items: end;
    padding: 0;
  }

  .ui-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }

  .stream-modal__dialog {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .ui-modal__dialog.ui-modal__dialog--call-active {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .ui-modal__dialog--call-active .call-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-modal__dialog--call-active .call-stats > span,
  .ui-modal__dialog--call-active .call-stats > label {
    min-height: 3rem;
    padding: .38rem .65rem;
    border-bottom: 1px solid var(--border);
  }

  .ui-modal__dialog--call-active .call-stats > label {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 0;
  }

  .ui-modal__dialog--call-active .call-stats select { min-width: 7rem; }
  .ui-modal__dialog--call-active .call-controls { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 540px) {
  .theme-grid {
    grid-template-columns: 1fr;
  }
}

/* Unified storage: folders, files and shared content. */
.storage-heading .folder-breadcrumbs {
  justify-content: flex-start;
  margin-bottom: .25rem;
}

.storage-meter {
  margin: .65rem 0;
  padding: .65rem .8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.storage-meter__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
  font-size: .82rem;
}

.storage-meter__track {
  height: .45rem;
  overflow: hidden;
  background: var(--border);
  border-radius: 999px;
}

.storage-meter__track span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.storage-panel {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(280px, 1.35fr);
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.storage-panel[hidden] {
  display: none;
}

.storage-panel h2,
.storage-panel p {
  margin: 0;
}

.storage-panel h2 {
  font-size: 1.05rem;
}

.storage-panel p {
  margin-top: .2rem;
  opacity: .68;
  font-size: .84rem;
}

.storage-inline-form,
.storage-form-row,
.file-edit-form {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.storage-inline-form input,
.storage-form-row select,
.storage-form-row input,
.file-edit-form input,
.file-edit-form select {
  min-width: 0;
  flex: 1;
  min-height: 2.5rem;
  padding: .45rem .65rem;
}

.storage-upload {
  align-items: start;
}

.storage-upload > form {
  min-width: 0;
}

.file-drop {
  display: grid;
  min-height: 8rem;
  margin-bottom: .65rem;
  place-items: center;
  align-content: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 84%, var(--accent));
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.file-drop:hover {
  border-color: var(--accent);
}

.file-drop .fa {
  margin-bottom: .25rem;
  color: var(--accent);
  font-size: 2rem;
}

.file-drop span {
  opacity: .65;
  font-size: .82rem;
}

#uploadInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.storage-section {
  margin-top: 1rem;
}

.storage-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55rem;
}

.storage-section__heading h2 {
  margin: 0;
  font-size: 1.08rem;
}

.storage-section__heading > span {
  min-width: 1.8rem;
  padding: .15rem .5rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 999px;
  font-size: .78rem;
  text-align: center;
}

.folder-grid,
.shared-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .65rem;
}

.folder-card,
.shared-file-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .8rem;
  color: var(--ink) !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.folder-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.folder-card__icon,
.storage-file__icon {
  display: grid;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 9px;
  place-items: center;
}

.folder-card > span:nth-child(2),
.shared-file-card > div {
  min-width: 0;
  flex: 1;
}

.folder-card strong,
.folder-card small,
.shared-file-card strong,
.shared-file-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-card small,
.shared-file-card small {
  margin-top: .15rem;
  opacity: .62;
  font-size: .78rem;
}

.storage-note-list {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.storage-note-list a {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: .5rem;
  padding: .65rem .8rem;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.storage-note-list a:last-child {
  border-bottom: 0;
}

.storage-note-list a:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
}

.storage-note-list small {
  opacity: .6;
}

.file-list {
  display: grid;
  gap: .5rem;
}

.storage-file {
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.storage-file[open] {
  border-color: color-mix(in srgb, var(--border) 50%, var(--accent));
  box-shadow: var(--shadow);
}

.storage-file summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 4rem;
  padding: .65rem .8rem;
  cursor: pointer;
  list-style: none;
}

.storage-file summary::-webkit-details-marker {
  display: none;
}

.storage-file summary:hover {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
}

.storage-file__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storage-file__name {
  min-width: 0;
  flex: 1;
}

.storage-file__name strong,
.storage-file__name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-file__name small {
  margin-top: .15rem;
  opacity: .62;
  font-size: .78rem;
}

.storage-file__chevron {
  transition: transform .15s ease;
}

.storage-file[open] .storage-file__chevron {
  transform: rotate(180deg);
}

.storage-file__details {
  padding: .8rem 1rem 1rem 4.8rem;
  border-top: 1px solid var(--border);
}

.storage-file__details video,
.storage-file__details audio {
  width: min(100%, 720px);
  margin-bottom: .75rem;
}

.storage-file__preview img {
  display: block;
  max-width: 200px;
  max-height: 200px;
  margin-bottom: .75rem;
  border-radius: 8px;
}

.storage-file__actions,
.bulk-file-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}

.storage-file__actions form {
  margin: 0;
}

.file-edit-form {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}

.file-edit-form[hidden] {
  display: none;
}

.bulk-file-actions {
  position: sticky;
  z-index: 5;
  bottom: .65rem;
  justify-content: flex-end;
  margin-top: .65rem;
  padding: .55rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.shared-file-card > .fa:first-child {
  color: var(--accent);
  font-size: 1.35rem;
}

.public-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .65rem;
}

.public-file-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.public-file-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.public-file-card__body {
  min-width: 0;
  flex: 1;
}

.public-file-card__body strong,
.public-file-card__body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-file-card__body small {
  margin-top: .15rem;
  opacity: .62;
}

.public-file-card__actions {
  display: flex;
  gap: .35rem;
}

/* Reusable audio and video player. */
.media-player {
  width: min(100%, 820px);
  margin-bottom: .85rem;
  overflow: hidden;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: 0;
}

.media-player:focus-visible {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 35%, transparent);
}

.media-player__heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
}

.media-player__kind {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
}

.media-player--playing .media-player__kind {
  animation: media-pulse 1.8s ease-in-out infinite;
}

.media-player__title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-player__time {
  opacity: .65;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
}

.media-player__stage {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--slate-dark);
  place-items: center;
}

.media-player--video video {
  display: block;
  width: 100%;
  max-height: 65vh;
  background: #000;
}

.media-player--audio .media-player__stage {
  grid-template-columns: 6rem 1fr;
  min-height: 6.5rem;
  padding: .75rem;
  background: linear-gradient(120deg, var(--slate-dark), var(--slate));
}

.media-player__audio-art {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .22);
  place-items: center;
  font-size: 1.5rem;
}

.media-player--playing .media-player__audio-art {
  animation: media-spin 8s linear infinite;
}

.media-player--audio audio {
  width: 100%;
  min-width: 0;
}

.media-player__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem .65rem;
  border-top: 1px solid var(--border);
}

.media-tool {
  position: relative;
  display: inline-grid;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .45rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  place-items: center;
}

.media-tool:hover {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

.media-tool--primary {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

.media-tool span {
  position: absolute;
  right: .15rem;
  bottom: .05rem;
  font-size: .52rem;
  font-weight: 700;
}

.media-speed {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  font-size: .75rem;
}

.media-speed select {
  min-height: 2.35rem;
  padding: .25rem .45rem;
}

.media-player__status {
  min-height: 0;
  margin: 0;
  padding: 0 .7rem;
  color: var(--danger);
  font-size: .8rem;
}

.media-player__status:not(:empty) {
  min-height: 2rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
  border-top: 1px solid var(--border);
}

.media-player--error {
  border-color: var(--danger);
}

@keyframes media-spin {
  to { transform: rotate(360deg); }
}

@keyframes media-pulse {
  50% { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 25%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .media-player--playing .media-player__kind,
  .media-player--playing .media-player__audio-art {
    animation: none;
  }
}

@media (max-width: 560px) {
  .media-player__time {
    display: none;
  }

  .media-player--audio .media-player__stage {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .media-player__audio-art {
    width: 3.5rem;
    height: 3.5rem;
  }

  .media-speed {
    width: 100%;
    margin-left: 0;
  }

  .media-speed select {
    flex: 1;
  }
}

/* Platform module registry dashboard. */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}

.platform-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 6.25rem;
  padding: 1rem;
  color: var(--ink) !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .06);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

a.platform-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.platform-card__icon {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 12px;
  place-items: center;
  font-size: 1.2rem;
}

.platform-card__body {
  min-width: 0;
  flex: 1;
}

.platform-card__body strong,
.platform-card__body small {
  display: block;
}

.platform-card__body small {
  margin-top: .2rem;
  opacity: .65;
}

.platform-card--planned {
  opacity: .62;
  border-style: dashed;
}

.platform-card--planned .platform-card__icon {
  color: var(--ink);
  background: var(--border);
}

.platform-card__status {
  padding: .2rem .5rem;
  color: var(--ink);
  background: var(--border);
  border-radius: 999px;
  font-size: .72rem;
  white-space: nowrap;
}

/* VPN subscription page. */
.profile-quota { display: grid; gap: 1rem; }
.profile-quota__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.profile-quota__summary article { padding: .9rem; border: 1px solid var(--border); background: var(--canvas); }
.profile-quota__summary span, .profile-quota__summary strong { display: block; }
.profile-quota__summary span { color: var(--muted); font-size: .82rem; }
.profile-quota__summary strong { margin-top: .25rem; font-size: 1.15rem; }
.profile-quota__track { height: .65rem; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.profile-quota__track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }
.vpn-page { max-width: 1140px; }
.vpn-card {
  display: grid;
  gap: 1rem;
  margin-top: .75rem;
}
.vpn-card__status { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.vpn-card__status-icon,
.vpn-guide__icon {
  display: grid;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 12px;
  place-items: center;
  font-size: 1.1rem;
}
.vpn-card__status-icon { flex-basis: 3rem; width: 3rem; height: 3rem; border-radius: 50%; }
.vpn-card__status[data-vpn-status="ready"] .vpn-card__status-icon { background: #168542; }
.vpn-card__status[data-vpn-status="error"] .vpn-card__status-icon { background: var(--danger); }
.vpn-card__status[data-vpn-status="running"] .vpn-card__status-icon,
.vpn-card__status[data-vpn-status="queued"] .vpn-card__status-icon { animation: vpn-pulse 1.5s ease-in-out infinite; }
.vpn-card__status h2 { margin: 0; font-size: 1.12rem; }
.vpn-card__status p { margin: .25rem 0 0; color: var(--muted); }
.vpn-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.vpn-clients { display: flex; flex-wrap: wrap; gap: .55rem; }
.vpn-client-link { text-decoration: none; }
.vpn-url { display: grid; gap: .4rem; }
.vpn-url label { font-weight: 700; }
.vpn-url__row { display: flex; gap: .5rem; }
.vpn-url__row input { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.vpn-url small { color: var(--muted); }
.vpn-feedback { min-height: 1.25rem; margin: 0; color: var(--muted); }
.vpn-feedback[data-state="error"] { color: var(--danger); }
.vpn-feedback[data-state="success"] { color: #168542; }
.vpn-servers { display: grid; gap: .65rem; padding-top: .25rem; }
.vpn-servers__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vpn-servers__heading h3 { margin: 0; font-size: 1rem; }
.vpn-servers__heading span { min-width: 1.8rem; padding: .1rem .4rem; color: var(--accent-contrast); background: var(--accent); text-align: center; font-size: .8rem; }
.vpn-servers__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.vpn-servers__list article { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border); background: var(--canvas); }
.vpn-servers__list article > .fa { color: var(--accent); }
.vpn-servers__list span, .vpn-servers__list strong, .vpn-servers__list small { display: block; min-width: 0; }
.vpn-servers__list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpn-servers__list small { margin-top: .15rem; color: var(--muted); }
.vpn-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: .75rem; }
.vpn-quick-action { width: 100%; }
.vpn-guide { margin-top: 1rem; }
.vpn-guide--modal, .vpn-stats--modal { margin: 0; }
.vpn-guide__intro { margin: 0 0 1rem; color: var(--muted); }
.vpn-guide__heading { display: flex; align-items: center; gap: .75rem; }
.vpn-guide__heading h2 { margin: 0; font-size: 1.2rem; }
.vpn-guide__heading p { margin: .2rem 0 0; color: var(--muted); }
.vpn-guide__steps { display: grid; gap: .75rem; margin: 1rem 0; padding-left: 1.5rem; }
.vpn-guide__steps li { padding-left: .25rem; }
.vpn-guide__steps strong,
.vpn-guide__steps span { display: block; }
.vpn-guide__steps span { margin-top: .15rem; color: var(--muted); }
.vpn-guide__clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vpn-guide__clients article { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; background: var(--canvas); border: 1px solid var(--border); border-radius: 10px; }
.vpn-guide__clients article > .fa { color: var(--accent); font-size: 1.25rem; }
.vpn-guide__clients strong,
.vpn-guide__clients small { display: block; }
.vpn-guide__clients small { margin-top: .2rem; color: var(--muted); line-height: 1.4; }
.vpn-guide__note { margin: 1rem 0 0; padding: .7rem .8rem; color: var(--muted); background: color-mix(in srgb, var(--surface) 85%, var(--accent)); border-left: 3px solid var(--accent); border-radius: 6px; font-size: .85rem; }
.vpn-guide__note .fa { color: var(--accent); margin-right: .25rem; }
.vpn-stats { margin-top: 1rem; }
.vpn-stats__heading { display: flex; align-items: flex-start; gap: .75rem; }
.vpn-stats__heading h2 { margin: 0; font-size: 1.2rem; }
.vpn-stats__heading p { margin: .2rem 0 0; color: var(--muted); }
.vpn-stats__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.vpn-stats__controls label { color: var(--muted); font-size: .9rem; }
.vpn-stats__controls select { min-width: 9rem; }
.vpn-stats__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: .85rem; }
.vpn-stats__metric { padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); }
.vpn-stats__metric span, .vpn-stats__metric strong { display: block; }
.vpn-stats__metric span { color: var(--muted); font-size: .82rem; }
.vpn-stats__metric strong { margin-top: .2rem; font-size: 1.15rem; }
.vpn-stats__empty { margin-top: .8rem; padding: .85rem; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 8px; }
.vpn-stats__table-wrap { margin-top: .9rem; overflow-x: auto; }
.vpn-stats__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vpn-stats__table th, .vpn-stats__table td { padding: .55rem .45rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.vpn-stats__table th { color: var(--muted); font-size: .78rem; font-weight: 600; }
.vpn-stats__number { text-align: right !important; }
.vpn-stats__bar { width: 100%; min-width: 5rem; height: .55rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
.vpn-stats__bar::before { display: block; width: var(--vpn-stat-width); height: 100%; content: ''; background: var(--accent); border-radius: inherit; }
.vpn-stats__bar-upload { display: block; width: var(--vpn-stat-upload); height: 100%; background: color-mix(in srgb, var(--accent) 55%, #e0a33b); }
@keyframes vpn-pulse { 50% { opacity: .55; transform: scale(.94); } }

@media (max-width: 767px) {
  .vpn-url__row { align-items: stretch; }
  .vpn-url__row input { width: 0; }
  .vpn-guide__clients { grid-template-columns: 1fr; }
  .vpn-stats__summary { grid-template-columns: 1fr; }
  .vpn-quick-actions { grid-template-columns: 1fr; }
}

/* VPN subscription page. */
.vpn-page { max-width: 1140px; }
.vpn-card { display: grid; gap: 1rem; margin-top: .75rem; }
.vpn-card__status { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.vpn-card__status-icon { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; color: var(--accent-contrast); background: var(--accent); border-radius: 50%; place-items: center; font-size: 1.1rem; }
.vpn-card__status[data-vpn-status="ready"] .vpn-card__status-icon { background: #168542; }
.vpn-card__status[data-vpn-status="error"] .vpn-card__status-icon { background: var(--danger); }
.vpn-card__status[data-vpn-status="running"] .vpn-card__status-icon,
.vpn-card__status[data-vpn-status="queued"] .vpn-card__status-icon { animation: vpn-pulse 1.5s ease-in-out infinite; }
.vpn-card__status h2 { margin: 0; font-size: 1.12rem; }
.vpn-card__status p { margin: .25rem 0 0; color: var(--muted); }
.vpn-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.vpn-url { display: grid; gap: .4rem; }
.vpn-url label { font-weight: 700; }
.vpn-url__row { display: flex; gap: .5rem; }
.vpn-url__row input { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.vpn-url small, .vpn-feedback { color: var(--muted); }
.vpn-feedback { min-height: 1.25rem; margin: 0; }
.vpn-feedback[data-state="error"] { color: var(--danger); }
.vpn-feedback[data-state="success"] { color: #168542; }
.vpn-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: .75rem; }
.vpn-quick-action { width: 100%; }
.vpn-guide--modal, .vpn-stats--modal { margin: 0; }
.vpn-guide__intro { margin: 0 0 1rem; color: var(--muted); }
.vpn-guide__steps { display: grid; gap: .75rem; margin: 1rem 0; padding-left: 1.5rem; }
.vpn-guide__steps li { padding-left: .25rem; }
.vpn-guide__steps strong, .vpn-guide__steps span, .vpn-guide__clients strong, .vpn-guide__clients small { display: block; }
.vpn-guide__steps span, .vpn-guide__clients small { margin-top: .15rem; color: var(--muted); }
.vpn-guide__clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vpn-guide__clients article { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; background: var(--canvas); border: 1px solid var(--border); border-radius: 2px; }
.vpn-guide__clients article > .fa { color: var(--accent); font-size: 1.25rem; }
.vpn-guide__note { margin: 1rem 0 0; padding: .7rem .8rem; color: var(--muted); background: color-mix(in srgb, var(--surface) 85%, var(--accent)); border-left: 3px solid var(--accent); font-size: .85rem; }
.vpn-stats__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.vpn-stats__controls label { color: var(--muted); font-size: .9rem; }
.vpn-stats__controls select { min-width: 9rem; }
.vpn-stats__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: .85rem; }
.vpn-stats__metric { padding: .8rem .9rem; border: 1px solid var(--border); background: var(--canvas); }
.vpn-stats__metric span, .vpn-stats__metric strong { display: block; }
.vpn-stats__metric span { color: var(--muted); font-size: .82rem; }
.vpn-stats__metric strong { margin-top: .2rem; font-size: 1.15rem; }
.vpn-stats__empty { margin-top: .8rem; padding: .85rem; color: var(--muted); text-align: center; border: 1px dashed var(--border); }
.vpn-stats__table-wrap { margin-top: .9rem; overflow-x: auto; }
.vpn-stats__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vpn-stats__table th, .vpn-stats__table td { padding: .55rem .45rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.vpn-stats__table th { color: var(--muted); font-size: .78rem; font-weight: 600; }
.vpn-stats__number { text-align: right !important; }
.vpn-stats__bar { width: 100%; min-width: 5rem; height: .55rem; overflow: hidden; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
.vpn-stats__bar::before { display: block; width: var(--vpn-stat-width); height: 100%; content: ''; background: var(--accent); }
.vpn-stats__bar-upload { display: block; width: var(--vpn-stat-upload); height: 100%; background: color-mix(in srgb, var(--accent) 55%, #e0a33b); }
@keyframes vpn-pulse { 50% { opacity: .55; transform: scale(.94); } }
@media (max-width: 767px) {
  .vpn-url__row { align-items: stretch; }
  .vpn-url__row input { width: 0; }
  .vpn-guide__clients, .vpn-stats__summary, .vpn-quick-actions { grid-template-columns: 1fr; }
  .profile-quota__summary { grid-template-columns: 1fr; }
  .vpn-servers__list { grid-template-columns: 1fr; }
}

/* Ciphertext-only direct messages. */
.e2ee-notice {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .75rem 0;
  padding: .7rem .85rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.e2ee-notice > .fa {
  color: var(--accent);
  font-size: 1.4rem;
}

.e2ee-notice strong,
.e2ee-notice span {
  display: block;
}

.e2ee-notice span {
  margin-top: .1rem;
  opacity: .7;
  font-size: .8rem;
}

.dm-layout {
  display: grid;
  min-height: 65vh;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dm-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.dm-sidebar__heading,
.dm-chat__header {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--border);
}

.dm-chat__actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.dm-chat__actions .btn { padding: .45rem .65rem; }

@media (max-width: 540px) {
  .dm-chat__actions .btn span { display: none; }
}

.dm-new-conversation {
  display: grid;
  gap: .4rem;
  padding: .65rem;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}

.dm-new-conversation[hidden] {
  display: none;
}

.dm-new-conversation select {
  min-width: 0;
  padding: .45rem;
}

.dm-request-list { display: grid; gap: .5rem; padding: 0 .65rem .65rem; }
.dm-request-list:empty { display: none; }
.dm-request { display: flex; align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--surface-muted); }
.dm-request > i { color: var(--accent); }
.dm-request > span { display: grid; min-width: 0; gap: .1rem; }
.dm-request strong, .dm-request small { overflow: hidden; text-overflow: ellipsis; }
.dm-request small { color: var(--text-muted); font-size: .72rem; }
.dm-request__actions { display: flex; gap: .3rem; margin-left: auto; }
.dm-request__actions .btn { width: 2rem; height: 2rem; padding: 0; }
.dm-request-status { min-height: 0; margin: 0; padding: 0 .75rem .5rem; color: var(--text-muted); font-size: .75rem; }
.dm-request-status:empty { display: none; }

.dm-conversation-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.dm-conversation {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.dm-conversation:hover,
.dm-conversation--active {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent));
}

.dm-conversation > span {
  display: grid;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
}

.dm-device {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .75rem;
  background: var(--canvas);
  border-top: 1px solid var(--border);
}

.dm-device span,
.dm-device strong,
.dm-device small {
  display: block;
  min-width: 0;
}

.dm-device small {
  overflow: hidden;
  opacity: .65;
  font-family: monospace;
  text-overflow: ellipsis;
}

.dm-chat,
#dmActive {
  min-width: 0;
  height: 100%;
}

#dmActive {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

#dmActive[hidden] {
  display: none;
}

.dm-empty {
  display: grid;
  height: 100%;
  min-height: 55vh;
  place-items: center;
  align-content: center;
  color: var(--ink);
  opacity: .55;
}

.dm-empty > .fa {
  margin-bottom: .45rem;
  font-size: 2.5rem;
}

.dm-empty span {
  font-size: .82rem;
}

.dm-chat__header small {
  display: block;
  margin-top: .15rem;
  opacity: .62;
  font-size: .75rem;
}

.dm-lock {
  padding: .25rem .5rem;
  color: var(--accent-contrast);
  background: var(--accent);
  border-radius: 999px;
  font-size: .72rem;
}

.dm-message-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  padding: .8rem;
  background: color-mix(in srgb, var(--canvas) 94%, var(--accent));
}

.dm-message {
  align-self: flex-start;
  max-width: min(78%, 680px);
}

.dm-message > span {
  display: block;
  padding: .55rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 10px 10px 10px;
  overflow-wrap: anywhere;
}

.dm-message small {
  display: block;
  margin: .15rem .3rem 0;
  opacity: .55;
  font-size: .68rem;
}

.dm-message--own {
  align-self: flex-end;
}

.dm-message--own > span {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 10px 4px 10px 10px;
}

.dm-message--own small {
  text-align: right;
}

.dm-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  padding: .65rem;
  border-top: 1px solid var(--border);
}

.dm-compose textarea {
  max-height: 8rem;
  padding: .55rem .7rem;
  resize: vertical;
}

.dm-status {
  min-height: 1.4rem;
  margin: 0;
  padding: .2rem .7rem;
  color: var(--danger);
  font-size: .75rem;
}

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

  .dm-sidebar {
    max-height: 18rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .dm-message {
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .storage-panel {
    grid-template-columns: 1fr;
  }

  .storage-inline-form,
  .storage-form-row,
  .file-edit-form {
    align-items: stretch;
    flex-direction: column;
  }

  .storage-inline-form .btn,
  .storage-form-row .btn,
  .file-edit-form .btn,
  .storage-inline-form input,
  .storage-form-row select,
  .storage-form-row input,
  .file-edit-form input,
  .file-edit-form select {
    width: 100%;
  }

  .storage-file__details {
    padding-left: 1rem;
  }

  .bulk-file-actions {
    justify-content: stretch;
  }

  .bulk-file-actions .btn {
    flex: 1 1 auto;
  }
}
:root {
  --ink: #002b36;
  --slate: #657b83;
  --slate-dark: #40545b;
  --mist: #e8faff;
  --canvas: #f6f7f8;
  --surface: #ffffff;
  --accent: #ffc107;
  --accent-dark: #d9a300;
  --danger: #c94b55;
  --border: #d8e0e3;
  --radius: 10px;
  --shadow: 0 .25rem .7rem rgba(0, 43, 54, .12);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  color: #356873;
}

a:hover {
  color: var(--ink);
}

.site-header {
  z-index: 20;
  padding-top: .5rem;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem;
  color: var(--mist);
  background: var(--slate);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.page-action-bar {
  display: flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .5rem 0 1rem;
  padding: .45rem .6rem;
  background: var(--mist);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.page-action-bar:empty {
  display: none;
}

.page-action-bar:not(:has(.btn)) {
  display: none;
}

.page-action-bar form {
  display: inline-flex !important;
  margin: 0;
}

.page-action-bar .btn {
  min-height: 2.4rem;
}

.nav-icon {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  place-items: center;
}

.nav-icon--active {
  outline: 2px solid var(--mist);
  outline-offset: 2px;
}

.profile-button {
  border-left: 0;
}

.btn {
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 .2rem .45rem rgba(0, 43, 54, .18);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .28);
}

.btn-warning,
.btn-success,
.btn-primary,
.btn-info {
  color: var(--ink);
  background: var(--accent);
}

.btn-warning:hover,
.btn-success:hover,
.btn-primary:hover,
.btn-info:hover {
  color: var(--ink);
  background: var(--accent-dark);
}

.btn-secondary,
.btn-light {
  color: var(--mist);
  background: var(--slate);
}

.btn-secondary:hover,
.btn-light:hover {
  color: #fff;
  background: var(--slate-dark);
}

.btn-danger {
  color: #fff;
  background: var(--danger);
}

.form-control,
.form-select,
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
textarea,
select {
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.alert,
.content-card,
.form-card {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.alert-dark {
  color: var(--mist);
  background: var(--slate);
  border-color: var(--slate);
}

.alert-warning,
.flash {
  color: var(--ink);
  background: #fff4cf;
  border-left: 4px solid var(--accent);
}

.content-page {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.page-title {
  margin-bottom: 1rem;
  padding: 1rem;
  color: var(--mist);
  background: var(--slate);
  border-radius: var(--radius);
  text-align: center;
}

.page-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
  padding: 1rem;
  color: var(--mist);
  background: var(--slate);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.page-heading__icon {
  display: inline-grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  color: var(--ink);
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
  font-size: 1.25rem;
}

.page-heading__content,
.page-heading > div {
  min-width: 0;
  flex: 1;
}

.page-heading h1,
.page-heading h2,
.page-heading h3,
.page-heading p {
  margin: 0;
}

.page-heading h1 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.page-heading p,
.page-heading .chat-access-badge {
  display: block;
  margin-top: .2rem;
  opacity: .82;
  font-size: .88rem;
}

.content-card {
  margin-bottom: .75rem;
  padding: 1rem;
  box-shadow: 0 .1rem .35rem rgba(0, 43, 54, .08);
}

.note-editor { display: grid; gap: .65rem; margin-bottom: 1rem; }
.note-editor__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.note-editor__heading > div:first-child { display: grid; gap: .1rem; }
.note-editor__heading small { color: var(--muted); font-size: .76rem; }
.note-format-switch { flex: 0 0 auto; }
.note-editor textarea { min-height: 18rem; resize: vertical; font-family: inherit; line-height: 1.55; }
.note-editor[data-content-format="markdown"] textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.note-format-badge { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .8rem; padding: .25rem .5rem; color: var(--muted); background: var(--canvas); border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; }
.note-plain-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.note-visibility { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.note-visibility legend { margin-bottom: .35rem; font-size: 1rem; font-weight: 700; }
.note-visibility .mode-switch { width: fit-content; max-width: 100%; flex-wrap: wrap; }
.note-folder-select { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }

@media (max-width: 640px) {
  .note-editor__heading { align-items: stretch; flex-direction: column; }
  .note-format-switch { width: 100%; }
  .note-format-switch label { flex: 1; }
  .note-format-switch span { justify-content: center; }
}

.empty-state {
  display: grid;
  min-height: 10rem;
  place-items: center;
  align-content: center;
  gap: .5rem;
  color: var(--slate);
  background: var(--mist);
  border: 1px dashed #b8cdd3;
  border-radius: var(--radius);
  text-align: center;
}

.empty-state .fa {
  font-size: 2rem;
  opacity: .65;
}

.empty-state p {
  margin: 0;
}

.file-card > a:first-child {
  font-weight: 600;
  text-decoration: none;
}

.folder-toolbar {
  padding: .65rem 1rem;
}

.folder-toolbar h3 {
  margin: 0;
  color: var(--mist);
}

.folder-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}

.folder-breadcrumbs a,
.folder-breadcrumbs span {
  color: var(--mist);
}

.folder-breadcrumbs a:hover {
  color: var(--accent);
}

.divTable {
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 .1rem .35rem rgba(0, 43, 54, .08);
}

.divTableHeading {
  color: var(--mist);
  background: var(--slate);
}

.divTableCell,
.divTableHead {
  border-color: var(--border);
}

.form-card {
  margin-top: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.hero-card {
  margin-top: 1rem;
  padding: clamp(2.5rem, 8vw, 6rem) 1rem;
  color: var(--mist);
  background: var(--slate);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
}

.hero-card__icon,
.auth-card__icon {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: .75rem;
  color: var(--ink);
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
  font-size: 1.5rem;
}

.hero-card h1 {
  margin: 0;
}

.hero-card p {
  margin: .5rem 0 2rem;
  opacity: .85;
}

.hero-card__time {
  display: inline-block;
  padding: .45rem .8rem;
  color: var(--ink);
  background: var(--mist);
  border-radius: 999px;
}

.auth-page {
  display: grid;
  min-height: 70vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
  place-items: center;
}

.auth-card {
  width: min(100%, 420px);
  padding: 1.5rem;
  color: var(--mist);
  background: var(--slate);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.auth-card--wide {
  width: min(100%, 520px);
}

.auth-card .form-control {
  margin-bottom: .75rem;
}

.auth-remember { display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 1rem; cursor: pointer; text-align: left; }
.auth-remember input { width: 1.05rem; height: 1.05rem; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--accent); }
.auth-remember span, .auth-remember strong, .auth-remember small { display: block; }
.auth-remember small { margin-top: .15rem; color: var(--muted); font-size: .75rem; font-weight: 400; }

.auth-card br {
  display: none;
}

@media (max-width: 767px) {
  .page-action-bar {
    justify-content: stretch;
  }

  .page-action-bar .btn,
  .page-action-bar form {
    flex: 1 1 auto;
  }

  .page-action-bar form .btn {
    width: 100%;
  }

  .site-footer__content {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Keep the clarity layer authoritative over legacy rules above. */
.site-nav {
  min-height: 3.75rem;
  padding: .45rem .55rem;
}

.site-nav__actions {
  flex-wrap: nowrap;
  margin-left: auto;
}

.page-action-bar {
  min-height: 0;
  justify-content: flex-start;
  padding: .5rem 0;
  background: transparent !important;
  border: 0;
}

@media (max-width: 991px) {
  .site-nav__brand strong,
  .nav-item span,
  .profile-button span {
    display: none;
  }
}

@media (max-width: 575px) {
  .site-nav__brand {
    display: none;
  }

  .site-nav__actions {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .page-action-bar {
    justify-content: stretch;
  }
}