:root{
    --bg:#0e1117; --panel:#11151e; --card:#141a26; --muted:#9aa4b2; --text:#e6e9f0;
    --accent:#6ea8ff; --accent-2:#22c55e; --chip-bg:#1a2232; --chip-on:#2b3851;
    --ring:#60a5fa; --danger:#ef4444; --shadow:0 10px 24px rgba(0,0,0,.35); --radius:16px;
    --main-w: 680px; 
    --taskbar-w: 220px; 

    --logo-size: 36px;
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f6f8fb; --panel:#ffffff; --card:#ffffff; --muted:#5b6777; --text:#0f172a;
      --accent:#3b82f6; --accent-2:#16a34a; --chip-bg:#eef2f7; --chip-on:#dde5f4;
      --shadow:0 10px 24px rgba(10,20,40,.12);
    }
  }
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif; background:var(--bg); color:var(--text) }

  .app-header{
    position: sticky; top:0; z-index:50;
    background: linear-gradient(180deg, rgba(0,0,0,.25), transparent), var(--panel);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-top: 60px; 
  }

  .header-inner{
    max-width: var(--main-w);
    margin: 0 auto;
    padding: 12px 16px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 8px;
  }

  .header-row1{ display:flex; align-items:center; }
  .header-row2{ display:flex; align-items:center; gap:12px; }
  .header-row2 .searchbar{ flex: 1 1 auto; min-width: 220px; }
  .header-row3 .chips-row{ overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }


  .chips{ display:flex; gap:8px; align-items:center; min-height:36px }

  .app-header .brand{
    position: absolute;
    top: 12px;
    left: 16px; 
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
  .logo{
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: 10px; 
    overflow: hidden;
    display: grid;
    place-items: center;
    background: transparent; 
    }
    .logo img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
  .searchbar{ flex:1 1 320px; min-width:220px; position:relative }
  .searchbar input{ width:100%; height:44px; border-radius:999px; padding:0 44px 0 44px; border:1px solid transparent; background:var(--chip-bg); color:var(--text) }
  .searchbar svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted) }
  .searchbar .clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); padding:8px; cursor:pointer; border-radius:8px }
  .searchbar .clear:hover{ background:rgba(127,127,127,.1) }
  .chips-row{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px }
  .chips{ display:flex; gap:8px; min-height:36px; align-items:center }
  .chip{ border:1px solid transparent; background:var(--chip-bg); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; font-size:14px; white-space:nowrap }
  .chip[aria-pressed="true"]{ background:var(--chip-on); border-color:rgba(255,255,255,.08) }
  .sort{ margin-left:auto; display:flex; align-items:center; gap:8px }
  .sort select{ height:36px; border-radius:10px; background:var(--chip-bg); border:1px solid transparent; color:var(--text); padding:0 10px }

  .layout{
    display:grid; gap:16px; padding:16px 16px 40px;
    grid-template-columns: minmax(0, var(--main-w));
    justify-content: center; 
  }

  .main{ width:100%; max-width: var(--main-w); margin: 0 auto; }
  
  .taskbar{ display:none; }

  @media(min-width: 1160px){
    .layout{
    grid-template-columns: var(--taskbar-w) minmax(0, var(--main-w)) var(--taskbar-w);
    justify-content: center; 
    column-gap: 16px;
    }
    .taskbar{ display:block; position:sticky; top:96px; align-self:start; }
  }

  .taskbar .panel{
    background: var(--panel); border-radius: 12px; box-shadow: var(--shadow);
    border:1px solid rgba(255,255,255,.06);
    padding: 12px;
  }

  .taskbar h3{ margin: 0 0 10px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing:.08em }
  .tb-list{ display:flex; flex-direction:column; gap:8px; }
  .tb-btn{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px; background: var(--chip-bg); border:1px solid transparent;
    color: var(--text); cursor:pointer; text-align:left;
  }

  .tb-btn:hover{ background: var(--chip-on); }
  .tb-icon{ width:18px; height:18px; display:inline-block; color: var(--muted); }


  .admin-panel{ display:none; background:var(--panel); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px }
  .admin-panel.active{ display:block }
  .admin-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
  .admin-toggle{ display:flex; align-items:center; gap:8px }
  .form-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
  .form-row input[type="text"], .form-row select, .form-row textarea{ flex:1 1 220px; min-width:200px; height:42px; padding:0 12px; border-radius:10px; border:1px solid transparent; background:var(--chip-bg); color:var(--text) }
  .form-row textarea{ min-height:80px; padding:10px 12px; resize:vertical }
  .form-row input[type="file"]{ background:none; color:var(--muted); height:auto }
  .btn{  padding:0 14px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-weight:700; cursor:pointer }
  .btn.secondary{ background:var(--chip-bg); color:var(--text) }
  .btn:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring) }

  .feed{ display:flex; flex-direction:column; gap:16px }

  article.post{  background-color: #FFFF0080; border-radius:18px; box-shadow:var(--shadow); overflow:hidden; border:1px solid rgba(255,255,255,.04) }
  .post-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 0 }
  .avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:#222 }
  .avatar img{ width:100%; height:100%; object-fit:cover; display:block }
  .uploader{ display:flex; flex-direction:column; line-height:1.2 }
  .uploader .name{ font-weight:700 }
  .uploader .time{ color:var(--muted); font-size:12px }

  .post-text{ padding:8px 14px 0; display:flex; flex-direction:column; gap:6px }
  .title{ margin:0; font-size:18px }
  .tag{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.12); cursor:pointer; width:max-content }
  .desc{ color:var(--text); opacity:.95; line-height:1.45; margin:2px 0 0 }

  .media{ padding:10px 14px 0 }
  .carousel{ position:relative; overflow:hidden; border-radius:14px; background:#0b0f16; }
  .slides{ display:flex; transition: transform .35s ease; will-change: transform }
  .slide{ flex:0 0 100%; aspect-ratio: 4/5; max-height: 460px; display:grid; place-items:center; background:#0b0f16 }
  .slide img{ width:100%; height:100%; object-fit:cover; display:block }
  .nav{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none;
  }
  .nav button{
    pointer-events:auto; background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.15);
    width:36px; height:36px; border-radius:999px; display:grid; place-items:center; margin:0 8px; cursor:pointer;
  }
  .dots{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:6px; background: rgba(0,0,0,.25); padding:6px 8px; border-radius:999px }
  .dots button{ width:8px; height:8px; border-radius:50%; border:0; background: rgba(255,255,255,.5); cursor:pointer }
  .dots button[aria-current="true"]{ background:#fff }

  .actions{ padding:10px 14px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  .action-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:10px; border:1px solid transparent; background:var(--chip-bg); color:var(--text); cursor:pointer }
  .like-btn[aria-pressed="true"]{ background: rgba(34,197,94,.18) }
  .action-btn svg{ width:18px; height:18px }

  details.comments{ background: #F4F491; margin:10px 14px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.06); overflow:hidden }
  details.comments > summary{ list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; justify-content:space-between }
  details.comments > summary::-webkit-details-marker{ display:none }
  .comment-list{ list-style:none; margin:0; padding:10px 12px; display:flex; flex-direction:column; gap:10px; max-height:40vh; overflow:auto }

  
  .comment{  padding:8px 10px; border-radius:10px }
  .comment .who{ font-weight:700; margin-right:6px }

  .comment .meta{ color:var(--muted); font-size:12px; margin-left:6px }
  .comment .text{ display:inline }
  .comment .comment-actions{
  display:flex; gap:8px; margin-top:6px; align-items:center;
  }

  .comment .c-btn{
  background:none; border:0; color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:8px;
  }

  .comment .c-btn:hover{ background: rgba(127,127,127,.12); color:var(--text) }
  .comment .c-like-btn[aria-pressed="true"]{ color: var(--accent-2); }
  
  .reply-list{
  list-style:none; margin:8px 0 0 12px; padding:0 0 0 10px; border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:8px;
  }
  .reply-form{
  display:flex; gap:6px; margin-top:8px;
  }
  .reply-form input{
  flex:1 1 auto; min-width:120px; height:32px; border-radius:8px; border:1px solid transparent; background:var(--chip-bg); color:var(--text); padding:0 10px;
  }
  .reply-form button{
  height:32px; padding:0 10px; border-radius:8px; border:0; background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
  }
  
  .comment time{ color:var(--muted); margin-left:6px; font-size:12px }
  .comment-form{ display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid rgba(255,255,255,.06) }
  .comment-form input{ flex:1 1 auto; min-width:120px; height:38px; border-radius:10px; border:1px solid transparent; background:var(--chip-bg); color:var(--text); padding:0 10px }
  .comment-form button{ height:38px; padding:0 12px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-weight:700; cursor:pointer }

  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0 }

  .carousel .slides { user-select: none; -webkit-user-select: none; cursor: grab; touch-action: pan-y; }

  .carousel .slides:active { cursor: grabbing; }

  .carousel img { -webkit-user-drag: none; user-select: none; pointer-events: none; }