.inner-main { min-height: 70vh; }
.inner-footer { margin-top: 72px; }
.breadcrumb { padding: 22px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .8rem; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb svg { width: 14px; }

.inner-hero { padding-block: 54px 34px; text-align: center; }
.inner-hero .section-kicker { display: inline-flex; align-items: center; gap: 7px; }
.inner-hero h1 { margin: 8px auto 10px; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.045em; }
.inner-hero > p:not(.section-kicker) { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 1.04rem; }
.catalog-search { width: min(680px, 100%); min-height: 60px; margin: 28px auto 18px; padding: 6px 7px 6px 20px; border: 2px solid var(--ink); border-radius: 999px; display: flex; align-items: center; gap: 11px; background: var(--surface); box-shadow: 0 8px 0 rgba(20,86,255,.08); }
.catalog-search svg { width: 20px; color: var(--muted); }
.catalog-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.catalog-search button { width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); cursor: pointer; }
.catalog-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.catalog-filter { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .76rem; font-weight: 700; cursor: pointer; }
.catalog-filter.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.catalog-section { padding-block: 24px 50px; }
.catalog-summary { margin: 0 0 18px; color: var(--muted); font-size: .84rem; }
.catalog-grid .tool-card { display: block; }
.tool-directory-section { padding-block: 26px 22px; }
.tool-directory-heading, .catalog-card-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.tool-directory-heading h2, .catalog-card-heading h2 { margin:5px 0 0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.15; }
.tool-directory-heading > div > p:last-child { margin:7px 0 0; color:var(--muted); font-size:.84rem; }
.tool-directory-total { flex:0 0 auto; padding:10px 14px; border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line)); border-radius:999px; color:var(--blue); background:color-mix(in srgb,var(--blue) 6%,var(--surface)); font-size:.76rem; font-weight:800; }
.tool-directory { margin-top:20px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
.tool-directory-group { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 12px 28px rgba(19,35,76,.07); }
.tool-directory-group-heading { width:100%; min-height:66px; padding:11px 13px; border:0; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; color:var(--ink); background:linear-gradient(120deg,color-mix(in srgb,var(--directory-color) 13%,var(--surface)),var(--surface)); font:inherit; text-align:left; cursor:pointer; }
.tool-directory-group-heading > span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--directory-color); box-shadow:0 7px 16px color-mix(in srgb,var(--directory-color) 24%,transparent); }
.tool-directory-group-heading svg { width:18px; }
.tool-directory-group-heading strong { min-width:0; font-size:.86rem; }
.tool-directory-group-heading em { min-width:27px; height:27px; padding-inline:6px; border-radius:9px; display:grid; place-items:center; color:var(--directory-color); background:var(--surface); font-size:.68rem; font-style:normal; font-weight:900; }
.tool-directory-group nav { display:grid; padding:3px 13px 11px; }
.tool-directory-link { min-width:0; min-height:40px; padding:8px 2px; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink); font-size:.76rem; font-weight:650; transition:color .18s ease,padding .18s ease; }
.tool-directory-link span { min-width:0; overflow-wrap:anywhere; }
.tool-directory-link svg { width:14px; flex:0 0 14px; color:var(--directory-color); }
.tool-directory-link:hover { padding-left:6px; color:var(--directory-color); }
.tool-directory-link.featured { margin:4px -5px 0; padding-inline:9px 5px; border:1px solid color-mix(in srgb,var(--directory-color) 35%,var(--line)); border-radius:11px; color:#fff; background:linear-gradient(120deg,color-mix(in srgb,var(--directory-color) 78%,#101b49),var(--directory-color)); }
.tool-directory-link.featured svg { color:#fff; }
.catalog-card-heading { margin-bottom:18px; }
.catalog-card-heading .catalog-summary { margin:0; text-align:right; }

.tool-page-wrap { padding-bottom: 20px; }
.tool-page-hero { min-height: 330px; margin-top: 20px; padding: 42px 48px; border: 1px solid var(--line); border-radius: 30px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); align-items: center; gap: 42px; position: relative; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.tool-page-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -90px; top: -70px; border-radius: 50%; background: var(--tool-color); opacity: .9; }
.tool-page-copy { position: relative; z-index: 2; }
.tool-category-chip { width: fit-content; min-height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); font-size: .74rem; font-weight: 800; }
.tool-category-chip svg { width: 16px; }
.tool-page-copy h1 { margin: 16px 0 8px; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }
.tool-page-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 1.04rem; }
.tool-page-trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-page-trust span { min-height: 34px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); background: var(--paper); font-size: .72rem; font-weight: 700; }
.tool-page-trust svg { width: 15px; color: var(--blue); }
.tool-page-art { width: min(340px, 100%); aspect-ratio: 3 / 2; justify-self: center; position: relative; z-index: 1; }
.tool-page-art::before, .tool-page-art::after { display: none; }
.tool-page-art img { width: 100%; height: 100%; display: block; object-fit: cover; border: 5px solid rgba(255,255,255,.78); border-radius: 28px; box-shadow: 0 24px 55px rgba(8,27,61,.24), 0 3px 0 rgba(255,255,255,.75) inset; transform: rotate(2deg); }
.tool-page-art-icon { width: 150px; height: 150px; border: 8px solid rgba(255,255,255,.75); border-radius: 38px; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.35); box-shadow: 0 14px 0 rgba(8,27,61,.1); transform: rotate(4deg); }
.tool-page-art-icon svg { width: 76px; height: 76px; }

.tool-layout { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tool-workspace-card, .tool-side-card, .related-section, .seo-guide { border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 9px 24px rgba(19,35,76,.06); }
.tool-workspace-card { padding: 30px; }
.workspace-heading { margin-bottom: 22px; display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.workspace-heading h2 { margin: 0; font-size: 1.55rem; }
.workspace-heading p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; }
.workspace-step { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #102000; background: var(--lime); font-weight: 800; transform: rotate(3deg); }
.tool-interface { display: grid; gap: 18px; }
.drop-zone { min-height: 210px; padding: 28px; border: 2px dashed color-mix(in srgb, var(--blue) 40%, var(--line)); border-radius: 20px; display: grid; place-items: center; text-align: center; position: relative; background: color-mix(in srgb, var(--blue) 3%, var(--surface)); transition: border-color .2s ease, background .2s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.drop-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-zone-icon { width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); }
.drop-zone-icon svg { width: 30px; }
.drop-zone b, .drop-zone small { display: block; }
.drop-zone small { margin-top: 5px; color: var(--muted); }
.file-list { display: grid; gap: 8px; }
.file-chip { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; color: var(--muted); background: var(--paper); font-size: .78rem; }
.file-chip b { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip small { display: block; margin-top: 2px; color: var(--muted); font-size: .63rem; }
.file-order-number { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); font-size: .68rem; font-weight: 900; }
.file-order-actions { display: flex; gap: 4px; }
.file-order-actions button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; color: var(--blue); background: var(--surface); cursor: pointer; }
.file-order-actions button:disabled { opacity: .3; cursor: default; }
.file-order-actions svg { width: 14px; }
.file-queue-heading { padding:10px 12px; border:1px solid var(--line); border-radius:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); }
.file-queue-heading[hidden] { display:none; }
.file-queue-heading b,.file-queue-heading small { display:block; }
.file-queue-heading b { font-size:.72rem; }
.file-queue-heading small { margin-top:2px; color:var(--muted); font-size:.61rem; }
.file-queue-heading button { min-height:32px; padding:0 9px; border:0; border-radius:10px; display:inline-flex; align-items:center; gap:5px; color:#b63847; background:color-mix(in srgb,#ff5364 9%,var(--surface)); font-size:.62rem; font-weight:800; cursor:pointer; }
.file-queue-heading button svg { width:14px; }
.file-chip-with-preview { grid-template-columns:50px minmax(0,1fr) auto; }
.file-chip-with-preview > img { width:50px; height:44px; border:1px solid var(--line); border-radius:10px; display:block; object-fit:cover; background:var(--surface); }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.control-grid.one { grid-template-columns: 1fr; }
.field { display: grid; gap: 7px; color: var(--ink); font-size: .8rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; outline: 0; color: var(--ink); background: var(--paper); font: inherit; font-weight: 500; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); }
.option-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check-option { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; gap: 7px; background: var(--paper); font-size: .78rem; font-weight: 700; }
.tool-primary { min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; background: var(--blue); font-weight: 800; cursor: pointer; box-shadow: 0 7px 0 color-mix(in srgb, var(--blue-dark) 70%, transparent); }
.tool-primary:hover { transform: translateY(-1px); }
.tool-primary:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.45); box-shadow: 0 4px 0 color-mix(in srgb, var(--blue-dark) 35%, transparent); }
.tool-primary:disabled:hover { transform: none; }
.tool-primary svg { width: 18px; }
.tool-secondary { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font-weight: 700; cursor: pointer; }
.tool-result { padding: 18px; border: 1px solid color-mix(in srgb, var(--mint) 50%, var(--line)); border-radius: 16px; color: var(--ink); background: color-mix(in srgb, var(--mint) 10%, var(--surface)); }
.tool-result[hidden] { display: none; }
.tool-result strong { display: block; margin-bottom: 4px; }
.tool-result > span { display: block; color: var(--muted); font-size: .76rem; }
.inline-loading { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--ink); }
.inline-loading > span { width: 22px; height: 22px; border: 3px solid color-mix(in srgb, var(--blue) 18%, var(--line)); border-top-color: var(--blue); border-radius: 50%; animation: inline-spin .75s linear infinite; }
@keyframes inline-spin { to { transform: rotate(360deg); } }
.output-results { display: grid; gap: 14px; }
.output-file-list { display: grid; gap: 8px; }
.output-file { min-height: 62px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 38px; align-items: center; gap: 10px; background: var(--surface); }
.output-file > span:first-child { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
.output-file > span:first-child svg { width: 20px; }
.output-file > span:first-child img { width:100%; height:100%; border-radius:inherit; display:block; object-fit:cover; }
.output-file b, .output-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-file small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.output-file > a { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: white; background: var(--blue); }
.output-file > a svg { width: 17px; }
.output-summary-strip { display:flex; flex-wrap:wrap; gap:7px; }
.output-summary-strip span { min-height:30px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:var(--muted); background:var(--paper); font-size:.61rem; font-weight:700; }
.output-summary-strip svg { width:14px; color:var(--mint); }
.result-success-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.result-success-row > span:first-child { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #086d51; background: color-mix(in srgb, var(--mint) 18%, var(--surface)); }
.result-success-row > span:first-child svg { width: 22px; }
.result-success-row strong, .result-success-row small { display: block; }
.result-success-row small { color: var(--muted); font-size: .67rem; }
.result-success-row .tool-secondary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.result-success-row .tool-secondary svg { width: 16px; }
.processing-panel, .download-panel, .processing-error { min-height: 560px; padding: clamp(24px, 5vw, 52px); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); border-radius: 26px; display: flex; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; position: relative; text-align: center; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--cyan) 15%, var(--surface)) 0, transparent 38%), linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--lime) 5%, var(--surface))); }
.processing-panel::before, .download-panel::before { content: ""; width: 230px; height: 230px; position: absolute; top: -145px; right: -105px; border-radius: 50%; background: var(--lime); filter: blur(18px); opacity: .28; }
.processing-panel::after, .download-panel::after { content: "✦"; position: absolute; left: clamp(18px, 4vw, 42px); top: clamp(18px, 4vw, 36px); color: var(--blue); font-size: 1.9rem; transform: rotate(-12deg); }
.processing-kicker { margin: 0 0 18px; color: var(--blue); font-size: .75rem; font-weight: 900; letter-spacing: .035em; }
.processing-ring { --progress: 0deg; width: 190px; aspect-ratio: 1; padding: 12px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(from -90deg, var(--blue) 0 var(--progress), color-mix(in srgb, var(--blue) 10%, var(--surface)) var(--progress) 360deg); box-shadow: 0 24px 60px rgba(23,91,255,.2), 0 0 0 8px color-mix(in srgb, var(--blue) 6%, transparent); transition: background .18s linear; }
.processing-ring::before { content: ""; position: absolute; inset: 5px; border: 2px solid rgba(255,255,255,.7); border-radius: inherit; pointer-events: none; }
.processing-ring-core { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; position: relative; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), inset 0 18px 35px rgba(255,255,255,.25); }
.processing-ring-core::after { content: ""; width: 74px; height: 22px; position: absolute; top: 17px; left: 33px; border-radius: 50%; background: rgba(255,255,255,.78); filter: blur(8px); transform: rotate(-18deg); }
.processing-ring-core strong { font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; }
.processing-ring-core span { margin-top: 7px; color: var(--muted); font-size: .67rem; font-weight: 800; }
.processing-panel h3, .download-panel h3, .processing-error h3 { margin: 24px 0 7px; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(1.5rem, 4vw, 2rem); }
.processing-status, .download-panel > p { max-width: 560px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.processing-track { width: min(440px, 100%); height: 7px; margin-top: 24px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--blue) 10%, var(--paper)); }
.processing-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--lime)); box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 70%, transparent); transition: width .18s linear; }
.processing-notes { margin-top: 19px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.processing-notes span { min-height: 32px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); background: var(--paper); font-size: .68rem; font-weight: 750; }
.processing-notes svg { width: 15px; color: var(--blue); }
.processing-promo { width: min(570px, 100%); margin-top: 25px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #ff8a00 24%, var(--line)); border-radius: 17px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 12px; text-align: left; background: linear-gradient(115deg, color-mix(in srgb, #ff8a00 11%, var(--surface)), color-mix(in srgb, #ff3d71 7%, var(--surface))); }
.processing-promo-mark { grid-row: 1 / 3; min-height: 30px; padding: 0 9px; border-radius: 9px; display: inline-flex; align-items: center; color: #fff; background: linear-gradient(135deg, #ff3d71, #ff8a00); font-size: .65rem; font-weight: 900; }
.processing-promo p { margin: 0; color: var(--ink); font-size: .74rem; }
.processing-promo a { width: fit-content; display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: .69rem; font-weight: 800; }
.processing-promo a svg { width: 13px; }
.download-success { width: 92px; height: 92px; margin-bottom: 22px; border: 7px solid color-mix(in srgb, var(--mint) 25%, var(--surface)); border-radius: 28px; display: grid; place-items: center; color: #072b20; background: linear-gradient(145deg, var(--lime), var(--mint)); box-shadow: 0 18px 38px rgba(20,197,153,.22), inset 0 2px 0 rgba(255,255,255,.75); transform: rotate(4deg); }
.download-success svg { width: 42px; height: 42px; stroke-width: 3; }
.download-panel .processing-kicker { margin-bottom: -12px; }
.download-file-card { width: min(560px, 100%); margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 17px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 13px; text-align: left; background: var(--paper); }
.download-file-card > span:first-child { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #ff475f, #ff8a00); box-shadow: 0 8px 18px rgba(255,71,95,.22); }
.download-file-card svg { width: 25px; }
.download-file-card b, .download-file-card small { display: block; }
.download-file-card b { overflow-wrap: anywhere; }
.download-file-card small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.download-actions { width: min(560px, 100%); margin-top: 18px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.download-actions .tool-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.download-actions svg { width: 17px; }
.download-local-note { max-width: 560px; margin-top: 20px; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); text-align: left; font-size: .68rem; line-height: 1.55; }
.download-local-note svg { width: 15px; flex: 0 0 auto; color: var(--mint); }
.processing-error { min-height: 420px; }
.processing-error > span { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #c53232; background: color-mix(in srgb, #ff5a5f 13%, var(--surface)); }
.processing-error > span svg { width: 34px; }
.processing-error p { max-width: 540px; margin: 0 0 22px; color: var(--muted); font-size: .82rem; }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.result-metrics.metrics-four { grid-template-columns: repeat(4, 1fr); }
.result-metrics.metrics-six { grid-template-columns: repeat(3, 1fr); }
.metric { padding: 15px; border-radius: 14px; text-align: center; background: var(--paper); }
.metric b { display: block; color: var(--blue); font-size: 1.3rem; }
.metric small { color: var(--muted); }
.code-preview { min-height: 290px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: #fff; }
.code-preview canvas, .code-preview img, .code-preview svg { max-width: 100%; height: auto !important; }
.code-placeholder { display: grid; place-items: center; color: var(--muted); text-align: center; }
.code-placeholder small { display: block; margin-top: 4px; }
.fake-qr { width: 128px; height: 128px; padding: 9px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; background: white; box-shadow: 0 8px 18px rgba(8,27,61,.14); }
.fake-qr i { background: #0c1735; }
.fake-qr i.light { opacity: 0; }
.fake-barcode { width: min(360px, 86%); height: 110px; display: flex; align-items: stretch; gap: 3px; }
.fake-barcode i { flex: 1; background: #0c1735; }
.fake-barcode i:nth-child(3n) { flex: .35; }
.document-preview { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.document-preview h3 { margin: 0 0 12px; }
.document-preview dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.document-preview dd { margin: 0; font-weight: 700; }
.document-preview-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--blue); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.document-preview-head small { display: block; margin-bottom: 4px; color: var(--muted); }
.document-preview-head h3 { margin: 0; font-size: 1.45rem; }
.document-preview-head > b { padding: 5px 9px; border-radius: 9px; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
.document-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.document-actions[hidden] { display: none; }
.document-actions .tool-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.document-actions svg { width: 17px; }

/* Premium receipt studio */
:is(body[data-tool="receipt"], body[data-tool="quotation"]) .tool-layout { grid-template-columns: minmax(0, 1fr); }
:is(body[data-tool="receipt"], body[data-tool="quotation"]) .tool-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(body[data-tool="receipt"], body[data-tool="quotation"]) .tool-workspace-card { padding: clamp(18px, 3vw, 34px); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--blue) 2.5%, var(--surface))); }
:is(body[data-tool="receipt"], body[data-tool="quotation"]) .workspace-heading { margin-bottom: 28px; }
.receipt-studio { display: grid; grid-template-columns: minmax(390px, .88fr) minmax(500px, 1.12fr); gap: 24px; align-items: start; }
.receipt-editor, .receipt-preview-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.receipt-editor { padding: 22px; display: grid; gap: 20px; box-shadow: 0 16px 34px rgba(15,32,74,.06); }
.receipt-editor-intro { display: flex; align-items: center; gap: 12px; }
.receipt-editor-intro > span { width: 45px; height: 45px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1658e8, #784bff); box-shadow: 0 9px 20px rgba(22,88,232,.25); transform: rotate(-4deg); }
.receipt-editor-intro svg { width: 22px; }
.receipt-editor-intro h3, .receipt-preview-heading h3 { margin: 0; font-size: 1.06rem; }
.receipt-editor-intro p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.receipt-theme-picker { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.receipt-theme-picker legend { margin-bottom: 8px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.receipt-theme-picker label { min-height: 48px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; gap: 7px; position: relative; cursor: pointer; background: var(--paper); font-size: .7rem; }
.receipt-theme-picker label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 9%, transparent); }
.receipt-theme-picker input { position: absolute; opacity: 0; pointer-events: none; }
.receipt-theme-swatch { width: 26px; height: 26px; flex: 0 0 auto; border: 3px solid #fff; border-radius: 9px; box-shadow: 0 3px 9px rgba(9,25,58,.18); }
.swatch-sapphire { background: linear-gradient(135deg, #0b1734 50%, #1658e8 50%); }
.swatch-emerald { background: linear-gradient(135deg, #102b2a 50%, #087c69 50%); }
.swatch-coral { background: linear-gradient(135deg, #351b25 50%, #e95143 50%); }
.receipt-field-group { padding-top: 19px; border-top: 1px solid var(--line); }
.receipt-field-heading { margin-bottom: 13px; display: flex; align-items: center; gap: 9px; }
.receipt-field-heading > span { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); font-size: .7rem; font-weight: 900; }
.receipt-field-heading h4 { margin: 0; font-size: .86rem; }
.receipt-field-group .control-grid { gap: 10px; }
.receipt-field-group .field { font-size: .7rem; }
.receipt-field-group .field input, .receipt-field-group .field select, .receipt-field-group .field textarea { min-height: 42px; padding: 9px 11px; border-radius: 11px; }
.receipt-field-group .field textarea { min-height: 70px; }
.field-full { grid-column: 1 / -1; }
.receipt-item-heading { flex-wrap: wrap; }
.receipt-add-line { min-height: 32px; margin-left: auto; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line)); border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--surface)); font-size: .66rem; font-weight: 800; cursor: pointer; }
.receipt-add-line svg { width: 14px; }
.receipt-lines { display: grid; gap: 9px; }
.receipt-line { padding: 10px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: minmax(0,1fr) 74px 112px 34px; align-items: end; gap: 8px; background: var(--paper); }
.receipt-line-detail { min-width: 0; }
.receipt-remove-line { width: 34px; height: 42px; border: 0; border-radius: 10px; display: grid; place-items: center; color: #d63d4b; background: color-mix(in srgb, #ff4d5e 9%, var(--surface)); cursor: pointer; }
.receipt-remove-line[hidden] { display: block; visibility: hidden; }
.receipt-remove-line svg { width: 16px; }
.receipt-create-button { min-height: 54px; margin-top: 2px; font-size: .86rem; box-shadow: 0 13px 28px rgba(20,86,255,.22); }
.receipt-preview-panel { min-width: 0; padding: 16px; position: sticky; top: 92px; background: linear-gradient(145deg, #e9eef8, #f7f9fd); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.receipt-preview-heading { margin-bottom: 12px; padding: 2px 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receipt-preview-heading small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .62rem; font-weight: 700; }
.receipt-live-chip { min-height: 25px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; color: #087c69; background: #dff9ef; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.receipt-live-chip i { width: 6px; height: 6px; border-radius: 50%; background: #11b985; box-shadow: 0 0 0 4px rgba(17,185,133,.13); }
.receipt-document-preview { padding: 0; border: 0; border-radius: 15px; overflow: auto; background: transparent; box-shadow: 0 18px 38px rgba(21,40,82,.15); }
.receipt-sheet { --receipt-accent: #1658e8; --receipt-ink: #0b1734; --receipt-soft: #eef4ff; --receipt-bright: #b8ff38; min-width: 560px; min-height: 785px; padding: 38px 36px 30px; position: relative; overflow: hidden; color: var(--receipt-ink); background: #fff; font-size: .64rem; line-height: 1.45; }
.receipt-theme-emerald { --receipt-accent: #087c69; --receipt-ink: #102b2a; --receipt-soft: #eef9f6; --receipt-bright: #e4bd63; }
.receipt-theme-coral { --receipt-accent: #e95143; --receipt-ink: #351b25; --receipt-soft: #fff1ee; --receipt-bright: #ffd03f; }
.receipt-sheet-ribbon { height: 9px; position: absolute; inset: 0 0 auto; background: linear-gradient(90deg, var(--receipt-accent) 0 76%, var(--receipt-bright) 76%); }
.receipt-sheet-header { padding-bottom: 24px; display: grid; grid-template-columns: 1fr auto; gap: 24px; border-bottom: 1px solid #e4e8f1; }
.receipt-company { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 11px; }
.receipt-company-mark { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--receipt-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--receipt-accent) 24%, transparent); font-size: 1.2rem; font-weight: 900; }
.receipt-company strong, .receipt-company small, .receipt-document-meta small { display: block; }
.receipt-company strong { margin-bottom: 4px; font-size: .93rem; }
.receipt-company small { max-width: 260px; color: #737d91; font-size: .54rem; }
.receipt-document-meta { min-width: 146px; text-align: right; }
.receipt-document-meta h2 { margin: 8px 0 1px; color: var(--receipt-accent); font-family: "Chakra Petch","Anuphan",sans-serif; font-size: 1.38rem; letter-spacing: -.035em; }
.receipt-document-meta b { font-size: .65rem; }
.receipt-document-meta small { color: #737d91; font-size: .54rem; }
.receipt-paid-chip { min-height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; color: #fff; background: var(--receipt-accent); font-size: .51rem; font-weight: 900; }
.receipt-customer-card { margin-top: 22px; padding: 15px 17px; border-radius: 14px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; background: var(--receipt-soft); }
.receipt-customer-card > div { display: grid; align-content: start; gap: 3px; }
.receipt-customer-card > div:last-child { grid-template-columns: auto 1fr; gap: 4px 10px; }
.receipt-customer-card span, .receipt-customer-card small { color: #737d91; font-size: .51rem; }
.receipt-customer-card strong { font-size: .78rem; }
.receipt-customer-card b { font-size: .56rem; text-align: right; }
.receipt-sheet-table { margin-top: 22px; }
.receipt-sheet-row { min-height: 43px; padding: 9px 10px; border-bottom: 1px solid #e9ecf3; display: grid; grid-template-columns: 25px minmax(150px,1fr) 47px 70px 80px; align-items: center; gap: 6px; }
.receipt-sheet-row > :nth-last-child(-n+3) { text-align: right; }
.receipt-sheet-row strong { overflow-wrap: anywhere; }
.receipt-sheet-table-head { min-height: 38px; border: 0; border-radius: 10px; color: #fff; background: var(--receipt-ink); font-weight: 800; }
.receipt-sheet-summary { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1fr) 225px; align-items: start; gap: 22px; }
.receipt-words { padding: 13px 14px; border-radius: 12px; display: grid; gap: 4px; background: var(--receipt-soft); }
.receipt-words span, .receipt-words small { color: #737d91; font-size: .5rem; }
.receipt-words strong { color: var(--receipt-accent); font-size: .59rem; }
.receipt-sheet-summary dl { margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; }
.receipt-sheet-summary dt { color: #737d91; }
.receipt-sheet-summary dd { margin: 0; text-align: right; font-weight: 700; }
.receipt-grand-label, .receipt-grand-total { margin-top: 5px; padding-block: 10px; color: #fff !important; background: var(--receipt-accent); }
.receipt-grand-label { padding-left: 11px; border-radius: 10px 0 0 10px; }
.receipt-grand-total { padding-right: 11px; border-radius: 0 10px 10px 0; font-size: .74rem; }
.receipt-sheet-footer { margin-top: 62px; display: grid; grid-template-columns: 150px 1fr; align-items: end; gap: 24px; }
.receipt-sheet-footer > span { display: grid; gap: 3px; text-align: center; }
.receipt-sheet-footer i { height: 1px; margin-bottom: 4px; background: #afb6c5; }
.receipt-sheet-footer small, .receipt-sheet-footer p { color: #7b8498; font-size: .48rem; }
.receipt-sheet-footer p { margin: 0; padding-top: 10px; border-top: 3px solid var(--receipt-accent); text-align: right; }
.receipt-document-actions { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.receipt-preview-error { min-height: 360px; display: grid; place-items: center; align-content: center; text-align: center; color: #c33d49; }
.receipt-preview-error svg { width: 42px; height: 42px; }
.receipt-preview-error h3 { margin: 12px 0 3px; }
.receipt-preview-error p { margin: 0; color: var(--muted); }
.inline-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.inline-actions .tool-secondary { display: inline-flex; align-items: center; gap: 7px; }
.inline-actions svg { width: 16px; }
.password-output { min-height: 58px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); }
.password-output code { overflow-wrap: anywhere; color: var(--blue); font-size: 1rem; font-weight: 800; }
.password-strength { padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; background: var(--paper); }
.password-strength > span { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.password-strength > span i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--muted); transition: width .25s ease, background .25s ease; }
.password-strength b { font-size: .72rem; }
.password-strength small { grid-column: 1 / -1; color: var(--muted); font-size: .65rem; }
.password-strength[data-level="weak"] > span i { width: 25%; background: #e95143; }
.password-strength[data-level="fair"] > span i { width: 52%; background: #f4ad00; }
.password-strength[data-level="strong"] > span i { width: 76%; background: #16b788; }
.password-strength[data-level="excellent"] > span i { width: 100%; background: linear-gradient(90deg, #16b788, #1456ff); }
.calculation-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--muted); background: var(--paper); font-size: .68rem; }
.age-insights { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.age-insights > span { padding: 13px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px 9px; background: var(--paper); }
.age-insights svg { width: 22px; height: 22px; grid-row: 1 / 3; color: var(--blue); }
.age-insights b, .age-insights small { display: block; }
.age-insights b { font-size: .74rem; }
.age-insights small { color: var(--muted); font-size: .64rem; }

/* Premium experiences: VAT, word analysis, age timeline and password vault */
:is(body[data-tool="vat"],body[data-tool="word-count"],body[data-tool="age"],body[data-tool="password"]) .tool-workspace-card { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--blue) 2.5%,var(--surface))); }
.tool-experience-panel { padding: 20px; border: 1px solid color-mix(in srgb,var(--blue) 14%,var(--line)); border-radius: 20px; display: grid; gap: 18px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 92% 0,color-mix(in srgb,var(--lime) 17%,transparent),transparent 13rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--blue) 4%,var(--surface))); box-shadow: inset 0 1px rgba(255,255,255,.8),0 12px 28px rgba(15,34,78,.06); }
.tool-experience-panel::after { content:""; width:150px; height:36px; position:absolute; right:34px; top:-24px; z-index:-1; border-radius:50%; background:rgba(255,255,255,.72); filter:blur(10px); transform:rotate(-9deg); }
.experience-heading { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; }
.experience-heading > span { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--blue),#7548f2); box-shadow:0 10px 20px rgba(20,86,255,.22); transform:rotate(-4deg); }
.experience-heading > span svg { width:23px; }
.experience-heading h3 { margin:0; font-size:1rem; }
.experience-heading p { margin:3px 0 0; color:var(--muted); font-size:.7rem; }
.experience-heading em { min-height:28px; padding:0 9px; border:1px solid color-mix(in srgb,var(--mint) 28%,var(--line)); border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:#08745f; background:color-mix(in srgb,var(--mint) 11%,var(--surface)); font-size:.56rem; font-style:normal; font-weight:900; letter-spacing:.05em; }
.experience-heading em svg { width:13px; }
.preset-row { display:flex; flex-wrap:wrap; gap:8px; }
.preset-row button { min-height:38px; padding:0 13px; border:1px solid var(--line); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); background:var(--surface); font-size:.7rem; font-weight:800; cursor:pointer; transition:.2s ease; }
.preset-row button:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.preset-row button.active { border-color:var(--blue); color:#fff; background:linear-gradient(145deg,var(--blue),#704bf1); box-shadow:0 7px 16px rgba(20,86,255,.18); }
.preset-row svg { width:15px; }
.premium-action { min-height:56px; background:linear-gradient(110deg,var(--blue),#6847ec 58%,#8a51f6); box-shadow:0 9px 0 color-mix(in srgb,var(--blue-dark) 68%,transparent),0 16px 30px rgba(32,62,160,.16); }
.premium-tool-result { padding:20px; border-color:color-mix(in srgb,var(--blue) 20%,var(--line)); background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--mint) 7%,var(--surface))); box-shadow:0 12px 28px rgba(15,34,78,.07); }
.premium-result-heading { margin-bottom:15px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; }
.premium-result-heading > span { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#0b382e; background:linear-gradient(145deg,var(--lime),var(--mint)); box-shadow:0 8px 17px rgba(25,190,145,.2); }
.premium-result-heading svg { width:21px; }
.premium-result-heading strong,.premium-result-heading small { display:block; }
.premium-result-heading strong { margin:0; }
.premium-result-heading small { margin-top:2px; color:var(--muted); font-size:.66rem; }
.metric.accent-metric { background:color-mix(in srgb,var(--mint) 11%,var(--paper)); }
.metric.accent-metric b { color:#087c69; }
.metric.hero-metric { color:#fff; background:linear-gradient(145deg,var(--blue),#6945eb); box-shadow:0 9px 20px rgba(20,86,255,.18); }
.metric.hero-metric b,.metric.hero-metric small { color:#fff; }
.formula-card { margin-top:12px; padding:12px 13px; border:1px solid var(--line); border-radius:13px; display:flex; align-items:center; gap:10px; background:var(--paper); }
.formula-card > svg { width:22px; color:var(--blue); }
.formula-card span { display:grid; gap:2px; }
.formula-card b { margin:0; font-size:.7rem; }
.formula-card small { color:var(--muted); font-size:.65rem; }
.result-action-row { margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }
.result-action-row .tool-secondary { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.result-action-row svg { width:15px; }
.metrics-eight { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metrics-eight .metric { padding:12px 8px; }
.metrics-eight .metric b { font-size:1.12rem; }
.metrics-eight .metric small { font-size:.58rem; }
.word-insight-panel { padding:16px 18px; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:16px; background:var(--surface); }
.word-insight-panel > div:first-child { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:1px 8px; }
.word-insight-panel > div:first-child > span { width:32px; height:32px; grid-row:1/3; border-radius:10px; display:grid; place-items:center; color:var(--blue); background:color-mix(in srgb,var(--blue) 9%,var(--surface)); }
.word-insight-panel svg { width:16px; }
.word-insight-panel h3 { margin:0; font-size:.8rem; }
.word-insight-panel small { color:var(--muted); font-size:.6rem; }
.keyword-cloud { min-height:46px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.keyword-cloud > span { min-height:34px; padding:5px 9px; border:1px solid color-mix(in srgb,var(--blue) 12%,var(--line)); border-radius:11px; display:flex; align-items:center; gap:6px; color:var(--muted); background:var(--paper); font-size:.64rem; }
.keyword-cloud b { color:var(--ink); font-size:calc(.74rem - var(--keyword-rank,0) * .018rem); }
.keyword-cloud small { color:var(--blue); }
.premium-inline-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.premium-inline-actions .tool-secondary { justify-content:center; }
.danger-soft { color:#b63847; }
.privacy-microcopy { margin:-7px 0 0; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.62rem; }
.privacy-microcopy svg { width:14px; color:var(--mint); }
.premium-age-insights { grid-template-columns:repeat(3,minmax(0,1fr)); }
.birthday-progress { margin-top:12px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.birthday-progress > div { margin-bottom:8px; display:flex; justify-content:space-between; gap:12px; font-size:.67rem; }
.birthday-progress > div b { color:var(--blue); }
.birthday-progress > i { height:8px; border-radius:999px; display:block; overflow:hidden; background:color-mix(in srgb,var(--blue) 10%,var(--surface)); }
.birthday-progress em { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#7a50f5,var(--mint)); box-shadow:0 0 13px rgba(20,86,255,.25); }
.batch-field { max-width:220px; }
.premium-password-output { min-height:68px; border-color:color-mix(in srgb,var(--blue) 20%,var(--line)); background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--blue) 4%,var(--paper))); box-shadow:0 10px 24px rgba(15,34,78,.06); }
.password-batch { display:grid; gap:8px; }
.password-batch[hidden] { display:none; }
.password-batch > div { min-height:56px; padding:9px 10px; border:1px solid var(--line); border-radius:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; background:var(--paper); }
.password-batch span { min-width:0; display:grid; gap:2px; }
.password-batch small { color:var(--muted); font-size:.58rem; }
.password-batch code { overflow-wrap:anywhere; color:var(--blue); font-size:.8rem; font-weight:800; }
.password-batch .tool-secondary { min-height:38px; display:inline-flex; align-items:center; gap:5px; font-size:.64rem; }
.password-batch svg { width:14px; }
.code-control-panel { gap:20px; }
.qr-extra-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.qr-extra-fields[hidden] { display:none; }
.qr-hidden-option { grid-column:1 / -1; width:fit-content; cursor:pointer; }
.qr-extra-fields .field input:disabled { color:var(--muted); background:color-mix(in srgb,var(--surface) 72%,var(--line)); cursor:not-allowed; }
.premium-code-preview { padding:14px; border:1px solid color-mix(in srgb,var(--blue) 15%,var(--line)); border-radius:20px; background:linear-gradient(145deg,#eaf0fb,var(--surface)); box-shadow:inset 0 1px rgba(255,255,255,.8),0 12px 28px rgba(15,34,78,.07); }
.premium-code-preview > header { margin-bottom:11px; padding:1px 2px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.premium-code-preview > header small { display:block; margin-bottom:2px; color:var(--muted); font-size:.6rem; font-weight:700; }
.premium-code-preview > header h3 { margin:0; font-size:.92rem; }
.premium-code-preview .business-live-chip { min-height:25px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:#087c69; background:#dff9ef; font-size:.54rem; font-weight:900; letter-spacing:.06em; }
.premium-code-preview .business-live-chip i { width:6px; height:6px; border-radius:50%; background:#11b985; box-shadow:0 0 0 4px rgba(17,185,133,.13); }
.premium-code-preview .code-preview { min-height:330px; border:0; border-radius:15px; background:linear-gradient(145deg,#fff,#fafbff); box-shadow:0 16px 34px rgba(18,38,82,.11); }
.premium-code-preview .code-preview canvas { max-height:520px; object-fit:contain; }
.promptpay-presets button { flex:1 1 120px; }
.code-download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.code-download-grid .tool-secondary { min-height:62px; padding:10px 12px; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:9px; text-align:left; }
.code-download-grid .tool-secondary > span:first-child { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--blue),#744af1); }
.code-download-grid svg { width:17px; }
.code-download-grid b,.code-download-grid small { display:block; }
.code-download-grid b { font-size:.72rem; }
.code-download-grid small { margin-top:2px; color:var(--muted); font-size:.58rem; }

.tool-sidebar { display: grid; gap: 16px; }
.tool-side-card { padding: 20px; }
.tool-side-card h3 { margin: 0 0 12px; font-size: 1rem; }
.tool-side-card ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.tool-side-card li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: .78rem; }
.tool-side-card li svg { width: 17px; flex: 0 0 auto; color: var(--mint); }
.tool-ad-card { min-height: 230px; }
.related-section { margin-top: 26px; padding: 28px; }
.related-section .section-heading { margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-card { min-height: 94px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: 48px 1fr 18px; align-items: center; gap: 10px; background: var(--paper); }
.related-card > span:first-child { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
.related-card svg { width: 20px; }
.related-card > svg { width: 16px; color: var(--blue); }
.related-card strong, .related-card small { display: block; }
.related-card small { color: var(--muted); font-size: .68rem; }

.seo-guide { margin-top: 26px; padding: clamp(26px, 4vw, 48px); }
.seo-guide-intro { max-width: 850px; }
.seo-guide-intro h2 { margin: 7px 0 12px; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(1.85rem, 3.7vw, 3rem); line-height: 1.12; letter-spacing: -.035em; }
.seo-guide-intro > p:last-child { margin: 0; color: var(--muted); line-height: 1.85; }
.seo-guide-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.seo-benefits, .seo-steps { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.seo-guide h3 { margin: 0; font-size: 1.1rem; }
.seo-benefits h3, .seo-steps h3 { display: flex; align-items: center; gap: 9px; }
.seo-benefits h3 svg, .seo-steps h3 svg { width: 20px; color: var(--blue); }
.seo-benefits ul, .seo-steps ol { margin: 18px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; }
.seo-benefits li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.seo-benefits li svg { width: 18px; flex: 0 0 auto; color: var(--mint); }
.seo-steps li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.seo-steps li b { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #102000; background: var(--lime); }
.seo-faq { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.seo-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.seo-section-heading .section-kicker { margin-bottom: 4px; }
.seo-section-heading > svg { width: 36px; height: 36px; color: var(--blue); }
.seo-faq-list { margin-top: 17px; display: grid; gap: 10px; }
.seo-faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.seo-faq summary { padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 800; list-style: none; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary svg { width: 18px; flex: 0 0 auto; color: var(--blue); transition: transform .2s ease; }
.seo-faq details[open] summary svg { transform: rotate(45deg); }
.seo-faq details p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.seo-updated { margin: 24px 0 0; color: var(--muted); font-size: .72rem; }

.editorial-hero { min-height: 480px; padding-block: 64px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 56px; }
.editorial-hero h1, .policy-heading h1 { margin: 8px 0 16px; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.05em; }
.editorial-hero h1 span { color: var(--blue); }
.editorial-hero > div:first-child > p:last-child { max-width: 680px; color: var(--muted); font-size: 1.02rem; line-height: 1.85; }
.editorial-hero-mark { min-height: 300px; border: 1px solid var(--line); border-radius: 34px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 20%, var(--surface)), color-mix(in srgb, var(--lime) 22%, var(--surface))); box-shadow: var(--shadow); transform: rotate(2deg); }
.editorial-hero-mark::before { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: var(--lime); filter: blur(42px); opacity: .5; }
.editorial-hero-mark img { width: 90px; position: relative; z-index: 1; filter: drop-shadow(0 14px 18px rgba(8,27,61,.18)); }
.editorial-hero-mark b, .editorial-hero-mark strong { position: relative; z-index: 1; font-family: "Chakra Petch", sans-serif; font-size: 3.2rem; }
.editorial-hero-mark strong { padding: 2px 10px; border-radius: 14px; color: white; background: var(--ink); }
.editorial-content { display: grid; gap: 28px; padding-bottom: 20px; }
.editorial-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.editorial-values article, .editorial-story, .editorial-cta { border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 9px 24px rgba(19,35,76,.06); }
.editorial-values article { padding: 26px; }
.editorial-values article > svg { width: 45px; height: 45px; padding: 10px; border-radius: 14px; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
.editorial-values h2 { margin: 18px 0 8px; font-size: 1.05rem; }
.editorial-values p, .editorial-story p, .editorial-cta p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.editorial-story { padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.editorial-story h2, .editorial-cta h2 { margin: 6px 0 0; font-family: "Chakra Petch", "Anuphan", sans-serif; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; }
.editorial-story > div:last-child { display: grid; gap: 14px; }
.editorial-cta { padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 8%, var(--surface)), color-mix(in srgb, var(--lime) 12%, var(--surface))); }
.editorial-cta .tool-primary { flex: 0 0 auto; }
.policy-layout { padding-block: 54px 20px; display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 48px; }
.policy-heading { position: sticky; top: 100px; }
.policy-heading h1 { font-size: clamp(2.7rem, 5vw, 4.4rem); }
.policy-heading > p:last-child { color: var(--muted); font-size: .78rem; }
.policy-icon { width: 72px; height: 72px; margin-bottom: 22px; border-radius: 22px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); box-shadow: 0 9px 24px rgba(19,35,76,.08); }
.policy-icon svg { width: 34px; height: 34px; }
.policy-copy { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 9px 24px rgba(19,35,76,.06); }
.policy-copy section + section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.policy-copy h2 { margin: 0 0 10px; font-size: 1.24rem; }
.policy-copy p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.85; }
.policy-contact { margin-top: 18px; min-height: 44px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: white; background: #16b766; font-size: .8rem; font-weight: 800; }
.policy-contact svg { width: 17px; }

@media (max-width: 1100px) {
  .tool-page-hero { padding: 34px; grid-template-columns: minmax(0, 1fr) 210px; }
  .tool-page-hero::before { width: 330px; height: 330px; }
  .tool-page-art { width: min(270px, 100%); height: auto; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { grid-template-columns: 1fr 1fr; }
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-directory { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .receipt-studio { grid-template-columns: 1fr; }
  .receipt-preview-panel { position: static; }
}

/* Loan calculator */
.loan-studio{display:grid;gap:22px}.loan-studio [hidden]{display:none!important}.loan-intro{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid #c9daf7;border-radius:24px;color:#fff;background:radial-gradient(circle at 88% 0,rgba(47,217,255,.28),transparent 32%),linear-gradient(125deg,#061638,#0a3476 58%,#075c78);box-shadow:0 18px 40px rgba(5,34,91,.18)}.loan-intro:after{content:"";position:absolute;right:-30px;bottom:-55px;width:190px;height:190px;border:35px solid rgba(116,255,213,.12);border-radius:50%}.loan-intro>span{display:grid;place-items:center;flex:0 0 58px;height:58px;border:1px solid rgba(255,255,255,.28);border-radius:18px;color:#092a5e;background:linear-gradient(145deg,#f9d267,#ffb62e);box-shadow:inset 0 1px rgba(255,255,255,.8),0 12px 28px rgba(255,184,45,.25)}.loan-intro>span svg{width:28px;height:28px}.loan-intro>div{position:relative;z-index:1;flex:1}.loan-intro small{font-weight:700;color:#9be8ff}.loan-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch","Anuphan",sans-serif}.loan-intro p{margin:0;color:#dbe9ff}.loan-intro em{position:relative;z-index:1;padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font:700 12px "Chakra Petch",sans-serif;color:#0b2b5a;background:#baff49;font-style:normal}.loan-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.loan-presets button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid #d4dff1;border-radius:15px;color:#31415f;background:#fff;font:700 14px "Anuphan",sans-serif;cursor:pointer;transition:.2s}.loan-presets button:hover,.loan-presets button.active{color:#fff;border-color:#155de0;background:linear-gradient(135deg,#0a4ec7,#1675e8);box-shadow:0 9px 22px rgba(17,91,214,.2);transform:translateY(-1px)}.loan-presets svg{width:18px}.loan-mode{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;border:0}.loan-mode legend{margin:0 0 10px;color:#243651;font-weight:800}.loan-mode label{cursor:pointer}.loan-mode input{position:absolute;opacity:0;pointer-events:none}.loan-mode span{display:grid;gap:3px;min-height:76px;padding:15px 18px;border:1px solid #d6e0ef;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(32,54,91,.06);transition:.2s}.loan-mode b{color:#10234a;font-size:16px}.loan-mode small{color:#6b7890}.loan-mode input:checked+span{border-color:#2168dd;background:linear-gradient(140deg,#f5f9ff,#e5efff);box-shadow:inset 0 0 0 2px rgba(33,104,221,.12),0 12px 30px rgba(33,104,221,.12)}.loan-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.loan-form-grid>label{display:grid;gap:8px;padding:15px;border:1px solid #dce4f0;border-radius:17px;background:linear-gradient(145deg,#fff,#f8fbff)}.loan-form-grid>label>span:first-child{display:flex;justify-content:space-between;color:#263955;font-weight:750}.loan-form-grid small{font-weight:600;color:#73819a}.loan-form-grid input,.loan-form-grid select{width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid #cbd7e8;border-radius:13px;color:#102044;background:#fff;font:700 16px "Anuphan",sans-serif;outline:none}.loan-form-grid input:focus,.loan-form-grid select:focus{border-color:#1766dd;box-shadow:0 0 0 4px rgba(23,102,221,.1)}.loan-form-grid input:disabled{color:#9aa6b8;background:#eef2f7}.loan-term-input{display:grid!important;grid-template-columns:1fr 100px;gap:8px}.loan-rate-note{display:flex;align-items:flex-start;gap:9px;padding:12px 15px;border:1px solid #cbdcf8;border-radius:14px;color:#29466f;background:#f0f6ff;font-size:13px;line-height:1.65}.loan-rate-note svg{flex:0 0 18px;margin-top:2px}.loan-calculate{min-height:56px;border-radius:17px!important;font-size:17px!important;box-shadow:0 14px 28px rgba(20,87,214,.22)}.loan-error{min-height:0;margin:0;color:#c52a40;font-weight:700;text-align:center}.loan-error:empty{display:none}.loan-results{display:grid;gap:20px;padding-top:6px}.loan-results>header,.loan-schedule>header,.loan-chart-card>header{display:flex;align-items:center;justify-content:space-between;gap:15px}.loan-results>header small,.loan-schedule>header small,.loan-chart-card>header small{color:#66758d;font-weight:650}.loan-results h3,.loan-schedule h3,.loan-chart-card h3{margin:2px 0 0;color:#112349;font-size:21px}.loan-results>header>div,.loan-schedule>header>div{display:flex;gap:8px}.loan-results header button,.loan-schedule header button{display:inline-flex;align-items:center;gap:6px;min-height:39px;padding:0 12px;border:1px solid #cfdaeb;border-radius:12px;color:#244164;background:#fff;font:700 13px "Anuphan",sans-serif;cursor:pointer}.loan-results header button:hover,.loan-schedule header button:hover{color:#0b58d8;border-color:#6c9eea}.loan-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.loan-metrics article{display:grid;align-content:center;gap:4px;min-height:130px;padding:18px;border:1px solid #d9e2ef;border-radius:19px;background:linear-gradient(145deg,#fff,#f4f8fd);box-shadow:0 12px 28px rgba(18,45,91,.07)}.loan-metrics article.hero{color:#fff;border-color:#0a4dc1;background:radial-gradient(circle at 95% 0,rgba(87,242,220,.32),transparent 38%),linear-gradient(135deg,#092c77,#0969d7)}.loan-metrics small{font-weight:700;color:#6b7890}.loan-metrics .hero small,.loan-metrics .hero span{color:#c9e5ff}.loan-metrics b{overflow-wrap:anywhere;color:#102452;font:700 clamp(21px,2.5vw,28px)/1.15 "Chakra Petch","Anuphan",sans-serif}.loan-metrics .hero b{color:#fff}.loan-metrics span{color:#8490a4;font-size:12px}.loan-extra-result{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid #9ae0c3;border-radius:20px;background:linear-gradient(120deg,#eafff3,#eefdf8);box-shadow:0 12px 30px rgba(20,147,99,.1)}.loan-extra-result>span{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#05a676,#22c790)}.loan-extra-result h3{margin:2px 0;color:#0b6548}.loan-extra-result p{margin:4px 0 0;color:#3e6c5c}.loan-chart-card,.loan-schedule{display:grid;gap:14px;padding:19px;border:1px solid #d6e0ef;border-radius:21px;background:#fff;box-shadow:0 14px 32px rgba(18,45,91,.07)}.loan-chart-card>header>div{display:flex;align-items:center;gap:7px;color:#6b7890;font-size:12px}.loan-chart-card>header i{width:16px;height:4px;border-radius:99px;background:#42dbff}.loan-chart-card>header i:nth-of-type(2){margin-left:7px;background:#ffc34d}.loan-chart-card canvas{display:block;width:100%;height:auto;border-radius:15px}.loan-table-wrap{overflow:auto;border:1px solid #e0e7f1;border-radius:15px}.loan-schedule table{width:100%;min-width:720px;border-collapse:collapse}.loan-schedule th,.loan-schedule td{padding:12px 13px;border-bottom:1px solid #e5ebf3;text-align:right;white-space:nowrap}.loan-schedule th{position:sticky;top:0;color:#54647c;background:#f2f6fb;font-size:12px}.loan-schedule th:first-child,.loan-schedule td:first-child{text-align:center}.loan-schedule tbody tr:hover{background:#f7faff}.loan-schedule td{color:#526078;font-size:13px}.loan-schedule td b{color:#112a56}.loan-more-row td{text-align:center!important;color:#2063c8!important;background:#f4f8ff}.loan-schedule button:disabled{opacity:.5;cursor:default}
@media (max-width:900px){.loan-metrics{grid-template-columns:repeat(2,1fr)}.loan-intro em{display:none}}
@media (max-width:640px){.loan-intro{align-items:flex-start;padding:18px}.loan-intro>span{flex-basis:48px;height:48px}.loan-intro p{font-size:13px}.loan-presets{grid-template-columns:repeat(2,1fr)}.loan-mode,.loan-form-grid{grid-template-columns:1fr}.loan-results>header,.loan-schedule>header,.loan-chart-card>header{align-items:flex-start;flex-direction:column}.loan-results>header>div,.loan-schedule>header>div{width:100%}.loan-results header button,.loan-schedule header button{flex:1;justify-content:center}.loan-metrics{grid-template-columns:1fr 1fr}.loan-metrics article{min-height:112px;padding:14px}.loan-metrics b{font-size:19px}.loan-extra-result{align-items:flex-start}.loan-chart-card,.loan-schedule{padding:14px}.loan-chart-card>header>div{display:none}}
@media (max-width:420px){.loan-metrics{grid-template-columns:1fr}.loan-term-input{grid-template-columns:1fr 88px}}
@media print{body[data-tool="loan-calculator"] #sharedHeader,body[data-tool="loan-calculator"] #sharedFooter,body[data-tool="loan-calculator"] .breadcrumb,body[data-tool="loan-calculator"] .tool-page-hero,body[data-tool="loan-calculator"] .tool-sidebar,body[data-tool="loan-calculator"] .workspace-heading,body[data-tool="loan-calculator"] .loan-intro,body[data-tool="loan-calculator"] .loan-presets,body[data-tool="loan-calculator"] .loan-mode,body[data-tool="loan-calculator"] .loan-form-grid,body[data-tool="loan-calculator"] .loan-rate-note,body[data-tool="loan-calculator"] .loan-calculate,body[data-tool="loan-calculator"] .privacy-microcopy,body[data-tool="loan-calculator"] .related-section,body[data-tool="loan-calculator"] .seo-guide,body[data-tool="loan-calculator"] button{display:none!important}body[data-tool="loan-calculator"] .tool-layout{display:block}body[data-tool="loan-calculator"] .tool-workspace-card{border:0;box-shadow:none;padding:0}body[data-tool="loan-calculator"] .loan-results{display:grid!important}.loan-chart-card,.loan-schedule,.loan-metrics article{break-inside:avoid;box-shadow:none}.loan-table-wrap{overflow:visible}.loan-schedule table{min-width:0}.loan-schedule th,.loan-schedule td{padding:6px;font-size:9px}}

@media (max-width: 840px) {
  .tool-page-hero { min-height: auto; padding: 32px; grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .tool-page-hero::before { width: 430px; height: 430px; right: 50%; top: -245px; transform: translateX(50%); }
  .tool-page-art { width: min(350px, 72vw); order: -1; }
  .tool-category-chip { margin-inline: auto; }
  .tool-page-copy > p { margin-inline: auto; }
  .tool-page-trust { justify-content: center; }
  .tool-workspace-card { padding: 26px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-hero, .editorial-story, .policy-layout { grid-template-columns: 1fr; }
  .editorial-hero { min-height: auto; padding-block: 48px; }
  .editorial-hero-mark { min-height: 260px; }
  .editorial-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-heading { position: static; }
  .tool-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .inner-hero { padding-block: 38px 24px; text-align: left; }
  .inner-hero h1 { margin-inline: 0; }
  .inner-hero > p:not(.section-kicker) { margin-inline: 0; }
  .catalog-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .catalog-filter { flex: 0 0 auto; }
  .tool-directory-heading, .catalog-card-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .catalog-card-heading .catalog-summary { text-align:left; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-page-hero { min-height: auto; padding: 28px 22px; grid-template-columns: 1fr; text-align: center; }
  .tool-page-hero::before { width: 280px; height: 280px; right: 50%; top: auto; bottom: -145px; transform: translateX(50%); }
  .tool-category-chip { margin-inline: auto; }
  .tool-page-copy > p { font-size: .92rem; }
  .tool-page-trust { justify-content: center; }
  .tool-page-art { width: min(330px, 100%); height: auto; order: -1; }
  .tool-workspace-card { padding: 22px 16px; }
  .workspace-heading { gap: 12px; }
  .control-grid { grid-template-columns: 1fr; }
  .tool-sidebar { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .seo-guide-grid { grid-template-columns: 1fr; }
  .result-metrics { grid-template-columns: 1fr; }
  .result-metrics.metrics-four { grid-template-columns: repeat(2, 1fr); }
  .result-metrics.metrics-six { grid-template-columns: repeat(2, 1fr); }
  .result-metrics.metrics-eight { grid-template-columns: repeat(2, 1fr); }
  .experience-heading { grid-template-columns: 42px minmax(0,1fr); }
  .experience-heading > span { width:42px; height:42px; }
  .experience-heading em { width:fit-content; grid-column:2; }
  .word-insight-panel { grid-template-columns:1fr; }
  .qr-extra-fields { grid-template-columns:1fr; }
  .premium-inline-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-success-row { grid-template-columns: 42px 1fr; }
  .result-success-row .tool-secondary { grid-column: 1 / -1; }
  .document-actions { grid-template-columns: 1fr; }
  .processing-panel, .download-panel, .processing-error { min-height: 520px; padding: 24px 16px; }
  .processing-ring { width: 168px; }
  .processing-ring-core strong { font-size: 2.25rem; }
  .processing-ring-core::after { left: 28px; }
  .processing-promo { grid-template-columns: 1fr; text-align: center; }
  .processing-promo-mark, .processing-promo a { margin-inline: auto; }
  .processing-promo-mark { grid-row: auto; }
  .download-actions { grid-template-columns: 1fr; }
  .editorial-hero, .editorial-story, .policy-layout { grid-template-columns: 1fr; }
  .editorial-hero-mark { min-height: 250px; }
  .editorial-values { grid-template-columns: 1fr; }
  .editorial-cta { align-items: flex-start; flex-direction: column; }
  .policy-heading { position: static; }
  :is(body[data-tool="receipt"], body[data-tool="quotation"]) .tool-sidebar { grid-template-columns: 1fr; }
  .receipt-editor { padding: 17px; }
  .receipt-theme-picker label { padding-inline: 7px; }
  .receipt-line { grid-template-columns: minmax(0,1fr) 70px 105px 34px; }
  .receipt-preview-panel { padding: 10px; }
}

@media (max-width: 480px) {
  .breadcrumb { padding-top: 16px; font-size: .74rem; }
  .catalog-search { min-height: 56px; padding-left: 14px; }
  .tool-directory { grid-template-columns:1fr; gap:11px; }
  .tool-directory-total { align-self:flex-start; }
  .tool-page-hero { padding: 24px 18px; border-radius: 24px; }
  .tool-page-copy h1 { font-size: clamp(2.1rem, 12vw, 3rem); }
  .tool-page-trust span { min-height: 38px; }
  .workspace-heading { align-items: flex-start; }
  .tool-workspace-card { padding: 20px 14px; border-radius: 20px; }
  .drop-zone { min-height: 180px; padding: 22px 14px; }
  .option-row { display: grid; grid-template-columns: 1fr; }
  .check-option { min-height: 46px; }
  .tool-primary, .tool-secondary { width: 100%; min-height: 50px; }
  .document-preview dl { grid-template-columns: 1fr; gap: 3px; }
  .document-preview dd { margin-bottom: 10px; }
  .password-output { align-items: stretch; flex-direction: column; }
  .password-output .tool-secondary { width: 100%; }
  .related-section { padding: 20px 14px; }
  .related-grid { grid-template-columns: 1fr; }
  .seo-guide { padding: 22px 16px; }
  .seo-benefits, .seo-steps { padding: 18px 15px; }
  .receipt-theme-picker { grid-template-columns: 1fr; }
  .receipt-theme-picker label { min-height: 44px; }
  .receipt-line { grid-template-columns: 1fr 1fr 36px; }
  .receipt-line-detail { grid-column: 1 / -1; }
  .receipt-remove-line { grid-column: 3; }
  .receipt-add-line { width: 100%; margin-left: 36px; justify-content: center; }
  .receipt-document-actions { grid-template-columns: 1fr; }
  .age-insights { grid-template-columns: 1fr; }
  .tool-experience-panel { padding:16px 13px; }
  .preset-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preset-row button { padding-inline:8px; }
  .premium-inline-actions { grid-template-columns:1fr; }
  .premium-age-insights { grid-template-columns:1fr; }
  .password-batch > div { grid-template-columns:1fr; }
  .password-batch .tool-secondary { width:100%; justify-content:center; }
  .code-download-grid { grid-template-columns:1fr; }
  .premium-code-preview { padding:9px; }
  .premium-code-preview .code-preview { min-height:280px; padding:12px; }
}

@media (max-width: 390px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid .tool-card { display: grid; grid-template-columns: 112px 1fr; }
}

/* Shared randomized ads sourced from the homepage advertiser set */
.shared-ad-placement { margin-block: 22px 34px; }
.shared-random-ad {
  --ad-bg: linear-gradient(135deg,#102653,#081a3b);
  --ad-text: #fff;
  --ad-muted: rgba(255,255,255,.76);
  --ad-accent: #c8ff18;
  --ad-action-text: #102000;
  --ad-media: rgba(255,255,255,.08);
  min-width: 0;
  min-height: 166px;
  padding: 14px;
  border: 1px solid color-mix(in srgb,var(--ad-accent) 34%,transparent);
  border-radius: 25px;
  display: grid;
  grid-template-columns: minmax(230px,340px) minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ad-text);
  background: var(--ad-bg);
  box-shadow: 0 18px 40px rgba(13,31,68,.16);
  transition: transform .24s ease, box-shadow .24s ease;
}
.shared-random-ad::before { content: ""; width: 320px; height: 320px; position: absolute; right: -170px; bottom: -235px; z-index: -1; border: 32px solid color-mix(in srgb,var(--ad-accent) 13%,transparent); border-radius: 50%; }
.shared-random-ad:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(13,31,68,.22); }
.shared-random-ad:focus-visible { outline: 4px solid color-mix(in srgb,var(--ad-accent) 65%,white); outline-offset: 4px; }
.shared-ad-media { width: 100%; height: 136px; border: 1px solid color-mix(in srgb,var(--ad-accent) 30%,transparent); border-radius: 18px; display: block; position: relative; overflow: hidden; background: var(--ad-media); box-shadow: inset 0 1px rgba(255,255,255,.13); }
.shared-ad-media > img { width: 100%; height: 100%; display: block; object-position: center; animation: shared-ad-image 8s ease-in-out infinite alternate; }
.shared-ad-media--cover > img { object-fit: cover; }
.shared-ad-media--contain > img { padding: 7px; object-fit: contain; }
.shared-ad-scan { width: 120%; height: 2px; position: absolute; left: -10%; top: 9%; z-index: 2; opacity: .64; background: linear-gradient(90deg,transparent,var(--ad-accent),transparent); box-shadow: 0 0 12px var(--ad-accent); animation: shared-ad-scan 4.8s ease-in-out infinite; }
.shared-ad-spark { position: absolute; right: 11px; top: 8px; z-index: 3; color: var(--ad-accent); font-size: 1.15rem; font-style: normal; animation: shared-ad-spark 2.4s ease-in-out infinite; }
.shared-ad-content { min-width: 0; display: grid; justify-items: start; align-content: center; }
.shared-ad-kicker { min-height: 23px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ad-accent); background: color-mix(in srgb,var(--ad-accent) 12%,transparent); font-size: .58rem; font-weight: 900; letter-spacing: .045em; }
.shared-ad-kicker > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ad-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--ad-accent) 15%,transparent); animation: shared-ad-dot 1.9s ease-out infinite; }
.shared-ad-brand { min-height: 32px; margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.shared-ad-logo { width: 30px; height: 30px; padding: 3px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,.9); }
.shared-ad-brand b { font-family: "Chakra Petch","Anuphan",sans-serif; font-size: .87rem; letter-spacing: -.02em; }
.shared-ad-content > strong { margin-top: 4px; font-family: "Chakra Petch","Anuphan",sans-serif; font-size: clamp(1.2rem,2vw,1.55rem); line-height: 1.15; letter-spacing: -.025em; }
.shared-ad-content > small { margin-top: 6px; color: var(--ad-muted); font-size: .67rem; font-weight: 650; line-height: 1.45; }
.shared-ad-cta { min-width: 132px; min-height: 46px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; z-index: 3; color: var(--ad-action-text); background: var(--ad-accent); box-shadow: 0 10px 22px color-mix(in srgb,var(--ad-accent) 18%,transparent); font-size: .72rem; font-weight: 900; white-space: nowrap; }
.shared-ad-cta svg { width: 15px; }
.shared-ad-disclosure { position: absolute; right: 11px; top: 8px; z-index: 5; padding: 2px 7px; border: 1px solid currentColor; border-radius: 999px; opacity: .5; font-size: .52rem; font-weight: 700; }

.shared-ad-nganrat { --ad-bg: radial-gradient(circle at 72% 0,rgba(40,126,255,.34),transparent 22rem),linear-gradient(130deg,#142c58,#071c42); --ad-accent:#ffc449; --ad-media:rgba(69,151,255,.12); }
.shared-ad-directsend { --ad-bg:radial-gradient(circle at 78% 0,rgba(54,207,255,.25),transparent 22rem),linear-gradient(130deg,#071a46,#0b2a66 62%,#0a4776); --ad-accent:#c8ff18; --ad-media:rgba(54,207,255,.11); }
.shared-ad-krobapps { --ad-bg: radial-gradient(circle at 75% 0,rgba(133,68,255,.32),transparent 20rem),linear-gradient(130deg,#082455,#101239); --ad-accent:#c8ff18; --ad-media:rgba(34,103,255,.16); }
.shared-ad-ruenpayakorn { --ad-bg: radial-gradient(circle at 75% 0,rgba(179,125,35,.18),transparent 20rem),linear-gradient(130deg,#0a251b,#061912); --ad-accent:#e5bd68; --ad-action-text:#251805; --ad-media:rgba(229,189,104,.08); }
.shared-ad-ea2you { --ad-bg:radial-gradient(circle at 82% 0,rgba(75,170,255,.25),transparent 22rem),linear-gradient(130deg,#fff,#f1f9ff 70%,#e2f1ff); --ad-text:#0b2a57; --ad-muted:#58708e; --ad-accent:#0964e8; --ad-action-text:#fff; --ad-media:linear-gradient(145deg,#f8fcff,#e8f5ff); }
.shared-ad-ea2you::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(rgba(50,119,192,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(50,119,192,.2) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,#000,transparent 78%); pointer-events:none; }
.shared-ad-ea2you .shared-ad-media > img { animation-duration:10s; }
.shared-ad-roomlino { --ad-bg:radial-gradient(circle at 78% 0,rgba(220,177,78,.2),transparent 22rem),linear-gradient(130deg,#fffdf5,#edf6e9); --ad-text:#075034; --ad-muted:#537160; --ad-accent:#0b8052; --ad-action-text:#fff; --ad-media:#eef6e9; }
.shared-ad-roomlino .shared-ad-brand b { display: none; }
.shared-ad-roomlino .shared-ad-logo { width: 148px; padding: 0; background: transparent; }
.shared-ad-roomlino .shared-ad-disclosure { color: #075034; }

.shared-random-ad--compact { min-height: 310px; padding: 12px; grid-template-columns: 1fr; grid-template-rows: 112px auto 42px; align-items: stretch; gap: 11px; border-radius: 20px; }
.shared-random-ad--compact::before { right: -205px; bottom: -235px; }
.shared-random-ad--compact .shared-ad-media { height: 112px; }
.shared-random-ad--compact .shared-ad-content { align-content: start; }
.shared-random-ad--compact .shared-ad-kicker { min-height: 21px; font-size: .53rem; }
.shared-random-ad--compact .shared-ad-brand { min-height: 28px; margin-top: 4px; }
.shared-random-ad--compact .shared-ad-logo { width: 27px; height: 27px; }
.shared-random-ad--compact.shared-ad-roomlino .shared-ad-logo { width: 130px; }
.shared-random-ad--compact .shared-ad-content > strong { margin-top: 4px; font-size: 1.08rem; line-height: 1.16; }
.shared-random-ad--compact .shared-ad-content > small { margin-top: 5px; font-size: .61rem; }
.shared-random-ad--compact .shared-ad-cta { width: 100%; min-width: 0; min-height: 42px; }
.shared-random-ad--compact .shared-ad-disclosure { top: 7px; right: 8px; }

@keyframes shared-ad-image { from { transform: scale(1.02) translateX(-2px); } to { transform: scale(1.07) translateX(4px); } }
@keyframes shared-ad-scan { 0%,10% { top: 5%; opacity: 0; } 24%,78% { opacity: .65; } 92%,100% { top: 94%; opacity: 0; } }
@keyframes shared-ad-spark { 0%,100% { transform: scale(.8) rotate(0); opacity: .45; } 50% { transform: scale(1.15) rotate(12deg); opacity: 1; } }
@keyframes shared-ad-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--ad-accent) 45%,transparent); } 80%,100% { box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 980px) {
  .shared-random-ad--strip { grid-template-columns: minmax(210px,290px) minmax(0,1fr) auto; gap: 15px; }
  .shared-random-ad--strip .shared-ad-cta { min-width: 108px; padding-inline: 12px; }
}

@media (max-width: 760px) {
  .shared-ad-placement { margin-block: 16px 26px; }
  .shared-random-ad--strip, .shared-random-ad--compact { min-height: 192px; padding: 11px; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: auto 42px; align-items: center; gap: 10px 12px; border-radius: 20px; }
  .shared-random-ad--strip .shared-ad-media, .shared-random-ad--compact .shared-ad-media { height: 132px; }
  .shared-random-ad--strip .shared-ad-content, .shared-random-ad--compact .shared-ad-content { align-content: center; }
  .shared-random-ad--strip .shared-ad-content > strong, .shared-random-ad--compact .shared-ad-content > strong { font-size: clamp(1rem,4.8vw,1.28rem); }
  .shared-random-ad--strip .shared-ad-content > small, .shared-random-ad--compact .shared-ad-content > small { font-size: .6rem; }
  .shared-random-ad--strip .shared-ad-cta, .shared-random-ad--compact .shared-ad-cta { width: 100%; min-height: 42px; grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .shared-random-ad--strip, .shared-random-ad--compact { grid-template-columns: 98px minmax(0,1fr); }
  .shared-random-ad--strip .shared-ad-media, .shared-random-ad--compact .shared-ad-media { height: 122px; }
  .shared-ad-brand { gap: 5px; }
  .shared-ad-brand b { font-size: .72rem; }
  .shared-ad-roomlino .shared-ad-logo { width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .shared-random-ad, .shared-ad-media > img, .shared-ad-scan, .shared-ad-spark, .shared-ad-kicker > i { animation: none !important; transition: none !important; }
}

/* Premium scientific calculator */
body[data-tool="calculator"] .tool-workspace-card { padding: clamp(16px, 2.5vw, 30px); background: radial-gradient(circle at 7% 0,color-mix(in srgb,#1456ff 8%,transparent),transparent 25rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#1456ff 2.5%,var(--surface))); }
.calculator-studio { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:stretch; }
.calculator-machine { min-width:0; padding:18px; border:1px solid rgba(110,207,255,.28); border-radius:26px; position:relative; overflow:hidden; color:#f8fbff; background:radial-gradient(circle at 75% -10%,rgba(34,144,255,.42),transparent 19rem),linear-gradient(145deg,#071a49,#071230 62%,#0a1738); box-shadow:0 24px 50px rgba(6,23,65,.23),inset 0 1px rgba(255,255,255,.12); }
.calculator-machine::before { content:""; width:260px; height:260px; position:absolute; right:-170px; bottom:-190px; border:30px solid rgba(200,255,24,.08); border-radius:50%; pointer-events:none; }
.calculator-toolbar { margin-bottom:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.calculator-toolbar > span { display:inline-flex; align-items:center; gap:7px; color:#bcd9ff; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.68rem; font-weight:800; letter-spacing:.09em; }
.calculator-toolbar > span i { width:7px; height:7px; border-radius:50%; background:#c8ff18; box-shadow:0 0 12px #c8ff18; }
.calculator-angle { padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:999px; display:flex; background:rgba(255,255,255,.06); }
.calculator-angle button { min-width:47px; min-height:28px; padding:0 9px; border:0; border-radius:999px; color:#9eb6db; background:transparent; font-size:.58rem; font-weight:900; cursor:pointer; }
.calculator-angle button.active { color:#0b1734; background:#c8ff18; box-shadow:0 6px 15px rgba(200,255,24,.2); }
.calculator-display { min-height:128px; padding:16px 18px; border:1px solid rgba(106,211,255,.22); border-radius:20px; display:grid; align-content:center; justify-items:end; position:relative; z-index:1; overflow:hidden; background:linear-gradient(145deg,rgba(3,13,37,.86),rgba(8,44,91,.7)); box-shadow:inset 0 8px 20px rgba(1,8,28,.28),0 1px rgba(255,255,255,.08); }
.calculator-display::after { content:""; width:140%; height:1px; position:absolute; left:-20%; top:18%; opacity:.35; background:linear-gradient(90deg,transparent,#53ddff,transparent); animation:calculator-scan 5s ease-in-out infinite; }
.calculator-display small { justify-self:start; color:#7197c9; font-size:.58rem; font-weight:850; letter-spacing:.07em; }
.calculator-display small.active { color:#c8ff18; }
.calculator-copy-result { width:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.12); border-radius:9px; display:grid; place-items:center; position:absolute; right:11px; top:9px; z-index:2; color:#8fb4df; background:rgba(255,255,255,.06); font-size:.65rem; font-weight:900; cursor:pointer; }
.calculator-copy-result:hover { color:#fff; border-color:rgba(87,211,255,.55); }
.calculator-copy-result svg { width:13px; }
#calculatorExpression { width:100%; min-height:25px; overflow:hidden; color:#8fb4df; font-family:"Chakra Petch",monospace; font-size:clamp(.78rem,2vw,1rem); text-align:right; text-overflow:ellipsis; white-space:nowrap; }
#calculatorResult { max-width:100%; overflow:hidden; color:#fff; font-family:"Chakra Petch",monospace; font-size:clamp(2rem,5vw,3.15rem); font-weight:700; line-height:1.15; text-align:right; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 0 22px rgba(66,205,255,.24); }
#calculatorResult.is-error { color:#ff8794; font-family:"Anuphan",sans-serif; font-size:clamp(.82rem,2vw,1.05rem); white-space:normal; }
.calculator-memory,.calculator-scientific,.calculator-keypad { position:relative; z-index:1; display:grid; gap:7px; }
.calculator-memory { margin-top:10px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.calculator-memory button,.calculator-scientific button { min-width:0; min-height:34px; padding:0 5px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#aecdff; background:rgba(255,255,255,.055); font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.64rem; font-weight:750; cursor:pointer; transition:transform .14s ease,border-color .14s ease,background .14s ease; }
.calculator-memory button:hover,.calculator-scientific button:hover { border-color:rgba(87,211,255,.55); color:#fff; background:rgba(62,155,255,.16); transform:translateY(-1px); }
.calculator-scientific { margin-top:7px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.calculator-keypad { margin-top:10px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.calc-key { min-width:0; min-height:54px; padding:0 7px; border:1px solid rgba(255,255,255,.12); border-radius:15px; color:#0c214d; background:linear-gradient(155deg,#fff,#dce8fb); box-shadow:0 5px 0 rgba(1,8,28,.3),inset 0 1px #fff; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .1s ease,box-shadow .1s ease,filter .15s ease; }
.calc-key:hover { filter:brightness(1.07); transform:translateY(-1px); }
.calc-key:active { transform:translateY(4px); box-shadow:0 1px 0 rgba(1,8,28,.3); }
.calc-key svg { width:18px; }
.calc-key-soft { color:#bee3ff; background:linear-gradient(155deg,#1b3f76,#112955); }
.calc-key-operator { color:#071b42; background:linear-gradient(155deg,#54d9ff,#179af1); }
.calc-key-equals { grid-column:span 2; display:flex; align-items:center; justify-content:center; gap:7px; color:#102000; background:linear-gradient(155deg,#e4ff78,#b9f900); box-shadow:0 5px 0 #628700,0 0 26px rgba(200,255,24,.12); }
.calc-key-zero { grid-column:span 2; }
.calculator-shortcuts { margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:7px; color:#7595c0; font-size:.58rem; font-weight:700; text-align:center; }
.calculator-shortcuts svg { width:14px; }
.calculator-history-panel { min-width:0; padding:15px; border:1px solid var(--line); border-radius:22px; background:color-mix(in srgb,#1456ff 3%,var(--surface)); }
.calculator-history-panel header { padding-bottom:12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.calculator-history-panel header span small,.calculator-history-panel header span h3 { display:block; }
.calculator-history-panel header small { color:var(--muted); font-size:.55rem; }
.calculator-history-panel header h3 { margin:3px 0 0; display:flex; align-items:center; gap:5px; font-size:.76rem; }
.calculator-history-panel header h3 svg { width:14px; color:var(--blue); }
.calculator-history-panel header button { padding:3px 0; border:0; color:#e35262; background:transparent; font-size:.55rem; font-weight:800; cursor:pointer; }
.calculator-history-list { max-height:555px; padding-top:9px; display:grid; align-content:start; gap:7px; overflow:auto; scrollbar-width:thin; }
.calculator-history-list > p { margin:30px 0; color:var(--muted); font-size:.68rem; text-align:center; }
.calculator-history-list button { width:100%; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:12px; display:grid; justify-items:end; gap:3px; color:var(--ink); background:var(--surface); cursor:pointer; transition:.15s ease; }
.calculator-history-list button:hover { border-color:var(--blue); transform:translateX(-2px); }
.calculator-history-list button span { width:100%; overflow:hidden; color:var(--muted); font-size:.58rem; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.calculator-history-list button b { font-family:"Chakra Petch",monospace; font-size:.76rem; }
@keyframes calculator-scan { 0%,12% { top:12%; opacity:0; } 30%,75% { opacity:.38; } 90%,100% { top:88%; opacity:0; } }
@media (max-width:880px) { .calculator-studio { grid-template-columns:1fr; } .calculator-history-list { max-height:230px; } }
@media (max-width:520px) { .calculator-machine { padding:12px; border-radius:21px; } .calculator-display { min-height:112px; padding:13px; } .calculator-memory,.calculator-scientific,.calculator-keypad { gap:5px; } .calculator-memory button,.calculator-scientific button { min-height:36px; font-size:.57rem; } .calc-key { min-height:50px; border-radius:12px; font-size:.9rem; } .calculator-history-panel { padding:12px; } }
@media (prefers-reduced-motion:reduce) { .calculator-display::after { animation:none; } .calculator-memory button,.calculator-scientific button,.calc-key,.calculator-history-list button { transition:none; } }

/* Local background-removal studio */
body[data-tool="remove-background"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 92% 0,color-mix(in srgb,#ff5f76 7%,transparent),transparent 22rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#7436d8 2.5%,var(--surface))); }
.remove-bg-studio { display:grid; gap:16px; }
.remove-bg-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#7436d8 17%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#7436d8 7%,var(--surface)),color-mix(in srgb,#ff5f76 4%,var(--surface))); }
.remove-bg-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#7436d8,#ff5f76); box-shadow:0 9px 22px rgba(116,54,216,.2); }
.remove-bg-intro > span svg { width:21px; }
.remove-bg-intro h3 { margin:0; font-size:.92rem; }
.remove-bg-intro p { margin:3px 0 0; color:var(--muted); font-size:.67rem; line-height:1.5; }
.remove-bg-intro em { padding:6px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:#246e54; background:color-mix(in srgb,#42d5b1 12%,var(--surface)); font-size:.55rem; font-style:normal; font-weight:900; }
.remove-bg-intro em svg { width:13px; }
.remove-bg-drop { min-height:176px; transition:min-height .2s ease,padding .2s ease,border-color .2s ease; }
.remove-bg-drop.has-image { min-height:82px; padding:12px; }
.remove-bg-drop.has-image .drop-zone-icon { width:36px; height:36px; border-radius:11px; }
.remove-bg-drop.has-image > span { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:2px 10px; text-align:left; }
.remove-bg-drop.has-image > span .drop-zone-icon { grid-row:1 / 3; }
.remove-bg-editor { display:grid; gap:14px; }
.remove-bg-editor[hidden] { display:none; }
.remove-bg-controlbar { padding:14px; border:1px solid var(--line); border-radius:17px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; background:var(--paper); }
.remove-bg-controlbar .field { font-size:.67rem; }
.remove-bg-controlbar .field b { color:#7436d8; }
.remove-bg-canvases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.remove-bg-canvases > section { min-width:0; padding:9px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 18px rgba(13,31,68,.05); }
.remove-bg-canvases header { min-height:43px; padding:2px 4px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.remove-bg-canvases header span small,.remove-bg-canvases header span b { display:block; }
.remove-bg-canvases header small { color:var(--muted); font-size:.55rem; }
.remove-bg-canvases header b { margin-top:2px; font-size:.67rem; }
#removeBgPickedColor { width:26px; height:26px; border:3px solid var(--surface); border-radius:50%; background:linear-gradient(135deg,#fff,#d9dce5); box-shadow:0 0 0 1px var(--line),0 4px 10px rgba(13,31,68,.12); }
#removeBgStatus[data-tone="working"] { color:#a26500; }
#removeBgStatus[data-tone="success"] { color:#158261; }
#removeBgStatus[data-tone="error"] { color:#d44354; }
.remove-bg-canvas-wrap { min-height:290px; border:1px solid var(--line); border-radius:14px; display:grid; place-items:center; position:relative; overflow:hidden; background:#f5f7fb; touch-action:none; }
.remove-bg-canvas-wrap.checker { background-color:#fff; background-image:linear-gradient(45deg,#dfe3ec 25%,transparent 25%),linear-gradient(-45deg,#dfe3ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe3ec 75%),linear-gradient(-45deg,transparent 75%,#dfe3ec 75%); background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.remove-bg-canvas-wrap canvas { max-width:100%; max-height:460px; display:block; object-fit:contain; }
.remove-bg-canvas-wrap.original canvas { cursor:crosshair; }
.remove-bg-canvas-wrap.result canvas { cursor:none; }
#removeBgSampleMarker { width:22px; height:22px; border:2px solid #fff; border-radius:50%; position:absolute; z-index:2; transform:translate(-50%,-50%); background:transparent; box-shadow:0 0 0 2px #ff4f68,0 4px 12px rgba(13,31,68,.3); pointer-events:none; }
.remove-bg-brush-cursor { border:1px solid #fff; border-radius:50%; position:absolute; z-index:3; transform:translate(-50%,-50%); background:rgba(20,86,255,.12); box-shadow:0 0 0 1px #1456ff; pointer-events:none; }
.remove-bg-preview-colors { display:flex; gap:5px; }
.remove-bg-preview-colors button { width:24px; height:24px; padding:0; border:2px solid var(--surface); border-radius:8px; box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.remove-bg-preview-colors button.active { box-shadow:0 0 0 2px #1456ff; }
.remove-bg-preview-colors .checker { background-color:#fff; background-image:linear-gradient(45deg,#ccd1dc 25%,transparent 25%),linear-gradient(-45deg,#ccd1dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccd1dc 75%),linear-gradient(-45deg,transparent 75%,#ccd1dc 75%); background-position:0 0,0 5px,5px -5px,-5px 0; background-size:10px 10px; }
.remove-bg-preview-colors .white { background:#fff; }
.remove-bg-preview-colors .dark { background:#15213c; }
.remove-bg-actions { padding:12px; border:1px solid var(--line); border-radius:17px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:var(--paper); }
.remove-bg-actions .tool-primary,.remove-bg-actions .tool-secondary { min-height:42px; width:auto; padding-inline:12px; font-size:.66rem; }
.remove-bg-actions .tool-secondary.active { border-color:#7436d8; color:#fff; background:linear-gradient(145deg,#7436d8,#4d6cf4); }
.remove-bg-actions svg { width:15px; }
.remove-bg-divider { width:1px; height:30px; background:var(--line); }
.remove-bg-brush-size { min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; gap:7px; color:var(--muted); background:var(--surface); font-size:.6rem; font-weight:750; }
.remove-bg-brush-size input { width:82px; }
.remove-bg-brush-size b { min-width:20px; color:var(--ink); text-align:right; }
.remove-bg-export { padding:14px 15px; border:1px solid color-mix(in srgb,#42d5b1 32%,var(--line)); border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:linear-gradient(135deg,color-mix(in srgb,#42d5b1 8%,var(--surface)),var(--surface)); }
.remove-bg-export[hidden] { display:none; }
.remove-bg-export > span { min-width:0; display:flex; align-items:center; gap:10px; }
.remove-bg-export > span > svg { width:30px; color:#1ab287; }
.remove-bg-export > span span { min-width:0; }
.remove-bg-export b,.remove-bg-export small { display:block; }
.remove-bg-export b { font-size:.8rem; }
.remove-bg-export small { margin-top:3px; color:var(--muted); font-size:.6rem; line-height:1.4; }
.remove-bg-export .tool-primary { width:auto; min-width:160px; flex:0 0 auto; }
@media (max-width:900px) { .remove-bg-controlbar { grid-template-columns:1fr; } .remove-bg-canvases { grid-template-columns:1fr; } .remove-bg-canvas-wrap { min-height:250px; } }
@media (max-width:560px) { .remove-bg-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .remove-bg-intro > span { width:40px; height:40px; } .remove-bg-intro em { width:fit-content; grid-column:2; } .remove-bg-canvases > section { padding:7px; } .remove-bg-canvas-wrap { min-height:220px; } .remove-bg-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .remove-bg-actions .tool-primary,.remove-bg-actions .tool-secondary,.remove-bg-brush-size { width:100%; } .remove-bg-actions .tool-primary { grid-column:1 / -1; } .remove-bg-divider { display:none; } .remove-bg-brush-size { justify-content:center; } .remove-bg-export { align-items:stretch; flex-direction:column; } .remove-bg-export .tool-primary { width:100%; } }

/* PDF to Word conversion studio */
body[data-tool="pdf-word"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 95% 0,color-mix(in srgb,#12aaf6 8%,transparent),transparent 24rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#0758cf 2.5%,var(--surface))); }
.pdf-word-studio { display:grid; gap:15px; }
.pdf-word-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#149cf5 20%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#149cf5 8%,var(--surface)),color-mix(in srgb,#ff6371 3%,var(--surface))); }
.pdf-word-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#0758cf,#17bcf2); box-shadow:0 10px 23px rgba(7,88,207,.2); }
.pdf-word-intro > span svg { width:22px; }
.pdf-word-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.pdf-word-intro p { margin:3px 0 0; color:var(--muted); font-size:.67rem; line-height:1.5; }
.pdf-word-intro em { padding:6px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:#116f56; background:color-mix(in srgb,#42d5b1 12%,var(--surface)); font-size:.55rem; font-style:normal; font-weight:900; }
.pdf-word-intro em svg { width:13px; }
.pdf-word-drop { min-height:176px; }
.pdf-word-drop.has-file { display:none; }
.pdf-word-drop.has-error { border-color:#ff7180; background:color-mix(in srgb,#ff7180 5%,var(--surface)); }
.pdf-word-editor { display:grid; gap:14px; }
.pdf-word-editor[hidden] { display:none; }
.pdf-word-file { padding:12px 14px; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--paper); }
.pdf-word-file > span { min-width:0; display:flex; align-items:center; gap:10px; }
.pdf-word-file > span > svg { width:30px; color:#149cf5; }
.pdf-word-file b,.pdf-word-file small { max-width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-word-file b { font-size:.75rem; }
.pdf-word-file small { margin-top:2px; color:var(--muted); font-size:.58rem; }
.pdf-word-file button { flex:0 0 auto; padding:5px 0; border:0; color:var(--blue); background:transparent; font-size:.62rem; font-weight:850; cursor:pointer; }
.pdf-word-modes { margin:0; padding:0; border:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pdf-word-modes legend { width:100%; margin-bottom:9px; color:var(--ink); font-size:.7rem; font-weight:850; }
.pdf-word-modes label { min-width:0; min-height:118px; padding:14px; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:3px 10px; position:relative; background:var(--surface); cursor:pointer; transition:.18s ease; }
.pdf-word-modes label:has(input:checked) { border-color:#149cf5; background:linear-gradient(145deg,color-mix(in srgb,#149cf5 9%,var(--surface)),var(--surface)); box-shadow:0 9px 24px rgba(20,156,245,.11); }
.pdf-word-modes input { position:absolute; opacity:0; pointer-events:none; }
.pdf-word-modes label > span { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; grid-row:1 / 3; color:#0758cf; background:color-mix(in srgb,#149cf5 12%,var(--surface)); }
.pdf-word-modes label > span svg { width:19px; }
.pdf-word-modes label b { font-size:.74rem; }
.pdf-word-modes label small { grid-column:2 / 4; color:var(--muted); font-size:.58rem; line-height:1.45; }
.pdf-word-modes label em { padding:3px 7px; border-radius:999px; color:#174600; background:#c8ff18; font-size:.48rem; font-style:normal; font-weight:900; }
.pdf-word-settings { padding:14px; border:1px solid var(--line); border-radius:17px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; background:var(--paper); }
.pdf-word-settings .field { font-size:.67rem; }
.pdf-word-settings .field[hidden] { display:none; }
.pdf-word-preview { padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.pdf-word-preview header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pdf-word-preview header small,.pdf-word-preview header b { display:block; }
.pdf-word-preview header small { color:var(--muted); font-size:.55rem; }
.pdf-word-preview header b { margin-top:2px; font-size:.72rem; }
#pdfWordTextSummary { padding:5px 8px; border-radius:999px; color:#116f56; background:color-mix(in srgb,#42d5b1 11%,var(--surface)); font-size:.52rem; font-weight:850; }
#pdfWordTextSummary[data-tone="scan"] { color:#9b5e00; background:color-mix(in srgb,#ffbd42 12%,var(--surface)); }
#pdfWordThumbnails { min-height:130px; padding:10px; border-radius:14px; display:flex; align-items:center; gap:9px; overflow-x:auto; background:linear-gradient(135deg,color-mix(in srgb,#149cf5 4%,var(--paper)),var(--paper)); scrollbar-width:thin; }
#pdfWordThumbnails figure { min-width:88px; margin:0; padding:5px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 5px 13px rgba(13,31,68,.08); }
#pdfWordThumbnails canvas { width:100%; height:100px; display:block; object-fit:contain; background:#fff; }
#pdfWordThumbnails figcaption { padding-top:4px; color:#5d6980; font-size:.5rem; font-weight:750; text-align:center; }
.pdf-word-more { min-width:82px; color:var(--muted); font-size:.6rem; font-weight:750; text-align:center; }
.pdf-word-loading,.pdf-word-password-note { width:100%; margin:0; color:var(--muted); font-size:.68rem; text-align:center; }
.pdf-word-password-note { color:#9b5e00; font-weight:750; }
.pdf-word-password-note small { color:var(--muted); font-weight:500; }
.pdf-word-run { min-height:54px; box-shadow:0 13px 28px rgba(7,88,207,.2); }
.pdf-word-progress { padding:14px; border:1px solid var(--line); border-radius:16px; display:grid; gap:9px; background:var(--paper); }
.pdf-word-progress[hidden] { display:none; }
.pdf-word-progress > div { height:8px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,#149cf5 10%,var(--surface)); }
.pdf-word-progress > div i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#0758cf,#16c1ef,#c8ff18); box-shadow:0 0 15px rgba(22,193,239,.38); transition:width .2s ease; }
.pdf-word-progress > span { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pdf-word-progress b { font-size:.67rem; }
.pdf-word-progress small { color:var(--muted); font-size:.57rem; }
.pdf-word-progress.is-error { border-color:#ff7a87; background:color-mix(in srgb,#ff7a87 5%,var(--surface)); }
.pdf-word-progress.is-error > div i { background:#ff5d70; }
.pdf-word-result { padding:14px 15px; border:1px solid color-mix(in srgb,#42d5b1 32%,var(--line)); border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:linear-gradient(135deg,color-mix(in srgb,#42d5b1 8%,var(--surface)),var(--surface)); }
.pdf-word-result[hidden] { display:none; }
.pdf-word-result > span { min-width:0; display:flex; align-items:center; gap:10px; }
.pdf-word-result > span > svg { width:31px; color:#1ab287; }
.pdf-word-result b,.pdf-word-result small { display:block; }
.pdf-word-result b { font-size:.8rem; }
.pdf-word-result small { margin-top:3px; color:var(--muted); font-size:.59rem; line-height:1.4; }
.pdf-word-result .tool-primary { width:auto; min-width:174px; flex:0 0 auto; }
@media (max-width:680px) { .pdf-word-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .pdf-word-intro > span { width:40px; height:40px; } .pdf-word-intro em { width:fit-content; grid-column:2; } .pdf-word-modes { grid-template-columns:1fr; } .pdf-word-settings { grid-template-columns:1fr; } .pdf-word-preview header { align-items:flex-start; flex-direction:column; } .pdf-word-result { align-items:stretch; flex-direction:column; } .pdf-word-result .tool-primary { width:100%; } }
@media (prefers-reduced-motion:reduce) { .pdf-word-modes label,.pdf-word-progress > div i { transition:none; } }

/* Universal unit converter */
body[data-tool="unit-converter"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 93% 0,color-mix(in srgb,#6f43e7 9%,transparent),transparent 23rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#6f43e7 2.5%,var(--surface))); }
.unit-studio { display:grid; gap:14px; }
.unit-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#6f43e7 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#6f43e7 8%,var(--surface)),color-mix(in srgb,#20bde9 4%,var(--surface))); }
.unit-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#6f43e7,#176fd9); box-shadow:0 10px 23px rgba(74,46,179,.22); }
.unit-intro > span svg { width:22px; }
.unit-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.unit-intro p { margin:3px 0 0; color:var(--muted); font-size:.67rem; line-height:1.5; }
.unit-intro em { padding:6px 9px; border-radius:999px; color:#37236f; background:#e9dcff; font-size:.53rem; font-style:normal; font-weight:900; letter-spacing:.04em; }
.unit-categories { padding:5px 2px 7px; display:flex; gap:7px; overflow-x:auto; scrollbar-width:thin; }
.unit-categories button { min-width:82px; min-height:64px; padding:8px 9px; border:1px solid var(--line); border-radius:15px; display:grid; place-items:center; gap:4px; color:var(--muted); background:var(--surface); font-size:.58rem; font-weight:800; cursor:pointer; transition:.16s ease; }
.unit-categories button svg { width:19px; }
.unit-categories button:hover { border-color:#6f43e7; color:#6f43e7; transform:translateY(-1px); }
.unit-categories button.active { border-color:#6f43e7; color:#fff; background:linear-gradient(145deg,#6f43e7,#2859d5); box-shadow:0 9px 21px rgba(74,46,179,.18); }
.unit-converter-panel { min-height:230px; padding:16px; border:1px solid rgba(91,185,255,.22); border-radius:25px; display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); align-items:center; gap:12px; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 75% 0,rgba(76,116,255,.36),transparent 20rem),linear-gradient(140deg,#0a173d,#161145 65%,#17133e); box-shadow:0 18px 38px rgba(16,20,66,.17),inset 0 1px rgba(255,255,255,.09); }
.unit-converter-panel::after { content:""; width:250px; height:250px; position:absolute; right:-170px; bottom:-190px; border:25px solid rgba(232,196,93,.08); border-radius:50%; pointer-events:none; }
.unit-side { min-width:0; min-height:172px; padding:17px; border:1px solid rgba(255,255,255,.11); border-radius:19px; display:grid; align-content:center; gap:15px; position:relative; z-index:1; background:rgba(255,255,255,.055); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.unit-side header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.unit-side header small { color:#9fb3da; font-size:.59rem; font-weight:800; }
#unitFromBadge { padding:4px 7px; border-radius:8px; color:#251a05; background:#e6bd5d; font-family:"Chakra Petch",sans-serif; font-size:.58rem; font-weight:900; }
.unit-side label { display:grid; grid-template-columns:minmax(0,1fr) 125px; gap:8px; }
.unit-side input,.unit-side select { min-width:0; min-height:52px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:13px; outline:0; color:#fff; background:rgba(2,10,33,.4); font:inherit; }
.unit-side input { font-family:"Chakra Petch",monospace; font-size:clamp(1.15rem,3vw,1.7rem); font-weight:750; }
.unit-side select { color:#c8d5ee; font-size:.64rem; font-weight:700; }
.unit-side option { color:#0b1734; background:#fff; }
.unit-side input:focus,.unit-side select:focus { border-color:#57d8ff; box-shadow:0 0 0 3px rgba(87,216,255,.1); }
.unit-swap { width:48px; height:48px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; display:grid; place-items:center; position:relative; z-index:2; color:#251a05; background:linear-gradient(145deg,#f5d981,#dba842); box-shadow:0 9px 24px rgba(225,179,71,.2); cursor:pointer; transition:.18s ease; }
.unit-swap:hover { transform:rotate(180deg) scale(1.04); }
.unit-swap svg { width:19px; }
.result-side header button { padding:4px 0; border:0; display:inline-flex; align-items:center; gap:4px; color:#75dfff; background:transparent; font-size:.54rem; font-weight:850; cursor:pointer; }
.result-side header button svg { width:12px; }
#unitResult { max-width:100%; overflow:hidden; color:#fff; font-family:"Chakra Petch",monospace; font-size:clamp(1.65rem,4vw,2.5rem); font-weight:800; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 0 20px rgba(87,216,255,.2); }
.result-side select { width:100%; min-height:52px; }
.unit-meta-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.unit-formula,.unit-meta-row > label { min-height:48px; padding:10px 13px; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; gap:7px; color:var(--muted); background:var(--paper); font-size:.62rem; }
.unit-formula b { color:#6f43e7; }
.unit-meta-row > label { font-weight:750; }
.unit-meta-row select { min-height:30px; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; font-weight:750; }
.unit-quick { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.unit-quick small { margin-right:3px; color:var(--muted); font-size:.58rem; font-weight:750; }
.unit-quick button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:999px; color:#6f43e7; background:var(--surface); font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.58rem; font-weight:800; cursor:pointer; }
.unit-quick button:hover { border-color:#6f43e7; background:color-mix(in srgb,#6f43e7 6%,var(--surface)); }
.unit-comparison { padding:15px; border:1px solid var(--line); border-radius:19px; background:var(--surface); }
.unit-comparison > header,.unit-history > header { margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.unit-comparison header small,.unit-comparison header h3 { display:block; }
.unit-comparison header small { color:var(--muted); font-size:.54rem; }
.unit-comparison header h3 { margin:2px 0 0; font-size:.82rem; }
.unit-comparison header button { min-height:34px; padding:0 10px; border:1px solid color-mix(in srgb,#6f43e7 24%,var(--line)); border-radius:10px; display:inline-flex; align-items:center; gap:5px; color:#6f43e7; background:color-mix(in srgb,#6f43e7 6%,var(--surface)); font-size:.56rem; font-weight:850; cursor:pointer; }
.unit-comparison header button svg { width:13px; }
#unitComparisonTable { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#unitComparisonTable > div { min-width:0; min-height:51px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:9px; background:var(--paper); }
#unitComparisonTable > div.active { border-color:#6f43e7; background:color-mix(in srgb,#6f43e7 7%,var(--surface)); }
#unitComparisonTable span { min-width:0; }
#unitComparisonTable b,#unitComparisonTable small { display:block; }
#unitComparisonTable b { overflow:hidden; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
#unitComparisonTable small { margin-top:2px; color:var(--muted); font-size:.5rem; }
#unitComparisonTable strong { max-width:55%; overflow:hidden; font-family:"Chakra Petch",monospace; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.unit-history { padding:13px 15px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.unit-history > header { margin-bottom:8px; color:var(--ink); font-size:.66rem; font-weight:850; }
.unit-history > header span { display:flex; align-items:center; gap:6px; }
.unit-history > header svg { width:14px; color:#6f43e7; }
.unit-history > header button { padding:2px 0; border:0; color:#dc4d5e; background:transparent; font-size:.54rem; font-weight:800; cursor:pointer; }
#unitHistory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#unitHistory > p { grid-column:1 / -1; margin:16px 0; color:var(--muted); font-size:.61rem; text-align:center; }
#unitHistory button { min-width:0; min-height:52px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink); background:var(--surface); text-align:left; cursor:pointer; }
#unitHistory button span { min-width:0; }
#unitHistory small,#unitHistory b { display:block; }
#unitHistory small { color:var(--muted); font-size:.49rem; }
#unitHistory b { margin-top:2px; overflow:hidden; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
#unitHistory svg { width:13px; flex:0 0 auto; color:#6f43e7; }
@media (max-width:760px) { .unit-converter-panel { grid-template-columns:1fr; } .unit-swap { margin:-3px auto; transform:rotate(90deg); } .unit-swap:hover { transform:rotate(270deg) scale(1.04); } .unit-side { min-height:150px; } }
@media (max-width:540px) { .unit-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .unit-intro > span { width:40px; height:40px; } .unit-intro em { width:fit-content; grid-column:2; } .unit-categories button { min-width:74px; } .unit-converter-panel { padding:11px; border-radius:21px; } .unit-side { padding:13px; } .unit-side label { grid-template-columns:1fr; } .unit-meta-row { grid-template-columns:1fr; } .unit-meta-row > label { justify-content:space-between; } #unitComparisonTable,#unitHistory { grid-template-columns:1fr; } .unit-comparison > header { align-items:flex-start; flex-direction:column; } .unit-comparison header button { width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce) { .unit-categories button,.unit-swap { transition:none; } }

/* Precision timer and stopwatch */
body[data-tool="timer"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 100% 0,color-mix(in srgb,#ff654d 7%,transparent),transparent 25rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#5327c8 2.5%,var(--surface))); }
.timer-studio { display:grid; gap:14px; }
.timer-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#ff654d 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#ff654d 7%,var(--surface)),color-mix(in srgb,#6335dd 5%,var(--surface))); }
.timer-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#ff654d,#6d35d8); box-shadow:0 10px 23px rgba(117,40,124,.22); }
.timer-intro > span svg { width:22px; }
.timer-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.timer-intro p { margin:3px 0 0; color:var(--muted); font-size:.67rem; line-height:1.5; }
.timer-intro em { padding:6px 9px; border-radius:999px; color:#5a220c; background:#ffd9c8; font-size:.52rem; font-style:normal; font-weight:900; letter-spacing:.04em; }
.timer-mode-tabs { padding:5px; border:1px solid var(--line); border-radius:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; background:var(--paper); }
.timer-mode-tabs button { min-height:43px; padding:0 12px; border:0; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); background:transparent; font:inherit; font-size:.66rem; font-weight:850; cursor:pointer; transition:.16s ease; }
.timer-mode-tabs button svg { width:16px; }
.timer-mode-tabs button.active { color:#fff; background:linear-gradient(135deg,#141d50,#5a27bc 65%,#d34475); box-shadow:0 9px 22px rgba(50,29,120,.18); }
.stopwatch-panel,.countdown-panel { display:grid; gap:12px; }
.stopwatch-panel[hidden],.countdown-panel[hidden] { display:none; }
.time-stage { min-height:275px; padding:24px; border:1px solid rgba(116,116,255,.25); border-radius:25px; display:grid; place-items:center; align-content:center; gap:17px; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 50% 20%,rgba(101,54,228,.35),transparent 18rem),linear-gradient(145deg,#080f30,#171040 68%,#291142); box-shadow:0 20px 42px rgba(16,18,63,.18),inset 0 1px rgba(255,255,255,.09); }
.time-stage::before,.countdown-clock::before { content:""; width:340px; height:340px; position:absolute; border:1px solid rgba(255,255,255,.055); border-radius:50%; box-shadow:0 0 0 37px rgba(255,255,255,.018),0 0 0 76px rgba(255,255,255,.013); pointer-events:none; }
.time-stage::after { content:""; width:70%; height:1px; position:absolute; bottom:30px; background:linear-gradient(90deg,transparent,#ff805f,transparent); opacity:.7; box-shadow:0 0 14px #ff654d; }
.time-live-dot { display:flex; align-items:center; gap:7px; position:relative; z-index:1; color:#aab9df; font-size:.58rem; font-weight:800; }
.time-live-dot i { width:8px; height:8px; border-radius:50%; background:#68799e; box-shadow:0 0 0 4px rgba(104,121,158,.13); }
.time-stage.is-running .time-live-dot i { background:#47e5bd; box-shadow:0 0 0 4px rgba(71,229,189,.13),0 0 16px #47e5bd; animation:timer-pulse 1.15s ease-in-out infinite; }
.time-display { position:relative; z-index:1; font-family:"Chakra Petch",monospace; font-size:clamp(2.3rem,8vw,5.15rem); font-weight:750; line-height:1; letter-spacing:-.055em; text-shadow:0 0 30px rgba(109,107,255,.28); white-space:nowrap; }
.time-display span { margin-left:4px; color:#ffb061; font-size:.45em; letter-spacing:-.02em; }
.time-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; position:relative; z-index:2; }
.time-actions button { min-height:43px; padding:0 14px; border:1px solid rgba(255,255,255,.16); border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#dce5ff; background:rgba(255,255,255,.07); font:inherit; font-size:.6rem; font-weight:850; cursor:pointer; transition:.16s ease; }
.time-actions button:hover:not(:disabled) { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.12); transform:translateY(-1px); }
.time-actions button:disabled { opacity:.35; cursor:not-allowed; }
.time-actions button svg { width:15px; }
.time-actions .time-main-action { min-width:155px; border-color:transparent; color:#17102f; background:linear-gradient(135deg,#ffdd79,#ff835c); box-shadow:0 10px 25px rgba(255,119,77,.2); }
.stopwatch-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.stopwatch-insights > div { min-height:70px; padding:11px 13px; border:1px solid var(--line); border-radius:15px; display:grid; align-content:center; gap:4px; background:var(--paper); }
.stopwatch-insights small { color:var(--muted); font-size:.54rem; }
.stopwatch-insights b { overflow:hidden; font-family:"Chakra Petch",monospace; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.lap-board { padding:15px; border:1px solid var(--line); border-radius:19px; background:var(--surface); }
.lap-board > header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lap-board header small { color:var(--muted); font-size:.52rem; }
.lap-board header h3 { margin:2px 0 0; font-family:"Chakra Petch",sans-serif; font-size:.8rem; }
.lap-board header button { min-height:33px; padding:0 10px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:5px; color:#6335d8; background:var(--paper); font-size:.55rem; font-weight:850; cursor:pointer; }
.lap-board header button:disabled { opacity:.4; cursor:not-allowed; }
.lap-board header button svg { width:13px; }
#lapList { display:grid; gap:6px; }
#lapList > p { margin:16px 0; color:var(--muted); font-size:.61rem; text-align:center; }
.lap-row { min-height:52px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; background:var(--paper); }
.lap-row > span { min-width:0; display:flex; align-items:center; gap:7px; }
.lap-row i { width:27px; height:27px; border-radius:9px; display:grid; place-items:center; color:#6335d8; background:color-mix(in srgb,#6335d8 9%,var(--surface)); font-family:"Chakra Petch",sans-serif; font-size:.55rem; font-style:normal; }
.lap-row b { font-size:.6rem; }
.lap-row em { padding:3px 6px; border-radius:999px; color:#087d64; background:#d9fff5; font-size:.46rem; font-style:normal; font-weight:850; }
.lap-row.slow em { color:#a74431; background:#ffe2da; }
.lap-row strong,.lap-row > small { font-family:"Chakra Petch",monospace; }
.lap-row strong { color:#182446; font-size:.68rem; }
.lap-row > small { color:var(--muted); font-size:.57rem; }
.countdown-layout { min-height:420px; border:1px solid rgba(116,116,255,.23); border-radius:25px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); overflow:hidden; color:#fff; background:linear-gradient(145deg,#080f30,#171040 63%,#291142); box-shadow:0 20px 42px rgba(16,18,63,.18),inset 0 1px rgba(255,255,255,.08); }
.timer-setup { padding:clamp(19px,3vw,30px); border-right:1px solid rgba(255,255,255,.09); display:grid; align-content:center; gap:18px; background:rgba(255,255,255,.025); transition:.16s ease; }
.timer-setup.needs-time { box-shadow:inset 0 0 0 2px #ff765d; }
.timer-setup header small { color:#9aaad0; font-size:.55rem; font-weight:750; }
.timer-setup h3 { margin:3px 0 0; font-size:1rem; }
.timer-fields { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:6px; }
.timer-fields > b { color:#7788b3; font-family:"Chakra Petch",monospace; font-size:1rem; }
.timer-fields label { min-width:0; display:grid; gap:5px; }
.timer-fields input { width:100%; min-width:0; min-height:62px; padding:8px; border:1px solid rgba(255,255,255,.14); border-radius:14px; outline:0; color:#fff; background:rgba(2,8,29,.52); font-family:"Chakra Petch",monospace; font-size:1.35rem; font-weight:750; text-align:center; }
.timer-fields input:focus { border-color:#ff9975; box-shadow:0 0 0 3px rgba(255,153,117,.1); }
.timer-fields label span { color:#8fa1c8; font-size:.49rem; text-align:center; }
.timer-presets { display:flex; flex-wrap:wrap; gap:6px; }
.timer-presets button { min-height:31px; padding:0 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#c5d1ed; background:rgba(255,255,255,.055); font:inherit; font-size:.52rem; font-weight:750; cursor:pointer; }
.timer-presets button:hover,.timer-presets button.active { border-color:#ff9a75; color:#fff; background:rgba(255,101,77,.17); }
.timer-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.timer-options label { min-height:38px; padding:0 9px; border:1px solid rgba(255,255,255,.1); border-radius:11px; display:flex; align-items:center; gap:6px; color:#b7c4e2; background:rgba(255,255,255,.04); font-size:.53rem; font-weight:750; cursor:pointer; }
.timer-options input { accent-color:#ff7858; }
.timer-options svg { width:13px; }
.countdown-clock { padding:25px 18px; display:grid; place-items:center; align-content:center; gap:18px; position:relative; overflow:hidden; }
.countdown-ring { width:min(100%,280px); aspect-ratio:1; display:grid; place-items:center; position:relative; z-index:1; }
.countdown-ring svg,.countdown-ring > div { position:absolute; inset:0; width:100%; height:100%; }
.countdown-ring svg { transform:rotate(-90deg); overflow:visible; }
.countdown-ring circle { fill:none; stroke-width:5; }
.ring-track { stroke:rgba(255,255,255,.08); }
.ring-progress { stroke:#ff865d; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(255,134,93,.65)); transition:stroke-dashoffset .2s linear,stroke .2s ease; }
.countdown-ring > div { display:grid; place-content:center; text-align:center; }
.countdown-ring small { color:#98aad1; font-size:.55rem; font-weight:800; }
#timerClock { margin:8px 0 5px; font-family:"Chakra Petch",monospace; font-size:clamp(2rem,5vw,3.5rem); font-weight:750; line-height:1; letter-spacing:-.055em; }
#timerPercent { color:#ffb165; font-family:"Chakra Petch",monospace; font-size:.62rem; font-weight:800; }
.countdown-clock.is-running .ring-progress { stroke:#48d9d0; filter:drop-shadow(0 0 7px rgba(72,217,208,.65)); }
.countdown-clock.is-complete .ring-progress { stroke:#ffcf62; animation:timer-ring-complete .8s ease-in-out 2; }
.timer-persistence { margin:0; padding:10px 12px; border:1px solid color-mix(in srgb,#6335d8 15%,var(--line)); border-radius:13px; display:flex; align-items:center; gap:7px; color:var(--muted); background:color-mix(in srgb,#6335d8 4%,var(--surface)); font-size:.57rem; line-height:1.55; }
.timer-persistence svg { width:14px; flex:0 0 auto; color:#6335d8; }
@keyframes timer-pulse { 50% { opacity:.5; transform:scale(.72); } }
@keyframes timer-ring-complete { 50% { opacity:.25; transform:scale(.985); transform-origin:center; } }
@media (max-width:760px) { .countdown-layout { grid-template-columns:1fr; } .timer-setup { border-right:0; border-bottom:1px solid rgba(255,255,255,.09); } .countdown-clock { min-height:390px; } }
@media (max-width:540px) { .timer-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .timer-intro > span { width:40px; height:40px; } .timer-intro em { width:fit-content; grid-column:2; } .timer-mode-tabs button { min-height:48px; padding:6px 8px; font-size:.58rem; } .time-stage { min-height:245px; padding:18px 10px; } .time-display { font-size:clamp(2.05rem,13vw,3.3rem); } .stopwatch-insights { grid-template-columns:1fr; } .lap-row { grid-template-columns:minmax(0,1fr) auto; } .lap-row > small { grid-column:2; } .timer-options { grid-template-columns:1fr; } .countdown-clock { min-height:335px; padding:18px 10px; } .countdown-ring { width:min(100%,245px); } }
@media (prefers-reduced-motion:reduce) { .timer-mode-tabs button,.time-actions button,.timer-setup,.ring-progress { transition:none; } .time-stage.is-running .time-live-dot i,.countdown-clock.is-complete .ring-progress { animation:none; } }

/* Local PDF editor */
body[data-tool="edit-pdf"] .tool-workspace-card { padding:clamp(14px,2vw,24px); }
body[data-tool="edit-pdf"] .tool-layout { grid-template-columns:minmax(0,1fr) 250px; }
.pdf-editor-studio { min-width:0; display:grid; gap:14px; }
.pdf-editor-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#ff5b48 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#ff5b48 7%,var(--surface)),color-mix(in srgb,#9d1736 4%,var(--surface))); }
.pdf-editor-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#ff6852,#a71840); box-shadow:0 10px 23px rgba(163,26,62,.22); }
.pdf-editor-intro > span svg { width:22px; }
.pdf-editor-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.pdf-editor-intro p { margin:3px 0 0; color:var(--muted); font-size:.65rem; line-height:1.5; }
.pdf-editor-intro em { padding:6px 9px; border-radius:999px; color:#742036; background:#ffd8d1; font-size:.52rem; font-style:normal; font-weight:900; }
.pdf-editor-upload { min-height:290px; border:1px dashed color-mix(in srgb,#ff5b48 35%,var(--line)); border-radius:23px; display:grid; place-items:center; background:radial-gradient(circle at 50% 25%,color-mix(in srgb,#ff5b48 8%,transparent),transparent 15rem),var(--paper); transition:.18s ease; }
.pdf-editor-upload[hidden],.pdf-editor-workspace[hidden],.pdf-property-group[hidden],.pdf-editor-progress[hidden],.pdf-editor-result[hidden] { display:none; }
.pdf-editor-upload.dragging { border-color:#ff5b48; background:color-mix(in srgb,#ff5b48 7%,var(--surface)); transform:scale(.995); }
.pdf-editor-upload.is-loading { opacity:.65; pointer-events:none; }
.pdf-editor-upload > label { width:min(100%,500px); padding:28px 18px; display:grid; place-items:center; gap:12px; text-align:center; cursor:pointer; }
.pdf-editor-upload > label > svg { width:54px; height:54px; padding:14px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#ff6852,#a71840); box-shadow:0 15px 30px rgba(163,26,62,.2); }
.pdf-editor-upload b,.pdf-editor-upload small { display:block; }
.pdf-editor-upload b { font-size:.88rem; }
.pdf-editor-upload small { margin-top:5px; color:var(--muted); font-size:.59rem; }
.pdf-editor-upload strong { min-height:38px; padding:0 18px; border-radius:12px; display:flex; align-items:center; color:#fff; background:#13204c; font-size:.61rem; }
.pdf-editor-upload > p { margin:-28px 15px 16px; color:#db3b4f; font-size:.59rem; font-weight:750; }
.pdf-editor-workspace { min-width:0; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:0 18px 38px rgba(12,25,62,.08); }
.pdf-editor-topbar { min-height:62px; padding:9px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); }
.pdf-editor-document { min-width:0; display:flex; align-items:center; gap:8px; }
.pdf-editor-document > svg { width:32px; height:32px; padding:8px; border-radius:10px; flex:0 0 auto; color:#fff; background:linear-gradient(145deg,#ff654d,#ad1e45); }
.pdf-editor-document span { min-width:0; }
.pdf-editor-document b,.pdf-editor-document small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-editor-document b { max-width:250px; font-size:.62rem; }
.pdf-editor-document small { margin-top:2px; color:var(--muted); font-size:.49rem; }
.pdf-editor-topbar > div { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.pdf-editor-topbar > div > i { width:1px; height:24px; background:var(--line); }
.pdf-editor-topbar button,.pdf-editor-pager button { width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:9px; display:grid; place-items:center; color:var(--ink); background:var(--paper); cursor:pointer; }
.pdf-editor-topbar button svg,.pdf-editor-pager button svg { width:14px; }
.pdf-editor-topbar button:hover:not(:disabled),.pdf-editor-pager button:hover:not(:disabled) { border-color:#ff654d; color:#ff654d; }
.pdf-editor-topbar button:disabled,.pdf-editor-pager button:disabled { opacity:.35; cursor:not-allowed; }
.pdf-editor-topbar button.danger { color:#db3b4f; }
.pdf-editor-topbar #restorePdfPage { width:auto; padding:0 9px; display:flex; gap:5px; color:#087d64; font-size:.51rem; font-weight:800; }
.pdf-editor-layout { min-width:0; min-height:630px; display:grid; grid-template-columns:94px minmax(0,1fr) 185px; }
.pdf-page-rail { min-width:0; padding:10px 8px; border-right:1px solid var(--line); background:var(--paper); }
.pdf-page-rail > header { margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.pdf-page-rail header b { font-size:.55rem; }
.pdf-page-rail header small { color:var(--muted); font-size:.45rem; }
#pdfEditorPages { max-height:590px; padding-right:2px; display:grid; gap:7px; overflow-y:auto; scrollbar-width:thin; }
#pdfEditorPages button { min-width:0; padding:5px; border:1px solid transparent; border-radius:10px; display:grid; gap:4px; color:var(--muted); background:transparent; font:inherit; font-size:.49rem; cursor:pointer; }
#pdfEditorPages button.active { border-color:#ff765e; color:#a62540; background:color-mix(in srgb,#ff654d 8%,var(--surface)); }
#pdfEditorPages button > span { min-height:76px; border:1px solid var(--line); border-radius:7px; display:grid; place-items:center; position:relative; overflow:hidden; background:#fff; }
#pdfEditorPages canvas { max-width:100%; max-height:76px; display:block; }
#pdfEditorPages i { min-width:17px; height:17px; padding:0 4px; border-radius:999px; display:grid; place-items:center; position:absolute; right:3px; top:3px; color:#fff; background:#ff654d; font-size:.42rem; font-style:normal; font-weight:850; }
.pdf-editor-center { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#dce1eb; }
.pdf-edit-tools { min-width:0; min-height:56px; padding:6px 8px; border-bottom:1px solid rgba(12,28,65,.12); display:flex; align-items:center; justify-content:center; gap:4px; overflow-x:auto; background:#f8f9fc; }
.pdf-edit-tools button { min-width:58px; min-height:43px; padding:5px 7px; border:1px solid transparent; border-radius:9px; display:grid; place-items:center; gap:2px; color:#5c6780; background:transparent; font:inherit; font-size:.46rem; font-weight:750; cursor:pointer; }
.pdf-edit-tools button svg { width:15px; }
.pdf-edit-tools button:hover,.pdf-edit-tools button.active { border-color:#ff765e; color:#a9253e; background:#fff0ed; }
.pdf-editor-canvas-shell { min-width:0; min-height:500px; padding:22px; display:flex; align-items:flex-start; justify-content:center; overflow:auto; background-color:#cdd4df; background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.28) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.28) 75%); background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.pdf-editor-page-stage { width:600px; max-width:100%; flex:0 0 auto; position:relative; box-shadow:0 14px 34px rgba(21,30,55,.25); background:#fff; }
#pdfEditorCanvas { width:100%; height:auto; display:block; }
#pdfEditorOverlay { width:100%; height:100%; position:absolute; inset:0; touch-action:none; cursor:default; }
#pdfEditorOverlay[data-tool="text"] { cursor:text; }
#pdfEditorOverlay[data-tool="pen"],#pdfEditorOverlay[data-tool="highlight"],#pdfEditorOverlay[data-tool="signature"] { cursor:crosshair; }
#pdfEditorOverlay[data-tool="eraser"] { cursor:not-allowed; }
.pdf-editor-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:7px; color:#405071; background:rgba(255,255,255,.92); font-size:.58rem; font-weight:750; }
.pdf-editor-loading[hidden] { display:none; }
.pdf-editor-loading svg { width:17px; animation:pdf-editor-spin .9s linear infinite; }
@keyframes pdf-editor-spin { to { transform:rotate(360deg); } }
.pdf-editor-pager { min-height:48px; padding:6px 10px; display:flex; align-items:center; justify-content:center; gap:7px; color:#41506c; background:#f8f9fc; font-size:.53rem; }
.pdf-editor-pager > i { width:1px; height:22px; margin:0 4px; background:#d6dae3; }
.pdf-edit-properties { min-width:0; padding:14px 12px; border-left:1px solid var(--line); background:var(--surface); }
.pdf-edit-properties > header small { color:var(--muted); font-size:.48rem; }
.pdf-edit-properties > header h3 { margin:3px 0 14px; font-size:.69rem; }
.pdf-property-group { display:grid; gap:10px; }
.pdf-property-group > label,.pdf-property-group > div > label { display:grid; gap:5px; color:var(--muted); font-size:.5rem; font-weight:750; }
.pdf-property-group > div { display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:7px; }
.pdf-property-group textarea,.pdf-property-group select { width:100%; min-width:0; padding:8px; border:1px solid var(--line); border-radius:9px; outline:0; color:var(--ink); background:var(--paper); font:inherit; font-size:.56rem; }
.pdf-property-group textarea:focus,.pdf-property-group select:focus { border-color:#ff654d; }
.pdf-property-group input[type="color"] { width:100%; height:34px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.pdf-property-group input[type="range"] { width:100%; accent-color:#ff654d; }
.pdf-property-group[data-property-group="signature"] button { min-height:39px; border:1px solid #ff8a72; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:6px; color:#a62540; background:#fff0ed; font:inherit; font-size:.55rem; font-weight:850; cursor:pointer; }
.pdf-property-group[data-property-group="signature"] button svg { width:14px; }
.pdf-property-group[data-property-group="signature"] p { margin:0; color:var(--muted); font-size:.5rem; line-height:1.5; }
.pdf-property-hint { margin-top:13px; padding:9px; border-radius:10px; display:flex; align-items:flex-start; gap:5px; color:#65718b; background:var(--paper); font-size:.49rem; line-height:1.45; }
.pdf-property-hint svg { width:12px; flex:0 0 auto; color:#ff654d; }
.pdf-object-list { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.pdf-object-list > header { margin-bottom:7px; display:flex; align-items:center; justify-content:space-between; }
.pdf-object-list header b { font-size:.53rem; }
.pdf-object-list header small { min-width:19px; height:19px; border-radius:999px; display:grid; place-items:center; color:#a62540; background:#ffe5df; font-size:.44rem; font-weight:850; }
#pdfObjectList { max-height:230px; display:grid; gap:5px; overflow-y:auto; }
#pdfObjectList > p { margin:14px 0; color:var(--muted); font-size:.49rem; text-align:center; }
#pdfObjectList button { min-width:0; min-height:42px; padding:6px 7px; border:1px solid var(--line); border-radius:9px; display:flex; align-items:center; justify-content:space-between; gap:5px; color:var(--ink); background:var(--paper); text-align:left; cursor:pointer; }
#pdfObjectList button.active { border-color:#ff765e; background:#fff0ed; }
#pdfObjectList button > span { min-width:0; display:grid; grid-template-columns:17px minmax(0,1fr); align-items:center; gap:0 5px; }
#pdfObjectList span > svg { width:14px; grid-row:1 / 3; color:#ff654d; }
#pdfObjectList b,#pdfObjectList small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pdfObjectList b { font-size:.49rem; }
#pdfObjectList small { color:var(--muted); font-size:.42rem; }
#pdfObjectList button > svg { width:13px; flex:0 0 auto; color:#dc3c50; }
.pdf-editor-export { min-height:78px; padding:11px 13px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) 150px auto; align-items:center; gap:10px; background:var(--surface); }
.pdf-editor-export > span { min-width:0; display:flex; align-items:center; gap:8px; }
.pdf-editor-export > span > svg { width:31px; height:31px; padding:8px; border-radius:10px; flex:0 0 auto; color:#087d64; background:#dffff6; }
.pdf-editor-export b,.pdf-editor-export small { display:block; }
.pdf-editor-export b { font-size:.57rem; }
.pdf-editor-export small { margin-top:2px; color:var(--muted); font-size:.45rem; }
.pdf-editor-export > label { color:var(--muted); font-size:.46rem; font-weight:750; }
.pdf-editor-export input { width:100%; min-height:34px; margin-top:4px; padding:0 8px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font:inherit; font-size:.51rem; }
.pdf-editor-export .tool-primary { width:auto; min-width:175px; min-height:42px; padding:0 13px; }
.pdf-editor-progress { padding:9px 13px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(100px,1fr) auto; align-items:center; gap:9px; background:var(--paper); }
.pdf-editor-progress > div { height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,#ff654d 10%,var(--line)); }
.pdf-editor-progress i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#ff654d,#a71840); transition:width .18s ease; }
.pdf-editor-progress span { color:var(--muted); font-size:.49rem; }
.pdf-editor-result { margin:10px 13px 13px; padding:10px; border:1px solid #a9ebd9; border-radius:12px; display:flex; align-items:center; gap:8px; color:#075f4f; background:#e8fff9; }
.pdf-editor-result > svg { width:22px; }
.pdf-editor-result > span { min-width:0; flex:1; }
.pdf-editor-result b,.pdf-editor-result small { display:block; }
.pdf-editor-result b { font-size:.57rem; }
.pdf-editor-result small { margin-top:2px; font-size:.46rem; }
.pdf-editor-result .tool-primary { width:auto; min-width:145px; min-height:38px; padding:0 10px; }
.pdf-signature-dialog { width:min(92vw,700px); padding:0; border:0; border-radius:21px; color:var(--ink); background:var(--surface); box-shadow:0 30px 80px rgba(5,13,39,.35); }
.pdf-signature-dialog::backdrop { background:rgba(5,13,39,.68); backdrop-filter:blur(5px); }
.pdf-signature-dialog form > header,.pdf-signature-dialog form > footer { padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pdf-signature-dialog form > header { border-bottom:1px solid var(--line); }
.pdf-signature-dialog header small { color:var(--muted); font-size:.5rem; }
.pdf-signature-dialog header h3 { margin:2px 0 0; font-size:.78rem; }
.pdf-signature-dialog header button { width:33px; height:33px; padding:0; border:1px solid var(--line); border-radius:9px; display:grid; place-items:center; color:var(--muted); background:var(--paper); }
.pdf-signature-dialog header button svg { width:15px; }
.pdf-signature-dialog form > div { margin:13px 15px; border:1px dashed #a9afbd; border-radius:14px; overflow:hidden; background-color:#fff; background-image:linear-gradient(#edf0f5 1px,transparent 1px); background-size:100% 40px; }
#signatureCanvas { width:100%; height:auto; display:block; touch-action:none; cursor:crosshair; }
.pdf-signature-dialog form > footer { border-top:1px solid var(--line); }
.pdf-signature-dialog footer button { min-height:39px; padding:0 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); font:inherit; font-size:.55rem; font-weight:800; cursor:pointer; }
.pdf-signature-dialog footer .tool-primary { width:auto; border:0; color:#fff; background:linear-gradient(135deg,#ff654d,#a71840); }
@media (max-width:1100px) { body[data-tool="edit-pdf"] .tool-layout { grid-template-columns:1fr; } body[data-tool="edit-pdf"] .tool-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .pdf-editor-layout { grid-template-columns:76px minmax(0,1fr); } .pdf-edit-properties { padding:12px; border-top:1px solid var(--line); border-left:0; grid-column:1 / -1; } .pdf-editor-export { grid-template-columns:1fr; } .pdf-editor-export .tool-primary { width:100%; } .pdf-editor-result { align-items:stretch; flex-direction:column; } .pdf-editor-result .tool-primary { width:100%; } }
@media (max-width:540px) { .pdf-editor-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .pdf-editor-intro > span { width:40px; height:40px; } .pdf-editor-intro em { width:fit-content; grid-column:2; } .pdf-editor-topbar { align-items:flex-start; flex-direction:column; } .pdf-editor-document b { max-width:230px; } .pdf-editor-layout { grid-template-columns:1fr; } .pdf-page-rail { padding:8px; border-right:0; border-bottom:1px solid var(--line); } #pdfEditorPages { max-height:none; padding-bottom:3px; grid-template-columns:repeat(6,70px); overflow-x:auto; overflow-y:hidden; } #pdfEditorPages button > span { min-height:68px; } #pdfEditorPages canvas { max-height:68px; } .pdf-editor-canvas-shell { min-height:410px; padding:12px; } .pdf-edit-tools { justify-content:flex-start; } .pdf-editor-pager { flex-wrap:wrap; } body[data-tool="edit-pdf"] .tool-sidebar { grid-template-columns:1fr; } .pdf-signature-dialog form > footer { align-items:stretch; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .pdf-editor-upload,.pdf-editor-progress i { transition:none; } .pdf-editor-loading svg { animation:none; } }

/* Word DOCX to PDF */
body[data-tool="word-pdf"] .tool-workspace-card { padding:clamp(16px,2.5vw,28px); background:radial-gradient(circle at 100% 0,color-mix(in srgb,#2567d9 7%,transparent),transparent 24rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#e84f48 2.2%,var(--surface))); }
.word-pdf-studio { min-width:0; display:grid; gap:14px; }
.word-pdf-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#2567d9 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#2567d9 7%,var(--surface)),color-mix(in srgb,#e84f48 4%,var(--surface))); }
.word-pdf-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#2567d9,#e84f48); box-shadow:0 10px 23px rgba(37,74,170,.22); }
.word-pdf-intro > span svg { width:22px; }
.word-pdf-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.word-pdf-intro p { margin:3px 0 0; color:var(--muted); font-size:.65rem; line-height:1.5; }
.word-pdf-intro em { padding:6px 9px; border-radius:999px; color:#153f8c; background:#dce9ff; font-size:.51rem; font-style:normal; font-weight:900; }
.word-pdf-drop { min-height:285px; border:1px dashed color-mix(in srgb,#2567d9 35%,var(--line)); border-radius:23px; display:grid; place-items:center; background:radial-gradient(circle at 50% 25%,color-mix(in srgb,#2567d9 8%,transparent),transparent 15rem),var(--paper); transition:.18s ease; }
.word-pdf-drop[hidden],.word-pdf-workspace[hidden],.word-pdf-rendering[hidden],.word-pdf-progress[hidden],.word-pdf-result[hidden] { display:none; }
.word-pdf-drop.dragging { border-color:#2567d9; background:color-mix(in srgb,#2567d9 7%,var(--surface)); transform:scale(.995); }
.word-pdf-drop.is-loading { opacity:.65; pointer-events:none; }
.word-pdf-drop > label { width:min(100%,500px); padding:28px 18px; display:grid; place-items:center; gap:12px; text-align:center; cursor:pointer; }
.word-pdf-drop > label > svg { width:54px; height:54px; padding:14px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#2567d9,#e84f48); box-shadow:0 15px 30px rgba(37,74,170,.2); }
.word-pdf-drop b,.word-pdf-drop small { display:block; }
.word-pdf-drop b { font-size:.88rem; }
.word-pdf-drop small { margin-top:5px; color:var(--muted); font-size:.59rem; }
.word-pdf-drop strong { min-height:38px; padding:0 18px; border-radius:12px; display:flex; align-items:center; color:#fff; background:#13204c; font-size:.61rem; }
.word-pdf-drop > p { margin:-28px 15px 16px; color:#db3b4f; font-size:.59rem; font-weight:750; }
.word-pdf-workspace { min-width:0; display:grid; gap:12px; }
.word-pdf-filebar { min-height:62px; padding:9px 12px; border:1px solid var(--line); border-radius:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); }
.word-pdf-filebar > span { min-width:0; display:flex; align-items:center; gap:9px; }
.word-pdf-filebar > span > svg { width:35px; height:35px; padding:9px; border-radius:11px; flex:0 0 auto; color:#fff; background:linear-gradient(145deg,#2567d9,#144698); }
.word-pdf-filebar b,.word-pdf-filebar small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.word-pdf-filebar b { max-width:430px; font-size:.66rem; }
.word-pdf-filebar small { margin-top:2px; color:var(--muted); font-size:.49rem; }
.word-pdf-filebar > button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:5px; color:#2567d9; background:var(--paper); font:inherit; font-size:.53rem; font-weight:800; cursor:pointer; }
.word-pdf-filebar button svg { width:13px; }
.word-pdf-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.word-pdf-settings label { display:grid; gap:5px; color:var(--muted); font-size:.51rem; font-weight:750; }
.word-pdf-settings input,.word-pdf-settings select { width:100%; min-height:41px; padding:0 10px; border:1px solid var(--line); border-radius:11px; outline:0; color:var(--ink); background:var(--surface); font:inherit; font-size:.57rem; }
.word-pdf-settings input:focus,.word-pdf-settings select:focus { border-color:#2567d9; box-shadow:0 0 0 3px color-mix(in srgb,#2567d9 9%,transparent); }
.word-pdf-preview-card { min-width:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); }
.word-pdf-preview-card > header { min-height:64px; padding:10px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.word-pdf-preview-card header small { display:block; color:var(--muted); font-size:.49rem; }
.word-pdf-preview-card header h3 { margin:3px 0 0; font-size:.77rem; }
.word-pdf-preview-card header > span:last-child { text-align:right; }
.word-pdf-preview-card header > span:last-child b { display:block; color:#2567d9; font-size:.66rem; }
.word-pdf-preview-shell { min-width:0; min-height:500px; max-height:780px; padding:18px; position:relative; overflow:auto; background:#d7dce6; }
#wordPdfStyles { display:none; }
#wordPdfPreview { min-width:760px; }
#wordPdfPreview .docx-wrapper { padding:0 !important; background:transparent !important; }
#wordPdfPreview section.docx { margin:0 auto 18px !important; position:relative; cursor:pointer; box-shadow:0 10px 30px rgba(20,29,56,.2) !important; transition:opacity .16s ease,box-shadow .16s ease,transform .16s ease; }
#wordPdfPreview section.docx::before { content:"หน้า " attr(data-word-page); min-width:55px; height:24px; padding:0 7px; border-radius:999px; display:flex; align-items:center; justify-content:center; position:absolute; right:10px; top:10px; z-index:5; color:#fff; background:#2567d9; font:800 10px "Anuphan",sans-serif; box-shadow:0 6px 14px rgba(24,63,146,.2); transform:translateZ(0); }
#wordPdfPreview section.docx.word-page-skipped { opacity:.35; box-shadow:0 0 0 2px #c85a68 !important; }
#wordPdfPreview section.docx.word-page-selected { box-shadow:0 0 0 2px #2567d9,0 12px 32px rgba(20,65,160,.2) !important; }
#wordPdfPreview section.docx.word-page-capturing::before { display:none; }
#wordPdfPreview section.docx.word-page-capturing { opacity:1; box-shadow:none !important; transform:none; }
.word-pdf-rendering { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:7px; color:#26395f; background:rgba(238,242,249,.9); font-size:.62rem; font-weight:800; }
.word-pdf-rendering svg { width:18px; animation:pdf-editor-spin .9s linear infinite; }
.word-pdf-run { min-height:49px; }
.word-pdf-progress { padding:12px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:minmax(120px,1fr) auto; align-items:center; gap:10px; background:var(--paper); }
.word-pdf-progress > div { height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,#2567d9 10%,var(--line)); }
.word-pdf-progress i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#2567d9,#e84f48); transition:width .18s ease; }
.word-pdf-progress b,.word-pdf-progress small { display:block; }
.word-pdf-progress b { font-size:.55rem; }
.word-pdf-progress small { margin-top:2px; color:var(--muted); font-size:.47rem; }
.word-pdf-result { padding:12px; border:1px solid #a9ebd9; border-radius:14px; display:flex; align-items:center; gap:9px; color:#075f4f; background:#e8fff9; }
.word-pdf-result > span { min-width:0; display:flex; align-items:center; gap:8px; flex:1; }
.word-pdf-result > span > svg { width:24px; flex:0 0 auto; }
.word-pdf-result b,.word-pdf-result small { display:block; }
.word-pdf-result b { font-size:.6rem; }
.word-pdf-result small { margin-top:2px; font-size:.48rem; }
.word-pdf-result .tool-primary { width:auto; min-width:160px; min-height:40px; padding:0 11px; }
@media (max-width:760px) { .word-pdf-preview-shell { padding:10px; } .word-pdf-result { align-items:stretch; flex-direction:column; } .word-pdf-result .tool-primary { width:100%; } }
@media (max-width:540px) { .word-pdf-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .word-pdf-intro > span { width:40px; height:40px; } .word-pdf-intro em { width:fit-content; grid-column:2; } .word-pdf-filebar { align-items:flex-start; flex-direction:column; } .word-pdf-filebar > button { width:100%; justify-content:center; } .word-pdf-filebar b { max-width:240px; } .word-pdf-settings { grid-template-columns:1fr; } .word-pdf-preview-card > header { align-items:flex-start; } .word-pdf-preview-shell { min-height:430px; } }
@media (prefers-reduced-motion:reduce) { .word-pdf-drop,#wordPdfPreview section.docx,.word-pdf-progress i { transition:none; } .word-pdf-rendering svg { animation:none; } }

/* Public IP and network identity */
body[data-tool="ip-check"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 100% 0,color-mix(in srgb,#09a9c9 8%,transparent),transparent 24rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#074a84 2.5%,var(--surface))); }
.ip-check-studio { display:grid; gap:13px; }
.ip-check-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#09a9c9 20%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#09a9c9 7%,var(--surface)),color-mix(in srgb,#087763 4%,var(--surface))); }
.ip-check-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#08bcd7,#0756a1); box-shadow:0 10px 23px rgba(7,89,149,.22); }
.ip-check-intro > span svg { width:22px; }
.ip-check-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.ip-check-intro p { margin:3px 0 0; color:var(--muted); font-size:.65rem; line-height:1.5; }
.ip-check-intro em { padding:6px 9px; border-radius:999px; color:#075b6d; background:#ccf7ff; font-size:.51rem; font-style:normal; font-weight:900; }
.ip-hero-card { min-height:230px; padding:22px; border:1px solid rgba(90,214,255,.22); border-radius:25px; display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:19px; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 80% 0,rgba(0,212,195,.26),transparent 18rem),linear-gradient(140deg,#06193c,#073d70 58%,#075f6a); box-shadow:0 20px 42px rgba(4,43,81,.2),inset 0 1px rgba(255,255,255,.1); }
.ip-hero-card::after { content:""; width:300px; height:300px; position:absolute; right:-160px; bottom:-210px; border:28px solid rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }
.ip-hero-orbit { width:105px; height:105px; display:grid; place-items:center; position:relative; }
.ip-hero-orbit::before,.ip-hero-orbit i { content:""; position:absolute; inset:4px; border:1px solid rgba(74,228,255,.25); border-radius:50%; }
.ip-hero-orbit i { inset:17px; border-style:dashed; animation:ip-orbit 11s linear infinite; }
.ip-hero-orbit span { width:64px; height:64px; border-radius:22px; display:grid; place-items:center; position:relative; z-index:1; color:#062240; background:linear-gradient(145deg,#5de5ff,#42e3b3); box-shadow:0 0 34px rgba(71,224,213,.3); transform:rotate(-5deg); }
.ip-hero-orbit svg { width:31px; }
.ip-primary { min-width:0; position:relative; z-index:1; }
.ip-primary > small { color:#8fd9e8; font-size:.57rem; font-weight:850; letter-spacing:.05em; }
#publicIpAddress { margin:10px 0 13px; display:block; overflow-wrap:anywhere; font-family:"Chakra Petch",monospace; font-size:clamp(1.8rem,5vw,3.2rem); font-weight:750; line-height:1.05; letter-spacing:-.04em; text-shadow:0 0 24px rgba(82,227,231,.23); }
.ip-primary > div { display:flex; flex-wrap:wrap; gap:7px; }
.ip-primary > div > span { min-height:27px; padding:0 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; display:inline-flex; align-items:center; gap:5px; color:#c3eaf1; background:rgba(255,255,255,.07); font-size:.51rem; font-weight:800; }
#ipConnectionBadge i { width:7px; height:7px; border-radius:50%; background:#48e2b4; box-shadow:0 0 9px #48e2b4; }
#ipConnectionBadge.offline i { background:#ff765e; box-shadow:0 0 9px #ff765e; }
.ip-hero-actions { display:grid; gap:8px; position:relative; z-index:2; }
.ip-hero-actions button { min-width:125px; min-height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.16); border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; color:#d8f5f8; background:rgba(255,255,255,.075); font:inherit; font-size:.56rem; font-weight:850; cursor:pointer; }
.ip-hero-actions button:first-child { border:0; color:#062b3c; background:linear-gradient(135deg,#67e9ff,#49e1b2); box-shadow:0 10px 23px rgba(74,224,200,.17); }
.ip-hero-actions button:disabled { opacity:.45; cursor:not-allowed; }
.ip-hero-actions button svg { width:14px; }
.ip-lookup-status { min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; gap:7px; color:var(--muted); background:var(--paper); font-size:.55rem; font-weight:700; }
.ip-lookup-status svg { width:14px; flex:0 0 auto; }
.ip-lookup-status.loading svg { color:#09a9c9; animation:pdf-editor-spin .9s linear infinite; }
.ip-lookup-status.success { border-color:#a9ead9; color:#08745f; background:#e9fff9; }
.ip-lookup-status.warning { border-color:#f2d794; color:#826013; background:#fff8e4; }
.ip-lookup-status.error { border-color:#f3b5bd; color:#a93343; background:#fff0f2; }
.ip-location-panel,.device-network-panel { padding:15px; border:1px solid var(--line); border-radius:19px; background:var(--surface); }
.ip-location-panel > header,.device-network-panel > header { margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ip-location-panel header small,.device-network-panel header small { color:var(--muted); font-size:.51rem; }
.ip-location-panel header h3,.device-network-panel header h3 { margin:3px 0 0; font-size:.79rem; }
.ip-location-panel header em { padding:5px 8px; border-radius:999px; display:flex; align-items:center; gap:4px; color:#8a5d13; background:#fff3cb; font-size:.48rem; font-style:normal; font-weight:850; }
.ip-location-panel header em svg { width:12px; }
.ip-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.ip-info-grid > div { min-width:0; min-height:84px; padding:10px; border:1px solid var(--line); border-radius:13px; display:grid; grid-template-columns:28px minmax(0,1fr); align-content:center; gap:2px 7px; background:var(--paper); }
.ip-info-grid > div > span { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; grid-row:1 / 3; color:#087a91; background:#dff9fc; }
.ip-info-grid svg { width:14px; }
.ip-info-grid small,.ip-info-grid b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ip-info-grid small { color:var(--muted); font-size:.47rem; }
.ip-info-grid b { font-size:.57rem; }
.device-network-panel header button { min-height:33px; padding:0 9px; border:1px solid color-mix(in srgb,#09a9c9 25%,var(--line)); border-radius:10px; display:flex; align-items:center; gap:5px; color:#087a91; background:#e9fbfd; font:inherit; font-size:.51rem; font-weight:850; cursor:pointer; }
.device-network-panel header button svg { width:13px; }
.device-network-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.device-network-grid > div { min-width:0; min-height:64px; padding:9px 10px; border:1px solid var(--line); border-radius:12px; display:grid; align-content:center; gap:4px; background:var(--paper); }
.device-network-grid small { color:var(--muted); font-size:.46rem; }
.device-network-grid b { overflow:hidden; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.webrtc-check-card { padding:14px; border:1px solid color-mix(in srgb,#09a9c9 20%,var(--line)); border-radius:17px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; background:linear-gradient(135deg,color-mix(in srgb,#09a9c9 6%,var(--surface)),var(--surface)); }
.webrtc-check-card > span { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#087a91; background:#dff9fc; }
.webrtc-check-card > span svg { width:20px; }
.webrtc-check-card small { color:var(--muted); font-size:.47rem; }
.webrtc-check-card h3 { margin:2px 0; font-family:"Chakra Petch",sans-serif; font-size:.69rem; }
.webrtc-check-card p { margin:0; color:var(--muted); font-size:.51rem; line-height:1.5; }
.webrtc-check-card button { min-height:37px; padding:0 10px; border:0; border-radius:11px; display:flex; align-items:center; gap:5px; color:#fff; background:linear-gradient(135deg,#09a9c9,#087866); font:inherit; font-size:.52rem; font-weight:850; cursor:pointer; }
.webrtc-check-card button:disabled { opacity:.5; }
.webrtc-check-card button svg { width:13px; }
.ip-privacy-note { padding:13px 14px; border:1px solid #f1daa4; border-radius:16px; display:flex; align-items:flex-start; gap:9px; color:#6a531d; background:#fff9e9; }
.ip-privacy-note > span { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; color:#8d6414; background:#ffe9ab; }
.ip-privacy-note svg { width:15px; }
.ip-privacy-note h3 { margin:0 0 3px; font-size:.62rem; }
.ip-privacy-note p { margin:0; font-size:.52rem; line-height:1.6; }
@keyframes ip-orbit { to { transform:rotate(360deg); } }
@media (max-width:760px) { .ip-hero-card { grid-template-columns:80px minmax(0,1fr); } .ip-hero-orbit { width:80px; height:80px; } .ip-hero-orbit span { width:51px; height:51px; border-radius:18px; } .ip-hero-actions { grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); } .ip-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .device-network-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { .ip-check-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .ip-check-intro > span { width:40px; height:40px; } .ip-check-intro em { width:fit-content; grid-column:2; } .ip-hero-card { padding:18px 14px; grid-template-columns:1fr; text-align:center; } .ip-hero-orbit { margin:auto; } .ip-primary > div { justify-content:center; } .ip-hero-actions { grid-column:auto; grid-template-columns:1fr; } .ip-info-grid,.device-network-grid { grid-template-columns:1fr; } .ip-location-panel > header,.device-network-panel > header { align-items:flex-start; flex-direction:column; } .device-network-panel header button { width:100%; justify-content:center; } .webrtc-check-card { grid-template-columns:40px minmax(0,1fr); } .webrtc-check-card button { grid-column:1 / -1; justify-content:center; } }
@media (prefers-reduced-motion:reduce) { .ip-hero-orbit i,.ip-lookup-status.loading svg { animation:none; } }

/* PDF compressor */
body[data-tool="compress-pdf"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 100% 0,color-mix(in srgb,#ef5847 7%,transparent),transparent 24rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#123f9c 2.2%,var(--surface))); }
.compress-pdf-studio { min-width:0; display:grid; gap:13px; }
.compress-pdf-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#ef5847 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#ef5847 7%,var(--surface)),color-mix(in srgb,#123f9c 4%,var(--surface))); }
.compress-pdf-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#ef5847,#123f9c); box-shadow:0 10px 23px rgba(61,53,140,.22); }
.compress-pdf-intro > span svg { width:22px; }
.compress-pdf-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.compress-pdf-intro p { margin:3px 0 0; color:var(--muted); font-size:.65rem; line-height:1.5; }
.compress-pdf-intro em { padding:6px 9px; border-radius:999px; color:#8f2e24; background:#ffe0dc; font-size:.51rem; font-style:normal; font-weight:900; }
.compress-pdf-drop { min-height:285px; border:1px dashed color-mix(in srgb,#ef5847 35%,var(--line)); border-radius:23px; display:grid; place-items:center; background:radial-gradient(circle at 50% 25%,color-mix(in srgb,#ef5847 8%,transparent),transparent 15rem),var(--paper); transition:.18s ease; }
.compress-pdf-drop[hidden],.compress-pdf-workspace[hidden],.compress-pdf-progress[hidden],.compress-pdf-result[hidden] { display:none; }
.compress-pdf-drop.dragging { border-color:#ef5847; background:color-mix(in srgb,#ef5847 7%,var(--surface)); transform:scale(.995); }
.compress-pdf-drop.is-loading { opacity:.65; pointer-events:none; }
.compress-pdf-drop > label { width:min(100%,500px); padding:28px 18px; display:grid; place-items:center; gap:12px; text-align:center; cursor:pointer; }
.compress-pdf-drop > label > svg { width:54px; height:54px; padding:14px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#ef5847,#123f9c); box-shadow:0 15px 30px rgba(61,53,140,.2); }
.compress-pdf-drop b,.compress-pdf-drop small { display:block; }
.compress-pdf-drop b { font-size:.88rem; }
.compress-pdf-drop small { margin-top:5px; color:var(--muted); font-size:.59rem; }
.compress-pdf-drop strong { min-height:38px; padding:0 18px; border-radius:12px; display:flex; align-items:center; color:#fff; background:#13204c; font-size:.61rem; }
.compress-pdf-drop > p { margin:-28px 15px 16px; color:#db3b4f; font-size:.59rem; font-weight:750; }
.compress-pdf-workspace { min-width:0; display:grid; gap:12px; }
.compress-pdf-filebar { min-height:62px; padding:9px 12px; border:1px solid var(--line); border-radius:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); }
.compress-pdf-filebar > span { min-width:0; display:flex; align-items:center; gap:9px; }
.compress-pdf-filebar > span > svg { width:35px; height:35px; padding:9px; border-radius:11px; flex:0 0 auto; color:#fff; background:linear-gradient(145deg,#ef5847,#b22c35); }
.compress-pdf-filebar b,.compress-pdf-filebar small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compress-pdf-filebar b { max-width:430px; font-size:.66rem; }
.compress-pdf-filebar small { margin-top:2px; color:var(--muted); font-size:.49rem; }
.compress-pdf-filebar > button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:5px; color:#c33e33; background:var(--paper); font:inherit; font-size:.53rem; font-weight:800; cursor:pointer; }
.compress-pdf-filebar button svg { width:13px; }
.compress-pdf-preview { min-height:145px; padding:12px; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; gap:14px; overflow:hidden; background:linear-gradient(135deg,#e9edf5,#f9fafc); }
.compress-pdf-preview canvas { max-width:95px; max-height:125px; border-radius:4px; box-shadow:0 8px 20px rgba(18,31,66,.18); background:#fff; }
.compress-pdf-preview small,.compress-pdf-preview b { display:block; }
.compress-pdf-preview small { color:#69758d; font-size:.5rem; }
.compress-pdf-preview b { margin-top:4px; color:#24314e; font-family:"Chakra Petch",sans-serif; font-size:.67rem; }
.compress-pdf-modes { margin:0; padding:0; border:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.compress-pdf-modes legend { margin-bottom:7px; color:var(--ink); font-size:.62rem; font-weight:850; }
.compress-pdf-modes label { min-width:0; cursor:pointer; }
.compress-pdf-modes input { position:absolute; opacity:0; pointer-events:none; }
.compress-pdf-modes label > span { min-height:137px; padding:13px; border:1px solid var(--line); border-radius:16px; display:grid; grid-template-columns:29px minmax(0,1fr); align-content:center; gap:3px 8px; position:relative; background:var(--surface); transition:.16s ease; }
.compress-pdf-modes label > span > svg { width:29px; height:29px; padding:7px; border-radius:9px; grid-row:1 / 4; color:#c94236; background:#ffe7e3; }
.compress-pdf-modes b,.compress-pdf-modes small,.compress-pdf-modes em { min-width:0; display:block; }
.compress-pdf-modes b { font-size:.61rem; }
.compress-pdf-modes small { color:var(--muted); font-size:.49rem; line-height:1.45; }
.compress-pdf-modes em { width:fit-content; margin-top:3px; padding:3px 6px; border-radius:999px; color:#8b5122; background:#fff0ce; font-size:.43rem; font-style:normal; font-weight:850; }
.compress-pdf-modes input:checked + span { border-color:#ef5847; background:linear-gradient(145deg,color-mix(in srgb,#ef5847 8%,var(--surface)),color-mix(in srgb,#123f9c 3%,var(--surface))); box-shadow:0 10px 24px rgba(132,52,60,.12); transform:translateY(-2px); }
.compress-pdf-advanced { padding:14px; border:1px solid var(--line); border-radius:17px; background:var(--surface); transition:opacity .16s ease; }
.compress-pdf-advanced.is-disabled { opacity:.5; }
.compress-pdf-advanced > header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:9px; }
.compress-pdf-advanced header small { color:var(--muted); font-size:.48rem; }
.compress-pdf-advanced header h3 { margin:2px 0 0; font-size:.69rem; }
.compress-pdf-advanced header button { padding:3px 0; border:0; color:#c33e33; background:transparent; font:inherit; font-size:.49rem; font-weight:800; cursor:pointer; }
.compress-pdf-advanced > div:not(.compress-pdf-options) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.compress-pdf-advanced > div > label { color:var(--muted); font-size:.5rem; font-weight:750; }
.compress-pdf-advanced label b { float:right; color:#c33e33; font-family:"Chakra Petch",sans-serif; font-size:.5rem; }
.compress-pdf-advanced input[type="range"] { width:100%; margin-top:8px; accent-color:#ef5847; }
.compress-pdf-options { margin-top:11px; display:flex; flex-wrap:wrap; gap:7px; }
.compress-pdf-options label { min-height:36px; padding:0 9px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:5px; color:var(--ink); background:var(--paper); font-size:.5rem; font-weight:750; }
.compress-pdf-options input { accent-color:#ef5847; }
.compress-pdf-options svg { width:13px; }
.compress-pdf-name { display:grid; gap:5px; color:var(--muted); font-size:.51rem; font-weight:750; }
.compress-pdf-name input { min-height:41px; padding:0 10px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--surface); font:inherit; font-size:.57rem; }
.compress-pdf-run { min-height:49px; }
.compress-pdf-progress { padding:12px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:minmax(120px,1fr) auto; align-items:center; gap:10px; background:var(--paper); }
.compress-pdf-progress > div { height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,#ef5847 10%,var(--line)); }
.compress-pdf-progress i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#ef5847,#123f9c); transition:width .18s ease; }
.compress-pdf-progress b,.compress-pdf-progress small { display:block; }
.compress-pdf-progress b { font-size:.55rem; }
.compress-pdf-progress small { margin-top:2px; color:var(--muted); font-size:.47rem; }
.compress-pdf-result { padding:14px; border:1px solid #a9ead9; border-radius:17px; background:#effffa; }
.compress-pdf-result > header { margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.compress-pdf-result header > span { min-width:0; display:flex; align-items:center; gap:8px; color:#086e5a; }
.compress-pdf-result header > span > svg { width:25px; }
.compress-pdf-result header b,.compress-pdf-result header small { display:block; }
.compress-pdf-result header b { font-size:.61rem; }
.compress-pdf-result header small { margin-top:2px; font-size:.47rem; }
.compress-pdf-result .tool-primary { width:auto; min-width:155px; min-height:40px; padding:0 10px; }
.compress-pdf-result > div { display:grid; grid-template-columns:1fr auto 1fr 1fr; align-items:center; gap:8px; }
.compress-pdf-result > div > span,.compress-pdf-result > div > strong { min-height:66px; padding:9px 10px; border:1px solid #c7eadf; border-radius:12px; display:grid; align-content:center; gap:3px; color:#164b42; background:rgba(255,255,255,.65); }
.compress-pdf-result > div > i { color:#3e9986; }
.compress-pdf-result > div > i svg { width:16px; }
.compress-pdf-result > div small { font-size:.47rem; font-weight:600; }
.compress-pdf-result > div b { font-family:"Chakra Petch",sans-serif; font-size:.73rem; }
#compressPdfSaving.larger { color:#b04b37; }
@media (max-width:760px) { .compress-pdf-modes { grid-template-columns:1fr; } .compress-pdf-modes label > span { min-height:95px; } .compress-pdf-result > div { grid-template-columns:1fr 1fr; } .compress-pdf-result > div > i { display:none; } }
@media (max-width:540px) { .compress-pdf-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .compress-pdf-intro > span { width:40px; height:40px; } .compress-pdf-intro em { width:fit-content; grid-column:2; } .compress-pdf-filebar { align-items:flex-start; flex-direction:column; } .compress-pdf-filebar > button { width:100%; justify-content:center; } .compress-pdf-advanced > div:not(.compress-pdf-options) { grid-template-columns:1fr; } .compress-pdf-result > header { align-items:stretch; flex-direction:column; } .compress-pdf-result .tool-primary { width:100%; } .compress-pdf-result > div { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .compress-pdf-drop,.compress-pdf-modes label > span,.compress-pdf-advanced,.compress-pdf-progress i { transition:none; } }

/* Fair random name wheel */
body[data-tool="random-wheel"] .tool-workspace-card { padding:clamp(16px,2.6vw,30px); background:radial-gradient(circle at 100% 0,color-mix(in srgb,#7c3aed 7%,transparent),transparent 24rem),linear-gradient(145deg,var(--surface),color-mix(in srgb,#e64672 2.5%,var(--surface))); }
.random-wheel-studio { min-width:0; display:grid; gap:13px; }
.random-wheel-intro { padding:15px 16px; border:1px solid color-mix(in srgb,#7c3aed 18%,var(--line)); border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:linear-gradient(135deg,color-mix(in srgb,#7c3aed 7%,var(--surface)),color-mix(in srgb,#e64672 4%,var(--surface))); }
.random-wheel-intro > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#7c3aed,#e64672); box-shadow:0 10px 23px rgba(104,39,165,.22); }
.random-wheel-intro > span svg { width:22px; }
.random-wheel-intro h3 { margin:0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:.93rem; }
.random-wheel-intro p { margin:3px 0 0; color:var(--muted); font-size:.65rem; line-height:1.5; }
.random-wheel-intro em { padding:6px 9px; border-radius:999px; color:#5b2a9b; background:#e9dcff; font-size:.51rem; font-style:normal; font-weight:900; }
.random-wheel-layout { min-width:0; display:grid; grid-template-columns:minmax(240px,.76fr) minmax(320px,1.24fr); gap:12px; }
.random-wheel-editor { padding:15px; border:1px solid var(--line); border-radius:19px; background:var(--surface); }
.random-wheel-editor > header,.wheel-history > header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.random-wheel-editor header small,.wheel-history header small { color:var(--muted); font-size:.49rem; }
.random-wheel-editor header h3,.wheel-history header h3 { margin:2px 0 0; font-size:.74rem; }
.random-wheel-editor header > div { display:flex; gap:5px; }
.random-wheel-editor header button,.wheel-history header button { min-height:31px; padding:0 8px; border:1px solid var(--line); border-radius:9px; display:flex; align-items:center; gap:4px; color:#6730c4; background:var(--paper); font:inherit; font-size:.48rem; font-weight:800; cursor:pointer; }
.random-wheel-editor header button svg { width:12px; }
#wheelNames { width:100%; min-height:275px; padding:12px; border:1px solid var(--line); border-radius:13px; outline:0; color:var(--ink); background:var(--paper); font:600 .63rem/1.7 "Anuphan",sans-serif; resize:vertical; }
#wheelNames:focus { border-color:#7c3aed; box-shadow:0 0 0 3px color-mix(in srgb,#7c3aed 9%,transparent); }
.random-wheel-editor > p { margin:7px 2px; color:var(--muted); font-size:.48rem; }
.random-wheel-editor > p b { color:#6730c4; }
.wheel-list-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.wheel-list-summary > span { min-height:55px; padding:7px; border:1px solid var(--line); border-radius:11px; display:grid; align-content:center; text-align:center; background:var(--paper); }
.wheel-list-summary b,.wheel-list-summary small { display:block; }
.wheel-list-summary b { font-family:"Chakra Petch",sans-serif; font-size:.75rem; }
.wheel-list-summary small { color:var(--muted); font-size:.43rem; }
.wheel-options { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.wheel-options label { min-height:38px; padding:0 8px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:5px; color:var(--ink); background:var(--paper); font-size:.49rem; font-weight:750; }
.wheel-options input { accent-color:#7c3aed; }
.wheel-options svg { width:12px; }
.wheel-stage { min-width:0; min-height:540px; padding:24px 18px 16px; border:1px solid rgba(142,99,255,.24); border-radius:23px; display:grid; place-items:center; align-content:center; gap:11px; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 50% 42%,rgba(124,58,237,.38),transparent 17rem),linear-gradient(145deg,#090d2c,#211044 65%,#40113d); box-shadow:0 18px 38px rgba(25,12,70,.18),inset 0 1px rgba(255,255,255,.08); }
.wheel-stage::after { content:""; width:300px; height:300px; position:absolute; right:-210px; bottom:-210px; border:30px solid rgba(255,255,255,.035); border-radius:50%; }
.wheel-canvas-wrap { width:min(100%,460px); aspect-ratio:1; display:grid; place-items:center; position:relative; z-index:1; }
#randomWheelCanvas { width:100%; height:100%; display:block; filter:drop-shadow(0 16px 24px rgba(2,4,22,.35)); }
.wheel-pointer { width:48px; height:54px; position:absolute; left:50%; top:9px; z-index:4; color:#ffd66d; filter:drop-shadow(0 5px 5px rgba(0,0,0,.35)); transform:translateX(-50%); }
.wheel-pointer svg { width:48px; height:54px; fill:#ffd66d; stroke:#fff0b1; }
#spinWheel { width:92px; height:92px; padding:0; border:7px solid rgba(255,255,255,.45); border-radius:50%; display:grid; place-items:center; position:absolute; z-index:3; color:#26123f; background:linear-gradient(145deg,#fff2a9,#efb947); box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 3px rgba(255,255,255,.55); cursor:pointer; }
#spinWheel span { display:grid; place-items:center; gap:2px; font-size:.55rem; font-weight:900; }
#spinWheel svg { width:18px; fill:currentColor; }
#spinWheel:disabled { opacity:.5; cursor:not-allowed; }
.wheel-stage-actions { width:min(100%,440px); display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:2; }
.wheel-stage-actions button { min-height:37px; padding:0 11px; border:1px solid rgba(255,255,255,.15); border-radius:11px; display:flex; align-items:center; gap:5px; color:#fff; background:rgba(255,255,255,.08); font:inherit; font-size:.51rem; font-weight:800; cursor:pointer; }
.wheel-stage-actions button svg { width:13px; }
.wheel-stage-actions button:disabled { opacity:.4; }
.wheel-stage-actions span { color:#aeb8d8; font-size:.48rem; }
.wheel-confetti { position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; }
.wheel-confetti i { width:8px; height:14px; position:absolute; left:50%; top:46%; opacity:0; background:var(--c); }
.wheel-confetti.burst i { animation:wheel-confetti 1.8s ease-out var(--d) forwards; }
@keyframes wheel-confetti { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:0; transform:translate(calc(var(--x) * 330px),320px) rotate(var(--r)); } }
.wheel-winner-card { padding:14px; border:1px solid #ead092; border-radius:18px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; color:#55370a; background:linear-gradient(135deg,#fff7d7,#ffe7a2); box-shadow:0 12px 28px rgba(167,112,24,.1); }
.wheel-winner-card[hidden] { display:none; }
.wheel-winner-card > span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#f1b83e,#e06a32); }
.wheel-winner-card > span svg { width:23px; }
.wheel-winner-card small { font-size:.48rem; }
.wheel-winner-card h3 { margin:2px 0; font-family:"Chakra Petch","Anuphan",sans-serif; font-size:1rem; }
.wheel-winner-card p { margin:0; font-size:.5rem; }
.wheel-winner-card button { min-height:36px; padding:0 10px; border:1px solid #dcb65b; border-radius:10px; display:flex; align-items:center; gap:5px; color:#68450d; background:rgba(255,255,255,.55); font:inherit; font-size:.5rem; font-weight:800; cursor:pointer; }
.wheel-winner-card button svg { width:13px; }
.wheel-history { padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.wheel-history header h3 { display:flex; align-items:center; gap:5px; }
.wheel-history header h3 svg { width:14px; color:#7c3aed; }
#wheelHistory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#wheelHistory > p { grid-column:1 / -1; margin:15px 0; color:var(--muted); font-size:.54rem; text-align:center; }
#wheelHistory > div { min-width:0; min-height:50px; padding:7px 8px; border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:25px minmax(0,1fr) 27px; align-items:center; gap:6px; background:var(--paper); }
#wheelHistory > div > i { width:25px; height:25px; border-radius:8px; display:grid; place-items:center; color:#6730c4; background:#eadfff; font:800 .5rem "Chakra Petch",sans-serif; }
#wheelHistory span { min-width:0; }
#wheelHistory b,#wheelHistory small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wheelHistory b { font-size:.54rem; }
#wheelHistory small { margin-top:2px; color:var(--muted); font-size:.42rem; }
#wheelHistory button { width:27px; height:27px; padding:0; border:0; display:grid; place-items:center; color:#7c3aed; background:transparent; cursor:pointer; }
#wheelHistory button svg { width:12px; }
@media (max-width:800px) { .random-wheel-layout { grid-template-columns:1fr; } .wheel-stage { min-height:500px; } }
@media (max-width:540px) { .random-wheel-intro { grid-template-columns:40px minmax(0,1fr); padding:13px; } .random-wheel-intro > span { width:40px; height:40px; } .random-wheel-intro em { width:fit-content; grid-column:2; } .random-wheel-editor > header { align-items:flex-start; flex-direction:column; } #wheelNames { min-height:220px; } .wheel-stage { min-height:420px; padding-inline:10px; } #spinWheel { width:72px; height:72px; border-width:5px; } .wheel-pointer { width:38px; height:43px; } .wheel-pointer svg { width:38px; height:43px; } .wheel-stage-actions { align-items:stretch; flex-direction:column; } .wheel-stage-actions button { justify-content:center; } .wheel-winner-card { grid-template-columns:40px minmax(0,1fr); } .wheel-winner-card button { grid-column:1 / -1; justify-content:center; } #wheelHistory { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .wheel-confetti.burst i { animation:none; } }

/* Grade and GPA calculator */
.grade-studio{display:grid;gap:20px}.grade-studio [hidden]{display:none!important}.grade-intro{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid #b9c8f1;border-radius:23px;color:#fff;background:radial-gradient(circle at 84% 0,rgba(255,194,77,.24),transparent 34%),linear-gradient(125deg,#101a55,#243ca0 58%,#176c9c);box-shadow:0 18px 38px rgba(24,40,115,.17)}.grade-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border:1px solid rgba(255,255,255,.4);border-radius:17px;color:#11225b;background:linear-gradient(145deg,#ffe48c,#f5b632);box-shadow:0 12px 25px rgba(255,188,55,.25)}.grade-intro>span svg{width:28px}.grade-intro>div{flex:1}.grade-intro small{color:#9ce7ff;font-weight:700}.grade-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch","Anuphan",sans-serif}.grade-intro p{margin:0;color:#d9e5ff}.grade-intro em{padding:8px 12px;border-radius:99px;color:#162557;background:#c9ff52;font:700 12px "Chakra Petch",sans-serif;font-style:normal}.grade-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:6px;border:1px solid #d7e0ef;border-radius:18px;background:#f1f5fb}.grade-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:13px;color:#5f6e86;background:transparent;font:750 14px "Anuphan",sans-serif;cursor:pointer}.grade-tabs button.active{color:#fff;background:linear-gradient(135deg,#3549c9,#176fe0);box-shadow:0 9px 21px rgba(40,67,184,.23)}.grade-panel{display:grid;gap:18px}.grade-form-grid,.gpa-prior{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.grade-form-grid label,.gpa-prior label,.gpa-course-row label{display:grid;gap:7px;padding:14px;border:1px solid #dbe3ef;border-radius:16px;background:linear-gradient(145deg,#fff,#f7f9fd)}.grade-form-grid label>span,.gpa-prior label>span,.gpa-course-row label>span{display:flex;justify-content:space-between;color:#2c3d5c;font-weight:750;font-size:13px}.grade-form-grid input,.grade-form-grid select,.gpa-prior input,.gpa-course-row input,.gpa-course-row select{width:100%;min-width:0;height:45px;padding:0 12px;border:1px solid #cbd6e8;border-radius:12px;color:#11234b;background:#fff;font:700 15px "Anuphan",sans-serif;outline:none}.grade-form-grid input:focus,.grade-form-grid select:focus,.gpa-prior input:focus,.gpa-course-row input:focus,.gpa-course-row select:focus{border-color:#3d5ed8;box-shadow:0 0 0 4px rgba(61,94,216,.1)}.grade-run{min-height:54px;border-radius:16px!important}.grade-error{min-height:0;margin:0;color:#c42c45;font-weight:700;text-align:center}.grade-error:empty{display:none}.grade-score-result{display:grid;grid-template-columns:180px 1fr;overflow:hidden;border:1px solid #cbd8ee;border-radius:22px;background:#fff;box-shadow:0 15px 32px rgba(24,46,96,.09)}.grade-letter{display:grid;place-items:center;align-content:center;min-height:190px;padding:20px;color:#fff;background:radial-gradient(circle at 80% 10%,rgba(255,215,85,.4),transparent 38%),linear-gradient(145deg,#1b2c7d,#425be0)}.grade-letter small,.grade-letter span{color:#ced8ff;font-weight:700}.grade-letter b{font:700 72px/1 "Chakra Petch",sans-serif;text-shadow:0 10px 28px rgba(0,0,0,.25)}.grade-score-summary{display:grid;grid-template-columns:repeat(2,1fr);align-content:center;gap:15px;padding:24px}.grade-score-summary>span{display:grid;gap:2px}.grade-score-summary small{color:#6e7b91}.grade-score-summary b{color:#132657;font-size:24px}.grade-score-summary #gradeStatus[data-status="pass"]{color:#07976d}.grade-score-summary #gradeStatus[data-status="fail"]{color:#d2384e}.grade-progress{grid-column:1/-1;overflow:hidden;height:12px;border-radius:99px;background:#e8edf6}.grade-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2ed7ac,#236ee8,#7247dd);transition:width .4s}.grade-score-summary p{grid-column:1/-1;margin:0;color:#51627e}.grade-score-summary p b{font-size:inherit;color:#3258cb}.grade-scale-card,.gpa-courses{display:grid;gap:13px;padding:18px;border:1px solid #d7e0ed;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(23,46,92,.06)}.grade-scale-card header,.gpa-courses header{display:flex;align-items:center;justify-content:space-between}.grade-scale-card h3,.gpa-courses h3{margin:1px 0;color:#142754}.grade-scale-card small,.gpa-courses small{color:#738097}#gradeScaleList{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#gradeScaleList>span{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:10px;border:1px solid hsl(var(--grade-hue) 70% 85%);border-radius:12px;background:hsl(var(--grade-hue) 80% 97%)}#gradeScaleList b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff;background:hsl(var(--grade-hue) 65% 48%)}#gradeScaleList small{font-size:10px}#gradeScaleList em{color:#4b5b73;font-size:11px;font-style:normal}.gpa-prior small{color:#8995a9}.gpa-courses header button{display:flex;align-items:center;gap:6px;min-height:39px;padding:0 12px;border:1px solid #9ab5eb;border-radius:12px;color:#2559bd;background:#f1f6ff;font:700 13px "Anuphan",sans-serif;cursor:pointer}#gradeCourseRows{display:grid;gap:9px}.gpa-course-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(100px,.6fr) minmax(115px,.7fr) 40px;align-items:end;gap:8px}.gpa-course-row label{padding:10px}.remove-grade-course{width:40px;height:45px;border:1px solid #f0c9ce;border-radius:11px;color:#c3354a;background:#fff3f5;cursor:pointer}.remove-grade-course svg{width:17px}.gpa-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.35fr);gap:12px}.gpa-result article,.gpa-result>div{display:grid;align-content:center;gap:4px;min-height:130px;padding:18px;border:1px solid #d7e0ee;border-radius:18px;background:linear-gradient(145deg,#fff,#f3f7fc)}.gpa-result article:first-child{color:#fff;border-color:#344ed2;background:linear-gradient(145deg,#273994,#4d69e7)}.gpa-result article:first-child small,.gpa-result article:first-child span{color:#d9e0ff}.gpa-result small,.gpa-result span{color:#75839a}.gpa-result article b{font:700 36px/1 "Chakra Petch",sans-serif}.gpa-result article:not(:first-child) b{color:#17305f}.gpa-result h3{margin:0;color:#17305f;font-size:17px}.gpa-result button{width:fit-content;margin-top:7px;padding:7px 10px;border:1px solid #b8c8e2;border-radius:10px;color:#2d57a4;background:#fff;font-weight:700;cursor:pointer}
@media(max-width:760px){.grade-intro em{display:none}#gradeScaleList{grid-template-columns:repeat(2,1fr)}.gpa-course-row{grid-template-columns:1fr 90px 105px 40px}.gpa-result{grid-template-columns:repeat(2,1fr)}.gpa-result>div{grid-column:1/-1}}
@media(max-width:560px){.grade-intro{align-items:flex-start;padding:17px}.grade-intro>span{flex-basis:46px;height:46px}.grade-intro p{font-size:12px}.grade-form-grid,.gpa-prior{grid-template-columns:1fr}.grade-score-result{grid-template-columns:1fr}.grade-letter{min-height:150px}.grade-score-summary{padding:18px}.gpa-course-row{grid-template-columns:minmax(0,1fr) 76px 94px}.gpa-course-row .remove-grade-course{grid-column:1/-1;width:100%;height:34px}.gpa-course-row label{padding:8px}.gpa-result{grid-template-columns:1fr}.gpa-result>div{grid-column:auto}}

/* Random number and dice */
.random-number-studio{display:grid;gap:19px}.random-number-studio [hidden]{display:none!important}.random-number-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #c3c6f3;border-radius:23px;color:#fff;background:radial-gradient(circle at 88% 0,rgba(244,66,154,.28),transparent 35%),linear-gradient(125deg,#111248,#322384 55%,#0d5f91);box-shadow:0 17px 38px rgba(28,22,105,.17)}.random-number-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border:1px solid rgba(255,255,255,.35);border-radius:17px;color:#211763;background:linear-gradient(145deg,#ddff68,#8eea38);box-shadow:0 12px 25px rgba(159,235,63,.22)}.random-number-intro>div{flex:1}.random-number-intro small{color:#b5eeff;font-weight:700}.random-number-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.random-number-intro p{margin:0;color:#e1e4ff}.random-number-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:#fff;background:rgba(255,255,255,.1);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.random-number-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px;border:1px solid #d8e0ee;border-radius:17px;background:#f1f4f9}.random-number-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:47px;border:0;border-radius:12px;color:#647189;background:transparent;font:750 13px "Anuphan",sans-serif;cursor:pointer}.random-number-tabs button.active{color:#fff;background:linear-gradient(135deg,#5531c9,#2c62e4);box-shadow:0 9px 20px rgba(67,54,194,.23)}.random-number-panel{display:grid;gap:16px}.random-number-grid,.dice-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.random-number-grid label,.dice-settings label,.coin-settings>label{display:grid;gap:7px;padding:14px;border:1px solid #d9e2ef;border-radius:15px;background:linear-gradient(145deg,#fff,#f6f9fd)}.random-number-grid span,.dice-settings span,.coin-settings span{color:#2d405f;font-weight:750}.random-number-grid input,.random-number-grid select,.dice-settings input,.coin-settings input,.random-options>input{width:100%;min-width:0;height:45px;padding:0 12px;border:1px solid #c9d5e6;border-radius:11px;color:#10234d;background:#fff;font:700 15px "Anuphan",sans-serif;outline:none}.random-number-grid input:focus,.random-number-grid select:focus,.dice-settings input:focus,.coin-settings input:focus,.random-options>input:focus{border-color:#5447d5;box-shadow:0 0 0 4px rgba(84,71,213,.1)}.random-options{display:grid;grid-template-columns:auto auto minmax(140px,1fr);align-items:center;gap:12px;padding:13px 15px;border:1px solid #d9e1ed;border-radius:15px;background:#f6f8fc}.random-options label{display:flex;align-items:center;gap:7px;color:#41526e;font-weight:700}.random-options input:disabled{opacity:.6}.random-main-action{min-height:54px;border-radius:16px!important}.dice-type-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.dice-type-grid button{display:grid;gap:2px;min-height:70px;padding:9px;border:1px solid #d3ddec;border-radius:15px;color:#4c5d79;background:#fff;cursor:pointer}.dice-type-grid b{font:700 19px "Chakra Petch",sans-serif}.dice-type-grid small{font-size:10px}.dice-type-grid button.active{color:#fff;border-color:#4d36cd;background:radial-gradient(circle at 80% 0,#7958f0,transparent 45%),linear-gradient(145deg,#38249f,#215fce);box-shadow:0 10px 24px rgba(66,48,183,.22)}.coin-settings{display:grid;grid-template-columns:minmax(180px,.7fr) 1fr;gap:13px}.coin-settings>div{display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid #d6dfec;border-radius:17px;background:linear-gradient(145deg,#f7faff,#eef3fb)}.coin-settings>div i{display:block;width:60px;height:60px;border:6px double #fff0ac;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b8,#f3b62f 60%,#b87508);box-shadow:0 10px 20px rgba(173,116,16,.2)}.random-number-error{margin:0;color:#c5334a;font-weight:700;text-align:center}.random-number-error:empty{display:none}.random-number-result,.random-number-history{display:grid;gap:14px;padding:18px;border:1px solid #d5dfed;border-radius:20px;background:#fff;box-shadow:0 13px 29px rgba(24,43,89,.07)}.random-number-result>header,.random-number-history>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.random-number-result h3,.random-number-history h3{margin:1px 0;color:#152954}.random-number-result small,.random-number-history small{color:#738097}.random-number-result>header>div{display:flex;gap:8px}.random-number-result header button,.random-number-history header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #cbd7e8;border-radius:11px;color:#31558f;background:#fff;font:700 12px "Anuphan",sans-serif;cursor:pointer}.random-number-chips{display:flex;flex-wrap:wrap;gap:9px;padding:20px;border-radius:17px;background:linear-gradient(135deg,#101b52,#173c8f)}.random-number-chips b{display:grid;place-items:center;min-width:65px;height:54px;padding:0 13px;border:1px solid rgba(255,255,255,.25);border-radius:13px;color:#fff;background:linear-gradient(145deg,rgba(123,84,242,.9),rgba(26,117,220,.9));font:700 21px "Chakra Petch",sans-serif;box-shadow:0 8px 18px rgba(0,0,0,.2)}.random-dice-results{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:20px;border-radius:17px;background:radial-gradient(circle at 85% 0,rgba(246,66,137,.27),transparent 30%),linear-gradient(135deg,#10143f,#31207f)}.random-dice-results>b{display:grid;place-items:center;width:72px;height:72px;border:3px solid #cbd5ff;border-radius:18px;color:#fff;background:linear-gradient(145deg,#6f45e7,#235bd2);font:700 26px "Chakra Petch",sans-serif;transform:rotate(var(--dice-rotate,2deg));box-shadow:0 10px 20px rgba(0,0,0,.25)}.random-dice-results>b small{font-size:9px;color:#dbe2ff}.random-dice-results strong{display:grid;place-items:center;min-width:115px;height:78px;margin-left:auto;border:1px solid #ffe5a4;border-radius:18px;color:#172253;background:linear-gradient(145deg,#fff1aa,#f9b72d);font:700 28px "Chakra Petch",sans-serif}.random-dice-results strong small{font-size:10px;color:#6b4a0f}.random-coin-results{display:grid;grid-template-columns:1fr 85px 1fr;align-items:center;gap:12px;padding:22px;border-radius:18px;background:linear-gradient(135deg,#101e50,#273e8c)}.random-coin-results b{display:grid;place-items:center;color:#fff;font:700 42px "Chakra Petch",sans-serif}.random-coin-results b span{font:700 14px "Anuphan",sans-serif;color:#bdeaff}.random-coin-results i{width:80px;height:80px;border:8px double #fff0a1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff8c0,#f7ba34 58%,#ac6b06);box-shadow:0 12px 26px rgba(0,0,0,.25)}#randomResultSummary{margin:0;color:#5f6d84;text-align:center}#randomNumberHistory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#randomNumberHistory>p{grid-column:1/-1;color:#7a879b;text-align:center}#randomNumberHistory>div{display:grid;grid-template-columns:28px minmax(0,1fr) 31px;align-items:center;gap:8px;padding:9px;border:1px solid #e0e6ef;border-radius:12px;background:#f8faff}#randomNumberHistory>div>i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff;background:#6440d4;font-style:normal}#randomNumberHistory span{min-width:0}#randomNumberHistory b,#randomNumberHistory small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#randomNumberHistory b{font-size:12px}#randomNumberHistory small{font-size:10px}#randomNumberHistory button{display:grid;place-items:center;width:31px;height:31px;border:0;color:#5b42c5;background:transparent;cursor:pointer}#randomNumberHistory button svg{width:15px}
@media(max-width:720px){.random-number-intro em{display:none}.dice-type-grid{grid-template-columns:repeat(4,1fr)}.random-options{grid-template-columns:1fr 1fr}.random-options>input{grid-column:1/-1}#randomNumberHistory{grid-template-columns:1fr}}
@media(max-width:520px){.random-number-intro{align-items:flex-start;padding:17px}.random-number-intro>span{flex-basis:46px;height:46px}.random-number-intro p{font-size:12px}.random-number-tabs{grid-template-columns:1fr}.random-number-grid,.dice-settings,.coin-settings{grid-template-columns:1fr}.random-options{grid-template-columns:1fr}.random-options>input{grid-column:auto}.random-number-result>header{align-items:flex-start;flex-direction:column}.random-number-result>header>div{width:100%}.random-number-result header button{flex:1;justify-content:center}.random-number-chips{padding:14px}.random-number-chips b{min-width:55px}.random-dice-results strong{width:100%;margin-left:0}.random-coin-results{grid-template-columns:1fr 70px 1fr;padding:14px}.random-coin-results i{width:66px;height:66px}.random-coin-results b{font-size:34px}}

/* Time calculator */
.time-calc-studio{display:grid;gap:19px}.time-calc-studio [hidden]{display:none!important}.time-calc-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #bacded;border-radius:23px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(255,107,71,.28),transparent 35%),linear-gradient(125deg,#081a4a,#164a9a 56%,#176f8f);box-shadow:0 17px 37px rgba(13,53,119,.17)}.time-calc-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border:1px solid rgba(255,255,255,.4);border-radius:17px;color:#0c3477;background:linear-gradient(145deg,#7cf2ff,#38c8e9);box-shadow:0 12px 24px rgba(44,205,234,.23)}.time-calc-intro>div{flex:1}.time-calc-intro small{color:#b2efff;font-weight:700}.time-calc-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.time-calc-intro p{margin:0;color:#e0ecff}.time-calc-intro em{padding:8px 12px;border-radius:99px;color:#12346f;background:#d5ff54;font:700 11px "Chakra Petch",sans-serif;font-style:normal}.time-calc-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px;border:1px solid #d8e0ed;border-radius:17px;background:#f1f5fa}.time-calc-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:47px;border:0;border-radius:12px;color:#627188;background:transparent;font:750 13px "Anuphan",sans-serif;cursor:pointer}.time-calc-tabs button.active{color:#fff;background:linear-gradient(135deg,#1457c5,#168dd4);box-shadow:0 9px 20px rgba(19,100,190,.23)}.time-calc-panel{display:grid;gap:16px}.time-between-grid,.time-duration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.time-between-grid label,.time-base-field,.time-duration-grid label{display:grid;gap:7px;padding:14px;border:1px solid #d9e2ee;border-radius:15px;background:linear-gradient(145deg,#fff,#f5f9fd)}.time-between-grid span,.time-base-field span,.time-duration-grid span{color:#2f425f;font-weight:750}.time-between-grid input,.time-base-field input,.time-duration-grid input,.time-business-options input,.time-duration-row input,.time-duration-row select{width:100%;min-width:0;height:45px;padding:0 11px;border:1px solid #c8d5e7;border-radius:11px;color:#102651;background:#fff;font:700 14px "Anuphan",sans-serif;outline:none}.time-business-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #d9e2ed;border-radius:15px;background:#f6f9fd}.time-business-options>label{display:flex;align-items:center;gap:7px;color:#405471;font-weight:700}.time-business-options>label input{width:auto;height:auto}.time-business-options>span{display:flex;align-items:center;gap:8px}.time-business-options>span input{width:110px}.time-business-options b{color:#7c899c}.time-calc-action{min-height:54px;border-radius:16px!important}.time-calc-result{display:grid;gap:15px;padding:19px;border:1px solid #cfdced;border-radius:20px;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:0 13px 30px rgba(20,49,101,.08)}.time-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.time-result-heading h3{margin:2px 0;color:#122a59}.time-result-heading small{color:#738199}.time-result-heading button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #c3d2e7;border-radius:11px;color:#315c9e;background:#fff;font:700 12px "Anuphan",sans-serif;cursor:pointer}.time-result-hero{display:block;padding:22px;border-radius:17px;color:#fff;background:radial-gradient(circle at 90% 0,rgba(81,234,223,.28),transparent 35%),linear-gradient(135deg,#10245f,#116fc0);font:700 clamp(24px,4vw,39px)/1.25 "Chakra Petch","Anuphan",sans-serif;text-align:center;box-shadow:0 13px 27px rgba(17,62,135,.18)}.time-result-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.time-result-metrics span{display:grid;gap:3px;padding:13px;border:1px solid #dce4ef;border-radius:13px;background:#fff}.time-result-metrics small{color:#758299}.time-result-metrics b{overflow-wrap:anywhere;color:#173464;font-size:15px}.time-shift-operation{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.time-shift-operation button{min-height:46px;border:1px solid #d2ddea;border-radius:13px;color:#52647f;background:#fff;font:750 13px "Anuphan",sans-serif;cursor:pointer}.time-shift-operation button.active{color:#fff;border-color:#196fd2;background:linear-gradient(135deg,#1762c8,#15a0cf)}.time-duration-grid{grid-template-columns:repeat(4,1fr)}.time-sum-editor{display:grid;gap:13px;padding:17px;border:1px solid #d8e1ed;border-radius:19px;background:#fff}.time-sum-editor>header{display:flex;align-items:center;justify-content:space-between}.time-sum-editor h3{margin:1px 0;color:#142a57}.time-sum-editor small{color:#748197}.time-sum-editor header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #9dbce7;border-radius:11px;color:#2464ba;background:#f0f7ff;font:700 12px "Anuphan",sans-serif;cursor:pointer}#timeDurationRows{display:grid;gap:9px}.time-duration-row{display:grid;grid-template-columns:60px repeat(4,minmax(0,1fr)) 40px;align-items:end;gap:8px;padding:10px;border:1px solid #e0e7f0;border-radius:13px;background:#f7faff}.time-duration-row label{display:grid;gap:5px}.time-duration-row span{color:#738096;font-size:10px;font-weight:700}.time-duration-row>button{width:40px;height:45px;border:1px solid #efcbd2;border-radius:11px;color:#c23c50;background:#fff3f5;cursor:pointer}.time-calc-error{margin:0;color:#c5334a;font-weight:700;text-align:center}.time-calc-error:empty{display:none}
@media(max-width:760px){.time-calc-intro em{display:none}.time-result-metrics{grid-template-columns:repeat(2,1fr)}.time-duration-row{grid-template-columns:52px repeat(2,1fr)}.time-duration-row>button{grid-column:1/-1;width:100%;height:34px}}
@media(max-width:540px){.time-calc-intro{align-items:flex-start;padding:17px}.time-calc-intro>span{flex-basis:46px;height:46px}.time-calc-intro p{font-size:12px}.time-calc-tabs{grid-template-columns:1fr}.time-between-grid,.time-duration-grid{grid-template-columns:1fr}.time-business-options{align-items:flex-start;flex-direction:column}.time-business-options>span{width:100%}.time-business-options>span input{flex:1;width:auto}.time-result-heading{align-items:flex-start;flex-direction:column}.time-result-heading button{width:100%;justify-content:center}.time-result-metrics{grid-template-columns:1fr 1fr}.time-duration-row{grid-template-columns:48px 1fr 1fr}.time-sum-editor>header{align-items:flex-start;flex-direction:column;gap:8px}.time-sum-editor header button{width:100%;justify-content:center}}

/* Local OCR */
.ocr-studio{display:grid;gap:19px}.ocr-studio [hidden]{display:none!important}.ocr-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #b8cdf1;border-radius:23px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(211,62,245,.24),transparent 35%),linear-gradient(125deg,#071640,#0b3d8a 54%,#176e92);box-shadow:0 17px 38px rgba(10,45,108,.18)}.ocr-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border:1px solid rgba(255,255,255,.4);border-radius:17px;color:#10336d;background:linear-gradient(145deg,#83f2ff,#34c8ef);box-shadow:0 12px 25px rgba(52,202,238,.23)}.ocr-intro>div{flex:1}.ocr-intro small{color:#aeefff;font-weight:700}.ocr-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.ocr-intro p{margin:0;color:#e0eaff}.ocr-intro em{padding:8px 12px;border-radius:99px;color:#12336d;background:#d1ff58;font:700 11px "Chakra Petch",sans-serif;font-style:normal}.ocr-drop{border:2px dashed #a8bde2;border-radius:20px;background:linear-gradient(145deg,#f8fbff,#eef5ff)}.ocr-drop.dragging{border-color:#1769d8;background:#eaf3ff}.ocr-drop>label{display:flex;align-items:center;gap:14px;min-height:112px;padding:20px;cursor:pointer}.ocr-drop>label>svg{width:36px;height:36px;color:#176ada}.ocr-drop>label>span{display:grid;gap:3px;flex:1}.ocr-drop b{color:#172d58;font-size:17px}.ocr-drop small{color:#74829a}.ocr-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:#1767d8}.ocr-drop>p{margin:0 18px 12px;color:#c3354c;font-weight:700}.ocr-workspace{display:grid;gap:17px}.ocr-filebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #d6e1ee;border-radius:15px;background:#fff}.ocr-filebar>span{display:flex;align-items:center;gap:10px;min-width:0}.ocr-filebar>span>span{min-width:0}.ocr-filebar b,.ocr-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ocr-filebar small{color:#76839a}.ocr-filebar button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #c6d5e8;border-radius:11px;color:#315d9d;background:#fff;font-weight:700;cursor:pointer}.ocr-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:15px}.ocr-preview{display:grid;overflow:hidden;border:1px solid #cbd8e9;border-radius:19px;background:#17213f}.ocr-preview>div{position:relative;display:grid;place-items:center;min-height:430px;padding:17px;background:radial-gradient(circle at center,#263a65,#0c142b)}.ocr-preview canvas{display:block;max-width:100%;max-height:620px;border-radius:5px;background:#fff;box-shadow:0 14px 35px rgba(0,0,0,.35)}.ocr-scan-line{display:none;position:absolute;left:8%;right:8%;top:15%;height:3px;border-radius:99px;background:#54f4ff;box-shadow:0 0 16px #54f4ff}.ocr-scan-line.active{display:block;animation:ocr-scan 2s ease-in-out infinite}@keyframes ocr-scan{0%,100%{top:12%;opacity:.4}50%{top:86%;opacity:1}}.ocr-preview footer{display:flex;align-items:center;justify-content:center;gap:15px;padding:11px;color:#dce8ff;background:#0f1a36}.ocr-preview footer button{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;background:rgba(255,255,255,.08);cursor:pointer}.ocr-preview footer button:disabled{opacity:.35}.ocr-controls{display:grid;align-content:start;gap:12px;padding:16px;border:1px solid #d7e1ed;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(22,45,91,.07)}.ocr-controls>label:not(.ocr-all-pages){display:grid;gap:7px}.ocr-controls label>span{color:#314360;font-weight:750}.ocr-controls select{width:100%;height:44px;padding:0 11px;border:1px solid #c9d6e7;border-radius:11px;color:#142951;background:#fff;font:700 13px "Anuphan",sans-serif}.ocr-controls fieldset{display:grid;gap:9px;margin:0;padding:13px;border:1px solid #dce4ef;border-radius:13px;background:#f7f9fc}.ocr-controls legend{padding:0 5px;color:#344760;font-weight:750}.ocr-controls fieldset label,.ocr-all-pages{display:flex;align-items:center;gap:7px;color:#53637b;font-weight:650}.ocr-threshold-level input{accent-color:#176cda}.ocr-threshold-level b{color:#176cda}.ocr-controls .tool-primary{min-height:51px;border-radius:14px}.ocr-progress{display:grid;gap:8px;padding:15px;border:1px solid #cbdbee;border-radius:15px;background:#f2f7ff}.ocr-progress>div{overflow:hidden;height:10px;border-radius:99px;background:#dce5f2}.ocr-progress>div i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1bcdd3,#1769df,#7547e4);transition:width .25s}.ocr-progress>span{display:flex;justify-content:space-between;color:#4d5f7a}.ocr-result{display:grid;gap:14px;padding:18px;border:1px solid #d5dfec;border-radius:20px;background:#fff;box-shadow:0 14px 31px rgba(21,44,89,.08)}.ocr-result>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.ocr-result h3{margin:1px 0;color:#142a57}.ocr-result small{color:#738197}.ocr-result>header>div{display:flex;gap:8px}.ocr-result header button,.ocr-text-tools button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #c6d5e8;border-radius:11px;color:#315c9b;background:#fff;font:700 12px "Anuphan",sans-serif;cursor:pointer}.ocr-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ocr-metrics span{display:grid;gap:2px;padding:12px;border:1px solid #dce4ef;border-radius:12px;background:#f7faff}.ocr-metrics b{color:#173665;font-size:19px}.ocr-result textarea{width:100%;min-height:330px;padding:16px;border:1px solid #cbd8e8;border-radius:14px;color:#172b4f;background:#fbfdff;font:500 15px/1.75 "Anuphan",sans-serif;resize:vertical;outline:none}.ocr-result textarea:focus{border-color:#1768d8;box-shadow:0 0 0 4px rgba(23,104,216,.1)}.ocr-text-tools{display:flex;gap:8px}
@media(max-width:820px){.ocr-intro em{display:none}.ocr-layout{grid-template-columns:1fr}.ocr-preview>div{min-height:350px}.ocr-controls{grid-template-columns:repeat(2,1fr)}.ocr-controls fieldset,.ocr-controls .ocr-all-pages,.ocr-controls .tool-primary{grid-column:1/-1}}
@media(max-width:540px){.ocr-intro{align-items:flex-start;padding:17px}.ocr-intro>span{flex-basis:46px;height:46px}.ocr-intro p{font-size:12px}.ocr-drop>label{align-items:flex-start;flex-wrap:wrap}.ocr-drop strong{width:100%;text-align:center}.ocr-filebar{align-items:flex-start;flex-direction:column}.ocr-filebar button{width:100%;justify-content:center}.ocr-preview>div{min-height:260px;padding:10px}.ocr-controls{grid-template-columns:1fr}.ocr-controls fieldset,.ocr-controls .ocr-all-pages,.ocr-controls .tool-primary{grid-column:auto}.ocr-result>header{align-items:flex-start;flex-direction:column}.ocr-result>header>div{width:100%}.ocr-result header button{flex:1;justify-content:center}.ocr-metrics{grid-template-columns:repeat(2,1fr)}.ocr-text-tools{flex-direction:column}.ocr-text-tools button{justify-content:center}}

/* Placeholder text generator */
.lorem-studio{display:grid;gap:18px}.lorem-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #c8c7ed;border-radius:23px;color:#fff;background:radial-gradient(circle at 88% 0,rgba(255,92,128,.26),transparent 35%),linear-gradient(125deg,#171348,#34237c 54%,#17669a);box-shadow:0 17px 37px rgba(34,28,105,.17)}.lorem-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:17px;color:#24175f;background:linear-gradient(145deg,#e2ff72,#92e638)}.lorem-intro>div{flex:1}.lorem-intro small{color:#b5edff;font-weight:700}.lorem-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.lorem-intro p{margin:0;color:#e5e3ff}.lorem-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;font:700 11px "Chakra Petch",sans-serif;font-style:normal}.lorem-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lorem-control-grid label{display:grid;gap:7px;padding:14px;border:1px solid #d9e2ee;border-radius:15px;background:linear-gradient(145deg,#fff,#f7f9fd)}.lorem-control-grid span{color:#314360;font-weight:750}.lorem-control-grid input,.lorem-control-grid select{width:100%;height:45px;padding:0 11px;border:1px solid #c8d4e5;border-radius:11px;color:#142950;background:#fff;font:700 14px "Anuphan",sans-serif}.lorem-options{display:flex;flex-wrap:wrap;gap:14px;padding:13px 15px;border:1px solid #d9e1ec;border-radius:14px;background:#f6f8fc}.lorem-options label{display:flex;align-items:center;gap:7px;color:#4c5e78;font-weight:700}.lorem-generate{min-height:54px;border-radius:16px!important}.lorem-error{margin:0;color:#c5334a;text-align:center;font-weight:700}.lorem-error:empty{display:none}.lorem-result{display:grid;gap:14px;padding:18px;border:1px solid #d6dfeb;border-radius:20px;background:#fff;box-shadow:0 13px 29px rgba(27,43,85,.07)}.lorem-result>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.lorem-result h3{margin:1px 0;color:#162a56}.lorem-result small{color:#758199}.lorem-result>header>div{display:flex;gap:8px}.lorem-result header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #c7d4e7;border-radius:11px;color:#355b98;background:#fff;font:700 12px "Anuphan",sans-serif;cursor:pointer}.lorem-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lorem-metrics span{display:grid;gap:2px;padding:11px;border:1px solid #dde4ef;border-radius:12px;background:#f8faff}.lorem-metrics b{color:#263f75;font-size:18px}.lorem-result textarea{width:100%;min-height:340px;padding:17px;border:1px solid #cbd7e8;border-radius:14px;color:#1d2f51;background:#fbfdff;font:500 15px/1.8 "Anuphan",sans-serif;resize:vertical;outline:none}.lorem-result textarea:focus{border-color:#6249d8;box-shadow:0 0 0 4px rgba(98,73,216,.1)}
@media(max-width:540px){.lorem-intro{align-items:flex-start;padding:17px}.lorem-intro>span{flex-basis:46px;height:46px}.lorem-intro em{display:none}.lorem-intro p{font-size:12px}.lorem-control-grid{grid-template-columns:1fr}.lorem-result>header{align-items:flex-start;flex-direction:column}.lorem-result>header>div{width:100%}.lorem-result header button{flex:1;justify-content:center}.lorem-metrics{grid-template-columns:repeat(2,1fr)}}

/* PDF to image */
.pdf-jpg-studio{display:grid;gap:18px}.pdf-jpg-studio [hidden]{display:none!important}.pdf-jpg-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #c8c9ed;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,73,118,.28),transparent 34%),linear-gradient(125deg,#171344,#273184 55%,#176a91)}.pdf-jpg-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:17px;color:#8f1d3b;background:linear-gradient(145deg,#ffc1b2,#ff6555)}.pdf-jpg-intro>div{flex:1}.pdf-jpg-intro small{color:#b8ecff;font-weight:700}.pdf-jpg-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.pdf-jpg-intro p{margin:0;color:#e3e7ff}.pdf-jpg-intro em{padding:8px 12px;border-radius:99px;color:#17315f;background:#d6ff5a;font:700 11px "Chakra Petch",sans-serif;font-style:normal}.pdf-jpg-drop{border:2px dashed #a8bde2;border-radius:20px;background:#f3f7ff}.pdf-jpg-drop.dragging{border-color:#1768d6;background:#e9f2ff}.pdf-jpg-drop label{display:flex;align-items:center;gap:13px;min-height:105px;padding:19px;cursor:pointer}.pdf-jpg-drop label>svg{width:34px;height:34px;color:#e9534d}.pdf-jpg-drop label>span{display:grid;flex:1}.pdf-jpg-drop b{color:#192d56}.pdf-jpg-drop small{color:#758198}.pdf-jpg-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:#e8534b}.pdf-jpg-drop p{margin:0 17px 11px;color:#c3364c;font-weight:700}.pdf-jpg-workspace{display:grid;gap:15px}.pdf-jpg-workspace>header,.pdf-jpg-result>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #d7e0ec;border-radius:15px;background:#fff}.pdf-jpg-workspace>header>span{display:flex;align-items:center;gap:9px;min-width:0}.pdf-jpg-workspace>header b,.pdf-jpg-workspace>header small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdf-jpg-workspace>header small{color:#738198}.pdf-jpg-workspace button,.pdf-jpg-result a{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #c6d4e6;border-radius:11px;color:#315b98;background:#fff;font-weight:700;cursor:pointer}.pdf-jpg-thumbnails{display:flex;gap:9px;overflow:auto;padding:12px;border:1px solid #d9e2ee;border-radius:17px;background:#eef3f9}.pdf-jpg-thumbnails>span{display:grid;flex:0 0 120px;gap:5px;padding:7px;border-radius:11px;background:#fff;box-shadow:0 7px 15px rgba(24,46,90,.1)}.pdf-jpg-thumbnails canvas{width:100%;height:140px;object-fit:contain;background:#fff}.pdf-jpg-thumbnails b{text-align:center;font-size:11px}.pdf-jpg-thumbnails em{display:grid;place-items:center;align-content:center;flex:0 0 90px;color:#315b9a;font:700 20px "Chakra Petch",sans-serif}.pdf-jpg-thumbnails em small{font:600 10px "Anuphan",sans-serif}.pdf-jpg-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.pdf-jpg-controls label{display:grid;gap:7px;padding:13px;border:1px solid #d9e2ee;border-radius:14px;background:#fff}.pdf-jpg-controls span{display:flex;justify-content:space-between;color:#31445f;font-weight:750}.pdf-jpg-controls input,.pdf-jpg-controls select{width:100%;height:44px;padding:0 11px;border:1px solid #c7d4e6;border-radius:11px;color:#14294f;background:#fff;font:700 13px "Anuphan",sans-serif}.pdf-jpg-run{min-height:54px;border-radius:16px!important}.pdf-jpg-progress{display:grid;gap:7px;padding:14px;border:1px solid #d2deed;border-radius:14px;background:#f3f7fd}.pdf-jpg-progress>div{overflow:hidden;height:9px;border-radius:99px;background:#dce5f1}.pdf-jpg-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#e84e51,#7548db,#189ed5)}.pdf-jpg-progress span{color:#53647d}.pdf-jpg-result{display:grid;gap:12px}.pdf-jpg-result h3{margin:1px 0;color:#142a56}.pdf-jpg-result header small{color:#748198}.pdf-jpg-result header a{color:#fff;border-color:#1765d2;background:#1765d2}#pdfJpgOutputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#pdfJpgOutputs article{display:grid;grid-template-columns:72px minmax(0,1fr) 38px;align-items:center;gap:9px;padding:9px;border:1px solid #dde4ee;border-radius:13px;background:#fff}#pdfJpgOutputs img{width:72px;height:72px;object-fit:contain;border-radius:8px;background:#eef2f7}#pdfJpgOutputs span{min-width:0}#pdfJpgOutputs b,#pdfJpgOutputs small{display:block}#pdfJpgOutputs small{overflow:hidden;color:#758198;font-size:10px;text-overflow:ellipsis;white-space:nowrap}#pdfJpgOutputs a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#1764cd;background:#edf4ff}#pdfJpgOutputs a svg{width:17px}
@media(max-width:560px){.pdf-jpg-intro{align-items:flex-start;padding:17px}.pdf-jpg-intro>span{flex-basis:46px;height:46px}.pdf-jpg-intro em{display:none}.pdf-jpg-intro p{font-size:12px}.pdf-jpg-drop label{align-items:flex-start;flex-wrap:wrap}.pdf-jpg-drop strong{width:100%;text-align:center}.pdf-jpg-workspace>header,.pdf-jpg-result>header{align-items:flex-start;flex-direction:column}.pdf-jpg-workspace>header button,.pdf-jpg-result>header a{width:100%;justify-content:center}.pdf-jpg-controls{grid-template-columns:1fr}#pdfJpgOutputs{grid-template-columns:1fr}}

/* Base converter */
.base-studio{display:grid;gap:18px}.base-intro{display:flex;align-items:center;gap:15px;padding:21px 23px;border:1px solid #c6c9ef;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(225,62,241,.24),transparent 35%),linear-gradient(125deg,#121344,#273082 55%,#115e91)}.base-intro>span{display:grid;place-items:center;flex:0 0 56px;height:56px;border-radius:17px;color:#18245e;background:linear-gradient(145deg,#d9ff65,#87e640)}.base-intro>div{flex:1}.base-intro small{color:#b5edff;font-weight:700}.base-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.base-intro p{margin:0;color:#e2e6ff}.base-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;font:700 11px "Chakra Petch",sans-serif;font-style:normal}.base-input-card,.base-history{display:grid;gap:13px;padding:18px;border:1px solid #d7e0ed;border-radius:20px;background:#fff;box-shadow:0 13px 29px rgba(24,43,86,.07)}.base-input-card>header,.base-history>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.base-input-card h3,.base-history h3{margin:1px 0;color:#152a57}.base-input-card small,.base-history small{color:#758198}.base-quick{display:flex;gap:6px}.base-quick button{width:38px;height:38px;border:1px solid #cbd7e8;border-radius:10px;color:#405677;background:#fff;font-weight:800;cursor:pointer}.base-quick button.active{color:#fff;border-color:#3155d1;background:#3155d1}.base-input-card textarea{width:100%;min-height:112px;padding:16px;border:1px solid #c6d4e7;border-radius:14px;color:#163060;background:#f9fbff;font:700 23px/1.5 "Chakra Petch",monospace;resize:vertical;outline:none}.base-input-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.base-input-settings label{display:grid;gap:6px}.base-input-settings span{color:#40526e;font-weight:750}.base-input-settings select,.base-options select{height:43px;padding:0 10px;border:1px solid #c9d6e7;border-radius:11px;color:#17305a;background:#fff;font-weight:700}.base-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 14px;border:1px solid #dde4ee;border-radius:13px;background:#f7f9fc}.base-options label{display:flex;align-items:center;gap:6px;color:#4c5d77;font-weight:700}.base-run{min-height:53px;border-radius:15px!important}#baseError{margin:0;color:#c3344a;text-align:center;font-weight:700}#baseError:empty{display:none}.base-results{display:grid;gap:9px}.base-results article{display:grid;grid-template-columns:100px minmax(0,1fr) 42px;align-items:center;gap:10px;padding:13px;border:1px solid #d8e1ed;border-radius:15px;background:linear-gradient(145deg,#fff,#f5f8fd)}.base-results article>span{display:grid}.base-results small{color:#78849a}.base-results b{color:#3151bd;font:700 16px "Chakra Petch",sans-serif}.base-results code{overflow:auto;color:#132c59;font:700 17px/1.5 "Chakra Petch",monospace;white-space:nowrap}.base-results button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #c6d4e7;border-radius:11px;color:#3158ba;background:#fff;cursor:pointer}.base-insight{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.base-insight span{display:grid;gap:3px;padding:13px;border:1px solid #dce4ee;border-radius:13px;background:#f7faff}.base-insight small{color:#738198}.base-insight b{color:#173463;font-size:18px}.base-history header button{padding:7px 10px;border:1px solid #ced9e8;border-radius:10px;color:#53647e;background:#fff;font-weight:700;cursor:pointer}#baseHistory{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}#baseHistory>p{grid-column:1/-1;color:#7a879b;text-align:center}#baseHistory button{display:grid;gap:2px;padding:10px;border:1px solid #dde4ed;border-radius:11px;color:#17305a;background:#f8faff;text-align:left;cursor:pointer}#baseHistory small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.base-intro{align-items:flex-start;padding:17px}.base-intro>span{flex-basis:46px;height:46px}.base-intro em{display:none}.base-intro p{font-size:12px}.base-input-card>header{align-items:flex-start;flex-direction:column}.base-input-settings{grid-template-columns:1fr}.base-options{align-items:flex-start;flex-direction:column}.base-results article{grid-template-columns:70px minmax(0,1fr) 38px}.base-results code{font-size:14px}.base-insight{grid-template-columns:repeat(2,1fr)}#baseHistory{grid-template-columns:1fr}}

/* Typing speed test */
.typing-studio{min-width:0;display:grid;gap:18px}.typing-studio [hidden]{display:none!important}.typing-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #bfc5ef;border-radius:23px;color:#fff;background:radial-gradient(circle at 88% 0,rgba(55,228,255,.25),transparent 35%),linear-gradient(125deg,#101440,#33217f 55%,#125f91);box-shadow:0 17px 38px rgba(28,25,99,.18)}.typing-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#18245e;background:linear-gradient(145deg,#dfff70,#6fe0d1);box-shadow:0 12px 25px rgba(101,226,203,.22)}.typing-intro>div{min-width:0}.typing-intro small{color:#aeeeff;font-weight:700}.typing-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.typing-intro p{margin:0;color:#e4e5ff}.typing-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#baf3ff;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.typing-settings{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid #d8e0ed;border-radius:16px;background:#f2f5fa}.typing-settings>div{display:flex;gap:4px}.typing-settings button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:37px;padding:0 12px;border:1px solid #d0daea;border-radius:10px;color:#5d6b83;background:#fff;font:750 12px "Anuphan",sans-serif;cursor:pointer}.typing-settings button.active{color:#fff;border-color:#5140c8;background:linear-gradient(135deg,#5d42db,#176bd3);box-shadow:0 8px 17px rgba(67,59,185,.2)}.typing-settings>button{color:#4130af;background:#eeebff}.typing-live-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.typing-live-metrics>span{display:grid;place-items:center;align-content:center;gap:3px;min-height:86px;padding:12px;border:1px solid #d9e2ed;border-radius:16px;background:#fff;box-shadow:0 9px 21px rgba(27,39,82,.06)}.typing-live-metrics>span:first-child{border-color:#b9ddea;background:linear-gradient(145deg,#e7faff,#fff)}.typing-live-metrics b{color:#282271;font:700 26px/1 "Chakra Petch",sans-serif}.typing-live-metrics small{color:#748097}.typing-copy{height:240px;padding:22px;border:1px solid #d1d8e8;border-radius:20px;overflow:auto;color:#8b90a4;background:linear-gradient(145deg,#f7f8fc,#fff);box-shadow:inset 0 1px #fff,0 13px 29px rgba(25,34,78,.07);font:650 clamp(15px,2vw,19px)/2 "Anuphan",sans-serif;letter-spacing:.01em}.typing-copy span{border-radius:3px}.typing-copy .correct{color:#087b67;background:#d9fff3}.typing-copy .wrong{color:#b41d44;background:#ffe0e7;text-decoration:underline wavy #e43b63}.typing-copy .current{color:#111c53;background:#dbe8ff;box-shadow:inset 2px 0 #176bd3}#typingInput{width:100%;min-height:140px;padding:17px;border:1.5px solid #c9d3e5;border-radius:17px;color:#172b50;background:#fff;font:600 15px/1.8 "Anuphan",sans-serif;resize:vertical;outline:none}#typingInput:focus{border-color:#5d42db;box-shadow:0 0 0 4px rgba(93,66,219,.1)}#typingInput:disabled{cursor:not-allowed;color:#969daf;background:#f3f5f9}.typing-actions{display:flex;gap:9px}.typing-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border:1px solid #ccd7e7;border-radius:13px;color:#283b5e;background:#fff;font:800 13px "Anuphan",sans-serif;cursor:pointer}.typing-actions .tool-primary{color:#fff;border:0;background:linear-gradient(135deg,#5d42db,#1179d1);box-shadow:0 11px 24px rgba(61,56,179,.2)}.typing-actions button:disabled{opacity:.5;cursor:not-allowed}.typing-result{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:13px;padding:17px;border:1px solid #6962ba;border-radius:20px;color:#fff;background:radial-gradient(circle at 87% 10%,rgba(105,235,255,.23),transparent 30%),linear-gradient(135deg,#171746,#5131a7);box-shadow:0 15px 31px rgba(34,29,92,.17)}.typing-result>span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#3b2f92;background:linear-gradient(145deg,#fff0a2,#fff)}.typing-result small{color:#c5c9ff}.typing-result h3{margin:2px 0;font:700 16px "Chakra Petch",sans-serif}.typing-result h3 b{color:#7cefff;font-size:31px}.typing-result p{margin:0;color:#d9dcfa}.typing-result>strong{display:grid;text-align:right}.typing-result>strong b{margin-top:3px;color:#f8ee83;font:700 17px "Chakra Petch",sans-serif}.typing-history{display:grid;gap:10px;padding:16px;border:1px solid #d8e1ed;border-radius:18px;background:#fff}.typing-history>header{display:flex;align-items:center;justify-content:space-between}.typing-history h3{margin:2px 0;color:#152a57}.typing-history header small{color:#758198}.typing-history header button{border:0;color:#a7445e;background:transparent;font-weight:750;cursor:pointer}.typing-history>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.typing-history>div>span{display:grid;gap:3px;padding:10px;border:1px solid #dde4ee;border-radius:11px;background:#f8faff}.typing-history>div b{color:#4036a1;font:700 13px "Chakra Petch",sans-serif}.typing-history>div small{overflow:hidden;color:#758198;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.typing-settings{align-items:stretch;flex-direction:column}.typing-settings>div,.typing-settings>button{width:100%}.typing-settings>div button{flex:1}.typing-history>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.typing-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.typing-intro>span{width:46px;height:46px}.typing-intro em{display:none}.typing-intro p{font-size:12px}.typing-live-metrics{grid-template-columns:repeat(2,1fr)}.typing-copy{height:260px;padding:16px;line-height:1.9}.typing-actions{display:grid;grid-template-columns:1fr 1fr}.typing-result{grid-template-columns:44px minmax(0,1fr)}.typing-result>span{width:44px;height:44px}.typing-result>strong{grid-column:2;text-align:left}}

/* Private browser notepad */
.notepad-studio{min-width:0;display:grid;gap:18px}.notepad-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #c2c3ed;border-radius:23px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(0,220,235,.24),transparent 35%),linear-gradient(125deg,#111440,#39217f 57%,#0e607f);box-shadow:0 17px 38px rgba(30,25,100,.18)}.notepad-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#45265f;background:linear-gradient(145deg,#fff3c2,#ff7b69);box-shadow:0 12px 26px rgba(255,112,101,.22)}.notepad-intro>div{min-width:0}.notepad-intro small{color:#aef1ff;font-weight:700}.notepad-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.notepad-intro p{margin:0;color:#e7e5ff}.notepad-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#d9ff74;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.notepad-shell{min-width:0;min-height:610px;border:1px solid #d2dbea;border-radius:22px;display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;background:#fff;box-shadow:0 15px 34px rgba(25,38,80,.09)}.notepad-sidebar{min-width:0;border-right:1px solid #dbe2ed;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(160deg,#f4f6fb,#edf2f9)}.notepad-sidebar>header{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;padding:12px;border-bottom:1px solid #dbe2ed}.notepad-sidebar>header label{min-width:0;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #cbd6e6;border-radius:11px;background:#fff}.notepad-sidebar>header svg{width:14px;color:#63718a}.notepad-sidebar>header input{min-width:0;width:100%;height:40px;border:0;color:#172b51;background:transparent;font:600 12px "Anuphan",sans-serif;outline:none}.notepad-sidebar>header button{display:grid;place-items:center;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#6846dd,#146ed1);box-shadow:0 8px 18px rgba(81,63,198,.22);cursor:pointer}.notepad-list{min-width:0;display:grid;align-content:start;gap:6px;padding:9px;overflow:auto}.notepad-list>button{min-width:0;display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:center;gap:6px;padding:11px 9px;border:1px solid transparent;border-radius:12px;color:#213554;background:transparent;text-align:left;cursor:pointer}.notepad-list>button:hover{background:#fff}.notepad-list>button.active{border-color:#c7c7ef;background:#fff;box-shadow:0 8px 18px rgba(42,45,105,.08)}.notepad-list i{color:#ef9b20;font-size:11px;font-style:normal}.notepad-list span{min-width:0;display:grid;gap:3px}.notepad-list b,.notepad-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notepad-list b{font-size:12px}.notepad-list small{color:#7c879a;font-size:10px}.notepad-list time{color:#909aab;font-size:9px}.notepad-list>p{padding:30px 10px;color:#7d899d;text-align:center}.notepad-sidebar>footer{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:12px;border-top:1px solid #dbe2ed}.notepad-sidebar>footer label{display:flex;align-items:center;gap:5px;color:#4d42b0;font-size:11px;font-weight:750;cursor:pointer}.notepad-sidebar>footer svg{width:13px}.notepad-sidebar>footer span{color:#7e899c;font-size:10px}.notepad-editor{min-width:0;display:grid;grid-template-rows:auto auto 1fr auto;padding:18px 22px;background:radial-gradient(circle at 100% 0,rgba(95,70,220,.045),transparent 25rem),#fff}.notepad-editor>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.notepad-save-state{display:flex;align-items:center;gap:7px;color:#5b6e83;font-size:11px;font-weight:700}.notepad-save-state i{width:8px;height:8px;border-radius:50%;background:#27c89b;box-shadow:0 0 9px rgba(39,200,155,.5)}.notepad-save-state.saving i{background:#f2af34}.notepad-save-state.error{color:#b72e47}.notepad-save-state.error i{background:#e34258}.notepad-editor>header>div:last-child{display:flex;gap:5px}.notepad-editor>header button{display:grid;place-items:center;width:37px;height:37px;border:1px solid #d4ddea;border-radius:10px;color:#52647f;background:#fff;cursor:pointer}.notepad-editor>header button.active{color:#fff1a0;border-color:#4e38bb;background:#4e38bb}.notepad-editor>header button:last-child{color:#b93b51}.notepad-editor>header svg{width:15px}.notepad-title{width:100%;min-width:0;margin-top:20px;padding:4px 0 12px;border:0;border-bottom:1px solid #e1e6ef;color:#152a55;background:transparent;font:700 clamp(23px,3vw,32px) "Chakra Petch","Anuphan",sans-serif;outline:none}.notepad-editor>textarea{width:100%;min-height:390px;padding:18px 0;border:0;color:#2e405e;background:transparent;font:500 15px/1.9 "Anuphan",sans-serif;resize:none;outline:none}.notepad-editor>footer{border-top:1px solid #e2e7ef;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px}.notepad-metrics,.notepad-export{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.notepad-metrics span{color:#758197;font-size:10px}.notepad-metrics b{color:#35496b}.notepad-export button,.notepad-export select{min-height:38px;padding:0 10px;border:1px solid #ccd7e7;border-radius:10px;color:#3d5274;background:#fff;font:750 11px "Anuphan",sans-serif}.notepad-export button{display:flex;align-items:center;gap:5px;cursor:pointer}.notepad-export button svg{width:13px}.notepad-export .tool-primary{color:#fff;border:0;background:linear-gradient(135deg,#5b3dcc,#176fd1)}.notepad-shortcuts{margin:0;color:#6e7b91;font-size:11px;text-align:center}.notepad-shortcuts svg{width:13px;vertical-align:middle}
@media(max-width:760px){.notepad-shell{grid-template-columns:220px minmax(0,1fr)}.notepad-editor{padding:16px}.notepad-editor>footer{align-items:flex-start;flex-direction:column}.notepad-export{width:100%}.notepad-export button{flex:1;justify-content:center}}
@media(max-width:580px){.notepad-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.notepad-intro>span{width:46px;height:46px}.notepad-intro em{display:none}.notepad-intro p{font-size:12px}.notepad-shell{min-height:720px;grid-template-columns:1fr;grid-template-rows:235px minmax(0,1fr)}.notepad-sidebar{border-right:0;border-bottom:1px solid #dbe2ed}.notepad-list{max-height:150px}.notepad-editor{min-height:480px}.notepad-editor>textarea{min-height:270px}.notepad-editor>footer{gap:9px}.notepad-export select{flex:1}.notepad-shortcuts{line-height:1.6}}

/* Base64 transformer */
.base64-studio{min-width:0;display:grid;gap:18px}.base64-studio [hidden]{display:none!important}.base64-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #b9c9ea;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,103,87,.25),transparent 35%),linear-gradient(125deg,#06163c,#073a73 56%,#086879);box-shadow:0 17px 38px rgba(8,45,98,.18)}.base64-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#0d2b55;background:linear-gradient(145deg,#8af6ff,#fff 65%);box-shadow:0 12px 26px rgba(50,220,240,.23)}.base64-intro>div{min-width:0}.base64-intro small{color:#92edff;font-weight:700}.base64-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.base64-intro p{margin:0;color:#ddecff}.base64-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#d9ff75;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.base64-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px;border:1px solid #d5deeb;border-radius:16px;background:#eff3f8}.base64-mode button,.base64-input-kind button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border:0;border-radius:11px;color:#617088;background:transparent;font:750 13px "Anuphan",sans-serif;cursor:pointer}.base64-mode button.active{color:#fff;background:linear-gradient(135deg,#095bba,#0a8da9);box-shadow:0 9px 20px rgba(8,104,174,.22)}.base64-mode svg,.base64-input-kind svg{width:15px}.base64-input-kind{display:flex;justify-content:center;gap:7px}.base64-input-kind button{min-width:145px;min-height:40px;border:1px solid #d0dae8;background:#fff}.base64-input-kind button.active{color:#0755ac;border-color:#8eb9e6;background:#eaf4ff}.base64-workspace{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:stretch;gap:10px}.base64-pane{min-width:0;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:15px;border:1px solid #d5dfeb;border-radius:19px;background:#fff;box-shadow:0 12px 27px rgba(20,44,87,.065)}.base64-pane>header,.base64-pane>footer{display:flex;align-items:center;justify-content:space-between;gap:9px}.base64-pane h3{margin:2px 0;color:#142d58}.base64-pane small{color:#748198}.base64-pane header button{display:flex;align-items:center;gap:5px;min-height:35px;padding:0 9px;border:1px solid #ced9e8;border-radius:10px;color:#536680;background:#fff;font:700 11px "Anuphan",sans-serif;cursor:pointer}.base64-pane header>div{display:flex;gap:5px}.base64-pane header>div button{display:grid;place-items:center;width:35px;padding:0}.base64-pane header svg{width:14px}.base64-pane textarea{min-width:0;width:100%;min-height:310px;padding:15px;border:1px solid #cbd7e7;border-radius:13px;color:#18325c;background:#f9fbfe;font:600 13px/1.7 "Chakra Petch",monospace;resize:vertical;outline:none;word-break:break-all}.base64-pane textarea:focus{border-color:#1189b5;box-shadow:0 0 0 4px rgba(17,137,181,.1)}.base64-output-pane textarea{background:#f3f8fc}.base64-pane>footer{color:#758298;font-size:10px}.base64-pane>footer b{color:#2e4e7c}.base64-pane>footer em{padding:4px 7px;border-radius:99px;color:#4d637e;background:#eef2f7;font-style:normal;font-weight:700}.base64-pane>footer em.success{color:#087760;background:#dcfaef}.base64-pane>footer em.error{color:#ad3147;background:#ffe4e9}.base64-pane>footer em.working{color:#8a5d0b;background:#fff0c7}.base64-center{display:grid;place-items:center}.base64-center button{display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:16px;color:#fff;background:linear-gradient(145deg,#0797b9,#244fc6);box-shadow:0 12px 25px rgba(20,98,180,.23);cursor:pointer}.base64-center svg{width:21px}.base64-drop{min-height:310px;border:2px dashed #9cbadd;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(13,164,196,.1),transparent 11rem),#f3f8fd;cursor:pointer}.base64-drop.dragging{border-color:#078bab;background:#e8faff}.base64-drop>span{display:grid;place-items:center;gap:7px;padding:20px;text-align:center}.base64-drop svg{width:45px;height:45px;padding:11px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#0a96b1,#2159c5)}.base64-drop b{color:#17335f}.base64-drop small{color:#748198}.base64-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 14px;border:1px solid #d7e0eb;border-radius:15px;background:#f5f8fc}.base64-options label{display:flex;align-items:center;gap:6px;color:#4b5d77;font-weight:700}.base64-options input{accent-color:#078db0}.base64-options label:has(input:disabled){opacity:.45}.base64-options button{min-height:45px;margin-left:auto;border-radius:13px!important}#base64Error{margin:0;color:#b72f47;font-weight:700;text-align:center}#base64Error:empty{display:none}
@media(max-width:760px){.base64-workspace{grid-template-columns:1fr}.base64-center{height:45px}.base64-center button{width:46px;height:46px;transform:rotate(90deg)}.base64-pane textarea,.base64-drop{min-height:230px}.base64-options button{width:100%;margin-left:0;justify-content:center}}
@media(max-width:540px){.base64-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.base64-intro>span{width:46px;height:46px}.base64-intro em{display:none}.base64-intro p{font-size:12px}.base64-input-kind button{min-width:0;flex:1}.base64-pane{padding:12px}.base64-pane textarea,.base64-drop{min-height:210px}.base64-options{align-items:flex-start;flex-direction:column}.base64-options button{width:100%}}

/* Text comparison */
.compare-studio{min-width:0;display:grid;gap:18px}.compare-studio [hidden]{display:none!important}.compare-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #cac1ed;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(59,218,255,.22),transparent 35%),linear-gradient(125deg,#1a123f,#4b227c 56%,#144f80);box-shadow:0 17px 38px rgba(46,24,98,.18)}.compare-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#48235f;background:linear-gradient(145deg,#ffc1b7,#ff6f70);box-shadow:0 12px 25px rgba(255,102,112,.23)}.compare-intro>div{min-width:0}.compare-intro small{color:#b3efff;font-weight:700}.compare-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.compare-intro p{margin:0;color:#ebe3ff}.compare-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#d9ff78;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.compare-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px;border:1px solid #d7dfeb;border-radius:16px;background:#f2f5f9}.compare-toolbar>div{display:flex;align-items:center;gap:5px}.compare-toolbar button{display:flex;align-items:center;gap:6px;min-height:39px;padding:0 12px;border:1px solid transparent;border-radius:10px;color:#5f6e85;background:transparent;font:750 12px "Anuphan",sans-serif;cursor:pointer}.compare-toolbar button.active{color:#fff;background:linear-gradient(135deg,#663bc8,#1d67c8);box-shadow:0 8px 18px rgba(77,52,183,.2)}.compare-toolbar button svg{width:14px}.compare-toolbar label{display:flex;align-items:center;gap:6px;padding:7px 9px;color:#4e607a;font-size:11px;font-weight:700}.compare-toolbar input{accent-color:#653fc5}.compare-inputs{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;gap:9px}.compare-inputs article{min-width:0;border:1px solid #d5deeb;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 27px rgba(27,41,83,.065)}.compare-inputs article>header,.compare-inputs article>footer{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 13px;background:#f7f9fc}.compare-inputs article>header{border-bottom:1px solid #e0e5ed}.compare-inputs article>footer{border-top:1px solid #e0e5ed;color:#778399;font-size:10px}.compare-inputs article>header>span{display:flex;align-items:center;gap:7px;color:#263b5d}.compare-inputs article>header i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#fff;background:#f25f6e;font-style:normal;font-weight:800}.compare-inputs article:last-child>header i{background:#159cca}.compare-inputs article>header label{display:flex;align-items:center;gap:5px;color:#4a5ec1;font-size:10px;font-weight:750;cursor:pointer}.compare-inputs article>header svg{width:13px}.compare-inputs textarea{width:100%;min-height:330px;padding:15px;border:0;color:#1d3459;background:#fff;font:500 14px/1.75 "Anuphan",sans-serif;resize:vertical;outline:none}.compare-inputs textarea:focus{box-shadow:inset 0 0 0 2px #8f7bd9}.compare-inputs footer button{border:0;color:#a34458;background:transparent;font-size:10px;font-weight:700;cursor:pointer}.compare-swap{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;color:#fff;background:linear-gradient(145deg,#693fc9,#1978c9);box-shadow:0 10px 22px rgba(67,61,174,.21);cursor:pointer}.compare-swap svg{width:18px}.compare-run{min-height:52px;border-radius:15px!important}#compareError{margin:0;color:#b52e48;text-align:center;font-weight:700}#compareError:empty{display:none}.compare-result{display:grid;gap:14px;padding:18px;border:1px solid #d5dfeb;border-radius:20px;background:#fff;box-shadow:0 13px 29px rgba(26,42,84,.07)}.compare-result>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.compare-result h3{margin:2px 0;color:#152a55}.compare-result small{color:#748198}.compare-result>header>div{display:flex;gap:7px}.compare-result header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 10px;border:1px solid #cad6e6;border-radius:10px;color:#425d8d;background:#fff;font:700 11px "Anuphan",sans-serif;cursor:pointer}.compare-result header svg{width:13px}.compare-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.compare-metrics span{display:grid;gap:2px;padding:12px;border:1px solid #dce3ed;border-radius:13px;background:#f7f9fc}.compare-metrics b{color:#2e3f72;font-size:20px}.compare-metrics .added{border-color:#a8e2d3;background:#e9fbf5}.compare-metrics .added b{color:#08775f}.compare-metrics .removed{border-color:#f0c0c9;background:#fff0f2}.compare-metrics .removed b{color:#b33149}.compare-legend{display:flex;gap:14px;color:#6c788d;font-size:10px}.compare-legend span{display:flex;align-items:center;gap:5px}.compare-legend i{width:9px;height:9px;border-radius:3px;background:#b7ebdd}.compare-legend span:nth-child(2) i{background:#f7c5ce}.compare-legend span:nth-child(3) i{background:#e8edf4}.compare-diff{max-height:520px;border:1px solid #d7e0eb;border-radius:14px;overflow:auto;background:#fbfcfe}.line-diff>div{display:grid;grid-template-columns:42px 42px 24px minmax(0,1fr);min-height:34px;border-bottom:1px solid #edf0f5}.line-diff>div:last-child{border-bottom:0}.line-diff>div>span{display:grid;place-items:center;border-right:1px solid #e3e7ee;color:#8a94a5;background:#f4f6f9;font:10px "Chakra Petch",sans-serif}.line-diff>div>b{display:grid;place-items:center;font-size:15px}.line-diff code{padding:7px 10px;color:#2b3d5b;font:500 12px/1.6 "Chakra Petch","Anuphan",monospace;white-space:pre-wrap;overflow-wrap:anywhere}.line-diff .added{background:#e9fbf5}.line-diff .added>b,.line-diff .added code{color:#08735d}.line-diff .removed{background:#fff0f2}.line-diff .removed>b,.line-diff .removed code{color:#ae3046}.word-diff{padding:19px;color:#2b3c59;font:500 14px/2 "Anuphan",sans-serif}.word-diff span.added{padding:2px 3px;border-radius:4px;color:#06735c;background:#cef4e7}.word-diff span.removed{padding:2px 3px;border-radius:4px;color:#a52d43;background:#ffdce3;text-decoration:line-through}.word-diff span.same{white-space:pre-wrap}
@media(max-width:760px){.compare-inputs{grid-template-columns:1fr}.compare-swap{margin:auto;transform:rotate(90deg)}.compare-toolbar{align-items:flex-start;flex-direction:column}.compare-toolbar>div{width:100%}.compare-toolbar button{flex:1;justify-content:center}}
@media(max-width:540px){.compare-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.compare-intro>span{width:46px;height:46px}.compare-intro em{display:none}.compare-intro p{font-size:12px}.compare-toolbar>div:last-child{align-items:flex-start;flex-direction:column}.compare-inputs textarea{min-height:230px}.compare-result>header{align-items:flex-start;flex-direction:column}.compare-result>header>div{width:100%}.compare-result header button{flex:1;justify-content:center}.compare-metrics{grid-template-columns:repeat(2,1fr)}.compare-legend{flex-wrap:wrap}.line-diff>div{grid-template-columns:30px 30px 20px minmax(0,1fr)}}

/* JSON / CSV formatter */
.data-studio{min-width:0;display:grid;gap:18px}.data-studio [hidden]{display:none!important}.data-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #b8cddd;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,101,82,.25),transparent 35%),linear-gradient(125deg,#061633,#08385c 56%,#086a70);box-shadow:0 17px 38px rgba(6,46,76,.19)}.data-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#613037;background:linear-gradient(145deg,#fff2c8,#ff7967);box-shadow:0 12px 25px rgba(255,104,85,.23)}.data-intro>div{min-width:0}.data-intro small{color:#9eecf2;font-weight:700}.data-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.data-intro p{margin:0;color:#dcecef}.data-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:99px;color:#d8ff78;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.data-mode{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px;border:1px solid #d4dfea;border-radius:16px;background:#eff4f7}.data-mode button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border:0;border-radius:11px;color:#617083;background:transparent;font:750 13px "Anuphan",sans-serif;cursor:pointer}.data-mode button.active{color:#fff;background:linear-gradient(135deg,#087e97,#1162ad);box-shadow:0 9px 20px rgba(8,109,143,.21)}.data-mode svg{width:15px}.data-actionbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border:1px solid #d6dfeb;border-radius:15px;background:#fff}.data-actionbar>div,.data-actionbar>span{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.data-actionbar button,.data-actionbar label{display:flex;align-items:center;gap:5px;min-height:36px;padding:0 9px;border:1px solid #ccd7e6;border-radius:9px;color:#465b79;background:#f8fafd;font:700 10px "Anuphan",sans-serif;cursor:pointer}.data-actionbar label select{height:27px;border:0;color:#1f466a;background:transparent;font:700 10px "Anuphan",sans-serif;outline:none}.data-actionbar svg{width:13px}.data-editors{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.data-editors article{min-width:0;border:1px solid #d4deea;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 27px rgba(19,43,76,.065)}.data-editors article>header{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 13px;border-bottom:1px solid #e0e6ee;background:#f7f9fc}.data-editors article>header>span{display:flex;align-items:center;gap:7px;color:#263d5e}.data-editors article>header i{width:9px;height:9px;border-radius:50%;background:#ff6e60;box-shadow:0 0 8px rgba(255,110,96,.45)}.data-editors article:last-child>header i{background:#17b7c2}.data-editors article header small{color:#7a869a}.data-editors article header>div{display:flex;gap:5px}.data-editors article header button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #cdd8e6;border-radius:9px;color:#3c6085;background:#fff;cursor:pointer}.data-editors article header svg{width:14px}.data-editors textarea{width:100%;min-height:380px;padding:16px;border:0;color:#183657;background:#fff;font:600 13px/1.7 "Chakra Petch",monospace;resize:vertical;outline:none;tab-size:2}.data-editors article:last-child textarea{background:#f6f9fb}.data-editors textarea:focus{box-shadow:inset 0 0 0 2px #4aa6b8}.data-message{margin:0;padding:11px 13px;border:1px solid #a9e3d4;border-radius:12px;color:#08715d;background:#e8faf5;font-weight:700}.data-message.error{border-color:#efbec7;color:#ad3046;background:#fff0f2}.data-message.neutral{border-color:#d5deea;color:#5c6b82;background:#f5f7fa}.data-preview{display:grid;gap:11px;padding:16px;border:1px solid #d6dfeb;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(20,42,76,.06)}.data-preview>header{display:flex;align-items:center;justify-content:space-between}.data-preview h3{margin:2px 0;color:#142e54}.data-preview small{color:#748198}.data-preview em{padding:5px 8px;border-radius:99px;color:#087181;background:#dff8f8;font-size:10px;font-style:normal;font-weight:750}#dataTable{overflow:auto;border:1px solid #d7e0e9;border-radius:12px}#dataTable table{width:100%;border-collapse:collapse;white-space:nowrap}#dataTable th,#dataTable td{max-width:240px;padding:9px 11px;border-right:1px solid #e2e7ed;border-bottom:1px solid #e2e7ed;overflow:hidden;text-overflow:ellipsis;text-align:left}#dataTable th{color:#fff;background:#0d6677;font-size:11px}#dataTable td{color:#40536e;background:#fff;font-size:11px}#dataTable tr:nth-child(even) td{background:#f5f9fa}
@media(max-width:760px){.data-actionbar{align-items:flex-start;flex-direction:column}.data-actionbar>div,.data-actionbar>span{width:100%}.data-editors{grid-template-columns:1fr}.data-editors textarea{min-height:290px}}
@media(max-width:540px){.data-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.data-intro>span{width:46px;height:46px}.data-intro em{display:none}.data-intro p{font-size:12px}.data-actionbar button,.data-actionbar label{flex:1;justify-content:center}.data-editors textarea{min-height:245px}.data-preview>header{align-items:flex-start;flex-direction:column;gap:7px}}

/* Crop and ID photo */
.crop-studio{min-width:0;display:grid;gap:18px}.crop-studio [hidden]{display:none!important}.crop-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #e1bec6;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(80,220,239,.24),transparent 35%),linear-gradient(125deg,#3b0b1c,#8d1834 57%,#7b2a38);box-shadow:0 17px 38px rgba(102,17,42,.18)}.crop-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#0b405b;background:linear-gradient(145deg,#a3f3ff,#fff 67%);box-shadow:0 12px 25px rgba(73,214,236,.22)}.crop-intro>div{min-width:0}.crop-intro small{color:#aeefff;font-weight:700}.crop-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.crop-intro p{margin:0;color:#ffe8ec}.crop-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#fff1a7;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.crop-drop{border:2px dashed #daa8b2;border-radius:20px;background:#fff4f6}.crop-drop.dragging{border-color:#d93655;background:#ffe6eb}.crop-drop label{display:flex;align-items:center;gap:13px;min-height:115px;padding:20px;cursor:pointer}.crop-drop label>svg{width:40px;height:40px;color:#d83d59}.crop-drop label>span{display:grid;flex:1}.crop-drop b{color:#442239}.crop-drop small{color:#887383}.crop-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#e64a5a,#8b1b42)}.crop-drop p{margin:0 18px 12px;color:#b82e47;font-weight:700}.crop-workspace{min-width:0;display:grid;gap:15px}.crop-filebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid #d8e0ea;border-radius:14px;background:#fff}.crop-filebar>span{min-width:0;display:flex;align-items:center;gap:9px}.crop-filebar>span>svg{width:34px;height:34px;padding:8px;border-radius:10px;color:#fff;background:#d94358}.crop-filebar b,.crop-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crop-filebar small{color:#778397}.crop-filebar button{display:flex;align-items:center;gap:5px;min-height:37px;padding:0 10px;border:1px solid #d2dce9;border-radius:10px;color:#4d607b;background:#fff;font:700 11px "Anuphan",sans-serif;cursor:pointer}.crop-filebar button svg{width:13px}.crop-layout{min-width:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:12px}.crop-preview{min-width:0;display:grid;align-content:center;gap:9px;padding:16px;border:1px solid #283050;border-radius:20px;background:radial-gradient(circle at 50% 35%,#24345b,#101528 72%);overflow:hidden}.crop-preview>div{width:100%;min-height:470px;display:grid;place-items:center;position:relative;overflow:hidden}.crop-preview canvas{max-width:100%;max-height:500px;border-radius:7px;box-shadow:0 18px 38px rgba(0,0,0,.35);cursor:grab;touch-action:none}.crop-preview canvas:active{cursor:grabbing}.crop-preview>div i{position:absolute;pointer-events:none}.crop-preview>div i:first-of-type{width:33%;height:100%;border-left:1px dashed rgba(255,255,255,.4);border-right:1px dashed rgba(255,255,255,.4)}.crop-preview>div i:nth-of-type(2){width:100%;height:33%;border-top:1px dashed rgba(255,255,255,.4);border-bottom:1px dashed rgba(255,255,255,.4)}.crop-preview>div i:nth-of-type(3){width:28%;height:18%;border:1px dashed rgba(145,232,255,.55);border-radius:50%}.crop-preview>p{margin:0;color:#aebad3;font-size:10px;text-align:center}.crop-preview>p svg{width:13px;vertical-align:middle}.crop-controls{display:grid;align-content:start;gap:10px;padding:15px;border:1px solid #d5deea;border-radius:19px;background:#fff;box-shadow:0 12px 28px rgba(29,40,80,.065)}.crop-controls>label,.crop-size label,.crop-output-options label{display:grid;gap:6px;color:#42546f;font-weight:700}.crop-controls select,.crop-controls input[type="number"],.crop-output-options select{width:100%;height:42px;padding:0 9px;border:1px solid #cbd7e6;border-radius:10px;color:#1b365d;background:#fff;font:700 11px "Anuphan",sans-serif}.crop-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}.crop-controls label>span{display:flex;justify-content:space-between}.crop-controls label>span b{color:#c63250}.crop-controls input[type="range"]{width:100%;accent-color:#d43b58}.crop-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.crop-buttons button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:39px;border:1px solid #cdd8e6;border-radius:10px;color:#4b5e7a;background:#f8fafd;font:700 10px "Anuphan",sans-serif;cursor:pointer}.crop-buttons button.active{color:#fff;border-color:#9a2441;background:#b82e4b}.crop-buttons svg{width:13px}.crop-output-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px;border-top:1px solid #e0e5ed}.crop-output-options label:last-child{grid-column:1/-1}.crop-output-options input[type="color"]{width:100%;height:42px;padding:4px;border:1px solid #cbd7e6;border-radius:10px;background:#fff}.crop-export{display:flex;align-items:center;justify-content:space-between;gap:10px}.crop-export>button{min-height:49px;border-radius:14px!important}.crop-export>div{display:flex;align-items:center;gap:7px}.crop-export label{display:flex;align-items:center;gap:5px;color:#50617a;font-size:10px;font-weight:700}.crop-export select{height:40px;padding:0 8px;border:1px solid #ccd7e6;border-radius:10px}.crop-export>div button{display:flex;align-items:center;gap:6px;min-height:43px;padding:0 12px;border:1px solid #9bafcc;border-radius:12px;color:#344e79;background:#fff;font:750 11px "Anuphan",sans-serif;cursor:pointer}.crop-export svg{width:14px}.crop-note{margin:0;padding:10px 12px;border:1px solid #efd59d;border-radius:12px;color:#74581d;background:#fff9e8;font-size:10px}
@media(max-width:820px){.crop-layout{grid-template-columns:1fr}.crop-preview>div{min-height:400px}.crop-output-options{grid-template-columns:repeat(3,1fr)}.crop-output-options label:last-child{grid-column:auto}}
@media(max-width:560px){.crop-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.crop-intro>span{width:46px;height:46px}.crop-intro em{display:none}.crop-intro p{font-size:12px}.crop-drop label{align-items:flex-start;flex-wrap:wrap}.crop-drop strong{width:100%;text-align:center}.crop-filebar{align-items:flex-start;flex-direction:column}.crop-filebar button{width:100%;justify-content:center}.crop-preview{padding:10px}.crop-preview>div{min-height:285px}.crop-output-options{grid-template-columns:1fr 1fr}.crop-output-options label:last-child{grid-column:1/-1}.crop-export{align-items:stretch;flex-direction:column}.crop-export>button,.crop-export>div button{width:100%;justify-content:center}.crop-export>div{align-items:stretch;flex-direction:column}.crop-export label{justify-content:space-between}}

/* PDF page organizer */
.organize-studio{min-width:0;display:grid;gap:18px}.organize-studio [hidden]{display:none!important}.organize-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #bdc6ef;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,105,86,.25),transparent 35%),linear-gradient(125deg,#10143f,#24318b 57%,#164c92);box-shadow:0 17px 38px rgba(26,35,120,.19)}.organize-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#7a2630;background:linear-gradient(145deg,#fff2d1,#ff7a66);box-shadow:0 12px 25px rgba(255,106,89,.23)}.organize-intro>div{min-width:0}.organize-intro small{color:#b3edff;font-weight:700}.organize-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.organize-intro p{margin:0;color:#e2e8ff}.organize-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#d9ff78;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.organize-drop{border:2px dashed #aebde1;border-radius:20px;background:#f2f6ff}.organize-drop.dragging{border-color:#365cd4;background:#e9efff}.organize-drop label{display:flex;align-items:center;gap:13px;min-height:115px;padding:20px;cursor:pointer}.organize-drop label>svg{width:40px;height:40px;color:#3658cd}.organize-drop label>span{display:grid;flex:1}.organize-drop b{color:#1c315d}.organize-drop small{color:#77839a}.organize-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#3658d3,#183a9f)}.organize-drop p{margin:0 18px 12px;color:#b72e47;font-weight:700}.organize-workspace{min-width:0;display:grid;gap:13px}.organize-filebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid #d7dfeb;border-radius:14px;background:#fff}.organize-filebar>span{min-width:0;display:flex;align-items:center;gap:9px}.organize-filebar>span>svg{width:34px;height:34px;padding:8px;border-radius:10px;color:#fff;background:#3458ce}.organize-filebar b,.organize-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organize-filebar small{color:#768298}.organize-filebar button,.organize-toolbar button{display:flex;align-items:center;gap:5px;min-height:37px;padding:0 10px;border:1px solid #ccd7e6;border-radius:10px;color:#475d7f;background:#fff;font:700 10px "Anuphan",sans-serif;cursor:pointer}.organize-filebar button svg,.organize-toolbar button svg{width:13px}.organize-toolbar{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px;border:1px solid #d6dfeb;border-radius:14px;background:#f3f6fa}.organize-toolbar>span{display:flex;flex-wrap:wrap;gap:6px}.organize-toolbar>span:last-child button:nth-child(3){color:#b32f49;border-color:#e8bdc6}.organize-hint{margin:0;color:#6d7b91;font-size:10px;text-align:center}.organize-hint svg{width:13px;vertical-align:middle}.organize-pages{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;padding:14px;border:1px solid #d4ddea;border-radius:19px;background:linear-gradient(145deg,#eef2f8,#f8faff)}.organize-pages article{min-width:0;border:2px solid transparent;border-radius:15px;position:relative;overflow:hidden;background:#fff;box-shadow:0 10px 23px rgba(26,41,81,.11);transition:.15s ease}.organize-pages article.selected{border-color:#3b5bd3;box-shadow:0 0 0 3px rgba(59,91,211,.1),0 12px 25px rgba(26,41,81,.13)}.organize-pages article.dragging{opacity:.5}.organize-pages article.drag-over{transform:translateY(-5px);box-shadow:0 0 0 3px #82a2ff}.organize-pages article>label{position:absolute;top:8px;left:8px;z-index:2;cursor:pointer}.organize-pages article>label input{position:absolute;opacity:0}.organize-pages article>label i{display:grid;place-items:center;width:24px;height:24px;border:2px solid #fff;border-radius:8px;background:rgba(19,31,69,.65);box-shadow:0 3px 8px rgba(0,0,0,.2)}.organize-pages article>label input:checked+i:after{content:"✓";color:#fff;font-style:normal;font-weight:900}.organize-pages article>div{height:190px;display:grid;place-items:center;overflow:hidden;background:#e9edf4}.organize-pages canvas{max-width:126px;max-height:168px;background:#fff;box-shadow:0 7px 17px rgba(20,31,65,.2);transition:.18s ease}.organize-pages article>header{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px 10px}.organize-pages article>header span{min-width:0}.organize-pages article>header b,.organize-pages article>header small{display:block}.organize-pages article>header b{color:#17305d}.organize-pages article>header small{color:#78849a;font-size:9px}.organize-pages article>header em{padding:3px 6px;border-radius:99px;color:#374fa8;background:#e9edff;font-size:9px;font-style:normal;font-weight:750}.organize-pages article>footer{display:grid;grid-template-columns:35px 1fr 35px 35px;border-top:1px solid #e2e7ef}.organize-pages article>footer button{height:35px;border:0;border-right:1px solid #e2e7ef;color:#3958b2;background:#fff;font-size:17px;cursor:pointer}.organize-pages article>footer button:last-child{color:#bc334b;border-right:0}.organize-pages article>footer span{display:grid;place-items:center;color:#7b879b;cursor:grab}.organize-save{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:13px;border:1px solid #d6dfeb;border-radius:15px;background:#fff}.organize-save label{min-width:240px;display:grid;gap:5px;color:#50617b;font-size:10px;font-weight:700}.organize-save input{height:41px;padding:0 10px;border:1px solid #cbd7e6;border-radius:10px;color:#17345f;font:700 12px "Anuphan",sans-serif}.organize-save button{min-height:47px;border-radius:13px!important}.organize-result{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;border:1px solid #a7ded1;border-radius:16px;background:#e9fbf6}.organize-result>span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:#13a986}.organize-result h3{margin:2px 0;color:#14614f}.organize-result small,.organize-result p{color:#527a70}.organize-result p{margin:0}.organize-result a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:11px;color:#fff;background:#087960;font-weight:750}.organize-result a svg{width:14px}
@media(max-width:700px){.organize-toolbar{align-items:flex-start;flex-direction:column}.organize-toolbar>span{width:100%}.organize-toolbar button{flex:1;justify-content:center}.organize-save{align-items:stretch;flex-direction:column}.organize-save label{min-width:0}.organize-result{grid-template-columns:48px minmax(0,1fr)}.organize-result a{grid-column:1/-1;justify-content:center}}
@media(max-width:540px){.organize-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.organize-intro>span{width:46px;height:46px}.organize-intro em{display:none}.organize-intro p{font-size:12px}.organize-drop label{align-items:flex-start;flex-wrap:wrap}.organize-drop strong{width:100%;text-align:center}.organize-filebar{align-items:flex-start;flex-direction:column}.organize-filebar button{width:100%;justify-content:center}.organize-toolbar>span{display:grid;grid-template-columns:1fr 1fr}.organize-pages{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.organize-pages article>div{height:160px}.organize-pages canvas{max-width:104px;max-height:140px}}

/* PDF watermark and numbering */
.watermark-studio{min-width:0;display:grid;gap:18px}.watermark-studio [hidden]{display:none!important}.watermark-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #b7d0d4;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,111,93,.25),transparent 35%),linear-gradient(125deg,#061d2c,#064c5a 57%,#087a78);box-shadow:0 17px 38px rgba(6,70,78,.18)}.watermark-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#69353a;background:linear-gradient(145deg,#fff0c5,#ff8371);box-shadow:0 12px 25px rgba(255,117,99,.23)}.watermark-intro small{color:#a7f0ee;font-weight:700}.watermark-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.watermark-intro p{margin:0;color:#e0f0ef}.watermark-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#dcff79;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.watermark-drop{border:2px dashed #a7c8ce;border-radius:20px;background:#f0faf9}.watermark-drop.dragging{border-color:#087e85}.watermark-drop label{display:flex;align-items:center;gap:13px;min-height:115px;padding:20px;cursor:pointer}.watermark-drop label>svg{width:40px;height:40px;color:#087985}.watermark-drop label>span{display:grid;flex:1}.watermark-drop b{color:#173d4c}.watermark-drop small{color:#71868c}.watermark-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#087b86,#075061)}.watermark-drop p{margin:0 18px 12px;color:#b52f47}.watermark-workspace{min-width:0;display:grid;gap:13px}.watermark-filebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid #d6e0e7;border-radius:14px;background:#fff}.watermark-filebar>span{min-width:0;display:flex;align-items:center;gap:9px}.watermark-filebar>span>svg{width:34px;height:34px;padding:8px;border-radius:10px;color:#fff;background:#087a83}.watermark-filebar b,.watermark-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.watermark-filebar small{color:#74858d}.watermark-filebar button{display:flex;align-items:center;gap:5px;min-height:37px;padding:0 10px;border:1px solid #cad7df;border-radius:10px;color:#45616d;background:#fff;font:700 11px "Anuphan",sans-serif;cursor:pointer}.watermark-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:12px}.watermark-preview{display:grid;place-items:center;align-content:center;gap:10px;padding:16px;border-radius:20px;background:radial-gradient(circle at 50% 35%,#244c52,#0a2027 72%)}.watermark-preview canvas{max-width:100%;max-height:680px;background:#fff;box-shadow:0 18px 38px rgba(0,0,0,.35)}.watermark-preview footer{display:flex;align-items:center;gap:12px;color:#d9e8eb}.watermark-preview footer button{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;background:rgba(255,255,255,.08);cursor:pointer}.watermark-preview footer svg{width:14px}.watermark-controls{display:grid;align-content:start;gap:10px;padding:15px;border:1px solid #d5e0e6;border-radius:19px;background:#fff}.watermark-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border-radius:12px;background:#edf4f5}.watermark-tabs button{min-height:39px;border:0;border-radius:9px;color:#5b6e75;background:transparent;font:750 11px "Anuphan",sans-serif;cursor:pointer}.watermark-tabs button.active{color:#fff;background:linear-gradient(135deg,#087d86,#1666a0)}.watermark-controls>div:not(.watermark-tabs),.watermark-controls>label,.watermark-controls>input{min-width:0}.watermark-controls label{display:grid;gap:5px;color:#415963;font-weight:700}.watermark-controls label>span{display:flex;justify-content:space-between}.watermark-controls label b{color:#087984}.watermark-controls input[type="text"],.watermark-controls>input,.watermark-controls select,.watermark-controls #watermarkText{width:100%;height:41px;padding:0 9px;border:1px solid #c9d8de;border-radius:10px;color:#173946;background:#fff;font:700 11px "Anuphan",sans-serif}.watermark-controls input[type="range"]{width:100%;accent-color:#087d84}.watermark-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px}.watermark-inline input[type="color"]{width:100%;height:41px;padding:4px;border:1px solid #c9d8de;border-radius:10px;background:#fff}.watermark-image-file{display:flex!important;align-items:center;gap:8px;padding:12px;border:1px dashed #9dbfc6;border-radius:12px;background:#f1f9f9;cursor:pointer}.watermark-image-file svg{width:25px;color:#087b84}.watermark-image-file span{display:grid!important}.watermark-image-file small{color:#72878c}.page-number-options{padding:11px;border:1px solid #d8e2e7;border-radius:13px}.page-number-options legend{padding:0 5px}.page-number-options legend label{display:flex;align-items:center;gap:6px}.page-number-options>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.watermark-save{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:13px;border:1px solid #d6e0e6;border-radius:15px;background:#fff}.watermark-save label{min-width:240px;display:grid;gap:5px;color:#50656e;font-size:10px;font-weight:700}.watermark-save input{height:41px;padding:0 10px;border:1px solid #c9d7de;border-radius:10px}.watermark-save button{min-height:47px;border-radius:13px!important}.watermark-result{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;border:1px solid #a5ddd0;border-radius:16px;background:#e8faf5}.watermark-result>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:#0d9f7e}.watermark-result h3,.watermark-result p{margin:0}.watermark-result a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:11px;color:#fff;background:#08775f;font-weight:750}
@media(max-width:820px){.watermark-layout{grid-template-columns:1fr}.watermark-preview canvas{max-height:560px}}
@media(max-width:560px){.watermark-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.watermark-intro>span{width:46px;height:46px}.watermark-intro em{display:none}.watermark-intro p{font-size:12px}.watermark-drop label{align-items:flex-start;flex-wrap:wrap}.watermark-drop strong{width:100%;text-align:center}.watermark-filebar{align-items:flex-start;flex-direction:column}.watermark-filebar button{width:100%;justify-content:center}.watermark-preview{padding:10px}.watermark-preview canvas{max-height:430px}.watermark-inline,.page-number-options>div{grid-template-columns:1fr}.watermark-save{align-items:stretch;flex-direction:column}.watermark-save label{min-width:0}.watermark-result{grid-template-columns:46px minmax(0,1fr)}.watermark-result a{grid-column:1/-1;justify-content:center}}

/* PDF signature */
.sign-studio{min-width:0;display:grid;gap:18px}.sign-studio [hidden]{display:none!important}.sign-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #d5bddb;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(51,221,242,.22),transparent 35%),linear-gradient(125deg,#251038,#652265 57%,#244b78);box-shadow:0 17px 38px rgba(76,26,83,.19)}.sign-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#71303b;background:linear-gradient(145deg,#fff0c4,#ff7b68)}.sign-intro small{color:#b9ecff;font-weight:700}.sign-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.sign-intro p{margin:0;color:#f1e2f1}.sign-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#dcff7b;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.sign-drop{border:2px dashed #c8a9ce;border-radius:20px;background:#fbf1fb}.sign-drop.dragging{border-color:#963b91}.sign-drop label{display:flex;align-items:center;gap:13px;min-height:115px;padding:20px;cursor:pointer}.sign-drop label>svg{width:40px;height:40px;color:#8b3487}.sign-drop label>span{display:grid;flex:1}.sign-drop b{color:#432044}.sign-drop small{color:#877386}.sign-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#a23c93,#5d2c8f)}.sign-drop p{margin:0 18px 12px;color:#b42f48}.sign-workspace{min-width:0;display:grid;gap:13px}.sign-filebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid #ddd6e4;border-radius:14px;background:#fff}.sign-filebar>span{min-width:0;display:flex;align-items:center;gap:9px}.sign-filebar>span>svg{width:34px;height:34px;padding:8px;border-radius:10px;color:#fff;background:#8d3587}.sign-filebar b,.sign-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sign-filebar small{color:#7e7485}.sign-filebar button{display:flex;align-items:center;gap:5px;min-height:37px;padding:0 10px;border:1px solid #d8ccdf;border-radius:10px;color:#654f68;background:#fff;font:700 11px "Anuphan",sans-serif;cursor:pointer}.sign-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:12px}.sign-document{display:grid;place-items:center;align-content:center;gap:10px;padding:16px;border-radius:20px;background:radial-gradient(circle at 50% 35%,#49345b,#1d1429 72%)}#signStage{max-width:100%;position:relative;line-height:0}#signPdfCanvas{max-width:100%;max-height:680px;background:#fff;box-shadow:0 18px 38px rgba(0,0,0,.35)}#signOverlay{position:absolute;left:36%;top:70%;height:auto;cursor:move;touch-action:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}.sign-document>footer{display:flex;align-items:center;gap:12px;color:#eadfec}.sign-document footer button{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;background:rgba(255,255,255,.08);cursor:pointer}.sign-controls{display:grid;align-content:start;gap:10px;padding:15px;border:1px solid #dfd6e5;border-radius:19px;background:#fff}.sign-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border-radius:12px;background:#f4edf5}.sign-tabs button{min-height:39px;border:0;border-radius:9px;color:#726276;background:transparent;font:750 11px "Anuphan",sans-serif;cursor:pointer}.sign-tabs button.active{color:#fff;background:linear-gradient(135deg,#98398c,#5a3aa6)}.sign-maker{border:1px solid #ded5e5;border-radius:13px;overflow:hidden;background-image:linear-gradient(45deg,#f4f1f6 25%,transparent 25%),linear-gradient(-45deg,#f4f1f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f4f1f6 75%),linear-gradient(-45deg,transparent 75%,#f4f1f6 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.sign-maker canvas{width:100%;height:125px;display:block;touch-action:none}.sign-maker footer{display:flex;align-items:center;gap:8px;padding:8px;background:#fff}.sign-maker footer label{display:flex!important;align-items:center;gap:5px}.sign-maker footer input[type="color"]{width:30px;height:27px}.sign-maker footer button{margin-left:auto;border:0;color:#a33c55;background:transparent;font-weight:700;cursor:pointer}.sign-type{display:grid;grid-template-columns:1fr 120px;gap:7px;padding:12px;background:#fff}.sign-type input,.sign-type select{height:42px;padding:0 9px;border:1px solid #d7cce0;border-radius:10px}.sign-maker>label{display:flex;align-items:center;gap:8px;padding:20px;background:#fff;cursor:pointer}.sign-maker>label svg{width:28px;color:#903788}.sign-maker>label span{display:grid}.sign-maker>label small{color:#817486}.sign-controls>button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:43px;border:1px solid #b89cc5;border-radius:11px;color:#743375;background:#faf1fb;font:750 11px "Anuphan",sans-serif;cursor:pointer}.sign-controls>button.tool-primary{color:#fff;border:0;background:linear-gradient(135deg,#98398d,#5540a8)}.sign-controls>button svg{width:14px}.sign-controls>label{display:grid;gap:5px;color:#594d66;font-weight:700}.sign-controls>label span{display:flex;justify-content:space-between}.sign-controls>label input{width:100%;accent-color:#8d3889}.signature-placements{display:grid;gap:7px;padding:11px;border:1px solid #dfd6e5;border-radius:13px;background:#faf8fb}.signature-placements>header{display:flex;justify-content:space-between;color:#5f5067}.signature-placements>div{display:grid;gap:5px;max-height:140px;overflow:auto}.signature-placements>div>span{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px;border-radius:9px;background:#fff}.signature-placements span small{color:#827589}.signature-placements button{grid-column:2;grid-row:1/3;border:0;color:#b43a51;background:transparent;cursor:pointer}.signature-placements p{color:#887b8c;text-align:center}.sign-save{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:13px;border:1px solid #ddd5e4;border-radius:15px;background:#fff}.sign-save label{min-width:240px;display:grid;gap:5px;color:#65566c;font-size:10px;font-weight:700}.sign-save input{height:41px;padding:0 10px;border:1px solid #d6cadd;border-radius:10px}.sign-save button{min-height:47px;border-radius:13px!important}.sign-result{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;border:1px solid #aedbcf;border-radius:16px;background:#eaf9f5}.sign-result>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:#119f7d}.sign-result h3,.sign-result p{margin:0}.sign-result a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:11px;color:#fff;background:#08765f;font-weight:750}
@media(max-width:820px){.sign-layout{grid-template-columns:1fr}#signPdfCanvas{max-height:560px}}
@media(max-width:560px){.sign-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.sign-intro>span{width:46px;height:46px}.sign-intro em{display:none}.sign-intro p{font-size:12px}.sign-drop label{align-items:flex-start;flex-wrap:wrap}.sign-drop strong{width:100%;text-align:center}.sign-filebar{align-items:flex-start;flex-direction:column}.sign-filebar button{width:100%;justify-content:center}.sign-document{padding:10px}#signPdfCanvas{max-height:430px}.sign-type{grid-template-columns:1fr}.sign-save{align-items:stretch;flex-direction:column}.sign-save label{min-width:0}.sign-result{grid-template-columns:46px minmax(0,1fr)}.sign-result a{grid-column:1/-1;justify-content:center}}

/* HEIC to JPG */
.heic-studio{min-width:0;display:grid;gap:18px}.heic-studio [hidden]{display:none!important}.heic-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:15px;padding:21px 23px;border:1px solid #b7d1cd;border-radius:23px;color:#fff;background:radial-gradient(circle at 87% 0,rgba(255,108,86,.25),transparent 35%),linear-gradient(125deg,#051e26,#07534f 57%,#097a6c);box-shadow:0 17px 38px rgba(5,71,65,.18)}.heic-intro>span{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#713238;background:linear-gradient(145deg,#fff0c2,#ff7967)}.heic-intro small{color:#a8f2e8;font-weight:700}.heic-intro h3{margin:2px 0;font:700 clamp(22px,3vw,30px)/1.2 "Chakra Petch",sans-serif}.heic-intro p{margin:0;color:#e0f2ef}.heic-intro em{padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#ddff79;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.heic-drop{border:2px dashed #a6cac4;border-radius:20px;background:#effaf8}.heic-drop.dragging{border-color:#087d70}.heic-drop label{display:flex;align-items:center;gap:13px;min-height:120px;padding:20px;cursor:pointer}.heic-drop label>svg{width:42px;height:42px;color:#08796f}.heic-drop label>span{display:grid;flex:1}.heic-drop b{color:#163e3e}.heic-drop small{color:#708985}.heic-drop strong{padding:11px 15px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#078274,#07575b)}.heic-drop p{margin:0 18px 12px;color:#b52f47}.heic-workspace{display:grid;gap:13px}.heic-options{display:grid;grid-template-columns:1.2fr 1fr .6fr auto;align-items:end;gap:9px;padding:13px;border:1px solid #d4e1df;border-radius:16px;background:#fff}.heic-options label{display:grid;gap:5px;color:#46615e;font-weight:700}.heic-options label span{display:flex;justify-content:space-between}.heic-options input[type="range"]{width:100%;accent-color:#087e72}.heic-options select{height:41px;padding:0 9px;border:1px solid #c8dad7;border-radius:10px}.heic-options input[type="color"]{width:100%;height:41px;padding:4px;border:1px solid #c8dad7;border-radius:10px;background:#fff}.heic-options button{display:flex;align-items:center;gap:5px;min-height:41px;padding:0 11px;border:1px solid #9ebfba;border-radius:10px;color:#17665e;background:#effaf8;font:750 11px "Anuphan",sans-serif;cursor:pointer}.heic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.heic-list article{display:grid;grid-template-columns:32px minmax(0,1fr) auto 32px;align-items:center;gap:8px;padding:10px;border:1px solid #d7e2e0;border-radius:13px;background:#fff}.heic-list article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;background:#087b71;font-weight:800}.heic-list article div{min-width:0}.heic-list b,.heic-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heic-list small{color:#758986}.heic-list em{padding:4px 7px;border-radius:99px;color:#76611f;background:#fff4ca;font-size:9px;font-style:normal}.heic-list button{width:32px;height:32px;border:0;color:#b53349;background:transparent;cursor:pointer}.heic-run{min-height:51px;border-radius:14px!important}.heic-progress{display:grid;gap:7px;padding:12px;border:1px solid #cee0dc;border-radius:13px;background:#f1faf8}.heic-progress>div{height:8px;border-radius:99px;overflow:hidden;background:#d8e8e5}.heic-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#0a9985,#1aa6cd)}.heic-progress span{color:#506b67}.heic-results{display:grid;gap:11px}.heic-results>header{display:flex;align-items:center;justify-content:space-between;padding:13px;border:1px solid #b0ddd3;border-radius:14px;background:#e9faf5}.heic-results h3{margin:2px 0;color:#155d52}.heic-results small{color:#6d8782}.heic-results header a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:11px;color:#fff;background:#087669;font-weight:750}.heic-results header svg{width:14px}#heicOutputList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#heicOutputList article{display:grid;grid-template-columns:70px minmax(0,1fr) 38px;align-items:center;gap:9px;padding:9px;border:1px solid #d8e2e0;border-radius:13px;background:#fff}#heicOutputList img{width:70px;height:70px;object-fit:cover;border-radius:9px}#heicOutputList span{min-width:0}#heicOutputList b,#heicOutputList small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#heicOutputList small{color:#738783}#heicOutputList a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#087b70;background:#eaf8f5}#heicOutputList a svg{width:16px}
@media(max-width:760px){.heic-options{grid-template-columns:1fr 1fr}.heic-options button{justify-content:center}.heic-list,#heicOutputList{grid-template-columns:1fr}}
@media(max-width:540px){.heic-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.heic-intro>span{width:46px;height:46px}.heic-intro em{display:none}.heic-intro p{font-size:12px}.heic-drop label{align-items:flex-start;flex-wrap:wrap}.heic-drop strong{width:100%;text-align:center}.heic-options{grid-template-columns:1fr}.heic-list article{grid-template-columns:32px minmax(0,1fr) 30px}.heic-list em{display:none}.heic-results>header{align-items:flex-start;flex-direction:column;gap:8px}.heic-results header a{width:100%;justify-content:center}}

/* PDF and Excel */
.pdf-excel-studio{min-width:0;display:grid;gap:18px}.pdf-excel-studio [hidden]{display:none!important}.pdf-excel-intro{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 24px;overflow:hidden;border:1px solid #b5d4cd;border-radius:24px;color:#fff;background:radial-gradient(circle at 85% 0,rgba(255,105,82,.28),transparent 34%),linear-gradient(125deg,#061b37,#075b59 58%,#12866c);box-shadow:0 18px 40px rgba(6,55,72,.2)}.pdf-excel-intro>span{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.48);border-radius:18px;color:#052f38;background:linear-gradient(145deg,#fff4d0,#55ecc4);box-shadow:0 12px 26px rgba(48,222,184,.25)}.pdf-excel-intro>span svg{width:29px}.pdf-excel-intro small{color:#9ef7e2;font-weight:800}.pdf-excel-intro h3{margin:2px 0;font:700 clamp(22px,3vw,31px)/1.2 "Chakra Petch","Anuphan",sans-serif}.pdf-excel-intro p{margin:0;color:#e2f3f0}.pdf-excel-intro em{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:#e3ff79;background:rgba(255,255,255,.09);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.pdf-excel-intro em svg{width:14px}.pdf-excel-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border:1px solid #d4e1df;border-radius:18px;background:#eef5f4}.pdf-excel-mode button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:49px;border:0;border-radius:13px;color:#58716e;background:transparent;font:750 14px "Anuphan",sans-serif;cursor:pointer}.pdf-excel-mode button.active{color:#fff;background:linear-gradient(135deg,#087f70,#1767a2);box-shadow:0 10px 22px rgba(8,105,105,.23)}.pdf-excel-mode svg{width:17px}.pdf-excel-drop{border:2px dashed #9fc8c0;border-radius:21px;background:linear-gradient(145deg,#f0faf8,#f6fbff)}.pdf-excel-drop.dragging{border-color:#087d70;background:#e7f8f4}.pdf-excel-drop label{display:flex;align-items:center;gap:14px;min-height:120px;padding:21px;cursor:pointer}.pdf-excel-drop label>svg{width:43px;height:43px;color:#087c70}.pdf-excel-drop label>span{min-width:0;display:grid;flex:1}.pdf-excel-drop b{color:#153b46}.pdf-excel-drop small{color:#708688}.pdf-excel-drop strong{padding:11px 16px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#078172,#0a5871);box-shadow:0 9px 18px rgba(5,104,100,.2)}.pdf-excel-drop p{margin:0 18px 13px;color:#b42d48;font-weight:700}.pdf-excel-drop p:empty{display:none}.pdf-excel-workspace{min-width:0;display:grid;gap:13px}.pdf-excel-workspace>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #d4e1df;border-radius:15px;background:#fff}.pdf-excel-workspace>header>span{min-width:0;display:flex;align-items:center;gap:10px}.pdf-excel-workspace>header>span>svg{width:36px;height:36px;padding:8px;border-radius:10px;color:#fff;background:#087d70}.pdf-excel-workspace>header b,.pdf-excel-workspace>header small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdf-excel-workspace>header small{color:#718684}.pdf-excel-workspace>header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #bfd2cf;border-radius:11px;color:#35635f;background:#f6fbfa;font:700 12px "Anuphan",sans-serif;cursor:pointer}.pdf-excel-workspace>header button svg{width:15px}.pdf-excel-settings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.pdf-excel-settings>label{min-width:0;display:grid;align-content:start;gap:7px;padding:13px;border:1px solid #d6e2e0;border-radius:15px;background:#fff}.pdf-excel-settings label>span{display:flex;justify-content:space-between;gap:8px;color:#375653;font-weight:750;font-size:12px}.pdf-excel-settings label>span b{color:#087b70}.pdf-excel-settings input[type="text"],.pdf-excel-settings input:not([type]),.pdf-excel-settings select{width:100%;min-width:0;height:43px;padding:0 10px;border:1px solid #c6d8d5;border-radius:10px;color:#173d42;background:#fff;font:700 13px "Anuphan",sans-serif}.pdf-excel-settings input[type="range"]{width:100%;accent-color:#087d70}.pdf-excel-settings .pdf-excel-check{grid-template-columns:auto 1fr;align-items:center}.pdf-excel-check input{width:19px;height:19px;accent-color:#087d70}.pdf-excel-check>span{display:grid!important}.pdf-excel-check small{color:#7b8d8a;font-size:10px}.pdf-excel-preview{min-width:0;overflow:hidden;border:1px solid #d1dfdd;border-radius:19px;background:#fff;box-shadow:0 13px 29px rgba(12,63,65,.07)}.pdf-excel-preview>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid #dce7e5;background:linear-gradient(145deg,#fff,#f0f8f7)}.pdf-excel-preview h3{margin:2px 0;color:#143c46}.pdf-excel-preview small{color:#738784}.pdf-excel-preview em{padding:6px 9px;border-radius:99px;color:#0b675e;background:#daf6ef;font-size:11px;font-style:normal;font-weight:750}#pdfExcelPreview{max-width:100%;overflow:auto}#pdfExcelPreview table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px}#pdfExcelPreview th,#pdfExcelPreview td{min-width:120px;max-width:260px;padding:10px 12px;border-right:1px solid #e0e9e7;border-bottom:1px solid #e0e9e7;overflow:hidden;color:#304e51;text-overflow:ellipsis;white-space:nowrap;text-align:left}#pdfExcelPreview th{position:sticky;top:0;color:#fff;background:#087c70}#pdfExcelPreview tr:nth-child(even) td{background:#f7faf9}#pdfExcelPreview>p{margin:0;padding:24px;color:#738684;text-align:center}.pdf-excel-run{min-height:52px;border-radius:14px!important}.pdf-excel-progress{display:grid;gap:7px;padding:12px;border:1px solid #c8ded9;border-radius:13px;background:#eff9f7}.pdf-excel-progress>div{height:8px;overflow:hidden;border-radius:99px;background:#d3e8e4}.pdf-excel-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#0a9c82,#247bd3);transition:width .2s}.pdf-excel-progress span{color:#4a6966;font-weight:700}.pdf-excel-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #a9dccf;border-radius:17px;background:linear-gradient(145deg,#e9faf5,#f4fbff)}.pdf-excel-result>span{min-width:0;display:flex;align-items:center;gap:11px}.pdf-excel-result>span>svg{flex:0 0 45px;width:45px;height:45px;padding:11px;border-radius:14px;color:#fff;background:#0a9b79}.pdf-excel-result b,.pdf-excel-result small{display:block}.pdf-excel-result small{color:#69817d}.pdf-excel-result a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#087c6d,#075577);font-weight:750}.pdf-excel-result a svg{width:16px}
@media(max-width:760px){.pdf-excel-settings{grid-template-columns:1fr 1fr}.pdf-excel-settings>label:last-child{grid-column:1/-1}.pdf-excel-intro em{display:none}}
@media(max-width:540px){.pdf-excel-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.pdf-excel-intro>span{width:46px;height:46px}.pdf-excel-intro p{font-size:12px}.pdf-excel-mode{grid-template-columns:1fr}.pdf-excel-drop label{align-items:flex-start;flex-wrap:wrap}.pdf-excel-drop strong{width:100%;text-align:center}.pdf-excel-workspace>header{align-items:flex-start;flex-direction:column}.pdf-excel-workspace>header button{width:100%;justify-content:center}.pdf-excel-settings{grid-template-columns:1fr}.pdf-excel-settings>label:last-child{grid-column:auto}.pdf-excel-preview>header{align-items:flex-start;flex-direction:column}.pdf-excel-result{grid-template-columns:1fr}.pdf-excel-result a{width:100%}}

/* EPUB to PDF */
.epub-studio{min-width:0;display:grid;gap:18px}.epub-studio [hidden]{display:none!important}.epub-intro{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 24px;border:1px solid #d1bdd9;border-radius:24px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(255,111,77,.28),transparent 34%),linear-gradient(125deg,#211033,#5c246d 57%,#243877);box-shadow:0 18px 40px rgba(65,27,82,.2)}.epub-intro>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#612b4b;background:linear-gradient(145deg,#fff1c9,#ff806c);box-shadow:0 12px 25px rgba(255,107,86,.25)}.epub-intro small{color:#ffd5a8;font-weight:800}.epub-intro h3{margin:2px 0;font:700 clamp(22px,3vw,31px)/1.2 "Chakra Petch","Anuphan",sans-serif}.epub-intro p{margin:0;color:#f0e4f2}.epub-intro em{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid rgba(255,255,255,.27);border-radius:99px;color:#e5ff7c;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.epub-intro em svg{width:14px}.epub-drop{border:2px dashed #c9a7d2;border-radius:21px;background:linear-gradient(145deg,#fbf2fb,#f6f5ff)}.epub-drop.dragging,.epub-drop.loading{border-color:#8b3d98;background:#f6e9f7}.epub-drop label{display:flex;align-items:center;gap:14px;min-height:120px;padding:21px;cursor:pointer}.epub-drop label>svg{width:43px;height:43px;color:#8c3d96}.epub-drop label>span{min-width:0;display:grid;flex:1}.epub-drop b{color:#49254d}.epub-drop small{color:#867387}.epub-drop strong{padding:11px 16px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#963f95,#55419a);box-shadow:0 9px 18px rgba(104,48,128,.2)}.epub-drop p{margin:0 18px 13px;color:#b42d48;font-weight:700}.epub-drop p:empty{display:none}.epub-workspace{min-width:0;display:grid;gap:13px}.epub-filebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #ded4e3;border-radius:15px;background:#fff}.epub-filebar>span{min-width:0;display:flex;align-items:center;gap:10px}.epub-filebar>span>svg{width:38px;height:38px;padding:8px;border-radius:11px;color:#fff;background:#873b91}.epub-filebar b,.epub-filebar small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.epub-filebar small{color:#827685}.epub-filebar button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #d7c9dd;border-radius:11px;color:#67536b;background:#fcf8fc;font:700 12px "Anuphan",sans-serif;cursor:pointer}.epub-filebar button svg{width:15px}.epub-layout{min-width:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:12px}.epub-chapters,.epub-options{min-width:0;padding:15px;border:1px solid #ddd4e3;border-radius:19px;background:#fff}.epub-chapters>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.epub-chapters h3{margin:1px 0;color:#392241}.epub-chapters small{color:#827687}.epub-chapters header div{display:flex;gap:5px}.epub-chapters header button,#epubChapterList button{min-height:32px;padding:0 9px;border:1px solid #d8c8df;border-radius:9px;color:#754078;background:#fbf4fb;font:700 10px "Anuphan",sans-serif;cursor:pointer}#epubChapterList{display:grid;gap:6px;max-height:360px;overflow:auto}#epubChapterList label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid #e5dde8;border-radius:12px;background:#fcfafc}#epubChapterList input{width:18px;height:18px;accent-color:#8a3d96}#epubChapterList span{min-width:0}#epubChapterList b,#epubChapterList small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#epubChapterList b{color:#45304a;font-size:12px}#epubChapterList small{font-size:10px}.epub-options{display:grid;align-content:start;gap:10px}.epub-options>label{display:grid;gap:6px;color:#58475c;font-weight:750;font-size:12px}.epub-options>label>span{display:flex;justify-content:space-between}.epub-options input[type="range"]{width:100%;accent-color:#8b3d96}.epub-options input[type="text"],.epub-options>label>input:not([type]),.epub-options select{width:100%;height:42px;padding:0 10px;border:1px solid #d7cadc;border-radius:10px;color:#3e2944;background:#fff;font:700 12px "Anuphan",sans-serif}.epub-options fieldset{display:grid;gap:7px;padding:11px;border:1px solid #e0d6e4;border-radius:12px}.epub-options legend{padding:0 5px;color:#5e4962;font-weight:750;font-size:11px}.epub-options fieldset label{display:flex;align-items:center;gap:7px;color:#66546a;font-size:11px;font-weight:650}.epub-options fieldset input{accent-color:#8a3d96}.epub-options .tool-primary{min-height:49px;border-radius:13px!important}.epub-preview{min-width:0;overflow:hidden;border:1px solid #ddd4e3;border-radius:19px;background:#fff;box-shadow:0 13px 29px rgba(70,35,77,.07)}.epub-preview>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e4dce8;background:linear-gradient(145deg,#fff,#faf5fb)}.epub-preview h3{margin:1px 0;color:#43294a}.epub-preview small{color:#847887}.epub-preview em{padding:6px 9px;border-radius:99px;color:#713d77;background:#f1e2f3;font-size:10px;font-style:normal;font-weight:750}#epubPreview{max-height:310px;overflow:auto;padding:18px 22px;color:#3d3847;line-height:1.85}#epubPreview h4{margin:5px 0 12px;color:#3c2750;font-size:19px}#epubPreview p{margin:0 0 11px}.epub-progress{display:grid;gap:7px;padding:12px;border:1px solid #ddcde2;border-radius:13px;background:#faf2fb}.epub-progress>div{height:8px;overflow:hidden;border-radius:99px;background:#e8dbea}.epub-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#a33e91,#ec654f)}.epub-progress span{color:#68546d;font-weight:700}.epub-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #b4decf;border-radius:17px;background:#ecfaf6}.epub-result>span{min-width:0;display:flex;align-items:center;gap:10px}.epub-result>span>svg{flex:0 0 45px;width:45px;height:45px;padding:11px;border-radius:14px;color:#fff;background:#159b79}.epub-result b,.epub-result small{display:block}.epub-result small{color:#6f817c}.epub-result a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#863c91,#51419b);font-weight:750}.epub-result a svg{width:16px}
@media(max-width:780px){.epub-layout{grid-template-columns:1fr}.epub-intro em{display:none}}
@media(max-width:540px){.epub-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.epub-intro>span{width:46px;height:46px}.epub-intro p{font-size:12px}.epub-drop label{align-items:flex-start;flex-wrap:wrap}.epub-drop strong{width:100%;text-align:center}.epub-filebar{align-items:flex-start;flex-direction:column}.epub-filebar button{width:100%;justify-content:center}.epub-chapters>header{align-items:flex-start;flex-direction:column}.epub-result{grid-template-columns:1fr}.epub-result a{justify-content:center}.epub-preview>header{align-items:flex-start;flex-direction:column}}

/* PDF password */
.pdf-password-studio{min-width:0;display:grid;gap:18px}.pdf-password-studio [hidden]{display:none!important}.pdf-password-intro{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 24px;border:1px solid #d2b7c4;border-radius:24px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(38,92,245,.36),transparent 35%),linear-gradient(125deg,#340d25,#891d42 55%,#231766);box-shadow:0 18px 40px rgba(83,20,55,.22)}.pdf-password-intro>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#272066;background:linear-gradient(145deg,#fff1c5,#ffb13c);box-shadow:0 12px 26px rgba(255,176,54,.25)}.pdf-password-intro small{color:#ffc5be;font-weight:800}.pdf-password-intro h3{margin:2px 0;font:700 clamp(22px,3vw,31px)/1.2 "Chakra Petch","Anuphan",sans-serif}.pdf-password-intro p{margin:0;color:#f5e1e8}.pdf-password-intro em{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:#dfff78;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.pdf-password-intro em svg{width:14px}.pdf-password-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border:1px solid #e0d2d9;border-radius:18px;background:#f7eff2}.pdf-password-mode button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:49px;border:0;border-radius:13px;color:#7a5d69;background:transparent;font:750 14px "Anuphan",sans-serif;cursor:pointer}.pdf-password-mode button.active{color:#fff;background:linear-gradient(135deg,#d9314c,#5334ad);box-shadow:0 10px 22px rgba(146,40,81,.25)}.pdf-password-mode svg{width:17px}.pdf-password-drop{border:2px dashed #d1a9b9;border-radius:21px;background:linear-gradient(145deg,#fff4f6,#f7f5ff)}.pdf-password-drop.dragging{border-color:#d63350;background:#fcebed}.pdf-password-drop label{display:flex;align-items:center;gap:14px;min-height:120px;padding:21px;cursor:pointer}.pdf-password-drop label>svg{width:43px;height:43px;color:#c62d4b}.pdf-password-drop label>span{min-width:0;display:grid;flex:1}.pdf-password-drop b{color:#4e2535}.pdf-password-drop small{color:#87727b}.pdf-password-drop strong{padding:11px 16px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#d6334d,#5436a9);box-shadow:0 9px 18px rgba(143,41,83,.22)}.pdf-password-drop p{margin:0 18px 13px;color:#b42d48;font-weight:700}.pdf-password-drop p:empty{display:none}.pdf-password-workspace{min-width:0;display:grid;gap:13px}.pdf-password-workspace>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #e0d4da;border-radius:15px;background:#fff}.pdf-password-workspace>header>span{min-width:0;display:flex;align-items:center;gap:10px}.pdf-password-workspace>header>span>svg{width:38px;height:38px;padding:8px;border-radius:11px;color:#fff;background:#ca304b}.pdf-password-workspace>header b,.pdf-password-workspace>header small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdf-password-workspace>header small{color:#85747b}.pdf-password-workspace>header button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid #dbcbd2;border-radius:11px;color:#6c5360;background:#fff9fa;font:700 12px "Anuphan",sans-serif;cursor:pointer}.pdf-password-workspace>header button svg{width:15px}.pdf-password-panel{min-width:0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr);gap:12px}.pdf-password-fields,.pdf-permissions,.pdf-unlock-panel{display:grid;align-content:start;gap:11px;padding:16px;border:1px solid #dfd3d9;border-radius:19px;background:#fff}.pdf-password-fields>label,.pdf-unlock-panel label{display:grid;gap:6px;color:#5d4550;font-size:12px;font-weight:750}.pdf-password-fields label>div,.pdf-unlock-panel label>div{display:grid;grid-template-columns:minmax(0,1fr) 42px;overflow:hidden;border:1px solid #d7c7ce;border-radius:11px;background:#fff}.pdf-password-fields input,.pdf-unlock-panel input{min-width:0;height:44px;padding:0 11px;border:0;outline:none;color:#4b2939;font:700 13px "Anuphan",sans-serif}.pdf-password-fields button,.pdf-unlock-panel button{display:grid;place-items:center;border:0;border-left:1px solid #e1d4d9;color:#8b5369;background:#fff8fa;cursor:pointer}.pdf-password-fields button svg,.pdf-unlock-panel button svg{width:16px}.pdf-permissions header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}.pdf-permissions h3{margin:1px 0;color:#492a38}.pdf-permissions small{color:#8c7880}.pdf-permissions header>b{padding:6px 8px;border-radius:8px;color:#74213b;background:#ffe1e6;font:800 11px "Chakra Petch",sans-serif}.pdf-permissions>label{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #e7dce1;border-radius:12px;background:#fffafb}.pdf-permissions input{width:19px;height:19px;accent-color:#cc314c}.pdf-permissions label>span{display:flex;align-items:center;gap:8px;color:#5e4450}.pdf-permissions label svg{width:18px;color:#b82b49}.pdf-unlock-panel{grid-template-columns:60px minmax(0,1fr);align-items:start;padding:22px;background:linear-gradient(145deg,#fff,#f8f5ff)}.pdf-unlock-panel>span{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;color:#fff;background:linear-gradient(145deg,#d93850,#5237aa)}.pdf-unlock-panel h3{margin:2px 0;color:#412a52}.pdf-unlock-panel p{margin:0 0 15px;color:#796b80}.pdf-unlock-panel small{color:#9a4462;font-weight:800}.pdf-password-output{display:grid;gap:6px;padding:13px;border:1px solid #e0d5da;border-radius:14px;color:#654c58;background:#fff;font-size:11px;font-weight:750}.pdf-password-output input{height:42px;padding:0 10px;border:1px solid #d8c9d0;border-radius:10px;color:#4a2e3a;font:700 13px "Anuphan",sans-serif}.pdf-password-run{min-height:52px;border-radius:14px!important}.pdf-password-progress{display:grid;gap:7px;padding:12px;border:1px solid #dfced6;border-radius:13px;background:#fff2f5}.pdf-password-progress>div{height:8px;overflow:hidden;border-radius:99px;background:#ecdde3}.pdf-password-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#df334d,#5a38b4);transition:width .25s}.pdf-password-progress span{color:#6f505c;font-weight:700}.pdf-password-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #acdcca;border-radius:17px;background:#eafaf5}.pdf-password-result>span{min-width:0;display:flex;align-items:center;gap:10px}.pdf-password-result>span>svg{flex:0 0 45px;width:45px;height:45px;padding:11px;border-radius:14px;color:#fff;background:#159b79}.pdf-password-result b,.pdf-password-result small{display:block}.pdf-password-result small{color:#6d817a}.pdf-password-result a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#cf304b,#5236a8);font-weight:750}.pdf-password-result a svg{width:16px}.pdf-password-rules{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #f0d18f;border-radius:15px;background:#fff8df}.pdf-password-rules>span{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;color:#77451e;background:#ffd56a}.pdf-password-rules span svg{width:18px}.pdf-password-rules p{margin:0;color:#715b3e;line-height:1.65}
@media(max-width:760px){.pdf-password-panel{grid-template-columns:1fr}.pdf-password-intro em{display:none}}
@media(max-width:540px){.pdf-password-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.pdf-password-intro>span{width:46px;height:46px}.pdf-password-intro p{font-size:12px}.pdf-password-mode{grid-template-columns:1fr}.pdf-password-drop label{align-items:flex-start;flex-wrap:wrap}.pdf-password-drop strong{width:100%;text-align:center}.pdf-password-workspace>header{align-items:flex-start;flex-direction:column}.pdf-password-workspace>header button{width:100%;justify-content:center}.pdf-unlock-panel{grid-template-columns:46px minmax(0,1fr);padding:16px}.pdf-unlock-panel>span{width:46px;height:46px}.pdf-password-result{grid-template-columns:1fr}.pdf-password-result a{justify-content:center}}

/* URL shortener */
.url-shortener-studio{min-width:0;display:grid;gap:18px}.url-shortener-studio [hidden]{display:none!important}.url-shortener-intro{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 24px;border:1px solid #bad0da;border-radius:24px;color:#fff;background:radial-gradient(circle at 86% 0,rgba(255,104,80,.27),transparent 34%),linear-gradient(125deg,#061a3c,#074d72 57%,#087f7a);box-shadow:0 18px 40px rgba(7,55,88,.2)}.url-shortener-intro>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#082d55;background:linear-gradient(145deg,#fff2c5,#ffb64a);box-shadow:0 12px 25px rgba(255,179,65,.25)}.url-shortener-intro small{color:#9ef4e6;font-weight:800}.url-shortener-intro h3{margin:2px 0;font:700 clamp(22px,3vw,31px)/1.2 "Chakra Petch","Anuphan",sans-serif}.url-shortener-intro p{margin:0;color:#dfedf6}.url-shortener-intro em{display:flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid rgba(255,255,255,.27);border-radius:99px;color:#dfff7a;background:rgba(255,255,255,.08);font:700 11px "Chakra Petch",sans-serif;font-style:normal}.url-shortener-intro em svg{width:14px}.url-shortener-form{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:end;gap:10px;padding:18px;border:1px solid #d2e0e5;border-radius:20px;background:linear-gradient(145deg,#fff,#f4f9fb);box-shadow:0 13px 30px rgba(11,55,84,.07)}.url-shortener-form>label{min-width:0;display:grid;gap:7px;color:#385368;font-weight:750;font-size:12px}.url-shortener-form label>div{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;overflow:hidden;border:1px solid #c5d7df;border-radius:12px;background:#fff}.url-shortener-form label>div>svg{justify-self:center;width:18px;color:#0a7287}.url-shortener-form input,.url-shortener-form select{min-width:0;height:47px;padding:0 11px;border:1px solid #c5d7df;border-radius:12px;color:#153b52;background:#fff;font:700 13px "Anuphan",sans-serif;outline:none}.url-shortener-form label>div input{border:0;border-left:1px solid #e0e8eb;border-radius:0}.url-shortener-form input:focus,.url-shortener-form select:focus{border-color:#0b8292;box-shadow:0 0 0 4px rgba(11,130,146,.1)}.url-shortener-form .tool-primary{min-height:47px;padding-inline:18px;border-radius:12px!important;white-space:nowrap}.shorten-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:shorten-spin .7s linear infinite}@keyframes shorten-spin{to{transform:rotate(360deg)}}.url-shortener-error{margin:0;color:#b92e48;font-weight:700;text-align:center}.url-shortener-error:empty{display:none}.url-shortener-result{display:grid;grid-template-columns:minmax(0,1fr) 230px;overflow:hidden;border:1px solid #a9d8d1;border-radius:22px;background:#fff;box-shadow:0 18px 37px rgba(8,70,86,.11)}.url-shortener-result-copy{min-width:0;display:grid;align-content:center;gap:15px;padding:24px;background:radial-gradient(circle at 95% 0,rgba(70,227,195,.18),transparent 36%),linear-gradient(145deg,#061d47,#0a5275)}.url-shortener-result-copy small{color:#9aeedc;font-weight:700}.url-shortener-result-copy h3{max-width:100%;margin:3px 0;overflow:hidden;color:#fff;font:700 clamp(21px,3vw,31px)/1.25 "Chakra Petch","Anuphan",sans-serif;text-overflow:ellipsis;white-space:nowrap}.url-shortener-result-copy>div{display:flex;flex-wrap:wrap;gap:8px}.url-shortener-result-copy button,.url-shortener-result-copy a{display:flex;align-items:center;gap:6px;min-height:39px;padding:0 11px;border:1px solid rgba(255,255,255,.3);border-radius:11px;color:#fff;background:rgba(255,255,255,.1);font:700 11px "Anuphan",sans-serif;cursor:pointer}.url-shortener-result-copy svg{width:15px}.url-shortener-result-copy p{margin:0;color:#b9d1df;font-size:11px}.url-shortener-qr{display:grid;place-items:center;align-content:center;gap:8px;padding:18px;background:linear-gradient(145deg,#f8fffd,#e7f5f2)}#shortUrlQr{padding:9px;border:1px solid #b9d8d1;border-radius:14px;background:#fff}#shortUrlQr img,#shortUrlQr canvas{display:block;width:150px!important;height:150px!important}.url-shortener-qr button{display:flex;align-items:center;gap:5px;min-height:36px;padding:0 10px;border:1px solid #afd0c8;border-radius:10px;color:#17685f;background:#fff;font:700 10px "Anuphan",sans-serif;cursor:pointer}.url-shortener-qr button svg{width:14px}.url-shortener-history{display:grid;gap:10px;padding:16px;border:1px solid #d5e1e5;border-radius:19px;background:#fff}.url-shortener-history>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.url-shortener-history h3{display:flex;align-items:center;gap:7px;margin:1px 0;color:#173b52}.url-shortener-history h3 svg{width:18px}.url-shortener-history small{color:#778b94}.url-shortener-history>header button{min-height:34px;padding:0 9px;border:1px solid #d1dde1;border-radius:9px;color:#657b84;background:#f8fbfc;font:700 10px "Anuphan",sans-serif;cursor:pointer}#shortUrlHistory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#shortUrlHistory>p{grid-column:1/-1;margin:10px;color:#7d8f96;text-align:center}#shortUrlHistory article{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:9px;border:1px solid #e0e8ea;border-radius:12px;background:#f9fbfc}#shortUrlHistory article>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff;background:#0a7f8c;font-weight:800}#shortUrlHistory article div{min-width:0}#shortUrlHistory a,#shortUrlHistory small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#shortUrlHistory a{color:#126388;font-weight:750;font-size:11px}#shortUrlHistory small{font-size:9px}#shortUrlHistory button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;color:#0a7082;background:#e9f5f5;cursor:pointer}#shortUrlHistory button svg{width:14px}#shortUrlHistory button.copied{color:#fff;background:#11a67b}.url-shortener-note{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #c8d9e0;border-radius:15px;background:#f1f7fa}.url-shortener-note>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;color:#fff;background:#0a7891}.url-shortener-note span svg{width:18px}.url-shortener-note p{margin:0;color:#4e6873;line-height:1.65}
@media(max-width:760px){.url-shortener-form{grid-template-columns:1fr 140px}.url-shortener-form .tool-primary{grid-column:1/-1}.url-shortener-intro em{display:none}.url-shortener-result{grid-template-columns:1fr 200px}#shortUrlHistory{grid-template-columns:1fr}}
@media(max-width:540px){.url-shortener-intro{grid-template-columns:46px minmax(0,1fr);align-items:flex-start;padding:17px}.url-shortener-intro>span{width:46px;height:46px}.url-shortener-intro p{font-size:12px}.url-shortener-form{grid-template-columns:1fr;padding:14px}.url-shortener-form .tool-primary{grid-column:auto}.url-shortener-result{grid-template-columns:1fr}.url-shortener-result-copy{padding:18px}.url-shortener-result-copy h3{white-space:normal;word-break:break-all}.url-shortener-qr{padding:15px}.url-shortener-history>header{align-items:flex-start;flex-direction:column}.url-shortener-history>header button{width:100%}}