@import "https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;700;900&family=Plus+Jakarta+Sans:wght@300;600;800&display=swap";
:root{--primary:#007aff;--secondary:#2dd4bf;--accent:#f43f5e;--bg-main:#f6f8fb;--bg-liquid:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);--glass-bg:#ffffffc7;--glass-bg-hover:#fffffff2;--glass-border:#0f172a14;--glass-border-dark:#0000000a;--text-main:#1a1c2d;--text-dim:#64748b;--font-main:"Plus Jakarta Sans", sans-serif;--font-heading:"Outfit", sans-serif;--shadow-soft:0 10px 30px -10px #0000000d;--shadow-float:0 20px 40px -15px #00000014}[data-theme=dark]{--bg-main:#020617;--bg-liquid:linear-gradient(135deg, #020617 0%, #0f172a 100%);--glass-bg:#0f172acc;--glass-bg-hover:#1e293bf2;--glass-border:#ffffff14;--glass-border-dark:#ffffff1f;--text-main:#f8fafc;--text-dim:#94a3b8;--shadow-soft:0 10px 30px -10px #00000080;--primary:#3b82f6}[data-theme=dark] .glass-card{background:var(--glass-bg);border-color:var(--glass-border-dark);box-shadow:0 8px 32px #0006}[data-theme=dark] .glass-card h2,[data-theme=dark] .glass-card h3,[data-theme=dark] .glass-card p{color:var(--text-main)}[data-theme=dark] input{border-color:var(--glass-border-dark);color:#fff;background:#0f172acc}[data-theme=dark] .navbar{border-color:var(--glass-border-dark);background:#0f172ae6}[data-theme=dark] .record-btn-large{border-color:#020617}[data-theme=dark] .home-action-card{background:linear-gradient(135deg,#007aff33,#007aff0d)!important;border:1px solid #007aff4d!important}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-main);height:100%;margin:0;padding:0}html,body{overscroll-behavior:none}body{font-family:var(--font-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:auto}.app-container{background:var(--bg-liquid);max-width:480px;margin:0 auto;position:fixed;inset:0;overflow:hidden}.app-container:before{content:"";z-index:0;pointer-events:none;background-color:#0000;background-image:linear-gradient(#0f172a06 1px,#0000 1px),linear-gradient(90deg,#0f172a06 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:32px 32px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000000b3,#0000 60%);mask-image:linear-gradient(#000000b3,#0000 60%)}h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:-.03em}.page-title{color:var(--text-main);font-size:3rem;font-weight:900;line-height:1.1}.page-subtitle{text-transform:uppercase;color:var(--primary);letter-spacing:.1em;opacity:.8;font-size:.8rem;font-weight:600}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px)saturate(180%);border:1.5px solid #0000000f;border-radius:14px;padding:1.25rem;transition:all .3s cubic-bezier(.19,1,.22,1);box-shadow:0 4px 16px -6px #0000000f}@media (hover:hover) and (pointer:fine){.glass-card:hover{background:var(--glass-bg-hover);border-color:var(--primary);transform:translateY(-4px);box-shadow:0 20px 40px -12px #0000001f}}.btn-primary{background:var(--primary);color:#fff;font-weight:800;font-family:var(--font-heading);cursor:pointer;border:none;border-radius:16px;padding:1rem 2rem;transition:all .3s;box-shadow:0 6px 20px #007aff33}@media (hover:hover) and (pointer:fine){.btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 28px -5px #007aff66}}.btn-primary:active{transform:scale(.97)}.btn-back{cursor:pointer;color:var(--text-main);background:#fff;border:none;border-radius:14px;justify-content:center;align-items:center;padding:.6rem;transition:all .3s;display:flex;box-shadow:0 4px 12px #0000000d}.btn-back:hover{background:var(--bg-main);transform:translate(-2px)}[data-theme=dark] .btn-back{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:0 4px 12px #0000004d}.navbar{bottom:calc(24px + env(safe-area-inset-bottom,0px));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);z-index:100;background:#ffffffb3;border-radius:38px;justify-content:space-around;align-items:center;height:76px;display:flex;position:fixed;left:32px;right:32px;box-shadow:0 15px 35px #0000000f}.nav-item{color:var(--text-dim);flex-direction:column;align-items:center;gap:4px;font-size:.7rem;font-weight:700;text-decoration:none;transition:all .3s;display:flex}.nav-item.active{color:var(--primary);transform:scale(1.1)}.record-btn-large{background:linear-gradient(135deg, var(--primary), #00c4cc);color:#fff;border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin-top:-60px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 10px 25px #007aff4d}.record-btn-large:hover{transform:scale(1.1)translateY(-5px)rotate(5deg)}.content{padding:3rem 1.5rem;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));z-index:1;position:relative}.section-label{font-family:var(--font-heading);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.25rem;font-size:.8rem;font-weight:800;display:block}.gradient-text{background:linear-gradient(to right, var(--primary), #00c4cc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}input{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--text-main);font-family:var(--font-main);background:#ffffffb3;border:1.5px solid #0000000f;border-radius:14px;padding:1rem;font-weight:600;transition:all .2s}input:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 3px #007aff14}.badge{color:var(--primary);background:#007aff14;border-radius:12px;padding:6px 14px;font-size:.75rem;font-weight:800}.recording-status-bar{top:calc(env(safe-area-inset-top,16px) + 8px);background:var(--accent);color:#fff;z-index:1000;border-radius:20px;align-items:center;gap:10px;padding:8px 20px;font-size:.85rem;font-weight:700;text-decoration:none;animation:.5s slideDown;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #f43f5e66}.pulse-dot{background:#fff;border-radius:50%;width:8px;height:8px;animation:1s infinite alternate pulse}@keyframes pulse{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%)}}.record-btn-large.is-recording{animation:1.5s infinite borderPulse;background:var(--accent)!important}@keyframes borderPulse{0%{box-shadow:0 0 #f43f5e66}70%{box-shadow:0 0 0 15px #f43f5e00}to{box-shadow:0 0 #f43f5e00}}.layout-with-sidebar{background:var(--bg-main);width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.sidebar{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);z-index:101;flex-direction:column;width:280px;padding:2.5rem 1.5rem;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-logo{font-family:var(--font-heading);color:var(--primary);align-items:center;gap:12px;margin-bottom:3.5rem;font-size:1.5rem;font-weight:900;text-decoration:none;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:.75rem;display:flex}.sidebar-item{color:var(--text-dim);border-radius:18px;align-items:center;gap:12px;padding:1rem 1.25rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.19,1,.22,1);display:flex}.sidebar-item:hover{color:var(--primary);background:#007aff0d;transform:translate(4px)}.sidebar-item.active{background:var(--primary);color:#fff;box-shadow:0 10px 25px #007aff33}.main-content{background:var(--bg-liquid);flex:1;min-height:100vh;margin-left:280px;padding:3rem 4rem}@media (max-width:768px){.sidebar{display:none}.layout-with-sidebar{background:var(--bg-main);flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.main-content{min-height:0;padding:1.5rem;padding-top:calc(env(safe-area-inset-top,0px) + 1rem);padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:var(--bg-liquid);flex:1;margin-left:0;overflow-y:auto}.app-container--no-mobile-nav .main-content{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.5rem)}}@media (min-width:769px){:root{--sidebar-width:280px;--desktop-header-height:78px}.app-container{height:100vh;overflow:hidden;background:var(--bg-liquid)!important;max-width:100%!important}.app-container--web{color:#0f172a}.layout-with-sidebar{background:0 0;height:100vh}.sidebar{width:var(--sidebar-width);-webkit-backdrop-filter:none;background:#ffffffe6;border-right:1px solid #0f172a14;padding:1.75rem 1.1rem;box-shadow:18px 0 45px #0f172a0b}.sidebar-logo{letter-spacing:0;color:#0f172a;margin-bottom:2.25rem;padding-left:.5rem;font-size:1.22rem}.sidebar-item{color:#475569;border:1px solid #0000;border-radius:10px;margin-bottom:.15rem;padding:.78rem .9rem;font-size:.88rem}.sidebar-item:hover{color:var(--primary);background:#f8fafc;border-color:#0f172a0f;transform:none}.sidebar-item.active{color:var(--primary);box-shadow:inset 3px 0 0 var(--primary);background:#eef6ff;border-color:#007aff29}.sidebar-item svg{width:18px;height:18px}.main-content{margin-left:var(--sidebar-width);background:0 0;max-width:none;height:100vh;padding:0 3rem 3rem;overflow-y:auto}.navbar{display:none!important}.desktop-top-bar{z-index:20;height:var(--desktop-header-height);-webkit-backdrop-filter:blur(18px);background:#f6f8fbdb;border-bottom:1px solid #0f172a0f;justify-content:space-between;align-items:center;margin-bottom:1.6rem;padding:.95rem 0 .8rem;display:flex;position:sticky;top:0}.search-container-desktop{background:#fff;border:1px solid #0f172a14;border-radius:10px;align-items:center;width:min(460px,42vw);padding:.45rem .9rem;display:flex;box-shadow:0 10px 30px #0f172a09}.search-container-desktop input{background:0 0;border:none;flex:1;padding:.5rem;font-size:.85rem}.search-container-desktop input:focus{box-shadow:none}.account-menu{align-items:center;display:flex;position:relative}.account-menu-trigger{color:var(--text-main);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:.7rem;padding:.35rem .45rem .35rem .75rem;transition:background .18s,border-color .18s,box-shadow .18s;display:flex}.account-menu-trigger:hover,.account-menu-trigger:focus-visible{background:#fff;border-color:#0f172a14;outline:none;box-shadow:0 10px 30px #0f172a0f}.account-menu-copy{flex-direction:column;align-items:flex-end;min-width:0;line-height:1.2;display:flex}.account-menu-name{text-overflow:ellipsis;white-space:nowrap;max-width:180px;color:var(--text-main);font-size:.85rem;font-weight:700;overflow:hidden}.account-menu-role{color:var(--text-dim);font-size:.7rem}.account-menu-avatar{width:40px;height:40px;color:var(--primary);background:#007aff14;border-radius:50%;justify-content:center;align-items:center;display:flex}.account-menu-chevron{color:var(--text-dim);transition:transform .18s}.account-menu-chevron.is-open{transform:rotate(180deg)}.account-menu-panel{opacity:0;pointer-events:none;z-index:60;background:#fff;border:1px solid #0f172a14;border-radius:12px;width:210px;padding:.45rem;transition:opacity .16s,transform .16s;position:absolute;top:calc(100% + .55rem);right:0;transform:translateY(-6px);box-shadow:0 20px 45px #0f172a24}.account-menu-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.account-menu-action{width:100%;color:var(--text-main);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:.65rem;padding:.72rem .75rem;font-size:.88rem;font-weight:650;transition:background .16s,color .16s;display:flex}.account-menu-action:hover,.account-menu-action:focus-visible{color:var(--primary);background:#f6f8fb;outline:none}.account-menu-action--danger{color:#dc2626}.account-menu-action--danger:hover,.account-menu-action--danger:focus-visible{color:#b91c1c;background:#fef2f2}.glass-card{background:#fff;border:1px solid #0f172a13;border-radius:14px;box-shadow:0 14px 38px #0f172a0b}.glass-card:hover{border-color:#007aff38;transform:translateY(-1px);box-shadow:0 18px 45px #0f172a12}.app-container--web .main-content>div:not(.desktop-top-bar){max-width:1180px}}