/* ==========================================================================
TOOL BLOCK START - exam-form-photo
examformphoto.css - Exam Form Photo and Signature Resizer
UnitConverterTool.com | Silo: Image Tools. Accent #4a90ff, hover #3a7fee.
Built from tool-build.md sections 1, 3, 3d-crop, 3e and 3h-cloud, ported
from the pan-card donor.
Two classes added to the section 4 closed set by the passport-photo brief
and carried forward here: uct-guide-overlay and uct-guide-line.
FIRST TOOL IN THIS CATEGORY TO USE uct-tabs. Two tabs, Photo and Signature.
The guide-line percentages are NOT hardcoded here the way they are on the
passport, Aadhaar and PAN tools. UPSC cites about 75 percent face coverage,
which is a looser frame than the 82.5 percent the 35x45mm document presets
use, so each preset carries its own three percentages and the JS writes them
into the custom properties below. The values here are only fallbacks.
Dropped from the donor, because this tool has neither:
- the print sheet (belongs to passport-photo and aadhaar-photo)
- the aspect lock, the number-input pair and the tab-free options layout
========================================================================== */
/* --------------------------------------------------------------------------
3a. ROOT AND HEADING
-------------------------------------------------------------------------- */
.uct-tool {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
font-family: 'DM Sans', sans-serif;
color: #e5e7eb;
/* NEVER set a background here. The page is already #0A0F1C. */
}
.uct-tool_heading { text-align: center; margin-bottom: 20px; }
.uct-tool_heading h1 {
font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 10px;
}
.uct-tool_description {
font-size: 15px; color: #9ca3af; margin: 0; line-height: 1.6;
}
/* --------------------------------------------------------------------------
3b. LAYOUT
-------------------------------------------------------------------------- */
.uct-tool-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: start;
}
/* min-width: 0 lets the columns shrink below their content's min size. Without
* it, Cropper's fixed-width container holds the grid column open on a window
* resize or a phone rotation, and the stage can never shrink back down. */
.uct-tool-main, .uct-tool-sidebar { min-width: 0; }
@media (max-width: 1024px) {
.uct-tool-layout { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
3e-tabs. THE TAB ROW
Copied from the spec, including the per-tab-count max-width rule.
2 tabs here, so max-width = 2 x 210 = 420px.
-------------------------------------------------------------------------- */
.uct-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 auto 4px;
/* Cap the row at roughly 210px per tab. With flex:1 and no cap, two tabs
become 480px each on a 1000px container. max-width = tabCount * 210:
2 tabs -> 420px 3 tabs -> 630px 4 tabs -> 840px */
max-width: 420px;
}
.uct-tab {
flex: 1; min-width: 70px; min-height: 44px; /* 44px is not optional */
display: flex; align-items: center; justify-content: center; gap: 6px;
background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
padding: 10px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
color: #9ca3af; cursor: pointer; transition: all .15s ease;
}
.uct-tab:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-tab.active { background: #4a90ff; border-color: #4a90ff; color: #fff; }
.uct-tab:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-tab svg { flex-shrink: 0; }
/* SUB-PANELS - one per tab. Used twice: for the honesty band between the tab
* row and the layout grid, and for the two preset grids inside the options
* panel. Both are driven by the same tab state. */
.uct-subpanel { display: none; margin-top: 14px; }
.uct-subpanel.active { display: block; }
.uct-subpanel-title { font-size: 13px; font-weight: 600; color: #e5e7eb; margin-bottom: 10px; }
/* The honesty band sits directly above the layout grid, so it needs a gap
* before the upload area starts. */
#tabpanel-photo-exam-form-photo,
#tabpanel-signature-exam-form-photo { margin-bottom: 22px; }
/* --------------------------------------------------------------------------
3c. UPLOAD AREA
-------------------------------------------------------------------------- */
.uct-upload-area {
background: #1a1f2e;
border: 2px dashed #3a4258;
border-radius: 12px;
padding: 40px 24px;
text-align: center;
transition: border-color .2s ease, background .2s ease;
}
.uct-upload-area.drag-over {
border-color: #4a90ff;
background: #1e2538;
}
.uct-upload-area h3 {
font-size: 18px; font-weight: 600; color: #e5e7eb; margin: 16px 0 6px;
}
.uct-upload-area p { font-size: 14px; color: #9ca3af; margin: 0 0 14px; }
.upload-icon svg { stroke: #4a90ff; }
.uct-hidden-input { display: none; }
.uct-tool_drop-text { font-size: 13px; color: #6b7280; margin-top: 14px; }
.uct-trust-strip {
display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
margin-top: 18px; padding-top: 16px; border-top: 1px solid #2a3348;
}
.uct-trust-strip span { font-size: 12px; color: #9ca3af; }
/* WCAG AA. #6b7280 is only 3.96:1 on #0A0F1C and fails. */
.uct-helper-text { font-size: 13px; color: #9ca3af; margin: 10px 0 0; line-height: 1.6; }
/* The caveat above the tabs, and the batch naming note under the controls,
* are page-width helper text rather than sidebar helper text. */
#varies-note-exam-form-photo {
max-width: 780px; margin: 0 auto 18px; text-align: center;
}
#batch-name-note-exam-form-photo {
max-width: 780px; margin: 0 auto 16px; text-align: center;
}
/* --------------------------------------------------------------------------
3d. CLOUD SPLIT BUTTON
-------------------------------------------------------------------------- */
.uct-dropdown-container { position: relative; display: inline-block; }
.uct-split-btn-group { display: flex; }
.uct-btn-main {
background: #4a90ff; color: #fff; border: none;
padding: 12px 22px; border-radius: 8px 0 0 8px;
font-family: inherit; font-size: 15px; font-weight: 600;
cursor: pointer; min-height: 44px; transition: background .15s ease;
}
.uct-btn-main:hover { background: #3a7fee; }
.uct-btn-arrow {
background: #4a90ff; color: #fff;
border: none; border-left: 1px solid rgba(255,255,255,.2);
padding: 12px 14px; border-radius: 0 8px 8px 0;
cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.uct-btn-arrow:hover { background: #3a7fee; }
.uct-dropdown-menu {
display: none; position: absolute; top: calc(100% + 6px); left: 0;
min-width: 220px; background: #252d3f; border: 1px solid #3a4258;
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
z-index: 30; overflow: hidden;
}
.uct-dropdown-menu.show { display: block; }
.uct-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; min-height: 44px; /* Apple HIG minimum */
font-size: 14px; color: #e5e7eb; cursor: pointer;
transition: background .12s ease;
}
.uct-dropdown-item:hover { background: #1e2538; }
.uct-dropdown-item svg { flex-shrink: 0; }
/* --------------------------------------------------------------------------
3d-crop. CROP STAGE
position: relative is required here: the guide overlay is positioned in the
stage's coordinate space, and the cropper container's offsetLeft/offsetTop
are read against the stage as offsetParent.
-------------------------------------------------------------------------- */
.uct-crop-stage {
position: relative;
background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
padding: 12px; overflow: hidden;
}
.uct-crop-stage.drag-over { border-color: #4a90ff; background: #1e2538; }
/* Cropper clones the img into preview boxes at other sizes; a bare
`.uct-crop-stage img` would hit the clones too. */
.uct-crop-stage > img {
display: block; max-width: 100%;
max-height: 520px; /* Cropper sizes its container from this */
}
.uct-crop-stage:focus { outline: none; }
.uct-crop-stage:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
/* Batch file switcher. Rendered only when more than one file is loaded. */
.uct-crop-filmstrip {
display: flex; gap: 8px; overflow-x: auto;
padding: 12px 2px 4px; margin-top: 10px; border-top: 1px solid #2a3348;
}
.uct-crop-thumb {
flex: 0 0 auto; width: 56px; height: 56px; padding: 0;
background: #252d3f; border: 2px solid #3a4258; border-radius: 8px;
overflow: hidden; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .15s ease;
}
.uct-crop-thumb img { display: block; max-width: 100%; max-height: 100%; }
.uct-crop-thumb:hover { border-color: #4a90ff; }
.uct-crop-thumb.active { border-color: #4a90ff; }
.uct-crop-thumb:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
/* THE GUIDE OVERLAY - authorized addition to the closed set (passport brief).
* Absolutely positioned layer the JS keeps glued to the Cropper crop box.
* Hidden entirely on every signature preset: head guides over a signature are
* nonsense. pointer-events: none on the layer AND its children, so a drag that
* starts on a guide line falls straight through to Cropper's own handles.
*
* PER-PRESET PERCENTAGES. The three custom properties are written by the JS
* from the active preset, because the four photo presets do not agree:
* UPSC square, UPSC portrait, IBPS -> 11 / 45 / 86 (75 percent head)
* SSC GD / CHSL / MTS -> 7.5 / 45 / 90 (82.5 percent head)
* The literals below are fallbacks only, and match the UPSC frame that loads
* first. Never read them as the tool's real numbers. */
.uct-guide-overlay {
position: absolute;
pointer-events: none;
z-index: 20;
}
.uct-guide-line {
position: absolute; left: 0; right: 0; height: 0;
border-top: 1px dashed rgba(74,144,255,.65);
pointer-events: none;
}
.uct-guide-line[data-guide="head"] { top: var(--uct-guide-head, 11%); }
.uct-guide-line[data-guide="eyes"] { top: var(--uct-guide-eyes, 45%); }
.uct-guide-line[data-guide="chin"] { top: var(--uct-guide-chin, 86%); }
.uct-guide-line span {
position: absolute; right: 4px; top: 2px;
font-size: 10px; line-height: 1; font-weight: 600;
color: #cfe0ff; background: rgba(10,15,28,.62);
padding: 2px 6px; border-radius: 3px;
pointer-events: none; white-space: nowrap;
}
/* The chin label would clip below the box, so it sits above its line. */
.uct-guide-line[data-guide="chin"] span { top: auto; bottom: 2px; }
/* CROPPER THEME OVERRIDE. Cropper defaults to #39f, which is not our accent.
* The lazy is appended to document.head at runtime, so it lands AFTER
* this file in the cascade. #exam-form-photo .cropper-point (0,1,1) still beats
* .cropper-point (0,1,0) on specificity, so these win with zero !important. */
#exam-form-photo .cropper-view-box { outline: 1px solid #4a90ff; outline-color: #4a90ff; }
#exam-form-photo .cropper-line,
#exam-form-photo .cropper-point { background-color: #4a90ff; }
#exam-form-photo .cropper-line { opacity: .5; }
#exam-form-photo .cropper-point { width: 12px; height: 12px; opacity: 1; } /* touch */
#exam-form-photo .cropper-point.point-se { width: 14px; height: 14px; }
#exam-form-photo .cropper-modal { background-color: #000; opacity: .62; }
#exam-form-photo .cropper-dashed { border-color: rgba(255,255,255,.32); }
#exam-form-photo .cropper-center::before,
#exam-form-photo .cropper-center::after { background-color: #4a90ff; }
/* --------------------------------------------------------------------------
3e. OPTIONS PANEL, PRESETS AND THE INK CLEANUP SLIDER
-------------------------------------------------------------------------- */
.uct-options-panel {
background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
overflow: hidden;
}
.uct-options-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; min-height: 44px; cursor: pointer; user-select: none;
}
.uct-options-toggle-left {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600; color: #e5e7eb;
flex-wrap: wrap;
}
.uct-options-toggle-arrow { color: #9ca3af; transition: transform .2s ease; }
.uct-options-panel.collapsed .uct-options-toggle-arrow { transform: rotate(-90deg); }
/* Live state badge. Shows the preset, pixels, KB rule and DPI when collapsed. */
.uct-options-summary { font-size: 12px; font-weight: 400; color: #9ca3af; }
.uct-options-body {
max-height: 2000px; overflow: hidden;
transition: max-height .25s ease, padding .25s ease;
padding: 0 18px 18px;
}
.uct-options-panel.collapsed .uct-options-body {
max-height: 0; padding-top: 0; padding-bottom: 0;
}
.uct-options-section { padding-top: 16px; }
.uct-options-section + .uct-options-section {
margin-top: 16px; border-top: 1px solid #2a3348;
}
.uct-options-section-label {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; color: #9ca3af;
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
/* SLIDER. The JS sets --uct-fill to the thumb percentage; the gradient below
* READS it, so the track left of the thumb is accent and the right is grey.
* The runnable-track and range-track MUST stay transparent, or they paint over
* the gradient and the fill disappears. */
.uct-slider-row { display: flex; align-items: center; gap: 14px; }
.uct-slider-track {
-webkit-appearance: none; appearance: none;
width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer;
background: linear-gradient(to right,
#4a90ff 0%, #4a90ff var(--uct-fill, 0%),
#3a4258 var(--uct-fill, 0%), #3a4258 100%);
}
.uct-slider-track::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: transparent; }
.uct-slider-track::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.uct-slider-track::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%; background: #4a90ff;
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}
.uct-slider-track::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%; background: #4a90ff;
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}
.uct-slider-track:focus-visible { outline: 2px solid #4a90ff; outline-offset: 4px; }
.uct-slider-value {
min-width: 44px; text-align: right; font-size: 14px; font-weight: 600; color: #e5e7eb;
}
.uct-slider-labels {
display: flex; justify-content: space-between;
font-size: 12px; color: #6b7280; margin-top: 6px;
}
/* PRESET CARDS */
.uct-preset-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.uct-preset-card {
background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
padding: 10px; text-align: center; cursor: pointer; transition: all .15s ease;
}
.uct-preset-card:hover { border-color: #4a90ff; }
.uct-preset-card.selected { background: #1e2538; border-color: #4a90ff; }
.uct-preset-card:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-preset-name { font-size: 13px; font-weight: 600; color: #e5e7eb; }
.uct-preset-dims { font-size: 11px; color: #6b7280; margin-top: 2px; }
/* --------------------------------------------------------------------------
3f. ACTIONS
-------------------------------------------------------------------------- */
.uct-action-btn-primary {
width: 100%; margin-top: 14px; min-height: 52px;
background: #1a2542; color: #fff;
border: 1px solid #4a90ff; border-radius: 10px;
font-family: inherit; font-size: 16px; font-weight: 700;
cursor: pointer; transition: background .15s ease;
}
.uct-action-btn-primary:hover:not(:disabled) { background: #222f52; }
.uct-action-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* Busy state. The JS adds this class while work is running. */
.uct-action-btn-primary.is-busy { pointer-events: none; opacity: .7; }
.uct-action-btn-primary.is-busy::after {
content: ''; display: inline-block; margin-left: 10px;
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
animation: uct-spin .7s linear infinite; vertical-align: middle;
}
@keyframes uct-spin { to { transform: rotate(360deg); } }
.uct-controls-area {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0;
}
.uct-action-btn {
background: #4a90ff; color: #fff; border: none; border-radius: 8px;
padding: 12px 22px; min-height: 44px;
font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-action-btn:hover:not(:disabled) { background: #3a7fee; }
.uct-action-btn:disabled { opacity: .5; cursor: not-allowed; }
.uct-secondary-btn, .uct-rerun-btn {
background: transparent; color: #9ca3af;
border: 1px solid #3a4258; border-radius: 8px;
padding: 12px 22px; min-height: 44px;
font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-secondary-btn:hover, .uct-rerun-btn:hover { border-color: #4a90ff; color: #e5e7eb; }
/* STICKY PRIMARY ACTION ON MOBILE. position: fixed, not sticky: a sticky
* element only sticks within its own scroll container, and the sidebar ends
* long before the viewport does. Only once there is something to act on. */
@media (max-width: 768px) {
.uct-tool.uct-has-input .uct-action-btn-primary {
position: fixed; left: 16px; right: 16px; bottom: 16px;
width: auto; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.uct-tool.uct-has-input .uct-results,
.uct-tool.uct-has-input .uct-privacy-note { padding-bottom: 80px; }
}
/* --------------------------------------------------------------------------
3g. RESULTS
-------------------------------------------------------------------------- */
.uct-file-item {
background: #1a1f2e; border: 1px solid #3a4258; border-radius: 10px;
padding: 14px; margin-bottom: 10px;
}
.uct-file-item-row { display: flex; align-items: center; gap: 14px; }
.uct-file-thumb {
width: 56px; height: 56px; flex-shrink: 0;
background: #252d3f; border-radius: 6px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.uct-file-thumb canvas, .uct-file-thumb img { max-width: 100%; max-height: 100%; }
.uct-file-info { flex: 1; min-width: 0; }
.uct-file-name {
font-size: 14px; font-weight: 600; color: #e5e7eb;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uct-file-meta { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.uct-file-status { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.uct-progress-bar {
height: 4px; background: #2a3348; border-radius: 2px;
overflow: hidden; margin-top: 7px;
}
.uct-progress-fill {
height: 100%; width: 0; background: #4a90ff; transition: width .2s ease;
}
/* SIZE COMPARE. Green when it worked, amber when it did not. Honest either way. */
.uct-size-compare { font-size: 12px; margin-top: 4px; line-height: 1.6; }
.uct-size-decreased { color: #4ade80; }
.uct-size-increased { color: #fbbf24; }
.uct-size-same { color: #9ca3af; }
.uct-action-area { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.uct-download-link {
background: #4a90ff; color: #fff; text-decoration: none;
padding: 8px 16px; min-height: 44px; border-radius: 6px;
display: inline-flex; align-items: center;
font-size: 13px; font-weight: 600;
}
.uct-download-link:hover { background: #3a7fee; color: #fff; }
/* THE PROMINENT CALLOUT - the live-capture honesty block. Same component the
* Aadhaar tool uses for its enrolment-centre notice: accent-tinted fill with a
* 3px accent rule down the left edge. No class was invented for it, and the
* paragraphs inside are plain styled through the card. */
.uct-result-card {
background: rgba(74,144,255,.10);
border-left: 3px solid #4a90ff; border-radius: 10px;
padding: 18px 20px; margin: 0;
}
.uct-result-card p { margin: 0; font-size: 14px; color: #e5e7eb; line-height: 1.7; }
.uct-result-card .uct-result-label {
font-size: 13px; font-weight: 700; color: #fff;
text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px;
}
/* COMPLIANCE CHECKLIST - built from the result grid and tiles. */
.uct-result-label { font-size: 13px; color: #9ca3af; margin: 14px 0 6px; }
.uct-result-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.uct-result-tile {
background: #1a1f2e; border: 1px solid #3a4258; border-radius: 10px; padding: 16px;
}
.uct-result-tile-label { font-size: 12px; color: #9ca3af; line-height: 1.6; }
.uct-result-tile-value { font-size: 20px; font-weight: 700; color: #e5e7eb; margin-top: 4px; }
/* The checklist tiles inside a file row are denser than the page-level tiles. */
.uct-file-item .uct-result-label { margin-top: 12px; }
.uct-file-item .uct-result-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.uct-file-item .uct-result-tile { padding: 10px 12px; }
.uct-file-item .uct-result-tile-value { font-size: 15px; margin-top: 2px; }
/* --------------------------------------------------------------------------
3h. MESSAGES, NOTES, UTILITY
-------------------------------------------------------------------------- */
/* The ONLY error surface. Never alert(). */
.uct-error-msg {
background: rgba(192,57,43,.12); border: 1px solid #c0392b; border-radius: 8px;
padding: 12px 16px; margin-bottom: 10px; font-size: 13px; color: #e5e7eb;
}
.uct-error-text { color: #c0392b; font-size: 12px; }
.uct-output-note, .uct-privacy-note {
font-size: 12px; color: #9ca3af; text-align: center;
line-height: 1.6; margin: 14px auto 0; max-width: 820px;
}
.uct-hidden { display: none !important; }
/* Inline links inside the tool */
.uct-tool a:not(.uct-download-link):not(.uct-action-btn) { color: #4a90ff; }
/* --------------------------------------------------------------------------
3h-cloud. THE CLOUD URL-IMPORT MODAL - injected by cloud-handlers.js.
Class names are hardcoded by cloud-handlers.js. Do not rename.
-------------------------------------------------------------------------- */
.uct-modal-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
padding: 20px; background: rgba(0,0,0,.66);
}
.uct-modal-content {
width: 100%; max-width: 460px;
background: #111B2E; border: 1px solid #26324a; border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
}
.uct-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid #26324a;
}
.uct-modal-header h3 { margin: 0; font-size: 16px; color: #e5e7eb; }
.uct-modal-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: #9ca3af; padding: 4px 8px;
}
.uct-modal-close:hover { color: #e5e7eb; }
.uct-modal-body { padding: 18px; }
.uct-modal-info { margin: 0 0 12px; font-size: 13px; color: #9ca3af; line-height: 1.6; }
/* The URL box inside that modal. cloud-handlers.js hardcodes .uct-input-field
* on it, so without this rule (section 3e) it renders as the browser default:
* a 21px white box with a grey border, sitting in a dark modal and well under
* the 44px tap target. It is the ONLY class cloud-handlers emits that the rest
* of this file does not already cover. */
.uct-input-field {
width: 100%; box-sizing: border-box;
background: #1e2538; border: 1px solid #3a4258; border-radius: 6px;
padding: 10px 12px; min-height: 44px;
font-family: inherit; font-size: 14px; color: #e5e7eb;
}
.uct-input-field:focus { outline: none; border-color: #4a90ff; }
.uct-modal-note { margin: 10px 0 0; font-size: 12px; color: #9ca3af; line-height: 1.6; }
.uct-modal-footer {
display: flex; gap: 10px; justify-content: flex-end;
padding: 14px 18px; border-top: 1px solid #26324a;
}
@media (max-width: 480px) {
.uct-modal-footer { flex-direction: column-reverse; }
.uct-modal-footer .uct-action-btn,
.uct-modal-footer .uct-secondary-btn { width: 100%; }
}
/* --------------------------------------------------------------------------
3i. MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.uct-tool { padding: 0 16px; overflow-x: hidden; }
.uct-tool_heading h1 { font-size: 24px; }
.uct-upload-area { padding: 28px 16px; }
.uct-file-item-row { flex-wrap: wrap; }
.uct-action-area { width: 100%; }
.uct-download-link { flex: 1; justify-content: center; }
.uct-preset-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.uct-crop-stage { padding: 8px; }
.uct-crop-stage > img { max-height: 360px; }
.uct-result-card { padding: 16px; }
}
@media (max-width: 480px) {
.uct-tool_heading h1 { font-size: 21px; }
.uct-trust-strip { flex-direction: column; gap: 7px; }
.uct-crop-stage > img { max-height: 300px; }
/* The spec's `.uct-tabs { flex-direction: column }` is deliberately OMITTED:
* it applies at 3+ tabs, and this tool has 2. At 375px each tab is still
* 169px wide at the full 44px height, and stacking would waste vertical
* space above the crop stage. See tool-build.md section 3i. */
.uct-preset-grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
TOOL BLOCK END - exam-form-photo
========================================================================== */