/* ========== 星际舰队 - 深空主题 ========== */

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    color: #dbe8ff;
    background: #070b16;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1.5px 1.5px at 42% 30%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 55% 78%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1.5px 1.5px at 68% 15%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 80% 50%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1.5px 1.5px at 90% 82%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 96% 35%, rgba(255, 255, 255, .35), transparent),
        linear-gradient(180deg, #0a0f22 0%, #0d1430 40%, #070b16 100%);
    background-attachment: fixed;
}

/* ========== 顶部状态栏 ========== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(10, 16, 34, .85);
    border-bottom: 1px solid rgba(90, 160, 255, .25);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #7fd6ff, #3b82f6 60%, #1e3a8a);
    box-shadow: 0 0 14px rgba(80, 160, 255, .7);
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffd24f, #f97316 70%);
}

.brand h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: 4px;
    color: #eaf4ff;
    text-shadow: 0 0 18px rgba(90, 180, 255, .6);
}

.topstats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9fb4d8;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(90, 160, 255, .15);
    border-radius: 20px;
    padding: 5px 12px;
}

.stat b {
    color: #ffe9a8;
    font-size: 14px;
}

/* ========== 每秒产出横条 ========== */

.sec-bar {
    position: sticky;
    top: 60px;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 20px;
    background: rgba(10, 16, 34, .85);
    border-bottom: 1px solid rgba(90, 160, 255, .15);
    backdrop-filter: blur(8px);
}

.sec-label {
    font-size: 13px;
    color: #7e93ba;
    flex: none;
}

.sec-none {
    font-size: 12px;
    color: #5a6d92;
}

/* ========== 布局 ========== */

.layout {
    width: 100%;
    padding: 20px 20px 50px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.panel {
    background: rgba(13, 20, 44, .6);
    border: 1px solid rgba(90, 160, 255, .18);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid rgba(90, 160, 255, .15);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.panel-head h2 {
    margin: 0;
    font-size: 18px;
    color: #eaf4ff;
    letter-spacing: 2px;
}

.panel-head .sub {
    font-size: 12px;
    color: #7e93ba;
}

.hl {
    color: #ffe9a8;
}

.sub-head {
    margin: 18px 0 10px;
}

.sub-head h3 {
    margin: 0;
    font-size: 14px;
    color: #9fb4d8;
    letter-spacing: 1px;
}

/* ========== 卡片网格 ========== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.bp-grid,
.built-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(90, 160, 255, .14);
    border-radius: 10px;
    padding: 12px;
    transition: border-color .2s, transform .2s;
}

.card:hover {
    border-color: rgba(120, 190, 255, .4);
    transform: translateY(-2px);
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.card-head h3 {
    margin: 0;
    font-size: 15px;
    color: #eaf4ff;
}

.tag {
    font-size: 11px;
    color: #7fd6ff;
    background: rgba(80, 170, 255, .12);
    border: 1px solid rgba(80, 170, 255, .3);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

.desc {
    margin: 0 0 8px;
    font-size: 12px;
    color: #7e93ba;
}

.empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: #5a6d92;
    text-align: center;
}

/* ========== 资源色点 ========== */

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.dot.big {
    width: 34px;
    height: 34px;
}

.dot.energy { background: #ffd24f; box-shadow: 0 0 8px rgba(255, 210, 79, .8); }
.dot.resource { background: #ff9d4f; box-shadow: 0 0 8px rgba(255, 157, 79, .6); }
.dot.ship { background: #4fa3ff; box-shadow: 0 0 8px rgba(79, 163, 255, .7); }
.dot.planet { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, .7); }
.dot.building { background: #9ca3af; }

/* ========== 生产 ========== */

.io-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
}

.io-label {
    color: #7e93ba;
    flex: none;
}

.io-label.none {
    color: #5a6d92;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #c9d9f5;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(120, 180, 255, .15);
    border-radius: 10px;
    padding: 2px 8px;
}

.btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #071223;
    background: linear-gradient(135deg, #6fd1ff, #3b82f6);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
    transition: filter .15s, opacity .15s;
}

.btn:hover:not(:disabled) {
    filter: brightness(1.15);
}

.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.btn.small {
    width: auto;
    margin-top: 0;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
}

.btn.danger {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
}

.btn.active {
    outline: 2px solid #ffd24f;
    outline-offset: 1px;
}

.cost {
    font-weight: 500;
    margin-left: 6px;
}

.cost.ok { color: #86efac; }
.cost.lack { color: #f87171; }

/* ========== 已建造工厂 ========== */

.built-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.built-head h3 {
    margin: 0;
    font-size: 14px;
    color: #eaf4ff;
}

.built-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.lvl {
    font-size: 11px;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(167, 139, 250, .15);
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

.built-card.offline {
    opacity: .65;
}

.status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.status.run { color: #86efac; background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3); }
.status.wait { color: #ffe9a8; background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .3); }
.status.stop { color: #9ca3af; background: rgba(156, 163, 175, .1); border: 1px solid rgba(156, 163, 175, .3); }

.progress {
    height: 8px;
    background: rgba(255, 255, 255, .08);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.bar {
    height: 100%;
    background: linear-gradient(90deg, #4fd1ff, #a78bfa);
    border-radius: 6px;
    transition: width .3s;
    box-shadow: 0 0 8px rgba(79, 209, 255, .6);
}

.built-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.built-actions .btn.small {
    flex: 1;
    min-width: 64px;
}

.built-actions .btn.small .cost {
    margin-left: 4px;
    font-size: 11px;
}

/* ========== 仓库（紧凑资源条） ========== */

.res-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.res-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.res-item .rname {
    color: #9fb4d8;
}

.res-item .rcnt {
    color: #ffe9a8;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ========== 舰队 ========== */

.owned {
    font-size: 13px;
    color: #9fb4d8;
    margin-bottom: 2px;
}

.owned b {
    color: #4fa3ff;
    font-size: 16px;
}

/* ========== 征服（列表） ========== */

.list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(90, 160, 255, .14);
    border-radius: 10px;
    padding: 10px 12px;
    transition: border-color .2s;
}

.planet-row:hover {
    border-color: rgba(120, 190, 255, .4);
}

.planet-row.conquered {
    opacity: .55;
    border-color: rgba(74, 222, 128, .3);
}

.planet-row.conquered .row-head b {
    color: #86efac;
}

.row-info {
    flex: 1;
    min-width: 0;
}

.row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.row-head b {
    color: #eaf4ff;
    font-size: 14px;
}

.cq-btn {
    width: auto;
    flex: none;
    min-width: 64px;
    margin-top: 0;
}

/* ========== 统计 ========== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card span {
    font-size: 13px;
    color: #9fb4d8;
}

.stat-card b {
    font-size: 18px;
    color: #ffe9a8;
}

.per-sec {
    margin-top: 4px;
}

/* ========== 研究 ========== */

.effect {
    font-size: 13px;
    color: #9fb4d8;
    margin-bottom: 2px;
}

.effect b {
    color: #a78bfa;
    font-size: 15px;
}

.save-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(90, 160, 255, .15);
}

.save-area .btn {
    width: auto;
    margin-top: 0;
}

.msg {
    font-size: 13px;
    color: #86efac;
}

.saved {
    font-size: 12px;
    color: #5a6d92;
    margin-left: auto;
}

/* ========== 响应式 ========== */

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

    .col-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .col-main {
        grid-column: auto;
    }

    .sec-bar {
        position: static;
    }
}

@media (max-width: 640px) {
    .layout {
        padding: 14px 10px 50px;
    }

    .topbar {
        padding: 10px 14px;
    }

    .panel {
        padding: 12px;
    }

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