@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Montserrat:wght@300;400;500&display=swap');

/* --- 全局样式 & HTML Reset --- */
:root {
    /* 主色调 */
    --primary-bg-color: #360033; /* 深紫罗兰 */
    /* 辅助色 */
    --secondary-color-1: #C04848; /* 柔和绯红 */
    --secondary-color-2: #E966A0; /* 桃色 */
    /* 强调色 */
    --accent-color: #FFD700; /* 微光金 */
    /* 字体颜色 */
    --text-light: #ffffff;
    --text-dark-transparent: rgba(255, 255, 255, 0.7);

    /* 玻璃拟态基础 */
    --glass-bg: rgba(255, 255, 255, 0.08); /* 极浅的半透明背景 */
    --glass-border: rgba(255, 255, 255, 0.15); /* 细微边框 */
    --glass-shadow: rgba(0, 0, 0, 0.3); /* 细微投影 */
}

/* --- urban-panel 容器样式 (模拟App主体) --- */
.urban-panel {
    width: 100%;
    max-width: 420px; /* 模拟手机屏幕宽度，iPhone X/XR等 */
    min-height: 100vh; /* 确保至少铺满屏幕高度 */
    background: var(--glass-bg);
    backdrop-filter: blur(25px); /* 玻璃拟态效果 */
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow);
    border-radius: 0; /* 手机App通常是全屏，无圆角 */
    padding: 1.5rem 1rem; /* 内边距 */
    box-sizing: border-box;
    position: relative;
    overflow-y: auto; /* 允许内容滚动 */
    -webkit-overflow-scrolling: touch; /* iOS流畅滚动 */
    display: flex;
    flex-direction: column;
}

/* --- 标题与分隔线 --- */
.urban-panel h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* 微光效果 */
}

.urban-panel hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    margin: 1.5rem 0;
}

/* --- 状态栏样式 --- */
.urban-panel .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-dark-transparent);
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

/* --- 正文段落 --- */
.urban-panel p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 1em;
    text-align: justify;
}

/* --- 对话样式 --- */
.urban-panel .aus,
.urban-panel .aes {
    display: block; /* 强制独立成段 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    padding: 0.5em 0.8em;
    margin: 0.8em 0; /* 对话前后空行 */
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.urban-panel .aus {
    background-color: rgba(255, 215, 0, 0.15); /* 微光金半透明背景 */
    color: var(--accent-color);
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.urban-panel .aes {
    background-color: rgba(233, 102, 160, 0.15); /* 桃色半透明背景 */
    color: var(--secondary-color-2);
    border: 1px solid rgba(233, 102, 160, 0.3);
    text-shadow: 0 0 5px rgba(233, 102, 160, 0.3);
}

/* --- Details/Summary (折叠面板) 样式 --- */
.urban-panel details {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 0.8rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 15px var(--glass-shadow);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止内容溢出圆角 */
}

.urban-panel details[open] {
    background: rgba(255, 255, 255, 0.12); /* 展开时略微提亮 */
    border-color: rgba(255, 255, 255, 0.25);
}

.urban-panel summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--text-light);
    padding: 0.5rem 0;
    cursor: pointer;
    outline: none; /* 移除点击时的焦点框 */
    display: flex;
    align-items: center;
    user-select: none; /* 禁止选中标题文字 */
    position: relative;
}

.urban-panel summary::marker, /* Webkit browsers */
.urban-panel summary::-webkit-details-marker /* Older Webkit */ {
    display: none; /* 隐藏默认箭头 */
}

/* 自定义折叠指示器 */
.urban-panel summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 0.75rem;
    transition: transform 0.2s ease;
    color: var(--accent-color);
    font-size: 0.8em;
}

.urban-panel details[open] summary::before {
    content: '▼';
    transform: rotate(0deg); /* 确保没有旋转，直接显示向下箭头 */
}

.urban-panel details p,
.urban-panel details ul,
.urban-panel details ol,
.urban-panel details table {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 0.5rem;
}

/* Nested details (for memory sections) */
.urban-panel details details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 1rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
}

.urban-panel details details summary {
    font-size: 1rem;
    color: var(--text-dark-transparent);
    padding: 0.25rem 0;
}

/* --- 表格样式 (星记忆区) --- */
.urban-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-dark-transparent);
}

.urban-panel th,
.urban-panel td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.urban-panel th {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.05);
}

.urban-panel tr:hover {
    background-color: rgba(255, 255, 255, 0.03); /* 行悬停效果 */
}

/* --- 内联代码块和高亮 (如果存在的话) --- */
.urban-panel code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: rgba(255, 215, 0, 0.08);
    color: var(--accent-color);
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    font-size: 0.9em;
}

/* --- 特殊元素美化 (例如：星记忆区中的符号) --- */
.urban-panel .star-memory-title {
    color: var(--accent-color);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* --- 强制实现项，待讨论具体内容 (如果未来有表单元素) --- */
/* 
input[type="text"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

button {
    background-color: var(--accent-color);
    color: var(--primary-bg-color); 
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

button:hover {
    background-color: var(--text-light); 
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}
*/