:root {
    --color-primary: #007acc;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-disabled: #6c757d;
    --color-bg-light: #f5f5f5;
    --color-bg-lighter: #f8f9fa;
    --color-text-muted: #666;
    --color-white: white;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    padding: 1.25rem;
    max-width: 62.5rem;
    margin: 0 auto;
}

.section {
    margin-bottom: 1.875rem;
}

.btn {
    padding: 0.625rem 1.25rem;
    color: var(--color-white);
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
}

.btn-success {
    background: var(--color-success);
}

.btn-danger {
    background: var(--color-danger);
}

.btn-disabled {
    background: var(--color-disabled);
    cursor: not-allowed;
}

.code-block {
    background: var(--color-bg-light);
    padding: 0.625rem;
    word-break: break-all;
    font-size: 0.75rem;
    margin-top: 0.3125rem;
}

.input-group {
    margin-bottom: 0.9375rem;
}

.input-label {
    display: inline-block;
    margin-right: 0.9375rem;
}

.input-field {
    margin-left: 0.3125rem;
    width: 3.75rem;
}

.share-item {
    margin-bottom: 0.625rem;
    padding: 0.625rem;
    background: var(--color-bg-lighter);
}

.share-hex {
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--color-text-muted);
}

.checkbox-item {
    display: block;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.checkbox-input {
    margin-right: 0.5rem;
}

.status-success {
    margin-top: 0.625rem;
    color: var(--color-success);
    font-weight: bold;
}

.status-error {
    margin-top: 0.625rem;
    color: var(--color-danger);
    font-weight: bold;
}

.field-label {
    margin-bottom: 0.625rem;
}

.field-container {
    margin-top: 0.9375rem;
}