/* Office ribbon: actions take priority over decorative formatting samples. */
.ribbon { align-items: stretch; gap: 0; }
.ribbon .font-group,.ribbon .paragraph-group,.ribbon .styles-group,.ribbon .note-group { display:none; }
.ribbon .ribbon-actions,.ribbon .ribbon-music { flex:0 0 auto; }
.ribbon .office-tool-group { display:flex; flex:1; flex-wrap:wrap; gap:3px; padding:0 8px 18px; min-width:0; }
.ribbon .office-command { min-width:65px; min-height:61px; padding:3px 7px; }
.ribbon .office-command-icon { font-size:28px; height:30px; }
.ribbon-collapse { display:none; }
.office-dialog { width:min(660px,calc(100% - 24px)); max-height:90dvh; padding:0; border:2px outset #e8edf4; background:#ece9d8; color:#222; box-shadow:5px 8px 20px #0007; font:14px/1.45 Tahoma,Arial,sans-serif; }
.office-dialog::backdrop { background:#24324475; }
.office-dialog-title { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 6px 5px 12px; background:linear-gradient(#417ccc,#1b4c99); color:white; font-size:12px; }
.office-dialog-title button { width:29px; height:27px; border:1px outset #fff; background:linear-gradient(#efa18f,#b7503b); color:#fff; font:bold 20px Arial; }
.office-dialog-body { padding:20px; }
.office-dialog button:not([data-close]),.viewer-tools button,.draft-notice button { padding:6px 11px; border:1px solid #8b8b87; border-radius:2px; background:linear-gradient(#fff,#e1dfd2); color:#223957; font:12px Tahoma,Arial,sans-serif; box-shadow:inset 1px 1px white; }
.office-dialog button:not([data-close]):hover { background:#fff1bf; }
.office-dialog label { display:block; margin-bottom:12px; }
.office-dialog input:not([type=color]):not([type=range]):not([type=file]),.office-dialog textarea { display:block; width:100%; box-sizing:border-box; padding:7px; border:1px inset #b5bac5; background:white; color:#222; font:14px Tahoma,Arial,sans-serif; }
.office-button-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.clippy { display:flex; align-items:center; gap:25px; }
.clippy svg { flex:0 0 90px; height:150px; filter:drop-shadow(2px 3px 1px #aaa); }
.clippy p { padding:17px; border:1px solid #92917c; border-radius:10px; background:#fffbd9; font:17px/1.5 Georgia,serif; }
.guest-entries { margin-bottom:25px; max-height:45dvh; overflow:auto; }
.guest-entry { padding:13px 15px; border-left:3px solid #5975ad; margin-bottom:14px; background:#fffdfa; box-shadow:1px 2px #c8c5b8; }
.guest-entry header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:#38537d; }
.guest-entry small { color:#777; font-size:10px; }
.guest-entry p,.guest-entry blockquote { white-space:pre-wrap; overflow-wrap:anywhere; }
.guest-entry blockquote { margin:10px 0 0 20px; padding:8px 12px; border-left:2px solid #ac3939; color:#a22e2e; font:italic 15px Georgia,serif; }
.guest-form small { display:block; margin-top:10px; color:#666; }
.guest-honey { position:absolute!important; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.stamp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.secret-stamp { display:flex; flex-direction:column; gap:8px; padding:15px; border:2px dashed #b2b0a8; color:#8a8981; text-align:center; font-size:12px; }
.secret-stamp.earned { border:3px double #a44f3f; color:#964737; transform:rotate(-2deg); }
.secret-stamp b { font-size:11px; letter-spacing:1px; }
.work-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; background:white; }
.work-dialog .office-dialog-title { background:linear-gradient(#668e70,#275d37); }
.work-dialog .office-dialog-body { padding:0; }
.excel-menu,.excel-formula,.work-dialog footer { padding:8px 15px; background:#ece9d8; border-bottom:1px solid #b2b2a7; font:12px Tahoma,Arial,sans-serif; }
.excel-formula { background:#fff; color:#44574b; }
.excel-scroll { overflow:auto; max-height:calc(100dvh - 150px); }
.work-dialog table { border-collapse:collapse; min-width:800px; width:100%; font:13px Arial,sans-serif; }
.work-dialog td,.work-dialog th { height:27px; padding:3px 10px; border:1px solid #d8d8d8; text-align:left; }
.work-dialog th { background:#efefeb; color:#555; font-weight:normal; text-align:center; }
.work-dialog td:nth-child(3),.work-dialog td:nth-child(4) { text-align:right; }
.saver-dialog { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; background:#030306; }
.saver-dialog .office-dialog-body { padding:0; }
.saver-field { position:relative; height:calc(100dvh - 38px); overflow:hidden; cursor:pointer; }
.saver-field img { position:absolute; top:0; left:0; width:150px; height:81px; }
.saver-field span { position:absolute; bottom:20px; left:20px; right:20px; text-align:center; color:#9b9aab; font:12px monospace; }
.paint-dialog { width:min(1100px,calc(100% - 20px)); }
.paint-dialog .office-dialog-body { padding:10px; }
.paint-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; font-size:11px; }
.paint-toolbar label { margin:0; }
.paint-toolbar input[type=range] { width:75px; }
.paint-toolbar select { display:block; max-width:135px; padding:4px; }
.paint-toolbar input[type=color] { width:40px; height:29px; padding:1px; display:block; }
.paint-file { padding:6px; border:1px outset #ddd; background:#eeede5; cursor:pointer; }
.paint-file input { display:block; width:150px; font-size:10px; }
.paint-paper { max-height:62dvh; overflow:auto; padding:8px; background:#838383; }
.paint-paper canvas { display:block; max-width:100%; height:auto; background:white; touch-action:none; cursor:crosshair; }
.paint-status { margin:8px 0 0; font-size:11px; }
.viewer-tools { position:relative; z-index:3; display:flex; gap:8px; margin-top:8px; }
.draft-notice { padding:12px; margin-bottom:16px; border:1px solid #d5bf77; background:#fff8dc; color:#514525; font:12px/1.5 Tahoma,Arial,sans-serif; }
/* Winamp-inspired 1990s skin. All playback/seek/EQ controls are real. */
.winamp { position:fixed; top:180px; right:24px; z-index:90; width:310px; padding:4px; border:2px outset #6c6b81; background:#252535; color:#b9b8c3; box-shadow:3px 5px 12px #0008; font:10px/1.3 Tahoma,Arial,sans-serif; }
.winamp { max-height:calc(100dvh - 190px); overflow:auto; }
.wa-title { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:7px; height:19px; padding:0 2px; background:repeating-linear-gradient(0deg,#555467 0 1px,#292838 1px 3px); cursor:move; touch-action:none; }
.wa-title b { flex:1; text-align:center; color:#d1cfd9; font-size:9px; letter-spacing:2px; text-shadow:1px 1px black; }
.winamp button { border:1px outset #a3a2b0; border-radius:0; padding:2px 5px; min-height:20px; color:#171820; background:linear-gradient(#bbbcc9,#747689); font:bold 10px/1.2 Arial,sans-serif; box-shadow:inset 1px 1px #d4d4db; }
.winamp button:active,.winamp button[aria-pressed=true] { border-style:inset; background:#778878; color:#d1ff9d; }
.wa-title button { min-height:14px; height:14px; padding:0 3px; font-size:10px; }
.wa-main { display:grid; grid-template-columns:112px minmax(0,1fr); gap:6px; padding:7px 3px 2px; }
.wa-screen { border:2px inset #59586c; background:#071007; padding:2px 3px; color:#75ff4b; }
.wa-screen > div { display:flex; justify-content:space-between; align-items:center; }
.wa-screen time { font:25px/1 "Courier New",monospace; letter-spacing:-2px; text-shadow:0 0 3px #52b03b; }
.wa-screen canvas { display:block; width:100%; height:24px; margin-top:4px; }
.wa-track { min-width:0; }
.wa-track-name { padding:3px; border:1px inset #65647a; background:#070c09; color:#a4ec4f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:10px monospace; }
.wa-track > span { display:block; font-size:8px; color:#c4c4cb; margin:3px 0; }
.wa-track label { display:inline-flex; align-items:center; gap:3px; font-size:8px; width:49%; }
.winamp input[type=range] { appearance:none; height:7px; min-width:0; border:1px inset #5b5b69; background:linear-gradient(90deg,#488f4b,#c9b743); accent-color:#b8c0c6; }
.winamp input[type=range]::-webkit-slider-thumb { appearance:none; width:9px; height:12px; border:1px outset #ddd; border-radius:0; background:#aeb2bc; }
.wa-track input { width:45px; }
.wa-seek { width:calc(100% - 8px); margin:7px 4px; }
.wa-controls { display:flex; gap:3px; padding:0 3px 4px; }
.wa-controls button { flex:1; padding:4px 1px; }
.wa-controls [data-shuffle],.wa-controls [data-repeat] { font-size:8px; }
.wa-status { min-height:3px; color:#ffd784; padding:0 4px; }
.wa-eq { margin-top:4px; border:1px inset #65647a; padding:3px; }
.wa-eq summary { cursor:pointer; color:#d7d5e2; letter-spacing:2px; font-size:9px; }
.wa-eq-sliders { display:flex; justify-content:space-around; gap:7px; margin:7px 0; }
.wa-eq-sliders label { display:flex; align-items:center; flex-direction:column; gap:5px; font-size:8px; }
.wa-eq-sliders input { writing-mode:vertical-lr; direction:rtl; width:8px; height:62px!important; }
.wa-playlist-title { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 3px; margin-top:3px; color:#c3c0cf; letter-spacing:1px; font-size:9px; }
.wa-playlist { margin:0; list-style:none; padding:4px; min-height:57px; border:2px inset #65647a; background:#070c09; }
.wa-playlist button { display:block; width:100%; text-align:left; border:0; box-shadow:none; background:none; color:#6fd344; font:10px/1.5 monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-playlist button.active { background:#172746; color:white; }
.wa-amber .wa-screen,.wa-amber .wa-track-name,.wa-amber .wa-playlist button { color:#ffbb4c; }
.wa-amber { background:#302922; border-color:#897c63; }
.wa-minimized > :not(.wa-title) { display:none; }
@media(max-width:760px) {
  .ribbon-collapse { display:block; margin-left:auto; border:1px solid #9eafc3; background:#f0f4fa; color:#304c70; font:11px Tahoma,Arial,sans-serif; padding:4px 7px; }
  .menubar { flex-wrap:wrap; row-gap:5px; padding-bottom:4px; }
  .tools-compact:not(.tools-expanded) .ribbon { display:none; }
  .tools-expanded .ribbon { max-height:45dvh; overflow:auto; }
  .ribbon .office-tool-group { flex-basis:100%; justify-content:flex-start; padding:6px 0 19px; }
  .ribbon .office-command { min-width:62px; min-height:55px; font-size:10px; }
  .ribbon .office-command-icon { height:26px; font-size:25px; }
  .word-window { position:sticky; top:0; z-index:30; }
  .titlebar { height:27px; }
  .office-dialog-body { padding:15px; }
  .clippy { gap:12px; }.clippy svg { flex-basis:62px; }.clippy p { font-size:15px; padding:12px; }
  .stamp-grid { gap:9px; }.secret-stamp { padding:12px 7px; font-size:11px; }
  .winamp { top:130px; right:5px; width:min(310px,calc(100vw - 10px)); max-height:calc(100dvh - 140px); }
  .wa-controls button { min-height:30px; }.wa-playlist button { min-height:29px; }
}
@media print { .winamp,.office-dialog,.draft-notice,.viewer-tools { display:none!important; } }