:root {
  --app-bg: #071521;
  --app-surface: #0e2233;
  --app-surface-2: #112b40;
  --app-line: rgba(143, 211, 255, .14);
  --app-line-strong: rgba(143, 211, 255, .28);
  --app-text: #eaf4ff;
  --app-muted: #9ab3c8;
  --app-info: #5cc7ff;
}
html, body { min-height: 100%; }
body {
  background:
    radial-gradient(circle at top, rgba(61, 125, 180, .18), transparent 36%),
    linear-gradient(180deg, #06131d 0%, #081723 45%, #07131f 100%);
  color: var(--app-text);
  font-family: Inter, system-ui, sans-serif;
}
a { text-decoration: none; }
img { max-width: 100%; display: block; }
.app-topbar {
  background: rgba(8, 20, 31, .88);
  backdrop-filter: blur(12px);
}
.app-letterspace { letter-spacing: .16em; }
.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: linear-gradient(135deg, rgba(92, 199, 255, .22), rgba(92, 199, 255, .08));
  border: 1px solid var(--app-line-strong);
  color: #dff6ff;
}
.app-panel,
.card,
.list-group-item,
.table,
.modal-content,
.offcanvas,
.dropdown-menu,
.navbar,
.alert,
.accordion-item {
  background-color: rgba(14, 34, 51, .92) !important;
  color: var(--app-text);
  border-color: var(--app-line) !important;
}
.app-panel {
  border: 1px solid var(--app-line);
  border-radius: 1.2rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
}
.app-sidebar { position: sticky; top: 5rem; }
.nav-section-title {
  color: #79d5ff;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  margin-bottom: .75rem;
}
.app-nav-link {
  border: 1px solid transparent;
  border-radius: .9rem;
  color: var(--app-text);
  padding: .8rem .95rem;
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-nav-link:hover,
.app-nav-link.active {
  color: #fff;
  background: rgba(92, 199, 255, .1);
  border-color: var(--app-line-strong);
}
.app-alert { border-radius: 1rem; }
.app-hero {
  padding: 2rem;
  border-radius: 1.4rem;
  background:
    linear-gradient(135deg, rgba(18, 46, 68, .94), rgba(10, 25, 38, .96)),
    url('/assets/images/community-hub-fallback.jpg') center/cover;
  border: 1px solid var(--app-line);
  overflow: hidden;
}
.app-hero-subtle {
  background: linear-gradient(135deg, rgba(18, 46, 68, .94), rgba(10, 25, 38, .96));
}
.app-kpi {
  border: 1px solid var(--app-line);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.03);
}
.app-kpi-label { color: var(--app-muted); font-size: .85rem; }
.app-filter-bar,
.app-card,
.app-content-block {
  border: 1px solid var(--app-line);
  border-radius: 1.2rem;
  background: rgba(14, 34, 51, .9);
}
.app-card { overflow: hidden; height: 100%; }
.app-card-banner {
  height: 170px;
  background: linear-gradient(135deg, #18364d, #0e2336 56%, #2a5676);
  position: relative;
}
.app-card-banner img,
.app-cover img { width: 100%; height: 100%; object-fit: cover; }
.app-avatar,
.app-logo {
  width: 68px;
  height: 68px;
  border-radius: 1rem;
  object-fit: cover;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-line);
}
.app-avatar-fallback,
.app-logo-fallback {
  width: 68px;
  height: 68px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(92,199,255,.22), rgba(92,199,255,.08));
  border: 1px solid var(--app-line-strong);
}
.app-cover {
  height: 260px;
  border-radius: 1.2rem 1.2rem 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #18364d, #0e2336 56%, #2a5676);
}
.app-profile-head { margin-top: -2rem; }
.app-badge-soft {
  background: rgba(92, 199, 255, .12);
  color: #dff7ff;
  border: 1px solid rgba(92,199,255,.24);
}
.app-muted { color: var(--app-muted); }
.form-control,
.form-select,
textarea {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--app-text) !important;
  border-color: var(--app-line) !important;
}
.form-control::placeholder { color: #8ca7bc; }
.form-control:focus,
.form-select:focus,
textarea:focus,
.btn:focus,
.nav-link:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(92, 199, 255, .15) !important;
  border-color: rgba(92, 199, 255, .35) !important;
}
.form-select option { color: #000; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); }
.table > :not(caption) > * > * { border-bottom-color: rgba(255,255,255,.07); }
.nav-tabs { border-bottom-color: var(--app-line); }
.nav-tabs .nav-link {
  color: var(--app-text);
  border-color: transparent;
  border-radius: .9rem .9rem 0 0;
}
.nav-tabs .nav-link.active {
  background: rgba(92, 199, 255, .1);
  border-color: var(--app-line);
  color: #fff;
}
.list-group-item { color: var(--app-text); }
.empty-state {
  border: 1px dashed var(--app-line-strong);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  color: var(--app-muted);
}
@media (max-width: 991.98px) {
  .app-sidebar { position: static; top: auto; }
  .app-hero { padding: 1.4rem; }
  .app-card-banner { height: 150px; }
}


.btn-topicon {
  min-width: 2.75rem;
  min-height: 2.5rem;
  border: 1px solid var(--app-line);
  border-radius: .9rem;
  background: rgba(255,255,255,.03);
  color: var(--app-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.btn-topicon:hover,
.btn-topicon.active {
  color: #fff;
  background: rgba(92, 199, 255, .12);
  border-color: var(--app-line-strong);
}
.app-section-card {
  border: 1px solid var(--app-line);
  border-radius: 1.2rem;
  background: rgba(14, 34, 51, .9);
  overflow: hidden;
}
.app-section-header {
  padding: 1.25rem 1.25rem 0;
}
.app-toolbar {
  border: 1px solid var(--app-line);
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  padding: 1rem;
}
.app-media-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: .9rem;
  border: 1px solid var(--app-line);
  background: rgba(255,255,255,.04);
}
.app-banner-mini {
  height: 132px;
  background: linear-gradient(135deg, #18364d, #0e2336 56%, #2a5676);
}
.app-banner-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-list-row {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.app-list-row:last-child { border-bottom: 0; }
.app-meta {
  color: var(--app-muted);
  font-size: .9rem;
}
.app-stat-chip {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--app-line);
  border-radius: .9rem;
  background: rgba(255,255,255,.03);
  color: var(--app-text);
}
.app-message-bubble {
  border: 1px solid var(--app-line);
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  padding: 1rem;
}
.app-message-bubble.is-own {
  background: rgba(92, 199, 255, .08);
  border-color: rgba(92, 199, 255, .2);
}
.auth-shell {
  min-height: calc(100vh - 11rem);
  display: grid;
  place-items: center;
}
.auth-card {
  max-width: 960px;
  width: 100%;
}
.auth-side {
  background: linear-gradient(160deg, rgba(12,31,47,.96), rgba(17,43,64,.92)), url('/assets/images/community-hub-fallback.jpg') center/cover;
  min-height: 100%;
}
.tab-pane-panel {
  border: 1px solid var(--app-line);
  border-radius: 0 1rem 1rem 1rem;
  background: rgba(14, 34, 51, .82);
  padding: 1.25rem;
}

.app-cover.app-cover-tall { height: 520px; }

.app-dropdown-panel { border-radius: 1rem; overflow: hidden; }
.app-unread-item { background: rgba(92,199,255,.08) !important; }
.app-toast-stack { z-index: 1200; }
.toast { backdrop-filter: blur(10px); border-radius: 1rem; }


.app-warehouse-hero { border: 1px solid var(--app-line); border-radius: 1.2rem; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); overflow: hidden; }
.app-warehouse-actions .btn { min-width: 9.5rem; }
.app-warehouse-panel { border: 1px solid var(--app-line); border-radius: 1rem; background: rgba(255,255,255,.03); padding: 1rem; }
.app-warehouse-kpi { display:flex; align-items:center; gap:.65rem; padding:.75rem .9rem; border:1px solid var(--app-line); border-radius:1rem; background: rgba(255,255,255,.03); }
.app-warehouse-kpi i { color:#8edcff; }
.app-warehouse-mode { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border:1px solid var(--app-line); border-radius:999px; background: rgba(255,255,255,.04); font-size:.85rem; }
.app-warehouse-mode strong { color:#fff; }
.app-warehouse-modal .modal-content { border:1px solid var(--app-line-strong); box-shadow:0 1rem 3rem rgba(0,0,0,.35); }
.app-filter-stack { position: sticky; top: 0; z-index: 2; }
.app-table-shell { border:1px solid var(--app-line); border-radius:1rem; overflow:hidden; }
.app-log-table .table-success,.app-log-table .table-danger { --bs-table-bg: transparent; }
.app-log-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .65rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.app-log-pill-positive { background: rgba(56,193,114,.14); color:#bdf2ce; border:1px solid rgba(56,193,114,.28); }
.app-log-pill-negative { background: rgba(240,82,82,.14); color:#ffc2c2; border:1px solid rgba(240,82,82,.28); }
.app-category-stack { line-height:1.1; }
.app-category-stack .crumb { display:block; color:var(--app-muted); font-size:.8rem; }
.app-category-stack .main { display:block; margin-top:.15rem; }

.app-col-5 { width: 100%; }
@media (min-width: 1400px) { .app-col-5 { width: 20%; } }
.app-profile-head .btn + .btn { margin-left: .5rem; }


[data-banner-drag-surface]{position:absolute; inset:0; pointer-events:none; cursor:ns-resize;}
.banner-drag-enabled [data-banner-drag-surface]{background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35));}
.app-card .btn{min-height:42px;}
.app-card .app-meta{line-height:1.45;}

.app-warehouse-card{display:flex;flex-direction:column;min-height:100%;}
.app-warehouse-card .app-card-banner{flex:0 0 auto;}
.app-warehouse-card-body{flex:1 1 auto;display:flex;flex-direction:column;gap:.25rem;}
.app-warehouse-card-actions{flex:0 0 auto;background:rgba(255,255,255,.02);}
.app-warehouse-card-actions .btn{justify-content:center;}
.app-modal-95{width:min(95vw,1800px);max-width:95vw;height:95vh;}
.app-modal-95 .modal-content{height:95vh;}
.app-modal-95 .modal-body{overflow:auto;}

.app-warehouse-card{overflow:hidden}
.app-warehouse-card-body{min-height:260px}
.app-warehouse-card-actions-inline{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;align-items:center;padding-top:.5rem;border-top:1px solid var(--app-line);margin-top:auto}
.app-warehouse-card-actions-inline form{margin:0}
.app-warehouse-card-actions-inline .btn{min-height:auto;padding:.3rem .6rem;font-size:.8rem;line-height:1.2}
.app-warehouse-card .app-card-banner{height:154px;overflow:hidden;background:rgba(255,255,255,.03)}
.app-warehouse-card .app-card-banner img{width:100%;height:100%;object-fit:cover;display:block}