*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
    background:#020617;
    color:#e5e7eb;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px;
    padding-bottom:80px;
}
.wrapper{max-width:1000px;width:100%}
.card{
    background:linear-gradient(145deg,#020617,#020617 40%,#0f172a);
    border-radius:18px;
    padding:16px 16px 20px;
    box-shadow:0 18px 45px rgba(0,0,0,.8);
    border:1px solid rgba(148,163,184,.3);
    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:#9ca3af}
.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:#1e293b;color:#e5e7eb;border:1px solid rgba(148,163,184,.6);display:inline-flex;align-items:center;gap:4px;transition:.15s}
.btn:hover{background:#111827;border-color:#e5e7eb}
.btn-primary{background:#0ea5e9;border-color:#38bdf8;color:#0b1120}
.btn-primary:hover{background:#38bdf8}
.btn-danger{background:#b91c1c;border-color:#ef4444}
.btn-ghost{background:rgba(15,23,42,.7)}

/* CALENDAR SECTION (Sunday -> Saturday) */
.calendar-section{
    margin-top:14px;
    background:rgba(15,23,42,.85);
    border-radius:12px;
    padding:10px;
    border:1px solid rgba(148,163,184,.4);
}
.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 --- */

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;position:sticky;top:0;z-index:10;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}
.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)}
.container{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:1.6fr .9fr;gap:16px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}
.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}
.spacer{flex:1}
.muted{opacity:.7}
.divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0}
.cam-wrap{position:relative}
.cam-wrap img{width:100%;display:block;max-height:520px;object-fit:cover}
.cam-overlay{position:absolute;top:12px;left:12px}
.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)}
.badge.bad{border-color:rgba(255,120,120,.25)}
.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{display:flex;gap:10px;align-items:center;padding:0 14px 14px}
.online-list{padding:0 14px 14px;display:flex;flex-wrap:wrap;gap:8px}
.online-chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:12px}
.timelapse-panel{padding:0 14px 14px}
.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:rgba(255,255,255,.06);border:1px solid 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-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}}
.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}