/* ============================================================ share.css — Session Share / "Session Room" Responsive • Authenticated DB-controlled Light / Dark Theme Guests are always Light ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { color-scheme: light; /* Default/fallback theme: LIGHT. Dark variables are used ONLY when body[data-theme="dark"] exists. */ --bg: #f5f7fb; --bg-deep: #eef1f7; --panel: rgba(255,255,255,.78); --panel-strong: rgba(255,255,255,.94); --panel-hover: #f8f9fc; --border: #e2e6ef; --border-strong: #cbd2df; --text: #1f2937; --muted: #667085; --muted-dim: #98a2b3; --primary: #5146df; --primary-strong: #4338ca; --primary-soft: rgba(81,70,223,.10); --primary-text: #fff; --danger: #dc3545; --danger-soft: rgba(220,53,69,.10); --warning: #d99000; --warning-soft: rgba(217,144,0,.10); --success: #16a34a; --success-soft: rgba(22,163,74,.10); --font-display: 'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-body: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-panel: 0 20px 60px -24px rgba(31,41,55,.20); --shadow-btn: 0 8px 20px -8px rgba(81,70,223,.35); --input-bg: rgba(255,255,255,.78); --input-focus-bg: #fff; --surface-dark: rgba(15,23,42,.035); --surface-darker: rgba(15,23,42,.055); --progress-bg: rgba(15,23,42,.08); } /* ============================================================ AUTHENTICATED DB-CONTROLLED DARK THEME Dark mode is ONLY enabled when authenticated PHP outputs: . Guests are always light. Browser/device preferences are NEVER consulted. ============================================================ */ body[data-theme="dark"] { color-scheme: dark; --bg: #0a0f1c; --bg-deep: #060910; --panel: rgba(255,255,255,.045); --panel-strong: rgba(255,255,255,.075); --panel-hover: rgba(255,255,255,.09); --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); --text: #e7ecf6; --muted: #8a93a8; --muted-dim: #5c6478; --primary: #35d6bd; --primary-strong: #22c2a8; --primary-soft: rgba(53,214,189,.14); --primary-text: #06231d; --danger: #ff6b6b; --danger-soft: rgba(255,107,107,.14); --warning: #f2b84b; --warning-soft: rgba(242,184,75,.14); --success: #35d6bd; --success-soft: rgba(53,214,189,.12); --input-bg: rgba(0,0,0,.25); --input-focus-bg: rgba(0,0,0,.35); --surface-dark: rgba(0,0,0,.20); --surface-darker: rgba(0,0,0,.25); --progress-bg: rgba(255,255,255,.08); } *,*::before,*::after { box-sizing:border-box; } html { background: var(--bg-deep); color-scheme: light; } body[data-theme="dark"] { background: radial-gradient(1100px 560px at 50% -8%, rgba(53,214,189,.10), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(53,214,189,.05), transparent 55%), var(--bg); } body { margin: 0; color-scheme: light; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color:inherit; text-decoration:none; } button { font-family:inherit; } input,select,textarea { font-family:inherit; color:inherit; } img,svg { display:block; max-width:100%; } ::selection { background:var(--primary-soft); color:var(--primary); } * { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; } *::-webkit-scrollbar { width:8px; height:8px; } *::-webkit-scrollbar-track { background:transparent; } *::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; } *::-webkit-scrollbar-thumb:hover { background:var(--muted-dim); } :focus { outline:none; } :focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-sm); } .wrap { width:100%; max-width:480px; margin:0 auto; padding:0 18px; } .quick-stage { display:flex; align-items:flex-start; justify-content:center; padding:28px 0 60px; } .glass { position:relative; background:linear-gradient(180deg,var(--panel-strong),var(--panel)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 22px 28px; box-shadow:var(--shadow-panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; } .glass::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent,var(--primary),transparent); opacity:.75; } h1 { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.01em; margin:2px 0 4px; display:flex; align-items:center; gap:8px; } .sub { color:var(--muted); font-size:13px; margin-bottom:18px; } #ist-clock { color:var(--muted-dim); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; } .small { font-size:12.5px; color:var(--muted); } .center { text-align:center; } .hint { color:var(--muted-dim); font-weight:400; font-size:.92em; } .req { color:var(--danger); font-weight:600; } .hidden { display:none !important; } label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; } input[type="text"], input[type="password"], input[type="number"], input:not([type]) { width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); padding:11px 13px; font-size:14.5px; transition:border-color .15s ease,background .15s ease; } input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input:not([type])::placeholder { color:var(--muted-dim); } input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="number"]:focus-visible, input:not([type]):focus-visible { border-color:var(--primary); background:var(--input-focus-bg); } input[readonly] { color:var(--primary); font-family:var(--font-mono); font-size:13px; letter-spacing:.01em; cursor:text; } #manual { font-family:var(--font-mono); font-size:18px; font-weight:500; letter-spacing:.28em; text-align:center; padding:13px; } button { appearance:none; border:1px solid var(--border); background:var(--panel-strong); color:var(--text); border-radius:var(--radius-sm); padding:11px 14px; font-size:13.5px; font-weight:600; font-family:var(--font-display); letter-spacing:.01em; cursor:pointer; transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease; } button:hover { background:var(--panel-hover); border-color:var(--border-strong); } button:active { transform:translateY(1px); } button:disabled { opacity:.5; cursor:not-allowed; transform:none; } button.primary { background:linear-gradient(180deg,var(--primary),var(--primary-strong)); border-color:transparent; color:var(--primary-text); box-shadow:var(--shadow-btn); } button.primary:hover { filter:brightness(1.05); } button.primary:disabled { box-shadow:none; } button .icon { margin-right:6px; } .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; } .grid2 button { padding:22px 10px; font-size:14px; flex-direction:column; } .grid2 button .icon { display:block; font-size:26px; margin:0 0 8px; } .row { display:flex; gap:8px; margin-top:8px; align-items:flex-start; } .row label { margin-bottom:0; } .back { display:inline-block; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:14px; cursor:pointer; } .back:hover { color:var(--text); } input[type="radio"], input[type="checkbox"] { accent-color:var(--primary); width:16px; height:16px; margin-right:8px; vertical-align:-3px; } .duration-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .duration-opt { display:flex; align-items:center; justify-content:center; gap:0; margin:0; padding:10px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-dark); cursor:pointer; font-weight:500; font-size:13px; color:var(--muted); transition:border-color .15s ease,color .15s ease,background .15s ease; } .duration-opt input { position:absolute; opacity:0; pointer-events:none; } .duration-opt:has(input:checked) { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); } .duration-opt span { font-family:var(--font-mono); } .msg { border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; margin-top:10px; border:1px solid transparent; line-height:1.45; } .msg.ok { background:var(--success-soft); border-color:rgba(22,163,74,.30); color:var(--success); } .msg.err { background:var(--danger-soft); border-color:rgba(220,53,69,.30); color:var(--danger); } #msg:empty,#uploadMsg:empty { margin:0; } .spinner { width:30px; height:30px; margin:22px auto 4px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:spin .85s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } #qrbox { display:flex; justify-content:center; margin:14px 0 4px; padding:14px; background:#fff; border-radius:var(--radius-md); width:fit-content; margin-left:auto; margin-right:auto; } #shareLink { flex:1; } .countdown { margin-top:14px; padding:9px 12px; text-align:center; font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.02em; color:var(--primary); background:var(--primary-soft); border:1px solid var(--primary); border-radius:999px; border-opacity:.3; } .countdown::before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--primary); animation:pulse 1.6s ease-out infinite; vertical-align:1px; } @keyframes pulse { 0% { box-shadow:0 0 0 0 var(--primary-soft); } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } #liveCount { font-family:var(--font-mono); font-size:12px; color:var(--muted); } #pendingBox,#participantsBox { background:var(--surface-dark); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; } #pendingBox:empty,#participantsBox:empty { display:none; padding:0; border:0; } #pendingBox b,#participantsBox b { color:var(--text); font-family:var(--font-display); } #pendingBox { border-color:rgba(217,144,0,.30); background:var(--warning-soft); } #pendingBox b { color:var(--warning); } .apBtn,.muteBtn,.kickBtn { padding:7px 10px; font-size:12px; } .apBtn[data-d="approve"] { background:var(--success-soft); border-color:rgba(22,163,74,.30); color:var(--success); } .apBtn[data-d="reject"] { background:var(--danger-soft); border-color:rgba(220,53,69,.30); color:var(--danger); } .kickBtn { color:#fff; } #muteNotice:empty { display:none; } .dropzone { border:1.5px dashed var(--border-strong); border-radius:var(--radius-md); padding:26px 16px; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease; position:relative; } .dropzone::before { content:'📁'; display:block; font-size:22px; margin-bottom:8px; opacity:.8; } .dropzone:hover { border-color:var(--muted); color:var(--text); } .dropzone.drag { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); } .filelist:not(:empty) { margin-top:10px; display:flex; flex-direction:column; gap:6px; } .chosen-file { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-dark); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:12.5px; } .chosen-file-size { font-family:var(--font-mono); color:var(--muted); font-size:11.5px; white-space:nowrap; } .progress { margin-top:10px; height:6px; border-radius:99px; background:var(--progress-bg); overflow:hidden; } #progbar { height:100%; width:0%; background:linear-gradient(90deg,var(--primary-strong),var(--primary)); border-radius:99px; transition:width .2s ease; } #fileList:not(:empty) { display:flex; flex-direction:column; gap:8px; margin-top:10px; } .file-card { display:flex; align-items:flex-start; gap:10px; background:var(--surface-dark); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 10px 10px 12px; transition:border-color .15s ease; } .file-card:hover { border-color:var(--border-strong); } .file-icon { font-size:18px; line-height:1; margin-top:2px; } .file-meta { flex:1; min-width:0; } .file-name { font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; } .uploader-tag { font-weight:400; color:var(--muted-dim); font-size:12px; } .file-sub { margin-top:2px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); } .file-preview:not(:empty) { margin-top:8px; } .preview-media { display:block; width:100%; max-height:260px; border-radius:var(--radius-sm); margin-top:6px; object-fit:contain; background:#000; border:1px solid var(--border); } .file-card button { padding:7px 9px; font-size:13px; line-height:1; margin-left:4px; flex-shrink:0; } .pinBtn,.prevBtn,.dlBtn { background:var(--panel); } .dlBtn { color:var(--primary); border-color:var(--primary); } .chat-box { max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-md); padding:10px; margin-top:8px; background:var(--surface-darker); scroll-behavior:smooth; } .chat-msg { padding:5px 4px; font-size:13px; line-height:1.45; word-break:break-word; } .chat-msg .chat-name { font-weight:700; margin-right:6px; color:var(--muted); font-family:var(--font-display); font-size:12px; } .chat-mine .chat-name { color:var(--primary); } .chat-msg .chat-text { color:var(--text); } #chatInput { flex:1; } #video { width:100%; aspect-ratio:4/3; border-radius:var(--radius-md); background:#000; border:1px solid var(--border); object-fit:cover; } @media (max-width:380px) { .wrap { padding:0 12px; } .glass { padding:20px 16px 22px; } .grid2 { gap:8px; } .grid2 button { padding:18px 8px; } .duration-row { gap:6px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }