:root{--tg-bg-color: #ffffff;--tg-text-color: #111111;--tg-hint-color: #999999;--tg-link-color: #2481cc;--tg-button-color: #2481cc;--tg-button-text-color: #ffffff;--tg-secondary-bg-color: #f4f4f5;--accent-like: #34c759;--accent-skip: #ff3b30;--tg-safe-area-inset-top: env(safe-area-inset-top, 0px)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--tg-bg-color);color:var(--tg-text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{display:flex;flex-direction:column}.app-content{flex:1;overflow-y:auto;padding:16px;padding-top:calc(16px + var(--tg-safe-area-inset-top));padding-bottom:88px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--tg-secondary-bg-color);border-top:1px solid rgba(0,0,0,.08);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}.bottom-nav a{flex:1;text-align:center;padding:8px 4px;color:var(--tg-hint-color);text-decoration:none;font-size:13px;border-radius:8px}.bottom-nav a.active{color:var(--tg-button-color);font-weight:600}button.primary{background:var(--tg-button-color);color:var(--tg-button-text-color);border:none;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;width:100%;cursor:pointer}button.primary:disabled{opacity:.5}input[type=text],input[type=url]{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:var(--tg-secondary-bg-color);color:var(--tg-text-color);font-size:15px}.track-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--tg-secondary-bg-color);margin-bottom:10px}a.track-card{text-decoration:none;color:inherit;cursor:pointer}.track-card img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#ddd;flex-shrink:0}.track-card .info{flex:1;min-width:0}.track-card .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card .artist{color:var(--tg-hint-color);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card .meta{color:var(--tg-hint-color);font-size:12px;margin-top:2px}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{flex:1;padding:10px;border-radius:10px;border:none;background:var(--tg-secondary-bg-color);color:var(--tg-hint-color);font-weight:600;cursor:pointer}.tabs button.active{background:var(--tg-button-color);color:var(--tg-button-text-color)}.center-message{text-align:center;color:var(--tg-hint-color);padding:48px 16px}.vote-screen{height:100%;display:flex;flex-direction:column}.vote-screen h2{flex-shrink:0}.swipe-deck{position:relative;flex:1;min-height:0}.swipe-card{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--tg-secondary-bg-color);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;cursor:grab;box-shadow:0 4px 16px #0000001f}.track-card-body{padding:16px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.track-card-body .text-info{flex-shrink:0;margin-bottom:12px}.track-card-body .text-info .title{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card-body .text-info .artist{color:var(--tg-hint-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card-body .text-info .meta{color:var(--tg-hint-color);font-size:12px;margin-top:2px}.track-card-body .thumb-wrap{flex:1;min-height:0;margin-bottom:12px;border-radius:12px;overflow:hidden;background:#ddd}.track-card-body .thumb{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.track-card-body .embed{border:none;width:100%;flex-shrink:0}.track-detail-screen{height:100%;display:flex;flex-direction:column}.track-detail-screen .top-bar{display:flex;align-items:center;margin-bottom:12px;flex-shrink:0}.back-button{background:none;border:none;color:var(--tg-link-color);font-size:15px;font-weight:600;padding:4px 0;cursor:pointer}.track-detail-card{position:relative;flex:1;min-height:0;background:var(--tg-secondary-bg-color);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 16px #0000001f}.vote-buttons{display:flex;gap:16px;padding:16px;flex-shrink:0}.vote-buttons button{flex:1;padding:14px;border-radius:50px;border:none;font-size:24px;cursor:pointer}.vote-buttons .skip{background:var(--accent-skip);color:#fff}.vote-buttons .like{background:var(--accent-like);color:#fff}
