/* Shared project styles (migrated from inline <style> blocks) */

/* index.html */
body.page-index *, body.page-index *::before, body.page-index *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-index{
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2333;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --blue: #58a6ff;
  --green: #3fb950;
  --orange: #ff9900;
  --yellow: #e3b341;
}
body.page-index{
  background:
    radial-gradient(circle at 10% 10%, rgba(88,166,255,0.12), transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(63,185,80,0.10), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
}
body.page-index .site-nav-brand, body.page-index .badge, body.page-index h1, body.page-index h2, body.page-index h3{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body.page-index .container{ max-width: 980px; margin: 0 auto; }

body.page-index .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.8rem;
}
body.page-index .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-index .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-index .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-index .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-index .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-index .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-index .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

body.page-index header{
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(88,166,255,0.16), rgba(22,27,34,0.95));
  padding: 1.5rem;
}
body.page-index .badge{
  display: inline-block;
  background: var(--orange);
  color: #000;
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  border-radius: 5px;
  padding: 0.2rem 0.55rem;
}
body.page-index header h1{
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 0.65rem;
}
body.page-index header p{ color: var(--muted); font-size: 0.95rem; margin-top: 0.45rem; line-height: 1.65; max-width: 72ch; }

body.page-index .grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
body.page-index .card{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  transition: 0.18s;
}
body.page-index .card:hover{
  border-color: rgba(88,166,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
body.page-index .card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
body.page-index .card-title{ font-size: 1rem; font-weight: 800; }
body.page-index .card-type{
  font-size: 0.66rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--yellow);
  border: 1px solid rgba(227,179,65,0.4);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.page-index .card p{ color: var(--muted); font-size: 0.86rem; line-height: 1.6; min-height: 4.6rem; }
body.page-index .card a{
  width: fit-content;
  text-decoration: none;
  color: var(--blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  border: 1px solid rgba(88,166,255,0.35);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}
body.page-index .card a:hover{ border-color: var(--green); color: var(--green); }

body.page-index .footer-note{
  margin-top: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(22,27,34,0.85);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.8rem 1rem;
}
body.page-index .footer-note code{
  font-family: 'JetBrains Mono', monospace;
  color: var(--yellow);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.32rem;
}

@media (max-width: 840px) {
  body.page-index .grid{ grid-template-columns: 1fr; }
  body.page-index header h1{ font-size: 1.5rem; }
}

@media (max-width: 720px) {
  body.page-index .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
}

/* aws-cli-cheatsheet(1).html */
body.page-aws-cli *, body.page-aws-cli *::before, body.page-aws-cli *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-aws-cli{
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --blue: #58a6ff; --yellow: #e3b341;
  --warn: #f0883e; --purple: #d2a8ff; --red: #f85149;
  --orange: #ff9900;
}
body.page-aws-cli{ background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem 1rem 5rem; }
body.page-aws-cli .container{ max-width: 820px; margin: 0 auto; }

body.page-aws-cli header{ margin-bottom: 2.5rem; }
body.page-aws-cli .badge{ background: var(--orange); color: #000; font-weight: 800; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.1em; }
body.page-aws-cli header h1{ font-size: 1.5rem; font-weight: 800; margin-top: 0.5rem; }
body.page-aws-cli header p{ color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; line-height: 1.5; }

body.page-aws-cli .section{ margin-bottom: 2rem; }
body.page-aws-cli .sec-title{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
body.page-aws-cli .sec-title .icon{ font-size: 1rem; }
body.page-aws-cli .sec-title h2{ font-size: 0.95rem; font-weight: 700; }
body.page-aws-cli .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

body.page-aws-cli .row{ border-bottom: 1px solid var(--border); }
body.page-aws-cli .row:last-child{ border-bottom: none; }
body.page-aws-cli .row-head{ display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-aws-cli .row-label{ font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-aws-cli .btn{ background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; padding: 0.18rem 0.55rem; cursor: pointer; transition: all 0.15s; }
body.page-aws-cli .btn:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-cli .btn.ok{ border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
body.page-aws-cli .cmd{ padding: 0.75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.8; color: var(--text); overflow-x: auto; white-space: pre; }
body.page-aws-cli .note{ padding: 0.3rem 1rem 0.65rem; font-size: 0.79rem; color: var(--muted); line-height: 1.6; }
body.page-aws-cli .note strong{ color: var(--text); }
body.page-aws-cli .out{ padding: 0.45rem 1rem 0.65rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.25); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--green); line-height: 1.7; }
body.page-aws-cli .out-lbl{ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; font-weight: 700; }

body.page-aws-cli .warn{ background: rgba(240,136,62,0.08); border: 1px solid rgba(240,136,62,0.25); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--warn); line-height: 1.55; margin-top: 0.75rem; }
body.page-aws-cli .info{ background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--blue); line-height: 1.55; margin-top: 0.75rem; }
body.page-aws-cli .success{ background: rgba(63,185,80,0.07); border: 1px solid rgba(63,185,80,0.25); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--green); line-height: 1.55; margin-top: 0.75rem; }
body.page-aws-cli .cli-table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
body.page-aws-cli .cli-table{ width: 100%; border-collapse: collapse; font-size: 0.8rem; }
body.page-aws-cli .cli-table thead tr{ background: var(--surface2); }
body.page-aws-cli .cli-table th{
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}
body.page-aws-cli .cli-table td{
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
body.page-aws-cli .cli-table tr:last-child td{ border-bottom: none; }
body.page-aws-cli .cli-table tr:hover td{ background: rgba(255,255,255,0.02); }
body.page-aws-cli .cli-table code{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--yellow);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}

/* big credentials box */
body.page-aws-cli .creds-box{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.9;
  margin: 0.5rem 0;
}
body.page-aws-cli .creds-box .ck{ color: var(--blue); }
body.page-aws-cli .creds-box .cv{ color: var(--yellow); }

body.page-aws-cli .steps-list{ display: flex; flex-direction: column; }
body.page-aws-cli .step{ display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); align-items: start; }
body.page-aws-cli .step:last-child{ border-bottom: none; }
body.page-aws-cli .step-num{ width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--blue); flex-shrink: 0; margin-top: 0.05rem; }
body.page-aws-cli .step-body{ display: flex; flex-direction: column; gap: 0.5rem; }
body.page-aws-cli .step-title{ font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
body.page-aws-cli .step-desc{ font-size: 0.81rem; color: var(--muted); line-height: 1.6; }
body.page-aws-cli .step-desc strong{ color: var(--text); }
body.page-aws-cli .step-cmd{ background: var(--bg); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
body.page-aws-cli .step-cmd-head{ display: flex; justify-content: flex-end; padding: 0.3rem 0.7rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-aws-cli .step-cmd-body{ padding: 0.6rem 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.81rem; line-height: 1.7; white-space: pre; overflow-x: auto; }

body.page-aws-cli .kw{ color: var(--blue); }
body.page-aws-cli .val{ color: var(--yellow); }
body.page-aws-cli .cmt{ color: var(--muted); }
body.page-aws-cli .ok2{ color: var(--green); }

/* GLOBAL NAV */
body.page-aws-cli .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-aws-cli .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-aws-cli .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-aws-cli .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-aws-cli .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-aws-cli .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-aws-cli .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-cli .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

@media (max-width: 720px) {
  body.page-aws-cli .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
}

/* aws-s3-cheatsheet(1).html */
body.page-aws-s3 *, body.page-aws-s3 *::before, body.page-aws-s3 *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-aws-s3{
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --blue: #58a6ff; --yellow: #e3b341;
  --warn: #f0883e; --purple: #d2a8ff; --red: #f85149;
  --orange: #ff9900;
}
body.page-aws-s3{ background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem 1rem 5rem; }
body.page-aws-s3 .container{ max-width: 820px; margin: 0 auto; }

body.page-aws-s3 header{ margin-bottom: 2.5rem; }
body.page-aws-s3 .badge{ background: var(--orange); color: #000; font-weight: 800; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.1em; }
body.page-aws-s3 header h1{ font-size: 1.5rem; font-weight: 800; margin-top: 0.5rem; }
body.page-aws-s3 header p{ color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* INPUT BAR */
body.page-aws-s3 .input-bar{
  display: flex; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 2px solid var(--blue);
  border-radius: 12px; padding: 1.1rem 1.4rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 0 30px rgba(88,166,255,0.07);
}
body.page-aws-s3 .ifield{ display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 160px; }
body.page-aws-s3 .ifield label{ font-size: 0.68rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-aws-s3 .ifield input{
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  color: var(--yellow); font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem; font-weight: 600; padding: 0.55rem 0.85rem;
  outline: none; transition: border-color 0.15s; width: 100%;
}
body.page-aws-s3 .ifield input:focus{ border-color: var(--blue); }
body.page-aws-s3 .ifield input::placeholder{ color: #444; font-weight: 400; font-size: 0.78rem; }

/* SECTION */
body.page-aws-s3 .section{ margin-bottom: 1.75rem; }
body.page-aws-s3 .sec-title{
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.7rem;
}
body.page-aws-s3 .sec-title .icon{ font-size: 1rem; }
body.page-aws-s3 .sec-title h2{ font-size: 0.9rem; font-weight: 700; color: var(--text); }
body.page-aws-s3 .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

/* CMD ROW */
body.page-aws-s3 .row{ border-bottom: 1px solid var(--border); }
body.page-aws-s3 .row:last-child{ border-bottom: none; }
body.page-aws-s3 .row-head{ display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-aws-s3 .row-label{ font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-aws-s3 .btn{ background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; padding: 0.18rem 0.55rem; cursor: pointer; transition: all 0.15s; }
body.page-aws-s3 .btn:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-s3 .btn.ok{ border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
body.page-aws-s3 .cmd{ padding: 0.75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.75; color: var(--text); overflow-x: auto; white-space: pre; }
body.page-aws-s3 .note{ padding: 0.3rem 1rem 0.65rem; font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
body.page-aws-s3 .note strong{ color: var(--text); }
body.page-aws-s3 .out{ padding: 0.45rem 1rem 0.65rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.25); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--green); }
body.page-aws-s3 .out-lbl{ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; font-weight: 700; }

body.page-aws-s3 .kw{ color: var(--blue); }
body.page-aws-s3 .val{ color: var(--yellow); }
body.page-aws-s3 .cmt{ color: var(--muted); }
body.page-aws-s3 .ok2{ color: var(--green); }
body.page-aws-s3 .ph{ color: var(--red); }
body.page-aws-s3 .pp{ color: var(--purple); }

body.page-aws-s3 .warn{ background: rgba(240,136,62,0.08); border: 1px solid rgba(240,136,62,0.25); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.79rem; color: var(--warn); line-height: 1.5; margin-top: 0.7rem; }
body.page-aws-s3 .info{ background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.79rem; color: var(--blue); line-height: 1.5; margin-top: 0.7rem; }

/* GLOBAL NAV */
body.page-aws-s3 .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-aws-s3 .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-aws-s3 .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-aws-s3 .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-aws-s3 .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-aws-s3 .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-aws-s3 .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-s3 .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

@media (max-width: 720px) {
  body.page-aws-s3 .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
}

/* aws-s3-sync-script (1).html */
body.page-aws-s3-sync *, body.page-aws-s3-sync *::before, body.page-aws-s3-sync *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-aws-s3-sync{
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --blue: #58a6ff; --yellow: #e3b341;
  --warn: #f0883e; --purple: #d2a8ff; --red: #f85149;
  --orange: #ff9900;
}
body.page-aws-s3-sync{ background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem 1rem 6rem; }
body.page-aws-s3-sync .container{ max-width: 900px; margin: 0 auto; }

body.page-aws-s3-sync header{ margin-bottom: 2rem; }
body.page-aws-s3-sync .badge{ background: var(--orange); color: #000; font-weight: 800; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.1em; }
body.page-aws-s3-sync header h1{ font-size: 1.5rem; font-weight: 800; margin-top: 0.5rem; }
body.page-aws-s3-sync header p{ color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; line-height: 1.5; }

/* CONFIG GRID */
body.page-aws-s3-sync .config-panel{
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 0 40px rgba(88,166,255,0.07);
}
body.page-aws-s3-sync .config-panel h2{ font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.2rem; }

body.page-aws-s3-sync .config-row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
body.page-aws-s3-sync .config-row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
body.page-aws-s3-sync .config-row-1{ display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.1rem; }

/* OPTION BLOCK */
body.page-aws-s3-sync .opt-block{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
body.page-aws-s3-sync .opt-block:focus-within{ border-color: var(--blue); }
body.page-aws-s3-sync .opt-header{
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
body.page-aws-s3-sync .opt-label{ font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* MODE TOGGLE */
body.page-aws-s3-sync .mode-toggle{ display: flex; gap: 0.3rem; }
body.page-aws-s3-sync .mtbtn{
  font-size: 0.62rem; font-weight: 700; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 0.18rem 0.5rem; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
  transition: all 0.12s;
}
body.page-aws-s3-sync .mtbtn.active-fixed{ border-color: var(--yellow); color: var(--yellow); background: rgba(227,179,65,0.1); }
body.page-aws-s3-sync .mtbtn.active-flex{ border-color: var(--purple); color: var(--purple); background: rgba(210,168,255,0.1); }

body.page-aws-s3-sync .opt-body{ padding: 0.55rem 0.85rem; min-height: 2.6rem; display: flex; align-items: center; }

body.page-aws-s3-sync .opt-input{
  background: none; border: none; outline: none;
  color: var(--yellow); font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; font-weight: 600; width: 100%;
}
body.page-aws-s3-sync .opt-input::placeholder{ color: #444; font-weight: 400; font-size: 0.78rem; }

body.page-aws-s3-sync .opt-select{
  background: none; border: none; outline: none;
  color: var(--yellow); font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; font-weight: 600; width: 100%; cursor: pointer;
}
body.page-aws-s3-sync .opt-select option{ background: var(--surface2); color: var(--text); }

body.page-aws-s3-sync .flex-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; color: var(--purple); font-style: italic;
}

body.page-aws-s3-sync .opt-hint{ font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; padding: 0 0.85rem 0.45rem; font-family: 'JetBrains Mono', monospace; }
body.page-aws-s3-sync .opt-hint span{ color: var(--yellow); }

/* LEGEND */
body.page-aws-s3-sync .legend{ display: flex; gap: 1.2rem; margin-bottom: 1.5rem; }
body.page-aws-s3-sync .leg{ display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted); }
body.page-aws-s3-sync .leg-dot{ width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

body.page-aws-s3-sync .script-tabs{
  display:flex;
  gap:0.5rem;
  margin-bottom:1.15rem;
}
body.page-aws-s3-sync .script-tab{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--muted);
  border-radius:999px;
  padding:0.35rem 0.8rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.74rem;
  cursor:pointer;
}
body.page-aws-s3-sync .script-tab:hover{
  border-color:var(--green);
  color:var(--green);
}
body.page-aws-s3-sync .script-tab.is-active{
  border-color:var(--blue);
  color:var(--blue);
  background:rgba(88,166,255,0.1);
}
body.page-aws-s3-sync .script-tab-pane{ display:block; }

/* SCRIPT OUTPUT */
body.page-aws-s3-sync .script-panel{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
body.page-aws-s3-sync .script-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
body.page-aws-s3-sync .script-filename{ font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--purple); }
body.page-aws-s3-sync .btn-row{ display: flex; gap: 0.4rem; }
body.page-aws-s3-sync .btn{
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; padding: 0.22rem 0.6rem; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
body.page-aws-s3-sync .btn:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-s3-sync .btn.ok{ border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
body.page-aws-s3-sync .btn-dl{ border-color: var(--green); color: var(--green); }
body.page-aws-s3-sync .btn-dl:hover{ background: rgba(63,185,80,0.1); }

body.page-aws-s3-sync .script-body{
  padding: 1rem 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; line-height: 1.9; overflow-x: auto; white-space: pre;
}

/* COMMANDS SECTION */
body.page-aws-s3-sync .section{ margin-bottom: 1.75rem; }
body.page-aws-s3-sync .sec-title{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
body.page-aws-s3-sync .sec-title h2{ font-size: 0.92rem; font-weight: 700; }
body.page-aws-s3-sync .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
body.page-aws-s3-sync .row{ border-bottom: 1px solid var(--border); }
body.page-aws-s3-sync .row:last-child{ border-bottom: none; }
body.page-aws-s3-sync .row-head{ display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-aws-s3-sync .row-label{ font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-aws-s3-sync .cmd{ padding: 0.75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.8; color: var(--text); overflow-x: auto; white-space: pre; }
body.page-aws-s3-sync .note{ padding: 0.3rem 1rem 0.65rem; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
body.page-aws-s3-sync .note strong{ color: var(--text); }

body.page-aws-s3-sync .info{ background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--blue); line-height: 1.6; margin-top: 0.75rem; }

body.page-aws-s3-sync .kw{ color: var(--blue); }
body.page-aws-s3-sync .val{ color: var(--yellow); }
body.page-aws-s3-sync .cmt{ color: var(--muted); }
body.page-aws-s3-sync .ok2{ color: var(--green); }
body.page-aws-s3-sync .ph{ color: var(--red); }
body.page-aws-s3-sync .pp{ color: var(--purple); }
body.page-aws-s3-sync .str{ color: #a5d6ff; }

/* GLOBAL NAV */
body.page-aws-s3-sync .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-aws-s3-sync .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-aws-s3-sync .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-aws-s3-sync .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-aws-s3-sync .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-aws-s3-sync .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-aws-s3-sync .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-aws-s3-sync .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

@media (max-width: 720px) {
  body.page-aws-s3-sync .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
}

@media (max-width: 980px) {
  body.page-aws-s3-sync .config-row{ grid-template-columns: 1fr; }
  body.page-aws-s3-sync .config-row-2{ grid-template-columns: 1fr; }
}

/* aws-sg-kurzanleitung.html */
body.page-aws-sg *, body.page-aws-sg *::before, body.page-aws-sg *::after{ box-sizing: border-box; margin: 0; padding: 0; }

  body.page-aws-sg{
    --bg: #0d1117;
    --surface: #161b22;
    --surface2: #1c2333;
    --border: #30363d;
    --text: #e6edf3;
    --muted: #8b949e;
    --ssh: #3fb950;
    --rdp: #58a6ff;
    --http: #f78166;
    --https: #d2a8ff;
    --db: #ffa657;
    --other: #79c0ff;
    --warn: #f0883e;
  }

  body.page-aws-sg{
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
  }

  body.page-aws-sg .container{ max-width: 860px; margin: 0 auto; }

  body.page-aws-sg header{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  body.page-aws-sg .aws-badge{
    background: #ff9900;
    color: #000;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.1em;
    flex-shrink: 0;
  }

  body.page-aws-sg header h1{ font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1.2; }
  body.page-aws-sg header p{ font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; }

  body.page-aws-sg .section{ margin-bottom: 2.5rem; }

  body.page-aws-sg .section-header{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  body.page-aws-sg .dot{
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  body.page-aws-sg .section-header h2{ font-size: 1.1rem; font-weight: 700; }

  body.page-aws-sg .card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

  body.page-aws-sg .card-top{
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  body.page-aws-sg .steps{ padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }

  body.page-aws-sg .step{
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.75rem;
    align-items: start;
  }

  body.page-aws-sg .step-num{
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }

  body.page-aws-sg .step-content{ font-size: 0.88rem; line-height: 1.6; color: var(--text); }
  body.page-aws-sg .step-content strong{ font-weight: 700; }

  body.page-aws-sg code{
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    color: #e3b341;
    white-space: nowrap;
  }

  body.page-aws-sg .field-row{
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
  }
  body.page-aws-sg .field-row:last-child{ border-bottom: none; }
  body.page-aws-sg .field-label{ color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
  body.page-aws-sg .field-value{ font-weight: 600; }

  body.page-aws-sg .warning{
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: rgba(240,136,62,0.1);
    border: 1px solid rgba(240,136,62,0.3);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    color: var(--warn);
    margin-top: 1rem;
    line-height: 1.5;
  }

  body.page-aws-sg .warning-icon{ font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }

  /* Protocol Table */
  body.page-aws-sg .proto-table{ width: 100%; border-collapse: collapse; font-size: 0.83rem; }
  body.page-aws-sg .proto-table th{
    text-align: left;
    padding: 0.7rem 1rem;
    background: var(--surface2);
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  body.page-aws-sg .proto-table td{
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  body.page-aws-sg .proto-table tr:last-child td{ border-bottom: none; }
  body.page-aws-sg .proto-table tr:hover td{ background: rgba(255,255,255,0.02); }

  body.page-aws-sg .tag{
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
  }

  body.page-aws-sg .tag-danger{ background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
  body.page-aws-sg .tag-ok{ background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
  body.page-aws-sg .tag-caution{ background: rgba(255,166,87,0.15); color: #ffa657; border: 1px solid rgba(255,166,87,0.3); }

  body.page-aws-sg .proto-name{ font-weight: 700; }
  body.page-aws-sg .proto-port{ font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: #e3b341; }
  body.page-aws-sg .proto-desc{ color: var(--muted); font-size: 0.8rem; }

  body.page-aws-sg .color-ssh{ color: var(--ssh); }
  body.page-aws-sg .color-rdp{ color: var(--rdp); }

  body.page-aws-sg .tip{
    margin-top: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
  }
  body.page-aws-sg .tip h3{ font-size: 0.9rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
  body.page-aws-sg .tip ul{ list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  body.page-aws-sg .tip li{ font-size: 0.85rem; padding-left: 1.2rem; position: relative; line-height: 1.5; }
  body.page-aws-sg .tip li::before{ content: '→'; position: absolute; left: 0; color: var(--muted); }

  /* GLOBAL NAV */
  body.page-aws-sg .site-nav{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
  }
  body.page-aws-sg .site-nav-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
  }
  body.page-aws-sg .site-nav-brand{
    color: var(--text);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
  }
  body.page-aws-sg .site-nav-kicker{
    color: var(--muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
  }
  body.page-aws-sg .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
  body.page-aws-sg .site-nav-link{
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.74rem;
    font-family: 'JetBrains Mono', monospace;
    text-decoration: none;
    padding: 0.3rem 0.62rem;
    transition: 0.15s;
  }
  body.page-aws-sg .site-nav-link:hover{ border-color: var(--ssh); color: var(--ssh); }
  body.page-aws-sg .site-nav-link.is-active{ border-color: var(--rdp); color: var(--rdp); background: rgba(88,166,255,0.1); }

  @media (max-width: 720px) {
    body.page-aws-sg .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
  }

/* ssh-key-setup(2).html */
body.page-ssh-key *, body.page-ssh-key *::before, body.page-ssh-key *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-ssh-key{
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --blue: #58a6ff; --yellow: #e3b341;
  --warn: #f0883e; --purple: #d2a8ff; --red: #f85149;
}
body.page-ssh-key{ background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; padding: 2rem 1rem 5rem; }
body.page-ssh-key .container{ max-width: 780px; margin: 0 auto; }

body.page-ssh-key header{ margin-bottom: 2.5rem; }
body.page-ssh-key .aws-badge{ background: #ff9900; color: #000; font-weight: 800; font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.1em; }
body.page-ssh-key header h1{ font-size: 1.5rem; font-weight: 800; margin-top: 0.5rem; }
body.page-ssh-key header p{ color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.5; }

/* CONFIG CARD */
body.page-ssh-key .config-card{
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 0 40px rgba(88,166,255,0.08);
}
body.page-ssh-key .config-card h2{ font-size: 0.75rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.1rem; }
body.page-ssh-key .config-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
body.page-ssh-key .config-full{ margin-bottom: 1rem; }

body.page-ssh-key .field{ display: flex; flex-direction: column; gap: 0.35rem; }
body.page-ssh-key .field label{ font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
body.page-ssh-key .field input, body.page-ssh-key .field select{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
body.page-ssh-key .field input:focus, body.page-ssh-key .field select:focus{ border-color: var(--blue); }
body.page-ssh-key .field input::placeholder{ color: #444; font-weight: 400; font-size: 0.8rem; }
body.page-ssh-key .field select option{ background: var(--surface2); color: var(--text); }

body.page-ssh-key .preview-bar{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--green);
  word-break: break-all;
  min-height: 2.5rem;
}
body.page-ssh-key .preview-bar .ph{ color: var(--red); font-style: italic; }
body.page-ssh-key .preview-label{ font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }

/* SECTION */
body.page-ssh-key .section{ margin-bottom: 2rem; }
body.page-ssh-key .section-label{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
body.page-ssh-key .section-label .num{ width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
body.page-ssh-key .section-label h2{ font-size: 0.95rem; font-weight: 700; }
body.page-ssh-key .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

/* AWS STEPS */
body.page-ssh-key .aws-steps{ padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; }
body.page-ssh-key .aws-step{ display: grid; grid-template-columns: 8px 1fr; gap: 0.8rem; align-items: start; }
body.page-ssh-key .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 0.45rem; flex-shrink: 0; }
body.page-ssh-key .aws-step-text{ font-size: 0.86rem; line-height: 1.7; }
body.page-ssh-key .aws-step-text strong{ font-weight: 700; }
body.page-ssh-key code{ font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; background: var(--surface2); border: 1px solid var(--border); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--yellow); }

/* CMD BLOCKS */
body.page-ssh-key .cmd-block{ border-bottom: 1px solid var(--border); }
body.page-ssh-key .cmd-block:last-child{ border-bottom: none; }
body.page-ssh-key .cmd-header{ display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-ssh-key .cmd-label{ font-size: 0.67rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-ssh-key .copy-btn{
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; padding: 0.2rem 0.6rem; cursor: pointer; transition: all 0.15s;
}
body.page-ssh-key .copy-btn:hover{ border-color: var(--green); color: var(--green); }
body.page-ssh-key .copy-btn.ok{ border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }

body.page-ssh-key .cmd-code{
  padding: 0.85rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.83rem; line-height: 1.75;
  color: var(--text); overflow-x: auto; white-space: pre;
}
body.page-ssh-key .cmd-note{ padding: 0.35rem 1rem 0.7rem; font-size: 0.79rem; color: var(--muted); line-height: 1.6; }
body.page-ssh-key .cmd-note strong{ color: var(--text); }
body.page-ssh-key .cmd-subhead{
  margin: 0.45rem 1rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

body.page-ssh-key .output-block{ padding: 0.55rem 1rem 0.75rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.25); }
body.page-ssh-key .output-label{ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.3rem; font-weight: 700; }
body.page-ssh-key .output-line{ font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--green); }

/* chmod tool */
body.page-ssh-key .chmod-tool{
  margin: 0.5rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 0.9rem;
}
body.page-ssh-key .chmod-head{ margin-bottom: 0.55rem; }
body.page-ssh-key .chmod-title{ font-weight: 800; font-size: 0.83rem; }
body.page-ssh-key .chmod-sub{ color: var(--muted); font-size: 0.74rem; margin-top: 0.12rem; }
body.page-ssh-key .chmod-legend{
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  color: var(--muted);
}
body.page-ssh-key .chmod-legend b{ color: var(--text); }
body.page-ssh-key .chmod-groups{
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 0.6rem;
}
body.page-ssh-key .chmod-group{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.55rem 0.6rem;
}
body.page-ssh-key .chmod-group-title{
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.page-ssh-key .chmod-group.owner .chmod-group-title{ color: #ff7b72; }
body.page-ssh-key .chmod-group.group .chmod-group-title{ color: #f2cc60; }
body.page-ssh-key .chmod-group.others .chmod-group-title{ color: #57d364; }
body.page-ssh-key .chmod-bit-row{ display: flex; gap: 0.35rem; margin-bottom: 0.45rem; }
body.page-ssh-key .chmod-bit{
  width: 36px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.92rem;
}
body.page-ssh-key .chmod-bit.is-on{ background: var(--blue); border-color: var(--blue); color: #061122; }
body.page-ssh-key .chmod-binary,
body.page-ssh-key .chmod-calc{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.55;
}
body.page-ssh-key .chmod-result{
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.65rem;
}
body.page-ssh-key .chmod-result-label{
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.22rem;
  font-weight: 700;
}
body.page-ssh-key .chmod-result-cmd{
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
}
body.page-ssh-key .chmod-result-cmd span{ color: var(--blue); }
body.page-ssh-key .chmod-result-cmd strong{ color: var(--yellow); letter-spacing: 0.05em; }
body.page-ssh-key .chmod-result-cmd em{ color: var(--muted); font-style: normal; font-size: 0.88rem; }
body.page-ssh-key .chmod-result-rwx{
  margin-top: 0.2rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
body.page-ssh-key .chmod-live-cmd{ margin-top: 0.45rem; border-radius: 8px; border: 1px solid var(--border); }
body.page-ssh-key .chmod-presets{
  margin-top: 0.7rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
body.page-ssh-key .chmod-preset{
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.25rem 0.56rem;
}
body.page-ssh-key .chmod-preset:hover{ border-color: var(--blue); color: var(--blue); }
body.page-ssh-key .chmod-preset strong{ color: var(--text); margin-right: 0.25rem; }

body.page-ssh-key .warning{ display: flex; gap: 0.6rem; background: rgba(240,136,62,0.08); border: 1px solid rgba(240,136,62,0.25); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.81rem; color: var(--warn); line-height: 1.5; margin-top: 0.75rem; }
body.page-ssh-key .info{ display: flex; gap: 0.6rem; background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.81rem; color: var(--blue); line-height: 1.5; margin-top: 0.75rem; }

body.page-ssh-key .kw{ color: var(--blue); }
body.page-ssh-key .val{ color: var(--yellow); }
body.page-ssh-key .cmt{ color: var(--muted); }
body.page-ssh-key .ok{ color: var(--green); }
body.page-ssh-key .ph{ color: var(--red); }
body.page-ssh-key .pp{ color: var(--purple); }

/* GLOBAL NAV */
body.page-ssh-key .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-ssh-key .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-ssh-key .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-ssh-key .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-ssh-key .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-ssh-key .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-ssh-key .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-ssh-key .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

@media (max-width: 720px) {
  body.page-ssh-key .site-nav-top{ flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
  body.page-ssh-key .chmod-groups{ grid-template-columns: 1fr; }
}


/* inline style migration: aws-cli-cheatsheet(1).html */
body.page-aws-cli .page-aws-cli-inl-1 { color:var(--muted); }
body.page-aws-cli .page-aws-cli-inl-2 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-3 { color:var(--red); }
body.page-aws-cli .page-aws-cli-inl-4 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-5 { color:var(--red); }
body.page-aws-cli .page-aws-cli-inl-6 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-7 { color:var(--red); }
body.page-aws-cli .page-aws-cli-inl-8 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-9 { color:var(--red); }
body.page-aws-cli .page-aws-cli-inl-10 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-11 { color:var(--red); }
body.page-aws-cli .page-aws-cli-inl-12 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }
body.page-aws-cli .page-aws-cli-inl-13 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }

/* inline style migration: aws-s3-cheatsheet(1).html */
body.page-aws-s3 .page-aws-s3-inl-1 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px;color:var(--yellow); }
body.page-aws-s3 .page-aws-s3-inl-2 { font-family:monospace;background:#1c2333;padding:0.1rem 0.3rem;border-radius:4px; }

/* inline style migration: aws-s3-sync-script (1).html */
body.page-aws-s3-sync .page-aws-s3-sync-inl-1 { color:var(--yellow); }
body.page-aws-s3-sync .page-aws-s3-sync-inl-2 { color:var(--purple); }
body.page-aws-s3-sync .page-aws-s3-sync-inl-3 { background:var(--yellow); }
body.page-aws-s3-sync .page-aws-s3-sync-inl-4 { background:var(--purple); }
body.page-aws-s3-sync .page-aws-s3-sync-inl-5 { display:none; }
body.page-aws-s3-sync .page-aws-s3-sync-inl-6 { display:none; }
body.page-aws-s3-sync .page-aws-s3-sync-inl-7 { display:none; }
body.page-aws-s3-sync .page-aws-s3-sync-inl-8 { display:none; }
body.page-aws-s3-sync .page-aws-s3-sync-inl-9 { display:none; }

/* inline style migration: aws-sg-kurzanleitung.html */
body.page-aws-sg .page-aws-sg-inl-1 { display:flex;align-items:center;gap:0.75rem;margin-bottom:0.3rem; }
body.page-aws-sg .page-aws-sg-inl-2 { background:var(--ssh); }
body.page-aws-sg .page-aws-sg-inl-3 { color:var(--muted);font-size:0.8rem;margin-left:0.5rem; }
body.page-aws-sg .page-aws-sg-inl-4 { color:var(--warn);font-size:0.8rem;margin-left:0.5rem; }
body.page-aws-sg .page-aws-sg-inl-5 { background:rgba(63,185,80,0.15);color:var(--ssh); }
body.page-aws-sg .page-aws-sg-inl-6 { background:rgba(63,185,80,0.15);color:var(--ssh); }
body.page-aws-sg .page-aws-sg-inl-7 { background:rgba(63,185,80,0.15);color:var(--ssh); }
body.page-aws-sg .page-aws-sg-inl-8 { background:var(--rdp); }
body.page-aws-sg .page-aws-sg-inl-9 { color:var(--warn);font-size:0.8rem;margin-left:0.5rem; }
body.page-aws-sg .page-aws-sg-inl-10 { background:rgba(88,166,255,0.15);color:var(--rdp); }
body.page-aws-sg .page-aws-sg-inl-11 { background:rgba(88,166,255,0.15);color:var(--rdp); }
body.page-aws-sg .page-aws-sg-inl-12 { background:rgba(88,166,255,0.15);color:var(--rdp); }
body.page-aws-sg .page-aws-sg-inl-13 { background:rgba(88,166,255,0.15);color:var(--rdp); }
body.page-aws-sg .page-aws-sg-inl-14 { background:var(--http); }
body.page-aws-sg .page-aws-sg-inl-15 { color:var(--http); }
body.page-aws-sg .page-aws-sg-inl-16 { color:var(--https); }
body.page-aws-sg .page-aws-sg-inl-17 { color:var(--db); }
body.page-aws-sg .page-aws-sg-inl-18 { color:var(--db); }
body.page-aws-sg .page-aws-sg-inl-19 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-20 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-21 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-22 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-23 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-24 { color:var(--other); }
body.page-aws-sg .page-aws-sg-inl-25 { color:var(--other); }

/* inline style migration: ssh-key-setup(2).html */
body.page-ssh-key .page-ssh-key-inl-1 { color:var(--green); }

/* ec2-interface-rdp.html + server-link-intern.html */
body.page-ec2-ui *, body.page-ec2-ui *::before, body.page-ec2-ui *::after,
body.page-server-link *, body.page-server-link *::before, body.page-server-link *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.page-ec2-ui,
body.page-server-link {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2333;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --green: #3fb950;
  --blue: #58a6ff;
  --yellow: #e3b341;
  --warn: #f0883e;
  --orange: #ff9900;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  padding: 2rem 1rem 5rem;
}

body.page-ec2-ui .container,
body.page-server-link .container { max-width: 900px; margin: 0 auto; }

body.page-ec2-ui .site-nav,
body.page-server-link .site-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-ec2-ui .site-nav-top,
body.page-server-link .site-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-ec2-ui .site-nav-brand,
body.page-server-link .site-nav-brand {
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-ec2-ui .site-nav-kicker,
body.page-server-link .site-nav-kicker {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-ec2-ui .site-nav-links,
body.page-server-link .site-nav-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-ec2-ui .site-nav-link,
body.page-server-link .site-nav-link {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-ec2-ui .site-nav-link:hover,
body.page-server-link .site-nav-link:hover { border-color: var(--green); color: var(--green); }
body.page-ec2-ui .site-nav-link.is-active,
body.page-server-link .site-nav-link.is-active { border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

body.page-ec2-ui header,
body.page-server-link header { margin-bottom: 2.2rem; }
body.page-ec2-ui .badge,
body.page-server-link .badge {
  background: var(--orange);
  color: #000;
  font-weight: 800;
  font-size: 0.65rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.1em;
}
body.page-ec2-ui header h1,
body.page-server-link header h1 { font-size: 1.5rem; font-weight: 800; margin-top: 0.55rem; }
body.page-ec2-ui header p,
body.page-server-link header p { color: var(--muted); font-size: 0.9rem; margin-top: 0.28rem; line-height: 1.6; }

body.page-ec2-ui .section,
body.page-server-link .section { margin-bottom: 2rem; }
body.page-ec2-ui .sec-title,
body.page-server-link .sec-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
body.page-ec2-ui .sec-title h2,
body.page-server-link .sec-title h2 { font-size: 0.95rem; font-weight: 700; }

body.page-ec2-ui .card,
body.page-server-link .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
body.page-ec2-ui .row,
body.page-server-link .row { border-bottom: 1px solid var(--border); }
body.page-ec2-ui .row:last-child,
body.page-server-link .row:last-child { border-bottom: none; }
body.page-ec2-ui .row-head,
body.page-server-link .row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-ec2-ui .row-label,
body.page-server-link .row-label { font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-ec2-ui .note,
body.page-server-link .note { padding: 0.7rem 1rem; font-size: 0.82rem; color: var(--text); line-height: 1.65; }
body.page-ec2-ui code,
body.page-server-link code { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; background: var(--surface2); border: 1px solid var(--border); padding: 0.1rem 0.35rem; border-radius: 4px; color: var(--yellow); }
body.page-ec2-ui .inline-link,
body.page-server-link .inline-link { color: var(--blue); text-decoration: none; border-bottom: 1px dashed rgba(88,166,255,0.45); }
body.page-ec2-ui .inline-link:hover,
body.page-server-link .inline-link:hover { color: var(--green); border-bottom-color: rgba(63,185,80,0.6); }

body.page-ec2-ui .btn,
body.page-server-link .btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; padding: 0.18rem 0.55rem; cursor: pointer; transition: all 0.15s; }
body.page-ec2-ui .btn:hover,
body.page-server-link .btn:hover { border-color: var(--green); color: var(--green); }
body.page-ec2-ui .btn.ok,
body.page-server-link .btn.ok { border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
body.page-ec2-ui .cmd,
body.page-server-link .cmd { padding: 0.75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.81rem; line-height: 1.8; color: var(--text); overflow-x: auto; white-space: pre; }
body.page-ec2-ui .kw,
body.page-server-link .kw { color: var(--blue); }
body.page-ec2-ui .val,
body.page-server-link .val { color: var(--yellow); }

body.page-ec2-ui .warn,
body.page-server-link .warn { background: rgba(240,136,62,0.08); border: 1px solid rgba(240,136,62,0.25); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--warn); line-height: 1.55; margin-top: 0.75rem; }
body.page-ec2-ui .info,
body.page-server-link .info { background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.8rem; color: var(--blue); line-height: 1.55; margin-top: 0.75rem; }

body.page-server-link .arch-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
body.page-server-link .arch-line { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.7; color: var(--text); }
body.page-server-link .arch-label { color: var(--blue); }
body.page-server-link .arch-node { color: var(--yellow); }
body.page-server-link .arch-note { color: var(--muted); font-size: 0.8rem; margin-top: 0.6rem; line-height: 1.6; }

@media (max-width: 720px) {
  body.page-ec2-ui .site-nav-top,
  body.page-server-link .site-nav-top { flex-direction: column; align-items: flex-start; margin-bottom: 0.6rem; }
}


/* cloud-computing-theorie.html */
body.page-cloud-theory *, body.page-cloud-theory *::before, body.page-cloud-theory *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body.page-cloud-theory{
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333;
  --border: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --blue: #58a6ff; --yellow: #e3b341;
  --warn: #f0883e; --purple: #d2a8ff; --red: #f85149;
  --orange: #ff9900; --teal: #39d3bb;
  --sidebar-w: 260px;
}

html body.page-cloud-theory{ scroll-behavior: smooth; }
body.page-cloud-theory{ background: var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; display: flex; min-height: 100vh; }

/* ── SIDEBAR ────────────────────────────────── */
body.page-cloud-theory .sidebar{
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 100;
  display: flex; flex-direction: column;
}
body.page-cloud-theory .sidebar::-webkit-scrollbar{ width: 4px; }
body.page-cloud-theory .sidebar::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 2px; }

body.page-cloud-theory .sidebar-header{
  padding: 1.2rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 10;
}
body.page-cloud-theory .sidebar-header .badge{ background: var(--orange); color: #000; font-weight: 800; font-size: 0.6rem; padding: 0.15rem 0.45rem; border-radius: 3px; letter-spacing: 0.1em; }
body.page-cloud-theory .sidebar-header h2{ font-size: 0.85rem; font-weight: 700; margin-top: 0.4rem; color: var(--text); line-height: 1.3; }

/* SEARCH */
body.page-cloud-theory .sidebar-search{ padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
body.page-cloud-theory .search-wrap{ position: relative; }
body.page-cloud-theory .search-wrap input{
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.78rem; padding: 0.45rem 0.75rem 0.45rem 2rem;
  outline: none; transition: border-color 0.15s;
}
body.page-cloud-theory .search-wrap input:focus{ border-color: var(--blue); }
body.page-cloud-theory .search-wrap input::placeholder{ color: var(--muted); }
body.page-cloud-theory .search-icon{ position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--muted); pointer-events: none; }

/* NAV */
body.page-cloud-theory .nav-section{ padding: 0.5rem 0; }
body.page-cloud-theory .nav-group-label{
  font-size: 0.6rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.5rem 1rem 0.25rem;
}
body.page-cloud-theory .nav-item{
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.38rem 1rem; font-size: 0.78rem; color: var(--muted);
  cursor: pointer; transition: all 0.12s; text-decoration: none;
  border-left: 2px solid transparent;
}
body.page-cloud-theory .nav-item:hover{ color: var(--text); background: rgba(255,255,255,0.03); }
body.page-cloud-theory .nav-item.active{ color: var(--blue); border-left-color: var(--blue); background: rgba(88,166,255,0.06); font-weight: 700; }
body.page-cloud-theory .nav-item.hidden{ display: none; }

/* ── MAIN ────────────────────────────────────── */
body.page-cloud-theory .main{
  margin-left: var(--sidebar-w);
  flex: 1; padding: 2.5rem 2.5rem 5rem;
  max-width: calc(100% - var(--sidebar-w));
}

body.page-cloud-theory .site-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
body.page-cloud-theory .site-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}
body.page-cloud-theory .site-nav-brand{
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
body.page-cloud-theory .site-nav-kicker{
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}
body.page-cloud-theory .site-nav-links{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.page-cloud-theory .site-nav-link{
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  transition: 0.15s;
}
body.page-cloud-theory .site-nav-link:hover{ border-color: var(--green); color: var(--green); }
body.page-cloud-theory .site-nav-link.is-active{ border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.1); }

/* PAGE HEADER */
body.page-cloud-theory .page-header{ margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
body.page-cloud-theory .page-header h1{ font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
body.page-cloud-theory .page-header p{ color: var(--muted); font-size: 0.88rem; margin-top: 0.5rem; line-height: 1.6; max-width: 600px; }
body.page-cloud-theory .breadcrumb{ display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.75rem; font-family: 'JetBrains Mono', monospace; }
body.page-cloud-theory .breadcrumb span{ color: var(--blue); }

/* SECTIONS */
body.page-cloud-theory .section{ margin-bottom: 3.5rem; scroll-margin-top: 2rem; }
body.page-cloud-theory .section-title{
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
body.page-cloud-theory .section-icon{ font-size: 1.2rem; }
body.page-cloud-theory .section-title h2{ font-size: 1.15rem; font-weight: 800; }
body.page-cloud-theory .section-title .tag{
  font-size: 0.62rem; font-weight: 700; padding: 0.18rem 0.55rem;
  border-radius: 20px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em; white-space: nowrap;
}

/* CARDS */
body.page-cloud-theory .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
body.page-cloud-theory .card-inner{ padding: 1.25rem 1.5rem; }

/* TEXT */
body.page-cloud-theory p.body{ font-size: 0.9rem; line-height: 1.8; color: var(--text); margin-bottom: 0.75rem; }
body.page-cloud-theory p.body:last-child{ margin-bottom: 0; }
body.page-cloud-theory .highlight{ background: rgba(88,166,255,0.08); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; padding: 0.85rem 1.1rem; font-size: 0.88rem; line-height: 1.7; margin-bottom: 1rem; color: var(--text); font-style: italic; }
body.page-cloud-theory .highlight strong{ font-style: normal; color: var(--blue); }

/* TABLES */
body.page-cloud-theory .tbl-wrap{ overflow-x: auto; margin-bottom: 1rem; border-radius: 10px; border: 1px solid var(--border); }
body.page-cloud-theory table{ width: 100%; border-collapse: collapse; font-size: 0.84rem; }
body.page-cloud-theory thead tr{ background: var(--surface2); }
body.page-cloud-theory th{ padding: 0.7rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border); white-space: nowrap; }
body.page-cloud-theory td{ padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); line-height: 1.55; vertical-align: top; }
body.page-cloud-theory tr:last-child td{ border-bottom: none; }
body.page-cloud-theory tr:hover td{ background: rgba(255,255,255,0.015); }

/* KANBAN */
body.page-cloud-theory .kanban{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
body.page-cloud-theory .kanban-col{ background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
body.page-cloud-theory .kanban-head{ padding: 0.6rem 0.9rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); }
body.page-cloud-theory .kanban-body{ padding: 0.85rem; font-size: 0.82rem; line-height: 1.6; color: var(--muted); min-height: 80px; }
body.page-cloud-theory .k-todo .kanban-head{ color: var(--muted); background: rgba(139,148,158,0.08); }
body.page-cloud-theory .k-doing .kanban-head{ color: var(--yellow); background: rgba(227,179,65,0.08); }
body.page-cloud-theory .k-review .kanban-head{ color: var(--orange); background: rgba(255,153,0,0.08); }
body.page-cloud-theory .k-done .kanban-head{ color: var(--green);  background: rgba(63,185,80,0.08); }

/* PROPERTIES LIST */
body.page-cloud-theory .props{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
body.page-cloud-theory .prop-item{
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.9rem;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
body.page-cloud-theory .prop-num{ font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--blue); font-weight: 700; margin-top: 0.05rem; flex-shrink: 0; }
body.page-cloud-theory .prop-text{ font-size: 0.82rem; line-height: 1.4; }

/* DEPLOYMENT CARDS */
body.page-cloud-theory .deploy-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
body.page-cloud-theory .deploy-card{ background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
body.page-cloud-theory .deploy-card h3{ font-size: 0.82rem; font-weight: 700; margin-bottom: 0.5rem; }
body.page-cloud-theory .deploy-card p{ font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
body.page-cloud-theory .deploy-card .dc-tag{ display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 20px; margin-bottom: 0.5rem; font-family: 'JetBrains Mono', monospace; }

/* CODE BLOCK */
body.page-cloud-theory .code-block{ background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
body.page-cloud-theory .code-header{ display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); }
body.page-cloud-theory .code-lang{ font-size: 0.67rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
body.page-cloud-theory .copy-btn{ background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; padding: 0.15rem 0.5rem; cursor: pointer; transition: all 0.15s; }
body.page-cloud-theory .copy-btn:hover{ border-color: var(--green); color: var(--green); }
body.page-cloud-theory .copy-btn.ok{ border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
body.page-cloud-theory .code-body{ padding: 0.9rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.8; overflow-x: auto; white-space: pre; color: var(--text); }
body.page-cloud-theory .ck{ color: var(--blue); } body.page-cloud-theory .cv{ color: var(--yellow); } body.page-cloud-theory .cc{ color: var(--muted); }

/* URL ANATOMY */
body.page-cloud-theory .url-box{ background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; margin-bottom: 0.75rem; overflow-x: auto; }
body.page-cloud-theory .url-proto{ color: var(--green); }
body.page-cloud-theory .url-host{ color: var(--yellow); }
body.page-cloud-theory .url-path{ color: var(--blue); }
body.page-cloud-theory .url-param{ color: var(--purple); }
body.page-cloud-theory .url-legend{ display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; font-size: 0.75rem; margin-top: 0.6rem; }
body.page-cloud-theory .url-legend span{ display: flex; align-items: center; gap: 0.35rem; }
body.page-cloud-theory .url-legend .dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* TIMELINE */
body.page-cloud-theory .timeline{ display: flex; flex-direction: column; gap: 0; margin-bottom: 1rem; }
body.page-cloud-theory .tl-item{ display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: start; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
body.page-cloud-theory .tl-item:last-child{ border-bottom: none; }
body.page-cloud-theory .tl-year{ font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--yellow); padding-top: 0.05rem; }
body.page-cloud-theory .tl-text{ font-size: 0.84rem; line-height: 1.55; }
body.page-cloud-theory .tl-text strong{ color: var(--blue); }

/* SERVICE MODEL PILLS */
body.page-cloud-theory .svc-row{ display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
body.page-cloud-theory .svc-pill{ padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
body.page-cloud-theory .saas{ background: rgba(63,185,80,0.12); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
body.page-cloud-theory .paas{ background: rgba(227,179,65,0.12); color: var(--yellow); border: 1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .iaas{ background: rgba(88,166,255,0.12); color: var(--blue); border: 1px solid rgba(88,166,255,0.3); }
body.page-cloud-theory .service-pill{
  position: relative;
  cursor: pointer;
  background: rgba(139,148,158,0.12);
  color: var(--text);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
body.page-cloud-theory .service-pill.saas{ background: rgba(63,185,80,0.12); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
body.page-cloud-theory .service-pill.paas{ background: rgba(227,179,65,0.12); color: var(--yellow); border: 1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .service-pill.iaas{ background: rgba(88,166,255,0.12); color: var(--blue); border: 1px solid rgba(88,166,255,0.3); }
body.page-cloud-theory .service-pill:hover,
body.page-cloud-theory .service-pill:focus-visible,
body.page-cloud-theory .service-pill.is-open{
  border-color: var(--blue);
  transform: translateY(-1px);
  outline: none;
}
body.page-cloud-theory .service-pop{
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 300px;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(88,166,255,0.35);
  background: var(--surface);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
body.page-cloud-theory .service-pill:hover .service-pop,
body.page-cloud-theory .service-pill:focus-visible .service-pop,
body.page-cloud-theory .service-pill.is-open .service-pop{
  opacity: 1;
  visibility: visible;
}
body.page-cloud-theory .service-pill.copied{
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(63,185,80,0.35) inset;
}

@media (max-width: 768px) {
  body.page-cloud-theory .service-pop{
    left: 0;
    transform: none;
    max-width: min(84vw, 300px);
  }
}

/* REST properties */
body.page-cloud-theory .rest-list{ display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
body.page-cloud-theory .rest-item{ display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.65rem 0.9rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
body.page-cloud-theory .rest-num{ font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; color: var(--orange); padding-top: 0.05rem; }
body.page-cloud-theory .rest-text{ font-size: 0.84rem; line-height: 1.5; }
body.page-cloud-theory .rest-text strong{ color: var(--text); }
body.page-cloud-theory .rest-text small{ color: var(--muted); font-size: 0.76rem; }

/* SEARCH HIGHLIGHT */
body.page-cloud-theory mark{ background: rgba(227,179,65,0.3); color: var(--yellow); border-radius: 2px; padding: 0 2px; }

/* SECTION DIVIDER */
body.page-cloud-theory .divider{ height: 1px; background: var(--border); margin: 2rem 0; }

/* NOTE BOX */
body.page-cloud-theory .note-box{ background: rgba(255,153,0,0.07); border: 1px solid rgba(255,153,0,0.25); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--warn); line-height: 1.6; margin-bottom: 1rem; }
body.page-cloud-theory .info-box{ background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.2); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--blue); line-height: 1.6; margin-bottom: 1rem; }

@media (max-width: 768px) {
  body.page-cloud-theory .sidebar{ transform: translateX(-100%); }
  body.page-cloud-theory .main{ margin-left: 0; max-width: 100%; padding: 1.5rem 1rem 4rem; }
  body.page-cloud-theory .kanban{ grid-template-columns: 1fr 1fr; }
}

/* inline style migration: cloud-computing-theorie.html */
body.page-cloud-theory .page-cloud-theory-inl-1 { background:rgba(63,185,80,0.1);color:var(--green);border:1px solid rgba(63,185,80,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-2 { background:rgba(88,166,255,0.1);color:var(--blue);border:1px solid rgba(88,166,255,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-3 { background:rgba(227,179,65,0.1);color:var(--yellow);border:1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-4 { color:var(--muted);font-size:0.78rem; }
body.page-cloud-theory .page-cloud-theory-inl-5 { color:var(--muted);font-size:0.78rem; }
body.page-cloud-theory .page-cloud-theory-inl-6 { color:var(--muted);font-size:0.78rem; }
body.page-cloud-theory .page-cloud-theory-inl-7 { color:var(--muted);font-size:0.78rem; }
body.page-cloud-theory .page-cloud-theory-inl-8 { color:var(--muted);font-size:0.78rem; }
body.page-cloud-theory .page-cloud-theory-inl-9 { color:var(--blue); }
body.page-cloud-theory .page-cloud-theory-inl-10 { background:rgba(227,179,65,0.1);color:var(--yellow);border:1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-11 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-12 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-13 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-14 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-15 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-16 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-17 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-18 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-19 { font-size:0.65rem;padding:0.1rem 0.4rem; }
body.page-cloud-theory .page-cloud-theory-inl-20 { background:rgba(88,166,255,0.1);color:var(--blue);border:1px solid rgba(88,166,255,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-21 { background:rgba(63,185,80,0.1);color:var(--green);border:1px solid rgba(63,185,80,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-22 { background:rgba(227,179,65,0.1);color:var(--yellow);border:1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-23 { background:rgba(210,168,255,0.1);color:var(--purple);border:1px solid rgba(210,168,255,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-24 { background:rgba(57,211,187,0.1);color:var(--teal);border:1px solid rgba(57,211,187,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-25 { background:rgba(57,211,187,0.1);color:var(--teal);border:1px solid rgba(57,211,187,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-26 { margin-bottom:0; }
body.page-cloud-theory .page-cloud-theory-inl-27 { color:var(--green); }
body.page-cloud-theory .page-cloud-theory-inl-28 { color:var(--red); }
body.page-cloud-theory .page-cloud-theory-inl-29 { background:rgba(255,153,0,0.1);color:var(--orange);border:1px solid rgba(255,153,0,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-30 { margin-bottom:1rem; }
body.page-cloud-theory .page-cloud-theory-inl-31 { background:rgba(63,185,80,0.1);color:var(--green);border:1px solid rgba(63,185,80,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-32 { background:rgba(88,166,255,0.1);color:var(--blue);border:1px solid rgba(88,166,255,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-33 { background:rgba(227,179,65,0.1);color:var(--yellow);border:1px solid rgba(227,179,65,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-34 { background:rgba(210,168,255,0.1);color:var(--purple);border:1px solid rgba(210,168,255,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-35 { background:rgba(248,81,73,0.1);color:var(--red);border:1px solid rgba(248,81,73,0.3); }
body.page-cloud-theory .page-cloud-theory-inl-36 { margin-bottom:1rem; }
body.page-cloud-theory .page-cloud-theory-inl-37 { margin-bottom:0.75rem; }
body.page-cloud-theory .page-cloud-theory-inl-38 { background:var(--green); }
body.page-cloud-theory .page-cloud-theory-inl-39 { background:var(--yellow); }
body.page-cloud-theory .page-cloud-theory-inl-40 { background:var(--blue); }
body.page-cloud-theory .page-cloud-theory-inl-41 { background:var(--purple); }
body.page-cloud-theory .page-cloud-theory-inl-42 { font-family:monospace;font-size:0.75rem; }
body.page-cloud-theory .page-cloud-theory-inl-43 { height:1.25rem; }
body.page-cloud-theory .page-cloud-theory-inl-44 { font-family:monospace; }
body.page-cloud-theory .page-cloud-theory-inl-45 { font-family:monospace; }
body.page-cloud-theory .page-cloud-theory-inl-46 { margin-top:1rem; }
body.page-cloud-theory .page-cloud-theory-inl-47 { font-family:monospace; }
body.page-cloud-theory .page-cloud-theory-inl-48 { font-family:monospace; }
body.page-cloud-theory .page-cloud-theory-inl-49 { display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.75rem; }
body.page-cloud-theory .page-cloud-theory-inl-50 { background:rgba(255,153,0,0.1);border:1px solid rgba(255,153,0,0.3);color:var(--orange);padding:0.5rem 1rem;border-radius:8px;font-size:0.82rem;font-weight:700;text-decoration:none; }
body.page-cloud-theory .page-cloud-theory-inl-51 { background:rgba(88,166,255,0.08);border:1px solid rgba(88,166,255,0.2);color:var(--blue);padding:0.5rem 1rem;border-radius:8px;font-size:0.82rem;font-weight:700;text-decoration:none; }

/* Global nav component */
.site-nav {
  width: 100%;
  background: #161b22 !important;
  border: none !important;
  border: 1px solid #30363d !important;
  border-radius: 12px !important;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  padding: 0 !important;
  overflow: hidden;
}

.site-nav-top {
  background: #ff9900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 2rem !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
}

.site-nav-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.site-nav-brand {
  font-size: 0.72rem !important;
  font-weight: 800;
  color: #000 !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

.site-nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  padding: 0 1.5rem !important;
  border-radius: 0 0 12px 12px;
}

.site-nav-link {
  font-size: 0.78rem !important;
  font-weight: 700;
  color: #8b949e !important;
  text-decoration: none !important;
  padding: 0.75rem 1.1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: transparent !important;
}

.site-nav-link:hover {
  color: #e6edf3 !important;
  border-bottom-color: #30363d;
}

.site-nav-link.is-active {
  color: #ff9900 !important;
  border-bottom-color: #ff9900 !important;
  background: transparent !important;
}

.nav-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #30363d;
  margin: 0 0.25rem;
  flex-shrink: 0;
  align-self: center;
}

/* Global Theme Toggle + Light Mode */
.theme-toggle{
  border: 1px solid var(--border, #30363d);
  background: var(--surface2, #1c2333);
  color: var(--text, #e6edf3);
  border-radius: 999px;
  padding: 0.26rem 0.62rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.2;
}
.theme-toggle:hover{
  border-color: var(--blue, #58a6ff);
  color: var(--blue, #58a6ff);
}

body.theme-light.page-index,
body.theme-light.page-aws-cli,
body.theme-light.page-aws-s3,
body.theme-light.page-aws-s3-sync,
body.theme-light.page-ssh-key,
body.theme-light.page-cloud-theory,
body.theme-light.page-ec2-ui,
body.theme-light.page-server-link,
body.theme-light.page-cidr-explain{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #eef3f9;
  --border: #d6deea;
  --text: #0f172a;
  --muted: #475569;
  --blue: #1559c1;
  --green: #0b8f5a;
  --yellow: #996600;
  --warn: #b45309;
  --purple: #7e57c2;
  --red: #c62828;
  --orange: #d97706;
}

body.theme-light.page-aws-sg{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #eef3f9;
  --border: #d6deea;
  --text: #0f172a;
  --muted: #475569;
  --ssh: #0b8f5a;
  --rdp: #1559c1;
  --http: #d9480f;
  --https: #7e57c2;
  --db: #b36b00;
  --other: #0c7aa5;
  --warn: #b45309;
}

body.theme-light.page-index{
  background:
    radial-gradient(circle at 10% 10%, rgba(21,89,193,0.10), transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(11,143,90,0.09), transparent 35%),
    var(--bg);
}

body.theme-light.page-cloud-theory .site-nav-link.is-active,
body.theme-light.page-aws-cli .site-nav-link.is-active,
body.theme-light.page-aws-s3 .site-nav-link.is-active,
body.theme-light.page-aws-s3-sync .site-nav-link.is-active,
body.theme-light.page-ssh-key .site-nav-link.is-active,
body.theme-light.page-ec2-ui .site-nav-link.is-active,
body.theme-light.page-server-link .site-nav-link.is-active,
body.theme-light.page-aws-sg .site-nav-link.is-active,
body.theme-light.page-cidr-explain .site-nav-link.is-active,
body.theme-light.page-index .site-nav-link.is-active{
  background: rgba(21,89,193,0.10);
}

body.theme-light.page-cidr-explain{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #eef3f9;
  --border: #d6deea;
  --text: #0f172a;
  --muted: #475569;
  --accent: #1559c1;
  --accent2: #d97706;
  --accent3: #0b8f5a;
  --bit0: #d6deea;
  --bit1: #1559c1;
}
body.theme-light.page-cidr-explain::before{
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}
body.theme-light.page-cidr-explain p{
  color: #334155;
}
body.theme-light.page-cidr-explain .formula{
  background: linear-gradient(135deg, rgba(21, 89, 193, 0.08), rgba(11, 143, 90, 0.06));
  border-color: rgba(21, 89, 193, 0.22);
}
body.theme-light.page-cidr-explain .page-subnet-calc{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #eef3f9;
  --border: #d6deea;
  --locked: #1559c1;
  --locked-bg: #eaf1fd;
  --locked-border: #b9cef4;
  --free: #0b8f5a;
  --free-bg: #e8f7ef;
  --free-border: #b8e5cb;
  --text: #0f172a;
  --muted: #475569;
  --accent: #1559c1;
}

/* subnet-calculator.html */
.page-subnet-calc,
.page-subnet-calc *,
.page-subnet-calc *::before,
.page-subnet-calc *::after { box-sizing: border-box; }

.page-subnet-calc h1,
.page-subnet-calc p { margin: 0; }

.page-subnet-calc {
  --bg: #0d0f14;
  --surface: #141720;
  --surface2: #1a1e2e;
  --border: #252a3d;
  --locked: #00b4d8;
  --locked-bg: #003d4d;
  --locked-border: #0077a0;
  --free: #00e5a0;
  --free-bg: #003d2a;
  --free-border: #00a06a;
  --text: #e8ecf5;
  --muted: #6b7394;
  --accent: #7c6cfc;

  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  padding: 40px 20px;
}

.page-subnet-calc .container { max-width: 1280px; margin: 0 auto; }
.page-subnet-calc .site-nav { margin-bottom: 22px; }

.page-subnet-calc h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 6px;
}
.page-subnet-calc .subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 36px;
}

.page-subnet-calc .input-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 32px; }
.page-subnet-calc .field { display: flex; flex-direction: column; gap: 6px; }
.page-subnet-calc label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.page-subnet-calc input[type="text"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  padding: 10px 14px;
  border-radius: 6px;
  outline: none;
  width: 200px;
  transition: border-color 0.2s;
}
.page-subnet-calc input[type="text"]:focus { border-color: var(--accent); }
.page-subnet-calc input[type="text"].error { border-color: #ff6b6b; }

.page-subnet-calc .slider-wrap { flex: 1; min-width: 220px; }
.page-subnet-calc .slider-label-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.page-subnet-calc .cidr-badge { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.page-subnet-calc input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.page-subnet-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,108,252,0.25);
  transition: box-shadow 0.2s;
}
.page-subnet-calc input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(124,108,252,0.35); }
.page-subnet-calc .range-ticks { display: flex; justify-content: space-between; margin-top: 4px; }
.page-subnet-calc .range-ticks span { font-size: 0.6rem; color: var(--muted); }

.page-subnet-calc .viz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 20px 20px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.page-subnet-calc .viz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--locked) 0%, var(--accent) 50%, var(--free) 100%);
}
.page-subnet-calc .viz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.page-subnet-calc .viz-title { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page-subnet-calc .legend { display: flex; gap: 16px; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.page-subnet-calc .legend-item { display: flex; align-items: center; gap: 5px; }
.page-subnet-calc .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.page-subnet-calc .legend-dot.locked { background: var(--locked); }
.page-subnet-calc .legend-dot.free { background: var(--free); }

.page-subnet-calc .bits-grid { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
.page-subnet-calc .octet-group { display: flex; flex-direction: column; align-items: center; }
.page-subnet-calc .bits-row { display: flex; gap: 2px; }
.page-subnet-calc .octet-sep { width: 10px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; font-size: 1.1rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.page-subnet-calc .bit {
  width: 26px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  transition: all 0.15s ease;
  flex-shrink: 0;
  position: relative;
  border: 1px solid transparent;
}
.page-subnet-calc .bit.locked { background: var(--locked-bg); border-color: var(--locked-border); color: var(--locked); }
.page-subnet-calc .bit.free { background: var(--free-bg); border-color: var(--free-border); color: var(--free); }
.page-subnet-calc .bit:hover { filter: brightness(1.25); }
.page-subnet-calc .bit-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 0.58rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  color: var(--text);
}
.page-subnet-calc .bit:hover .bit-tooltip { opacity: 1; }
.page-subnet-calc .octet-label { margin-top: 8px; text-align: center; line-height: 1.4; }
.page-subnet-calc .octet-label .octet-num { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.06em; }
.page-subnet-calc .octet-label .octet-val { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.page-subnet-calc .octet-underline { height: 2px; border-radius: 1px; margin-top: 4px; width: 100%; transition: background 0.3s; }
.page-subnet-calc .octet-underline.locked { background: var(--locked); }
.page-subnet-calc .octet-underline.free { background: var(--free); }
.page-subnet-calc .octet-underline.mixed { background: linear-gradient(90deg, var(--locked) var(--mix-pct, 50%), var(--free) var(--mix-pct, 50%)); }

.page-subnet-calc .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.page-subnet-calc .result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.page-subnet-calc .result-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }
.page-subnet-calc .result-card.net-card::after { background: var(--locked); }
.page-subnet-calc .result-card.host-card::after { background: var(--free); }
.page-subnet-calc .result-card.mask-card::after { background: var(--accent); }
.page-subnet-calc .result-card.subnet-card::after { background: #f0a500; }
.page-subnet-calc .result-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.page-subnet-calc .result-value { font-size: 1.3rem; font-weight: 700; color: var(--text); word-break: break-all; }
.page-subnet-calc .result-value.big { font-size: 1.05rem; }
.page-subnet-calc .result-sub { font-size: 0.65rem; color: var(--muted); margin-top: 4px; }
.page-subnet-calc .result-label,
.page-subnet-calc .result-value,
.page-subnet-calc .result-sub,
.page-subnet-calc .addr-title,
.page-subnet-calc .subnet-title,
.page-subnet-calc .addr-val,
.page-subnet-calc .subnet-badge,
.page-subnet-calc .st-head,
.page-subnet-calc .st-cell,
.page-subnet-calc .error-msg,
.page-subnet-calc .viz-title,
.page-subnet-calc .legend {
  font-family: 'JetBrains Mono', monospace;
}

.page-subnet-calc .addr-section,
.page-subnet-calc .subnet-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.page-subnet-calc .subnet-section { margin-top: 14px; }
.page-subnet-calc .addr-title,
.page-subnet-calc .subnet-title {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-subnet-calc .addr-title { margin-bottom: 14px; }
.page-subnet-calc .addr-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
.page-subnet-calc .addr-row:last-child { border-bottom: none; }
.page-subnet-calc .addr-tag { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; min-width: 80px; text-align: center; }
.page-subnet-calc .addr-tag.net { background: var(--locked-bg); color: var(--locked); border: 1px solid var(--locked-border); }
.page-subnet-calc .addr-tag.bcast { background: #2d1f00; color: #f0a500; border: 1px solid #6b4800; }
.page-subnet-calc .addr-tag.first { background: var(--free-bg); color: var(--free); border: 1px solid var(--free-border); }
.page-subnet-calc .addr-tag.last { background: #1e0e2a; color: #c084fc; border: 1px solid #6b3d9a; }
.page-subnet-calc .addr-val { font-size: 0.85rem; color: var(--text); }
.page-subnet-calc .error-msg { font-size: 0.7rem; color: #ff6b6b; margin-top: 6px; min-height: 16px; }

.page-subnet-calc .subnet-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.page-subnet-calc .subnet-badge { font-size: 0.65rem; background: #2d2000; color: #f0a500; border: 1px solid #6b4800; padding: 2px 10px; border-radius: 20px; letter-spacing: 0.06em; }
.page-subnet-calc .subnet-table {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  gap: 0;
  font-size: 0.72rem;
  min-width: 980px;
}
.page-subnet-calc .subnet-section,
.page-subnet-calc .addr-section {
  overflow-x: auto;
}
.page-subnet-calc .st-head { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 8px; border-bottom: 1px solid var(--border); }
.page-subnet-calc .st-cell { padding: 6px 8px; border-bottom: 1px solid rgba(37,42,61,0.6); color: var(--text); display: flex; align-items: center; }
.page-subnet-calc .st-cell.num { color: var(--muted); font-size: 0.62rem; }
.page-subnet-calc .st-cell.highlight { color: var(--locked); font-weight: 700; }
.page-subnet-calc .st-cell.highlight-green { color: var(--free); }
.page-subnet-calc .st-cell.highlight-orange { color: #f0a500; }
.page-subnet-calc .st-cell.highlight-purple { color: #c084fc; }
.page-subnet-calc .subnet-row-current .st-cell { background: rgba(124,108,252,0.08); border-bottom-color: rgba(124,108,252,0.2); }
.page-subnet-calc .subnet-row-current .st-cell:first-child { border-left: 2px solid var(--accent); }
.page-subnet-calc .subnet-truncated { font-size: 0.65rem; color: var(--muted); text-align: center; padding: 10px; font-style: italic; }

@media (max-width: 600px) {
  .page-subnet-calc .bit { width: 20px; height: 25px; font-size: 0.6rem; }
  .page-subnet-calc .result-value { font-size: 1rem; }
  .page-subnet-calc .subnet-table { grid-template-columns: auto 1fr 1fr; }
  .page-subnet-calc .st-head.hide-mobile,
  .page-subnet-calc .st-cell.hide-mobile { display: none; }
}

/* cidr-erklaerung(1).html typography */
body.page-cidr-explain {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body.page-cidr-explain h1,
body.page-cidr-explain h2,
body.page-cidr-explain p,
body.page-cidr-explain .subtitle {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}