:root {
  --ink: #101114;
  --paper: #f7f5ef;
  --white: #fff;
  --line: #d9d7d0;
  --muted: #686b73;
  --blue: #2764ff;
  --cyan: #35d9f1;
  --green: #21b573;
  --yellow: #ffcb45;
  --orange: #ff7548;
  --red: #f04452;
  --purple: #7a50ff;
  --shadow: 0 24px 70px rgba(13, 17, 28, .14);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.45 "Trebuchet MS", "Segoe UI", sans-serif;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, .button { min-height: 48px; cursor: pointer; }
.hidden { display: none !important; }
.warning-ribbon {
  padding: .5rem 1rem;
  color: #2a2100;
  background: var(--yellow);
  text-align: center;
  font: 800 .7rem/1.25 "Courier New", monospace;
  letter-spacing: .08em;
}
.site-header {
  width: min(1180px, calc(100% - 2rem));
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(16,17,20,.13);
}
.brand { color: var(--ink); text-decoration: none; font: 900 1.12rem/1 "Courier New", monospace; letter-spacing: .06em; }
.brand span { color: var(--blue); }
.brand small { display: block; margin-top: .28rem; color: var(--muted); font-size: .54rem; letter-spacing: .12em; }
#lab-nav { display: flex; align-items: center; gap: .3rem; }
#lab-nav a { padding: .58rem .7rem; border-radius: 999px; color: #555963; text-decoration: none; font-size: .82rem; font-weight: 800; }
#lab-nav a:hover, #lab-nav a:focus { color: var(--ink); background: rgba(16,17,20,.07); }
.nav-toggle { display: none; width: auto; margin: 0; padding: .55rem .8rem; border: 1px solid rgba(16,17,20,.2); border-radius: 9px; color: var(--ink); background: transparent; }
.page-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2.6rem 0 5rem; }
.site-footer { padding: 1.2rem; color: #757983; background: #ece9e1; text-align: center; font: .7rem/1.4 "Courier New", monospace; letter-spacing: .05em; }
.eyebrow, .task-number, label { font: 800 .7rem/1.2 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin-top: 0; line-height: 1.04; }
h1 { font-size: clamp(2.35rem, 7vw, 5.6rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -.035em; }
h3 { font-size: 1.3rem; }
.button, button {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  padding: .78rem 1rem;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--blue);
  font-weight: 900;
  text-decoration: none;
}
.button.secondary, button.secondary { color: var(--ink); background: transparent; border: 1px solid var(--line); }
button.danger, .button.danger { background: var(--red); }
label { display: block; margin: .9rem 0 .34rem; color: #5f6470; }
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: .8rem .9rem;
  border: 1px solid #ccd0d8;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
}
textarea { min-height: 105px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(39,100,255,.18); border-color: var(--blue); }
form button { margin-top: 1rem; }
.inline-error { margin: .8rem 0; padding: .75rem .9rem; border-radius: 9px; color: #9f1825; background: #ffe9eb; font-weight: 800; }
.task-card { padding: 1.6rem; border-radius: 24px; color: #fff; background: #14161c; box-shadow: var(--shadow); }
.task-card .task-number { color: var(--yellow); }
.task-card h2 { margin: .6rem 0 1.2rem; }
.task-card ol { margin: 0; padding-left: 1.2rem; }
.task-card li { margin: .65rem 0; }
.task-card p:last-child { margin-bottom: 0; }
.fake-only { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); color: #c9ccd5; }
.code-card, .trainer-drawer { margin: 1.2rem 0; }
.code-card { padding: 1rem; border: 1px solid #d4d7df; border-radius: 14px; background: #fff; }
pre, code { font-family: "Courier New", monospace; }
pre { margin: .7rem 0; padding: 1rem; overflow-x: auto; border-radius: 9px; color: #c3ffd7; background: #12161d; white-space: pre-wrap; overflow-wrap: anywhere; }
.trainer-drawer { border: 1px dashed #a7abb5; border-radius: 14px; background: rgba(255,255,255,.6); }
.trainer-drawer summary { min-height: 50px; padding: .95rem 1rem; cursor: pointer; font-weight: 900; }
.trainer-drawer .code-card { margin: 0; border: 0; border-top: 1px dashed #a7abb5; border-radius: 0 0 14px 14px; }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th, td { padding: .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e6e9; overflow-wrap: anywhere; }
th { font: 800 .68rem/1.3 "Courier New", monospace; text-transform: uppercase; }

/* Eingang und Missionen */
body[data-page="home"] { background: #101114; color: #f8f5eb; }
body[data-page="home"] .site-header { border-color: #31333a; }
body[data-page="home"] .brand, body[data-page="home"] #lab-nav a { color: #f8f5eb; }
body[data-page="home"] .nav-toggle,
body[data-page="blind-sqli"] .nav-toggle,
body[data-page="trojaner"] .nav-toggle,
body[data-page="cookie-stealer"] .nav-toggle,
body[data-page="logs"] .nav-toggle,
body[data-page="sqlmap"] .nav-toggle { color: #fff; border-color: #ffffff55; }
body[data-page="home"] .site-footer { background: #090a0c; }
.mission-hero { position: relative; padding: 3rem 0 2.2rem; }
.mission-hero::after { content: "10"; position: absolute; right: 0; top: -.5rem; color: rgba(255,255,255,.035); font: 900 clamp(8rem, 25vw, 19rem)/1 Georgia, serif; }
.mission-hero .eyebrow { color: var(--cyan); }
.mission-hero h1 { position: relative; z-index: 1; max-width: 900px; margin: .6rem 0 1rem; font-family: Georgia, serif; }
.mission-hero em { color: var(--yellow); font-weight: 400; }
.mission-hero p:last-child { color: #aeb2be; font-size: 1.18rem; }
.safety-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-bottom: 2.2rem; padding: 1rem 1.2rem; border: 1px solid #363943; border-radius: 12px; background: #181a20; }
.safety-ticket span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #101114; background: var(--yellow); font-weight: 900; }
.safety-ticket strong { margin-right: 1.2rem; color: #d8dae1; font-size: .84rem; }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mission { position: relative; min-height: 235px; padding: 1.25rem; overflow: hidden; border-radius: 18px; color: #fff; text-decoration: none; transition: transform .2s ease; }
.mission:hover { transform: translateY(-5px) rotate(-.3deg); }
.mission b { position: absolute; right: 1rem; top: .6rem; opacity: .22; font: 900 4rem/1 Georgia, serif; }
.mission span { display: block; margin-bottom: 3.8rem; font: 800 .72rem/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.mission strong { display: block; max-width: 250px; font: 900 1.55rem/1.05 Georgia, serif; }
.mission small { position: absolute; left: 1.25rem; bottom: 1.1rem; padding: .4rem .65rem; border-radius: 999px; color: #16171a; background: rgba(255,255,255,.86); font-weight: 900; }
.mission.completed { box-shadow: inset 0 0 0 3px #64eda9; }
.mission-complete { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem .55rem; border-radius: 999px; color: #0b4d32; background: #c9f8df; font-size: .68rem; font-style: normal; font-weight: 900; }
.mission-social { background: linear-gradient(140deg, #fd477f, #7e48ed); }
.mission-phish { color: #101114; background: linear-gradient(145deg, #fff, #dbe7ff); }
.mission-sqli { background: linear-gradient(145deg, #ff7a2f, #dc2f20); }
.mission-blind { background: linear-gradient(145deg, #6d3df5, #281d5d); }
.mission-xss { background: linear-gradient(145deg, #00a57f, #063b3d); }
.mission-wifi { color: #352115; background: linear-gradient(145deg, #f2d0a2, #bc8159); }
.mission-drive { color: #091c2b; background: linear-gradient(145deg, #4cd5ff, #98f0e4); }
.mission-game { background: linear-gradient(145deg, #ec315d, #361b86); }
.mission-cookie { background: linear-gradient(145deg, #e61c2c, #151515); }
.mission-upload { color: #0a241b; background: linear-gradient(145deg, #8ef2c4, #dfff68); }
.trainer-entry { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: 1.2rem 1.4rem; border: 1px solid #343740; border-radius: 14px; color: #f6f3eb; background: #181a20; text-decoration: none; }
.trainer-entry span { color: #969ba8; }

/* Laborcode */
body[data-page="gate"] { background: #0b1018; color: #fff; }
body[data-page="gate"] .site-header, body[data-page="gate"] .site-footer { display: none; }
body[data-page="gate"] .page-shell { min-height: calc(100vh - 30px); display: grid; place-items: center; }
.gate-card { width: min(820px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid #2d3441; border-radius: 26px; background: #151b25; box-shadow: 0 35px 100px #0008; }
.gate-art { position: relative; min-height: 500px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #2d68ff 0 3%, transparent 3.5%), repeating-radial-gradient(circle, transparent 0 34px, #2d68ff22 35px 36px), #0a0f18; }
.gate-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, #5fe5ff19 50%, transparent 60%); animation: scan 4s infinite; }
.gate-art small { position: absolute; left: 1rem; bottom: 1rem; color: #6adff3; font: .68rem "Courier New", monospace; letter-spacing: .12em; }
.gate-lock { position: relative; z-index: 1; font: 7rem Georgia, serif; color: #fff; text-shadow: 0 0 45px #3de1ff; transform: rotate(180deg); }
.gate-content { padding: clamp(1.5rem, 5vw, 3.5rem); }
.gate-content .eyebrow { color: #6adff3; }
.gate-content h1 { margin: .5rem 0; }
.gate-content > p { color: #aeb6c5; }
.gate-content form { margin: 2rem 0 1rem; }
.gate-content label { color: #aeb6c5; }
.gate-content input { color: #fff; background: #0c1119; border-color: #3b4556; font-size: 1.25rem; letter-spacing: .25em; }
.gate-content button { width: 100%; background: #2d68ff; }
.gate-content > small { color: #7f8898; }
@keyframes scan { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* Social Profil */
body[data-page="register"] { background: linear-gradient(145deg, #ffd8e6, #e2d9ff 48%, #d5f6ff); }
.phone-stage { display: grid; grid-template-columns: minmax(290px, 520px) minmax(260px, 380px); justify-content: center; align-items: center; gap: 3rem; }
.phone-frame { max-width: 460px; padding: .7rem 1.25rem 1.5rem; border: 9px solid #16171b; border-radius: 40px; background: #fff; box-shadow: 0 30px 80px #583b7140; }
.phone-status { display: flex; justify-content: space-between; padding: .2rem .25rem .8rem; font-size: .7rem; font-weight: 900; }
.vibe-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.vibe-head strong, .vibe-app > header strong { font: italic 900 1.7rem Georgia, serif; }
.vibe-avatar { width: 78px; height: 78px; display: grid; place-items: center; margin: 1.1rem auto .7rem; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #fc3f7c, #7747e9); font-size: 2rem; }
.phone-frame h1 { margin: 0; text-align: center; font-size: 2rem; }
.microcopy { margin-top: .2rem; color: #7a7d85; text-align: center; }
.app-form { margin-top: 1rem; }
.app-form button { width: 100%; }
.phone-frame textarea { min-height: 78px; }

/* Social Feed */
body[data-page="social"] { background: #f6f2ed; }
.success-toast { margin-bottom: 1rem; padding: 1rem 1.2rem; border-radius: 14px; color: #075f3d; background: #d9fae9; box-shadow: var(--shadow); }
.success-toast b { margin-right: .4rem; }
.vibe-app { overflow: hidden; border: 1px solid #dedbd5; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.vibe-app > header { height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.4rem; border-bottom: 1px solid #eee; }
.vibe-app > header span { font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.vibe-app > header a { justify-self: end; color: var(--blue); font-weight: 900; text-decoration: none; }
.story-row { display: flex; gap: 1rem; padding: 1rem 1.4rem; overflow-x: auto; border-bottom: 1px solid #eee; }
.story { flex: 0 0 64px; text-align: center; }
.story span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto .3rem; border: 3px solid #f3487f; border-radius: 50%; background: #f1e8ff; font-weight: 900; }
.story small { display: block; overflow: hidden; text-overflow: ellipsis; }
.social-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 1px; background: #eee; }
.feed, .social-compose { background: #fafafa; }
.feed { padding: 1.2rem; }
.feed-post { max-width: 560px; margin: 0 auto 1.2rem; border: 1px solid #e2e2e2; border-radius: 13px; background: #fff; }
.post-head { display: flex; align-items: center; gap: .6rem; padding: .75rem; }
.post-head b:last-child { margin-left: auto; }
.mini-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #7549e8; font-weight: 900; }
.post-photo { aspect-ratio: 4/3; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 70% 20%, #ffda62, transparent 24%), linear-gradient(145deg, #e83e79, #6a4be3); }
.post-photo span { font: 900 clamp(2rem, 8vw, 4.5rem)/1 Georgia, serif; opacity: .9; }
.post-actions { padding: .8rem .8rem 0; font-size: 1.3rem; word-spacing: .6rem; }
.feed-post > p { padding: 0 .8rem .8rem; }
.social-compose { padding: 1.5rem; }
.social-compose h2 { font-size: 2rem; }
.social-compose form { padding: 0; }
.learn-card { display: grid; gap: .3rem; margin-top: 1.4rem; padding: 1rem; border-radius: 12px; color: #174e38; background: #dff8ea; }

/* Phishing */
body[data-page="phishing"] { background: #eef2f9; }
.phishing-scene { display: grid; grid-template-columns: .85fr 1fr .85fr; gap: 1.4rem; align-items: center; }
.message-preview { display: flex; gap: .8rem; padding: 1rem; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.sender-dot { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#fc3f7c,#7247e7); font-weight: 900; }
.message-preview div { display: grid; gap: .25rem; }
.message-preview small { color: #8a8e98; }
.message-preview p { margin: .4rem 0; }
.message-preview a { color: var(--blue); font-weight: 900; text-decoration: none; }
.picsta-login { padding: 2rem; border: 1px solid #dfe2e9; border-radius: 8px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.picsta-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto .4rem; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#fc3f7c,#7247e7); font-size: 2rem; }
.picsta-login h1 { margin: .2rem 0; font: italic 900 2.8rem Georgia, serif; }
.picsta-login > p { color: #777b84; }
.picsta-login form { text-align: left; }
.demo-rule { display: block; margin-top: 1rem; color: #a22b37; }
.phishing-task { background: #1b2030; }
.fake-feed { width: min(520px, 100%); margin: 0 auto; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.fake-feed > header { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #eee; }
.fake-feed > header strong { font: italic 900 1.7rem Georgia, serif; }
.fake-story-row { display: flex; gap: .7rem; padding: .8rem; }
.fake-story-row i { width: 52px; height: 52px; border: 3px solid #f3487f; border-radius: 50%; background: #efe9ff; }
.fake-feed article { padding-bottom: 1rem; }
.fake-photo { aspect-ratio: 1.35; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#3d63db,#ef4b77); }
.fake-photo span { font: 900 3rem Georgia, serif; }
.fake-likes, .fake-feed article > strong, .fake-feed article { padding-left: 1rem; padding-right: 1rem; }
.fake-likes { padding-top: .7rem; font-size: 1.3rem; }
.login-success { display: flex; gap: .8rem; margin: 1rem; padding: .9rem; border-radius: 12px; color: #086843; background: #dcfaeb; }
.login-success > span { font-size: 1.5rem; }
.login-success div { display: grid; }
.reveal-later { width: min(520px, 100%); margin: 1rem auto; display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: 14px; color: #fff; background: #17191f; }
.reveal-later > span { padding: .35rem .5rem; color: #17191f; background: var(--yellow); font-weight: 900; }
.reveal-later p { margin: 0; }

/* Paket / SQLi */
body[data-page="sqli"] { background: #ebe7df; }
.parcel-app { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.parcel-app > header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.4rem; color: #fff; background: #15253a; }
.parcel-logo { display: flex; align-items: center; gap: .6rem; }
.parcel-logo span { color: var(--orange); font-size: 1.6rem; }
.parcel-logo strong { letter-spacing: .08em; }
.parcel-app > header small { color: #a6b5c7; }
.parcel-hero { padding: 2.2rem 1.5rem 5rem; color: #fff; background: linear-gradient(110deg, #f26535, #ff9440); }
.parcel-hero p { margin: 0; font-weight: 900; }
.parcel-hero h1 { margin: .2rem 0; font-size: clamp(2.5rem, 7vw, 5rem); }
.tracking-form { width: min(780px, calc(100% - 2rem)); margin: -3rem auto 1rem; padding: 1.2rem; border-radius: 14px; background: #fff; box-shadow: 0 14px 35px #592a102b; }
.tracking-form > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.tracking-form button { margin: 0; border-radius: 9px; background: #17263a; }
.parcel-results { padding: 1rem 1.5rem 1.5rem; }
.parcel-results article { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin: .7rem 0; padding: 1rem; border: 1px solid #e4e0d8; border-radius: 12px; }
.parcel-results article div { display: grid; }
.parcel-results article p { margin: 0; color: #717680; }
.parcel-results article > b { padding: .35rem .5rem; border-radius: 6px; color: #875016; background: #fff1c8; font-size: .68rem; }
.parcel-icon { font-size: 1.7rem; }
.empty-state { color: #7a7e87; text-align: center; }
.experiment-card { margin-top: 1.3rem; padding: 1.5rem; border-radius: 18px; background: #15253a; color: #fff; }
.experiment-card .task-number { color: #ff9454; }
.experiment-card h2 { margin: .5rem 0 1rem; }
.experiment-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.experiment-steps span { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; padding: .8rem; border: 1px solid #35495f; border-radius: 10px; }
.experiment-steps b { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #f16e39; }
.experiment-steps code { color: #fff2ad; }
.lesson-pop { margin-top: 1rem; color: #b9c7d5; }

/* Blind SQLi */
body[data-page="blind-sqli"] { color: #fff; background: radial-gradient(circle at 80% 0, #613bd4, transparent 32rem), #211944; }
body[data-page="blind-sqli"] .site-header { border-color: #ffffff22; }
body[data-page="blind-sqli"] .brand, body[data-page="blind-sqli"] #lab-nav a { color: #fff; }
.handle-app { width: min(700px, 100%); margin: 0 auto; padding: clamp(1.5rem,5vw,3rem); border: 1px solid #ffffff26; border-radius: 30px; background: #ffffff0d; backdrop-filter: blur(12px); box-shadow: 0 30px 90px #0004; text-align: center; }
.handle-orb { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; color: #25174d; background: #bda9ff; font: 900 2.5rem Georgia, serif; box-shadow: 0 0 50px #bda9ff66; }
.handle-app .eyebrow { color: #c9bbff; }
.handle-app h1 { margin: .5rem 0; font-size: clamp(2.4rem,7vw,4.8rem); }
.handle-app > p { color: #b8afd5; }
.handle-form { margin-top: 1.8rem; text-align: left; }
.handle-form label { color: #c9bbff; }
.handle-form input { color: #fff; background: #170f34; border-color: #665593; }
.handle-form button { width: 100%; background: #9b7cff; }
.handle-result { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border-radius: 13px; text-align: left; }
.handle-result > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; }
.handle-result div { display: grid; }
.handle-result small { opacity: .75; }
.handle-result.taken { background: #f0445228; }
.handle-result.taken > span { background: var(--red); }
.handle-result.free { background: #21b57328; }
.handle-result.free > span { background: var(--green); }
.blind-lesson { width: min(700px,100%); margin: 1.3rem auto; padding: 1.4rem; border-radius: 20px; color: #231943; background: #f7f3ff; }
.blind-lesson h2 { margin: .5rem 0 1rem; }
.blind-lesson > div { display: grid; grid-template-columns: auto 1fr auto auto 1fr; align-items: center; gap: .5rem; }
.blind-lesson > div span { padding: .3rem .5rem; border-radius: 6px; background: #dfd3ff; font: 800 .68rem "Courier New", monospace; }
body[data-page="blind-sqli"] .trainer-drawer { color: #fff; border-color: #ffffff4d; background: #ffffff0b; }

/* XSS Citywall */
body[data-page="xss"] { background: #dfece8; }
.citywall { overflow: hidden; border: 2px solid #0d423d; border-radius: 0; background: #f7f2e8; box-shadow: 12px 12px 0 #0d423d; }
.citywall > header { display: flex; justify-content: space-between; align-items: end; padding: 1rem 1.4rem; color: #f7f2e8; background: #0d423d; }
.citywall > header div { display: flex; align-items: center; gap: .6rem; }
.citywall > header div span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #0d423d; background: #ffcf4c; font-weight: 900; }
.citywall > header strong { font: 900 1.25rem Georgia, serif; letter-spacing: .08em; }
.wall-search { padding: 1rem 1.4rem; border-bottom: 2px solid #0d423d; }
.wall-search form > div { display: grid; grid-template-columns: 1fr auto; }
.wall-search input, .wall-search button { border-radius: 0; border: 2px solid #0d423d; }
.wall-search button { margin: 0; color: #0d423d; background: #ffcf4c; }
.wall-layout { display: grid; grid-template-columns: 1.25fr .75fr; }
.wall-posts { padding: 1rem; border-right: 2px solid #0d423d; }
.wall-posts article { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px dashed #7d9a92; }
.wall-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 2px solid #0d423d; border-radius: 50%; background: #9fe2cb; font-weight: 900; }
.wall-posts article div { flex: 1; }
.wall-posts article small { display: block; color: #71847f; }
.wall-posts article p { margin: .5rem 0; }
.wall-posts article footer { color: #52706a; font-size: .78rem; }
.wall-compose { padding: 1.3rem; background: #fffbf2; }
.wall-compose h2 { margin: .5rem 0 1rem; }
.wall-compose input, .wall-compose textarea, .wall-compose button { border-radius: 0; border: 2px solid #0d423d; }
.wall-compose button { width: 100%; color: #fff; background: #0d423d; }
.mini-lesson { padding: .8rem; color: #0d423d; background: #c7f1e2; }

/* MITM Café */
body[data-page="mitm"] { color: #3b271b; background: #ead8c0; }
.cafe-scene { display: grid; grid-template-columns: .8fr 1fr .8fr; gap: 2rem; align-items: center; }
.cafe-sign { min-height: 290px; display: grid; place-items: center; align-content: center; padding: 2rem; border: 10px double #633f2e; border-radius: 50%; color: #f6e8d4; background: #794c36; text-align: center; transform: rotate(-3deg); box-shadow: var(--shadow); }
.cafe-sign strong { font: 900 2.6rem/1 Georgia, serif; }
.cafe-sign span, .cafe-sign small { letter-spacing: .12em; }
.wifi-phone { padding: .8rem 1rem 1.4rem; border: 9px solid #222; border-radius: 38px; background: #f7f7f7; box-shadow: var(--shadow); }
.wifi-phone h1 { margin: .5rem 0 1rem; font-size: 2.2rem; }
.network { width: 100%; min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin: .4rem 0; padding: .7rem; border: 0; border-radius: 12px; color: #222; background: #fff; text-align: left; }
.network > span { font-size: 1.5rem; }
.network div { display: grid; }
.network small { color: #8a8a8a; }
.network.evil { box-shadow: 0 0 0 2px #e55f47; }
.network.evil i { color: #e55f47; font-size: 1.5rem; }
.cafe-scene .task-card { background: #633f2e; }
.mitm-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; padding: 1.4rem; border-radius: 18px; background: #fff8ee; box-shadow: var(--shadow); }
.mitm-flow > div { display: grid; place-items: center; min-width: 120px; text-align: center; }
.mitm-flow > div span { font-size: 2rem; }
.mitm-flow .attacker { padding: .8rem; border: 3px solid var(--red); border-radius: 12px; background: #ffe8e5; }
.mitm-flow small { max-width: 180px; color: #7e4e46; }
.mitm-flow > p { max-width: 360px; }

/* Drive-by Video */
body[data-page="drive-by"] { background: #d6edf4; }
.video-page { padding: 1rem; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.video-page > header { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: center; gap: 1rem; padding-bottom: 1rem; }
.video-page > header strong { color: #e72634; font-weight: 900; }
.video-page > header input { min-height: 40px; }
.video-player { position: relative; aspect-ratio: 16/7; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at center, #397fa2, #102532); }
.video-player::before { content: "VIDEO NICHT VERFÜGBAR"; position: absolute; font: 900 clamp(1.5rem,6vw,4rem) Georgia, serif; opacity: .2; }
.video-player > span { position: relative; z-index: 1; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #e72634; font-size: 2rem; }
.fake-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg,#e72634 32%,#ffffff44 32%); }
.video-page > h1 { margin: 1rem 0 .3rem; font-size: clamp(1.5rem,4vw,2.7rem); }
.video-page > p { color: #777; }
.update-popup { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin: 1rem auto -4rem; padding: 1rem; border: 1px solid #bfc7cd; border-radius: 12px; background: #edf1f3; box-shadow: 0 20px 40px #1b364940; }
.java-cup { font-size: 3rem; }
.update-popup h2 { margin: .1rem 0; font-size: 1.35rem; }
.update-popup p { margin: 0; color: #747b80; }
.update-popup button { margin: 0; background: #1b87c7; }
.drive-result { display: flex; gap: 1rem; margin-top: 5rem; padding: 1.2rem; border-radius: 16px; color: #fff; background: #152630; }
.drive-result > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-size: 1.4rem; }
.drive-result p { margin: .3rem 0; }
.compact-task { margin-top: 1rem; background: #1b87c7; }

/* Trojaner Gaming */
body[data-page="trojaner"] { color: #fff; background: #090a12; }
body[data-page="trojaner"] .site-header { border-color: #ffffff22; }
body[data-page="trojaner"] .brand, body[data-page="trojaner"] #lab-nav a { color: #fff; }
.game-launcher { overflow: hidden; border: 1px solid #36354e; border-radius: 18px; background: #161522; box-shadow: 0 30px 90px #000; }
.game-launcher > header { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; background: #1c1b29; }
.game-logo { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #f13d69; font-weight: 900; transform: skew(-8deg); }
.game-launcher nav { display: flex; gap: 1rem; font-size: .72rem; letter-spacing: .08em; }
.game-launcher nav b { color: #ff4f78; }
.game-launcher > header > i { margin-left: auto; color: #5fffa2; font-size: .65rem; }
.game-hero { min-height: 520px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(1.5rem,6vw,4.5rem); background: radial-gradient(circle at 75% 50%, #ff3d6f55 0 3%, transparent 25%), linear-gradient(120deg,#161522 30%,#382063); }
.hot-tag { color: #ff5c82; font: 900 .72rem "Courier New", monospace; letter-spacing: .1em; }
.game-copy h1 { margin: .7rem 0; font: italic 900 clamp(3rem,9vw,6rem)/.83 "Trebuchet MS", sans-serif; transform: skew(-5deg); }
.game-copy p { color: #bcb9d0; }
.game-copy button { background: #ef3e6a; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.game-copy small { display: block; margin-top: .7rem; color: #858198; }
.crosshair { position: relative; width: min(330px,100%); aspect-ratio: 1; justify-self: center; border: 1px solid #ff5d8299; border-radius: 50%; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #ff5d8299; }
.crosshair::before { width: 1px; height: 130%; left: 50%; top: -15%; }
.crosshair::after { height: 1px; width: 130%; top: 50%; left: -15%; }
.crosshair span { position: absolute; inset: 0; display: grid; place-items: center; color: #ff5d82; font-size: 3rem; }
.installer { width: min(620px,100%); margin: 1.2rem auto; padding: 1.4rem; border: 1px solid #555267; border-radius: 14px; color: #20212a; background: #f2f2f5; box-shadow: var(--shadow); }
.installer header { display: flex; gap: .8rem; align-items: center; }
.installer header > span { font-size: 2rem; }
.installer header div { display: grid; }
.installer h2 { margin: 1.2rem 0 .5rem; font-size: 1.4rem; }
.installer ul { padding-left: 1.2rem; }
.installer-actions { display: flex; gap: .6rem; }
.installer-actions button:first-child { background: var(--red); }
.trojan-reveal { margin: 1rem 0; padding: 1.4rem; border-left: 5px solid #ff4b77; color: #fff; background: #232133; }
.trojan-reveal > strong { color: #ff6e91; font-size: 1.5rem; }
.trojan-reveal > div { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.trojan-reveal span { display: grid; padding: .8rem; background: #161522; font-weight: 900; }
.trojan-reveal small { margin-top: .3rem; color: #aaa5bd; font-weight: 400; }
.game-task { margin-top: 1rem; background: #341f70; }

/* Cookie / Streaming */
body[data-page="cookie-stealer"] { color: #fff; background: #090909; }
body[data-page="cookie-stealer"] .site-header { border-color: #ffffff22; }
body[data-page="cookie-stealer"] .brand, body[data-page="cookie-stealer"] #lab-nav a { color: #fff; }
.stream-app { overflow: hidden; border-radius: 8px; background: #121212; box-shadow: 0 30px 80px #000; }
.stream-app > header { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.4rem; background: #090909; }
.stream-app > header strong { color: #e50914; font-size: 1.5rem; font-weight: 900; }
.stream-app > header nav { color: #c4c4c4; font-size: .82rem; }
.stream-app > header span { width: 32px; height: 32px; display: grid; place-items: center; margin-left: auto; border-radius: 4px; background: #2764ff; }
.stream-hero { min-height: 460px; display: grid; align-items: center; padding: clamp(1.5rem,7vw,5rem); background: linear-gradient(90deg,#111 0 32%,transparent 70%), radial-gradient(circle at 75% 45%,#811b25,#150c0d 55%); }
.stream-hero > div { max-width: 480px; }
.stream-hero small { letter-spacing: .18em; }
.stream-hero h1 { margin: .8rem 0; font: 900 clamp(3rem,9vw,6.5rem)/.82 Georgia, serif; }
.stream-hero p { color: #d1d1d1; }
.stream-hero button { background: #fff; color: #111; }
.stream-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; padding: 1rem; }
.stream-row i { aspect-ratio: 1.6; border-radius: 5px; background: linear-gradient(145deg,#50232a,#1f2938); }
.session-reveal { display: flex; gap: 1rem; margin: 1rem 0; padding: 1.3rem; border: 1px solid #3c3c3c; border-radius: 10px; background: #181818; }
.session-reveal > span { font-size: 2.5rem; }
.session-reveal div { display: grid; gap: .3rem; }
.session-reveal code { padding: .5rem; color: #ffce64; background: #0b0b0b; }
.session-reveal p { margin: .3rem 0; color: #bebebe; }
.stream-task { background: #97151e; }

/* Trainer */
body[data-page="logs"], body[data-page="sqlmap"] { color: #e9eef5; background: #10151d; }
body[data-page="logs"] .site-header, body[data-page="sqlmap"] .site-header { border-color: #ffffff20; }
body[data-page="logs"] .brand, body[data-page="logs"] #lab-nav a, body[data-page="sqlmap"] .brand, body[data-page="sqlmap"] #lab-nav a { color: #fff; }
.trainer-login { width: min(520px,100%); margin: 2rem auto; padding: 2rem; border: 1px solid #354050; border-radius: 18px; background: #18202b; box-shadow: 0 25px 80px #0006; text-align: center; }
.trainer-badge { font-size: 3rem; }
.trainer-login .eyebrow { color: #6ee7b7; }
.trainer-login h1 { margin: .5rem 0; font-size: 3rem; }
.trainer-login p { color: #abb7c7; }
.trainer-login form { text-align: left; }
.trainer-login label { color: #aeb8c8; }
.trainer-login input { color: #fff; background: #0f151d; border-color: #425065; }
.trainer-login button { width: 100%; background: #2eb67d; }
.dashboard-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.4rem; }
.dashboard-head .eyebrow { color: #6ee7b7; }
.dashboard-head h1 { margin: .4rem 0; }
.dashboard-head p { color: #aeb8c8; }
.dashboard-head .button { flex: 0 0 auto; background: #2eb67d; }
.data-panel { margin: 1rem 0; padding: 1rem; border: 1px solid #303b4b; border-radius: 14px; background: #171e28; }
.data-panel > header { display: flex; align-items: center; gap: .8rem; }
.data-panel h2 { margin: 0; font-size: 1.5rem; }
.data-panel header p { margin: .2rem 0; color: #9ca8b8; }
.data-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-weight: 900; }
.data-icon.blue { background: #2d68ff; }.data-icon.red { background: var(--red); }.data-icon.amber { background: #b77816; }.data-icon.green { background: #168b5a; }
.data-panel table { min-width: 720px; }
.data-panel th, .data-panel td { border-color: #2b3543; }
.data-panel th { color: #8fa4ba; }
.data-panel td { color: #c6d0dc; }
.clear-secret { color: #ff8993 !important; background: #401c24; font-weight: 900; }
.reset-form { margin-top: 1.5rem; padding: 1rem; border: 1px solid #522b32; border-radius: 12px; background: #2c171b; }

/* SQLmap */
.terminal-head { padding: 1.5rem 0 2rem; }
.terminal-head > span { color: #ff6d77; letter-spacing: .35em; }
.terminal-head > p { color: #63e6a7; font: 800 .72rem "Courier New", monospace; letter-spacing: .12em; }
.terminal-head h1 { max-width: 820px; margin: .6rem 0; font-family: "Courier New", monospace; }
.terminal-head small { color: #9aa8b8; }
.terminal-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin: .8rem 0; padding: 1rem; border: 1px solid #303c4d; border-radius: 12px; background: #171f29; }
.terminal-step { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #10151d; background: #63e6a7; font-weight: 900; }
.terminal-card > div { min-width: 0; }
.terminal-card strong { color: #dce5ef; }
.terminal-card pre { color: #92f9b7; background: #0a0f15; }
.terminal-card button { color: #10151d; background: #63e6a7; }
.terminal-note { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.2rem; padding: 1rem; border-left: 4px solid #ff6d77; background: #291a20; }
.terminal-note span { color: #b8a5ac; }

/* File Upload / sichere Execution-Simulation */
body[data-page="file-upload"] { color: #13241e; background: #cfecd9; }
.profile-upload-app { overflow: hidden; border: 2px solid #173d31; border-radius: 22px; background: #fff; box-shadow: 12px 14px 0 #173d31; }
.profile-upload-app > header { display: flex; justify-content: space-between; padding: 1rem 1.3rem; color: #eaffef; background: #173d31; font: 800 .72rem "Courier New", monospace; letter-spacing: .08em; }
.profile-upload-app > header span { color: #8dffb8; }
.profile-cover { min-height: 180px; position: relative; background: linear-gradient(135deg,#8cf2c2,#ddff6d); }
.profile-cover::after { content: "UPLOAD"; position: absolute; right: 1rem; top: .2rem; color: #173d3117; font: 900 clamp(4rem,16vw,10rem)/1 Georgia,serif; }
.profile-avatar { position: absolute; left: 2rem; bottom: -48px; width: 104px; height: 104px; display: grid; place-items: center; border: 6px solid #fff; border-radius: 50%; color: #fff; background: #173d31; font: 900 2rem Georgia,serif; }
.profile-body { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; padding: 4.2rem 2rem 2rem; }
.profile-body h1 { margin: 0; font-size: 2.3rem; }
.profile-body > p { margin-top: .4rem; color: #6c7772; }
.upload-form { grid-column: 2; grid-row: 1 / 3; padding: 1.2rem; border: 2px dashed #70aa8f; border-radius: 14px; background: #f1fff6; }
.upload-form input { border-color: #90bda8; }
.upload-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .8rem; }
.upload-actions button { margin: 0; }
.upload-actions button:last-child { background: #173d31; }
.upload-form > small { display: block; margin-top: .8rem; color: #a32632; font-weight: 800; }
.upload-result { margin-top: 1.4rem; padding: 1.4rem; border: 2px solid #c33542; border-radius: 16px; background: #fff2f1; }
.upload-path { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.upload-path span { color: #1c7b4f; font-weight: 900; }
.upload-path code { padding: .3rem .5rem; color: #fff; background: #b82f3c; }
.execution-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .6rem; margin: 1.2rem 0; }
.execution-chain span { display: flex; align-items: center; gap: .6rem; padding: .75rem; border: 1px solid #d6b2b3; border-radius: 9px; background: #fff; font-weight: 900; }
.execution-chain b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #173d31; }
.execution-chain .danger-step { color: #a51f2c; border-color: #d54b57; }
.execution-chain .danger-step b { background: #c33542; }
.mock-shell { margin-top: 1.4rem; overflow: hidden; border: 1px solid #26352e; border-radius: 12px; color: #caffd9; background: #07110d; box-shadow: 0 24px 70px #173d3155; }
.mock-shell > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .75rem 1rem; color: #b8c8bf; background: #18241f; font: .7rem "Courier New",monospace; }
.mock-shell > header div { display: flex; gap: .35rem; }
.mock-shell > header div span { width: 10px; height: 10px; border-radius: 50%; background: #ef5765; }
.mock-shell > header div span:nth-child(2) { background: #ffc94a; }
.mock-shell > header div span:nth-child(3) { background: #5ad486; }
.mock-shell > header small { color: #ff8590; }
.shell-location { display: grid; grid-template-columns: auto 1fr auto 2fr; gap: .5rem; padding: 1rem; border-bottom: 1px solid #28372f; }
.shell-location span { color: #6d8779; font: 800 .62rem "Courier New",monospace; }
.shell-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1rem 0; }
.shell-actions button { min-height: 42px; margin: 0; color: #07110d; background: #79eda4; font-family: "Courier New",monospace; }
.mock-shell pre { min-height: 170px; margin: 1rem; color: #9fffc0; background: #030906; border: 1px solid #26372e; }
.upload-lesson { margin-top: 1.4rem; padding: 1.4rem; border-radius: 16px; color: #fff; background: #173d31; }
.upload-lesson .task-number { color: #b9ff6d; }
.upload-lesson h2 { margin: .5rem 0 1rem; }
.upload-lesson > div { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
.upload-lesson span { display: grid; gap: .3rem; padding: .9rem; background: #214c3e; }
.upload-lesson b { color: #b9ff6d; }

@media (max-width: 900px) {
  .mission-grid { grid-template-columns: repeat(2,1fr); }
  .phone-stage, .social-layout, .phishing-scene, .cafe-scene { grid-template-columns: 1fr; }
  .profile-body { grid-template-columns: 1fr; gap: .5rem; }
  .upload-form { grid-column: 1; grid-row: auto; }
  .phone-frame { justify-self: center; }
  .phishing-scene { max-width: 620px; margin: 0 auto; }
  .message-preview { order: 1; }.picsta-login { order: 2; }.phishing-task { order: 3; }
  .wall-layout { grid-template-columns: 1fr; }
  .wall-posts { border-right: 0; border-bottom: 2px solid #0d423d; }
  .cafe-sign { display: none; }
  .mitm-flow { flex-wrap: wrap; }
  .game-hero { grid-template-columns: 1fr; }
  .crosshair { display: none; }
}

@media (max-width: 700px) {
  .site-header { min-height: 66px; display: grid; grid-template-columns: minmax(0,1fr) auto; padding: .65rem 0; }
  .brand { min-width: 0; }
  .brand small { white-space: nowrap; }
  .nav-toggle { display: block; }
  #lab-nav { display: none; width: 100%; grid-column: 1 / -1; padding: .3rem 0; }
  #lab-nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  #lab-nav a { min-height: 46px; display: flex; align-items: center; border: 1px solid rgba(128,128,128,.25); border-radius: 8px; }
  .page-shell { padding-top: 1.4rem; padding-bottom: 3rem; }
  .gate-card { grid-template-columns: 1fr; }
  .gate-art { min-height: 190px; }
  .gate-lock { font-size: 4rem; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission { min-height: 190px; }
  .mission span { margin-bottom: 2.8rem; }
  .safety-ticket { display: grid; grid-template-columns: auto 1fr; }
  .safety-ticket strong { margin: 0; }
  .vibe-app > header { grid-template-columns: 1fr auto; }
  .vibe-app > header span { display: none; }
  .parcel-results article { grid-template-columns: auto 1fr; }
  .parcel-results article > b { grid-column: 2; justify-self: start; }
  .blind-lesson > div { grid-template-columns: 1fr; text-align: center; }
  .blind-lesson > div i { transform: rotate(90deg); }
  .update-popup { grid-template-columns: auto 1fr; margin-bottom: -6rem; }
  .update-popup button { grid-column: 1 / -1; width: 100%; }
  .drive-result { margin-top: 7rem; }
  .trojan-reveal > div { grid-template-columns: 1fr; }
  .dashboard-head { align-items: start; flex-direction: column; }
  .terminal-card { grid-template-columns: 1fr; }
  .upload-lesson > div { grid-template-columns: 1fr; }
  .stream-hero { min-height: 400px; background: linear-gradient(90deg,#111c,#1116), radial-gradient(circle at 75% 45%,#811b25,#150c0d 55%); }
}

@media (max-width: 520px) {
  .warning-ribbon { padding: .42rem .55rem; font-size: .61rem; letter-spacing: .035em; }
  .site-header, .page-shell { width: calc(100% - 1rem); }
  .brand { font-size: .98rem; }
  .brand small { font-size: .48rem; letter-spacing: .06em; }
  .page-shell { padding-top: 1rem; }
  #lab-nav.open { grid-template-columns: 1fr; }
  input, textarea, select { font-size: 16px; }
  form button, .code-card button { width: 100%; }
  .phone-frame { width: 100%; border-width: 6px; border-radius: 30px; padding-left: .9rem; padding-right: .9rem; }
  .task-card { padding: 1.2rem; border-radius: 17px; }
  .vibe-app, .parcel-app, .video-page, .game-launcher { border-radius: 12px; }
  .story-row { padding-left: .7rem; padding-right: .7rem; }
  .feed { padding: .6rem; }
  .social-compose { padding: 1rem; }
  .picsta-login { padding: 1.2rem; }
  .tracking-form > div { grid-template-columns: 1fr; }
  .tracking-form button { width: 100%; }
  .experiment-steps { grid-template-columns: 1fr; }
  .parcel-app > header small { display: none; }
  .parcel-hero { padding: 1.5rem 1rem 4.5rem; }
  .parcel-results { padding: .6rem; }
  .parcel-results article { gap: .6rem; padding: .75rem; }
  .handle-app { padding: 1.2rem; border-radius: 18px; }
  .citywall { box-shadow: 6px 6px 0 #0d423d; }
  .citywall > header small { display: none; }
  .wall-search, .wall-compose { padding: .8rem; }
  .wifi-phone { border-width: 6px; border-radius: 28px; }
  .mitm-flow > i { transform: rotate(90deg); }
  .mitm-flow > div, .mitm-flow > p { width: 100%; }
  .video-page > header { grid-template-columns: 1fr auto; }
  .video-page > header input { display: none; }
  .video-player { aspect-ratio: 16/10; }
  .update-popup { gap: .6rem; }
  .java-cup { font-size: 2rem; }
  .game-launcher nav, .game-launcher > header > i { display: none; }
  .game-hero { min-height: 430px; padding: 1.2rem; }
  .installer-actions { flex-direction: column; }
  .installer-actions button { width: 100%; }
  .stream-app > header nav { display: none; }
  .stream-hero { min-height: 380px; padding: 1.2rem; }
  .stream-row { grid-template-columns: 1fr 1fr; }
  .session-reveal { flex-direction: column; }
  .upload-actions, .execution-chain, .shell-location { grid-template-columns: 1fr; }
  .execution-chain > i { transform: rotate(90deg); justify-self: center; }
  .mock-shell > header { grid-template-columns: 1fr; }
  .mock-shell > header small { display: block; }
  .shell-actions button { width: 100%; }
  .dashboard-head .button { width: 100%; }
  .data-panel { padding: .7rem; }
  .data-panel > header { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}