@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap";:root{--font-primary:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-handwriting:"Caveat", cursive, sans-serif;--bg-app:#f8fafc;--bg-card:#fff;--text-main:#0f172a;--text-muted:#64748b;--text-light:#94a3b8;--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-danger:#ef4444;--color-danger-hover:#dc2626;--postit-yellow-bg:#fef9c3;--postit-yellow-border:#fde047;--postit-yellow-text:#713f12;--postit-pink-bg:#fce7f3;--postit-pink-border:#fbcfe8;--postit-pink-text:#831843;--postit-blue-bg:#e0f2fe;--postit-blue-border:#bae6fd;--postit-blue-text:#0c4a6e;--postit-green-bg:#dcfce7;--postit-green-border:#bbf7d0;--postit-green-text:#14532d;--postit-orange-bg:#ffedd5;--postit-orange-border:#fed7aa;--postit-orange-text:#7c2d12;--shadow-sm:0 2px 4px #0000000a;--shadow-md:0 6px 12px -2px #00000014, 0 3px 6px -3px #0000000d;--shadow-postit:2px 6px 16px #00000014, 0 2px 4px #0000000a;--shadow-postit-hover:8px 16px 24px #0000001f, 0 4px 8px #0000000f;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}.app-container{max-width:1280px;margin:0 auto;padding:1.5rem 1rem 4rem}.app-header{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);background:#ffffffd9;border:1px solid #fff9;flex-direction:column;gap:1.25rem;margin-bottom:2rem;padding:1.25rem 1.75rem;display:flex;box-shadow:0 10px 30px -10px #0000000d}@media (width>=768px){.app-header{flex-direction:row;justify-content:space-between;align-items:center}}.header-brand{align-items:center;gap:.75rem;display:flex}.brand-icon{border-radius:var(--radius-md);background:linear-gradient(135deg,#fef08a 0%,#fb923c 100%);justify-content:center;align-items:center;width:42px;height:42px;display:flex;transform:rotate(-3deg);box-shadow:0 4px 12px #fb923c40}.brand-title{color:var(--text-main);letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.brand-subtitle{color:var(--text-muted);font-size:.85rem}.header-actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.search-box{flex:1;min-width:200px;position:relative}.search-input{border-radius:var(--radius-md);width:100%;color:var(--text-main);transition:var(--transition-normal);background:#fff;border:1.5px solid #e2e8f0;outline:none;padding:.75rem 1rem .75rem 2.6rem;font-family:inherit;font-size:.95rem}.search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f126}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:.85rem;transform:translateY(-50%)}.clear-search-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.2rem;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.sort-select{border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;font-weight:500}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--color-primary) 0%, #4f46e5 100%);color:#fff;box-shadow:0 4px 14px #6366f159}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px #6366f173}.btn-secondary{color:var(--text-main);background:#f1f5f9}.btn-secondary:hover{background:#e2e8f0}.btn-danger{background:var(--color-danger);color:#fff;box-shadow:0 4px 12px #ef44444d}.btn-danger:hover{background:var(--color-danger-hover)}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.75rem;padding:.5rem 0;display:grid}.postit-card{min-height:270px;box-shadow:var(--shadow-postit);cursor:pointer;border-radius:4px 4px 16px;flex-direction:column;justify-content:space-between;padding:1.5rem 1.25rem 1rem;transition:transform .25s,box-shadow .25s;display:flex;position:relative;overflow:hidden}.postit-card:hover{box-shadow:var(--shadow-postit-hover);z-index:10;transform:translateY(-8px)scale(1.02)rotate(0)!important}.postit-tape{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#ffffff73;border-left:1px dashed #00000014;border-right:1px dashed #00000014;width:90px;height:26px;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.postit-yellow{background:var(--postit-yellow-bg);color:var(--postit-yellow-text);border-top:3px solid var(--postit-yellow-border)}.postit-pink{background:var(--postit-pink-bg);color:var(--postit-pink-text);border-top:3px solid var(--postit-pink-border)}.postit-blue{background:var(--postit-blue-bg);color:var(--postit-blue-text);border-top:3px solid var(--postit-blue-border)}.postit-green{background:var(--postit-green-bg);color:var(--postit-green-text);border-top:3px solid var(--postit-green-border)}.postit-orange{background:var(--postit-orange-bg);color:var(--postit-orange-text);border-top:3px solid var(--postit-orange-border)}.postit-header{justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.75rem;display:flex}.postit-title{word-break:break-word;font-size:1.15rem;font-weight:700;line-height:1.3}.postit-actions{align-items:center;gap:.25rem;display:flex}.action-btn{cursor:pointer;width:28px;height:28px;color:inherit;transition:var(--transition-fast);background:#fff6;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.action-btn:hover{background:#ffffffd9;transform:scale(1.1)}.action-btn-delete:hover{color:var(--color-danger);background:#ef444433}.postit-content{white-space:pre-wrap;word-break:break-word;flex-grow:1;max-height:180px;margin-bottom:1rem;font-size:.95rem;line-height:1.5;overflow-y:auto}.postit-footer{opacity:.75;border-top:1px dashed #0000001a;flex-direction:column;gap:.15rem;margin-top:auto;padding-top:.5rem;font-size:.75rem;display:flex}.postit-date{align-items:center;gap:.35rem;display:flex}.empty-state{text-align:center;border-radius:var(--radius-lg);background:#fff;border:2px dashed #cbd5e1;flex-direction:column;justify-content:center;align-items:center;margin-top:1rem;padding:4rem 2rem;display:flex}.empty-icon{color:#b45309;background:#fef08a;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:1.25rem;display:flex;transform:rotate(-5deg);box-shadow:0 8px 20px #fef08a80}.empty-title{color:var(--text-main);margin-bottom:.5rem;font-size:1.4rem;font-weight:700}.empty-desc{color:var(--text-muted);max-width:400px;margin-bottom:1.5rem;font-size:.95rem}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:1000;background:#0f172a66;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-container{border-radius:var(--radius-lg);background:#fff;width:100%;max-width:520px;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.modal-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title{font-size:1.2rem;font-weight:700}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.4rem;display:flex}.modal-body{flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{color:var(--text-main);font-size:.85rem;font-weight:600}.form-input,.form-textarea{border-radius:var(--radius-md);width:100%;color:var(--text-main);background:#fff;border:1.5px solid #cbd5e1;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:.95rem}.form-input:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f126}.form-input.has-error{border-color:var(--color-danger)}.form-error{color:var(--color-danger);font-size:.8rem;font-weight:500}.form-textarea{resize:vertical;min-height:120px}.color-picker{flex-wrap:wrap;gap:.75rem;display:flex}.color-option{cursor:pointer;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.color-option.selected{border-color:var(--text-main);transform:scale(1.1);box-shadow:0 0 0 2px #0000001a}.color-option-yellow{background-color:#fef08a;border-color:#fde047}.color-option-pink{background-color:#fbcfe8;border-color:#f472b6}.color-option-blue{background-color:#bae6fd;border-color:#38bdf8}.color-option-green{background-color:#bbf7d0;border-color:#4ade80}.color-option-orange{background-color:#fed7aa;border-color:#fb923c}.modal-footer{background:#f8fafc;border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem 1.25rem;display:flex}.toast-container{z-index:1100;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:2rem;right:2rem}.toast{color:#fff;border-radius:var(--radius-md);background:#1e293b;align-items:center;gap:.6rem;padding:.85rem 1.25rem;font-size:.9rem;font-weight:500;display:flex;box-shadow:0 10px 25px -5px #00000040}.toast-success{border-left:4px solid #10b981}.toast-danger{border-left:4px solid #ef4444}.toast-info{border-left:4px solid #3b82f6}.auth-page{background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 100%);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-card{border-radius:var(--radius-lg);background:#fff;border:1px solid #fffc;width:100%;max-width:420px;padding:2.5rem 2rem;box-shadow:0 20px 40px -15px #0000001a}.auth-brand{text-align:center;margin-bottom:2rem}.auth-title{color:var(--text-main);font-size:1.6rem;font-weight:700}.auth-subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.875rem}.auth-form{flex-direction:column;gap:1.25rem;display:flex}.auth-error{color:#dc2626;border-radius:var(--radius-md);background:#fef2f2;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.auth-footer{text-align:center;color:var(--text-muted);margin-top:1.5rem;font-size:.875rem}.auth-footer a{color:var(--color-primary);font-weight:600;text-decoration:none}.auth-footer a:hover{text-decoration:underline}.admin-layout{background:#f1f5f9;min-height:100vh;display:flex}.admin-sidebar{color:#f8fafc;z-index:100;background:#0f172a;flex-direction:column;width:260px;display:flex;position:fixed;top:0;bottom:0;left:0}.admin-sidebar-header{border-bottom:1px solid #1e293b;padding:1.5rem 1.25rem}.admin-logo{color:#fff;align-items:center;gap:.75rem;font-size:1.2rem;font-weight:700;display:flex}.admin-nav{flex-direction:column;flex-grow:1;gap:.35rem;padding:1.25rem .75rem;display:flex}.admin-nav-item{border-radius:var(--radius-md);color:#94a3b8;cursor:pointer;text-align:left;width:100%;transition:var(--transition-fast);background:0 0;border:none;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;display:flex}.admin-nav-item:hover{color:#fff;background:#1e293b}.admin-nav-item.active{background:var(--color-primary);color:#fff;font-weight:600}.admin-sidebar-footer{border-top:1px solid #1e293b;flex-direction:column;gap:.35rem;padding:1rem .75rem;display:flex}.logout-btn:hover{color:#f87171;background:#ef44441a}.admin-main{flex-grow:1;margin-left:260px;padding:2rem}@media (width<=768px){.admin-layout{flex-direction:column}.admin-sidebar{width:100%;position:relative}.admin-main{margin-left:0;padding:1rem}}.admin-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.admin-page-title{letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.admin-page-subtitle{color:var(--text-muted);font-size:.9rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:1.5rem;display:grid}.stat-card{border-radius:var(--radius-md);background:#fff;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 4px 12px #00000008}.stat-card-top{justify-content:space-between;align-items:flex-start;display:flex}.stat-card-title{color:var(--text-muted);font-size:.85rem;font-weight:600}.stat-card-value{color:var(--text-main);margin-top:.25rem;font-size:1.8rem;font-weight:700}.stat-card-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-card-bottom{color:var(--text-muted);margin-top:.75rem;font-size:.8rem}.admin-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.admin-table-container{border-radius:var(--radius-md);background:#fff;border:1px solid #e2e8f0;padding:1.25rem;overflow-x:auto;box-shadow:0 4px 12px #00000008}.admin-table{border-collapse:collapse;text-align:left;width:100%;font-size:.9rem}.admin-table th{color:var(--text-muted);background:#f8fafc;border-bottom:1.5px solid #e2e8f0;padding:.75rem 1rem;font-weight:600}.admin-table td{color:var(--text-main);border-bottom:1px solid #f1f5f9;padding:.85rem 1rem}.admin-table tr:hover td{background:#f8fafc}.badge{color:#475569;background:#e2e8f0;border-radius:9999px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-block}.badge-active{color:#15803d;background:#dcfce7}.badge-suspended{color:#b91c1c;background:#fee2e2}.badge-admin{color:#4338ca;background:#e0e7ff}.chart-container{border-radius:var(--radius-md);background:#fff;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 4px 12px #00000008}.chart-title{margin-bottom:1rem;font-size:1rem;font-weight:700}.chart-bar-grid{justify-content:space-between;align-items:flex-end;gap:.5rem;height:180px;padding-top:1.5rem;display:flex}.chart-bar-col{flex-direction:column;flex:1;align-items:center;height:100%;display:flex}.chart-bar-value{margin-bottom:.25rem;font-size:.75rem;font-weight:600}.chart-bar-track{background:#f1f5f9;border-radius:4px;flex-grow:1;align-items:flex-end;width:100%;max-width:32px;display:flex}.chart-bar-fill{border-radius:4px;width:100%;transition:height .3s}.chart-bar-label{color:var(--text-muted);white-space:nowrap;margin-top:.5rem;font-size:.75rem}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}