/* The working part of the site: the write panel and the live book feed. */

.app { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* ---- write panel */
.panel { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; background: #0D0D10; padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.tab {
  padding: 7px 14px; border-radius: 7px; border: 0; background: transparent; color: var(--ash);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.18s, color 0.18s;
}
.tab.on { background: var(--panel-2); color: var(--cream); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.tab.on.burn { color: var(--fire); }
.panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.token-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; min-height: 18px; }
.token-line .sym { font-family: var(--mono); color: var(--cream); }
.token-line .bal { font-family: var(--mono); color: var(--ash); }
.token-line .bal b { color: var(--cream); font-weight: 500; cursor: pointer; border-bottom: 1px dashed var(--line-2); }

.durations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.dur {
  padding: 9px 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #0D0D10;
  font-family: var(--mono); font-size: 12px; cursor: pointer; text-align: center; color: var(--ash);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.dur:hover { color: var(--cream); border-color: var(--ash-2); }
.dur.on { border-color: var(--brand); color: var(--cream); background: rgba(157,51,30,0.22); }

.note-count { font-family: var(--mono); font-size: 11px; color: var(--ash-2); text-align: right; }
.note-count.over { color: var(--brand-text); }

.preview {
  padding: 13px 14px; border: 1px dashed var(--line-2); border-radius: var(--r);
  font-family: var(--mono); font-size: 12.5px; color: var(--ash); line-height: 1.7;
}
.preview b { color: var(--cream); font-weight: 500; }
.preview .em { color: var(--brand-text); }

.status { font-family: var(--mono); font-size: 12.5px; min-height: 17px; color: var(--ash); }
.status.bad { color: #FF7A55; }
.status.good { color: var(--spark); }
.status a { color: var(--brand-text); border-bottom: 1px solid rgba(196,70,42,0.45); }

.steps-line { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ash-2); }
.steps-line .s { display: flex; align-items: center; gap: 6px; }
.steps-line .s.on { color: var(--cream); }
.steps-line .s.done { color: var(--brand-text); }

/* ---- book feed */
.feed { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 720px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.feed-list { overflow-y: auto; }
.feed-empty { padding: 44px 18px; text-align: center; color: var(--ash-2); font-size: 14px; }

.page-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background 0.2s;
}
.page-row:hover { background: rgba(255,255,255,0.015); }
.page-row:last-child { border-bottom: 0; }
.page-row .badge {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; border: 1px solid var(--line-2);
}
.page-row .badge.lock { color: var(--steel); background: rgba(201,206,214,0.06); border-color: rgba(201,206,214,0.2); }
.page-row .badge.burn { color: var(--fire); background: rgba(255,138,61,0.08); border-color: rgba(255,138,61,0.28); }
.page-row .badge.open { color: var(--ash-2); }
.page-row .who { font-family: var(--mono); font-size: 13px; color: var(--cream); }
.page-row .meta { font-size: 12px; color: var(--ash-2); margin-top: 3px; }
.page-row .note { font-size: 13px; color: var(--ash); margin-top: 4px; font-style: italic; }
.page-row .right { text-align: right; }
.page-row .amt { font-family: var(--mono); font-size: 13.5px; color: var(--cream); }
.page-row .cd { font-family: var(--mono); font-size: 12px; color: var(--fire); margin-top: 3px; }
.page-row .cd.done { color: var(--ash-2); }
.page-row .id { font-family: var(--mono); font-size: 11px; color: var(--ash-2); }

/* ---- your pages list */
.mine-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: center; }
.mine-row:last-child { border-bottom: 0; }
.mine-actions { display: flex; gap: 7px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 12px 16px; font-size: 13.5px; z-index: 80; opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none;
  max-width: min(92vw, 460px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: #8E2B14; }

@media (max-width: 1000px) { .app { grid-template-columns: 1fr; } .feed { max-height: 560px; } }
@media (max-width: 520px) { .durations { grid-template-columns: repeat(3, 1fr); } }