:root { --header-height: 50px; --footer-height: 40px; --resizer-size: 16px }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #333; background-image: linear-gradient(to right, rgb(201 201 201 / 8%) 1px, transparent 0), linear-gradient(to bottom, rgb(219 219 219 / 8%) 1px, transparent 0); background-size: 20px 20px }
#desktop { width: 100%; height: 100%; position: relative }
.desktop-controls { position: absolute; top: 25px; left: 25px; z-index: 10000; display: flex; gap: 10px }
#menu-btn, #desktop-save-btn,#desktop-links-btn,#desktop-aix-btn,#desktop-login-btn,#desktop-loginout-btn, #toggle-fullscreen-btn { padding: 12px 20px; font-size: 16px; color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
#menu-btn:hover, #desktop-save-btn:hover, #desktop-login-btn:hover, #desktop-loginout-btn:hover, #desktop-links-btn:hover, #desktop-aix-btn:hover, #toggle-fullscreen-btn:hover { background-color: #f7f7f7; transition: background-color 1s ease; color:#000 }
#menu-panel { display: none; position: absolute; top: 80px; left: 25px; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); z-index: 9999; padding: 10px; max-height: 80vh; overflow-y: auto }
#menu-panel.visible { display: block }
#menu-panel ul { list-style: none; padding: 0; margin: 0; min-width: 200px }
#menu-panel a { display: block; padding: 10px 15px; text-decoration: none; color: #333; border-radius: 5px }
#menu-panel a:hover { background-color: rgba(0, 0, 0, 0.1) }
#menu-panel summary { padding: 10px 15px; cursor: pointer; font-weight: bold; position: relative }
#menu-panel .submenu-list { padding-left: 15px }
.window { position: absolute; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); background-color: #fcfcfc; display: flex; flex-direction: column; min-width: 320px; min-height: 220px; overflow: visible }
.window-inner-container { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; position: relative }
.window.active { box-shadow: 0 20px 50px rgba(0,0,0,0.3) }
.title-bar { height: 40px; background-color: #e8e8e8; cursor: move; display: flex; align-items: center; padding: 0 10px; flex-shrink: 0; user-select: none; border-bottom: 1px solid #dcdcdc }
.window-controls { display: flex; align-items: center }
.window-controls.left { margin-right: auto }
.window-controls.right { margin-left: auto }
.window-controls button { width: 18px; height: 18px; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; margin: 0 4px; cursor: pointer; padding: 0; color: #fff38e; font-size: 10px;}
.btn-close { background-color: #ff5f57 }
.btn-minimize { background-color: #28c940 }
.title-container { flex-grow: 1; text-align: center; font-size: 14px; color: #555; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 40px }
.content { flex-grow: 1; position: relative; background-color: #fff }
.content iframe { width: 100%; height: 100%; border: none }
.resizer { position: absolute; background: transparent }
.resizer.n { top: calc(var(--resizer-size) / -2); left: 0; height: var(--resizer-size); width: 100%; cursor: ns-resize }
.resizer.s { bottom: calc(var(--resizer-size) / -2); left: 0; height: var(--resizer-size); width: 100%; cursor: ns-resize }
.resizer.e { top: 0; right: calc(var(--resizer-size) / -2); height: 100%; width: var(--resizer-size); cursor: ew-resize }
.resizer.w { top: 0; left: calc(var(--resizer-size) / -2); height: 100%; width: var(--resizer-size); cursor: ew-resize }
.resizer.ne { top: calc(var(--resizer-size) / -2); right: calc(var(--resizer-size) / -2); height: var(--resizer-size); width: var(--resizer-size); cursor: nesw-resize }
.resizer.nw { top: calc(var(--resizer-size) / -2); left: calc(var(--resizer-size) / -2); height: var(--resizer-size); width: var(--resizer-size); cursor: nwse-resize }
.resizer.se { bottom: calc(var(--resizer-size) / -2); right: calc(var(--resizer-size) / -2); height: var(--resizer-size); width: var(--resizer-size); cursor: nwse-resize }
.resizer.sw { bottom: calc(var(--resizer-size) / -2); left: calc(var(--resizer-size) / -2); height: var(--resizer-size); width: var(--resizer-size); cursor: nesw-resize }
#mobile-header, #tab-switcher, #overlay, #mobile-tabs-btn { display: none }

@media (max-width: 768px) {
    .desktop-controls,.dock-item { display: none }
    .window { overflow: hidden; display: none !important; width: 100% !important; height: calc(100% - var(--header-height) - var(--footer-height)) !important; top: var(--header-height) !important; left: 0 !important; border-radius: 0; box-shadow: none }
    .window.active { display: flex !important }
    .title-bar, .resizer { display: none }
    #mobile-header { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #ddd; z-index: 20000; padding: 0 10px }
    #mobile-menu-btn { font-size: 28px }
    #mobile-page-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    #mobile-tabs-btn { font-size: 16px; font-weight: bold; border: 2px solid #555; border-radius: 6px; padding: 4px 8px; display:block;}
    #mobile-header button { background: none; border: none; cursor: pointer; color: #333 }
    #mobile-footer { position: fixed; bottom: 15px; left: 30px; z-index: 20000; background: none; border: none; backdrop-filter: none; height: auto; padding: 0 }
    #mobile-tabs-btn { position: relative; width: 30px; height: 30px; background-color: rgba(30, 30, 30, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: white; font-size: 18px; font-weight: bold; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.2s ease-out }
    #mobile-tabs-btn:active { transform: scale(0.95) }
    #mobile-tabs-count { position: absolute; top: -4px; right: -4px; background-color: #ff5f57; color: white; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); display: none }
    #mobile-close-btn { font-size: 28px; font-weight: normal; color: #e63946 }
    #menu-panel { top: 0; left: 0; width: 80%; max-width: 300px; border-radius: 0; border-right: 1px solid #ddd; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 40000 !important;}
    #menu-panel.visible-mobile { display: block; transform: translateX(0) }
    #menu-panel summary::after { content: '▾'; position: absolute; right: 20px; font-size: 16px; color: #888; transition: transform 0.2s }
    #menu-panel details[open] > summary::after { transform: rotate(180deg) }
    #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 39999 }
    #overlay.visible { display: block }
    #tab-switcher { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0f2f5; z-index: 30000 }
    #tab-switcher.hidden { display: none !important }
    #tab-switcher-list { list-style: none; margin: 0; padding: 15px; overflow-y: auto; flex-grow: 1 }
    .tab-card { background-color: #fff; border-radius: 10px; padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
    .tab-card.active { border: 2px solid #007aff }
    .tab-card-title { font-weight: bold }
    .tab-card-close { font-size: 20px; color: #888; border: none; background: none }
}
#context-menu { display: none; position: absolute; z-index: 50000; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 4px 0; min-width: 150px }
#context-menu ul { list-style: none; padding: 0; margin: 0 }
#context-menu li a { display: block; padding: 6px 14px; text-decoration: none; color: #333; font-size: 14px; cursor: pointer; white-space: nowrap }
#context-menu li a:hover { background-color: rgba(0, 0, 0, 0.08) }
#context-menu .separator { height: 1px; background-color: #e0e0e0; margin: 4px 0 }
#dock-container { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 5px 0; z-index: 19999 }
.dock-item { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 8px 15px; margin: 0 5px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dock-item:hover { background-color: rgba(255, 255, 255, 0.4); transform: translateY(-5px) }
.dock-item.active { background-color: rgba(255, 255, 255, 0.5); font-weight: bold }
.window.minimized { display: none !important }
#copyright { position: fixed; bottom: 10px; right: 15px; font-size: 12px; color: rgba(255, 255, 255, 0.5); z-index: 50000; pointer-events: none }
.resize-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background-color: #009393; border-radius: 10px }
::-webkit-scrollbar-track { background-color: #f7f7f7 }
#menu-panel details[open] > .submenu-list { background-color: rgba(0, 0, 0, 0.05); max-height: 45vh; overflow-y: auto; padding-right: 5px; border-radius: 8px; }
.btn-maximize { background-color: #009688 }
.window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; transition: width 0.2s ease-in-out, height 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out }
.window.maximized .window-inner-container { border-radius: 0 }
.window.maximized .resizer { display: none }
#menu-panel.expanded { width: 85vw; max-width: 1400px; max-height: 760px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 12px; display: flex; flex-direction: column; transition: all 0.3s ease; }
#menu-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0 }
#menu-toggle-expand-btn { border: none; background: #e0e0e0; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; margin-left: 5px; }
#menu-toggle-expand-btn:hover { background: #c7c7c7 }
#menu-panel-content { overflow: hidden; padding: 3px; flex-grow: 1 }
#menu-panel.expanded #menu-panel-content > ul { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; overflow-x: auto; height: 100%; margin: 0; padding: 5px; border-top: none }
#menu-panel.expanded #menu-panel-content > ul > li { list-style-type: none; flex-shrink: 0; display: flex; flex-direction: column }
#menu-panel.expanded details { display: flex; flex-direction: column; flex-grow: 1 }
#menu-panel.expanded summary { font-weight: bold; color: #009688; padding-bottom: 8px; border-bottom: 1px solid #eee; margin-bottom: 8px; flex-shrink: 0 }
#menu-panel.expanded .submenu-list { overflow-y: auto; flex-grow: 1; padding-right: 8px }
#menu-panel.expanded .submenu-list a { font-size: 14px; padding: 4px 6px }
input#menu-search-input { margin: 0; border: 1px solid #ddd; padding: 5px 10px; color: #009688; font-size: 14px; line-height: 20px; background-color: #f7f7f7; border-radius: 10px; width: 130px }
#search-suggestions { background-color: #f0f0f0; padding: 8px 10px; border-radius: 8px; margin: 5px 5px 10px 5px; display: flex; align-items: center; gap: 8px }
#search-suggestions span { font-size: 13px; color: #555 }
#search-suggestions button { border: 1px solid #ccc; background-color: #fff; color: #333; padding: 3px 10px; border-radius: 15px; font-size: 13px; cursor: pointer; transition: background-color 0.2s, color 0.2s }
#search-suggestions button:hover { background-color: #009688; color: #fff; border-color: #009688 }