@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#root{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.glow-orb{position:fixed;border-radius:50%;filter:blur(140px);opacity:.06;pointer-events:none;z-index:0}
.tab-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border:none;border-radius:10px;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;color:#6b7280;background:transparent;white-space:nowrap}
.tab-btn:hover{color:#d1d5db;background:rgba(255,255,255,.04)}
.tab-btn.active{color:#f9fafb;background:rgba(255,255,255,.08);box-shadow:0 0 20px rgba(139,92,246,.12),inset 0 0 0 1px rgba(255,255,255,.08)}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;backdrop-filter:blur(16px);transition:all .25s}
.card:hover{border-color:rgba(255,255,255,.09)}
.cal-day{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px 2px;cursor:pointer;transition:all .2s;border:1px solid transparent;font-size:13px;min-height:48px}
.cal-day:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.cal-day.today{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.07)}
.cal-day.selected{border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.12);box-shadow:0 0 14px rgba(139,92,246,.15)}
.cal-day.sunday{background:rgba(139,92,246,.03)}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#8b5cf6);color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;box-shadow:0 4px 14px rgba(124,58,237,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.35)}
.btn-ghost{background:rgba(255,255,255,.05);color:#9ca3af;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 14px;font-size:12.5px;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#e5e7eb}
.btn-danger{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.15);border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-warn{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.15);border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-warn:hover{background:rgba(245,158,11,.2)}
.btn-success{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.15);border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-success:hover{background:rgba(16,185,129,.2)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s}
.modal-content{background:#1e1b2e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px;max-width:520px;width:92%;box-shadow:0 25px 60px rgba(0,0,0,.5);animation:slideUp .3s;max-height:82vh;overflow-y:auto}
.input-field{width:100%;padding:9px 13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#e2e0ed;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .2s}
.input-field:focus{border-color:rgba(139,92,246,.5)}
select.input-field{appearance:none;cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:16px;font-size:11px;font-weight:600;letter-spacing:.2px}
.dot-indicator{width:6px;height:6px;border-radius:50%;display:inline-block}
.notif-panel{position:absolute;top:68px;right:20px;width:400px;max-height:480px;overflow-y:auto;z-index:90;background:#1e1b2e;border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:slideDown .25s}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:11px 22px;border-radius:10px;font-size:13px;font-weight:500;z-index:200;animation:toastIn .3s;box-shadow:0 8px 28px rgba(0,0,0,.3);font-family:inherit}
.toast.success{background:#065f46;color:#a7f3d0;border:1px solid rgba(16,185,129,.3)}
.toast.info{background:#1e3a5f;color:#93c5fd;border:1px solid rgba(59,130,246,.3)}
.phase-pip{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:all .2s;cursor:pointer;border:2px solid transparent}
.phase-pip.done{background:rgba(16,185,129,.2);color:#34d399;border-color:rgba(16,185,129,.3)}
.phase-pip.current{background:rgba(139,92,246,.2);color:#a78bfa;border-color:rgba(139,92,246,.4);box-shadow:0 0 10px rgba(139,92,246,.2)}
.phase-pip.pending{background:rgba(255,255,255,.04);color:#4b5563;border-color:rgba(255,255,255,.06)}
.invite-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px;transition:all .2s}
.invite-card:hover{border-color:rgba(255,255,255,.1)}
.member-card{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.03);display:flex;align-items:center;gap:12px;transition:background .15s;cursor:pointer}
.member-card:hover{background:rgba(255,255,255,.02)}
.activity-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;flex:1}
.activity-fill{height:100%;border-radius:2px;transition:width .3s}
.avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;flex-shrink:0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

/* Identity picker grid */
.identity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.identity-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 10px;cursor:pointer;transition:all .25s;font-family:inherit;display:flex;flex-direction:column;align-items:center}
.identity-card:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}

/* Responsive grids */
.responsive-grid-calendar{display:grid;grid-template-columns:1fr 300px;gap:18px}
.responsive-grid-members{display:grid;grid-template-columns:1fr 340px;gap:18px}

/* Responsive */
@media(max-width:768px){
  .identity-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .identity-card{padding:16px 8px}
  .responsive-grid-calendar{grid-template-columns:1fr}
  .responsive-grid-members{grid-template-columns:1fr}
  .notif-panel{width:calc(100vw - 32px);right:16px}
  .modal-content{width:95%;padding:20px}
}
@media(max-width:480px){
  .identity-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .identity-card{padding:14px 6px}
  .responsive-grid-calendar{grid-template-columns:1fr}
  .responsive-grid-members{grid-template-columns:1fr}
  .tab-btn{padding:8px 10px;font-size:11.5px;gap:5px}
  .modal-content{width:98%;padding:18px;border-radius:14px}
  .notif-panel{width:calc(100vw - 24px);right:12px}
  .member-card{padding:12px 14px;gap:10px}
  .card{border-radius:12px}
}

/* Light theme */
.theme-light{background:#f5f5f7 !important}
.theme-light #root{background:#f5f5f7}
.theme-light .card{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08)}
.theme-light .card:hover{border-color:rgba(0,0,0,.15)}
.theme-light .tab-btn{color:#6b7280}
.theme-light .tab-btn:hover{color:#374151;background:rgba(0,0,0,.04)}
.theme-light .tab-btn.active{color:#1f2937;background:rgba(0,0,0,.06);box-shadow:0 0 15px rgba(124,58,237,.08),inset 0 0 0 1px rgba(0,0,0,.06)}
.theme-light .btn-ghost{background:rgba(0,0,0,.04);color:#4b5563;border-color:rgba(0,0,0,.08)}
.theme-light .btn-ghost:hover{background:rgba(0,0,0,.08);color:#1f2937}
.theme-light .input-field{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#1f2937}
.theme-light .input-field:focus{border-color:rgba(124,58,237,.4)}
.theme-light .modal-content{background:#fff;border-color:rgba(0,0,0,.1)}
.theme-light .notif-panel{background:#fff;border-color:rgba(0,0,0,.1)}
.theme-light .member-card:hover{background:rgba(0,0,0,.02)}
.theme-light .invite-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
.theme-light .identity-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
.theme-light .identity-card:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.2)}
.theme-light .toast.success{background:#dcfce7;color:#166534;border-color:rgba(22,163,74,.2)}
.theme-light .toast.info{background:#dbeafe;color:#1e40af;border-color:rgba(59,130,246,.2)}
.theme-light .glow-orb{opacity:.03}