/* Scoped extension of the existing dark study interface. */
.material-output, .material-linking { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--v11-border); }
.material-main select { width: 100%; min-height: 44px; font: inherit; color: #e8eef7; background: #0d1522; border: 1px solid #526079; border-radius: 10px; padding: 10px; margin-bottom: 16px; }
#newKnowledgeFields input { width: 100%; margin-bottom: 16px; }
#linkedKnowledge a { display: inline-block; min-height: 44px; padding: 8px 0; margin-right: 16px; overflow-wrap: anywhere; }
.material-page { color-scheme: dark; }
.material-page [hidden] { display: none !important; }
.material-page .logo { color: var(--v11-text); text-decoration: none; }
.material-page .navbar nav a[aria-current] { color: var(--v11-text); border-color: var(--v11-accent-line); }
.material-main { width: 1120px; max-width: calc(100% - 48px); margin: 48px auto 80px; line-height: 1.75; }
.material-main section { margin: 0; }
.material-main a { color: var(--v11-accent); text-underline-offset: 4px; }
.material-main h1 { margin: 0; font-size: 32px; line-height: 1.3; }
.material-main h2 { font-size: 22px; margin: 0; }
.material-main h3 { font-size: 18px; margin: 0 0 20px; }
.material-heading, .material-toolbar, .material-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.material-heading { justify-content: space-between; }
.material-heading p { margin: 8px 0 0; color: var(--v11-text-2); }
.material-scope { max-width: 75ch; margin: 24px 0; color: var(--v11-text-2); }
.material-message { min-height: 28px; margin: 12px 0; color: var(--v11-text); overflow-wrap: anywhere; }
.material-message.error { color: #ffb8ad; }
.material-toolbar { margin: 24px 0 12px; }
.material-toolbar input { flex: 1; min-width: 100px; }
.material-main input, .material-main textarea { font: inherit; color: var(--v11-text); background: #0d1522; border: 1px solid #526079; border-radius: 10px; padding: 10px 12px; max-width: 100%; caret-color: #7fd7ff; }
.material-main input::placeholder, .material-main textarea::placeholder { color: #a5b4c9; }
.material-main textarea { resize: vertical; min-height: 120px; }
.material-main button, .material-main input[type=file]::file-selector-button { min-height: 44px; font: inherit; cursor: pointer; }
.material-main button { border-radius: 10px; padding: 10px 18px; margin-top: 0; }
.material-main input[type=file] { width: 100%; }
.material-main input[type=file]::file-selector-button { background: #213148; color: #e8eef7; border: 0; border-radius: 6px; margin-right: 12px; padding: 8px 12px; }
.material-main button:disabled { opacity: 0.5; cursor: not-allowed; }
.material-main :focus-visible, .material-page nav a:focus-visible { outline: 2px solid #7fd7ff; outline-offset: 4px; }
.material-page ::selection { color: #070b14; background: #7fd7ff; }
.material-main label { display: block; margin-bottom: 8px; }
.material-muted { color: var(--v11-text-2); font-size: 14px; overflow-wrap: anywhere; }
.draft-list { list-style: none; margin: 0; padding: 0; }
.draft-list li { border-top: 1px solid var(--v11-border); }
.draft-list .draft-row { display: block; width: 100%; padding: 20px 4px; text-align: left; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.draft-row strong, .draft-row span { display: block; overflow-wrap: anywhere; }
.draft-row strong { font-size: 18px; margin-bottom: 6px; }
.draft-row span { font-size: 14px; color: var(--v11-text-2); }
.draft-list .draft-row:hover { background: rgba(127,215,255,0.06); transform: none; }
.material-empty { padding: 48px 0; max-width: 65ch; }
.material-empty p { color: var(--v11-text-2); }
.material-editor-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 32px; align-items: start; }
#draftFields { border: 0; margin: 0; padding: 16px 0 0; min-width: 0; }
.material-original, .material-edit { min-width: 0; }
.material-edit { background: rgba(255,255,255,0.045); border-radius: 16px; padding: 24px; }
.material-edit > input, .material-edit > textarea, #originalText { width: 100%; margin-bottom: 20px; }
.material-edit .material-actions { gap: 12px; }
.source-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.source-tabs button { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.source-tabs button[aria-pressed=true] { border-color: #7fd7ff; background: #213148; }
.source-order { margin: 0 0 16px; gap: 8px; }
.source-order button { padding: 10px 12px; }
.material-camera { margin: 16px 0; }
.material-camera video { display: block; width: 100%; max-height: 440px; background: #04070d; border-radius: 10px; margin-bottom: 12px; object-fit: contain; }
#cameraStatus:empty, #sourceCount:empty { display: none; }
#cameraStatus.error { color: #ffb8ad; }
.source-preview { margin: 0 0 24px; overflow-wrap: anywhere; }
.source-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 680px; object-fit: contain; margin-bottom: 12px; background: #fff; }
.source-preview a { display: inline-block; padding: 10px 0; min-height: 44px; margin-right: 20px; }
.material-storage { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--v11-border); }
.material-storage > p { max-width: 75ch; }
.material-storage summary { min-height: 44px; cursor: pointer; font-weight: bold; }
.material-storage > label { margin-top: 24px; }
.material-storage > input[type=file] { max-width: 600px; }
.material-storage > button, .material-clear > button { margin-top: 12px; }
.material-clear { margin-top: 32px; }
.material-clear p { max-width: 75ch; }
.material-main .material-check { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.material-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #7fd7ff; }
.material-main .material-danger { color: #ffb8ad; }
.image-dialog { width: 1050px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); padding: 24px; background: #0d1522; color: #e8eef7; border: 1px solid #526079; border-radius: 16px; line-height: 1.7; }
.image-dialog[open] { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.image-dialog-head, .image-dialog-foot { flex-shrink: 0; }
.image-dialog-head p, .image-dialog-foot p { margin: 8px 0; }
.image-dialog::backdrop { background: rgba(0,0,0,0.75); }
.image-dialog h2 { margin: 0; font-size: 22px; }
.image-dialog p { max-width: 75ch; }
.image-dialog button { margin: 0; min-height: 44px; font: inherit; padding: 10px 16px; }
.image-dialog .error { color: #ffb8ad; }
.image-workspace { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 24px; align-items: start; min-height: 0; overflow: auto; }
#imageCanvas { display: block; max-width: 100%; max-height: 55vh; width: auto; height: auto; touch-action: none; cursor: crosshair; background: white; margin: 0 auto; }
.image-edit-controls { min-width: 0; }
.image-edit-controls label { display: block; margin-top: 16px; }
.image-edit-controls output { float: right; font-variant-numeric: tabular-nums; }
.image-edit-controls input { display: block; width: 100%; min-height: 44px; padding: 0; accent-color: #7fd7ff; }
#imageUpgrade button { margin: 12px 0; }
.image-dialog :focus-visible { outline: 2px solid #7fd7ff; outline-offset: 3px; }
.ocr-original, .ocr-result { min-width: 0; }
.ocr-workspace { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ocr-workspace label { display: block; margin-bottom: 8px; }
.ocr-workspace select, .ocr-workspace textarea { width: 100%; font: inherit; color: #e8eef7; background: #131f30; border: 1px solid #526079; border-radius: 8px; padding: 10px; }
.ocr-workspace textarea { min-height: 240px; resize: vertical; }
.ocr-workspace textarea::placeholder { color: #b5c4d9; }
.ocr-workspace select { margin-bottom: 16px; min-height: 44px; }
#ocrPreview { display: block; max-width: 100%; height: auto; background: #fff; }
.ocr-workspace ::selection { color: #0d1522; background: #7fd7ff; }
.ocr-workspace textarea { caret-color: #7fd7ff; }
@media (max-width: 700px) {
    .image-dialog { padding: 16px; }
    #imageCanvas { max-height: 35vh; }
    .image-workspace { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .material-page .navbar { height: auto; padding: 16px; flex-direction: column; gap: 12px; }
    .material-page .navbar nav { display: flex; gap: 4px; width: 100%; justify-content: space-between; }
    .material-page .navbar nav a { min-height: 44px; padding: 10px 12px; }
    .material-main { max-width: calc(100% - 32px); margin-top: 28px; }
    .material-main h1 { font-size: 28px; }
    .material-editor-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
    .material-edit { padding: 20px 16px; }
    .material-toolbar > label { flex-basis: 100%; margin: 0; }
    .material-toolbar { gap: 8px; }
    .material-storage { margin-top: 32px; }
}