:root {
  --bg: #0b0b0d;
  --bg-2: #111114;
  --panel: #16161a;
  --panel-2: #1c1c22;
  --border: #26262e;
  --border-2: #33333d;
  --text: #ece7db;      /* stacks cream */
  --muted: #8b8779;
  --muted-2: #6a675d;
  --accent: #f7931a;    /* bitcoin orange */
  --accent-2: #5546ff;  /* stacks purple */
  --new: #f7931a;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: rgba(11,11,13,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.brand .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.brand small { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.grow { flex: 1; }
.btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--border-2); background: var(--panel-2); }
.btn.accent { background: var(--accent); color: #1a1205; border-color: var(--accent); font-weight: 600; }
.btn.accent:hover { filter: brightness(1.08); }
.newpill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(247,147,26,0.12); color: var(--accent);
  border: 1px solid rgba(247,147,26,0.35); padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* ---- layout ---- */
.shell { display: flex; }
.main { flex: 1; min-width: 0; }
.controls {
  position: sticky; top: 57px; z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px 20px; display: flex; flex-direction: column; gap: 10px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  user-select: none; transition: all .12s;
}
.chip:hover { border-color: var(--border-2); }
.chip.on { color: var(--text); border-color: var(--accent); background: rgba(247,147,26,0.10); }
.chip .cnt { color: var(--muted-2); margin-left: 5px; font-variant-numeric: tabular-nums; }
.search {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 7px 12px; border-radius: 8px; min-width: 220px; font-size: 13px; outline: none;
}
.search:focus { border-color: var(--accent-2); }
.label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 4px; }

/* ---- date slider (skinny, brand) ---- */
.slider { display: flex; align-items: center; gap: 10px; padding: 0; opacity: .7; transition: opacity .15s; }
.slider:hover { opacity: 1; }
.slider .track { position: relative; flex: 1; height: 14px; }
.slider input[type=range] { position: absolute; width: 100%; top: 0; margin: 0; -webkit-appearance: none; background: transparent; pointer-events: none; height: 14px; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; transition: transform .1s; }
.slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }
.slider input[type=range]::-moz-range-thumb { pointer-events: all; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
.slider .rail { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--border); border-radius: 2px; }
.slider .fill { position: absolute; top: 6px; height: 2px; background: var(--accent); border-radius: 2px; }
.slider .dateval { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); white-space: nowrap; min-width: 74px; }
.slider .label { color: var(--muted-2); }

/* ---- feed grid ---- */
.feed { padding: 16px 20px 60px; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; position: relative; overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.card.new { border-color: rgba(247,147,26,0.4); }
.card.new::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.card .meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border-2);
}
.badge.BLOG { color: #7db3ff; border-color: #2b3d5c; }
.badge.TWITTER { color: #9db4ff; border-color: #313a63; }
.badge.PR, .badge.NEWS { color: #f7c85a; border-color: #5c4a1e; }
.badge.YOUTUBE { color: #ff8080; border-color: #5c2b2b; }
.badge.PODCAST, .badge.OTHER { color: var(--muted); }
.card .partner { color: var(--text); font-weight: 600; }
.card h3 { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .foot { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 11px; color: var(--muted-2); font-family: var(--mono); }
.card .cat { margin-left: auto; text-transform: uppercase; letter-spacing: 0.06em; }

.empty { text-align: center; color: var(--muted); padding: 80px 20px; }
.loadmore { display: block; margin: 20px auto; }

/* ---- partner drawer ---- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 51;
  background: var(--bg-2); border-left: 1px solid var(--border); display: flex; flex-direction: column;
}
.drawer header { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.drawer header h2 { margin: 0; font-size: 15px; }
.drawer .body { overflow-y: auto; padding: 12px 14px; flex: 1; }
.addbox { display: flex; gap: 6px; margin-bottom: 14px; }
.addbox input { flex: 1; }
.prow { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border); }
.prow .pname { font-weight: 600; }
.prow .psub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.prow .pcat { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* toggle switch */
.sw { position: relative; width: 38px; height: 22px; flex: none; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw span { position: absolute; inset: 0; background: var(--border-2); border-radius: 999px; cursor: pointer; transition: .15s; }
.sw span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .15s; }
.sw input:checked + span { background: rgba(247,147,26,0.35); }
.sw input:checked + span::before { transform: translateX(16px); background: var(--accent); }

/* ---- preview layout: sidebar + board ---- */
.layout{display:flex;align-items:stretch}
.side{width:230px;flex:none;border-right:1px solid var(--border);background:var(--bg-2);display:flex;flex-direction:column;position:sticky;top:57px;height:calc(100vh - 57px)}
.side .sh{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.side .sh b{font-size:13px}
.side .addbox{padding:10px;gap:6px;display:flex;border-bottom:1px solid var(--border)}
.side .addbox input{flex:1;min-width:0}
.plist{overflow-y:auto;flex:1;padding:4px 6px}
.prow2{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px}
.prow2:hover{background:var(--panel)}
.prow2 .pn{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow2 .pc{font-size:9px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;margin-left:auto;flex:none}
.sw.sm{width:32px;height:19px;flex:none}
.sw.sm span::before{width:13px;height:13px}
.sw.sm input:checked + span::before{transform:translateX(13px)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.board{display:flex;gap:10px;padding:14px 16px 40px;overflow-x:auto;align-items:flex-start}
.col{flex:1;min-width:255px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;max-height:calc(100vh - 205px)}
.col.feedcol{background:rgba(247,147,26,0.04);border-color:rgba(247,147,26,.25)}
.col.feedcol{flex:0 0 auto;width:530px;min-width:530px}
.col.feedcol .colbody{display:block;column-count:2;column-gap:8px}
.col.feedcol .colbody .kcard{margin-bottom:8px;break-inside:avoid;-webkit-column-break-inside:avoid}
.col h4{margin:0;padding:10px 12px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.colhead{cursor:grab}.colhead:active{cursor:grabbing}
.grip{color:var(--muted-2);font-size:12px;line-height:1}
.col.dragcol{opacity:.45}
.col.drop{outline:2px dashed var(--accent);outline-offset:-4px}
.col h4 .n{margin-left:auto;color:var(--muted-2);font-family:var(--mono)}
.colbody{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px}
.col.drop{outline:2px dashed var(--accent);outline-offset:-4px}
.kcard{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;cursor:grab;position:relative;overflow:hidden;flex:0 0 auto}
.kcard:hover{border-color:var(--border-2)}
.kcard:active{cursor:grabbing}
.kcard.new{border-color:rgba(247,147,26,.45)}
.kcard.new::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kcard.dragging{opacity:.4}
.kcard .kh{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.logo{width:16px;height:16px;border-radius:3px;flex:none;background:var(--panel-2);object-fit:cover}
.kcard .kh .pn{color:var(--text);font-weight:600}
.kcard h3{margin:0;font-size:13px;line-height:1.32;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kcard a.title{color:inherit}
.kcard .kf{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);font-family:var(--mono)}
.kcard .kf .agotag{color:var(--muted-2)}
.kf .cat{margin-left:auto;text-transform:uppercase;letter-spacing:.05em}
.kbtns{display:flex;gap:4px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:6px;margin-top:1px}
.kbtn{font-size:10px;padding:3px 7px;border-radius:5px;border:1px solid var(--border-2);background:transparent;color:var(--muted);cursor:pointer;transition:.12s}
.kbtn:hover{color:var(--text);border-color:var(--accent)}
.kbtn.on{background:rgba(247,147,26,.14);color:var(--accent);border-color:var(--accent)}
.slider input[type=range]{z-index:3}
.slider input[type=range]#rto{z-index:4}
.previewnote{position:fixed;bottom:10px;left:10px;z-index:60;background:var(--panel);border:1px solid var(--border-2);color:var(--muted);font-size:11px;padding:5px 9px;border-radius:8px;font-family:var(--mono)}
.toast{position:fixed;bottom:14px;right:14px;z-index:70;background:var(--accent);color:#1a1205;font-weight:600;padding:9px 13px;border-radius:8px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);transition:.25s}
.toast.show{opacity:1;transform:none}

.tabs{display:flex;align-items:center;gap:2px;padding:0 14px;background:var(--bg-2);border-bottom:1px solid var(--border);position:sticky;top:56px;z-index:35;overflow-x:auto}
.tab{padding:9px 12px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px;user-select:none}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
.tab .x{color:var(--muted-2);font-size:14px;line-height:1;padding:0 3px;border-radius:4px}
.tab .x:hover{color:var(--accent);background:var(--panel)}
.tab.addtab{color:var(--accent);font-weight:600;font-size:12px}
.side{top:95px !important;height:calc(100vh - 95px) !important}
.controls{top:95px !important}
.col{max-height:calc(100vh - 250px)}
.catgrp{margin-bottom:2px}
.cathd{display:flex;align-items:center;gap:8px;padding:7px 6px 4px;border-top:1px solid var(--border);margin-top:4px}
.cathd .cl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cathd .cn{margin-left:auto;font-size:10px;color:var(--muted-2);font-family:var(--mono)}

/* full-height board: content fills from below the tabs to the viewport bottom */
.content{display:flex;flex-direction:column;height:calc(100vh - 95px)}
.controls{position:static !important;top:auto !important;flex:none}
.board{flex:1;min-height:0;overflow:auto;padding-bottom:14px}
.col{max-height:100%}

/* scrollbars: skinny, dark, only visible on hover */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover{scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:7px;border:1px solid transparent;background-clip:padding-box}
*:hover::-webkit-scrollbar-thumb{background:var(--border-2);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

.favbar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border)}
.favbar .favlbl{font-size:12px;color:var(--muted)}
.btn.tiny{padding:3px 8px;font-size:11px}
.collapsebtn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;cursor:pointer;width:24px;height:24px;line-height:1;font-size:14px}
.collapsebtn:hover{color:var(--text);border-color:var(--border-2)}
.star{cursor:pointer;color:var(--muted-2);font-size:13px;flex:none;user-select:none}
.star.on{color:var(--accent)}
.side.collapsed{width:42px !important}
.side.collapsed .favbar,.side.collapsed .addbox,.side.collapsed .plist,.side.collapsed .sh b,.side.collapsed #pcount{display:none}
.side.collapsed .sh{justify-content:center;padding:10px 6px}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:80;width:440px;max-width:92vw;max-height:80vh;background:var(--bg-2);border:1px solid var(--border-2);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal header h2{margin:0;font-size:15px}
.modal .mbody{overflow-y:auto;padding:8px 12px}
.modal .mhint{color:var(--muted);font-size:12px;margin:6px 4px 12px}
.favrow{display:flex;align-items:center;gap:9px;padding:7px 6px;border-bottom:1px solid var(--border);cursor:pointer}
.favrow:hover{background:var(--panel)}
.favrow .pn{font-size:13px}
.favrow .pc{margin-left:auto;font-size:9px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.favrow .star{font-size:14px}