:root {
            --bg: radial-gradient(1200px 700px at 10% 10%, #1b1b2f 0%, #0f1222 40%, #0b0d18 100%);
            --glass: rgba(255, 255, 255, .08);
            --text: #e9eefc;
            --muted: #a7b1c8;
            --card-radius: 20px;
            --shadow: 0 10px 30px rgba(0, 0, 0, .35);
            --a1: #7df9c4;
            --a2: #66e1ff
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font: 14px/1.4 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden
        }

        .wrap {
            height: calc(100vh - 56px);
            max-width: 1280px;
            margin: 28px auto;
            padding: 0 16px 32px;
            position: relative;
        }

        .wrap .copy {
            width: 100%;
            height: 26px;
            line-height: 26px;
            position: absolute;
            padding: 20px 0;
            left: 0px;
            bottom: 0px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text);
        }

        .wrap .copy a {
            color: var(--text);
            text-decoration: none;
            padding-left: 20px;
        }

        .wrap .copy a:hover {
            color: var(--muted);
        }
        
        .tj_website {
            width:100%;
            padding: 20px 0;
        }
        
        .tj_website a {
            color: var(--text);
            text-decoration: none;
            padding-right: 20px;
            padding-bottom: 10px;
        }
        
        .tj_website a:hover {
            color: var(--muted);
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
            font-size: clamp(20px, 3vw, 28px);
            letter-spacing: .2px
        }

        .dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, var(--a2), var(--a1), var(--a2));
            box-shadow: 0 0 16px var(--a2), 0 0 26px var(--a1)
        }

        .sub {
            color: var(--muted);
            font-weight: 500
        }

        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }

        .switch {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--glass);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 999px;
            backdrop-filter: blur(10px)
        }

        .switch input {
            appearance: none;
            width: 44px;
            height: 24px;
            background: #3a3f55;
            border-radius: 999px;
            position: relative;
            cursor: pointer
        }

        .switch input:before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            transition: .25s;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .35)
        }

        .switch input:checked {
            background: #1e9fff
        }

        .switch input:checked:before {
            transform: translateX(20px)
        }

        .hint {
            color: var(--muted)
        }

        .lang a {
            color: #cfe6ff;
            text-decoration: none;
            padding: 8px 10px;
            border-radius: 10px;
            background: var(--glass);
            border: 1px solid rgba(255, 255, 255, .12)
        }

        .gear {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: var(--glass);
            border: 1px solid rgba(255, 255, 255, .12);
            cursor: pointer
        }

        .gear svg {
            width: 20px;
            height: 20px;
            fill: #cfe6ff
        }
        
        button.gear{
          appearance:none; -webkit-appearance:none;
          padding:0; margin:0; cursor:pointer;
          width:38px; height:38px; border-radius:12px;
          background:var(--glass); border:1px solid rgba(255,255,255,.12);
          display:grid; place-items:center;
        }
        button.gear:focus-visible{outline:2px solid rgba(102,225,255,.6); outline-offset:2px}
        button.gear svg{pointer-events:none}

        .rail {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            padding: 68px 0 20px;
            scroll-snap-type: x mandatory;
            cursor: grab
        }

        .rail.dragging {
            cursor: grabbing
        }

        .rail::-webkit-scrollbar {
            height: 10px
        }

        .rail::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .18);
            border-radius: 999px
        }

        .rail::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .06);
            border-radius: 999px
        }

        .card {
            flex: 0 0 340px;
            scroll-snap-align: start;
            position: relative;
            border-radius: var(--card-radius);
            background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
            border: 1px solid rgba(255, 255, 255, .12);
            padding: 16px 16px 18px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .card:before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -1;
            border-radius: inherit;
            background: conic-gradient(from calc(var(--h, 0)*1deg), var(--a2), var(--a1), #a58bff, var(--a2));
            filter: blur(20px);
            opacity: .35
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 36px rgba(0, 0, 0, .45)
        }

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

        .flag {
            font-size: 22px;
            margin-right: 6px
        }

        .place {
            font-weight: 800
        }

        .tz {
            color: var(--muted);
            font-size: 12px
        }

        .clock {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 14px 0 8px
        }

        .dial {
            position: relative;
            width: 120px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .2);
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 40%),
                conic-gradient(from 0deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06)),
                radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6) 60%);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), inset 0 0 30px rgba(0, 0, 0, .4)
        }

        .ticks {
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            background:
                repeating-conic-gradient(rgba(255, 255, 255, .8) 0deg 1deg, transparent 1deg 6deg),
                repeating-conic-gradient(#fff 0deg 2deg, transparent 2deg 30deg);
            -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 79% 100%);
            mask: radial-gradient(circle, transparent 0 78%, #000 79% 100%)
        }

        .num {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font: 800 12px/1 ui-sans-serif;
            color: #eaf3ff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
            pointer-events: none
        }

        .center-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 8px rgba(255, 255, 255, .9)
        }

        .hand {
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: 50% 90%;
            transform: translate(-50%, -90%) rotate(0deg)
        }

        .hand.hour {
            width: 5px;
            height: 34%;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .5)
        }

        .hand.min {
            width: 3px;
            height: 45%;
            background: #d8e4ff;
            border-radius: 4px;
            opacity: .95
        }

        .hand.sec {
            width: 2px;
            height: 52%;
            background: var(--a1);
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(98, 246, 201, .8)
        }

        .digital {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .time {
            font: 600 22px/1.1 ui-monospace, Menlo, Consolas, monospace;
            letter-spacing: .5px
        }

        .date {
            color: var(--muted)
        }

        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 12px;
            color: #0b0d18;
            font-weight: 800;
            background: linear-gradient(90deg, var(--a1), var(--a2));
            margin-left: 6px
        }

        /* 设置面板 */
        .panel {
            position: fixed;
            right: 16px;
            top: 64px;
            width: min(92vw, 420px);
            z-index: 99;
            background: rgba(10, 14, 24, .94);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 16px;
            box-shadow: var(--shadow);
            display: none
        }

        .panel.open {
            display: block
        }

        .panel header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, .08)
        }

        .panel .body {
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .panel .list {
            max-height: 50vh;
            overflow: auto;
            padding: 2px
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 8px;
            border: 1px dashed rgba(255, 255, 255, .18);
            border-radius: 10px;
            background: rgba(255, 255, 255, .04)
        }

        .item .left {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .drag {
            cursor: grab
        }

        .item.dragging {
            opacity: .6
        }

        .actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            padding: 10px 14px;
            border-top: 1px solid rgba(255, 255, 255, .08)
        }

        .btn {
            padding: 8px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, .2);
            cursor: pointer
        }

        .btn.primary {
            background: linear-gradient(90deg, var(--a1), var(--a2));
            color: #071720;
            font-weight: 900
        }

        .btn.ghost {
            background: transparent;
            color: #e9eefc
        }

        /* Google 搜索框 */
        .search {
            position: relative;
            margin-top: 188px;
        }

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

        .search input[type="text"] {
            flex: 1;
            height: 56px;
            padding: 0 16px 0 44px;
            /* 左侧给图标留空 */
            font-size: 16px;
            letter-spacing: .2px;
            color: var(--text, #e9eefc);
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .22);
            background: rgba(0, 0, 0, .35);
            outline: none;
            transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
            /* 放大镜图标（SVG） */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='%239fb4ff' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 14px center;
            background-size: 20px 20px;
        }

        .search input[type="text"]::placeholder {
            color: var(--muted, #a7b1c8)
        }

        .search input[type="text"]:focus {
            border-color: transparent;
            box-shadow: 0 0 0 2px rgba(102, 225, 255, .6), 0 8px 24px rgba(0, 0, 0, .55);
            transform: translateY(-1px);
        }

        .search button {
            height: 56px;
            padding: 0 20px;
            min-width: 148px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .22);
            background: linear-gradient(90deg, var(--a1, #7df9c4), var(--a2, #66e1ff));
            color: #06171f;
            font-weight: 900;
            letter-spacing: .3px;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
            transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
        }

        .search button:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
            filter: brightness(1.05);
        }

        .search button:active {
            transform: translateY(0);
            box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
        }

        /* 小屏：按钮换行更突出 */
        @media (max-width: 560px) {
            .search form {
                flex-direction: column;
                align-items: stretch
            }

            .search button {
                width: 100%
            }
        }

        /* 语言下拉框（select#langSel.lang） */
        .controls .lang {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding: 8px 36px 8px 12px;
            border-radius: 12px;
            cursor: pointer;
            color: var(--text, #e9eefc);
            background: var(--glass, rgba(255, 255, 255, .08));
            border: 1px solid rgba(255, 255, 255, .12);
            backdrop-filter: blur(10px)
        }

        .controls .lang:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(102, 225, 255, .35)
        }

        /* 自定义下拉箭头 */
        .controls .lang {
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23cfe6ff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px 16px
        }

        /* 选项配色（部分浏览器支持） */
        .controls .lang option {
            color: #0b0d18;
            background: #ffffff
        }

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

        /* 小屏优化 */
        @media (max-width:480px) {
            .search button {
                padding: 10px 12px
            }

            .controls .lang {
                padding: 8px 34px 8px 10px
            }
        }