@import url(https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;700&display=swap);:root{--bg-dark:#23220f;--bg-dark-2:#2d2c16;--bg-dark-3:#38361c;--bg-dark-4:#444220;--primary:#f9f506;--primary-dim:rgba(249,245,6,.15);--primary-hover:rgba(249,245,6,.25);--text-0:#fff;--text-1:rgba(255,255,255,.7);--text-2:rgba(255,255,255,.4);--border:rgba(255,255,255,.1);--border-lit:rgba(255,255,255,.18);--success:#4caf78;--danger:#e05c5c;--warning:#e8b84a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--font:'Spline Sans' , sans-serif;--shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 12px 40px rgba(0,0,0,.6);--transition:200ms cubic-bezier(.4,0,.2,1);--navbar-h:60px;--bottomnav-h:60px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family: var(--font);background:var(--bg-dark);color:var(--text-0);line-height:1.6;min-height:100dvh}h1,h2,h3,h4{font-weight:700;line-height:1.2}h1{font-size:clamp(1.6rem,4vw,2.5rem)}h2{font-size:clamp(1.25rem,3vw,1.75rem)}h3{font-size:1.125rem}h4{font-size:.95rem}p{color:var(--text-1)}a{color:var(--primary);text-decoration:none;transition:opacity var(--transition)}a:hover{opacity:.8}.container{width:100%;max-width:640px;margin:0 auto;padding:0 1rem}.container--wide{max-width:1100px}.navbar{position:sticky;top:0;z-index:100;background:rgba(35,34,15,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:var(--navbar-h)}.navbar__inner{max-width:1100px;margin:0 auto;padding:0 1rem;height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}.navbar__brand{font-size:1.1rem;font-weight:700;color:var(--text-0)}.navbar__brand span{color:var(--primary)}.navbar__actions{display:flex;align-items:center;gap:.5rem}.navbar__avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--primary-dim);border:1px solid rgba(249,245,6,.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--primary);overflow:hidden;flex-shrink:0;cursor:pointer}.navbar__avatar img{width:100%;height:100%;object-fit:cover}.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(35,34,15,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);height:var(--bottomnav-h);display:flex;align-items:center;justify-content:space-around;padding:0 .5rem}.bottomnav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-2);font-size:.65rem;font-weight:500;padding:.4rem .75rem;border-radius:var(--radius-md);transition:all var(--transition);cursor:pointer;text-decoration:none;border:none;background:none;min-width:56px}.bottomnav__item svg{width:22px;height:22px}.bottomnav__item:hover,.bottomnav__item.active{color:var(--primary);background:var(--primary-dim)}.bottomnav__item--add{background:var(--primary);color:#000;border-radius:var(--radius-full);width:44px;height:44px;padding:0;font-size:0}.bottomnav__item--add:hover{background:#fff;color:#000}.app-layout{display:flex;min-height:calc(100dvh - var(--navbar-h))}.sidebar{width:220px;flex-shrink:0;background:var(--bg-dark-2);border-right:1px solid var(--border);padding:1.5rem 1rem;position:sticky;top:var(--navbar-h);height:calc(100dvh - var(--navbar-h));overflow-y:auto}.sidebar__label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);padding:0 .5rem;margin-bottom:.5rem}.sidebar__menu{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:1.5rem}.sidebar__menu a{display:flex;align-items:center;gap:.625rem;color:var(--text-1);font-size:.875rem;padding:.5rem .75rem;border-radius:var(--radius-md);transition:all var(--transition)}.sidebar__menu a:hover{background:var(--bg-dark-3);color:var(--text-0)}.sidebar__menu a.active{background:var(--primary-dim);color:var(--primary);border:1px solid rgba(249,245,6,.2)}.sidebar__menu svg{width:16px;height:16px;flex-shrink:0}.main-content{flex:1;padding:1.5rem;max-width:760px;padding-bottom: calc(var(--bottomnav-h) + 1.5rem)}.card{background:var(--bg-dark-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.25rem}.card--inset{background:var(--bg-dark-3)}.audio-item{padding:1rem 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.75rem}.audio-item:last-child{border-bottom:none}.audio-item__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.audio-item__info{flex:1;min-width:0}.audio-item__name{font-weight:700;font-size:.95rem;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-item__meta{font-size:.8rem;color:var(--text-2);margin-top:2px}.audio-item__desc{font-size:.85rem;color:var(--text-1);margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.audio-item__player{width:100%;height:32px;accent-color:var(--primary);border-radius:var(--radius-full)}.audio-item__actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family: var(--font);font-size:.875rem;font-weight:700;padding:.6rem 1.25rem;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition);white-space:nowrap;text-decoration:none;line-height:1}.btn-primary{background:var(--primary);color:#000}.btn-primary:hover{background:#fff;color:#000}.btn-secondary{background:var(--bg-dark-3);color:var(--text-0);border:1px solid var(--border-lit)}.btn-secondary:hover{background:var(--bg-dark-4);color:var(--text-0)}.btn-ghost{background:transparent;color:var(--text-1);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}.btn-icon{background:var(--bg-dark-3);color:var(--text-1);border:none;width:36px;height:36px;padding:0;border-radius:var(--radius-full)}.btn-icon:hover{background:var(--primary-hover);color:var(--primary)}.btn-icon.active{background:var(--primary-dim);color:var(--primary)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#c94545;color:#fff}.btn-sm{padding:.4rem .875rem;font-size:.8rem}.btn-lg{padding:.875rem 1.75rem;font-size:1rem}.btn-full{width:100%}.btn:disabled{opacity:.4;cursor:not-allowed}.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.125rem}.form-label{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}.form-control{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-0);font-family: var(--font);font-size:.95rem;padding:.7rem 1rem;width:100%;outline:none;transition:border-color var(--transition) , box-shadow var(--transition)}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(249,245,6,.15)}.form-control::placeholder{color:var(--text-2)}.form-control.is-invalid{border-color:var(--danger)}.form-hint{font-size:.75rem;color:var(--text-2)}.form-error{font-size:.75rem;color:var(--danger)}select.form-control{appearance:none;background-image:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ width=\'12\'\ height=\'12\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'rgba\(255,255,255,.4\)\'\ stroke-width=\'2\'%3E%3Cpolyline\ points=\'6\ 9\ 12\ 15\ 18\ 9\'/%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.25rem}select.form-control option{background:var(--bg-dark-2)}.alert{padding:.875rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;font-size:.875rem;display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1.25rem}.alert-danger{background:rgba(224,92,92,.12);border-color:rgba(224,92,92,.3);color:#f08080}.alert-success{background:rgba(76,175,120,.12);border-color:rgba(76,175,120,.3);color:#6dcc96}.alert-warning{background:rgba(232,184,74,.12);border-color:rgba(232,184,74,.3);color:#f0c96a}.badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:var(--radius-full)}.badge-primary{background:var(--primary-dim);color:var(--primary);border:1px solid rgba(249,245,6,.2)}.badge-success{background:rgba(76,175,120,.15);color:var(--success)}.badge-danger{background:rgba(224,92,92,.15);color:var(--danger)}.badge-neutral{background:var(--bg-dark-3);color:var(--text-1);border:1px solid var(--border)}.tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;padding:.25rem .625rem;border-radius:var(--radius-full);background:var(--bg-dark-3);color:var(--text-1);border:1px solid var(--border);cursor:pointer;transition:all var(--transition);text-decoration:none}.tag:hover,.tag.active{background:var(--primary-dim);color:var(--primary);border-color:rgba(249,245,6,.2)}.auth-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}.auth-page::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 30%,rgba(249,245,6,.05) 0%,transparent 70%);pointer-events:none}.auth-card{background:var(--bg-dark-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:fadeUp .35s ease both}.auth-logo{font-size:1.4rem;font-weight:700;display:block;margin-bottom:2rem;color:var(--text-0)}.auth-logo span{color:var(--primary)}.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border)}table{width:100%;border-collapse:collapse;font-size:.875rem}thead th{background:var(--bg-dark-3);color:var(--text-2);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition)}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--bg-dark-3)}tbody td{padding:.875rem 1rem;color:var(--text-0);vertical-align:middle}.search-bar{position:relative}.search-bar svg{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--text-2);width:18px;height:18px;pointer-events:none}.search-bar input{padding-left:2.75rem;border-radius:var(--radius-full)}.filter-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}.filter-tabs::-webkit-scrollbar{display:none}.empty-state{text-align:center;padding:3rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.empty-state__icon{width:64px;height:64px;border-radius:var(--radius-full);background:var(--bg-dark-3);display:flex;align-items:center;justify-content:center;font-size:1.75rem}.empty-state h3{color:var(--text-0)}.empty-state p{color:var(--text-2);font-size:.875rem;max-width:260px}.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:300;align-items:center;justify-content:center;padding:1rem}.modal-overlay.open{display:flex}.modal{background:var(--bg-dark-2);border:1px solid var(--border-lit);border-radius:var(--radius-xl);padding:1.5rem;width:100%;max-width:440px;animation:fadeUp .3s ease both}.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.modal__close{background:none;border:none;cursor:pointer;color:var(--text-2);line-height:0;padding:.25rem;border-radius:var(--radius-sm);transition:color var(--transition)}.modal__close:hover{color:var(--text-0)}.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2rem}.pagination a,.pagination span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;border:1px solid var(--border);color:var(--text-1);transition:all var(--transition)}.pagination a:hover{border-color:var(--primary);color:var(--primary)}.pagination .current{background:var(--primary);color:#000;border-color:var(--primary);font-weight:700}.spinner{width:18px;height:18px;border:2px solid var(--border-lit);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.page-header{margin-bottom:1.5rem}.page-header__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:.25rem}.divider{display:flex;align-items:center;gap:.75rem;color:var(--text-2);font-size:.75rem;margin:1.25rem 0}.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }@keyframes spin { to { transform: rotate(360deg); } }.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-2)}.text-primary{color:var(--primary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-right{text-align:right}.text-center{text-align:center}.w-full{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.min-w-0{min-width:0}@media (min-width:768px){.bottomnav{display:none}.main-content{padding-bottom:1.5rem}}@media (max-width:767px){.sidebar{display:none}.main-content{padding:1rem;max-width:100%}}