/* EXIF component styles, scoped to the integrated workspace. */
.exif-tool .workspace {
display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}
.exif-tool .file-card {
min-width:0;padding:24px;background:#fff;border:1px solid #dfe5db;border-radius:17px;box-shadow:0 4px 12px #233d2a03}
.exif-tool .card-heading {
display:flex;align-items:center;gap:12px;margin-bottom:22px}
.exif-tool .step {
display:grid;place-items:center;background:#edf2e9;border:1px solid #e0e8da;border-radius:10px;width:35px;height:35px;font-size:13px;font-weight:700;flex-shrink:0}
.exif-tool h2 {
font-size:16px;letter-spacing:-.3px;margin:0 0 5px}
.exif-tool .card-heading p {
font-size:11px;color:#798479;margin:0}
.exif-tool .tag {
font-size:9px;letter-spacing:1px;color:#7a867d;margin-left:auto}
.exif-tool .dropzone {
height:208px;background:#fafbf8;border:1.5px dashed #ccd8c8;border-radius:11px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden;transition:background .15s,border-color .15s}
.exif-tool .dropzone:hover,
.exif-tool .dropzone.dragover {
background:#eef4e9;border-color:#5f8567}
.exif-tool .dropzone:focus-within {
outline:3px solid #8fae7c;outline-offset:3px}
.exif-tool .dropzone input {
position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.exif-tool .empty {
display:flex;flex-direction:column;align-items:center;gap:9px}
.exif-tool .empty strong {
font-size:13px;font-weight:600}
.exif-tool .empty>span:last-child {
font-size:11px;color:#899084}
.exif-tool .upload-icon {
background:#edf2e8;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;font-size:24px;color:#658464;margin-bottom:5px}
.exif-tool .dropzone img {
width:100%;height:100%;object-fit:contain}
.exif-tool .replace {
position:absolute;bottom:9px;background:#ffffffed;padding:6px 12px;border-radius:6px;font-size:11px}
.exif-tool .file-info {
display:flex;flex-direction:column;gap:6px;margin-top:17px;font-size:11px}
.exif-tool .file-info strong {
font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exif-tool .file-info>span {
color:#889182;font-size:10px}
.exif-tool .transfer {
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;border:1px solid #dfe5db;background:#f7f8f4;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;color:#6c866e;pointer-events:none}
.exif-tool .action-area {
display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px}
.exif-tool .action-area strong {
font-size:13px;font-weight:600}
.exif-tool .action-area p {
font-size:11px;color:#7d877b;margin:7px 0 0}
.exif-tool .thumbnail-option {
display:flex;align-items:center;gap:8px;margin-top:12px}
.exif-tool .thumbnail-option input {
width:auto;margin:0}
.exif-tool button {
border:0;border-radius:9px;background:#294f3b;color:#fff;font-family:inherit;font-size:12px;font-weight:600;padding:17px 21px;cursor:pointer;white-space:nowrap}
.exif-tool button span {
margin-left:17px;font-size:17px}
.exif-tool button:hover:enabled {
background:#193d2a}
.exif-tool button:disabled {
background:#dce4d6;color:#8a9985;cursor:not-allowed}
.exif-tool button:focus-visible {
outline:3px solid #8fae7c;outline-offset:3px}
.exif-tool #exif-copy-status {
min-height:20px;font-size:12px;color:#63785f;margin:18px 0 25px}
.exif-tool #exif-copy-status.error {
color:#a24432}
.exif-tool aside {
display:flex;gap:11px;padding:18px 20px;background:#eef2e9;border-radius:10px;color:#75826e;font-size:11px;line-height:1.8}
.exif-tool aside>span {
font-size:17px}
.exif-tool aside p {
margin:0}
.exif-tool aside strong {
color:#52644b}

.exif-tool [hidden] {
display:none!important}
@media(max-width:760px){

.exif-tool .workspace {
grid-template-columns:1fr;gap:22px}
.exif-tool .transfer {
top:50%;transform:translate(-50%,-50%) rotate(90deg)}
.exif-tool .file-card {
padding:20px}
.exif-tool .dropzone {
height:180px}
.exif-tool .action-area {
flex-direction:column;align-items:stretch;gap:18px}
.exif-tool button {
width:100%}

.exif-tool .tag {
font-size:8px}
}
@media(prefers-reduced-motion:reduce){.exif-tool * {
transition:none!important}
}

.exif-tool .help {
font-size:12px;line-height:1.7;color:#657166}
.exif-tool .compact {
height:100px;margin-top:20px}
.exif-tool .status {
min-height:20px;font-size:12px;color:#63785f;margin:18px 0 25px}
.exif-tool .error,
.exif-tool .status.error {
color:#a24432}
.exif-tool fieldset {
padding:0;margin:0;border:0;min-width:0}
.exif-tool label {
font-size:12px}
.exif-tool select,
.exif-tool input[type=text],
.exif-tool input[type=number],
.exif-tool textarea {
display:block;width:100%;font:inherit;color:#243c32;border:1px solid #cbd6c6;background:#fff;border-radius:6px;padding:10px;margin-top:7px}
.exif-tool textarea {
resize:vertical;min-height:66px;font-family:ui-monospace,monospace;font-size:12px}
.exif-tool input:focus-visible,
.exif-tool textarea:focus-visible,
.exif-tool select:focus-visible,
.exif-tool summary:focus-visible,
.exif-tool .download:focus-visible {
outline:3px solid #8fae7c;outline-offset:2px}
.exif-tool textarea:disabled {
background:#f2f4ee;color:#707b70}
.exif-tool input[type=checkbox] {
accent-color:#294f3b}
.exif-tool .tag-rows {
margin-top:22px}
.exif-tool .tag-row {
display:grid;grid-template-columns:minmax(0,1fr) 95px;gap:16px;padding:15px 0;border-top:1px solid #e1e6dd}
.exif-tool .tag-row small {
display:block;color:#738075;font-size:10px;margin-top:5px}
.exif-tool .remove-tag {
display:flex;align-items:center;gap:5px;align-self:center;font-size:11px}
.exif-tool .add-fields {
display:flex;align-items:end;gap:12px;margin:20px 0}
.exif-tool .add-fields>label {
flex:1}
.exif-tool .secondary {
background:#e8eee3;color:#294f3b}
.exif-tool .secondary:hover:enabled {
background:#d8e4cf}
.exif-tool .custom-fields,
.exif-tool .offset-fields {
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0;align-items:end}
.exif-tool .offset-fields {
grid-template-columns:1.7fr repeat(4,1fr)}
.exif-tool details {
margin-top:20px}
.exif-tool summary {
font-size:12px;cursor:pointer;padding:6px 0}
.exif-tool .time-fields {
display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.exif-tool .time-fields legend {
font-size:12px;font-weight:600;margin-bottom:12px}
.exif-tool .time-fields label {
display:flex;align-items:center;gap:5px}
.exif-tool .download {
display:inline-block;background:#294f3b;color:white;text-decoration:none;border-radius:9px;padding:17px 21px;font-size:12px;font-weight:600;text-align:center}
.exif-tool .batch-results {
list-style:none;padding:0;max-height:480px;overflow:auto}
.exif-tool .batch-results li {
font-size:12px;padding:16px 0;border-bottom:1px solid #e1e6dd;overflow-wrap:anywhere}
.exif-tool .batch-results p {
font-size:11px;line-height:1.6;margin:7px 0 0}
.exif-tool #edit-name {
overflow-wrap:anywhere}
.exif-tool #batch-output {
margin-top:20px}
.exif-tool button {
white-space:normal}
@media(max-width:760px){
.exif-tool .offset-fields,
.exif-tool .custom-fields {
grid-template-columns:1fr 1fr}
.exif-tool .offset-fields>label:first-child {
grid-column:1/-1}
.exif-tool .add-fields {
align-items:stretch;flex-direction:column}
.exif-tool .tag-row {
grid-template-columns:minmax(0,1fr);gap:6px}
.exif-tool .remove-tag {
justify-self:end}
.exif-tool .download {
width:100%}
}

.exif-tool { color: var(--ink); }

.exif-tool textarea { height: auto; line-height: 1.5; }
.exif-tool .file-card > h2 { font-size: 21px; }
.exif-tool .help, .exif-tool aside, .exif-tool .action-area p { font-size: 13px; }
.exif-tool button, .exif-tool .download { font-size: 13px; }
.exif-tool .time-fields input { width: auto; }