:root {
    --blue: #1E5AE0;
    --blue-deep: #0F3B9E;
    --blue-pale: #EAF0FE;
    --ink: #16213A;
    --ink-soft: #5B6B8C;
    --bg: #F5F7FC;
    --surface: #FFFFFF;
    --line: #E3E8F3;
    --danger: #E0433A;
    --danger-deep: #B8322A;
    --success: #2AA876;
    --call-bg: #12151C;
    --call-surface: #1D2230;
    --call-line: #2C3244;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 30px rgba(15, 59, 158, 0.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Quicksand', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 12px; color: var(--ink-soft); }
button, input { font-family: inherit; }
a { color: var(--blue); text-decoration: none; }
.hidden { display: none !important; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 36px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--ink); }
.brand.small { font-size: 17px; }
.brand-mark { flex-shrink: 0; }
.topbar-tag { font-size: 14px; color: var(--ink-soft); font-weight: 600; letter-spacing: .02em; }

/* ---------- Home ---------- */
.home-hero {
    display: flex; align-items: center; justify-content: center; gap: 64px;
    flex-wrap: wrap; padding: 40px 36px 80px; max-width: 1180px; margin: 0 auto;
}
.home-copy { max-width: 420px; }
.home-copy h1 { font-size: 40px; line-height: 1.15; color: var(--ink); }
.home-copy p { font-size: 17px; }

.home-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 8px; width: 380px; max-width: 100%;
}
.tabs { display: flex; gap: 4px; padding: 8px; }
.tab-btn {
    flex: 1; border: none; background: transparent; padding: 12px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 15px; color: var(--ink-soft); cursor: pointer; transition: .15s;
}
.tab-btn.active { background: var(--blue-pale); color: var(--blue-deep); }

.tab-panel { display: none; flex-direction: column; padding: 12px 20px 24px; }
.tab-panel.active { display: flex; }
.tab-panel label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 12px 0 6px; }
.tab-panel .optional { font-weight: 400; color: #9AA6C0; }
.tab-panel input {
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
    font-size: 15px; outline: none; transition: border-color .15s;
}
.tab-panel input:focus { border-color: var(--blue); }

.btn-primary {
    margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm);
    padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: var(--blue-deep); }
.btn-secondary {
    display: inline-block; margin-top: 12px; padding: 11px 18px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; background: #fff;
}
.form-error { color: var(--danger); font-size: 13px; min-height: 16px; margin: 8px 0 0; }

.home-footer { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 24px; }

/* ---------- Lobby ---------- */
.lobby-wrap {
    display: flex; gap: 40px; justify-content: center; align-items: flex-start; flex-wrap: wrap;
    padding: 24px 36px 60px; max-width: 1080px; margin: 0 auto;
}
.lobby-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 32px; text-align: center; max-width: 420px; margin: 60px auto;
}
.video-preview {
    width: 460px; max-width: 100%; aspect-ratio: 4/3; background: var(--call-bg); border-radius: var(--radius-lg);
    overflow: hidden; position: relative; box-shadow: var(--shadow);
}
.video-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preview-off-overlay {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: var(--call-surface); color: #6C7690;
}
.preview-off-overlay.visible { display: flex; }
.preview-controls { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

.control-btn {
    width: 46px; height: 46px; border-radius: 50%; border: none; background: #E9ECF5; color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s;
}
.control-btn.active { background: var(--blue-pale); color: var(--blue-deep); }
.control-btn:not(.active) { background: #3A3F4E; color: #E7E9F2; }

.lobby-form-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 28px; width: 360px; max-width: 100%;
}
.lobby-sub { font-size: 14px; }
.lobby-form-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.lobby-form-card input {
    width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
    font-size: 15px; outline: none;
}
.lobby-form-card input:focus { border-color: var(--blue); }

.waiting-spinner {
    width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--blue-pale);
    border-top-color: var(--blue); margin: 12px auto 16px; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Meeting room ---------- */
.page-meeting { background: var(--call-bg); color: #E7E9F2; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.meet-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; background: var(--call-bg); flex-shrink: 0;
}
.meet-topbar .brand span { color: #E7E9F2; }
.meet-code-pill { font-size: 13px; color: #9AA3BE; background: var(--call-surface); padding: 6px 14px; border-radius: 999px; }

.meet-main { flex: 1; display: flex; overflow: hidden; }
.video-grid {
    flex: 1; display: grid; gap: 12px; padding: 12px 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    justify-content: center; align-content: center; overflow: hidden;
}
.video-tile {
    position: relative; background: var(--call-surface); border-radius: var(--radius-md);
    width: 100%; max-width: 300px; max-height: 45vh; aspect-ratio: 16/10;
    overflow: hidden; border: 1px solid var(--call-line);
}
.video-tile video { width: 100%; height: 100%; object-fit: cover; }
.video-tile.is-local video { transform: scaleX(-1); }
.video-tile.cam-off video { visibility: hidden; }
.tile-avatar {
    display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 700; color: #fff; background: var(--blue-deep);
}
.video-tile.cam-off .tile-avatar { display: flex; }
.tile-meta {
    position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px;
    background: rgba(10,12,18,.55); padding: 5px 10px; border-radius: 999px; font-size: 13px;
}
.tile-admin { color: #FFC94A; }
.tile-mic-off { color: var(--danger); }

.side-panel {
    width: 320px; flex-shrink: 0; background: var(--call-surface); border-left: 1px solid var(--call-line);
    display: flex; flex-direction: column;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--call-line); }
.panel-head h2 { font-size: 16px; margin: 0; }
.panel-close { background: none; border: none; color: #9AA3BE; font-size: 20px; cursor: pointer; }

.chat-messages { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-row { font-size: 14px; }
.chat-author { font-weight: 700; margin-right: 6px; color: #9FC0FF; }
.chat-row.mine .chat-author { color: #7DE0B5; }
.chat-text { color: #E7E9F2; word-break: break-word; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--call-line); }
.chat-form input {
    flex: 1; background: #262C3D; border: 1px solid var(--call-line); border-radius: 999px;
    padding: 10px 16px; color: #fff; outline: none; font-size: 14px;
}
.chat-form button { background: var(--blue); border: none; color: #fff; width: 40px; border-radius: 50%; cursor: pointer; }

.waiting-room { padding: 14px 18px; border-bottom: 1px solid var(--call-line); }
.waiting-room h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #9AA3BE; margin-bottom: 10px; }
.waiting-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 14px; }

.people-list { flex: 1; overflow-y: auto; padding: 8px 18px; }
.person-row { padding: 12px 0; border-bottom: 1px solid var(--call-line); }
.person-info { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.person-badge { font-size: 11px; background: var(--blue); color: #fff; padding: 2px 8px; border-radius: 999px; }
.person-badge.held { background: #6C7690; }
.person-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-btn {
    font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--call-line);
    background: #262C3D; color: #E7E9F2; cursor: pointer;
}
.mini-btn.accept { background: var(--success); border-color: var(--success); }
.mini-btn.reject { background: var(--danger); border-color: var(--danger); }

.badge {
    position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff;
    font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px; display: flex;
    align-items: center; justify-content: center; padding: 0 3px;
}

.meet-controls {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 24px;
    background: var(--call-bg); border-top: 1px solid var(--call-line); flex-shrink: 0;
}
.controls-left { color: #9AA3BE; font-size: 14px; width: 100px; }
.controls-center { display: flex; gap: 14px; }
.controls-right { display: flex; gap: 10px; position: relative; }
.controls-center .control-btn, .controls-right .control-btn { width: 48px; height: 48px; position: relative; }
.control-btn.danger { background: var(--danger); color: #fff; }
.control-btn.danger:hover { background: var(--danger-deep); }
#btn-share.active { background: var(--blue); color: #fff; }

.toast {
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
    background: #262C3D; color: #fff; padding: 10px 20px; border-radius: 999px;
    font-size: 14px; box-shadow: var(--shadow); z-index: 50;
}
.connection-banner {
    position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
    background: var(--danger); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm);
    font-size: 13px; z-index: 50; max-width: 90vw; text-align: center; box-shadow: var(--shadow);
}

/* ---------- Home (Meet style) ---------- */
.home-hero.meet-style { align-items: center; gap: 80px; }
.home-copy h1 { font-size: 44px; }
.quick-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; max-width: 420px; }
.btn-primary.wide { width: fit-content; padding: 13px 26px; margin-top: 0; }
.join-inline {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line);
    border-radius: 999px; padding: 4px 8px 4px 16px; background: var(--surface);
}
.join-icon { color: var(--ink-soft); flex-shrink: 0; }
.join-inline input {
    flex: 1; border: none; outline: none; font-size: 15px; padding: 10px 4px; background: transparent;
}
.link-btn {
    border: none; background: none; color: var(--blue); font-weight: 700; font-size: 14px;
    padding: 10px 14px; border-radius: 999px; cursor: pointer;
}
.link-btn:hover:not(:disabled) { background: var(--blue-pale); }
.link-btn:disabled { color: #B7C0D6; cursor: default; }
.home-illustration { width: 320px; max-width: 100%; }

/* ---------- Modal ---------- */
.modal {
    position: fixed; inset: 0; background: rgba(15, 27, 58, .45);
    display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px;
}
.modal-card {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 28px; width: 380px; max-width: 100%;
}
.modal-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.modal-card input {
    width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
    font-size: 15px; outline: none;
}
.modal-card input:focus { border-color: var(--blue); }
#toggle-advanced { padding-left: 0; margin-top: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal-actions .btn-secondary, .modal-actions .btn-primary { margin: 0; }

/* ---------- Legal page ---------- */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 20px 36px 80px; }
.legal-wrap h1 { font-size: 30px; margin-bottom: 24px; }
.legal-wrap section { margin-bottom: 22px; }
.legal-wrap h2 { font-size: 17px; color: var(--blue-deep); }
.legal-wrap p { font-size: 15px; }
.home-footer a { color: var(--ink-soft); text-decoration: underline; }

/* ---------- Logo ---------- */
.brand-logo { height: 34px; width: auto; display: block; }
.brand-logo.small { height: 26px; }

/* ---------- Footer enrichi ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner {
    max-width: 1080px; margin: 0 auto; padding: 40px 36px 24px;
    display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
}
.footer-col { min-width: 180px; }
.footer-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 12px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.footer-col a:hover { color: var(--blue); }
.footer-col p { font-size: 14px; margin-bottom: 6px; color: var(--ink-soft); }
.footer-brand { max-width: 260px; }
.footer-logo { height: 30px; width: auto; margin-bottom: 12px; }
.footer-todo { font-style: italic; color: #B7C0D6; }
.footer-bottom {
    max-width: 1080px; margin: 0 auto; padding: 16px 36px 28px; display: flex; gap: 18px;
    justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft);
    border-top: 1px solid var(--line);
}
.footer-bottom a { color: var(--ink-soft); }

/* ---------- Legal page details ---------- */
.legal-updated { font-size: 13px; color: #9AA6C0; margin-top: -10px; margin-bottom: 28px; }
.legal-todo { color: #B7C0D6; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .home-hero { flex-direction: column; padding-top: 8px; }
    .home-hero.meet-style { flex-direction: column-reverse; }
    .lobby-wrap { flex-direction: column; align-items: center; }
    .side-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: -8px 0 24px rgba(0,0,0,.3); }
    .video-grid { padding: 8px; }
    .controls-left { display: none; }
}
@media (max-width: 480px) {
    .topbar { padding: 16px 18px; }
    .home-copy h1 { font-size: 30px; }
    .meet-controls { padding: 12px; gap: 8px; }
    .controls-center { gap: 8px; }
    .side-panel { width: 100vw; }
    .footer-inner { flex-direction: column; gap: 24px; }
}