.account-page{min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:#f8f9fb;padding:20px;box-sizing:border-box}.account-container{background:#fff;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,.1);padding:40px;width:100%;max-width:900px;box-sizing:border-box}.account-title{text-align:center;font-size:1.8rem;font-weight:600;color:#333;margin-bottom:30px}.tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:nowrap;overflow:visible}.tab-button{background:#f0f0f0;border:none;padding:10px 20px;border-radius:8px;font-size:.95rem;cursor:pointer;color:#555;transition:all .22s ease;white-space:nowrap}.tab-button:hover{background:#e5e5e5}.tab-button.active{background:#007bff;color:white;box-shadow:0 2px 6px rgba(0,123,255,.4)}.tab-content{margin-top:10px}.section-title{font-size:1.2rem;font-weight:500;margin-bottom:15px;justify-self:start;color:#333}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px;align-items:start}.info-item .label{display:block;font-size:.95rem;color:#777;margin-bottom:6px}.info-item .value{font-weight:500;color:#222}.policy-links{display:flex;flex-direction:column;gap:6px}.policy-links a{text-decoration:none;color:#007bff;font-size:.9rem;transition:color .3s}.policy-links a:hover{color:#0056b3;text-decoration:underline}.subscription-details{background:#f9fafc;border:1px solid #ddd;border-radius:8px;padding:20px;margin-bottom:20px}.detail-row{display:flex;justify-content:space-between;font-size:.95rem;padding:6px 0;border-bottom:1px solid #eee}.detail-row:last-child{border-bottom:none}.payment-list{list-style:none;padding:0;margin:0}.payment-item{display:flex;justify-content:space-between;align-items:center;background:#f9fafc;border:1px solid #ddd;border-radius:8px;padding:12px 16px;margin-bottom:10px;gap:12px}.cancel-subscription-button{display:block;text-decoration:none;color:rgb(196,40,40);padding:10px 5px;border-radius:8px;font-weight:500;text-align:center;background:transparent}.cancel-subscription-button,.update-button{font-size:.95rem;border:none;cursor:pointer}.update-button{background:#007bff;color:white;padding:10px 18px;border-radius:6px;transition:background .3s}.update-button:hover{background:#0056b3}.error{color:#d9534f;font-size:.9rem}@media (max-width:900px){.account-container{padding:28px;border-radius:12px}.account-title{font-size:1.6rem;margin-bottom:22px}.tabs{justify-content:flex-start;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:18px}.tab-button{padding:8px 14px;font-size:.9rem;border-radius:999px;flex:0 0 auto}.info-grid{grid-template-columns:1fr;gap:12px}.subscription-details{padding:16px}.payment-item{flex-direction:column;align-items:stretch;text-align:left;gap:8px}.payment-item .right-group{display:flex;gap:8px;justify-content:flex-end;align-items:center}.update-button{width:100%;padding:10px;border-radius:8px}}@media (max-width:420px){.account-container{padding:18px;border-radius:10px}.account-title{font-size:1.2rem;margin-bottom:14px}.section-title{font-size:1.05rem}.tab-button{padding:8px 12px;font-size:.88rem}.subscription-details{padding:12px}.detail-row{font-size:.9rem;gap:6px}.payment-item{padding:10px 12px}}.policy-links a:focus,.tab-button:focus,.update-button:focus,.user-menu-item:focus{outline:3px solid rgba(0,123,255,.14);outline-offset:2px}.info-item .avatar,.info-item img{max-width:100%;height:auto;border-radius:8px}@media (max-width:560px){.info-item .label,.info-item .value{display:block}}.info-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.info-card{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px 18px;transition:all .25s ease;box-shadow:0 1px 3px rgba(0,0,0,.05);cursor:pointer}.info-card:hover{border-color:#007bff;box-shadow:0 3px 8px rgba(0,123,255,.12);transform:translateY(-1px)}.info-card:active{transform:scale(.99)}.info-card .arrow{font-size:1.1rem;color:#888;transition:transform .25s ease,color .25s ease}.info-card:hover .arrow{transform:translateX(4px);color:#007bff}.info-card .label{font-size:.9rem;color:#777;margin-bottom:3px}.info-card .value{font-weight:500;color:#222}@media (max-width:600px){.info-card{padding:12px 14px;border-radius:10px}.info-card .arrow{font-size:1rem}}