/* ── Dawnstar Tools — Dark theme ───────────────────────────────────────────── */
:root {
    --ds-bg:         #0d1117;
    --ds-bg2:        #161b22;
    --ds-bg3:        #21262d;
    --ds-border:     #30363d;
    --ds-text:       #e6edf3;
    --ds-text2:      #8b949e;
    --ds-accent:     #58a6ff;
    --ds-accent2:    #1f6feb;
    --ds-green:      #3fb950;
    --ds-red:        #f85149;
    --ds-yellow:     #d29922;
    --ds-orange:     #e3b341;
    --ds-purple:     #bc8cff;
    --ds-radius:     8px;
    --ds-radius-sm:  4px;
    --ds-shadow:     0 4px 16px rgba(0,0,0,.4);
}

/* ── Reset / Base ───────────────────────────────────────────────────────────── */
.dawnstar-app * {
    box-sizing: border-box;
}
.dawnstar-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ds-text);
    background: var(--ds-bg);
    min-height: 60vh;
    padding: 1.5rem;
    border-radius: var(--ds-radius);
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.ds-flex         { display: flex; }
.ds-flex-col     { flex-direction: column; }
.ds-gap-1        { gap: .5rem; }
.ds-gap-2        { gap: 1rem; }
.ds-gap-3        { gap: 1.5rem; }
.ds-wrap         { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ds-grid-3       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 1.25rem;
}
.ds-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ds-border);
}
.ds-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-bg3);
    color: var(--ds-text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-decoration: none;
}
.ds-btn:hover { background: var(--ds-border); }
.ds-btn-primary {
    background: var(--ds-accent2);
    border-color: var(--ds-accent);
    color: #fff;
}
.ds-btn-primary:hover { background: var(--ds-accent); }
.ds-btn-danger  { background: #3d1a1a; border-color: var(--ds-red); color: var(--ds-red); }
.ds-btn-danger:hover  { background: #5a2020; }
.ds-btn-success { background: #1a3d2b; border-color: var(--ds-green); color: var(--ds-green); }
.ds-btn-success:hover { background: #1e5235; }
.ds-btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.ds-btn-icon { padding: .35rem; border-radius: 50%; }

/* ── Form controls ──────────────────────────────────────────────────────────── */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    background: var(--ds-bg3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    padding: .5rem .75rem;
    font-size: .875rem;
    outline: none;
    transition: border-color .15s;
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus { border-color: var(--ds-accent); }
.ds-input::placeholder { color: var(--ds-text2); }
.ds-label {
    display: block;
    font-size: .8rem;
    color: var(--ds-text2);
    margin-bottom: .3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ds-form-group { margin-bottom: .75rem; }

/* ── Badge / Tag ────────────────────────────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--ds-bg3);
    border: 1px solid var(--ds-border);
    color: var(--ds-text2);
}
.ds-badge-blue   { background: #0c2d5e; border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-badge-purple { background: rgba(139,92,246,.15); color:#a78bfa; border-color:rgba(139,92,246,.3); }
.ds-badge-green  { background: #0d2e1a; border-color: var(--ds-green);  color: var(--ds-green); }
.ds-badge-red    { background: #3d1a1a; border-color: var(--ds-red);    color: var(--ds-red); }
.ds-badge-yellow { background: #2e2000; border-color: var(--ds-orange);  color: var(--ds-orange); }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.ds-table-wrap { overflow-x: auto; }
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.ds-table th {
    text-align: left;
    color: var(--ds-text2);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--ds-border);
}
.ds-table td {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--ds-bg3); }

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ds-modal-overlay.hidden { display: none; }
.ds-modal {
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ds-shadow);
}
.ds-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ds-border);
}
.ds-modal-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ds-border);
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.ds-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 1.25rem;
}
.ds-tab {
    padding: .6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ds-text2);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.ds-tab:hover { color: var(--ds-text); }
.ds-tab.active { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }

/* ── Loading ────────────────────────────────────────────────────────────────── */
.ds-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--ds-text2);
    gap: .75rem;
}
.ds-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--ds-border);
    border-top-color: var(--ds-accent);
    border-radius: 50%;
    animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-empty {
    text-align: center;
    padding: 3rem;
    color: var(--ds-text2);
    font-size: .9rem;
}

/* ── Toast / Notification ───────────────────────────────────────────────────── */
#ds-toasts {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ds-toast {
    padding: .75rem 1.25rem;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-bg2);
    color: var(--ds-text);
    font-size: .875rem;
    box-shadow: var(--ds-shadow);
    animation: ds-toast-in .2s ease;
    min-width: 220px;
    max-width: 360px;
}
.ds-toast.success { border-color: var(--ds-green); background: #0d2e1a; }
.ds-toast.error   { border-color: var(--ds-red);   background: #3d1a1a; }
@keyframes ds-toast-in { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   CHEF ARTILLEUR
   ════════════════════════════════════════════════════════════════════════════ */
.ca-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.ca-header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
}
.ca-identity-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}
.ca-identity-label { font-size: .8rem; color: var(--ds-text2); }
.ca-identity-name  { font-weight: 600; color: var(--ds-accent); }

/* Ship selector */
.ca-ship-selector {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ca-ship-btn {
    padding: .5rem 1rem;
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text2);
    cursor: pointer;
    font-size: .875rem;
    transition: all .15s;
}
.ca-ship-btn:hover  { border-color: var(--ds-accent); color: var(--ds-text); }
.ca-ship-btn.active { background: var(--ds-accent2); border-color: var(--ds-accent); color: #fff; }

/* Weapons grid */
.ca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ca-slot {
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 1rem;
    transition: border-color .15s;
}
.ca-slot:hover { border-color: var(--ds-accent); }
.ca-slot-label {
    font-size: .75rem;
    color: var(--ds-text2);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: .5rem;
}
.ca-slot-name {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .4rem;
    min-height: 1.4em;
}
.ca-slot-operator {
    font-size: .8rem;
    color: var(--ds-text2);
}
.ca-slot-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.ca-slot-ready {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    background: #0d2e1a;
    border: 1px solid var(--ds-green);
    color: var(--ds-green);
}
.ca-slot-ready.offline {
    background: #3d1a1a;
    border-color: var(--ds-red);
    color: var(--ds-red);
}

/* Torpedoes / missiles */
.ca-weapons-section { margin-bottom: 1.25rem; }
.ca-weapons-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text2);
    margin-bottom: .6rem;
}
.ca-weapon-list { display: flex; flex-direction: column; gap: .4rem; }
.ca-weapon-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--ds-bg3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: .4rem .75rem;
    font-size: .85rem;
}
.ca-weapon-item.armed   { border-color: var(--ds-red);   background: #3d1a1a; }
.ca-weapon-item.loaded  { border-color: var(--ds-green); background: #0d2e1a; }
.ca-weapon-item.fired   { border-color: var(--ds-text2); opacity: .5; }
.ca-weapon-key { font-weight: 700; color: var(--ds-text2); min-width: 24px; }

/* Crew panel */
.ca-crew-panel { margin-top: 1.5rem; }
.ca-crew-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.ca-crew-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    background: var(--ds-bg3);
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    font-size: .8rem;
    color: var(--ds-text);
}
.ca-crew-tag.is-admin { border-color: var(--ds-orange); color: var(--ds-orange); }
.ca-crew-crown { font-size: .8rem; }
.ca-crew-remove {
    background: none;
    border: none;
    color: var(--ds-red);
    cursor: pointer;
    font-size: .9rem;
    padding: 0;
    line-height: 1;
    opacity: .7;
}
.ca-crew-remove:hover { opacity: 1; }
.ca-crew-add-zone { display: none; }
.ca-crew-add-zone.visible { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Staff assignment */
.ca-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.ca-staff-item { background: var(--ds-bg3); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: .6rem .9rem; }
.ca-staff-role { font-size: .75rem; color: var(--ds-text2); font-weight: 600; margin-bottom: .25rem; }
.ca-staff-name { font-size: .9rem; font-weight: 600; }

/* Polling indicator */
.ca-live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ds-green);
    animation: ca-pulse 2s ease-in-out infinite;
    margin-right: .3rem;
}
@keyframes ca-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HANGAR
   ════════════════════════════════════════════════════════════════════════════ */
.hangar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.hangar-title  { font-size: 1.4rem; font-weight: 700; margin: 0; }
.hangar-stats  { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.hangar-stat   { text-align: center; }
.hangar-stat-val  { font-size: 1.5rem; font-weight: 700; color: var(--ds-accent); line-height: 1; }
.hangar-stat-label{ font-size: .7rem; color: var(--ds-text2); text-transform: uppercase; }

.hangar-filters {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.hangar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.hangar-ship-card {
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.hangar-ship-card:hover { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent2); }
.hangar-ship-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    background: var(--ds-bg3);
    display: block;
}
.hangar-ship-body { padding: .9rem 1rem; }
.hangar-ship-name { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.hangar-ship-uuid { font-size: .7rem; color: var(--ds-text2); font-family: monospace; }
.hangar-ship-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg3);
}

/* ════════════════════════════════════════════════════════════════════════════
   SHIPS CATALOG
   ════════════════════════════════════════════════════════════════════════════ */
.ships-header  { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ships-title   { font-size: 1.4rem; font-weight: 700; margin: 0; }
.ships-filters { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ships-search  { flex: 1; min-width: 200px; }

.ships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.ship-card {
    background: var(--ds-bg2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.ship-card:hover { border-color: var(--ds-accent); transform: translateY(-2px); }
.ship-card-img {
    width: 100%;
    height: 120px;
    background: var(--ds-bg3);
    overflow: hidden;
}
.ship-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ship-card-body { padding: .9rem 1rem; }
.ship-card-name { font-weight: 700; font-size: .9rem; margin-bottom: .2rem; }
.ship-card-mfr  { font-size: .75rem; color: var(--ds-text2); }
.ship-card-footer {
    display: flex;
    gap: .4rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg3);
    flex-wrap: wrap;
}

.ships-detail { display: none; }
.ships-detail.visible { display: block; }
.ships-back-btn { margin-bottom: 1rem; }
.ships-detail-hero {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: var(--ds-radius);
    background: var(--ds-bg3);
    margin-bottom: 1.5rem;
}
.ships-detail-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.ships-detail-sub   { color: var(--ds-text2); font-size: .9rem; margin-bottom: 1.5rem; }
.ships-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.ships-spec {
    background: var(--ds-bg3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: .6rem .9rem;
}
.ships-spec-key { font-size: .7rem; color: var(--ds-text2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ships-spec-val { font-size: .95rem; font-weight: 600; margin-top: .15rem; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .dawnstar-app { padding: 1rem; }
    .ds-grid-2, .ds-grid-3 { grid-template-columns: 1fr; }
    .ca-grid, .hangar-grid, .ships-grid { grid-template-columns: 1fr; }
}

/* ── Skeletons ─────────────────────────────────────────────────────────────── */
@keyframes ds-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-img, .skeleton-line, .skeleton-badge, .skeleton-spec, .skeleton-hero {
  background: linear-gradient(90deg, var(--ds-bg2) 25%, var(--ds-bg3,#2a2a3a) 50%, var(--ds-bg2) 75%);
  background-size: 800px 100%;
  animation: ds-shimmer 1.4s infinite linear;
  border-radius: 4px;
}
.ship-skeleton .ship-card-img, .skeleton-img { height: 120px; width: 100%; display: block; }
.skeleton-line { height: 14px; margin: 4px 0; }
.skeleton-badge { height: 20px; width: 50px; display: inline-block; margin-right: 4px; }
.skeleton-spec { height: 50px; border-radius: 6px; }
.skeleton-hero { height: 260px; width: 100%; margin-bottom: 1rem; border-radius: 8px; }
.ship-skeleton { pointer-events: none; opacity: .7; }

/* ── Pagination améliorée ──────────────────────────────────────────────────── */
.ships-pagination-inner {
  display: flex; gap: .35rem; align-items: center;
  justify-content: center; margin-top: 1.25rem; flex-wrap: wrap;
}
.ships-page-ellipsis { color: var(--ds-text2); padding: 0 .25rem; }

/* ── Préférences vaisseaux ─────────────────────────────────────────────────── */
.hangar-pref-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(251,191,36,.12); color: #fbbf24;
  border: 1px solid rgba(251,191,36,.3); border-radius: 20px;
  padding: .25rem .7rem; font-size: .82rem;
}
.hangar-pref-tag .ca-crew-remove {
  background: none; border: none; cursor: pointer;
  color: #fbbf24; opacity: .6; padding: 0; font-size: .75rem;
}
.hangar-pref-tag .ca-crew-remove:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHEF ARTILLEUR — Inspired by dawnstar.flightdock.fr
   ═══════════════════════════════════════════════════════════════════════════ */
.ca-app { max-width: 1300px; margin: 0 auto; padding: 16px 16px 60px; background: rgba(18,20,22,.92); border-radius: 12px; backdrop-filter: blur(8px); }

.ca-page-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.ca-page-title h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.ca-page-title h1 span { color: #d22f2f; }
.ca-live-badge { background: rgba(0,200,100,.1); border: 1px solid rgba(0,200,100,.3); color: #00c864; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: flex; align-items: center; gap: 5px; }
.ca-live-dot   { width: 7px; height: 7px; border-radius: 50%; background: #00c864; animation: ca-pulse 1.5s ease-in-out infinite; }
@keyframes ca-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Layout */
.ca-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media(max-width:860px){ .ca-layout { grid-template-columns: 1fr; } }

/* Sidebar */
.ca-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 80px; }
.ca-panel { background: #1e2124; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px; }
.ca-panel-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #d22f2f; margin-bottom: 10px; }

/* Identity */
.ca-identity-select { width: 100%; padding: 7px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--ds-text, #e8e8e8); font-size: .85rem; outline: none; cursor: pointer; }
.ca-identity-select.identified { border-color: rgba(0,200,100,.4); background: rgba(0,200,100,.06); color: #00c864; }
.ca-identity-hint { font-size: .68rem; color: #555; margin-top: 5px; }
.ca-identity-hint.warn { color: #ff8c00; }

/* Session list */
.ca-session-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.ca-loading-text { color: #555; font-size: .8rem; padding: 6px 0; }
.ca-session-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; display: flex; align-items: center; gap: 6px; transition: all .15s; }
.ca-session-item:hover { background: rgba(255,255,255,.05); }
.ca-session-item.active { background: rgba(210,47,47,.08); border-color: rgba(210,47,47,.3); }
.ca-si-info { flex: 1; min-width: 0; }
.ca-si-ship { font-weight: 600; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-si-name { font-size: .7rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-si-del { color: #444; font-size: .7rem; cursor: pointer; flex-shrink: 0; padding: 2px 5px; border-radius: 3px; }
.ca-si-del:hover { color: #d22f2f; }
.ca-btn-new { width: 100%; padding: 9px; background: #d22f2f; border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; font-size: .85rem; }
.ca-btn-new:hover { background: #b82626; }

/* Crew */
.ca-crew-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.ca-crew-tag { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 3px 8px; font-size: .76rem; position: relative; }
.ca-crew-tag.is-admin { border-color: rgba(210,47,47,.35); }
.ca-crew-crown { display: inline-block; margin-right: 3px; font-size: .6rem; cursor: pointer; opacity: .5; }
.ca-crew-crown:hover { opacity: 1; }
.ca-crew-remove { position: absolute; top: -5px; right: -5px; background: #d22f2f; color: #fff; border-radius: 50%; width: 14px; height: 14px; font-size: .55rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.ca-crew-tag:hover .ca-crew-remove { opacity: 1; }
.ca-crew-add { margin-top: 6px; }
.ca-crew-input { width: 100%; padding: 6px 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: var(--ds-text,#e8e8e8); font-size: .82rem; outline: none; box-sizing: border-box; }
.ca-crew-input:focus { border-color: rgba(210,47,47,.4); }

/* Main content */
.ca-main { display: flex; flex-direction: column; gap: 14px; min-height: 400px; }
.ca-empty-state { text-align: center; padding: 60px 20px; color: #555; }
.ca-empty-icon  { font-size: 3rem; margin-bottom: 14px; }
.ca-empty-state h3 { font-size: 1.1rem; color: #777; margin-bottom: 6px; }

/* Ship header */
.ca-ship-header { background: #1e2124; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ca-ship-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.ca-ship-name { font-size: 1.1rem; font-weight: 700; }
.ca-ship-type-badge { background: rgba(210,47,47,.15); color: #d22f2f; border: 1px solid rgba(210,47,47,.3); border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 700; }
.ca-loadout-badge { background: rgba(91,155,213,.1); color: #5b9bd5; border: 1px solid rgba(91,155,213,.3); border-radius: 6px; padding: 2px 8px; font-size: .72rem; }
.ca-ship-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ca-updated { font-size: .68rem; color: #555; }
.ca-btn-repair { padding: 5px 10px; background: rgba(0,200,100,.1); border: 1px solid rgba(0,200,100,.3); border-radius: 7px; color: #00c864; font-size: .78rem; cursor: pointer; }
.ca-btn-preset { padding: 5px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #aaa; font-size: .78rem; cursor: pointer; }
.ca-btn-close  { padding: 5px 10px; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #888; font-size: .78rem; cursor: pointer; }

/* Tabs */
.ca-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 0; }
.ca-tab  { padding: 7px 14px; background: transparent; border: none; color: #666; font-size: .82rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.ca-tab.active { color: #d22f2f; border-bottom-color: #d22f2f; }
.ca-tab:hover  { color: #ccc; }

/* Turret cards grid */
.ca-turrets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap: 12px; padding-top: 14px; }
.ca-turret-card { background: #23272b; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 12px 13px; border-left: 3px solid #333; }
.ca-turret-card.ok        { border-left-color: #00c864; }
.ca-turret-card.damaged   { border-left-color: #ff8c00; background: rgba(255,140,0,.04); }
.ca-turret-card.destroyed { border-left-color: #d22f2f; background: rgba(210,47,47,.04); }
.ca-turret-code  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #666; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ca-slot-size    { background: rgba(210,47,47,.12); border: 1px solid rgba(210,47,47,.2); color: #d22f2f; font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.ca-turret-label { color: #444; font-size: .65rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ca-weapon-select   { width: 100%; padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 6px; color: #e8e8e8; font-size: .85rem; line-height: 1.3; outline: none; cursor: pointer; margin-bottom: 6px; }
.ca-operator-select { width: 100%; padding: 8px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 6px; color: var(--ds-text,#e8e8e8); font-size: .85rem; line-height: 1.3; outline: none; cursor: pointer; }
.ca-weapon-select option, .ca-operator-select option { background: #23272b; color: #e8e8e8; }
.ca-status-row { display: flex; gap: 3px; margin-top: 7px; }
.ca-status-btn { flex: 1; padding: 3px 2px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: transparent; color: #555; font-size: .6rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.ca-status-btn.active-ok       { background: rgba(0,200,100,.12); border-color: rgba(0,200,100,.3); color: #00c864; }
.ca-status-btn.active-damaged  { background: rgba(255,140,0,.12); border-color: rgba(255,140,0,.3); color: #ff8c00; }
.ca-status-btn.active-destroyed{ background: rgba(210,47,47,.12); border-color: rgba(210,47,47,.3); color: #d22f2f; }

/* Weapons section */
.ca-weapons-section { padding-top: 14px; }
.ca-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #d22f2f; margin-bottom: 8px; }
.ca-weapon-row { display: flex; align-items: center; gap: 8px; background: #23272b; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.ca-weapon-key { font-size: .72rem; font-weight: 700; color: #666; width: 28px; flex-shrink: 0; }
.ca-weapon-state-sel { padding: 4px 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; color: #aaa; font-size: .72rem; outline: none; cursor: pointer; }

/* Staff grid */
.ca-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 8px; padding-top: 14px; }
.ca-staff-item { background: #23272b; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 10px 12px; }
.ca-staff-role { font-size: .68rem; color: #666; margin-bottom: 5px; }
.ca-staff-select { width: 100%; padding: 5px 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; color: var(--ds-text,#e8e8e8); font-size: .82rem; outline: none; cursor: pointer; }

/* Modal */
.ca-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9000; align-items: center; justify-content: center; }
.ca-modal-overlay.open { display: flex; }
.ca-modal { background: var(--ds-bg2,#23272a); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 24px; width: 380px; max-width: 95vw; }
.ca-modal h3 { font-size: 1rem; margin-bottom: 16px; }
.ca-form-group { margin-bottom: 12px; }
.ca-form-group label { display: block; font-size: .75rem; color: #888; margin-bottom: 4px; }
.ca-form-group select, .ca-form-group input { width: 100%; padding: 8px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: var(--ds-text,#e8e8e8); font-size: .88rem; outline: none; box-sizing: border-box; }
.ca-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ca-modal-btns button { padding: 8px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #aaa; cursor: pointer; font-size: .85rem; }
.ca-confirm-btn { background: #d22f2f !important; border-color: #d22f2f !important; color: #fff !important; font-weight: 600; }

/* Toast */
.ca-toast { position: fixed; bottom: 20px; right: 20px; background: #23272a; border: 1px solid rgba(0,200,100,.3); border-radius: 10px; padding: 10px 16px; font-size: .82rem; z-index: 9999; transform: translateY(80px); opacity: 0; transition: all .3s; max-width: 280px; }
.ca-toast.show { transform: translateY(0); opacity: 1; }
.ca-toast.error { border-color: rgba(210,47,47,.4); }
.ca-toast.info  { border-color: rgba(91,155,213,.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   VUE EM — État Major
   ═══════════════════════════════════════════════════════════════════════════ */
.em-app { max-width: 1400px; margin: 0 auto; padding: 16px 16px 60px; background: rgba(18,20,22,.92); border-radius: 12px; backdrop-filter: blur(8px); }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px,1fr)); gap: 20px; margin-top: 12px; }

/* EM Card */
.em-card { background: #1e2124; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px 20px; }
.em-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.em-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-ship-name { font-size: 1.15rem; font-weight: 700; }
.em-card-stats { display: flex; gap: 6px; }
.em-stat { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
.em-stat.em-ok  { background: rgba(0,200,100,.12); color: #00c864; border: 1px solid rgba(0,200,100,.25); }
.em-stat.em-dmg { background: rgba(255,140,0,.12); color: #ff8c00; border: 1px solid rgba(255,140,0,.25); }
.em-stat.em-off { background: rgba(210,47,47,.12); color: #d22f2f; border: 1px solid rgba(210,47,47,.25); }

/* Position grid */
.em-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px; margin-bottom: 12px; }
.em-pos { background: #23272b; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; padding: 10px 11px; border-left: 3px solid #333; }
.em-pos.em-ok        { border-left-color: #00c864; }
.em-pos.em-damaged   { border-left-color: #ff8c00; background: rgba(255,140,0,.05); }
.em-pos.em-destroyed { border-left-color: #d22f2f; background: rgba(210,47,47,.05); }
.em-pos-code   { font-size: .7rem; font-weight: 700; color: #666; text-transform: uppercase; margin-bottom: 3px; }
.em-pos-weapon { font-size: .78rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 3px 0; }
.em-pos-op     { font-size: .65rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-pos-status { font-size: .6rem; font-weight: 700; margin-top: 3px; }
.em-pos-status.em-ok        { color: #00c864; }
.em-pos-status.em-damaged   { color: #ff8c00; }
.em-pos-status.em-destroyed { color: #d22f2f; }

/* Weapons row */
.em-weapons-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.em-weapon-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 3px 8px; font-size: .72rem; color: #aaa; }
.em-weapon-item.loaded { border-color: rgba(0,200,100,.3); color: #00c864; }
.em-weapon-item.armed  { border-color: rgba(255,140,0,.3); color: #ff8c00; }
.em-weapon-item.fired  { border-color: rgba(210,47,47,.3); color: #d22f2f; }

/* Staff row */
.em-staff-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.em-staff-item { font-size: .72rem; color: #888; }
.em-staff-role { color: #555; font-size: .65rem; }

.em-footer { font-size: .65rem; color: #444; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.04); padding-top: 6px; }

/* Read-only badge */
.ca-readonly-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 4px 10px; font-size: .72rem; color: #666; }

/* ── Hangar ship image ─────────────────────────────────────────────────────── */
.hangar-ship-img-wrap { width: 100%; height: 100px; overflow: hidden; border-radius: 8px 8px 0 0; background: rgba(0,0,0,.3); margin: -12px -12px 10px; width: calc(100% + 24px); }
.hangar-ship-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Poste Opérateur ─────────────────────────────────────────────────────── */
.op-turrets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.op-turret-card { background: #23272b; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px 15px; border-left: 4px solid #333; }
.op-turret-card.ok        { border-left-color: #00c864; }
.op-turret-card.damaged   { border-left-color: #ff8c00; background: rgba(255,140,0,.05); }
.op-turret-card.destroyed { border-left-color: #d22f2f; background: rgba(210,47,47,.05); }
.op-turret-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.op-turret-ship { font-size: .8rem; color: var(--ds-text2, #9aa); }
.op-turret-etat { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 10px; }
.op-turret-etat.ok        { color:#00c864; background:rgba(0,200,100,.12); }
.op-turret-etat.damaged   { color:#ff8c00; background:rgba(255,140,0,.12); }
.op-turret-etat.destroyed { color:#d22f2f; background:rgba(210,47,47,.12); }
.op-turret-label { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.op-turret-weapon { font-size: .85rem; color: var(--ds-text2, #9aa); margin-bottom: .6rem; }
.op-status-row { display: flex; gap: 6px; }
.op-status-row .ca-status-btn { font-size: .72rem; padding: 6px 4px; }

/* ── Vue vaisseau 2D / 3D ─────────────────────────────────────────────────── */
.sv-toolbar { display: flex; gap: 8px; padding: 12px 0; }
.sv-mode-btn { padding: 6px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: transparent; color: var(--ds-text2, #9aa); font-weight: 600; cursor: pointer; }
.sv-mode-btn.active { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.4); color: #60a5fa; }
.sv-host { min-height: 420px; display: flex; flex-direction: column; align-items: center; }
.sv-2d-wrap { width: 100%; max-width: 420px; }
.sv-svg { width: 100%; height: auto; display: block; }
.sv-loading { padding: 2rem; color: var(--ds-text2, #9aa); text-align: center; }
.sv-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; font-size: .75rem; color: #cbd5e1; }
.sv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sv-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.ds-modal.ds-modal-wide { max-width: 820px; }

/* Vue 2D — deux ponts */
.sv-2d-dual { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; }
.sv-plan { flex: 1 1 280px; max-width: 320px; }
.sv-plan-title { text-align: center; font-size: .82rem; font-weight: 700; color: #cbd5e1; margin-bottom: 6px; }

/* CA — recherche vaisseau API dans la modale nouvelle opération */
.ca-api-results { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ca-api-res { padding: 5px 9px; font-size: .8rem; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.04); color: #e8e8e8; cursor: pointer; }
.ca-api-res:hover { border-color: #60a5fa; color: #60a5fa; }
.ca-api-selected { margin-top: 8px; font-size: .82rem; color: #00c864; }
.ca-api-clear { margin-left: 6px; border: none; background: transparent; color: #d22f2f; cursor: pointer; font-weight: 700; }

/* ══ Loadout Calculator ════════════════════════════════════════════════════ */
.dl-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.dl-title { font-size:1.5rem; font-weight:700; margin:0; }
.dl-ship-search { position:relative; width:320px; max-width:100%; }
.dl-search-results { position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:4px; background:var(--ds-bg2); border:1px solid var(--ds-border); border-radius:var(--ds-radius-sm); max-height:320px; overflow:auto; box-shadow:var(--ds-shadow); }
.dl-search-results:empty { display:none; }
.dl-sr-item { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.5rem .75rem; cursor:pointer; border-bottom:1px solid var(--ds-border); }
.dl-sr-item:last-child { border-bottom:none; }
.dl-sr-item:hover { background:var(--ds-bg3); }
.dl-sr-item small { color:var(--ds-text2); }
.dl-sr-empty { padding:.6rem .75rem; color:var(--ds-text2); }

.dl-grid { display:grid; grid-template-columns:1fr 320px; gap:1.25rem; align-items:start; }
@media (max-width:820px){ .dl-grid { grid-template-columns:1fr; } }

.dl-ship-banner { display:flex; flex-direction:column; gap:.15rem; padding:1rem; margin-bottom:1rem; background:var(--ds-bg2); border:1px solid var(--ds-border); border-radius:var(--ds-radius); position:relative; overflow:hidden; }
.dl-ship-banner img { position:absolute; right:0; top:0; height:100%; width:45%; object-fit:cover; opacity:.25; -webkit-mask-image:linear-gradient(to left,#000,transparent); mask-image:linear-gradient(to left,#000,transparent); }
.dl-ship-name { font-size:1.2rem; font-weight:700; position:relative; }
.dl-ship-sub { color:var(--ds-text2); font-size:.85rem; position:relative; }

.dl-group { margin-bottom:1.25rem; }
.dl-group-head { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-text2); font-weight:700; margin-bottom:.5rem; }
.dl-group-count { display:inline-block; background:var(--ds-bg3); border:1px solid var(--ds-border); border-radius:10px; padding:0 .4rem; font-size:.7rem; margin-left:.25rem; }
.dl-slot { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; background:var(--ds-bg2); border:1px solid var(--ds-border); border-radius:var(--ds-radius-sm); margin-bottom:.4rem; }
.dl-slot-empty { border-style:dashed; opacity:.8; }
.dl-slot-size { flex:none; min-width:34px; text-align:center; font-weight:700; font-size:.8rem; color:var(--ds-accent); background:var(--ds-bg3); border:1px solid var(--ds-border); border-radius:var(--ds-radius-sm); padding:.25rem 0; }
.dl-slot-info { flex:1; min-width:0; }
.dl-slot-item { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-slot-meta { font-size:.78rem; color:var(--ds-text2); }
.dl-slot .ds-btn { flex:none; }

.dl-stats-col { position:sticky; top:1rem; display:flex; flex-direction:column; gap:1rem; }
.dl-stat { display:flex; justify-content:space-between; align-items:baseline; padding:.4rem 0; border-bottom:1px solid var(--ds-border); }
.dl-stat:last-child { border-bottom:none; }
.dl-stat-k { color:var(--ds-text2); font-size:.85rem; }
.dl-stat-v { font-weight:700; font-variant-numeric:tabular-nums; }
.dl-stat-dps .dl-stat-v { color:var(--ds-red); font-size:1.15rem; }
.dl-stat-shield .dl-stat-v { color:var(--ds-accent); }
.dl-stat-delta { margin-top:.6rem; text-align:center; font-size:.8rem; font-weight:700; padding:.3rem; border-radius:var(--ds-radius-sm); }
.dl-stat-delta.up { color:var(--ds-green); background:rgba(63,185,80,.1); }
.dl-stat-delta.down { color:var(--ds-red); background:rgba(248,81,73,.1); }

.dl-actions-card .ds-input { margin:0; }
.dl-share-box { margin-top:.6rem; display:flex; gap:.4rem; }
.dl-share-box .ds-input { font-size:.75rem; }
.dl-builds { margin-top:.9rem; }
.dl-builds-head { font-size:.75rem; text-transform:uppercase; color:var(--ds-text2); font-weight:700; margin-bottom:.4rem; }
.dl-build-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.35rem 0; border-bottom:1px solid var(--ds-border); }
.dl-build-link { cursor:pointer; font-size:.85rem; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-build-link:hover { color:var(--ds-accent); }
.dl-build-link small { color:var(--ds-text2); }

.dl-picker-list { max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:.35rem; }
.dl-pick { padding:.55rem .7rem; border:1px solid var(--ds-border); border-radius:var(--ds-radius-sm); background:var(--ds-bg3); cursor:pointer; }
.dl-pick:hover { border-color:var(--ds-accent); }
.dl-pick.active { border-color:var(--ds-accent); background:rgba(88,166,255,.1); }
.dl-pick-name { font-weight:600; }
.dl-pick-tags { font-size:.75rem; color:var(--ds-text2); }
.dl-pick-stat { font-size:.8rem; font-weight:700; color:var(--ds-red); margin-top:.15rem; }