:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #080b12;
  --panel: #111827;
  --panel-2: #161e2d;
  --soft: #202a3b;
  --line: rgba(255,255,255,.10);
  --text: #f8fafc;
  --muted: #9ca3af;
  --accent: #6d5dfc;
  --accent-2: #3b82f6;
  --danger: #ef4444;
  --ok: #22c55e;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }

.home-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 15% 10%, rgba(109,93,252,.22), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(59,130,246,.16), transparent 34%),
    #080b12;
}

.home-card {
  width: min(940px, 100%);
  background: rgba(17,24,39,.86);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  border-radius: 28px;
  padding: 34px;
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 800; }
.brand h1 { margin: 0; font-size: 20px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.hero h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 16px; }
.hero h2 span { background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; color: transparent; }
.hero p { color: #cbd5e1; line-height: 1.7; margin: 0; max-width: 620px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.choice { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 20px; padding: 18px; }
.choice h3 { margin: 0 0 6px; font-size: 16px; }
.choice p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.field { width: 100%; background: #0b1220; border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px 13px; outline: none; }
.field:focus { border-color: rgba(109,93,252,.85); box-shadow: 0 0 0 3px rgba(109,93,252,.12); }

.primary, .secondary, .danger, .control {
  border: 0;
  border-radius: 12px;
  padding: 12px 15px;
  color: white;
  font-weight: 700;
}
.primary { width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.secondary { background: var(--soft); border: 1px solid var(--line); }
.danger { background: var(--danger); }
.mini-note { margin-top: 18px; color: var(--muted); font-size: 12px; }
.visual-card { min-height: 330px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, #111827, #0b1220); padding: 18px; position: relative; overflow: hidden; isolation: isolate; }
.visual-glow { position:absolute; inset:auto; width: 420px; height: 420px; right: -60px; top: -30px; border-radius: 999px; background: radial-gradient(circle, rgba(99,102,241,.22) 0%, rgba(96,165,250,.10) 35%, transparent 70%); filter: blur(10px); pointer-events:none; }
.visual-screen { position: absolute; inset: 30px 30px 68px 30px; border-radius: 20px; background: linear-gradient(180deg, rgba(24,34,52,.94), rgba(15,23,42,.98)); border: 1px solid rgba(148,163,184,.18); color:#dbeafe; font-size:13px; display:flex; flex-direction:column; padding: 16px; gap: 14px; }
.visual-screen-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.visual-badge, .visual-room { display:inline-flex; align-items:center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(15,23,42,.62); border:1px solid rgba(148,163,184,.18); color:#dbeafe; font-size:12px; font-weight:600; }
.visual-room { color:#cbd5e1; }
.visual-screen-body { flex:1; display:grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; min-height:0; }
.visual-stage { min-height:0; display:flex; flex-direction:column; gap:10px; }
.visual-stage-title { font-size: 12px; font-weight: 700; color: #cbd5e1; }
.visual-stage-window { flex:1; min-height:0; border-radius: 16px; background: linear-gradient(180deg, rgba(45,55,72,.88), rgba(23,31,45,.96)); border:1px solid rgba(148,163,184,.16); overflow:hidden; display:flex; flex-direction:column; }
.visual-stage-window-bar { height: 30px; background: linear-gradient(90deg, rgba(99,102,241,.24), rgba(96,165,250,.14)); border-bottom:1px solid rgba(148,163,184,.14); }
.visual-stage-window-body { flex:1; padding: 14px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.visual-line { height: 10px; border-radius: 999px; background: rgba(226,232,240,.13); }
.visual-line.large { width: 82%; height: 14px; }
.visual-line.short { width: 56%; }
.visual-cards-row { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; margin-top: 8px; }
.visual-cards-row span { height: 64px; border-radius: 14px; background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(96,165,250,.08)); border:1px solid rgba(148,163,184,.12); }
.visual-side-stack { display:flex; flex-direction:column; gap:12px; }
.visual-cam { position: relative; right: auto; width: 100%; height: 104px; border-radius: 16px; background: linear-gradient(145deg,#334155,#111827); border:1px solid rgba(148,163,184,.18); display:grid; place-items:center; font-size:24px; color:#cbd5e1; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.visual-cam::after { content: ''; position:absolute; inset:auto 10px 10px 10px; height: 18px; border-radius: 999px; background: rgba(15,23,42,.55); border:1px solid rgba(148,163,184,.14); }
.visual-cam.one::before, .visual-cam.two::before { content: 'Katılımcı'; position:absolute; left:12px; bottom: 12px; font-size:9px; font-weight:700; color:#e2e8f0; z-index:1; }
.visual-cam.two::before { content: 'Siz'; }
.visual-pill { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px; border-radius:999px; background: rgba(15,23,42,.72); color:#dbeafe; border:1px solid rgba(148,163,184,.18); font-size:12px; font-weight:700; backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.visual-pill.pill-one { left: 18px; top: 18px; }
.visual-pill.pill-two { right: 18px; top: 18px; }
.visual-pill.pill-three { left: 18px; bottom: 58px; }
.visual-pill.pill-four { right: 18px; bottom: 58px; }
.visual-bar { position:absolute; bottom:18px; left:24px; right:24px; min-height:34px; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; z-index:2; }
.visual-chip { display:inline-flex; align-items:center; justify-content:center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(30,41,59,.84); border:1px solid rgba(148,163,184,.16); color:#cbd5e1; font-size:11px; font-weight:700; }

.room-shell { height: 100vh; display:flex; flex-direction:column; overflow:hidden; }
.topbar { min-height: 66px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 12px 18px; border-bottom:1px solid var(--line); background: rgba(8,11,18,.94); }
.top-left, .top-right { display:flex; align-items:center; gap:12px; min-width:0; }
.room-brand { font-weight:800; white-space:nowrap; }
.room-code { color:var(--muted); font-size:13px; background:var(--panel); border:1px solid var(--line); padding:7px 10px; border-radius:10px; }
.status-pill { display:flex; gap:7px; align-items:center; color:#cbd5e1; font-size:13px; white-space:nowrap; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#64748b; }
.status-dot.ok { background:var(--ok); box-shadow:0 0 14px rgba(34,197,94,.65); }

.stage { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; padding:12px; }
.screen-panel { position:relative; min-height:0; border-radius:18px; border:1px solid var(--line); background:#05070b; overflow:hidden; display:grid; place-items:center; }
.screen-panel video { width:100%; height:100%; object-fit:contain; background:#030406; }
.screen-empty { text-align:center; padding:30px; color:var(--muted); }
.screen-empty .icon { font-size:44px; opacity:.75; margin-bottom:8px; }
.screen-label { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); padding:7px 10px; border-radius:10px; font-size:12px; z-index:2; }

.screen-preview-toggle {
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  width:auto;
  min-height:34px;
  padding:7px 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.66);
  color:#f8fafc;
  backdrop-filter:blur(8px);
  font-size:11px;
  font-weight:800;
}
.screen-preview-toggle:hover { background:rgba(30,41,59,.92); }

.video-rail { display:grid; grid-template-rows:1fr 1fr; gap:12px; min-height:0; }
.cam-card { position:relative; min-height:0; border:1px solid var(--line); background:var(--panel); border-radius:18px; overflow:hidden; }
.cam-card video { width:100%; height:100%; object-fit:cover; background:#0b1220; }
.cam-label { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.12); padding:6px 9px; border-radius:9px; font-size:12px; }
.cam-off { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; background:linear-gradient(145deg,#182235,#0c1320); font-size:13px; }
.avatar { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#263244; margin:0 auto 8px; font-size:20px; color:#e5e7eb; }

.controls { min-height:82px; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px 16px; border-top:1px solid var(--line); background:rgba(8,11,18,.96); }
.control { min-width:82px; background:#192233; border:1px solid var(--line); padding:10px 12px; display:grid; gap:3px; justify-items:center; font-size:12px; }
.control .ci { font-size:19px; line-height:1; }
.control.active { background:#263044; }
.control.off { background:#4b1f28; }
.control.screen-on { background:#193b30; }
.control.end { background:#7f1d1d; }

.prejoin { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(3,5,10,.86); backdrop-filter:blur(14px); }
.prejoin-card { width:min(760px,100%); background:#111827; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 25px 80px rgba(0,0,0,.55); }
.prejoin-nav { display:flex; align-items:center; justify-content:flex-start; margin-bottom:14px; }
.prejoin-home-btn { width:auto; min-height:38px; padding:8px 12px; border-radius:11px; background:#182235; border:1px solid var(--line); color:#e5e7eb; font-weight:700; font-size:12px; }
.prejoin-home-btn:hover { background:#243047; border-color:#475569; }
.prejoin-home-btn:disabled { opacity:.65; cursor:wait; }
.prejoin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.preview { aspect-ratio:16/10; background:#05070b; border:1px solid var(--line); border-radius:18px; overflow:hidden; position:relative; }
.preview video { width:100%; height:100%; object-fit:cover; }
.form-stack { display:grid; gap:12px; }
.form-stack h2 { margin:0 0 2px; }
.form-stack p { margin:0 0 8px; color:var(--muted); font-size:13px; line-height:1.5; }
.device-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.device-toggle { background:#1b2637; border:1px solid var(--line); color:#fff; border-radius:12px; padding:10px; }
.device-toggle.off { background:#4b1f28; }

.toast { position:fixed; z-index:50; left:50%; top:18px; transform:translateX(-50%); background:#111827; border:1px solid var(--line); box-shadow:0 12px 35px rgba(0,0,0,.4); padding:11px 14px; border-radius:12px; font-size:13px; max-width:min(520px,calc(100vw - 24px)); }
.hidden { display:none !important; }

@media (max-width: 820px) {
  .hero { grid-template-columns:1fr; }
  .visual-card { display:none; }
  .choice-grid { grid-template-columns:1fr; }
  .home-card { padding:24px; }
  .stage { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 150px; }
  .video-rail { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
  .controls { overflow-x:auto; justify-content:flex-start; }
  .control { min-width:72px; }
  .top-right .secondary { display:none; }
  .prejoin-grid { grid-template-columns:1fr; }
}

/* MiniMeet v0.3 - full-screen landing and larger prejoin */
.home-shell {
  min-height: 100svh;
  width: 100%;
  display: block;
  padding: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(109,93,252,.24), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(59,130,246,.18), transparent 34%),
    #080b12;
}

.home-card {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: clamp(28px, 4.5vw, 72px) clamp(24px, 6vw, 104px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(115deg, rgba(17,24,39,.80), rgba(8,11,18,.58));
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}

.brand {
  margin-bottom: clamp(24px, 3vh, 42px);
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  font-size: 20px;
}

.brand h1 { font-size: clamp(21px, 1.7vw, 28px); }
.brand p { font-size: 14px; }

.hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: center;
}

.hero > div:first-child {
  width: min(760px, 100%);
}

.hero h2 {
  font-size: clamp(48px, 5.6vw, 86px);
  max-width: 760px;
  margin-bottom: 24px;
}

.hero p {
  max-width: 720px;
  font-size: clamp(16px, 1.25vw, 20px);
}

.choice-grid {
  gap: 18px;
  margin-top: clamp(30px, 4vh, 50px);
}

.choice {
  min-height: 190px;
  padding: 24px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.choice h3 { font-size: 19px; }
.choice p { font-size: 14px; min-height: 42px; }
.choice .primary,
.choice .secondary,
.choice .field { min-height: 48px; }

.mini-note {
  margin-top: 24px;
  font-size: 13px;
}

.visual-card {
  width: 100%;
  height: min(68vh, 700px);
  min-height: 500px;
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.visual-screen {
  inset: 34px 130px 78px 34px;
  border-radius: 20px;
  font-size: 16px;
}

.visual-cam {
  right: 28px;
  width: 82px;
  height: 112px;
  border-radius: 17px;
  font-size: 30px;
}

.visual-cam.one { top: 34px; }
.visual-cam.two { top: 160px; }
.visual-bar { bottom: 28px; height: 34px; }
.visual-dot { width: 34px; height: 34px; }

.prejoin {
  padding: clamp(18px, 3vw, 48px);
}

.prejoin-card {
  width: min(1160px, 100%);
  padding: clamp(26px, 3vw, 46px);
  border-radius: 28px;
}

.prejoin-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(28px, 4vw, 58px);
}

.preview {
  aspect-ratio: 16 / 9;
  min-height: 330px;
}

.form-stack h2 { font-size: clamp(30px, 3vw, 46px); }
.form-stack p { font-size: 15px; }

@media (max-width: 1050px) {
  .home-card { padding: 30px 28px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 30px; }
  .hero h2 { font-size: clamp(44px, 6vw, 68px); }
  .visual-card { min-height: 430px; height: 60vh; }
  .visual-screen { inset: 28px 28px 72px 28px; }
  .visual-screen-body { grid-template-columns: minmax(0, 1fr) 68px; }
  .visual-cam { width: 100%; height: 94px; }
  .visual-pill { min-height: 32px; padding: 0 10px; font-size: 11px; }
}

@media (max-width: 820px) {
  .home-card { min-height: 100svh; padding: 24px 18px 34px; }
  .hero { display: block; }
  .hero h2 { font-size: clamp(42px, 12vw, 62px); }
  .choice-grid { grid-template-columns: 1fr; }
  .choice { min-height: auto; }
  .visual-card { display: none; }
  .prejoin-card { width: 100%; }
  .prejoin-grid { grid-template-columns: 1fr; }
  .preview { min-height: 220px; }
}

/* MiniMeet v0.7 - camera overlay layout */
.stage {
  position: relative;
  display: block;
  padding: 12px;
}

.screen-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.video-rail {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 8;
  width: clamp(150px, 14vw, 220px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.cam-card {
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  background: #0b1220;
}

.cam-card.remote-cam {
  aspect-ratio: 4 / 3;
}

.cam-card.self-cam {
  width: 72%;
  align-self: flex-end;
  aspect-ratio: 4 / 3;
  opacity: .96;
}

.cam-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-label {
  left: 8px;
  bottom: 8px;
  padding: 5px 8px;
  font-size: 11px;
}

.cam-off {
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

.cam-off .avatar {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
}

.screen-label {
  z-index: 9;
}

@media (max-width: 820px) {
  .stage {
    display: block;
    padding: 8px;
  }

  .screen-panel {
    height: 100%;
    min-height: 0;
  }

  .video-rail {
    top: 18px;
    right: 18px;
    width: clamp(108px, 28vw, 138px);
    gap: 7px;
  }

  .cam-card {
    border-radius: 13px;
  }

  .cam-card.self-cam {
    width: 70%;
  }

  .cam-label {
    font-size: 10px;
    padding: 4px 7px;
    left: 6px;
    bottom: 6px;
  }

  .cam-off {
    font-size: 10px;
  }

  .cam-off .avatar {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}

@media (max-width: 520px) {
  .topbar {
    min-height: 58px;
    padding: 8px 10px;
  }

  .room-brand {
    font-size: 15px;
  }

  .room-code {
    font-size: 11px;
    padding: 6px 8px;
  }

  .status-pill {
    font-size: 11px;
  }

  .stage {
    padding: 6px;
  }

  .video-rail {
    top: 16px;
    right: 14px;
    width: 106px;
    gap: 6px;
  }

  .cam-card.self-cam {
    width: 68%;
  }

  .controls {
    min-height: 76px;
    padding: 9px 8px 12px;
    gap: 7px;
  }

  .control {
    min-width: 66px;
    padding: 9px 8px;
    font-size: 11px;
  }
}


/* MiniMeet v0.8 - öğretmen ekranında ayna efektini kaldır */
.sharing-indicator {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  border: 1px solid rgba(34,197,94,.24);
  border-radius: 18px;
  background: rgba(18,55,42,.42);
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
  text-align: left;
}

.sharing-indicator strong {
  display: block;
  color: #f8fafc;
  font-size: clamp(18px, 2vw, 28px);
  margin-bottom: 5px;
}

.sharing-indicator span {
  display: block;
  color: #a7f3d0;
  font-size: 13px;
}

.sharing-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 8px rgba(34,197,94,.11), 0 0 24px rgba(34,197,94,.48);
}

@media (max-width: 520px) {
  .sharing-indicator { padding: 16px 18px; gap: 12px; }
  .sharing-indicator span { font-size: 11px; }
}


/* v0.9 - Web istemcisi yalnız öğrenci katılımı */
.student-home-card {
  width: min(980px, 100%);
}
.student-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 34px;
  align-items: center;
  min-height: 520px;
}
.student-entry h2 {
  margin: 12px 0 18px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.student-entry h2 span {
  background: linear-gradient(90deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  color: transparent;
}
.student-entry p {
  max-width: 650px;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.7;
}
.student-badge {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(109,93,252,.13);
  border: 1px solid rgba(167,139,250,.25);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.student-join-card {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.student-join-card label {
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
}
.room-code-field {
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .08em;
  font-weight: 700;
}
.exit-card {
  width: min(520px, 100%);
  padding: 38px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: rgba(17,24,39,.93);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  text-align: center;
}
.exit-mark { margin: 0 auto 18px; }
.exit-status {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.exit-card h2 { margin: 10px 0 12px; font-size: 30px; }
.exit-card p { margin: 0 0 24px; color: var(--muted); line-height: 1.65; }
.exit-secondary { width: 100%; margin-top: 10px; }
@media (max-width: 760px) {
  .student-entry { grid-template-columns: 1fr; min-height: 0; gap: 24px; }
  .student-entry h2 { font-size: clamp(36px, 12vw, 54px); }
  .student-home-card { padding: 24px; }
  .student-join-card { padding: 18px; }
  .exit-card { padding: 28px 20px; }
}

/* MiniMeet v1.0 - Webde toplantı başlatma + toplantıya katılma */
.share-warning {
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.45;
}
.share-warning.compact {
  margin-top: 0;
  font-size: 12px;
}
.host-name-display {
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b1220;
  color: #cbd5e1;
  font-size: 13px;
}
@media (max-width: 820px) {
  .share-warning { margin-top: 18px; }
}


/* MiniMeet v1.2 - kamera kutuları eşit + köşeden orantılı boyutlandırma */
.video-rail {
  width: clamp(160px, 14vw, 220px);
  pointer-events: auto;
  overflow: visible;
}

.video-rail .cam-card,
.video-rail .cam-card.remote-cam,
.video-rail .cam-card.self-cam {
  width: 100%;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  opacity: 1;
}

.camera-resize-handle {
  position: absolute;
  left: -9px;
  bottom: -9px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(20,30,47,.94);
  box-shadow: 0 7px 18px rgba(0,0,0,.35);
  cursor: nesw-resize;
  touch-action: none;
  z-index: 12;
}

.camera-resize-handle::before,
.camera-resize-handle::after {
  content: '';
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 10px;
  height: 1px;
  background: rgba(255,255,255,.72);
  transform: rotate(-45deg);
  transform-origin: center;
}

.camera-resize-handle::after {
  left: 10px;
  bottom: 6px;
  width: 6px;
}

.video-rail.resizing .cam-card {
  transition: none !important;
}

@media (max-width: 820px) {
  .video-rail .cam-card.self-cam { width: 100%; }
  .camera-resize-handle { width: 28px; height: 28px; left: -11px; bottom: -11px; }
}

@media (max-width: 520px) {
  .video-rail .cam-card.self-cam { width: 100%; }
}

/* MiniMeet v1.3 - Yönetici/Katılımcı + gelişmiş görüşme özellikleri */
.role-chip {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,.28);
  background: rgba(99,102,241,.12);
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 800;
}

.video-rail {
  position: fixed !important;
  top: 88px;
  right: 22px;
  left: auto;
  width: clamp(150px, 14vw, 220px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: auto;
  overflow: visible;
  user-select: none;
}
.video-rail .cam-card,
.video-rail .cam-card.remote-cam,
.video-rail .cam-card.self-cam {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  opacity: 1;
  align-self: stretch;
}
.camera-drag-handle {
  align-self: flex-end;
  width: 42px;
  height: 22px;
  margin-bottom: -5px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  background: rgba(15,23,42,.94);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  cursor: grab;
  touch-action: none;
  font-size: 14px;
  letter-spacing: -2px;
}
.camera-drag-handle:active { cursor: grabbing; }
.camera-resize-handle {
  left: -10px;
  bottom: -10px;
  touch-action: none;
}

.device-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3,5,10,.62);
  backdrop-filter: blur(8px);
}
.device-panel-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #101827;
  box-shadow: 0 20px 60px rgba(0,0,0,.48);
}
.device-panel-card label,
.device-select-label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}
.device-panel-head { display:flex; justify-content:space-between; align-items:center; }
.device-panel-head button {
  width: 34px; height: 34px; border:0; border-radius:9px; background:#1e293b; color:white; font-size:20px;
}
.network-state {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.18);
  color: #fcd34d;
  font-size: 11px;
  line-height: 1.45;
}
.network-state.ok {
  color: #bbf7d0;
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.2);
}

.annotation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  touch-action: none;
}
.annotation-canvas.interactive {
  pointer-events: auto;
  cursor: crosshair;
}
.annotation-tools {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,20,.94);
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
}
.annotation-tools button {
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background:#182235;
  color:#fff;
}
.annotation-tools button.active { background:#4f46e5; }
.annotation-tools input[type="color"] { width:34px; height:34px; padding:2px; border:0; border-radius:8px; background:#182235; }
.annotation-tools input[type="range"] { width:82px; }

.room-shell:fullscreen { background: var(--bg); }
.room-shell:fullscreen .topbar { min-height: 54px; }

@media (max-width: 820px) {
  .room-shell { height: 100dvh; min-height: 100dvh; }
  .topbar { min-height: 56px; padding: 7px 9px; }
  .top-left { gap: 7px; }
  .role-chip { display:none; }
  .stage { padding: 4px 4px 78px; }
  .screen-panel { border-radius: 12px; }
  .video-rail {
    top: 66px;
    right: 10px;
    width: 116px;
    gap: 6px;
  }
  .camera-drag-handle { width: 36px; height: 20px; }
  .controls {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 45;
    min-height: 62px;
    padding: 6px;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(8,11,18,.92);
    backdrop-filter: blur(12px);
    overflow-x: auto;
    justify-content:flex-start;
  }
  .control { min-width: 60px; padding: 7px 6px; font-size: 10px; border-radius:10px; }
  .control .ci { font-size:16px; }
  .annotation-tools { left:8px; bottom:86px; max-width:calc(100vw - 16px); overflow-x:auto; }
  .annotation-tools input[type="range"] { width:64px; }
}

@media (max-width: 520px) {
  .room-brand { font-size:14px; }
  .room-code { font-size:10px; }
  .status-pill { font-size:10px; }
  .video-rail { top: 62px; right: 8px; width: 104px; }
  .cam-label { font-size:9px; }
  .cam-off { font-size:9px; }
  .controls { left:4px; right:4px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .topbar { min-height: 46px; }
  .stage { padding: 3px 3px 58px; }
  .video-rail { top: 52px; width: 100px; }
  .controls { min-height: 50px; padding:4px; }
  .control { min-width:56px; padding:5px; }
  .control span:last-child { font-size:9px; }
}

/* MiniMeet v1.4 - meeting duration and final countdown */
.meeting-timer {
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:11px;
  border:1px solid rgba(250,204,21,.28);
  background:rgba(120,83,7,.24);
  color:#fde68a;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.meeting-timer span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.82; }
.meeting-timer strong { font-size:16px; line-height:1; letter-spacing:.03em; }
.meeting-timer.critical {
  border-color:rgba(248,113,113,.65);
  background:rgba(127,29,29,.82);
  color:#fff;
  box-shadow:0 0 20px rgba(239,68,68,.24);
}
.duration-box {
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  border-radius:15px;
  padding:13px;
  display:grid;
  gap:8px;
}
.duration-title { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; }
.duration-title span { color:#fbbf24; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.duration-option {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220;
  border-radius:11px;
  cursor:pointer;
}
.duration-option input { margin-top:3px; accent-color:#6d5dfc; }
.duration-option span { display:grid; gap:2px; }
.duration-option strong { font-size:12px; }
.duration-option small { color:var(--muted); font-size:10px; line-height:1.35; }
.duration-minutes-row { display:flex; align-items:center; gap:9px; }
.duration-minutes-row .field { min-width:0; }
.duration-minutes-row > span { color:#cbd5e1; font-size:12px; }
.duration-help { color:var(--muted); font-size:10px; line-height:1.4; }

@media (max-width: 820px) {
  .topbar { padding:10px 12px; }
  .meeting-timer { padding:6px 8px; gap:5px; }
  .meeting-timer span { display:none; }
  .meeting-timer strong { font-size:15px; }
}


/* MiniMeet v1.4.1 - duration selection on home manager card */
.home-duration-box {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 12px;
  background: rgba(11,18,32,.58);
}
.home-duration-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:800; margin-bottom:8px; }
.home-duration-title span { color:#fbbf24; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.home-duration-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.home-duration-option { display:flex; align-items:center; gap:7px; min-height:38px; border:1px solid var(--line); border-radius:10px; padding:8px 9px; background:rgba(255,255,255,.025); cursor:pointer; font-size:11px; }
.home-duration-option input { accent-color:#6d5dfc; margin:0; }
.home-duration-minutes-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.home-duration-minutes-row .field { min-width:0; padding:9px 10px; }
.home-duration-minutes-row > span { color:#cbd5e1; font-size:11px; }
.home-duration-help { color:var(--muted); font-size:9px; line-height:1.35; margin-top:7px; }
.duration-summary { border:1px solid rgba(109,93,252,.35); background:rgba(109,93,252,.09); border-radius:12px; padding:10px 12px; display:grid; gap:3px; }
.duration-summary span { color:var(--muted); font-size:10px; }
.duration-summary strong { font-size:14px; }
.duration-summary small { color:#aeb8c8; font-size:9px; }
@media (max-width: 820px) {
  .home-duration-options { grid-template-columns:1fr 1fr; }
}


/* MiniMeet v1.5 - participant screen sharing permission */
.permission-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
}
.permission-setting > div { min-width: 0; }
.permission-setting strong { display:block; font-size:14px; margin-bottom:4px; }
.permission-setting small { display:block; color:var(--muted); font-size:11px; line-height:1.45; }
.switch { position:relative; width:46px; height:26px; flex:0 0 46px; cursor:pointer; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#334155; border:1px solid var(--line); transition:.18s ease; }
.switch span::after { content:''; position:absolute; width:20px; height:20px; left:2px; top:2px; border-radius:50%; background:white; transition:.18s ease; }
.switch input:checked + span { background:#2563eb; }
.switch input:checked + span::after { transform:translateX(20px); }
.control:disabled { cursor:not-allowed; opacity:.62; }
.control.permission-disabled { background:#202838; }

/* MiniMeet v1.6 - kamera arka plani */
.pre-background-box {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
}
.background-setting {
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.03);
}
.background-setting > div:first-child strong { display:block; font-size:13px; margin-bottom:3px; }
.background-setting > div:first-child small { display:block; color:var(--muted); font-size:10px; line-height:1.35; }
.background-controls { display:flex; align-items:center; gap:8px; }
.background-select { flex:1; min-width:0; }
.background-image-btn { white-space:nowrap; padding:10px 12px; }
.background-status { color:var(--muted); font-size:10px; line-height:1.35; }
@media (max-width:520px) {
  .pre-background-box { grid-template-columns:1fr; }
  .pre-background-box .background-image-btn { width:100%; }
  .background-controls { display:grid; grid-template-columns:1fr; }
  .background-image-btn { width:100%; }
}

/* MiniMeet v1.6.2 - mobil prejoin / katilim butonu gorunurlugu */
.prejoin {
  z-index: 120;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: start;
  justify-items: center;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.prejoin-card {
  max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#enter-room {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: 100%;
  box-shadow: 0 -10px 24px rgba(17,24,39,.92);
}

@media (max-width: 820px) {
  .prejoin {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
  }
  .prejoin-card {
    width: 100%;
    max-height: none;
    min-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 14px;
    border-radius: 18px;
    overflow: visible;
  }
  .prejoin-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .prejoin .preview {
    min-height: 0;
    height: auto;
    max-height: 30dvh;
    aspect-ratio: 16 / 9;
  }
  .prejoin .form-stack {
    gap: 8px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .prejoin .form-stack h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.08;
  }
  .prejoin .form-stack p {
    margin-bottom: 2px;
  }
  .prejoin #enter-room {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 52px;
    z-index: 130;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,.55);
  }
}

/* MiniMeet v1.7 - zorunlu kamera/mikrofon izin kapisi */
.permission-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(3, 7, 18, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.permission-card {
  width: min(520px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  background: #111827;
  border: 1px solid #2b3850;
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 30px 100px rgba(0,0,0,.62);
  text-align: left;
}
.permission-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 16px;
  background: linear-gradient(135deg,#615cff,#3b82f6);
}
.permission-kicker { color:#8aa4ff; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.permission-card h2 { margin:8px 0 8px; font-size:26px; }
.permission-card > p { margin:0 0 18px; color:#bac5d6; line-height:1.55; }
.permission-list { display:grid; gap:10px; margin:16px 0; }
.permission-list > div { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #26334a; background:#0b1322; border-radius:14px; }
.permission-list > div > span { font-size:22px; }
.permission-list strong, .permission-list small { display:block; }
.permission-list small { color:#8f9db2; margin-top:2px; line-height:1.4; }
.permission-status { margin:14px 0; padding:11px 12px; border-radius:12px; background:#172033; color:#cbd5e1; font-size:14px; line-height:1.45; }
.permission-status.ok { background:#092d21; border:1px solid #126a4b; color:#a7f3d0; }
.permission-status.error { background:#341417; border:1px solid #7f1d1d; color:#fecaca; }
.permission-status.working { background:#172554; border:1px solid #1d4ed8; color:#bfdbfe; }
.permission-card .permission-allow, .permission-card .permission-retry { width:100%; min-height:50px; }
.permission-card .permission-retry { margin-top:8px; }
.permission-help { margin-top:12px; padding:12px; border-radius:12px; background:#241d0c; border:1px solid #765c16; color:#fde68a; font-size:13px; line-height:1.5; }
.permission-note { display:block; margin-top:12px; color:#7f8ca1; text-align:center; }
.permission-card.is-busy { cursor:wait; }
@media (max-width: 600px) {
  .permission-gate { align-items:end; padding-left:10px; padding-right:10px; }
  .permission-card { border-radius:24px 24px 10px 10px; padding:20px 18px max(18px, env(safe-area-inset-bottom)); max-height:92dvh; }
  .permission-card h2 { font-size:23px; }
}

/* v1.9 hesap + lisans */
.manager-account-shell{margin-top:14px;display:flex;flex-direction:column;gap:10px}.auth-loading{padding:14px;border-radius:12px;background:#f8fafc;color:#64748b;text-align:center}.auth-mode-note{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:14px;color:#1e3a8a}.auth-mode-note span{font-size:12px;color:#475569}.auth-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.account-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc}.account-summary>div{min-width:0;display:flex;flex-direction:column;gap:2px}.account-summary small{color:#64748b;overflow:hidden;text-overflow:ellipsis}.account-status{white-space:nowrap;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800}.account-status.licensed{background:#dcfce7;color:#166534}.account-status.free{background:#dbeafe;color:#1d4ed8}.account-status.expired{background:#fef3c7;color:#92400e}.account-status.blocked{background:#fee2e2;color:#991b1b}.account-actions-top{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:-2px}.account-link,.link-button{border:0;background:transparent;color:#2563eb;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;padding:3px}.account-warning{padding:12px 14px;border:1px solid #fecaca;background:#fff1f2;color:#9f1239;border-radius:13px;font-size:13px}.license-buy{width:100%}.free-trial-box{border-color:#bfdbfe;background:#eff6ff}.free-trial-time{display:block;font-size:21px;margin:6px 0;color:#1d4ed8}.manager-choice .field+ .field{margin-top:8px}@media(max-width:600px){.auth-buttons{grid-template-columns:1fr}.account-summary{align-items:flex-start;flex-direction:column}.account-status{white-space:normal}}

/* MiniMeet v1.9.7 - Full HD desktop landing compact layout */
@media (min-width: 1200px) {
  .home-card {
    min-height: 100svh;
    padding: clamp(20px, 2.2vh, 28px) clamp(42px, 5vw, 82px);
  }

  .brand {
    margin-bottom: clamp(12px, 1.6vh, 20px);
  }
  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 17px;
  }
  .brand h1 { font-size: clamp(19px, 1.25vw, 24px); }
  .brand p { font-size: 12px; }

  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(390px, .88fr);
    gap: clamp(34px, 4.5vw, 72px);
    align-items: center;
  }
  .hero > div:first-child {
    width: min(760px, 100%);
  }
  .hero h2 {
    font-size: clamp(42px, 3.7vw, 58px);
    line-height: 1.00;
    max-width: 650px;
    margin-bottom: 14px;
  }
  .hero p {
    max-width: 700px;
    font-size: clamp(14px, .95vw, 17px);
    line-height: 1.55;
  }

  .choice-grid {
    gap: 12px;
    margin-top: clamp(18px, 2.3vh, 26px);
  }
  .choice {
    min-height: 0;
    padding: 16px;
    border-radius: 18px;
  }
  .choice h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .choice p {
    min-height: 0;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.4;
  }
  .choice .primary,
  .choice .secondary,
  .choice .field {
    min-height: 40px;
  }
  .field { padding: 9px 11px; border-radius: 10px; }

  .manager-account-shell {
    margin-top: 9px;
    gap: 7px;
  }
  .account-summary {
    padding: 8px 9px;
    border-radius: 11px;
  }
  .account-summary strong { font-size: 12px; }
  .account-summary small { font-size: 10px; }
  .account-status {
    padding: 4px 7px;
    font-size: 9px;
  }
  .account-actions-top { gap: 7px; }
  .account-link,
  .link-button { font-size: 10px; }

  .home-duration-box {
    padding: 9px 10px;
    margin-top: 1px;
    border-radius: 11px;
  }
  .home-duration-title {
    margin-bottom: 4px;
    font-size: 10px;
  }
  .home-duration-title span { font-size: 8px; }
  .free-trial-time {
    font-size: 17px;
    margin: 3px 0;
  }
  .home-duration-help {
    margin-top: 4px;
    font-size: 8.5px;
    line-height: 1.28;
  }
  .home-duration-options { gap: 5px; }
  .home-duration-option {
    min-height: 32px;
    padding: 6px 7px;
    font-size: 10px;
  }
  .home-duration-minutes-row { margin-top: 5px; }
  .home-duration-minutes-row .field { padding: 7px 8px; }

  .share-warning {
    margin-top: 12px;
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .visual-card {
    height: min(60vh, 580px);
    min-height: 400px;
    border-radius: 24px;
    padding: 18px;
  }
  .visual-glow { width: 500px; height: 500px; right: -70px; top: -50px; }
  .visual-screen {
    inset: 26px 26px 72px 26px;
    border-radius: 18px;
    padding: 16px;
    gap: 14px;
    font-size: 13px;
  }
  .visual-badge, .visual-room { min-height: 28px; font-size: 12px; }
  .visual-screen-body { grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; }
  .visual-stage-window-body { padding: 14px; gap: 10px; }
  .visual-cards-row span { height: 64px; }
  .visual-cam { width: 100%; height: 94px; border-radius: 14px; font-size: 24px; }
  .visual-pill { min-height: 34px; padding: 0 12px; font-size: 12px; }
  .visual-bar { bottom: 22px; min-height: 30px; }
  .visual-chip { min-height: 28px; padding: 0 12px; font-size: 11px; }
}

/* Extra compression for standard 1080p browser viewports */
@media (min-width: 1200px) and (max-height: 900px) {
  .home-card { padding-top: 16px; padding-bottom: 16px; }
  .brand { margin-bottom: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand h1 { font-size: 20px; }
  .brand p { font-size: 11px; }
  .hero h2 { font-size: clamp(38px, 3.35vw, 52px); margin-bottom: 10px; }
  .hero p { font-size: 14px; line-height: 1.45; }
  .choice-grid { margin-top: 14px; gap: 10px; }
  .choice { padding: 13px; }
  .choice p { margin-bottom: 7px; }
  .manager-account-shell { margin-top: 6px; gap: 5px; }
  .home-duration-box { padding: 7px 9px; }
  .home-duration-help { font-size: 8px; }
  .free-trial-time { font-size: 16px; }
  .share-warning { margin-top: 8px; min-height: 30px; padding: 6px 9px; }
  .visual-card { height: min(56vh, 510px); min-height: 360px; }
  .visual-pill { transform: scale(.94); transform-origin: center; }
  .visual-stage-title { font-size: 11px; }
  .visual-badge, .visual-room { font-size: 11px; }
  .visual-cards-row span { height: 56px; }
  .visual-cam { height: 84px; }
  .visual-chip { min-height: 26px; font-size: 10px; }
}

/* MiniMeet v1.9.9 - guest manager access */
.guest-license-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}
.guest-account-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
  margin-top:2px;
  border-top:1px solid rgba(148,163,184,.18);
}
.guest-account-heading{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#e2e8f0;
}
.guest-account-heading strong{font-size:12px}
.guest-account-heading span{font-size:10px;color:#94a3b8;line-height:1.35}
.guest-free-note{padding:9px 10px}
.guest-free-note strong{font-size:11px}
.guest-free-note span{font-size:9px;line-height:1.3}
@media (min-width:1200px){
  .guest-license-actions .link-button{font-size:9px}
  .guest-account-panel{gap:6px;padding-top:6px}
  .guest-account-panel .field{min-height:34px;padding:7px 9px}
  .guest-account-panel .primary,.guest-account-panel .secondary{min-height:34px}
}