:root {
    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --red: #ef4444;
    --red-hover: #dc2626;
    --green: #16a34a;
    --amber: #d97706;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
}

/* 浅色主题属性 */
:root[data-theme="light"] {
    --bg: #f8fafc;
    --bg-raised: #ffffff;
    --bg-surface: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #334155;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --text-bright: #0f172a;
}

/* 深色主题属性 */
:root[data-theme="dark"] {
    --bg: #0c0a09;
    --bg-raised: #1c1917;
    --bg-surface: #292524;
    --border: #332f2c;
    --border-strong: #57534e;
    --text: #e7e5e4;
    --text-muted: #a8a29e;
    --text-faint: #78716c;
    --text-bright: #fafaf9;
}

/* 系统跟随模式 (auto) */
:root[data-theme="auto"] {
    --bg: #0c0a09;
    --bg-raised: #1c1917;
    --bg-surface: #292524;
    --border: #332f2c;
    --border-strong: #57534e;
    --text: #e7e5e4;
    --text-muted: #a8a29e;
    --text-faint: #78716c;
    --text-bright: #fafaf9;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        --bg: #f8fafc;
        --bg-raised: #ffffff;
        --bg-surface: #f1f5f9;
        --border: #e2e8f0;
        --border-strong: #cbd5e1;
        --text: #334155;
        --text-muted: #64748b;
        --text-faint: #94a3b8;
        --text-bright: #0f172a;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-raised);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 标题左对齐，控制器右对齐 */
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--text-bright);
    white-space: nowrap;
}

/* 顶部右侧控制器组合 */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subtitle {
    font-size: 0.75rem;
    color: var(--text-faint);
    max-width: 1200px;
    margin: 0.25rem auto 0;
}

main {
    flex: 1;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: 0.5rem;
}

.toolbar-left {
    flex: 1;
    min-width: 280px;
}

input[type="text"],
input[type="number"],
input[type="password"],
select {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-bright);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    border-radius: 6px;
    transition: all 0.15s;
}

input:focus, select:focus {
    border-color: var(--blue);
}

#search-input { flex: 1; }

.btn {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.btn-primary { background-color: var(--blue); color: #ffffff; }
.btn-primary:hover { background-color: var(--blue-hover); }
.btn-secondary { background-color: var(--bg-surface); color: var(--text); border-color: var(--border); }
.btn-danger { background-color: var(--red); color: #ffffff; }
.btn-danger:hover { background-color: var(--red-hover); }
.btn-sm { font-size: 0.75rem; padding: 0.35rem 0.65rem; }

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= 桌面端表格排版 ================= */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

thead { background-color: var(--bg-surface); }
th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background-color: var(--bg-surface); }

.type-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background-color: var(--bg-surface);
    color: var(--text-bright);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 3.2rem;
    text-align: center;
}

.record-name {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-bright);
}

.record-content {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.ttl-val { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
.proxied-on { color: var(--amber); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; }
.proxied-off { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.75rem; }

/* 网页端 Actions 保证单行并排且右对齐 */
.actions-col {
    text-align: right;
    white-space: nowrap !important;
}
td.actions-col {
    white-space: nowrap !important;
}
td.actions-col .btn {
    display: inline-block;
    margin-left: 0.4rem;
}

.loading, .error {
    text-align: center;
    padding: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}
.error { border: 1px solid var(--red); color: var(--red); background: var(--bg-raised); border-radius: 8px; }

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal {
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.modal-body { padding: 1.25rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.form-group input, .form-group select { width: 100%; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 0.6rem 1rem;
    z-index: 200;
}
.toast.toast-success { border-color: var(--green); color: var(--green); }
.toast.toast-error { border-color: var(--red); color: var(--red); }

/* ================= 移动端精准两行卡片排版 ================= */
@media (max-width: 768px) {
    header { padding: 0.75rem 1rem; }
    h1 { font-size: 1rem; }
    #profile-select { max-width: 140px; font-size: 0.8rem; padding: 0.35rem 0.5rem; }
    
    main { padding: 0.75rem; }
    .toolbar { flex-direction: column; gap: 0.5rem; }
    .toolbar-left, .toolbar-right { width: 100%; gap: 0.4rem; }
    #search-input { min-width: 0; font-size: 0.8rem; }
    #type-filter { width: 95px; font-size: 0.8rem; }
    .toolbar-right .btn { flex: 1; padding: 0.5rem; font-size: 0.8rem; }

    table, thead, tbody, th, td, tr { display: block; width: 100%; }
    thead { display: none; }
    tbody { display: flex; flex-direction: column; gap: 0.65rem; }

    /* 单张卡片三行式网格 */
    tr {
        background-color: var(--bg-raised);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "type name name"
            "content content meta"
            "actions actions actions";
        gap: 0.45rem 0.5rem;
        align-items: center;
    }

    td {
        border-bottom: none;
        padding: 0;
    }

    td::before { display: none !important; }

    /* 第 1 行：Type 徽章 + 域名 */
    td.col-type {
        grid-area: type;
    }
    td.col-name {
        grid-area: name;
    }
    .record-name {
        font-size: 0.9rem;
        word-break: break-all;
    }

    /* 第 2 行：左侧 IP/Content，右侧 TTL 与 Proxied 单独并排 */
    td.col-content {
        grid-area: content;
        min-width: 0;
    }
    .record-content {
        max-width: 100%;
        font-size: 0.8rem;
        color: var(--text-bright);
    }

    td.col-ttl {
        grid-area: meta;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        margin-right: 4.5rem; /* 为右侧的 Proxied 留出空间，彻底杜绝重合 */
    }

    td.col-proxied {
        grid-area: meta;
        justify-self: end;
        display: inline-flex;
        align-items: center;
    }

    /* 第 3 行：Edit 与 Del 满宽铺开 */
    td.actions-col {
        grid-area: actions;
        width: 100%;
        display: flex;
        gap: 0.5rem;
        margin-top: 0.35rem;
        padding-top: 0.45rem;
        border-top: 1px solid var(--border);
    }
    td.actions-col .btn {
        flex: 1;
        margin: 0;
        padding: 0.45rem;
        font-size: 0.75rem;
    }
}