:root {
--ceso-primary: #005197;
--ceso-primary-dark: #003a6b;
--ceso-blue-light: #4d9de0;
--ceso-text: #1e2d3d;
--ceso-text-light: #6c757d;
--ceso-border: #dee2e6;
--ceso-border-light: #e8ecf0;
--ceso-bg: #f0f5fb;
--ceso-white: #ffffff;
--ceso-radius: 6px;
--ceso-shadow: 0 1px 3px rgba(30, 45, 61, 0.10);
--ceso-shadow-lg: 0 10px 25px rgba(30, 45, 61, 0.14);
}
.ceso-score-query-wrapper,
.ceso-verify-wrapper {
box-sizing: border-box;
max-width: 1060px;
margin: 32px auto;
color: var(--ceso-text);
font-family: inherit;
line-height: 1.55;
}
.ceso-score-query-wrapper *,
.ceso-verify-wrapper * {
box-sizing: border-box;
} .ceso-query-wrapper {
max-width: 1060px;
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--ceso-border-light);
border-radius: var(--ceso-radius);
background: var(--ceso-white);
box-shadow: var(--ceso-shadow);
}
.ceso-query-content {
padding: 32px;
}
.ceso-query-wrapper .ceso-query-form {
max-width: 480px;
margin: 0 auto;
}
.ceso-query-wrapper .ceso-form-row {
margin-bottom: 20px;
}
.ceso-query-wrapper .ceso-btn-primary,
.ceso-score-query-wrapper .ceso-btn-primary,
.ceso-verify-wrapper .ceso-btn-primary {
width: 100%;
}
.ceso-query-wrapper .ceso-msg,
.ceso-score-query-wrapper .ceso-msg,
.ceso-verify-wrapper .ceso-msg {
text-align: center;
}
.ceso-query-section,
.ceso-result-section,
.ceso-cert-preview-section,
.ceso-verify-section,
.ceso-verify-result-section,
.ceso-cert-section {
padding: 32px;
border: 1px solid var(--ceso-border-light);
border-radius: var(--ceso-radius);
background: var(--ceso-white);
box-shadow: var(--ceso-shadow);
}
.ceso-result-section,
.ceso-verify-result-section,
.ceso-cert-section {
margin-top: 20px;
}
.ceso-section-hide,
.ceso-msg-hide {
display: none !important;
}
.ceso-section-title {
margin: 0;
color: var(--ceso-primary);
font-size: 24px;
font-weight: 600;
letter-spacing: 0;
}
.ceso-section-desc {
margin: 6px 0 24px;
color: var(--ceso-text-light);
}
.ceso-query-form,
.ceso-verify-form {
max-width: 480px;
margin: 0 auto;
display: grid;
gap: 18px;
}
.ceso-form-row {
min-width: 0;
}
.ceso-form-row label {
display: block;
margin-bottom: 6px;
color: var(--ceso-text);
font-weight: 600;
}
.ceso-form-row input,
.ceso-form-row select {
display: block;
width: 100%;
min-height: 42px;
padding: 9px 11px;
border: 2px solid var(--ceso-border);
border-radius: var(--ceso-radius);
background: var(--ceso-white);
color: var(--ceso-text);
font: inherit;
}
.ceso-form-row input:focus,
.ceso-form-row select:focus {
outline: none;
border-color: var(--ceso-primary);
box-shadow: 0 0 0 3px rgba(0, 81, 151, 0.10);
}
.ceso-field-hint,
.ceso-help-text,
.ceso-auto-hint {
margin: 6px 0 0;
color: var(--ceso-text-light);
}
.ceso-holder-type-hint {
white-space: nowrap;
}
.ceso-form-row-submit {
margin-top: 4px;
}
.ceso-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
max-width: 100%;
gap: 7px;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: var(--ceso-radius);
cursor: pointer;
font: inherit;
font-weight: 600;
letter-spacing: 0;
text-align: center;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ceso-btn:focus-visible {
outline: 2px solid var(--ceso-primary);
outline-offset: 2px;
}
.ceso-btn:disabled {
cursor: not-allowed;
opacity: 0.62;
}
.ceso-btn-primary {
background: var(--ceso-primary);
color: #ffffff;
}
.ceso-btn-primary:hover:not(:disabled) {
background: var(--ceso-primary-dark);
transform: translateY(-1px);
box-shadow: var(--ceso-shadow-lg);
}
.ceso-btn-secondary {
background: var(--ceso-bg);
border-color: var(--ceso-border);
color: var(--ceso-text);
}
.ceso-btn-secondary:hover:not(:disabled) {
background: var(--ceso-white);
border-color: var(--ceso-primary);
}
.ceso-btn-outline {
border: 2px solid var(--ceso-primary);
border-color: var(--ceso-primary);
background: transparent;
color: var(--ceso-primary);
}
.ceso-btn-outline:hover:not(:disabled) {
border-color: var(--ceso-primary);
background: var(--ceso-primary);
color: var(--ceso-white);
}
.ceso-btn-sm {
min-height: 34px;
padding: 5px 10px;
font-size: 14px;
}
.ceso-msg {
margin-top: 16px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: var(--ceso-radius);
}
.ceso-msg-success {
border-color: #c3e6cb;
background: #d4edda;
color: #155724;
}
.ceso-msg-error {
border-color: #f5c6cb;
background: #f8d7da;
color: #721c24;
}
.ceso-msg-info {
border-color: #bee5eb;
background: #d1ecf1;
color: #0c5460;
}
.ceso-cert-list {
display: grid;
gap: 12px;
}
.ceso-cert-item,
.ceso-verify-card,
.ceso-empty {
padding: 16px;
border: 1px solid var(--ceso-border);
border-radius: var(--ceso-radius);
background: var(--ceso-white);
}
.ceso-cert-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.ceso-cert-item h3,
.ceso-cert-item p,
.ceso-verify-card h3,
.ceso-verify-card p {
margin: 0;
}
.ceso-cert-item h3,
.ceso-verify-title {
color: var(--ceso-text);
font-size: 18px;
}
.ceso-cert-row,
.ceso-verify-item {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
border-bottom: 1px solid #e5edf5;
}
.ceso-cert-row:last-child,
.ceso-verify-item:last-child {
border-bottom: 0;
}
.ceso-label {
flex: 0 0 auto;
color: var(--ceso-text-light);
}
.ceso-value {
min-width: 0;
color: var(--ceso-text);
font-weight: 600;
overflow-wrap: anywhere;
text-align: right;
}
.ceso-value-award,
.ceso-cert-award {
color: #a88620;
}
.ceso-result-actions,
.ceso-cert-actions,
.ceso-cert-preview-actions,
.ceso-verify-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.ceso-cert-preview-section {
margin-top: 20px;
background: var(--ceso-white);
}
.ceso-cert-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.ceso-cert-preview-title {
margin: 0;
color: var(--ceso-text);
font-size: 18px;
}
.ceso-cert-preview-wrapper,
.ceso-cert-preview {
overflow: auto;
padding: 12px;
border: 1px solid var(--ceso-border);
border-radius: var(--ceso-radius);
background: var(--ceso-bg);
}
.ceso-cert-preview-wrapper img,
.ceso-cert-preview img,
.ceso-cert-container {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.ceso-cert-container {
position: relative;
margin: 0 auto;
background: #ffffff;
}
.ceso-cert-bg {
display: block;
width: 100%;
height: auto;
}
.ceso-cert-text {
line-height: 1.25;
}
.ceso-cert-zoom-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
}
.ceso-cert-zoom-btn {
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--ceso-border);
border-radius: var(--ceso-radius);
background: var(--ceso-white);
color: var(--ceso-primary);
cursor: pointer;
}
.ceso-verify-card {
text-align: center;
}
.ceso-verify-icon {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
margin-bottom: 8px;
border-radius: 50%;
background: var(--ceso-primary);
color: #ffffff;
font-size: 25px;
font-weight: 700;
}
.ceso-verify-fail .ceso-verify-icon {
background: #b42318;
}
.ceso-verify-info {
margin-top: 14px;
text-align: left;
}
.ceso-spin {
animation: ceso-spin 1s linear infinite;
}
@keyframes ceso-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
.ceso-score-query-wrapper,
.ceso-verify-wrapper {
margin: 16px 0;
}
.ceso-query-section,
.ceso-result-section,
.ceso-cert-preview-section,
.ceso-verify-section,
.ceso-verify-result-section,
.ceso-cert-section {
padding: 18px;
}
.ceso-section-title {
font-size: 21px;
}
.ceso-cert-item {
grid-template-columns: 1fr;
}
.ceso-cert-preview-header {
align-items: flex-start;
flex-direction: column;
}
.ceso-cert-row,
.ceso-verify-item {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.ceso-value {
text-align: left;
}
.ceso-result-actions .ceso-btn,
.ceso-cert-actions .ceso-btn,
.ceso-cert-preview-actions .ceso-btn,
.ceso-verify-actions .ceso-btn,
.ceso-form-row-submit .ceso-btn {
width: 100%;
}
}