:root{
  --bg:#f6f7fb; --card:#fff; --text:#111; --muted:#667085;
  --border:#e6e7ee; --shadow:0 10px 28px rgba(0,0,0,.08);
  --r:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
.wrap{max-width:980px;margin:0 auto;padding:14px}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(246,247,251,.9);backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:42px;height:42px;border-radius:14px;background:#111;color:#fff;
  display:grid;place-items:center;font-weight:800;letter-spacing:.3px;
}
.title{font-weight:800}
.subtitle{font-size:12px;color:var(--muted)}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:14px;
  margin:12px 0;
}
.card.inner{box-shadow:none;margin:0}
h1{margin:0 0 6px 0;font-size:22px}
h2{margin:0;font-size:18px}
h3{margin:0 0 10px 0;font-size:16px}
.muted{color:var(--muted);margin:8px 0}
.label{display:block;font-size:12px;color:var(--muted);margin-top:10px;margin-bottom:6px}

.input{
  width:100%; padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  outline:none;
}
.input:focus{border-color:#c8c9d4; box-shadow:0 0 0 4px rgba(17,17,17,.06)}

.btn{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border:none;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn.ghost{
  background:#fff;color:#111;border:1px solid var(--border);
}
.btn:active{transform:translateY(1px)}
.msg{margin:10px 0 0 0; color:#b42318; font-size:13px}

.tabs{display:flex;gap:8px;margin:10px 0}
.tab{
  flex:1;
  padding:11px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.tab.active{background:#111;color:#fff;border-color:#111}

.row{display:flex;align-items:center}
.row.gap{gap:10px}
.row.between{justify-content:space-between;gap:10px}
.divider{height:1px;background:var(--border);margin:14px 0}
.list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:10px}
.li{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.li .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.li .title{font-weight:800}
.li .meta{color:var(--muted);font-size:12px;margin-top:4px}
.li .actions{display:flex;gap:8px;margin-top:10px}
.smallbtn{
  padding:9px 10px;border-radius:12px;border:1px solid var(--border);
  background:#fff; cursor:pointer; font-weight:700;
}
.smallbtn.danger{border-color:#f2c6c2;color:#b42318}
.smallbtn.dark{background:#111;color:#fff;border-color:#111}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
.span2{grid-column:1}
@media (min-width: 880px){
  .wrap{padding:18px}
  .grid{grid-template-columns:360px 1fr}
  .grid2{grid-template-columns:1fr 1fr}
  .span2{grid-column:1 / -1}
}