:root{
  --fg: #0f172a;
  --bg: #eef2f7;
  --panel: rgba(255,255,255,.92);
  --muted: #64748b;
  --line: rgba(148,163,184,.35);
  --accent: #0ea5a4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(14,165,164,.12);
  --accent-2: #f59e0b;
  --ring: rgba(14,165,164,.35);
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.10);
  --shadow-lg: 0 18px 45px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.08);
  --notice-h: 40px;
  --font-sans: "HarmonyOS Sans","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-display: "STZhongsong","Songti SC","Noto Serif SC",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-sans), "Apple Color Emoji","Segoe UI Emoji";color:var(--fg);background:var(--bg)}

/* 容器 */
.container{max-width:1100px;margin:12px auto 24px;background:var(--panel);min-height:100vh;box-shadow:var(--shadow-lg);border:1px solid rgba(148,163,184,.18);border-radius:18px;overflow:hidden}

header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:var(--notice-h);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));backdrop-filter:saturate(160%) blur(8px);z-index:10}
header h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.6px;font-family:var(--font-display)}
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:16px;box-shadow:var(--shadow-lg);background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,251,253,.68));backdrop-filter:saturate(160%) blur(6px)}
.board-head{padding:11px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));backdrop-filter:saturate(160%) blur(6px);border-top-left-radius:16px;border-top-right-radius:16px;position:relative}
.board-head h2{margin:0;font-size:15px;font-weight:700;font-family:var(--font-display);letter-spacing:.4px}
.board-head::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:linear-gradient(90deg, transparent, rgba(14,165,164,.35), transparent)}
.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:16px;box-shadow:var(--shadow-lg);background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,251,253,.68));backdrop-filter:saturate(160%) blur(6px)}
.file-board .board-head{padding:11px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));backdrop-filter:saturate(160%) blur(6px);border-top-left-radius:16px;border-top-right-radius:16px}
.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:14px;overflow:auto;max-height:600px;overscroll-behavior:contain;background:rgba(255,255,255,.7)}
.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,.88), rgba(246,248,252,.72));backdrop-filter:saturate(160%) blur(3px);box-shadow:0 1px 1px rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.04)}
.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,.65), 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:linear-gradient(135deg, var(--accent), #22c55e);border:1px solid rgba(14,165,164,.35);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(90deg, rgba(14,165,164,.12), rgba(255,255,255,.9), rgba(245,158,11,.12));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(circle at 12% 18%, rgba(14,165,164,.18), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(245,158,11,.16), transparent 40%),
    radial-gradient(rgba(255,255,255,.35), rgba(255,255,255,.6)),
    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:#0ea5a4; --accent-ink:#fff; --ring: rgba(14,165,164,.25); --bg:#eef2f7; --panel: rgba(255,255,255,.9); --line: rgba(148,163,184,.35) }
/* 还原半透明容器以透出背景图 */
body.theme-min .container{background: var(--panel); backdrop-filter: saturate(160%) blur(8px)}
body.theme-min header{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75))}
body.theme-min .message-board,body.theme-min .file-board{background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(249,250,252,.75))}
body.theme-min .board-head{background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8))}
body.theme-min .fixed-notice{background:linear-gradient(90deg, rgba(14,165,164,.12), rgba(255,255,255,.92), rgba(245,158,11,.12))}
body.theme-min .file-board .listing thead th{background:rgba(255,255,255,.92)}
body.theme-min .file-board .listing tbody tr:hover{background:rgba(236,253,245,.55)}
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}