/* ============================
   PLAMILY - Sidebar Design v3
   Copyright (c) Plamily.ch - All rights reserved
   Unauthorized copying, modification or distribution is strictly prohibited.
   ============================ */

/* --- Security --- */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;pointer-events:none}

/* --- Theme Variables --- */
:root, [data-theme="light"] {
    --bg: #f4f5fb; --bg2: #ffffff; --bg3: #f0f1f9; --bg-hover: #e8e9f5;
    --text: #2d3047; --text2: #6b7094; --text3: #9da3c2;
    --border: #e2e5f1; --border-focus: #7c83ff;
    --accent: #7c83ff; --accent2: #6269e0; --accent-bg: #eeeffe;
    --green: #4caf84; --green-bg: #e8f8f0;
    --red: #ef5350; --red-bg: #fdeaea;
    --orange: #ffb74d; --orange-bg: #fff5e5;
    --shadow-sm: 0 1px 4px rgba(45,48,71,.05);
    --shadow-md: 0 4px 16px rgba(45,48,71,.08);
    --shadow-lg: 0 8px 32px rgba(45,48,71,.12);
    --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-full: 50px;
    --sidebar-w: 240px;
}
[data-theme="dark"] {
    --bg: #13142a; --bg2: #1e1f3a; --bg3: #282950; --bg-hover: #32335a;
    --text: #e8e9f3; --text2: #a5a8c8; --text3: #6e729a;
    --border: #3a3b62; --border-focus: #9da0ff;
    --accent: #9da0ff; --accent2: #b0b3ff; --accent-bg: #2e2f55;
    --green: #66bb8a; --green-bg: #1e3a2e;
    --red: #ff6b6b; --red-bg: #3a1e1e;
    --orange: #ffcc80; --orange-bg: #3a3018;
    --shadow-sm: 0 1px 4px rgba(0,0,0,.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,.25);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.35);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;min-height:100dvh;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;overflow-x:hidden}
input,textarea,select{-webkit-user-select:text;user-select:text}
img{max-width:100%}

.screen{display:none;min-height:100vh;min-height:100dvh}
.screen.active{display:flex;flex-direction:column}

/* ============================
   WELCOME SCREEN
   ============================ */
.welcome-wrap{flex:1;max-width:480px;margin:0 auto;padding:24px 20px 40px;display:flex;flex-direction:column;gap:24px}
.welcome-hero{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:20px}
.welcome-hero-text{text-align:left;flex:1;min-width:0}
.swiss-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 14px;border-radius:var(--r-full);background:var(--bg2);font-size:.78rem;font-weight:600;color:var(--text2);border:1px solid var(--border)}
.swiss-footer{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.82rem;font-weight:600;color:var(--text2);margin-bottom:10px}
.swiss-text{color:#d52b1e;font-weight:800}
.welcome-social{display:flex;justify-content:center;gap:12px;margin-top:6px}
.social-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bg2);color:var(--text2);border:1px solid var(--border);transition:all .2s;text-decoration:none}
.social-icon:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
/* Welcome Scene */
.welcome-scene{position:relative;width:130px;height:130px;flex-shrink:0}
@media(max-width:400px){.welcome-hero{flex-direction:column;text-align:center}.welcome-hero-text{text-align:center}.welcome-scene{width:110px;height:110px}}
.scene-glow{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,var(--accent-bg) 0%,transparent 70%);animation:glow-pulse 4s ease-in-out infinite}
.scene-house{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;animation:house-bounce 3s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(124,131,255,.25));z-index:2}
@keyframes house-bounce{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.08)}}
@keyframes glow-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

.scene-orbit{position:absolute;font-size:1rem;z-index:3;animation:orbit-spin 12s linear infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.scene-orbit.o1{top:10%;left:50%;animation:orbit1 8s ease-in-out infinite}
.scene-orbit.o2{top:50%;right:2%;animation:orbit2 7s ease-in-out infinite}
.scene-orbit.o3{bottom:8%;right:18%;animation:orbit3 9s ease-in-out infinite}
.scene-orbit.o4{bottom:12%;left:12%;animation:orbit4 8.5s ease-in-out infinite}
.scene-orbit.o5{top:50%;left:0;animation:orbit5 7.5s ease-in-out infinite}
.scene-orbit.o6{top:14%;left:14%;animation:orbit6 10s ease-in-out infinite}

@keyframes orbit1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(15px,8px) scale(1.15)}50%{transform:translate(-5px,14px) scale(.9)}75%{transform:translate(-12px,-4px) scale(1.1)}}
@keyframes orbit2{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-8px,-12px) scale(1.1)}50%{transform:translate(-14px,6px) scale(.95)}75%{transform:translate(4px,10px) scale(1.15)}}
@keyframes orbit3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-10px,-14px) scale(1.2)}66%{transform:translate(12px,-6px) scale(.9)}}
@keyframes orbit4{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(14px,6px) scale(1.15)}66%{transform:translate(-6px,12px) scale(.85)}}
@keyframes orbit5{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(10px,-10px) scale(1.2)}50%{transform:translate(16px,4px) scale(.9)}75%{transform:translate(4px,14px) scale(1.1)}}
@keyframes orbit6{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(12px,12px) scale(1.1)}60%{transform:translate(-4px,16px) scale(.95)}}

.scene-float{position:absolute;font-size:.8rem;z-index:1;opacity:.4}
.scene-float.f1{top:0;right:10%;animation:floaty 6s ease-in-out infinite}
.scene-float.f2{bottom:0;left:6%;animation:floaty 5s ease-in-out infinite 1s}
.scene-float.f3{bottom:18%;right:0;animation:floaty 7s ease-in-out infinite 2s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);opacity:.35}50%{transform:translateY(-12px) rotate(8deg);opacity:.55}}
.welcome-title{font-size:2.8rem;font-weight:900;color:var(--accent);letter-spacing:-2px;line-height:1}
.welcome-sub{color:var(--text2);font-size:1rem;margin-top:8px}

.welcome-features{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-item{display:flex;align-items:center;gap:8px;background:var(--bg2);padding:12px 14px;border-radius:var(--r-md);font-size:.88rem;font-weight:600;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.wf-item span:first-child{font-size:1.3rem;flex-shrink:0}

.welcome-terms-card{background:var(--bg2);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.welcome-legal-summary{text-align:center;margin-bottom:16px}
.legal-header-anim{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.legal-logo{font-family:'Nunito',sans-serif;font-size:1.4rem;font-weight:900;color:var(--accent);letter-spacing:-.5px}
.legal-shield-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.legal-shield{font-size:2.2rem;animation:legalPulse 2.5s ease-in-out infinite}
.legal-shield-check{position:absolute;bottom:-2px;right:-6px;font-size:.9rem;animation:legalPop 2.5s ease-in-out infinite}
@keyframes legalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes legalPop{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}
.legal-tagline{font-size:.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.welcome-legal-summary p{font-size:.84rem;color:var(--text2);margin-bottom:8px;line-height:1.5}
.data-warning{background:#fff3e0;border:1px solid #ffb74d;border-radius:var(--r-sm);padding:8px 10px;color:#e65100;font-size:.8rem;line-height:1.4}
.welcome-legal-links{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.legal-link-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg3);color:var(--text1);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:left}
.legal-link-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.legal-link-icon{font-size:1.2rem;flex-shrink:0}
.legal-link-arrow{margin-left:auto;font-size:1.3rem;font-weight:300;color:var(--text3);transition:transform .2s}
.legal-link-btn:hover .legal-link-arrow{transform:translateX(3px);color:var(--accent)}
.legal-inline-link{color:var(--accent);text-decoration:underline;font-weight:700;cursor:pointer}
.legal-inline-link:hover{opacity:.8}

/* Legal modals */
.modal-legal{width:95vw;max-width:750px;max-height:90vh;display:flex;flex-direction:column}
.legal-body{flex:1;overflow-y:auto;padding:20px 24px;font-size:.88rem;line-height:1.65;color:var(--text2)}
.legal-body h4{font-size:.95rem;font-weight:800;color:var(--text1);margin:20px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.legal-body h4:first-of-type{margin-top:8px}
.legal-body p{margin-bottom:10px}
.legal-body ul{margin:0 0 12px 20px;padding:0}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--accent);font-weight:600}
.legal-update{font-size:.78rem;color:var(--text3);font-style:italic;text-align:right;margin-bottom:12px!important}

.custom-check{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:14px;font-size:.9rem;font-weight:600}
.custom-check input{position:absolute;opacity:0;width:0;height:0}
.custom-check-box{width:22px;height:22px;border:2px solid var(--border);border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--bg3)}
.custom-check input:checked+.custom-check-box{background:var(--accent);border-color:var(--accent)}
.custom-check input:checked+.custom-check-box::after{content:'\2713';color:#fff;font-size:13px;font-weight:800}

/* ============================
   BUTTONS
   ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border:none;border-radius:var(--r-full);font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent2);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text);padding:8px 14px;font-size:.82rem}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-pdf{background:#ef6c00;color:#fff;border:none}
.btn-pdf:hover{background:#e65100}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:8px 16px;font-size:.82rem}
.btn-xs{padding:5px 10px;font-size:.75rem;border-radius:var(--r-full)}
.btn-full{width:100%;padding:14px}
.btn-glow{background:var(--accent);color:#fff;width:100%;padding:16px;font-size:1.05rem;box-shadow:0 4px 20px rgba(124,131,255,.35)}
.btn-glow:hover{box-shadow:0 6px 28px rgba(124,131,255,.5)}
.btn-glow:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}
.btn-donate{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff}

/* ============================
   SIDEBAR
   ============================ */
.app-layout{display:flex;min-height:100vh;min-height:100dvh}

.sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:100;
    width:var(--sidebar-w);
    background:var(--bg2);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;overflow-x:hidden;
    box-shadow:var(--shadow-lg);
}
.sidebar.open{transform:translateX(0)}

.sidebar-backdrop{
    display:none;position:fixed;inset:0;z-index:99;
    background:rgba(0,0,0,.4);opacity:0;
    transition:opacity .28s ease;
}
.sidebar-backdrop.visible{display:block;opacity:1}

.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 20px 10px;border-bottom:none}
.sidebar-logo{font-size:1.6rem}
.sidebar-logo-text{font-size:1.25rem;font-weight:900;color:var(--accent);letter-spacing:-1px}

.sidebar-family{display:flex;align-items:center;gap:8px;padding:6px 16px 14px;border-bottom:1px solid var(--border)}
.sidebar-family-ico{font-size:1.1rem}
.sidebar-family-name{border:none;background:transparent;font-family:inherit;font-size:.88rem;font-weight:700;color:var(--text);padding:6px 8px;border-radius:var(--r-sm);width:100%;transition:background .15s}
.sidebar-family-name:focus{outline:none;background:var(--bg3)}
.sidebar-family-name::placeholder{color:var(--text3);font-weight:600}

.sidebar-nav{padding:10px 10px 0}
.sidebar-tools{padding:2px 10px}
.sidebar-sep{height:1px;background:var(--border);margin:8px 16px}

.snav-item,.snav-tool{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:10px 14px;border:none;border-radius:var(--r-sm);
    background:transparent;cursor:pointer;font-family:inherit;
    font-size:.88rem;font-weight:600;color:var(--text2);
    transition:all .15s;text-align:left;white-space:nowrap;
}
.snav-item:hover,.snav-tool:hover{background:var(--bg-hover);color:var(--text)}
.snav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:700}
.snav-ico{font-size:1.15rem;flex-shrink:0;width:24px;text-align:center}
.snav-label{flex:1}
.snav-danger{color:var(--red)}
.snav-danger:hover{background:var(--red-bg)}

.sidebar-bottom{margin-top:auto;padding:10px 10px 14px}
.sidebar-bottom .copyright{font-size:.68rem;color:var(--text3);text-align:center;margin-top:8px}

/* ============================
   TOPBAR
   ============================ */
.topbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    background:var(--bg2);border-bottom:1px solid var(--border);
}
.topbar-center{display:flex;align-items:center;gap:8px}
.topbar-logo{font-size:1.3rem}
.topbar-title{font-size:1.1rem;font-weight:900;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.topbar-right{display:flex;gap:4px}
.topbar-btn{width:38px;height:38px;border:none;border-radius:50%;background:transparent;cursor:pointer;font-size:1.15rem;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .2s;text-decoration:none}
.topbar-btn:hover{background:var(--bg-hover)}
[data-theme="light"] .ico-dark{display:none}
[data-theme="dark"] .ico-light{display:none}
.heart-pulse{animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Hamburger */
.hamburger-btn{
    width:38px;height:38px;border:none;border-radius:var(--r-sm);
    background:transparent;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5px;padding:8px;
    transition:background .15s;
}
.hamburger-btn:hover{background:var(--bg-hover)}
.hamburger-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .2s}

/* ============================
   PAGES
   ============================ */
.app-main{flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;min-width:0}
.pages{flex:1;overflow-y:auto}
.page{display:none;padding:16px;max-width:900px;margin:0 auto;animation:fadeUp .25s ease}
.page.active{display:block}
#page-planning{padding:0;max-width:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-head h2{font-size:1.4rem;font-weight:800}

.empty-state{text-align:center;padding:50px 20px;color:var(--text3)}
.empty-icon{font-size:3rem;margin-bottom:10px}

/* ============================
   FAMILY GRID
   ============================ */
.family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.member-card{background:var(--bg2);border-radius:var(--r-md);padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm);border:2px solid var(--border);cursor:pointer;transition:all .2s;position:relative}
.member-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.member-card-avatar{font-size:2.6rem;margin-bottom:4px;display:block}
.member-card-name{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-card-sub{font-size:.78rem;color:var(--text2)}
.member-card-color{position:absolute;top:8px;left:8px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg2)}
.member-card-actions{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .2s}
.member-card:hover .member-card-actions{opacity:1}
.mc-btn{width:26px;height:26px;border:none;border-radius:50%;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mc-btn-edit{background:var(--accent-bg);color:var(--accent)}
.mc-btn-del{background:var(--red-bg);color:var(--red)}

/* ============================
   ACTIVITIES GRID
   ============================ */
.activities-grid{display:flex;flex-direction:column;gap:10px}
.act-card{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;background:var(--bg2);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative}
.act-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent)}
.act-card-icon{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.act-card-body{flex:1;min-width:0}
.act-card-name{font-weight:700;font-size:.92rem;overflow:hidden;text-overflow:ellipsis}
.act-card-who{font-weight:500;font-size:.82rem;color:var(--text2)}
.act-card-meta{font-size:.78rem;color:var(--text2);display:flex;flex-wrap:wrap;gap:4px 10px}
.act-card-members{display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0}
.act-card-member-dot{padding:2px 8px;border-radius:var(--r-full);display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;color:#fff;white-space:nowrap}
.act-badge{position:absolute;top:6px;right:6px;padding:2px 8px;border-radius:var(--r-full);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.act-badge-once{background:#ff980020;color:#e65100}
.act-badge-weekly{background:var(--accent-bg);color:var(--accent)}
.act-card-actions{display:flex;gap:4px;flex-shrink:0}

/* ============================
   CHIP ROW
   ============================ */
.chip-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.chip-row-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.chip{padding:7px 14px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg2);cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text2);white-space:nowrap;flex-shrink:0;transition:all .2s}
.chip.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.chip:hover{border-color:var(--accent)}

/* Search box */
.act-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.act-toolbar-col{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.act-filter-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.filter-dd-right{right:0;left:auto}
.search-box{position:relative}
.search-box .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.9rem;pointer-events:none;line-height:1}
.search-box input,.search-box input#act-search,.search-box input#planning-search{width:100%;padding:10px 14px 10px 44px !important;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg2) !important;font-family:inherit;font-size:.88rem;color:var(--text);outline:none;transition:border .2s;box-sizing:border-box}
.search-box input:focus{border-color:var(--accent)}
.search-box input::placeholder{color:var(--text3)}

/* ============================
   PLANNING
   ============================ */
.planning-controls{background:var(--bg2);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;gap:10px;position:sticky;top:0;z-index:10}
.planning-controls .date-nav,.planning-controls .search-box-planning{margin-left:auto;margin-right:auto;width:100%}
.planning-filter-row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.search-box-planning{width:100%}
.search-box-planning input{background:var(--bg2)!important}
.filter-dropdown{position:relative}
.filter-dd-btn{padding:8px 14px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg3);cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--text);transition:all .15s;white-space:nowrap}
.filter-dd-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-dd-count{font-size:.72rem;background:var(--accent);color:#fff;border-radius:var(--r-full);padding:1px 6px;margin-left:2px}
.filter-dd-panel{display:none;position:absolute;top:100%;left:0;min-width:220px;max-height:300px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:50;padding:6px;margin-top:4px}
.filter-dd-panel.open{display:block}
.filter-dd-list{display:flex;flex-direction:column;gap:2px}
.filter-dd-list .chip{text-align:left;justify-content:flex-start;width:100%;border-radius:var(--r-sm);padding:6px 10px;font-size:.8rem}
.planning-top-row{display:flex;align-items:center;gap:8px;margin:0 auto;width:100%}
.planning-top-row .view-tabs{flex:1}
.planning-top-row .btn{padding:8px 14px;font-size:.8rem;white-space:nowrap}
.planning-top-row .btn-outline{opacity:.5;transition:opacity .2s}
.planning-top-row .btn-outline:hover{opacity:1}
.page-head-actions{display:flex;gap:8px;align-items:center}
.page-head-actions .btn-outline{opacity:.55;transition:opacity .2s}
.page-head-actions .btn-outline:hover{opacity:1}
.view-tabs{display:flex;background:var(--bg3);border-radius:var(--r-full);padding:3px}
.vtab{flex:1;padding:8px;border:none;border-radius:var(--r-full);background:transparent;font-family:inherit;font-size:.84rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .2s;text-align:center}
.vtab.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}

.date-nav{display:flex;align-items:center;gap:6px;justify-content:center}
.nav-arrow{width:34px;height:34px;border:2px solid var(--border);border-radius:50%;background:var(--bg2);cursor:pointer;font-size:1.2rem;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit}
.nav-arrow:hover{border-color:var(--accent);color:var(--accent)}
.date-label{font-weight:700;font-size:.92rem;text-align:center;min-width:180px}

.planning-content{padding:12px 16px;margin:0 auto}

/* Day View */
.day-timeline{display:flex;flex-direction:column;gap:2px}
.time-row{display:flex;gap:10px;min-height:40px;padding:4px 0;border-bottom:1px solid var(--border)}
.time-row-hour{width:58px;font-size:1.1rem;font-weight:800;color:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;text-align:right}
.time-row-events{flex:1;display:flex;flex-direction:column;gap:4px}
.ev{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:.84rem;font-weight:600;border-left:4px solid;transition:background .15s}
.ev-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ev-members-top{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.ev:hover{filter:brightness(1.05)}
.ev-dot{padding:2px 8px;border-radius:var(--r-full);display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;white-space:nowrap}
.ev-body{min-width:0}
.ev-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-sub{font-size:.7rem;font-weight:400;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-time-stack{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex-shrink:0}
.ev-time-badge{font-size:.95rem;font-weight:800;color:var(--accent);background:var(--accent-bg);padding:4px 12px;border-radius:var(--r-full);white-space:nowrap;flex-shrink:0;line-height:1.2}
.ev-time-dim{opacity:.4;font-size:.78rem;font-weight:600;padding:2px 10px}
.ev-time-active{box-shadow:0 0 0 2px var(--accent);font-size:.95rem}
.ev-multi-badge{font-size:.65rem;font-weight:700;color:#fff;background:var(--accent);padding:2px 8px;border-radius:var(--r-full);white-space:nowrap;margin-left:4px}

/* Week View */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wk-head{text-align:center;font-size:.7rem;font-weight:800;color:var(--text2);padding:6px 2px;text-transform:uppercase}
.wk-head.today{color:var(--accent)}
.wk-col{background:var(--bg2);border-radius:var(--r-sm);padding:4px;border:1px solid var(--border);min-height:100px;display:flex;flex-direction:column;gap:2px}
.wk-col.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wk-ev{padding:3px 5px;border-radius:4px;font-size:.62rem;font-weight:600;border-left:3px solid;line-height:1.3;overflow:hidden;display:flex;align-items:center;gap:3px}
.wk-ev-dot{padding:1px 6px;border-radius:var(--r-full);display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;color:#fff;flex-shrink:0;white-space:nowrap}
.wk-ev-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.wk-ev-multi{font-size:.5rem;font-weight:700;color:#fff;background:var(--accent);padding:0 4px;border-radius:var(--r-full);flex-shrink:0;line-height:1.4}

/* Month View */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mo-head{text-align:center;font-size:.68rem;font-weight:800;color:var(--text2);padding:4px;text-transform:uppercase}
.mo-cell{background:var(--bg2);border-radius:4px;padding:3px;border:1px solid var(--border);min-height:60px}
.mo-cell.today{border-color:var(--accent)}
.mo-cell.other{opacity:.3}
.mo-num{font-size:.7rem;font-weight:800;color:var(--text2);margin-bottom:1px}
.mo-cell.today .mo-num{color:var(--accent)}
.mo-ev{display:flex;align-items:center;gap:2px;padding:1px 3px;border-radius:3px;font-size:.55rem;font-weight:700;line-height:1.2;margin-bottom:1px;border-left:2px solid;overflow:hidden;white-space:nowrap}
.mo-ev-init{padding:1px 4px;border-radius:var(--r-full);display:inline-flex;align-items:center;font-size:.5rem;font-weight:700;color:#fff;flex-shrink:0;white-space:nowrap}
.mo-ev-multi{font-size:.45rem;font-weight:700;color:#fff;background:var(--accent);padding:0 3px;border-radius:var(--r-full);flex-shrink:0;margin-left:auto;line-height:1.3}
.mo-ev-text{overflow:hidden;text-overflow:ellipsis}
.mo-more{font-size:.55rem;color:var(--text3);font-weight:700;padding-left:2px}

/* Event category bg colors */
.ev-school{background:#e3f2fd;border-left-color:#42a5f5;color:#1565c0}
.ev-homework{background:#f3e5f5;border-left-color:#ab47bc;color:#7b1fa2}
.ev-sport{background:#e8f5e9;border-left-color:#66bb6a;color:#2e7d32}
.ev-music{background:#fbe9e7;border-left-color:#ff7043;color:#d84315}
.ev-appointment{background:#ffebee;border-left-color:#ef5350;color:#c62828}
.ev-routine{background:#eceff1;border-left-color:#78909c;color:#37474f}
.ev-leisure{background:#fff8e1;border-left-color:#ffca28;color:#f57f17}
.ev-other{background:#e0f7fa;border-left-color:#26c6da;color:#00838f}

[data-theme="dark"] .ev-school{background:#1a2740;color:#64b5f6}
[data-theme="dark"] .ev-homework{background:#2a1a35;color:#ce93d8}
[data-theme="dark"] .ev-sport{background:#1a2e1a;color:#81c784}
[data-theme="dark"] .ev-music{background:#2e1a15;color:#ff8a65}
[data-theme="dark"] .ev-appointment{background:#2e1a1a;color:#ef9a9a}
[data-theme="dark"] .ev-routine{background:#1e2428;color:#b0bec5}
[data-theme="dark"] .ev-leisure{background:#2e2a15;color:#ffd54f}
[data-theme="dark"] .ev-other{background:#152a2e;color:#4dd0e1}

.planning-empty{text-align:center;padding:60px 20px;color:var(--text3)}
.planning-empty-icon{font-size:3rem;display:block;margin-bottom:10px}

/* ============================
   MODALS
   ============================ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;padding:0}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);width:100%;max-width:500px;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;flex-direction:column;animation:modalUp .25s ease}
.modal-large{max-height:95vh}
.modal-sm{max-width:400px}
.modal-md{max-width:520px}

/* Donate options */
.donate-options{display:flex;gap:14px;margin:8px 0}
.donate-card{flex:1;background:var(--bg);border:2px solid var(--border);border-radius:var(--r-md);padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,box-shadow .2s}
.donate-card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(124,131,255,.15)}
.donate-icon{font-size:2.2rem}
.donate-card h4{font-size:.95rem;font-weight:800;color:var(--text);margin:0}
.donate-desc{font-size:.78rem;color:var(--text3);margin:0 0 8px;line-height:1.4}
.donate-note{font-size:.72rem;color:var(--text3);margin:0;opacity:.8}
@media(max-width:480px){.donate-options{flex-direction:column}}
@keyframes modalUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:1.1rem;font-weight:800}
.modal-close{width:32px;height:32px;border:none;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--text3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--bg-hover)}
.modal-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.modal-foot{padding:16px 20px;border-top:1px solid var(--border)}
.modal-close-text{border:none;background:none;color:var(--text3);cursor:pointer;font-family:inherit;font-size:.85rem;text-decoration:underline;margin-top:8px}
.modal-close-btn{padding:10px 20px}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}

/* --- Conflict list --- */
.conflict-list{display:flex;flex-direction:column;gap:8px}
.conflict-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--orange-bg);border-radius:var(--r-sm);border-left:4px solid var(--orange);font-size:.85rem;line-height:1.4}
.conflict-item-ico{font-size:1.2rem;flex-shrink:0}

/* --- Fields --- */
.field{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:.8rem;font-weight:700;color:var(--text2)}
.field-hint{font-weight:400;color:var(--text3);font-size:.75rem}
.field-help{font-size:.72rem;color:var(--text3);margin-top:4px;font-style:italic}
.exp-members-list{display:flex;flex-wrap:wrap;gap:6px}
.exp-member-chip{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r-full);border:2px solid var(--border);background:var(--bg3);cursor:pointer;font-size:.8rem;font-weight:600;transition:all .2s;user-select:none}
.exp-member-chip.selected{border-color:var(--accent);background:rgba(124,131,255,.12)}
.exp-member-chip .exp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.exp-all-chip.selected{font-weight:800;background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.exp-all-chip:not(.selected){font-weight:800;background:var(--bg3);color:var(--text);border-color:var(--border)}

/* PDF Preview Modal */
.modal-pdf{width:95vw;max-width:1100px;max-height:92vh;display:flex;flex-direction:column}
.pdf-preview-actions{display:flex;gap:10px;justify-content:center;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.pdf-preview-body{flex:1;overflow:auto;padding:20px;background:#fff;font-size:12px;color:#333;font-family:'Segoe UI',Arial,sans-serif}
.pdf-preview-body h1{font-size:18px;color:var(--accent);margin:0 0 2px}
.pdf-preview-body h2{font-size:13px;color:#666;margin:0 0 14px;font-weight:normal}
.pdf-preview-body table{width:100%;border-collapse:collapse;margin-top:8px}
.pdf-preview-body th{background:var(--accent);color:#fff;padding:7px 5px;text-align:left;font-size:10px}
.pdf-preview-body td{padding:5px;border-bottom:1px solid #eee;font-size:10px;vertical-align:top}
.pdf-preview-body tr:nth-child(even){background:#f8f9ff}
.pdf-preview-body .init{display:inline-block;padding:2px 8px;border-radius:10px;color:#fff;font-size:8px;font-weight:700;margin-right:4px;white-space:nowrap}
.pdf-preview-body .footer{margin-top:16px;text-align:center;color:#999;font-size:9px}
.pdf-preview-body .wt{table-layout:fixed}
.pdf-preview-body .wt td{width:14.28%;min-height:50px}
.pdf-preview-body .ei{padding:3px 5px;margin:2px 0;border-radius:4px;font-size:9px;border-left:3px solid;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
@media print{
    .modal-overlay{position:static!important;background:none!important}
    .modal-pdf{width:100%!important;max-width:none!important;max-height:none!important;box-shadow:none!important;border-radius:0!important}
    .modal-pdf .modal-head,.pdf-preview-actions{display:none!important}
    .pdf-preview-body{overflow:visible!important;padding:8px!important}
    .pdf-preview-body th,.pdf-preview-body td,.pdf-preview-body .init,.pdf-preview-body .ei,.pdf-preview-body tr:nth-child(even){-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}
    .pdf-preview-body thead{display:table-header-group}
    .pdf-preview-body tbody tr{page-break-inside:avoid}
    body>*:not(#modal-pdf-preview){display:none!important}
    #modal-pdf-preview{display:block!important}
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.birthdate-picker{display:flex;gap:6px}
.bd-sel{flex:1;padding:11px 6px;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--bg3);font-family:inherit;font-size:.88rem;color:var(--text);outline:none;cursor:pointer;transition:border .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}
.bd-sel:focus{border-color:var(--accent)}
.bd-sel-month{flex:1.5}
input[type="text"],input[type="number"],select{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:inherit;font-size:.92rem;background:var(--bg3);color:var(--text);transition:border-color .2s}
input:focus,select:focus{outline:none;border-color:var(--border-focus)}

/* --- Avatar Picker --- */
.member-preview{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg3);border-radius:var(--r-md);margin-bottom:12px;border:2px solid var(--border)}
.member-preview-avatar{font-size:2rem}
.member-preview-name{flex:1;font-weight:700;font-size:1rem;color:var(--text)}
.member-preview-color{width:24px;height:24px;border-radius:50%;border:3px solid var(--border);flex-shrink:0}
.avatar-picker-section{max-height:260px;overflow-y:auto;min-height:200px}
.avatar-picker{display:flex;flex-direction:column;gap:8px}
.avatar-filter-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.avatar-filter-tabs .chip{padding:4px 10px;font-size:.72rem}
.avatar-grid{display:flex;flex-wrap:wrap;gap:6px}
.avatar-opt{width:44px;height:44px;border:2px solid var(--border);border-radius:50%;background:var(--bg3);cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.avatar-opt:hover{border-color:var(--accent)}
.avatar-opt.selected{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg)}

/* --- Color Picker --- */
.color-picker{display:flex;gap:8px;flex-wrap:wrap;padding:4px}
.color-picker-sm{gap:5px}
.color-dot{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid var(--border);transition:all .18s;position:relative;display:flex;align-items:center;justify-content:center}
.color-dot:hover{transform:scale(1.18);border-color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.color-dot.selected{border-color:#fff;box-shadow:0 0 0 3px var(--text),0 2px 12px rgba(0,0,0,.25);transform:scale(1.15)}
.color-dot.selected::after{content:'\2713';color:#fff;font-size:14px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.5)}
[data-theme="dark"] .color-dot{border-color:var(--border)}
[data-theme="dark"] .color-dot.selected{border-color:var(--bg);box-shadow:0 0 0 3px var(--text),0 2px 12px rgba(0,0,0,.4)}
.color-picker-sm .color-dot{width:28px;height:28px}
.color-picker-sm .color-dot.selected::after{font-size:11px}

/* --- Category Selector --- */
.cat-selector{display:flex;flex-wrap:wrap;gap:6px}
.cat-opt{display:flex;align-items:center;gap:4px;padding:7px 12px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg3);cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text2);transition:all .15s;white-space:nowrap}
.cat-opt:hover{border-color:var(--accent)}
.cat-opt.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}

/* --- Member check list --- */
.member-check-list{display:flex;flex-wrap:wrap;gap:8px}
.member-check{display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg3);cursor:pointer;font-size:.84rem;font-weight:600;color:var(--text2);transition:all .15s}
.member-check:hover{border-color:var(--accent)}
.member-check.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.member-check-avatar{font-size:1.1rem}
/* Escort rows */
.escort-row{margin-bottom:10px;padding:10px 12px;background:var(--bg3);border-radius:var(--r-lg);border:1px solid var(--border)}
.escort-row-label{font-weight:700;font-size:.9rem;margin-bottom:6px}
.escort-select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg3);color:var(--text);font-size:.85rem}
.escort-other-fields{display:flex;gap:8px;margin-top:8px}
.escort-other-fields input{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg3);color:var(--text);font-size:.85rem}

/* --- Day Pills --- */
.schedule-type-pills{display:flex;gap:6px}
.sched-pill{padding:8px 16px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--bg3);cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--text2);transition:all .15s}
.sched-pill:hover{border-color:var(--accent)}
.sched-pill.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.input-date{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--r-md);background:var(--bg2);font-family:inherit;font-size:.88rem;color:var(--text);outline:none;transition:border .2s;box-sizing:border-box}
.input-date:focus{border-color:var(--accent)}
.day-pills{display:flex;gap:4px}
.day-pill{width:40px;height:40px;border:2px solid var(--border);border-radius:50%;background:var(--bg3);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.day-pill:hover{border-color:var(--accent)}
.day-pill.selected{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- Time Slots --- */
.timeslots-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.timeslots-list{display:flex;flex-direction:column;gap:8px}
.timeslot-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg3);border-radius:var(--r-sm);border:1px solid var(--border)}
.timeslot-label{font-size:.75rem;font-weight:700;color:var(--text3);flex-shrink:0;width:12px;text-align:center}
.timeslot-sep{font-size:.8rem;color:var(--text3);font-weight:700;padding:0 2px}
.timeslot-del{width:28px;height:28px;border:none;border-radius:50%;background:var(--red-bg);color:var(--red);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.timeslot-del:hover{background:var(--red);color:#fff}

/* --- Time Picker --- */
.time-pick{display:flex;align-items:center;gap:4px}
.time-pick select{width:64px;text-align:center;padding:9px 4px;font-size:.85rem}
.time-sep{font-weight:800;font-size:1.1rem;color:var(--text2)}

/* --- Category manager --- */
.cat-dropdown-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--bg3);cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--text);transition:all .2s}
.cat-dropdown-toggle:hover{border-color:var(--accent);background:var(--accent-bg)}
.cat-dropdown-arrow{font-size:.7rem;transition:transform .2s}
.cat-dropdown-toggle.open .cat-dropdown-arrow{transform:rotate(180deg)}
.cat-manager-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;margin-bottom:16px;max-height:300px;overflow-y:auto;transition:max-height .3s ease,opacity .2s ease}
.cat-manager-list.cat-collapsed{max-height:0;overflow:hidden;opacity:0;margin:0}
.cat-manager-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg3);border-radius:var(--r-sm)}
.cat-manager-item .cat-m-emoji{font-size:1.2rem}
.cat-manager-item .cat-m-name{flex:1;font-weight:600;font-size:.9rem}
.cat-manager-item .color-dot{width:20px;height:20px;border:2px solid var(--border)}
.cat-manager-edit{width:28px;height:28px;border:none;border-radius:50%;background:var(--accent-bg);color:var(--accent);cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cat-manager-edit:hover{background:var(--accent);color:#fff}
.cat-manager-del{width:28px;height:28px;border:none;border-radius:50%;background:var(--red-bg);color:var(--red);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cat-manager-del:hover{background:var(--red);color:#fff}
.cat-add-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.cat-add-form input{flex:1;min-width:120px}
.mini-emoji-pick{display:flex;gap:4px;flex-wrap:wrap}
.mini-emoji-opt{width:32px;height:32px;border:2px solid var(--border);border-radius:8px;background:var(--bg3);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mini-emoji-opt:hover,.mini-emoji-opt.selected{border-color:var(--accent);background:var(--accent-bg)}

/* ============================
   TOAST
   ============================ */
.toast-container{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:12px 24px;border-radius:var(--r-full);font-size:.88rem;font-weight:600;box-shadow:var(--shadow-md);animation:toastIn .25s ease,toastOut .25s ease 2.5s forwards;pointer-events:auto}
.toast-success{background:var(--green);color:#fff}
.toast-error{background:var(--red);color:#fff}
.toast-info{background:var(--accent);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}

/* ============================
   RESPONSIVE
   ============================ */

/* Mobile-first: sidebar is a drawer */
@media(max-width:767px){
    .topbar-logo{display:inline}
    .planning-controls{top:0}
    .wk-col{min-height:80px;padding:3px}
    .wk-ev{font-size:.55rem;padding:2px 3px}
    .wk-ev-dot{padding:1px 4px;font-size:.5rem}
    .wk-ev-text{font-size:.52rem}
    .week-grid{gap:2px}
}

@media(max-width:480px){
    .form-row-2{grid-template-columns:1fr 1fr}
    /* Week: 2 columns layout on mobile */
    .week-grid{grid-template-columns:repeat(2,1fr)!important;gap:4px}
    .wk-head{font-size:.72rem;padding:6px 4px}
    .wk-col{min-height:60px;padding:4px}
    .wk-ev{font-size:.65rem;padding:3px 4px}
    .wk-ev-dot{padding:1px 5px;font-size:.6rem}
    .wk-ev-text{font-size:.6rem;white-space:normal;line-height:1.2}
    /* Month: 2 columns on mobile */
    .month-grid{grid-template-columns:repeat(2,1fr)!important;gap:3px}
    .mo-head{font-size:.65rem;padding:4px}
    .mo-cell{min-height:50px;padding:4px}
    .mo-ev{font-size:.58rem;padding:2px 3px}
    .mo-ev-init{padding:1px 4px;font-size:.5rem}
    .mo-ev-text{font-size:.52rem}
    .date-label{font-size:.78rem;min-width:auto}
    .family-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .planning-top-row .btn{padding:6px 8px;font-size:.7rem}
    .vtab{padding:6px 4px;font-size:.75rem}
    .activities-grid{grid-template-columns:1fr}
    .act-card{flex-direction:column}
    .act-card-members{flex-wrap:wrap}
    .planning-content{padding:8px}
    .ev{flex-wrap:wrap;font-size:.78rem;padding:6px 8px}
    .ev-dot{padding:1px 5px;font-size:.7rem}
    .planning-filter-row{flex-wrap:nowrap;gap:4px}
    .filter-dd-btn{padding:7px 8px;font-size:.7rem;white-space:nowrap}
    .filter-dd-count{font-size:.6rem;padding:1px 4px}
    .act-toolbar-row{flex-wrap:nowrap;gap:4px}
    .act-toolbar-row .search-box{min-width:0}
}

/* Mobile/tablet: hide week/month tabs */
@media(max-width:767px){
    .vtab[data-view="week"],.vtab[data-view="month"]{display:none}
}

/* Desktop: sidebar always visible */
@media(min-width:768px){
    .sidebar{
        transform:translateX(0);
        box-shadow:none;
    }
    .sidebar-backdrop{display:none!important}
    .hamburger-btn{display:none}
    .app-main{margin-left:var(--sidebar-w)}
    .topbar-logo{display:none}
    .topbar-title{display:none}
    .planning-controls{top:0}

    .modal-overlay{align-items:center;padding:20px}
    .modal{border-radius:var(--r-lg);max-height:85vh}
    @keyframes modalUp{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

    .family-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
    .activities-grid{display:grid;grid-template-columns:1fr 1fr}
}

/* Welcome extras */
.welcome-theme-btn{display:inline-flex;align-items:center;gap:4px}
.welcome-footer{text-align:center;padding:16px 0 8px}
.welcome-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.welcome-link{border:none;background:none;color:var(--accent);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:none}
.welcome-link:hover{text-decoration:underline}
.welcome-sep{color:var(--text3);font-size:.7rem}
.copyright{font-size:.72rem;color:var(--text3);text-align:center}

/* Security */
body{-webkit-touch-callout:none}
@media print{
    *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
    body{background:#fff!important;color:#000!important;overflow:visible!important}
    .topbar,.sidebar,.sidebar-backdrop,.hamburger-btn{display:none!important}
    .app-main{margin-left:0!important}
    .pages{overflow:visible!important}
    .page{padding:0!important;max-width:none!important}
    #welcome-screen{display:none!important}
    /* Hide non-printable elements */
    .planning-top-row .btn,.page-head-actions,.btn-add-activity-open,#btn-add-activity-open,#btn-add-member-open,.act-toolbar,.act-toolbar-row,.act-toolbar-col,.mc-btn,.act-card-actions{display:none!important}
    /* Hide planning controls in print */
    .print-header{display:none!important}
    .planning-controls{display:none!important}
    .planning-content{padding:0!important;max-width:none!important;overflow:visible!important}
    .week-grid,.month-grid{min-width:0!important}
    /* Activities print - keep same visual layout */
    .activities-grid{display:flex!important;flex-direction:column!important;gap:10px!important}
    .act-card{break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important}
    .search-box,.search-box-planning{display:none!important}
    #act-cat-filters,.chip-row-wrap,.planning-filter-row,.filter-dropdown{display:none!important}
    /* Hide non-active pages when printing */
    .page:not(.active){display:none!important}
    .page.active{display:block!important}
}
.print-header{display:none;align-items:center;gap:10px;margin-bottom:12px;padding:8px 0}
.print-header h1{font-size:1.3rem;color:#7c83ff;margin:0}
.print-header span{font-size:1.5rem}
.print-sub{font-size:.85rem;color:#888;margin-bottom:14px}
.print-footer{display:none;margin-top:20px;text-align:center;color:#aaa;font-size:.7rem;border-top:1px solid #eee;padding-top:8px}
@media print{.print-header,.print-footer{display:none!important}}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}