:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; color: #111; background: #008080; }
button { font: inherit; cursor: pointer; }
.desktop { min-height: 100vh; padding: clamp(14px, 4vw, 52px); background: #008080; }
.app-window { width: min(100%, 1220px); margin: 0 auto; padding: 3px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; }
.titlebar { min-height: 34px; padding: 5px 6px 5px 8px; background: linear-gradient(90deg, #000080, #1d68a6); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: bold; }
.titlebar-name { display: flex; align-items: center; gap: 8px; }
.tiny-icon { display: grid; place-items: center; width: 18px; height: 18px; background: #c0c0c0; border: 1px solid #fff; color: #000080; font-size: 14px; line-height: 1; }
.window-controls { display: flex; gap: 3px; }
.window-controls span { display: grid; place-items: center; width: 22px; height: 21px; background: #c0c0c0; border: 2px solid; border-color: #fff #444 #444 #fff; color: #111; font-size: 15px; line-height: 1; }
.menu-bar { display: flex; gap: 22px; padding: 8px 12px 7px; font-size: 13px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin: 0 7px; padding: 9px 8px; border-top: 1px solid #888; border-bottom: 1px solid #fff; font-size: 13px; }
.toolbar-label { font-weight: bold; }
.win-button { min-height: 29px; padding: 4px 13px; background: #c0c0c0; border: 2px solid; border-color: #fff #444 #444 #fff; box-shadow: 1px 1px 0 #000; color: #111; font-weight: bold; }
.win-button:active { border-color: #444 #fff #fff #444; box-shadow: none; }
.win-button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.indicator { margin-left: auto; padding: 3px 8px; border: 1px solid #888; background: #d6d6d6; white-space: nowrap; }
.indicator.ready::before { content: "● "; color: #008000; }
.indicator.error::before { content: "● "; color: #b00000; }
.intro-box { display: flex; align-items: flex-start; gap: 11px; margin: 12px 10px 0; padding: 10px 12px; background: #ffffdf; border: 2px solid; border-color: #777 #fff #fff #777; font-size: 13px; line-height: 1.45; }
.intro-box strong { display: block; margin-bottom: 3px; color: #000080; font-size: 14px; }
.intro-box p { margin: 0; }
.intro-symbol { display: grid; place-items: center; flex: none; width: 25px; height: 25px; margin-top: 1px; border-radius: 50%; background: #000080; color: #fff; font-family: Georgia, serif; font-size: 19px; font-weight: bold; font-style: italic; box-shadow: 1px 1px 0 #777; }
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 10px 16px; }
.panel { min-width: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #555 #555 #fff; }
.panel-title { height: 41px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #888; font-size: 15px; }
.panel-title strong { font-size: 15px; }
.panel-icon { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #fff; box-shadow: 1px 1px #555; font-size: 17px; line-height: 1; }
.windows-icon { color: #fff; background: #000080; }
.office-icon { color: #fff; background: #a12a14; }
.blank-icon { color: #555; background: #d8d8d8; }
.panel-count { margin-left: auto; color: #555; font-size: 12px; font-weight: normal; }
.panel-body { min-height: 275px; max-height: 420px; padding: 10px; overflow: hidden; background: #fff; border: 2px solid; border-color: #666 #fff #fff #666; }
.empty-panel { background: repeating-linear-gradient(0deg, #fafafa, #fafafa 23px, #f2f2f2 24px); }
.record { padding: 12px; background: #f7f7f7; border: 1px solid #888; box-shadow: 1px 1px 0 #ccc; }
.record-title { margin-bottom: 12px; font-size: 16px; font-weight: bold; line-height: 1.35; }
.key-box { display: block; padding: 11px 8px; background: #fff; border: 2px solid; border-color: #666 #fff #fff #666; color: #111; font-family: "Courier New", monospace; font-size: 13px; font-weight: bold; overflow-wrap: anywhere; line-height: 1.45; }
.copy-button { margin-top: 12px; }
.copy-count { display: block; margin-top: 3px; color: #555; font-size: 10px; line-height: 1.2; }
.windows-copy-count { display: inline-block; margin-left: 9px; font-size: 11px; }
.published-line { display: block; margin-top: 8px; padding: 6px 0 0; border-top: 1px dotted #999; color: #444; font-size: 11px; line-height: 1.35; }
.office-group + .office-group { margin-top: 12px; }
.office-heading { margin: 0 0 6px; padding: 5px 7px; background: #000080; color: #fff; font-size: 12px; font-weight: bold; }
.office-key { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 0; border-bottom: 1px dotted #999; }
.office-key-main { min-width: 0; flex: 1; }
.office-key code { display: block; min-width: 0; font-family: "Courier New", monospace; font-size: 11px; font-weight: bold; overflow-wrap: anywhere; line-height: 1.35; }
.mini-button { min-height: 25px; padding: 2px 5px; font-size: 11px; flex: none; }
.help-button { width: 100%; margin-top: 13px; font-size: 12px; }
.office-dialog { width: min(660px, calc(100% - 26px)); max-height: 82vh; margin: auto; padding: 3px; background: #c0c0c0; color: #111; border: 2px solid; border-color: #fff #333 #333 #fff; box-shadow: 3px 3px 0 #000; }
.office-dialog::backdrop { background: #001d2caa; }
.dialog-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 4px 5px 4px 9px; background: linear-gradient(90deg, #000080, #1d68a6); color: #fff; font-size: 14px; font-weight: bold; }
.dialog-x { width: 23px; min-height: 22px; padding: 0; font-size: 16px; line-height: 1; }
.dialog-content { max-height: calc(82vh - 120px); overflow: auto; margin: 9px; padding: 13px 17px; background: #fff; border: 2px solid; border-color: #666 #fff #fff #666; font-size: 14px; line-height: 1.5; }
.dialog-content p { margin: 0 0 14px; }
.dialog-content .description-date { margin-top: -8px; color: #555; font-size: 12px; }
.dialog-content h2 { margin: 0 0 9px; font-size: 17px; }
.dialog-content ol { margin: 0; padding-left: 22px; }
.dialog-content li { margin-bottom: 7px; }
.dialog-content a { color: #000080; }
.bot-code { display: inline-block; margin-left: 5px; padding: 3px 7px; background: #ffffdf; border: 1px solid #888; font-family: "Courier New", monospace; font-weight: bold; }
.dialog-actions { display: flex; justify-content: flex-end; margin: 0 9px 7px; }
.placeholder { margin: 8px 2px; color: #555; font-size: 13px; }
.statusbar { display: flex; align-items: center; gap: 5px; padding: 0 7px 5px; font-size: 12px; }
.statusbar > span { min-height: 22px; display: flex; align-items: center; padding: 2px 6px; border: 1px solid; border-color: #888 #fff #fff #888; }
.statusbar > span:first-child { flex: 1; }
.status-main { justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .desktop { padding: 10px; } .columns { grid-template-columns: 1fr; } .panel-body { min-height: 145px; } .empty-panel { min-height: 90px; } .statusbar { flex-wrap: wrap; } }