/* Responsive player layout. Classic Linux visual theme follows below. */
:root {
  --text-primary: #f3f3e9;
  --text-secondary: #c6cdbb;
  --text-muted: #9aa58e;
  --blue: #cbdba9;
  --green: #d5ef73;
  --border: #35422f;
  --border-strong: #64774f;
  --font-ui: 'DM Sans', Arial, sans-serif;
  --font-mono: 'DM Mono', monospace;
}
[hidden] { display: none !important; }
body {
  background: #ebece2;
  background-image: radial-gradient(#acb49d 0.65px, transparent 0.65px);
  background-size: 22px 22px;
  color: var(--text-primary);
}
.desktop { padding: 65px 28px 28px; min-height: 100svh; }
.studio-home {
  position: absolute; top: 22px; left: 32px;
  color: #343f2b; text-decoration: none;
  font: 11px var(--font-mono);
}
.studio-home span { margin-left: 14px; color: #79846a; font-size: 9px; }
.studio-edition {
  position: absolute; top: 23px; right: 32px;
  color: #737e67; font: 9px var(--font-mono); letter-spacing: .1em;
}
.wmp-window {
  width: min(1440px, calc(100vw - 56px));
  height: calc(100svh - 100px); min-height: 560px;
  grid-template-rows: 48px 40px minmax(0, 1fr) 30px;
  border: 1px solid #33422d; border-radius: 12px;
  background: #172016;
  box-shadow: 0 25px 65px #26331c28, 0 2px 5px #26331c15;
}
.title-bar { padding: 0 16px; background: #202a1d; border-color: #38442e; }
.title { font: 11px var(--font-mono); letter-spacing: -.03em; }
.app-icon { color: var(--green); background: #35422a; border: 0; border-radius: 5px; }
.window-btn, .window-btn.close { background: #303e28; border: 1px solid #46553b; color: #c6d3b7; box-shadow: none; width: 28px; height: 25px; border-radius: 5px; }
.window-btn:hover { background: #4b5f3d; }
.window-btn.close:hover { background: #694334; }
.menu-bar { background: #1b2519; border-color: #35422d; padding-inline: 12px; gap: 3px; overflow-x: auto; }
.menu-item { color: #adbaa0; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.menu-item:hover, .menu-item[aria-current="page"] { background: #34442b; color: var(--green); border-radius: 4px; }
.app-body { grid-template-columns: 170px minmax(0, 1fr) 210px; background: #35422d; }
.sidebar { background: #202a1d; border-color: #35422d; padding: 22px 10px 12px; }
.sidebar-brand { padding: 0 10px 24px; margin-bottom: 16px; border-color: #38442e; }
.sidebar-eyebrow { color: #8e9e7f; font-size: 8px; letter-spacing: .1em; }
.sidebar-brand strong { font: 19px var(--font-ui); letter-spacing: -.04em; color: #eef2e4; }
.nav-item { padding: 14px 12px; border: none; border-radius: 6px; margin-bottom: 5px; font-size: 12px; color: #acb9a0; }
.nav-item i { color: #9fae8f; }
.nav-item.active { background: #d5ef73; color: #28351a; box-shadow: none; font-weight: 600; }
.nav-item.active i { color: #40512d; }
.nav-item:hover:not(.active) { background: #2d3b25; }
.sidebar-footer { padding-inline: 10px; font-size: 9px; color: #bac9a6; }
.status-dot { box-shadow: none; width: 6px; height: 6px; }
.player-section { background: #151e13; grid-template-rows: minmax(0, 1fr) 30px 105px; }
.video-window { background: #151e13; }
.video-window::after { display: none; }
.ambient-canvas { opacity: .12; filter: sepia(1) hue-rotate(15deg); }
.track-header { min-height: 93px; padding: 22px 25px 15px; background: #151e13ef; border-bottom: 1px solid #2f3c27; align-items: center; }
.artist { font-size: 25px; font-weight: 500; letter-spacing: -.045em; }
.track-name { font-size: 9px; color: #9dab8f; line-height: 1.6; }
.xp-action { font-size: 10px; padding: 9px 12px; background: #26351e; color: #d7e5c4; border-color: #465638; }
.xp-action:hover { background: #3b4c2e; border-color: #799351; }
.content-host { inset: 94px 0 0; padding: 25px; scrollbar-color: #536744 #172014; }
.section-shell { width: 100%; max-width: 1050px; padding-bottom: 10px; }
.hero { grid-template-columns: 100px minmax(0, 1fr); gap: 25px; padding: 28px; background: #263420; border: 1px solid #435637; border-radius: 8px; box-shadow: none; }
.avatar { width: 100px; aspect-ratio: 4 / 5; border: 4px solid #bbc89e; border-radius: 3px; transform: rotate(-4deg); background: #bfcaa7; box-shadow: 5px 7px 0 #111a1430; }
.avatar-image { filter: saturate(.6); }
.kicker { font-size: 8px; letter-spacing: .06em; }
.hero h1 { font-size: clamp(30px, 3.2vw, 47px); font-weight: 500; line-height: 1.1; margin-block: 14px 10px; }
.hero-role { font: italic 19px/1.4 Georgia, serif; font-weight: 400; color: #d3dfbc; }
.hero-copy { font-size: 13px; line-height: 1.85; color: #b9c6a9; }
.primary-btn { background: #d5ef73; border-color: #d5ef73; color: #253319; }
.secondary-btn { background: #35452a; border-color: #687e51; color: #e5efd5; }
.primary-btn, .secondary-btn { padding: 11px 14px; font-size: 11px; font-weight: 500; }
.primary-btn:hover, .secondary-btn:hover { filter: brightness(1.08); }
.quick-grid { gap: 10px; margin-block: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-card, .panel { background: #1d2919; border-color: #384a2d; border-radius: 6px; }
.quick-card { padding: 16px; }
.quick-card span { font-size: 8px; }
.quick-card strong { font-size: 13px; font-weight: 500; color: #e3eccf; }
.education-panel { padding: 22px; }
.education-panel h2 { font-weight: 500; letter-spacing: -.03em; }
.section-heading { margin-bottom: 25px; align-items: flex-start; gap: 12px; }
.section-heading h2 { font-size: 28px; font-weight: 500; letter-spacing: -.045em; }
.section-heading p { color: #98a98a; font-size: 10px; line-height: 1.6; }
.projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-card { padding: 22px; background: #202e1a; border: 1px solid #3d5031; border-radius: 7px; position: relative; }
.project-card.featured-project { border-top: 2px solid #d5ef73; }
.project-card.featured-project:before { content: 'SELECTED WORK ↗'; display: block; font: 8px var(--font-mono); color: #92a77a; margin-bottom: 20px; letter-spacing: .1em; }
.project-card:hover { border-color: #8aab5d; }
.project-top { gap: 12px; }
.project-card h3 { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.project-kind { color: #d4e6b5; background: #34462a; border-color: #52683e; font-size: 8px; }
.project-card p { font-size: 12px; line-height: 1.85; color: #bccbab; }
.tech-tag, .skill-pill { background: #293a21; border-color: #405732; color: #c3d5ac; font: 9px/1.5 var(--font-mono); padding: 5px 7px; }
.project-link { color: #d5ef73; font-size: 11px; }
.timeline-item { background: #202e1a; border-color: #3d5031; padding: 23px; border-radius: 7px; }
.timeline-top { flex-wrap: wrap; gap: 12px; }
.timeline-item h3 { font-size: 20px; font-weight: 500; }
.company { color: #d1e5b1; font-size: 12px; }
.timeline-date { color: #b7ce98; background: #2d4122; border-color: #4a6238; font-size: 9px; }
.timeline-item li { color: #c1ceb2; font-size: 12px; line-height: 1.8; }
.environment { border-color: #3b5030; color: #9eb887; font-size: 10px; line-height: 1.8; }
.skill-group { background: #202e1a; border-color: #3d5031; padding: 22px; }
.skill-group h3 { font-size: 16px; font-weight: 500; color: #e7efdb; }
.skill-group h3 i { color: #c3de95; }
.contact-card { grid-template-columns: 1fr; }
.panel h3 { font-weight: 500; font-size: 22px; }
.panel p { font-size: 13px; line-height: 1.8; }
.contact-link { background: #2a3c20; border-color: #465f32; color: #dbe9c9; font-size: 12px; padding: 13px; }
.contact-link:hover { background: #3b512d; }
.code-block { background: #111c0d; border-color: #3b5030; color: #c4db9c; font-size: 11px; }
.playlist-area { background: #202a1d; border-color: #35422d; }
.playlist-header { background: #283523; border-color: #3a4930; color: #c8d6b8; font: 10px var(--font-mono); padding: 18px 15px; }
.playlist-content { padding: 18px 14px; }
.playlist-group { border-color: #3a4930; margin-bottom: 25px; }
.playlist-group-title { color: #9bad87; font-size: 8px; letter-spacing: .1em; }
.playlist-item { color: #b5c5a4; border-color: transparent; padding: 10px; font-size: 11px; }
.playlist-item.is-current { background: #3b4d2d; color: #e0edc9; border-color: #4d6339; }
.stack-line { color: #c1cfb0; font-size: 10px; padding-block: 10px; border-color: #3a4930; }
.stack-line i, .playlist-item i { color: #a9c486; }
.monitor-row { font-size: 10px; padding-block: 10px; }
.monitor-row span { color: #98ab86; }
.monitor-row strong { color: #d3e0c1; font-weight: 500; }
.monitor-row .online { color: #d5ef73; }
.info-bar { background: #192315; border-color: #3a4a2e; color: #a8bd92; font-size: 8px; padding-inline: 15px; }
.player-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; color: #9eb188; }
.bottom-player-bar { background: #283820; border-color: #4d633a; padding: 10px 18px; grid-template-rows: 20px 1fr; }
.progress-container { background: transparent; border: none; padding-inline: 0; }
.seek-bar, .volume-slider { background: #46583a; border: 0; }
.seek-bar-fill, .volume-slider-fill { background: #d5ef73; }
.seek-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: #e1efbf; }
.transport-row { gap: 18px; }
.transport-controls { align-items: center; gap: 8px; }
.transport-btn { background: transparent; border: 0; color: #c9dbb3; width: 32px; height: 32px; }
.transport-btn.play { width: 40px; height: 40px; margin: 0; color: #27361c; background: #d5ef73; border: 0; }
.volume-icon { color: #c4d6ad; }
.now-playing-label { color: #99b080; font-size: 7px; }
.now-playing strong { color: #deebcd; font-size: 10px; font-weight: 500; }
.time-display { color: #c7d9b1; font-size: 9px; }
.status-bar { background: #202a1d; border-color: #3a4930; color: #9daf8c; font-size: 8px; }
.reopen-window { background: #273b1e; color: #d5ef73; border: 1px solid #6e894e; border-radius: 7px; padding: 16px 24px; }
.wmp-window.minimized { height: 88px; min-height: 88px; }
button:focus-visible, a:focus-visible, [role="slider"]:focus-visible { outline: 2px solid #d5ef73; outline-offset: 3px; }
@media (max-width: 1200px) {
  .app-body { grid-template-columns: 155px minmax(0, 1fr); }
  .playlist-area { display: none; }
}
@media (max-width: 920px) {
  body { overflow: auto; }
  .desktop { padding: 55px 15px 15px; }
  .studio-home { top: 19px; left: 20px; }
  .studio-edition { top: 20px; right: 20px; }
  .wmp-window { width: 100%; height: calc(100svh - 70px); min-height: 550px; border-radius: 10px; }
  .header-actions { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .avatar { width: 80px; aspect-ratio: 1; }
  .projects-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .desktop { padding: 44px 0 0; }
  .studio-home { font-size: 10px; top: 16px; left: 15px; }
  .studio-home span { display: none; }
  .studio-edition { top: 17px; right: 15px; font-size: 7px; }
  .wmp-window { height: calc(100svh - 44px); min-height: 480px; border-radius: 0; border-inline: 0; grid-template-rows: 42px 36px minmax(0, 1fr) 25px; }
  .title-bar { padding-inline: 10px; }
  .title { font-size: 9px; }
  .menu-bar { padding-inline: 5px; gap: 0; }
  .menu-item { font-size: 9px; padding: 8px 9px; }
  .menu-bar>a { display: none !important; }
  .app-body { display: flex; flex-direction: column; }
  .sidebar { display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px; gap: 3px; }
  .nav-item { margin: 0; padding: 10px 3px; font-size: 9px; gap: 4px; }
  .nav-item i { font-size: 11px; }
  .player-section { flex: 1; grid-template-rows: minmax(0, 1fr) 27px 98px; }
  .track-header { min-height: 76px; padding: 14px; }
  .artist { font-size: 22px; }
  .track-name { font-size: 7px; }
  .header-actions { display: none; }
  .content-host { inset: 77px 0 0; padding: 13px; }
  .hero { padding: 20px; gap: 20px; }
  .hero h1 { font-size: 35px; }
  .hero-role { font-size: 18px; }
  .hero-copy { font-size: 12px; }
  .hero-actions { gap: 8px; }
  .primary-btn, .secondary-btn { font-size: 10px; padding: 10px; }
  .quick-card { padding: 12px; }
  .quick-card strong { font-size: 11px; }
  .quick-card span { font-size: 7px; }
  .section-heading h2 { font-size: 26px; }
  .project-card { padding: 19px; }
  .info-bar { padding-inline: 10px; font-size: 7px; }
  .bottom-player-bar { padding: 7px 13px; }
  .transport-row { gap: 12px; }
  .transport-controls { gap: 5px; }
  .now-playing { display: block; flex: 1; min-width: 0; }
  .now-playing strong { font-size: 8px; }
  .volume-control { display: none; }
}

/* =========================================================
   CLASSIC LINUX — late-90s panels, Motif borders, terminal ink
   ========================================================= */
:root {
  --font-ui: 'DejaVu Sans', 'Liberation Sans', Arial, sans-serif;
  --font-mono: 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace;
  --text-primary: #202521;
  --text-secondary: #40473f;
  --text-muted: #5e675c;
  --green: #246338;
  --blue: #173e76;
}
body {
  background-color: #385e60;
  background-image: radial-gradient(#527575 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}
button, a { -webkit-tap-highlight-color: transparent; }
.linux-panel, .linux-taskbar {
  position: fixed; left: 0; right: 0; z-index: 1001;
  display: flex; align-items: center; gap: 10px;
  background: #c5c8bf; color: #20251d;
  font: 11px var(--font-ui);
  border: 2px solid; border-color: #f4f5ed #666d62 #666d62 #f4f5ed;
}
.linux-panel { top: 0; height: 32px; padding: 2px 8px; }
.linux-app-menu { font-weight: bold; text-decoration: none; padding-right: 8px; }
.linux-app-menu>span { color: #38573c; font-size: 20px; vertical-align: middle; margin-right: 5px; }
.panel-separator { width: 2px; height: 21px; border-left: 1px solid #7e8678; border-right: 1px solid #f5f5ed; }
.panel-location { font: 10px var(--font-mono); }
.panel-session { margin-left: auto; display: flex; align-items: center; gap: 18px; }
#desktopClock { font: bold 12px var(--font-mono); border: 1px inset #e1e4d8; padding: 3px 8px; background: #b4bbae; }
.linux-taskbar { bottom: 0; height: 34px; gap: 6px; padding: 3px 7px; }
.panel-home, .taskbar-active {
  text-decoration: none; background: #c5c8bf; color: #20251d; padding: 4px 12px;
  border: 2px solid; border-color: #f2f4e9 #6a7163 #6a7163 #f2f4e9;
  font: 11px var(--font-ui); cursor: pointer;
}
.taskbar-active { background: #abb5a1; border-color: #66715c #e5eadb #e5eadb #66715c; min-width: 190px; text-align: left; }
.workspace-switcher { margin-left: auto; display: flex; height: 24px; gap: 2px; }
.workspace-switcher>* { width: 27px; display: grid; place-items: center; background: #acb1a4; border: 1px inset #e4e8db; font-size: 9px; }
.workspace-switcher>b { color: #fff; background: #365b60; }
.taskbar-note { font: 9px var(--font-mono); padding: 0 7px; }
.desktop-watermark { position: fixed; right: 35px; bottom: 60px; color: #90abaa; font: 38px Georgia, serif; text-align: right; opacity: .5; pointer-events: none; }
.desktop-watermark span { display: block; font: 9px var(--font-mono); margin-top: 8px; }
.desktop { padding: 55px 35px 58px; }
.wmp-window {
  width: min(1340px, calc(100vw - 80px)); height: calc(100svh - 115px); min-height: 560px;
  border: 3px solid; border-color: #edf0e3 #41483d #41483d #edf0e3;
  border-radius: 0; background: #c5c8bf;
  box-shadow: 7px 8px 0 #172f334d;
  grid-template-rows: 30px 31px minmax(0, 1fr) 24px;
}
.wmp-window.maximized { inset: 32px 0 34px !important; width: 100vw; height: calc(100svh - 66px); }
.wmp-window.minimized { height: 67px; min-height: 67px; }
.title-bar {
  margin: 2px; padding: 0 5px; border: none;
  background: linear-gradient(90deg, #263e58, #5c7580); color: #fff;
}
.title { font: bold 11px var(--font-ui); letter-spacing: 0; }
.title .app-icon { width: 17px; height: 17px; background: #141b16; color: #a5e899; border: 1px inset #c5c8bf; border-radius: 0; }
.window-controls { gap: 3px; }
.window-btn, .window-btn.close {
  border: 2px solid; border-color: #f4f5e9 #626a5b #626a5b #f4f5e9;
  background: #c5c8bf; color: #20251d; border-radius: 0; width: 20px; height: 20px;
}
.window-btn:hover, .window-btn.close:hover { background: #e0e3d8; }
.menu-bar { background: #c5c8bf; border-bottom: 1px solid #7c8572; padding-inline: 5px; }
.menu-item { color: #20251d; font-size: 11px; padding: 5px 11px; }
.menu-item:hover, .menu-item[aria-current="page"] { background: #a7b29a; color: #162113; border-radius: 0; }
.app-body { grid-template-columns: 155px minmax(0, 1fr) 190px; gap: 3px; background: #c5c8bf; padding: 3px; }
.sidebar { background: #d5d8cb; padding: 15px 6px 10px; border: 1px inset #f3f5e9; }
.sidebar-brand { border-bottom: 1px solid #a0aa92; padding: 0 8px 17px; margin-bottom: 12px; }
.sidebar-eyebrow { color: #646c5b; font: 8px var(--font-mono); }
.sidebar-brand strong { color: #273323; font: bold 12px var(--font-mono); letter-spacing: 0; }
.nav-item { border-radius: 0; padding: 11px 9px; font: 11px var(--font-ui); color: #2b3425; border: 1px solid transparent; margin: 0; }
.nav-item i { color: #53683c; }
.nav-item.active { background: #314d64; color: #fff; border: 1px dotted #cbd8df; font-weight: 400; }
.nav-item.active i { color: #e0ebcc; }
.nav-item:hover:not(.active) { background: #c2cbb6; }
.sidebar-footer { color: #4b5c3b; font-size: 8px; padding-inline: 8px; }
.status-dot { background: #43832f; box-shadow: none; }
.player-section { background: #e6e7da; grid-template-rows: minmax(0, 1fr) 25px 100px; border: 2px solid; border-color: #737c68 #f1f3e5 #f1f3e5 #737c68; }
.video-window { background: #e8eadd; }
.ambient-canvas { opacity: .045; filter: grayscale(1); }
.track-header { min-height: 75px; padding: 15px 20px; border-bottom: 1px solid #b4bda7; background: #dde1d2; }
.artist { font: bold 22px var(--font-mono); letter-spacing: -.05em; color: #273021; }
.track-name { color: #61734d; font-size: 9px; }
.xp-action { color: #273021; background: #c7cebb; font-size: 10px; padding: 6px 9px; border: 2px solid; border-color: #f9faef #889378 #889378 #f9faef; border-radius: 0; }
.xp-action:hover { background: #dce3cf; border-color: #fff #7d886d #7d886d #fff; }
.content-host { inset: 76px 0 0; padding: 20px; scrollbar-color: #8e9d7e #d8decc; scrollbar-width: auto; }
.hero {
  background: #171e18; color: #b3c6a6;
  border: 2px solid; border-color: #7e8b70 #f5f6e9 #f5f6e9 #7e8b70;
  border-radius: 0; box-shadow: none; padding: 25px; gap: 22px;
  grid-template-columns: 90px minmax(0, 1fr);
}
.hero::before { content: 'aymane@localhost:~$ whoami'; grid-column: 1 / -1; font: 11px var(--font-mono); color: #8fbf70; padding-bottom: 10px; border-bottom: 1px dashed #43533b; }
.avatar { width: 90px; aspect-ratio: 1; border: 3px ridge #b0b8a0; transform: none; border-radius: 0; background: #c9d0bc; box-shadow: none; }
.avatar-image { filter: saturate(.45); }
.hero h1 { color: #e4e8d6; font: bold clamp(26px, 2.6vw, 36px)/1.15 var(--font-mono); letter-spacing: -.05em; margin-block: 12px; }
.kicker { color: #aacb7d; font: 8px/1.6 var(--font-mono); letter-spacing: .03em; }
.hero-role { font: 12px/1.6 var(--font-mono); color: #aac992; }
.hero-copy { font: 12px/1.9 var(--font-mono); color: #b9c5af; }
.primary-btn, .secondary-btn { font: 10px var(--font-mono); border-radius: 0; padding: 9px 12px; border: 2px solid; border-color: #dce7c9 #657553 #657553 #dce7c9; color: #25311c; background: #b5c49b; }
.secondary-btn { background: #c7cdb9; }
.quick-grid { gap: 10px; margin-block: 15px; }
.quick-card, .panel { background: #e1e5d5; border: 1px solid #a7b298; border-radius: 0; }
.quick-card { padding: 13px; }
.quick-card span { color: #687757; font: 8px var(--font-mono); }
.quick-card strong { color: #303d25; font: 12px var(--font-mono); }
.education-panel { padding: 18px; }
.education-panel h2 { font: bold 16px var(--font-mono); }
.education-panel p { color: #414e36; font-size: 12px; }
.education-panel .certification { color: #315c25; }
.section-heading h2 { font: bold 23px var(--font-mono); color: #303c26; }
.section-heading h2::before { color: #62804c; }
.section-heading p { color: #5f7250; font: 9px/1.6 var(--font-mono); }
.project-card, .timeline-item, .skill-group {
  background: #eff0e4; border: 2px solid; border-color: #fafbf2 #9ba88b #9ba88b #fafbf2;
  border-radius: 0; padding: 20px; box-shadow: 2px 2px 0 #bac3ad;
}
.project-card:hover { transform: none; border-color: #fff #6c8057 #6c8057 #fff; }
.project-card.featured-project { border-top: 2px solid #fff; }
.project-card.featured-project::before { content: '[ PACKAGE / SELECTED PROJECT ]'; color: #6a7b58; font: 8px var(--font-mono); border-bottom: 1px dashed #b0bca0; padding-bottom: 11px; margin-bottom: 16px; }
.project-card h3 { color: #27351c; font: bold 20px/1.3 var(--font-mono); letter-spacing: -.05em; }
.project-kind { border: 1px solid #a4b590; background: #d8e1c9; color: #486431; border-radius: 0; font-size: 8px; }
.project-card p, .timeline-item li { color: #47553a; font-size: 12px; line-height: 1.85; }
.tech-tag, .skill-pill { background: #e0e5d3; border: 1px solid #b8c3a7; border-radius: 0; color: #526542; font: 9px/1.5 var(--font-mono); }
.project-link { color: #254f83; font: bold 11px var(--font-mono); }
.project-link:hover { color: #163752; }
.timeline-item h3 { color: #2f3c23; font: bold 18px var(--font-mono); }
.company { color: #486735; }
.timeline-date { background: #dde5cf; color: #4b6737; border-color: #b4c2a2; border-radius: 0; }
.environment { border-color: #bec9ae; color: #587645; }
.skill-group h3 { color: #344a28; font: bold 15px var(--font-mono); }
.skill-group h3 i { color: #5c7547; }
.panel h3 { color: #344729; font: bold 19px var(--font-mono); }
.panel p { color: #495b3c; }
.contact-link { border: 1px solid #b2c19f; background: #dae3cd; color: #324d24; border-radius: 0; font: 11px var(--font-mono); }
.contact-link:hover { background: #cbdab8; }
.code-block { border: 2px inset #b5c39f; background: #192218; color: #adc892; border-radius: 0; }
.playlist-area { background: #d5d8cb; border: 1px inset #f3f5e9; }
.playlist-header { height: 32px; padding: 9px 12px; color: #33442a; background: #bbc6ab; border-color: #8b9c76; font: bold 10px var(--font-mono); }
.playlist-content { padding: 17px 10px; }
.playlist-group { border-color: #abb69a; }
.playlist-group-title { color: #5b7048; font: 8px var(--font-mono); }
.playlist-item { color: #344d25; border-radius: 0; padding: 9px; font-size: 10px; }
.playlist-item.is-current { background: #bacaa6; color: #304f1d; border: 1px dotted #6e8858; }
.playlist-item:hover { background: #c2d1b0; }
.stack-line { color: #476238; border-color: #bdc8ae; font: 9px var(--font-mono); }
.stack-line i, .playlist-item i { color: #66864d; }
.monitor-row { font: 9px var(--font-mono); }
.monitor-row span { color: #61774e; }
.monitor-row strong, .monitor-row .online { color: #345a23; }
.info-bar { background: #202821; color: #8fbc6d; border-color: #576348; font: 7px var(--font-mono); }
.tiny-control { color: #b2cb94; }
.player-message { color: #9cac87; }
.bottom-player-bar { background: linear-gradient(#adb6a0, #7c8b6d); border: 2px solid; border-color: #e3e9d9 #4c5c3e #4c5c3e #e3e9d9; padding: 8px 12px; }
.progress-container { background: #192116; border: 2px inset #a1b08a; padding: 3px 6px; border-radius: 0; }
.seek-bar, .volume-slider { background: #39482e; border: 1px inset #879a6e; border-radius: 0; }
.seek-bar-fill, .volume-slider-fill { background: repeating-linear-gradient(90deg, #a9ce6f 0 3px, #35482a 3px 4px); border-radius: 0; }
.seek-thumb { background: #cdd8b5; border: 1px outset #edf4d9; border-radius: 0; width: 7px; height: 12px; }
.time-display { color: #b1dd78; font: bold 10px var(--font-mono); }
.transport-row { gap: 14px; }
.transport-controls { gap: 3px; }
.transport-btn, .transport-btn.play {
  width: 29px; height: 26px; margin: 0; border-radius: 0; background: #b8c2a7; color: #283b1d;
  border: 2px solid; border-color: #e4ebd8 #4b5f3a #4b5f3a #e4ebd8;
}
.transport-btn.play { background: #c7d4af; }
.transport-btn:active { border-color: #4b5f3a #e4ebd8 #e4ebd8 #4b5f3a; }
.volume-icon { color: #2e4420; }
.now-playing { background: #202b19; padding: 5px 8px; border: 2px inset #c4d2af; }
.now-playing-label { color: #7b9c5c; font: 6px var(--font-mono); }
.now-playing strong { color: #b9d990; font: 9px var(--font-mono); }
.status-bar { background: #c5c8bf; color: #4d5d3f; border-top: 1px solid #edf1e2; font: 8px var(--font-mono); }
.reopen-window { background: #c5c8bf; color: #25341c; border: 3px outset #e7ebdb; border-radius: 0; font: 12px var(--font-mono); }
a:focus-visible, button:focus-visible, [role='slider']:focus-visible { outline: 2px dotted #798b5e; outline-offset: 2px; }
@media (max-width: 1200px) { .app-body { grid-template-columns: 145px minmax(0, 1fr); } }
@media (max-width: 920px) {
  .desktop { padding: 45px 12px 47px; }
  .wmp-window { width: 100%; height: calc(100svh - 92px); min-height: 520px; border-radius: 0; }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .linux-panel { height: 29px; gap: 5px; padding-inline: 5px; font-size: 10px; }
  .panel-location, .panel-session { font-size: 0; gap: 0; }
  #desktopClock { font-size: 10px; }
  .linux-app-menu { font-size: 10px; }
  .desktop { padding: 34px 4px 38px; }
  .wmp-window { height: calc(100svh - 72px); min-height: 440px; grid-template-rows: 28px minmax(0, 1fr) 21px; }
  .menu-bar { display: none; }
  .title { font-size: 9px; }
  .title-bar { margin: 1px; }
  .app-body { padding: 2px; gap: 3px; }
  .sidebar { padding: 4px; border: 1px inset #e7eadd; gap: 2px; }
  .nav-item { padding: 9px 3px; font-size: 9px; }
  .nav-item i { font-size: 10px; }
  .player-section { grid-template-rows: minmax(0, 1fr) 23px 88px; }
  .track-header { min-height: 66px; padding: 12px; }
  .artist { font-size: 18px; }
  .track-name { font-size: 7px; }
  .content-host { inset: 67px 0 0; padding: 12px; }
  .hero { padding: 17px; gap: 14px; }
  .hero::before { font-size: 9px; }
  .hero h1 { font-size: 29px; }
  .hero-role { font-size: 11px; }
  .hero-copy { font-size: 11px; }
  .hero-actions { gap: 7px; }
  .primary-btn, .secondary-btn { padding: 8px; font-size: 9px; }
  .quick-card strong { font-size: 10px; }
  .section-heading h2 { font-size: 21px; }
  .project-card { padding: 17px; }
  .project-card h3 { font-size: 19px; }
  .bottom-player-bar { padding: 5px 8px; }
  .transport-row { gap: 9px; }
  .now-playing { padding: 4px; }
  .now-playing strong { font-size: 7px; }
  .linux-taskbar { height: 30px; padding: 2px 4px; }
  .panel-home, .taskbar-active { font-size: 9px; padding: 3px 7px; }
  .taskbar-active { min-width: 140px; }
  .taskbar-note { display: none; }
  .workspace-switcher { height: 21px; }
  .workspace-switcher>* { width: 20px; }
  .wmp-window.minimized { height: 33px; min-height: 33px; }
}