/**
 * 道印奇门 · 样式
 * 与塔罗、六爻同源：全部挂在 .dnq-wrap 下，局部变量换肤，不污染主题。
 *
 * 深色底上的小字最容易「设计上好看、阅读上失效」，
 * 次要文字统一用 --ink-3（约 4.3:1），不要随手写 #6b6559 那种 3:1 的灰。
 */

.dnq-wrap {
    --g:        #c9a96e;
    --g-light:  #e0c088;
    --g-dim:    #8a7a5c;
    --line:     rgba(201, 169, 110, .22);
    --line-2:   rgba(201, 169, 110, .38);
    --ink:      #e8e6e1;
    --ink-dim:  #9a9488;
    --ink-3:    #837c70;
    --warn:     #b06a5a;
    --bg-cell:  #101119;
    --bg-soft:  rgba(201, 169, 110, .04);

    max-width: 980px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/*
 * [hidden] 会被作者样式盖掉。
 * 元素上一旦写了 display:flex/grid，浏览器默认的 [hidden]{display:none} 就失效，
 * 这个补丁在塔罗和六爻都踩过，别再漏。
 */
.dnq-wrap [hidden] { display: none !important; }

/*
 * 局部 border-box。
 * 不写的话 min-height 只算内容盒，加上 padding 会多出 25px，
 * 格子比自己以为的高一截，九宫格整体就扁不下来。
 */
.dnq-wrap,
.dnq-wrap *,
.dnq-wrap *::before,
.dnq-wrap *::after { box-sizing: border-box; }

/* ---------- 头部 ---------- */

.dnq-hd { margin-bottom: 40px; }
.dnq-crumb {
    font-size: 11.5px;
    letter-spacing: 1.4px;
    color: var(--ink-3);
    margin: 0 0 18px;
}
.dnq-crumb span { margin: 0 7px; opacity: .5; }
.dnq-crumb a { color: var(--ink-3); text-decoration: none; }
.dnq-crumb a:hover { color: var(--g); }

.dnq-title {
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 8px;
    color: var(--ink);
    margin: 0 0 14px;
}
.dnq-sub {
    font-size: 13.5px;
    line-height: 2;
    color: var(--ink-dim);
    max-width: 660px;
    margin: 0;
}

/* ---------- 表单 ---------- */

.dnq-form {
    padding: 26px 28px 24px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-bottom: 34px;
}

.dnq-row {
    display: flex;
    gap: 22px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dnq-row-ts { align-items: center; margin-bottom: 22px; }

.dnq-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
}
.dnq-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ink-3);
}

/*
 * 日期/时间控件在深色站点里默认是浅色方案，
 * color-scheme 不写就会出现白底黑字的方块，很跳。
 */
.dnq-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 11px 13px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--line);
    border-radius: 2px;
    outline: none;
    color-scheme: dark;
    transition: border-color .2s;
}
.dnq-input:focus { border-color: var(--line-2); }
.dnq-lon { flex: 0 0 128px; }

.dnq-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ink-dim);
    cursor: pointer;
    user-select: none;
}
.dnq-check input {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background .18s;
}
.dnq-check input:checked { background: var(--g); border-color: var(--g); }
.dnq-check input:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #12131a;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
}

.dnq-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.dnq-btn {
    -webkit-appearance: none;
    appearance: none;
    padding: 11px 30px;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 2px;
    color: var(--g);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.dnq-btn:hover { background: rgba(201, 169, 110, .09); color: var(--g-light); }
.dnq-btn-main {
    color: #14151c;
    background: var(--g);
    border-color: var(--g);
    font-weight: 500;
}
.dnq-btn-main:hover { background: var(--g-light); border-color: var(--g-light); color: #14151c; }

/* ---------- 局信息 ---------- */

.dnq-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}
.dnq-ju {
    font-size: 19px;
    letter-spacing: 3px;
    color: var(--g-light);
}
.dnq-meta-item {
    font-size: 12px;
    letter-spacing: .6px;
    color: var(--ink-3);
}
.dnq-meta-item b { color: var(--ink-dim); font-weight: 400; }

.dnq-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin-bottom: 26px;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .4px;
}
.dnq-facts b { color: var(--g-dim); font-weight: 400; margin-right: 5px; }

/* 置闰法未实现时的提示条：必须显眼，不能让用户误以为看的是置闰盘 */
.dnq-pending {
    margin: 0 0 22px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.85;
    color: #c9a17f;
    background: rgba(176, 106, 90, .08);
    border-left: 2px solid rgba(176, 106, 90, .55);
    border-radius: 2px;
}
.dnq-pending b { color: #dbb193; font-weight: 400; }

/* ---------- 九宫盘 ---------- */

.dnq-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.dnq-cell {
    position: relative;
    min-height: 172px;
    padding: 13px 14px 12px;
    background: var(--bg-cell);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    transition: background .2s;
}
.dnq-cell:hover { background: #14161f; }

.dnq-top,
.dnq-bot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dnq-god {
    font-size: 11.5px;
    letter-spacing: 1px;
    color: var(--g-dim);
}
.dnq-star {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--g);
    text-align: right;
}
.dnq-star em,
.dnq-door em {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0;
    padding: 1px 3px;
    margin-left: 3px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    color: var(--g-light);
    vertical-align: 2px;
}
.dnq-star em.dnq-em-zf { background: rgba(201, 169, 110, .16); }

/* 天禽寄坤二时跟在星后，比星低一档，别抢主星的位置 */
.dnq-star2 {
    font-size: 10px;
    letter-spacing: 0;
    color: var(--g-dim);
    margin-left: 4px;
}

/* 中列：天盘干在上、地盘干在下。天盘大而亮，地盘小而暗 */
.dnq-gans {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    line-height: 1;
}
/*
 * 中五寄干贴在右上角，不是跟在后面同一基线。
 * 同一基线会让小字掉到「丙」的脚下，读起来像另一个字。
 */
.dnq-gan-t {
    display: inline-flex;
    align-items: flex-start;
    font-size: 28px;
    line-height: 1;
    color: var(--ink);
}
.dnq-gan-t2 {
    font-size: 13px;
    line-height: 1;
    margin-left: 3px;
    margin-top: 2px;
    color: var(--ink-dim);
}
.dnq-gan-d {
    font-size: 15px;
    line-height: 1;
    color: var(--ink-3);
}

.dnq-door {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--g-light);
}
.dnq-door.dnq-door-xiong { color: #b98a72; }
.dnq-door em.dnq-em-po {
    border-color: rgba(176, 106, 90, .5);
    color: #c98b78;
}

/* 门与空/马贴在一起读，别让标签飘到格子中间 */
.dnq-door-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dnq-gong {
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--ink-3);
    opacity: .9;
}

.dnq-tags { display: flex; gap: 5px; }
.dnq-tags i {
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0;
    padding: 1px 4px;
    border-radius: 2px;
    border: 1px solid var(--line);
    color: var(--ink-3);
}
.dnq-tags i.dnq-kong {
    border-style: dashed;
    color: var(--ink-dim);
}
.dnq-tags i.dnq-ma {
    border-color: rgba(201, 169, 110, .45);
    color: var(--g);
}

/* 中五宫：不临星门神，只放地盘干 */
.dnq-center {
    align-items: center;
    justify-content: center;
    background: #0d0e15;
}
.dnq-center .dnq-gan-d { font-size: 19px; }
.dnq-center .dnq-gong { margin-top: 8px; }

/* 值符宫轻微描边，值使宫换个角标 */
.dnq-cell.dnq-is-zf { background: #14151e; }
.dnq-cell.dnq-is-zf::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 169, 110, .3);
    pointer-events: none;
}

.dnq-board-note {
    font-size: 11.5px;
    line-height: 1.95;
    color: var(--ink-3);
    margin: 14px 0 0;
    letter-spacing: .3px;
}

/* ---------- 看盘提示 ---------- */

.dnq-reading { margin-top: 44px; }

.dnq-reading-hd {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--g-dim);
    font-weight: 400;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.dnq-sec { margin-bottom: 26px; }
.dnq-sec-h {
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--g);
    margin: 0 0 9px;
    font-weight: 400;
}
.dnq-sec p {
    font-size: 13.5px;
    line-height: 2.05;
    color: var(--ink-dim);
    margin: 0 0 8px;
}
.dnq-sec p:last-child { margin-bottom: 0; }
.dnq-sec p b { color: var(--ink); font-weight: 400; }

.dnq-quiet {
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--ink-3);
}

/* ---------- 免责 ---------- */

.dnq-disclaimer {
    max-width: 700px;
    margin: 56px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(201, 169, 110, .1);
    font-size: 12px;
    line-height: 1.9;
    color: var(--ink-3);
    text-align: center;
    letter-spacing: .3px;
}

/* ---------- 手机端 ---------- */

@media (max-width: 720px) {
    .dnq-wrap { padding: 26px 16px 60px; }

    .dnq-title { font-size: 22px; letter-spacing: 5px; }
    .dnq-sub { font-size: 12.5px; line-height: 1.95; }

    .dnq-form { padding: 20px 18px 18px; }
    .dnq-row { gap: 14px; margin-bottom: 16px; }
    .dnq-field { flex: 1 1 100%; }
    .dnq-lon { flex: 0 0 104px; }
    .dnq-btn { flex: 1 1 auto; padding: 11px 18px; }

    /*
     * 九宫在手机上不改成列表——3×3 就是奇门的形状，
     * 拆成列表反而看不出方位关系。只压缩尺寸与字号。
     */
    .dnq-cell { min-height: 124px; padding: 9px 9px 8px; gap: 3px; }
    .dnq-god { font-size: 10px; letter-spacing: 0; }
    .dnq-star { font-size: 11px; letter-spacing: 0; }
    .dnq-star em, .dnq-door em { font-size: 8px; padding: 0 2px; margin-left: 2px; vertical-align: 1px; }
    .dnq-gan-t { font-size: 21px; }
    .dnq-gan-t2 { font-size: 12px; }
    .dnq-gan-d { font-size: 13px; }
    .dnq-door { font-size: 11px; letter-spacing: 0; }
    .dnq-gong { font-size: 9.5px; letter-spacing: 0; }
    .dnq-tags { gap: 3px; }
    .dnq-tags i { font-size: 8.5px; padding: 0 3px; }
    .dnq-center .dnq-gan-d { font-size: 16px; }

    .dnq-ju { font-size: 16px; letter-spacing: 2px; }
    .dnq-meta-item { font-size: 11px; }
    .dnq-facts { gap: 5px 16px; font-size: 11px; }

    .dnq-sec p { font-size: 13px; line-height: 1.95; }
}