/* Login / Register / Account pages */

/* ========== Login Page ========== */
.log_container {
    max-width: 400px;
    margin: 40px auto;
    padding: 0 16px;
}

.log_container .other_login_box .title {
    text-align: center;
    margin-bottom: 24px;
}

.log_container .other_login_box .title h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.log_container .google_login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
}

.log_container .google_login:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.log_container .google_login .google-icon {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.log_container .google_login span {
    font-size: 14px;
    color: #757575;
}

.log_container .tw_login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: #1da1f2;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 12px;
}

.log_container .tw_login:hover {
    background-color: #0c85d0;
}

.log_container .tw_login .icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.069a13.945 13.945 0 007.548 2.209c9.056 0 14.01-7.503 14.01-14.01 0-.213-.005-.426-.014-.637A10.012 10.012 0 0024 4.59z'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.log_container .tw_login .text {
    color: #fff;
    font-size: 14px;
}

.log_container .or_line {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.log_container .or_line .bg {
    flex: 1;
    height: 1px;
    background-color: #ddd;
}

.log_container .or_line .text {
    padding: 0 16px;
    font-size: 13px;
    color: #999;
}

.log_container .login_with_btn {
    text-align: center;
    height: 44px;
    line-height: 44px;
    border: 1px solid #24cd77;
    color: #24cd77;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 20px;
}

.log_container .login_with_btn:hover {
    background-color: #f0faf5;
}

.log_container .check_box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.log_container .check_box .check {
    margin-right: 8px;
    margin-top: 2px;
}

.log_container .check_box .check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.log_container .check_box .text {
    font-size: 12px;
    color: #999;
    line-height: 18px;
}

.log_container .check_box .text a {
    color: #00a6ed;
}

.log_container .sign_up_text {
    text-align: center;
    font-size: 14px;
    color: #999;
}

.log_container .sign_up_text a {
    color: #00a6ed;
}

.log_container .email_login_box {
    position: relative;
}

.log_container .email_login_box .back {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.log_container .email_login_box .back::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    margin: 10px 0 0 10px;
}

.log_container .check_error_box {
    background-color: #fff0f0;
    border: 1px solid #ffcccb;
    color: #d93025;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 18px;
}

.log_container .item.account,
.log_container .item.password {
    position: relative;
    margin-bottom: 20px;
}

.log_container .item.account input,
.log_container .item.password input {
    width: 100%;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.log_container .item.account input:focus,
.log_container .item.password input:focus {
    border-color: #24cd77;
}

.log_container .login_box {
    text-align: center;
    height: 44px;
    line-height: 44px;
    background-color: #24cd77;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 16px;
}

.log_container .login_box:hover {
    background-color: #1eb668;
}

.log_container .forgot {
    text-align: center;
    margin-bottom: 20px;
}

.log_container .forgot a {
    font-size: 13px;
    color: #00a6ed;
}

/* ========== User Center — Exact copy from target site ========== */

/* Override outer main for user center pages */
html, body {
    height: auto;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.main-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(255, 255, 255);
}

/* Section class — centers content at 1200px */
.section {
    width: 1200px;
    margin: 0 auto;
}

/* Profile Header */
.user-center-header {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)),
        radial-gradient(45.07% 79.73% at 62.39% 79.55%, rgba(247, 108, 184, 0.7) 0px, rgba(247, 108, 184, 0) 100%),
        linear-gradient(270deg, rgb(158, 189, 255), rgb(187, 233, 255));
    width: 100%;
    display: block;
    color: rgb(94, 94, 94);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.user-center-header .header-body {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
    padding: 32px 16px;
    box-sizing: border-box;
}

.user-center-header .header-content {
    align-items: center;
    display: flex;
    gap: 24px;
    box-sizing: content-box;
}

.user-center-header .header-avatar {
    flex-shrink: 0;
    height: 120px;
    width: 120px;
    box-sizing: content-box;
}

.user-center-header .header-avatar img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.user-center-header .header-user {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: content-box;
}

.user-center-header .header-user-name {
    align-items: center;
    color: rgb(60, 64, 67);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    gap: 4px;
    line-height: 28px;
    text-align: center;
    word-break: break-word;
    box-sizing: content-box;
}

.user-center-header .header-user-name-text {
    display: block;
    color: rgb(60, 64, 67);
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    box-sizing: content-box;
}

.user-center-header .header-user-social {
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    box-sizing: content-box;
}

.user-center-header .header-user-social-item {
    color: rgb(139, 139, 139);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    box-sizing: content-box;
}

/* Subscribe button */
.header-subscribe {
    display: flex;
    align-items: center;
    background: rgb(255, 255, 255);
    border-radius: 999px;
    padding: 0;
    height: 48px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 0px 0px;
    flex-shrink: 0;
    overflow: hidden;
}

.header-subscribe.subscribed {
    opacity: 0.7;
}

.subscribe-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 12px 16px;
    flex-shrink: 0;
    color: rgb(94, 94, 94);
    background: rgb(248, 113, 113);
    box-sizing: content-box;
}

.subscribe-icon svg {
    width: 24px;
    height: 24px;
    color: rgb(94, 94, 94);
    display: block;
}

.subscribe-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.subscribe-title {
    font-size: 14px;
    font-weight: 500;
    color: rgb(248, 113, 113);
    line-height: 20px;
}

.subscribe-desc {
    font-size: 10px;
    font-weight: 400;
    color: rgb(139, 139, 139);
    line-height: 14px;
}

/* Subscribed state — just dimmed */
.header-subscribe.subscribed {
    opacity: 0.7;
    cursor: default;
}

/* Main Content Area */
.user-center-main {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 1 0 0px;
    gap: 32px;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
}

/* Sidebar Navigation */
.nav-body {
    align-self: stretch;
    flex-shrink: 0;
    width: 260px;
    box-sizing: content-box;
}

.nav-body .nav-content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: content-box;
}

.nav-body .nav-item {
    align-items: center;
    align-self: stretch;
    background: rgb(255, 255, 255);
    border-radius: 999px;
    box-sizing: border-box;
    color: rgb(94, 94, 94);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    height: 44px;
    line-height: normal;
    padding: 12px 16px;
    position: relative;
    text-transform: capitalize;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-body .nav-item svg {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    display: block;
    position: relative;
    overflow: hidden;
}

.nav-body .nav-item .nav-title {
    display: block;
    box-sizing: content-box;
}

.nav-body .nav-item:hover {
    color: rgb(64, 135, 247);
    background: rgb(245, 248, 252);
}

.nav-body .nav-item:hover svg {
    stroke: rgb(64, 135, 247);
}

.nav-body .nav-item.active {
    background: rgb(235, 243, 254);
    color: rgb(64, 135, 247);
}

.nav-body .nav-item.active svg {
    stroke: rgb(64, 135, 247);
}

/* Divider */
.divider {
    background: rgb(242, 245, 249);
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
}

/* Content Body */
.user-center-body {
    align-self: stretch;
    flex: 1 1 0%;
    box-sizing: content-box;
}

/* Empty State */
.no-downloaded-wrap {
    gap: 16px;
    padding: 24px 16px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
}

.no-downloaded-wrap .no-downloaded-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-sizing: content-box;
}

.no-downloaded-wrap .no-downloaded-title {
    color: rgb(94, 94, 94);
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    box-sizing: content-box;
}

.no-downloaded-wrap .no-downloaded-desc {
    color: rgb(139, 139, 139);
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    box-sizing: content-box;
}

.no-downloaded-wrap .no-downloaded-points {
    list-style: disc inside;
    color: rgb(139, 139, 139);
    font-size: 13px;
    line-height: 24px;
    text-align: left;
    margin: 8px 0 0 0;
    padding: 0;
}

.no-downloaded-wrap .no-downloaded-points li {
    margin-bottom: 4px;
}

.no-downloaded-wrap .no-downloaded-btn {
    display: inline-block;
    padding: 10px 32px;
    background: rgb(64, 135, 247);
    color: #fff;
    text-decoration: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    margin-top: 8px;
}

.no-downloaded-wrap .no-downloaded-btn:hover {
    background: rgb(50, 115, 230);
}

/* Download List */
.download-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

.download-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.download-list-item:hover {
    background: rgb(248, 249, 250);
}

.download-list-item img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
}

.download-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.download-item-name {
    font-size: 14px;
    color: rgb(60, 64, 67);
    font-weight: 500;
}

.download-item-dev {
    font-size: 12px;
    color: rgb(139, 139, 139);
}

/* Reviews Page — exact match to target site */
.reviews-content {
    padding: 0;
}

.reviews-header {
    padding: 0;
    border-bottom: 1px solid rgb(231, 231, 231);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.reviews-header-title {
    font-size: 18px;
    font-weight: 500;
    color: rgb(60, 64, 67);
    padding: 0;
    margin: 0;
    line-height: 34px;
    flex: 1 1 0%;
}

.reviews-header-tab {
    display: flex;
    gap: 8px;
    margin: 0;
    flex: 0 1 auto;
    padding: 0;
}

.reviews-header-tab-item {
    padding: 8px 8px 16px;
    font-size: 14px;
    color: rgb(64, 135, 247);
    font-weight: 400;
    cursor: pointer;
    position: relative;
    line-height: 20px;
}

.reviews-header-tab-item.active {
    color: rgb(64, 135, 247);
    font-weight: 400;
    border-bottom: none;
    margin-bottom: 0;
}

.reviews-header-tab-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: rgb(64, 135, 247);
}

.tab-contents {
    padding: 0;
}

.tab-content {
    padding: 0;
    display: block;
}

.no-reviews-wrap {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    gap: 16px;
    margin: 0;
}

.no-reviews-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.no-reviews-title {
    font-size: 18px;
    font-weight: 500;
    color: rgb(94, 94, 94);
    text-align: center;
    margin: 0;
    line-height: 27px;
}

.no-reviews-desc {
    font-size: 14px;
    font-weight: 400;
    color: rgb(139, 139, 139);
    text-align: center;
    margin: 0;
    line-height: 21px;
}

/* Premium Page — exact match to target site */
.premium-content {
    padding: 0;
    background: transparent;
    width: 100%;
}

.user-center-premium-subscribe-wrap {
    padding: 32px 16px;
    margin: 0;
    background: transparent;
    border-radius: 0;
}

.user-center-premium-subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    background: rgb(255, 255, 255);
    border-radius: 12px;
    width: 100%;
    height: 96px;
    box-sizing: content-box;
    box-shadow: none;
    border: none;
    margin: 0;
}

.premium-subscribe-intro {
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: 8px;
    flex: 0 1 auto;
}

.premium-subscribe-intro-title {
    font-size: 16px;
    font-weight: 700;
    color: rgb(94, 94, 94);
    margin: 0;
    line-height: normal;
}

.premium-subscribe-intro-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgb(139, 139, 139);
    line-height: 20px;
    margin: 0;
}

.user-center-premium-subscribe .premium-subscribe-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    margin: 1px 0;
    background: linear-gradient(90deg, rgb(255, 119, 4), rgb(251, 5, 244));
    color: rgb(255, 255, 255);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    line-height: normal;
    box-shadow: none;
    flex-shrink: 0;
    box-sizing: content-box;
}

.premium-subscribe-btn:hover {
    opacity: 0.9;
}

/* Settings Page — exact match to target site */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 0;
}

.settings-form {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
}

.settings-form .form-header {
    padding: 0;
    margin: 0 0 16px 0;
}

.settings-form .form-title {
    font-size: 18px;
    font-weight: 700;
    color: rgb(60, 64, 67);
    line-height: 28px;
}

.settings-form .form-desc {
    font-size: 12px;
    color: rgb(139, 139, 139);
    margin-top: 0;
    line-height: 18px;
}

.settings-form .form-content {
    padding: 0;
}

.settings-form-item {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-form-item + .settings-form-item {
    margin-top: 16px;
}

.settings-form-label {
    font-size: 14px;
    color: rgb(94, 94, 94);
    font-weight: 500;
    line-height: 20px;
    display: block;
}

.settings-form-label.required::after {
    content: '*';
    color: rgb(255, 107, 107);
    margin-left: 2px;
}

.settings-form-input input,
.settings-form-input textarea {
    width: 404px;
    height: 20px;
    border: 1px solid rgb(231, 231, 231);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 14px;
    color: rgb(94, 94, 94);
    background: rgb(255, 255, 255);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: content-box;
}

.settings-form-input textarea {
    height: 60px;
    resize: both;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.settings-form-input input:focus,
.settings-form-input textarea:focus {
    border-color: #24cd77;
}

.settings-form-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: nowrap;
}

.settings-form-row.verification .settings-form-input {
    flex: 0 0 auto;
}

.settings-form-row.verification .settings-form-input input {
    width: 404px;
}

.settings-form-avatar {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    width: 100px;
    height: 100px;
}

.settings-form-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 0;
    object-fit: cover;
    display: block;
}

.settings-form-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    padding: 4px 0;
    background: rgba(36, 205, 119, 0.9);
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.settings-form-avatar-btn:hover {
    background: rgba(36, 205, 119, 1);
}

.settings-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    height: 37px;
    padding: 8px 16px;
    background: rgb(36, 205, 119);
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.settings-form-button:hover {
    background: #1eb668;
}

.settings-form-button.disabled {
    background: rgb(255, 255, 255);
    color: rgb(159, 238, 197);
    cursor: not-allowed;
    border: 1px solid rgb(231, 231, 231);
}

.settings-form-button.danger {
    background: rgb(255, 255, 255);
    color: rgb(243, 37, 27);
    border: 1px solid rgb(243, 37, 27);
}

.settings-form-button.danger:hover {
    background: rgb(243, 37, 27);
    color: rgb(255, 255, 255);
}

.settings-form-checkbox {
    margin-bottom: 0;
}

.settings-form-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.settings-form-checkbox input[type="checkbox"] {
    display: none;
}

.settings-form-checkbox-fake {
    width: 18px;
    height: 18px;
    border: 1px solid rgb(231, 231, 231);
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-top: 1px;
}

.settings-form-checkbox-fake svg {
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-form-checkbox input[type="checkbox"]:checked + .settings-form-checkbox-fake {
    background: #24cd77;
    border-color: #24cd77;
}

.settings-form-checkbox input[type="checkbox"]:checked + .settings-form-checkbox-fake svg {
    opacity: 1;
}

.settings-form-checkbox-text {
    font-size: 14px;
    color: rgb(60, 64, 67);
    line-height: 20px;
}

.settings-form-desc {
    font-size: 12px;
    color: rgb(139, 139, 139);
    line-height: 18px;
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .section {
        width: 100%;
    }
    .user-center-main {
        flex-direction: column;
        gap: 16px;
    }
    .nav-body {
        width: 100%;
    }
    .nav-body .nav-content {
        flex-direction: row;
        overflow-x: auto;
    }
    .nav-body .nav-item {
        white-space: nowrap;
        align-self: auto;
    }
    .divider {
        width: 100%;
        height: 1px;
    }
    .user-center-header .header-body {
        flex-direction: column;
        text-align: center;
    }
    .user-center-header .header-content {
        flex-direction: column;
    }
    .user-center-header .header-user-social {
        justify-content: center;
    }
    .user-center-header .header-avatar {
        height: 80px;
        width: 80px;
    }
}