:root{
  --bg:#0f1220; --fg:#e6e8f2; --muted:#98a2b3; --card:#171a2b; --accent:#8b5cf6;
  --accent2:#22d3ee; --border:#272b40; --cell:#1b2033;
  --lh:20px;              /* line-height */
  --padY:8px;             /* vertical padding for bubble */
  --cap: calc(var(--lh)*2 + var(--padY)*2 + 2px); /* 2 lines + padding + 1px*2 border */
}*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,var(--bg),#0b0e1a);color:var(--fg);font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{
  min-height:100vh;            /* fill viewport */
  max-width:1100px;
  margin:0 auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.header{display:flex;align-items:center;gap:12px}
.logo{height:28px;width:auto}
h1{font-size:20px;margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,button{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0f1326;color:var(--fg)}
input{min-width:340px;flex:1}
button{cursor:pointer}
button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none}
.muted{color:var(--muted)}

.preview{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#000}
.preview video{display:block;width:100%;max-height:420px}

table{width:100%;border-collapse:collapse}
table a, td.url a { color:#ADD8E6; text-decoration:none }
table a:hover, td.url a:hover { text-decoration:none; opacity:.9 }
th,td{border-bottom:1px solid var(--border);padding:8px 6px;vertical-align:top}
tbody tr{ min-height: var(--cap); }
td{position:relative; vertical-align:top}
td:not(.url) .cell{
  line-height: var(--lh);
  max-height: calc(var(--lh)*2);
  overflow: hidden;
}

/* expanded */
tr.expanded td .cell{max-height:none; overflow:visible}
tr.expanded td.url .bubble{ max-height:none; overflow:auto }
td.url .bubble{
  box-sizing: border-box;
  line-height: var(--lh);
  padding: var(--padY) 10px;
  background: var(--cell);
  border:1px solid var(--border);
  border-radius:8px;
  display:block;
  word-break:break-word; overflow-wrap:anywhere;
  max-height: var(--cap);
  position:relative; cursor:copy;
  overflow: auto;                 /* keep same in both states */
}
td.url .bubble a{ pointer-events:none; color:#ADD8E6; text-decoration:none } /* keep color, disable link */

td.url .bubble::after{
  content:'Copy';
  position:absolute; top:6px; right:8px;
  font-size:12px; color:var(--muted);
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
td.url .bubble:hover::after{ opacity:.85 }
td.url .bubble.copied::after{ content:'Copied'; color:var(--accent2); opacity:1 }

.expand-btn{
  padding:6px 10px; border:1px solid var(--border);
  background:#10152a; border-radius:8px;
  width:96px;               /* fixed width for both labels */
  text-align:center;
}
.expand-btn:hover{filter:brightness(1.1)}
.expand-btn:disabled{ opacity:.5; cursor:default }


.footer{margin-top:auto; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center; padding:12px 0}
.footer.sticky{position:static;bottom:0;background:linear-gradient(180deg,transparent,rgba(15,18,32,.8) 30%, rgba(15,18,32,1));backdrop-filter:saturate(140%) blur(6px);border-top:1px solid var(--border)}
.link{color:var(--accent2);text-decoration:none}