/* ============ apps.css ============ */
.app { width: 100%; height: 100%; display: flex; flex-direction: column; color: var(--text); }
.app-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.app-toolbar button { padding: 6px 11px; border-radius: 7px; font-size: 13px; color: var(--text); transition: background 0.12s; }
.app-toolbar button:hover { background: var(--hover); }
.app-toolbar button.tbtn { display: inline-flex; align-items: center; gap: 7px; }
.app-toolbar button.tbtn svg { width: 16px; height: 16px; }
.app-input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; color: var(--text); font-size: 13px; outline: none; }
.app-input:focus { border-color: var(--accent); }

/* Notepad */
.notepad-area { flex: 1; width: 100%; resize: none; border: none; outline: none; background: transparent; color: var(--text); padding: 16px; font-size: 14px; line-height: 1.6; font-family: "JetBrains Mono", monospace; }
.notepad-status { font-size: 11.5px; color: var(--text-dim); padding: 5px 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; }

/* Explorer */
.explorer { display: flex; height: 100%; }
.exp-sidebar { width: 180px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 10px 8px; overflow-y: auto; background: var(--surface-2); }
.exp-side-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: default; }
.exp-side-item .side-ico { width: 20px; height: 20px; display: inline-flex; flex-shrink: 0; }
.exp-side-item .side-ico svg, .exp-side-item .side-ico img { width: 100%; height: 100%; }
.exp-side-item:hover { background: var(--hover); }
.exp-side-item.active { background: var(--selected); }
.exp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.exp-addr { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.exp-addr .crumb { padding: 5px 9px; border-radius: 7px; font-size: 13px; cursor: default; }
.exp-addr .crumb:hover { background: var(--hover); }
.exp-addr .sep { color: var(--text-faint); }
.exp-search { margin-left: auto; width: 160px; }
.exp-body { flex: 1; overflow-y: auto; padding: 14px; }
.exp-body.drop-active { outline: 2px dashed var(--accent); outline-offset: -8px; border-radius: 12px; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 8px; }
.exp-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 10px; cursor: default; transition: background 0.1s; }
.exp-tile:hover { background: var(--hover); }
.exp-tile.selected { background: var(--selected); }
.exp-tile .t-glyph { width: 48px; height: 48px; line-height: 1; }
.exp-tile .t-glyph svg, .exp-tile .t-glyph img { width: 100%; height: 100%; }
.exp-tile .t-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.exp-tile .t-label { font-size: 12px; text-align: center; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.exp-list th { text-align: left; padding: 7px 10px; color: var(--text-dim); font-weight: 500; border-bottom: 1px solid var(--border); font-size: 12px; }
.exp-list td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.exp-list td .list-ico { width: 20px; height: 20px; display: inline-flex; vertical-align: middle; margin-right: 9px; }
.exp-list td .list-ico svg, .exp-list td .list-ico img { width: 100%; height: 100%; }
.crumb-ico { display: inline-flex; align-items: center; justify-content: center; padding: 6px !important; color: var(--text-dim); }
.crumb-ico:hover { color: var(--text); }
.crumb-ico .ico, .crumb-ico svg, .crumb-ico img { width: 17px; height: 17px; }
.exp-list tr:hover td { background: var(--hover); }
.exp-list tr.selected td { background: var(--selected); }
.exp-empty { text-align: center; color: var(--text-faint); padding: 50px; font-size: 14px; }

/* Image viewer */
.imgview { flex: 1; display: flex; align-items: center; justify-content: center; background: #0008; overflow: hidden; }
.imgview img { max-width: 100%; max-height: 100%; transition: transform 0.15s; }

/* Media player */
.media-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; padding: 10px; gap: 16px; }
.media-wrap video { max-width: 100%; max-height: 100%; border-radius: 8px; }
.media-audio { display: flex; flex-direction: column; align-items: center; gap: 20px; color: #fff; }
.media-audio .disc { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #333 0 28%, var(--accent) 30%, #222 70%); animation: spin-slow 4s linear infinite; }
.media-audio .disc.paused { animation-play-state: paused; }

/* Browser */
.browser-bar { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); align-items: center; }
.browser-bar .url { flex: 1; }
.browser-frame { flex: 1; border: none; width: 100%; background: #fff; }
.browser-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--text); }
.browser-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.browser-shortcut { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 12px; background: var(--surface-2); width: 96px; }
.browser-shortcut:hover { background: var(--hover); }
.browser-shortcut .bs-ico { font-size: 28px; }

/* Terminal */
.term { flex: 1; background: #0b0d18; color: #d6dcff; font-family: "JetBrains Mono", monospace; font-size: 13px; padding: 12px; overflow-y: auto; line-height: 1.5; }
.term .line { white-space: pre-wrap; word-break: break-word; }
.term .prompt-line { display: flex; }
.term .prompt-line .ps1 { color: var(--accent-2); margin-right: 8px; white-space: nowrap; }
.term-input { background: transparent; border: none; outline: none; color: #d6dcff; font-family: inherit; font-size: 13px; flex: 1; }
.term .ok { color: #7fffb0; } .term .err { color: #ff8585; } .term .dim { color: #6f7494; }

/* Settings */
.settings { display: flex; height: 100%; }
.settings-nav { width: 180px; border-right: 1px solid var(--border); padding: 12px 8px; background: var(--surface-2); }
.settings-nav .nav-item { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; display: flex; gap: 9px; align-items: center; }
.settings-nav .nav-item .nav-ico { width: 18px; height: 18px; display: inline-flex; color: var(--text-dim); }
.settings-nav .nav-item.active .nav-ico { color: var(--accent); }
.settings-nav .nav-item .nav-ico svg, .settings-nav .nav-item .nav-ico img { width: 100%; height: 100%; }
.settings-nav .nav-item:hover { background: var(--hover); }
.settings-nav .nav-item.active { background: var(--selected); }
.settings-content { flex: 1; padding: 24px; overflow-y: auto; }
.settings-content h2 { font-size: 19px; margin-bottom: 18px; font-weight: 600; }
.settings-row { margin-bottom: 22px; }
.settings-row label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 9px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wp-thumb { height: 70px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: border 0.1s, transform 0.1s; }
.wp-thumb:hover { transform: scale(1.03); }
.wp-thumb.active { border-color: var(--accent); }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.color-dot.active { border-color: var(--text); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; max-width: 380px; }

/* Calculator */
.calc { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 10px; }
.calc-display { background: var(--surface-2); border-radius: 12px; padding: 18px; text-align: right; }
.calc-display .expr { font-size: 13px; color: var(--text-dim); min-height: 18px; }
.calc-display .result { font-size: 34px; font-weight: 600; }
.calc-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-grid button { border-radius: 12px; font-size: 18px; background: var(--surface-2); transition: background 0.1s, transform 0.05s; }
.calc-grid button:hover { background: var(--hover); }
.calc-grid button:active { transform: scale(0.95); }
.calc-grid button.op { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.calc-grid button.eq { background: var(--accent); color: #fff; grid-column: span 1; }

/* Calendar */
.cal { flex: 1; padding: 18px; display: flex; flex-direction: column; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-head h3 { font-size: 18px; }
.cal-head button { padding: 6px 12px; border-radius: 8px; font-size: 16px; }
.cal-head button:hover { background: var(--hover); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1; }
.cal-dow { text-align: center; font-size: 12px; color: var(--text-dim); padding: 6px 0; }
.cal-day { display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; cursor: default; aspect-ratio: 1; }
.cal-day:hover { background: var(--hover); }
.cal-day.other { color: var(--text-faint); }
.cal-day.today { background: var(--accent); color: #fff; font-weight: 600; }

/* Minesweeper */
.mine { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.mine-head { display: flex; gap: 18px; align-items: center; font-size: 15px; }
.mine-head .badge { background: var(--surface-2); padding: 6px 14px; border-radius: 8px; font-family: "JetBrains Mono", monospace; }
.mine-head button { padding: 6px 12px; border-radius: 8px; background: var(--surface-2); font-size: 18px; }
.mine-board { display: grid; gap: 2px; background: var(--border); padding: 4px; border-radius: 8px; }
.mine-cell { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 4px; font-weight: 700; font-size: 14px; cursor: default; user-select: none; }
.mine-cell.revealed { background: var(--hover); }
.mine-cell.mine { background: #e0443e; }
.mine-cell.flag { background: rgba(var(--accent-rgb),0.25); }