/* qubit.lt v3 — Full UX overhaul */

:root,[data-theme="dark"]{
  --bg:#070a0f;--bg2:#0d1117;
  --card-bg:rgba(255,255,255,.05);--card-hover:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.08);--card-glow:rgba(110,168,254,.08);
  --text:#f2f4f8;--text2:rgba(242,244,248,.85);
  --muted:rgba(242,244,248,.6);--muted2:rgba(242,244,248,.4);
  --accent:#6ea8fe;--ok:#34d399;--new-badge:#f59e0b;
  --shadow:0 4px 24px rgba(0,0,0,.4);--shadow-hover:0 8px 40px rgba(0,0,0,.55);
  --r:16px;--r-sm:10px;
  --topbar-bg:rgba(7,11,16,.75);--details-bg:rgba(0,0,0,.25);
  --input-bg:rgba(255,255,255,.06);--input-border:rgba(255,255,255,.10);
  --bookmark-color:#f59e0b;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f5f5f7;--bg2:#fff;
  --card-bg:#fff;--card-hover:#fafafa;
  --card-border:rgba(0,0,0,.08);--card-glow:rgba(99,102,241,.06);
  --text:#1d1d1f;--text2:rgba(29,29,31,.85);
  --muted:rgba(29,29,31,.55);--muted2:rgba(29,29,31,.38);
  --accent:#3b82f6;--ok:#16a34a;--new-badge:#d97706;
  --shadow:0 2px 12px rgba(0,0,0,.07);--shadow-hover:0 6px 24px rgba(0,0,0,.12);
  --topbar-bg:rgba(255,255,255,.82);--details-bg:rgba(0,0,0,.03);
  --input-bg:rgba(0,0,0,.04);--input-border:rgba(0,0,0,.10);
  --bookmark-color:#d97706;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.5;
  transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--card-border);
  transition:background .3s;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:10px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;min-width:0;flex-shrink:1}
.brand-mark{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-title{font-weight:700;font-size:15px;line-height:1.15;white-space:nowrap}
.brand-subtitle{color:var(--muted);font-size:11px;margin-top:1px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Inputs */
.select,.btn,.search-input{
  background:var(--input-bg);border:1px solid var(--input-border);
  color:var(--text);padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.select:focus,.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(110,168,254,.12)}
.btn{font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:rgba(110,168,254,.1)}
.btn:active{transform:translateY(1px)}
.btn-icon{
  background:var(--input-bg);border:1px solid var(--input-border);
  color:var(--text);width:36px;height:36px;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;transition:background .2s;
}
.btn-icon:hover{background:rgba(110,168,254,.1)}

/* Search */
.search-wrap{position:relative;flex:1;min-width:140px;max-width:260px}
.search-input{width:100%;padding-left:30px;padding-right:26px}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;display:none;
}
.search-wrap.has-value .search-clear{display:block}

/* Hero */
.hero{padding:14px 0 4px}
.hero h1{margin:12px 0 4px;font-size:clamp(24px,5vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1.12;
  font-family:'Source Serif 4','Georgia',serif}
.hero p{margin:0;color:var(--muted);font-size:14px}
.meta{margin-top:8px;color:var(--muted2);font-size:12px;display:flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:99px;background:var(--ok);display:inline-block;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.sep{opacity:.4}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:12px;padding:10px 0 20px}

/* Cards */
.card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:rgba(110,168,254,.14)}
.card.is-new::after{
  content:'NEW';position:absolute;top:12px;right:12px;
  background:var(--new-badge);color:#000;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:4px;letter-spacing:.05em;
  animation:badgeIn .4s ease;
}
@keyframes badgeIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

.card-top{display:flex;gap:12px;padding:14px;cursor:pointer;position:relative}

/* Top-right action icons — vertical stack */
.card-icons{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0;
  margin-left:auto;padding-top:0;
}
.card-icon-bookmark{
  background:none;border:none;
  color:var(--muted);cursor:pointer;
  font-size:22px;line-height:1;
  transition:color .2s,transform .15s;
  padding:0;
}
.card-icon-bookmark:hover{color:var(--bookmark-color);transform:scale(1.15)}
.card-icon-bookmark.is-bookmarked{color:var(--bookmark-color)}
.card-icon-read{
  display:flex;align-items:center;gap:4px;
  color:var(--muted);text-decoration:none;
  font-size:11px;font-weight:600;
  transition:color .2s;
  white-space:nowrap;
}
.card-icon-read:hover{color:var(--accent)}
.card-icon-read span{font-size:14px}
.thumb{
  width:60px;height:60px;border-radius:14px;
  background:var(--input-bg);border:1px solid var(--input-border);
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.card:hover .thumb{transform:scale(1.04)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:rgba(255,255,255,.92)}
.ph.openai{background:linear-gradient(135deg,rgba(99,102,241,.85),rgba(14,165,233,.55))}
.ph.google{background:linear-gradient(135deg,rgba(34,197,94,.75),rgba(59,130,246,.55))}
.ph.anthropic{background:linear-gradient(135deg,rgba(245,158,11,.75),rgba(236,72,153,.55))}
.headline{min-width:0;flex:1}
.kicker{display:flex;flex-wrap:wrap;gap:5px;align-items:center;color:var(--muted2);font-size:11px;margin-bottom:4px}
.badge{
  background:rgba(110,168,254,.1);border:1px solid rgba(110,168,254,.16);
  padding:2px 7px;border-radius:6px;
  font-weight:700;font-size:10px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.03em;
}
.title{margin:0;font-weight:700;font-size:19px;line-height:1.18;letter-spacing:-0.01em;
  font-family:'Source Serif 4','Georgia',serif;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  transition:text-decoration-color .4s ease;
}
/* Pastel underline colors per card position */
.card.pastel-0 .title{text-decoration-color:rgba(168,139,250,.5)}
.card.pastel-1 .title{text-decoration-color:rgba(96,165,250,.5)}
.card.pastel-2 .title{text-decoration-color:rgba(52,211,153,.5)}
.card.pastel-3 .title{text-decoration-color:rgba(251,191,36,.5)}
.card.pastel-4 .title{text-decoration-color:rgba(244,114,182,.5)}
.card.pastel-5 .title{text-decoration-color:rgba(248,113,113,.5)}
.card.pastel-6 .title{text-decoration-color:rgba(45,212,191,.5)}
.card.pastel-7 .title{text-decoration-color:rgba(163,230,53,.5)}
/* When expanded: underline fades out (color moved to border) */
.card.is-expanded .title{text-decoration-color:transparent}

/* Card actions */
.card-actions{display:flex;align-items:center;gap:6px;padding:0 14px 10px}

/* Expanded card pastel borders — snake draw animation */
.card.is-expanded{
  border-color:transparent !important;
  position:relative;overflow:visible;
}
.card.is-expanded::before{
  content:'';position:absolute;inset:-2px;
  border-radius:calc(var(--r) + 2px);
  border:2px solid transparent;
  pointer-events:none;z-index:1;
  animation:snakeDraw 3s ease forwards;
}
/* Each pastel color animates the border */
.card.is-expanded.pastel-0::before{animation-name:snake0}
.card.is-expanded.pastel-1::before{animation-name:snake1}
.card.is-expanded.pastel-2::before{animation-name:snake2}
.card.is-expanded.pastel-3::before{animation-name:snake3}
.card.is-expanded.pastel-4::before{animation-name:snake4}
.card.is-expanded.pastel-5::before{animation-name:snake5}
.card.is-expanded.pastel-6::before{animation-name:snake6}
.card.is-expanded.pastel-7::before{animation-name:snake7}

@keyframes snake0{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(168,139,250,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(168,139,250,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(168,139,250,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(168,139,250,.5)}
}
@keyframes snake1{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(96,165,250,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(96,165,250,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(96,165,250,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(96,165,250,.5)}
}
@keyframes snake2{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(52,211,153,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(52,211,153,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(52,211,153,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(52,211,153,.5)}
}
@keyframes snake3{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(251,191,36,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(251,191,36,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(251,191,36,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(251,191,36,.5)}
}
@keyframes snake4{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(244,114,182,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(244,114,182,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(244,114,182,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(244,114,182,.5)}
}
@keyframes snake5{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(248,113,113,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(248,113,113,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(248,113,113,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(248,113,113,.5)}
}
@keyframes snake6{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(45,212,191,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(45,212,191,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(45,212,191,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(45,212,191,.5)}
}
@keyframes snake7{
  0%{clip-path:inset(0 100% 100% 0);border-color:rgba(163,230,53,.5)}
  25%{clip-path:inset(0 0 100% 0);border-color:rgba(163,230,53,.5)}
  50%{clip-path:inset(0 0 0 0);border-color:rgba(163,230,53,.5)}
  100%{clip-path:inset(0 0 0 0);border-color:rgba(163,230,53,.5)}
}

/* Fade-out border after closing — lingers bright then dims slowly */
.card.was-expanded{transition:none}
.card.was-expanded.pastel-0{animation:borderFade0 3s ease forwards}
.card.was-expanded.pastel-1{animation:borderFade1 3s ease forwards}
.card.was-expanded.pastel-2{animation:borderFade2 3s ease forwards}
.card.was-expanded.pastel-3{animation:borderFade3 3s ease forwards}
.card.was-expanded.pastel-4{animation:borderFade4 3s ease forwards}
.card.was-expanded.pastel-5{animation:borderFade5 3s ease forwards}
.card.was-expanded.pastel-6{animation:borderFade6 3s ease forwards}
.card.was-expanded.pastel-7{animation:borderFade7 3s ease forwards}
@keyframes borderFade0{0%,35%{border:2px solid rgba(168,139,250,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade1{0%,35%{border:2px solid rgba(96,165,250,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade2{0%,35%{border:2px solid rgba(52,211,153,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade3{0%,35%{border:2px solid rgba(251,191,36,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade4{0%,35%{border:2px solid rgba(244,114,182,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade5{0%,35%{border:2px solid rgba(248,113,113,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade6{0%,35%{border:2px solid rgba(45,212,191,.7)}100%{border:1px solid var(--card-border)}}
@keyframes borderFade7{0%,35%{border:2px solid rgba(163,230,53,.7)}100%{border:1px solid var(--card-border)}}
/* Light theme overrides for expanded border colors handled by snake animation */
.toggle{
  background:var(--input-bg);border:1px solid var(--input-border);
  color:var(--text);padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;cursor:pointer;flex:1;transition:background .15s;
}
.toggle:hover{background:rgba(110,168,254,.08)}
.toggle strong{font-weight:700}

/* Details */
.details{
  border-top:1px solid var(--card-border);background:var(--details-bg);
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .35s cubic-bezier(.25,.8,.25,1),opacity .25s;
}
.details.is-open{opacity:1}
.details-inner{padding:14px}
.details-inner h3{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
ol.facts{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:16px}
ol.facts li{font-size:15px;font-weight:400;line-height:1.6;color:var(--text2);
  font-family:'Source Serif 4','Georgia',serif;font-style:italic;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.loadingline{color:var(--muted);font-size:13px}
.details-footer{margin-top:10px}
.toggle-hide{width:100%}

/* Footer */
.footer{padding:8px 0 20px;color:var(--muted2);font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--card-border)}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--text);color:var(--bg);
  padding:10px 20px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  opacity:0;transition:transform .35s cubic-bezier(.25,.8,.25,1),opacity .35s;
  z-index:100;pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Portal overlay */
.portal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:12px;
}
.portal-overlay.is-open{opacity:1;pointer-events:auto}

.portal-panel{
  width:100%;max-width:640px;
  height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  background:var(--bg2,var(--bg));
  border:1px solid var(--card-border);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);
  display:flex;flex-direction:column;
  transform:translateY(30px) scale(.97);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
  overflow:hidden;
}
.portal-overlay.is-open .portal-panel{
  transform:translateY(0) scale(1);opacity:1;
}

.portal-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--card-border);
  flex-shrink:0;
  background:var(--card-bg);
}
.portal-title{
  font-size:16px;font-weight:700;letter-spacing:-0.01em;
  color:var(--text);
  font-family:'Source Serif 4','Georgia',serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.portal-source{
  font-size:11px;color:var(--muted);font-weight:600;
  flex-shrink:0;
}
.portal-close{
  background:var(--input-bg);border:1px solid var(--input-border);
  color:var(--muted);
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;font-weight:300;
  flex-shrink:0;
  transition:background .15s,color .15s;
  line-height:1;
}
.portal-close:hover{background:rgba(110,168,254,.12);color:var(--text)}

.portal-scroll{
  flex:1;overflow-y:auto;
  padding:24px 22px 60px;
  -webkit-overflow-scrolling:touch;
}

.portal-para{
  font-size:16px;line-height:1.75;
  color:var(--muted);
  margin:0 0 6px;
  padding:10px 14px;
  border-radius:10px;
  border-left:3px solid transparent;
  font-family:'Source Serif 4','Georgia',serif;
  font-style:italic;
  letter-spacing:0.01em;
  transition:background .4s,border-color .4s,color .4s;
}
.portal-para.is-match{
  border-left-color:var(--accent);
  color:var(--text);
  font-weight:600;
  font-style:normal;
  font-family:'Source Serif 4','Georgia',serif;
}
/* Dark theme highlight */
[data-theme="dark"] .portal-para.is-match{
  background:rgba(110,168,254,.1);
}
/* Light theme highlight */
[data-theme="light"] .portal-para.is-match{
  background:rgba(59,130,246,.08);
  border-left-color:#3b82f6;
}

.portal-loading{
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;
  height:200px;color:var(--muted);font-size:14px;
}
.portal-loading::before{
  content:'';width:24px;height:24px;
  border:2px solid var(--card-border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.portal-fail{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;height:200px;text-align:center;padding:40px;
}
.portal-fail p{color:var(--muted);font-size:15px;margin:0;font-family:'Source Serif 4','Georgia',serif;font-style:italic}
.portal-read-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;border-radius:10px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:14px;font-weight:700;
  transition:opacity .2s,transform .15s;
}
.portal-read-btn:hover{opacity:.85;transform:scale(1.03)}

/* Card entrance animation */
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card{animation:cardIn .3s ease both}
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.05s}
.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.11s}
.card:nth-child(5){animation-delay:.14s}.card:nth-child(6){animation-delay:.17s}

/* Responsive */
@media(max-width:700px){
  .topbar-inner{gap:8px}
  .brand{min-width:0}.brand-title{font-size:13px}
  .controls{width:100%;gap:6px;justify-content:stretch}
  .select,.btn{flex:1;font-size:12px;padding:7px 8px}
  .search-wrap{min-width:100%;max-width:none;order:10}
  .title{font-size:17px}.thumb{width:48px;height:48px;border-radius:12px}
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12)}