body,html{background:radial-gradient(circle at 18% 28%,rgba(232,123,0,0.55) 0%,transparent 48%),radial-gradient(circle at 82% 72%,rgba(123,99,232,0.45) 0%,transparent 50%),radial-gradient(circle at 50% 95%,rgba(232,99,180,0.30) 0%,transparent 50%),#0a0a0a!important;min-height:100vh}
:root{--otc-cat-radius:20px;--otc-cat-radius-sm:14px;--otc-cat-ease:cubic-bezier(0.32,0.72,0,1);--otc-cat-dur:350ms}

.otc-cat-overlay{position:fixed;inset:0;z-index:999;color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-0.022em;background:rgba(28,28,30,0.62);backdrop-filter:saturate(180%) blur(40px);-webkit-backdrop-filter:saturate(180%) blur(40px);animation:otcCatFadeIn var(--otc-cat-dur) var(--otc-cat-ease)}

@keyframes otcCatFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.otc-cat-header{position:sticky;top:0;z-index:10;background:rgba(10,10,10,0.45);backdrop-filter:saturate(180%) blur(30px);border-bottom:0.5px solid rgba(255,255,255,0.08);padding:max(18px,env(safe-area-inset-top)) 16px 14px;flex-shrink:0}
.otc-cat-header-row{display:flex;align-items:flex-start;gap:10px}
.otc-cat-hdr-text{flex:1;min-width:0}
.otc-cat-back-ctx{display:inline-flex;align-items:center;gap:4px;padding:5px 11px 5px 5px;border-radius:999px;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);font-size:12px;font-weight:500;cursor:pointer;letter-spacing:-0.1px;margin:0 0 8px;backdrop-filter:blur(20px)}
.otc-cat-back-ctx svg{flex-shrink:0}
.otc-cat-title{font-size:22px;font-weight:600;letter-spacing:-0.4px;line-height:1.18;color:#fff}
.otc-cat-sub{font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:-0.1px;display:flex;align-items:center;gap:6px}
.otc-cat-sub-all{display:inline-flex;align-items:center;gap:3px;color:#ff9933;font-weight:500;font-variant-numeric:tabular-nums;border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit;padding:0}

.otc-cat-close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.12);backdrop-filter:blur(20px);border:0.5px solid rgba(255,255,255,0.08);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:0;padding:0}

.otc-cat-scroll{flex:1;overflow-y:auto;padding:14px 12px 28px;-webkit-overflow-scrolling:touch}

/* MOB — 2 col grid */
.otc-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:1fr}

.otc-cat-tile{background:rgba(255,255,255,0.92);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:0.5px solid rgba(255,255,255,0.4);border-radius:var(--otc-cat-radius);padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 4px 20px rgba(0,0,0,0.18);cursor:pointer;font-family:inherit;text-align:center;transition:transform 150ms var(--otc-cat-ease)}
.otc-cat-tile:active{transform:scale(0.96)}
.otc-cat-tile-icon{width:78px;height:78px;background:linear-gradient(135deg,rgba(232,123,0,0.22) 0%,rgba(232,123,0,0.08) 100%);border:1px solid rgba(232,123,0,0.30);box-shadow:0 4px 12px rgba(232,123,0,0.12) inset;border-radius:16px;display:flex;align-items:center;justify-content:center;color:rgba(232,123,0,0.55);flex-shrink:0}
.otc-cat-tile-icon img{width:78px;height:78px;display:block;object-fit:contain;border-radius:16px}
.otc-cat-tile-name{font-size:13px;font-weight:500;color:#1d1d1f;line-height:1.22;letter-spacing:-0.2px;word-break:normal;overflow-wrap:break-word;hyphens:none}
.otc-cat-tile-count{font-size:11px;font-weight:600;color:#8a8a8e;background:#f5f5f7;padding:3.5px 11px;border-radius:999px;margin-top:auto;font-variant-numeric:tabular-nums;letter-spacing:-0.1px}
.otc-cat-tile[data-has-kids] .otc-cat-tile-count{color:#e87b00;background:rgba(232,123,0,0.10)}
.otc-cat-tile-has-kids{position:absolute;bottom:10px;right:10px;color:rgba(0,0,0,0.20);line-height:0}
.otc-cat-tile-has-kids svg{width:10px;height:10px}

.otc-cat-skel-tile{background:rgba(255,255,255,0.06);border-radius:var(--otc-cat-radius);min-height:200px;animation:otcSkelPulse 1.4s ease-in-out infinite}
@keyframes otcSkelPulse{0%,100%{opacity:0.4}50%{opacity:0.7}}

/* DESKTOP — drawer-from-top + sidebar + content */
@media (min-width: 1024px){
  .otc-cat-overlay{position:absolute;top:64px;left:0;right:0;bottom:auto;z-index:90;border-radius:0;animation:otcCatSlideDown var(--otc-cat-dur) var(--otc-cat-ease)}
  @keyframes otcCatSlideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
  .otc-cat-overlay-dt{display:grid;grid-template-columns:280px 1fr;height:78vh;overflow:hidden}
  .otc-cat-side{padding:14px 10px;border-right:0.5px solid rgba(255,255,255,0.06);overflow-y:auto}
  .otc-cat-side-item{padding:14px 12px;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,0.85);border-radius:14px;position:relative;margin-bottom:6px;border:0.5px solid transparent;cursor:pointer;font-family:inherit;background:none;width:100%;text-align:left}
  .otc-cat-side-item:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.10);color:#fff;backdrop-filter:blur(20px)}
  .otc-cat-side-item.is-active{background:linear-gradient(90deg,rgba(232,123,0,0.18) 0%,rgba(232,123,0,0.04) 100%);border-color:rgba(232,123,0,0.30);color:#fff;box-shadow:0 0 30px rgba(232,123,0,0.15);backdrop-filter:blur(20px)}
  .otc-cat-side-item.is-active::before{content:"";position:absolute;left:-6px;top:18px;bottom:18px;width:3px;background:linear-gradient(180deg,#ffba5c,#e87b00);border-radius:0 3px 3px 0;box-shadow:0 0 8px rgba(232,123,0,0.6)}
  .otc-cat-side-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(232,123,0,0.22) 0%,rgba(232,123,0,0.06) 100%);border:1px solid rgba(232,123,0,0.28);border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(232,123,0,0.75);flex-shrink:0}

  .otc-cat-side-item.is-active .otc-cat-side-icon{color:#ff9933;border-color:rgba(232,123,0,0.45);background:linear-gradient(135deg,rgba(232,123,0,0.35) 0%,rgba(232,123,0,0.10) 100%)}
  .otc-cat-side-icon img{width:60px;height:60px;border-radius:14px;object-fit:contain}
  .otc-cat-side-text{flex:1;min-width:0}
  .otc-cat-side-name{font-size:14px;font-weight:500;line-height:1.22;letter-spacing:-0.22px;color:#fff;word-break:normal;overflow-wrap:break-word}
  .otc-cat-side-count{font-size:11px;color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:-0.1px}
  .otc-cat-side-item.is-active .otc-cat-side-count{color:#ff9933}
  .otc-cat-side-arrow{color:rgba(255,255,255,0.3);flex-shrink:0;line-height:0}
  .otc-cat-side-item.is-active .otc-cat-side-arrow{color:#ff9933}
  .otc-cat-side-all{padding:14px 12px 4px;border-top:0.5px solid rgba(255,255,255,0.08);margin-top:8px}
  .otc-cat-side-all a{color:#ff9933;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px;letter-spacing:-0.15px;cursor:pointer}

  .otc-cat-content{padding:22px 24px;overflow-y:auto}
  .otc-cat-content-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
  .otc-cat-content-title{font-size:20px;font-weight:600;color:#fff;letter-spacing:-0.4px}
  .otc-cat-content-all{display:inline-flex;align-items:center;gap:4px;color:#ff9933;font-size:13px;font-weight:500;letter-spacing:-0.15px;cursor:pointer}
  .otc-cat-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .otc-cat-tile{padding:16px 12px 14px;min-height:160px}
  .otc-cat-tile-icon{width:64px;height:64px;border-radius:14px}
  .otc-cat-tile-icon img{width:64px;height:64px;border-radius:14px}
  .otc-cat-tile:hover{transform:translateY(-2px);border-color:rgba(232,123,0,0.4);background:rgba(255,255,255,0.96)}

  .otc-cat-back-dt{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.7);font-size:13px;font-weight:500;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.1);border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;font-family:inherit;letter-spacing:-0.1px;margin-right:auto}
  .otc-cat-back-dt:hover{background:rgba(255,255,255,0.14)}
  /* Hide mob header on desktop */
  .otc-cat-overlay > .otc-cat-header{display:none}
}

/* View Transitions (drill animations) */
@supports (view-transition-name: none){
  ::view-transition-old(otc-cat-scroll){animation:otcSlideOutLeft 280ms var(--otc-cat-ease) forwards}
  ::view-transition-new(otc-cat-scroll){animation:otcSlideInRight 280ms var(--otc-cat-ease) forwards}
  @keyframes otcSlideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-30%);opacity:0.4}}
  @keyframes otcSlideInRight{from{transform:translateX(100%);opacity:0.4}to{transform:translateX(0);opacity:1}}
}

@media (prefers-reduced-motion: reduce){
  .otc-cat-overlay,.otc-cat-tile{animation:none!important;transition:none!important}
}