*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#0d1117;color:#e6edf3}a{color:#58a6ff;text-decoration:none}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111827;border-bottom:1px solid #263244}.brand{font-size:24px;font-weight:800;color:#fff}.topbar nav{display:flex;gap:18px;align-items:center}.btn,.btn-small,button{border:0;border-radius:10px;background:#238636;color:#fff;padding:12px 18px;font-weight:700;cursor:pointer}.btn-small{padding:8px 12px}.btn.ghost{background:#21262d;border:1px solid #30363d}.hero{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:40px;background:linear-gradient(135deg,rgba(13,17,23,.96),rgba(20,28,27,.82)),var(--site-bg);background-position:center;background-size:cover}.hero section{max-width:820px;text-align:center}.hero h1{font-size:52px;margin:0 0 18px}.hero p{font-size:20px;color:#9da7b3}.hero .announcement{display:inline-block;margin:18px 0 0;padding:10px 14px;border:1px solid #30363d;border-radius:8px;background:rgba(17,24,39,.82);color:#e6edf3;font-size:15px}.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}.owner-download{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px auto 0;padding:16px 18px;max-width:720px;border:1px solid rgba(255,216,137,.45);border-radius:10px;background:rgba(17,24,39,.88);text-align:left}.owner-download strong{display:block;color:#ffd889;font-size:18px;margin-bottom:4px}.owner-download span{display:block;color:#c9d1d9;font-size:14px;line-height:1.4}.owner-download .owner-btn{white-space:nowrap;background:#ffd889;color:#160f06}.auth-card{width:min(420px,92vw);margin:80px auto;background:#111827;border:1px solid #263244;border-radius:18px;padding:28px}.auth-card h1{margin-top:0}.auth-card form{display:flex;flex-direction:column;gap:10px}.auth-card input,.server-form input,.server-form textarea,.server-form select{background:#0d1117;border:1px solid #30363d;color:#e6edf3;border-radius:10px;padding:12px;width:100%}.auth-card label{font-size:14px;color:#9da7b3}.alert{padding:12px;border-radius:10px;margin:12px 0}.alert.error{background:#3b1111;color:#ffb4b4}.alert.ok{background:#12351d;color:#9be9a8}.dashboard{padding:28px;max-width:1400px;margin:0 auto}.panel{background:#111827;border:1px solid #263244;border-radius:18px;padding:22px;margin:22px 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.server-form textarea{width:100%;min-height:90px;margin-top:12px}.server-form button{margin-top:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #263244;padding:12px;text-align:left}th{color:#9da7b3}.danger{background:#da3633;padding:8px 12px;border-radius:8px}@media(max-width:900px){.grid{grid-template-columns:1fr}.hero h1{font-size:36px}.topbar{padding:0 16px}.topbar nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.owner-download{align-items:stretch;flex-direction:column;text-align:center}.owner-download .owner-btn{white-space:normal}}
.actions-cell{display:flex;gap:8px;align-items:center}.actions-cell form{margin:0}.muted{color:#8b949e}.btn.ghost{display:inline-block;margin-top:10px;background:#21262d;border:1px solid #30363d}
.server-form h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.server-form label {
    display: block;
    margin-bottom: 5px;
    color: #9fb0d8;
    font-size: 13px;
    font-weight: 600;
}

.server-form .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.server-form h3 {
    margin-top: 28px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #ffffff;
}

.server-form label {
    display: block;
    margin-bottom: 6px;
    color: #9fb0d8;
    font-size: 13px;
    font-weight: 700;
}

.form-hint {
    display: block;
    margin-top: 6px;
    color: #8b949e;
    font-size: 12px;
}

.radio-row {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    align-items: center;
}

.radio-row label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.radio-row input {
    width: auto;
}

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

.server-form .optional {
    color: #9fb0d8;
    font-size: 13px;
    font-weight: 600;
}

.info-box {
    margin: 10px 0 16px;
    padding: 16px;
    border: 1px solid #263244;
    border-radius: 14px;
    background: rgba(88, 166, 255, 0.08);
}

.info-box p {
    margin: 0 0 10px;
    color: #c9d1d9;
}

.launcher-theme-editor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.section-title-row h3 {
    border-bottom: 0;
    margin-top: 0;
}

.ghost-action {
    margin: 0 0 10px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #e6edf3;
}

.theme-controls h4 {
    margin: 20px 0 10px;
    color: #ffffff;
    font-size: 15px;
}

.theme-section,
.gradient-controls {
    padding: 16px;
    border: 1px solid #263244;
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
}

.theme-color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.theme-color-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-color-grid.compact {
    margin-top: 14px;
}

.gradient-controls {
    background: rgba(255, 216, 137, 0.05);
}

.checkbox-line {
    display: flex !important;
    gap: 8px;
    align-items: center;
}

.color-pair div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.color-pair input[type=color] {
    height: 42px;
    padding: 3px;
}

.transparent-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #9db8ff;
    font-size: 12px;
}

.opacity-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    color: #aab8d8;
    font-size: 12px;
}

.opacity-control input[type=range] {
    width: 100%;
    padding: 0;
}

.opacity-control strong {
    color: #f6f0e1;
    font-size: 12px;
    text-align: right;
}

.launcher-preview {
    position: relative;
    aspect-ratio: 1365 / 768;
    min-height: 0;
    max-height: 768px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    background: #070807;
}

.launcher-preview-bg,
.launcher-preview-gradient,
.launcher-preview-shade {
    position: absolute;
    inset: 0;
}

.launcher-preview-bg {
    background-position: center;
    background-size: cover;
    opacity: 0.85;
    transition: background-image .22s ease, opacity .22s ease;
}

.launcher-preview-gradient {
    z-index: 1;
    opacity: .82;
    transition: background .18s ease, opacity .18s ease;
}

.launcher-preview-shade {
    z-index: 2;
}

.launcher-preview-shade {
    background: radial-gradient(circle at 70% 35%, rgba(0,0,0,0.05), rgba(0,0,0,0.8));
}

.launcher-preview-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 22px;
    color: var(--theme-text, #f6f0e1);
    font-family: var(--theme-font, "Segoe UI", Arial, sans-serif);
}

.preview-titlebar {
    display: grid;
    grid-template-columns: 38px auto 1fr;
    gap: 12px;
    align-items: center;
    height: 54px;
}

.preview-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--theme-accent, #ffd889);
    border-radius: 8px;
    color: var(--theme-primary, #ffd889);
    background: var(--theme-panel, #0b1010);
    font-weight: 900;
}

.preview-titlebar strong {
    display: block;
    color: var(--theme-text, #f6f0e1);
    font-size: 20px;
    line-height: 1.05;
}

.preview-titlebar span,
.launcher-preview span,
.launcher-preview p {
    color: var(--theme-muted, #afa894);
}

.preview-window-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.preview-window-buttons i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--theme-accent, #ffd889);
    border-radius: 6px;
    color: var(--theme-text, #f6f0e1);
    background: var(--theme-panel, #0b1010);
    font-style: normal;
}

.preview-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 340px;
    gap: 16px;
    height: calc(100% - 68px);
    margin-top: 14px;
}

.launcher-preview aside,
.launcher-preview section,
.preview-status,
.preview-log {
    border: 1px solid var(--theme-accent, #ffd889);
    border-radius: 8px;
    background: var(--theme-panel, #0b1010);
    padding: 16px;
    opacity: .94;
}

.launcher-preview aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.launcher-preview aside p,
.preview-hero p,
.preview-patch span {
    margin: 0;
}

.launcher-preview aside h5,
.preview-list h5,
.preview-patch h5 {
    margin: 0;
    color: var(--theme-text, #f6f0e1);
    font-size: 18px;
}

.launcher-preview nav {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.launcher-preview nav b {
    color: var(--theme-text, #f6f0e1);
    font-size: 12px;
}

.preview-status {
    margin-top: auto;
    display: grid;
    gap: 6px;
}

.preview-status strong,
.preview-log b,
.preview-patch strong {
    color: var(--theme-primary, #ffd889);
}

.launcher-preview aside strong {
    color: var(--theme-primary, #ffd889);
}

.preview-shell main {
    display: grid;
    grid-template-rows: 198px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

.preview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 14px;
    min-height: 0;
    align-items: center;
}

.preview-online {
    text-align: right;
}

.preview-online strong {
    color: #6ff77a;
}

.preview-patch strong,
.preview-row .preview-offline-text {
    color: #ff5b5b;
}

.preview-row .preview-online-text {
    color: #6ff77a;
}

.preview-row .preview-checking-text {
    color: var(--theme-primary, #ffd889);
}

.preview-list {
    min-height: 0;
}

.launcher-preview h4 {
    margin: 8px 0 12px;
    font-size: 34px;
    line-height: 1.05;
    color: var(--theme-text, #f6f0e1);
}

.preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ffd889) 35%, transparent);
    border-radius: 7px;
    background: var(--theme-panel-soft, #121717);
}

.preview-row b {
    color: var(--theme-text, #f6f0e1);
}

.preview-row span {
    text-align: right;
    color: var(--theme-primary, #ffd889);
}

.muted-row {
    opacity: .72;
}

.preview-patch {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 0;
}

.preview-log {
    min-height: 90px;
    display: grid;
    gap: 8px;
}

.launcher-preview button {
    margin-top: auto;
    background: var(--theme-button, #ffd889);
    color: var(--theme-button-text, #160f06);
}

.preview-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--theme-secondary, #303a31);
}

.preview-progress.small {
    height: 8px;
}

.preview-progress i {
    display: block;
    width: 68%;
    height: 100%;
    background: var(--theme-primary, #ffd889);
}

@media(max-width:1200px){
    .theme-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:900px){
    .server-form .form-grid {
        grid-template-columns: 1fr;
    }

    .launcher-theme-editor,
    .theme-color-grid {
        grid-template-columns: 1fr;
    }

    .launcher-preview {
        position: relative;
        top: auto;
    }

    .launcher-preview-content {
        grid-template-columns: 1fr;
    }
}