/* ============================================================
   Coindaily - shared chart & table tools
   (download PNG, expand, sortable tables, live stamps)
   ============================================================ */

/* ---------- chart toolbar ---------- */
.chart-tools { position: absolute; top: 9px; right: 10px; display: flex; gap: 5px; opacity: 0; transform: translateY(-2px); transition: .16s; z-index: 6; }
.panel:hover .chart-tools, .dchart-wrap:hover .chart-tools, .chart-host:hover .chart-tools { opacity: 1; transform: none; }
.chart-tools button { display: inline-flex; align-items: center; gap: 5px; background: rgba(17,18,21,.86); border: 1px solid var(--hairline); color: var(--tx-mid); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; padding: 4px 8px; border-radius: 6px; cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: .12s; line-height: 1; }
.chart-tools button:hover { color: var(--amber); border-color: rgba(201,154,75,.45); background: rgba(28,29,34,.95); }
.chart-tools button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- chart expand modal ---------- */
.chart-modal { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 32px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cmfade .16s ease; }
@keyframes cmfade { from { opacity: 0; } to { opacity: 1; } }
.chart-modal .cm-box { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; width: min(1240px, 96vw); max-height: 92vh; overflow: auto; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.chart-modal .cm-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.chart-modal .cm-head h4 { font-size: 14px; font-weight: 600; color: var(--tx-hi); }
.chart-modal .cm-head .cm-actions { margin-left: auto; display: flex; gap: 8px; }
.chart-modal .cm-head button { background: var(--panel-2); border: 1px solid var(--hairline); color: var(--tx-mid); font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chart-modal .cm-head button:hover { color: var(--amber); border-color: rgba(201,154,75,.4); }
.chart-modal .cm-head button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chart-modal .cm-body { padding: 24px 22px; }
.chart-modal .cm-body svg { width: 100% !important; height: auto !important; display: block; }
.chart-modal .cm-body canvas, .chart-modal .cm-body img { width: 100%; height: auto; display: block; }

/* ---------- sortable tables ---------- */
table thead th.cd-sortable { cursor: pointer; user-select: none; transition: color .12s; position: relative; }
table thead th.cd-sortable:hover { color: var(--tx-hi); }
th .cd-sind { display: inline-block; margin-left: 5px; font-size: 8px; opacity: .35; vertical-align: middle; transition: .12s; }
th.cd-asc .cd-sind, th.cd-desc .cd-sind { opacity: 1; color: var(--amber); }

/* ---------- live stamp ---------- */
.cd-stamp { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--tx-dim); }
.cd-stamp .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(79,158,124,.5); animation: cdpip 2.4s infinite; }
@keyframes cdpip { 0% { box-shadow: 0 0 0 0 rgba(79,158,124,.45); } 70% { box-shadow: 0 0 0 5px rgba(79,158,124,0); } 100% { box-shadow: 0 0 0 0 rgba(79,158,124,0); } }