/* Yu Family Cloud - Main Stylesheet */
:root{
    --primary:#e07a5f;--primary-light:#f4a261;--primary-dark:#c76a4f;
    --bg:#faf8f5;--bg-card:#fff;--bg-sidebar:#2d3436;
    --text:#2d3436;--text-light:#636e72;--text-muted:#b2bec3;
    --border:#e9e4df;--border-light:#f0edeb;
    --green:#00b894;--red:#e17055;--yellow:#fdcb6e;--blue:#74b9ff;
    --radius:8px;--radius-sm:6px;--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 4px 12px rgba(0,0,0,.08);--transition:.2s ease;--sidebar-w:240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;
}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto;vertical-align:middle}
::selection{background:var(--primary);color:#fff}
h1{font-size:1.5rem;font-weight:600}
h2{font-size:1.2rem;font-weight:600}
h3{font-size:1.05rem;font-weight:600}
.text-muted{color:var(--text-muted);font-size:.88rem}
/* Sidebar */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--bg-sidebar);color:rgba(255,255,255,.8);display:flex;flex-direction:column;z-index:100;transition:transform var(--transition)}
.sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{font-size:1.1rem;font-weight:700;color:#fff!important;letter-spacing:.5px}
.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06)}
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0}
.user-info{overflow:hidden}.user-name{font-weight:600;font-size:.9rem;color:#fff}.user-role{font-size:.78rem;color:rgba(255,255,255,.5)}
.sidebar-menu{list-style:none;padding:.5rem 0;flex:1;overflow-y:auto}
.sidebar-menu li.menu-section{padding:.5rem 1.25rem .25rem;font-size:.7rem;text-transform:uppercase;color:rgba(255,255,255,.4);letter-spacing:1px;font-weight:600}
.sidebar-menu li a{display:flex;align-items:center;gap:.5rem;padding:.55rem 1.25rem;color:rgba(255,255,255,.7);font-size:.9rem;transition:var(--transition)}
.sidebar-menu li a:hover,.sidebar-menu li a.active{background:rgba(255,255,255,.08);color:#fff}
.sidebar-footer{padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.logout-btn{color:rgba(255,255,255,.5)!important;font-size:.85rem}
.logout-btn:hover{color:var(--red)!important}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
/* Main */
.main-content{margin-left:var(--sidebar-w);padding:1.5rem 2rem;min-height:100vh}
.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;margin-bottom:.75rem;color:var(--text)}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.page-header h1{font-size:1.4rem}
/* Cards */
.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1rem;border:1px solid var(--border-light);overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-light)}
.card-body{padding:1.25rem}
.card-more{font-size:.85rem;color:var(--text-muted)!important}
.card-more:hover{color:var(--primary)!important}
.card-grid{display:grid;gap:1rem}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.two-col{grid-template-columns:1fr 1fr}
/* Stats */
.stat-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border-light);transition:var(--transition)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-icon{font-size:1.8rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0}
.stat-income .stat-icon{background:#e8f8f5;color:var(--green)}
.stat-expense .stat-icon{background:#fdf0ed;color:var(--red)}
.stat-balance-positive .stat-icon{background:#e8f8f5;color:var(--green)}
.stat-balance-negative .stat-icon{background:#fdf0ed;color:var(--red)}
.stat-todo .stat-icon{background:#fef9e7;color:var(--yellow)}
.stat-label{font-size:.8rem;color:var(--text-muted)}
.stat-value{font-size:1.2rem;font-weight:700}
.stat-income .stat-value{color:var(--green)}
.stat-expense .stat-value{color:var(--red)}
/* Actions */
.quick-actions{margin-bottom:1.5rem}
.quick-actions h2{font-size:1rem;margin-bottom:.75rem}
.action-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.action-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)!important;font-size:.85rem;transition:var(--transition)}
.action-btn:hover{background:var(--primary);color:#fff!important;border-color:var(--primary)}
/* Todo */
.todo-item{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem 0;border-bottom:1px solid var(--border-light)}
.todo-item:last-child{border-bottom:none}
.todo-check input{width:16px;height:16px;cursor:pointer;margin-top:3px}
.todo-content{flex:1;min-width:0}
.todo-title{cursor:pointer;font-size:.9rem}
.todo-title.completed{text-decoration:line-through;color:var(--text-muted)}
.todo-date{display:block;font-size:.78rem;color:var(--text-muted);margin-top:2px}
.todo-assignee{font-size:.78rem;color:var(--text-muted)}
.todo-badge{font-size:.7rem;padding:1px 6px;border-radius:3px;font-weight:600}
.badge-important{background:#fdf0ed;color:var(--red)}
.badge-hot{background:#fdf0ed;color:var(--red);font-size:.72rem;padding:2px 8px;border-radius:3px;font-weight:600}
.todo-important{background:#fffaf5;margin:0 -1.25rem;padding-left:1.25rem;padding-right:1.25rem;border-radius:var(--radius-sm)}
.todo-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
/* Events */
.event-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border-light)}
.event-item:last-child{border-bottom:none}
.event-icon{font-size:1.3rem;width:36px;text-align:center;flex-shrink:0}
.event-info{flex:1}.event-title{font-size:.9rem;font-weight:500}.event-date{font-size:.8rem;color:var(--text-muted)}
/* Albums */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.875rem}
.album-card{display:block;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light);transition:var(--transition);color:var(--text)!important}
.album-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.album-cover{height:140px;background-size:cover;background-position:center;position:relative}
.album-cover .album-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:.75rem;padding:2px 8px;border-radius:3px}
.album-info{padding:.65rem .875rem}
.album-title{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-meta,.album-desc{font-size:.78rem;color:var(--text-muted)}
/* Photos */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.photo-item{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-light);transition:var(--transition)}
.photo-item:hover{box-shadow:var(--shadow-md);transform:scale(1.02)}
.photo-item img{width:100%;height:100%;object-fit:cover}
/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;align-items:center;justify-content:center}
.lightbox-content{max-width:90%;max-height:90%;border-radius:4px}
.lightbox-close{position:absolute;top:20px;right:30px;font-size:2rem;color:#fff;cursor:pointer;opacity:.7;transition:var(--transition)}
.lightbox-close:hover{opacity:1}
/* Posts */
.post-card{margin-bottom:1rem}
.post-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-light)}
.post-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0}
.post-meta{flex:1}.post-meta strong{display:block;font-size:.9rem}
.post-content{padding:.875rem 1.25rem;font-size:.92rem;line-height:1.7}
.post-images{display:flex;gap:6px;padding:0 1.25rem 1rem;flex-wrap:wrap}
.post-img{width:calc(33.33% - 4px);max-height:200px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer}
.post-actions{display:flex;gap:1rem;padding:.6rem 1.25rem;border-top:1px solid var(--border-light)}
.btn-action{background:none;border:none;padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;color:var(--text-muted);transition:var(--transition);display:flex;align-items:center;gap:4px}
.btn-action:hover{background:var(--border-light);color:var(--text)}.btn-action.liked{color:var(--red)}
.post-comments{padding:0 1.25rem 1rem;border-top:1px solid var(--border-light)}
.comments-list{padding:.75rem 0}.comment-item{padding:4px 0;font-size:.85rem;color:var(--text-light)}
.comment-item strong{color:var(--text)}
.comment-form{display:flex;gap:.5rem}.comment-form input{flex:1;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .75rem;font-size:.85rem}
.comment-form input:focus{outline:none;border-color:var(--primary)}
/* Messages */
.message-card{margin-bottom:.75rem}
.message-header{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-light)}
.message-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#fff;flex-shrink:0}
.message-meta{flex:1;font-size:.85rem}.message-meta strong{font-size:.9rem}
.message-content{padding:.875rem 1.25rem;font-size:.9rem;line-height:1.6}
.message-actions{padding:0 1.25rem .75rem}
.admin-badge{display:inline-block;background:var(--primary);color:#fff;font-size:.68rem;padding:0 6px;border-radius:3px;margin-left:4px;font-weight:600;line-height:1.6}
.replies{background:var(--bg);margin:0 1.25rem .75rem;border-radius:var(--radius-sm);padding:.75rem}
.reply-item{padding:4px 0;font-size:.85rem}.reply-item strong{font-size:.85rem}.reply-item p{margin:2px 0 0;color:var(--text-light)}
.reply-form{padding:0 1.25rem .75rem}.reply-form .form-row{display:flex;gap:.5rem}
.reply-form input{flex:1;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .75rem;font-size:.85rem}
/* Calendar */
.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.25rem}
.calendar-nav h3{font-size:1rem}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:.5rem .75rem .75rem;gap:2px}
.cal-weekday{text-align:center;font-size:.75rem;color:var(--text-muted);font-weight:600;padding:4px 0}
.cal-day{text-align:center;padding:4px 0;border-radius:var(--radius-sm);font-size:.85rem;min-height:44px;position:relative;cursor:default}
.cal-day-empty{visibility:hidden}
.cal-today{background:var(--primary);color:#fff;font-weight:700}
.cal-has-event{font-weight:600}
.cal-day-num{display:block}.cal-events{display:flex;justify-content:center;gap:3px;margin-top:2px}
.cal-event-dot{width:5px;height:5px;border-radius:50%;background:var(--primary)}
/* Forms */
.form-group{margin-bottom:.85rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:4px;color:var(--text-light)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form input[type="text"],.form input[type="password"],.form input[type="number"],.form input[type="date"],.form input[type="file"],.form select,.form textarea{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;background:#fff;transition:var(--transition);color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(224,122,95,.15)}
.form textarea{resize:vertical;min-height:60px;font-family:inherit}
.radio-group{display:flex;gap:1rem;padding-top:6px}
.radio-label{display:flex;align-items:center;gap:4px;font-size:.9rem;cursor:pointer}
.radio-label input[type="radio"]{width:16px;height:16px}
.preview-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.preview-thumb{width:80px;text-align:center}
.preview-thumb img{width:80px;height:80px;object-fit:cover;border-radius:4px}
.preview-thumb span{display:block;font-size:.68rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Filter */
.filter-form{padding:1rem 1.25rem}
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filter-row select,.filter-row input{max-width:160px}
.filter-tabs{display:flex;gap:4px;margin-bottom:.75rem;flex-wrap:wrap}
.filter-tabs .tab,.tab-nav .tab{padding:4px 12px;border-radius:var(--radius-sm);font-size:.82rem;color:var(--text-muted);cursor:pointer;transition:var(--transition);background:var(--border-light)}
.filter-tabs .tab.active,.filter-tabs .tab:hover,.tab-nav .tab.active,.tab-nav .tab:hover{background:var(--primary);color:#fff}
.tab-nav{display:flex;gap:4px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:4px;padding:.5rem 1rem;border:none;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff!important}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 2px 8px rgba(224,122,95,.3)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)!important}
.btn-outline:hover{background:var(--border-light);border-color:var(--text-muted)}
.btn-danger{background:transparent;color:var(--red)!important;border:1px solid transparent}
.btn-danger:hover{background:#fdf0ed;border-color:var(--red)}
.btn-sm{padding:.3rem .65rem;font-size:.8rem}.btn-block{width:100%;justify-content:center}
/* Table */
.table-responsive{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;padding:.6rem .75rem;background:var(--bg);font-weight:600;font-size:.8rem;color:var(--text-muted);border-bottom:1px solid var(--border)}
.table td{padding:.55rem .75rem;border-bottom:1px solid var(--border-light)}
.table tr:hover{background:var(--bg)}
.amount{font-weight:700}.amount-expense{color:var(--red)}.amount-income{color:var(--green)}
.category-badge{font-size:.82rem}.note-cell{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.action-cell{white-space:nowrap}
.table-footer{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0 0;font-size:.85rem;color:var(--text-muted)}
/* Pagination */
.pagination{display:flex;gap:4px;justify-content:center;margin-top:.75rem}
.page-link{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;color:var(--text)!important}
.page-link.active,.page-link:hover{background:var(--primary);color:#fff!important;border-color:var(--primary)}
/* Alerts */
.alert{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.88rem;display:flex;align-items:center;justify-content:space-between}
.alert-error{background:#fdf0ed;color:var(--red);border:1px solid rgba(225,112,85,.2)}
.alert-success{background:#e8f8f5;color:var(--green);border:1px solid rgba(0,184,148,.2)}
.alert-warning{background:#fef9e7;color:#b7950b;border:1px solid rgba(253,203,110,.3)}
.alert-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:inherit;opacity:.6}
.alert-close:hover{opacity:1}
/* File Items */
.file-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border-light)}
.file-item:last-child{border-bottom:none}
.file-icon{font-size:1.5rem;width:40px;text-align:center;flex-shrink:0}
.file-info{flex:1;min-width:0}.file-title{font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:.78rem;color:var(--text-muted)}
.file-actions{flex-shrink:0}
/* Member Card */
.member-card{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border-light)}
.member-card:last-child{border-bottom:none}
.member-avatar-lg{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1rem;flex-shrink:0}
.member-info{flex:1;min-width:0}
.member-name{font-weight:600;font-size:.9rem}.member-username,.member-birthday{font-size:.78rem;color:var(--text-muted)}
.member-actions{display:flex;gap:4px;flex-shrink:0}
/* Empty State */
.empty-state{text-align:center;padding:2rem 1rem;color:var(--text-muted);font-size:.95rem}
.empty-state .btn{margin-top:.75rem}
.badge-inactive{display:inline-block;background:#dfe6e9;color:#636e72;font-size:.68rem;padding:0 6px;border-radius:3px;font-weight:600;line-height:1.6;margin-left:4px}
/* Responsive */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.sidebar-overlay.show{display:block}
    .main-content{margin-left:0;padding:1rem}.menu-toggle{display:inline-block}
    .two-col{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}
    .form-row{grid-template-columns:1fr}.filter-row>*{max-width:100%!important;flex:1 1 100%}
    .photo-grid{grid-template-columns:repeat(2,1fr)}.album-grid{grid-template-columns:repeat(2,1fr)}
    .page-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:1fr}.album-grid{grid-template-columns:1fr}
}