/* ===========================================================
   哪吒 ADB 解锁 — 单一自适应样式表
   一套布局同时适配手机 / 平板 / 桌面，图标全部为内联 SVG
   =========================================================== */

:root {
    --brand: #4DA89D;
    --brand-light: #5bb6aa;
    --brand-deep: #3d8d83;
    --brand-ink: #2b7a71;
    --brand-soft: #eaf5f3;

    --ink: #0f1e2b;
    --ink-2: #44586a;
    --muted: #7d8fa0;
    --line: #e4ecef;

    --radius: 18px;
    --radius-sm: 12px;

    --shadow-card: 0 1px 2px rgba(15, 30, 43, .04), 0 16px 36px -26px rgba(15, 30, 43, .3);
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --shell: 1120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 组件用了 display:flex/grid，会盖掉浏览器默认的 [hidden] 规则，这里补回来 */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
    color: var(--ink);
    background: #f4f9f8;
    background-image: linear-gradient(180deg, #e7f3f1 0%, #f3f9f8 380px, #f6fafb 100%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 外壳 ---------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 18px 16px calc(30px + env(safe-area-inset-bottom));
}

/* ---------- 顶栏 ---------- */
.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(150deg, var(--brand-light), var(--brand-deep));
    box-shadow: 0 9px 20px -9px rgba(77, 168, 157, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.brand-mark svg {
    width: 23px;
    height: 23px;
}

.brand-text {
    min-width: 0;
}

.brand-text h1 {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
}

.brand-text p {
    margin-top: 3px;
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: .01em;
    white-space: nowrap;
}

/* 日期控件 */
.date-ctrl {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 5px 5px 12px;
    background: #fff;
    border: 1px solid rgba(15, 30, 43, .07);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 30, 43, .04), 0 10px 22px -18px rgba(15, 30, 43, .45);
}

.date-ctrl-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--brand);
    opacity: .85;
}

.date-ctrl input[type="date"] {
    flex: 1;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.date-ctrl input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .4;
    cursor: pointer;
}

.today-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .16s ease, transform .12s ease;
}

.today-btn:hover {
    filter: brightness(.96);
}

.today-btn:active {
    transform: scale(.95);
}

/* ---------- 布局：单列 → 双列 ---------- */
.layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "gen"
        "list";
}

.panel-gen {
    grid-area: gen;
}

.panel-list {
    grid-area: list;
}

/* ---------- 面板 ---------- */
.panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(15, 30, 43, .055);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    margin-bottom: 12px;
}

.panel-head h2 {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.panel-sub {
    font-size: .7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.panel-body {
    min-width: 0;
}

/* ---------- 分段切换 ---------- */
.tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: #f1f6f7;
    border-radius: 11px;
}

.tab {
    padding: 6px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.tab.is-active {
    background: #fff;
    color: var(--brand-ink);
    box-shadow: 0 1px 3px rgba(15, 30, 43, .13);
}

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-family: inherit;
    font-size: .71rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .16s ease, transform .12s ease;
}

.chip-btn svg {
    width: 13px;
    height: 13px;
}

.chip-btn:hover {
    filter: brightness(.96);
}

.chip-btn:active {
    transform: scale(.95);
}

/* ---------- 数字键盘 ---------- */
.digit-pad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.digit {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.digit:hover {
    border-color: #bfe0da;
    background: #fbfefd;
}

.digit:active {
    transform: scale(.94);
}

.digit.is-active {
    border-color: transparent;
    background: linear-gradient(155deg, var(--brand-light), var(--brand-deep));
    color: #fff;
    box-shadow: 0 9px 20px -9px rgba(77, 168, 157, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ---------- 结果区 ---------- */
.result {
    margin-top: 12px;
    padding: 12px 13px 13px;
    border: 1px solid rgba(77, 168, 157, .2);
    border-radius: 14px;
    background: linear-gradient(180deg, #f4faf9, #eaf5f3);
}

.result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.result-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--brand-ink);
}

.result-date {
    font-size: .7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.result-value {
    display: block;
    margin: 5px 0 1px;
    font-family: var(--mono);
    font-size: clamp(1.45rem, 4.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .1em;
    color: var(--brand-deep);
    word-break: break-all;
}

.result-value.is-empty {
    color: #aec9c5;
    letter-spacing: .16em;
}

.cmd-line {
    display: block;
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
    font-family: var(--mono);
    font-size: .66rem;
    line-height: 1.5;
    color: #5a6c7d;
    white-space: normal;
    overflow-wrap: anywhere;
}

.result-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.btn {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 11px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .12s ease, filter .18s ease, opacity .18s ease;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn.primary {
    background: linear-gradient(155deg, var(--brand-light), var(--brand-deep));
    color: #fff;
    box-shadow: 0 9px 20px -11px rgba(77, 168, 157, .95);
}

.btn.dark {
    background: rgba(255, 255, 255, .92);
    border: 1.5px solid rgba(15, 30, 43, .13);
    color: #3d5163;
}

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

.btn:active:not(:disabled) {
    transform: scale(.97);
}

.btn:disabled {
    opacity: .42;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- 列表 ---------- */
.list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(500px, 60vh);
    padding-right: 2px;
    padding-bottom: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d6e3e6 transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%);
}

.list::-webkit-scrollbar {
    width: 5px;
}

.list::-webkit-scrollbar-thumb {
    background: #d6e3e6;
    border-radius: 3px;
}

.row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 8px 8px 8px 11px;
    border-radius: 10px;
    background: #f7fafb;
    transition: background .16s ease, box-shadow .16s ease;
}

.row-key {
    cursor: pointer;
}

.row-key:hover {
    background: #eff7f6;
}

.row.is-active {
    background: #e8f4f2;
    box-shadow: inset 0 0 0 1px rgba(77, 168, 157, .32);
}

.row-kind {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.row.is-active .row-kind {
    color: var(--brand-ink);
}

.row.is-active .row-code {
    color: var(--brand-deep);
}

.row-code {
    min-width: 0;
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    color: var(--brand-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-btns {
    display: flex;
    gap: 5px;
}

.copy-ic {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #e3f2ef;
    color: var(--brand-deep);
    cursor: pointer;
    transition: transform .12s ease, filter .16s ease;
}

.copy-ic.dark {
    background: #e9eef2;
    color: #55697c;
}

.copy-ic svg {
    width: 15px;
    height: 15px;
}

.copy-ic:hover {
    filter: brightness(.96);
}

.copy-ic:active {
    transform: scale(.92);
}

.copy-ic:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ---------- 空状态 ---------- */
.empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 0;
    color: #b7c6d2;
    font-size: .78rem;
    text-align: center;
}

.empty-tip svg {
    width: 26px;
    height: 26px;
    opacity: .6;
}

/* ---------- 页脚 ---------- */
.page-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    font-size: .72rem;
    color: #a3b3c0;
    text-align: center;
}

.page-foot .dot {
    opacity: .6;
}

/* ---------- 轻提示 ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 12px;
    background: #10202c;
    color: #fff;
    font-size: .8rem;
    box-shadow: 0 16px 32px -14px rgba(16, 32, 44, .75);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(90px);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #4ade80;
}

/* ---------- 引擎隐藏区 ---------- */
#hidden-area {
    position: absolute;
    left: -99999px;
    top: -99999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===========================================================
   自适应断点
   =========================================================== */

/* 平板以上：日期控件回到右侧，按键放大 */
@media (min-width: 600px) {
    .shell {
        padding: 22px 20px calc(32px + env(safe-area-inset-bottom));
    }

    .masthead {
        flex-wrap: nowrap;
    }

    .date-ctrl {
        width: auto;
        min-width: 236px;
    }

    .digit {
        height: 56px;
    }

    .brand-text h1 {
        font-size: 1.12rem;
    }
}

/* 窄屏：整页收成一根居中的竖列，避免平板上单列被拉得过宽 */
@media (max-width: 719px) {
    .shell {
        max-width: 680px;
    }
}

/* 双列：生成器 + 列表并排 */
@media (min-width: 720px) {
    .layout {
        gap: 16px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "gen list";
        align-items: start;
    }

    .list {
        max-height: min(560px, calc(100vh - 260px));
    }
}

/* 宽屏：生成器收窄并固定在左侧 */
@media (min-width: 1180px) {
    .layout {
        grid-template-columns: minmax(320px, 372px) minmax(0, 1fr);
    }

    .panel-gen {
        position: sticky;
        top: 18px;
    }

    .list {
        max-height: min(620px, calc(100vh - 210px));
    }
}

/* 矮屏：压缩纵向尺寸 */
@media (max-height: 620px) and (min-width: 860px) {
    .digit {
        height: 46px;
    }

    .result-value {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}