/* PaskaTok v0.3.4 — MICROHIERONTA + ÄÄNISUOLISTO */

/* tiny global harmonisation */
.sound-on .icon-circle{
  background:radial-gradient(circle at 50% 45%,rgba(244,198,91,.22),rgba(67,43,27,.56))!important;
  border-color:rgba(244,198,91,.36)!important;
  box-shadow:0 0 0 1px rgba(244,198,91,.08),0 8px 18px rgba(0,0,0,.14)!important;
}

@media(max-width:520px){
  /* Header: smaller, calmer, more deliberate */
  .status-strip{
    grid-template-columns:34px 1fr auto!important;
    min-height:52px!important;
    padding:max(11px,env(safe-area-inset-top)) 14px 8px!important;
    gap:9px!important;
    background:linear-gradient(180deg,rgba(255,247,234,.045),rgba(255,247,234,.012))!important;
    border-bottom:1px solid rgba(244,198,91,.13)!important;
    backdrop-filter:blur(14px);
  }
  .status-brand-icon{width:27px!important;height:27px!important;}
  #screen-name{font-size:10px!important;letter-spacing:.15em!important;}
  .status-utils{gap:7px!important;}
  .header-search-btn{
    width:32px!important;height:32px!important;
    border-radius:12px!important;
    border-color:rgba(244,198,91,.12)!important;
    background:rgba(255,247,234,.035)!important;
  }
  .header-search-btn img{width:25px!important;height:25px!important;}
  .status-utils #clock{font-size:8.5px!important;}

  /* Feed: one visual hierarchy instead of competing panels */
  .feed-top{
    width:max-content!important;
    margin:8px auto 0!important;
    padding:4px!important;
    gap:0!important;
    border-radius:24px!important;
    border:1px solid rgba(244,198,91,.10)!important;
    background:rgba(47,30,18,.48)!important;
    backdrop-filter:blur(14px);
    box-shadow:0 9px 24px rgba(19,10,5,.10);
  }
  .feed-top span{
    min-width:126px!important;
    padding:9px 14px!important;
    border:0!important;
    border-radius:20px!important;
    text-align:center;
    font-size:10.4px!important;
  }
  .feed-top span.active{
    background:linear-gradient(180deg,rgba(244,198,91,.15),rgba(255,247,234,.045))!important;
    box-shadow:inset 0 0 0 1px rgba(244,198,91,.18);
  }
  .live-pill{
    top:72px!important;left:14px!important;
    font-size:8.1px!important;
    border-radius:17px!important;
    padding:4px 9px 4px 4px!important;
  }
  .live-pill img{width:21px!important;height:21px!important;}
  .feed-more{top:74px!important;right:12px!important;width:30px!important;height:30px!important;}

  .feed-side{
    right:8px!important;
    bottom:calc(126px + env(safe-area-inset-bottom))!important;
    gap:9px!important;
  }
  .feed-side .icon-circle{width:38px!important;height:38px!important;font-size:16px!important;}
  .icon-btn .lbl{font-size:7.2px!important;}
  .feed-count{font-size:7.1px!important;}
  .feed-dots{right:1px!important;gap:4px!important;}
  .feed-dots i{height:13px!important;}
  .feed-dots i.active{height:18px!important;}

  .feed-bottom{
    left:12px!important;right:68px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    padding:13px 13px 12px!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(48,30,18,.70),rgba(33,20,12,.84))!important;
    border:1px solid rgba(255,247,234,.075)!important;
    backdrop-filter:blur(16px);
    box-shadow:0 14px 30px rgba(13,7,4,.18),inset 0 1px rgba(255,255,255,.025);
  }
  .feed-bottom .uname{font-size:14.8px!important;}
  .feed-bottom .cap{font-size:12px!important;line-height:1.45!important;margin:4px 0 8px!important;}
  .sound-row,.tags{font-size:8.8px!important;}
  .tags{margin-top:5px;line-height:1.4;}

  /* Bottom nav: luxurious but less bulky */
  .bottom-nav{
    min-height:76px!important;
    padding:7px 9px max(9px,env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(91,58,35,.97),rgba(65,41,24,.99))!important;
    box-shadow:0 -10px 24px rgba(20,11,6,.15);
  }
  .nav-btn{gap:3px!important;}
  .nav-btn .ni.ni-image{width:41px!important;height:39px!important;border-radius:14px!important;}
  .nav-btn .ni.ni-image img{width:34px!important;height:34px!important;}
  .nav-btn .nav-label{font-size:6.8px!important;max-width:62px!important;}
  .nav-btn.create .ni.ni-image{width:54px!important;height:54px!important;border-radius:18px!important;transform:translateY(-8px)!important;}
  .nav-btn.create .ni.ni-image img{width:51px!important;height:51px!important;}
  .nav-btn.create .nav-label{margin-top:-6px!important;}

  /* Camera: keep every control inside one calm instrument layout */
  #view-camera .camera-sourcebar{
    left:12px!important;right:12px!important;top:10px!important;
    gap:7px!important;
  }
  #view-camera .camera-sourcebar button{
    padding:8px 10px!important;
    border-radius:15px!important;
    font-size:7.8px!important;
    background:rgba(43,29,18,.64)!important;
    border:1px solid rgba(255,247,234,.11)!important;
    box-shadow:0 7px 16px rgba(19,10,5,.11);
  }
  #view-camera .camera-status{
    top:60px!important;left:15px!important;
    padding:7px 11px!important;
    border-radius:13px!important;
    font-size:7.5px!important;
    letter-spacing:.10em!important;
  }
  #view-camera .cam-filters{
    top:94px!important;right:7px!important;
    gap:5px!important;padding:6px 5px!important;
    border-radius:19px!important;
    background:rgba(40,25,15,.52)!important;
  }
  #view-camera .flip-btn,#view-camera .timer-chip{width:39px!important;height:39px!important;border-radius:13px!important;}
  #view-camera .filter-chip{width:53px!important;padding:4px 1px!important;border-radius:13px!important;}
  #view-camera .filter-chip .sw{width:36px!important;height:36px!important;border-radius:11px!important;}
  #view-camera .filter-chip span{width:52px!important;font-size:6.2px!important;}
  #view-camera .cam-bottom{bottom:14px!important;gap:9px!important;}
  #view-camera .duration-row{
    width:calc(100% - 48px)!important;max-width:292px!important;
    padding:8px 11px!important;border-radius:17px!important;gap:5px!important;
  }
  #view-camera .duration-row span{font-size:7.7px!important;}
  #view-camera .record-btn{width:62px!important;height:62px!important;}
  #view-camera .record-btn .inner{width:47px!important;height:47px!important;}
  #view-camera .go-label{font-size:8px!important;}

  /* Search */
  #view-search .search-bar{margin:13px 13px 5px!important;padding:10px 12px!important;border-radius:16px!important;}
  .search-field-icon{width:31px!important;height:31px!important;}
  .sec-label{padding:14px 14px 7px!important;font-size:9px!important;}
  .sec-label-icon img{width:38px!important;height:38px!important;}
  .chip-row{padding:0 14px!important;gap:7px!important;}
  .chip{padding:6px 10px!important;font-size:9.6px!important;}
  .sound-list{padding:2px 14px!important;}
  .sound-item{padding:9px 0!important;}
  .challenge-row{padding:0 14px 16px!important;gap:8px!important;}
  .challenge-card{width:108px!important;height:80px!important;border-radius:15px!important;}

  /* Inbox */
  .story-rail{padding:11px 13px 10px!important;gap:10px!important;}
  .story .sring{width:49px!important;height:49px!important;}
  .story span{font-size:7.6px!important;}
  .dm-list{padding:0 8px 15px!important;gap:7px!important;}
  .dm-item{padding:11px 11px!important;border-radius:15px!important;}
  .dm-avatar{width:42px!important;height:42px!important;}
  .dm-name{font-size:11.8px!important;}
  .dm-msg{font-size:9px!important;}

  /* Profile */
  .profile-top{padding:18px 15px 12px!important;}
  .profile-logo{width:94px!important;height:94px!important;}
  .handle{font-size:16px!important;}
  .bio{font-size:10.8px!important;line-height:1.45!important;max-width:340px;}
  .stat-row{gap:10px!important;margin-top:13px!important;width:100%;justify-content:space-around!important;flex-wrap:nowrap!important;}
  .stat{min-width:0;flex:1;}
  .stat .n{font-size:15px!important;}
  .stat .l{font-size:7.1px!important;line-height:1.25!important;}
  .studio-link{width:min(100%,300px)!important;justify-content:center!important;padding:10px 13px!important;}
  .ptabs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;overflow:visible!important;padding:0!important;}
  .ptabs span{min-width:0!important;padding:11px 4px!important;font-size:7.7px!important;}
  #view-profile .p-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:8px!important;}

  /* Studio */
  #view-studio .header-row{padding:14px 13px 10px!important;gap:8px!important;}
  #view-studio .studio-head img{width:43px!important;height:43px!important;}
  #view-studio .header-row h1{font-size:15px!important;line-height:1.08!important;}
  #view-studio .back-chip{font-size:8.2px!important;padding:7px 9px!important;}
  #view-studio .gauge-wrap{padding:4px 14px 3px!important;display:grid!important;grid-template-columns:88px 1fr!important;align-items:center!important;gap:12px!important;}
  #view-studio .studio-hero-icon{width:88px!important;height:88px!important;}
  #view-studio .gauge-label{font-size:8.8px!important;line-height:1.45!important;}
  #view-studio .gauge-label b{font-size:12.5px!important;}
  .studio-realnote{margin:10px 14px!important;padding:10px 11px 10px 13px!important;border-radius:14px!important;font-size:8.8px!important;}
  #view-studio .studio-grid{padding:0 13px 17px!important;gap:10px!important;}
  #view-studio .s-card{padding:12px!important;border-radius:17px!important;min-height:114px!important;}
  #view-studio .s-card .icon{font-size:18px!important;}
  #view-studio .s-card .title{font-size:10.8px!important;}
  #view-studio .s-card .metric{font-size:16px!important;}
  #view-studio .s-card .sub{font-size:8.6px!important;line-height:1.35!important;}
}

@media(max-width:390px){
  .feed-top span{min-width:115px!important;padding:8px 10px!important;}
  .feed-bottom{right:64px!important;}
  #view-camera .cam-filters{top:90px!important;transform:scale(.93)!important;transform-origin:top right!important;}
  #view-camera .duration-row{width:calc(100% - 30px)!important;}
  #view-profile .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .stat .l{font-size:6.7px!important;}
}