:root{
  --color-primary: #007BFF;
  --color-primary-light: #E7F1FF;
  --color-primary-dark: #0056B3;
  --color-secondary: #FF4500;
  --color-secondary-light: #FFE0CC;
  --color-secondary-dark: #CC3300;
  --text-primary: #343A40;
  --text-secondary: #6C757D;
  --text-light: #ADB5BD;
  --background: #FFFFFF;
  --background-light: #F8FAFC;
  --border-light: #F1F5F9;
  --border-color: #E2E8F0;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(0, 123, 255, 0.08);
  --maxwidth: 1100px;
  
  /* For backward compatibility */
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --muted: #6C757D;
  --accent: #007BFF;
  --accent-2: #FF4500;
  --border: #E2E8F0;
  
  /* brand gradient variable used on titles and active nav links */
  --brand-gradient: linear-gradient(135deg, #007BFF 0%, #FF4500 100%);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a;margin:0}
.hp-shell{display:flex;min-height:100vh}
.hp-sidebar{width:260px;background:linear-gradient(180deg,#ffffff, #fbfdff);border-right:1px solid var(--border);padding:20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.hp-brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--color-primary);margin-bottom:14px;line-height:1.2}
.hp-logo{width:40px;height:40px;object-fit:contain}
.hp-brand-text{font-size:14px}
.hp-brand-title{font-size:22px;font-weight:700}
.hp-search-small input{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border-color);background:#f8fafc}
.hp-nav{display:flex;flex-direction:column;margin-top:18px;gap:8px}
.hp-nav a{color:#0f172a;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:14px;transition:background-color 0.15s ease-out}
.hp-nav a:hover{background:linear-gradient(90deg,#f1f7fb,#f8fbff);color:var(--color-primary);font-weight:500}
.hp-toggle{display:none;margin-top:16px;padding:8px;border-radius:8px;border:0;background:transparent;cursor:pointer}

.hp-main{flex:1;padding:28px 36px;max-width:var(--maxwidth);margin:0 auto}
.hp-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;border-bottom:2px solid var(--color-primary-light);padding-bottom:16px}
.hp-header h1{font-size:20px;margin:0;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hp-header .muted{color:var(--text-secondary);font-size:13px;margin-top:6px}
.hp-header-right{display:flex;align-items:center;gap:12px}
.hp-header-right input{padding:10px 12px;border-radius:10px;border:1px solid var(--border-color);min-width:320px;background:white;transition:border-color 0.2s ease-out}
.hp-header-right input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0, 123, 255, 0.1)}
.hp-search-count{font-size:13px;color:var(--text-secondary)}

.hp-content{padding:8px 0}
.help-section{background:var(--card);border:1px solid var(--border-color);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0, 123, 255, 0.08);transition:all 0.3s ease-out}
.help-section:hover{box-shadow:0 8px 20px rgba(0, 123, 255, 0.12);border-color:rgba(0, 123, 255, 0.2)}
.help-section h2{margin:0 0 8px 0;color:var(--text-primary);border-bottom:2px solid var(--color-primary-light);padding-bottom:8px}
.help-section h3{margin-top:10px;color:var(--color-primary)}
.help-section p{color:#0b1220}
.help-section ul{margin:6px 0 0 18px}
.help-section dl{margin:6px 0 0 0}
.help-section dt{font-weight:600;margin-top:8px;color:var(--color-primary)}
.help-section dd{margin-left:0;color:var(--text-secondary);margin-bottom:6px}

.hp-footer{color:var(--text-secondary);font-size:13px;margin-top:8px;text-align:center;padding:16px;background:var(--background-light);border-top:1px solid var(--border-color);border-radius:8px}

/* Screenshot images */
.screenshot{width:100%;max-width:450px;height:auto;max-height:300px;object-fit:cover;border-radius:8px;border:1px solid var(--border-color);margin:12px 0;box-shadow:0 4px 12px rgba(0, 123, 255, 0.1)}
.screenshot.thumbnail{cursor:zoom-in;transition:transform .15s ease-out,box-shadow .15s ease-out}
.screenshot.thumbnail:hover{transform:scale(1.02);box-shadow:0 12px 28px rgba(0, 123, 255, 0.15)}
.screenshot.thumbnail:active{cursor:zoom-out}

/* Modal for image zoom */
.image-modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s;overflow:auto}
.image-modal.active{display:flex}
.image-modal img{width:1280px;height:720px;object-fit:contain;border-radius:4px;box-shadow:0 0 40px rgba(0,0,0,0.5);cursor:zoom-out}
.image-modal-close{position:absolute;top:20px;right:30px;color:#f1f1f1;font-size:40px;font-weight:bold;cursor:pointer;z-index:101}
.image-modal-close:hover{color:#bbb}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Info boxes */
.info-box{background:linear-gradient(135deg,rgba(0, 123, 255, 0.05),rgba(0, 123, 255, 0.02));border-left:4px solid var(--color-primary);padding:12px 16px;border-radius:8px;margin:12px 0;border:1px solid var(--color-primary-light)}
.info-box p{margin:0;color:var(--color-primary-dark);font-weight:500}

/* accessibility and brand styles moved from inline <style> in index.html */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* focus-visible improvements */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* smooth scroll */
html { scroll-behavior: smooth; }

/* active nav link uses the same gradient as titles */
.hp-nav a[aria-current="true"] {
  font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hp-nav a[aria-current="true"]:hover { opacity: 0.85; }

/* keep existing responsive "open" slide behavior and support body hook */
.hp-sidebar.open { left: 0; }
body.sidebar-collapsed .hp-sidebar { transform: translateX(-100%); }

/* gradient style for external links referencing radaratendimento (moved from article inline style) */
a[href*="radaratendimento"] {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  transition: opacity 0.3s ease-in-out;
}
a[href*="radaratendimento"]:hover { opacity: 0.7; }

/* copy button styling inserted here for consistency */
.copy-btn {
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  cursor: pointer;
}
.copy-btn:active { transform: translateY(1px); }

/* Responsive */
@media (max-width: 900px){
  .hp-sidebar{position:fixed;left:-100%;top:0;z-index:40;transition:all .25s;width:78%;height:100vh;overflow-y:auto}
  .hp-sidebar.open{left:0}
  .hp-toggle{display:block}
  .hp-main{padding:16px}
  .hp-header-right input{min-width:140px}
}

/* small helpers */
.muted{color:var(--text-secondary)}
.code{background:var(--color-primary-dark);color:#fff;padding:6px 10px;border-radius:8px;font-family:monospace;font-size:13px}