:root{--color-bg: #0a0f1e;--color-bg-alt: #10162a;--color-surface: rgba(21, 30, 54, .75);--color-surface-strong: rgba(18, 23, 40, .95);--color-card: rgba(26, 35, 61, .6);--color-border: rgba(255, 255, 255, .06);--color-text-primary: #f5f7ff;--color-text-secondary: rgba(255, 255, 255, .65);--color-text-tertiary: rgba(255, 255, 255, .4);--color-accent: #7a7dff;--color-accent-strong: #56b2ff;--color-pill: linear-gradient(135deg, #8b5cff, #56d0ff);--color-warning: #ffb357;--color-success: #57e5a2;--shadow-lg: 0 20px 40px rgba(0, 0, 0, .35);--shadow-md: 0 12px 24px rgba(0, 0, 0, .25);--radius-xl: 26px;--radius-lg: 22px;--radius-md: 18px;--radius-sm: 14px;--transition: .2s ease;--layout-horizontal-padding: 22px;--bottom-nav-height: 88px;--bottom-nav-offset: 0px;--player-bar-height: 44px;font-family:Inter,PingFang SC,HarmonyOS Sans,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;color:var(--color-text-primary);background:radial-gradient(circle at 0% -10%,rgba(122,125,255,.35),transparent 60%),radial-gradient(circle at 100% 0%,rgba(86,210,255,.32),transparent 55%),var(--color-bg);background-attachment:fixed}body{display:flex;justify-content:center;margin:0;padding:24px 16px;min-height:100vh;overflow:hidden}.admin-container{width:100vw;height:100vh;background:#fafafa}.app-shell{width:100%;max-width:420px;height:min(860px,calc(100vh - 48px));min-height:min(860px,calc(100vh - 48px));display:flex;flex-direction:column;justify-content:flex-start;background:#04081466;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}@media (min-width: 768px){.app-shell{max-width:600px;height:calc(100vh - 48px);min-height:calc(100vh - 48px)}}@media (min-width: 1024px){.app-shell{max-width:800px}}@media (min-width: 1440px){.app-shell{max-width:1000px}}.app-screen{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 0 calc(var(--player-bar-height) + var(--bottom-nav-height) + var(--bottom-nav-offset) + 32px);scrollbar-gutter:stable both-edges}.app-screen::-webkit-scrollbar{width:4px}.screen-inner{padding:0 var(--layout-horizontal-padding)}.app-screen::-webkit-scrollbar-thumb{background:#fff3;border-radius:999px}.app-footer{position:absolute;left:0;right:0;bottom:var(--bottom-nav-offset);box-sizing:border-box;display:flex;justify-content:center;z-index:1}.media-controller{border-radius:var(--radius-lg);width:100%;box-sizing:border-box;min-height:var(--player-bar-height)}.player-overlay{position:absolute;left:var(--layout-horizontal-padding);right:var(--layout-horizontal-padding);bottom:calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 5px);z-index:2;display:flex;justify-content:center;pointer-events:none}.player-overlay .media-controller{pointer-events:auto}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:#0a0e1beb;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);width:100%;box-sizing:border-box;min-height:var(--bottom-nav-height);position:relative}.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border:none;border-radius:14px;color:var(--color-text-tertiary);background:transparent;font-size:13px;font-weight:500;cursor:pointer;transition:transform var(--transition),background var(--transition),color var(--transition);outline:none;-webkit-tap-highlight-color:transparent}.nav-item .nav-icon{font-size:18px}.nav-item.is-active{background:var(--color-pill);color:var(--color-text-primary);box-shadow:0 8px 16px #768cff59}.nav-item:is(:hover,:focus-visible){transform:translateY(-2px);outline:none}.nav-item:active{background:#ffffff1f;transform:none}.nav-item:focus-visible{box-shadow:0 0 0 2px #ffffff59}.screen-header{display:flex;flex-direction:column;gap:18px;margin-bottom:28px}.search-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:999px;background:#12182ee6;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 1px #ffffff14}.search-bar input{flex:1;border:none;font-size:14px;color:var(--color-text-secondary);background:transparent}.search-bar input::placeholder{color:var(--color-text-tertiary)}.section{display:flex;flex-direction:column;gap:18px;margin-bottom:32px}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}.section-title:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--color-success);box-shadow:0 0 12px #57e5a299}.section-link{font-size:14px;color:var(--color-accent-strong);text-decoration:none}.playlist-row{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.playlist-row::-webkit-scrollbar{display:none}.playlist-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,#334582d9,#2a224abf);border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-md);min-height:160px;min-width:180px;flex-shrink:0;transition:transform var(--transition),box-shadow var(--transition)}.playlist-card[data-cover-type=gradient]{background:linear-gradient(140deg,#2d6df6b3,#7a26ffa6)}.playlist-card[data-cover-type=image]{background-size:cover;background-position:center}.playlist-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#0a0a14b3)}.playlist-card strong,.playlist-card span{position:relative;z-index:1}.playlist-card strong{font-size:16px}.playlist-card span{font-size:13px;color:var(--color-text-secondary)}.carousel-indicator{position:relative;width:100%;height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden}.carousel-progress{height:100%;border-radius:999px;background:linear-gradient(90deg,#7a7dffcc,#57e5a2cc)}.recommendation-list{display:flex;flex-direction:column;gap:18px}.recommendation-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;padding:18px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow-md);transition:transform var(--transition),box-shadow var(--transition)}.recommendation-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px #07102866}.cover-thumbnail{width:64px;height:64px;border-radius:18px;object-fit:cover}.track-meta{display:flex;flex-direction:column;gap:6px}.track-title{font-size:15px;font-weight:600}.track-subtitle{font-size:13px;color:var(--color-text-secondary)}.track-actions{display:flex;align-items:center;gap:12px}.icon-button{width:40px;height:40px;border-radius:50%;border:none;display:grid;place-items:center;background:#ffffff14;color:var(--color-text-primary);cursor:pointer;transition:transform var(--transition),background var(--transition);outline:none;-webkit-tap-highlight-color:transparent}.icon-button.primary{background:var(--color-pill);box-shadow:0 12px 24px #768cff59}.icon-button:hover:not(:active){transform:translateY(-2px) scale(1.02)}.icon-button:active{transform:translateY(0) scale(1)!important}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff59}.back-button img{width:20px;height:20px;filter:brightness(0) invert(1);opacity:.9}.media-controller{background:linear-gradient(135deg,#5e87ff52,#7a2eff47);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-md);padding:20px 16px;box-sizing:border-box;min-width:400px}.text-button{background:none;border:none;color:var(--color-text-secondary);font-size:14px;cursor:pointer;padding:0;transition:color var(--transition)}.text-button:hover{color:var(--color-text-primary)}.playlists-grid-screen{display:flex;flex-direction:column;gap:20px;padding-bottom:120px}.playlists-grid__header{display:flex;align-items:center;justify-content:space-between}.playlists-grid__header h1{font-size:20px}.playlists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.playlists-grid .playlist-card{min-height:160px}.player-context{display:flex;justify-content:space-between;align-items:center;gap:12px;height:100%;flex-wrap:nowrap}.player-meta{display:flex;align-items:center;gap:12px;flex:1;min-width:120px;max-width:calc(100% - 160px);overflow:hidden}.player-artwork{width:44px;height:44px;border-radius:50%;background:#ffffff1f;background-size:cover;background-position:center;box-shadow:0 8px 16px #768cff59;flex-shrink:0}.player-artwork:not(.has-artwork){display:grid;place-items:center;font-size:16px;color:var(--color-text-secondary)}.player-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:60px;overflow:hidden}.player-text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-text span{font-size:12px;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-controller .control-buttons{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:nowrap}.play-button-container{position:relative;display:inline-block}.play-button-with-progress{position:relative;z-index:2}.progress-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;z-index:1;pointer-events:none;transition:transform var(--transition)}.progress-circle-fill{transition:stroke-dashoffset .3s ease,stroke-width .2s ease}.play-button-container:hover .progress-circle{transform:translate(-50%,-50%) translateY(-2px) scale(1.02)}.play-button-container:hover .progress-circle-fill{stroke-width:3}.section-title[data-theme=videos]:before{background:var(--color-accent);box-shadow:0 0 12px #7a7dffb3}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}.video-card{background:var(--color-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-md);display:flex;flex-direction:column}.video-thumbnail{width:100%;aspect-ratio:4 / 5;object-fit:cover}.video-title{padding:16px;font-size:14px}.segment-tabs{display:flex;gap:12px;padding-bottom:6px;overflow-x:auto}.segment-button{padding:10px 18px;border-radius:999px;border:1px solid transparent;font-size:13px;color:var(--color-text-secondary);background:#ffffff0a;cursor:pointer;transition:all var(--transition);white-space:nowrap}.segment-button.is-active{background:var(--color-pill);color:var(--color-text-primary);box-shadow:0 10px 20px #768cff66}.segment-tabs::-webkit-scrollbar{display:none}.story-panel{display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:var(--radius-lg);background:var(--color-surface-strong);border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-md);line-height:1.75;font-size:15px}.story-panel h2{margin:0;font-size:24px;background:var(--color-pill);-webkit-background-clip:text;color:transparent}.story-panel strong{color:var(--color-accent-strong)}.feed-card{padding:22px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:16px}.feed-header{display:flex;align-items:center;gap:14px}.avatar{width:48px;height:48px;border-radius:50%;background:var(--color-pill);display:grid;place-items:center;font-weight:700;color:var(--color-text-primary);box-shadow:0 12px 24px #768cff59}.author-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}.badge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:#ffffff24;color:var(--color-text-primary)}.badge.vip{background:linear-gradient(135deg,#ffdf6e,#ff9457);color:#372400}.post-meta{font-size:12px;color:var(--color-text-tertiary)}.post-content{font-size:15px;color:var(--color-text-secondary)}.post-actions{display:flex;gap:18px;color:var(--color-text-tertiary);font-size:13px}.profile-card{display:flex;flex-direction:column;gap:24px;padding:24px 0}.profile-summary{display:flex;gap:18px;align-items:center}.profile-avatar{width:72px;height:72px;border-radius:25px;background:var(--color-pill);display:grid;place-items:center;font-size:26px;box-shadow:0 18px 32px #768cff59}.profile-actions{display:flex;flex-direction:column;gap:14px}.profile-action{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:var(--radius-md);background:#ffffff0a;border:1px solid rgba(255,255,255,.04);transition:transform var(--transition),background var(--transition);color:var(--color-text-primary)}.profile-action:hover{transform:translateY(-3px);background:#ffffff0f}.profile-action.primary{background:var(--color-pill);color:var(--color-text-primary);box-shadow:0 16px 28px #768cff66}.action-leading{display:flex;align-items:center;gap:14px}.action-icon{width:40px;height:40px;border-radius:12px;background:#ffffff14;display:grid;place-items:center;font-size:18px}.action-tag{padding:4px 10px;border-radius:10px;font-size:11px;background:linear-gradient(140deg,#ffb65c,#ff7a56);color:#2d1802;font-weight:600}.action-arrow{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.7}@media (max-width: 520px){body{padding:0}.app-shell{border-radius:0;height:min(860px,100vh)}.app-footer{left:0;right:0;bottom:0}.player-overlay{left:16px;right:16px;bottom:calc(var(--bottom-nav-height) + 5px)}.screen-inner{padding:0 16px}.player-context{flex-direction:row;align-items:center;gap:8px}.media-controller{min-width:320px}.player-meta{min-width:100px;max-width:calc(100% - 130px)}.control-buttons{gap:6px;min-width:120px}.icon-button{width:36px;height:36px}.progress-circle{width:44px;height:44px}}@media (min-width: 768px){.screen-inner{padding:0 32px}.playlist-row{gap:20px}.playlist-card{min-width:200px}.video-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}.recommendation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}}@media (min-width: 1024px){.screen-inner{padding:0 40px}.playlist-row{gap:24px}.playlist-card{min-width:220px}.video-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}.player-context{flex-direction:row;align-items:center;gap:24px}.recommendation-list{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px}}@media (min-width: 1440px){.screen-inner{padding:0 48px}.playlist-row{gap:28px}.playlist-card{min-width:240px}.video-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}.recommendation-list{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:28px}}.loading-state,.error-state{display:grid;place-items:center;width:100%;min-height:320px;font-size:16px;color:var(--color-text-secondary)}.error-state{color:#ff8c8c}.icon-button.is-active{background:#ff7ab638;color:#ff7ab6}.toggle-group{display:inline-flex;align-self:center;padding:6px;border-radius:999px;background:#162036c7;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 1px #ffffff0f}.toggle-button{border:none;background:transparent;color:var(--color-text-secondary);font-size:14px;font-weight:600;padding:10px 28px;border-radius:999px;cursor:pointer;transition:all var(--transition)}.toggle-button.is-active{background:var(--color-pill);color:var(--color-text-primary);box-shadow:0 12px 24px #768cff66}.floating-action{position:sticky;bottom:130px;margin-left:auto;width:52px;height:52px;border-radius:16px;background:var(--color-pill);border:none;color:var(--color-text-primary);font-size:26px;font-weight:500;box-shadow:0 18px 30px #768cff73;cursor:pointer;transition:transform var(--transition)}.floating-action:hover{transform:translateY(-2px)}.profile-action .action-trailing{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-text-secondary)}.profile-action.primary .action-icon{background:#ffffff24}.profile-action.primary .action-trailing{color:var(--color-text-primary)}.profile-name{margin:0;font-size:20px;color:var(--color-text-primary)}.profile-tip{margin:6px 0 0;color:var(--color-text-tertiary);font-size:13px}.profile-action small{display:block;margin-top:4px;font-size:12px;color:var(--color-text-tertiary)}.icon{width:20px;height:20px;display:grid;place-items:center;color:var(--color-text-tertiary)}.icon svg{width:18px;height:18px}.nav-icon svg{width:20px;height:20px}.app-footer,.media-controller,.bottom-nav{flex-shrink:0}.control-icon{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);transition:filter var(--transition)}html,body,#root{height:100%}#root{display:flex;justify-content:center;align-items:center;width:100%;flex:1 0 100%}