* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tg-body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0b1220;
color: #e5eefb;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.tg-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.tg-topbar {
position: sticky; top: 0; z-index: 20;
backdrop-filter: blur(14px);
background: rgba(11, 18, 32, 0.88);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tg-topbarInner, .tg-footerInner {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
min-height: 68px;
}
.tg-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; min-width: 0; }
.tg-brandText { white-space: nowrap; }
.tg-brandBadge {
width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
background: linear-gradient(135deg, #2563eb, #8b5cf6);
color: #fff; box-shadow: 0 14px 28px rgba(37,99,235,.35);
}
.tg-footer { border-top: 1px solid rgba(255,255,255,0.08); color: #a9bbd8; margin-top: 48px; }
.tg-menuWrap { position: relative; margin-left: auto; }
.tg-menuToggle { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #eef4ff; font-weight: 800; white-space: nowrap; }
.tg-menuBars { display: inline-grid; gap: 4px; }
.tg-menuBars span { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; }
.tg-menuPanel { position: absolute; top: calc(100% + 10px); right: 0; width: min(420px, calc(100vw - 28px)); padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(21, 34, 60, 0.98), rgba(11, 18, 32, 0.98)); box-shadow: 0 24px 56px rgba(0,0,0,.28); z-index: 30; }
.tg-menuSection + .tg-menuSection { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.tg-menuLabel { margin-bottom: 10px; color: #a8c1ea; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tg-menuLinks, .tg-menuSection--meta { display: grid; gap: 8px; }
.tg-menuLinks a, .tg-menuSection--meta a { display: block; padding: 10px 12px; border-radius: 14px; color: #e8f0ff; background: rgba(255,255,255,.04); }
.tg-menuLinks a:hover, .tg-menuSection--meta a:hover { background: rgba(255,255,255,.08); }
.tg-footerInner { padding: 18px 0; }
.tg-footerLinks { display: flex; flex-wrap: wrap; gap: 16px; }
.tg-footerLinks a:hover { color: #fff; }
.tg-hero { padding: 28px 0 10px; }
.tg-heroInner, .tg-toolHero {
display: grid; grid-template-columns: 1.3fr .8fr; gap: 20px; align-items: stretch;
}
.tg-heroInner--single { grid-template-columns: 1fr; }
.tg-toolHero {
grid-template-columns: 1fr;
padding: 28px; margin-top: 24px;
background: linear-gradient(180deg, rgba(21, 34, 60, 0.92), rgba(11, 18, 32, 0.96));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
.tg-heroCopy, .tg-heroPanel {
background: linear-gradient(180deg, rgba(21, 34, 60, 0.92), rgba(11, 18, 32, 0.96));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
padding: 28px;
box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
.tg-kicker {
display: inline-flex; padding: 8px 12px; border-radius: 999px;
background: rgba(37,99,235,.16); color: #b7d0ff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.tg-hero h1, .tg-toolHero h1 { margin: 14px 0 10px; font-size: clamp(32px, 6vw, 56px); line-height: 1.08; max-width: 100%; }
.tg-hero p, .tg-toolHero p { margin: 0; color: #bdd0ea; font-size: 17px; line-height: 1.7; }
.tg-heroPanel { display: grid; gap: 14px; align-content: start; }
.tg-heroStat {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 22px; padding: 18px 20px;
}
.tg-heroStat strong { display: block; font-size: 28px; margin-bottom: 6px; }
.tg-heroStat span { color: #b8c7de; }
.tg-homeSection { margin-top: 16px; }
.tg-sectionHead { margin-bottom: 18px; }
.tg-sectionHead h2, .tg-copyBlock h2 { margin: 0 0 8px; font-size: 28px; }
.tg-sectionHead p, .tg-copyBlock p { margin: 0; color: #bfd0e8; line-height: 1.7; }
.tg-cardGrid {
display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
}
.tg-card, .tg-panel {
background: linear-gradient(180deg, rgba(21, 34, 60, 0.92), rgba(11, 18, 32, 0.96));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
box-shadow: 0 24px 56px rgba(0,0,0,.2);
}
.tg-toolCard { padding: 18px; }
.tg-cardBadge {
display: inline-flex; padding: 6px 10px; border-radius: 999px;
background: rgba(139,92,246,.18); color: #dacaff; font-size: 11px; margin-bottom: 10px;
}
.tg-toolCard h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; }
.tg-toolCard p { margin: 0 0 14px; color: #bfd0e8; line-height: 1.6; font-size: 14px; }
.tg-cardLink, .tg-primaryBtn, .tg-secondaryBtn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 18px; border-radius: 16px; border: 1px solid transparent; font-weight: 700;
}
.tg-primaryBtn, .tg-cardLink {
background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
box-shadow: 0 14px 28px rgba(37,99,235,.28);
}
.tg-secondaryBtn {
background: rgba(255,255,255,.05); color: #f3f8ff; border-color: rgba(255,255,255,.12);
}
.tg-secondaryBtn--small { min-height: 38px; padding: 0 12px; font-size: 13px; }
.tg-primaryBtn--wide { width: 100%; }
.tg-copyBlock { padding: 22px; margin: 18px 0; }
.tg-toolPage { padding-bottom: 12px; }
body.tg-hide-ads ins.adsbygoogle,
body.tg-hide-ads .adsbygoogle,
body.tg-hide-ads .adsbygoogle-noablate,
body.tg-hide-ads [data-ad-client],
body.tg-hide-ads [data-ad-slot],
body.tg-hide-ads iframe[src*="googlesyndication.com"],
body.tg-hide-ads iframe[src*="doubleclick.net"],
body.tg-hide-ads [id*="google_ads_iframe"],
body.tg-hide-ads [id^="aswift_"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
max-height: 0 !important;
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
body.tg-hide-ads [data-tg-collapsed-ad="true"] {
display: none !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: 0 !important;
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.tg-converterCard { padding: 22px; display: grid; gap: 18px; }
.tg-uploader { display: grid; gap: 14px; }
.tg-dropzone {
display: grid; place-items: center; text-align: center; gap: 8px; min-height: 220px;
border: 2px dashed rgba(110,151,230,.42); border-radius: 24px;
background: linear-gradient(180deg, rgba(21,34,60,.58), rgba(11,18,32,.72));
padding: 24px;
}
.tg-dropzone.is-dragover { border-color: #41d871; background: rgba(65,216,113,.08); }
.tg-dropzoneIcon { font-size: 34px; }
.tg-dropzoneTitle { font-size: 22px; font-weight: 800; }
.tg-dropzoneText { color: #b9cbe5; }
.tg-fileList { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tg-fileItem {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); color: #dce9fb;
}
.tg-fileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-fileMeta { color: #9fb6d7; font-size: 13px; }
.tg-converterGrid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; }
.tg-panel { padding: 18px; }
.tg-panel h3 { margin: 0 0 14px; font-size: 20px; }
.tg-fields { display: grid; gap: 14px; margin-bottom: 18px; }
.tg-field { display: grid; gap: 8px; }
.tg-fieldLabel { font-weight: 700; color: #e5eefb; }
.tg-input, .tg-range {
width: 100%;
}
.tg-input {
min-height: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.05); color: #fff; padding: 0 14px;
}
.tg-input::placeholder { color: #8ea7cb; }
.tg-range { accent-color: #4ade80; }
.tg-muted { margin: 0; color: #a6bcdb; line-height: 1.7; }
.tg-progressWrap { display: grid; gap: 12px; }
.tg-progressBar {
width: 100%; height: 16px; border-radius: 999px; overflow: hidden;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.tg-progressBar span {
display: block; width: 0; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, #22c55e, #2563eb, #8b5cf6);
transition: width .25s ease;
}
.tg-progressMeta { display: flex; justify-content: space-between; gap: 12px; color: #bfd0e8; }
.tg-resultArea { margin-top: 16px; display: grid; gap: 10px; }
.tg-resultCard {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05);
}
.tg-downloadBtn {
display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
padding: 0 14px; border-radius: 14px; background: #16a34a; color: #fff; font-weight: 800;
}
/* Duplicate word checker */
.dwf-app {
margin-top: 18px; padding: 20px; border-radius: 28px;
background: #0f172a; border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 24px 56px rgba(0,0,0,.24);
}
.dwf-app[data-theme="light"] {
background: #f7fbff; color: #172338; border-color: rgba(23,35,56,.08);
}
.dwf-app[data-theme="light"] .dwf-panel,
.dwf-app[data-theme="light"] .dwf-rangeCard,
.dwf-app[data-theme="light"] .dwf-iconBtn,
.dwf-app[data-theme="light"] .dwf-chipSwitch span,
.dwf-app[data-theme="light"] .dwf-preview,
.dwf-app[data-theme="light"] .dwf-textarea,
.dwf-app[data-theme="light"] #dwf-ignoreInput,
.dwf-app[data-theme="light"] #dwf-search,
.dwf-app[data-theme="light"] .dwf-advancedArea {
background: #ffffff; color: #172338; border-color: rgba(23,35,56,.1);
}
.dwf-app[data-theme="light"] .dwf-titleBlock p,
.dwf-app[data-theme="light"] .dwf-stats,
.dwf-app[data-theme="light"] .dwf-previewHead { color: #4b617f; }
.dwf-app[data-theme="light"] .dwf-textarea::placeholder,
.dwf-app[data-theme="light"] #dwf-ignoreInput::placeholder,
.dwf-app[data-theme="light"] #dwf-search::placeholder { color: #7f96b8; }
.dwf-app[data-theme="light"] .dwf-iconBtn { color: #172338; }
.dwf-topRow, .dwf-toolbar, .dwf-controlRow, .dwf-switchRow, .dwf-ignoreRow { display: flex; gap: 12px; flex-wrap: wrap; }
.dwf-topRow, .dwf-toolbar { justify-content: space-between; align-items: center; }
.dwf-titleBlock h2 { margin: 0 0 6px; font-size: 28px; }
.dwf-titleBlock p { margin: 0; color: #bfd0e8; }
.dwf-switchWrap { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.dwf-switchBtn {
width: 60px; height: 34px; border: 0; border-radius: 999px; position: relative; background: #334155;
}
.dwf-switchBtn::after {
content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff; top: 4px; left: 4px; transition: all .2s ease;
}
.dwf-switchBtn.is-on { background: #16a34a; }
.dwf-switchBtn.is-on::after { left: 30px; }
.dwf-toolbar { margin: 18px 0 12px; }
.dwf-iconBtn {
min-width: 50px; height: 50px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06); color: #fff; font-size: 22px;
}
.dwf-controlRow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 12px; }
.dwf-rangeCard, .dwf-panel, .dwf-chipSwitch span, .dwf-preview, .dwf-textarea, #dwf-ignoreInput, #dwf-search, .dwf-advancedArea {
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff;
}
.dwf-rangeCard { padding: 14px; border-radius: 18px; display: grid; gap: 10px; }
.dwf-rangeCard span { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.dwf-rangeCard input { width: 100%; accent-color: #22c55e; }
.dwf-chipSwitch { display: inline-flex; }
.dwf-chipSwitch input { display: none; }
.dwf-chipSwitch span {
display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; font-weight: 700;
}
.dwf-chipSwitch input:checked + span { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.4); color: #86efac; }
.dwf-app[data-theme="light"] .dwf-chipSwitch input:checked + span { color: #166534; }
.dwf-advancedArea { padding: 14px; border-radius: 20px; margin-bottom: 12px; }
.dwf-advancedTools, .dwf-advancedBar { margin-top: 12px; }
.dwf-app[data-theme="light"] .dwf-excludeSummary { color: #51698a; }
.dwf-excludePanel {
margin-top: 12px; padding: 14px; border-radius: 18px;
background: rgba(15,23,42,.22); border: 1px solid rgba(255,255,255,.08);
}
.dwf-app[data-theme="light"] .dwf-excludePanel { background: #edf3fb; border-color: rgba(23,35,56,.08); }
.dwf-excludeInput {
width: 100%; min-height: 130px; margin-top: 8px; border-radius: 14px; padding: 12px 14px;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: inherit;
resize: vertical; line-height: 1.6;
}
.dwf-app[data-theme="light"] .dwf-excludeInput { background: #ffffff; border-color: rgba(23,35,56,.1); color: #172338; }
.dwf-excludeActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dwf-ignoreRow { display: grid; gap: 10px; }
#dwf-ignoreInput, #dwf-search {
width: 100%; min-height: 46px; border-radius: 14px; padding: 0 14px;
}
.dwf-ignoreTags, .dwf-chipList { display: flex; flex-wrap: wrap; gap: 10px; }
.dwf-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 14px; }
.dwf-panel { padding: 16px; border-radius: 22px; }
.dwf-textarea {
width: 100%; min-height: 280px; resize: vertical; border-radius: 18px; padding: 16px;
line-height: 1.75; font-size: 16px;
}
.dwf-textarea::placeholder { color: #91a7c8; }
.dwf-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; color: #bfd0e8; }
.dwf-previewWrap { margin-top: 14px; }
.dwf-previewHead { margin-bottom: 8px; color: #bfd0e8; font-size: 14px; }
.dwf-preview {
min-height: 180px; border-radius: 18px; padding: 16px; white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere;
}
.dwf-wordMark {
padding: 1px 4px; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.dwf-sideHead { display: grid; gap: 12px; margin-bottom: 12px; }
.dwf-sideHead h3 { margin: 0; }
.dwf-chipItem {
display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px;
border-radius: 999px; font-weight: 800; border: 1px solid rgba(255,255,255,.12);
}
.dwf-chipItem span { opacity: .88; }
.dwf-chipItem.is-active {
background: var(--chip-bg, rgba(59,130,246,.25));
color: var(--chip-text, #fff);
border-color: transparent;
outline: 2px solid rgba(255,255,255,.28);
outline-offset: 1px;
}
.dwf-chipItem.is-inactive {
background: transparent;
color: inherit;
outline: 1px dashed rgba(255,255,255,.24);
outline-offset: 1px;
}
.dwf-app[data-theme="light"] .dwf-chipItem.is-active { outline-color: rgba(23,35,56,.24); }
.dwf-app[data-theme="light"] .dwf-chipItem.is-inactive { outline-color: rgba(23,35,56,.22); }
/* Notepad */
.ntp-app {
margin-top: 18px; padding: 20px; border-radius: 28px;
background: #f7f1d5; color: #2f2414; border: 1px solid rgba(66,52,32,.12);
box-shadow: 0 24px 56px rgba(0,0,0,.18);
}
.ntp-app[data-theme="dark"] { background: #1f2532; color: #ecf1fb; border-color: rgba(255,255,255,.08); }
.ntp-topRow, .ntp-toolbar, .ntp-actionRow, .ntp-metaRow, .ntp-resultHead { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ntp-topRow, .ntp-resultHead { justify-content: space-between; }
.ntp-topRow { align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.ntp-topRow h2 { margin: 0 0 6px; font-size: 28px; }
.ntp-topRow p { margin: 0; color: #6b5736; }
.ntp-app[data-theme="dark"] .ntp-topRow p, .ntp-app[data-theme="dark"] .ntp-metaRow { color: #b4c4de; }
.ntp-toolbar { justify-content: flex-end; align-items: flex-start; margin-bottom: 14px; }
.ntp-iconBtn {
min-width: 50px; height: 50px; border-radius: 16px; border: 1px solid rgba(66,52,32,.12);
background: rgba(255,255,255,.44); color: #2f2414; font-size: 22px;
}
.ntp-app[data-theme="dark"] .ntp-iconBtn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }
.ntp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.ntp-panel { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.44); border: 1px solid rgba(66,52,32,.12); }
.ntp-app[data-theme="dark"] .ntp-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.ntp-actionRow { margin-bottom: 12px; }
.ntp-textarea {
width: 100%; min-height: 420px; border-radius: 18px; padding: 18px 18px 18px 44px; resize: vertical;
border: 1px solid rgba(66,52,32,.16); background:
linear-gradient(to right, rgba(219, 74, 74, .32) 0, rgba(219, 74, 74, .32) 2px, transparent 2px) 28px 0 / 100% 100% no-repeat,
repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(38, 111, 220, .18) 35px, rgba(38, 111, 220, .18) 36px),
rgba(255,255,255,.82);
color: #2f2414; line-height: 36px; font-size: 18px;
}
.ntp-app[data-theme="dark"] .ntp-textarea {
border-color: rgba(255,255,255,.1); color: #eef3fb;
background:
linear-gradient(to right, rgba(250, 125, 125, .25) 0, rgba(250, 125, 125, .25) 2px, transparent 2px) 28px 0 / 100% 100% no-repeat,
repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(103, 152, 240, .18) 35px, rgba(103, 152, 240, .18) 36px),
rgba(255,255,255,.04);
}
.ntp-metaRow { margin-top: 10px; color: #6b5736; }
.ntp-resultBlock + .ntp-resultBlock { margin-top: 14px; }
.ntp-resultList { display: grid; gap: 10px; }
.ntp-suggestion {
padding: 14px; border-radius: 16px; background: rgba(255,255,255,.54); border: 1px solid rgba(66,52,32,.12);
}
.ntp-app[data-theme="dark"] .ntp-suggestion { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.ntp-suggestion p { margin: 0 0 8px; line-height: 1.6; }
.ntp-proofreadOut {
min-height: 170px; border-radius: 18px; padding: 16px; line-height: 1.75;
background: rgba(255,255,255,.54); border: 1px solid rgba(66,52,32,.12); white-space: pre-wrap;
}
.ntp-app[data-theme="dark"] .ntp-proofreadOut { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.tg-empty { padding: 36px 0; }
.tg-empty .tg-card { padding: 24px; }
.tg-toast {
position: fixed; z-index: 60; transform: translate(-50%, -50%);
background: rgba(15,23,42,.96); color: #fff; padding: 10px 12px; border-radius: 12px; font-size: 13px;
border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 36px rgba(0,0,0,.26); pointer-events: none;
}
.tg-screenPopupHost {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 120;
display: grid;
gap: 12px;
width: min(420px, calc(100vw - 24px));
}
.tg-screenPopup {
padding: 14px 14px 12px;
border-radius: 18px;
background: rgba(15,23,42,.96);
color: #fff;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 20px 44px rgba(0,0,0,.28);
}
.tg-screenPopup--warn { border-color: rgba(239, 68, 68, .55); background: linear-gradient(180deg, rgba(124, 21, 21, .98), rgba(78, 15, 15, .98)); color: #fff; }
.tg-screenPopup--success { border-color: rgba(34, 197, 94, .4); }
.tg-screenPopupHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.tg-screenPopupBody {
font-size: 14px;
line-height: 1.55;
color: #dce8ff;
}
.tg-screenPopupClose {
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #fff;
font-size: 19px;
line-height: 1;
}
.tg-screenPopup.is-leaving {
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
}
@media (max-width: 980px) {
.tg-heroInner, .tg-toolHero, .tg-cardGrid, .tg-converterGrid, .dwf-grid, .ntp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.tg-shell { width: min(100% - 20px, 1180px); }
.tg-topbarInner { min-height: auto; padding: 12px 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.tg-footerInner { min-height: auto; padding: 12px 0; flex-direction: column; align-items: flex-start; }
.tg-brand { min-width: 0; flex: 1 1 auto; }
.tg-brandText { overflow: hidden; text-overflow: ellipsis; }
.tg-menuWrap { margin-left: auto; flex: 0 0 auto; }
.tg-menuToggle { min-width: 46px; padding: 0 12px; justify-content: center; }
.tg-menuToggle > span:first-child { display: none; }
.tg-menuPanel { position: absolute; top: calc(100% + 10px); right: 0; width: min(420px, calc(100vw - 20px)); margin-top: 0; }
.tg-hero h1, .tg-toolHero h1 { font-size: 34px; }
.tg-cardGrid { grid-template-columns: 1fr; }
.dwf-controlRow { grid-template-columns: 1fr 1fr; }
.dwf-titleBlock h2, .ntp-topRow h2 { font-size: 24px; }
.dwf-topRow, .ntp-topRow { align-items: flex-start; }
.dwf-toolbar, .ntp-toolbar { justify-content: flex-start; }
}
@media (max-width: 520px) {
.dwf-app, .ntp-app, .tg-card, .tg-toolHero { border-radius: 22px; padding: 16px; }
.dwf-controlRow { gap: 10px; }
.dwf-rangeCard { padding: 12px; }
.dwf-textarea { min-height: 240px; }
.ntp-textarea { min-height: 340px; font-size: 17px; padding-left: 40px; }
.tg-progressMeta { flex-direction: column; align-items: flex-start; }
}
/* Duplicate tool patch */
.dwf-app { position: relative; }
.dwf-checkGrid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dwf-checkGrid .dwf-chipSwitch { flex: 0 0 auto; }
.dwf-checkGrid .dwf-chipSwitch span { min-height: 48px; padding: 0 18px; }
.dwf-advancedBar,
.dwf-advancedTools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dwf-excludeSummary { margin-left: auto; font-size: 13px; color: #bfd0e8; }
.dwf-advancedHint { margin: 12px 2px 0; color: #bfd0e8; font-size: 14px; }
.dwf-app[data-theme="light"] .dwf-advancedHint { color: #51698a; }
.dwf-panel { position: relative; }
.dwf-textarea[contenteditable="true"] {
min-height: 280px;
outline: none;
overflow-y: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
caret-color: currentColor;
}
.dwf-textarea[contenteditable="true"]:empty::before {
content: attr(data-placeholder);
color: #91a7c8;
}
.dwf-app[data-theme="light"] .dwf-textarea[contenteditable="true"]:empty::before {
color: #7f96b8;
}
.dwf-preview { position: relative; cursor: text; }
.dwf-reviewMeta {
margin-bottom: 10px; font-size: 13px; color: #bfd0e8;
}
.dwf-app[data-theme="light"] .dwf-reviewMeta { color: #51698a; }
.dwf-wordMark.is-duplicate { cursor: pointer; }
.dwf-wordMark.is-grammar {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #f97316;
text-underline-offset: 3px;
}
.dwf-popup {
position: absolute; z-index: 40; width: min(320px, calc(100vw - 36px));
padding: 12px; border-radius: 18px; background: rgba(15,23,42,.98); color: #fff;
border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.dwf-app[data-theme="light"] .dwf-popup {
background: rgba(255,255,255,.98); color: #142033; border-color: rgba(20,32,51,.12);
}
.dwf-popupBlock + .dwf-popupBlock {
margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1);
}
.dwf-app[data-theme="light"] .dwf-popupBlock + .dwf-popupBlock { border-top-color: rgba(20,32,51,.08); }
.dwf-popupTitle { font-weight: 800; margin-bottom: 6px; }
.dwf-popupBlock p { margin: 0 0 8px; line-height: 1.5; font-size: 14px; }
.dwf-popupActions { display: flex; flex-wrap: wrap; gap: 8px; }
.dwf-popupBtn {
min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.08); color: inherit; font-weight: 700;
}
.dwf-app[data-theme="light"] .dwf-popupBtn {
border-color: rgba(20,32,51,.12); background: rgba(20,32,51,.04);
}
@media (max-width: 520px) {
.dwf-checkGrid { grid-template-columns: 1fr 1fr; }
.dwf-popup { width: min(300px, calc(100vw - 32px)); }
}
/* Inline editor rebuild */
.tg-iconSvg { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.tg-iconSvg svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dwf-iconBtn, .ntp-iconBtn { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; }
.dwf-iconBtn:disabled, .ntp-iconBtn:disabled { opacity: .45; cursor: not-allowed; }
.dwf-app[data-theme="light"] .dwf-iconBtn,
.ntp-app[data-theme="light"] .ntp-iconBtn { background: #c9d8eb; border-color: #9eb6d2; color: #122033; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.dwf-grid--compact { grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); }
.dwf-editorWrap, .ntp-editorWrap { position: relative; }
.dwf-editor, .ntp-editor {
width: 100%;
min-height: 220px;
border-radius: 18px;
padding: 16px 18px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
color: inherit;
line-height: 1.85;
font-size: 16px;
white-space: pre-wrap;
overflow-wrap: anywhere;
outline: none;
}
.dwf-app[data-theme="light"] .dwf-editor { background: #ffffff; border-color: rgba(23,35,56,.1); color: #172338; }
.dwf-editor[data-placeholder]:empty::before,
.ntp-editor[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: #91a7c8;
}
.dwf-app[data-theme="light"] .dwf-editor[data-placeholder]:empty::before { color: #7f96b8; }
.dwf-token, .ntp-word {
border-radius: 10px;
padding: 0 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
cursor: pointer;
}
.dwf-token.is-duplicate { background: var(--mark-bg, rgba(59,130,246,.25)); color: var(--mark-text, #fff); }
.dwf-token.is-disabled {
background: transparent;
color: inherit;
outline: 1px dashed rgba(255,255,255,.28);
outline-offset: 1px;
}
.dwf-app[data-theme="light"] .dwf-token.is-disabled { outline-color: rgba(23,35,56,.28); }
.dwf-token.is-grammar,
.ntp-word.is-grammar {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: rgba(71,85,105,.88);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.dwf-app[data-theme="dark"] .dwf-token.is-grammar,
.ntp-app[data-theme="dark"] .ntp-word.is-grammar {
text-decoration-color: rgba(203,213,225,.92);
}
.dwf-inlineHint { margin: 10px 2px 0; color: #bfd0e8; font-size: 14px; }
.dwf-app[data-theme="light"] .dwf-inlineHint { color: #51698a; }
.tg-inlinePopup {
position: absolute;
z-index: 40;
min-width: 240px;
max-width: min(360px, calc(100% - 16px));
padding: 14px;
border-radius: 16px;
background: rgba(15,23,42,.98);
color: #fff;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 22px 44px rgba(0,0,0,.28);
}
.dwf-app[data-theme="light"] .tg-inlinePopup,
.ntp-app[data-theme="light"] .tg-inlinePopup {
background: #ffffff;
color: #152238;
border-color: rgba(23,35,56,.12);
}
.tg-popupHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tg-popupHead strong { font-size: 15px; }
.tg-popupHead span, .tg-popupLabel { color: #9fb2cc; font-size: 12px; font-weight: 700; }
.dwf-app[data-theme="light"] .tg-popupHead span,
.dwf-app[data-theme="light"] .tg-popupLabel,
.ntp-app[data-theme="light"] .tg-popupHead span,
.ntp-app[data-theme="light"] .tg-popupLabel { color: #647a98; }
.tg-popupSection + .tg-popupSection { margin-top: 12px; }
.tg-popupText { margin: 0; font-size: 14px; line-height: 1.55; }
.tg-popupChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tg-popupChip {
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: inherit;
font-weight: 700;
}
.dwf-app[data-theme="light"] .tg-popupChip,
.ntp-app[data-theme="light"] .tg-popupChip { background: #edf3fb; border-color: rgba(23,35,56,.12); }
.ntp-actionRow--top { margin: 6px 0 14px; align-items: center; }
.ntp-status {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255,255,255,.44);
border: 1px solid rgba(66,52,32,.12);
font-size: 14px;
}
.ntp-app[data-theme="dark"] .ntp-status {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.1);
}
.ntp-panel--full { padding: 16px; }
.ntp-editor {
--ntp-line-gap: 2.45rem;
--ntp-line-offset: .6rem;
min-height: 460px;
padding: .85rem 18px 1rem 50px;
border: 1px solid rgba(66,52,32,.16);
color: #2f2414;
font-size: 18px;
line-height: var(--ntp-line-gap);
background-image:
linear-gradient(to right, rgba(219, 74, 74, .32) 0, rgba(219, 74, 74, .32) 2px, transparent 2px),
linear-gradient(to bottom, transparent calc(var(--ntp-line-gap) - 2px), rgba(38, 111, 220, .18) calc(var(--ntp-line-gap) - 2px), rgba(38, 111, 220, .18) var(--ntp-line-gap));
background-position: 32px 0, 0 var(--ntp-line-offset);
background-size: 100% 100%, 100% var(--ntp-line-gap);
background-repeat: no-repeat, repeat;
background-color: rgba(255,255,255,.82);
}
.ntp-app[data-theme="dark"] .ntp-editor {
border-color: rgba(255,255,255,.1);
color: #eef3fb;
background-image:
linear-gradient(to right, rgba(250, 125, 125, .25) 0, rgba(250, 125, 125, .25) 2px, transparent 2px),
linear-gradient(to bottom, transparent calc(var(--ntp-line-gap) - 2px), rgba(103, 152, 240, .18) calc(var(--ntp-line-gap) - 2px), rgba(103, 152, 240, .18) var(--ntp-line-gap));
background-position: 32px 0, 0 var(--ntp-line-offset);
background-size: 100% 100%, 100% var(--ntp-line-gap);
background-repeat: no-repeat, repeat;
background-color: rgba(255,255,255,.04);
}
.ntp-app[data-theme="dark"] .ntp-editor[data-placeholder]:empty::before { color: #91a7c8; }
.ntp-app[data-theme="light"] .ntp-editor[data-placeholder]:empty::before { color: #8a7455; }
.ntp-metaRow { margin-top: 12px; }
@media (max-width: 980px) {
.dwf-grid--compact { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.dwf-editor { min-height: 280px; }
.ntp-editor { min-height: 380px; font-size: 17px; padding-left: 44px; }
}
/* Notepad toolbar refinement */
.ntp-actionButtons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ntp-actionBtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 16px;
border-radius: 16px;
border: 1px solid rgba(66,52,32,.12);
background: linear-gradient(135deg, rgba(37,99,235,.96), rgba(124,58,237,.96));
color: #fff;
font-weight: 800;
box-shadow: 0 14px 26px rgba(37,99,235,.22);
}
.ntp-actionBtn[aria-expanded="true"] {
box-shadow: 0 0 0 3px rgba(37,99,235,.16), 0 14px 26px rgba(37,99,235,.22);
}
.ntp-app[data-theme="dark"] .ntp-actionBtn {
border-color: rgba(255,255,255,.08);
}
.ntp-formatPanel {
margin-bottom: 14px;
padding: 14px;
border-radius: 20px;
background: rgba(255,255,255,.46);
border: 1px solid rgba(66,52,32,.12);
}
.ntp-app[data-theme="dark"] .ntp-formatPanel {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.1);
}
.ntp-formatGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.ntp-formatBtn {
min-height: 48px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(66,52,32,.12);
background: rgba(255,255,255,.82);
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 700;
text-align: left;
}
.ntp-formatBtn strong,
.ntp-formatBtn em,
.ntp-formatBtn u {
font-size: 18px;
font-style: normal;
}
.ntp-app[data-theme="dark"] .ntp-formatBtn {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.1);
color: #ecf1fb;
}
.ntp-formatHint {
margin: 12px 2px 0;
color: #6b5736;
font-size: 14px;
line-height: 1.55;
}
.ntp-app[data-theme="dark"] .ntp-formatHint {
color: #b4c4de;
}
.ntp-status {
flex: 1 1 320px;
white-space: normal;
line-height: 1.35;
}
@media (max-width: 720px) {
.ntp-actionButtons {
width: 100%;
}
.ntp-actionBtn {
flex: 1 1 calc(50% - 10px);
min-width: 0;
}
.ntp-formatGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.ntp-actionButtons {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.ntp-actionBtn {
width: 100%;
padding: 0 12px;
font-size: 14px;
}
.ntp-formatGrid {
grid-template-columns: 1fr 1fr;
}
}
/* Patch v3 refinements */
.ntp-toolbar {
display: flex;
align-items: flex-start;
gap: 12px;
row-gap: 12px;
}
.dwf-iconBtn,
.ntp-iconBtn {
width: 88px;
height: 82px;
flex: 0 0 auto;
border-radius: 22px;
margin-bottom: 4px;
}
.ntp-iconBtn .tg-iconSvg,
.dwf-iconBtn .tg-iconSvg {
width: 26px;
height: 26px;
}
.ntp-iconBtn .tg-iconSvg svg,
.dwf-iconBtn .tg-iconSvg svg {
width: 26px;
height: 26px;
}
.ntp-actionBtn--menu {
background: linear-gradient(135deg, #214a8e, #5a49c8);
justify-content: space-between;
gap: 12px;
min-width: 180px;
}
.ntp-actionCaret {
font-size: 14px;
line-height: 1;
opacity: .95;
transition: transform .2s ease;
}
.ntp-actionBtn[aria-expanded="true"] .ntp-actionCaret {
transform: rotate(180deg);
}
.ntp-grammarMark {
border-radius: 8px;
padding: 0 2px;
cursor: pointer;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: rgba(71,85,105,.88);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.ntp-app[data-theme="dark"] .ntp-grammarMark {
text-decoration-color: rgba(203,213,225,.92);
}
.ntp-editor b,
.ntp-editor strong { font-weight: 800; }
.ntp-editor i,
.ntp-editor em { font-style: italic; }
.ntp-editor u { text-decoration: underline; text-decoration-thickness: 2px; }
.ntp-editor h1,
.ntp-editor h2,
.ntp-editor h3,
.ntp-editor p,
.ntp-editor ul,
.ntp-editor ol,
.ntp-editor div {
margin: 0;
}
.ntp-editor h1 { font-size: 1.55em; font-weight: 800; }
.ntp-editor h2 { font-size: 1.35em; font-weight: 800; }
.ntp-editor h3 { font-size: 1.18em; font-weight: 800; }
.ntp-editor ul,
.ntp-editor ol {
padding-left: 1.4em;
}
.ntp-editor a {
color: #225dd8;
text-decoration: underline;
}
.ntp-app[data-theme="dark"] .ntp-editor a {
color: #9ab8ff;
}
@media (max-width: 720px) {
.ntp-toolbar {
width: 100%;
justify-content: flex-start;
}
.ntp-iconBtn {
width: 72px;
height: 68px;
border-radius: 18px;
}
.ntp-actionBtn--menu {
min-width: 0;
}
}
@media (max-width: 520px) {
.ntp-toolbar {
gap: 10px;
}
.ntp-iconBtn,
.dwf-iconBtn {
width: 64px;
height: 62px;
border-radius: 18px;
}
.ntp-actionButtons {
grid-template-columns: 1fr;
}
.ntp-actionBtn {
min-height: 50px;
}
}
.tg-notice { margin-top: 2px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e8f0ff; }
.tg-notice--warn { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .12); }
.tg-notice--success { border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .12); }
.tg-infoCard { padding: 28px; }
.tg-infoSection + .tg-infoSection { margin-top: 24px; }
.tg-infoSection ul { margin: 12px 0 0; padding-left: 22px; color: #bfd0e8; line-height: 1.8; }
.tg-infoSection li + li { margin-top: 8px; }
.tg-infoSection p a, .tg-infoSection li a { color: #9ab8ff; text-decoration: underline; }
@media (max-width: 820px) {
.tg-menuPanel { right: 0; left: auto; width: min(420px, calc(100vw - 28px)); }
.tg-footerInner { align-items: flex-start; }
.ntp-toolbar { width: 100%; }
}
@media (max-width: 1024px) {
.tg-fileList { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.tg-fileList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.tg-fileList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-screenPopupHost { right: 12px; bottom: 12px; width: min(100vw - 24px, 420px); }
}
/* Patch v5 file grid */
.tg-fileList {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.tg-fileItem {
position: relative;
min-height: 118px;
padding: 14px 12px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.05);
color: #dce9fb;
display: grid;
align-content: start;
justify-items: center;
gap: 8px;
text-align: center;
}
.tg-fileThumb {
width: 46px;
height: 46px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(37,99,235,.16);
font-size: 22px;
}
.tg-fileRemove {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,23,42,.72);
color: #fff;
font-size: 18px;
line-height: 1;
}
.tg-fileName {
width: 100%;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1024px) {
.tg-fileList { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.tg-fileList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.tg-fileList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Patch v6 mobile toolbar + focus mode + duplicate layout */
.tg-noScroll { overflow: hidden; }
.tg-focusShell {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(8, 12, 21, .9);
backdrop-filter: blur(8px);
padding: 12px;
}
.tg-focusInner {
width: min(1100px, 100%);
height: 100%;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr;
gap: 12px;
}
.tg-focusTopbar {
display: flex;
justify-content: flex-end;
}
.tg-focusDone {
min-height: 46px;
padding: 0 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: linear-gradient(135deg, #3868ff, #7c3aed);
color: #fff;
font-weight: 800;
}
.tg-focusPlaceholder { display: none; }
.dwf-toolbar, .ntp-toolbar {
gap: 10px;
flex-wrap: nowrap;
}
.dwf-iconBtn, .ntp-iconBtn {
width: 58px;
height: 56px;
border-radius: 16px;
flex: 0 0 auto;
}
.dwf-toolbar .tg-iconSvg, .ntp-toolbar .tg-iconSvg { display: inline-flex; }
.dwf-panel--stack {
display: grid;
gap: 14px;
}
.dwf-bottomDock {
display: grid;
gap: 12px;
}
.dwf-chipList--inline {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dwf-searchInput {
width: 100%;
min-height: 46px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: inherit;
padding: 0 14px;
}
.dwf-app[data-theme="light"] .dwf-searchInput {
border-color: rgba(23,35,56,.12);
background: rgba(255,255,255,.8);
}
.dwf-stats--compact {
margin-top: 0;
font-size: 13px;
opacity: .88;
}
.dwf-stats--compact strong { font-size: 14px; }
.dwf-chipList--inline .dwf-chipItem {
width: auto;
}
.ntp-formatStrip {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ntp-formatMini {
min-width: 42px;
height: 42px;
padding: 0 10px;
border-radius: 12px;
border: 1px solid rgba(66,52,32,.12);
background: rgba(255,255,255,.56);
color: #1b2740;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ntp-app[data-theme="dark"] .ntp-formatMini {
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.08);
color: #fff;
}
.ntp-formatMini strong,
.ntp-formatMini em,
.ntp-formatMini u { font-size: 15px; }
.ntp-actionButtons {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
flex: 1 1 100%;
}
.ntp-actionBtn {
min-height: 52px;
padding: 0 16px;
font-size: 15px;
}
.ntp-status {
width: 100%;
}
.dwf-app.is-focus,
.ntp-app.is-focus { position: static; }
.dwf-app.is-focus .dwf-topRow,
.dwf-app.is-focus .dwf-toolbar,
.dwf-app.is-focus .dwf-controlRow,
.dwf-app.is-focus .dwf-advancedArea,
.ntp-app.is-focus .ntp-topRow,
.ntp-app.is-focus .ntp-actionRow,
.ntp-app.is-focus .ntp-metaRow {
display: none !important;
}
.dwf-app.is-focus .dwf-panel--stack,
.ntp-app.is-focus .ntp-panel--full {
margin: 0;
height: 100%;
border-radius: 22px;
padding: 14px;
background: #101827;
border: 1px solid rgba(255,255,255,.08);
}
.ntp-app[data-theme="light"].is-focus .ntp-panel--full,
.dwf-app[data-theme="light"].is-focus .dwf-panel--stack {
background: #f8fbff;
border-color: rgba(23,35,56,.1);
}
.dwf-app.is-focus .dwf-editor,
.ntp-app.is-focus .ntp-editor {
min-height: calc(100vh - 170px);
}
.dwf-app.is-focus .dwf-bottomDock {
position: sticky;
bottom: 0;
padding-top: 12px;
background: inherit;
}
.dwf-app.is-focus .dwf-searchInput,
.dwf-app.is-focus .dwf-stats { display: none; }
@media (max-width: 820px) {
.dwf-toolbar, .ntp-toolbar {
width: 100%;
justify-content: flex-start;
}
.dwf-iconBtn, .ntp-iconBtn {
width: 48px;
height: 48px;
border-radius: 14px;
}
.dwf-iconBtn .tg-iconSvg svg,
.ntp-iconBtn .tg-iconSvg svg {
width: 20px;
height: 20px;
}
.ntp-formatStrip {
gap: 6px;
}
.ntp-formatMini {
min-width: 38px;
height: 38px;
padding: 0 8px;
border-radius: 10px;
font-size: 12px;
}
.ntp-actionButtons {
grid-template-columns: repeat(3, minmax(0,1fr));
}
.ntp-actionBtn {
min-height: 46px;
padding: 0 10px;
font-size: 13px;
}
.dwf-app .dwf-titleBlock h2,
.ntp-app .ntp-topRow h2 { max-width: 100%; }
}
@media (max-width: 560px) {
.dwf-toolbar, .ntp-toolbar {
gap: 4px;
}
.dwf-iconBtn, .ntp-iconBtn {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 10px;
padding: 0;
}
.dwf-iconBtn .tg-iconSvg svg,
.ntp-iconBtn .tg-iconSvg svg {
width: 15px;
height: 15px;
}
.ntp-formatStrip {
gap: 5px;
}
.ntp-formatMini {
min-width: 34px;
height: 34px;
padding: 0 6px;
border-radius: 10px;
font-size: 11px;
}
.ntp-actionButtons {
gap: 6px;
}
.ntp-actionBtn {
font-size: 11px;
min-height: 40px;
border-radius: 12px;
padding: 0 6px;
letter-spacing: -.01em;
}
}
.tg-svgPreview {
margin-top: 10px;
width: 100%;
min-height: 180px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
display: grid;
place-items: center;
overflow: hidden;
}
.tg-svgPreview img,
.tg-svgPreview object {
width: 100%;
height: auto;
max-width: 100%;
min-height: 500px;
max-height: 650px;
display: block;
background: transparent;
}
.tg-resultActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.tg-copySvgBtn {
min-height: 38px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: inherit;
font-weight: 700;
}
.tg-textareaInput { min-height: 180px; resize: vertical; padding: 14px; }
.tg-converterCard--svgViewer { display: grid; gap: 18px; }
.tg-svgViewerStage .tg-panel { padding: 18px; }
.tg-panelHead p { margin: 6px 0 0; color: #9fb4d9; }
.tg-proofreadLink { margin: 0 0 18px; }
.tg-proofreadLink a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(91,134,255,.35); background: rgba(68,102,225,.14); color: #dbe6ff; font-weight: 700; }
.tg-proofreadLink a:hover { background: rgba(68,102,225,.22); }
.tg-resultArea--viewer:empty::before {
content: 'Your SVG preview will appear here after you view an SVG file or code.';
display: grid;
place-items: center;
min-height: 320px;
border-radius: 18px;
border: 1px dashed rgba(255,255,255,.14);
background: rgba(255,255,255,.03);
color: #9fb4d9;
text-align: center;
padding: 24px;
}
.tg-svgViewerGrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
}
.tg-svgViewerCode .tg-fields { display: grid; gap: 12px; }
.tg-svgViewerUpload .tg-uploader { display: grid; gap: 12px; }
.tg-progressWrap--svgViewer { margin-top: 14px; }
.tg-converterCard[data-tool="svg-viewer"] .tg-resultCard {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 18px;
}
.tg-svgViewerResult {
display: grid;
gap: 16px;
margin:0 auto;
}
.tg-viewerTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.tg-resultActions--viewer {
margin-top: 0;
align-items: center;
justify-content: center;
}
.tg-resultActions--viewerBelow {
justify-content: center;
}
.tg-converterCard[data-tool="svg-viewer"] .tg-svgPreview {
min-height: 0;
background: transparent;
border: 0;
margin-top: 0;
padding: 0;
display: block;
}
.tg-converterCard[data-tool="svg-viewer"] .tg-svgPreview img,
.tg-converterCard[data-tool="svg-viewer"] .tg-svgPreview object {
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
background: transparent;
}
@media (max-width: 860px) {
.tg-svgViewerGrid { grid-template-columns: 1fr; }
.tg-resultActions--viewer,
.tg-resultActions--viewerBelow { justify-content: flex-start; }
.dwf-excludeSummary { margin-left: 0; }
}
/* Patch v9 HEIC/home/menu/focus fixes */
.tg-homeCategories { display: grid; gap: 28px; }
.tg-homeCategory { display: grid; gap: 16px; }
.tg-sectionHead--withIcon h2, .tg-cardBadge { display: inline-flex; align-items: center; gap: 10px; }
.tg-homeCategoryIcon, .tg-toolTypeIcon { display: inline-flex; align-items: center; justify-content: center; }
.tg-toolTypeIcon { font-size: 16px; }
.tg-menuPanel { max-height: min(78vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) {
.tg-topbarInner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tg-brand { min-width: 0; }
.tg-menuWrap { justify-self: end; }
}
.tg-focusInner { min-height: 0; }
.dwf-app.is-focus .dwf-panel--stack,
.ntp-app.is-focus .ntp-panel--full {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.dwf-app.is-focus .dwf-editorWrap,
.ntp-app.is-focus .ntp-editorWrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
}
.dwf-app.is-focus .dwf-editor,
.ntp-app.is-focus .ntp-editor {
flex: 1 1 auto;
min-height: 0;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
.dwf-app.is-focus .dwf-bottomDock {
position: static;
flex: 0 0 auto;
margin-top: 12px;
}
.tg-body.light .tg-panelHead p { color: #61779a; }
.tg-converterCard[data-tool="svg-viewer"] .tg-svgViewerResult { align-items: stretch; }
.tg-converterCard[data-tool="svg-viewer"] .tg-resultActions--viewerBelow { margin-top: 12px; }
.relatedlink{
display:inline-flex;
align-items:center;
gap:8px;
margin:0 0 14px;
padding:10px 14px;
border-radius:12px;
background:#eef4ff;
color:#0f3d91;
font-size:14px;
font-weight:600;
line-height:1.4;
text-decoration:none;
border:1px solid #cfe0ff;
transition:all .2s ease;
}
.relatedlink:hover{
background:#dfeaff;
border-color:#b7d0ff;
color:#0b2f73;
transform:translateY(-1px);
}
.relatedlink:focus-visible{
outline:2px solid #2563eb;
outline-offset:2px;
}
@media (max-width: 1280px) {
.tg-cardGrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
.tg-cardGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.tg-homeCategory,
.tg-toolCard {
content-visibility: auto;
contain-intrinsic-size: 320px;
}
/* PDF editor tools */
.tg-pdfEditorCard {
display: grid;
gap: 1rem;
}
.tg-uploader--editor {
margin-bottom: .25rem;
}
.tg-pdfEditorGrid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
gap: 1rem;
align-items: start;
}
.tg-panel--preview,
.tg-panel--controls {
min-width: 0;
}
.tg-panelHead {
display: flex;
flex-direction: column;
gap: .35rem;
margin-bottom: .85rem;
}
.tg-panelHead p {
margin: 0;
color: var(--tg-muted);
}
.tg-pdfWorkspace {
min-height: 320px;
border: 1px solid rgba(148, 163, 184, .22);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.88));
padding: 1rem;
}
[data-theme="dark"] .tg-pdfWorkspace,
.tg-body--dark .tg-pdfWorkspace {
background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.82));
}
.tg-toolActions {
display: flex;
flex-direction: column;
gap: .75rem;
margin-bottom: .85rem;
}
.tg-inlineRow {
display: flex;
flex-wrap: wrap;
gap: .65rem;
align-items: center;
}
.tg-inlineRow--spread {
justify-content: space-between;
}
.tg-inlineMeta {
font-size: .93rem;
color: var(--tg-muted);
}
.tg-miniField {
display: grid;
gap: .35rem;
}
.tg-miniField span {
font-size: .84rem;
color: var(--tg-muted);
}
.tg-input--small {
min-width: 140px;
padding: .6rem .75rem;
}
.tg-chipChoice {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .55rem .8rem;
border-radius: 999px;
background: rgba(148, 163, 184, .14);
cursor: pointer;
}
.tg-chipChoice input {
margin: 0;
}
.tg-emptyState {
min-height: 260px;
display: grid;
place-content: center;
text-align: center;
gap: .55rem;
color: var(--tg-muted);
}
.tg-emptyState strong {
color: var(--tg-text);
}
.tg-pdfThumbGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .9rem;
}
.tg-pdfThumbCard {
display: grid;
gap: .7rem;
padding: .8rem;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, .22);
background: rgba(255,255,255,.72);
box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
[data-theme="dark"] .tg-pdfThumbCard,
.tg-body--dark .tg-pdfThumbCard {
background: rgba(15,23,42,.68);
}
.tg-pdfThumbCard--draggable {
cursor: grab;
}
.tg-pdfThumbCard.is-dragging,
.tg-fileItem.is-dragging {
opacity: .45;
}
.tg-pdfThumbCard.is-drop-target,
.tg-fileItem.is-drop-target {
outline: 2px dashed rgba(37, 99, 235, .55);
outline-offset: 4px;
}
.tg-pdfThumbPreview {
min-height: 180px;
border-radius: 14px;
background: rgba(241,245,249,.95);
display: grid;
place-items: center;
overflow: hidden;
}
.tg-pdfThumbPreview img {
max-width: 100%;
max-height: 220px;
object-fit: contain;
transition: transform .18s ease;
}
.tg-pdfThumbMeta {
display: flex;
justify-content: space-between;
gap: .75rem;
align-items: center;
font-size: .92rem;
}
.tg-thumbActions {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.tg-previewShell,
.tg-cropStage,
.tg-signPreviewPane {
display: grid;
gap: .75rem;
}
.tg-previewCaption {
text-align: center;
color: var(--tg-muted);
font-size: .92rem;
}
.tg-pageCanvas {
width: 100%;
max-width: 100%;
height: auto;
display: block;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.tg-cropCanvasWrap,
.tg-signCanvasWrap {
position: relative;
width: fit-content;
max-width: 100%;
margin: 0 auto;
touch-action: none;
}
.tg-cropSelection {
position: absolute;
border: 2px dashed #2563eb;
background: rgba(37, 99, 235, .14);
border-radius: 10px;
pointer-events: none;
}
.tg-cropSelection.is-hidden {
display: none;
}
.tg-htmlPreviewShell {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, .24);
background: #fff;
}
.tg-htmlPreviewFrame {
display: block;
width: 100%;
min-height: 700px;
border: 0;
background: #fff;
}
.tg-inlineNote {
margin-top: .6rem;
padding: .7rem .85rem;
border-radius: 14px;
background: rgba(37, 99, 235, .08);
color: var(--tg-muted);
}
.tg-signModal {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .48);
display: grid;
place-items: center;
padding: 1rem;
z-index: 60;
}
.tg-signModalDialog {
width: min(1180px, 96vw);
max-height: min(92vh, 900px);
overflow: auto;
border-radius: 24px;
background: var(--tg-surface, #ffffff);
box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}
.tg-signModalHead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.15rem;
border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.tg-signClose {
border: 0;
background: transparent;
font-size: 1.5rem;
cursor: pointer;
color: var(--tg-text);
}
.tg-signModalBody {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
gap: 1rem;
padding: 1rem;
}
.tg-signControlsPane {
display: grid;
align-content: start;
gap: .8rem;
}
.tg-signDrawCanvas {
width: 100%;
display: block;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(148, 163, 184, .22);
touch-action: none;
}
.tg-signOverlay {
position: absolute;
left: 0;
top: 0;
z-index: 3;
cursor: grab;
user-select: none;
touch-action: none;
filter: drop-shadow(0 8px 18px rgba(15,23,42,.12));
}
.tg-fileItem--draggable {
cursor: grab;
}
@media (max-width: 980px) {
.tg-pdfEditorGrid,
.tg-signModalBody {
grid-template-columns: 1fr;
}
.tg-htmlPreviewFrame {
min-height: 540px;
}
}
/* Patch v7 PDF editor contrast + signer polish */
.tg-converterGrid { gap: 24px; }
.tg-panel .tg-primaryBtn--wide { margin-top: 8px; }
.tg-progressWrap { gap: 14px; margin-top: 8px; }
.tg-pdfWorkspace {
color: #122033;
background: linear-gradient(180deg, #ffffff, #f6f9fe);
}
.tg-pdfWorkspace .tg-inlineMeta,
.tg-pdfWorkspace .tg-miniField span,
.tg-pdfWorkspace .tg-previewCaption,
.tg-pdfWorkspace .tg-emptyState,
.tg-pdfWorkspace .tg-emptyState p,
.tg-pdfWorkspace .tg-fileMeta,
.tg-pdfWorkspace .tg-pdfThumbMeta span,
.tg-pdfWorkspace .tg-htmlPreviewNote {
color: #4b607e;
}
.tg-pdfWorkspace .tg-emptyState strong,
.tg-pdfWorkspace .tg-pdfThumbMeta strong,
.tg-pdfWorkspace .tg-signHintCard,
.tg-pdfWorkspace .tg-inlineRow,
.tg-pdfWorkspace .tg-chipChoice,
.tg-pdfWorkspace label,
.tg-pdfWorkspace p,
.tg-pdfWorkspace div,
.tg-pdfWorkspace span {
color: inherit;
}
.tg-pdfWorkspace .tg-pdfThumbCard {
background: #ffffff;
color: #122033;
border-color: rgba(148,163,184,.26);
}
.tg-pdfWorkspace .tg-pdfThumbPreview {
background: #f3f6fb;
}
.tg-pdfWorkspace .tg-chipChoice {
background: rgba(37,99,235,.08);
border: 1px solid rgba(37,99,235,.12);
}
.tg-pdfWorkspace .tg-signHintCard,
.tg-htmlPreviewNote {
margin-top: 4px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(37,99,235,.14);
background: rgba(37,99,235,.06);
color: #2b4468;
line-height: 1.55;
}
.tg-htmlPreviewShell {
background: #fff;
}
[data-theme="dark"] .tg-pdfWorkspace,
.tg-body--dark .tg-pdfWorkspace {
color: #e8f1ff;
background: linear-gradient(180deg, rgba(14,23,39,.96), rgba(18,27,46,.96));
}
[data-theme="dark"] .tg-pdfWorkspace .tg-inlineMeta,
[data-theme="dark"] .tg-pdfWorkspace .tg-miniField span,
[data-theme="dark"] .tg-pdfWorkspace .tg-previewCaption,
[data-theme="dark"] .tg-pdfWorkspace .tg-emptyState,
[data-theme="dark"] .tg-pdfWorkspace .tg-emptyState p,
[data-theme="dark"] .tg-pdfWorkspace .tg-fileMeta,
[data-theme="dark"] .tg-pdfWorkspace .tg-pdfThumbMeta span,
[data-theme="dark"] .tg-pdfWorkspace .tg-htmlPreviewNote,
.tg-body--dark .tg-pdfWorkspace .tg-inlineMeta,
.tg-body--dark .tg-pdfWorkspace .tg-miniField span,
.tg-body--dark .tg-pdfWorkspace .tg-previewCaption,
.tg-body--dark .tg-pdfWorkspace .tg-emptyState,
.tg-body--dark .tg-pdfWorkspace .tg-emptyState p,
.tg-body--dark .tg-pdfWorkspace .tg-fileMeta,
.tg-body--dark .tg-pdfWorkspace .tg-pdfThumbMeta span,
.tg-body--dark .tg-pdfWorkspace .tg-htmlPreviewNote {
color: #a9bddd;
}
[data-theme="dark"] .tg-pdfWorkspace .tg-pdfThumbCard,
.tg-body--dark .tg-pdfWorkspace .tg-pdfThumbCard {
background: rgba(18,27,46,.92);
color: #eef4ff;
border-color: rgba(148,163,184,.16);
}
[data-theme="dark"] .tg-pdfWorkspace .tg-pdfThumbPreview,
.tg-body--dark .tg-pdfWorkspace .tg-pdfThumbPreview {
background: rgba(248,250,252,.96);
}
[data-theme="dark"] .tg-pdfWorkspace .tg-signHintCard,
[data-theme="dark"] .tg-htmlPreviewNote,
.tg-body--dark .tg-pdfWorkspace .tg-signHintCard,
.tg-body--dark .tg-htmlPreviewNote {
background: rgba(37,99,235,.14);
color: #dce7ff;
}
.tg-signModal {
z-index: 100;
background: rgba(2, 8, 23, .72);
}
.tg-signModalDialog {
width: min(1440px, 92vw);
max-height: 94vh;
background: #f8fbff;
color: #122033;
}
.tg-signModalHead {
padding: 18px 22px;
background: linear-gradient(180deg, #ffffff, #f3f7fd);
}
.tg-signModalHead strong {
display: block;
color: #122033;
font-size: 22px;
}
.tg-signModalHead p {
margin: 6px 0 0;
color: #587194;
line-height: 1.5;
}
.tg-signClose {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(15,23,42,.06);
color: #122033;
}
.tg-signModalBody {
grid-template-columns: minmax(0, 1.7fr) minmax(340px, .95fr);
gap: 22px;
padding: 22px;
}
.tg-signPreviewPane,
.tg-signControlsPane {
color: #122033;
}
.tg-signToolbar {
gap: 12px;
}
.tg-signCanvasWrap {
width: 100%;
display: grid;
justify-items: center;
padding: 10px;
border-radius: 20px;
border: 1px solid rgba(148,163,184,.22);
background: linear-gradient(180deg, #eef4fb, #f8fbff);
}
.tg-signCanvasWrap .tg-pageCanvas {
max-height: 72vh;
width: auto;
max-width: 100%;
}
.tg-signControlsPane {
align-content: start;
gap: 14px;
}
.tg-signControlsPane .tg-fieldLabel,
.tg-signControlsPane .tg-muted,
.tg-signControlsPane .tg-inlineMeta,
.tg-signControlsPane .tg-fileMeta,
.tg-signPreviewPane .tg-inlineMeta,
.tg-signPreviewPane span,
.tg-signPreviewPane label {
color: #4f6685;
}
.tg-uploadMini {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 16px;
border-radius: 14px;
border: 1px solid rgba(37,99,235,.18);
background: rgba(37,99,235,.07);
color: #1646a0;
font-weight: 700;
}
.tg-uploadMini:hover {
background: rgba(37,99,235,.12);
}
.tg-signScaleMeta {
font-size: 13px;
color: #5f7696;
margin-top: 6px;
}
.tg-signDrawCanvas {
background: #fff;
}
.tg-signOverlay {
cursor: grab;
max-width: none;
}
.tg-signOverlay:active {
cursor: grabbing;
}
@media (max-width: 980px) {
.tg-converterGrid { gap: 20px; }
.tg-signModalDialog {
width: 96vw;
max-height: 96vh;
}
.tg-signModalBody {
grid-template-columns: 1fr;
}
.tg-signCanvasWrap .tg-pageCanvas {
max-height: 54vh;
width: 100%;
}
}
/* Patch v8 signer + rotate + page number controls */
.tg-scrollPane {
max-height: 72vh;
overflow: auto;
padding-right: 8px;
}
.tg-pdfWorkspace .tg-scrollPane {
border-radius: 18px;
}
.tg-pdfWorkspace input[type="color"].tg-input {
width: 58px;
min-width: 58px;
padding: 6px;
cursor: pointer;
border-radius: 14px;
}
.tg-pdfWorkspace input[type="number"].tg-input {
padding-right: 12px;
}
.tg-signStage {
position: relative;
display: inline-block;
line-height: 0;
}
.tg-signOverlayBox {
position: absolute;
left: 0;
top: 0;
z-index: 4;
cursor: grab;
touch-action: none;
}
.tg-signOverlayBox:active {
cursor: grabbing;
}
.tg-signOverlay {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
}
.tg-signModeTabs {
gap: 10px;
}
.tg-signModeSection {
display: grid;
gap: 12px;
}
.tg-signDrawCanvas {
min-height: 220px;
}
.tg-signControlsPane .tg-input {
background: #fff;
color: #122033;
}
.tg-signCanvasWrap {
overflow: auto;
max-height: 78vh;
}
.tg-signPreviewPane .tg-input--small {
min-width: 150px;
}
@media (max-width: 980px) {
.tg-scrollPane {
max-height: 58vh;
}
.tg-signCanvasWrap {
max-height: 56vh;
}
}
.tg-field--checkbox { display: inline-flex; align-items: center; gap: 8px; }
.tg-field--checkbox .tg-fieldLabel { margin: 0; }
.tg-field--checkbox input[type="checkbox"] { margin: 0; width: 16px; height: 16px; flex: 0 0 auto; }
.tg-signModeSection[hidden] { display: none !important; }
.tg-signHandle { position: absolute; width: 14px; height: 14px; border-radius: 999px; border: 2px solid #ffffff; background: #2563eb; box-shadow: 0 2px 8px rgba(15, 23, 42, .24); padding: 0; }
.tg-signHandle--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.tg-signHandle--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.tg-signHandle--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.tg-signHandle--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.tg-signWorkspaceGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.tg-previewMiniCard { background: #fff; border: 1px solid rgba(148, 163, 184, .22); border-radius: 18px; padding: 12px; }
.tg-pdfThumbCard--selectable { position: relative; cursor: pointer; }
.tg-pdfThumbCard--selectable.is-selected { box-shadow: 0 0 0 2px rgba(37, 99, 235, .28); border-color: rgba(37, 99, 235, .42); }
.tg-thumbSelectBadge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.96); color: #122033; font-size: 12px; font-weight: 700; }
.tg-thumbSelectBadge input { margin: 0; }
[data-theme="dark"] .tg-previewMiniCard, .tg-body--dark .tg-previewMiniCard { background: rgba(18,27,46,.92); border-color: rgba(148,163,184,.16); }
/* Patch v9 merge/signer/html refinements */
.tg-pdfEditorApp--single .tg-pdfEditorGrid { grid-template-columns: 1fr; }
.tg-pdfEditorApp--single .tg-panel--preview { display: none; }
.tg-signTargetCard { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(148,163,184,.22); border-radius: 16px; background: rgba(255,255,255,.72); }
.tg-signTargetHead strong { color: #122033; font-size: 14px; }
.tg-signTargetGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 240px; overflow: auto; padding-right: 4px; }
.tg-signTargetGrid.is-disabled { opacity: .58; }
.tg-signTargetThumb { position: relative; display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 14px; border: 1px solid rgba(148,163,184,.24); background: #fff; cursor: pointer; color: #122033; }
.tg-signTargetThumb input { position: absolute; top: 8px; left: 8px; margin: 0; z-index: 2; }
.tg-signTargetThumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 10px; background: #f8fafc; }
.tg-signTargetThumb span { font-size: 12px; font-weight: 700; color: #49617f; text-align: center; }
.tg-signTargetThumb.is-selected { border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
.tg-signTargetThumb.is-current { outline: 2px dashed rgba(15,23,42,.24); outline-offset: 1px; }
@media (max-width: 980px) { .tg-signTargetGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Patch v10 image editor */
.tg-imageEditorApp {
display: grid;
gap: 18px;
}
.tg-imageEditorTopbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tg-imageEditorGrid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
gap: 18px;
}
.tg-imageEditorStagePanel,
.tg-imageEditorControls {
display: grid;
gap: 14px;
}
.tg-imageEditorToolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tg-imageEditorToolbar .tg-secondaryBtn.is-active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
.tg-imageCanvasWrap {
border: 1px solid rgba(148,163,184,.25);
border-radius: 20px;
background: linear-gradient(135deg, rgba(248,250,252,1), rgba(241,245,249,1));
overflow: auto;
max-height: 76vh;
padding: 14px;
}
.tg-imageEditorCanvas {
display: block;
max-width: 100%;
height: auto;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 30px rgba(15,23,42,.12);
}
.tg-imageEditorCanvas[data-mode="draw"] {
cursor: crosshair;
}
.tg-imageEditorCanvas[data-mode="crop"] {
cursor: crosshair;
}
.tg-imageEditorCanvas[data-mode="select"] {
cursor: default;
}
.tg-imageEditorSection {
display: grid;
gap: 12px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(148,163,184,.2);
background: rgba(255,255,255,.82);
}
.tg-imageEditorSection h3 {
margin: 0;
}
.tg-inlineFieldGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.tg-inlineChecks {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.tg-inlineWrap {
flex-wrap: wrap;
}
.tg-input--compact {
min-height: 44px;
padding: 0;
}
[data-theme="dark"] .tg-imageEditorSection,
.tg-body--dark .tg-imageEditorSection {
background: rgba(18,27,46,.9);
border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .tg-imageCanvasWrap,
.tg-body--dark .tg-imageCanvasWrap {
background: linear-gradient(135deg, rgba(18,27,46,.98), rgba(30,41,59,.98));
}
@media (max-width: 980px) {
.tg-imageEditorGrid {
grid-template-columns: 1fr;
}
.tg-inlineFieldGrid {
grid-template-columns: 1fr;
}
}
/* Patch v11 signer aspect + image editor polish */
.tg-signOverlayBox,
.tg-signOverlay {
image-rendering: auto;
}
.tg-signOverlayBox {
overflow: visible;
}
.tg-signOverlay {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
background: transparent;
}
.tg-imageEditorApp {
gap: 22px;
}
.tg-imageEditorTopbar {
align-items: stretch;
}
.tg-imageEditorOpen {
min-width: 220px;
}
.tg-imageEditorGrid {
align-items: start;
}
.tg-imageEditorStagePanel,
.tg-imageEditorControls {
gap: 16px;
}
.tg-imageEditorStagePanel,
.tg-imageEditorControls,
.tg-imageEditorSection {
color: #10233e;
}
.tg-imageEditorStagePanel .tg-panelHead h3,
.tg-imageEditorControls .tg-panelHead h3,
.tg-imageEditorSection h3 {
color: #10233e;
font-size: 19px;
line-height: 1.2;
}
.tg-imageEditorStagePanel .tg-panelHead p,
.tg-imageEditorSection .tg-fieldLabel,
.tg-imageEditorSection .tg-inlineMeta,
.tg-imageEditorSection .tg-muted,
.tg-imageEditorControls .tg-fieldLabel,
.tg-imageEditorControls .tg-inlineMeta,
.tg-imageEditorControls .tg-muted {
color: #526985;
}
.tg-imageEditorToolbar {
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, .18);
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,247,254,.95));
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.tg-imageEditorToolbar .tg-secondaryBtn,
.tg-imageEditorSection .tg-secondaryBtn {
background: #ffffff;
color: #17345d;
border-color: rgba(59, 130, 246, .18);
box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.tg-imageEditorToolbar .tg-secondaryBtn:hover,
.tg-imageEditorSection .tg-secondaryBtn:hover {
background: #eff6ff;
border-color: rgba(59, 130, 246, .34);
}
.tg-imageEditorToolbar .tg-secondaryBtn.is-active {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
border-color: transparent;
box-shadow: 0 14px 26px rgba(37,99,235,.24);
}
.tg-imageCanvasWrap {
padding: 18px;
background:
linear-gradient(45deg, rgba(148,163,184,.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,.18) 75%, rgba(148,163,184,.18)),
linear-gradient(45deg, rgba(148,163,184,.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,.18) 75%, rgba(148,163,184,.18)),
linear-gradient(180deg, #f8fbff, #eef4fb);
background-size: 20px 20px, 20px 20px, auto;
background-position: 0 0, 10px 10px, 0 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.tg-imageEditorCanvas {
margin: 0 auto;
border: 1px solid rgba(148, 163, 184, .22);
}
.tg-imageEditorSection {
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(148,163,184,.16);
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,247,252,.96));
box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.tg-imageEditorSection .tg-input,
.tg-imageEditorSection select.tg-input,
.tg-imageEditorSection .tg-range,
.tg-imageEditorControls .tg-input,
.tg-imageEditorControls select.tg-input {
background: #ffffff;
color: #122033;
border-color: rgba(148,163,184,.26);
}
.tg-imageEditorSection .tg-input::placeholder,
.tg-imageEditorControls .tg-input::placeholder {
color: #8aa0bc;
}
.tg-imageEditorSection input[type="color"].tg-input,
.tg-imageEditorControls input[type="color"].tg-input {
min-height: 48px;
padding: 6px;
border-radius: 14px;
cursor: pointer;
}
.tg-imageEditorSection .tg-field--checkbox,
.tg-imageEditorControls .tg-field--checkbox {
color: #17345d;
}
.tg-imageEditorSection .tg-field--checkbox .tg-fieldLabel,
.tg-imageEditorControls .tg-field--checkbox .tg-fieldLabel {
color: #17345d;
}
.tg-imageEditorSection .tg-primaryBtn,
.tg-imageEditorControls .tg-primaryBtn {
box-shadow: 0 14px 28px rgba(37,99,235,.22);
}
.tg-imageEditorNotice {
margin-top: -4px;
}
[data-theme="dark"] .tg-imageEditorToolbar,
.tg-body--dark .tg-imageEditorToolbar {
background: linear-gradient(180deg, rgba(18,27,46,.98), rgba(22,34,58,.98));
border-color: rgba(148,163,184,.16);
}
[data-theme="dark"] .tg-imageEditorStagePanel,
[data-theme="dark"] .tg-imageEditorControls,
[data-theme="dark"] .tg-imageEditorSection,
.tg-body--dark .tg-imageEditorStagePanel,
.tg-body--dark .tg-imageEditorControls,
.tg-body--dark .tg-imageEditorSection {
color: #e5eefb;
}
[data-theme="dark"] .tg-imageEditorStagePanel .tg-panelHead h3,
[data-theme="dark"] .tg-imageEditorSection h3,
.tg-body--dark .tg-imageEditorStagePanel .tg-panelHead h3,
.tg-body--dark .tg-imageEditorSection h3 {
color: #eef5ff;
}
[data-theme="dark"] .tg-imageEditorStagePanel .tg-panelHead p,
[data-theme="dark"] .tg-imageEditorSection .tg-fieldLabel,
[data-theme="dark"] .tg-imageEditorSection .tg-inlineMeta,
[data-theme="dark"] .tg-imageEditorControls .tg-fieldLabel,
.tg-body--dark .tg-imageEditorStagePanel .tg-panelHead p,
.tg-body--dark .tg-imageEditorSection .tg-fieldLabel,
.tg-body--dark .tg-imageEditorSection .tg-inlineMeta,
.tg-body--dark .tg-imageEditorControls .tg-fieldLabel {
color: #b9cbe5;
}
[data-theme="dark"] .tg-imageEditorToolbar .tg-secondaryBtn,
[data-theme="dark"] .tg-imageEditorSection .tg-secondaryBtn,
.tg-body--dark .tg-imageEditorToolbar .tg-secondaryBtn,
.tg-body--dark .tg-imageEditorSection .tg-secondaryBtn {
background: rgba(255,255,255,.06);
color: #eef5ff;
border-color: rgba(255,255,255,.12);
box-shadow: none;
}
[data-theme="dark"] .tg-imageEditorSection,
.tg-body--dark .tg-imageEditorSection {
background: linear-gradient(180deg, rgba(18,27,46,.98), rgba(22,34,58,.98));
border-color: rgba(148,163,184,.16);
box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
[data-theme="dark"] .tg-imageEditorSection .tg-input,
[data-theme="dark"] .tg-imageEditorControls .tg-input,
.tg-body--dark .tg-imageEditorSection .tg-input,
.tg-body--dark .tg-imageEditorControls .tg-input {
background: rgba(255,255,255,.05);
color: #fff;
border-color: rgba(255,255,255,.12);
}
@media (max-width: 980px) {
.tg-imageEditorOpen {
width: 100%;
min-width: 0;
}
.tg-imageEditorTopbar {
grid-template-columns: 1fr;
}
.tg-imageEditorToolbar {
gap: 8px;
}
.tg-imageEditorToolbar .tg-secondaryBtn {
flex: 1 1 calc(33.333% - 8px);
min-width: 108px;
}
.tg-imageCanvasWrap {
max-height: 58vh;
padding: 12px;
}
}
@media (max-width: 720px) {
.tg-imageEditorApp {
gap: 16px;
}
.tg-imageEditorToolbar {
position: sticky;
top: 8px;
z-index: 2;
gap: 8px;
}
.tg-imageEditorToolbar .tg-secondaryBtn,
.tg-imageEditorSection .tg-secondaryBtn,
.tg-imageEditorSection .tg-primaryBtn {
flex: 1 1 calc(50% - 8px);
width: 100%;
}
.tg-inlineRow,
.tg-inlineWrap,
.tg-inlineChecks {
gap: 10px;
}
.tg-imageEditorSection {
padding: 14px;
}
.tg-imageCanvasWrap {
max-height: 52vh;
padding: 10px;
}
}
/* Patch v12 image editor drag drop + signer clear button */
.tg-imageEditorApp.is-dragover .tg-imageEditorOpen,
.tg-imageCanvasWrap.is-dragover {
border-color: rgba(37, 99, 235, .55);
box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), inset 0 1px 0 rgba(255,255,255,.75);
}
.tg-imageCanvasWrap.is-dragover {
background:
linear-gradient(45deg, rgba(148,163,184,.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,.18) 75%, rgba(148,163,184,.18)),
linear-gradient(45deg, rgba(148,163,184,.18) 25%, transparent 25%, transparent 75%, rgba(148,163,184,.18) 75%, rgba(148,163,184,.18)),
linear-gradient(180deg, #f8fbff, #eef4fb);
}
.tg-imageCanvasWrap {
position: relative;
transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tg-imageCanvasWrap.is-dragover::after {
content: 'Drop image here';
position: absolute;
inset: 16px;
display: grid;
place-items: center;
border: 2px dashed rgba(37, 99, 235, .58);
border-radius: 18px;
background: rgba(255, 255, 255, .72);
color: #17345d;
font-weight: 800;
font-size: clamp(18px, 2vw, 24px);
letter-spacing: .01em;
pointer-events: none;
}
[data-theme="dark"] .tg-imageCanvasWrap.is-dragover::after,
.tg-body--dark .tg-imageCanvasWrap.is-dragover::after {
background: rgba(15, 23, 42, .6);
color: #eef5ff;
}
.tg-signClearOnly {
min-width: 110px;
justify-content: center;
font-weight: 800;
color: #17345d !important;
background: #ffffff !important;
border: 1px solid rgba(59,130,246,.24) !important;
box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.tg-signClearOnly:hover {
background: #eff6ff !important;
border-color: rgba(59,130,246,.42) !important;
}
[data-theme="dark"] .tg-signClearOnly,
.tg-body--dark .tg-signClearOnly {
color: #eef5ff !important;
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.14) !important;
box-shadow: none;
}
[data-theme="dark"] .tg-signClearOnly:hover,
.tg-body--dark .tg-signClearOnly:hover {
background: rgba(255,255,255,.14) !important;
}
/* Patch v13 home cleanup + filename clamp + image editor 3-column layout */
.tg-resultCard {
min-width: 0;
}
.tg-resultCard > div {
min-width: 0;
flex: 1 1 auto;
}
.tg-resultCard strong {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) {
.tg-resultCard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
}
.tg-imageEditorGrid {
display: grid;
grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.45fr) minmax(250px, 0.75fr);
grid-template-areas: "left stage right";
align-items: start;
}
.tg-imageEditorControls--left { grid-area: left; }
.tg-imageEditorControls--right { grid-area: right; }
.tg-imageEditorStagePanel {
grid-area: stage;
position: sticky;
top: 86px;
}
.tg-imageEditorControls--left,
.tg-imageEditorControls--right {
display: grid;
gap: 16px;
}
.tg-imageEditorSection .tg-inlineNote {
margin: -2px 0 0;
color: #5f7490;
line-height: 1.5;
}
[data-theme="dark"] .tg-imageEditorSection .tg-inlineNote,
.tg-body--dark .tg-imageEditorSection .tg-inlineNote {
color: #b9cbe5;
}
@media (max-width: 1180px) {
.tg-imageEditorGrid {
grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.2fr) minmax(220px, 0.85fr);
}
}
@media (max-width: 980px) {
.tg-imageEditorGrid {
grid-template-columns: 1fr;
grid-template-areas:
"stage"
"left"
"right";
}
.tg-imageEditorStagePanel {
position: static;
top: auto;
}
}
/* Patch v14 home pills + larger image editor stage */
.tg-heroCopy--home {
display: grid;
gap: 16px;
}
.tg-homeFilters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.tg-filterPill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #eef5ff;
font-weight: 800;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tg-filterPill:hover {
background: rgba(255,255,255,.1);
}
.tg-filterPill.is-active {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
border-color: transparent;
box-shadow: 0 14px 28px rgba(37,99,235,.24);
}
.tg-imageEditorGrid {
grid-template-columns: minmax(190px, 0.52fr) minmax(0, 2fr) minmax(190px, 0.52fr);
}
.tg-imageEditorControls--left,
.tg-imageEditorControls--right {
gap: 12px;
font-size: 14px;
}
.tg-imageEditorSection {
padding: 13px;
gap: 10px;
}
.tg-imageEditorSection h3,
.tg-imageEditorStagePanel .tg-panelHead h3,
.tg-imageEditorControls .tg-panelHead h3 {
font-size: 17px;
}
.tg-imageEditorSection .tg-fieldLabel,
.tg-imageEditorControls .tg-fieldLabel,
.tg-imageEditorStagePanel .tg-panelHead p,
.tg-imageEditorSection .tg-inlineMeta,
.tg-imageEditorSection .tg-inlineNote {
font-size: 13px;
}
.tg-imageEditorToolbar .tg-secondaryBtn,
.tg-imageEditorSection .tg-secondaryBtn {
min-height: 36px;
font-size: 12px;
padding: 0 10px;
}
.tg-imageEditorStagePanel {
top: 78px;
}
.tg-imageCanvasWrap {
max-height: 82vh;
padding: 16px;
}
.tg-imageEditorCanvas {
max-width: min(100%, 1200px);
}
@media (max-width: 1180px) {
.tg-imageEditorGrid {
grid-template-columns: minmax(180px, 0.52fr) minmax(0, 1.7fr) minmax(180px, 0.52fr);
}
}
@media (max-width: 980px) {
.tg-homeFilters {
gap: 8px;
}
.tg-filterPill {
flex: 1 1 calc(33.333% - 8px);
min-width: 0;
padding: 0 12px;
}
.tg-imageEditorGrid {
grid-template-columns: 1fr;
}
.tg-imageCanvasWrap {
max-height: 66vh;
}
}
.tg-homeCategory.is-hidden,
.tg-toolCard.is-hidden {
display: none !important;
}
.ntp-toolbar button.is-busy,
.ntp-toolbar .tg-btn.is-busy,
.ntp-toolbar button:disabled,
.ntp-toolbar .tg-btn:disabled {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
/* Patch v12 text tools */
.tg-textToolCard {
display: grid;
gap: 18px;
}
.tg-textToolGrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
}
.tg-textToolTextarea {
min-height: 220px;
resize: vertical;
font-family: inherit;
}
.tg-outputArea {
background: #f8fbff;
color: #122033;
border-color: rgba(148,163,184,.26);
caret-color: #122033;
}
.tg-outputArea.tg-input,
textarea.tg-outputArea,
input.tg-outputArea,
select.tg-outputArea {
background: #f8fbff;
color: #122033 !important;
border-color: rgba(148,163,184,.26);
caret-color: #122033;
}
.tg-outputArea::placeholder,
.tg-outputArea.tg-input::placeholder,
textarea.tg-outputArea::placeholder,
input.tg-outputArea::placeholder {
color: #6b7f9d;
}
.tg-uploadCard {
color: #122033;
}
.tg-uploadCard strong,
.tg-uploadCard span,
.tg-uploadCard label,
.tg-uploadCard .tg-fieldLabel {
color: inherit;
}
.tg-uploadCard .tg-uploadMini {
color: #1646a0;
}
/* Readability fix for light output/input surfaces used across utility tools */
.tg-lightSurface,
.tg-lightSurface .tg-input,
.tg-lightSurface textarea,
.tg-lightSurface input:not([type="checkbox"]):not([type="radio"]),
.tg-lightSurface select,
.tg-panel textarea[readonly].tg-input,
.tg-panel input[readonly].tg-input {
color: #122033;
caret-color: #122033;
}
.tg-lightSurface .tg-input::placeholder,
.tg-lightSurface textarea::placeholder,
.tg-lightSurface input::placeholder {
color: #6b7f9d;
}
.tg-panelHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.tg-panelHead h3 {
margin: 0;
}
.tg-resultMeta {
font-size: 13px;
color: #5f7696;
text-align: right;
}
.tg-actionRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.tg-inlineFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.tg-uploadCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border: 1px solid rgba(148,163,184,.25);
border-radius: 18px;
background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.tg-uploadCardInfo {
display: grid;
gap: 6px;
}
.tg-uploadCardInfo strong {
color: #122033;
}
.tg-uploadCardInfo span {
color: #5f7696;
font-size: 13px;
}
.tg-uploadMini--wide {
min-width: 148px;
cursor: pointer;
}
.tg-uploadMini--wide span {
pointer-events: none;
}
@media (max-width: 980px) {
.tg-textToolGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.tg-inlineFields {
grid-template-columns: 1fr;
}
.tg-uploadCard {
align-items: stretch;
flex-direction: column;
}
.tg-uploadMini--wide {
width: 100%;
}
.tg-panelHead {
align-items: flex-start;
flex-direction: column;
}
.tg-resultMeta {
text-align: left;
}
}