/* PaskaTok v0.3.1 — PORCELAIN LUXE ICON PASS */
:root{
  --sludge-dark:#2a1b10;
  --sludge-panel:#49301e;
  --sludge-panel-2:#5a3b24;
  --sludge-line:#806047;
  --porcelain:#fff7ea;
  --porcelain-dim:#dcc9ad;
  --moss:#aab45d;
  --moss-dim:#7d873e;
  --copper:#de9560;
  --hazard:#f4c65b;
  --flush-blue:#78a4a0;
  --danger:#dc6950;
}

body{
  background:
    radial-gradient(circle at 15% 8%,rgba(218,149,96,.20),transparent 34%),
    radial-gradient(circle at 85% 88%,rgba(170,180,93,.12),transparent 38%),
    #24170e;
}
.phone{background:linear-gradient(180deg,#765033,#3d2819);box-shadow:0 0 0 1px rgba(244,198,91,.24),0 34px 80px -24px rgba(0,0,0,.64),inset 0 0 0 1px rgba(255,255,255,.035)}
.screen{background:linear-gradient(180deg,#5a3b24 0%,#49301e 43%,#382417 100%)}

/* compact brass status rail */
.status-strip{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:12px 14px 9px;
  background:linear-gradient(180deg,rgba(255,247,234,.055),rgba(255,247,234,.012));
  border-bottom:1px solid rgba(244,198,91,.15);
  box-shadow:0 8px 24px rgba(27,15,8,.08);
}
.status-brand-icon{width:30px;height:30px;filter:drop-shadow(0 5px 9px rgba(0,0,0,.28))}
#screen-name{text-align:center;font-size:10.5px;letter-spacing:.11em;color:#ead8bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-utils{display:flex;align-items:center;gap:8px}
.status-utils #clock{min-width:38px;text-align:right;font-size:9px;color:#cdb99c}
.header-search-btn{width:34px;height:34px;padding:2px;border:1px solid transparent;border-radius:12px;background:transparent;display:grid;place-items:center;cursor:pointer}
.header-search-btn img{width:29px;height:29px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.20))}
.header-search-btn:is(:hover,:focus-visible,.active){background:rgba(255,247,234,.075);border-color:rgba(244,198,91,.22);outline:none}

/* feed becomes warmer and quieter so the icons/video own the stage */
#view-feed{background:#2f2015}
.feed-top{padding-top:9px;gap:24px;background:linear-gradient(180deg,rgba(42,27,16,.52),transparent);font-size:11px}
.feed-top span{cursor:pointer;color:#cfbda3;transition:color .18s ease,border-color .18s ease,transform .18s ease}
.feed-top span.active{color:#fff7ea;border-bottom-color:#f4c65b;transform:translateY(-1px)}
.live-pill{box-shadow:0 8px 22px rgba(133,46,28,.28);border:1px solid rgba(255,255,255,.13)}
.feed-side{right:9px!important;gap:15px!important}
.feed-side .icon-circle{background:rgba(67,43,27,.54);border-color:rgba(255,247,234,.22);box-shadow:0 7px 20px rgba(0,0,0,.16)}
.feed-side .icon-btn.liked .icon-circle{background:rgba(244,198,91,.22);border-color:rgba(244,198,91,.52)}
.feed-bottom{left:18px!important;right:84px!important}
.feed-bottom .uname{font-size:15px!important;letter-spacing:-.01em}
.feed-bottom .cap{color:#fff2df!important;font-size:12px!important;line-height:1.5!important}
.sound-row{color:#f4c65b!important}
.tags{color:#b6bf69!important}

/* new premium icon navigation */
.bottom-nav{
  min-height:82px;
  padding:7px 8px max(9px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(91,59,36,.96),rgba(67,43,27,.98))!important;
  border-top:1px solid rgba(244,198,91,.16)!important;
  box-shadow:0 -10px 30px rgba(26,15,9,.18);
  backdrop-filter:blur(16px);
  overflow:visible;
}
.nav-btn{position:relative;gap:2px!important;color:#d7c4a8!important;font-size:7.3px!important;min-width:0;transition:transform .18s ease,color .18s ease}
.nav-btn .ni.ni-image{width:43px;height:42px;border-radius:15px;display:grid;place-items:center;background:rgba(255,247,234,.035);border:1px solid rgba(255,247,234,.05);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.nav-btn .ni.ni-image img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.22));transition:transform .18s ease,filter .18s ease}
.nav-btn .nav-label{font-family:var(--font-mono);font-size:7.3px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68px}
.nav-btn.active{color:#f5cb61!important}
.nav-btn.active .ni.ni-image{background:radial-gradient(circle at 50% 42%,rgba(244,198,91,.20),rgba(255,247,234,.04));border-color:rgba(244,198,91,.34);box-shadow:0 6px 18px rgba(20,12,7,.14),0 0 18px rgba(244,198,91,.08)}
.nav-btn.active .ni.ni-image img{transform:scale(1.07);filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(244,198,91,.12))}
.nav-btn.create{z-index:4}
.nav-btn.create .ni.ni-image{width:58px!important;height:58px!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,247,234,.10),rgba(244,198,91,.09))!important;border:1px solid rgba(244,198,91,.34)!important;box-shadow:0 10px 24px rgba(20,10,4,.26),0 0 0 4px rgba(90,59,36,.92);transform:translateY(-10px)}
.nav-btn.create .ni.ni-image img{width:55px!important;height:55px!important;transform:scale(1.08);filter:drop-shadow(0 7px 11px rgba(0,0,0,.28))}
.nav-btn.create .nav-label{margin-top:-8px;color:#f5cb61}
.nav-btn:active .ni.ni-image{transform:scale(.94)}
.nav-btn.create:active .ni.ni-image{transform:translateY(-10px) scale(.95)}

/* Hajujäljitys leaves bottom nav and becomes a proper utility tool */
#view-search{background:linear-gradient(180deg,#5a3b24,#3f2a1b)!important}
.search-bar{margin:16px 14px 9px!important;padding:9px 12px!important;border-radius:18px!important;background:rgba(255,247,234,.055)!important;border:1px solid rgba(244,198,91,.16)!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 9px 24px rgba(26,15,9,.10)}
.search-field-icon{width:36px;height:36px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.search-bar input{font-size:11px!important;color:#fff7ea!important}
.search-bar input::placeholder{color:#c8b598!important}
.sec-label{color:#f2c65c!important;letter-spacing:.09em!important}
.sec-label-icon{display:flex;align-items:center;gap:10px;padding:13px 14px 7px!important}
.sec-label-icon img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.20))}
.sec-label-icon span{font-size:10px}
.chip{background:rgba(255,247,234,.045)!important;border-color:rgba(244,198,91,.15)!important;color:#fff1dc!important;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.sound-item{padding:11px 0!important}
.challenge-card{border:1px solid rgba(255,255,255,.055);box-shadow:0 12px 24px rgba(31,17,8,.14)}

/* block gets its own hazard pictogram */
.sheet-item .si-image{width:38px!important;height:38px!important;display:grid;place-items:center;flex:none}
.sheet-item .si-image img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.22))}
.sheet-item:has(.si-image){padding-top:9px;padding-bottom:9px}

/* inbox: calm cards instead of one flat brown wall */
#view-inbox{background:linear-gradient(180deg,#553820,#402a1a)!important}
.story-rail{gap:13px!important;padding:12px 14px 15px!important}
.story .sring{box-shadow:0 8px 18px rgba(25,13,7,.16)}
.dm-list{padding:0 10px 18px!important;gap:7px}
.dm-item{background:rgba(255,247,234,.025);border:1px solid rgba(255,247,234,.045);border-radius:16px!important;padding:11px 12px!important;box-shadow:inset 0 1px rgba(255,255,255,.018)}
.dm-avatar{box-shadow:0 7px 18px rgba(24,13,7,.15)}

/* profile: porcelain/burnished-gold stage for the royal icon */
#view-profile{background:linear-gradient(180deg,#553820,#3b2719)!important}
.profile-top{padding:22px 16px 17px!important;background:radial-gradient(circle at 50% 15%,rgba(244,198,91,.11),transparent 47%);border-bottom:1px solid rgba(244,198,91,.10)}
.profile-logo{width:104px!important;height:104px!important;background:radial-gradient(circle at 50% 35%,rgba(244,198,91,.16),rgba(255,247,234,.035))!important;border-color:rgba(244,198,91,.20)!important;box-shadow:0 14px 32px rgba(24,12,6,.20)!important}
.handle{font-size:17px!important;color:#fff8ec}
.bio{font-size:11.5px!important;color:#e0cdb0!important}
.stat-row{gap:22px!important}
.stat .n{color:#f4c65b!important;font-size:16px!important}
.stat .l{color:#d6c3a7!important}
.studio-link{background:rgba(255,247,234,.035)!important;border-color:rgba(120,164,160,.22)!important;color:#b7c373!important;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.ptabs{background:rgba(73,48,30,.94)!important;border-color:rgba(255,255,255,.06)!important}
.ptabs span{color:#d3c0a4!important}
.ptabs span.active{color:#fff6e7!important;border-color:#f4c65b!important}
.p-grid{gap:7px!important;padding:9px!important}
.p-cell{border-radius:14px!important;border:1px solid rgba(255,255,255,.055)!important;box-shadow:0 10px 22px rgba(25,13,7,.11)}

/* studio and camera pick up the same refined material system */
#view-studio{background:linear-gradient(180deg,#50351f,#3a2719)!important}
.s-card{background:rgba(255,247,234,.035)!important;border-color:rgba(244,198,91,.10)!important;box-shadow:0 12px 24px rgba(23,12,6,.10)}
.studio-realnote{border-left-color:#aab45d!important;background:rgba(170,180,93,.07)!important}
.camera-sourcebar button,.camera-status,.flip-btn,.timer-chip{background:rgba(43,29,18,.70)!important;border-color:rgba(255,247,234,.14)!important;backdrop-filter:blur(12px)}
.filter-chip .sw{border-color:rgba(255,247,234,.20)!important}

@media(max-width:520px){
  body{background:#2a1b10!important}
  .screen{background:linear-gradient(180deg,#5a3b24,#3a2618)!important}
  .status-strip{min-height:50px;padding:max(11px,env(safe-area-inset-top)) 12px 8px}
  #screen-name{font-size:10px}
  .header-search-btn{width:32px;height:32px}
  .header-search-btn img{width:27px;height:27px}
  .status-utils{gap:5px}
  .bottom-nav{min-height:80px!important}
  .nav-btn .ni.ni-image{width:41px;height:40px}
  .nav-btn .ni.ni-image img{width:35px;height:35px}
  .nav-btn.create .ni.ni-image{width:56px!important;height:56px!important}
  .nav-btn.create .ni.ni-image img{width:53px!important;height:53px!important}
  .nav-btn .nav-label{font-size:7px;max-width:64px}
  .feed-side{bottom:calc(112px + env(safe-area-inset-bottom))!important}
  .feed-bottom{bottom:calc(22px + env(safe-area-inset-bottom))!important}
  .sec-label-icon img{width:42px;height:42px}
}

@media(max-width:360px){
  .nav-btn .ni.ni-image{width:37px;height:37px}
  .nav-btn .ni.ni-image img{width:32px;height:32px}
  .nav-btn.create .ni.ni-image{width:52px!important;height:52px!important}
  .nav-btn.create .ni.ni-image img{width:49px!important;height:49px!important}
  .nav-btn .nav-label{font-size:6.6px}
  .status-utils #clock{display:none}
}