:root { --tool-ink:#0f172a; --tool-muted:#64748b; --tool-line:rgba(15,23,42,.12); --tool-blue:#2563eb; --tool-violet:#7c3aed; --tool-gradient:linear-gradient(135deg,#2563eb,#7c3aed 62%,#0891b2); }
body.tool-page {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: clamp(18px, 4vw, 46px) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--tool-ink) !important;
  background: radial-gradient(circle at 10% 0%,rgba(37,99,235,.15),transparent 34%),radial-gradient(circle at 95% 10%,rgba(124,58,237,.13),transparent 30%),#f7f9fc !important;
  font-family: Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  line-height: 1.6 !important;
}
body.tool-page::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.28; background-image:linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(#000,transparent 88%); }
body.tool-page .shell, body.tool-page .box, body.tool-page .login-box, body.tool-page > .container, body.tool-page > section.panel, body.tool-page > header { width:min(100%,780px) !important; }
body.tool-page .card, body.tool-page .box, body.tool-page .login-box, body.tool-page > .container, body.tool-page .panel { border:1px solid rgba(255,255,255,.85) !important; border-radius:26px !important; background:rgba(255,255,255,.88) !important; box-shadow:0 24px 70px rgba(15,23,42,.14) !important; backdrop-filter:blur(18px) !important; }
body.tool-page .card, body.tool-page .box, body.tool-page .login-box, body.tool-page > .container, body.tool-page .panel { padding:clamp(24px,5vw,48px) !important; }
body.tool-page h1 { margin:0 0 10px !important; color:var(--tool-ink) !important; font-size:clamp(1.75rem,4vw,2.65rem) !important; line-height:1.12 !important; letter-spacing:-.045em !important; }
body.tool-page h2 { color:var(--tool-muted) !important; font-size:1rem !important; font-weight:500 !important; }
body.tool-page input, body.tool-page textarea, body.tool-page select { width:100% !important; min-height:48px !important; padding:12px 14px !important; border:1px solid var(--tool-line) !important; border-radius:13px !important; background:#f8fafc !important; color:var(--tool-ink) !important; outline:none !important; box-shadow:none !important; }
body.tool-page textarea { min-height:150px !important; resize:vertical !important; }
body.tool-page input:focus, body.tool-page textarea:focus, body.tool-page select:focus { border-color:rgba(37,99,235,.62) !important; background:#fff !important; box-shadow:0 0 0 4px rgba(37,99,235,.10) !important; }
body.tool-page button, body.tool-page .delete-btn { min-height:46px !important; padding:10px 18px !important; border:0 !important; border-radius:12px !important; color:#fff !important; background:var(--tool-gradient) !important; box-shadow:0 10px 24px rgba(37,99,235,.22) !important; cursor:pointer !important; font-weight:750 !important; transition:transform .2s ease,box-shadow .2s ease !important; }
body.tool-page button:hover { transform:translateY(-2px) !important; box-shadow:0 15px 30px rgba(37,99,235,.28) !important; }
body.tool-page a { color:var(--tool-blue) !important; text-underline-offset:.18em !important; }
body.tool-page .home, body.tool-page .home-link, body.tool-page .links a, body.tool-page .logout { display:inline-flex !important; margin-top:18px !important; padding:9px 13px !important; border:1px solid var(--tool-line) !important; border-radius:11px !important; background:#fff !important; text-decoration:none !important; font-weight:700 !important; }
body.tool-page .messages { border:1px solid var(--tool-line) !important; border-radius:16px !important; background:#f8fafc !important; }
body.tool-page .message { border:1px solid var(--tool-line) !important; border-radius:13px !important; background:#fff !important; box-shadow:0 5px 16px rgba(15,23,42,.05) !important; }
body.tool-page .message.mine { color:#fff !important; background:var(--tool-gradient) !important; }
body.tool-page header { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px !important; margin-bottom:18px !important; padding:18px 22px !important; border:1px solid rgba(255,255,255,.8) !important; border-radius:18px !important; background:rgba(255,255,255,.82) !important; box-shadow:0 12px 36px rgba(15,23,42,.08) !important; }
body.tool-page header h1 { margin:0 !important; font-size:1.35rem !important; }
body.tool-page .notice, body.tool-page .error, body.tool-page .status { border-radius:12px !important; padding:11px 14px !important; }
body.tool-page .file-list { padding:0 !important; list-style:none !important; }
body.tool-page .folder-item, body.tool-page .file-item { padding:12px 14px !important; border:1px solid var(--tool-line) !important; border-radius:12px !important; background:#f8fafc !important; }
body.tool-page.tool-file-manager { display:block !important; max-width:1100px !important; margin:0 auto !important; }
body.tool-page.tool-file-manager > header, body.tool-page.tool-file-manager > .panel { width:min(100%,980px) !important; margin-left:auto !important; margin-right:auto !important; }
body.tool-page .progress-container { overflow:hidden !important; border-radius:999px !important; background:#e2e8f0 !important; }
body.tool-page .progress-bar { background:var(--tool-gradient) !important; }
@media(max-width:640px){ body.tool-page{padding:14px !important} body.tool-page .card,body.tool-page .box,body.tool-page .login-box,body.tool-page>.container,body.tool-page .panel{padding:22px 18px !important;border-radius:20px !important} body.tool-page .input-row,body.tool-page .username-form{display:grid !important;grid-template-columns:1fr !important} }