/* ---------- Visual polish (subtle aurora + noise) ---------- */
body{
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(60% 40% at 10% 10%, rgba(14,165,233,.25), transparent 55%),
    radial-gradient(50% 35% at 90% 20%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(55% 40% at 60% 90%, rgba(168,85,247,.18), transparent 55%);
  filter:blur(22px);
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:-1;
}

@media (prefers-reduced-motion: reduce){
  body::before{filter:none}
}

/* Card micro-interactions */
.card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}
@media (max-width: 980px){
  .card:hover{transform:none}
}


*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ---------- Themes (Nord-friendly) ---------- */
:root{
    --bg:#020617;
    --fg:#e5e7eb;
    --muted:#9ca3af;
    --card-bg:linear-gradient(145deg,#020617,#020617 40%,#0f172a);
    --card-border:rgba(148,163,184,.3);
    --shadow:rgba(0,0,0,.8);
    --panel:rgba(15,23,42,.85);
    --panel-border:rgba(148,163,184,.4);
    --btn:#1e293b;
    --btn-hover:#111827;
    --accent:#0ea5e9;
    --accent-border:#38bdf8;
    --accent-text:#0b1120;
    --good:#22c55e;
    --bad:#ef4444;

    /* Chat bubble colors (will shift with themes) */
    --bubble-bg:rgba(255,255,255,.06);
    --bubble-border:rgba(255,255,255,.10);
    --bubble-me-bg:rgba(34,197,94,.10);
    --bubble-me-border:rgba(34,197,94,.22);
    --bubble-admin-border:rgba(255,209,102,.35);
}

body.theme-aurora{
    --bg:#020617;
    --card-bg:linear-gradient(145deg,#020617,#041b2b 45%,#0f172a);
    --accent:#22c55e;          /* aurora green */
    --accent-border:#86efac;
    --accent-text:#052e1a;

}
body.theme-tundra{
    --bg:#06131c;
    --card-bg:linear-gradient(145deg,#06131c,#0b2230 40%,#0f172a);
    --accent:#38bdf8;          /* icy blue */
    --accent-border:#7dd3fc;
    --accent-text:#082f49;
}
body.theme-midnight{
    --bg:#00030a;
    --card-bg:linear-gradient(145deg,#00030a,#040b1e 45%,#0f172a);
    --accent:#a78bfa;          /* polar purple */
    --accent-border:#c4b5fd;
    --accent-text:#1f1238;
}

/* Lighter northern themes */
body.theme-ice{
    --bg:#e6f3ff;
    --fg:#0f172a;
    --muted:#334155;
    --card-bg:linear-gradient(145deg,#ffffff,#f3f9ff 45%,#e6f3ff);
    --card-border:rgba(15,23,42,.15);
    --shadow:rgba(2,6,23,.18);
    --panel:rgba(255,255,255,.78);
    --panel-border:rgba(15,23,42,.18);
    --btn:#e2e8f0;
    --btn-hover:#cbd5e1;
    --accent:#0ea5e9;
    --accent-border:#38bdf8;
    --accent-text:#082f49;

    --bubble-bg:rgba(15,23,42,.06);
    --bubble-border:rgba(15,23,42,.12);
    --bubble-me-bg:rgba(14,165,233,.12);
    --bubble-me-border:rgba(14,165,233,.22);
    --bubble-admin-border:rgba(245,158,11,.35);
}
body.theme-daylight{
    --bg:#f5fbf7;
    --fg:#052e1a;
    --muted:#14532d;
    --card-bg:linear-gradient(145deg,#ffffff,#f5fbf7 45%,#e7f7ee);
    --card-border:rgba(5,46,26,.14);
    --shadow:rgba(2,6,23,.14);
    --panel:rgba(255,255,255,.8);
    --panel-border:rgba(5,46,26,.16);
    --btn:#dcfce7;
    --btn-hover:#bbf7d0;
    --accent:#22c55e;
    --accent-border:#86efac;
    --accent-text:#052e1a;

    --bubble-bg:rgba(5,46,26,.06);
    --bubble-border:rgba(5,46,26,.12);
    --bubble-me-bg:rgba(34,197,94,.14);
    --bubble-me-border:rgba(34,197,94,.24);
    --bubble-admin-border:rgba(245,158,11,.38);
}
body.theme-snow{
    --bg:#f8fafc;
    --fg:#0f172a;
    --muted:#334155;
    --card-bg:linear-gradient(145deg,#ffffff,#f8fafc 45%,#eef2f7);
    --card-border:rgba(15,23,42,.12);
    --shadow:rgba(2,6,23,.16);
    --panel:rgba(255,255,255,.82);
    --panel-border:rgba(15,23,42,.14);
    --btn:#e2e8f0;
    --btn-hover:#cbd5e1;
    --accent:#f59e0b;
    --accent-border:#fbbf24;
    --accent-text:#7c2d12;

    --bubble-bg:rgba(15,23,42,.06);
    --bubble-border:rgba(15,23,42,.12);
    --bubble-me-bg:rgba(245,158,11,.12);
    --bubble-me-border:rgba(245,158,11,.22);
    --bubble-admin-border:rgba(99,102,241,.30);
}

body{
    background:var(--bg);
    color:var(--fg);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px;
    padding-bottom:80px;
}

/* Mobile: near full width, small side margins */
@media (max-width: 600px){
  body{padding:10px;padding-bottom:80px}
  .container{max-width:100%;padding:10px}
}
.wrapper{max-width:1000px;width:100%}
.card{
    background:var(--card-bg);
    border-radius:18px;
    padding:16px 16px 20px;
    box-shadow:0 18px 45px var(--shadow);
    border:1px solid var(--card-border);
    position:relative;
    overflow:hidden;
}

/* normal content above decoration layer */
.card > *:not(.xmas-layer){
    position:relative;
    z-index:1;
}

.card-header{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:10px}
.title-block{display:flex;flex-direction:column;gap:2px}
.title{font-size:1.3rem;font-weight:600;letter-spacing:.02em}
.subtitle{font-size:.8rem;color:var(--muted)}
.right-header{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.status-pill{padding:5px 10px;border-radius:999px;background:rgba(22,163,74,.15);color:#bbf7d0;font-size:.7rem;border:1px solid rgba(34,197,94,.6);display:flex;align-items:center;gap:6px}
.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 8px #22c55e}
.small-meta{font-size:.7rem;color:#64748b}
.image-container{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-bottom:10px}
.image-container img{width:100%;display:block;object-fit:cover;max-height:520px}
.overlay-gradient{position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(to top,rgba(15,23,42,.9),transparent);pointer-events:none}
.info-bar{position:absolute;bottom:8px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:.75rem}
.badge{background:rgba(15,23,42,.85);padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.5);color:#e5e7eb;display:flex;align-items:center;gap:6px}
.controls{display:flex;gap:6px}
.btn{border:none;border-radius:999px;padding:5px 10px;font-size:.75rem;cursor:pointer;background:var(--btn);color:var(--fg);border:1px solid rgba(148,163,184,.6);display:inline-flex;align-items:center;gap:4px;transition:.15s}
.btn:hover{background:var(--btn-hover);border-color:var(--fg)}
.btn-primary{background:var(--accent);border-color:var(--accent-border);color:var(--accent-text)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{background:#b91c1c;border-color:var(--bad)}
.btn-ghost{background:rgba(15,23,42,.7)}

/* CALENDAR SECTION (Sunday -> Saturday) */
.calendar-section{
    margin-top:14px;
    background:var(--panel);
    border-radius:12px;
    padding:10px;
    border:1px solid var(--panel-border);
}
.calendar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.85rem;
    color:#e5e7eb;
    margin-bottom:4px;
}
.calendar-month{font-weight:600;display:flex;align-items:center;gap:6px;}
.calendar-legend{
    font-size:.7rem;
    color:#9ca3af;
    display:flex;
    gap:10px;
    align-items:center;
}
.cal-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    display:inline-block;
    margin-right:3px;
}
.cal-dot.has{background:#22c55e;}
.cal-dot.future{background:#64748b;}
.cal-dot.empty{background:#334155;}

.calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    font-size:.7rem;
    color:#9ca3af;
    margin-top:4px;
}
.calendar-weekday{text-align:center;}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    font-size:.75rem;
    margin-top:4px;
}
.calendar-cell{
    min-height:32px;
    border-radius:8px;
    border:1px solid rgba(30,64,175,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:rgba(15,23,42,.9);
    color:#e5e7eb;
    transition:.15s;
}
.calendar-cell.empty{
    border:none;
    background:transparent;
    cursor:default;
}
.calendar-cell.no-data{
    opacity:0.35;
    cursor:default;
}
.calendar-cell.has-images:hover{
    border-color:#38bdf8;
    box-shadow:0 0 12px rgba(56,189,248,0.35);
    transform:translateY(-1px);
}
.calendar-cell.today{
    border-color:#fbbf24;
    box-shadow:0 0 10px rgba(251,191,36,0.35);
}
.calendar-cell.future{
    opacity:0.25;
    cursor:default;
}
.day-number{font-weight:600;}

/* CHAT */
.chat-block{margin-top:18px;background:rgba(15,23,42,.85);border-radius:12px;padding:10px;border:1px solid rgba(148,163,184,.4)}
.chat-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:6px}
.chat-small{font-size:.7rem;color:#64748b}
.chat-messages{max-height:210px;overflow-y:auto;border-radius:8px;padding:6px;background:#020617;border:1px solid rgba(15,23,42,1);font-size:.78rem;display:flex;flex-direction:column;gap:6px}
.chat-msg{display:flex;gap:6px}
.chat-avatar{font-size:1.1rem}
.chat-body{flex:1}
.chat-meta{font-size:.7rem;color:#9ca3af;display:flex;justify-content:space-between}
.chat-text{font-size:.78rem;color:#e5e7eb}
.chat-name-row,.chat-input-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.chat-name-row span{font-size:.75rem;color:#9ca3af}
.chat-input-row input,.chat-name-row input{flex:1;border-radius:999px;border:1px solid rgba(148,163,184,.5);padding:6px 9px;background:#020617;color:#e5e7eb;font-size:.78rem}
.chat-input-row input:focus,.chat-name-row input:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px rgba(56,189,248,.5)}

/* Mini music player */
.music-player{
    margin-top:10px;
    background:rgba(15,23,42,.9);
    border-radius:999px;
    padding:6px 10px;
    border:1px solid rgba(148,163,184,.35);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:.75rem;
}
.music-title{color:#e5e7eb;}
.music-controls{display:flex;align-items:center;gap:4px;}
.music-btn{
    border:none;
    border-radius:999px;
    padding:4px 8px;
    font-size:.7rem;
    background:#020617;
    color:#e5e7eb;
    border:1px solid rgba(148,163,184,.5);
    cursor:pointer;
}
.music-btn:hover{background:#0f172a;}
.music-status{font-size:.7rem;color:#9ca3af;margin-left:4px;}

/* Timelapse modal */
.snap-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:9999;justify-content:center;align-items:center;flex-direction:column}
.snap-modal img{max-width:92%;max-height:80%;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.8);border:1px solid rgba(148,163,184,.7)}
.snap-caption{margin-top:8px;font-size:.8rem;color:#e5e7eb}
.snap-close{position:absolute;top:14px;right:18px;font-size:32px;color:#e5e7eb;cursor:pointer}
.snap-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;background:none;border:none;color:#e5e7eb;cursor:pointer;padding:0 10px}
#snapPrev{left:20px}
#snapNext{right:20px}
.snap-play{margin-top:12px;padding:7px 16px;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:#020617;color:#e5e7eb;font-size:.8rem;cursor:pointer}
.snap-play:hover{background:#0f172a}

/* Bottom action bar */
.bottom-bar{
    position:fixed;
    bottom:0; left:0; right:0;
    background:rgba(15,23,42,0.92);
    backdrop-filter:blur(8px);
    padding:10px 14px;
    display:flex;
    justify-content:center;
    gap:12px;
    z-index:9999;
    border-top:1px solid rgba(148,163,184,0.25);
    transition:transform 0.25s ease;
}
.bottom-bar.hide{
    transform:translateY(100%);
}
.bottom-btn{
    font-size:.9rem;
    padding:10px 18px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,0.4);
    background:#1e293b;
    color:#e5e7eb;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.45);
}
.bottom-btn:active{
    transform:scale(0.96);
}

/* --- INUIT CHRISTMAS DECOR --- */
.xmas-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

/* Aurora */
.aurora-band{
    position:absolute;
    top:-40px;
    left:-20%;
    width:140%;
    height:120px;
    background:
        radial-gradient(circle at 0% 0%,rgba(56,189,248,0.18),transparent 60%),
        radial-gradient(circle at 30% 0%,rgba(52,211,153,0.18),transparent 60%),
        radial-gradient(circle at 70% 0%,rgba(129,140,248,0.2),transparent 60%),
        radial-gradient(circle at 100% 0%,rgba(248,250,252,0.12),transparent 55%);
    opacity:0.7;
    filter:blur(10px);
    animation:auroraWave 18s ease-in-out infinite alternate;
}
@keyframes auroraWave{
    0%{transform:translateX(-10%) translateY(0);}
    50%{transform:translateX(6%) translateY(6px);}
    100%{transform:translateX(12%) translateY(-4px);}
}

/* Snowflakes */
.snowflakes{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.snowflake{
    position:absolute;
    top:-10%;
    font-size:0.8rem;
    color:#e5e7eb;
    opacity:0.45;
    text-shadow:0 0 6px rgba(15,23,42,0.9);
    animation:snowFall 16s linear infinite;
}
@keyframes snowFall{
    0%{transform:translateY(-10vh);}
    100%{transform:translateY(110vh);}
}
.snowflake:nth-child(1){left:8%; animation-duration:14s; animation-delay:-2s;}
.snowflake:nth-child(2){left:22%; animation-duration:18s; animation-delay:-4s;}
.snowflake:nth-child(3){left:38%; animation-duration:15s; animation-delay:-6s;}
.snowflake:nth-child(4){left:55%; animation-duration:17s; animation-delay:-3s;}
.snowflake:nth-child(5){left:70%; animation-duration:19s; animation-delay:-5s;}
.snowflake:nth-child(6){left:84%; animation-duration:16s; animation-delay:-7s;}

/* Qajaq + seal */
.xmas-extra{
    position:absolute;
    left:5%;
    right:5%;
    bottom:4px;
    height:70px;
    opacity:0.9;
    transform:translateY(0);
}
.xmas-extra svg{
    width:100%;
    height:100%;
}

/* COPYRIGHT / LOVE FOR PETA */
.footer-love{
    margin-top:10px;
    font-size:.75rem;
    color:#9ca3af;
    text-align:center;
    opacity:0.85;
}
.footer-love .heart{
    display:inline-block;
    margin:0 4px;
    animation:heartbeat 1.2s infinite;
}
@keyframes heartbeat{
    0%{transform:scale(1);}
    20%{transform:scale(1.2);}
    40%{transform:scale(1);}
    60%{transform:scale(1.2);}
    80%{transform:scale(1);}
    100%{transform:scale(1);}
}

/* WEATHER BLOCK */
.weather-block{
    margin-top:16px;
    background:rgba(15,23,42,0.85);
    border-radius:12px;
    padding:14px;
    border:1px solid rgba(148,163,184,0.35);
    box-shadow:0 12px 25px rgba(0,0,0,0.45);
    backdrop-filter:blur(6px);
}

.weather-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.weather-title{
    font-size:1rem;
    font-weight:600;
    color:#e0f2fe;
}

.weather-updated{
    font-size:.7rem;
    color:#94a3b8;
}

.weather-main{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.weather-icon{
    width:55px;
    height:55px;
}

.weather-temp{
    font-size:1.6rem;
    font-weight:600;
    color:#f0f9ff;
}

.weather-desc{
    font-size:.8rem;
    color:#cbd5e1;
    margin-top:2px;
}

.weather-details div{
    font-size:.78rem;
    color:#b0c7dc;
    padding:2px 0;
}


@media(max-width:640px){
  .card{padding:12px}
  .card-header{flex-direction:column;align-items:flex-start}
  .info-bar{flex-direction:column;gap:4px;align-items:flex-start}
}
.special-icon {
    font-size: 0.9rem;
    position: absolute;
    top: 2px;
    right: 4px;
    opacity: 0.85;
}
.calendar-cell {
    position: relative;
}
/* Tooltip pour les jours spéciaux */
.special-tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: rgba(15,23,42,0.95);
    color: #e5e7eb;
    font-size: 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid rgba(148,163,184,0.4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.calendar-cell.special-holiday:hover .special-tooltip {
    opacity: 1;
}

.special-icon {
    font-size: 0.9rem;
    position: absolute;
    top: 2px;
    right: 4px;
    opacity: 0.9;
}
.offline-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.85);
    color: white;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    z-index: 50;
    display: none;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}


.status-pill.offline {
    background: rgba(220,38,38,0.25);
    border-color: #ef4444;
    color: #fecaca;
}

.status-pill.offline .status-dot {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

.stats-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
}

.stats-box h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    opacity: 0.8;
}

.share-btn {
    background: #3b82f6;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    background: #2563eb;
}
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('bg.jpg') center/cover no-repeat fixed;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 25px;
    border-radius: 15px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    color: white;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
    animation: fadeIn 0.7s ease;
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.auth-card input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 15px 0;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    color: white;
    outline: none;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-top: 5px;
}

.auth-btn:hover {
    background:#2563eb;
}

.auth-link {
    margin-top: 15px;
    text-align: center;
    display: block;
    color: #d1d5db;
    text-decoration: none;
}

.auth-link:hover {
    color: white;
}

@keyframes fadeIn {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}
.chat-user-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    margin-bottom: 10px;
}

.chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,0.3);
}

.chat-user-info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #d1d5db;
}

.chat-user-info b {
    color: white;
}

.online-dot {
    color: #4ade80; /* Green */
    margin-right: 4px;
    font-size: 14px;
}

.offline-dot {
    color: #f87171;
    margin-right: 4px;
    font-size: 14px;
}

.chat-logout-btn {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.12);
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.chat-logout-btn:hover {
    background: rgba(255,255,255,0.20);
}



/* --- Refactor additions --- */

:root{--ticker-h:34px}

.ticker{position:fixed;top:0;left:0;right:0;width:100%;height:var(--ticker-h);z-index:1000;overflow:hidden;background:rgba(0,0,0,.7);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.ticker-inner{white-space:nowrap;display:inline-block;line-height:var(--ticker-h);padding-left:100%;animation:ticker-scroll linear infinite}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;position:sticky;top:var(--ticker-h);z-index:999;background:rgba(10,12,18,.75);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand-link{color:#fff;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:.2px}
.brand-link span{opacity:.75}
.sub{font-size:12px;opacity:.7;margin-top:2px}
.top-actions{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px}
.nav-toggle .bars{font-size:18px;line-height:1}

/* Mobile-friendly top menu */
@media (max-width: 760px){
  .topbar{flex-wrap:wrap;gap:10px}
  .nav-toggle{display:flex}
  .top-actions{width:100%;display:none;flex-direction:column;align-items:stretch}
  .topbar.open .top-actions{display:flex}
  .top-actions .pill{width:100%;text-align:center}
  .user-mini{flex-wrap:wrap}
  .lang{display:flex;gap:10px;align-items:center;justify-content:space-between}
  .lang select{width:100%}
}
.pill{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;padding:8px 12px;border-radius:999px;cursor:pointer}
.pill:hover{background:rgba(255,255,255,.1)}
.pill.danger{border-color:rgba(255,80,80,.35);background:rgba(255,80,80,.12)}

/* Fix: some browsers render <option> with inherited white text on white background */
select option{color:#111;background:#fff}
.container{max-width:1200px;width:100%;margin:0 auto;padding:16px}

/* Mobile: full width with only a small side margin */
@media (max-width: 600px){
  body{padding:10px}
  .container{max-width:100%;padding:10px}
}

/* Main layout: webcam + chat on the left, everything else on the right */
.grid{display:grid;grid-template-columns:1.6fr .9fr;gap:12px;align-items:start;
  grid-template-areas:
    "news side"
    "cam side"
    "chat side"
    "bottom bottom";
}

#newsCard{grid-area:news}
section.card.cam{grid-area:cam}
section.card.chat{grid-area:chat}
.side-stack{grid-area:side;display:flex;flex-direction:column;gap:12px}
#adBottom{grid-area:bottom}

@media (max-width: 980px){
  .grid{
    grid-template-columns:1fr;
    gap:12px;
    grid-template-areas:
      "news"
      "cam"
      "chat"
      "side"
      "bottom";
  }
}
.card{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28);border-radius:18px;overflow:hidden}
.card-head{display:flex;align-items:center;gap:12px;padding:14px 14px 10px}
.card h2{font-size:18px;margin:0}

/* Webcam: image should cover the whole block (no inner border/padding),
   and keep the same rounded corners as the card. */
section.card.cam{padding:0;border:none;background:transparent;overflow:hidden}
section.card.cam .card-head{display:none}
.spacer{flex:1}
.muted{opacity:.7}
.divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0}
.cam-wrap{position:relative;background:#000;border-radius:0;overflow:hidden;margin:0;aspect-ratio:16/9}
.cam-wrap img{width:100%;height:100%;display:block;object-fit:cover}
.cam .card-head{padding-bottom:12px}
.cam .cam-overlay{top:12px;left:12px}
.cam-overlay{position:absolute;top:12px;left:12px}
.cam-time{position:absolute;bottom:12px;right:12px;font-size:12px;font-weight:800;letter-spacing:.02em;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);display:inline-block}
.cam-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px;align-items:center}
.cam-icon{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.cam-icon:hover{background:rgba(255,255,255,.12)}
.cam-head-min{padding-bottom:6px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);font-size:12px}
.badge.ok{border-color:rgba(110,255,160,.25);color:rgba(160,255,200,1)}
.badge.bad{border-color:rgba(255,120,120,.25);color:rgba(255,160,160,1)}
.badge.admin{border-color:rgba(255,210,110,.35);color:rgba(255,230,160,1);background:rgba(255,200,90,.12)}

.avatar-chip{width:24px;height:24px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);flex:0 0 24px}
.avatar-big{width:128px;height:128px;border-radius:22px;object-fit:cover;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05)}

.who-link{color:#fff;text-decoration:none}
.who-link:hover{text-decoration:underline}

.chat-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}

.profile{display:flex;gap:16px;padding:14px}
.profile-name{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.profile-bio{margin-top:10px;line-height:1.45}
.weather{padding:0 14px 14px}
.w-big{font-size:44px;font-weight:800}
.w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.radio-player{padding:0 14px 14px;display:grid;gap:8px}
.radio-subtitle{opacity:.8;font-size:12px}
.radio-row{display:flex;align-items:center;gap:10px}
.radio-state{font-size:12px;letter-spacing:.08em;opacity:.85}
.radio-btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.radio-btn:hover{background:rgba(255,255,255,.10)}
.radio-now{display:flex;gap:8px;align-items:center;font-size:12px}
.radio-now #radioNow{font-weight:700}

/* Small VU bars (radio) */
.radio-vu{width:100%;height:90px;display:block;border-radius:14px;background:rgba(255,255,255,0.04)}
/* Legacy (old span bars) support */
.radio-vu{position:relative;overflow:hidden}
.radio-vu.vu-fallback .vu-bar{animation:vuPulse 1.2s ease-in-out infinite}
.radio-vu.vu-fallback .vu-bar:nth-child(3n){animation-duration:1.0s}
.radio-vu.vu-fallback .vu-bar:nth-child(4n){animation-duration:1.4s}
@keyframes vuPulse{0%,100%{height:20%}50%{height:90%}}
.online-list{padding:0 14px 14px;display:flex;flex-wrap:wrap;gap:8px}
.stats-block{padding:0 14px 14px;display:grid;gap:8px}
.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.stat-row span:last-child{font-weight:800}
.online-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.92);text-decoration:none;line-height:1.1}
.online-chip .name{display:inline-flex;align-items:center;flex:1;min-width:0}
.online-chip:hover{background:rgba(255,255,255,.1)}
.online-chip.admin{border-color:rgba(255,200,80,.35)}

.admin-star{display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;height:20px;min-width:20px;opacity:.95;color:#ffd166;text-shadow:0 0 10px rgba(255,209,102,.35)}
.timelapse-panel{padding:0 14px 14px}
.news-block{padding:14px;line-height:1.5}

/* News top card styling (distinct color) */
.news-top{background:rgba(40,80,160,.22);border-color:rgba(120,170,255,.22)}
.news-top .card-head{padding-bottom:8px}
.news-top.collapsed .news-block{display:none}
.news-top.collapsed{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.news-top.collapsed .card-head{padding-bottom:10px}
.news-top.collapsed h2{opacity:.75}
.news-top.collapsed #newsToggle{opacity:.85}
.news-top.blink{animation:naujaqBlink 1s steps(2,end) infinite}
@keyframes naujaqBlink{50%{filter:brightness(1.35)}}
.hidden{display:none!important}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tab{flex:1;border-radius:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.tab.active{background:rgba(255,255,255,.10)}
.timelapse-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width: 600px){.timelapse-list{grid-template-columns:repeat(2,1fr)}}
.tl-item{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10);cursor:pointer;background:rgba(0,0,0,.22)}
.tl-item img{width:100%;height:110px;object-fit:cover;display:block}
.tl-item .tl-meta{padding:8px 10px;font-size:12px;opacity:.85}
.chat-messages{height:320px;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.chat-bubble{padding:10px 12px;border-radius:14px;background:var(--bubble-bg);border:1px solid var(--bubble-border)}
.chat-bubble.me{background:var(--bubble-me-bg);border-color:var(--bubble-me-border)}
.chat-bubble.admin{border-color:var(--bubble-admin-border)}
.chat-head{display:flex;align-items:center;gap:10px}
.chat-head .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-head .mod-btn{margin-left:auto;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);border-radius:10px;padding:2px 8px;cursor:pointer}
.chat-head .mod-btn:hover{background:rgba(255,255,255,.10)}
.chat-bubble .who{font-weight:700;font-size:12px;opacity:.9}
.chat-bubble .msg{margin-top:4px;line-height:1.25}
.chat-input{display:flex;gap:10px;padding:0 14px 14px}
.chat-input input{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff;padding:10px 12px}
.chat-input input:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px rgba(56,189,248,.5)}

/* Emoji picker (desktop only) */
.emoji-btn{display:none;min-width:44px;justify-content:center;align-items:center}
.emoji-picker{display:none;margin:0 14px 14px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06);flex-wrap:wrap;gap:6px}
.emoji-picker button{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);border-radius:10px;padding:6px 8px;cursor:pointer}
.emoji-picker button:hover{background:rgba(255,255,255,.10)}
@media (min-width: 720px){
  .emoji-btn{display:inline-flex}
  .emoji-picker{display:flex}
  .emoji-picker.hidden{display:none}
}
.chat-meta{padding:0 14px 14px;font-size:12px}
.footer{opacity:.7;font-size:12px;padding:22px 16px;text-align:center}
.tiny{opacity:.6;margin-top:4px}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:50;padding:16px}
.modal-card{width:min(520px, 100%);border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,18,.92);overflow:hidden}
.modal-card.wide{width:min(980px, 100%)}
.modal-head{display:flex;align-items:center;gap:12px;padding:14px}
.modal-body{padding:14px}
.modal-body input,.modal-body textarea{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff;padding:10px 12px;margin:8px 0}
.error{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);padding:10px 12px;border-radius:12px;margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.link{background:none;border:none;color:#b9d6ff;text-decoration:underline;cursor:pointer;margin-top:6px}
.lightbox-img{width:100%;max-height:72vh;object-fit:contain;border-radius:14px}
.account-grid{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:14px}
@media (max-width: 800px){.account-grid{grid-template-columns:1fr}}
.avatar-big{width:220px;height:220px;border-radius:24px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.avatar-mini{width:26px;height:26px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.user-mini{display:flex;gap:10px;align-items:center}
.stack{display:flex;flex-direction:column;gap:8px}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:14px}
@media (max-width: 900px){.admin-grid{grid-template-columns:1fr}}

/* Admin tabs */
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
.admin-tab{border-radius:999px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:13px}
.admin-tab.active{background:rgba(255,255,255,.12)}
.admin-panel{display:none}
.admin-panel.active{display:block}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;text-align:left;opacity:.75;padding:0 10px}
.table td{padding:10px;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.20)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.10);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.10);border-top-right-radius:14px;border-bottom-right-radius:14px}
.table .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Chat moderation context menu */
.ctxmenu{position:fixed;z-index:2000;min-width:220px;border:1px solid rgba(255,255,255,.14);background:rgba(10,12,18,.92);backdrop-filter:blur(10px);border-radius:14px;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.6)}
.ctxmenu.hidden{display:none}
.ctxmenu button{display:flex;width:100%;gap:10px;align-items:center;justify-content:flex-start;padding:10px 12px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:13px}
.ctxmenu button:hover{background:rgba(255,255,255,.08)}
.ctxmenu .sep{height:1px;background:rgba(255,255,255,.10)}
.ctxmenu .danger{color:rgba(255,160,160,1)}
.tv-wrap{position:relative}
.tv-img{width:100%;height:72vh;object-fit:cover;border-radius:14px}
.tv-hud{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;pointer-events:none}
.tv-clock{font-size:26px;font-weight:800;margin-top:8px}


/* Radio visualizer */
.viz{display:flex;align-items:flex-end;gap:3px;height:20px;width:86px;padding:6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22)}
.viz span{display:block;width:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.75);transition:height .08s linear}

/* Profile responsive */
.profile-left{flex:0 0 auto}
.profile-right{flex:1 1 auto;min-width:0}
.profile-stats .stat{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px}
@media (max-width: 720px){
  .profile{flex-direction:column;align-items:stretch}
  .profile-left{display:flex;justify-content:center}
  .avatar-big{width:160px;height:160px}
  .profile-stats{grid-template-columns:1fr!important}
  .profile-actions{justify-content:flex-start}
  .admin-tabs{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .admin-tab{flex:0 0 auto}
  .table{font-size:13px}
}

/* Profile responsive */
.profile-left{flex:0 0 auto}
.profile-right{flex:1 1 auto;min-width:0}
@media (max-width: 720px){
  .profile{flex-direction:column;align-items:stretch}
  .profile-left{display:flex;justify-content:center}
  .avatar-big{width:160px;height:160px;border-radius:22px}
  .profile-stats{grid-template-columns:1fr!important}
  .profile-actions{justify-content:flex-start}
}

/* Admin tabs responsive */
@media (max-width: 720px){
  .admin-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding-bottom:6px}
  .admin-tab{flex:0 0 auto; white-space:nowrap}
  .table{font-size:12px}
}

/* ---------- Ads ---------- */
.ad-block,.card.ad{min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;position:relative}
.ad-block:empty,.card.ad:empty{min-height:0;display:none}
.ad-block .ad-inner,.card.ad .ad-inner{width:100%}
.ad-block img,.card.ad img{width:100%;height:auto;display:block;border-radius:12px}
.ad-block iframe,.card.ad iframe{width:100%}

/* Admin previews */
.ad-preview{margin-top:8px;border:1px dashed var(--card-border);border-radius:12px;overflow:hidden;min-height:64px;display:flex;align-items:center;justify-content:center}
.ad-preview img{max-width:100%;height:auto;display:block}

body {
  background: linear-gradient(#0a0f1a, #06080f);
}
.card {
  background: rgba(20,28,45,.9);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ---------- Full chat page (/chat/) ---------- */
body.chat-page .container{max-width:none;padding:0}
body.chat-page main.container{min-height:calc(100vh - 110px)}
body.chat-page .footer{display:none}

.chat-shell{display:flex;gap:12px;height:calc(100vh - 110px);padding:12px}
.chat-panel{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--card-border);border-radius:16px;background:var(--card-bg,rgba(20,28,45,.9));overflow:hidden}
.chat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--card-border)}
.chat-h{margin:0;font-size:18px;line-height:1.2}
.chat-panel-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.chat-messages-full{flex:1;min-height:0;overflow:auto;padding:12px}
.chat-input-fixed{position:sticky;bottom:0;background:var(--card-bg,rgba(20,28,45,.98));padding:10px;border-top:1px solid var(--card-border)}

.users-panel{width:320px;max-width:35vw;border:1px solid var(--card-border);border-radius:16px;background:var(--card-bg,rgba(20,28,45,.9));overflow:hidden;display:flex;flex-direction:column}
.users-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--card-border)}
.online-list-full{flex:1;overflow:auto;padding:10px}

.users-overlay{display:none}

@media (max-width: 860px){
  .chat-shell{padding:0;gap:0;height:calc(100vh - 110px)}
  .chat-panel{border-radius:0;border-left:0;border-right:0;height:100%}
  .users-panel{position:fixed;top:0;right:0;bottom:0;width:min(82vw,360px);max-width:none;border-radius:0;transform:translateX(100%);transition:transform .2s ease;z-index:60}
  .users-panel.open{transform:translateX(0)}
  .users-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:59}
  .users-overlay.open{display:block;opacity:1;pointer-events:auto}
}


/* Brand logo in top menu */
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:26px;height:26px;display:block}
.brand-text{font-weight:800;letter-spacing:.2px}

/* Mobile: hide language label but keep selector */
@media (max-width: 720px){
  .lang label{display:none}
}

/* Admin users table: mobile-friendly stacked rows */
@media (max-width: 720px){
  #usersTable{border-spacing:0 10px}
  #usersTable thead{display:none}
  #usersTable tbody, #usersTable tr, #usersTable td{display:block;width:100%}
  #usersTable tr{margin-bottom:10px}
  #usersTable td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  #usersTable td::before{
    content: attr(data-label);
    opacity:.65;
    font-size:12px;
    padding-right:10px;
    flex:0 0 auto;
  }
  #usersTable td .actions{justify-content:flex-end}
  #usersTable td a.who-link{display:flex;align-items:center;gap:10px}
}

/* Email envelope */
.mail-icon{
  display:inline-flex;
  width:34px;height:34px;
  align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  text-decoration:none;
}
.mail-icon:hover{background:rgba(255,255,255,.10)}

/* Messages badge */
.badge-count{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);font-size:12px;text-align:center;margin-left:6px;vertical-align:middle}
.msg-pill{display:inline-flex;align-items:center;gap:6px}


/* ---------- Messenger (internal messages) ---------- */
.ms-wrap{display:flex; gap:12px; height:68vh; min-height:480px;}
.ms-sidebar{width:320px; max-width:42%; display:flex; flex-direction:column; border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.03);}
.ms-sidebar-head{display:flex; align-items:center; gap:10px; padding:10px 10px; border-bottom:1px solid var(--border, rgba(255,255,255,.12));}
.ms-title{font-weight:700;}
.pill.tiny{padding:6px 10px; font-size:12px; border-radius:999px;}
.ms-threadlist{overflow:auto; padding:6px;}
.ms-thread{display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; cursor:pointer;}
.ms-thread:hover{background:rgba(255,255,255,.05);}
.ms-thread.active{background:rgba(255,255,255,.08);}
.ms-avatar{width:34px; height:34px; border-radius:999px; object-fit:cover; background:rgba(255,255,255,.08);}
.ms-thread-meta{flex:1; min-width:0;}
.ms-thread-name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ms-thread-last{font-size:13px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ms-badge{min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:rgba(255,255,255,.18);}

.ms-chat{flex:1; display:flex; flex-direction:column; border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02);}
.ms-chat-head{display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--border, rgba(255,255,255,.12));}
.ms-back{display:none;}
.ms-peer-name{font-weight:800;}
.ms-messages{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.ms-bubble{max-width:78%; padding:10px 12px; border-radius:16px; line-height:1.35; word-break:break-word; background:rgba(255,255,255,.08);}
.ms-row{display:flex;}
.ms-row.me{justify-content:flex-end;}
.ms-row.me .ms-bubble{background:rgba(255,255,255,.15);}
.ms-time{font-size:11px; opacity:.7; margin-top:4px;}
.ms-compose{display:flex; gap:10px; padding:10px; border-top:1px solid var(--border, rgba(255,255,255,.12)); background:rgba(0,0,0,.12);}
.ms-compose .input{flex:1; min-width:0;}
@media (max-width: 860px){
  .ms-wrap{height:72vh;}
  .ms-sidebar{width:100%; max-width:100%;}
  .ms-chat{display:none;}
  .ms-wrap.ms-open .ms-sidebar{display:none;}
  .ms-wrap.ms-open .ms-chat{display:flex;}
  .ms-back{display:inline-flex;}
}


/* Messenger: read receipt ("seen") */
.ms-seen{
  font-size: 12px;
  opacity: 0.75;
  padding: 0 12px 8px 12px;
  text-align: right;
}


/* Messenger addons (typing/seen/emoji) */
.ms-seen{font-size:12px;opacity:.7;padding:6px 12px;text-align:right;}
.ms-peer-typing{opacity:.7;}
.ms-emoji-panel{display:none;position:absolute;bottom:44px;left:8px;right:8px;max-width:420px;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:12px;padding:6px;gap:4px;flex-wrap:wrap;z-index:50;box-shadow:0 8px 20px rgba(0,0,0,.12);} 
.ms-compose{position:relative;}
.ms-emoji-btn{border:0;background:transparent;font-size:20px;padding:6px;cursor:pointer;}
#msEmoji{margin-right:8px;}
.ms-avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;flex:0 0 32px;}


/* Admin changelog */
.changelog h3,.changelog h4{margin:10px 0 6px;}
.changelog ul{margin:6px 0 10px 18px;}
.changelog p{margin:4px 0;}
.changelog .spacer-8{height:8px;}



/* ---------- Admin Changelogs (mobile-friendly) ---------- */
.cl-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-pager-inner{display:flex;align-items:center;gap:10px}
.cl-pager .btn.disabled{opacity:.5;cursor:not-allowed}
.cl-sort{color:inherit;text-decoration:none;cursor:pointer}
.cl-sort:hover{text-decoration:underline}
.cl-actions{white-space:nowrap}
.cl-changes{margin:0 0 0 18px}
.cl-info-box{padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(0,0,0,.20)}
.cl-tablewrap{display:block}
.cl-cards{display:none}
.cl-cards-head{display:flex;align-items:center;gap:8px;margin:6px 0 10px 0}
.cl-card{border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(0,0,0,.20);padding:12px}
.cl-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cl-card-title{font-weight:800;margin-top:6px;margin-bottom:6px}
.cl-card-actions{margin-top:8px;display:flex;justify-content:flex-end}

/* On small screens, use cards instead of table */
@media (max-width: 820px){
  .cl-tablewrap{display:none}
  .cl-cards{display:block}
  .cl-actions{white-space:normal}
}


/* Side column: separate cards */
.ad-side .ad-block{margin-top:0}
.weather-card .card-head, .online-card .card-head, .stats-card .card-head{margin-bottom:6px}


/* Radio card: slightly more distinct */
.radio-card{
  border-color: rgba(56,189,248,.35);
  background: linear-gradient(145deg, rgba(2,6,23,.92), rgba(15,23,42,.92) 45%, rgba(2,6,23,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.radio-card .card-head h2{
  letter-spacing:.2px;
}
.radio-volume{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.radio-volume input[type="range"]{
  width:100%;
  accent-color: var(--accent);
}
.radio-volume #radioVolumeLabel{
  min-width:44px;
  text-align:right;
}
.radio-vu .vu-bar{
  border-radius:8px;
  box-shadow: 0 0 10px rgba(56,189,248,.18);
}


/* ---------- Admin refresh (sidebar + dashboard) ---------- */
.admin-shell{
  padding:0;
  overflow:hidden;
}
.admin-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:560px;
}
.admin-side{
  background: rgba(0,0,0,.18);
  border-right:1px solid rgba(255,255,255,.10);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:18px;
}
.admin-brand .title{
  font-weight:700;
  letter-spacing:.2px;
}
.admin-brand .meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.admin-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-nav .admin-tab{
  width:100%;
  text-align:left;
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.04);
}
.admin-nav .admin-tab.active{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.28);
}
.admin-main{
  padding:16px;
}
.admin-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.admin-topbar .spacer{flex:1}
.admin-hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(255,255,255,.04);
  margin:0 14px 14px;
}
.admin-hero h3{margin-bottom:8px}
.admin-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.kpi{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px;
}
.kpi .label{font-size:12px;opacity:.75}
.kpi .value{font-size:20px;font-weight:700;margin-top:4px}
.admin-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.admin-quick .pill{white-space:nowrap}
@media (max-width: 980px){
  .admin-layout{grid-template-columns:1fr}
  .admin-side{border-right:none;border-bottom:1px solid rgba(255,255,255,.10)}
  .admin-hero{grid-template-columns:1fr}
  .admin-kpis{grid-template-columns:repeat(2,1fr)}
}

/* --- Radio card "shine" when playing --- */
.radio-card{position:relative;overflow:hidden}

.radio-card.is-playing{
  border-color: rgba(56,189,248,.65);
  box-shadow: 0 0 0 1px rgba(56,189,248,.28), 0 22px 70px rgba(56,189,248,.14), 0 18px 50px rgba(0,0,0,.55);
}
.radio-card.is-playing::after{
  content:"";
  position:absolute;
  inset:-25% -25%;
  background: radial-gradient(circle at 30% 20%, rgba(56,189,248,.22), transparent 55%),
              radial-gradient(circle at 70% 80%, rgba(168,85,247,.14), transparent 60%);
  filter: blur(18px);
  opacity: .85;
  animation: radioGlow 1.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes radioGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.radio-card.is-playing::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.18) 30%,rgba(255,255,255,0.34) 40%,rgba(255,255,255,0.18) 50%,transparent 70%);
  transform:translateX(-35%) rotate(8deg);
  animation:radioShine 2.0s linear infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes radioShine{
  0%{transform:translateX(-45%) rotate(8deg);opacity:0.0}
  10%{opacity:1.0}
  60%{opacity:1.0}
  100%{transform:translateX(45%) rotate(8deg);opacity:0.0}
}
@media (prefers-reduced-motion: reduce){
  .radio-card.is-playing::before{animation:none;opacity:0.25}
}


/* --- Admin Tools: Members browser (profile-style cards) --- */
.admin-members-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){ .admin-members-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .admin-members-grid{ grid-template-columns:1fr; } }

.member-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.member-card .av{
  width:54px;
  height:54px;
  border-radius:14px;
  object-fit:cover;
  background:rgba(0,0,0,.2);
  flex:0 0 auto;
}
.member-card .name{
  font-weight:800;
  font-size:15px;
  line-height:1.1;
}
.member-card .meta{
  margin-top:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.member-card .bio{
  margin-top:8px;
  font-size:13px;
  opacity:.9;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.member-card a{ text-decoration:none; color:rgba(255,255,255,.92); }
.member-card a:hover{ color:rgba(255,255,255,1); }
.badge.online{ background:rgba(70,255,160,.16); border:1px solid rgba(70,255,160,.26); }
.badge.offline{ opacity:.75; }
.member-card .actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* Admin tables */
.table-wrap{width:100%;overflow:auto}
.nq-table{width:100%;border-collapse:collapse}
.nq-table th,.nq-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.nq-table th{font-size:12px;opacity:.85;text-align:left;white-space:nowrap}
.nq-table td{min-width:0}
.nq-table .naujaq-field{width:100%}
@media(max-width:720px){.nq-table .naujaq-field{min-width:160px}}


/* ---------- Admin mobile menu (hamburger drawer) ---------- */
.admin-hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.admin-overlay{display:none}

/* Prevent horizontal overflow inside admin on small screens */
.admin-main, .admin-panel{min-width:0}
.admin-main .row{flex-wrap:wrap}
.admin-main .input, .admin-main select, .admin-main textarea{max-width:100%}

/* Drawer behavior on mobile */
@media (max-width: 980px){
  /* keep main layout; sidebar becomes drawer */
  .admin-layout{grid-template-columns:1fr}
  .admin-hamburger{display:inline-flex}

  .admin-side{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:min(320px, 86vw);
    max-width:86vw;
    transform:translateX(-110%);
    transition:transform .18s ease;
    z-index:2600;
    border-right:1px solid rgba(255,255,255,.10);
    border-bottom:none; /* override old mobile layout */
    background: rgba(10,12,18,.94);
    backdrop-filter: blur(10px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-shell.menu-open .admin-side{transform:translateX(0)}

  .admin-overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    z-index:2550;
  }
  .admin-shell.menu-open .admin-overlay{display:block}
}

/* lock page scroll when drawer open */
html.admin-menu-open, html.admin-menu-open body{overflow:hidden}



/* ---------- Admin mobile overflow fixes (Parameters tab) ---------- */
.admin-main .table-wrap{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.admin-main .nq-table{table-layout:fixed}
.admin-main .nq-table td{overflow-wrap:anywhere; word-break:break-word}
.admin-main .nq-table input, .admin-main .nq-table textarea, .admin-main .nq-table select{min-width:0}

@media (max-width: 980px){
  /* prevent page-level horizontal overflow while keeping inner table scroll */
  .admin-shell, .admin-layout, .admin-main, .admin-panel{max-width:100vw}
  .admin-main{overflow-x:hidden}
}