:root{--bg:#F5F5DC;--input-bg:#f6f7fa;--surface:#fff;--text:#202635;--muted:#647084;--border:#e3e7ee;--primary:#5145cd;--soft:#eeecfc;--radius:8px;font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}
*{box-sizing:border-box}body{margin:0}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button,input{border-radius:6px}button{border:1px solid var(--border);background:white;padding:.5rem .8rem;color:var(--text)}:focus-visible{outline:3px solid #8074ee;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.65rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.035em}h2{font-size:1.1rem}h3{font-size:.95rem}p{color:var(--muted)}.sr-only,.skip-link{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{width:auto;height:auto;clip-path:none;top:8px;left:8px;padding:10px;background:white;z-index:100}
.site-header{position:sticky;top:0;z-index:20;background:#cdcd9f;border-bottom:1px solid var(--border)}.header-inner{max-width:1440px;min-height:68px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:9px;min-width:208px;font-size:1.3rem;font-weight:750;color:var(--text);letter-spacing:-.04em}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;padding-bottom:3px;background:var(--primary);color:white;border-radius:8px;font-size:1.4rem;line-height:1;letter-spacing:0}.directory-search{display:flex;width:100%;margin:0 0 24px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg)}.directory-search input{width:100%;min-width:0;border:0;background:transparent;padding:9px 12px;color:var(--text)}.directory-search button{border:0;background:transparent;font-size:.8rem;color:var(--muted)}.header-caption{margin-left:auto;font-size:.8rem;color:var(--muted)}.menu-toggle,.menu-close{display:none}
.site-shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 69px)}.sidebar{padding:25px 16px;border-right:1px solid var(--border);position:sticky;top:69px;height:calc(100dvh - 69px);overflow:auto}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;padding:0 10px 15px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.nav-link{display:block;padding:8px 10px;font-size:.85rem;color:var(--muted);border-radius:6px}.nav-link:hover{background:#eaeef5;text-decoration:none;color:var(--text)}.nav-link[aria-current=page]{background:var(--soft);color:var(--primary);font-weight:650}.sidebar details{margin-top:10px}.sidebar summary{padding:8px 10px;font-weight:650;font-size:.86rem;cursor:pointer}.nav-link.nested{padding-left:26px;font-size:.82rem}.sidebar-note{border-top:1px solid var(--border);margin:28px 10px 14px;padding-top:20px;font-size:.77rem}.sidebar-note strong{font-weight:600}.sidebar-note p{margin-top:5px}
.content-column{min-width:0;display:flex;flex-direction:column}main{padding:32px 36px 60px;flex:1;min-width:0}.page-heading{margin-bottom:30px}.page-heading p{margin-top:10px;font-size:.94rem}.page-heading .eyebrow{margin:0 0 7px}.eyebrow{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--primary)}.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:22px}.directory-heading span{font-size:.76rem;color:var(--muted)}.directory-group{margin-bottom:24px}.category-heading{margin-bottom:12px}.category-heading h2 a{color:var(--text)}.category-heading p{font-size:.82rem;margin-top:3px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.tool-card:hover{border-color:#b9b1ed;background:#fdfcff}.tool-card h3 a{color:var(--text)}.tool-card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}.tool-card:focus-within{outline:2px solid var(--primary);outline-offset:2px}.tool-card p{font-size:.8rem;margin-top:4px}.tool-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:42px;background:var(--soft);color:var(--primary);font-size:.64rem;font-weight:750;border-radius:6px;letter-spacing:.04em}.tool-arrow{margin-left:auto;color:#929bab}.coming-next{margin-top:36px;padding:22px;border:1px dashed #cdd3df;border-radius:var(--radius)}.coming-next h2{margin:7px 0;font-size:1rem}.coming-next p{font-size:.85rem}.coming-next .muted{margin-top:12px;font-size:.77rem}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;color:var(--muted);margin-bottom:22px}.breadcrumbs a{color:var(--muted)}.site-footer{padding:20px 36px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;font-size:.73rem;color:var(--muted)}.site-footer nav{display:flex;gap:16px}.site-footer a{color:var(--muted)}
.tool-box{background:#fff;box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.75);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:900px}.tool-box h2{margin-bottom:16px}.notice{padding:12px 15px;background:#fff8e7;border:1px solid #eddfb8;border-radius:6px;font-size:.82rem;margin:18px 0}.tool-form{display:grid;gap:20px}.field-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(150px,1fr);gap:20px}label{display:grid;gap:7px;font-size:.85rem;font-weight:600}input[type=file],input[type=number]{max-width:100%;min-width:0;width:100%;border:1px solid var(--border);background:var(--input-bg);padding:10px;color:var(--text)}input::file-selector-button{border:1px solid var(--border);background:white;border-radius:4px;padding:5px 8px;margin-right:10px;color:var(--text)}.primary-button{justify-self:start;background:var(--primary);color:white;border-color:var(--primary);padding:9px 20px}.privacy-badge{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;color:var(--muted);margin-top:20px}.privacy-badge strong{color:#247358}.tool-help{margin-top:28px;max-width:75ch}.tool-help h2{margin-bottom:8px}.tool-help p,.tool-help li{font-size:.88rem;color:var(--muted)}.tool-help ol{padding-left:22px}.related-links{display:flex;flex-wrap:wrap;gap:15px;font-size:.85rem}.prose>h1,.prose>p{max-width:70ch}.prose>h1{margin-bottom:20px}.prose>p{margin-bottom:16px;font-size:.94rem}.status:empty,.download-list:empty{display:none}
@media(min-width:761px) and (max-width:1050px){.header-caption{display:none}.tool-grid{grid-template-columns:1fr}main{padding:28px 24px}}
@media(max-width:760px){.header-inner{padding:12px 16px;gap:14px;flex-wrap:wrap}.brand{min-width:0;font-size:1.2rem}.header-caption{display:none}.site-shell{display:block;min-height:calc(100dvh - 68px)}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}.js-ready .menu-toggle,.js-ready .menu-close{display:block}.menu-toggle{font-size:.8rem}.js-ready .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(300px,85vw);height:100dvh;background:var(--surface);transform:translateX(-100%);visibility:hidden;padding-top:18px}.js-ready.menu-open .sidebar{transform:none;visibility:visible}.menu-backdrop{position:fixed;inset:0;background:rgba(20,25,40,.45);z-index:40}.menu-open{overflow:hidden}.menu-close{font-size:1.4rem;padding:0 9px}.sidebar-heading{padding-bottom:12px}main{padding:24px 18px 40px}.page-heading{margin-bottom:24px}.tool-grid{grid-template-columns:1fr}.directory-heading{align-items:flex-start}.directory-heading span{max-width:150px;text-align:right}.site-footer{padding:20px 18px;flex-wrap:wrap}.field-row{grid-template-columns:1fr}.tool-box{padding:18px}.coming-next{padding:18px}.breadcrumbs{font-size:.7rem}}

/* Text splitter */
.splitter-settings { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.field-hint { font-size: .77rem; }
.split-options { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; display: grid; gap: 12px; min-width: 0; }
.split-options legend { font-size: .85rem; font-weight: 600; padding: 0 5px; }
.split-options label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.split-options label span { font-size: .77rem; font-weight: 400; color: var(--muted); }
.split-options input { accent-color: var(--primary); }
.encoding-field { max-width: 350px; }
.encoding-field select { padding: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; max-width: 100%; }
#split-status:not(:empty) { margin-top: 20px; font-size: .88rem; }
#split-status.error { color: #ac2424; }
#split-progress { width: 100%; margin-top: 12px; accent-color: var(--primary); }
#cancel-split { margin-top: 16px; }
.download-link { display: inline-block; margin-top: 16px; border: 1px solid var(--primary); border-radius: 6px; padding: 10px 15px; overflow-wrap: anywhere; }
.tool-help p + p { margin-top: 10px; }



#splitter-settings > #split-button { justify-self: end; }


/* Text file generator */
#generate-button { justify-self: end; }
#filename { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); }
#generator-status:not(:empty) { margin-top: 20px; font-size: .88rem; }
#generator-status.error { color: #ac2424; }
.size-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.size-presets button { font-size: .78rem; }
.shape-figure { margin: 0; text-align: center; }
.shape-stage { min-height: 170px; display: grid; place-items: center; background: var(--input-bg); border-radius: 6px; padding: 10px; }
#shape-preview { background: #fff; border: 2px solid var(--muted); }
#shape-caption { font-size: .8rem; color: var(--muted); margin-top: 8px; }
#cancel-generate { margin-top: 16px; }
/* Picture preview with dimensions outside the image. */
.shape-stage { min-height: 220px; overflow: auto; }
.shape-diagram { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-items: center; gap: 8px 12px; }
#shape-preview { grid-column: 1; grid-row: 1; display: block; border: 1px solid var(--muted); }
.shape-width { grid-column: 1; grid-row: 2; }
.shape-height { grid-column: 2; grid-row: 1; writing-mode: vertical-rl; }
.shape-width, .shape-height { font-size: .78rem; color: var(--text); white-space: nowrap; }
/* Text file counter */
#count-button { justify-self: end; }
#counter-status:not(:empty) { margin-top: 20px; font-size: .88rem; }
#counter-status.error { color: #ac2424; }
#count-progress { width: 100%; margin-top: 12px; accent-color: var(--primary); }
#counter-results { margin-top: 24px; }
#count-filename { overflow-wrap: anywhere; font-size: .85rem; }
.counter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.counter-grid > div { background: var(--input-bg); padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.counter-grid dt { color: var(--muted); font-size: .82rem; }
.counter-grid dd { margin: 5px 0 0; font-size: 1.3rem; font-weight: 650; overflow-wrap: anywhere; }
.counter-grid #size-detail { font-size: .8rem; font-weight: 400; color: var(--muted); }
@media (max-width: 420px) { .counter-grid { grid-template-columns: 1fr; } }
/* Live character counter */
.character-total { padding: 20px 12px 24px; margin-bottom: 22px; text-align: center; background: var(--soft); border: 1px solid var(--border); border-radius: 8px; }
.character-total output { display: block; color: var(--primary); font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.character-total span { display: block; margin-top: 4px; font-size: 1.05rem; font-weight: 650; }
.character-total p { margin-top: 8px; font-size: .78rem; }
#character-text, #word-text { display: block; width: 100%; margin-top: 8px; min-height: 240px; resize: vertical; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; line-height: 1.65; }
.character-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.character-actions button { flex-shrink: 0; }

/* Shared live case converters */
.case-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.case-columns textarea { width: 100%; min-width: 0; min-height: 260px; resize: vertical; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-weight: 400; line-height: 1.65; }
.case-columns textarea[readonly] { border-color: #c6c0ef; }
.case-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
#case-status:not(:empty) { margin-bottom: 12px; color: #247358; font-size: .85rem; }
@media (max-width: 760px) { .case-columns { grid-template-columns: 1fr; } .case-columns textarea { min-height: 180px; } }
/* Quick navigation between case converters. */
.case-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.case-switcher a { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600; }
.case-switcher a:hover { border-color: var(--primary); text-decoration: none; }
.case-switcher a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: white; }
.trim-setting { max-width: 400px; }
.trim-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
#trim-status { font-size: .85rem; }
#trim-status:empty { display: none; }
#trim-status.error { color: #ac2424; }

#lines-status { font-size: .85rem; }
#lines-status:empty { display: none; }
/* Age calculator */
.birth-date-label { max-width: 340px; margin: 16px 0 8px; }
#birth-date { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
.age-total { margin: 24px 0 16px; }
.age-total > p { margin: 0 0 8px; }
.age-as-of { margin-top: 16px; font-size: .8rem; }
#age-status { margin-top: 12px; font-size: .85rem; }
/* Date arithmetic and comparisons */
#date-tool-form input[type="date"] { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
.date-amounts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.date-calculate { justify-self: end; }
#date-tool-result { margin-top: 24px; }
#result-date { display: block; font-size: clamp(1.8rem,5vw,3.5rem); color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
#date-tool-status { margin-top: 14px; font-size: .85rem; }
#date-tool-status.error { color: #ac2424; }
.date-remainder { display: block; font-size: .9rem; font-weight: 400; color: var(--muted); }
.date-difference-grid dd { color: var(--primary); font-size: 1.65rem; }
@media (max-width: 600px) { .date-amounts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Unix timestamp converter */
#unix-timestamp { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#unix-timestamp[aria-invalid="true"] { border-color: #ac2424; }
#timestamp-output { display: block; font-size: clamp(1.4rem,4vw,2.4rem); font-weight: 750; color: var(--primary); overflow-wrap: anywhere; }
#timestamp-status { margin-top: 14px; font-size: .85rem; }
/* Timezone converter */
#timezone-form input, #timezone-form select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#timezone-result { margin-top: 24px; }
#timezone-status { font-size: .85rem; }
.timezone-selects label { min-width: 0; }
.timezone-selection { display: grid; gap: 16px; min-width: 0; }
.timezone-now-actions { display: flex; justify-content: flex-end; width: 100%; }
.crypto-fields { display: grid; gap: 12px; margin-top: 20px; }
.crypto-fields textarea { width: 100%; min-width: 0; padding: 12px; resize: vertical; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: .95rem monospace; overflow-wrap: anywhere; }
#crypto-status { margin-top: 16px; font-size: .85rem; }
#validator-address { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
.validation-result { margin-top: 24px; padding: 24px; border: 2px solid; border-radius: 8px; text-align: center; }
.validation-result strong { display: block; font-size: clamp(2.5rem,7vw,4rem); line-height: 1.2; }
.validation-result p { margin: 12px 0 0; overflow-wrap: anywhere; }
.validation-result.is-valid { color: #14532d; background: #f0fdf4; border-color: #15803d; }
.validation-result.is-invalid { color: #991b1b; background: #fff1f2; border-color: #b91c1c; }
.color-canvas-wrap { background: repeating-conic-gradient(#e3e3e3 0% 25%, #fff 0% 50%) 0 / 16px 16px; margin-top: 16px; overflow: hidden; }
#color-image { display: block; max-width: 100%; height: auto; cursor: crosshair; }
#color-image:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.color-hover-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; min-height: 32px; font-size: .85rem; }
.color-swatch-small { display: inline-block; width: 30px; height: 30px; border: 1px solid var(--border); flex-shrink: 0; }
.color-swatch { height: 65px; border: 1px solid var(--border); border-radius: 6px; }
#color-selection { margin-top: 24px; }
.color-output-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.color-output-grid input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
.color-output-grid button { margin-top: 8px; }
#color-status, #color-image-info, #color-opacity { font-size: .85rem; overflow-wrap: anywhere; margin-top: 12px; }
@media(max-width: 650px) { .color-output-grid { grid-template-columns: 1fr; } }
.color-channel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
#color-convert-form input, #converted-color { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#converted-swatch { height: 180px; border: 1px solid var(--border); border-radius: 8px; margin: 20px 0; }
#converted-color { font-size: clamp(1rem,3vw,1.4rem); font-weight: 650; }
#copy-color-value { margin-top: 12px; }
#color-convert-status { margin-top: 14px; font-size: .85rem; }
@media(max-width: 420px) { .color-channel-grid { grid-template-columns: 1fr; } }
#pdf-drop { border: 2px dashed var(--border); border-radius: 8px; padding: 22px; background: var(--input-bg); }
#pdf-drop.is-dragging { border-color: var(--primary); background: var(--soft); }
#pdf-list { padding: 0; list-style: none; margin: 18px 0; }
.pdf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; background: var(--input-bg); }
.pdf-row[draggable="true"] { cursor: grab; }
.pdf-row-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pdf-row small { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; }
.pdf-row-actions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.pdf-row-actions button { font-size: .78rem; }
#pdf-filename { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); font: inherit; }
#pdf-status { white-space: pre-line; overflow-wrap: anywhere; margin-top: 16px; }
@media(max-width: 650px) { .pdf-row { align-items: stretch; flex-direction: column; } }
/* PDF upload and sortable previews */
#pdf-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; border: 3px dashed #8b80d6; background: #f5f2ff; text-align: center; transition: background .15s, border-color .15s; }
#pdf-drop.is-dragging { background: #e7e0ff; border-color: var(--primary); }
.pdf-drop-icon { width: 48px; height: 48px; color: var(--primary); }
.pdf-drop-title { font-size: 1.25rem; color: var(--text); }
.pdf-drop-or { color: var(--muted); font-size: .9rem; }
.pdf-select-label { position: relative; padding: 10px 18px; border-radius: 6px; background: var(--primary); color: white; overflow: hidden; cursor: pointer; }
.pdf-select-label:focus-within { outline: 3px solid #282052; outline-offset: 3px; }
.pdf-select-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pdf-row { display: grid; grid-template-columns: 22px 80px minmax(0,1fr) auto; gap: 14px; }
.pdf-drag-handle { font-size: 2rem; color: #706788; cursor: grab; line-height: 1; user-select: none; }
.pdf-preview { width: 80px; height: 100px; display: flex; align-items: center; justify-content: center; background: #e9e9ee; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.pdf-thumbnail { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 1px 4px #0002; }
.pdf-preview-unavailable { font-size: .7rem; text-align: center; color: var(--muted); }
.pdf-page-count { display: table; margin-top: 10px; padding: 4px 9px; border-radius: 5px; background: #e7e0ff; color: #45328d; font-size: 1rem; font-weight: 750; }
@media(max-width: 700px) { .pdf-row { grid-template-columns: 22px 70px minmax(0,1fr); align-items: center; } .pdf-preview { width: 70px; height: 90px; } .pdf-row-actions { grid-column: 2 / -1; } }
#pdf-page-strip { display: flex; gap: 14px; overflow-x: auto; padding: 14px; margin: 16px 0 24px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; }
#pdf-page-strip figure { flex: 0 0 130px; margin: 0; text-align: center; }
.pdf-page-preview { height: 150px; display: flex; align-items: center; justify-content: center; font-size: .75rem; background: #e5e5eb; }
.pdf-page-preview canvas { max-width: 120px; max-height: 140px; width: auto; height: auto; box-shadow: 0 1px 5px #0003; }
#pdf-page-strip figcaption { font-weight: 650; margin-top: 8px; }
#pdf-split-info { margin-top: 24px; overflow-wrap: anywhere; }
.pdf-range-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 6px; }
#pdf-split-status { margin-top: 16px; }
@media(max-width: 500px) { .pdf-range-row { grid-template-columns: 1fr 1fr; } .pdf-range-row button { grid-column: 1 / -1; } }
#random-pdf-progress { width: 100%; margin-top: 18px; }
#random-pdf-status { margin-top: 16px; }
#random-pdf-form .timezone-now-actions { gap: 10px; }
#image-pdf-list { list-style: none; padding: 0; margin: 18px 0; }
.image-pdf-thumbnail { width: 80px; height: 100px; object-fit: contain; background: white; border: 1px solid var(--border); border-radius: 4px; }
#image-pdf-name { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#image-pdf-status { white-space: pre-line; overflow-wrap: anywhere; margin-top: 16px; }
@media(max-width:700px) { .image-pdf-thumbnail { width: 70px; height: 90px; } }
.ab-variant, .ab-options { border: 1px solid var(--border); border-radius: 6px; padding: 16px; min-width: 0; }
.ab-variant legend, .ab-options legend { font-weight: 700; padding: 0 6px; }
.ab-variant label { margin-bottom: 12px; }
.ab-variant input { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit; }
.ab-options label { display: inline-flex; align-items: center; gap: 6px; margin-right: 20px; }
#ab-result > strong { font-size: clamp(1.8rem,5vw,3rem); }
#ab-result .counter-grid { margin-top: 20px; color: var(--text); }
#ab-status { margin-top: 14px; }
#watermark-form input, #watermark-form select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#watermark-file-info, #watermark-status { margin: 16px 0; overflow-wrap: anywhere; }
#pdf-password { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
#password-strength { width: 100%; height: 20px; }
#password-strength-label { margin-top: 6px; font-weight: 650; }
#pdf-password-info, #pdf-password-status { margin: 16px 0; overflow-wrap: anywhere; }
.pdf-selected-file { display: flex; align-items: center; gap: 18px; padding: 20px; margin: 20px 0; border: 2px solid #797950; border-radius: 10px; background: #f5f5dc; }
.pdf-selected-file[hidden] { display: none; }
.pdf-selected-icon { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 64px; border: 2px solid #ad3333; border-radius: 5px 14px 5px 5px; background: #fff; color: #ad3333; font-size: 14px; font-weight: 800; }
.pdf-selected-details { min-width: 0; }
.pdf-selected-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #55553b; }
.pdf-selected-name { display: block; margin: 5px 0 10px; font-size: clamp(18px, 2vw, 23px); line-height: 1.3; overflow-wrap: anywhere; }
.pdf-selected-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pdf-selected-size { font-size: 14px; color: #555; }
.pdf-selected-pages { padding: 4px 9px; border-radius: 5px; background: #fff; font-size: 15px; }
/* Marketing previews use fixed CSS-pixel canvases; narrow screens can scroll them. */
.marketing-tool input,.marketing-tool textarea,.marketing-tool select { width:100%; min-width:0; padding:11px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--text); font:inherit; }
.marketing-tool textarea { resize:vertical; }
.marketing-tool .length-feedback { margin-top:-14px; font-size:13px; color:#426450; }
.marketing-tool .length-warning { color:#985012; }
.marketing-tool .preview-heading { margin:28px 0 12px; }
.preview-heading small { font-size:12px; font-weight:400; color:var(--muted); }
.preview-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:#fafbfc; padding:18px; margin-bottom:20px; }
.serp-preview { width:600px; background:white; font-family:Arial,sans-serif; padding:0; color:#202124; }
.serp-mobile { width:350px; }
.serp-site { display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:14px; }
.serp-site>div { min-width:0; flex:1; }
.serp-globe { width:28px; height:28px; border-radius:50%; background:#f1f3f4; display:grid; place-items:center; font-size:23px; }
.serp-url { font-size:12px; color:#4d5156; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-domain { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-title { color:#1a0dab; font-size:20px; line-height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.serp-description { font-size:14px; line-height:22px; color:#4d5156; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.serp-mobile .serp-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.serp-mobile .serp-description { -webkit-line-clamp:3; }
.email-phone { width:375px; border:5px solid #242832; border-radius:28px; background:white; padding:20px 14px 40px; font-family:Arial,sans-serif; color:#202124; }
.phone-top { display:flex; justify-content:space-between; font-size:12px; padding:0 6px 20px; }
.inbox-heading { font-size:28px; font-weight:700; padding:0 8px 15px; }
.email-row { display:flex; gap:8px; padding:14px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.email-dot { width:8px; height:8px; border-radius:50%; background:#1675df; flex-shrink:0; margin-top:7px; }
.email-content { min-width:0; flex:1; }
.email-from { display:flex; align-items:center; gap:10px; }
.email-from strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-size:16px; }
.email-from span { font-size:11px; color:#6b7280; flex-shrink:0; }
#preview-subject { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:23px; }
#preview-preheader { font-size:14px; line-height:20px; color:#666; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.gmail-style .email-dot { width:32px; height:32px; background:#dce9fa; }
.gmail-style #preview-subject { font-weight:700; }
.gmail-style #preview-preheader { -webkit-line-clamp:1; }
.email-placeholder { margin:20px 5px 0 16px; height:40px; border-radius:4px; background:linear-gradient(#f0f1f3 35%,white 35%,white 55%,#f6f6f8 55%); }
.optional-utm { padding-top:16px; }
.utm-output { margin:24px 0; padding:18px; border:1px solid #d4cfed; background:#f7f6ff; border-radius:8px; }
.utm-output textarea { margin-top:8px; background:white; overflow-wrap:anywhere; }
.utm-output .character-actions { gap:16px; flex-wrap:wrap; }
.serp-globe { flex-shrink:0; overflow:hidden; } .serp-globe img { width:20px; height:20px; object-fit:contain; }

.privacy-icon { flex-shrink:0; vertical-align:middle; } .notice > .privacy-icon { margin-right:5px; } .privacy-badge { align-items:center; }
.tool-request { margin-top:28px; padding:28px; border:1px solid #c5bfee; border-radius:var(--radius); background:var(--soft); }
.tool-request h2 { margin:8px 0; font-size:1.3rem; }
.tool-request p { margin-bottom:18px; }
.request-tool-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:11px 18px; border:1px solid var(--primary); border-radius:6px; background:var(--primary); color:#fff; font-size:.9rem; font-weight:650; text-align:center; }
.request-tool-button:hover { background:#4035ad; border-color:#4035ad; text-decoration:none; }
.sidebar-request { display:flex; margin:16px 10px 8px; padding:10px 12px; font-size:.85rem; }