:root{
  --fg: #1f2937;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #2563eb;
  --accent-ink: #fff;
  --ring: rgba(37, 99, 235, .35);
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --notice-h: 40px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:var(--fg);background:var(--bg)}

/* 容器 */
.container{max-width:1100px;margin:0 auto;background:var(--panel);min-height:100vh;box-shadow:var(--shadow)}

header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:var(--notice-h);background:rgba(255,255,255,.7);backdrop-filter:saturate(160%) blur(6px);z-index:10}
header h1{margin:0;font-size:20px;font-weight:650;letter-spacing:.2px}
header .meta{font-size:12px;color:var(--muted)}
header .home{margin-left:12px;text-decoration:none;color:var(--accent)}
header .home:hover{text-decoration:underline}

/* 剪贴板区域 */
.clipboard-section{padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.02))}
.clipbox{display:flex;flex-direction:column;gap:8px}
.clipbox-head{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.clipbox-head strong{color:var(--fg);font-weight:600}
.clipbox-head .hint{font-size:12px}
.clipbox-pad{padding:10px 12px;border:1px dashed var(--line);border-radius:10px;min-height:64px;background:#fff;line-height:1.5;outline:none;word-break:break-word}
.clipbox-pad:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.clipbox-pad[data-empty]::before{content:attr(data-placeholder); color:var(--muted)}
.clip-link{color:var(--accent);text-decoration:underline;background:rgba(37,99,235,.08);border-radius:3px;padding:0 2px}

/* 聊天框样式 */
.message-board{margin:12px 20px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));backdrop-filter:saturate(160%) blur(6px)}
.board-head{padding:10px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));backdrop-filter:saturate(160%) blur(6px);border-top-left-radius:14px;border-top-right-radius:14px}
.board-head h2{margin:0;font-size:14px;font-weight:650}
.board-body{padding:12px 14px}
/* 留言板内布局：日志在上，输入在下 */
.message-board .board-body{display:flex;flex-direction:column;gap:10px}

/* 文件管理板块与留言板统一风格 */
.file-board{margin:12px 20px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));backdrop-filter:saturate(160%) blur(6px)}
.file-board .board-head{padding:10px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));backdrop-filter:saturate(160%) blur(6px);border-top-left-radius:14px;border-top-right-radius:14px}
.file-board .board-body{padding:10px 12px}

/* 文件管理卡片内部的轻量化边距与分隔 */
.file-board .breadcrumbs{padding:6px 0 8px;border:none}
.file-board .actions{padding:8px 0 10px;border:none;background:transparent}
.file-board .parent-link{padding:6px 0 8px}
.file-board .file-scroll{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:600px;overscroll-behavior:contain}
.file-board .listing thead th{background:#fff;backdrop-filter:saturate(120%) blur(2px)}
.file-board .listing th:first-child{border-top-left-radius:12px}
.file-board .listing th:last-child{border-top-right-radius:12px}
.file-board .listing tbody tr:last-child td:first-child{border-bottom-left-radius:12px}
.file-board .listing tbody tr:last-child td:last-child{border-bottom-right-radius:12px}
.file-board .listing tbody tr:hover{background:rgba(250,250,250,.75)}

.chatbox{display:flex;flex-direction:column;gap:8px}
.chatbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-id{display:flex;align-items:center;gap:8px}
.chat-id label{font-size:12px;color:var(--muted)}
.chat-id input{padding:6px 10px;border:1px solid var(--line);border-radius:8px;min-width:160px;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(3px)}
.chat-id input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.chat-actions button{padding:8px 14px}
.chat-input{padding:10px 12px;border:1px dashed var(--line);border-radius:10px;min-height:64px;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(3px);line-height:1.5;outline:none;word-break:break-word}
.chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.chat-input[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--muted)}
.chat-previews{display:flex;gap:8px;flex-wrap:wrap}
.preview-item{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(3px)}
.preview-item img{display:block;width:96px;height:72px;object-fit:cover}
.preview-item .remove{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:12px;line-height:1;width:20px;height:20px;cursor:pointer}
.chat-hint{font-size:12px;color:var(--muted)}
.chatlog{margin-top:0;display:flex;flex-direction:column;gap:10px;max-height:600px;overflow:auto;overscroll-behavior:contain;padding-right:4px}
.chatlog-item{border:none;border-radius:16px;padding:10px 12px;background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(246,247,249,.65));backdrop-filter:saturate(160%) blur(3px);box-shadow:0 1px 1px rgba(0,0,0,.04), 0 1px 10px rgba(0,0,0,.02)}
.chatlog-item .head{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.chatlog-item .name{font-weight:600}
.chatlog-item .time{color:var(--muted);font-size:12px}
.chatlog-item .body{line-height:1.5}
.chatlog-item .imgs{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.chatlog-item .imgs img{max-width:400px;max-height:300px;border-radius:6px;border:1px solid var(--line);object-fit:contain}

.breadcrumbs{padding:12px 20px;border-bottom:1px solid var(--line);font-size:14px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumbs a{color:var(--accent);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{color:#cbd5e1}

.actions{display:flex;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));backdrop-filter:saturate(160%) blur(4px)}
.actions form{display:flex;gap:8px;align-items:center}
.actions input[type=text]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;transition:border-color .2s ease, box-shadow .2s ease;background:rgba(255,255,255,.8);backdrop-filter:saturate(160%) blur(3px)}
.actions input[type=file]{border:1px dashed var(--line);padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.8);backdrop-filter:saturate(160%) blur(3px)}
.actions input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}

button,.btn{background:var(--accent);border:none;color:var(--accent-ink);padding:8px 12px;border-radius:10px;cursor:pointer;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s ease, filter .2s ease, box-shadow .2s ease}
button:hover,.btn:hover{filter:brightness(0.98);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
button:focus,.btn:focus{outline:0;box-shadow:0 0 0 4px var(--ring)}

.parent-link{padding:10px 20px;color:var(--muted)}
.parent-link a{color:var(--accent);text-decoration:none}
.parent-link a:hover{text-decoration:underline}

.table-wrap{overflow:auto;border-top:1px solid var(--line)}
.listing{width:100%;border-collapse:collapse}
.listing th,.listing td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.listing thead th{background:rgba(255,255,255,.8);backdrop-filter:saturate(160%) blur(4px);position:sticky;top:0;z-index:5}
.listing tbody tr{transition:background-color .15s ease}
.listing tbody tr:hover{background:#f9fafb}
.listing .name a{text-decoration:none;color:var(--fg)}
.listing .name a:hover{text-decoration:underline}
.listing .name a.dir{font-weight:600}
.listing .actions{display:flex;gap:8px;align-items:center}
.listing .actions form.inline{display:flex;gap:6px}
.listing .empty td{color:var(--muted);text-align:center;padding:48px 16px}

footer{padding:16px 20px;color:var(--muted)}

/* 顶部固定提示框 */
.fixed-notice{position:fixed;top:0;left:0;right:0;height:var(--notice-h);display:flex;align-items:center;justify-content:center;padding:0 12px;background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--line);z-index:999}
.fixed-notice{font-size:13px;color:#0f172a}

/* 加载遮罩与细腻动效 */
#page-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(247,247,248,.85);backdrop-filter:saturate(160%) blur(6px);z-index:999;transition:opacity .25s ease}
#page-loader.hidden{opacity:0;pointer-events:none}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:var(--accent);animation:spin .8s linear infinite}

.fade-in{animation:fadeIn .3s ease-out .05s both}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .fade-in{animation:none}
  .spinner{animation-duration:1.2s}
  button,.btn{transition:none}
}

/* --- Custom background image & subtle glass effect --- */
body{
  /* 背景图：覆盖、居中、固定 */
  background-image:
    radial-gradient(rgba(255,255,255,.35), rgba(255,255,255,.55)),
    url('/static/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container{
  /* 轻微通透的卡片背景以适配壁纸 */
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(6px);
}

/* 星星鼠标指针（SVG） */
html, body{cursor: url('/static/cursor-star.svg') 12 12, auto}
a, button, input, textarea, select{cursor: url('/static/cursor-star.svg') 12 12, auto}

/* 极简黑白主题（按需在 body 加 .theme-min） */
body.theme-min{ --accent:#111; --accent-ink:#fff; --ring: rgba(0,0,0,.2) }
/* 还原半透明容器以透出背景图 */
body.theme-min .container{background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(6px)}
body.theme-min header{background:#fff}
body.theme-min .message-board,body.theme-min .file-board{background:#fff}
body.theme-min .board-head{background:#fff}
body.theme-min .fixed-notice{background:#fff}
body.theme-min .file-board .listing thead th{background:#fff}
body.theme-min .file-board .listing tbody tr:hover{background:#fafafa}
body.theme-min html, body.theme-min body, body.theme-min a, body.theme-min button, body.theme-min input, body.theme-min textarea, body.theme-min select{cursor:auto}
body.theme-min a, body.theme-min button{cursor:pointer}

/* Toast 提示 */
.toast-wrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.toast{background:#111;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);opacity:.98}