:root {
    color-scheme: light;
    --bg: #f7f8fa;
    --text: #25282e;
    --muted: #777d87;
    --border: #e5e7eb;
    --primary: #2563eb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.container { width: min(1100px, calc(100% - 64px)); margin: 0 auto; }
.header { display: flex; align-items: center; padding: 52px 0 30px; border-bottom: 1px solid var(--border); }
.logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font-size: 30px; font-weight: 700; line-height: 1.3; }
.logo img { display: block; }
main { padding: 32px 0 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; min-height: 36px; }
.section-head h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: #535965; }
.tool-count { color: #9096a0; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.order-actions { display: flex; gap: 6px; }
.icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #767e8a; cursor: pointer; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover { background: #eceef2; color: #25282e; }
.icon-button[aria-pressed="true"] { background: #eaf0ff; color: #2563eb; }
.icon-button:disabled { opacity: .25; cursor: default; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: max-content; max-width: 200px; padding: 6px 9px; border-radius: 4px; color: #fff; background: #30343b; font-size: 12px; font-weight: 400; line-height: 1.5; opacity: 0; visibility: hidden; pointer-events: none; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }
.done-icon, .is-sorting .sort-icon { display: none; }
.is-sorting .done-icon { display: block; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.card { position: relative; min-width: 0; min-height: 126px; border: 1px solid var(--border); border-radius: 8px; background: #fff; transition: border-color 160ms, box-shadow 160ms; }
.card:hover, .card:focus-within { border-color: #c6cbd3; box-shadow: 0 3px 12px #25282e06; }
.tool-link { display: flex; align-items: center; gap: 15px; height: 100%; min-height: 124px; padding: 22px 43px 22px 20px; text-decoration: none; border-radius: 7px; }
.tool-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px; color: var(--accent); background: var(--tint); }
.tool-icon svg { width: 25px; height: 25px; }
.tool-text { min-width: 0; }
.tool-text strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.tool-text small { display: block; margin-top: 7px; color: #757c86; font-size: 13px; line-height: 1.6; }
.external-icon { position: absolute; top: 13px; right: 13px; width: 14px; height: 14px; color: #969da7; }
.sort-controls { position: absolute; right: 5px; top: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sort-controls .icon-button { width: 32px; height: 34px; pointer-events: auto; }
.sort-controls .move-button { visibility: hidden; }
.drag-handle { cursor: grab; opacity: 0; touch-action: none; }
.card:hover .drag-handle, .card:focus-within .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.is-sorting .move-button { visibility: visible; }
.is-sorting .drag-handle { opacity: 1; }
.is-sorting .external-icon { visibility: hidden; }
.is-sorting .card { border-style: dashed; }
.card.sortable-ghost { background: #edf2ff; border: 1px dashed #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.card.sortable-ghost > * { opacity: .16; }
.card.sortable-drag { box-shadow: 0 10px 24px #25282e1a; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 64px; padding: 22px 0 36px; border-top: 1px solid var(--border); color: #878e98; font-size: 12px; line-height: 1.6; }
.friends { display: flex; align-items: center; gap: 15px; }
.friends a { text-decoration: none; }
.friends a:hover { color: #30343b; text-decoration: underline; text-underline-offset: 4px; }
.friends span { color: #c0c5cc; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .container { width: calc(100% - 36px); }
    .header { padding: 30px 0 24px; }
    .logo { font-size: 27px; }
    .logo img { width: 36px; height: 36px; }
    main { padding-top: 23px; }
    .grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .card { min-height: 116px; }
    .tool-link { min-height: 114px; padding-left: 18px; padding-right: 50px; gap: 16px; }
    .footer { margin-top: 38px; padding-bottom: 28px; }
}
@media (pointer: coarse) {
    .drag-handle { opacity: .55; }
    .sort-controls { right: 3px; }
    .sort-controls .icon-button { width: 40px; }
    [data-tooltip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }