/* Shared styling for the subscriber pages: subscribe, welcome, profile, manage.
   Same palette as main.css, but these are plain document pages rather than the
   full-bleed scroll experience, so they do not reuse its header/section rules. */

body.account {
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   background-color: rgb(22, 22, 22);
   margin: 0;
   padding: 0;
   text-align: left;
}

.account .nav-header {
   text-align: center;
   padding: 20px 0;
   border-bottom: 1px solid rgb(47, 47, 47);
   display: flex;
   gap: 24px;
   justify-content: center;
   flex-wrap: wrap;
}

.account .nav-header a {
   color: #c40000;
   text-decoration: none;
   font-size: 1.05rem;
}

.account .nav-header a:hover {
   color: #ff2b2b;
}

.account .container {
   max-width: 720px;
   margin: 0 auto;
   padding: 24px 20px 64px;
}

.account .card {
   background: rgb(38, 38, 38);
   border-radius: 10px;
   padding: 28px;
   margin: 20px 0;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

.account h1 {
   font-size: 2.2rem;
   margin: 0 0 8px;
   text-align: left;
}

.account h2 {
   font-size: 1.4rem;
   margin: 0 0 12px;
}

.account p.lede {
   color: #cccccc;
   line-height: 1.5;
   margin-top: 0;
}

.account .price {
   font-size: 3rem;
   color: #c40000;
   margin: 12px 0;
   font-weight: bold;
}

.account .features {
   list-style: none;
   padding: 0;
   margin: 20px 0;
}

.account .features li {
   margin: 10px 0;
   font-size: 1.05rem;
}

.account .features li:before {
   content: "👊";
   margin-right: 10px;
}

.account .form-row {
   margin: 16px 0;
}

.account label {
   display: block;
   margin-bottom: 6px;
   font-size: 1rem;
}

.account .hint {
   color: #999999;
   font-size: 0.85rem;
   margin: 4px 0 0;
}

.account input[type="text"],
.account input[type="email"],
.account textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid rgb(70, 70, 70);
   border-radius: 5px;
   font-size: 1rem;
   background: rgb(24, 24, 24);
   color: white;
   font-family: inherit;
   box-sizing: border-box;
}

.account textarea {
   min-height: 110px;
   resize: vertical;
}

.account button {
   background: #c40000;
   color: white;
   border: none;
   padding: 14px 26px;
   border-radius: 5px;
   font-size: 1.1rem;
   cursor: pointer;
   transition: background 0.3s ease;
   font-family: inherit;
}

.account button:hover:not(:disabled) {
   background: #a30000;
}

.account button:disabled {
   opacity: 0.55;
   cursor: progress;
}

.account button.full {
   width: 100%;
   margin-top: 20px;
}

.account button.secondary {
   background: rgb(70, 70, 70);
}

.account button.secondary:hover:not(:disabled) {
   background: rgb(92, 92, 92);
}

.account button.small {
   padding: 8px 14px;
   font-size: 0.9rem;
}

.account .game-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   gap: 10px;
   align-items: center;
   margin-bottom: 10px;
}

.account .status {
   padding: 14px;
   border-radius: 5px;
   margin: 16px 0;
   display: none;
   line-height: 1.4;
}

.account .status.show {
   display: block;
}

.account .status.success {
   background-color: #146c14;
}

.account .status.fail {
   background-color: #8c1616;
}

.account .private-link {
   background: rgb(24, 24, 24);
   border: 1px dashed rgb(90, 90, 90);
   border-radius: 5px;
   padding: 12px;
   word-break: break-all;
   font-size: 0.85rem;
   color: #dddddd;
}

.account .row-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 20px;
}

.account footer {
   text-align: center;
   padding: 24px;
   color: #888888;
   font-size: 0.85rem;
}

@media screen and (max-width: 600px) {
   .account .game-row {
      grid-template-columns: 1fr;
   }
}