:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --sidebar: #1f2430;
  --sidebar-hover: #2b3241;
  --accent: #2563eb;
  --accent-soft: #e8efff;
  --text: #1f2937;
  --text-soft: #6b7280;
  --border: #e5e7eb;
  --danger: #dc2626;
  --ok: #16a34a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}

.hidden { display: none !important; }

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  transition: background .15s, opacity .15s, transform .05s;
}
button:active { transform: translateY(1px); }

/* ---------------- 登录 ---------------- */

.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #dbe6ff 0%, #f5f6f8 45%, #eef1f6 100%);
}

.login-card {
  width: 360px;
  padding: 40px 32px 28px;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .12);
  text-align: center;
}

.login-logo { font-size: 44px; line-height: 1; }
.login-card h1 {
  margin: 12px 0 4px;
  font-size: 26px;
  letter-spacing: 1px;
}
.login-sub {
  margin: 0 0 26px;
  color: var(--text-soft);
  font-size: 13px;
}

#loginForm input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
  letter-spacing: 2px;
}
#loginForm input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

#loginBtn {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
#loginBtn:hover { background: #1d4ed8; }
#loginBtn:disabled { opacity: .6; cursor: default; }

.login-error {
  min-height: 20px;
  margin-top: 10px;
  color: var(--danger);
  font-size: 13px;
}

.login-foot {
  margin-top: 22px;
  color: #9ca3af;
  font-size: 12px;
}

/* ---------------- 布局 ---------------- */

.app {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--sidebar);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 18px;
}
.brand-logo { font-size: 22px; }
.brand-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

.nav { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-item .nav-icon { width: 18px; text-align: center; }

.sidebar-foot { padding-top: 12px; }

.btn-ghost {
  background: transparent;
  color: inherit;
  padding: 9px 12px;
  border: 1px solid transparent;
}
.sidebar .btn-ghost {
  width: 100%;
  color: #94a3b8;
  border-color: rgba(255,255,255,.1);
}
.sidebar .btn-ghost:hover { background: var(--sidebar-hover); color: #fff; }

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.crumb { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.crumb .crumb-sep { color: #c0c4cc; margin: 0 6px; font-weight: 400; }
.crumb .crumb-part { cursor: pointer; }
.crumb .crumb-part:hover { color: var(--accent); }

.btn-icon {
  background: transparent;
  color: var(--text-soft);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}
.btn-icon:hover { background: #f1f3f6; color: var(--text); }

.pane { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 0; overflow: hidden; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.toolbar-spacer { flex: 1; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  font-weight: 600;
}
.btn-primary:hover { background: #1d4ed8; }

.btn-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 14px;
}
.btn-secondary:hover { background: #f8f9fb; border-color: #d5d9e0; }

.btn-mini {
  background: #eef2f7;
  color: var(--text-soft);
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 6px;
}
.btn-mini:hover { background: #e2e8f0; }

.stat { color: var(--text-soft); font-size: 13px; }

/* ---------------- 拖拽区 ---------------- */

.dropzone {
  border: 2px dashed #d7dce4;
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  color: #9aa3af;
  font-size: 13px;
  margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------------- 文件表 ---------------- */

.table-wrap {
  flex: 1;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.file-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafbfc;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-soft);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.file-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-table tbody tr:hover { background: #f8fafc; }
.file-table tbody tr:last-child td { border-bottom: none; }

/* 刚上传完成的行短暂高亮 */
.file-table tbody tr.fresh {
  animation: fresh-row 4s ease-out;
}
@keyframes fresh-row {
  0%   { background: #dcecff; }
  60%  { background: #eaf3ff; }
  100% { background: transparent; }
}

.col-name { width: auto; }
.col-size { width: 110px; }
.col-time { width: 170px; }
.col-ops  { width: 190px; }

.name-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.name-cell .ficon { font-size: 16px; flex: 0 0 auto; }
.name-cell .fname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fname.link { cursor: pointer; }
.fname.link:hover { color: var(--accent); text-decoration: underline; }

.ok-flag {
  font-size: 11px;
  color: var(--ok);
  background: #eafaf0;
  border-radius: 4px;
  padding: 1px 6px;
  flex: 0 0 auto;
}

.ops { display: flex; gap: 6px; }
.op {
  background: transparent;
  color: var(--text-soft);
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
}
.op:hover { background: #eef2f7; color: var(--accent); }
.op.danger:hover { background: #fdeaea; color: var(--danger); }

.empty {
  padding: 48px 0;
  text-align: center;
  color: #9aa3af;
  font-size: 14px;
}

/* ---------------- 上传面板 ---------------- */

.upload-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  overflow: hidden;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

.upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.upload-list {
  overflow: auto;
  padding: 6px 0;
}

.upload-item {
  padding: 9px 12px;
  border-bottom: 1px solid #f4f5f7;
}
.upload-item:last-child { border-bottom: none; }

.ui-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ui-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.ui-status { font-size: 12px; color: var(--text-soft); flex: 0 0 auto; }
.ui-status.done { color: var(--ok); }
.ui-status.err { color: var(--danger); }

.ui-bar {
  height: 6px;
  background: #eef1f5;
  border-radius: 4px;
  overflow: hidden;
}
.ui-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width .2s ease;
}
.ui-bar-fill.done { background: var(--ok); }
.ui-bar-fill.err { background: var(--danger); }

.ui-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #9aa3af;
  display: flex;
  justify-content: space-between;
}

.upload-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  background: #fafbfc;
}
.upload-foot .btn-ghost { color: var(--text-soft); font-size: 12px; padding: 4px 8px; }
.upload-foot .btn-ghost:hover { background: #eef2f7; }

/* ---------------- 日志 ---------------- */

.log-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.log-label { color: var(--text-soft); font-size: 13px; }

.select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  min-width: 180px;
  outline: none;
}
.select:focus { border-color: var(--accent); }

.switch { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }

.log-status { font-size: 12px; color: var(--text-soft); }
.log-status.live { color: var(--ok); }

.log-tip {
  background: #f0f6ff;
  border: 1px solid #d6e4ff;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12px;
  color: #31517a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.log-tip code {
  background: #fff;
  border: 1px solid #d6e4ff;
  border-radius: 5px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #1e3a8a;
  word-break: break-all;
}
.log-tip-sub {
  flex-basis: 100%;
  color: #5b7ba8;
  font-size: 11.5px;
  line-height: 1.6;
}

.log-view {
  flex: 1;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #12151c;
  color: #d6deeb;
  border-radius: var(--radius);
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------------- 弹窗 ---------------- */

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  width: 380px;
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
.modal h3 { margin: 0 0 14px; font-size: 16px; }
.modal input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.modal input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.modal-actions .btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 16px;
}
.modal-actions .btn-ghost:hover { background: #f8f9fb; }

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  background: rgba(24, 30, 42, .94);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 200;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .25);
}
.toast.err { background: rgba(185, 28, 28, .96); }

@media (max-width: 820px) {
  .sidebar { width: 64px; flex: 0 0 64px; padding: 14px 8px; }
  .brand-name { display: none; }
  .brand { justify-content: center; padding: 4px 0 16px; }
  .nav-item { justify-content: center; padding: 11px 0; }
  .nav-item .nav-text { display: none; }
  .col-time { display: none; }
  .upload-panel { right: 10px; left: 10px; width: auto; }
  .pane { padding: 12px 12px 0; }
}

/* CMCar / connected workspace — graphite, cyan and precision grid. */
:root { color-scheme:dark; --bg:#080e19; --panel:#111c2c; --sidebar:#0c1523; --sidebar-hover:#182a3f; --accent:#4bdded; --accent-soft:#132f40; --text:#e3edf8; --text-soft:#94a9c1; --border:#27374b; --danger:#ff8295; --ok:#5ce6b2; --radius:16px; --shadow:0 18px 60px #02071130; }
body { background:radial-gradient(ellipse at 82% 0%,#11334565,transparent 48%),#080e19; }
button, input, textarea, select { font:inherit; }
button { transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline:2px solid #6aeeff; outline-offset:4px; }
input,textarea,select { color:var(--text); background:#0c1625; }
input::placeholder,textarea::placeholder { color:#70869f; }
.tech-mark { display:inline-flex; align-items:center; justify-content:center; color:#8cf3fa; font-family:ui-monospace,Consolas,monospace; letter-spacing:-3px; border:1px solid #3a6d7a; background:linear-gradient(140deg,#2c697c55,#15344844); box-shadow:inset 0 0 18px #5ce6ff0d,0 0 25px #39d9e611; border-radius:13px; font-weight:700; }
.login-logo { width:74px; height:74px; font-size:26px; margin:0 auto 20px; }
.login-wrap { min-height:100dvh; height:auto; padding:24px; background:radial-gradient(ellipse at 25% 15%,#13536b4f,transparent 55%),radial-gradient(ellipse at 90% 85%,#343b7c38,transparent 50%),linear-gradient(#23344b26 1px,transparent 1px),linear-gradient(90deg,#23344b26 1px,transparent 1px),#080e19; background-size:auto,auto,48px 48px,48px 48px,auto; }
.login-card { width:min(100%,420px); padding:48px 36px 30px; border:1px solid #32465c; background:linear-gradient(145deg,#15243be8,#0d1728f5); box-shadow:0 30px 100px #0007,0 0 70px #47ddec08; border-radius:25px; }
.login-card h1 { font-size:36px; font-weight:700; letter-spacing:1px; }
.login-sub { margin:12px 0 30px; color:#9aafc5; }
#loginForm input { background:#0a1321; color:#e9f8ff; border-color:#34475e; min-height:50px; }
#loginForm input:focus,.modal input:focus { border-color:#55dce9; box-shadow:0 0 0 3px #4bdded16; }
#loginBtn { background:linear-gradient(110deg,#67e6e5,#6aaff5); color:#071522; min-height:48px; }
#loginBtn:hover { background:linear-gradient(110deg,#9af5ef,#97c9ff); box-shadow:0 0 28px #4bdded22; }
.login-foot { border-top:1px solid var(--border); padding-top:22px; color:#839ab4; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#64e9c1; box-shadow:0 0 9px #64e9c155; margin-right:7px; vertical-align:middle; }
.app { height:100dvh; }
.sidebar { flex:0 0 234px; width:234px; padding:28px 16px 18px; border-right:1px solid #223047; background:linear-gradient(180deg,#101d2e,#0b1320); }
.brand { gap:12px; padding:0 8px 32px; }
.brand-logo { height:42px; width:42px; font-size:17px; flex-shrink:0; border-radius:11px; }
.brand-name { font-size:23px; letter-spacing:.3px; }
.brand-name small { display:block; font-size:8px; font-weight:500; letter-spacing:1.6px; margin-top:5px; color:#7c93af; }
.nav { gap:7px; }
.nav-item { min-height:48px; padding:12px 14px; color:#93a9c2; border:1px solid transparent; border-radius:12px; }
.nav-item:hover { background:#1b2c40; border-color:#30455e; }
.nav-item.active { background:linear-gradient(90deg,#193b4c,#142b40); color:#9af1f8; border-color:#315d6a; box-shadow:inset 3px 0 #58dfeb; }
.nav-icon { opacity:.9; }
.sidebar .btn-ghost { border-color:#2b3a50; border-radius:10px; }
.content { background-image:linear-gradient(#2c405212 1px,transparent 1px),linear-gradient(90deg,#2c405212 1px,transparent 1px); background-size:36px 36px; overflow-y:auto; padding-bottom:24px; }
.topbar { min-height:76px; flex:0 0 76px; padding:0 32px; background:#0b1522c9; border-color:#203046; }
.crumb { font-size:14px; font-weight:500; letter-spacing:.3px; }
.crumb .crumb-sep { color:#4f657f; }
.topbar-actions { display:flex; gap:18px; align-items:center; }
.workspace-badge { font-size:11px; color:#92a8bf; border:1px solid #2d4155; border-radius:30px; padding:7px 11px; }
.btn-icon:hover,.btn-ghost:hover,.op:hover { background:#20354a; color:#9feaf2; }
.btn-primary { color:#071c29; background:linear-gradient(105deg,#62e0e6,#77b8fa); border:1px solid #8ce9ef70; border-radius:9px; min-height:38px; }
.btn-primary:hover { background:linear-gradient(105deg,#93f0f1,#a2d4ff); box-shadow:0 4px 22px #4bdded1a; }
.btn-secondary { background:#152437; color:#c4d8eb; border-color:#34485e; border-radius:9px; }
.btn-secondary:hover { background:#213a50; border-color:#4c7a91; }
.btn-mini { background:#1b3045; color:#b1d0e4; border:1px solid #304b61; padding:4px 8px; font-size:11px; }
.btn-mini:hover { background:#28495e; color:#a8f7ff; }
.pane { flex:1 0 auto; min-height:360px; overflow:visible; padding:8px 32px 0; }
.toolbar { padding:8px 0 12px; gap:10px; flex-wrap:wrap; }
.dropzone { border:1px dashed #36516a; color:#7893ad; background:#10203266; padding:18px; border-radius:12px; }
.dropzone.dragover { background:#163b4b; color:#8beafa; border-color:#72e2ef; }
.table-wrap { min-height:240px; flex:1; background:#101b2bcc; border-color:#2b3c52; box-shadow:var(--shadow); border-radius:14px; }
.file-table thead th { background:#142236; color:#8da4c0; padding:15px 16px; font-size:11px; letter-spacing:1px; }
.file-table tbody td { border-color:#213147; padding:16px; }
.file-table tbody tr:hover { background:#192e425e; }
.empty { color:#728ba6; padding:65px 15px; }
.ok-flag { color:#6fe5bb; background:#194236; }
.op.danger:hover { color:#ff9aaa; background:#48273a; }
@keyframes fresh-row { 0% {background:#244960;} 100%{background:transparent;} }
.upload-panel { background:#132237; box-shadow:0 18px 80px #0008; }
.upload-head,.upload-foot { background:#172a40; }
.upload-item { border-color:#273d55; }
.ui-bar { background:#243950; }
.ui-bar-fill { background:linear-gradient(90deg,#56dbdf,#6ca9ee); }
.upload-foot .btn-ghost:hover { background:#233b52; }
.log-tip { background:#142c3d; border:1px solid #2b5068; color:#9ed3e4; border-radius:12px; }
.log-tip code { color:#86e5ef; background:#0b1c2c; }
.log-tip-sub { color:#9bb8ca; }
.select { background:#152437; color:var(--text); border-color:#34485e; }
.log-view { min-height:340px; background:#07111d; color:#a2d8c8; border:1px solid #253c50; box-shadow:inset 0 0 40px #0002; }
.modal-mask { background:#020813b5; backdrop-filter:blur(8px); }
.modal { background:#142236; border:1px solid #3a526b; max-width:calc(100vw - 32px); }
.modal input { background:#0b1727; color:var(--text); border-color:#344c65; }
.modal-actions .btn-ghost:hover { background:#243b53; }
.toast { background:#19364a; border:1px solid #3e6d84; color:#d2f6ff; }
.clipboard-panel { position:relative; margin:28px 32px 22px; padding:26px; border:1px solid #355569; border-radius:20px; background:radial-gradient(ellipse at 0% 0%,#17506650,transparent 52%),linear-gradient(115deg,#14273bd9,#111b2de8); box-shadow:0 15px 50px #0002; flex-shrink:0; }
.clipboard-panel::before { content:''; position:absolute; top:-1px; left:28px; width:100px; height:2px; background:linear-gradient(90deg,#75eff4,transparent); }
.clipboard-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:22px; }
.eyebrow { color:#6fb8c7; font-size:9px; letter-spacing:2px; font-family:ui-monospace,Consolas,monospace; margin-bottom:9px; }
.clipboard-head h1 { margin:0; font-size:27px; font-weight:600; letter-spacing:1px; color:#e4f5ff; }
.title-spark { font-family:monospace; font-weight:400; font-size:26px; color:#72e2e8; margin-left:13px; }
.clipboard-head p { font-size:12px; color:#8faac1; margin:9px 0 0; line-height:1.6; }
.history-badge { color:#90d9e6; border:1px solid #385c70; background:#15374b55; border-radius:30px; padding:7px 12px; font-size:11px; white-space:nowrap; }
.clipboard-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; }
.clipboard-editor label { display:block; font-size:11px; color:#a1bdd1; margin-bottom:10px; }
.clipboard-editor textarea { display:block; width:100%; height:133px; min-height:90px; max-height:300px; resize:vertical; border:1px solid #365067; border-radius:12px; padding:14px; line-height:1.65; font-size:13px; background:#0a1625c9; outline:none; overflow:auto; }
.clipboard-editor textarea:focus { border-color:#56d2df; box-shadow:0 0 0 3px #4bdded10; }
.clipboard-editor-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; }
.clipboard-editor-foot > span { font-size:10px; color:#829ab2; font-family:ui-monospace,Consolas,monospace; }
.clipboard-editor-foot > div { display:flex; gap:8px; }
.clipboard-editor-foot button { font-size:12px; padding:8px 12px; }
.clipboard-feedback { min-height:16px; margin:8px 0 0; color:#73e0bd; font-size:11px; line-height:1.6; }
.clipboard-feedback.error { color:#ff9eac; }
.clipboard-history { min-width:0; border-left:1px solid #2c445a; padding-left:24px; }
.history-heading { display:flex; justify-content:space-between; align-items:center; margin:-5px 0 6px; font-size:11px; color:#a3bcd2; }
.history-heading button { font-size:11px; padding:6px 8px; }
#clipboardHistory { max-height:221px; overflow:auto; scrollbar-width:thin; scrollbar-color:#3d5c75 transparent; padding-right:5px; }
.clipboard-entry { border:1px solid #2c4258; background:#1020359c; border-radius:10px; padding:10px 12px; margin-bottom:7px; }
.clipboard-entry:first-child { border-color:#3d6276; background:#1733498c; }
.clipboard-entry-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; }
.clipboard-entry-label { font-size:9px; color:#89a4bc; font-family:ui-monospace,Consolas,monospace; }
.clipboard-entry-actions { display:flex; gap:5px; }
.clipboard-preview { font-size:12px; line-height:1.65; color:#d0e5f3; margin-top:8px; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; list-style:none; }
.clipboard-preview::-webkit-details-marker { display:none; }
.clipboard-full { max-height:260px; overflow:auto; overflow-wrap:anywhere; white-space:pre-wrap; font-size:12px; line-height:1.7; font-family:inherit; color:#c2dce8; padding:10px; border:1px solid #2b4860; border-radius:8px; background:#0b1828; user-select:text; }
.clipboard-empty { display:flex; min-height:160px; justify-content:center; align-items:center; text-align:center; padding:22px; color:#7694ad; line-height:1.9; border:1px dashed #2e4a60; border-radius:12px; font-size:12px; }
.clipboard-note { margin-top:14px; font-size:10px; letter-spacing:.4px; color:#7e9cb3; }
@media (max-width:1100px) { .sidebar {width:194px;flex-basis:194px;} .brand-name {font-size:20px;} .topbar{padding:0 22px;} .clipboard-panel{margin:22px;padding:22px;} .pane{padding-left:22px;padding-right:22px;} .clipboard-grid{gap:18px;} .clipboard-history{padding-left:18px;} }
@media (max-width:820px) { .sidebar{width:74px;flex-basis:74px;padding:22px 10px;} .brand-name{display:none;} .brand{padding:0 0 25px;} .nav-item{padding:12px 0;} .clipboard-grid{grid-template-columns:1fr;} .clipboard-history{border-left:0;border-top:1px solid #2c445a;padding:16px 0 0;} #clipboardHistory{max-height:185px;} .clipboard-empty{min-height:95px;} .workspace-badge{display:none;} .clipboard-head h1{font-size:24px;} }
@media (max-width:540px) { html,body{height:auto;min-height:100dvh;} .app{height:auto;min-height:100dvh;flex-direction:column;overflow:visible;} .sidebar{width:100%;flex:0 0 auto;padding:16px 16px 10px;display:grid;grid-template-columns:1fr auto;gap:14px;position:relative;} .brand{padding:0;justify-content:flex-start;} .brand-logo{height:34px;width:34px;font-size:14px;} .brand-name{display:block;font-size:20px;} .brand-name small{font-size:7px;} .sidebar-foot{grid-column:2;grid-row:1;padding:0;} .sidebar-foot button{font-size:11px;padding:8px;} .nav{grid-column:1/-1;flex-direction:row;overflow-x:auto;gap:6px;} .nav-item{min-height:36px;padding:8px 9px;flex-shrink:0;gap:5px;border-radius:9px;} .nav-item .nav-text{display:inline;font-size:11px;} .nav-item .nav-icon{width:auto;font-size:12px;} .content{overflow:visible;padding-bottom:12px;} .topbar{height:52px;min-height:52px;flex-basis:52px;padding:0 18px;} .clipboard-panel{margin:18px 14px;padding:18px;border-radius:16px;} .clipboard-head{align-items:flex-start;gap:8px;margin-bottom:18px;} .clipboard-head h1{font-size:22px;}.clipboard-head p{font-size:11px;max-width:220px;}.eyebrow{font-size:8px;letter-spacing:1px;}.history-badge{font-size:9px;padding:6px 8px;}.clipboard-note{font-size:9px;line-height:1.8;}.pane{padding:4px 14px 0;min-height:300px;}.table-wrap{overflow:auto;}.file-table{min-width:535px;}.toolbar .stat{flex-basis:100%;font-size:11px;}.log-toolbar{flex-wrap:wrap;}.log-view{height:440px;}.login-card{padding:36px 26px;}.clipboard-editor textarea{font-size:16px;}.clipboard-editor-foot button{padding:8px 10px;font-size:11px;} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

/* Theme switch is available on both the login screen and every workspace page. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 11px; min-height:32px; border:1px solid #35536b; background:#15293c; color:#a5dbe7; font-size:11px; border-radius:9px; white-space:nowrap; }
.theme-toggle:hover { background:#234159; border-color:#54839b; }
.login-theme { margin:21px auto 0; }
:root[data-theme="light"] { color-scheme:light; --bg:#eef3f8; --panel:#fff; --sidebar:#f8fbff; --sidebar-hover:#e8f1f9; --accent:#0b758b; --accent-soft:#e1f3f7; --text:#1b314b; --text-soft:#5b738a; --border:#cbd9e5; --danger:#b32947; --ok:#147551; --shadow:0 12px 40px #2344660c; }
[data-theme="light"] body { background:radial-gradient(ellipse at 82% 0%,#caedf855,transparent 48%),#eef3f8; }
[data-theme="light"] .login-wrap { background:radial-gradient(ellipse at 25% 15%,#b8e4f35f,transparent 55%),radial-gradient(ellipse at 90% 85%,#c9d4ff55,transparent 50%),linear-gradient(#89a2bb15 1px,transparent 1px),linear-gradient(90deg,#89a2bb15 1px,transparent 1px),#eef3f8; background-size:auto,auto,48px 48px,48px 48px,auto; }
[data-theme="light"] .login-card { background:linear-gradient(140deg,#fffffff2,#f5fafff5); border-color:#c4d6e4; box-shadow:0 25px 80px #21445f14; }
[data-theme="light"] .tech-mark { background:linear-gradient(140deg,#d4eef5,#eefaff); color:#086a82; border-color:#90bacb; box-shadow:0 0 24px #47a5c214; }
[data-theme="light"] .login-sub,[data-theme="light"] .login-foot { color:#56728a; }
[data-theme="light"] #loginForm input,[data-theme="light"] .modal input { background:#f9fcff; border-color:#bdcfdf; color:#233c53; }
[data-theme="light"] .sidebar { background:linear-gradient(180deg,#f9fcff,#eaf1f8); border-color:#cbd9e5; color:#49647d; }
[data-theme="light"] .brand-name { color:#193a51; }
[data-theme="light"] .brand-name small { color:#627e98; }
[data-theme="light"] .nav-item { color:#526d85; }
[data-theme="light"] .nav-item:hover { background:#dfedf7; border-color:#c5d8e6; color:#174b67; }
[data-theme="light"] .nav-item.active { background:linear-gradient(90deg,#d7edf5,#e7f2fb); color:#075e79; border-color:#9fc8d8; box-shadow:inset 3px 0 #167e99; }
[data-theme="light"] .sidebar .btn-ghost { color:#58718a; border-color:#bdcfdf; }
[data-theme="light"] .content { background-image:linear-gradient(#7d99b410 1px,transparent 1px),linear-gradient(90deg,#7d99b410 1px,transparent 1px); }
[data-theme="light"] .topbar { background:#f9fcffde; border-color:#d3dfe9; }
[data-theme="light"] .workspace-badge { color:#57768c; border-color:#c0d5e1; }
[data-theme="light"] .status-dot { background:#198a72; box-shadow:0 0 8px #198a7233; }
[data-theme="light"] .theme-toggle { background:#f1f8fc; color:#35647e; border-color:#b5cfdd; }
[data-theme="light"] .theme-toggle:hover { background:#e1eff7; border-color:#80afc5; }
[data-theme="light"] .btn-secondary { background:#f5faff; border-color:#b7ccdc; color:#31556c; }
[data-theme="light"] .btn-secondary:hover { background:#dfedf5; border-color:#81a9bf; }
[data-theme="light"] .btn-icon:hover,[data-theme="light"] .btn-ghost:hover,[data-theme="light"] .op:hover { background:#dcebf5; color:#0a6e8c; }
[data-theme="light"] .btn-primary { background:linear-gradient(110deg,#167e96,#357fc0); color:#fff; border-color:#237b9b; }
[data-theme="light"] .btn-primary:hover { background:linear-gradient(110deg,#096b86,#216aa8); }
[data-theme="light"] .btn-mini { color:#31617a; background:#edf6fb; border-color:#bfd8e5; }
[data-theme="light"] .btn-mini:hover { background:#d6eaf5; color:#155a7c; }
[data-theme="light"] .clipboard-panel { border-color:#bad2df; background:radial-gradient(ellipse at 0% 0%,#c7eaf75e,transparent 52%),linear-gradient(120deg,#fafeff,#f1f6fc); box-shadow:0 12px 35px #2145610b; }
[data-theme="light"] .clipboard-panel::before { background:linear-gradient(90deg,#25869e,transparent); }
[data-theme="light"] .clipboard-head h1 { color:#173f58; }
[data-theme="light"] .eyebrow,[data-theme="light"] .title-spark { color:#207b91; }
[data-theme="light"] .clipboard-head p { color:#5e7d93; }
[data-theme="light"] .history-badge { color:#286f87; background:#e6f2f9; border-color:#b2cfdd; }
[data-theme="light"] .clipboard-editor label,[data-theme="light"] .history-heading { color:#4a6c85; }
[data-theme="light"] .clipboard-editor textarea { background:#fbfdff; color:#1b3a52; border-color:#b6ccdc; }
[data-theme="light"] textarea::placeholder,[data-theme="light"] input::placeholder { color:#758c9f; }
[data-theme="light"] .clipboard-history { border-color:#c7dae6; }
[data-theme="light"] .clipboard-entry { background:#f6faff; border-color:#c8dce8; }
[data-theme="light"] .clipboard-entry:first-child { background:#e9f5fa; border-color:#a4cadb; }
[data-theme="light"] .clipboard-entry-label,[data-theme="light"] .clipboard-editor-foot > span { color:#5f7f94; }
[data-theme="light"] .clipboard-preview { color:#244b65; }
[data-theme="light"] .clipboard-full { color:#264e68; background:#fff; border-color:#c4d9e6; }
[data-theme="light"] .clipboard-empty { border-color:#b9d1df; color:#627e93; }
[data-theme="light"] .clipboard-note { color:#607e94; }
[data-theme="light"] .clipboard-feedback { color:#167650; }
[data-theme="light"] .clipboard-feedback.error { color:#b02d4b; }
[data-theme="light"] .dropzone { background:#e8f2f955; border-color:#a9c5d8; color:#637f96; }
[data-theme="light"] .dropzone.dragover { background:#d3eef5; border-color:#2993a9; color:#126a85; }
[data-theme="light"] .table-wrap { background:#fff; border-color:#c5d6e3; }
[data-theme="light"] .file-table thead th { background:#eaf2f9; color:#53718a; }
[data-theme="light"] .file-table tbody td { border-color:#e0eaf1; }
[data-theme="light"] .file-table tbody tr:hover { background:#eef7fb; }
[data-theme="light"] .empty { color:#71899c; }
[data-theme="light"] .upload-panel,[data-theme="light"] .modal { background:#f9fcff; border-color:#bed3e2; box-shadow:0 18px 55px #20415c22; }
[data-theme="light"] .upload-head,[data-theme="light"] .upload-foot { background:#edf4fa; }
[data-theme="light"] .upload-item { border-color:#d4e1eb; }
[data-theme="light"] .ui-bar { background:#dce8f1; }
[data-theme="light"] .select { background:#f7fbff; border-color:#bacfdf; color:#2a4c63; }
[data-theme="light"] .log-tip { background:#e8f5fb; border-color:#b6d4e5; color:#265d77; }
[data-theme="light"] .log-tip code { background:#d8ecf7; color:#185972; }
[data-theme="light"] .log-tip-sub { color:#56798e; }
[data-theme="light"] .log-view { background:#f5faff; border-color:#b8cfde; color:#285b5c; box-shadow:inset 0 0 30px #7cabb608; }
[data-theme="light"] .toast { background:#f2fbff; border-color:#aacbdc; color:#19556f; box-shadow:0 10px 28px #23445b22; }
[data-theme="light"] .toast.err { background:#fff0f2; border-color:#e4b0bb; color:#a02d47; }
[data-theme="light"] .op.danger:hover { background:#f9e3e9; color:#b32d4c; }
@media (max-width:540px) { .topbar-actions {gap:8px;} .theme-toggle {font-size:10px;padding:6px 9px;} }