* {
                box-sizing: border-box;
              }

              html,
              body {
                margin: 0;
                min-height: 100%;
              }

              body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                background: #101010;
                color: #fff;

                font-family:
                  Arial,
                  Helvetica,
                  sans-serif;
              }

              .hero {
                width: 100%;
                padding: 20px 0;

                display: flex;
                align-items: center;
                justify-content: center;

                background:
                  linear-gradient(
                    135deg,
                    #181818,
                    #262626
                  );
              }

              .hero-inner {
                width: min(
                  1400px,
                  calc(100% - 40px)
                );

                display: flex;
                align-items: center;
                justify-content: center;

                text-align: center;

                padding: 0;

                border-radius: 18px;

                overflow: hidden;

                background:
                  linear-gradient(
                    135deg,
                    #202020,
                    #151515
                  );
              }

              .hero-banner-link {
                display: block;
                width: 100%;
              }

              .hero-banner-image {
                display: block;
                width: 100%;
                height: auto;
                max-width: 100%;

                border-radius: 18px;
                background: #111;
              }

              .hero-placeholder {
                width: 100%;
                padding: 40px;

                color: #777;
              }

              .hero-placeholder strong {
                display: block;
                margin-bottom: 12px;

                color: #fff;

                font-size: clamp(
                  28px,
                  5vw,
                  54px
                );
              }

              .page {
                width: min(
                  1400px,
                  calc(100% - 40px)
                );

                margin: 0 auto;
                padding: 42px 0 70px;

                flex: 1;
              }

              .page-title {
                margin-bottom: 28px;
                text-align: center;
              }

              .page-title h1 {
                margin: 0 0 10px;

                font-size: clamp(
                  30px,
                  5vw,
                  46px
                );
              }

              .page-title p {
                margin: 0;
                color: #999;
              }

              .billing-notice {
                max-width: 900px;

                margin: 0 auto 28px;
                padding: 16px 18px;

                border-radius: 12px;
                border: 1px solid #303030;

                background: #1b1b1b;
                color: #c7c7c7;

                line-height: 1.6;
                text-align: center;
              }

              .billing-notice strong {
                color: #fff;
              }

              .packages-grid {
                display:grid;
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:22px;
                max-width:1120px;
                margin:0 auto;
                align-items:stretch;
              }

              .package-card {
                display: flex;
                flex-direction: column;
                justify-content:
                  space-between;

                padding: 26px;

                border-radius: 18px;
                border: 1px solid #303030;

                background:linear-gradient(145deg,#151b22,#11161c);
                box-shadow:0 16px 36px #0004;
              }

              .package-card.package-premium {
                border-color:#d99b28;
                box-shadow:0 0 0 1px #d99b2830,0 16px 42px #0005;
              }

              .package-card h2 {
                margin: 0 0 8px;
                font-size: 28px;
              }

              .package-description {
                margin: 0 0 20px;

                color: #aaa;

                line-height: 1.5;
              }

              .price-main {
                font-size: 36px;
                font-weight: bold;
              }

              .price-period,
              .price-yearly {
                color: #999;
              }

              .price-yearly {
                margin-top: 5px;
              }

              .feature-list {
                margin-top: 22px;
              }

              .feature-row {
                display: flex;
                justify-content:
                  space-between;

                gap: 14px;
                padding: 10px 0;

                border-bottom:
                  1px solid #303030;
              }

              .feature-row:last-child {
                border-bottom: 0;
              }

              .feature-row strong {
                font-size: 13px;
              }

              .feature-on strong {
                color: #b8e6b8;
              }

              .feature-off,
              .feature-off strong {
                color: #777;
              }

              .package-action {
                margin-top: 26px;
              }

              .package-button {
                display: block;

                width: 100%;
                padding: 13px 16px;

                border-radius: 10px;

                background:linear-gradient(135deg,#ffc65c,#f0a92f);
                color: #111;

                text-align: center;
                text-decoration: none;
                font-weight: bold;
              }

              .package-disabled {
                padding: 13px 16px;

                border-radius: 10px;

                background: #252525;
                color: #888;

                text-align: center;
              }

              footer {
                padding: 28px 20px;

                border-top:
                  1px solid #2b2b2b;

                background: #181818;
              }

              .footer-inner {
                width: min(
                  1200px,
                  100%
                );

                margin: 0 auto;

                display: flex;
                justify-content:
                  space-between;
                align-items: center;

                gap: 20px;
                flex-wrap: wrap;
              }

              .copyright {
                color: #888;
                font-size: 14px;
              }

              .footer-links {
                display: flex;

                gap: 18px;
                flex-wrap: wrap;
                align-items: center;
              }

              .footer-links a {
                color: #bbb;

                text-decoration: none;
                font-size: 14px;
              }

              .nav-logout {
                margin: 0;
              }

              @media(max-width:1100px){
                .packages-grid{grid-template-columns:1fr;max-width:680px}
              }
              @media(max-width:800px){
                body{overflow-x:hidden}
                .hero{padding:10px 0}
                .hero-inner{width:calc(100% - 20px);border-radius:12px}
                .hero-banner-image{border-radius:12px}
                .page{width:min(calc(100% - 28px),1400px);padding:28px 0 46px}
                .billing-notice{text-align:left}
                .feature-row{align-items:flex-start;flex-wrap:wrap}
              }
              @media(max-width:520px){
                .page{width:calc(100% - 20px)}
                .page-title{margin-bottom:20px}
                .package-card{padding:20px 16px;border-radius:14px}
                .package-card h2{font-size:25px}
                .price-main{font-size:32px}
                .feature-row{gap:6px}
                .package-button,.package-disabled{min-height:48px;display:flex;align-items:center;justify-content:center}
                .footer-inner{flex-direction:column;text-align:center}
                .footer-links{justify-content:center}
              }

              .nav-logout button {
                border: 0;
                padding: 0;

                background: transparent;
                color: #bbb;

                font: inherit;
                font-size: 14px;

                cursor: pointer;
              }