*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; }
:root{
 
  --bg: #f2f2f2;
  --soft: #e9e9e9;


  --main: #0b0b0b;


  --text: #5a4632;
  --muted: #7a634c;


  --line: #cfcfcf;


  --btn: #ebdddd;
  --btnH: #bba1a1;

  --radius: 18px;
}


body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height: 1.7;
}

.wrap{ width:min(1080px, 92%); margin:0 auto; }

/* Topbar */
.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap:16px;
}
.brand{ font-weight:900; letter-spacing:.3px; }
.links{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); }
.links a{ padding:8px 10px; border-radius:12px; }
.links a:hover{ background:var(--soft); color:var(--text); }
.links a.is-active{ background:var(--btn); color:var(--text); }

/* Head */
.head{
  padding: 70px 0 26px;
}
.head h1{ margin:0; font-size: clamp(32px, 4.3vw, 52px); line-height:1.1; }
.head p{ margin:12px 0 0; color:var(--muted); max-width:70ch; }

/* Blocks */
.block{
  padding: 26px 0 50px;
}
.panel{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.col-4{ grid-column: span 4; }
.col-6{ grid-column: span 6; }
.col-12{ grid-column: span 12; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  min-height:120px;
}
.card h3{ margin:0 0 6px; }
.card p{ margin:0; color:var(--muted); }

/* Buttons */
.btn{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--btn);
  cursor:pointer;
}
.btn:hover{ background:var(--btnH); }

.actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

/* Form */
form{ display:grid; gap:12px; }
label{ display:grid; gap:6px; color:var(--muted); font-size:14px; }
input,textarea{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.hint{ color:var(--muted); margin:0; }

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  color:var(--muted);
}

@media (max-width: 900px){
  .col-4,.col-6{ grid-column: span 12; }
}