/* theme variables */
.theme-dark {
  --bg:#0b0f14;
  --panel:#10161b;
  --muted:#7a8b98;
  --text:#e6edf3;
  --accent:#0F766E;
  --link:#93c5fd;
  --border:#1f2937;
  --btn-bg:#0b1318;
  --btn-border:#243241;
  --btn-text:#e6edf3;
  --input-bg:#0b1318;
  --input-border:#243241;
  --input-text:#e6edf3;
}

.theme-light {
  --bg:#F9FAFB;
  --panel:#ffffff;
  --muted:#6b7280;
  --text:#1F2937;
  --accent:#0F766E;
  --link:#1E3A8A;
  --border:#d1d5db;
  --btn-bg:#ffffff;
  --btn-border:#d1d5db;
  --btn-text:#1F2937;
  --input-bg:#ffffff;
  --input-border:#d1d5db;
  --input-text:#1F2937;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
h1{font-size:1.6rem;margin:0 0 8px}
h2{font-size:1.2rem;margin:18px 0 10px}
h3{font-size:1rem;margin:14px 0 8px;color:var(--muted)}
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:24px;
}
.hero{
  margin-bottom:1.5rem;
}
.hero .lead{
  font-size:1.05rem;
  color:var(--muted);
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  cursor:pointer;
  text-decoration:none;
}
.btn[aria-pressed="true"] {
  background:rgba(15,118,110,0.15);
  border-color:var(--accent);
  color:var(--accent);
}
.btn.is-recording {
  animation:pulse 1.6s infinite;
}

@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(15,118,110,0.35); }
  70% { box-shadow:0 0 0 12px rgba(15,118,110,0); }
  100% { box-shadow:0 0 0 0 rgba(15,118,110,0); }
}
.btn.primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
/* layout helpers */
.main-nav{display:flex;gap:1rem;margin-bottom:1rem}
footer{margin-top:2rem}
.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.my-1{margin:1rem 0}
.hidden{display:none}
.assist-text{
  font-size:.875rem;
  color:var(--muted);
  margin:0;
}
.assist-text[data-state="error"]{
  color:#dc2626;
}
.assist-text[data-state="info"]{
  color:var(--muted);
}
textarea{
  width:100%;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
  border-radius:10px;
  padding:10px;
}
select,input{width:100%;background:var(--input-bg);color:var(--input-text);border:1px solid var(--input-border);border-radius:10px;padding:10px}
.card form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.share-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.share-buttons span{margin-right:8px}

.trust-badges{
  display:grid;
  gap:16px;
  margin:1.5rem 0;
}
.trust-badge{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 20px rgba(15,23,42,0.15);
}
.trust-badge img{
  width:64px;
  height:64px;
  border-radius:12px;
  background:rgba(15,118,110,0.08);
  padding:8px;
}
.trust-badge__body h3{
  margin:0;
  font-size:1rem;
}
.trust-badge__body p{
  margin:.35rem 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.input-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:.5rem;
}
.input-toolbar .btn{
  flex:1 1 calc(50% - 8px);
  justify-content:center;
}
.share-fallback{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:.5rem;
  font-size:.9rem;
}
.share-fallback span{
  color:var(--muted);
}

.pwa-install-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,0.35);
  z-index:1000;
}
.pwa-install-banner__body{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  flex-wrap:wrap;
  align-items:center;
}
.pwa-install-banner__text{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:.9rem;
}
.pwa-install-banner__actions{
  display:flex;
  gap:8px;
}
.pwa-install-banner--loading{
  opacity:.8;
}
@media (min-width:768px){
  .pwa-install-banner{left:auto;right:24px;max-width:360px;}
  .pwa-install-banner__body{flex-direction:column;align-items:flex-start;}
  .pwa-install-banner__actions{width:100%;}
  .pwa-install-banner__actions .btn{flex:1;justify-content:center;}
  .trust-badges{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.tool-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:stretch;
}
@media (min-width:768px){
  .tool-grid{grid-template-columns:repeat(3,1fr)}
}
.tool-grid .card{
  display:flex;
  flex-direction:column;
}

.tutorial-grid{
  display:grid;
  gap:24px;
}
.tutorial-card video{
  width:100%;
  border-radius:12px;
  margin-top:12px;
  background:#000;
}
.tutorial-card .muted{
  margin-bottom:.5rem;
}

a{color:var(--link)}
.site-footer a{color:#fff}
.site-footer a:visited{color:#fff}

.category-hint{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,118,110,0.1);
  color:var(--accent);
  font-size:.85rem;
}
.badge.active{
  background:var(--accent);
  color:#fff;
}
.tag-hint{
  font-size:.85rem;
  color:var(--muted);
}
.tag-hint strong{color:var(--accent)}

.review-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .review-grid{grid-template-columns:1fr 1fr}
}
.sortable-list{
  list-style:none;
  padding:0;
  margin:0;
  border:1px dashed var(--border);
  min-height:120px;
  border-radius:12px;
}
.sortable-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  cursor:grab;
}
.sortable-list li:last-child{border-bottom:none}
.sortable-list button{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.review-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.export-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}

@media (min-width:720px){
  .export-grid{grid-template-columns:repeat(2,1fr)}
}

.export-grid form{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(15,118,110,0.05);
}

.export-grid .btn{
  justify-content:center;
  font-weight:600;
}

.export-grid .muted.small{
  font-size:.85rem;
  margin:0;
}