/* Tactical Distractions Online - brand.css
   Full replacement file
*/    
     
/* ---------- Theme tokens ---------- */
:root{
  --bg-deep: #0b1a11;
  --bg-main: #0e1f14;
  --bg-panel: #132a1b;

  --text-main: #e6f1ea;
  --text-muted: rgba(230,241,234,0.78);

  --border-subtle: rgba(230,241,234,0.14);

  --accent-gold: #c59b2a;
  --accent-gold-soft: rgba(197,155,42,0.35);

  --danger: rgba(169,68,66,0.75);
  --success: rgba(60,118,61,0.75);
  
  --font-stencil: "Special Elite", system-ui, sans-serif;
  --content-max-width: 1100px;
}

/* ---------- Page base ---------- */
*{ box-sizing:border-box; }
html, body{ min-height:100%; }

body{
  margin:0;
  color:var(--text-main);

  display:grid;
  grid-template-rows:
    auto
    auto
    1fr;

  min-height:100vh;

  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(1100px 420px at 18% 0%, rgba(197,155,42,0.10), transparent 52%),
    radial-gradient(900px 420px at 92% 18%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-main), var(--bg-deep));

  background-size:
    32px 32px,
    32px 32px,
    128px 128px,
    128px 128px,
    auto,
    auto,
    auto;
	
  background-attachment: fixed;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.4;
}

main{
  position:relative;
  padding-bottom:40px;
}

select{
  color:#f3ead2;
  background:#101614;
}

select option{
  color:#f3ead2;
  background:#101614;
}

.container{
  max-width:var(--content-max-width);
  margin:0 auto;
}

/* ---------- Typography helpers ---------- */
.hdr{
  margin:0 0 6px 0;
  color:var(--accent-gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:400;
  font-family:var(--font-stencil);
}

h1, h2{
  font-family:var(--font-stencil);
}

.subhdr{
  margin:0 0 14px 0;
  color:var(--text-muted);
}

.small{
  font-size:12px;
  color:var(--text-muted);
}

.hr{
  height:1px;
  background:var(--border-subtle);
  margin:14px 0;
}

/* ---------- Links ---------- */
a{ color:inherit; }

a.link{
  color:var(--accent-gold);
  text-decoration:none;
}

a.link:hover{
  text-decoration:underline;
}

/* ---------- Panels / surfaces ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--border-subtle);
  padding:16px;
}

.panel-gold{
  border-color: var(--accent-gold-soft);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}

/* ---------- Tables ---------- */
table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border-subtle);
  background: rgba(0,0,0,0.06);
}

th, td{
  padding:10px;
  border-bottom:1px solid var(--border-subtle);
  vertical-align:top;
}

th{
  text-align:left;
  color:rgba(230,241,234,0.86);
  text-transform:uppercase;
  letter-spacing:0.7px;
  font-size:12px;
}

tr:hover td{
  background: rgba(255,255,255,0.03);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
  border:1px solid rgba(197,155,42,.20);
  background:rgba(0,0,0,.35);
  color:white;
  cursor:pointer;
  text-decoration:none;
}

.btn:hover{
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-primary{
  background:rgba(197,155,42,.35);
  border-color:rgba(197,155,42,.40);
  color:#fff6d2;
}

.btn-primary:hover{
  background:rgba(197,155,42,.50);
  border-color:rgba(197,155,42,.55);
}

.btn-secondary{
  background: rgba(0,0,0,0.10);
}

.btn-secondary:hover{
  background: rgba(0,0,0,0.18);
}

.hero .btn{
  background:rgba(0,0,0,.62);
  border-color:rgba(197,155,42,.35);
}

.hero .btn-primary{
  background:rgba(197,155,42,.56);
}

.icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon svg{
  width:18px;
  height:18px;
}

.btn svg{
  width:14px;
  height:14px;
}

.icon svg path{
  stroke:currentColor;
}

.icon svg[viewBox] path[fill]{
  stroke:none;
}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--border-subtle);
  background: rgba(0,0,0,0.12);
  color: rgba(230,241,234,0.85);
  text-transform:uppercase;
  letter-spacing:0.7px;
  font-weight:800;
  font-size:11px;
}

.pill.active{
  border-color: rgba(60,118,61,0.60);
  background: rgba(60,118,61,0.12);
}

.pill.archived{
  border-color: rgba(230,241,234,0.22);
  background: rgba(0,0,0,0.10);
}

/* ---------- Alerts ---------- */
.alert{
  border:1px solid var(--border-subtle);
  padding:10px 12px;
  margin-bottom:12px;
  background:#0f2316;
}

.alert.error{ border-color: var(--danger); }
.alert.success{ border-color: var(--success); }

/* ---------- Navbar ---------- */

.nav-brandbar{
  padding:10px 18px;
  background:#0b1410;
  border-bottom:1px solid rgba(197,155,42,.10);
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.nav-logo{
  height:50px;
  width:auto;
  display:block;
}

.nav-brandtext{
  display:flex;
  flex-direction:column;
}

.nav-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.4px;
  line-height:1.05;
}

.nav-sub{
  font-size:11px;
  opacity:.6;
  line-height:1.1;
}

.nav-strip{
  position:sticky;
  top:0;
  z-index:1001;
  background:rgba(9,9,9,.82);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow:
    0 4px 14px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.nav-strip::before,
.nav-strip::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(197,155,42,0),
    rgba(197,155,42,.20),
    rgba(255,225,140,.35),
    rgba(197,155,42,.20),
    rgba(197,155,42,0)
  );
}

.nav-strip::before{ top:0; }
.nav-strip::after{ bottom:0; }

.nav-strip-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:3px 10px;
  overflow:visible;
}

.nav-toggle{
  display:none;
  padding:5px 10px;
  border-radius:8px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(255,255,255,.03);
  color:#e6f1ea;
  text-decoration:none;
  padding:7px 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.nav-link:hover{
  border-color:rgba(197,155,42,.30);
  background:rgba(197,155,42,.12);
}

.nav-link svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.nav-link.active{
  background:rgba(197,155,42,.18);
  color:#fff3c7;
  border-color:rgba(197,155,42,.28);
}

.nav-sep{
  flex:1 1 auto;
}

.nav-user{
  text-align:right;
  white-space:nowrap;
}

.nav-user-small{
  font-size:11px;
  opacity:.7;
  line-height:1.05;
}

.nav-user-name{
  font-weight:800;
  line-height:1.05;
}

@media(max-width:900px){
  .nav-strip-inner{
    display:block;
    padding:6px 10px;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
  }

  .nav-strip .nav-menu{
    display:none !important;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    width:100%;
  }

  .nav-strip .nav-menu.open{
    display:flex !important;
  }

  .nav-link{
    width:100%;
    justify-content:flex-start;
  }

  .nav-sep{
    display:none;
  }

  .nav-user{
    text-align:left;
    padding:8px 2px 2px;
    white-space:normal;
  }
}

/* ---------- Classified strip (logged-in only) ---------- */
.classified-strip{
  position:relative;
  z-index:15;
  border-bottom:1px solid var(--border-subtle);
  background: rgba(0,0,0,0.30);
}

.classified-strip:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(197,155,42,0.10) 0px,
      rgba(197,155,42,0.10) 6px,
      transparent 6px,
      transparent 14px
    );
  opacity:0.45;
  pointer-events:none;
}

.classified-inner{
  max-width:var(--content-max-width);
  margin:0 auto;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
}

.classified-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(230,241,234,0.85);
  text-transform:uppercase;
  letter-spacing:0.8px;
  font-weight:900;
  font-size:11px;
}

.classified-right{
  color:rgba(230,241,234,0.65);
  font-size:12px;
}

.classified-badge{
  border:1px solid var(--accent-gold-soft);
  background: rgba(197,155,42,0.12);
  color: var(--accent-gold);
  padding:4px 10px;
  font-weight:900;
  letter-spacing:1px;
}

/* ---------- Hero banner ---------- */
.hero{
  --hero-image: url("/assets/img/hero-default.png");
  --hero-position: center;

  position:relative;
  overflow:hidden;
  border:1px solid var(--accent-gold-soft);
  padding:26px 18px;

  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)),
    var(--hero-image);
  background-size:cover;
  background-position: var(--hero-position);
}

.campaign-tile .tile-hero{
  background-position: 0 20% !important;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:0.35;
  pointer-events:none;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0.35) 100%);
  z-index:1;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:10px;
  align-items:center;
}

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
}

.hero-title{
  margin:0;
  color:var(--accent-gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:20px;
}

.hero-kicker{
  margin:8px 0 0 0;
  color:rgba(230,241,234,0.90);
  line-height:1.45;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

@media (max-width: 900px){
  .hero-actions{ justify-content:flex-start; }
}

.hero-tagline{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  color:rgba(230,241,234,0.75);
  font-size:12px;
  letter-spacing:0.8px;
  text-transform:uppercase;
}

.hero-dot{
  width:8px;
  height:8px;
  border:1px solid var(--accent-gold);
  background:rgba(197,155,42,0.12);
  display:inline-block;
}

/* ---------- Home "Last operation" card ---------- */
.op-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px;
  background:#0f2316;
  border:1px solid var(--border-subtle);
  padding:14px;
}

@media (max-width: 820px){
  .op-card{ grid-template-columns:1fr; }
}

.op-thumb{
  width:100%;
  aspect-ratio:16 / 9;
  border:1px solid var(--border-subtle);
  background:rgba(0,0,0,0.20);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.op-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.op-meta-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.op-title{
  margin:0;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--accent-gold);
  font-weight:900;
}

.op-desc{
  margin:8px 0 0 0;
  color:var(--text-muted);
  line-height:1.5;
}

/* ---------- Auth pages ---------- */
.auth-wrap{
  margin-top:14px;
}

.auth-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:10px;
}

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

.auth-panel{
  background:var(--bg-panel);
  border:1px solid var(--border-subtle);
  padding:18px;
}

.auth-panel.soft{
  background:#0f2316;
}

.auth-title{
  margin:0 0 6px 0;
  color:var(--accent-gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:18px;
}

.auth-sub{
  margin:0 0 14px 0;
  color:var(--text-muted);
  line-height:1.45;
}

.form-row label{
  display:block;
  margin:10px 0 6px 0;
  color:var(--text-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.8px;
}

.form-row input,
select,
textarea{
  width:100%;
  background:#0f2316;
  border:1px solid var(--border-subtle);
  color:var(--text-main);
  padding:10px;
  outline:none;
  font:inherit;
}

textarea{
  min-height:90px;
  resize:vertical;
}

.form-row input:focus,
select:focus,
textarea:focus{
  border-color:rgba(197,155,42,0.55);
  box-shadow:0 0 0 1px rgba(197,155,42,0.12) inset;
}

.auth-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.sso-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sso-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  background:transparent;
  color:var(--text-main);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:0.7px;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;
}

.sso-btn:hover{
  border-color:var(--accent-gold);
  color:var(--accent-gold);
}

.sso-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-subtle);
}

.auth-bullets{
  margin:0;
  padding-left:18px;
  color:var(--text-muted);
  line-height:1.55;
}

.auth-note{
  margin-top:12px;
  color:var(--text-muted);
  font-size:12px;
}

/* ---------- Misc layout helpers ---------- */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- Character status LEDs ---------- */
.status-led{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:8px;
  position:relative;
  border:1px solid rgba(0,0,0,.65);
  background:#222;
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.15),
    0 0 2px rgba(0,0,0,.6);
}

.status-led::after{
  content:"";
  position:absolute;
  top:1px;
  left:2px;
  width:4px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.65);
  filter:blur(.2px);
}

.status-active{
  background:radial-gradient(circle at 30% 30%, #6aff9e, #00c84d);
  box-shadow:
    0 0 6px #00ff66,
    inset 0 -1px 2px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.25);
}

.status-injured{
  background:radial-gradient(circle at 30% 30%, #ffd36a, #d88b00);
  box-shadow:
    0 0 6px #ffb400,
    inset 0 -1px 2px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.25);
}

.status-mia{
  background:radial-gradient(circle at 30% 30%, #ff6a6a, #c20000);
  box-shadow:
    0 0 6px #ff3030,
    inset 0 -1px 2px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.25);
}

.status-rif{
  background:radial-gradient(circle at 30% 30%, #4a7fff, #0c3caa);
  box-shadow:
    0 0 4px #0c3caa,
    inset 0 -1px 2px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(255,255,255,.25);
}

.status-dead{
  background:radial-gradient(circle at 30% 30%, #333, #000);
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,.9),
    inset 0 1px 1px rgba(255,255,255,.08);
}

.admin-user-toolbar{
display:flex;
gap:8px;
margin-bottom:10px;
flex-wrap:wrap;
}

.admin-user-toolbar input{
width:260px;
}

.admin-user-table{
width:100%;
font-size:13px;
}

.admin-user-table th{
cursor:pointer;
}

.admin-user-table td{
padding:6px 8px;
}

.user-row:hover{
background:rgba(255,255,255,.03);
}

.user-name{
font-weight:700;
}

/* ================================
   Operation Tiles
   ================================ */

.ops-feed{
  display:grid;
  gap:10px;
}

.op-feed-tile{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius: 14px;
  overflow:hidden;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.op-feed-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(197,155,42,.28);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.op-feed-main{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  color:inherit;
  text-decoration:none;
}

@media(max-width: 820px){
  .op-feed-main{
    grid-template-columns:1fr;
  }
}

.op-feed-media{
  min-height: 145px;
  height:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06)),
    rgba(0,0,0,.16);
  background-size:cover;
  background-position:center;
  border-right:1px solid rgba(197,155,42,.12);
  position:relative;
  align-self:stretch;
}

.op-feed-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
  pointer-events:none;
}

@media(max-width: 820px){
  .op-feed-media{
    border-right:none;
    border-bottom:1px solid rgba(197,155,42,.12);
  }
}

.op-feed-media-fallback{
  min-height: 145px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.68;
  font-weight:700;
  letter-spacing:.2px;
}

.op-feed-content{
  position:relative;
  padding: 12px 14px;
}

.op-delete-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(197,155,42,.22);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:5;
}

.op-delete-btn:hover{
  border-color:rgba(197,155,42,.45);
}

.op-delete-btn svg{
  width:16px;
  height:16px;
}

.op-feed-topline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 6px;
  padding-right:50px;
}

.op-feed-date{
  font-size:12px;
  font-weight:800;
  opacity:.78;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.op-feed-campaign-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}

.op-feed-title{
  margin: 0 0 6px;
  font-size: 19px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:.1px;
  padding-right:50px;
}

.op-feed-desc{
  margin:0;
  opacity:.86;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.op-feed-events{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.op-feed-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius:999px;
  font-size: 11px;
  font-weight:800;
  letter-spacing:.1px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(255,255,255,.03);
  color:inherit;
}

.op-feed-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(197,155,42,.75);
  box-shadow:0 0 8px rgba(197,155,42,.28);
  flex:0 0 8px;
}

/* legacy support for older home/index markup */
.op-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
}

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

.op-thumb{
  width:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}

.op-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.op-meta-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.op-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:900;
}

.op-desc{
  margin:0;
  opacity:.9;
  line-height:1.45;
}
/* ===== Moved View CSS Blocks ===== */

/* moved from app\Views\admin\index.php */
.admin-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:16px;
}
.admin-card{
  grid-column:span 12;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:18px;
}
@media(min-width:900px){
  .admin-card.half{ grid-column:span 6; }
  .admin-card.third{ grid-column:span 4; }
}

.admin-card h2{
  margin:0 0 8px;
}
.admin-card p{
  margin:0 0 14px;
  opacity:.82;
}

.admin-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 12px;
}
.admin-toolbar input,
.admin-toolbar select{
  min-width:180px;
  max-width:280px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}

.admin-user-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.admin-user-table th,
.admin-user-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(230,241,234,0.10);
  vertical-align:top;
}
.admin-user-table th{
  cursor:pointer;
  user-select:none;
}
.admin-user-table th.sortable:hover{
  color:var(--accent-gold);
}
.admin-user-table td{
  font-size:13px;
}
.admin-user-name{
  font-weight:800;
}
.admin-user-email{
  opacity:.84;
  word-break:break-word;
}
.admin-user-roles{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.admin-user-campaigns{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.admin-mini-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.16);
  font-size:11px;
  font-weight:800;
  line-height:1.1;
}
.admin-user-row:hover td{
  background:rgba(255,255,255,.03);
}
.admin-user-actions{
  white-space:nowrap;
}
.admin-empty{
  padding:14px 0 4px;
  opacity:.75;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input,
.modal-body select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}

.admin-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.admin-section-head p{
  margin:4px 0 0;
}

/* moved from app\Views\admin\rank_badge_overrides.php */
.rank-override-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.rank-override-left{ grid-column:span 12; }
.rank-override-right{ grid-column:span 12; }

@media(min-width:1100px){
  .rank-override-left{ grid-column:span 8; }
  .rank-override-right{ grid-column:span 4; }
}

.override-panel{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}

/* rank badge override stage */
.rank-override-wrap .uniform-stage{
  position:relative;
  border:1px solid rgba(197,155,42,.12);
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(0,0,0,.12);
  background-size:24px 24px, 24px 24px, auto;
  min-height:0;
  overflow:hidden;
  padding:0;
  line-height:0;
  cursor:crosshair;
}

.rank-override-wrap .uniform-stage img.uniform-base{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.override-marker{
  position:absolute;
  transform:translate(-50%, -50%);
  transform-origin:center center;
  border:2px solid rgba(197,155,42,.95);
  background:rgba(197,155,42,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.55) inset;
  min-width:18px;
  min-height:18px;
  cursor:grab;
  overflow:hidden;
}

.override-marker:active{
  cursor:grabbing;
}

.override-marker.base{
  border-style:dashed;
  background:rgba(197,155,42,.06);
}

.override-marker.override{
  border-style:solid;
  background:rgba(255,243,199,.10);
}

.override-marker.disabled{
  border-color:rgba(255,90,90,.85);
  background:rgba(255,90,90,.08);
}

.override-marker.active{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 2px rgba(255,243,199,.22),
    0 0 18px rgba(255,243,199,.18);
}

.override-marker-image{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.override-marker-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

.override-marker-image.clip-left-half img{
  width:200%;
  max-width:none;
  transform:translateX(0);
}
.override-marker-image.clip-right-half img{
  width:200%;
  max-width:none;
  transform:translateX(-50%);
}
.override-marker-image.clip-top-half img{
  height:200%;
  max-height:none;
  transform:translateY(0);
}
.override-marker-image.clip-bottom-half img{
  height:200%;
  max-height:none;
  transform:translateY(-50%);
}

.override-marker-crosshair-x,
.override-marker-crosshair-y{
  position:absolute;
  background:rgba(255,243,199,.45);
  pointer-events:none;
  z-index:2;
}
.override-marker-crosshair-x{
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
}
.override-marker-crosshair-y{
  top:50%;
  left:0;
  right:0;
  height:1px;
  transform:translateY(-50%);
}

.override-marker-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotate(calc(-1 * var(--label-rot, 0deg)));
  font-size:11px;
  font-weight:900;
  color:#fff6d2;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  white-space:nowrap;
  pointer-events:none;
  z-index:3;
}

.override-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.override-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  border:1px solid rgba(197,155,42,.12);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  padding:10px 12px;
}
.override-row.active{
  border-color:rgba(197,155,42,.35);
  background:rgba(197,155,42,.08);
}
.override-row-title{
  font-weight:800;
}
.override-row-sub{
  font-size:12px;
  opacity:.72;
  margin-top:3px;
}

.form-stack{
  display:grid;
  gap:12px;
}
.form-field label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.form-field input,
.form-field select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}
.form-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.inline-status{
  font-size:12px;
  opacity:.78;
}
.checkline{
  display:flex;
  align-items:center;
  gap:8px;
}
.checkline input{
  width:auto;
}
.service-uniform-note{
  font-size:12px;
  opacity:.7;
}
.canvas-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.canvas-toolbar .small{
  opacity:.75;
}

/* moved from app\Views\admin\roles.php */
.roles-section{
  margin-top:18px;
}
.roles-section h2{
  margin:0 0 12px;
}

.role-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.role-card{
  grid-column:span 12;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}
@media(min-width:900px){
  .role-card{ grid-column:span 6; }
}
.role-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.role-name{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.role-desc{
  margin:4px 0 0;
  opacity:.82;
}
.role-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.role-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  font-size:12px;
  font-weight:800;
}
.role-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input,
.modal-body textarea,
.modal-body select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}
.modal-body textarea{
  min-height:110px;
  resize:vertical;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}
.checkline{
  display:flex;
  align-items:center;
  gap:10px;
}
.checkline input{
  width:auto;
}

/* moved from app\Views\admin\role_show.php */
.role-show-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:16px;
}
.role-main{ grid-column:span 12; }
.role-side{ grid-column:span 12; }
@media(min-width:980px){
  .role-main{ grid-column:span 8; }
  .role-side{ grid-column:span 4; }
}

.perm-group{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
}
.perm-group h3{
  margin:0 0 12px;
  font-size:20px;
}
.perm-list{
  display:grid;
  gap:10px;
}
.perm-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.12);
}
.perm-item input{
  margin-top:3px;
  transform:scale(1.15);
}
.perm-code{
  display:block;
  font-weight:900;
  letter-spacing:.2px;
}
.perm-desc{
  display:block;
  opacity:.76;
  font-size:13px;
  margin-top:2px;
}
.role-summary{
  display:grid;
  gap:10px;
}
.role-box{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}
.role-box h3{
  margin:0 0 8px;
}
.role-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  font-size:12px;
  font-weight:800;
}
.role-save-row{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
  gap:10px;
}
.save-status{
  align-self:center;
  opacity:.75;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input,
.modal-body textarea{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}
.modal-body textarea{
  min-height:110px;
  resize:vertical;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}
.checkline{
  display:flex;
  align-items:center;
  gap:10px;
}
.checkline input{
  width:auto;
}

/* moved from app\Views\admin\service_uniforms.php */
.service-uniform-wrap{
  display:grid;
  gap:16px;
  margin-top:14px;
}

.service-uniform-card{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}

.service-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.service-uniform-table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.rank-table th,
.rank-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(197,155,42,.12);
}

.rank-uniform-preview{
  width:56px;
  height:56px;
  border-radius:8px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(0,0,0,.18);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.service-uniform-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.rank-uniform-select{
  width:220px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}

.service-uniform-note{
  font-size:12px;
  opacity:.75;
}

/* moved from app\Views\admin\uniform_badges.php */
.badge-editor-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.badge-editor-left{ grid-column:span 12; }
.badge-editor-right{ grid-column:span 12; }

@media(min-width: 1100px){
  .badge-editor-left{ grid-column:span 8; }
  .badge-editor-right{ grid-column:span 4; }
}

.badge-panel{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}

.uniform-canvas-wrap{
  border:1px solid rgba(197,155,42,.12);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  padding:12px;
}

.uniform-canvas{
  position:relative;
  width:100%;
  min-height:0;
  overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    rgba(0,0,0,.12);
  background-size:24px 24px, 24px 24px, auto;
  cursor:crosshair;
}

.uniform-canvas img.uniform-base{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.uniform-canvas-empty{
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:.7;
  padding:20px;
}

.badge-marker{
  position:absolute;
  transform:translate(-50%, -50%);
  transform-origin:center center;
  border:2px solid rgba(197,155,42,.95);
  background:rgba(197,155,42,.10);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 14px rgba(197,155,42,.25);
  cursor:grab;
  user-select:none;
  overflow:hidden;
  min-width:18px;
  min-height:18px;
}

.badge-marker:active{
  cursor:grabbing;
}

.badge-marker.active{
  border-color:#fff3c7;
  background:rgba(255,243,199,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 2px rgba(255,243,199,.2),
    0 0 18px rgba(255,243,199,.2);
}

.badge-marker-crosshair-x,
.badge-marker-crosshair-y{
  position:absolute;
  background:rgba(255,243,199,.45);
  pointer-events:none;
  z-index:3;
}
.badge-marker-crosshair-x{
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
}
.badge-marker-crosshair-y{
  top:50%;
  left:0;
  right:0;
  height:1px;
  transform:translateY(-50%);
}

.badge-marker-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotate(calc(-1 * var(--label-rot, 0deg)));
  font-size:11px;
  font-weight:900;
  color:#fff6d2;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  pointer-events:none;
  white-space:nowrap;
  z-index:4;
}

.badge-marker-image{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.badge-marker-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.badge-marker-image.clip-left-half img{
  width:200%;
  max-width:none;
  transform:translateX(0);
}
.badge-marker-image.clip-right-half img{
  width:200%;
  max-width:none;
  transform:translateX(-50%);
}
.badge-marker-image.clip-top-half img{
  height:200%;
  max-height:none;
  transform:translateY(0);
}
.badge-marker-image.clip-bottom-half img{
  height:200%;
  max-height:none;
  transform:translateY(-50%);
}

.badge-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.badge-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.12);
  background:rgba(255,255,255,.02);
}

.badge-list-item.active{
  border-color:rgba(197,155,42,.35);
  background:rgba(197,155,42,.08);
}

.badge-list-meta{
  min-width:0;
}
.badge-list-title{
  font-weight:800;
  line-height:1.15;
}
.badge-list-sub{
  font-size:12px;
  opacity:.72;
  margin-top:3px;
  word-break:break-word;
}

.form-stack{
  display:grid;
  gap:12px;
}
.form-field label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
  opacity:.92;
}
.form-field input,
.form-field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.help-copy{
  font-size:13px;
  opacity:.78;
  line-height:1.45;
}

.service-uniform-note{
  font-size:12px;
  opacity:.7;
}

.inline-status{
  font-size:12px;
  opacity:.78;
}

.canvas-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.canvas-toolbar .small{
  opacity:.75;
}

/* modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}

/* moved from app\Views\admin\uniform_bases.php */
.uniform-bases-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.uniform-bases-left{ grid-column:span 12; }
.uniform-bases-right{ grid-column:span 12; }

@media(min-width: 1100px){
  .uniform-bases-left{ grid-column:span 8; }
  .uniform-bases-right{ grid-column:span 4; }
}

.uniform-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}

.uniform-card{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:16px;
  overflow:hidden;
}

.uniform-thumb{
  aspect-ratio:3 / 4;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(197,155,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.uniform-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.uniform-thumb-empty{
  padding:18px;
  text-align:center;
  opacity:.65;
  font-size:13px;
}

.uniform-body{
  padding:12px;
}
.uniform-name{
  margin:0 0 6px;
  font-weight:900;
  font-size:16px;
  line-height:1.1;
}
.uniform-note{
  font-size:13px;
  opacity:.78;
  line-height:1.35;
  min-height:36px;
}
.uniform-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.uniform-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
}

.uniform-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.form-stack{
  display:grid;
  gap:12px;
}
.form-field label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
  opacity:.92;
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.form-field textarea{
  min-height:90px;
  resize:vertical;
}

.uniform-help{
  font-size:13px;
  opacity:.78;
  line-height:1.45;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  margin-top:10px;
  color:#fca5a5;
  font-size:13px;
  display:none;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
  opacity:.92;
}
.modal-body input,
.modal-body textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.modal-body textarea{
  min-height:100px;
  resize:vertical;
}

/* moved from app\Views\admin\users.php */
.users-shell{
  margin-top:16px;
  display:grid;
  gap:16px;
}

.users-toolbar{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}

.users-toolbar-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  align-items:end;
}
.users-field{
  grid-column:span 12;
}
@media(min-width:800px){
  .users-field.search{ grid-column:span 5; }
  .users-field.status{ grid-column:span 2; }
  .users-field.hasroles{ grid-column:span 2; }
  .users-field.sort{ grid-column:span 2; }
  .users-field.dir{ grid-column:span 1; }
}
.users-field label{
  display:block;
  font-size:12px;
  font-weight:800;
  opacity:.75;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.users-field input,
.users-field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}

.users-summary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.users-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.16);
  font-size:12px;
  font-weight:800;
}

.users-table-wrap{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  overflow:hidden;
}

.users-table-scroll{
  overflow:auto;
}

.users-table{
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}
.users-table th,
.users-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(197,155,42,.10);
  vertical-align:middle;
}
.users-table thead th{
  position:sticky;
  top:0;
  background:rgba(8,14,11,.98);
  z-index:2;
  text-align:left;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.82;
}
.users-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}
.users-table tbody tr:last-child td{
  border-bottom:none;
}

.user-cell{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.user-name{
  font-weight:900;
  line-height:1.15;
}
.user-email{
  font-size:12px;
  opacity:.72;
  line-height:1.15;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.18);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.status-pill.active{
  border-color:rgba(52,211,153,.30);
  background:rgba(52,211,153,.10);
}
.status-pill.disabled{
  border-color:rgba(239,68,68,.30);
  background:rgba(239,68,68,.10);
}

.role-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.18);
  font-size:12px;
  font-weight:900;
}

.role-chip-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.role-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(0,0,0,.16);
  font-size:10px;
  font-weight:900;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.role-chip.global{
  border-color:rgba(197,155,42,.26);
}
.role-chip.scoped{
  opacity:.88;
}

.users-empty{
  padding:28px 20px;
  text-align:center;
  opacity:.75;
}

.users-mobile-list{
  display:none;
}
@media(max-width:900px){
  .users-table-wrap{ display:none; }
  .users-mobile-list{
    display:grid;
    gap:12px;
  }
}

.user-card{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:14px;
}
.user-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.user-card-main{
  min-width:0;
}
.user-card-meta{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.user-card-meta-item{
  font-size:12px;
}
.user-card-meta-label{
  opacity:.68;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.35px;
}
.user-card-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

.sort-link{
  color:inherit;
  text-decoration:none;
}
.sort-link.active{
  color:#fff3c7;
}

/* moved from app\Views\admin\user_show.php */
.role-assignment-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  margin-top:16px;
}
.role-card{
  grid-column:span 12;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
@media(min-width:900px){
  .role-card{ grid-column:span 6; }
}
.role-title{
  font-weight:900;
  font-size:18px;
  margin:0;
}
.role-desc{
  opacity:.76;
  font-size:13px;
  margin-top:3px;
}
.role-scope{
  opacity:.8;
  font-size:13px;
  margin-top:8px;
}
.role-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  font-size:12px;
  font-weight:800;
}
.role-protected{
  font-size:12px;
  font-weight:800;
  opacity:.72;
}

.user-meta-panel{
  margin-top:16px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  padding:16px;
}
.user-meta-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.user-meta-item{
  grid-column:span 12;
}
@media(min-width:900px){
  .user-meta-item{ grid-column:span 4; }
}
.user-meta-label{
  font-size:12px;
  font-weight:800;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.user-meta-value{
  margin-top:4px;
  font-size:15px;
  font-weight:700;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(520px,calc(100vw - 24px));
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg,rgba(15,22,18,.98),rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  justify-content:space-between;
  padding:16px 18px 10px;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-stack select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:white;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}

/* moved from app\Views\campaigns\create.php */
.form-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
}

.form-main{
  grid-column:span 12;
}

@media(min-width:900px){
  .form-main{grid-column:span 8;}
}

.field{
  margin-bottom:14px;
}

.field label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  opacity:.9;
}

.field input,
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}

.field textarea{
  min-height:120px;
  resize:vertical;
}

.form-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.small-muted{
  font-size:12px;
  opacity:.7;
}

/* moved from app\Views\campaigns\index.php */
.campaign-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0, 1fr));
  gap:16px;
  margin-top:14px;
}
@media(min-width: 980px){
  .campaign-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.index-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.empty-state{
  padding:20px;
  border:1px solid rgba(197,155,42,.14);
  border-radius:16px;
  background:rgba(6,12,9,.28);
}

/* Modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-copy{
  margin:0 0 14px;
  opacity:.86;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  margin-top:6px;
  color:#fca5a5;
  font-size:13px;
  display:none;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
  opacity:.92;
}
.modal-body input,
.modal-body textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.modal-body textarea{
  min-height:120px;
  resize:vertical;
}

/* moved from app\Views\campaigns\services.php */
.link-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.link-col{ grid-column:span 12; }
@media(min-width:980px){
  .link-col{ grid-column:span 6; }
}
.service-list{
  display:grid;
  gap:10px;
}
.service-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
}
.service-meta{
  min-width:0;
}
.service-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.service-name{
  font-weight:800;
}
.service-short{
  opacity:.75;
  font-size:13px;
}

/* Modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-copy{
  margin:0 0 14px;
  opacity:.86;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

/* moved from app\Views\campaigns\show.php */
.campaign-show-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.campaign-show-left{ grid-column:span 12; }
.campaign-show-right{ grid-column:span 12; }
@media(min-width: 980px){
  .campaign-show-left{ grid-column:span 7; }
  .campaign-show-right{ grid-column:span 5; }
}

.campaign-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
}
.pill.active{
  border-color:rgba(52,211,153,.35);
  background:rgba(52,211,153,.10);
}
.pill.archived{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
}

.ops-list{
  display:grid;
  gap:12px;
}
.op-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
}
@media(max-width: 720px){
  .op-card{ grid-template-columns:1fr; }
}
.op-thumb{
  width:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  background-size:cover;
  background-position:0 20%;
  border:1px solid rgba(197,155,42,.14);
}
.op-meta h3{
  margin:0 0 6px;
  font-size:18px;
}
.op-meta p{
  margin:0;
  opacity:.84;
}
.campaign-show-left .op-meta p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.op-date{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  opacity:.72;
  font-weight:800;
}

.oob{
  margin-top:10px;
  border:1px solid rgba(197,155,42,.14);
  background: rgba(6,12,9,.28);
  border-radius:16px;
  padding:12px;
}
.oob ul{ margin:0; padding-left:18px; list-style:none; }
.oob-root{ padding-left:0; }
.oob-node{ margin:8px 0; }
.oob-group{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  padding:6px 8px;
  border-radius:12px;
  background: rgba(0,0,0,.12);
}
.oob-group-name{ display:inline-block; }
.oob-chars{ margin-top:6px; padding-left:18px; }
.oob-children{ margin-top:6px; padding-left:18px; }

.oob-char-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:10px;
  margin:4px 0;
  background: rgba(0,0,0,.10);
}

.oob-char-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}

.oob-char-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  flex:0 0 auto;
}

.oob-char-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  min-height:42px;
  flex:1 1 auto;
  padding:2px 0;
}

.oob-char-mainline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  line-height:1;
  flex-wrap:nowrap;
}

.oob-char-subline{
  font-size:11px;
  opacity:.68;
  line-height:1.15;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.oob-char-subline.assigned{
  opacity:.56;
}

.oob-char-name{
  opacity:.95;
  font-weight:800;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.led{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(0,0,0,0.35);
}
.oob-char-left .led{
  flex:0 0 12px;
  margin:0;
}
.led::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:5px; height:5px;
  border-radius:50%;
  background: rgba(255,255,255,0.45);
}
.led-active{ background:#34d399; box-shadow: 0 0 10px rgba(52,211,153,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-injured{ background:#f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-mia{ background:#ef4444; box-shadow: 0 0 10px rgba(239,68,68,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-rif{ background:#1d4ed8; box-shadow: 0 0 10px rgba(29,78,216,.40), 0 0 0 1px rgba(0,0,0,0.35); }
.led-dead{ background:#0b0b0b; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(0,0,0,0.55); }

.oob-rank-badge{
  width:35px;
  height:35px;
  flex:0 0 35px;
  border:none;
  background:none;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.oob-rank-short{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.88;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-copy{
  margin:0 0 14px;
  opacity:.86;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  margin-top:6px;
  color:#fca5a5;
  font-size:13px;
  display:none;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
  opacity:.92;
}
.modal-body input,
.modal-body textarea,
.modal-body select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.modal-body textarea{
  min-height:120px;
  resize:vertical;
}

/* moved from app\Views\campaigns\_tile.php */
/* Tile styles live here so AJAX-inserted tiles keep styling */
.ctile{
  border:1px solid rgba(197,155,42,.14);
  background: rgba(6,12,9,.28);
  border-radius:18px;
  overflow:hidden;
}

.ctile-head{
  position:relative;
  padding:14px;
  min-height:170px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72)),
    var(--hero-image, none);
  background-size:cover;
  background-position:0 20%;
  cursor:pointer;
}
.ctile-head::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 70% 10%, rgba(197,155,42,.10), transparent 55%);
  pointer-events:none;
}
.ctile-title{ position:relative; z-index:1; margin:0; font-size:20px; letter-spacing:.2px; }
.ctile-desc{
  position:relative; z-index:1;
  margin-top:8px;
  opacity:.88;
  font-size:13px;
  line-height:1.35;
  max-width:65ch;
}
.ctile-body{ padding:14px; }

.ctile-split{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media(min-width: 720px){
  .ctile-split{ grid-template-columns: 1fr 1fr; }
}

.section-hdr{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:0;
}
.section-hdr h3{
  margin:0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.85;
}
.section-hdr a{ font-size:12px; }

.oplist{ margin:8px 0 0; padding:0; list-style:none; }
.opitem{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(197,155,42,.12);
}
.opshot{
  width:72px; height:52px;
  flex:0 0 auto;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.16);
  background: rgba(0,0,0,.25);
  background-size:cover;
  background-position:0 20%;
}
.opmeta{ min-width:0; flex:1; }
.opname{ font-weight:900; font-size:13px; margin:0; line-height:1.15; }
.opname a{ color:inherit; text-decoration:none; }
.opname a:hover{ text-decoration:underline; }
.opsub{ margin-top:4px; font-size:12px; opacity:.78; }
.ctile .opsub{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.opdetails{ margin-top:6px; font-size:12px; opacity:.9; }
.opdetails .pill{ margin-right:6px; }

.minitree ul{ margin:8px 0 0; padding-left:16px; }
.minitree li{ margin:7px 0; }
.mg{ font-weight:900; font-size:12px; opacity:.92; }
.mc{ font-size:12px; opacity:.85; margin-left:8px; }

.hr{ height:1px; background: rgba(197,155,42,.14); margin:10px 0; }
.small{ font-size:12px; opacity:.78; }

/* moved from app\Views\characters\index.php */
.roster-wrap{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
  margin-top:14px;
}
.roster-left{ grid-column: span 12; }
.roster-right{ grid-column: span 12; }
@media(min-width: 980px){
  .has-group-controls .roster-left{ grid-column: span 7; }
  .has-group-controls .roster-right{ grid-column: span 5; }
}

.campaign-select{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 10px 0 6px;
}
.campaign-select label{ font-weight:800; opacity:.9; }
.campaign-select select{
  width:100%;
  max-width: 420px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background: rgba(0,0,0,.18);
  color: inherit;
}

.oob{
  margin-top:10px;
  border:1px solid rgba(197,155,42,.14);
  background: rgba(6,12,9,.28);
  border-radius:16px;
  padding:12px;
}
.oob ul{ margin:0; padding-left:18px; list-style:none; }
.oob-root{ padding-left:0; }
.oob-node{ margin:8px 0; }

.oob-group{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  padding:6px 8px;
  border-radius:12px;
  background: rgba(0,0,0,.12);
}
.oob-group-name{ display:inline-block; }
.oob-actions{ margin-left:auto; display:inline-flex; gap:8px; flex-wrap:wrap; }
.oob-chars{ margin-top:6px; padding-left:18px; }
.oob-children{ margin-top:6px; padding-left:18px; }

.oob-editable .oob-group{ cursor: grab; }
.oob-editable .oob-chars{
  min-height:44px;
  padding:6px 0 6px 18px;
  border-radius:12px;
}
.oob-editable .oob-chars:empty{
  border:1px dashed rgba(197,155,42,.18);
  background:rgba(197,155,42,.04);
}

.sort-placeholder{
  border:1px dashed rgba(197,155,42,.35);
  background: rgba(197,155,42,.06);
  border-radius:12px;
  height:36px;
  margin:8px 0;
}
.drop-hover{
  outline: 1px dashed rgba(197,155,42,.55);
  outline-offset: 6px;
  border-radius: 12px;
}

.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background: rgba(0,0,0,.18);
  color: inherit;
  cursor: pointer;
}
.iconbtn:hover{ border-color: rgba(197,155,42,.35); }

.oob-char-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 8px;
  border-radius:10px;
  margin:4px 0;
  background: rgba(0,0,0,.10);
}
.oob-editable .oob-char-item{ cursor: grab; }
.oob-char-name{ opacity:.95; }


.oob-char-editor{
  margin-top:8px;
  margin-left:22px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.14);
  background: rgba(0,0,0,.18);
}
.oob-edit-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
}
.oob-edit-field{ grid-column: span 12; }
@media(min-width: 900px){
  .oob-edit-field{ grid-column: span 6; }
}
.oob-edit-field label{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-bottom:6px;
  font-weight:800;
}
.oob-edit-field input, .oob-edit-field select,
.modal-body input, .modal-body textarea, .modal-body select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background: rgba(0,0,0,.18);
  color: inherit;
  box-sizing:border-box;
}
.oob-edit-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}

.led{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(0,0,0,0.35);
}

.oob-char-left .led{
  flex:0 0 12px;
  margin:0;
}

.led::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:5px; height:5px;
  border-radius:50%;
  background: rgba(255,255,255,0.45);
  filter: blur(.2px);
}
.led-active{ background:#34d399; box-shadow: 0 0 10px rgba(52,211,153,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-injured{ background:#f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-mia{ background:#ef4444; box-shadow: 0 0 10px rgba(239,68,68,.55), 0 0 0 1px rgba(0,0,0,0.35); }
.led-rif{ background:#1d4ed8; box-shadow: 0 0 10px rgba(29,78,216,.40), 0 0 0 1px rgba(0,0,0,0.35); }
.led-dead{ background:#0b0b0b; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(0,0,0,0.55); }

.oob-rank-badge{
  width:35px;
  height:35px;
  flex:0 0 35px;
  border:none;
  background:none;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.oob-rank-short{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.88;
}

.oob-player-chips{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-left:8px;
}

.oob-player-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.18);
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.2;
  opacity:.92;
}

.oob-player-chip.mine{
  border-color:rgba(52,211,153,.35);
  background:rgba(52,211,153,.10);
}

.oob-player-chip.claimed{
  border-color:rgba(197,155,42,.24);
}

.oob-assign-user-row{
  margin:8px 0 0 22px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.oob-assign-user-row select{
  min-width:220px;
  max-width:320px;
}

.oob-char-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}

.oob-char-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  flex:0 0 auto;
}

.oob-char-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  min-height:42px;
  flex:1 1 auto;
  padding:2px 0;
}

.oob-char-mainline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  line-height:1;
  flex-wrap:nowrap;
}

.oob-char-subline{
  font-size:11px;
  opacity:.68;
  line-height:1.15;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.oob-rank-short{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.88;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.oob-char-name{
  opacity:.95;
  font-weight:800;
  min-width:0;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.hr{ height:1px; background: rgba(197,155,42,.14); margin:12px 0; }
.field label{ display:block; margin-bottom:6px; font-weight:800; opacity:.92; }
.field input, .field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background: rgba(0,0,0,.18);
  color: inherit;
}

/* Modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-copy{
  margin:0 0 14px;
  opacity:.86;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-error{
  margin-top:10px;
  color:#fca5a5;
  font-size:13px;
  display:none;
}
.ui-sortable-helper{ z-index: 99999 !important; }
.oob, .oob-chars { overflow:visible; }

/* moved from app\Views\characters\show.php */
.character-show-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:16px;
    margin-top:14px;
}
.character-show-left,
.character-show-right{
    grid-column:span 12;
}
@media(min-width: 980px){
    .character-show-left{ grid-column:span 5; }
    .character-show-right{ grid-column:span 7; }
}

.character-meta-pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.character-meta-pill{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    border:1px solid rgba(197,155,42,.18);
    background:rgba(0,0,0,.18);
}

.character-show-grid .uniform-stage,
.character-show-left .uniform-stage{
    border:1px solid rgba(197,155,42,.14);
    border-radius:18px;
    background:rgba(6,12,9,.28);
    padding:14px;
    overflow:auto;
}

.character-show-grid .uniform-figure,
.character-show-left .uniform-figure{
    position:relative;
    display:inline-block;
    line-height:0;
    max-width:100%;
}

.character-show-grid .uniform-base-image,
.character-show-left .uniform-base-image{
    display:block;
    max-width:100%;
    height:auto;
}

.character-show-grid .uniform-empty,
.character-show-left .uniform-empty{
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.72;
}

.character-show-grid .uniform-badge,
.character-show-left .uniform-badge{
    position:absolute;
    transform:translate(-50%, -50%);
    transform-origin:center center;
    overflow:hidden;
    pointer-events:none;
}

.character-show-grid .uniform-badge-image,
.character-show-left .uniform-badge-image{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.character-show-grid .uniform-badge-image img,
.character-show-left .uniform-badge-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.character-show-grid .uniform-badge-image.clip-left-half img,
.character-show-left .uniform-badge-image.clip-left-half img{
    width:200%;
    max-width:none;
    transform:translateX(0);
}
.character-show-grid .uniform-badge-image.clip-right-half img,
.character-show-left .uniform-badge-image.clip-right-half img{
    width:200%;
    max-width:none;
    transform:translateX(-50%);
}
.character-show-grid .uniform-badge-image.clip-top-half img,
.character-show-left .uniform-badge-image.clip-top-half img{
    height:200%;
    max-height:none;
    transform:translateY(0);
}
.character-show-grid .uniform-badge-image.clip-bottom-half img,
.character-show-left .uniform-badge-image.clip-bottom-half img{
    height:200%;
    max-height:none;
    transform:translateY(-50%);
}


.character-show-grid .uniform-medal-rack,
.character-show-left .uniform-medal-rack{
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:0;
    pointer-events:none;
}

.character-show-grid .uniform-medal-rack-row,
.character-show-left .uniform-medal-rack-row{
    display:flex;
    justify-content:center;
    gap:0;
}

.character-show-grid .uniform-medal-ribbon,
.character-show-left .uniform-medal-ribbon{
    width:33.3333%;
    height:auto;
    aspect-ratio:3.111 / 1;
    flex:0 0 auto;
    max-width:none;
}

.character-show-grid .uniform-medal-ribbon .medal-ribbon-device,
.character-show-left .uniform-medal-ribbon .medal-ribbon-device{
    width:7px;
    height:7px;
}

.service-panel-stack{
    display:grid;
    gap:10px;
}
.service-panel{
    border:1px solid rgba(197,155,42,.14);
    border-radius:18px;
    background:rgba(6,12,9,.28);
    overflow:visible;
}
.service-panel-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid rgba(197,155,42,.12);position:sticky;top:0;z-index:5;background:rgba(9,16,12,.92);backdrop-filter:blur(2px);}
.service-panel-title{
    margin:0;
    font-size:20px;
    font-weight:900;
}
.service-panel-sub{
    margin:4px 0 0;
    opacity:.82;
}
.service-panel-body{
    padding:14px 16px;
}
.service-item-list{
    display:grid;
    gap:10px;
}
.service-item{
    border:1px solid rgba(197,155,42,.10);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.03);
}
.service-item-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.service-item-title{
    font-weight:800;
}
.service-item-date{
    opacity:.75;
    font-size:12px;
    font-weight:800;
}
.service-panel-actions{
    display:flex;
    align-items:center;
    gap:6px;
}
.service-item-top-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}
.service-status-inline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}
.service-item-meta{
    margin-top:4px;
    font-size:13px;
    opacity:.82;
}
.svc-item-status-injured{ border-left:4px solid rgba(245,158,11,.75); }
.svc-item-status-mia{ border-left:4px solid rgba(239,68,68,.75); }
.svc-item-status-dead{ border-left:4px solid rgba(148,163,184,.60); }
.svc-item-status-rif{ border-left:4px solid rgba(96,165,250,.75); }

.service-empty{
    opacity:.72;
}

/* moved from app\Views\operations\index.php */
.ops-index-wrap{ margin-top:14px; }
.ops-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ops-filter-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.ops-filter-row label{ font-weight:800; }
.ops-filter-row select{ min-width:240px; padding:10px 12px; border-radius:12px; border:1px solid rgba(197,155,42,.18); background:rgba(0,0,0,.18); color:inherit; }
.ops-more{ display:flex; justify-content:center; align-items:center; margin-top:12px; min-height:22px; }
.ops-more-status{ font-size:12px; opacity:.72; letter-spacing:.02em; }
.ops-scroll-sentinel{ width:100%; height:1px; margin-top:2px; }
.empty-copy{ opacity:.72; }

.modal-shell{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:99999; }
.modal-shell.is-open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
.modal-card{ position:relative; width:min(760px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; border-radius:18px; border:1px solid rgba(197,155,42,.22); background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98)); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 10px; }
.modal-title{ margin:0; font-size:20px; font-weight:900; }
.modal-close{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(197,155,42,.18); background:rgba(0,0,0,.18); color:inherit; cursor:pointer; }
.modal-body{ padding:0 18px 18px; }
.modal-stack{ display:grid; gap:12px; }
.modal-body label{ display:block; margin-bottom:6px; font-weight:800; }
.modal-body input,
.modal-body textarea,
.modal-body select{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:12px; border:1px solid rgba(197,155,42,.18); background:rgba(0,0,0,.18); color:inherit; }
.modal-body textarea{ min-height:120px; resize:vertical; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.modal-error{ display:none; color:#fca5a5; font-size:13px; }

.name-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
@media(max-width:700px){ .name-row{ grid-template-columns:1fr; } }

.debug-box{ margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(197,155,42,.14); background:rgba(255,255,255,.03); font-size:12px; line-height:1.45; }
.debug-box code{ white-space:pre-wrap; word-break:break-word; }

/* moved from app\Views\operations\show.php */
.operation-show-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
  align-items:start;
}
.operation-show-summary{
  grid-column:span 12;
  min-width:0;
}
.operation-show-media,
.operation-show-left,
.operation-show-right{
  grid-column:span 12;
  min-width:0;
}
@media(min-width:980px){
  .operation-show-wrap{
    grid-template-columns:minmax(0,1.9fr) minmax(320px,420px);
  }
  .operation-show-summary{ grid-column:1 / -1; }
  .operation-show-media{ grid-column:1 / -1; }
  .operation-show-left{ grid-column:1; }
  .operation-show-right{ grid-column:2; position:sticky; top:86px; align-self:start; }
}

.op-side-nav{
  display:none;
}

@media(min-width:980px){

  .op-side-nav{
    display:block;
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:40;
  }

  .op-side-nav-prev{ left:0; }
  .op-side-nav-next{ right:0; }

  .op-side-nav-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    padding:8px 4px;

    border-radius:0 10px 10px 0;
    border:1px solid rgba(197,155,42,.18);
    border-left:none;

    background:rgba(8,12,10,.92);
    color:inherit;
    text-decoration:none;

    box-shadow:0 4px 16px rgba(0,0,0,.25);
    backdrop-filter:blur(4px);

    transition:transform .18s ease,
               background .15s ease,
               border-color .15s ease;
  }

  .op-side-nav-next .op-side-nav-link{
    border-radius:10px 0 0 10px;
    border-right:none;
  }

  /* hide slightly off-screen so they look like tabs */
  .op-side-nav-prev .op-side-nav-link{
    transform:translateX(-4px);
  }

  .op-side-nav-next .op-side-nav-link{
    transform:translateX(12px);
  }

  .op-side-nav-link:hover{
    transform:translateX(0);
    background:rgba(197,155,42,.12);
    border-color:rgba(197,155,42,.35);
    color:var(--accent-gold);
  }

  .op-side-nav-text{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);

    font-size:12px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    text-align:center;
  }

  .op-side-nav-label{
    opacity:.6;
    margin-bottom:6px;
  }

  .op-side-nav-name{
    opacity:.9;
  }

}

.op-show-card{
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
  border-radius:18px;
  overflow:hidden;
}
.op-show-card.is-entering{
  animation: opCardIn .22s ease-out;
}
@keyframes opCardIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.op-show-card-body{
  padding:16px;
}

.op-show-text{
  line-height:1.6;
  opacity:.92;
}
.op-show-text-empty{
  opacity:.7;
}

.op-consequence-section + .op-consequence-section{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(197,155,42,.10);
}
.op-consequence-title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--accent-gold);
}
.op-consequence-list{
  display:grid;
  gap:8px;
}
.op-consequence-item{
  border:1px solid rgba(197,155,42,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px 12px;
}
.op-consequence-main{
  font-weight:800;
  line-height:1.3;
}
.op-consequence-sub{
  font-size:12px;
  opacity:.74;
  margin-top:3px;
}

.op-participants-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.op-participants-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.op-participants-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.op-participants-wrap{
  border:1px solid rgba(197,155,42,.10);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  padding:12px;
}
.op-participants-help{
  margin-top:10px;
  font-size:12px;
  opacity:.72;
  line-height:1.45;
}

.op-media-grid{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.op-media-item{
  flex:0 0 min(320px, 84vw);
  border:1px solid rgba(197,155,42,.12);
  background:rgba(6,12,9,.28);
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
}
.op-media-thumb{
  aspect-ratio:16/9;
  background:rgba(0,0,0,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.op-media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.op-media-fallback{
  opacity:.7;
  font-size:13px;
  font-weight:700;
}
.op-media-body{
  padding:10px 12px;
}
.op-media-title{
  font-weight:800;
  line-height:1.25;
}
.op-media-meta{
  font-size:12px;
  opacity:.72;
  margin-top:4px;
}
.op-media-empty{
  opacity:.72;
}

.citation-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.citation-list{
  display:grid;
  gap:10px;
}
.citation-item{
  border:1px solid rgba(197,155,42,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:12px;
  position:relative;
}
.citation-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-right:72px;
}
.citation-main strong{
  display:block;
  font-weight:900;
  line-height:1.3;
  color:#fff6d2;
}
.citation-text{
  margin-top:6px;
  line-height:1.5;
  opacity:.92;
  white-space:normal;
}
.citation-meta{
  margin-top:8px;
  font-size:12px;
  opacity:.72;
}
.citation-actions{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:6px;
  margin-top:0;
}
.icon-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.icon-btn:hover{
  background:rgba(197,155,42,.10);
  border-color:rgba(197,155,42,.28);
}
.icon-btn svg{
  width:15px;
  height:15px;
}
#operationCitations .small,
#operationReports .small,
#operationVideos .small{
  opacity:.72;
}

.video-embed{
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.2);
  margin-bottom:12px;
}
.video-embed iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.video-stack{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.video-stack > .op-show-card{
  flex:0 0 min(520px, 90vw);
  margin:0;
  scroll-snap-align:start;
}
.video-comments{
  margin-top:10px;
  display:grid;
  gap:8px;
  max-height:220px;
  overflow:auto;
  padding-right:4px;
}
.video-comment{
  border:1px solid rgba(197,155,42,.10);
  background:rgba(0,0,0,.14);
  border-radius:12px;
  padding:10px 12px;
  position:relative;
}
.video-comment-main{
  padding-right:42px;
}
.video-comment-author{
  font-weight:800;
}
.video-comment-text{
  margin-top:4px;
  line-height:1.5;
  opacity:.92;
}
.video-comment-meta{
  margin-top:6px;
  font-size:12px;
  opacity:.72;
}
.video-comment-actions{
  position:absolute;
  top:8px;
  right:8px;
}
.video-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* Participant tree styling */
.op-roster-tree,
.op-roster-tree ul{
  list-style:none;
  margin:0;
  padding-left:0;
}
.op-roster-tree ul{
  margin-top:6px;
  padding-left:12px;
  border-left:1px solid rgba(197,155,42,.10);
}
.op-roster-group{
  margin-bottom:8px;
}
.op-roster-group-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  font-weight:900;
  font-size:12px;
}
.op-roster-char{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  padding:6px 8px;
  margin-top:4px;
  border-radius:10px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(197,155,42,.08);
}
.op-roster-char.is-not-present{
  opacity:.52;
  filter:saturate(.78);
}
.op-roster-char.is-present{
  opacity:1;
}
.op-roster-char-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.op-roster-led{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:0;
  flex:0 0 10px;
  box-shadow:0 0 8px rgba(255,255,255,.08);
}
.op-roster-led.active{ background:#34d399; }
.op-roster-led.injured{ background:#f59e0b; }
.op-roster-led.mia{ background:#ef4444; }
.op-roster-led.dead{ background:#111; }
.op-roster-led.rif{ background:#3b82f6; }

.op-roster-badge{
  width:24px;
  height:24px;
  flex:0 0 24px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.op-roster-text{
  min-width:0;
}
.op-roster-mainline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.op-roster-rank{
  font-size:11px;
  font-weight:900;
  opacity:.86;
}
.op-roster-name{
  font-weight:800;
  min-width:0;
}
.op-roster-name.link{
  color:inherit;
  text-decoration:none;
}
.op-roster-name.link:hover{
  text-decoration:underline;
  color:var(--accent-gold);
}
.op-roster-subline{
  font-size:11px;
  opacity:.72;
  margin-top:2px;
  line-height:1.2;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.op-roster-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
  border:1px solid rgba(197,155,42,.15);
  background:rgba(0,0,0,.18);
}
.op-roster-actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex:0 0 auto;
  margin-left:6px;
}
.op-presence-btn,
.op-outcome-btn,
.op-citation-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.op-presence-btn.is-present{
  border-color:rgba(52,211,153,.35);
  background:rgba(52,211,153,.10);
}
.op-presence-btn svg,
.op-outcome-btn svg,
.op-citation-btn svg{
  width:13px;
  height:13px;
}
@media(max-width:500px){
  .op-roster-char{
    flex-direction:column;
    align-items:stretch;
  }
}

@media(max-width:720px){

  .op-roster-actions{
    margin-left:0;
  }
  .citation-main{
    padding-right:0;
  }
  .citation-actions{
    position:static;
    margin-top:10px;
  }
  .video-comment-main{
    padding-right:0;
  }
  .video-comment-actions{
    position:static;
    margin-top:8px;
  }
}

/* modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input,
.modal-body textarea,
.modal-body select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
}
.modal-body input[type="file"]{
  padding:8px 10px;
}
.modal-body textarea{
  min-height:120px;
  resize:vertical;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}

/* moved from app\Views\services\index.php */
.service-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0, 1fr));
  gap:16px;
  margin-top:16px;
}
@media(min-width: 980px){
  .service-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.service-uniform-card{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
}
.service-thumb{
  width:96px;
  height:96px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(0,0,0,.18);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.service-meta h3{
  margin:0 0 6px;
}
.service-meta p{
  margin:0 0 8px;
  opacity:.82;
}
.meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
}
.top-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}
.modal-card{
  position:relative;
  width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px; 
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-stack{
  display:grid;
  gap:12px;
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
}

/* moved from app\Views\services\show.php */
.service-show-wrap{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:14px;
}
.service-left{ grid-column:span 12; }
.service-right{ grid-column:span 12; }
@media(min-width:980px){
  .service-left{ grid-column:span 8; }
  .service-right{ grid-column:span 4; }
}

.service-uniform-table{
  width:100%;
  border-collapse:collapse;
}
.rank-table th, .rank-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(197,155,42,.14);
  text-align:left;
  vertical-align:top;
}
.rank-badge{
  width:56px;
  height:56px;
  border-radius:8px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(0,0,0,.18);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
}
.link-list{
  display:grid;
  gap:10px;
}
.service-uniform-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Modal */
.modal-shell{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
.modal-shell.is-open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}
.modal-card{
  position:relative;
  width:min(760px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(197,155,42,.22);
  background:linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,12,10,.98));
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
}
.modal-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
}
.modal-body{
  padding:0 18px 18px;
}
.modal-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.modal-field{ grid-column:span 12; }
@media(min-width:760px){
  .modal-field.half{ grid-column:span 6; }
}
.modal-body label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.modal-body input, .modal-body select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  color:inherit;
  box-sizing:border-box;
}
.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 14px;
}
.checkbox-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  margin:0;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.modal-error{
  display:none;
  color:#fca5a5;
  font-size:13px;
  margin-top:8px;
}
.modal-copy{
  margin:0 0 14px;
  opacity:.86;
}


/* ===== View Inline Utility Classes ===== */
.u-mt-4{margin-top:4px;}
.u-mt-8{margin-top:8px;}
.u-mt-10{margin-top:10px;}
.u-mt-12{margin-top:12px;}
.u-mt-14{margin-top:14px;}
.u-mt-18{margin-top:18px;}
.u-mb-6{margin-bottom:6px;}
.u-mb-10{margin-bottom:10px;}
.u-mb-12{margin-bottom:12px;}
.u-m-0{margin:0;}
.u-mb14-op86{margin:0 0 14px;opacity:.86;}
.u-op-50{opacity:.5;}
.u-op-60{opacity:.6;}
.u-op-70{opacity:.7;}
.u-op-75{opacity:.75;}
.u-op-80{opacity:.8;}
.u-op-85{opacity:.85;}
.u-hidden{display:none;}
.u-label-strong{display:block;margin-bottom:6px;font-weight:800;}
.u-flex-gap10-center{display:flex;gap:10px;align-items:center;}
.u-flex-gap10-center-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.u-flex-between-end-gap12-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.u-flex-gap8-wrap{display:flex;gap:8px;flex-wrap:wrap;}
.u-grid-gap14{display:grid;gap:14px;}
.u-pos-static-mt10{position:static;margin-top:10px;}
.u-aspect-16x9-mb12{aspect-ratio:16/9;margin-bottom:12px;}
.u-fs16-mb10{font-size:16px;margin-bottom:10px;}
.u-pad20-op70{padding:20px;opacity:.7;}
.u-modal-error-hidden{display:none;color:#fca5a5;font-size:13px;}
.u-sep-gold{height:1px;background:rgba(197,155,42,.14);margin:12px 0;}
.u-pad-18-14{padding:18px 14px;}
.u-w-8p{width:8%;}
.u-w-10p{width:10%;}
.u-w-16p{width:16%;}
.u-w-18p{width:18%;}
.u-w-23p{width:23%;}
.u-w-25p{width:25%;}
.u-w-70px{width:70px;}
.u-w-90px{width:90px;}
.u-w-120px{width:120px;}
.u-w-220px{width:220px;}
.u-w-260px{width:260px;}


.u-m0-op86{margin:0;opacity:.86;}
.u-m0-op85{margin:0;opacity:.85;}
.u-hidden-op78{display:none;opacity:.78;}


/* ===== Service Uniforms + Compatibility Fixes ===== */
.service-uniform-table th,
.service-uniform-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(197,155,42,.12);
}

/* Keep existing services pages stable after CSS consolidation */
.service-card{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(6,12,9,.28);
}

.rank-table{
  width:100%;
  border-collapse:collapse;
}

.rank-table th,
.rank-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(197,155,42,.14);
  text-align:left;
  vertical-align:top;
}

.rank-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.small-note{
  font-size:12px;
  opacity:.75;
}

/* ===== Medals Admin ===== */
.medals-admin-wrap{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.medals-admin-top .hdr{ margin-bottom:10px; }

.medal-create-form{
  display:grid;
  grid-template-columns:2fr 1.3fr auto;
  gap:10px;
  align-items:end;
}
.medal-device-create-form{
  display:grid;
  grid-template-columns:1.7fr 1.4fr 1.4fr auto auto;
  gap:10px;
  align-items:end;
}

.medal-device-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:center;
}

.medal-device-edit-grid input[type="file"]{
  grid-column:1 / -1;
}

.device-type-thumb{
  width:60px;
  height:24px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

/* Medal device admin usability pass */
.medal-devices-wrap{
  gap:18px;
}

.medal-devices-wrap .panel{
  padding:16px 18px;
}

.medal-devices-wrap .medal-device-create-form{
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}

.medal-devices-wrap .medal-device-create-form .field,
.medal-devices-wrap .medal-device-create-form input,
.medal-devices-wrap .medal-device-create-form select{
  min-width:0;
}

.medal-devices-wrap .medal-device-create-form .medal-create-actions{
  justify-content:flex-start;
}

.medal-devices-wrap .device-type-table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(240,236,220,.78);
}

.medal-devices-wrap .device-type-table td{
  vertical-align:middle;
}

.medal-devices-wrap .device-type-table th:nth-child(1){ width:100px; }
.medal-devices-wrap .device-type-table th:nth-child(2){ width:220px; }
.medal-devices-wrap .device-type-table th:nth-child(3){ width:110px; }

.medal-devices-wrap .device-type-current strong{
  display:block;
  font-size:14px;
  line-height:1.25;
}

.medal-devices-wrap .device-type-current .small{
  margin:0;
}

.medal-devices-wrap .medal-device-edit-grid{
  grid-template-columns:minmax(140px,1fr) minmax(140px,1fr);
  gap:8px;
}

.medal-devices-wrap .medal-device-edit-grid input[type="file"]{
  grid-column:1 / -1;
  font-size:12px;
}

.medal-devices-wrap .medal-device-edit-grid .medal-service-chip{
  justify-self:start;
  margin-top:2px;
}

.medal-devices-wrap .medal-device-edit-grid .btn{
  justify-self:start;
  min-width:86px;
}

.medal-devices-wrap .device-type-thumb{
  width:86px;
  height:28px;
  border-radius:4px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(197,155,42,.14);
  padding:2px 4px;
}

.medal-devices-wrap .device-delete-btn{
  border-color:rgba(255,120,120,.35);
  color:#ffb3b3;
}

.medal-devices-wrap .device-delete-btn:hover{
  background:rgba(130,20,20,.28);
  border-color:rgba(255,120,120,.6);
}

@media(max-width:1000px){
  .medal-device-create-form{ grid-template-columns:1fr; }
  .medal-device-edit-grid{ grid-template-columns:1fr; }
  .medal-devices-wrap .device-type-table th:nth-child(2),
  .medal-devices-wrap .device-type-table th:nth-child(3){ width:auto; }
}


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

.medal-create-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.medal-status-error{ color:#fca5a5; }

.medal-table-wrap{ overflow:auto; }

.medal-admin-table{
  width:100%;
  border-collapse:collapse;
}

.medal-admin-table th,
.medal-admin-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(197,155,42,.12);
  vertical-align:top;
  text-align:left;
}

.medal-drag-handle{
  display:inline-block;
  cursor:grab;
  user-select:none;
  font-weight:900;
  letter-spacing:1px;
  opacity:.75;
}

.medal-preview{
  width:56px;
  height:56px;
  border-radius:8px;
  border:1px solid rgba(197,155,42,.14);
  background:rgba(0,0,0,.18);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-bottom:6px;
}

.medal-image-upload input{ width:100%; }

.medal-name{
  font-weight:900;
}

.medal-service-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.medal-service-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.18);
  font-size:12px;
}

/* ===== Medals Admin Compact Refresh ===== */
.medal-admin-table th,
.medal-admin-table td{
  padding:6px 10px;
}

.medal-preview{
  width:60px;
  height:18px;
  border:none;
  background-color:transparent;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left center;
  margin:0;
}

.medal-actions-cell{
  white-space:nowrap;
}

.medal-service-chip{
  padding:4px 8px;
  font-size:11px;
}

.medal-edit-actions{
  justify-content:space-between;
}

/* Service medals list on service show */
.service-medals{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(197,155,42,.12);
}

.service-medals-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.service-medals-head .hdr{
  margin:0;
}

.service-medal-list{
  display:grid;
  gap:8px;
}

.service-medal-item{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:center;
  padding:6px 8px;
  border:1px solid rgba(197,155,42,.10);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}

.service-medal-thumb{
  height:18px;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

.service-medal-name{
  font-weight:800;
  line-height:1.25;
}





/* FITREP workspace */
.fitrep-wrap{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.fitrep-top-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.fitrep-list{
  display:grid;
  gap:12px;
}

.fitrep-character-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.fitrep-awards{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.fitrep-op-table-wrap{
  overflow:auto;
}

.fitrep-op-table th,
.fitrep-op-table td{
  vertical-align:top;
}

.fitrep-inline-list{
  margin:0;
  padding-left:16px;
  display:grid;
  gap:4px;
}

.fitrep-entry-form{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(197,155,42,.12);
}

.fitrep-entry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media(max-width:860px){
  .fitrep-entry-grid{ grid-template-columns:1fr; }
}

.fitrep-entry-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Medal display in operation + character records */
.op-medal-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.medal-ribbon-stack{
  position:relative;
  display:inline-block;
  width:56px;
  height:18px;
  flex:0 0 56px;
}

.medal-ribbon-base{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

.medal-ribbon-devices{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.medal-ribbon-device{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transform:translate(calc(-50% + var(--device-offset, 0px)), -50%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.7));
}

.op-medal-thumb-stack,
.service-medal-thumb-stack{
  width:56px;
  height:18px;
  flex:0 0 56px;
}

.service-medal-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
}


.op-feed-medal-awards{
  margin-top: 8px;
  display:grid;
  gap: 4px;
}

.op-feed-medal-award{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.op-feed-medal-thumb{
  width: 30px;
  height: 18px;
  object-fit:contain;
  border-radius:4px;
  flex:0 0  30px;
}

.op-feed-medal-text{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  min-width:0;
  font-size: 11px;
  line-height:1.3;
}

.op-feed-medal-text strong{
  font-weight:900;
}

.op-feed-medal-text span{
  opacity:.88;
}

.op-feed-medal-more{
  font-size: 11px;
  opacity:.72;
  margin-top:2px;
}




.op-consequence-medal-group .op-consequence-main{
  margin-bottom:6px;
}

.op-consequence-medal-list{
  display:grid;
  gap:8px;
}

.op-consequence-medal-entry + .op-consequence-medal-entry{
  padding-top:8px;
  border-top:1px dashed rgba(197,155,42,.14);
}
.fitrep-issued-wrap{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(197,155,42,.12);
}

.fitrep-issued-list{
  display:grid;
  gap:8px;
}

.fitrep-issued-item{
  border:1px solid rgba(197,155,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:10px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:10px;
  row-gap:6px;
  align-items:start;
}

.fitrep-issued-main{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  grid-column:1;
}

.fitrep-issued-item > .small{
  grid-column:1;
}

.fitrep-issued-actions{
  display:flex;
  gap:6px;
  grid-column:2;
  grid-row:1 / span 4;
  justify-self:end;
  align-self:start;
}

.fitrep-op-head .js-fitrep-add,
.fitrep-issued-actions .icon-btn{
  width:30px;
  height:30px;
}

.fitrep-issued-actions .js-fitrep-delete{
  border-color:rgba(255,120,120,.35);
  color:#ffb3b3;
}

.fitrep-issued-actions .js-fitrep-delete:hover{
  background:rgba(130,20,20,.28);
  border-color:rgba(255,120,120,.6);
}
.campaign-medal-thumb{
  width:38px;
  height:16px;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  display:inline-block;
  flex:0 0 38px;
  vertical-align:middle;
  margin-right:8px;
}



/* Medal Device Page Layout */
.medal-devices-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.medal-devices-col{
  display:grid;
  gap:10px;
}

.collapsible-panel{
  overflow:hidden;
}

.collapsible-panel .panel-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 12px;
  border-bottom:1px solid rgba(197,155,42,.12);
}

.collapsible-panel .panel-summary::-webkit-details-marker{
  display:none;
}

.collapsible-panel .panel-summary .hdr{
  margin:0;
}

.collapsible-panel .panel-content{
  padding-top:12px;
}

.collapsible-panel:not([open]) .panel-content{
  display:none;
}

.medal-devices-right .device-type-table th:nth-child(1){ width:90px; }
.medal-devices-right .device-type-table th:nth-child(2){ width:220px; }
.medal-devices-right .device-type-table th:nth-child(3){ width:105px; }

@media(max-width:1200px){
  .medal-devices-layout{
    grid-template-columns:1fr;
  }
}


/* Device type table actions modal refactor */
.medal-devices-right .device-type-table th:nth-child(1){ width:90px; }
.medal-devices-right .device-type-table th:nth-child(2){ width:auto; }
.medal-devices-right .device-type-table th:nth-child(3){ width:96px; }

.medal-devices-right .device-type-actions{
  white-space:nowrap;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}

.medal-devices-right .device-type-actions .icon-btn{
  width:30px;
  height:30px;
}

.medal-devices-right .device-type-actions .js-device-delete{
  border-color:rgba(255,120,120,.35);
  color:#ffb3b3;
}

.medal-devices-right .device-type-actions .js-device-delete:hover{
  background:rgba(130,20,20,.28);
  border-color:rgba(255,120,120,.6);
}

@media(max-width:1000px){
  .medal-devices-right .device-type-table th:nth-child(3){ width:auto; }
}


/* Scheme summary actions */
.medal-devices-left .panel-summary{
  align-items:center;
}

.medal-devices-left .scheme-actions{
  margin-left:auto;
  display:inline-flex;
  gap:8px;
}

.medal-devices-left .scheme-actions .js-scheme-delete{
  border-color:rgba(255,120,120,.35);
  color:#ffb3b3;
}

.medal-devices-left .scheme-actions .js-scheme-delete:hover{
  background:rgba(130,20,20,.28);
  border-color:rgba(255,120,120,.6);
}

.scheme-meta .small{
  margin:0;
}






.op-consequence-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.op-medal-admin-actions{
  display:inline-flex;
  gap:6px;
  margin-left:8px;
  vertical-align:middle;
}

.op-medal-admin-actions .icon-btn{
  width:28px;
  height:28px;
}

.op-medal-admin-actions .js-op-delete-award,
.op-medal-admin-actions .js-char-delete-award{
  border-color:rgba(255,120,120,.35);
  color:#ffb3b3;
}

.op-medal-admin-actions .js-op-delete-award:hover,
.op-medal-admin-actions .js-char-delete-award:hover{
  background:rgba(130,20,20,.28);
  border-color:rgba(255,120,120,.6);
}

.character-service-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

@media(max-width:860px){
  .character-service-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

.fitrep-entry-grid-top{
  grid-template-columns:220px 1fr;
}

.fitrep-entry-grid-body{
  margin-top:10px;
}

.fitrep-issued-item .pill{
  min-width:74px;
  text-align:center;
}
/* FITREP enhancements */
.fitrep-awards{
  align-items:center;
  gap:8px;
}

.fitrep-award-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px solid rgba(197,155,42,.18);
  border-radius:999px;
  background:rgba(0,0,0,.16);
  max-width:100%;
}

.fitrep-award-ribbon{
  width:48px;
  height:16px;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  flex:0 0 48px;
}

.fitrep-award-ribbon-fallback{
  border-radius:3px;
  background:linear-gradient(90deg,#c59b2a,#f3df9b,#c59b2a);
}

.fitrep-award-label{
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.fitrep-character-summary{
  list-style:none;
  cursor:pointer;
}

.fitrep-character-summary::-webkit-details-marker{
  display:none;
}

.fitrep-character-summary::after{
  content:'+';
  float:right;
  font-weight:900;
  color:#c59b2a;
  margin-left:10px;
}

.fitrep-character[open] .fitrep-character-summary::after{
  content:'-';
}

.fitrep-character-summary .fitrep-character-head{
  margin-bottom:0;
}

.fitrep-character-body{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(197,155,42,.12);
}

.fitrep-op-stack{
  display:grid;
  gap:12px;
}

.fitrep-op-card{
  border:1px solid rgba(197,155,42,.12);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:10px;
  display:grid;
  gap:8px;
}

.fitrep-op-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.fitrep-op-head .hdr{
  margin:0;
}

.fitrep-op-profile{
  opacity:.9;
}

.fitrep-op-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.fitrep-op-col{
  min-width:0;
}

.fitrep-op-entry-wrap{
  margin-top:4px;
  padding-top:8px;
  border-top:1px dashed rgba(197,155,42,.16);
  display:grid;
  gap:8px;
}

@media(max-width:860px){
  .fitrep-op-columns{
    grid-template-columns:1fr;
  }
  .fitrep-op-head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* Global nav cleanup */
.nav-campaign-context{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:220px;
}
.nav-campaign-context select{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(197,155,42,.18);
  background:rgba(0,0,0,.2);
  color:inherit;
}

.subnav-strip{
  position:relative;
  background:linear-gradient(180deg, rgba(16,28,22,.9), rgba(10,18,14,.92));
  border-top:1px solid rgba(255,255,255,.03);
}
.subnav-strip::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(197,155,42,0),
    rgba(197,155,42,.20),
    rgba(255,225,140,.35),
    rgba(197,155,42,.20),
    rgba(197,155,42,0)
  );
}
.subnav-inner{
  max-width:var(--content-max-width);
  margin:0 auto;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding:8px 14px;
}
.subnav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:rgba(230,241,234,.76);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease, opacity .16s ease;
}
.subnav-link.active,
.subnav-link:hover{
  color:#f0e6c9;
  border-bottom-color:rgba(197,155,42,.55);
}
.subnav-link .icon{
  width:13px;
  height:13px;
  opacity:.72;
}
.subnav-link:hover .icon,
.subnav-link.active .icon{
  opacity:1;
}

.app-breadcrumbs{
  max-width:var(--content-max-width);
  margin:10px auto 0;
  padding:0 14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:#e8dfc7;
  font-size:13px;
}
.app-breadcrumbs .crumb{
  color:#e8dfc7;
  text-decoration:none;
  opacity:.82;
}
.app-breadcrumbs .crumb:hover{ opacity:1; text-decoration:underline; }
.app-breadcrumbs .crumb.current{ opacity:1; font-weight:800; }
.app-breadcrumbs .crumb-sep{ opacity:.45; }

@media (max-width: 980px){
  .nav-campaign-context{ min-width:unset; width:100%; }
  .subnav-inner{ width:100%; padding:8px 10px; gap:12px; }
  .app-breadcrumbs{ width:100%; padding:0 10px; margin-top:8px; }
}

/* Dense media rails for operation gallery */
.media-rail-wrap{
  position:relative;
}
.media-rail-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(197,155,42,.28);
  background:rgba(8,14,11,.86);
  color:#f3ead2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.media-rail-arrow:hover{
  border-color:rgba(197,155,42,.48);
  background:rgba(20,32,24,.96);
}
.media-rail-arrow:disabled{
  opacity:.35;
  cursor:default;
}
.media-rail-arrow svg{
  width:18px;
  height:18px;
}
.media-rail-arrow-prev{ left:6px; }
.media-rail-arrow-next{ right:6px; }

.op-media-grid,
.video-stack{
  scrollbar-width:none;
}
.op-media-grid::-webkit-scrollbar,
.video-stack::-webkit-scrollbar{
  display:none;
}

.op-media-grid{
  gap:10px;
  padding:2px 44px 8px;
}
.op-media-item{
  flex:0 0 clamp(250px, 22vw, 300px);
}
.op-media-grid > .op-show-card{
  flex:0 0 clamp(250px, 22vw, 300px);
  margin:0;
  scroll-snap-align:start;
}
.op-media-grid > .op-show-card .op-show-card-body{
  padding:8px 10px;
}
.op-media-body{
  padding:8px 10px;
}
.op-media-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.op-media-title{
  font-size:13px;
  line-height:1.2;
}
.op-media-meta{
  font-size:11px;
  margin-top:3px;
  opacity:.68;
}
.op-media-meta-tight{
  margin-top:1px;
}
.icon-btn-sm{
  width:28px;
  height:28px;
  border-radius:8px;
}
.icon-btn-sm svg{
  width:13px;
  height:13px;
}

.video-stack{
  gap:10px;
  padding:2px 44px 8px;
}
.video-stack > .op-show-card{
  flex:0 0 clamp(250px, 22vw, 300px);
}
.video-embed{
  margin-bottom:8px;
}
.video-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.video-title-main{
  padding-right:0;
  flex:1 1 auto;
}
.video-head-actions{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.video-meta-tight{
  margin-top:2px;
  font-size:11px;
  opacity:.68;
}
.video-actions{
  margin-top:6px;
}
.video-actions .btn{
  padding:3px 8px;
  font-size:11px;
}
.video-comments{
  margin-top:8px;
  max-height:180px;
}

@media(max-width:979px){
  .media-rail-arrow{ display:none; }
  .op-media-grid,
  .video-stack{ padding-left:2px; padding-right:2px; }
  .op-media-item,
  .video-stack > .op-show-card,
  .op-media-grid > .op-show-card{ flex-basis:min(320px, 86vw); }
}

/* Home dashboard */
.home-dashboard{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:14px;
}
.home-section{ grid-column:span 12; }
.home-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.home-quick-actions{ gap:8px; }

@media(min-width:980px){
  .home-latest-op{ grid-column:span 8; }
  .home-campaign-snapshot{ grid-column:span 4; }
  .home-recent-activity{ grid-column:span 7; }
  .home-recent-honours{ grid-column:span 5; }
}

.home-campaign-grid{
  display:grid;
  gap:8px;
}
.home-campaign-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(197,155,42,.12);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px;
}
.home-campaign-card:hover{
  border-color:rgba(197,155,42,.28);
  background:rgba(255,255,255,.045);
}
.home-campaign-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.home-campaign-name{ font-weight:900; }
.home-campaign-meta{ font-size:12px; opacity:.78; }

.home-activity-list{
  display:grid;
  gap:8px;
  max-height:460px;
  overflow:auto;
  padding-right:4px;
}
.home-activity-item{
  border:1px solid rgba(197,155,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:10px;
}
.home-activity-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.home-activity-link:hover{
  border-color:rgba(197,155,42,.28);
  background:rgba(255,255,255,.06);
}
.home-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.home-activity-title{ font-weight:800; line-height:1.3; }
.home-activity-detail{ font-size:12px; opacity:.74; margin-top:3px; }

.home-honours-grid{
  display:grid;
  gap:8px;
  max-height:460px;
  overflow:auto;
  padding-right:4px;
}
.home-honour-item{
  border:1px solid rgba(197,155,42,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:10px;
}
.home-honour-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.home-honour-ribbon{
  width:42px;
  height:auto;
  object-fit:contain;
  flex:0 0 42px;
}
.home-honour-ribbon-empty{
  width:42px;
  height:18px;
  border-radius:4px;
  border:1px solid rgba(197,155,42,.16);
  background:rgba(0,0,0,.2);
}
.home-honour-main{ min-width:0; }
.home-honour-medal{ font-weight:800; line-height:1.2; }
.home-honour-character{ font-size:12px; opacity:.75; }
.home-honour-meta{ margin-top:6px; font-size:12px; opacity:.82; }
.home-honour-meta a{ color:inherit; text-decoration:none; }
.home-honour-meta a:hover{ text-decoration:underline; }


.service-item-title{
    display:flex;
    align-items:center;
    gap:8px;
}
.service-item-kind{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.03em;
    text-transform:uppercase;
    border:1px solid rgba(197,155,42,.20);
    background:rgba(0,0,0,.18);
    color:#d7e5d7;
}
.service-item-kind.svc-item-type-status{
    border-color:rgba(245,158,11,.45);
    background:rgba(245,158,11,.12);
    color:#fde68a;
}
.service-item-kind.svc-item-type-medal{
    border-color:rgba(230,201,111,.45);
    background:rgba(230,201,111,.12);
    color:#f6e7a1;
}
.service-item-kind.svc-item-type-citation{
    border-color:rgba(96,165,250,.45);
    background:rgba(96,165,250,.12);
    color:#bfdbfe;
}
.svc-item-type-status{
    background:linear-gradient(180deg, rgba(245,158,11,.08), rgba(255,255,255,.02));
}
.svc-item-type-medal{
    background:linear-gradient(180deg, rgba(230,201,111,.09), rgba(255,255,255,.02));
}
.svc-item-type-citation{
    background:linear-gradient(180deg, rgba(96,165,250,.09), rgba(255,255,255,.02));
}
.service-medal-meta{
    padding:6px 8px;
    border:1px solid rgba(230,201,111,.25);
    border-radius:10px;
    background:rgba(230,201,111,.08);
}
.service-medal-reason{
    margin-left:6px;
    padding-left:10px;
    border-left:2px solid rgba(230,201,111,.38);
}
.service-citation-meta{
    padding:6px 8px;
    border:1px solid rgba(96,165,250,.24);
    border-radius:10px;
    background:rgba(96,165,250,.08);
}

.service-panel-title-wrap{display:flex;align-items:center;gap:10px;}
.service-panel-rank-badge{width:30px;height:30px;border-radius:8px;border:1px solid rgba(197,155,42,.22);background:rgba(0,0,0,.22) center/contain no-repeat;flex:0 0 30px;}
@media(min-width:980px){.character-show-grid{align-items:stretch;}.character-show-right{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 140px);overflow:hidden;}.character-show-right .service-panel-stack{flex:1;min-height:0;overflow:auto;padding-right:4px;}}

.character-fallen-banner{margin:10px 0 12px;padding:12px 14px;border:1px solid rgba(226,232,240,.30);border-left:4px solid rgba(226,232,240,.72);border-radius:10px;background:linear-gradient(180deg,rgba(15,23,42,.46),rgba(2,6,23,.52));}
.character-fallen-title{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#e2e8f0;}
.character-fallen-meta{margin-top:5px;font-size:12px;opacity:.9;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.character-fallen-note{margin-top:6px;font-size:12px;opacity:.86;}



.character-show-right .service-scroll{display:block;}
@media(min-width:980px){.character-show-grid{align-items:stretch;}.character-show-left,.character-show-right{min-height:0;}.character-show-right{display:flex;flex-direction:column;height:100vh;min-height:100vh;overflow:hidden;max-height:none;}.character-show-right .service-scroll{flex:1;min-height:0;overflow:auto;padding-right:4px;}.character-show-right .service-panel-stack{padding-right:0;overflow:visible;}}


/* modal icon buttons with visible labels */
.modal-actions .icon-btn{
  width:auto;
  min-width:34px;
  padding:0 10px;
  gap:6px;
}
.modal-actions .icon-btn::after{
  content:attr(title);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.modal-actions .icon-btn svg{
  width:14px;
  height:14px;
}
/* characters/index density pass */
.oob-char-item{
  padding:4px 6px;
  margin:2px 0;
  gap:8px;
}
.oob-char-row{ gap:8px; }
.oob-char-left{
  min-height:32px;
  gap:6px;
}
.oob-char-main{
  min-height:32px;
  padding:0;
}
.oob-char-mainline{
  gap:6px;
  line-height:1.05;
}
.oob-char-subline{
  margin-top:2px;
  font-size:10px;
}
.oob-rank-badge{
  width:28px;
  height:28px;
  flex:0 0 28px;
}
.oob-rank-short{ font-size:11px; }
.oob-actions .iconbtn{
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:8px;
}
.oob-player-chip{
  padding:1px 6px;
  font-size:9px;
}

.fitrep-shot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px;
  margin-top:6px;
}
.fitrep-shot{
  display:block;
  aspect-ratio:16/10;
  border:1px solid rgba(197,155,42,.16);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.fitrep-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fitrep-shot-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:12px;
  color:rgba(214,208,184,.72);
}





@media (min-width: 1600px){
  :root{ --content-max-width: 1360px; }
  .hero-inner{ grid-template-columns:1.45fr 0.55fr; gap:14px; }
  .hero-title{ font-size:22px; }
  .hero-kicker{ max-width:88ch; }

  .operation-show-wrap{
    grid-template-columns:minmax(0,2.1fr) minmax(340px,460px);
    gap:18px;
  }
}

@media (min-width: 2200px){
  :root{ --content-max-width: 1680px; }
  .hero-inner{ grid-template-columns:1.5fr 0.5fr; }
  .hero-title{ font-size:24px; }

  .operation-show-wrap{
    grid-template-columns:minmax(0,2.25fr) minmax(360px,500px);
  }
}




.op-roster-name.link:hover{
  text-decoration:underline;
  color:var(--accent-gold);
}
.op-roster-player-inline{
  display:inline-block;
  max-width:170px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2px;
  opacity:.66;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:baseline;
}

/* Character show side navigation tabs */
.character-edge-nav{
  display:none;
}

@media(min-width:980px){
  .character-edge-nav{
    display:block;
    position:fixed;
    inset:0;
    z-index:40;
    pointer-events:none;
  }

  .character-edge-tab{
    position:fixed;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    padding:8px 4px;

    border:1px solid rgba(197,155,42,.18);
    background:rgba(8,12,10,.92);
    color:inherit;
    text-decoration:none;

    box-shadow:0 4px 16px rgba(0,0,0,.25);
    backdrop-filter:blur(4px);
    pointer-events:auto;

    transition:transform .18s ease,
               background .15s ease,
               border-color .15s ease;
  }

  .character-edge-tab-left{
    left:0;
    transform:translate(-4px, -50%);
    border-left:none;
    border-radius:0 10px 10px 0;
  }

  .character-edge-tab-right{
    right:0;
    transform:translate(5px, -50%);
    border-right:none;
    border-radius:10px 0 0 10px;
  }

  .character-edge-tab:hover{
    background:rgba(197,155,42,.12);
    border-color:rgba(197,155,42,.35);
    color:var(--accent-gold);
  }

  .character-edge-tab-left:hover{
    transform:translate(0, -50%);
  }

  .character-edge-tab-right:hover{
    transform:translate(0, -50%);
  }

  .character-edge-dir,
  .character-edge-name{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    text-align:center;
    line-height:1.1;
  }

  .character-edge-dir{
    font-size:10px;
    letter-spacing:.10em;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:6px;
  }

  .character-edge-name{
    font-size:12px;
    font-weight:700;
    opacity:.9;
    max-height:120px;
    overflow:hidden;
  }
}