.site-header,.site-footer{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.site-footer{border-top:1px solid var(--border);border-bottom:0}

.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:var(--shadow)}

/* Navigation section */
.nav-section{display:flex;align-items:center;gap:var(--gap)}
.nav-links{display:flex;gap:12px;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:12px;color:var(--muted);transition:all 0.2s ease}
.nav-links a.active,.nav-links a:hover{color:white;background:var(--brand);border-color:var(--brand)}
.nav-controls{display:flex;align-items:center;gap:8px}

/* Mobile menu button */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  width:40px;
  height:40px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
  transition:background-color 0.2s ease;
}
.mobile-menu-btn:hover{background:var(--surface-2)}

.hamburger-line{
  width:24px;
  height:3px;
  background:var(--text);
  margin:3px 0;
  transition:0.3s;
  border-radius:2px;
}

/* Mobile responsive styles */
@media (max-width:768px){
  .mobile-menu-btn{display:flex}
  
  .site-header{position:relative}
  
  .nav-section{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 24px;
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden;
    transition:all 0.3s ease;
    z-index:1000;
  }
  
  .nav-section.mobile-open{
    opacity:1;
    visibility:visible;
    max-height:400px;
  }
  
  .nav-links{
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }
  
  .nav-links a{
    padding:12px 16px;
    text-align:left;
    border-radius:8px;
  }
  
  .nav-controls{
    justify-content:center;
    padding-top:12px;
    border-top:1px solid var(--border);
  }
  
  /* Hamburger animation when open */
  .mobile-menu-btn.active .hamburger-line:nth-child(1){
    transform:rotate(-45deg) translate(-5px,6px);
  }
  .mobile-menu-btn.active .hamburger-line:nth-child(2){
    opacity:0;
  }
  .mobile-menu-btn.active .hamburger-line:nth-child(3){
    transform:rotate(45deg) translate(-5px,-6px);
  }
}

/* Text Controls */
.text-controls{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.control-group{
  display:flex;
  align-items:center;
  gap:6px;
}

.control-label{
  font-size:12px;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}

.control-select{
  min-width:90px;
  height:32px;
  padding:4px 8px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:6px;
  font-size:12px;
  color:var(--text);
  cursor:pointer;
  transition:all 0.2s ease;
}

.control-select:hover{
  border-color:var(--brand);
}

.control-select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(11, 105, 255, 0.1);
}

/* Font Classes */
.font-system{font-family:var(--font-ui) !important;}
.font-mono{font-family:var(--font-mono) !important;}
.font-serif{font-family:Georgia,serif !important;}
.font-sans{font-family:Arial,sans-serif !important;}

/* Issue highlights */
mark.hl-long { background: rgba(255, 191, 0, .35); padding: .1em .2em; border-radius: .2em; }
mark.hl-passive { background: rgba(0, 150, 255, .25); padding: .1em .2em; border-radius: .2em; }
mark.hl-repeat { background: rgba(255, 0, 102, .20); padding: .1em .2em; border-radius: .2em; }
mark.hl-filler { background: rgba(0, 200, 120, .20); padding: .1em .2em; border-radius: .2em; }

/* Issues panel */
.issues-panel { margin-top:12px; }
.issues-panel .issues-head { display:flex; align-items:center; gap:8px; }
.issues-list { margin:8px 0 0; padding-left:18px; }
.issues-list li { margin:2px 0; }
.issues-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.issues-muted { color: var(--muted); font-size: var(--small); }

/* Optional: a simple toast for API errors */
.toast { display:none; position:fixed; right:16px; bottom:16px; background:var(--surface); border:1px solid var(--border); padding:10px 12px; border-radius:8px; box-shadow:var(--shadow); }
.toast.show { display:block; }

.theme-toggle{margin-left:12px}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-lg)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer}
.btn:hover{filter:brightness(0.97)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-600));border-color:transparent;color:white}
.btn.ghost{background:transparent}

.input,.textarea,.select{width:100%;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.input{height:44px;min-height:44px}
.textarea{min-height:100px;resize:vertical;font-family:var(--font-mono)}
.textarea.compact{min-height:80px}

.tool-shell{display:grid;gap:var(--gap-lg)}
.tool-panels{display:grid;gap:var(--gap-lg);grid-template-columns:2fr 1fr}
@media (max-width:960px){.tool-panels{grid-template-columns:1fr}}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap-lg)}
.post-card .title{font-size:18px;margin:8px 0}
.post-meta{color:var(--muted);font-size:var(--small)}

.prose h2{margin-top:28px}
.prose a{text-decoration:underline}

.pagination{display:flex;flex-direction:column;gap:16px;margin-top:32px;align-items:center}
.pagination-info{color:var(--muted);font-size:var(--small)}
.pagination-controls{display:flex;gap:8px;align-items:center}
.pagination-controls .btn.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}

/* Goal tracker layout */
.goal-row {
  display: grid;
  grid-template-columns: 2fr 1fr; /* left: inputs/bar ; right: status box */
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px){
  .goal-row { grid-template-columns: 1fr; }
}

/* Progress bar */
.goal-progress-track {
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  height: 12px;
  border-radius: 10px;
  overflow: hidden;
}
.goal-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  transition: width .25s ease;
}

/* Right-side goal status box */
.goal-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  min-height: 64px;
}
.goal-status h4 {
  margin: 0 0 6px;
  font-size: var(--small);
  color: var(--muted);
}
.goal-status .goal-status-body {
  font-weight: 600;
}
.goal-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; color: var(--muted); font-size: var(--small);
}

/* Remove the old circle if it still exists anywhere */
#progressRingWrap, #progressCircle { display: none !important; }