:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #888888);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn-bg: var(--tg-theme-button-color, #2481cc);
  --btn-fg: var(--tg-theme-button-text-color, #ffffff);
  --sec-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --border: rgba(127,127,127,0.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; }

#bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  background: var(--sec-bg);
}
#bar button {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  width: 34px; height: 34px; font-size: 18px; line-height: 1;
  cursor: pointer;
}
#bar button:active { transform: scale(0.96); }
#urlform { flex: 1; display: flex; }
#url {
  flex: 1; height: 34px; padding: 0 10px; min-width: 0;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 14px;
}

main { position: relative; flex: 1; min-height: 0; }
#view {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: var(--bg);
}

#panel {
  position: absolute; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.tabs {
  display: flex; gap: 4px; padding: 8px;
  border-bottom: 1px solid var(--border); background: var(--sec-bg);
}
.tabs button {
  flex: 1; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--fg);
  cursor: pointer;
}
.tabs button.active { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.tab { padding: 8px; overflow: auto; }
.row { display: flex; gap: 6px; padding: 4px 0 8px; }
.row button {
  height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer;
}

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  padding: 8px 6px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.list li .title { font-weight: 600; }
.list li .url { color: var(--hint); font-size: 12px; word-break: break-all; }
.list li .meta { flex: 1; min-width: 0; cursor: pointer; }
.list li .actions button { background: transparent; border: 1px solid var(--border); border-radius: 6px; height: 28px; padding: 0 8px; color: var(--fg); cursor: pointer; }

.hint { color: var(--hint); font-size: 12px; }