:root { --card: #ffffff0f; --card-bd: #ffffff24; --muted: #b6c2d1; --text: #eef2f7; --tline: #ffffff24; --primary1: #8b5cf6; --primary2: #22d3ee; --radius: 14px; }
body.page-tool { background: var(--bg-tool); }
.tool-wrap { position: relative; background: transparent; padding-bottom: 120px; }
.tool-hero { text-align: center; padding: 176px 10px 0; }
.tool-hero h1 { font-family: var(--display); font-weight: 100; font-size: 53px; line-height: 53px; color: #fff; margin: 0; }
.tool-hero .tagline { font-family: var(--sans); font-weight: 100; font-size: 53px; line-height: 53px; color: #fff; margin: 0; }
.tool-hero .intro { font-family: "Inter", var(--sans); font-size: 16px; line-height: 1.6; color: #b6c2d1; max-width: 760px; margin: 18px auto 0; }
@media (max-width: 767px) {
.tool-hero { padding-top: 120px; }
.tool-hero h1 { font-size: 36px; line-height: 1.1; }
.tool-hero .tagline { font-size: 26px; line-height: 1.2; }
}
.presu-counter { --bg: rgba(255,255,255,.05); --line: rgba(255,255,255,.14); --glow: rgba(59,91,253,.20);
display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 24px auto 18px; padding: 10px 14px;
border: 1px solid var(--line); border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--bg);
box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
-webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%); }
.presu-label { color: rgba(255,255,255,.75); font-size: 14px; white-space: nowrap; }
.presu-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; display: inline-flex; align-items: baseline; gap: 6px; background: linear-gradient(135deg, #8b5cf6, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.presu-num .hash { color: #7aa5ff; background: none; -webkit-text-fill-color: #7aa5ff; }
#presuNum { font-size: 28px; line-height: 1; }
.bump { animation: pc-bump .35s ease; }
@keyframes pc-bump { 40% { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 0 6px var(--glow)); } 100% { transform: none; filter: none; } }
@media (max-width: 640px) { .presu-counter { padding: 8px 12px; margin: 2px auto 14px; } #presuNum { font-size: 22px; } .presu-label { font-size: 13px; } }
.tool { max-width: var(--container); margin: 0 auto; padding: 7px 10px 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); }
.tool * { font-family: inherit; }
.tcard { position: relative; overflow-x: clip; margin: 0 0 18px; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-bd); box-shadow: 0 0 0 1px #ffffff08 inset, 0 10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.tcard h2 { font-size: 1.17em; font-weight: 700; margin: 6px 0 14px 2px; color: #f8fafc; }
.tcard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.grid2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.mt10 { margin-top: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin: 6px 0; }
.muted { color: var(--muted); }
.t-right { text-align: right; }
.field input, .field select, .field textarea, #items td input {
width: 100%; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18); color: #f8fafc !important; outline: none;
transition: background .15s ease, box-shadow .15s ease, border-color .15s ease; color-scheme: dark; background-clip: padding-box; font-size: 14px;
}
.field select option { background: #161616; color: #f8fafc; }
.field input:focus, .field select:focus, .field textarea:focus, #items td input:focus { background: rgba(255,255,255,.10) !important; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.25); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #f8fafc !important; -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.08) inset !important; caret-color: #f8fafc; }
.field input[type="file"] { padding: 6px 8px; color: rgba(255,255,255,.80) !important; }
.field input[type="file"]::file-selector-button { margin-right: 12px; cursor: pointer; border-radius: 10px; font-weight: 700; background: linear-gradient(135deg, var(--primary1), var(--primary2)); color: #fff; border: 1px solid #ffffff2e; padding: 8px 12px; box-shadow: 0 8px 24px rgba(139,92,246,.25); transition: transform .12s ease, filter .12s ease; }
.field input[type="file"]::file-selector-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-grad { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 18px; border-radius: 12px; border: 1px solid #ffffff2e; color: #fff; background: linear-gradient(135deg, var(--primary1), var(--primary2)); font-weight: 700; box-shadow: 0 8px 24px rgba(139,92,246,.25); transition: transform .12s ease, filter .12s ease; }
.btn-grad.small { padding: 8px 12px; font-weight: 600; }
.btn-grad:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-grad:disabled { opacity: .7; cursor: progress; transform: none; }
#items { width: 100%; border-collapse: collapse; }
#items th, #items td { border-bottom: 1px solid var(--tline); padding: 10px; font-size: 14px; vertical-align: middle; }
#items th { color: #e8eef7; font-weight: 700; text-align: left; }
#items th.t-right { text-align: right; }
#items th.c-desc { width: 52%; } #items th.c-qty { width: 12%; } #items th.c-unit, #items th.c-total { width: 18%; } #items th.c-x { width: 40px; }
#items td input { height: 38px; }
#items .remove { background: none; border: 0; color: #ef4444; cursor: pointer; font-weight: 700; font-size: 15px; padding: 4px 6px; }
.totals { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.kvs { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 12px; }
.kvs .row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 6px 0; align-items: center; }
.kvs .row2.grand { font-weight: 800; }
.kvs #vat { width: 88px; text-align: right; padding: 6px 8px; }
.hr { height: 1px; background: var(--tline); margin: 8px 0; }
.note { font-size: 13px; }
.action { text-align: center; }
.error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.25) !important; }
.error-label { color: #fecaca !important; }
.form-status { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.4); color: #e6fbff; font-size: 14px; }
.form-status.is-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); color: #fecaca; }
.privacy-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 760px) {
.grid2, .totals { grid-template-columns: 1fr; }
.items-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#items { min-width: 560px; }
#items th, #items td { padding: 12px 10px; }
.btn-grad, .add .btn-grad.small { width: 100%; justify-content: center; }
.field input, .field select, .field textarea, #items td input { font-size: 16px; }
}
.tool-guide { max-width: 980px; margin: 70px auto 0; padding: 0 16px; font-family: "Inter", var(--sans); color: #d9e1ea; line-height: 1.7; }
.tool-guide h2 { font-family: var(--display); font-weight: 100; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; color: #fff; text-align: center; margin: 0 0 24px; }
.tool-guide h3 { font-size: 19px; color: #fff; margin: 26px 0 8px; }
.tool-guide ol { padding-left: 22px; }
.tool-guide a { color: #fff; }
.donar { max-width: 1200px; margin: 70px auto 80px; padding: 0 10px; }
.donar-inner { background: #131313; border-radius: 32px; padding: 34px 3px 40px; text-align: center; }
.donar h2 { font-family: var(--display); font-weight: 100; font-size: 53px; line-height: 53px; color: #fff; margin: 0 0 20px; }
.donar .sub { font-family: var(--display); font-weight: 100; font-size: 29px; line-height: 29px; color: #fff; margin: 0 0 34px; }
.donar .txt { font-family: "Inter", var(--sans); font-size: 20px; line-height: 30px; color: #fff; max-width: 1080px; margin: 0 auto 20px; padding: 22px 0 0 22px; }
.donar-row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.lottie-box { width: 384px; max-width: 34%; aspect-ratio: 384 / 294; }
.paypal-box { flex: 0 1 327px; min-height: 16px; }
.paypal-consent { font-size: 13px; color: #b6c2d1; margin: 0 0 10px; }
.paypal-consent a { color: #fff; }
.paypal-box .btn-grad { width: 100%; justify-content: center; }
@media (max-width: 767px) {
.donar h2 { font-size: 34px; line-height: 1.1; }
.donar .sub { font-size: 20px; line-height: 1.2; }
.donar .txt { font-size: 17px; line-height: 1.5; padding: 10px 14px 0; }
.donar-row { flex-direction: column; }
.lottie-box { max-width: 70%; }
.lottie-box.second { display: none; }
}