:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#26212c;background:#f5f2f8}
*{box-sizing:border-box}body{margin:0}.top{background:linear-gradient(135deg,#4b216e,#7a3da0);color:#fff;padding:24px max(18px,calc((100% - 1050px)/2));display:flex;justify-content:space-between;gap:20px;align-items:center}
.eyebrow{font-size:.75rem;letter-spacing:.18em;font-weight:800;opacity:.85}.top h1{margin:.2rem 0;font-size:2rem}.top p{margin:0;opacity:.9}
main{max-width:1050px;margin:22px auto;padding:0 16px}.card{background:#fff;border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 3px 18px #3b214710}
h2{margin:0 0 14px;font-size:1.18rem}.grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}label{font-weight:700;font-size:.9rem}
input,select,textarea{width:100%;margin-top:7px;border:1px solid #d7cfdd;border-radius:10px;padding:12px;font:inherit;background:#fff}textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:3px solid #74419a22;border-color:#74419a}.hint{color:#6e6574;margin-top:-5px}
button{border:0;border-radius:10px;padding:11px 15px;font-weight:750;cursor:pointer}.primary{background:#6d348f;color:#fff}.secondary,.output button{background:#eee7f3;color:#54246e}
.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.center{justify-content:center}.head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head h2{margin:0}
.small{padding:8px 11px}.status{margin-top:12px;font-weight:700}.status.error{color:#a22323}.status.ok{color:#27632d}.hidden{display:none}.output textarea{background:#fbf9fc}
.history-item{padding:12px 0;border-top:1px solid #eee}.history-item:first-child{border-top:0}.history-item strong{display:block}
dialog{border:0;border-radius:16px;padding:0;width:min(850px,94vw);box-shadow:0 20px 80px #0005}.dialogbox{padding:20px}dialog::backdrop{background:#23172d99}
footer{text-align:center;color:#766d7b;padding:20px 12px 35px}
@media(max-width:700px){.top{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.card{padding:15px;border-radius:13px}.actions button{flex:1}.output .head button{min-width:110px}}

.vlog-grid{grid-template-columns:2fr 1fr 1fr .7fr .7fr}@media(max-width:900px){.vlog-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.vlog-grid{grid-template-columns:1fr}}

.history-tools{margin:14px 0}.history-tools input{margin:0}
.history-card{display:flex;align-items:center;justify-content:space-between;gap:14px}
.history-main{min-width:0}.history-main span{display:block;color:#766d7b;margin-top:4px}
.history-actions{display:flex;gap:8px;flex-shrink:0}
.danger{background:#f7e4e4;color:#8c2525}
@media(max-width:700px){.history-card{align-items:stretch;flex-direction:column}.history-actions button{flex:1}}

.buttonlink{display:inline-block;text-decoration:none;border-radius:10px;padding:11px 15px;font-weight:750}
.buttonlink.primary{background:#6d348f;color:#fff}.buttonlink.secondary{background:#eee7f3;color:#54246e}
.backlink{display:inline-block;color:#fff;margin-top:8px;text-decoration:none;font-weight:700;opacity:.9}
.dashboard-top .buttonlink.primary{background:#fff;color:#5b2879}.empty{padding:20px 0;color:#766d7b}

.website-output>label{display:block;margin-top:16px}
.copy-field{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.copy-field textarea{margin-top:7px}
.copy-field button{margin-top:7px;background:#eee7f3;color:#54246e;min-width:105px}

@media(max-width:700px){
 .copy-field{grid-template-columns:1fr}
 .copy-field button{width:100%;margin-top:0}
}

.top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top-light{background:#fff;color:#5b2879;text-decoration:none;border-radius:10px;padding:10px 14px;font-weight:750}
.top-danger{background:#fff0f0;color:#9b2727;border-radius:10px;padding:10px 14px;font-weight:750}
@media(max-width:700px){
 .top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .top-actions .top-light,.top-actions .top-danger{text-align:center;width:100%}
 .top-actions .top-danger{grid-column:1/-1}
}

.type-badge{display:inline-block;padding:3px 9px;border-radius:999px;background:#f0e9f4;color:#54246e;font-size:.88rem;font-weight:700}

.index-actions{display:flex;gap:10px;align-items:center}
.index-actions .top-light{min-width:145px;text-align:center}
@media(max-width:700px){
 .index-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .index-actions .top-light{min-width:0;width:100%}
}

/* Compact overzicht v1.0.10 */
.history-item.history-card{padding:10px 0;min-height:0}
.clickable-row{cursor:pointer;border-radius:8px;transition:background .15s ease}
.clickable-row:hover{background:#faf7fc}
.clickable-row:focus{outline:2px solid #74419a;outline-offset:2px}
.history-main strong{font-size:1rem;line-height:1.25}
.compact-meta{display:block;margin-top:4px!important;color:#766d7b;font-size:.92rem}
.history-actions{align-items:center}
.type-badge{background:transparent!important;padding:0!important;border-radius:0!important;color:inherit!important;font-weight:inherit!important}
@media(max-width:700px){
 .history-item.history-card{padding:9px 0;flex-direction:row;align-items:center}
 .history-main{flex:1}
 .history-actions{width:auto}
 .history-actions button{width:auto;flex:none}
}

.compact-meta .type-badge,.type-badge{background:none!important;box-shadow:none!important}

.overview-tools{display:grid;grid-template-columns:1fr 160px;gap:10px}
.overview-tools input,.overview-tools select{margin:0}
@media(max-width:700px){.overview-tools{grid-template-columns:1fr}.overview-tools select{width:100%}}

.output textarea{font-weight:400!important}
.notes-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
#dictateBtn{min-width:145px}
.dictate-status{font-size:.9rem;color:#766d7b}
@media(max-width:700px){.notes-actions{align-items:stretch;flex-direction:column}#dictateBtn{width:100%}}

#dictateBtn.recording{background:#9b2727;color:#fff}
.notes-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.notes-actions button{width:100%}
.dictate-status{display:block;margin-top:9px;min-height:1.25em;font-size:.9rem;color:#766d7b}
@media(max-width:700px){
 body{background:#f6f3f8}
 .top{padding:18px 18px 16px;gap:14px}
 .eyebrow{font-size:.68rem;letter-spacing:.16em}
 .top h1{font-size:1.65rem;margin:.12rem 0}
 .top p{font-size:.96rem;line-height:1.35}
 .top-actions{display:flex!important;gap:8px;width:100%}
 .top-actions .top-light,.top-actions .top-danger{width:auto;flex:1;padding:10px 8px;font-size:.92rem}
 main{margin:14px auto;padding:0 10px}
 .card{padding:16px 14px;margin-bottom:12px;border-radius:15px}
 h2{font-size:1.08rem;margin-bottom:12px}
 label{font-size:.88rem}
 input,select,textarea{padding:11px 12px;border-radius:11px;margin-top:6px}
 .vlog-grid{gap:10px}
 .notes-actions{grid-template-columns:1fr 1fr;gap:8px}
 #dictateBtn{min-width:0}
 .hint{font-size:.9rem;line-height:1.4}
}


/* v1.0.28 - uniforme knoppen: desktop naast elkaar, mobiel onder elkaar */
button,.buttonlink{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
}
.actions,.top-actions,.index-actions,.notes-actions,.history-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
}
.actions button,.actions .buttonlink,
.top-actions button,.top-actions .buttonlink,
.index-actions button,.index-actions .buttonlink,
.notes-actions button,.notes-actions .buttonlink,
.history-actions button,.history-actions .buttonlink{
  width:auto;
}
.output .head{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.output .head h2{flex:1}
.output .head button{width:auto}
.copy-field button{width:auto}

@media(max-width:700px){
  .actions,.top-actions,.index-actions,.notes-actions,.history-actions{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    gap:9px!important;
  }
  .actions button,.actions .buttonlink,
  .top-actions button,.top-actions .buttonlink,
  .index-actions button,.index-actions .buttonlink,
  .notes-actions button,.notes-actions .buttonlink,
  .history-actions button,.history-actions .buttonlink{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
  }
  .top-actions .top-danger{grid-column:auto!important}
  .output .head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .output .head h2{width:100%;margin-bottom:0}
  .output .head button{width:100%!important;min-width:0!important}
  .copy-field{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .copy-field button{
    width:100%!important;
    min-width:0!important;
    margin-top:0!important;
  }
  .card>.head{
    flex-direction:column;
    align-items:stretch;
  }
  .card>.head button{
    width:100%;
  }
}

/* v1.0.28 uniforme knopstijl */
button,.buttonlink,
.top-light,.top-danger,
.primary,.secondary,.danger{
  background:#6f3494!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font-weight:700!important;
}
button:hover,.buttonlink:hover,
.top-light:hover,.top-danger:hover,
.primary:hover,.secondary:hover,.danger:hover{
  background:#5c287e!important;
  color:#fff!important;
}
button:disabled{opacity:.55!important;cursor:not-allowed}
#dictateBtn.recording{background:#9b2727!important}

/* v1.0.28 - knoppen in de paarse bovenbalk */
.top .top-actions button,
.top .top-actions .buttonlink,
.top .index-actions button,
.top .index-actions .buttonlink,
.top .top-light,
.top .top-danger{
  background:#fff!important;
  color:#6f3494!important;
  border:0!important;
}
.top .top-actions button:hover,
.top .top-actions .buttonlink:hover,
.top .index-actions button:hover,
.top .index-actions .buttonlink:hover,
.top .top-light:hover,
.top .top-danger:hover{
  background:#f4eef8!important;
  color:#5c287e!important;
}

.private-notes-block{margin-top:22px;padding-top:18px;border-top:1px solid #e8e0ed}
.private-notes-block>label{display:block;font-weight:700}
.private-notes-block>button{margin-top:10px}
@media(max-width:700px){
 .private-notes-block>button{width:100%!important}
}

/* v1.0.28 - Privé notities als eigen onderdeel */
.private-notes-card textarea{width:100%}
#privateDictateBtn.recording{background:#9b2727!important}

/* v1.0.28 - notitieknoppen even groot */
.notes-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,145px))!important;
  gap:10px!important;
  justify-content:start!important;
}
.notes-actions button{
  width:145px!important;
  min-width:145px!important;
}
@media(max-width:700px){
  .notes-actions{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
  }
  .notes-actions button{
    width:100%!important;
    min-width:0!important;
  }
}

/* v1.0.28 - mobiel overzicht/beheer netjes leesbaar */
@media(max-width:700px){
  .history-item,
  .history-row,
  .overview-item,
  .trash-item{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:14px 0!important;
    overflow:hidden!important;
  }

  .history-item>div,
  .history-row>div,
  .overview-item>div,
  .trash-item>div{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .history-title,
  .history-item strong,
  .history-row strong,
  .overview-item strong,
  .trash-item strong{
    display:block!important;
    width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.35!important;
  }

  .history-meta,
  .history-item small,
  .history-row small,
  .overview-item small,
  .trash-item small{
    display:block!important;
    width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.45!important;
    margin-top:5px!important;
  }

  .history-actions,
  .history-item .actions,
  .history-row .actions,
  .overview-item .actions,
  .trash-item .actions{
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:12px!important;
    gap:8px!important;
  }

  .history-actions button,
  .history-actions .buttonlink,
  .history-item .actions button,
  .history-item .actions .buttonlink,
  .history-row .actions button,
  .history-row .actions .buttonlink,
  .overview-item .actions button,
  .overview-item .actions .buttonlink,
  .trash-item .actions button,
  .trash-item .actions .buttonlink{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
}

/* v1.0.28 - uniforme knopstijl */
button,.buttonlink,
.primary,.secondary,.danger,
.top-light,.top-danger{
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.2!important;
  min-height:44px!important;
  padding:11px 16px!important;
  border-radius:11px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  text-decoration:none!important;
}
/* gewone knoppen */
button,.buttonlink,.primary,.secondary,.danger{
  background:#6f3494!important;
  color:#fff!important;
  border:0!important;
}
/* knoppen in de paarse bovenbalk */
.top .top-actions button,
.top .top-actions .buttonlink,
.top .index-actions button,
.top .index-actions .buttonlink,
.top .top-light,
.top .top-danger{
  background:#fff!important;
  color:#6f3494!important;
  border:0!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:700!important;
  min-height:44px!important;
  padding:11px 16px!important;
  border-radius:11px!important;
}
.top .top-actions button:hover,
.top .top-actions .buttonlink:hover,
.top .index-actions button:hover,
.top .index-actions .buttonlink:hover,
.top .top-light:hover,
.top .top-danger:hover{
  background:#f4eef8!important;
  color:#5c287e!important;
}
@media(max-width:700px){
  button,.buttonlink,
  .primary,.secondary,.danger,
  .top-light,.top-danger{
    font-size:14px!important;
    min-height:46px!important;
  }
}

/* v1.0.28 - kopieerknoppen altijd onder het bijbehorende veld */
.copy-field{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
}
.copy-field textarea,
.copy-field input{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.copy-field button{
  align-self:flex-start!important;
  width:auto!important;
  min-width:145px!important;
  margin:0!important;
}
/* Mobiel: knop onder veld en volledige breedte */
@media(max-width:700px){
  .copy-field button{
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
  }
}

/* v1.0.28 - social kopieerknoppen onder het tekstveld */
.social-copy-field{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
}
.social-copy-field textarea{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.social-copy-field button{
  align-self:flex-start!important;
  width:auto!important;
  min-width:145px!important;
  margin:0!important;
}
@media(max-width:700px){
  .social-copy-field button{
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
  }
}