/* ============================================
   Dev Modal V2 - Trader-Modal Style CSS
   ============================================ */

.dev-modal {
    position: fixed;
    /* WIDER, because charts view is the reason this modal is open most of the time and a
       chart wants width more than anything else. 96vw still caps it on a small screen. */
    width: 1300px;
    max-width: 96vw;
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Resize Handles */
.dev-modal .resize-handle {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.dev-modal .resize-handle.resize-br {
    right: 0;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #444 50%);
    border-radius: 0 0 12px 0;
}
.dev-modal .resize-handle.resize-bl {
    left: 0;
    cursor: nesw-resize;
    background: linear-gradient(-135deg, transparent 50%, #444 50%);
    border-radius: 0 0 0 12px;
}
.dev-modal .resize-handle:hover { opacity: 1; }
.dev-modal .resize-handle.resize-br:hover { background: linear-gradient(135deg, transparent 50%, #00c853 50%); }
.dev-modal .resize-handle.resize-bl:hover { background: linear-gradient(-135deg, transparent 50%, #00c853 50%); }

/* ============================================
   Header
   ============================================ */

.dev-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #111;
    border-bottom: 1px solid #222;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    gap: 8px;
}
.dev-modal-header:active { cursor: grabbing; }

.dm-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.dm-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dm-header-label {
    font-size: 9px;
    color: #fff;
    font-family: monospace;
    padding: 2px 6px;
    background: #333;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
}

/* Nav Buttons */
.dm-nav-buttons {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.dm-nav-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.dm-nav-btn:hover:not(:disabled) { background: #252525; color: #fff; border-color: #444; }
.dm-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.dev-icon { font-size: 16px; flex-shrink: 0; }

.dm-header-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.dm-header-wallet {
    font-size: 9px;
    color: #555;
    font-family: monospace;
    cursor: pointer;
    padding: 2px 6px;
    background: #1a1a1a;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
    user-select: text;
    position: relative;
    z-index: 1;
}
.dm-header-wallet:hover { background: #252525; color: #888; }

/* SOL Balance */
.dm-sol-balance {
    font-size: 11px;
    color: #555;
    font-family: 'Courier New', monospace;
    padding: 2px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    white-space: nowrap;
    animation: dmBalPulse 1.5s ease-in-out infinite;
}
.dm-sol-balance.dm-bal-loaded {
    color: #4ecdc4;
    animation: none;
}
.dm-sol-balance.dm-bal-error {
    color: #ff6b6b;
    animation: none;
}
@keyframes dmBalPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Search Bar */
.dm-search-bar {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.dm-search-bar input {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    width: 160px;
    font-family: monospace;
}
.dm-search-bar input:focus { outline: none; border-color: #00c853; }
.dm-search-bar input::placeholder { color: #444; }
.dm-search-bar button {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.dm-search-bar button:hover { background: #252525; color: #fff; border-color: #444; }

.dev-modal-close {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.dev-modal-close:hover { background: #ff4757; border-color: #ff4757; color: #fff; }

/* ============================================
   Body & Layout
   ============================================ */

.dev-modal-body {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.dev-modal-body .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #666;
    gap: 12px;
}
.dev-modal-body .loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #222;
    border-top-color: #00c853;
    border-radius: 50%;
    animation: dmSpin 0.8s linear infinite;
}
@keyframes dmSpin { to { transform: rotate(360deg); } }

.dev-modal-body .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666;
    font-size: 13px;
}

/* Two-Panel Layout */
.dm-layout {
    display: flex;
    height: 100%;
    min-height: 0;
}

/* ============================================
   Sidebar
   ============================================ */

.dm-sidebar {
    width: 250px;
    min-width: 250px;
    background: #0a0a0a;
    border-right: 1px solid #1a1a1a;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dm-sidebar::-webkit-scrollbar { width: 4px; }
.dm-sidebar::-webkit-scrollbar-track { background: #0a0a0a; }
.dm-sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.dm-sidebar-section {
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
}
.dm-sidebar-section:last-child { border-bottom: none; }

/* Status Badges */
.dm-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.dm-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.dm-badge.tracked { background: rgba(0,204,255,0.15); color: #00ccff; }
.dm-badge.sniped { background: rgba(255,170,0,0.15); color: #ffaa00; }
.dm-badge.blacklisted { background: rgba(255,71,87,0.15); color: #ff4757; }
.dm-badge.filtered { background: rgba(0,200,83,0.15); color: #00c853; }
.dm-badge.filtered.tx { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Identity Section */
.dm-identity-section {
    padding-bottom: 12px !important;
}

/* Blacklist Row - Always visible at top */
.dm-blacklist-row {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
}
.dm-blacklist-row .dm-action-btn.full {
    width: 100%;
}

/* Field Groups */
.dm-field-group {
    margin-bottom: 10px;
}
.dm-field-group label {
    display: block;
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 600;
}
.dm-field-group input[type="text"],
.dm-field-group input[type="number"] {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    box-sizing: border-box;
}
.dm-field-group input:focus {
    outline: none;
    border-color: #00c853;
}
.dm-field-group textarea {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ccc;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 50px;
}
.dm-field-group textarea:focus {
    outline: none;
    border-color: #00c853;
}

.dm-input-suffix {
    font-size: 10px;
    color: #555;
    margin-left: -24px;
    pointer-events: none;
}

/* Actions Row - horizontal buttons */
.dm-actions-row {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.dm-actions-row .dm-action-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 1px solid;
    white-space: nowrap;
}
.dm-actions-row .dm-action-btn.full {
    flex: 1;
}

.dm-action-btn.save {
    background: rgba(0,200,83,0.1);
    border-color: rgba(0,200,83,0.3);
    color: #00c853;
}
.dm-action-btn.save:hover { background: rgba(0,200,83,0.2); border-color: #00c853; }

/* Section Title */
.dm-section-title {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Full-width Button */
.dm-btn-full {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: 5px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.dm-btn-full:hover { background: #252525; color: #fff; }
.dm-reset-btn { margin-top: 6px; color: #666 !important; }
.dm-reset-btn:hover { color: #ff4757 !important; border-color: #ff4757 !important; }

/* Stats Grid */
.dm-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 2px 0;
}
.dm-stat-row span { color: #666; }
.dm-stat-row strong { color: #ccc; font-weight: 600; }
.dm-stat-row strong.pos { color: #00c853; }
.dm-stat-row strong.neg { color: #ff4757; }
.dm-stat-row strong.cyan { color: #00ccff; }

/* Optimal Entry */
.dm-optimal-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.dm-opt-btn {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #888;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.dm-opt-btn:hover { background: #252525; color: #fff; }
.dm-opt-btn.active {
    background: #00c853;
    color: #000;
    border-color: #00c853;
    font-weight: 600;
}

.dm-optimal-result {
    background: #111;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}
.dm-optimal-value {
    font-size: 20px;
    font-weight: 700;
    color: #00c853;
    margin-bottom: 4px;
}
.dm-optimal-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
.dm-optimal-count {
    font-size: 9px;
    color: #555;
}
.dm-optimal-empty {
    font-size: 11px;
    color: #555;
    text-align: center;
    padding: 10px;
}

.dm-optimal-clickable {
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.dm-optimal-clickable:hover {
    background: #141a15;
    border-color: #00c853;
}
.dm-optimal-apply {
    font-size: 9px;
    color: #00c853;
    opacity: 0;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: opacity .12s;
}
.dm-optimal-clickable:hover .dm-optimal-apply { opacity: .8; }

/* applied = this entry is currently driving the Min ATH filter */
.dm-optimal-result.applied {
    background: #0d1a10;
    border-color: #00c853;
}
.dm-optimal-result.applied .dm-optimal-apply { opacity: .7; color: #ff8a65; }

/* expandable full ranking */
.dm-optimal-toggle {
    width: 100%;
    margin-top: 6px;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    color: #666;
    font-size: 10px;
    padding: 4px;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.dm-optimal-toggle:hover { color: #00c853; border-color: #2a2a2a; }
.dm-optimal-all {
    margin-top: 6px;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
}
.dm-optimal-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    border-bottom: 1px solid #141414;
    transition: background .1s;
}
.dm-optimal-row:last-child { border-bottom: none; }
.dm-optimal-row:hover { background: #161616; }
.dm-optimal-row .dm-or-mc { color: #ccc; }
.dm-optimal-row .dm-or-x { text-align: center; color: #00c853; font-weight: 600; }
.dm-optimal-row .dm-or-win { text-align: right; color: #666; }
.dm-optimal-row.best { background: #101510; }
.dm-optimal-row.best .dm-or-mc::after { content: ' \2605'; color: #00c853; font-size: 9px; }
.dm-optimal-row.applied {
    background: #0d1a10;
    box-shadow: inset 2px 0 0 #00c853;
}
.dm-optimal-row.dm-or-head {
    cursor: default;
    background: #0d0d0d;
    color: #555;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.dm-optimal-row.dm-or-head:hover { background: #0d0d0d; }
.dm-optimal-row.dm-or-head .dm-or-x { color: #555; font-weight: 400; }



/* Filter Inputs */
.dm-filter-inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dm-filter-group-label {
    font-size: 9px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #1a1a1a;
}
.dm-filter-group-label:first-child {
    margin-top: 0;
}
.dm-filter-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}
.dm-filter-row span {
    color: #666;
    min-width: 55px;
    font-size: 10px;
}
.dm-filter-row input[type="number"],
.dm-filter-row input[type="text"] {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10px;
    width: 60px;
}
.dm-filter-row input[type="number"]:focus,
.dm-filter-row input[type="text"]:focus { outline: none; border-color: #00c853; }
.dm-filter-row input[type="number"]::placeholder,
.dm-filter-row input[type="text"]::placeholder { color: #444; }
.dm-filter-row select {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}
.dm-filter-row select:focus { outline: none; border-color: #00c853; }
.dm-filter-row label {
    color: #888;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.dm-filter-row input[type="checkbox"] {
    accent-color: #00c853;
    cursor: pointer;
}
.dm-time-presets {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.dm-preset-btn {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #888;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s;
}
.dm-preset-btn:hover {
    background: #252525;
    color: #fff;
    border-color: #444;
}

/* Action Buttons */
.dm-action-btn {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 1px solid;
}

.dm-action-btn.track {
    background: rgba(0,204,255,0.1);
    border-color: rgba(0,204,255,0.3);
    color: #00ccff;
}
.dm-action-btn.track:hover { background: rgba(0,204,255,0.2); border-color: #00ccff; }

.dm-action-btn.snipe {
    background: rgba(255,170,0,0.1);
    border-color: rgba(255,170,0,0.3);
    color: #ffaa00;
}
.dm-action-btn.snipe:hover { background: rgba(255,170,0,0.2); border-color: #ffaa00; }

.dm-action-btn.unsnipe {
    background: rgba(100,100,100,0.1);
    border-color: rgba(100,100,100,0.3);
    color: #888;
}
.dm-action-btn.unsnipe:hover { background: rgba(100,100,100,0.2); border-color: #666; }

.dm-action-btn.blacklist {
    background: rgba(255,71,87,0.08);
    border-color: rgba(255,71,87,0.2);
    color: #ff6b6b;
}
.dm-action-btn.blacklist:hover { background: rgba(255,71,87,0.15); border-color: #ff4757; color: #ff4757; }

.dm-action-btn.unblacklist {
    background: rgba(0,200,83,0.1);
    border-color: rgba(0,200,83,0.3);
    color: #00c853;
}
.dm-action-btn.unblacklist:hover { background: rgba(0,200,83,0.2); border-color: #00c853; }

.dm-action-btn.remove {
    background: rgba(100,100,100,0.05);
    border-color: rgba(100,100,100,0.2);
    color: #666;
    flex: 0 0 auto;
    padding: 6px 10px;
}
.dm-action-btn.remove:hover { background: rgba(255,71,87,0.1); border-color: #ff4757; color: #ff4757; }

/* ============================================
   Main Content Area
   ============================================ */

.dm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dm-table-header {
    padding: 8px 12px;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
}
.dm-table-header h3 {
    margin: 0;
    font-size: 12px;
    color: #aaa;
    font-weight: 600;
}

.dm-table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}
.dm-table-container::-webkit-scrollbar { width: 6px; height: 6px; }
.dm-table-container::-webkit-scrollbar-track { background: #0a0a0a; }
.dm-table-container::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Table */
.dm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.dm-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.dm-table th {
    background: #111;
    color: #666;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #222;
    white-space: nowrap;
    user-select: none;
}
.dm-table th.dm-sortable {
    cursor: pointer;
    transition: color 0.15s;
}
.dm-table th.dm-sortable:hover { color: #aaa; }
.dm-table th.dm-sortable.sorted-asc::after { content: ' ▲'; font-size: 8px; color: #00c853; }
.dm-table th.dm-sortable.sorted-desc::after { content: ' ▼'; font-size: 8px; color: #00c853; }

.dm-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #111;
    color: #aaa;
    white-space: nowrap;
}
.dm-table tr:hover td { background: #111; }

/* X multiplier colors */
.dm-table td.x-legendary { color: #ffd700; font-weight: 700; } /* 10x+ gold */
.dm-table td.x-epic { color: #a855f7; font-weight: 600; }      /* 5-10x purple */
.dm-table td.x-great { color: #00c853; font-weight: 600; }     /* 3-5x green */
.dm-table td.x-good { color: #4ade80; }                        /* 2-3x light green */
.dm-table td.x-ok { color: #22863a; }                          /* 1.5-2x dark green */
.dm-table td.x-weak { color: #666; }                           /* <1.5x grey */

/* Dev buy size colors */
.dm-dev-buy-high { color: #ffd700; font-weight: 600; }
.dm-dev-buy-med { color: #4ecdc4; }

/* Time cell */
.dm-time-cell {
    font-size: 11px;
    color: #fff !important;
}

/* Rug row */
.dm-rug-row { background: rgba(255,71,87,0.05); }
.dm-rug-badge {
    font-size: 9px;
    background: rgba(255,71,87,0.2);
    color: #ff4757;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
}

/* Rug cell and toggle */
.dm-rug-cell {
    white-space: nowrap;
}
.dm-rug-toggle {
    background: none;
    border: none;
    font-size: 10px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.4;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.dm-rug-toggle:hover {
    opacity: 1;
}

/* ATH cell and edit */
.dm-ath-cell {
    white-space: nowrap;
    position: relative;
}
.dm-ath-value {
    margin-right: 4px;
}
.dm-ath-edit-btn {
    background: none;
    border: none;
    font-size: 10px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.3;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.dm-ath-edit-btn:hover {
    opacity: 1;
}
.dm-ath-input {
    width: 80px;
    background: #1a1a1a;
    border: 1px solid #00c853;
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-family: monospace;
}
.dm-ath-input:focus {
    outline: none;
    border-color: #00e676;
}
.dm-ath-save-btn,
.dm-ath-cancel-btn {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 0 3px;
    vertical-align: middle;
    transition: opacity 0.15s;
}
.dm-ath-save-btn {
    color: #00c853;
}
.dm-ath-save-btn:hover {
    color: #00e676;
}
.dm-ath-cancel-btn {
    color: #ff4757;
}
.dm-ath-cancel-btn:hover {
    color: #ff6b81;
}

/* Migrated row */
.dm-migrated-row { background: rgba(0,204,255,0.03); }
.dm-migr-yes { color: #00c853; }
.dm-migr-no { color: #555; }

/* Clickable token */
.dm-clickable {
    color: #fff;
    cursor: pointer;
    transition: color 0.15s;
}
.dm-clickable:hover { color: #00c853; }

/* Action buttons in table */
.dm-chart-btn {
    text-decoration: none;
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.15s;
    margin-right: 4px;
}
.dm-chart-btn:hover { opacity: 1; }

.dm-copy-btn {
    background: none;
    border: none;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s;
    padding: 0;
}
.dm-copy-btn:hover { opacity: 1; }

/* ============================================
   Toast Notification
   ============================================ */

.dev-modal-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    z-index: 999999;
    pointer-events: none;
    animation: dmToastIn 0.2s ease, dmToastOut 0.3s ease 1.5s forwards;
    white-space: nowrap;
}
.dev-modal-toast.success { background: #1a8a42; }
.dev-modal-toast.error { background: #c0392b; }
.dev-modal-toast.info { background: #2980b9; }
.dev-modal-toast.warning { background: #e67e22; }

@keyframes dmToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes dmToastOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1000px) {
    .dev-modal { width: 96vw; }
    .dm-sidebar { width: 220px; min-width: 220px; }
    .dm-header-wallet { max-width: 200px; }
    .dm-search-bar input { width: 120px; }
}

@media (max-width: 750px) {
    .dm-layout { flex-direction: column; }
    .dm-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #1a1a1a;
    }
    .dm-header-wallet { display: none; }
}

/* ── the dev registry panel ────────────────────────────────────────
   One block per thing you can do to a dev, each with its settings folded away behind
   its own header. The summary line on the header is what lets the block stay closed:
   you can read what arming him would do without opening anything. */
.dm-state{font:700 9px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.08em;
  padding:2px 7px;border-radius:3px;background:rgba(255,255,255,.08);color:#9aa2af}
.dm-state-armed{background:rgba(246,70,93,.16);color:#f6465d}
.dm-state-tracked{background:rgba(14,203,129,.16);color:#0ecb81}
.dm-state-benched{background:rgba(240,180,41,.16);color:#f0b429}
.dm-badge.verdict{background:rgba(255,255,255,.08);color:#9aa2af}
.dm-badge.verdict.v-rugger{background:rgba(246,70,93,.15);color:#f6465d}
.dm-bench-why{font:10px var(--f-mono, ui-monospace, Menlo, monospace);color:#f0b429;
  padding:4px 6px;margin:4px 0;border-left:2px solid #f0b429;background:rgba(240,180,41,.07)}
.dmreg-block{border:1px solid rgba(255,255,255,.12);border-radius:5px;
  padding:6px;margin:8px 0;background:rgba(255,255,255,.02)}
.dmreg-block.on{border-color:rgba(56,189,248,.45)}
.dmreg-head{display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:2px 2px 6px;user-select:none}
.dmreg-head:hover .dmreg-t{color:#38bdf8}
.dmreg-t{font:700 10.5px var(--f-mono, ui-monospace, Menlo, monospace);color:#e9ecf1}
.dmreg-sum{margin-left:auto;font:9.5px var(--f-mono, ui-monospace, Menlo, monospace);
  color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmreg-caret{color:#6b7280;font-size:9px;flex:none}
.dmreg-adv{padding:4px 2px 8px;border-top:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.dmreg-hint{font:9.5px var(--f-sans, Inter, system-ui, sans-serif);color:#6b7280;
  line-height:1.4;margin:4px 0 6px}
.dmreg-defrow{display:flex;gap:6px;margin-top:6px}
.dmreg-defrow .dm-preset-btn{flex:1}
.dmreg-block.bench input{width:100%;margin-bottom:6px}
.dm-action-btn.bench{background:rgba(240,180,41,.14);color:#f0b429;
  border:1px solid rgba(240,180,41,.4)}
.dm-action-btn.bench:hover{background:rgba(240,180,41,.24)}
.dmreg-verdicts{display:flex;gap:4px;margin-top:8px}
.dmreg-verdicts .dm-preset-btn{flex:1;font-size:9px}
.dmreg-verdicts .dm-preset-btn.on{border-color:#38bdf8;color:#38bdf8}
.dmreg-verdicts .v-rugger.on{border-color:#f6465d;color:#f6465d}
.dm-save-meta{margin-bottom:4px}

/* ══════════ dm-native-sweep ══════════
   THE CONTROLS THE STYLESHEET NEVER REACHED. Everything in the modal is dark except a
   handful of inputs that no selector happened to cover, and a browser default does not
   look like a slightly different theme -- it looks broken. The bench reason box was
   rendering as a WHITE box with an inset grey border, straight out of the UA sheet,
   because .dmreg-block.bench input set only its width. Scoped to .dm-sidebar so the
   table and the header keep the rules they already have. */
.dm-sidebar input[type="text"],
.dm-sidebar input[type="number"],
.dm-sidebar select,
.dm-sidebar textarea {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #e9ecf1;
    border-radius: 4px;
    padding: 4px 7px;
    font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dm-sidebar input:focus,
.dm-sidebar select:focus,
.dm-sidebar textarea:focus { outline: none; border-color: #38bdf8; }
.dm-sidebar input::placeholder, .dm-sidebar textarea::placeholder { color: #4b5563; }

/* Native checkboxes: a blue-and-white tick on a dark panel is the other giveaway.
   accent-color repaints the control itself rather than faking one out of a span. */
.dm-sidebar input[type="checkbox"] {
    accent-color: #38bdf8;
    width: 12px; height: 12px;
    vertical-align: -1px;
    margin: 0 5px 0 0;
    cursor: pointer;
}
.dm-sidebar label { cursor: pointer; }

/* ══════════ scrollbars ══════════
   Three elements had a styled bar and everything else in the modal -- the body, the
   main pane, the chart grid, the linked-wallet list -- got the OS one, which on a black
   panel is a bright grey slab. One rule for every scroller inside the modal, and the
   Firefox properties beside the WebKit ones. */
.dev-modal, .dev-modal * { scrollbar-width: thin; scrollbar-color: #2e2e36 #0a0a0a; }
.dev-modal ::-webkit-scrollbar { width: 9px; height: 9px; }
.dev-modal ::-webkit-scrollbar-track { background: #0a0a0a; }
.dev-modal ::-webkit-scrollbar-thumb {
    background: #2e2e36; border-radius: 5px; border: 2px solid #0a0a0a;
}
.dev-modal ::-webkit-scrollbar-thumb:hover { background: #3f3f4a; }
.dev-modal ::-webkit-scrollbar-corner { background: #0a0a0a; }

/* the verdict row */
.dmreg-vhead{font:700 9px ui-monospace, SFMono-Regular, Menlo, monospace;letter-spacing:.09em;
  color:#6b7280;margin:10px 0 4px}
.dmreg-vhead b{color:#38bdf8;font-weight:700}
.dmreg-vcustom{display:flex;gap:4px;margin-top:5px}
.dmreg-vcustom input{flex:1;min-width:0}
.dmreg-vcustom .dm-preset-btn{flex:none;padding:3px 8px}

/* CHARTS VIEW KEEPS THE SIDEBAR, so the grid is now a flex child beside it rather than
   the only thing in the body. Without these it would size to its content and overflow.

   grid-auto-rows:max-content IS LOAD-BEARING. As a flex child the grid has a DEFINITE
   height for the first time -- it used to be a block inside the scrolling body and simply
   grew. With a definite height and `auto` rows, the rows collapsed to 11px each: .wp-card
   is overflow:hidden, so its automatic minimum size is zero, and nothing was left holding
   the row open. The card then clipped its own chart, and because sizeGrid() derives the
   card chrome as (card height - chart height), a card SHORTER than its chart produced a
   NEGATIVE chrome that fed straight back into --dcx-ch: the chart grew 165px on every
   single resize, forever.

   Measured, not guessed: align-content:start alone changed nothing (rows stayed 11px);
   grid-auto-rows:max-content put the card back to its natural 141px. start is kept
   beside it so that one or two cards sit at the top of the scroller instead of being
   stretched down the whole 615px. */
.dm-layout > .dcx-grid { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden;
  grid-auto-rows: max-content; align-content: start; }

/* ══════════ opening straight into the view you left in ══════════
   Set on <html> by dev-charts.js before any modal is built, so the rows pane is hidden
   from the FIRST paint rather than after the observer catches up. dev-charts still sets
   display inline once it runs; this only has to cover the gap before that. */
html.dcx-charts .dev-modal .dm-main { display: none; }

/* ══════════ room to scroll ══════════
   The scrollbar sat hard against the card edge, so reaching it meant landing on the
   chart -- and on a chart that now pans and zooms under the cursor, a near miss is a
   dragged chart rather than a scroll. The extra right padding is that margin for error. */
.dm-layout > .dcx-grid { padding-right: 222px; }

/* the autosave tell: present when it matters, gone a moment later */
.dm-savenote{min-height:13px;font:9.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#0ecb81;opacity:0;transition:opacity .18s;margin:1px 0 5px;letter-spacing:.03em}
.dm-savenote.on{opacity:.95}
.dm-savenote.bad{color:#f6465d}
.dmreg-actions{display:flex;gap:5px}
.dmreg-actions .dm-action-btn.full{flex:1}
.dmreg-actions .dm-action-btn.unsnipe{flex:none;padding:6px 9px;
  background:rgba(255,255,255,.05);color:#9aa2af;border:1px solid rgba(255,255,255,.16)}
.dmreg-actions .dm-action-btn.unsnipe:hover{background:rgba(246,70,93,.16);color:#f6465d;
  border-color:rgba(246,70,93,.45)}

/* the number the chosen rule cannot fire without -- marked, because leaving it blank
   arms a sub that looks armed and never buys */
.dmreg-need input{border-color:rgba(56,189,248,.45)!important}
.dmreg-need span{color:#38bdf8}
.dmreg-adv [data-etype][hidden]{display:none!important}