* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0a0e17; --card:#111827; --card-hover:#151d2e; --border:#1e293b;
  --accent:#38bdf8; --accent-glow:rgba(56,189,248,0.12); --accent-dim:#38bdf822;
  --green:#00ff99; --green-dim:#00ff9922;
  --red:#ef4444; --red-dim:#ef444422;
  --yellow:#f59e0b; --yellow-dim:#f59e0b22;
  --text:#e2e8f0; --text2:#94a3b8; --dim:#64748b;
}
html, body { height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; }
.screen { display:none; }
.screen.active { display:flex; }

/* AUTH */
#auth-screen { justify-content:center; align-items:center; flex-direction:column; height:100vh; height:100dvh; min-height:0; padding:20px; overflow-y:auto; }
html.js-vh #auth-screen { height: var(--app-h); }
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:20px; width:400px; max-width:100%; padding:36px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.auth-header { text-align:center; margin-bottom:28px; }
.auth-icon-wrap { width:72px; height:72px; border-radius:18px; background:var(--accent-dim); border:1px solid var(--accent); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.auth-header h1 { font-size:1.5rem; font-weight:700; letter-spacing:-0.5px; }
.auth-header p { color:var(--dim); font-size:0.8rem; margin-top:4px; }
.auth-tabs { display:flex; gap:4px; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:24px; }
.auth-tab { flex:1; background:transparent; border:none; color:var(--dim); padding:10px; border-radius:8px; cursor:pointer; font-size:0.82rem; font-weight:500; transition:all 0.2s; }
.auth-tab.active { background:var(--accent); color:var(--bg); font-weight:600; }
.auth-tab:hover:not(.active) { color:var(--text2); }
.input-group { position:relative; margin-bottom:12px; }
.input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none; }
.auth-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px 12px 42px; color:var(--text); font-size:0.85rem; outline:none; transition:border-color 0.2s, box-shadow 0.2s; }
.auth-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.auth-input::placeholder { color:var(--dim); }
.auth-error { background:var(--red-dim); border:1px solid #ef444466; color:var(--red); font-size:0.78rem; padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.auth-btn { width:100%; background:var(--accent); color:var(--bg); border:none; border-radius:10px; padding:12px; font-size:0.85rem; font-weight:600; cursor:pointer; margin-top:4px; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.auth-btn:hover { opacity:0.88; transform:translateY(-1px); }
.auth-btn:disabled { opacity:0.5; cursor:wait; transform:none; }
.auth-links { text-align:center; margin-top:20px; font-size:0.75rem; }
.auth-links a { color:var(--dim); text-decoration:none; transition:color 0.2s; }
.auth-links a:hover { color:var(--accent); }

/* Disclaimer (dupochron) */
.auth-disclaimer { display:flex; gap:12px; align-items:flex-start; width:400px; max-width:100%; margin:18px auto 0; background:var(--card); border:1px solid #f59e0b44; border-radius:16px; padding:16px 18px; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.auth-disclaimer svg { flex-shrink:0; margin-top:2px; }
.auth-disclaimer-text strong { display:block; font-size:0.82rem; color:var(--yellow); margin-bottom:6px; line-height:1.4; }
.auth-disclaimer-text p { font-size:0.74rem; color:var(--text2); line-height:1.55; margin-bottom:8px; }
.auth-disclaimer-text p:last-child { margin-bottom:0; }
.auth-disclaimer-text a { color:var(--yellow); text-decoration:underline; }
.auth-links-sep { margin:0 8px; color:var(--text2); opacity:0.5; }

.auth-check { display:flex; gap:10px; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 12px; margin-bottom:12px; cursor:pointer; }
.auth-check input { margin-top:2px; accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; }
.auth-check span { font-size:0.76rem; color:var(--text2); line-height:1.4; }

/* FM SCREEN */
#fm-screen { flex-direction:column; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
html.js-vh #fm-screen { height: var(--app-h); }
.fm-header { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--border); flex-wrap:wrap; gap:12px; }
.fm-header-left { display:flex; align-items:center; gap:10px; }
.fm-header-left h2 { font-size:1.05rem; font-weight:600; }
.fm-header-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Storage Gauge */
.storage-section { display:flex; align-items:center; gap:8px; }
.storage-gauge-wrap { position:relative; width:56px; height:56px; cursor:default; flex-shrink:0; }
.storage-gauge-wrap canvas { display:block; width:56px; height:56px; }
.storage-gauge-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.storage-gauge-value { font-size:0.7rem; font-weight:700; font-family:monospace; display:block; line-height:1; color:var(--text); }
.storage-gauge-label { font-size:0.4rem; color:var(--dim); text-transform:uppercase; letter-spacing:1px; display:block; margin-top:1px; }

/* Storage Info Text */
.storage-info { display:flex; align-items:center; gap:4px; font-family:monospace; font-size:0.7rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:5px 10px; white-space:nowrap; flex-shrink:0; }
.storage-used { color:var(--accent); font-weight:700; }
.storage-sep { color:var(--dim); font-size:0.6rem; }
.storage-limit { color:var(--text2); }

.badge { background:var(--bg); border:1px solid var(--border); padding:5px 14px; border-radius:20px; font-size:0.72rem; color:var(--text2); font-family:monospace; }
.btn-logout { background:transparent; color:var(--red); border:1px solid #ef444444; border-radius:8px; padding:6px 14px; font-size:0.78rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.btn-logout:hover { background:var(--red-dim); border-color:var(--red); }

.btn-profile { background:transparent; color:var(--accent); border:1px solid #00c6ff44; border-radius:8px; padding:6px 12px; font-size:0.78rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.btn-profile:hover { background:var(--accent-dim); border-color:var(--accent); }

.chat-status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ef4444; margin-right:6px; vertical-align:1px; flex-shrink:0; }
.chat-status-dot.online { background:#22c55e; box-shadow:0 0 6px #22c55e88; }
.chat-status-dot.offline { background:#ef4444; }

.profile-info { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.profile-username { font-size:1rem; color:var(--text); font-weight:600; }
.profile-dot-line { font-size:0.75rem; color:var(--text2); }
.profile-bio-label { display:block; font-size:0.75rem; color:var(--text2); margin-bottom:6px; }
.profile-bio-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:0.85rem; outline:none; resize:none; line-height:1.5; margin-bottom:4px; box-sizing:border-box; }
.profile-bio-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.profile-bio-counter { text-align:right; font-size:0.7rem; color:var(--dim); margin-bottom:12px; }

.user-tooltip { position:fixed; z-index:13000; display:none; min-width:210px; max-width:300px; background:rgba(13,17,26,0.97); border:1px solid #2a3a50; border-radius:14px; padding:12px 14px 13px; box-shadow:0 14px 44px rgba(0,0,0,0.55); backdrop-filter:blur(8px); pointer-events:none; }
.ut-row { display:flex; gap:11px; align-items:center; }
.ut-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#0f8bff,#00ff99); color:#0b0e14; font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:0.02em; }
.ut-top { display:flex; align-items:center; flex-wrap:wrap; }
.ut-name { font-size:0.95rem; font-weight:700; color:#fff; }
.ut-role { background:rgba(0,255,153,0.14); color:#00ff99; border:1px solid rgba(0,255,153,0.35); font-size:0.58rem; font-weight:600; padding:2px 8px; border-radius:10px; margin-left:8px; letter-spacing:0.05em; }
.ut-status { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:0.72rem; color:var(--text2); }
.user-tooltip .chat-status-dot { width:9px; height:9px; margin-right:0; }
.ut-meta { margin-top:8px; display:flex; flex-direction:column; gap:3px; font-size:0.7rem; color:var(--dim); line-height:1.45; }
.ut-bio { margin-top:9px; padding-top:9px; border-top:1px dashed #2a3a50; font-size:0.8rem; color:#e6e9ee; line-height:1.5; white-space:pre-wrap; word-break:break-word; }

/* Content */
.fm-content { flex:1; padding:20px 24px; overflow-y:auto; }
.panel-section { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:16px; transition:border-color 0.3s, box-shadow 0.3s; }
.panel-section:hover { border-color:#2a3a50; }
.panel-section h2 { font-size:0.9rem; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

/* No Upload */
.no-upload-card { max-width:480px; margin:40px auto; text-align:center; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:48px 36px; }
.no-upload-icon { margin-bottom:20px; opacity:0.6; }
.no-upload-card h2 { font-size:1.15rem; margin-bottom:12px; }
.no-upload-card p { color:var(--text2); font-size:0.85rem; margin-bottom:16px; line-height:1.5; }
.admin-contact { display:inline-flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--accent); border-radius:12px; padding:14px 24px; margin:16px 0; }
.admin-contact strong { color:var(--accent); font-size:1rem; }
.hint { color:var(--dim); font-size:0.75rem !important; }

/* Toolbar */
.fm-toolbar { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.fm-breadcrumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.crumb { background:none; border:none; color:var(--accent); font-size:0.8rem; cursor:pointer; padding:5px 10px; border-radius:6px; display:flex; align-items:center; gap:5px; transition:all 0.15s; }
.crumb:hover { background:var(--accent-dim); }
.crumb-sep { color:var(--dim); font-size:0.7rem; }
.fm-actions { display:flex; gap:8px; }
.btn-upload { background:var(--accent); color:var(--bg); border:none; border-radius:8px; padding:8px 18px; font-size:0.8rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.btn-upload:hover { opacity:0.88; transform:translateY(-1px); box-shadow:0 4px 12px var(--accent-glow); }
.btn-secondary { background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:0.8rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* Upload Bar */
.upload-bar { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:14px; }
.upload-bar-progress { width:100%; height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.upload-bar-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--green)); border-radius:2px; width:0%; transition:width 0.3s; }
.upload-bar-info { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--dim); }

/* File List */
.file-list { display:flex; flex-direction:column; gap:2px; }
.file-row { display:grid; grid-template-columns:36px 1fr 100px 140px 130px; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:all 0.15s; border:1px solid transparent; }
.file-row:hover { background:var(--card-hover); border-color:var(--border); }
.file-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--bg); border-radius:8px; font-size:1rem; border:1px solid var(--border); }
.file-name { font-size:0.85rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-name.folder { color:var(--accent); }
.file-size { font-size:0.75rem; color:var(--dim); font-family:monospace; text-align:right; }
.file-date { font-size:0.7rem; color:var(--dim); }
.file-actions { display:flex; gap:4px; justify-content:flex-end; }
.file-btn { background:none; border:1px solid var(--border); color:var(--dim); width:30px; height:30px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.file-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.file-btn.danger:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.file-btn.share:hover { border-color:var(--green); color:var(--green); background:var(--green-dim); }
.file-empty { text-align:center; color:var(--dim); padding:40px; font-size:0.85rem; }

/* Admin User Cards */
.admin-user-card { background:var(--bg); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; overflow:hidden; transition:border-color 0.3s; }
.admin-user-card:hover { border-color:#2a3a50; }
.admin-user-row { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; gap:12px; flex-wrap:wrap; }
.admin-user-info { display:flex; flex-direction:column; gap:4px; cursor:pointer; flex:1; min-width:0; }
.admin-user-info h4 { font-size:0.88rem; color:var(--accent); display:flex; align-items:center; gap:8px; }
.admin-user-info h4:hover { text-decoration:underline; }
.admin-user-info .user-meta { font-size:0.72rem; color:var(--dim); display:flex; gap:12px; flex-wrap:wrap; }
.admin-user-info .user-meta span { display:flex; align-items:center; gap:4px; }
.admin-user-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.admin-btn { background:none; border:1px solid var(--border); color:var(--text2); padding:5px 12px; border-radius:6px; cursor:pointer; font-size:0.72rem; transition:all 0.15s; display:flex; align-items:center; gap:5px; }
.admin-btn:hover { border-color:var(--accent); color:var(--accent); }
.admin-btn.active { background:var(--green-dim); color:var(--green); border-color:var(--green); }
.admin-btn.danger { border-color:#ef444444; color:var(--red); }
.admin-btn.danger:hover { background:var(--red-dim); border-color:var(--red); }
.admin-btn.primary { border-color:var(--accent); color:var(--accent); }
.admin-btn.primary:hover { background:var(--accent-dim); }
.limit-input { width:64px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:4px 8px; color:var(--text); font-size:0.75rem; font-family:monospace; text-align:center; transition:border-color 0.2s; }
.limit-input:focus { border-color:var(--accent); outline:none; }
.expand-icon { font-size:0.65rem; color:var(--dim); transition:transform 0.2s; }
.admin-user-files { border-top:1px solid var(--border); padding:12px 16px; background:rgba(0,0,0,0.25); }
.admin-user-files-bc { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.admin-user-files .file-list { display:flex; flex-direction:column; gap:2px; }
.admin-user-files .file-row { grid-template-columns:36px 1fr 100px 140px 130px; padding:8px 10px; }

/* Links */
.link-item { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-bottom:6px; flex-wrap:wrap; gap:10px; transition:border-color 0.2s; }
.link-item:hover { border-color:#2a3a50; }
.link-info { flex:1; min-width:200px; }
.link-info .link-name { font-size:0.82rem; color:var(--text); font-weight:500; }
.link-info .link-url { font-size:0.72rem; color:var(--accent); font-family:monospace; word-break:break-all; margin-top:3px; }
.link-info .link-meta { font-size:0.65rem; color:var(--dim); margin-top:4px; display:flex; gap:12px; }
.link-actions { display:flex; gap:6px; }

/* Modal */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:center; z-index:9000; }
.modal-content { background:var(--card); border:1px solid var(--border); border-radius:18px; width:400px; max-width:92vw; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.5); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:var(--dim); cursor:pointer; padding:6px; border-radius:8px; transition:all 0.15s; display:flex; }
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-body { padding:22px; }
.modal-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:0.85rem; font-family:monospace; outline:none; transition:border-color 0.2s, box-shadow 0.2s; margin-bottom:12px; }
.modal-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.modal-input::placeholder { color:var(--dim); }
.modal-error { background:var(--red-dim); border:1px solid #ef444466; color:var(--red); font-size:0.78rem; padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.modal-btn { width:100%; background:var(--accent); color:var(--bg); border:none; border-radius:10px; padding:11px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.modal-btn:hover { opacity:0.88; transform:translateY(-1px); }
.modal-btn:disabled { opacity:0.5; cursor:wait; transform:none; }

/* Share */
.share-label { font-size:0.82rem; color:var(--text2); margin-bottom:14px; word-break:break-all; padding:10px 14px; background:var(--bg); border-radius:8px; border:1px solid var(--border); }
.share-link-box { display:flex; gap:8px; margin-top:14px; }
.share-link-box .modal-input { flex:1; margin-bottom:0; font-size:0.72rem; }
.btn-copy { background:var(--accent); color:var(--bg); border:none; border-radius:10px; padding:10px 16px; font-size:0.78rem; font-weight:600; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.btn-copy:hover { opacity:0.88; }

/* Media Preview */
.modal-preview { width:90vw; max-width:900px; max-height:90vh; }
.preview-body { padding:0 !important; display:flex; align-items:center; justify-content:center; background:var(--bg); min-height:200px; max-height:calc(90vh - 60px); overflow:auto; }
.preview-body img { max-width:100%; max-height:calc(90vh - 60px); object-fit:contain; display:block; }
.preview-body video { max-width:100%; max-height:calc(90vh - 60px); display:block; outline:none; }
.preview-body audio { width:90%; max-width:500px; }
.preview-body .preview-unsupported { text-align:center; padding:40px 20px; color:var(--dim); }
.preview-body .preview-unsupported svg { margin-bottom:12px; opacity:0.5; }
.preview-body .preview-unsupported p { font-size:0.85rem; }

/* Drop Overlay */
.drop-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,14,23,0.92); backdrop-filter:blur(8px); display:flex; justify-content:center; align-items:center; z-index:9999; }
.drop-overlay-content { text-align:center; animation:pulse 1.5s ease-in-out infinite; }
.drop-overlay-content p { color:var(--accent); font-size:1.1rem; font-weight:600; margin-top:16px; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.05); opacity:0.8; } }

/* Screen-reader only - hides input without display:none (iOS compatible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* Mobile upload bar visible on small screens */
.upload-bar-info { flex-wrap: wrap; gap: 4px; }

@media (max-width:850px) {
  .fm-header { padding:10px 16px; gap:8px; }
  .fm-header-left h2 { font-size:0.95rem; }
  .storage-section { gap:6px; }
  .storage-gauge-wrap { width:48px; height:48px; }
  .storage-gauge-wrap canvas { width:48px; height:48px; }
  .storage-gauge-value { font-size:0.6rem; }
  .storage-info { font-size:0.65rem; padding:4px 8px; }
  .badge { font-size:0.65rem; padding:4px 10px; }
  .btn-logout { padding:5px 10px; font-size:0.7rem; }
}

@media (max-width:700px) {
  .file-row { grid-template-columns:36px 1fr auto; gap:6px; }
  .file-date, .file-size { display:none; }
  .file-actions { gap:2px; }
  .file-btn { width:34px; height:34px; }
  .fm-header { padding:8px 12px; flex-wrap:wrap; }
  .fm-header-left h2 { font-size:0.88rem; }
  .fm-header-right { gap:6px; }
  .fm-content { padding:10px 12px; }
  .panel-section { padding:12px; border-radius:12px; }
  .panel-section h2 { font-size:0.82rem; }

  .storage-section { gap:5px; }
  .storage-info { font-size:0.6rem; padding:3px 7px; gap:3px; }

  .fm-toolbar { flex-direction:column; align-items:stretch; gap:8px; padding-bottom:10px; }
  .fm-breadcrumb { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .fm-actions { justify-content:flex-start; gap:6px; }

  .btn-upload { padding:10px 16px; font-size:0.82rem; min-height:44px; }
  .btn-secondary { padding:10px 12px; font-size:0.82rem; min-height:44px; }

  .btn-mobile-hide { display:none; }

  .auth-card { padding:24px 20px; border-radius:16px; }
  .auth-header h1 { font-size:1.3rem; }
  .auth-input { padding:14px 14px 14px 42px; font-size:16px; }
  .auth-btn { padding:14px; font-size:0.9rem; min-height:48px; }

  .modal-content { border-radius:14px; max-width:96vw; }
  .modal-header { padding:14px 16px; }
  .modal-body { padding:16px; }
  .modal-input { padding:14px; font-size:16px; }

  .no-upload-card { padding:32px 20px; }
  .no-upload-card h2 { font-size:1rem; }

  .link-item { padding:10px 12px; }
  .link-info .link-url { font-size:0.65rem; }

  .admin-user-row { padding:12px; gap:8px; }
  .admin-user-actions { gap:4px; }
  .admin-btn { padding:6px 10px; font-size:0.68rem; min-height:36px; }
  .limit-input { width:56px; font-size:0.7rem; }
}

@media (max-width:480px) {
  .file-row { grid-template-columns:32px 1fr auto; gap:4px; padding:8px; }
  .file-icon { width:32px; height:32px; }

  .fm-header { padding:6px 10px; gap:6px; }
  .fm-header-left h2 { font-size:0.82rem; }
  .fm-header-left svg { width:18px; height:18px; }
  .fm-header-right { gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  .storage-section { gap:4px; }
  .storage-gauge-wrap { width:40px; height:40px; }
  .storage-gauge-wrap canvas { width:40px; height:40px; }
  .storage-info { font-size:0.58rem; padding:3px 6px; gap:2px; }
  .badge { font-size:0.55rem; padding:2px 6px; }
  .btn-logout span { display:none; }

  .fm-content { padding:8px; }
  .panel-section { padding:10px; margin-bottom:10px; }

  .admin-user-info .user-meta { font-size:0.65rem; }

  .share-link-box { flex-direction:column; }
  .share-link-box .btn-copy { width:100%; justify-content:center; min-height:44px; }

  .auth-card { padding:20px 16px; }
  .auth-header { margin-bottom:20px; }
  .auth-header h1 { font-size:1.15rem; }
  .auth-icon-wrap { width:56px; height:56px; border-radius:14px; }
}

/* iPhone safe area */
@supports (padding-top: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .fm-header { padding-top: calc(10px + env(safe-area-inset-top)); }
  .drop-overlay { padding-bottom: env(safe-area-inset-bottom); }
}

/* iPhone home-indicator / notch - chat */
@media (max-width:700px) {
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .chat-input-area { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .chat-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* Prevent iOS zoom on input focus */
@media (max-width:850px) {
  input[type="text"], input[type="password"], input[type="number"] {
    font-size: 16px !important;
  }
}

/* Smooth scrolling */
.fm-content {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Better tap highlights */
button, label, a {
  -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly overflow on mobile */
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ===== NAV TABS (Files/Chat toggle) ===== */
.fm-nav-tabs { display:flex; gap:2px; background:var(--bg); border-radius:10px; padding:3px; }
.fm-nav-tab { background:transparent; border:none; color:var(--dim); padding:7px 14px; border-radius:8px; cursor:pointer; font-size:0.78rem; font-weight:500; transition:all 0.2s; display:flex; align-items:center; gap:6px; position:relative; white-space:nowrap; }
.fm-nav-tab.active { background:var(--accent); color:var(--bg); font-weight:600; }
.fm-nav-tab:hover:not(.active) { color:var(--text2); }
.chat-unread-badge { background:var(--red); color:#fff; font-size:0.6rem; font-weight:700; padding:1px 5px; border-radius:8px; min-width:16px; text-align:center; line-height:1.3; }

/* ===== CHAT LAYOUT ===== */
#chat-screen { min-height:0; }
.chat-layout { display:flex; flex:1; min-height:0; overflow:hidden; }
.chat-sidebar { width:280px; min-width:280px; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.chat-sidebar-header { padding:16px 18px; border-bottom:1px solid var(--border); }
.chat-sidebar-header h3 { font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.chat-sidebar-list { flex:1; overflow-y:auto; padding:8px; }
.chat-sidebar-divider { height:1px; background:var(--border); margin:6px 10px; }

/* Contacts */
.chat-contact { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:all 0.15s; border:1px solid transparent; }
.chat-contact:hover { background:var(--card-hover); border-color:var(--border); }
.chat-contact.active { background:var(--accent-dim); border-color:var(--accent); }
.chat-contact-avatar { width:40px; height:40px; border-radius:12px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.85rem; font-weight:700; color:var(--accent); }
.public-avatar { background:var(--accent-dim); border-color:var(--accent); }
.chat-contact-info { flex:1; min-width:0; }
.chat-contact-name { font-size:0.82rem; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-contact-preview { font-size:0.7rem; color:var(--dim); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.chat-contact-self-label { font-size:0.62rem; color:var(--accent); font-weight:500; }
.chat-contact-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.chat-contact-time { font-size:0.6rem; color:var(--dim); }
.chat-contact-unread { background:var(--accent); color:var(--bg); font-size:0.6rem; font-weight:700; padding:1px 6px; border-radius:8px; min-width:18px; text-align:center; }

/* Chat Main */
.chat-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-room { display:flex; flex-direction:column; height:100%; }
.chat-room-header { display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--card); border-bottom:1px solid var(--border); min-height:56px; }
.chat-room-header h3 { font-size:0.9rem; font-weight:600; }
.chat-room-status { font-size:0.7rem; color:var(--dim); }
.chat-room-actions { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.chat-clear-btn { background:var(--bg); border:1px solid var(--border); color:var(--dim); width:34px; height:34px; border-radius:9px; cursor:pointer; display:none; align-items:center; justify-content:center; transition:all 0.15s; }
.chat-clear-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.chat-mobile-back { display:none; background:none; border:none; color:var(--dim); cursor:pointer; padding:4px; border-radius:6px; }
.chat-mobile-back:hover { color:var(--text); background:var(--border); }

/* Messages */
.chat-messages { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:4px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.chat-msg { max-width:75%; padding:10px 14px; border-radius:14px; font-size:0.95rem; line-height:1.5; word-break:break-word; position:relative; animation:msgIn 0.2s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.chat-msg.other { align-self:flex-start; background:var(--card); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-msg.self { align-self:flex-end; background:var(--accent); color:var(--bg); border-bottom-right-radius:4px; max-width:66%; padding:8px 12px; }
.chat-msg-sender { font-size:0.72rem; font-weight:600; color:var(--accent); margin-bottom:3px; }
.chat-msg.self .chat-msg-sender { color:rgba(0,0,0,0.5); }
.chat-msg-text { margin:0; }
.chat-msg-text a.chat-link { color:#7dd3fc; font-weight:600; font-size:calc(1em + 1px); text-decoration:underline; text-decoration-style:solid; text-underline-offset:2px; text-decoration-color:#7dd3fc66; transition:all 0.15s; }
.chat-msg.self .chat-msg-text a.chat-link { color:#062b3a; text-decoration-color:rgba(6,43,58,0.45); }
.chat-msg-text a.chat-link:hover { text-decoration-color:#7dd3fc; text-decoration-style:double; }
.chat-msg-deleted { font-style:italic; color:var(--dim); font-size:0.78rem; padding:2px 0; }
.chat-msg.msg-deleted { opacity:0.75; }
.chat-msg-del { position:absolute; top:6px; right:6px; background:none; border:none; color:var(--dim); cursor:pointer; padding:3px; border-radius:6px; opacity:0; transition:opacity 0.15s, background 0.15s, color 0.15s; display:flex; align-items:center; justify-content:center; z-index:2; }
.chat-msg:hover .chat-msg-del, .chat-msg-del:focus-visible { opacity:1; }
.chat-msg-del:hover { color:var(--red); background:var(--red-dim); }
.chat-msg.self .chat-msg-del { color:rgba(0,0,0,0.45); }
.chat-msg.self .chat-msg-del:hover { color:var(--bg); background:rgba(0,0,0,0.35); }
.chat-msg-time { font-size:0.65rem; color:var(--dim); margin-top:4px; text-align:right; }
.chat-msg.self .chat-msg-time { color:rgba(0,0,0,0.4); }
.chat-msg-text.e2e-wait { color:var(--dim); font-style:italic; }
.chat-msg-text.e2e-decrypted { word-break:break-word; }
.chat-e2e-badge { font-size:0.58rem; font-weight:600; color:#2ecc71; background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.35); border-radius:20px; padding:2px 8px; margin-left:8px; vertical-align:middle; white-space:nowrap; }
.chat-e2e-badge.chat-e2e-off { color:var(--dim); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }
.chat-msg.msg-pending { opacity:0.6; }
.chat-msg-pending { font-size:0.68rem; color:var(--dim); margin-top:4px; text-align:right; font-style:italic; }
.chat-msg.self .chat-msg-pending { color:rgba(0,0,0,0.45); }
.chat-msg-system { align-self:center; background:transparent; color:var(--dim); font-size:0.72rem; padding:6px 12px; max-width:100%; text-align:center; }

/* Attachments in messages */
.chat-msg-attachment { margin-top:6px; }
.chat-msg-image { max-width:280px; max-height:200px; border-radius:8px; cursor:pointer; display:block; border:1px solid var(--border); }
.chat-msg.self .chat-msg-image { border-color:rgba(0,0,0,0.15); }
.chat-msg-video { max-width:320px; max-height:240px; border-radius:8px; display:block; }
.chat-msg-file { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 12px; text-decoration:none; color:var(--text); transition:all 0.15s; }
.chat-msg.self .chat-msg-file { background:rgba(0,0,0,0.15); border-color:rgba(0,0,0,0.2); color:var(--bg); }
.chat-msg-file:hover { border-color:var(--accent); }
.chat-msg-file-icon { width:32px; height:32px; border-radius:8px; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-msg.self .chat-msg-file-icon { background:rgba(0,0,0,0.2); }
.chat-msg-file-info { flex:1; min-width:0; }
.chat-msg-file-name { font-size:0.78rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.chat-msg-file-size { font-size:0.65rem; color:var(--dim); }
.chat-msg.self .chat-msg-file-size { color:rgba(0,0,0,0.5); }

.chat-msg-read { font-size:0.62rem; color:var(--dim); margin-top:2px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:3px; font-weight:500; }
.chat-msg.self .chat-msg-read { color:rgba(0,0,0,0.45); }

/* Awatar czytelnika przy ostatniej przeczytanej wiadomosci */
.chat-read-avatar { position:absolute; bottom:-12px; right:6px; width:22px; height:22px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); overflow:hidden; display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.chat-read-img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-read-letter { font-size:0.62rem; font-weight:700; color:var(--accent); line-height:1; }

/* Dymek "pisze..." (styl iMessage - kropki przechodzace w prawo-lewo) */
.chat-typing-bubble { align-self:flex-start; display:flex; flex-direction:column; gap:2px; max-width:75%; }
.chat-typing-dots { display:flex; align-items:center; gap:5px; padding:11px 15px; background:var(--card); border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:4px; width:fit-content; }
.chat-typing-dots span { width:7px; height:7px; border-radius:50%; background:var(--dim); animation:typingDotX 1.1s ease-in-out infinite; }
.chat-typing-dots span:nth-child(2) { animation-delay:0.18s; }
.chat-typing-dots span:nth-child(3) { animation-delay:0.36s; }
@keyframes typingDotX { 0% { transform:translateX(14px); opacity:0; } 30%,65% { transform:translateX(0); opacity:1; } 100% { transform:translateX(-14px); opacity:0; } }
.chat-typing-label { font-size:0.7rem; color:var(--dim); padding-left:4px; }

/* "pisze..." na lewym pasku kontaktow */
.chat-contact-typing .chat-contact-preview { color:var(--accent); display:flex; align-items:center; gap:4px; font-style:normal; }
.chat-contact-typing-dots { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.chat-contact-typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; animation:typingDotXSmall 1s ease-in-out infinite; }
.chat-contact-typing-dots span:nth-child(2) { animation-delay:0.15s; }
.chat-contact-typing-dots span:nth-child(3) { animation-delay:0.3s; }
@keyframes typingDotXSmall { 0% { transform:translateX(6px); opacity:0; } 30%,65% { transform:translateX(0); opacity:1; } 100% { transform:translateX(-6px); opacity:0; } }
.chat-contact-typing-text { font-style:italic; margin-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Input Area */
.chat-input-area { display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--card); border-top:1px solid var(--border); }
.chat-attach-btn { background:var(--bg); border:1px solid var(--border); color:var(--dim); width:40px; height:40px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.chat-cam-btn { display:none; }
.chat-attach-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.chat-input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:0.85rem; outline:none; transition:border-color 0.2s, box-shadow 0.2s; }
.chat-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.chat-input::placeholder { color:var(--dim); }
.chat-send-btn { background:var(--accent); color:var(--bg); border:none; width:40px; height:40px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.chat-send-btn:hover { opacity:0.85; transform:scale(1.05); }

/* Attach preview */
.chat-attach-preview { display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:0.72rem; color:var(--text2); max-width:200px; }
.chat-attach-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.chat-attach-preview button { background:none; border:none; color:var(--red); cursor:pointer; padding:2px; display:flex; flex-shrink:0; }

/* Ideas (pomysly na nowe funkcje) */
.ideas-panel { max-width:760px; margin:0 auto; padding:20px 0; width:100%; }
.ideas-sub { color:var(--dim); font-size:0.8rem; line-height:1.5; margin-top:-6px; margin-bottom:14px; }
.ideas-composer h3 { font-size:0.95rem; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ideas-input { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--text); font-size:0.95rem; resize:vertical; min-height:84px; outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-family:inherit; }
.ideas-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.ideas-composer-actions { display:flex; gap:10px; margin-top:10px; align-items:center; }
.ideas-img-btn { background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:9px; padding:10px 14px; font-size:0.82rem; cursor:pointer; display:flex; align-items:center; gap:7px; transition:all 0.2s; }
.ideas-img-btn:hover { border-color:var(--accent); color:var(--accent); }
.ideas-send-btn { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:10px 18px; font-size:0.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; transition:all 0.2s; box-shadow:0 2px 8px var(--accent-glow); }
.ideas-send-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.idea-image-preview { position:relative; display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:10px; width:fit-content; }
.idea-image-preview img { max-height:120px; max-width:240px; border-radius:8px; display:block; }
.idea-image-preview-del { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,0.65); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.idea-list { margin-top:14px; }
.ideas-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.idea-item { display:flex; align-items:flex-start; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; transition:border-color 0.3s, box-shadow 0.3s; }
.idea-item:hover { border-color:#2a3a50; }
.idea-thumb { position:relative; width:96px; height:96px; border-radius:10px; overflow:hidden; flex-shrink:0; cursor:zoom-in; border:1px solid var(--border); background:var(--bg); }
.idea-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.2s; }
.idea-thumb:hover img { transform:scale(1.06); }
.idea-thumb-zoom { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; background:rgba(0,0,0,0.35); color:#fff; }
.idea-thumb:hover .idea-thumb-zoom { opacity:1; }
.idea-body { flex:1; min-width:0; }
.idea-text { font-size:0.95rem; line-height:1.5; word-break:break-word; white-space:pre-line; }
.idea-text-onlyimg { color:var(--dim); font-style:italic; }
.idea-meta { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:0.72rem; color:var(--dim); }
.idea-user { color:var(--accent); font-weight:600; }
.idea-time { color:var(--dim); }
.idea-del { background:var(--bg); border:1px solid var(--border); color:var(--dim); width:34px; height:34px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
.idea-del:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.ideas-empty { text-align:center; color:var(--dim); padding:50px 20px; }
.ideas-empty svg { opacity:0.3; margin-bottom:12px; }
.ideas-empty p { font-size:0.85rem; }

/* Changelogi */
.changelog-panel { max-width:760px; margin:0 auto; padding:20px 0; width:100%; }
.changelog-composer { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-top:14px; }
.changelog-composer h3 { font-size:0.95rem; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.changelog-composer-row { display:flex; gap:10px; margin-bottom:10px; }
.changelog-input { flex:1; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-size:0.9rem; outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-family:inherit; min-width:0; }
.changelog-input:focus, .changelog-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.changelog-textarea { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--text); font-size:0.9rem; resize:vertical; min-height:110px; outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-family:inherit; }
.changelog-composer-actions { display:flex; gap:10px; margin-top:10px; align-items:center; }
.changelog-send-btn { background:var(--accent); color:var(--bg); border:none; border-radius:10px; padding:10px 18px; font-size:0.88rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:opacity 0.15s; }
.changelog-send-btn:hover { opacity:0.9; }
.changelog-cancel-btn { background:var(--bg); color:var(--dim); border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-size:0.85rem; cursor:pointer; transition:all 0.15s; }
.changelog-cancel-btn:hover { color:var(--text2); border-color:#2a3a50; }
.ideas-msg { font-size:0.8rem; font-weight:600; }
.changelog-list { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.changelog-item { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; border-left:3px solid var(--accent); }
.changelog-item-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.changelog-version { background:var(--accent-dim); color:var(--accent); font-size:0.7rem; font-weight:700; border:1px solid var(--accent); border-radius:20px; padding:3px 10px; letter-spacing:0.03em; }
.changelog-title { font-size:1.02rem; font-weight:700; color:var(--text); flex:1; min-width:150px; }
.changelog-date { font-size:0.72rem; color:var(--dim); white-space:nowrap; }
.changelog-btn { background:var(--bg); border:1px solid var(--border); color:var(--dim); width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.changelog-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.changelog-btn.danger:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.changelog-text { font-size:0.9rem; line-height:1.6; color:var(--text2); margin-top:6px; white-space:pre-line; word-break:break-word; }
.changelog-note { font-size:0.66rem; color:var(--dim); margin-top:10px; }
@media (max-width:640px) {
  .changelog-composer-row { flex-direction:column; }
  .changelog-panel { padding:12px 0; }
}

/* Lightbox (podglad obrazu) */
.lightbox { position:fixed; top:0; left:0; width:100%; height:100%; height:100dvh; background:rgba(0,0,0,0.92); backdrop-filter:blur(6px); display:flex; flex-direction:column; z-index:10000; }
.lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; padding-top:calc(12px + env(safe-area-inset-top)); background:rgba(15,20,30,0.9); border-bottom:1px solid var(--border); flex-shrink:0; }
.lightbox-title { font-size:0.8rem; color:var(--text2); display:flex; align-items:center; gap:8px; }
.lightbox-tools { display:flex; gap:6px; }
.lightbox-btn, .lightbox-close { background:var(--card); border:1px solid var(--border); color:var(--text2); width:38px; height:38px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.lightbox-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.lightbox-close { color:var(--red); }
.lightbox-close:hover { border-color:var(--red); background:var(--red-dim); }
.lightbox-viewport { flex:1; position:relative; overflow:hidden; cursor:grab; touch-action:none; overscroll-behavior:contain; }
.lightbox-viewport.grabbing { cursor:grabbing; }
.lightbox-stage { position:absolute; top:50%; left:50%; will-change:transform; }
.lightbox-stage img { display:block; max-width:none; user-select:none; -webkit-user-select:none; pointer-events:none; }
.lightbox-zoom-badge { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(15,20,30,0.8); border:1px solid var(--border); color:var(--text2); font-size:0.7rem; padding:4px 10px; border-radius:8px; pointer-events:none; }

/* Mobile */
@media (max-width:700px) {
  .ideas-panel { padding:12px 0; }
  .ideas-composer-actions { flex-direction:column; }
  .ideas-composer-actions .ideas-img-btn, .ideas-composer-actions .ideas-send-btn { width:100%; justify-content:center; padding:12px; min-height:46px; font-size:0.88rem; }
  .ideas-input { min-height:100px; font-size:0.95rem; }
  .lightbox-bar { padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }
  .lightbox-btn, .lightbox-close { width:36px; height:36px; }
}
/* Chat loading */
.chat-loading { text-align:center; color:var(--dim); padding:40px; font-size:0.82rem; }
.chat-empty { text-align:center; color:var(--dim); padding:60px 20px; }
.chat-empty svg { opacity:0.3; margin-bottom:12px; }
.chat-empty p { font-size:0.85rem; }

/* Mobile Chat */
@media (max-width:700px) {
  .chat-layout { height:auto; }
  .chat-sidebar { position:fixed; top:0; left:0; width:100%; height:var(--app-h, 100%); z-index:100; transform:translateX(0); transition:transform 0.3s ease; }
  .chat-sidebar.hidden { transform:translateX(-100%); }
  .chat-mobile-back { display:flex; }
  .chat-msg { max-width:85%; }
  .chat-msg.self { max-width:74%; }
  .chat-msg-del { opacity:1; }
  .chat-msg-image { max-width:220px; max-height:160px; }
  .chat-msg-video { max-width:260px; max-height:200px; }
  .chat-input-area { padding:8px 12px; gap:6px; flex-wrap:wrap; }
  .chat-input { font-size:16px !important; padding:10px 12px; min-width:110px; }
  .chat-attach-btn { width:40px; height:40px; }
  .chat-cam-btn { display:flex; }
  .chat-send-btn { width:40px; height:40px; }
  .chat-attach-preview { max-width:140px; flex:1 1 100%; }
  .chat-messages { -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .fm-nav-tab { padding:6px 10px; font-size:0.72rem; }
  .fm-nav-tab svg { width:14px; height:14px; }
}

@media (max-width:480px) {
  .chat-sidebar-header { padding:12px 14px; }
  .chat-contact { padding:8px 10px; gap:8px; }
  .chat-contact-avatar { width:36px; height:36px; font-size:0.78rem; }
  .chat-room-header { padding:10px 14px; }
  .chat-messages { padding:12px 14px; }
}

/* ===== Dynamic DNS (NO-IP) w widoku admina ===== */
.ddns-status { padding:2px 0 6px; }
.ddns-row { display:flex; align-items:center; gap:12px; margin:10px 0; }
.ddns-row-icon { width:34px; height:34px; border-radius:9px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ddns-row-label { font-size:0.72rem; color:var(--dim); }
.ddns-row-val { font-size:0.88rem; font-weight:600; color:var(--text); margin-top:2px; }
.ddns-fields { padding-top:8px; border-top:1px dashed var(--border); }
.ddns-fields label { display:block; font-size:0.72rem; color:var(--dim); margin:10px 0 4px; }
input.ddns-field { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:0.82rem; font-family:monospace; outline:none; }
input.ddns-field:focus { border-color:var(--accent); }
.ddns-toggle { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--text2); margin:14px 0 4px; cursor:pointer; }
.ddns-toggle input { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.ddns-btns { display:flex; gap:10px; margin-top:14px; }
.ddns-save { flex:1; justify-content:center; }
.ddns-test { flex:1; justify-content:center; }
.ddns-msg { margin-top:12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:0.75rem; color:var(--text2); white-space:pre-line; }
.ddns-msg.ok { background:rgba(0,255,153,0.08); border-color:rgba(0,255,153,0.4); color:#00ff99; }
.ddns-msg.err { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.4); color:#ef4444; }

/* ===== Awatary ===== */
.avatar-letter { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:800; color:var(--accent); }
.avatar-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.chat-contact-avatar { position:relative; overflow:hidden; }
.chat-contact-avatar .avatar-letter { font-size:0.85rem; }

.chat-msg-sender { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chat-msg-sender-avatar { position:relative; overflow:hidden; width:18px; height:18px; min-width:18px; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:inline-flex; }
.chat-msg-sender-avatar .avatar-letter { font-size:0.55rem; }
.chat-msg.self .chat-msg-sender-avatar { background:rgba(0,0,0,0.15); border-color:rgba(0,0,0,0.25); }

.ut-avatar { position:relative; overflow:hidden; }
.ut-avatar .avatar-letter { font-size:1.1rem; }

.profile-avatar-block { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.profile-avatar-wrap { position:relative; flex-shrink:0; }
.profile-avatar { position:relative; overflow:hidden; width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#0f8bff,#00ff99); color:#0b0e14; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); flex-shrink:0; }
.profile-avatar .avatar-letter { font-size:2rem; color:#0b0e14; }
.profile-avatar-remove { position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; border:2px solid var(--card); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; padding:0; }
.profile-avatar-remove:hover { transform:scale(1.12); }
.profile-avatar-actions { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.profile-avatar-btn { display:inline-flex; align-items:center; gap:7px; background:var(--bg); color:var(--text2); border:1px solid var(--border); border-radius:9px; padding:9px 14px; font-size:0.82rem; cursor:pointer; transition:all 0.2s; }
.profile-avatar-btn:hover { border-color:var(--accent); color:var(--accent); }
.profile-avatar-hint { font-size:0.7rem; color:var(--dim); line-height:1.4; }
.modal-error.modal-ok { background:rgba(0,255,153,0.08); border-color:rgba(0,255,153,0.4); color:#00ff99; }