:root{--bg:#f6f7fb;--card:#ffffff;--text:#1f2937;--muted:#6b7280;--primary:#16a34a;--warning:#f59e0b;--danger:#ef4444;--border:#e5e7eb}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji"}a{color:inherit;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:24px}.appbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}.nav{display:flex;gap:16px;align-items:center;padding:12px 24px}.nav .brand{font-weight:700}.nav a{padding:6px 10px;border-radius:8px}.nav a.active{background:#eaf7ee;color:#0e7a34}.grid{display:grid;gap:16px}.col-3{grid-template-columns:1fr 1fr 1fr}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.muted{color:var(--muted)}.stat{font-size:28px;font-weight:700}.row{display:flex;gap:12px;align-items:center}.badge{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600}.badge.green{background:#e7f7ed;color:#0e7a34}.badge.yellow{background:#fff7e6;color:#946200}.badge.red{background:#ffeaea;color:#b91c1c}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}.right{margin-left:auto}.section-title{font-weight:700;margin:0 0 8px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{background:#111827;color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}.btn.secondary{background:#e5e7eb;color:#111827}.btn.success{background:#16a34a}.btn.warn{background:#f59e0b}.btn.danger{background:#ef4444}.btn:disabled{opacity:.5;cursor:not-allowed}.spinner{width:14px;height:14px;border:2px solid #e5e7eb;border-top-color:#16a34a;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--border)}.pill.active{background:#e7f7ed;color:#0e7a34;border-color:#b6e6c3}.auth-page{min-height:70vh;padding:16px;border-radius:16px;background:transparent}.auth-panel{max-width:440px;margin:0 auto}.auth-brand{font-weight:900;letter-spacing:2px;color:#16a34a;text-align:center;font-size:28px}.auth-card{background:#ffffffeb;-webkit-backdrop-filter:saturate(160%) blur(2px);backdrop-filter:saturate(160%) blur(2px);border:1px solid #dfeee2;border-radius:14px;box-shadow:0 8px 24px #10181014;padding:16px}.input{position:relative}.input .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.7}.input input{width:100%;padding:10px 12px 10px 38px;border:1.5px solid #cfe7d3;border-radius:10px;outline:none;background:#fff}.input input:focus{border-color:#16a34a;box-shadow:0 0 0 3px #16a34a1f}.btn.block{width:100%}.btn.primary{background:#16a34a}.btn.light{background:#fff;color:#111827;border:1px solid var(--border)}.btn.social{display:flex;align-items:center;justify-content:center;gap:8px}.btn.google{border-color:#f7d1cf}.btn.facebook{border-color:#cfe0ff}.muted.center{text-align:center}.adopt-page{min-height:70vh;padding:16px;border-radius:16px;background:transparent}.adopt-panel{max-width:520px;margin:0 auto}.adopt-hero{display:grid;gap:8px;justify-items:center;margin-bottom:8px}.adopt-hero .brand{font-weight:900;letter-spacing:2px;color:#16a34a;font-size:28px}.adopt-hero .welcome{font-weight:900;color:#16a34a;font-size:28px}.adopt-hero .subtitle{font-weight:900;color:#16a34a;font-size:24px}.adopt-card{background:#ffffffeb;-webkit-backdrop-filter:saturate(160%) blur(2px);backdrop-filter:saturate(160%) blur(2px);border:1px solid #dfeee2;border-radius:14px;box-shadow:0 8px 24px #10181014;padding:14px}.adopt-list{display:grid;gap:12px}.adopt-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border:2px solid #b7f0c6;border-radius:16px;padding:10px 12px;box-shadow:0 2px #dff6e7}.adopt-item .left{display:flex;align-items:center;gap:12px}.adopt-item .avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e7f7ed;border:2px solid #b6e6c3}.adopt-item .meta{display:grid}.adopt-item .name{font-weight:800}.adopt-item .desc{color:#6b7280;font-size:12px}.adopt-item .arrow{font-size:18px}.adopt-btn{margin-top:12px}.user-home{min-height:70vh;padding:16px 16px 110px;background:transparent}.home-panel{max-width:520px;margin:0 auto}.home-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.home-header .owner{display:flex;align-items:center;gap:10px;font-weight:800}.home-header .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e7f7ed;border:2px solid #b6e6c3}.home-grid{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width:420px){.home-grid{grid-template-columns:1fr 140px}}.status-card{background:#fffffff5;border:3px solid #84c5ff;border-radius:18px;padding:12px}.status-card .title{text-align:center;font-weight:900;margin-bottom:8px}.metric{display:flex;align-items:center;justify-content:space-between;padding:6px 0}.metric .name{font-weight:600}.metric .value{font-weight:700;color:#16a34a}.progress{display:flex;align-items:center;gap:8px}.progress .bar{flex:1;height:8px;background:#e5e7eb;border-radius:999px}.progress .fill{height:100%;background:#16a34a;border-radius:999px}.right-widgets{display:grid;gap:12px}.widget-card{display:grid;gap:6px;align-content:center;justify-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;text-align:center;cursor:pointer;transition:.2s box-shadow,.2s transform}.widget-card:hover{box-shadow:0 6px 16px #0000000f;transform:translateY(-1px)}.widget-card .icon{font-size:24px}.widget-card .label{font-weight:700;color:#4b5563;line-height:1.2}.widget-card.link{color:inherit}.tip-card{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border:1px solid #fde68a;border-radius:16px;padding:12px}.tip-card .icon{font-size:20px}.tip-card .content{display:grid;gap:4px}.tip-card .title{font-weight:800;color:#92400e}.tip-card .text{color:#78350f}.staff-portal .appbar .brand{font-weight:700;color:#16a34a}.progress-section{display:flex;align-items:center;gap:16px}.progress-stats{flex:1}.progress-stats p{margin:4px 0;font-weight:600}.task-list,.inventory-list,.order-list,.notification-list{display:grid;gap:12px}.task-item,.inventory-item,.order-item,.notification-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s ease}.task-item:hover,.inventory-item:hover,.order-item:hover,.notification-item:hover{border-color:#16a34a;box-shadow:0 4px 12px #16a34a1a}.task-item.selected,.inventory-item.selected,.order-item.selected,.notification-item.selected{border-color:#16a34a;background:#f0fdf4}.task-header,.inventory-item .item-header,.order-header,.notification-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.task-id,.item-id,.order-number{font-weight:700;color:#16a34a}.task-title,.item-name,.notification-title{font-weight:600;flex:1;margin:0 12px}.task-badges,.order-badges,.notification-badges{display:flex;gap:8px;align-items:center}.priority,.status{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.priority.high,.status.overdue{background:#fef2f2;color:#dc2626}.priority.medium,.status.in_progress{background:#fffbeb;color:#d97706}.priority.low,.status.completed{background:#f0fdf4;color:#16a34a}.status.pending{background:#f3f4f6;color:#6b7280}.task-details,.item-details,.order-details,.notification-content{font-size:14px;line-height:1.5}.task-details p,.item-details p,.order-details p{margin:4px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:600;color:#374151}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;transition:border-color .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#16a34a;box-shadow:0 0 0 3px #16a34a1a}.form-group textarea{min-height:80px;resize:vertical}.form-actions{display:flex;gap:12px;margin-top:20px}.health-form,.update-form,.transaction-form,.status-form{background:#f9fafb;border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:16px}.health-form h4,.update-form h4,.transaction-form h4,.status-form h4{margin:0 0 16px;color:#374151}.inventory-alerts{display:grid;gap:12px}.alert-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#fff;border:1px solid var(--border);border-radius:8px}.alert-info{flex:1}.item-name{font-weight:600;display:block}.current-stock{font-size:14px;color:var(--muted)}.alert-status{font-weight:600}.quick-notifications{display:grid;gap:12px}.notification-item{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--border);border-radius:8px}.notification-item .icon{font-size:20px}.filter-controls{display:flex;gap:12px;align-items:center}.filter-select{padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:#fff}.notification-item.unread{border-left:4px solid #16a34a;background:#f0fdf4}.notification-item.read{opacity:.8}.unread-badge,.action-badge{font-size:12px}.permission-warning{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;margin-bottom:16px;color:#dc2626}.no-permission{background:#f3f4f6;border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center;color:var(--muted)}.items-table{overflow-x:auto;margin-top:16px}.items-table table{width:100%;border-collapse:collapse}.items-table th,.items-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border)}.items-table th{background:#f9fafb;font-weight:600}.no-notifications{text-align:center;padding:40px 20px;color:var(--muted)}.notification-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}.category{background:#f3f4f6;padding:2px 8px;border-radius:4px}.notification-actions{display:flex;gap:12px;margin-top:20px}.btn.info{background:#3b82f6}.stock-status{font-weight:600}.task-item.pending{border-left:4px solid #6b7280}.task-item.in_progress{border-left:4px solid #f59e0b}.task-item.completed{border-left:4px solid #16a34a}.task-item.overdue{border-left:4px solid #dc2626}.order-item.pending{border-left:4px solid #6b7280}.order-item.confirmed{border-left:4px solid #16a34a}.order-item.in_transit{border-left:4px solid #3b82f6}.order-item.delivered,.order-item.received{border-left:4px solid #059669}.order-item.cancelled{border-left:4px solid #dc2626}.bottom-nav{position:fixed;left:50%;transform:translate(-50%);bottom:8px;width:min(520px,calc(100% - 16px));background:#fff;border:1px solid var(--border);border-radius:20px;padding:8px 10px;display:flex;justify-content:space-around;align-items:center;gap:6px;box-shadow:0 6px 20px #00000014;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:14px;min-width:60px}.bottom-nav .nav-item.active{background:#e7f7ed}.bottom-nav .nav-item .icon{font-size:20px;line-height:1}.bottom-nav .nav-item .muted{font-size:12px;font-weight:700;color:#374151;white-space:nowrap}.qr-card{background:#fffffff5;border:1px solid var(--border);border-radius:16px;padding:14px}.qr-box{border:2px dashed #94a3b8;border-radius:12px;display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(135deg,#f8fafc,#fff)}.qr-actions{display:grid;gap:10px;margin-top:12px}.user-layout{position:relative;min-height:100vh;overflow:hidden}.user-bg-video{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000;pointer-events:none}.user-content{position:relative;z-index:1}