:root{
      --bg-top:#000000;
      --bg-bottom:#d6d8db;
      --window-bg:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.7));
      --accent: rgba(0,0,0,0.6);
      --title-height:36px;
      --radius:12px;
      --traffic-size:12px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background: url("../img/bg.jpg") no-repeat center center fixed;
      background-size: cover;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px;
      color:#111;
    }

    .mac-window{
      width:min(920px, 95vw);
      border-radius:var(--radius);
      box-shadow: 0 18px 40px rgba(16,24,32,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
      background: linear-gradient(180deg, rgba(168, 168, 168, 0.9), rgba(0, 0, 0, 0.75));
      backdrop-filter: blur(4px) saturate(120%);
      overflow:hidden;
      user-select:none;
    }

    .titlebar{
      height:var(--title-height);
      display:flex;
      align-items:center;
      gap:10px;
      padding:6px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.08));
      border-bottom: 1px solid rgba(0,0,0,0.04);
      -webkit-app-region: drag; 
    }

    .traffic{
      display:flex;
      gap:8px;
      align-items:center;
      margin-right:4px;
    }
    .btn{
      width:var(--traffic-size);
      height:var(--traffic-size);
      border-radius:50%;
      display:inline-block;
      box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
    }
    .btn.close{ background: #ff5f57; border: 1px solid rgba(0,0,0,0.05)}
    .btn.min{ background: #ffbd2e; border: 1px solid rgba(0,0,0,0.05)}
    .btn.max{ background: #28c840; border: 1px solid rgba(0,0,0,0.05)}

    .title{
      font-size:14px;
      font-weight:600;
      color:var(--accent);
      text-align:center;
      flex:1;
      margin-right:40px; 
    }

    .content{
      padding:18px;
      display:grid;
      grid-template-columns: 280px 1fr;
      gap:18px;
      min-height:380px;
      background: linear-gradient(180deg, rgba(250,250,250,0.35), rgba(245,245,246,0.15));
    }

    .sidebar{
      background: linear-gradient(180deg, rgba(250,250,250,0.35), rgba(245,245,246,0.15));
      border-radius:10px;
      padding:14px;
      box-shadow: 0 6px 18px rgba(10,10,10,0.06);
      border:1px solid rgba(0,0,0,0.04);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .sidebar h3{margin:0;font-size:13px;color:var(--accent)}
    .item{padding:8px;border-radius:8px;cursor:pointer; transition: 0.05s ease-in-out;}
    .item:hover{background: rgba(0,0,0,0.03)}

    .main{
      background: rgba(197, 197, 197, 0.55);
      border-radius:10px;
      padding:16px;
      box-shadow: 0 6px 18px rgba(10,10,10,0.05);
      border:1px solid rgba(0,0,0,0.03);
      overflow:auto;
    }

    .toolbar{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:12px;
    }
    .pill{
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,0.6);
      border:1px solid rgba(0,0,0,0.04);
      font-size:13px;
      cursor:pointer;
    }

    .status{
      padding:10px 14px;
      font-size:13px;
      color:rgba(0,0,0,0.6);
      border-top:1px solid rgba(0,0,0,0.03);
      background:linear-gradient(180deg, transparent, rgba(0,0,0,0.01));
    }

    @media (max-width:720px){
      .content{grid-template-columns:1fr;}
      .title{font-size:13px}
    }

    .btn.fake-pressed{box-shadow:inset 0 2px 4px rgba(0,0,0,0.12)}
    .dock{
      position: fixed;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      pointer-events: auto;
    }
    .drive{
      position: fixed;
      top: 60px;
      right: 75px;
      z-index: 0;
      pointer-events: auto;
    }
    .drive img{
      width: 90px;
    }
    .drive img:active{
      transform: scale(0.95);
    }
    .topbar{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:34px;
      display:flex;
      align-items:center;
      z-index:1000;
      backdrop-filter: blur(6px) saturate(120%);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
      border-bottom: 1px solid rgba(0,0,0,0.12);
      color: #fff;
      padding:0 12px;
      pointer-events: auto;
    }
    .topbar-inner{ display:flex; align-items:center; gap:12px; padding:6px 10px; border-radius:10px; position:relative; width:100%; justify-content:flex-start }
    .topbar-left{ display:flex; align-items:center; gap:8px; }
    .apple-btn{ background:transparent; border:none; padding:4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
    .apple-logo{ height:18px; width:auto; display:block; max-height:20px }
    .app-name{ font-size:13px; color:rgba(255,255,255,0.95); margin-left:4px }
    .topbar-center{ position:static; transform:none; display:flex; gap:8px; align-items:center; margin-left:12px }
    .menu-item{ background:transparent; border:none; color:rgba(0, 0, 0, 0.568); padding:4px 8px; font-size:14px; cursor:pointer; transition: 0.3s ease-in-out; }
    .menu-item:hover{ background: rgba(255,255,255,0.03); border-radius:6px; color: rgb(0, 0, 0)}
    .topbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto }
    .status-item{ background:transparent; border:none; color:rgba(255,255,255,0.9); font-size:14px; cursor:pointer; padding:4px; border-radius:8px }
    .status-item:hover{ background: rgba(255,255,255,0.03) }
    .status-icon{ width:18px; height:18px; display:block }
    .clock{ font-size:12px; color:rgba(255,255,255,0.9); margin-left:6px }

    body{ padding-top:56px }
    .dock-inner{
      display:flex;
      gap:10px;
      align-items:flex-end;
      padding:0 50px;
      border-radius:40px;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(8px) saturate(120%);
      box-shadow: 0 8px 30px rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .dock-item{
      display:inline-flex;
      align-items:flex-end;
      justify-content:center;
      width:56px;
      height:56px;
      background:transparent;
      border: none;
      padding:0;
      margin: 20px 0;
      cursor:pointer;
      transition: transform 120ms ease, box-shadow 120ms ease;
      transform-origin: center bottom;
    }
    .dock-item img{
      width:44px;
      height:44px;
      display:block;
      user-select:none;
      pointer-events:none;
    }

    .dock-item::after{
      content:'';
      display:block;
      width:6px;
      height:6px;
      margin:6px auto 0;
      border-radius:999px;
      background:transparent;
      transition: background 150ms ease, transform 150ms ease;
    }
    .dock-item.active::after{
      background: #2ecc71;
      transform: translateY(0);
    }

    @media (max-width:560px){
      .dock-inner{ padding:8px; gap:8px; }
      .dock-item{ width:44px; height:44px; }
      .dock-item img{ width:36px; height:36px; }
    }

    @media (max-width:720px){
      .topbar-center{ position:static; transform:none; margin:0 auto; }
    }