/* ====== Auto-Zimu 科技感 UI —— 赛博极客风 ====== */
.auto-zimu {
  margin: 1.5em 0;
  font-size: 14px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: rgba(10, 12, 24, 0.6); /* 深空背景 */
  backdrop-filter: blur(10px); /* 玻璃模糊效果（支持浏览器） */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(64, 224, 208, 0.1); /* 内发光边框 */
  border: 1px solid rgba(64, 224, 208, 0.15);
}

/* 输入框 —— 荧光聚焦 */
.auto-zimu-input {
  width: 88%;
  height: 348px;
  resize: vertical;
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(18, 20, 32, 0.8);
  color: #e0f7fa;
  border: 1px solid rgba(64, 224, 208, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 1px rgba(64, 224, 208, 0.2);
}
.auto-zimu-input:focus {
  border-color: #00eeff;
  box-shadow:
    0 0 0 2px rgba(0, 238, 255, 0.4),
    inset 0 0 8px rgba(0, 200, 255, 0.2);
  background: rgba(20, 22, 36, 0.9);
}

/* 工具栏 */
.auto-zimu-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-start;
}

/* 按钮 —— 发光科技感 */
.auto-zimu-tools button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0a2a4d, #0d4a70);
  border: 1px solid rgba(64, 224, 208, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.auto-zimu-tools button:hover {
  background: linear-gradient(135deg, #0d4a70, #0a6ea8);
  border-color: rgba(0, 238, 255, 0.6);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 200, 255, 0.25),
    0 0 0 2px rgba(0, 238, 255, 0.3);
}
.auto-zimu-tools button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.auto-zimu-tools button:focus {
  outline: none;
}

/* 预览容器 —— 代码终端风格 */
.auto-zimu-preview-border {
  margin-top: 14px;
  padding: 12px;
  background: rgba(15, 18, 30, 0.85);
  border: 1px solid rgba(64, 224, 208, 0.2);
  border-radius: 8px;
  width: 95%;
  min-height: 348px;
  position: relative;
}
.auto-zimu-preview-border::before {
  content: "OUTPUT";
  position: absolute;
  top: -10px;
  left: 12px;
  background: #0a192f;
  color: #4cc9f0;
  font-size: 10px;
  font-weight: bold;
  padding: 0 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 预览内容 —— 等宽字体 + 荧光文本 */
.auto-zimu-preview {
  font-family: 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #a0f0ff;
  white-space: pre-wrap;
  word-break: break-all;
  display: none;
  text-shadow: 0 0 6px rgba(0, 238, 255, 0.3);
}
.auto-zimu-preview:not(:empty) {
  display: block;
}
/* ====== Auto-Zimu 表格组件 —— 赛博科技风 ====== */
.auto-zimu h2 {
  color: #4cc9f0;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 表格容器 */
#wrap {
  background: rgba(15, 18, 30, 0.85);
  border: 1px solid rgba(64, 224, 208, 0.2);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 表格基础 */
#sheet {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  color: #a0f0ff;
  font-size: 13px;
}

#sheet thead tr {
  background: linear-gradient(135deg, #0a2a4d, #0d4a70);
  color: #4cc9f0;
}

#sheet th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
}

#sheet tbody tr:nth-child(even) {
  background: rgba(20, 24, 40, 0.4);
}

#sheet tbody tr:hover {
  background: rgba(30, 36, 60, 0.6);
  transition: background 0.25s ease;
}

#sheet td {
  padding: 10px;
  border-bottom: 1px solid rgba(64, 224, 208, 0.1);
}

/* 输入框 */
#sheet input[type="text"] {
  width: 100%;
  background: rgba(10, 12, 24, 0.7);
  color: #e0f7fa;
  border: 1px solid rgba(64, 224, 208, 0.25);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: Consolas, monospace;
  font-size: 13px;
  outline: none;
  transition: all 0.25s ease;
}
#sheet input[type="text"]:focus {
  border-color: #00eeff;
  box-shadow: 0 0 0 2px rgba(0, 238, 255, 0.3);
  background: rgba(15, 18, 30, 0.9);
}

/* 下拉选择框 */
#sheet select {
  width: 100%;
  background: rgba(10, 12, 24, 0.7);
  color: #a0f0ff;
  border: 1px solid rgba(64, 224, 208, 0.25);
  border-radius: 4px;
  padding: 5px;
  font-family: Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
#sheet select:focus {
  border-color: #00eeff;
  box-shadow: 0 0 0 2px rgba(0, 238, 255, 0.3);
}

/* 数值左对齐 */
.num {
  text-align: left;
}

/* 结果高亮 */
.res {
  background: rgba(0, 200, 255, 0.1);
  color: #4cc9f0;
  font-weight: bold;
  border-radius: 4px;
  text-align: left;           /* 左对齐 */
  padding: 6px 8px;
  width: 110px;                /* 固定宽度 */
  box-sizing: border-box;
}

/* 按钮工具栏 - 复用 auto-zimu-tools */
.auto-zimu-tools button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0a2a4d, #0d4a70);
  border: 1px solid rgba(64, 224, 208, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.auto-zimu-tools button:hover {
  background: linear-gradient(135deg, #0d4a70, #0a6ea8);
  border-color: rgba(0, 238, 255, 0.6);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 200, 255, 0.25),
    0 0 0 2px rgba(0, 238, 255, 0.3);
}
.auto-zimu-tools button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/*banner*/
        .cyber-banner {
            position: relative;
            width: 100%;
            height: 480px;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            overflow: hidden;
            border: 1px solid #008020;
            box-shadow: 
                0 0 50px rgba(0, 255, 65, 0.3),
                inset 0 0 50px rgba(0, 255, 65, 0.1);
        }

        /* 矩阵雨背景 */
        .matrix-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.4;
        }

        .matrix-column {
            position: absolute;
            top: -100%;
            font-size: 14px;
            line-height: 1.2;
            color: #00ff41;
            text-shadow: 0 0 5px #00ff41;
            animation: matrixFall linear infinite;
        }

        @keyframes matrixFall {
            to {
                top: 100%;
            }
        }

        /* 主标题区域 */
        .cyber-title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }

        .main-title {
            font-size: 48px;
            font-weight: bold;
            color: #00ff41;
            text-transform: uppercase;
            letter-spacing: 3px;
            position: relative;
            text-shadow: 
                0 0 10px #00ff41,
                0 0 20px #00ff41,
                0 0 30px #00ff41,
                0 0 40px #00ff41;
            animation: glitch 2s infinite;
        }

        .subtitle {
            font-size: 18px;
            color: #00ff41;
            margin-top: 20px;
            opacity: 0.8;
            letter-spacing: 2px;
        }

        /* 故障效果 */
        @keyframes glitch {
            0%, 100% {
                text-shadow: 
                    0 0 10px #00ff41,
                    0 0 20px #00ff41,
                    0 0 30px #00ff41;
            }
            25% {
                text-shadow: 
                    -2px 0 #ff0041,
                    2px 0 #00ff41,
                    0 0 10px #00ff41;
            }
            50% {
                text-shadow: 
                    2px 0 #ff0041,
                    -2px 0 #00ff41,
                    0 0 20px #00ff41;
            }
            75% {
                text-shadow: 
                    0 0 10px #00ff41,
                    0 0 20px #ff0041,
                    0 0 30px #00ff41;
            }
        }

        /* 二进制流效果 */
        .binary-stream {
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #00ff41;
            opacity: 0.3;
            line-height: 1.5;
            writing-mode: vertical-rl;
            text-shadow: 0 0 5px #00ff41;
        }

        /* 扫描线效果 */
        .scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ff41, transparent);
            animation: scan 3s linear infinite;
            opacity: 0.5;
        }

        @keyframes scan {
            0% {
                top: 0;
            }
            100% {
                top: 100%;
            }
        }

        /* 边框闪烁效果 */
        .border-flash {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border: 2px solid transparent;
            background: linear-gradient(45deg, #00ff41, #ff0041, #00ff41, #ff0041);
            background-size: 400% 400%;
            animation: borderGlow 4s ease infinite;
            z-index: -1;
        }

        @keyframes borderGlow {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        /* 粒子效果 */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #00ff41;
            border-radius: 50%;
            box-shadow: 0 0 10px #00ff41;
            animation: particleFloat 6s infinite;
        }

        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(50px);
                opacity: 0;
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .cyber-banner {
                height: 300px;
            }
            
            .main-title {
                font-size: 32px;
            }
            
            .subtitle {
                font-size: 14px;
            }
            
            .binary-stream {
                right: 20px;
                font-size: 10px;
            }
        }
/* ==== 赛博鸡汤增强版==== */


.auto-zimu .quote-content {
  font-size: 15px;
  line-height: 1.6;
  color: #a7f3d0;
  text-align: center;
  margin: 12px 0 16px;
  padding: 0 24px;
  font-family: 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.5px;
  word-wrap: break-word;
}

.auto-zimu .auto-zimu-tools .refresh-btn {
  background: linear-gradient(135deg, #0058ff, #00bfff);
  border: 1px solid #00d1ff;
  color: white;
  width: 80px;
  height: 32px;
  font-size: 12px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(0, 219, 255, 0.3);
}

.auto-zimu .auto-zimu-tools .refresh-btn:hover {
  background: linear-gradient(135deg, #007aff, #00e0ff);
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(0, 219, 255, 0.5);
}

.auto-zimu .auto-zimu-tools .refresh-btn:active {
  transform: scale(0.98);
}
/* ========== 区域分组 ========== */
.region-group {
    margin: 16px 0;
    padding: 12px;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
}

.region-header {
    font-weight: bold;
    color: #00ffff;
    font-size: 14px;
    padding: 4px 0;
    text-align: left;
    background: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.1));
    margin-bottom: 8px;
}

/* 区域背景色 - 高对比、易区分 */
.region-group.europe {
    background-color: rgba(30, 144, 255, 0.6);
}
.region-group.asia {
    background-color: rgba(50, 205, 50, 0.6);
}
.region-group.america {
    background-color: rgba(220, 20, 60, 0.6);
}
.region-group.oceania {
    background-color: rgba(138, 43, 226, 0.6);
}
.region-group.middle-east-africa {
    background-color: rgba(255, 165, 0, 0.6);
}

/* ========== 行内布局：城市名 + 时间紧邻 ========== */
.world-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #a0f0ff;
}

.world-time-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.world-time-value {
    color: #4cc9f0;
    font-weight: bold;
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
    text-shadow: 0 0 6px rgba(76, 201, 240, 0.8);
    animation: blink 1.5s infinite alternate;
}

@keyframes blink {
    from { opacity: 0.8; }
    to { opacity: 1; }
}
/* ===== 计算器三列横向布局 ===== */
.calc-wrapper{
  display:grid;
  grid-template-columns:160px 260px 160px;
  gap:10px;
  width:720px;
  margin:0 auto;
}
.calc-left,.calc-right{
  display:flex;
  flex-direction:column;
}

.calc-left .auto-zimu-input,
.calc-right .auto-zimu-preview{
  flex:1 1 auto;
  height:100%;
}

.calc-center{display:flex;flex-direction:column;gap:6px}
.calc-func{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.calc-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.calc-wrapper button{
  height:38px;font-size:14px;font-family:Consolas,monospace;padding:0
}
.calc-wrapper button:hover{
  border-color:#00eeff;
  box-shadow:0 0 6px rgba(0,238,255,.6),inset 0 0 4px rgba(0,238,255,.3);
}

@media(max-width:740px){
  .calc-wrapper{grid-template-columns:1fr;width:100%;max-width:420px}
  .calc-left,.calc-right{height:120px}
}