/* DorkLab — mobile-first, accessible */
:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.14);
  --accent: #7c5cff;
  --accent2:#00d4ff;
  --good:#24d18d;
  --warn:#ffb020;
  --bad:#ff4d6d;

  --r: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 10px 28px rgba(0,0,0,.25);
  --pad: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

:root[data-theme="light"]{
  --bg:#f6f7fb;
  --panel: rgba(10,20,50,.06);
  --panel2: rgba(10,20,50,.09);
  --text: rgba(10,20,30,.92);
  --muted: rgba(10,20,30,.66);
  --line: rgba(10,20,50,.18);
  --shadow: 0 18px 50px rgba(20,40,80,.14);
  --shadow2: 0 10px 28px rgba(20,40,80,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(900px 500px at 110% 15%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(900px 600px at 15% 120%, rgba(36,209,141,.14), transparent 60%),
    var(--bg);
  color:var(--text);
}

.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  background:var(--panel2); padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); z-index:9999;
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.0));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand{display:flex; gap:10px; align-items:center}
.logo{
  border-radius: 14px;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255,255,255,.14);
}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted)}

.backhome{display:inline-block; margin-top:2px; font-size:12px; color:var(--muted); text-decoration:none}
.backhome:hover{text-decoration:underline}

.top-actions{display:flex; gap:8px; align-items:center}

.buildtag{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:6px 10px;
  border-radius:999px;
  box-shadow: var(--shadow2);
  user-select:none;
}
:root[data-theme="light"] .buildtag{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
}

.iconbtn{
  border:1px solid var(--line);
  background: var(--panel);
  color:var(--text);
  border-radius: 12px;
  padding:10px 12px;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.iconbtn:hover{background:var(--panel2)}
.iconbtn:active{transform: translateY(1px)}
.i{font-weight:800}

.tabs{
  position:sticky; top:62px; z-index:49;
  display:flex; gap:6px; overflow:auto;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(14px);
}
.tab{
  border:1px solid var(--line);
  background: var(--panel);
  color:var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  white-space: nowrap;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.tab.active{
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(0,212,255,.16));
  border-color: rgba(124,92,255,.55);
}
.tab:focus{outline:2px solid rgba(124,92,255,.55); outline-offset:2px}

.main{padding: 16px; max-width: 1200px; margin:0 auto}
.panel{display:none}
.panel.active{display:block}

.grid2{display:grid; gap:14px}
@media (min-width: 980px){
  .grid2{grid-template-columns: 1.1fr .9fr}
}

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card.sub{background: rgba(255,255,255,.04)}
.card-h{padding: 16px 16px 10px}
.card-h h2{margin:0 0 6px; font-size:18px}
.card-h p{margin:0}
.subh{
  padding: 14px 16px 10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.subh h3{margin:0; font-size:14px}
.subactions{display:flex; gap:8px; flex-wrap:wrap}

.form{padding: 0 16px 18px}

/* add breathing room between rows and walls */
.form .row{margin-top: 10px}
.lbl{display:block; font-weight:700; font-size:13px; margin: 10px 0 6px}
.inp,.ta{
  width:100%;
  background: rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  outline:none;
}
.ta{resize: vertical}
.inp:focus,.ta:focus{border-color: rgba(124,92,255,.55); box-shadow: 0 0 0 3px rgba(124,92,255,.18)}
.row{display:flex; gap:10px; align-items:end; flex-wrap:wrap}
.row.right{justify-content:flex-end; align-items:center}
.row > *{flex:1 1 220px}

.btn{
  border:1px solid rgba(124,92,255,.55);
  background: linear-gradient(135deg, rgba(124,92,255,.45), rgba(0,212,255,.2));
  color:var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.btn:hover{filter: brightness(1.06)}
.btn:active{transform: translateY(1px)}
.btn.ghost{
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  font-weight:700;
}
.btn.tiny{padding: 8px 10px; border-radius:10px; font-size:12px}

.muted{color:var(--muted)}
.small{font-size:12px}

.engine-row{padding: 0 16px 16px; display:flex; gap:10px; align-items:end; flex-wrap:wrap}
.engine-row > *{flex: 1 1 260px}

.list{padding: 0 16px 16px}
.item{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.06);
  padding: 12px 0;
}
.item:first-child{border-top:none}
.item .meta{min-width:0}
.item .title{font-weight:800}
.item .desc{font-size:12px; color:var(--muted); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.pill:hover{background: rgba(255,255,255,.08)}
.pill.on{border-color: rgba(36,209,141,.55); background: rgba(36,209,141,.12)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

.tplgrid{
  display:grid;
  gap:12px;
  padding: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .tplgrid{grid-template-columns: 1fr 1fr}
}
.tpl{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: var(--shadow2);
}
.tpl h4{margin:0 0 6px}
.tpl p{margin:0 0 10px; font-size:12px; color:var(--muted)}
.tpl code{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 10px 10px;
  border-radius: 12px;
}
.tpl .row{margin-top: 10px}
.tpl .tagbar{display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0}
.tag{
  font-size:11px; font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.tag.ai{border-color: rgba(0,212,255,.35)}
.tag.osint{border-color: rgba(124,92,255,.35)}
.tag.doc{border-color: rgba(255,176,32,.35)}
.tag.social{border-color: rgba(36,209,141,.35)}
.tag.tech{border-color: rgba(255,77,109,.35)}

.ops{padding: 0 16px 16px}
.op{
  border-top:1px solid rgba(255,255,255,.06);
  padding: 12px 0;
}
.op:first-child{border-top:none}
.op .k{font-weight:900}
.op .ex{font-size:12px; color:var(--muted); margin-top:6px}
.op code{display:inline-block; margin-top:8px; padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18);
}

.callouts{padding: 0 16px 16px; display:grid; gap:12px}
.callout{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.callout h3{margin:0 0 6px; font-size:14px}
.callout p{margin:0; font-size:12px; color:var(--muted)}
.callout.warn{border-color: rgba(255,176,32,.25); background: rgba(255,176,32,.08)}

.ul{margin: 10px 0 0; padding-left:30px; padding-right:16px; color:var(--muted); font-size:13px}

/* Ensure lists inside sub-cards aren't flush to the left */
.card.sub .ul{margin: 0; padding: 0 16px 16px 44px;}
kbd{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding:2px 6px;
  border-radius:8px;
  font-weight:900;
  color:var(--text);
}

.dlg::backdrop{background: rgba(0,0,0,.55)}
.dlg{border:none; padding:0; background: transparent}
.dlgbox{
  width:min(720px, calc(100vw - 24px));
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(20,25,40,.92);
  color:var(--text);
  box-shadow: var(--shadow);
  padding: 16px;
}
:root[data-theme="light"] .dlgbox{background: rgba(245,246,252,.96); color: var(--text)}
.chk{display:flex; gap:10px; align-items:flex-start; margin: 12px 0}
.chk input{transform: translateY(3px)}
.filebtn{position:relative; overflow:hidden}
.filebtn input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

.toast{
  position: fixed;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  max-width: min(820px, calc(100vw - 28px));
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-2px)}

/* ------------------------------
   V3 UI/UX fixes + readability
   - Fixed background
   - Dark-mode select readability
   - Better padding in subcards
   - Template code visibility
--------------------------------*/

/* Fixed background (more reliable than background-attachment on body)
   Note: iOS Safari may ignore background-attachment:fixed; this approach uses a fixed pseudo layer. */
body{ background: transparent !important; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(86,200,255,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,86,210,.16), transparent 55%),
    radial-gradient(900px 700px at 60% 85%, rgba(120,255,190,.14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  transform: translateZ(0);
}

/* Inputs/Selects: improve contrast in dark/light */
:root:not([data-theme="light"]) .inp,
:root:not([data-theme="light"]) .ta{
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.14);
}
:root[data-theme="light"] .inp,
:root[data-theme="light"] .ta{
  background: rgba(255,255,255,.88);
  border-color: rgba(0,0,0,.12);
}
select.inp{ color: var(--text); }
select.inp option{ background: #0b1020; color: rgba(255,255,255,.92); }
:root[data-theme="light"] select.inp option{ background: #ffffff; color: #111111; }

/* Sub-cards paragraphs were flush to edges */
.card.sub > p{ padding: 0 16px 16px; margin: 0; }
.card.sub > .row{ padding: 0 16px 16px; }

/* Row controls: don't stretch buttons too aggressively */
.row.controls > .btn{ flex: 0 0 auto; }
.row.controls > input,
.row.controls > select{
  flex: 1 1 240px;
}

/* Templates: show full queries (wrap + scroll) */
.tpl code{
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

/* Details blocks inside cards */
.details{padding: 0 16px 16px}
.details > summary{
  cursor:pointer;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  font-weight: 800;
  list-style: none;
}
.details > summary::-webkit-details-marker{display:none}
.details[open] > summary{margin-bottom: 10px}

/* Workflows & journal */
.wfinputs{margin-top: 10px}
.wfinputs .row > *{flex: 1 1 200px}
.wfsteps .item .desc{white-space: normal; overflow: visible; text-overflow: clip}
.wfsteps .item .title{font-size: 13px}
.wfsteps .item code{font-size: 12px}

/* Journal list readability */
#journalList .item .desc{white-space: normal; overflow: visible; text-overflow: clip}


/* Templates tools padding wrapper */
.form.tpltools{ padding-top: 12px; }

/* Reduce horizontal overflow risks */
code, pre{ word-break: break-word; }


/* Tag accents */
.tag.qc{border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.08);} 
.tag.qcpro{border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.12);} 



/* ------------------------------
   QC Pro v2-A UI additions
   - Template filter bar (Pack / Niveau / Source / Type)
   - Extra spacing in AI + Workspace
--------------------------------*/

/* Template filters: keep controls from touching edges */
.form.tpltools{ padding-bottom: 10px; }
.form.tpltools .row.controls{ margin-top: 8px; }
.form.tpltools .row.controls > .btn{ margin-left: 2px; }

/* AI panel: align rows better & add breathing room */
#panel-ai .form{ padding-top: 6px; }
#panel-ai .row{ align-items: center; }
#panel-ai #aiEngines{ padding-top: 6px; }

/* Workspace: better spacing for sub sections */
#panel-workspace .card.sub .subh{ padding-bottom: 8px; }
#panel-workspace .card.sub .row{ padding-left: 16px; padding-right: 16px; padding-bottom: 14px; }
#panel-workspace .card.sub p{ padding-left: 16px; padding-right: 16px; }

/* Buttons: avoid feeling glued to walls in tight containers */
.card .row{ padding-left: 2px; padding-right: 2px; }