:root{
    --bg:#ffffff;
    --surface-hover:#f2f2f2;
    --surface-2:#f8f9fa;
    --border:#e5e5e5;
    --text-primary:#0f0f0f;
    --text-secondary:#606060;
    --text-tertiary:#909090;
    --accent:#1877f2;
    --accent-dark:#145dbf;
    --accent-light:#e7f0ff;
    --danger:#e0245e;
    --radius-lg:12px;
    --radius-md:10px;
    --radius-full:999px;
    --topbar-h:56px;
    --bottomnav-h:56px;
    --sidebar-w:240px;
    --sidebar-mini-w:72px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{
    font-family:'Roboto', Arial, sans-serif;
    background:var(--bg);
    color:var(--text-primary);
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
  button:focus-visible, a:focus-visible, input:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
  }
  ul{list-style:none;}
  .icon{width:20px; height:20px; stroke-width:1.8; flex-shrink:0;}

  /* ===================== TOP BAR ===================== */
  .topbar{
    position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:0 16px; background:var(--bg);
    border-bottom:1px solid var(--border); z-index:100;
  }
  .topbar-left{display:flex; align-items:center; gap:20px; min-width:0;}
  .icon-btn{
    width:40px; height:40px; border-radius:var(--radius-full);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .icon-btn:hover{background:var(--surface-hover);}
  .logo{display:flex; align-items:center; gap:6px; min-width:0;}
  .logo-mark{
    width:30px; height:30px; border-radius:8px; background:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .logo-mark svg{width:14px; height:14px; fill:#fff;}
  .logo-img{
    width:auto;
    max-width:42px;
    height:32px;
    object-fit:contain;
    flex-shrink:0;
  }
  .logo-text{
    font-size:19px; font-weight:700; letter-spacing:-0.3px; white-space:nowrap;
  }
  .logo-text b{color:var(--accent); font-weight:900;}
  .topbar-center{
    flex:1; display:flex; justify-content:center; min-width:0; max-width:640px; margin:0 auto;
  }
  .search-form{
    display:flex; align-items:center; width:100%; height:40px;
  }
  .search-input-wrap{
    flex:1; display:flex; align-items:center; height:100%;
    border:1px solid var(--border); border-radius:var(--radius-full) 0 0 var(--radius-full);
    padding:0 16px; background:var(--bg);
  }
  .search-input-wrap:focus-within{
    border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
  }
  .search-input-wrap input{
    border:none; outline:none; width:100%; font-size:15px; background:transparent; color:var(--text-primary);
  }
  .search-submit{
    width:64px; height:100%; background:var(--surface-2);
    border:1px solid var(--border); border-left:none;
    border-radius:0 var(--radius-full) var(--radius-full) 0;
    display:flex; align-items:center; justify-content:center;
  }
  .search-submit:hover{background:var(--surface-hover);}
  .mic-btn{
    width:40px; height:40px; border-radius:var(--radius-full); background:var(--surface-2);
    display:flex; align-items:center; justify-content:center; margin-left:12px; flex-shrink:0;
  }
  .mic-btn:hover{background:var(--surface-hover);}
  .search-icon-btn-mobile{display:none;}
  .topbar-right{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .btn-cta{
    display:flex; align-items:center; gap:8px; height:36px; padding:0 16px;
    border-radius:var(--radius-full); background:var(--accent-light); color:var(--accent);
    font-size:14px; font-weight:700; white-space:nowrap;
  }
  .btn-cta:hover{background:#d7e6ff;}
  .badge-dot{
    position:relative;
  }
  .badge-dot::after{
    content:''; position:absolute; top:6px; right:6px; width:8px; height:8px;
    background:var(--accent); border-radius:50%; border:2px solid var(--bg);
  }
  .avatar{
    width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#0b3d91);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; flex-shrink:0;
  }
  .topbar-avatar{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--accent),#0b3d91);
    color:#fff;
    font-size:14px;
    font-weight:900;
    line-height:1;
    flex:0 0 auto;
  }
  .topbar-avatar:hover{
    filter:brightness(.96);
  }

  /* ===================== LAYOUT ===================== */
  .layout{display:flex; padding-top:var(--topbar-h); min-height:100vh;}

  /* ===================== SIDEBAR ===================== */
  .sidebar{
    width:var(--sidebar-w); flex-shrink:0; position:fixed; top:var(--topbar-h); left:0; bottom:0;
    overflow-y:auto; padding:12px; background:var(--bg); z-index:90;
    transition:transform .2s ease;
  }
  .sidebar::-webkit-scrollbar{width:8px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
  .nav-group{padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border);}
  .nav-group:last-child{border-bottom:none;}
  .nav-group-label{
    font-size:13px; font-weight:700; color:var(--text-secondary); padding:12px 12px 6px;
    text-transform:none;
  }
  .nav-item{
    display:flex; align-items:center; gap:20px; padding:10px 12px; border-radius:var(--radius-md);
    font-size:14px; font-weight:500; color:var(--text-primary); width:100%; text-align:left;
  }
  .nav-item:hover{background:var(--surface-hover);}
  .nav-item.active{background:var(--accent-light); color:var(--accent); font-weight:700;}
  .nav-item.active .icon{color:var(--accent);}
  .nav-item .cat-dot{width:10px; height:10px; border-radius:3px; flex-shrink:0;}
  .sidebar-footer{padding:16px 12px; font-size:12px; color:var(--text-tertiary); line-height:1.8;}

  /* mini rail (tablet) */
  .sidebar.mini{width:var(--sidebar-mini-w);}
  .sidebar.mini .nav-item{flex-direction:column; gap:6px; padding:14px 4px; text-align:center; border-radius:var(--radius-md);}
  .sidebar.mini .nav-item span{font-size:10px; font-weight:500;}
  .sidebar.mini .nav-group-label,
  .sidebar.mini .sidebar-footer{display:none;}
  .sidebar.mini .nav-item .icon{width:22px; height:22px;}

  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:80; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .overlay.show{opacity:1; pointer-events:auto;}

  /* ===================== MAIN CONTENT ===================== */
  .content{
    flex:1; min-width:0; margin-left:var(--sidebar-w); padding:24px 24px 40px;
    transition:margin-left .2s ease;
  }

  /* category chips */
  .chips-row{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; margin-bottom:8px;
    scrollbar-width:none;
  }
  .chips-row::-webkit-scrollbar{display:none;}
  .chip{
    flex-shrink:0; height:32px; padding:0 16px; border-radius:var(--radius-full);
    background:var(--surface-2); font-size:13.5px; font-weight:500; white-space:nowrap;
    display:flex; align-items:center;
  }
  .chip:hover{background:var(--surface-hover);}
  .chip.active{background:var(--text-primary); color:#fff;}

  /* shorts shelf */
  .section-title{
    display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin:20px 0 14px;
  }
  .section-title .icon{color:var(--accent); width:22px; height:22px;}
  .shorts-shelf{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:20px; scroll-snap-type:x mandatory;
  }
  .shorts-shelf::-webkit-scrollbar{height:8px;}
  .shorts-shelf::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
  .short-card{
    flex-shrink:0; width:170px; scroll-snap-align:start; border-radius:var(--radius-lg);
    overflow:hidden; cursor:pointer;
  }
  .short-thumb{
    position:relative; width:170px; height:300px; border-radius:var(--radius-lg);
    background-size:cover; overflow:hidden;
  }
  .short-thumb img,
  .thumb-wrap img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .short-thumb .short-pattern{display:none;}
  .short-thumb .short-views{
    position:absolute; left:10px; bottom:10px; z-index:2; color:#fff; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; gap:5px; text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .short-thumb .short-views .icon{width:14px; height:14px;}
  .short-title{font-size:13.5px; font-weight:500; margin-top:8px; line-height:1.4;}

  /* video grid */
  .video-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 16px;
  }
  .video-card{cursor:pointer;}
  .thumb-wrap{
    position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg);
    overflow:hidden; background:var(--surface-2);
  }
  .thumb-pattern{
    display:none;
    position:absolute; inset:0; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cg stroke='white' stroke-width='2' opacity='0.55'%3E%3Cline x1='10' y1='18' x2='10' y2='52'/%3E%3Cline x1='28' y1='8' x2='28' y2='40'/%3E%3Cline x1='46' y1='26' x2='46' y2='60'/%3E%3Cline x1='64' y1='14' x2='64' y2='46'/%3E%3Cline x1='82' y1='30' x2='82' y2='58'/%3E%3Cline x1='100' y1='6' x2='100' y2='36'/%3E%3Cline x1='118' y1='20' x2='118' y2='50'/%3E%3C/g%3E%3Cg fill='white' opacity='0.85'%3E%3Crect x='6' y='24' width='8' height='16' rx='1'/%3E%3Crect x='24' y='14' width='8' height='14' rx='1'/%3E%3Crect x='42' y='34' width='8' height='16' rx='1'/%3E%3Crect x='60' y='20' width='8' height='16' rx='1'/%3E%3Crect x='78' y='38' width='8' height='12' rx='1'/%3E%3Crect x='96' y='12' width='8' height='16' rx='1'/%3E%3Crect x='114' y='26' width='8' height='16' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat; background-size:140px 70px; mix-blend-mode:overlay;
  }
  .thumb-duration{
    position:absolute; right:6px; bottom:6px; z-index:2; background:rgba(0,0,0,.8); color:#fff;
    font-size:12px; font-weight:600; padding:2px 6px; border-radius:4px; letter-spacing:.2px;
  }
  .thumb-live{
    position:absolute; left:8px; top:8px; background:var(--danger); color:#fff;
    font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:4px; display:flex; align-items:center; gap:5px;
  }
  .thumb-live .dot{width:6px; height:6px; border-radius:50%; background:#fff;}
  .thumb-progress{
    position:absolute; left:0; bottom:0; height:3px; background:rgba(255,255,255,.4); width:100%;
  }
  .thumb-progress span{display:block; height:100%; background:var(--accent);}
  .play-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0); transition:background .15s ease; opacity:0;
  }
  .thumb-wrap:hover .play-overlay{opacity:1; background:rgba(0,0,0,.15);}
  .play-overlay-btn{
    width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.95);
    display:flex; align-items:center; justify-content:center;
  }
  .play-overlay-btn::after{
    content:''; border-style:solid; border-width:8px 0 8px 13px;
    border-color:transparent transparent transparent var(--text-primary); margin-left:3px;
  }
  .video-info{display:flex; gap:12px; margin-top:12px; align-items:flex-start;}
  .video-info .avatar{margin-top:2px;}
  .meta-col{flex:1; min-width:0;}
  .video-title{
    font-size:14.5px; font-weight:600; line-height:1.35; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:4px;
  }
  .channel-row{display:flex; align-items:center; gap:4px; color:var(--text-secondary); font-size:13px;}
  .channel-row .icon{width:14px; height:14px; color:var(--accent); flex-shrink:0;}
  .stats-row{color:var(--text-secondary); font-size:13px;}
  .more-btn{margin-left:auto; width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .more-btn:hover{background:var(--surface-hover);}
  .more-btn .icon{width:17px; height:17px;}

  /* category gradient variants */
  .cat-teknikal{background:linear-gradient(135deg,#3b93ff,#0b3d91);}
  .cat-forex{background:linear-gradient(135deg,#22c58b,#056a45);}
  .cat-saham{background:linear-gradient(135deg,#9061f9,#4c1d95);}
  .cat-crypto{background:linear-gradient(135deg,#fbbf24,#b45309);}
  .cat-risk{background:linear-gradient(135deg,#f4667c,#7f1d1d);}
  .cat-psikologi{background:linear-gradient(135deg,#22d3ee,#0e7490);}
  .cat-live{background:linear-gradient(135deg,#f4667c,#8f1414);}

  .dot-teknikal{background:#1877f2;} .dot-forex{background:#0ea86c;} .dot-saham{background:#7c3aed;}
  .dot-crypto{background:#d97706;} .dot-risk{background:#dc2626;} .dot-psikologi{background:#0e7490;}
  .dot-live{background:#dc2626;}

  /* ===================== ARTICLE DETAIL ===================== */
  .article-page{
    max-width:1380px;
  }
  .article-layout{
    display:grid; grid-template-columns:minmax(0, 820px) 336px; gap:34px; align-items:start;
  }
  .article-main-col{
    min-width:0;
  }
  .article-shell,
  .article-section{
    max-width:820px;
  }
  .article-back{
    display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary);
    font-size:14px; font-weight:600; margin-bottom:18px;
  }
  .article-back:hover{color:var(--accent);}
  .article-kicker{
    color:var(--accent); font-size:13px; font-weight:800; margin-bottom:10px;
  }
  .article-title{
    font-size:40px; line-height:1.12; font-weight:900; letter-spacing:0; margin-bottom:14px;
  }
  .article-summary{
    color:var(--text-secondary); font-size:18px; line-height:1.6; margin-bottom:16px;
  }
  .article-meta{
    display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--text-secondary);
    font-size:13.5px; margin-bottom:22px;
  }
  .article-actions{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-4px 0 22px;
  }
  .article-actions form{
    margin:0;
  }
  .article-save-btn,
  .article-like-btn,
  .article-save-link,
  .dashboard-primary{
    min-height:40px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:0 14px; font-size:14px; font-weight:800;
  }
  .article-save-btn{
    background:var(--accent); color:#fff;
  }
  .article-save-btn:hover{background:var(--accent-dark);}
  .article-like-btn{
    background:var(--surface-2); color:var(--text-primary); border:1px solid var(--border);
  }
  .article-like-btn:hover{background:var(--surface-hover);}
  .article-like-btn.liked{
    background:#fff1f2; color:var(--danger); border-color:#fecdd3;
  }
  .article-like-btn.liked svg{
    fill:currentColor;
  }
  .article-save-btn.saved{
    background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0;
  }
  .article-save-btn.saved svg{
    fill:currentColor;
  }
  .article-save-link{
    background:var(--surface-2); color:var(--text-primary); border:1px solid var(--border);
  }
  .article-save-link:hover{background:var(--surface-hover);}
  .dashboard-primary{
    background:var(--accent); color:#fff;
  }
  .dashboard-primary:hover{background:var(--accent-dark);}
  .article-cover{
    width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--surface-2); margin-bottom:18px;
  }
  .article-cover img{
    width:100%; height:100%; object-fit:cover;
  }
  .article-tags{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;
  }
  .article-tags a{
    background:var(--surface-2); color:var(--text-secondary); border-radius:var(--radius-full);
    padding:7px 12px; font-size:13px; font-weight:700;
  }
  .article-tags a:hover{background:var(--surface-hover); color:var(--text-primary);}
  .tutorial-box{
    border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
    padding:18px; margin:0 0 24px;
  }
  .tutorial-box h2{
    font-size:18px; line-height:1.25; margin-bottom:10px;
  }
  .tutorial-box ol{
    padding-left:20px; color:var(--text-secondary); font-size:14.5px; line-height:1.7;
  }
  .article-aside{
    position:sticky; top:calc(var(--topbar-h) + 20px); display:grid; gap:16px;
  }
  .aside-panel{
    border:1px solid var(--border); border-radius:8px; padding:16px; background:var(--bg);
  }
  .aside-label{
    color:var(--accent); font-size:12px; font-weight:900; margin-bottom:8px;
  }
  .aside-panel h2{
    font-size:18px; line-height:1.3; margin-bottom:8px;
  }
  .aside-panel p{
    color:var(--text-secondary); font-size:14px; line-height:1.6;
  }
  .aside-metrics{
    display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
  }
  .aside-metrics span{
    background:var(--surface-2); border-radius:var(--radius-full); padding:6px 10px;
    color:var(--text-secondary); font-size:12.5px; font-weight:700;
  }
  .aside-steps{
    padding-left:18px; color:var(--text-secondary); font-size:14px; line-height:1.7;
  }
  .aside-tags{
    margin:0;
  }
  .ad-banner-sidebar{
    margin:0;
  }
  .ad-banner{
    display:block; position:relative; width:100%; border:1px solid var(--border); border-radius:8px;
    overflow:hidden; background:var(--surface-2); margin:18px 0 24px;
  }
  .ad-banner span{
    position:absolute; left:10px; top:8px; z-index:2; color:var(--text-tertiary);
    background:rgba(255,255,255,.86); border:1px solid var(--border); border-radius:4px;
    font-size:11px; font-weight:700; padding:2px 6px;
  }
  .ad-banner img{
    display:block; width:100%; height:auto; min-height:90px; object-fit:cover;
  }
  .ad-banner-compact{
    margin:0;
  }
  .article-body{
    color:var(--text-primary); font-size:17px; line-height:1.8;
  }
  .article-body h2{
    font-size:26px; line-height:1.25; margin:28px 0 10px;
  }
  .article-body h3{
    font-size:21px; line-height:1.3; margin:24px 0 8px;
  }
  .article-body p,
  .article-body ul,
  .article-body ol{
    margin-bottom:16px;
  }
  .article-body ul,
  .article-body ol{
    padding-left:22px;
  }
  .article-body a{color:var(--accent); font-weight:700;}
  .article-section{
    margin-top:38px; padding-top:22px; border-top:1px solid var(--border);
  }
  .article-muted{
    color:var(--text-secondary); font-size:14px;
  }
  .comment-list{
    display:grid; gap:12px; margin-top:14px;
  }
  .comment-form{
    display:grid; gap:10px; margin:14px 0 16px; padding:14px;
    border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  }
  .comment-form label span{
    display:block; color:var(--text-secondary); font-size:12.5px; font-weight:900; margin-bottom:7px;
  }
  .comment-form textarea{
    width:100%; min-height:96px; resize:vertical; padding:12px;
    border:1px solid var(--border); border-radius:8px; background:#fff;
    color:var(--text-primary); font:inherit; font-size:14px; line-height:1.55; outline:none;
  }
  .comment-form button{
    min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:0 14px; border-radius:8px; background:var(--accent); color:#fff;
    font-size:14px; font-weight:900; justify-self:start;
  }
  .comment-alert{
    margin-top:12px; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13px; font-weight:800; line-height:1.45;
  }
  .comment-alert.success{
    background:#f0fdf4; border-color:#bbf7d0; color:#15803d;
  }
  .comment-alert.error{
    background:#fff1f2; border-color:#fecdd3; color:#be123c;
  }
  .comment-login{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:14px 0 16px; padding:12px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface-2); color:var(--text-secondary);
    font-size:13.5px; line-height:1.45;
  }
  .comment-login a{
    min-height:36px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px; border-radius:8px; background:var(--accent); color:#fff; font-weight:900;
  }
  .comment-item{
    border:1px solid var(--border); border-radius:8px; padding:14px; background:var(--bg);
  }
  .comment-author{
    font-weight:800; font-size:14px; margin-bottom:2px;
  }
  .comment-date{
    color:var(--text-tertiary); font-size:12.5px; margin-bottom:8px;
  }
  .comment-item p{
    color:var(--text-secondary); font-size:14px; line-height:1.6;
  }

  /* ===================== SAVED ARTICLES ===================== */
  .saved-page-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
    margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--border);
  }
  .saved-page-head h1{
    font-size:34px; line-height:1.15; margin-bottom:8px;
  }
  .saved-page-head p{
    color:var(--text-secondary); font-size:15px; line-height:1.6;
  }
  .collection-tabs{
    display:flex; gap:6px; padding:4px; border-radius:8px; background:var(--surface-2);
    flex-shrink:0;
  }
  .collection-tabs a{
    height:34px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px; border-radius:6px; color:var(--text-secondary);
    font-size:13px; font-weight:800; white-space:nowrap;
  }
  .collection-tabs a.active{
    background:#fff; color:var(--text-primary); box-shadow:0 1px 3px rgba(15,23,42,.08);
  }
  .saved-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .saved-empty{
    min-height:360px; border:1px solid var(--border); border-radius:8px; background:var(--bg);
    display:grid; place-items:center; align-content:center; justify-items:center; gap:12px;
    text-align:center; padding:32px;
  }
  .saved-empty .icon{
    width:40px; height:40px; color:var(--accent);
  }
  .saved-empty strong{
    font-size:20px; line-height:1.3;
  }
  .saved-empty span{
    max-width:360px; color:var(--text-secondary); font-size:14px; line-height:1.6;
  }

  /* ===================== PANDUAN SUPPORT ===================== */
  .panduan-page{
    max-width:1280px;
  }
  .panduan-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
    margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border);
  }
  .panduan-head h1{
    font-size:34px; line-height:1.15; margin-bottom:8px;
  }
  .panduan-head p{
    max-width:680px; color:var(--text-secondary); font-size:15px; line-height:1.65;
  }
  .panduan-count{
    min-height:38px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
    color:var(--text-secondary); font-size:13px; font-weight:800; white-space:nowrap;
  }
  .panduan-layout{
    display:grid; grid-template-columns:360px minmax(0, 1fr); gap:18px; align-items:start;
  }
  .panduan-list{
    grid-column:1;
    grid-row:1;
  }
  .panduan-detail{
    grid-column:2;
    grid-row:1;
  }
  .panduan-list,
  .panduan-detail{
    border:1px solid var(--border); border-radius:8px; background:var(--bg);
  }
  .panduan-list{
    max-height:calc(100vh - var(--topbar-h) - 126px); overflow:auto; padding:8px;
    position:sticky; top:calc(var(--topbar-h) + 18px);
  }
  .panduan-list-item{
    display:grid; grid-template-columns:32px minmax(0, 1fr); gap:10px; align-items:center;
    padding:10px; border-radius:8px;
  }
  .panduan-list-item:hover{
    background:var(--surface-2);
  }
  .panduan-list-item.active{
    background:var(--accent-light); color:var(--accent);
  }
  .panduan-list-item span{
    width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); color:var(--text-secondary); font-size:12px; font-weight:900;
  }
  .panduan-list-item.active span{
    background:#fff; color:var(--accent);
  }
  .panduan-list-item strong{
    font-size:14px; line-height:1.35;
  }
  .panduan-list-empty{
    color:var(--text-secondary); font-size:14px; padding:14px;
  }
  .panduan-detail{
    padding:22px;
  }
  .panduan-mobile-picker{
    display:none;
  }
  .panduan-detail-head{
    position:relative; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);
  }
  .panduan-detail-head h2{
    font-size:28px; line-height:1.18; margin-bottom:8px;
  }
  .panduan-detail-head p{
    color:var(--text-secondary); font-size:15px; line-height:1.65;
  }
  .panduan-progress{
    display:inline-flex; align-items:center; justify-content:center; min-height:32px;
    padding:0 10px; margin-top:12px; border-radius:8px; background:var(--accent-light);
    color:var(--accent); font-size:12.5px; font-weight:900;
  }
  .panduan-steps{
    display:grid; gap:12px; counter-reset:none; list-style:none; padding:0;
  }
  .panduan-steps li{
    display:grid; grid-template-columns:42px minmax(0, 1fr); gap:12px; align-items:start;
    padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  }
  .panduan-steps span{
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff; font-size:14px; font-weight:900;
  }
  .panduan-steps p{
    color:var(--text-primary); font-size:15px; line-height:1.65; padding-top:8px;
  }
  .panduan-step-body{
    min-width:0;
  }
  .panduan-step-image{
    margin:12px 0 0;
  }
  .panduan-step-image img{
    width:100%;
    max-height:440px;
    object-fit:contain;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    display:block;
  }
  .panduan-note{
    display:grid; gap:5px; margin-top:18px; padding:14px; border-radius:8px;
    background:#fffbeb; border:1px solid #fde68a; color:#92400e;
  }
  .panduan-note strong{
    font-size:14px;
  }
  .panduan-note span{
    font-size:13.5px; line-height:1.55;
  }
  .panduan-lead-panel{
    display:grid; grid-template-columns:minmax(0, .85fr) minmax(320px, 1fr); gap:18px;
    margin-top:18px; padding:18px; border:1px solid var(--border); border-radius:8px;
    background:#fff;
  }
  .panduan-lead-copy h3,
  .panduan-lead-form h3{
    font-size:22px; line-height:1.25; margin-bottom:8px;
  }
  .panduan-lead-copy p{
    color:var(--text-secondary); font-size:14.5px; line-height:1.65;
  }
  .panduan-community-actions{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  }
  .panduan-community-btn,
  .panduan-lead-submit{
    min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:0 14px; border-radius:8px; font-size:14px; font-weight:900;
  }
  .panduan-community-btn.whatsapp{
    background:#ecfdf5; color:#047857; border:1px solid #a7f3d0;
  }
  .panduan-community-btn.telegram{
    background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe;
  }
  .panduan-lead-form{
    display:grid; gap:10px; padding:14px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface-2);
  }
  .panduan-lead-form label span{
    display:block; color:var(--text-secondary); font-size:12.5px; font-weight:900; margin-bottom:7px;
  }
  .panduan-lead-form input,
  .panduan-lead-form textarea{
    width:100%; border:1px solid var(--border); border-radius:8px; background:#fff;
    color:var(--text-primary); font:inherit; font-size:14px; outline:none;
  }
  .panduan-lead-form input{
    height:40px; padding:0 12px;
  }
  .panduan-lead-form textarea{
    resize:vertical; min-height:78px; padding:10px 12px; line-height:1.55;
  }
  .panduan-lead-submit{
    width:100%; background:var(--accent); color:#fff;
  }
  .panduan-lead-alert{
    padding:10px 12px; border-radius:8px; border:1px solid var(--border);
    font-size:13.5px; font-weight:800;
  }
  .panduan-lead-alert.success{
    background:#f0fdf4; border-color:#bbf7d0; color:#15803d;
  }
  .panduan-lead-alert.error{
    background:#fff1f2; border-color:#fecdd3; color:#be123c;
  }

  /* ===================== KOMUNITAS ===================== */
  .community-page{
    width:100%;
    max-width:none;
  }
  .community-hero{
    position:relative;
    min-height:auto;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(340px, 420px);
    gap:32px;
    align-items:center;
    padding:36px 40px;
    border:1px solid var(--border);
    border-radius:8px;
    background:
      radial-gradient(circle at 12% 10%, rgba(24,119,242,.20), transparent 30%),
      radial-gradient(circle at 86% 18%, rgba(16,185,129,.16), transparent 28%),
      linear-gradient(135deg,#f8fbff 0%,#ffffff 46%,#eef6ff 100%);
    overflow:hidden;
    box-shadow:0 20px 55px rgba(15,23,42,.08);
  }
  .community-hero::after{
    content:'';
    position:absolute;
    right:-90px;
    top:-100px;
    width:320px;
    height:320px;
    border-radius:50%;
    border:42px solid rgba(24,119,242,.10);
    pointer-events:none;
  }
  .community-hero::before{
    content:'';
    position:absolute;
    left:32px;
    right:32px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(24,119,242,.26), transparent);
    pointer-events:none;
  }
  .community-hero-copy{
    position:relative;
    z-index:1;
    min-width:0;
  }
  .community-hero-copy h1{
    max-width:980px;
    font-size:48px;
    line-height:1.05;
    letter-spacing:0;
    margin-bottom:14px;
  }
  .community-hero-copy p{
    max-width:900px;
    color:var(--text-secondary);
    font-size:17px;
    line-height:1.65;
  }
  .community-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    max-width:760px;
    margin-top:20px;
  }
  .community-stats div{
    padding:12px;
    border:1px solid rgba(24,119,242,.15);
    border-radius:8px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(8px);
  }
  .community-stats strong{
    display:block;
    color:var(--text-primary);
    font-size:22px;
    line-height:1.1;
    margin-bottom:4px;
  }
  .community-stats span{
    display:block;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.35;
    font-weight:800;
  }
  .community-hero-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    max-width:760px;
    margin-top:24px;
  }
  .community-join-card{
    min-height:144px;
    display:grid;
    align-content:start;
    gap:10px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-primary);
    box-shadow:0 10px 28px rgba(24,119,242,.08);
  }
  .community-join-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(15,23,42,.1);
  }
  .community-join-card .community-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
  }
  .community-join-card .icon{
    width:23px;
    height:23px;
  }
  .community-join-card.telegram .community-icon{
    background:#eff6ff;
    color:#1d4ed8;
  }
  .community-join-card.whatsapp .community-icon{
    background:#ecfdf5;
    color:#047857;
  }
  .community-join-card strong{
    font-size:20px;
    line-height:1.2;
  }
  .community-join-card small{
    color:var(--text-secondary);
    font-size:13.5px;
    line-height:1.5;
  }
  .community-empty-link{
    display:grid;
    gap:5px;
    max-width:560px;
    margin-top:20px;
    padding:14px;
    border:1px solid #fde68a;
    border-radius:8px;
    background:#fffbeb;
    color:#92400e;
  }
  .community-empty-link strong{
    font-size:14px;
  }
  .community-empty-link span{
    font-size:13.5px;
    line-height:1.55;
  }
  .community-panel{
    position:relative;
    z-index:1;
    display:grid;
    gap:18px;
    align-self:center;
    align-content:center;
    min-height:360px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 42px rgba(24,119,242,.12);
    backdrop-filter:blur(10px);
  }
  .community-panel span{
    display:block;
    color:var(--accent);
    font-size:12px;
    font-weight:900;
    margin-bottom:8px;
  }
  .community-panel strong{
    display:block;
    font-size:22px;
    line-height:1.25;
  }
  .community-panel ul{
    display:grid;
    gap:12px;
  }
  .community-panel li{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.45;
  }
  .community-panel li .icon{
    width:18px;
    height:18px;
    color:#16a34a;
  }
  .community-secondary{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:900;
  }
  .community-subscribe-form{
    display:grid;
    gap:10px;
    padding-top:18px;
    border-top:1px solid var(--border);
  }
  .community-subscribe-form label span{
    display:block;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:900;
    margin-bottom:6px;
  }
  .community-subscribe-form input{
    width:100%;
    height:40px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-primary);
    font:inherit;
    font-size:14px;
    outline:none;
  }
  .community-subscribe-alert{
    padding:9px 10px;
    border-radius:8px;
    border:1px solid var(--border);
    font-size:12.5px;
    font-weight:800;
    line-height:1.45;
  }
  .community-subscribe-alert.success{
    background:#f0fdf4;
    border-color:#bbf7d0;
    color:#15803d;
  }
  .community-subscribe-alert.error{
    background:#fff1f2;
    border-color:#fecdd3;
    color:#be123c;
  }

  /* ===================== BANTUAN ===================== */
  .help-page{
    max-width:1180px;
  }
  .help-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 380px);
    gap:20px;
    align-items:stretch;
    padding:30px;
    border:1px solid var(--border);
    border-radius:8px;
    background:
      radial-gradient(circle at 12% 0%, rgba(24,119,242,.16), transparent 34%),
      linear-gradient(135deg,#fff,#f4f9ff);
  }
  .help-hero h1{
    max-width:780px;
    font-size:42px;
    line-height:1.08;
    margin:8px 0 12px;
  }
  .help-hero p{
    max-width:700px;
    color:var(--text-secondary);
    font-size:16px;
    line-height:1.65;
  }
  .help-search{
    display:flex;
    max-width:680px;
    margin-top:22px;
    gap:10px;
  }
  .help-search input{
    flex:1;
    min-width:0;
    height:44px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-primary);
    font:inherit;
    outline:none;
  }
  .help-search button,
  .help-secondary{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:900;
  }
  .help-contact-panel{
    display:grid;
    gap:12px;
    align-content:center;
    padding:20px;
    border:1px solid var(--border);
    border-radius:8px;
    background:rgba(255,255,255,.82);
    box-shadow:0 14px 32px rgba(24,119,242,.09);
  }
  .help-contact-panel span{
    color:var(--accent);
    font-size:12px;
    font-weight:900;
  }
  .help-contact-panel strong{
    font-size:22px;
    line-height:1.25;
  }
  .help-contact-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .help-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    margin-top:18px;
  }
  .help-card{
    display:grid;
    gap:10px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
  }
  .help-card .icon{
    width:30px;
    height:30px;
    color:var(--accent);
  }
  .help-card h2{
    font-size:20px;
    line-height:1.25;
  }
  .help-card p{
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.6;
  }
  .help-card a{
    color:var(--accent);
    font-size:14px;
    font-weight:900;
  }
  .help-faq{
    margin-top:18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
  }
  .help-faq details{
    padding:13px 0;
    border-top:1px solid var(--border);
  }
  .help-faq summary{
    cursor:pointer;
    font-weight:900;
  }
  .help-faq p{
    margin-top:8px;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.6;
  }

  /* ===================== NEWSLETTER MODAL ===================== */
  .newsletter-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:130;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.56);
  }
  .newsletter-modal-backdrop.show{
    display:flex;
  }
  .newsletter-modal{
    position:relative;
    width:min(100%, 460px);
    padding:26px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:8px;
    background:
      radial-gradient(circle at 12% 0%, rgba(24,119,242,.14), transparent 34%),
      linear-gradient(180deg,#fff,#f8fbff);
    box-shadow:0 24px 80px rgba(0,0,0,.22);
  }
  .newsletter-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-primary);
  }
  .newsletter-modal-close .icon{
    width:18px;
    height:18px;
  }
  .newsletter-modal-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:8px;
    background:var(--accent-light);
    color:var(--accent);
  }
  .newsletter-modal-icon .icon{
    width:24px;
    height:24px;
  }
  .newsletter-modal h2{
    max-width:360px;
    margin:6px 0 10px;
    font-size:30px;
    line-height:1.12;
  }
  .newsletter-modal p{
    color:var(--text-secondary);
    font-size:14.5px;
    line-height:1.65;
  }
  .newsletter-modal-alert{
    margin-top:14px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:13px;
    font-weight:800;
    line-height:1.45;
  }
  .newsletter-modal-alert.success{
    background:#f0fdf4;
    border-color:#bbf7d0;
    color:#15803d;
  }
  .newsletter-modal-alert.error{
    background:#fff1f2;
    border-color:#fecdd3;
    color:#be123c;
  }
  .newsletter-modal-form{
    display:grid;
    gap:11px;
    margin-top:18px;
  }
  .newsletter-modal-form label span{
    display:block;
    color:var(--text-secondary);
    font-size:12.5px;
    font-weight:900;
    margin-bottom:6px;
  }
  .newsletter-modal-form input{
    width:100%;
    height:42px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-primary);
    font:inherit;
    font-size:14px;
    outline:none;
  }
  .newsletter-modal-form button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:900;
  }

  /* ===================== BOTTOM NAV (mobile) ===================== */
  .bottom-nav{
    display:none; position:fixed; left:0; right:0; bottom:0; height:var(--bottomnav-h);
    background:var(--bg); border-top:1px solid var(--border); z-index:95;
    align-items:stretch; padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--text-secondary); font-size:10.5px; font-weight:500;
  }
  .bottom-nav-item.active{color:var(--text-primary);}
  .bottom-nav-item.active .icon{color:var(--accent);}
  .bottom-nav-item .icon{width:23px; height:23px; color:var(--text-secondary);}
  .bottom-nav-create{
    width:38px; height:26px; border-radius:8px; background:var(--surface-2);
    display:flex; align-items:center; justify-content:center; margin-bottom:2px;
  }
  .bottom-nav-create .icon{width:20px; height:20px; color:var(--text-primary);}

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:1279px){
    .sidebar{transform:translateX(0); width:var(--sidebar-mini-w);}
    .sidebar .nav-item{flex-direction:column; gap:6px; padding:14px 4px; text-align:center;}
    .sidebar .nav-item span{font-size:10px; font-weight:500;}
    .sidebar .nav-group-label, .sidebar-footer{display:none;}
    .sidebar .nav-item .icon{width:22px; height:22px;}
    .content{margin-left:var(--sidebar-mini-w);}
    .article-layout{grid-template-columns:minmax(0, 1fr);}
    .article-aside{position:static; grid-template-columns:repeat(2, minmax(0, 1fr));}
    .ad-banner-sidebar{grid-column:1 / -1;}
  }
  @media (max-width:900px){
    .topbar-center{max-width:400px;}
    .video-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  }
  @media (max-width:767px){
    :root{--topbar-h:52px;}
    .sidebar{
      transform:translateX(-100%); width:78vw; max-width:280px; box-shadow:2px 0 24px rgba(0,0,0,.15);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar.mini, .sidebar{width:78vw; max-width:280px;}
    .sidebar .nav-item{flex-direction:row; gap:20px; padding:10px 12px; text-align:left;}
    .sidebar .nav-item span{font-size:14px;}
    .sidebar .nav-group-label, .sidebar-footer{display:block;}
    .sidebar .nav-item .icon{width:20px; height:20px;}
    .content{margin-left:0; padding:14px 12px 84px;}
    .logo-text{font-size:16px;}
    .topbar{padding:0 10px; gap:8px;}
    .topbar-center{display:none;}
    .search-icon-btn-mobile{display:flex;}
    .mic-btn{display:none;}
    .btn-cta{display:none;}
    .video-grid{grid-template-columns:1fr; gap:22px;}
    .video-info{margin-top:10px;}
    .article-page{max-width:none;}
    .article-layout{display:block;}
    .article-aside{display:grid; grid-template-columns:1fr; margin-top:28px;}
    .article-title{font-size:29px;}
    .article-summary{font-size:16px;}
    .article-body{font-size:16px; line-height:1.75;}
    .article-body h2{font-size:23px;}
    .article-actions{
      display:grid; grid-template-columns:1fr; gap:8px;
    }
    .article-actions form,
    .article-save-btn,
    .article-like-btn,
    .article-save-link{
      width:100%;
    }
    .comment-login{
      display:grid;
      align-items:start;
    }
    .comment-form button,
    .comment-login a{
      width:100%;
    }
    .saved-page-head{
      display:grid; align-items:start; gap:12px; margin-bottom:16px;
    }
    .saved-page-head h1{
      font-size:27px;
    }
    .saved-page-head .profile-secondary{
      width:100%;
    }
    .collection-tabs{
      width:100%; overflow-x:auto;
    }
    .collection-tabs a{
      flex:1;
    }
    .saved-grid{
      grid-template-columns:1fr;
    }
    .saved-empty{
      min-height:300px; padding:24px 18px;
    }
    .panduan-head{
      display:grid; align-items:start; gap:10px; margin-bottom:12px; padding-bottom:12px;
    }
    .panduan-head h1{
      font-size:25px;
      margin-bottom:6px;
    }
    .panduan-head p{
      font-size:13.5px;
      line-height:1.55;
    }
    .panduan-count{
      width:auto;
      justify-self:start;
      min-height:32px;
      font-size:12px;
    }
    .panduan-layout{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .panduan-list{
      order:2;
      position:static;
      max-height:300px;
      padding:6px;
    }
    .panduan-list::before{
      content:'Panduan lainnya';
      display:block;
      padding:8px 8px 10px;
      color:var(--text-secondary);
      font-size:12px;
      font-weight:900;
    }
    .panduan-list-item{
      grid-template-columns:28px minmax(0, 1fr);
      gap:8px;
      padding:9px 8px;
    }
    .panduan-list-item span{
      width:28px;
      height:28px;
      font-size:11px;
    }
    .panduan-list-item strong{
      font-size:13px;
      line-height:1.3;
    }
    .panduan-detail{
      order:1;
      padding:0;
      overflow:hidden;
      border-radius:8px;
      background:#fff;
    }
    .panduan-mobile-picker{
      display:grid;
      gap:7px;
      padding:14px;
      background:var(--surface-2);
      border-bottom:1px solid var(--border);
    }
    .panduan-mobile-picker label{
      color:var(--text-secondary);
      font-size:12px;
      font-weight:900;
    }
    .panduan-mobile-picker select{
      width:100%;
      min-height:42px;
      border:1px solid var(--border);
      border-radius:8px;
      background:#fff;
      color:var(--text-primary);
      font:inherit;
      font-size:14px;
      font-weight:800;
      padding:0 10px;
      outline:none;
    }
    .panduan-detail-head{
      padding:16px 16px 14px;
      margin-bottom:0;
      background:#fff;
    }
    .panduan-detail-head h2{
      font-size:23px;
      line-height:1.18;
      margin-bottom:8px;
    }
    .panduan-detail-head p{
      font-size:14px;
      line-height:1.58;
    }
    .panduan-progress{
      min-height:30px;
      margin-top:10px;
      font-size:12px;
    }
    .panduan-steps{
      gap:0;
      background:#fff;
    }
    .panduan-steps li{
      grid-template-columns:36px minmax(0, 1fr);
      gap:11px;
      padding:16px;
      border:0;
      border-bottom:1px solid var(--border);
      border-radius:0;
      background:#fff;
    }
    .panduan-steps span{
      width:36px;
      height:36px;
      border-radius:10px;
      font-size:13px;
    }
    .panduan-steps p{
      font-size:15px;
      line-height:1.62;
      padding-top:2px;
    }
    .panduan-step-image{
      margin-top:10px;
    }
    .panduan-step-image img{
      max-height:none;
      border-radius:8px;
    }
    .panduan-note{
      margin:14px;
      padding:12px;
      background:#f8fafc;
      border-color:var(--border);
      color:var(--text-secondary);
    }
    .panduan-note strong{
      color:var(--text-primary);
    }
    .panduan-lead-panel{
      grid-template-columns:1fr;
      margin:12px 0 0;
      padding:12px;
    }
    .panduan-lead-copy h3,
    .panduan-lead-form h3{
      font-size:19px;
    }
    .panduan-community-actions{
      display:grid;
      grid-template-columns:1fr;
    }
    .community-page{
      max-width:none;
    }
    .community-hero{
      min-height:0;
      grid-template-columns:1fr;
      gap:14px;
      padding:16px;
      margin:0 -2px;
      border-left:none;
      border-right:none;
      border-radius:0;
    }
    .community-hero::after{
      width:210px;
      height:210px;
      right:-96px;
      top:-76px;
      border-width:32px;
    }
    .community-hero::before{
      left:16px;
      right:16px;
    }
    .community-hero-copy h1{
      font-size:32px;
      line-height:1.1;
    }
    .community-hero-copy p{
      font-size:15px;
      line-height:1.6;
    }
    .community-stats{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:8px;
      max-width:none;
      margin-top:16px;
    }
    .community-stats div{
      padding:10px 8px;
    }
    .community-stats strong{
      font-size:18px;
    }
    .community-stats span{
      font-size:11px;
    }
    .community-hero-actions{
      grid-template-columns:1fr;
      max-width:none;
      margin-top:16px;
    }
    .community-join-card{
      min-height:122px;
      padding:14px;
    }
    .community-panel{
      min-height:0;
      padding:16px;
      box-shadow:0 12px 28px rgba(24,119,242,.09);
    }
    .community-panel strong{
      font-size:19px;
    }
    .help-page{
      max-width:none;
    }
    .help-hero{
      grid-template-columns:1fr;
      padding:16px;
      gap:14px;
      border-left:none;
      border-right:none;
      border-radius:0;
    }
    .help-hero h1{
      font-size:30px;
    }
    .help-search{
      display:grid;
    }
    .help-grid{
      grid-template-columns:1fr;
      gap:12px;
    }
    .newsletter-modal-backdrop{
      align-items:flex-end;
      padding:12px;
    }
    .newsletter-modal{
      width:100%;
      padding:20px;
    }
    .newsletter-modal h2{
      font-size:25px;
    }
    .ad-banner img{min-height:78px;}
    .write-page{padding:calc(var(--topbar-h) + 14px) 12px 82px;}
    .write-shell{padding:18px;}
    .write-form{grid-template-columns:1fr;}
    .write-head h1{font-size:26px;}
    .short-thumb{width:130px; height:230px;}
    .short-card{width:130px;}
    .bottom-nav{display:flex;}
    body{padding-bottom:0;}
  }

  /* mobile search overlay */
  .mobile-search-overlay{
    display:none; position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
    background:var(--bg); border-bottom:1px solid var(--border); z-index:110;
    padding:6px 10px; align-items:center; gap:10px;
  }
  .mobile-search-overlay.show{display:flex;}
  .mobile-search-overlay .search-form{height:40px;}
  .mobile-search-overlay .search-input-wrap{
    border-radius:var(--radius-full) 0 0 var(--radius-full);
    border-right:none;
  }
  .mobile-search-overlay .search-submit{
    width:52px;
    border-left:1px solid var(--border);
    border-radius:0 var(--radius-full) var(--radius-full) 0;
  }
  .mobile-search-overlay input{padding-left:4px;}

  /* ===================== AUTH ===================== */
  .auth-body{
    min-height:100vh; background:var(--surface-2);
  }
  .auth-page{
    min-height:100vh; display:grid; place-items:center; padding:24px;
  }
  .auth-panel{
    width:100%; max-width:420px; background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:28px; box-shadow:0 16px 40px rgba(15,15,15,.08);
  }
  .auth-logo{
    display:inline-flex; margin-bottom:28px;
  }
  .auth-panel h1{
    font-size:30px; line-height:1.2; margin-bottom:8px;
  }
  .auth-subtitle{
    color:var(--text-secondary); font-size:15px; line-height:1.6; margin-bottom:20px;
  }
  .auth-alert{
    border:1px solid #fecdd3; background:#fff1f2; color:#be123c;
    border-radius:8px; padding:11px 12px; font-size:14px; margin-bottom:16px;
  }
  .auth-form{
    display:grid; gap:14px;
  }
  .auth-form label{
    display:grid; gap:7px;
  }
  .auth-form label span{
    color:var(--text-secondary); font-size:13px; font-weight:700;
  }
  .auth-form input{
    width:100%; height:44px; border:1px solid var(--border); border-radius:8px;
    padding:0 12px; font-size:15px; color:var(--text-primary); background:var(--bg);
  }
  .password-field{display:grid; gap:7px;}
  .password-input-wrap{position:relative;}
  .password-input-wrap input{padding-right:42px;}
  .password-toggle{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); background:transparent; z-index:2; cursor:pointer;
  }
  .password-toggle:hover{background:var(--surface-hover);}
  .password-toggle svg{
    position:absolute; width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .password-toggle .eye-off{display:none;}
  .password-toggle.is-visible .eye-open{display:none;}
  .password-toggle.is-visible .eye-off{display:block;}
  .auth-form input:focus{
    border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,119,242,.12); outline:none;
  }
  .auth-submit{
    height:44px; border-radius:8px; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:15px; font-weight:800; margin-top:4px;
  }
  .auth-submit:hover{background:var(--accent-dark);}
  .auth-demo{
    margin-top:18px; color:var(--text-secondary); font-size:13px; line-height:1.6;
    background:var(--surface-2); border-radius:8px; padding:11px 12px;
  }
  .auth-demo a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin-top:6px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid rgba(24,119,242,.22);
    background:#eaf2ff;
    color:var(--accent);
    font-weight:900;
    text-decoration:none;
    box-shadow:0 1px 3px rgba(24,119,242,.08);
  }
  .auth-demo a:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }

  /* ===================== TRAINING ===================== */
  .training-page{
    padding:32px 32px 96px;
    background:#f7f8fb;
  }
  .training-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 180px;
    gap:18px;
    align-items:end;
    max-width:1180px;
    margin:0 auto 18px;
    padding:30px;
    border:1px solid var(--border);
    border-radius:12px;
    background:linear-gradient(135deg,#ffffff 0%,#edf5ff 58%,#e7fff6 100%);
  }
  .trader-test-hero{
    background:linear-gradient(135deg,#ffffff 0%,#eef7ff 45%,#fff7e8 100%);
  }
  .training-hero h1{
    margin:8px 0 10px;
    font-size:42px;
    line-height:1.08;
    letter-spacing:0;
  }
  .training-hero p{
    max-width:680px;
    color:var(--text-secondary);
    font-size:17px;
    line-height:1.65;
  }
  .training-hero-card{
    min-height:126px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:18px;
    border:1px solid rgba(27,113,238,.2);
    border-radius:10px;
    background:rgba(255,255,255,.76);
    box-shadow:0 18px 40px rgba(30,64,175,.08);
  }
  .training-hero-card strong{
    font-size:42px;
    line-height:1;
  }
  .training-hero-card span{
    margin-top:8px;
    color:var(--text-secondary);
    font-weight:800;
  }
  .training-alert{
    max-width:1180px;
    margin:0 auto 18px;
    padding:14px 16px;
    border-radius:10px;
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    color:#166534;
    font-weight:800;
  }
  .training-alert.error{
    border-color:#fecaca;
    background:#fff1f2;
    color:#be123c;
  }
  .training-shell{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:300px minmax(0, 1fr);
    gap:18px;
    align-items:start;
  }
  .training-list,
  .training-form-card,
  .training-empty{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 32px rgba(15,23,42,.05);
  }
  .training-list{
    padding:16px;
    position:sticky;
    top:94px;
  }
  .training-list h2{
    margin:0 0 12px;
    font-size:18px;
  }
  .training-list-item{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:13px;
    border-radius:10px;
    color:var(--text-primary);
    border:1px solid transparent;
  }
  .training-list-item + .training-list-item{margin-top:8px;}
  .training-list-item.active{
    border-color:rgba(27,113,238,.2);
    background:#eaf2ff;
    color:var(--accent);
  }
  .training-list-item span{
    color:var(--text-secondary);
    font-size:13px;
    font-weight:800;
  }
  .training-form-card{
    padding:24px;
  }
  .training-form-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border);
    margin-bottom:18px;
  }
  .training-form-head h2{
    margin:6px 0 8px;
    font-size:28px;
  }
  .training-form-head p{
    color:var(--text-secondary);
    line-height:1.6;
  }
  .training-form{
    display:grid;
    gap:16px;
  }
  .training-question{
    display:grid;
    gap:10px;
  }
  .training-question span{
    font-weight:900;
    line-height:1.45;
  }
  .training-question textarea{
    width:100%;
    min-height:150px;
    resize:vertical;
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px;
    font:inherit;
    line-height:1.55;
    outline:none;
    background:#fbfcfe;
  }
  .training-question textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(27,113,238,.12);
    background:#fff;
  }
  .training-question small{
    color:var(--text-secondary);
    font-size:13px;
  }
  .training-submit{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font-weight:900;
    font-size:16px;
    cursor:pointer;
  }
  .training-submit:hover{background:var(--accent-dark);}
  .training-empty{
    max-width:720px;
    margin:0 auto;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    text-align:center;
    color:var(--text-secondary);
  }
  .training-empty .icon{
    width:42px;
    height:42px;
    color:var(--accent);
  }
  .training-empty strong{
    color:var(--text-primary);
    font-size:22px;
  }

  /* ===================== NOTIFICATIONS ===================== */
  .notifications-page{
    padding:32px 32px 96px;
    background:#f7f8fb;
  }
  .notifications-shell{
    max-width:980px;
    margin:0 auto;
  }
  .notifications-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-end;
    margin-bottom:18px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 32px rgba(15,23,42,.05);
  }
  .notifications-head h1{
    margin:6px 0 8px;
    font-size:38px;
    line-height:1.1;
  }
  .notifications-head p{
    color:var(--text-secondary);
    line-height:1.6;
  }
  .notifications-primary{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:0;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
  }
  .notifications-list{
    display:grid;
    gap:10px;
  }
  .notification-item{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr) auto;
    gap:14px;
    align-items:start;
    padding:16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 10px 26px rgba(15,23,42,.04);
  }
  .notification-item.unread{
    border-color:#bfdbfe;
    background:#f8fbff;
  }
  .notification-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eaf2ff;
    color:var(--accent);
  }
  .notification-content{
    min-width:0;
  }
  .notification-content strong{
    display:block;
    font-size:16px;
    line-height:1.35;
  }
  .notification-content p{
    margin-top:6px;
    color:var(--text-secondary);
    line-height:1.55;
  }
  .notification-content span{
    display:block;
    margin-top:8px;
    color:var(--text-tertiary);
    font-size:13px;
    font-weight:800;
  }
  .notification-actions{
    display:flex;
    gap:8px;
  }
  .notifications-action{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text-secondary);
    cursor:pointer;
  }
  .notifications-action:hover{
    color:var(--accent);
    border-color:#bfdbfe;
    background:#eff6ff;
  }
  .notifications-action.danger:hover{
    color:var(--danger);
    border-color:#fecdd3;
    background:#fff1f2;
  }
  .notifications-empty{
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text-secondary);
    text-align:center;
  }
  .notifications-empty .icon{
    width:44px;
    height:44px;
    color:var(--accent);
  }
  .notifications-empty strong{
    color:var(--text-primary);
    font-size:22px;
  }

  /* ===================== WRITE ARTICLE ===================== */
  .write-page{
    min-height:100vh; padding:calc(var(--topbar-h) + 28px) 24px 48px;
    background:var(--surface-2);
  }
  .write-shell{
    width:100%; max-width:980px; margin:0 auto; background:var(--bg);
    border:1px solid var(--border); border-radius:8px; padding:26px;
  }
  .write-head{
    display:flex; justify-content:space-between; gap:18px; margin-bottom:22px;
  }
  .write-head h1{
    font-size:32px; line-height:1.2; margin-bottom:8px;
  }
  .write-head p{
    color:var(--text-secondary); font-size:15px; line-height:1.6;
  }
  .write-success{
    border:1px solid #bbf7d0; background:#f0fdf4; color:#15803d;
    border-radius:8px; padding:11px 12px; font-size:14px; margin-bottom:16px;
  }
  .write-form{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
  }
  .write-field{
    display:grid; gap:7px;
  }
  .write-field-full{
    grid-column:1 / -1;
  }
  .write-field span{
    color:var(--text-secondary); font-size:13px; font-weight:800;
  }
  .write-field input,
  .write-field select,
  .write-field textarea{
    width:100%; border:1px solid var(--border); border-radius:8px;
    padding:11px 12px; font-size:15px; font-family:inherit; color:var(--text-primary);
    background:var(--bg);
  }
  .write-field input,
  .write-field select{
    height:44px;
  }
  .write-field textarea{
    resize:vertical; line-height:1.65;
  }
  .write-field input:focus,
  .write-field select:focus,
  .write-field textarea:focus{
    border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,119,242,.12); outline:none;
  }
  .write-actions{
    display:flex; justify-content:flex-end;
  }
  .write-actions .auth-submit{
    min-width:180px; padding:0 18px;
  }

  /* ===================== MANAGE POSTING ===================== */
  .manage-list{
    display:grid; gap:14px;
  }
  .manage-item{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    border:1px solid var(--border); border-radius:12px; padding:18px 16px;
    background:var(--bg); box-shadow:0 8px 20px rgba(15,23,42,.02);
  }
  .manage-main{
    display:grid; gap:8px; min-width:0; flex:1;
  }
  .manage-title{
    font-size:18px; line-height:1.4; font-weight:800; color:var(--text-primary);
    word-break:break-word;
  }
  .manage-meta{
    display:flex; flex-wrap:wrap; gap:8px 12px; font-size:12.5px; color:var(--text-secondary);
  }
  .manage-meta.secondary{color:var(--text-tertiary);}
  .manage-meta span{
    display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
    background:var(--surface-2); border:1px solid var(--border);
  }
  .manage-actions{
    display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
    flex-shrink:0;
  }
  .manage-actions form{
    margin:0;
  }
  .manage-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:38px; padding:0 14px; border-radius:8px; font-size:13px; font-weight:800;
    color:#fff; background:var(--accent); border:1px solid transparent; transition:all .2s ease;
  }
  .manage-btn:hover{filter:brightness(.96);}
  .manage-btn.secondary{
    color:var(--text-primary); background:var(--surface-2); border-color:var(--border);
  }
  .manage-btn.danger{
    background:var(--danger); color:#fff; border-color:transparent;
  }
  .auth-alert{
    border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary);
    border-radius:10px; padding:14px 16px; font-size:14px;
  }

  /* ===================== PROFILE ===================== */
  .profile-page{
    min-height:100vh; padding:calc(var(--topbar-h) + 28px) 24px 48px;
    background:var(--surface-2);
  }
  .profile-shell{
    width:100%; max-width:920px; margin:0 auto; background:var(--bg);
    border:1px solid var(--border); border-radius:8px; padding:26px;
  }
  .profile-hero{
    display:flex; align-items:center; gap:18px; padding-bottom:22px;
    border-bottom:1px solid var(--border); margin-bottom:22px;
  }
  .profile-avatar{
    width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#0b3d91);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:30px; font-weight:900; flex-shrink:0;
  }
  .profile-hero h1{
    font-size:32px; line-height:1.2; margin-bottom:4px;
  }
  .profile-hero p{
    color:var(--text-secondary); font-size:15px;
  }
  .profile-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
  }
  .profile-panel{
    border:1px solid var(--border); border-radius:8px; padding:18px; background:var(--bg);
  }
  .profile-panel h2{
    font-size:18px; line-height:1.3; margin-bottom:14px;
  }
  .profile-list{
    display:grid; gap:12px;
  }
  .profile-list div{
    display:grid; gap:3px;
  }
  .profile-list dt{
    color:var(--text-tertiary); font-size:12.5px; font-weight:800;
  }
  .profile-list dd{
    color:var(--text-primary); font-size:14px; font-weight:600;
  }
  .profile-stats{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  }
  .profile-stats div{
    background:var(--surface-2); border-radius:8px; padding:14px;
  }
  .profile-stats strong{
    display:block; font-size:22px; line-height:1.2; margin-bottom:4px;
  }
  .profile-stats span{
    color:var(--text-secondary); font-size:13px; font-weight:700;
  }
  .profile-bio{
    margin-top:14px; color:var(--text-secondary); font-size:14px; line-height:1.6;
  }
  .profile-actions{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    border-top:1px solid var(--border); margin-top:22px; padding-top:18px;
  }
  .profile-secondary,
  .profile-logout{
    height:42px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:0 14px; font-size:14px; font-weight:800;
  }
  .profile-secondary{
    background:var(--surface-2); color:var(--text-primary);
  }
  .profile-secondary:hover{background:var(--surface-hover);}
  .profile-logout{
    background:var(--danger); color:#fff;
  }
  .profile-logout:hover{filter:brightness(.94);}

  @media (max-width:767px){
    .auth-body{
      background:#fff;
    }
    .auth-page{
      display:block;
      min-height:100vh;
      padding:0;
      background:#fff;
    }
    .auth-panel{
      max-width:none;
      min-height:100vh;
      border:0;
      border-radius:0;
      box-shadow:none;
      padding:28px 20px 34px;
    }
    .auth-logo{
      margin-bottom:30px;
    }
    .auth-panel h1{
      font-size:32px;
    }
    .auth-subtitle{
      font-size:16px;
      margin-bottom:24px;
    }
    .auth-form{
      gap:16px;
    }
    .auth-form input{
      height:48px;
      font-size:16px;
    }
    .auth-submit{
      height:48px;
      font-size:16px;
      margin-top:8px;
    }
    .auth-demo{
      margin-top:20px;
      padding:14px;
      text-align:center;
      background:#f8fafc;
    }
    .auth-demo a{
      display:flex;
      width:100%;
      min-height:42px;
      margin-top:10px;
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
      font-size:15px;
    }
    .training-page{
      padding:14px 12px 86px;
    }
    .training-hero{
      grid-template-columns:1fr;
      padding:18px;
      margin-bottom:12px;
    }
    .training-hero h1{
      font-size:30px;
    }
    .training-hero p{
      font-size:15px;
    }
    .training-hero-card{
      min-height:auto;
      padding:14px;
    }
    .training-hero-card strong{
      font-size:30px;
    }
    .training-shell{
      grid-template-columns:1fr;
      gap:12px;
    }
    .training-list{
      position:static;
      display:flex;
      gap:8px;
      overflow-x:auto;
      padding:12px;
    }
    .training-list h2{
      display:none;
    }
    .training-list-item{
      min-width:220px;
    }
    .training-form-card{
      padding:16px;
    }
    .training-form-head{
      display:block;
    }
    .training-form-head h2{
      font-size:24px;
    }
    .training-question textarea{
      min-height:140px;
    }
    .notifications-page{
      padding:14px 12px 86px;
    }
    .notifications-head{
      display:block;
      padding:18px;
    }
    .notifications-head h1{
      font-size:30px;
    }
    .notifications-head form{
      margin-top:14px;
    }
    .notifications-primary{
      width:100%;
    }
    .notification-item{
      grid-template-columns:40px minmax(0, 1fr);
      gap:12px;
      padding:14px;
    }
    .notification-icon{
      width:40px;
      height:40px;
    }
    .notification-actions{
      grid-column:1 / -1;
      justify-content:flex-end;
    }
    .write-page{padding:calc(var(--topbar-h) + 14px) 12px 82px;}
    .write-shell{padding:18px;}
    .write-form{grid-template-columns:1fr;}
    .write-head h1{font-size:26px;}
    .profile-page{padding:calc(var(--topbar-h) + 14px) 12px 82px;}
    .profile-shell{padding:18px;}
    .profile-hero{align-items:flex-start;}
    .profile-grid{grid-template-columns:1fr;}
    .profile-actions{align-items:stretch; flex-direction:column;}
    .profile-secondary,
    .profile-actions form,
    .profile-logout{width:100%;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  /* ===================== PROFILE DASHBOARD ===================== */
  .dashboard-profile-page{
    background:#f6f7f9;
  }
  .dashboard-shell{
    max-width:1220px;
    padding:0;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(15,23,42,.06);
  }
  .dashboard-channel{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    gap:18px;
    align-items:center;
    padding:26px;
    background:linear-gradient(180deg,#fff,#fafbfc);
    border-bottom:1px solid var(--border);
  }
  .dashboard-avatar{
    width:84px;
    height:84px;
    font-size:34px;
  }
  .dashboard-channel-main{
    min-width:0;
  }
  .dashboard-channel-main h1{
    font-size:34px;
    line-height:1.15;
    margin-bottom:6px;
  }
  .dashboard-channel-main p,
  .dashboard-muted{
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.6;
  }
  .dashboard-bio{
    max-width:760px;
    margin-top:12px;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.65;
  }
  .dashboard-channel-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .dashboard-primary{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
  }
  .dashboard-primary:hover{background:var(--accent-dark);}
  .dashboard-icon-danger,
  .dashboard-action{
    width:40px;
    height:40px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-2);
    color:var(--text-primary);
    border:1px solid var(--border);
  }
  .dashboard-icon-danger:hover,
  .dashboard-action:hover{background:var(--surface-hover);}
  .dashboard-icon-danger,
  .dashboard-action.danger{color:var(--danger);}
  .dashboard-tabs{
    display:flex;
    gap:4px;
    padding:0 22px;
    border-bottom:1px solid var(--border);
    background:#fff;
    overflow-x:auto;
  }
  .dashboard-tab{
    position:relative;
    height:52px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    color:var(--text-secondary);
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
  }
  .dashboard-tab.active{
    color:var(--text-primary);
  }
  .dashboard-tab.active::after{
    content:'';
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:3px;
    border-radius:999px 999px 0 0;
    background:var(--text-primary);
  }
  .dashboard-tab .icon{
    width:18px;
    height:18px;
  }
  .dashboard-metrics{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:12px;
    padding:22px 26px 10px;
    background:#fff;
  }
  .dashboard-metric{
    min-height:94px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:14px;
    background:#fff;
  }
  .dashboard-metric span{
    display:block;
    color:var(--text-secondary);
    font-size:12.5px;
    font-weight:800;
    margin-bottom:10px;
  }
  .dashboard-metric strong{
    display:block;
    font-size:28px;
    line-height:1.1;
    letter-spacing:0;
  }
  .dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:18px;
    padding:16px 26px 26px;
    background:#fff;
  }
  .dashboard-panel{
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    padding:18px;
  }
  .dashboard-panel-wide{
    min-width:0;
    padding:0;
    overflow:hidden;
  }
  .dashboard-panel h2,
  .dashboard-panel-head h2{
    font-size:18px;
    line-height:1.25;
    margin-bottom:5px;
  }
  .dashboard-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px;
    border-bottom:1px solid var(--border);
  }
  .dashboard-panel-head p{
    color:var(--text-secondary);
    font-size:13.5px;
    line-height:1.55;
  }
  .dashboard-filter{
    display:flex;
    gap:6px;
    padding:4px;
    border-radius:8px;
    background:var(--surface-2);
    flex-shrink:0;
  }
  .dashboard-filter-btn{
    height:32px;
    padding:0 10px;
    border-radius:6px;
    color:var(--text-secondary);
    font-size:12.5px;
    font-weight:800;
  }
  .dashboard-filter-btn.active{
    background:#fff;
    color:var(--text-primary);
    box-shadow:0 1px 3px rgba(15,23,42,.08);
  }
  .dashboard-content-list{
    display:grid;
  }
  .dashboard-content-item{
    display:grid;
    grid-template-columns:128px minmax(0, 1fr) auto auto;
    gap:14px;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
  }
  .dashboard-content-item:last-child{border-bottom:none;}
  .dashboard-content-item:hover{background:#fafafa;}
  .dashboard-thumb{
    position:relative;
    display:block;
    width:128px;
    aspect-ratio:16/9;
    border-radius:8px;
    overflow:hidden;
    background:var(--surface-2);
  }
  .dashboard-thumb img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .dashboard-thumb span{
    position:absolute;
    right:6px;
    bottom:6px;
    z-index:2;
    padding:3px 7px;
    border-radius:4px;
    background:rgba(0,0,0,.78);
    color:#fff;
    font-size:11px;
    font-weight:800;
  }
  .dashboard-content-main{
    min-width:0;
    display:grid;
    gap:7px;
  }
  .dashboard-content-title{
    font-size:15px;
    line-height:1.35;
    font-weight:900;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .dashboard-content-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px 10px;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.4;
  }
  .dashboard-content-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .dashboard-content-meta.muted{
    color:var(--text-tertiary);
  }
  .dashboard-status{
    justify-self:start;
    min-width:82px;
    padding:6px 9px;
    border-radius:999px;
    text-align:center;
    font-size:12px;
    font-weight:900;
    border:1px solid var(--border);
    background:var(--surface-2);
  }
  .status-published{
    color:#15803d;
    background:#f0fdf4;
    border-color:#bbf7d0;
  }
  .status-draft{
    color:#92400e;
    background:#fffbeb;
    border-color:#fde68a;
  }
  .status-archived{
    color:var(--text-secondary);
    background:var(--surface-2);
  }
  .dashboard-row-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
  }
  .dashboard-row-actions form{margin:0;}
  .dashboard-row-actions .dashboard-action{
    width:36px;
    height:36px;
  }
  .dashboard-row-actions .icon{
    width:17px;
    height:17px;
  }
  .dashboard-side{
    display:grid;
    gap:14px;
    align-content:start;
  }
  .dashboard-top-post{
    display:grid;
    gap:8px;
  }
  .dashboard-top-post strong{
    font-size:15px;
    line-height:1.4;
  }
  .dashboard-top-post span{
    color:var(--text-secondary);
    font-size:13px;
  }
  .dashboard-category-list{
    display:grid;
    gap:12px;
  }
  .dashboard-category-list div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--text-secondary);
    font-size:13.5px;
    font-weight:700;
  }
  .dashboard-category-list span{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .dashboard-category-list strong{
    color:var(--text-primary);
    font-size:14px;
  }
  .dashboard-empty{
    display:grid;
    justify-items:center;
    gap:10px;
    padding:42px 18px;
    text-align:center;
    color:var(--text-secondary);
  }
  .dashboard-empty.compact{
    padding:20px 8px;
  }
  .dashboard-empty .icon{
    width:34px;
    height:34px;
    color:var(--accent);
  }
  .dashboard-empty strong{
    color:var(--text-primary);
    font-size:17px;
  }
  .dashboard-empty span{
    max-width:340px;
    font-size:14px;
    line-height:1.55;
  }
  .dashboard-empty-filter{
    padding:26px 18px;
    color:var(--text-secondary);
    font-size:14px;
    text-align:center;
  }
  .member-dashboard-grid{
    padding:26px;
  }

  @media (max-width:1100px){
    .dashboard-metrics{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .dashboard-grid{
      grid-template-columns:1fr;
    }
    .dashboard-side{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width:767px){
    .dashboard-shell{
      border-radius:8px;
    }
    .dashboard-channel{
      grid-template-columns:auto minmax(0, 1fr);
      padding:18px;
    }
    .dashboard-avatar{
      width:64px;
      height:64px;
      font-size:26px;
    }
    .dashboard-channel-main h1{
      font-size:24px;
    }
    .dashboard-channel-actions{
      grid-column:1 / -1;
      justify-content:space-between;
    }
    .dashboard-tabs{
      padding:0 12px;
    }
    .dashboard-metrics{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      padding:16px 18px 8px;
    }
    .dashboard-metric{
      min-height:82px;
      padding:12px;
    }
    .dashboard-metric strong{
      font-size:23px;
    }
    .dashboard-grid{
      padding:12px 18px 18px;
    }
    .dashboard-panel-head{
      align-items:stretch;
      flex-direction:column;
    }
    .dashboard-filter{
      overflow-x:auto;
    }
    .dashboard-content-item{
      grid-template-columns:104px minmax(0, 1fr);
      gap:12px;
      padding:14px;
    }
    .dashboard-thumb{
      width:104px;
    }
    .dashboard-status{
      grid-column:1 / 2;
      min-width:0;
      width:104px;
    }
    .dashboard-row-actions{
      grid-column:2 / 3;
      justify-content:flex-start;
    }
    .dashboard-side{
      grid-template-columns:1fr;
    }
    .member-dashboard-grid{
      padding:18px;
    }
  }