:root { --page:#fff; --card:#dedede; --hover:#f1f3f4; --text:#202124; --muted:#70757a; --line:#dadce0; --blue:#1a73e8; --danger:#c5221f; }
* { box-sizing:border-box; }
html, body { min-width:320px; min-height:100%; margin:0; }
body { color:var(--text); background:var(--page); font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size:14px; font-weight:400; letter-spacing:-.01em; overflow-x:hidden; text-rendering:optimizeLegibility; }
button,input { font:inherit; } button { cursor:pointer; }
.page { width:min(1100px,calc(100% - 40px)); margin:auto; padding:76px 0 50px; }
.topbar { position:fixed; top:0; left:50%; z-index:15; display:flex; align-items:center; justify-content:space-between; width:min(1100px,calc(100% - 40px)); margin:0; padding:12px 0 10px; background:var(--page); transform:translateX(-50%); }
.header-title-box { min-width:0; }
.topbar h1 { margin:0; overflow:hidden; color:#252b3a; font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size:20px; font-weight:400; letter-spacing:-.01em; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.sub-title { margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.data-status { margin:7px 0 0; color:var(--muted); font-size:11px; }
.data-status.pending { color:var(--blue); }
.actions { display:flex; gap:8px; }
.actions button { min-width:58px; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:5px; color:var(--blue); background:#fff; font-size:12px; }
.actions button:hover { background:var(--hover); }
.shortcut-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:22px 14px; }
.shortcut { position:relative; min-width:0; text-align:center; }
.shortcut.dragging { opacity:.4; touch-action:none; }
.shortcut.drag-placeholder { border:2px dashed var(--blue); border-radius:12px; background:rgba(26,115,232,.08); opacity:.8; }
.shortcut.drag-placeholder > * { visibility:hidden; }
.shortcut.drag-ghost { position:fixed; z-index:30; pointer-events:none; opacity:.95; box-shadow:0 8px 22px rgba(60,64,67,.22); }
.shortcut.move-mode { outline:2px dashed var(--blue); outline-offset:2px; border-radius:12px; }
.shortcut-link { display:block; padding:10px 6px; border-radius:10px; color:inherit; text-decoration:none; }
.shortcut-link:hover { background:var(--card); }
.shortcut-icon { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 10px; overflow:hidden; border-radius:50%; color:#5f6368; background:#f1f3f4; font-size:20px; }
.shortcut-icon img { width:25px; height:25px; object-fit:contain; }
.shortcut-name { overflow:hidden; font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.shortcut-url { margin-top:4px; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.add-shortcut .shortcut-link { color:var(--blue); }
.add-shortcut .shortcut-icon { color:var(--blue); font-size:30px; font-weight:300; }
.shortcut-more { position:absolute; top:2px; right:2px; display:grid; place-items:center; width:25px; height:25px; padding:0; border:0; border-radius:50%; color:var(--muted); background:transparent; opacity:0; font-size:20px; line-height:1; }
.shortcut:hover .shortcut-more,.shortcut-more:focus { opacity:1; }
.shortcut-more:hover { background:var(--hover); }
.card-menu { position:fixed; z-index:10; min-width:120px; padding:5px; border:1px solid var(--line); border-radius:7px; background:#fff; box-shadow:0 2px 10px rgba(60,64,67,.2); }
.card-menu button { display:block; width:100%; padding:8px 10px; border:0; border-radius:4px; color:var(--text); background:transparent; font-size:13px; text-align:left; }
.card-menu button:hover { background:var(--hover); }
.card-menu .danger { color:var(--danger); }
.dialog { width:min(380px,calc(100% - 32px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:10px; color:var(--text); background:#fff; box-shadow:0 8px 30px rgba(60,64,67,.25); }
.dialog::backdrop { background:rgba(32,33,36,.35); }
.dialog form { position:relative; padding:24px; }
.dialog h2 { margin:0 0 22px; font-size:18px; font-weight:400; }
.dialog-close { position:absolute; top:13px; right:13px; width:30px; height:30px; padding:0; border:0; border-radius:50%; color:var(--muted); background:transparent; font-size:23px; line-height:1; }
.dialog-close:hover { background:var(--hover); }
.dialog label { display:block; margin-top:15px; color:var(--muted); font-size:11px; }
.dialog label input { display:block; width:100%; height:41px; margin-top:7px; padding:0 10px; border:1px solid var(--line); border-radius:4px; outline:0; color:var(--text); background:#fff; font-size:13px; }
.dialog label input:focus { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.login-copy { margin:-8px 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.github-help { margin:12px 0 -8px; color:var(--muted); font-size:11px; line-height:1.5; }
.login-error { min-height:18px; margin:10px 0 -8px; color:var(--danger); font-size:12px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.cancel-button,.save-button { height:35px; padding:0 17px; border:0; border-radius:4px; font-size:12px; font-weight:400; }
.cancel-button { color:var(--blue); background:transparent; }
.cancel-button:hover { background:var(--hover); }
.save-button { color:#fff; background:var(--blue); }
.save-button:hover { background:#1765cc; }
.toast { position:fixed; left:50%; bottom:22px; z-index:20; padding:9px 14px; border-radius:4px; color:#fff; background:#3c4043; font-size:13px; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1020px) {
  .shortcut-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 12px; }
}
@media (max-width:820px) {
  .page { width:min(680px,calc(100% - 32px)); padding-top:72px; }
  .topbar { width:min(680px,calc(100% - 32px)); }
  .shortcut-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 10px; }
  .shortcut-icon { width:48px; height:48px; }
}
@media (max-width:600px) {
  .page { width:calc(100% - 24px); padding:70px max(0px, env(safe-area-inset-right)) 38px max(0px, env(safe-area-inset-left)); }
  .topbar { width:calc(100% - 24px); padding:9px 0 8px; }
  .topbar h1 { font-size:18px; }
  .sub-title { margin-top:3px; font-size:11px; }
  .data-status { max-width:230px; line-height:1.4; }
  .actions { gap:6px; }
  .actions button { min-width:54px; height:40px; padding:0 10px; }
  .actions button:last-of-type { min-width:62px; }
  .shortcut-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 6px; }
  .shortcut-link { padding:8px 3px; }
  .shortcut-icon { width:48px; height:48px; margin-bottom:8px; font-size:19px; }
  .shortcut-icon img { width:25px; height:25px; }
  .shortcut-name { font-size:12px; }
  .shortcut-url { display:none; }
  .shortcut-more { top:0; right:0; width:28px; height:28px; opacity:0; }
  .dialog { width:calc(100% - 24px); border-radius:12px; }
  .dialog form { padding:22px 18px; }
  .dialog h2 { font-size:18px; margin-bottom:20px; }
  .dialog label { margin-top:14px; }
  .dialog label input { height:44px; }
  .dialog-actions { margin-top:22px; }
  .cancel-button,.save-button { min-height:42px; }
}
@media (max-width:420px) {
  .page { width:calc(100% - 20px); }
  .topbar { width:calc(100% - 20px); padding-top:8px; padding-bottom:7px; }
  .topbar h1 { font-size:17px; }
  .data-status { max-width:180px; font-size:10px; }
  .actions button { min-width:50px; padding:0 8px; font-size:12px; }
  .shortcut-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 2px; }
  .shortcut-link { padding:7px 1px; }
  .shortcut-icon { width:48px; height:48px; margin-bottom:6px; }
  .shortcut-name { font-size:11px; }
}
@media (pointer:coarse) {
  /* 让页面接管普通触摸手势，快捷卡片仍可在“移动”模式下拖拽。 */
  .shortcut[data-id] { touch-action:pan-y; }
  .shortcut[data-id].move-mode,.shortcut[data-id].dragging { touch-action:none; }
  .shortcut[data-id].dragging { opacity:.95; box-shadow:0 8px 22px rgba(60,64,67,.22); }
  .shortcut.show-actions .shortcut-more { opacity:1; }
  .shortcut-more, .actions button { min-height:40px; }
}
@media (prefers-color-scheme:dark) { :root { --page:#202124; --card:#292a2d; --hover:#303134; --text:#e8eaed; --muted:#9aa0a6; --line:#5f6368; } .actions button,.dialog,.card-menu,.dialog label input { background:#303134; } .shortcut-icon { color:#bdc1c6; background:#303134; } .save-button { background:#8ab4f8; color:#202124; } }