.saas-box,
.saas-dashboard {
    max-width: 1100px;
    margin: 40px auto;
    padding: 30px;
    box-sizing: border-box;
}

.saas-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.saas-auth-box {
    max-width: 480px;
}

.saas-box h1,
.saas-box h2,
.saas-dashboard h1,
.saas-dashboard h2 {
    margin-top: 0;
}

.saas-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.saas-box input[type="text"],
.saas-box input[type="email"],
.saas-box input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 15px;
}

.saas-box p {
    margin-bottom: 20px;
}

.saas-box small {
    display: block;
    margin-top: 6px;
    color: #6b7280;
}

.saas-button {
    display: inline-block;
    padding: 11px 18px;
    background: #2563eb;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.saas-button:hover {
    opacity: 0.9;
}

.saas-button-secondary {
    background: #374151;
}

.saas-delete-button {
    background: transparent;
    color: #dc2626;
    border: none;
    padding: 8px 0;
    cursor: pointer;
}

.saas-auth-link {
    margin-top: 20px;
    color: #6b7280;
}

.saas-success {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #ecfdf5;
    color: #047857;
    border-radius: 8px;
}

.saas-error {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
}

.saas-info {
    padding: 15px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 8px;
}

.saas-muted {
    color: #6b7280;
}

.saas-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.saas-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.saas-stat-card {
    min-width: 180px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.saas-stat-card span {
    display: block;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 14px;
}

.saas-stat-card strong {
    font-size: 24px;
}

.saas-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.saas-site-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.saas-site-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
}

.saas-site-domain {
    color: #6b7280;
    word-break: break-all;
}

.saas-site-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.saas-empty {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
}

.saas-domain-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.saas-domain-input input {
    flex: 1;
}

@media (max-width: 768px) {

    .saas-site-grid {
        grid-template-columns: 1fr;
    }

    .saas-dashboard-header,
    .saas-section-title,
    .saas-stats {
        flex-direction: column;
        align-items: stretch;
    }

    .saas-domain-input {
        display: block;
    }

    .saas-domain-input span {
        display: block;
        margin-top: 8px;
    }
}

/* =========================
   SaaS Templates
========================= */

.saas-template-selector {
    margin: 30px 0;
}

.saas-template-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.saas-template-card {
    display: block;
    cursor: pointer;
}

.saas-template-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.saas-template-card-inner {
    height: 100%;
    padding: 15px;

    background: #ffffff;

    border: 2px solid #e5e7eb;

    border-radius: 14px;

    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
}

.saas-template-card-inner:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}

.saas-template-card > input:checked
+ .saas-template-card-inner {

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}

.saas-template-preview {
    height: 150px;

    border-radius: 10px;

    overflow: hidden;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    margin-bottom: 15px;
}

.saas-template-preview-header {
    height: 35px;
    background: #2563eb;
}

.saas-template-preview-content {
    padding: 16px;
}

.saas-template-preview-content div {
    height: 12px;

    background: #dbeafe;

    margin-bottom: 10px;

    border-radius: 5px;
}

.saas-template-preview-content div:nth-child(1) {
    width: 80%;
}

.saas-template-preview-content div:nth-child(2) {
    width: 60%;
}

.saas-template-preview-content div:nth-child(3) {
    width: 90%;
}

.saas-template-preview-game-download
.saas-template-preview-header {
    background: #16a34a;
}

.saas-template-preview-game-news
.saas-template-preview-header {
    background: #ea580c;
}

.saas-template-card-inner h3 {
    margin-bottom: 8px;
}

.saas-template-card-inner p {
    color: #6b7280;
    margin: 0;
}

@media (max-width: 800px) {

    .saas-template-grid {
        grid-template-columns: 1fr;
    }

}
/* Human-only field; bots that fill it are rejected server-side. */
.saas-honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important}


/* V0.3.2：登录、注册共用的人类可读算术验证 */
.saas-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.saas-auth-box .saas-math-captcha{margin:16px 0 20px}
.saas-auth-box .saas-math-captcha>label{display:flex;justify-content:space-between;gap:10px;font-weight:700;margin-bottom:9px;font-size:14px}
.saas-captcha-hint{font-weight:400;color:#64748b;font-size:12px}
.saas-captcha-row{display:flex;gap:10px;align-items:stretch}
.saas-captcha-question{flex:0 0 118px;display:flex;align-items:center;justify-content:center;border-radius:10px;min-height:48px;background:#e9f0ff;border:1px solid #bbcbfa;color:#1f3c9c;font-size:20px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.saas-auth-box .saas-captcha-row input[type=number]{flex:1;min-width:0;width:100%;min-height:48px;padding:10px 14px;border:1px solid #d1d5db;border-radius:10px;font-size:15px;background:#fff;color:#14213d}
.saas-auth-box .saas-captcha-row input:focus{outline:2px solid #b9ccff;outline-offset:1px;border-color:#5479ee}
.saas-auth-box #my-saas-login-form .login-submit input[type=submit]{width:100%;padding:12px 18px;border:0;border-radius:10px;background:linear-gradient(100deg,#16c8b6,#5481ff);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.saas-auth-box form>.saas-button{width:100%;background:linear-gradient(100deg,#16c8b6,#5481ff);font-weight:700}
@media(max-width:410px){.saas-captcha-row{gap:8px}.saas-captcha-question{flex-basis:102px;font-size:17px}.saas-captcha-hint{display:none}}

/* V0.4.0 Network membership UI */
.ms-member-banner{background:linear-gradient(135deg,#f1f6ff,#f6f9ff);border:1px solid #dee8ff;border-radius:16px;display:flex;gap:20px;justify-content:space-between;align-items:center;padding:20px 23px;margin:20px 0 26px}
.ms-member-banner strong{font-size:18px;color:#172d53}.ms-member-banner p{margin:6px 0 0;color:#63718b;font-size:13px}.ms-member-banner .saas-button{flex:0 0 auto;background:#345df2!important;color:white!important;border:0!important}
.saas-stat-card small{display:block;font-size:12px;color:#64748b;margin-top:5px}
.ms-member-page{max-width:1150px;margin:0 auto;padding:32px 18px 50px;color:#17233d}
.ms-member-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#f3f7ff;border:1px solid #dfebfa;border-radius:20px;padding:28px;margin-bottom:22px}
.ms-member-kicker{font-size:11px;font-weight:800;color:#4966da;letter-spacing:.15em}
.ms-member-hero h1{font-size:30px;line-height:1.25;margin:6px 0 10px}.ms-member-hero p{font-size:14px;color:#62738c;margin:0}
.ms-member-current{display:grid;gap:5px;background:white;padding:16px 22px;border-radius:15px;min-width:205px}
.ms-member-current small,.ms-member-current span{font-size:12px;color:#697b97}.ms-member-current strong{font-size:20px;color:#2245b7}
.ms-member-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ms-member-plan{border:1px solid #e0e7f4;border-radius:18px;background:#fff;padding:25px;box-shadow:0 8px 22px rgba(30,48,91,.04)}
.ms-member-plan h2{font-size:20px;margin:0 0 14px}.ms-member-plan p{color:#64738a;font-size:13px;margin:10px 0}.ms-member-price{display:flex;gap:4px;align-items:baseline}.ms-member-price b{font-size:29px;color:#2857dd}.ms-member-price span{font-size:12px;color:#8a99ae}
.ms-member-plan .saas-button{margin-top:18px;width:100%;border:0!important;background:#355be7!important;color:#fff!important;cursor:pointer}.ms-member-plan .saas-button:disabled{cursor:not-allowed;opacity:.5}
.ms-member-note{font-size:13px;color:#64748b;line-height:1.9;margin-top:22px}
@media(max-width:750px){.ms-member-banner,.ms-member-hero{flex-direction:column;align-items:stretch}.ms-member-plans{grid-template-columns:1fr}}


/* V0.4.1: compact platform dashboard vertical rhythm, scoped to the dashboard. */
.ms-platform-site .saas-main .saas-dashboard{
  margin:4px auto 16px;
  padding:12px 18px 22px;
}
.ms-platform-site .saas-dashboard-header{
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.ms-platform-site .saas-dashboard-header h1{
  margin:0 0 6px;
  font-size:30px;
  line-height:1.3;
}
.ms-platform-site .saas-dashboard-header p{margin:0;line-height:1.6}
.ms-platform-site .saas-dashboard .saas-stats{gap:14px;margin:0 0 16px}
.ms-platform-site .saas-dashboard .saas-stat-card{padding:15px 18px;min-width:170px}
.ms-platform-site .saas-dashboard .saas-stat-card span{margin-bottom:5px}
.ms-platform-site .saas-dashboard .ms-member-banner{margin:12px 0 20px;padding:16px 20px}
.ms-platform-site .saas-dashboard .saas-section-title{margin-bottom:14px}
@media(max-width:768px){
  .ms-platform-site .saas-main .saas-dashboard{padding:8px 8px 18px;margin:0 auto 12px}
  .ms-platform-site .saas-dashboard-header{align-items:stretch;gap:12px}
  .ms-platform-site .saas-dashboard-header h1{font-size:25px}
  .ms-platform-site .saas-dashboard .saas-stats{gap:10px}
  .ms-platform-site .saas-dashboard .ms-member-banner{padding:15px}
}