/* Web-Pages/assets/style.css */
:root{
  --bg:#0f1115;
  --panel:#171a21;
  --border:#2a2e38;
  --text:#e6e8ec;
  --muted:#9aa3b2;
  --accent:#4f8cff;
  --danger:#ff5d5d;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  padding:1rem 2rem;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:10;
}
.brand{font-weight:700;font-size:1.1rem;}
.brand span{color:var(--accent);}
.topnav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:1.2rem;
  font-size:.92rem;
}
.topnav a:hover, .topnav a.active{color:var(--text);}
.container{max-width:920px;margin:0 auto;padding:2rem;}
.hero h1{font-size:1.6rem;margin-bottom:.5rem;}
.hero p{color:var(--muted);}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem;
  margin-top:1.5rem;
}
.card h2{margin-top:0;font-size:1.15rem;}
.sitemap-list{padding-left:1.1rem;}
.sitemap-list a{color:var(--accent);text-decoration:none;}
.sitemap-list a:hover{text-decoration:underline;}
.hint{color:var(--muted);font-size:.9rem;}
table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.92rem;}
th,td{border:1px solid var(--border);padding:.6rem .7rem;text-align:left;vertical-align:top;}
th{background:#1d212b;}
tr:hover td{background:#1b1f28;}
code{
  background:#1d212b;
  padding:.1rem .35rem;
  border-radius:4px;
  font-size:.88em;
}
pre{
  background:#1d212b;
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem;
  overflow-x:auto;
  font-size:.85rem;
}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0;}
.tab-btn{
  background:#1d212b;
  border:1px solid var(--border);
  color:var(--muted);
  padding:.45rem .8rem;
  border-radius:20px;
  cursor:pointer;
  font-size:.85rem;
}
.tab-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.builder{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;}
#taskInput{
  flex:1;
  min-width:220px;
  background:#0f1115;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.7rem;
  font-family:inherit;
  resize:vertical;
}
#addTaskBtn, #exportBtn, #clearBtn, .redirect-box a{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.7rem 1rem;
  cursor:pointer;
  font-size:.9rem;
}
.danger{background:var(--danger)!important;}
.task-list{margin-top:1rem;padding-left:1.2rem;}
.task-list li{
  background:#1d212b;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .8rem;
  margin-bottom:.5rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  align-items:flex-start;
}
.task-list li button{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:6px;
  padding:.2rem .5rem;
  cursor:pointer;
  font-size:.8rem;
}
.builder-actions{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}
.redirect-box{
  text-align:center;
  padding:3rem 1rem;
}
.site-footer{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  padding:2rem;
  border-top:1px solid var(--border);
  margin-top:2rem;
}
.site-footer a{color:var(--accent);}