/* ============================================================
   HEADER
   ============================================================ */
.header{
  flex:0 0 auto;
  position:relative;
  z-index:var(--z-header);
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1000px;
  margin:0 auto;
  padding:0 var(--s-5);
  height:56px;
  display:flex;
  align-items:center;
  gap:var(--s-6);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-weight:700;font-size:15px;letter-spacing:-.01em;
  color:var(--text);
  flex:0 0 auto;
}
.brand:hover{text-decoration:none;color:var(--text)}
.brand svg{width:20px;height:20px;color:var(--accent)}

.nav{display:flex;align-items:center;gap:var(--s-1);flex:1 1 auto;min-width:0}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  font-size:14px;color:var(--text-2);
  border-radius:var(--r-sm);
  transition:color var(--t-1), background var(--t-1);
  white-space:nowrap;
}
.nav-link:hover{color:var(--text);background:var(--hover);text-decoration:none}
.nav-link.active{color:var(--text);font-weight:600}
.nav-link svg{width:15px;height:15px;display:block;flex:0 0 auto}

.actions{display:flex;align-items:center;gap:var(--s-1);flex:0 0 auto}
.icon-btn{
  height:34px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:12px;font-weight:600;letter-spacing:.03em;
  transition:color var(--t-1), background var(--t-1);
}
.icon-btn:hover{color:var(--text);background:var(--hover)}
.icon-btn svg{width:16px;height:16px;display:block;flex:0 0 auto}

/* ============================================================
   MAIN
   ============================================================ */
.main{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:var(--s-7) var(--s-5) var(--s-8);
}

.page-title{
  font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  margin:0 0 var(--s-2);
  display:inline-flex;align-items:center;gap:10px;
  overflow-wrap:anywhere;
}
.page-title svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.page-sub{
  font-size:15px;color:var(--text-2);line-height:1.5;
  margin:0 0 var(--s-7);
  max-width:640px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  margin-top:var(--s-7);
  padding:var(--s-6) 0 var(--s-2);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;
  font-size:13px;color:var(--text-3);
}
.site-footer .footer-left{display:inline-flex;align-items:center;gap:var(--s-2)}
.site-footer .footer-logo{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.site-footer a{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.site-footer a svg{width:14px;height:14px;flex:0 0 auto}
.site-footer a:hover{color:var(--accent)}