/* --- 局部变量与容器适配 --- */
.main.container-w {
    --n-shadow-l: #ffffff;
    --n-shadow-d: #d1d9e6;
    --n-p: #007bff;
    --n-t: #313d5a;
    --n-tg: #a0aec0;
    
    /* 核心修复：确保父级不裁剪阴影 */
    overflow: visible !important;
}

/* 容器整体边距，防止阴影截断 */
.tool-wrapper { 
    padding: 20px 20px 40px 20px; 
    box-sizing: border-box;
    width: 100%;
}

.tool-title { 
    text-align: center; 
    color: var(--n-t); 
    margin-bottom: 30px; 
    font-size: 24px;
}

/* --- 元素样式隔离：锁定在 .tool-wrapper 内，防止干扰导航栏 --- */
.tool-wrapper input[type="text"], 
.tool-wrapper select {
    border: none;
    outline: none;
    padding: 12px;
    border-radius: 10px;
    background: transparent;
    box-shadow: inset 3px 3px 6px var(--n-shadow-d), inset -3px -3px 6px var(--n-shadow-l);
    color: var(--n-t);
    box-sizing: border-box;
    font-size: 14px;
}

/* 顶部当前时间大卡片 */
.timestamp-now-card {
    padding: 30px;
    border-radius: 20px;
    box-shadow: 8px 8px 16px var(--n-shadow-d), -8px -8px 16px var(--n-shadow-l);
    text-align: left;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.now-label { font-weight: bold; color: var(--n-t); margin-bottom: 10px; }
.now-value-group { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; }
#now-timestamp { font-size: 32px; font-family: monospace; color: var(--n-p); font-weight: bold; }
.unit-tag { color: var(--n-tg); font-size: 14px; }

/* 按钮之间的间距核心修复 */
.now-controls { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
}

/* 转换卡片网格 */
.tool-main-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.convert-card {
    padding: 25px;
    border-radius: 20px;
    box-shadow: 8px 8px 16px var(--n-shadow-d), -8px -8px 16px var(--n-shadow-l);
    box-sizing: border-box;
}

.convert-card h3 { 
    font-size: 16px; 
    margin-bottom: 20px; 
    color: var(--n-t); 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

/* --- 铺满布局核心修复 --- */
.input-row, .output-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
    width: 100%;
}

/* 让输入框自动拉伸填满空隙 */
.tool-wrapper input[type="text"] {
    flex: 3; 
    width: auto;
}

/* 让下拉框适度占据空间 */
.tool-wrapper select {
    flex: 1;
    min-width: 140px;
}

/* 拟态按钮样式 */
.tool-wrapper .tool-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    color: var(--n-t);
    box-shadow: 4px 4px 8px var(--n-shadow-d), -4px -4px 8px var(--n-shadow-l);
    transition: all 0.2s;
    white-space: nowrap;
}

.tool-wrapper .tool-btn:active { 
    box-shadow: inset 2px 2px 5px var(--n-shadow-d), inset -2px -2px 5px var(--n-shadow-l); 
}
.tool-wrapper .tool-btn.primary { color: var(--n-p); font-weight: bold; }
.tool-wrapper .tool-btn.danger { color: #d93939; }

/* --- 之前遗漏的底部介绍区样式 --- */
.tool-intro-section {
    margin-top: 40px;
    padding: 25px;
    border-radius: 20px;
    /* 采用内凹效果以区分功能区 */
    box-shadow: inset 5px 5px 10px var(--n-shadow-d), inset -5px -5px 10px var(--n-shadow-l);
}

.intro-title { 
    color: var(--n-p); 
    font-size: 18px; 
    margin: 0 0 15px 0; 
    font-weight: bold;
}

.intro-content { 
    font-size: 14px; 
    line-height: 1.8; 
    color: var(--n-t);
}

.intro-content p { margin-bottom: 10px; }

.intro-content ul { 
    padding-left: 20px; 
    margin-top: 5px; 
}

.intro-content li { 
    list-style: disc; 
    margin-bottom: 5px; 
}

/* --- 响应式适配 --- */
@media (max-width: 768px) {
    .input-row, .output-row { flex-direction: column; align-items: stretch; gap: 10px; }
    #now-timestamp { font-size: 22px; word-break: break-all; }
    .tool-wrapper { padding: 20px 10px; }
}