.tactics-library { display:grid; gap:28px; }
.tactics-library__hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:28px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:linear-gradient(125deg, rgba(255,106,18,.08), transparent 44%), var(--color-surface); }
.tactics-library__eyebrow { margin:0 0 6px; color:var(--color-primary); font:700 12px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.tactics-library__hero h1 { margin:0; color:var(--color-text); font:700 32px/1.05 var(--font-display); }
.tactics-library__hero p:not(.tactics-library__eyebrow) { max-width:620px; margin:10px 0 0; color:var(--color-text-secondary); font-size:15px; }
.tactics-create { display:flex; align-items:flex-end; gap:8px; }
.tactics-create label { display:grid; gap:5px; color:var(--color-text-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tactics-create select,.tactics-create__title { height:40px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg-elevated); color:var(--color-text); padding:0 11px; font:600 13px var(--font-sans); }
.tactics-create__title { width:160px; }
.tactics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tactic-card { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); transition:transform .16s ease,border-color .16s ease; }
.tactic-card:hover { transform:translateY(-2px); border-color:var(--color-border-strong); }
.tactic-card__preview { position:relative; display:flex; align-items:center; justify-content:center; height:238px; overflow:hidden; background:#07101a; }
.tactic-card__preview img { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 10px 28px rgba(0,0,0,.4)); }
.tactic-card__side,.tactic-card__count { position:absolute; top:12px; height:26px; display:inline-flex; align-items:center; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); background:rgba(6,9,15,.86); font:700 11px var(--font-mono); }
.tactic-card__side { left:12px; min-width:30px; justify-content:center; color:var(--color-primary); }
.tactic-card__side--ct { color:var(--color-teal); }
.tactic-card__count { right:12px; padding:0 9px; color:var(--color-text-secondary); }
.tactic-card__body { display:flex; justify-content:space-between; gap:12px; padding:16px; border-top:1px solid var(--color-border-soft); }
.tactic-card__body p { margin:0 0 4px; color:var(--color-primary); font:700 10px var(--font-mono); letter-spacing:.12em; }
.tactic-card__body h2 { margin:0; font:700 18px/1.25 var(--font-display); }
.tactic-card__body h2 a { color:var(--color-text); text-decoration:none; }
.tactic-card__body small { display:block; margin-top:7px; color:var(--color-text-muted); font-size:12px; }
.tactic-card__delete { display:grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; cursor:pointer; }
.tactic-card__delete:hover { border-color:rgba(239,101,112,.35); background:var(--color-danger-soft); }
.tactic-card__delete img { width:17px; opacity:.7; filter:brightness(0) saturate(100%) invert(51%) sepia(62%) saturate(1168%) hue-rotate(311deg) brightness(98%); }
.tactics-empty { min-height:320px; display:grid; place-content:center; justify-items:center; text-align:center; border:1px dashed var(--color-border); border-radius:var(--radius-lg); color:var(--color-text-secondary); }
.tactics-empty img { width:42px; opacity:.5; filter:brightness(0) invert(1); }
.tactics-empty h2 { margin:14px 0 4px; color:var(--color-text); font:700 22px var(--font-display); }
.tactics-empty p { margin:0; }
@media (max-width:1100px) { .tactics-library__hero { align-items:stretch; flex-direction:column; } .tactics-create { flex-wrap:wrap; } .tactics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .tactics-library__hero { padding:20px; } .tactics-create>* { flex:1 1 120px; } .tactics-create__title { width:auto; } .tactics-grid { grid-template-columns:1fr; } .tactic-card__preview { height:220px; } }