.tool-card { cursor: pointer; }
.availability-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -7px 0 18px; }
.availability-filters button { padding: 7px 11px; border: 1px solid #e0e3ea; border-radius: 999px; color: #666a7a; background: #fff; cursor: pointer; font-size: 12px; }
.availability-filters button:hover { color: #5946cf; border-color: #aca3ed; }
.availability-filters button.active { color: #4f3cc8; border-color: #c9c2f7; background: #f1efff; font-weight: 750; }
.search:focus-within { box-shadow: 0 0 0 4px #ffffff4f, 0 12px 25px #21176638; }
body .category small { color: #747486; }
body .result-count { color: #747486; }
body .star { color: #7f8190; }
body .star.saved { color: #c78300; }
body .hero p { color: #f0edff; }
body .badge { color: #b84218; background: #ffebe2; }
.tool-card:focus-visible, .quick-item:focus-visible, .workbench button:focus-visible, .workbench input:focus-visible, .workbench textarea:focus-visible, .workbench select:focus-visible { outline: 3px solid #8f82f6; outline-offset: 2px; }
.tool-card .availability { position: absolute; right: 14px; bottom: 15px; display: inline-flex; align-items: center; gap: 4px; color: #2b8067; font-size: 10px; font-weight: 700; }
.tool-card .usage-count { position: absolute; left: 18px; bottom: 15px; color: #858899; font-size: 10px; }
.tool-card .availability::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #31b789; box-shadow: 0 0 0 3px #dcf8ef; }
.tool-card.service-tool .availability { color: #7c7b8c; }
.tool-card.service-tool .availability::before { background: #a7a8b2; box-shadow: 0 0 0 3px #eceef2; }
.tool-card.online-tool .availability { color: #4d42ba; }
.tool-card.online-tool .availability::before { background: #6653dc; box-shadow: 0 0 0 3px #eceaff; }
.quick-item { width: 100%; font: inherit; text-align: left; }

body.modal-open { overflow: hidden; }
body.dark-theme { color-scheme: dark; background: #171923; }
body.dark-theme .page, body.dark-theme .sidebar { background: #171923; }
body.dark-theme .tool-card, body.dark-theme .quick-item, body.dark-theme .backup-btn, body.dark-theme .workbench-panel { color: #edf0f7; border-color: #33394b; background: #222633; }
body.dark-theme .tool-card p, body.dark-theme .quick-item, body.dark-theme .tool-intro, body.dark-theme .field > span, body.dark-theme .field small { color: #b7bdce; }
body.dark-theme .tag, body.dark-theme .tool-output, body.dark-theme .result-card, body.dark-theme .service-note, body.dark-theme .todo-item, body.dark-theme .workbench-header, body.dark-theme .workbench-footer { color: #d8ddeb; border-color: #363c4e; background: #1d212c; }
body.dark-theme .tool-input, body.dark-theme .tool-textarea, body.dark-theme .tool-select { color: #f2f4fa; border-color: #41485b; background: #161a23; }
body.dark-theme .workbench-heading h2, body.dark-theme .result-card h3 { color: #f3f5fb; }
body.dark-theme .availability-filters button, body.dark-theme .tool-button.secondary { color: #d9ddef; border-color: #434a5f; background: #252a37; }
body.large-text { font-size: 17px; }
body.large-text .tool-card p, body.large-text .tool-intro { font-size: 14px; }
.site-footer { margin-top: 42px; padding: 20px 0; color: #7f8493; text-align: center; font-size: 12px; }
.site-footer a { color: #5a47cf; text-decoration: none; }
body.dark-theme .site-footer { color: #abb1c1; }
body.dark-theme .site-footer a { color: #b5adff; }
.workbench { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.workbench.open { visibility: visible; opacity: 1; }
.workbench-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(20, 21, 34, .56); backdrop-filter: blur(5px); cursor: default; }
.workbench-panel { position: relative; display: flex; flex-direction: column; width: min(820px, 100%); max-height: min(820px, calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 23px; background: #fff; box-shadow: 0 30px 90px rgba(20, 20, 50, .28); transform: translateY(14px) scale(.985); transition: transform .22s; }
.workbench.open .workbench-panel { transform: translateY(0) scale(1); }
.workbench-header { height: auto; min-height: 86px; flex: 0 0 auto; padding: 18px 22px; border-bottom: 1px solid #eceef4; background: linear-gradient(180deg, #fff, #fbfbfe); }
.workbench-heading { display: flex; align-items: center; gap: 13px; }
.workbench-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; color: #5a45d5; border-radius: 14px; background: #eeebff; font-size: 20px; font-weight: 800; }
.workbench-category { display: block; margin-bottom: 1px; color: #87859a; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.workbench-heading h2 { margin: 0; color: #172033; font-size: 21px; letter-spacing: -.4px; }
.workbench-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; color: #77798a; background: #f2f3f6; cursor: pointer; font-size: 24px; line-height: 1; }
.workbench-close:hover { color: #2c2f3a; background: #e7e9ee; }
.workbench-body { min-height: 260px; padding: 25px 26px 30px; overflow: auto; overscroll-behavior: contain; }
.workbench-footer { height: auto; min-height: 43px; flex: 0 0 auto; padding: 10px 25px; border-top: 1px solid #eceef4; color: #818394; background: #fafbfc; font-size: 11px; }
.workbench-footer span { display: inline-flex; align-items: center; }

.tool-intro { margin: -3px 0 20px; color: #686c7d; font-size: 14px; }
.tool-form { display: grid; gap: 17px; }
.tool-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.tool-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field > label { color: #414657; font-size: 12px; font-weight: 750; }
.field small { color: #8d8f9d; font-size: 11px; }
.tool-input, .tool-textarea, .tool-select { width: 100%; border: 1px solid #dfe3eb; border-radius: 11px; outline: 0; color: #20283a; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tool-input, .tool-select { height: 43px; padding: 0 12px; }
.tool-textarea { min-height: 145px; padding: 12px 13px; resize: vertical; line-height: 1.58; }
.tool-input:focus, .tool-textarea:focus, .tool-select:focus { border-color: #8173ec; box-shadow: 0 0 0 3px #8173ec1b; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.tool-button { min-height: 40px; padding: 9px 15px; border: 0; border-radius: 10px; color: #fff; background: #6250dc; cursor: pointer; font-weight: 750; font-size: 13px; }
.tool-button:hover { background: #4f3dc9; }
.tool-button.secondary { color: #4e5262; border: 1px solid #dfe2ea; background: #fff; }
.tool-button.secondary:hover { border-color: #aaa3e8; color: #5545c5; background: #f9f8ff; }
.tool-button.danger { color: #c74747; border: 1px solid #f0cece; background: #fff6f6; }
.tool-button:disabled { opacity: .55; cursor: not-allowed; }
.tool-output { min-height: 48px; padding: 13px 14px; overflow-wrap: anywhere; border: 1px solid #e4e6ed; border-radius: 11px; color: #313747; background: #f7f8fb; white-space: pre-wrap; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tool-output.success { color: #17694f; border-color: #c8eadf; background: #f1fbf7; }
.tool-output.error { color: #a33a3a; border-color: #f1cece; background: #fff5f5; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { padding: 14px 12px; border: 1px solid #e7e9ef; border-radius: 12px; background: #fafbfc; text-align: center; }
.stat strong { display: block; color: #282e3f; font-size: 21px; }
.stat span { color: #8c8e9d; font-size: 11px; }
.result-card { padding: 18px; border: 1px solid #e5e3f5; border-radius: 14px; background: linear-gradient(135deg, #f9f8ff, #f4f6ff); }
.result-card h3 { margin: 0 0 5px; font-size: 16px; }
.result-card p { margin: 0; color: #6f7281; font-size: 13px; }
.big-result { display: block; margin: 7px 0 2px; color: #5743d3; font-size: 34px; line-height: 1.2; font-weight: 850; letter-spacing: -1px; }
.inline-options { display: flex; flex-wrap: wrap; gap: 8px 15px; }
.check-option { display: inline-flex; align-items: center; gap: 6px; color: #606474; font-size: 12px; }
.check-option input { accent-color: #6653dc; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 135px; overflow: hidden; border-radius: 14px; }
.swatch { display: flex; align-items: flex-end; justify-content: center; padding: 12px 4px; border: 0; cursor: pointer; transition: flex .15s; }
.swatch:hover { filter: brightness(.98); }
.swatch span { padding: 4px 7px; border-radius: 6px; color: #fff; background: #0005; font: 11px ui-monospace, monospace; backdrop-filter: blur(3px); }
.preview-box { display: grid; place-items: center; min-height: 210px; overflow: auto; border: 1px dashed #d9dce5; border-radius: 13px; background: linear-gradient(45deg,#f5f5f7 25%,transparent 25%),linear-gradient(-45deg,#f5f5f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f5f5f7 75%),linear-gradient(-45deg,transparent 75%,#f5f5f7 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.preview-box img, .preview-box svg, .preview-box canvas { max-width: 100%; max-height: 340px; }
.preview-box canvas { touch-action: none; cursor: crosshair; }
.flip-card { width: 100%; border: 1px solid #e5e3f5; cursor: pointer; text-align: left; }
.flip-card:hover { border-color: #bcb3f3; }
.drop-zone { display: grid; place-items: center; min-height: 155px; padding: 24px; border: 2px dashed #d8d9e5; border-radius: 14px; color: #76798b; background: #fafafe; text-align: center; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragging { color: #5d4bd2; border-color: #9b91ed; background: #f7f5ff; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.timer-display { margin: 8px 0 15px; color: #4131b5; font: 800 58px/1 ui-monospace, monospace; letter-spacing: -3px; text-align: center; }
.timer-mode { color: #89879b; text-align: center; font-size: 12px; font-weight: 700; }
.todo-list { display: grid; gap: 8px; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #e6e8ee; border-radius: 10px; background: #fff; }
.todo-item.done .todo-text { color: #a0a2ad; text-decoration: line-through; }
.todo-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.todo-delete { border: 0; color: #a4a5af; background: transparent; cursor: pointer; }
.table-wrap { max-height: 320px; overflow: auto; border: 1px solid #e1e4eb; border-radius: 11px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { max-width: 240px; padding: 9px 11px; overflow: hidden; border-bottom: 1px solid #eceef2; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.data-table th { position: sticky; top: 0; color: #4e5262; background: #f5f6f9; }
.markdown-preview { min-height: 200px; padding: 16px; border: 1px solid #e1e4eb; border-radius: 11px; background: #fff; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 { margin: .8em 0 .4em; }
.markdown-preview code { padding: 2px 5px; border-radius: 4px; background: #f1f2f5; }
.service-note { padding: 20px; border: 1px solid #e1e4ee; border-radius: 14px; background: #f8f9fc; }
.service-note strong { display: block; margin-bottom: 7px; color: #303647; }
.service-note p { margin: 0 0 15px; color: #6d7181; font-size: 13px; }
.toast { position: fixed; z-index: 1100; left: 50%; bottom: 28px; max-width: calc(100% - 32px); padding: 10px 15px; border-radius: 10px; color: #fff; background: #252837; box-shadow: 0 10px 30px #17192938; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .2s; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  body { padding-bottom: 66px; }
  body .page header nav { position: fixed; z-index: 900; left: 14px; right: 14px; bottom: 10px; display: flex; align-items: center; justify-content: space-around; gap: 4px; min-height: 54px; padding: 6px; border: 1px solid #e2e4eb; border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 12px 40px rgba(30,35,55,.2); backdrop-filter: blur(16px); }
  body .page header nav a { flex: 1; padding: 8px 5px; border-radius: 11px; text-align: center; font-size: 12px; }
  body .page header nav a.active { color: #5b48d3; background: #f0edff; }
  body .page .sidebar { position: sticky; z-index: 10; top: 0; padding: 10px 0; background: #f8f9fc; }
}

@media (max-width: 620px) {
  .workbench { padding: 0; align-items: end; }
  .workbench-panel { width: 100%; max-height: 93vh; border-radius: 21px 21px 0 0; transform: translateY(30px); }
  .workbench-header { min-height: 76px; padding: 15px 17px; }
  .workbench-body { padding: 20px 17px 25px; }
  .workbench-footer { padding: 9px 17px; }
  .tool-row, .tool-row.three { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .palette { min-height: 190px; }
  .timer-display { font-size: 47px; }
}