:root{
  --ww-primary:#0f4cbd;
  --ww-primary-2:#2f80ed;
  --ww-primary-3:#dceeff;
  --ww-primary-4:#eef6ff;
  --ww-navy:#0b1f44;
  --ww-dark:#0f172a;
  --ww-muted:#64748b;
  --ww-card:#ffffff;
  --ww-border: rgba(15,23,42,.08);
  --ww-shadow: 0 18px 42px rgba(15, 48, 97, .12);
  --ww-shadow-soft: 0 10px 24px rgba(15, 48, 97, .08);
}

html,body{height:100%;}
body.ww-body{
  background:
    radial-gradient(900px 500px at 10% 8%, rgba(47,128,237,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(15,76,189,.10), transparent 60%),
    linear-gradient(180deg, #f9fcff 0%, #f2f7ff 45%, #ffffff 100%);
  color: var(--ww-dark);
}

a{text-decoration:none;}
.container-narrow{max-width:1100px;}
.ww-app{min-height:100vh;}

.ww-sidebar,
.offcanvas.ww-sidebar{
  width:280px;
  background:
    linear-gradient(180deg, rgba(8,24,54,.98), rgba(11,31,68,.96)),
    url("img/bg-pattern.jpg");
  background-size:cover;
  background-position:center;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.ww-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1.25rem 1.25rem 1rem;
}
.ww-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--ww-primary), var(--ww-primary-2));
  box-shadow:0 12px 22px rgba(2,18,53,.28);
  position:relative;
}
.ww-logo:after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.7);
}
.ww-brand h1{
  margin:0;
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:.3px;
  color:#fff;
  font-weight:700;
}
.ww-brand small{
  color:rgba(255,255,255,.72);
  display:block;
  font-weight:500;
  margin-top:.2rem;
}

.ww-nav{padding:.5rem 1rem 1.25rem;}
.ww-nav .nav-link{
  color:rgba(255,255,255,.84);
  border-radius:16px;
  padding:.8rem .95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin:.25rem 0;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  border:1px solid transparent;
}
.ww-nav .nav-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.ww-nav .nav-link.active{
  background:linear-gradient(135deg, rgba(15,76,189,.35), rgba(47,128,237,.18));
  border-color:rgba(255,255,255,.12);
}
.ww-pill{
  font-size:.75rem;
  padding:.15rem .45rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
}

.ww-topbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ww-border);
}
.ww-topbar .btn{border-radius:14px;}
.ww-topbar-title{font-weight:800;letter-spacing:.2px;}
.ww-content{padding-bottom:4rem;}

.ww-card,
.card,
.alert,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.btn,
.pagination .page-link{
  border-radius:18px !important;
}
.ww-card,
.card{
  border:1px solid var(--ww-border) !important;
  background:var(--ww-card);
  box-shadow:var(--ww-shadow-soft);
  overflow:hidden;
}
.card .card-header{
  background:linear-gradient(135deg, rgba(15,76,189,.08), rgba(47,128,237,.08));
  border-bottom:1px solid var(--ww-border);
}

.ww-stat-card{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(15,76,189,.10);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,247,255,.96)),
    radial-gradient(420px 220px at 85% 15%, rgba(47,128,237,.14), transparent 65%);
  box-shadow:var(--ww-shadow-soft);
  padding:1rem 1.1rem;
}
.ww-stat-card:after{
  content:"";
  position:absolute;
  inset:auto -30px -36px auto;
  width:130px;
  height:130px;
  background:radial-gradient(circle, rgba(47,128,237,.18), transparent 70%);
  opacity:.7;
}
.ww-stat-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(15,76,189,.12), rgba(47,128,237,.16));
  border:1px solid rgba(15,76,189,.10);
  color:var(--ww-primary);
}
.ww-stat-icon i{font-size:1.25rem;}
.ww-stat-kpi{font-weight:900;letter-spacing:.2px;}
.ww-subtle{color:var(--ww-muted);}

.form-control,
.form-select{
  border-color:rgba(15,23,42,.12);
  background:#fff;
}
.form-control:focus,
.form-select:focus{
  border-color:rgba(47,128,237,.55);
  box-shadow:0 0 0 .25rem rgba(47,128,237,.14);
}

.btn-ww{
  border:0;
  color:#fff;
  background:linear-gradient(135deg, var(--ww-primary), var(--ww-primary-2));
  box-shadow:0 12px 24px rgba(15,76,189,.18);
}
.btn-ww:hover{filter:brightness(.98);color:#fff;}

.badge-ww{
  background:linear-gradient(135deg, rgba(15,76,189,.10), rgba(47,128,237,.12));
  color:var(--ww-primary);
  border:1px solid rgba(15,76,189,.10);
}

.ww-hero{
  background:
    linear-gradient(120deg, rgba(8,24,54,.82), rgba(15,76,189,.55)),
    radial-gradient(900px 500px at 15% 15%, rgba(255,255,255,.14), transparent 60%),
    url("img/hero.jpg");
  background-size:cover;
  background-position:center;
  border:1px solid rgba(15,76,189,.12);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--ww-shadow);
}
.ww-hero-card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.28);
  border-radius:22px;
  backdrop-filter:blur(14px);
}

.ww-banner{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:2rem;
  border:1px solid rgba(15,76,189,.12);
  background:
    linear-gradient(120deg, rgba(8,24,54,.88), rgba(15,76,189,.65)),
    radial-gradient(650px 260px at 20% 20%, rgba(255,255,255,.14), transparent 60%),
    url("img/hero.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:var(--ww-shadow);
}
.ww-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,24,54,.18), transparent 45%);
  pointer-events:none;
}
.ww-banner>*{position:relative;z-index:1;}
.ww-banner-tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:.55rem .9rem;
  font-size:.86rem;
  font-weight:700;
}
.ww-banner-panel{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  backdrop-filter:blur(16px);
  padding:1rem;
  display:grid;
  gap:.9rem;
}
.ww-summary-chip{
  border-radius:18px;
  padding:.95rem 1rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.ww-summary-chip span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
  margin-bottom:.2rem;
}
.ww-summary-chip strong{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.2px;
}
.ww-summary-chip--light{
  background:linear-gradient(135deg, rgba(15,76,189,.06), rgba(47,128,237,.10)), #fff;
  border:1px solid rgba(15,76,189,.10);
  color:var(--ww-dark);
  box-shadow:var(--ww-shadow-soft);
}
.ww-summary-chip--light span{color:var(--ww-muted);}

.ww-table-user{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:180px;
}
.ww-avatar{
  width:46px;
  height:46px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(15,76,189,.12);
  background:linear-gradient(135deg, rgba(15,76,189,.12), rgba(47,128,237,.16));
  box-shadow:0 10px 22px rgba(15,48,97,.12);
}

.ww-image-panel{
  min-height:100%;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(15,76,189,.12);
  box-shadow:var(--ww-shadow);
  background:
    linear-gradient(135deg, rgba(8,24,54,.88), rgba(15,76,189,.66)),
    radial-gradient(600px 280px at 15% 20%, rgba(255,255,255,.12), transparent 60%),
    url("img/hero.jpg");
  background-size:cover;
  background-position:center;
}
.ww-image-panel__content{
  padding:1.55rem;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}
.ww-info-stack{display:grid;gap:.85rem;}
.ww-info-stack .ww-summary-chip{backdrop-filter:blur(12px);}

.ww-action-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
}
.ww-mini-tile{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:.95rem 1rem;
  backdrop-filter:blur(12px);
  color:#fff;
}
.ww-mini-tile span{
  display:block;
  font-size:.8rem;
  color:rgba(255,255,255,.72);
  margin-bottom:.28rem;
}
.ww-mini-tile strong{
  font-size:1.05rem;
  font-weight:800;
}
.ww-mini-note{
  color:rgba(255,255,255,.76);
  line-height:1.65;
  max-width:48ch;
}

.ww-surface{
  border:1px solid rgba(15,76,189,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,251,255,.96));
  box-shadow:var(--ww-shadow-soft);
  border-radius:24px;
}
.ww-filter-card{
  border:1px solid rgba(15,76,189,.10);
  background:linear-gradient(180deg, rgba(247,251,255,.98), rgba(255,255,255,.98));
  box-shadow:var(--ww-shadow-soft);
  border-radius:22px;
}
.ww-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.ww-filter-form .col-auto{min-width:140px;}

.table thead th{
  color:var(--ww-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.75rem;
}
.table{border-color:rgba(15,23,42,.08) !important;}
.table thead{background:linear-gradient(135deg, rgba(15,76,189,.04), rgba(47,128,237,.08));}
.table tbody tr{transition:background .08s ease, transform .08s ease;}
.table tbody tr:hover{background:rgba(47,128,237,.05);}
.table td,.table th{padding:.85rem .85rem;}

.pagination .page-link{
  border-color:rgba(15,76,189,.10);
  color:var(--ww-primary);
}
.pagination .page-item.active .page-link{
  background:linear-gradient(135deg, var(--ww-primary), var(--ww-primary-2));
  border-color:transparent;
  color:#fff;
}

.table-actions a{margin-right:6px;margin-bottom:6px;}
.form-help{font-size:.9rem;color:var(--ww-muted);}
.ww-card-lift{transition:transform .14s ease, box-shadow .14s ease;}
.ww-card-lift:hover{transform:translateY(-2px);box-shadow:var(--ww-shadow);}

.ww-mobile-user-card{
  border:1px solid rgba(15,76,189,.10);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
  box-shadow:var(--ww-shadow-soft);
  padding:1rem;
}
.ww-mobile-user-card .ww-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
  margin-top:.9rem;
}
.ww-mobile-user-card .ww-meta-item{
  border-radius:16px;
  background:#f7fbff;
  border:1px solid rgba(15,76,189,.08);
  padding:.75rem .85rem;
}
.ww-mobile-user-card .ww-meta-item span{
  display:block;
  font-size:.76rem;
  color:var(--ww-muted);
  margin-bottom:.22rem;
}
.ww-mobile-user-card .ww-action-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
.ww-data-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .7rem;
  border-radius:999px;
  background:rgba(15,76,189,.08);
  color:var(--ww-primary);
  font-size:.82rem;
  font-weight:700;
}

.ww-note-soft{
  border-radius:18px;
  background:rgba(15,76,189,.05);
  border:1px solid rgba(15,76,189,.08);
  color:var(--ww-muted);
  padding:.8rem .95rem;
}

@media (max-width: 991.98px){
  .ww-content{padding-bottom:5rem;}
  .ww-action-grid{grid-template-columns:1fr;}
  .ww-hero .display-6{font-size:2rem;}
}

@media (max-width: 767.98px){
  .ww-banner,
  .ww-hero,
  .ww-image-panel{border-radius:22px;}
  .ww-banner{padding:1.35rem;}
  .ww-image-panel__content{padding:1.2rem;}
  .ww-filter-form .col-auto{min-width:100%;}
  .ww-section-head{align-items:stretch;}
  .ww-mobile-user-card .ww-meta{grid-template-columns:1fr;}
  .table td,.table th{white-space:nowrap;}
}


.ww-thread{display:grid;gap:1rem;}
.ww-thread-item{display:flex;}
.ww-thread-item.is-user{justify-content:flex-end;}
.ww-thread-item.is-admin{justify-content:flex-start;}
.ww-thread-bubble{max-width:min(100%, 640px);padding:1rem 1.1rem;border-radius:22px;border:1px solid rgba(15,76,189,.10);box-shadow:var(--ww-shadow-soft);}
.ww-thread-item.is-user .ww-thread-bubble{background:linear-gradient(135deg, rgba(15,76,189,.96), rgba(47,128,237,.92));color:#fff;border-color:transparent;}
.ww-thread-item.is-admin .ww-thread-bubble{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));}
.ww-thread-meta{font-size:.82rem;font-weight:700;opacity:.78;margin-bottom:.45rem;}
.ww-thread-text{white-space:pre-wrap;word-break:break-word;line-height:1.6;}
.ww-empty-state{padding:1.4rem;border-radius:20px;border:1px dashed rgba(15,76,189,.18);background:rgba(15,76,189,.03);color:var(--ww-muted);text-align:center;}


.ww-notice-preview-wrap{
  border:1px solid rgba(15,76,189,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.98));
  border-radius:24px;
  box-shadow:var(--ww-shadow-soft);
  padding:1.2rem;
}
.ww-global-notice{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(15,76,189,.14);
  background:
    linear-gradient(135deg, rgba(6,33,78,.98), rgba(15,76,189,.92) 55%, rgba(47,128,237,.88)),
    radial-gradient(480px 220px at 12% 12%, rgba(255,255,255,.16), transparent 65%);
  box-shadow:0 20px 45px rgba(15,48,97,.18);
}
.ww-global-notice.is-hidden{
  opacity:.72;
}
.ww-global-notice__orb{
  position:absolute;
  right:-58px;
  top:-38px;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.ww-global-notice__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:1rem;
  align-items:start;
  padding:1.15rem 1.2rem;
}
.ww-global-notice__icon{
  width:56px;
  height:56px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.ww-global-notice__icon i{font-size:1.2rem;}
.ww-global-notice__eyebrow{
  color:rgba(255,255,255,.76);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  margin-bottom:.38rem;
}
.ww-global-notice__title{
  color:#fff;
  font-size:1.18rem;
  font-weight:800;
  margin:0 0 .45rem;
}
.ww-global-notice__text{
  color:rgba(255,255,255,.92);
  line-height:1.72;
  white-space:pre-wrap;
}
.ww-global-notice__status{
  align-self:center;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  padding:.55rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
@media (max-width: 767.98px){
  .ww-global-notice__inner{
    grid-template-columns:1fr;
  }
  .ww-global-notice__status{
    justify-self:start;
  }
}


.ww-safe-note{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:1rem 1.05rem;
  border-radius:18px;
  border:1px solid rgba(15,76,189,.10);
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,247,255,.96));
}
.ww-safe-note i{
  color:var(--ww-primary);
  font-size:1.15rem;
  line-height:1.2;
}
.ww-output-area{
  min-height:420px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size:.95rem;
  white-space:pre;
}
code{
  background:rgba(15,76,189,.08);
  color:var(--ww-primary);
  padding:.15rem .4rem;
  border-radius:8px;
}
