:root{--ink:#18201f;--muted:#687270;--faint:#939c99;--line:#dfe4e1;--line2:#cbd3cf;--canvas:#f2f4f1;--surface:#fff;--soft:#f8f9f7;--accent:#ed5d47;--accent2:#cf4533;--accent-soft:#fff0ec;--shadow:0 1px 2px rgba(24,32,31,.05),0 4px 14px rgba(24,32,31,.04);--shadow-lg:0 14px 40px rgba(24,32,31,.09);--radius:16px}
html{background:var(--canvas)}
body{min-width:320px;color:var(--ink)!important;background:var(--canvas)!important;background-image:radial-gradient(circle at 82% -10%,rgba(237,93,71,.08),transparent 32%)!important;box-shadow:none!important;font-family:Inter,Poppins,system-ui,sans-serif!important;letter-spacing:-.01em}
header{min-height:76px;padding:14px clamp(18px,3vw,44px)!important;gap:24px;flex-wrap:nowrap!important;border:0!important;border-bottom:1px solid var(--line)!important;background:rgba(255,255,255,.92)!important;box-shadow:none!important;backdrop-filter:blur(18px) saturate(1.2)}
.logo-container{min-width:max-content;gap:12px}.emoji-logo{display:grid;width:44px;height:44px;margin:0!important;place-items:center;border-radius:13px;background:var(--ink);color:#fff;font-size:1.5rem!important;line-height:1;box-shadow:0 7px 18px rgba(24,32,31,.18)}
.logo-container h1{display:flex;align-items:center;margin:0;color:var(--ink)!important;font-size:1.05rem!important;font-weight:750!important;letter-spacing:-.035em}.logo-container h1:after{content:'MAKE EMOJI YOURS';display:block;margin-left:14px;padding-left:14px;border-left:1px solid var(--line2);color:var(--faint);font-size:.65rem;font-weight:700;letter-spacing:.12em}
#appModeDisplay{margin-left:8px!important;padding:3px 7px!important;border-radius:999px!important;background:var(--accent-soft)!important;color:var(--accent2)!important;font-size:.67rem!important}#appModeDisplay:empty{display:none}
#controls{flex:1;justify-content:flex-end;gap:10px!important}.search-container{width:min(34vw,390px)}
#searchInput,#categorySelect,#labelInput,#fontSelect,.control-input{border:1px solid var(--line2)!important;background:var(--surface)!important;color:var(--ink)!important;box-shadow:0 1px 1px rgba(24,32,31,.03);outline:0;transition:border-color .16s,box-shadow .16s}
#searchInput{width:100%!important;height:44px;padding:0 42px!important;border-radius:12px!important;font-size:.9rem!important}.search-container:before{content:'\f002';position:absolute;left:15px;z-index:1;color:var(--muted);font:900 .82rem/1 'Font Awesome 6 Free';pointer-events:none}
#searchInput:focus,#categorySelect:focus,#labelInput:focus,#fontSelect:focus,.control-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(237,93,71,.12)!important}.search-clear{position:absolute!important;right:8px!important;width:28px!important;min-width:28px!important;height:28px!important;margin:0!important;padding:0!important;border-radius:8px!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;font-size:.75rem!important}
#categorySelect{width:170px;height:44px;padding:0 34px 0 13px!important;border-radius:12px!important;font-size:.86rem!important;cursor:pointer}.burger-menu{display:grid;width:42px;height:42px;margin:0 0 0 2px!important;place-items:center;border:1px solid var(--line2);border-radius:12px;background:#fff}.burger-icon{color:var(--ink)!important;font-size:1rem!important}
.menu-dropdown{top:calc(100% + 10px)!important;width:230px!important;padding:7px;border:1px solid var(--line);border-radius:14px!important;box-shadow:var(--shadow-lg)!important}.menu-dropdown a{padding:10px 12px!important;border-radius:8px;color:var(--ink)!important;font-size:.84rem}.menu-dropdown a:hover{background:var(--accent-soft)!important;color:var(--accent2)!important}
.tab-nav{min-height:51px;padding:0 clamp(18px,3vw,44px);gap:6px;border-bottom:1px solid var(--line)!important;background:rgba(255,255,255,.72)!important;box-shadow:none!important}.tab-btn{min-width:142px;padding:0 16px!important;border-radius:0!important;color:var(--muted)!important;background:transparent!important;box-shadow:none!important;font-size:.85rem!important;font-weight:650!important;transform:none!important}.tab-btn:hover{color:var(--ink)!important;background:rgba(24,32,31,.035)!important}.tab-btn.active{color:var(--ink)!important}.tab-btn.active:after{left:16px!important;width:calc(100% - 32px)!important;height:2px!important;background:var(--accent)!important}
.main-content{max-width:1800px;width:100%;margin:0 auto;padding:clamp(14px,2vw,26px)!important;gap:clamp(14px,1.5vw,22px)!important}#basketContainer,#emojiGridContainer,#previewPanel,#canvasContainer,#composerControls{border:1px solid var(--line)!important;border-radius:var(--radius)!important;background:var(--surface)!important;box-shadow:var(--shadow)!important}
#basketContainer{width:248px!important;min-width:248px!important;padding:0!important;overflow:hidden}.basket-controls{order:-1;display:grid!important;grid-template-columns:1fr auto;gap:8px!important;margin:0!important;padding:17px!important;border-bottom:1px solid var(--line)}#basketLabel{grid-column:1/-1;margin:0 0 4px!important;color:var(--ink);text-align:left!important;font-size:.92rem!important;font-weight:750}
#basket{margin:12px;padding:10px!important;gap:8px!important;border:1px dashed var(--line2)!important;border-radius:12px!important;background:var(--soft)}#basket:empty:before{content:'Your saved emojis will appear here';width:100%;margin:auto 8px;color:var(--faint);text-align:center;font-size:.75rem;line-height:1.5}.basketEmoji{width:46px!important;height:46px!important;padding:5px;border:1px solid transparent;border-radius:10px;background:#fff;font-size:2rem!important}.basketEmoji:hover{border-color:var(--line2);transform:translateY(-1px)!important}
.right-panel{min-width:0}.tab-content.active{gap:clamp(14px,1.5vw,22px)!important;padding:0!important}#emojiGridContainer{padding:0!important;overflow:hidden}#emojiGridHeader{min-height:68px;margin:0!important;padding:13px 16px 13px 19px;gap:12px;border-bottom:1px solid var(--line)}#emojiCount{color:var(--muted);font-size:.78rem!important;font-weight:550!important;white-space:nowrap}#emojiCount:before{content:'Emoji library';display:block;margin-bottom:2px;color:var(--ink);font-size:.96rem;font-weight:750}#emojiGridControls{gap:6px!important}
button{min-height:38px;padding:8px 13px!important;border:1px solid var(--accent)!important;border-radius:10px!important;background:var(--accent)!important;color:#fff!important;box-shadow:none!important;font-family:inherit;font-size:.8rem!important;font-weight:650;line-height:1.15;transform:none!important;transition:background .16s,border-color .16s,transform .16s!important}button:hover{border-color:var(--accent2)!important;background:var(--accent2)!important;transform:translateY(-1px)!important}button:active{transform:translateY(0)!important}button:focus-visible{outline:3px solid rgba(237,93,71,.2);outline-offset:2px}button.secondary,.button-secondary,#selectAllBtn,#printBasketBtn{border-color:var(--line2)!important;background:#fff!important;color:var(--ink)!important}button.secondary:hover,.button-secondary:hover,#selectAllBtn:hover,#printBasketBtn:hover{border-color:#aeb8b3!important;background:var(--soft)!important}button:disabled{opacity:.45!important}
#emojiGrid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))!important;gap:8px!important;padding:14px!important;scrollbar-color:var(--line2) transparent}.emoji-item{width:62px!important;height:62px!important;margin:auto;padding:9px!important;border:1px solid transparent;border-radius:12px!important;background:transparent;font-size:2.35rem!important;transition:background .14s,border-color .14s,transform .14s!important}.emoji-item:hover{border-color:var(--line)!important;background:var(--soft)!important;transform:translateY(-2px)}.emoji-item.selected{border-color:var(--accent)!important;background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
#previewPanel{width:272px!important;padding:18px!important;text-align:center}#previewPanel:before{content:'PREVIEW';margin-bottom:8px;color:var(--faint);font-size:.65rem;font-weight:750;letter-spacing:.14em}#emojiCategory{color:var(--accent2);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}#emojiName{min-height:24px;margin-top:4px;color:var(--ink);font-size:.9rem;font-weight:700}#emojiName:empty:after{content:'Select an emoji';color:var(--muted)}#selectedEmojiPreview{min-height:190px!important;margin:12px 0 18px!important;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fff,var(--soft));font-size:7rem!important}
.preview-controls{gap:9px!important}.toggle-buttons{padding:3px;gap:3px!important;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.toggle-buttons button{min-height:32px!important;padding:6px 4px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--muted)!important;font-size:.71rem!important;font-weight:650!important}.toggle-buttons button:hover{background:#fff!important;color:var(--ink)!important}.toggle-buttons button.active{background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 5px rgba(24,32,31,.1)!important}
#composerTab.active #canvasContainer{padding:12px}#composerControls{margin-bottom:12px;padding:11px!important;gap:7px!important;background:var(--soft)!important}.control-group{border:1px solid var(--line);background:#fff!important}#labelInput,#fontSelect{height:38px!important;border-radius:10px!important;font-size:.82rem!important}
@media(max-width:1200px){body{min-height:100vh!important}header{position:sticky!important;top:0!important}.tab-nav{position:sticky!important;top:73px!important;z-index:900!important}.main-content{gap:12px!important}#emojiGridContainer{height:58vh!important;max-height:58vh!important;min-height:390px!important}#emojiGrid{height:calc(58vh - 68px)!important;max-height:calc(58vh - 68px)!important}#previewPanel{grid-template-columns:100px minmax(150px,1fr) minmax(370px,auto)!important;grid-template-rows:auto auto!important;padding:12px 14px!important;text-align:left}#previewPanel:before{grid-column:1;grid-row:1}#emojiCategory{grid-column:2;grid-row:1}#emojiName{grid-column:2;grid-row:2}#selectedEmojiPreview{grid-column:1!important;grid-row:2!important;min-height:68px!important;height:68px;margin:0!important;border:0;background:transparent;font-size:3.5rem!important}#previewPanel .preview-controls{grid-column:3!important;grid-row:1/3!important}#basketContainer{display:grid!important;grid-template-columns:1fr auto;padding:8px!important;overflow:visible}.basket-controls{order:2;display:flex!important;padding:0 0 0 8px!important;border:0}#basketLabel{grid-column:auto}#basket{margin:0!important}}
@media(max-width:768px){header{min-height:0;padding:10px 12px!important;flex-direction:row!important;flex-wrap:wrap!important;gap:9px 12px!important}.emoji-logo{width:38px;height:38px;border-radius:11px;font-size:1.25rem!important}.logo-container h1{font-size:.96rem!important}.logo-container h1:after{display:none}#controls{display:grid!important;grid-template-columns:minmax(0,1fr) 132px 40px;width:100%;gap:7px!important}.search-container{width:100%}#searchInput,#categorySelect{height:40px!important}#categorySelect{width:100%!important}.burger-menu{align-self:auto!important;width:40px;height:40px;padding:0!important}.tab-nav{top:117px!important;min-height:46px;padding:0 12px!important}.tab-btn{min-width:0;flex:1!important;padding:0 10px!important}.main-content{padding:10px!important}#emojiGridContainer{height:55vh!important;min-height:350px!important;max-height:55vh!important}#emojiGridHeader{min-height:0;padding:11px 12px;align-items:flex-end}#emojiCount:before{font-size:.86rem}#emojiGridControls{flex-wrap:nowrap!important}#emojiGridControls button{width:36px!important;min-width:36px!important;padding:0!important;overflow:hidden;font-size:0!important}#selectAllBtn:after{content:'All';font-size:.7rem}#clearSelectionBtn:after{content:'Clear';font-size:.67rem}#addSelectedToBasketBtn{width:42px!important}#addSelectedToBasketBtn i{font-size:.8rem}#emojiGrid{height:calc(55vh - 62px)!important;max-height:calc(55vh - 62px)!important;grid-template-columns:repeat(auto-fill,minmax(52px,1fr))!important;gap:5px!important;padding:9px!important}.emoji-item{width:50px!important;height:50px!important;font-size:1.9rem!important}#previewPanel{display:grid!important;grid-template-columns:68px minmax(0,1fr)!important;gap:4px 10px!important;text-align:left}#previewPanel:before{grid-column:2;grid-row:1;margin:0}#emojiCategory{grid-column:2;grid-row:2}#emojiName{grid-column:2;grid-row:3}#selectedEmojiPreview{display:flex!important;grid-column:1!important;grid-row:1/4!important;height:68px!important;max-height:68px!important;min-height:68px!important;flex:none!important}#previewPanel .preview-controls{grid-column:1/-1!important;grid-row:4!important;margin-top:5px}#basketContainer{display:flex!important;padding:10px!important}.basket-controls{order:-1;width:100%;padding:0 0 8px!important}#basketLabel{margin-right:auto!important}#basket{width:100%;height:62px!important;min-height:62px!important;max-height:62px!important}}
@media(max-width:460px){.logo-container{min-width:0}#controls{grid-template-columns:minmax(0,1fr) 40px}#categorySelect{grid-column:1;grid-row:2}.burger-menu{grid-column:2;grid-row:1}.search-container{grid-column:1;grid-row:1}.tab-nav{top:164px!important}#emojiGridControls{gap:4px!important}#emojiCount{max-width:112px;white-space:normal;line-height:1.2}.basket-controls{flex-wrap:wrap!important}#basketLabel{width:100%}}
/* EZC mobile shell v2 */
.app-shell-top { display: contents; }
.mobile-filter-button,
.mobile-sheet-close,
.mobile-basket-fab,
.mobile-sheet-backdrop { display: none; }

@media (max-width: 767px) {
  :root { --mobile-bar-height: 48px; }

  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: #fff !important;
  }

  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .app-shell-top {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: block;
    width: 100%;
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(16px) saturate(1.2);
  }

  header {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 48px !important;
    grid-template-rows: 54px 48px !important;
    min-height: 0 !important;
    height: 110px !important;
    padding: 4px 12px 8px !important;
    gap: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .logo-container {
    grid-column: 1;
    grid-row: 1;
    min-width: 0 !important;
    gap: 10px !important;
    overflow: hidden;
  }

  .emoji-logo {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border-radius: 11px !important;
    font-size: 1.2rem !important;
  }

  .logo-container h1 {
    min-width: 0;
    font-size: .98rem !important;
    white-space: nowrap;
  }

  .logo-container h1::after { display: none !important; }
  #appModeDisplay { font-size: .64rem !important; }

  #controls { display: contents !important; }

  .search-container {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    height: 44px;
  }

  #searchInput {
    width: 100% !important;
    height: 44px !important;
    padding: 0 44px 0 42px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
  }

  .search-clear {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
  }

  #categorySelect {
    position: fixed !important;
    left: -100px !important;
    bottom: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    opacity: .01 !important;
    pointer-events: none !important;
  }

  .burger-menu {
    grid-column: 2;
    grid-row: 1;
    align-self: center !important;
    justify-self: end;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .menu-dropdown {
    position: fixed !important;
    top: 58px !important;
    right: 10px !important;
    width: min(270px,calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }

  .tab-nav {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    min-height: var(--mobile-bar-height) !important;
    height: var(--mobile-bar-height) !important;
    padding: 0 12px !important;
    gap: 4px !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
    overflow: visible !important;
  }

  .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--mobile-bar-height) !important;
    height: var(--mobile-bar-height) !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    font-size: .84rem !important;
  }

  .tab-btn.active { color: var(--ink) !important; }
  .tab-btn.active::after {
    left: 16px !important;
    bottom: 0 !important;
    width: calc(100% - 32px) !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0;
  }

  .main-content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .right-panel,
  #downloaderTab.active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #emojiGridContainer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #emojiGridHeader {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 12px 14px 10px !important;
    gap: 7px 8px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--soft);
  }

  #emojiCount {
    grid-column: 1;
    grid-row: 1;
    max-width: none !important;
    color: var(--muted) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #emojiCount::before {
    content: 'Emoji library';
    margin: 0 0 2px !important;
    color: var(--ink);
    font-size: .94rem !important;
    line-height: 1.2;
  }

  .mobile-filter-button {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 86px;
    min-height: 42px;
    padding: 0 12px !important;
    border: 1px solid var(--line2) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-size: .78rem !important;
  }

  #emojiGridControls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.has-emoji-selection #emojiGridControls { display: flex !important; }

  #emojiGridControls button {
    width: auto !important;
    min-width: 70px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 11px !important;
    overflow: visible !important;
    font-size: .74rem !important;
  }

  #selectAllBtn::after,
  #clearSelectionBtn::after { content: none !important; }
  #addSelectedToBasketBtn { min-width: 112px !important; }
  #addSelectedToBasketBtn i { font-size: .8rem !important; }

  #emojiGrid {
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 8px 18px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .emoji-item {
    width: 100% !important;
    max-width: 58px;
    height: auto !important;
    min-height: 52px;
    aspect-ratio: 1;
    margin: auto;
    padding: 7px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    font-size: clamp(1.75rem,8vw,2.3rem) !important;
    touch-action: manipulation;
  }

  .emoji-item.selected {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
  }

  #loadMoreBtn {
    position: static !important;
    width: calc(100% - 28px) !important;
    max-width: 420px !important;
    min-height: 48px !important;
    margin: 4px auto 20px !important;
    padding: 0 18px !important;
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    font-size: .88rem !important;
  }

  #lazyLoadingObserver { height: 2px !important; }

  #previewPanel,
  #basketContainer {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 1502 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 560px !important;
    max-height: min(74dvh,620px) !important;
    margin: 0 auto !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 22px 70px rgba(14,24,22,.28) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateY(calc(100% + 30px));
    visibility: hidden;
    transition: transform .24s ease,visibility 0s linear .24s;
  }

  #previewPanel {
    display: grid !important;
    grid-template-columns: 82px minmax(0,1fr) 40px !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px 12px !important;
    padding: 18px !important;
    text-align: left !important;
  }

  body.mobile-preview-open #previewPanel,
  body.mobile-basket-open #basketContainer {
    transform: translateY(0);
    visibility: visible;
    transition: transform .24s ease,visibility 0s;
  }

  #previewPanel::before {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 !important;
  }

  #selectedEmojiPreview {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    display: flex !important;
    width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 4rem !important;
    flex: none !important;
  }

  #selectedEmojiPreview img { max-height: 76px !important; }
  #emojiCategory { grid-column: 2; grid-row: 2; font-size: .64rem !important; }
  #emojiName { grid-column: 2; grid-row: 3; min-height: 0; margin: 0; font-size: 1rem !important; }

  #previewPanel .preview-controls {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
    margin-top: 12px;
  }

  #previewPanel .toggle-buttons { grid-column: 1 / -1; }
  #previewPanel .toggle-buttons button { min-height: 40px !important; }
  #downloadBtn,
  #downloadZipBtn { width: 100% !important; min-height: 46px !important; }

  .mobile-sheet-close {
    display: grid !important;
    place-items: center;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    background: var(--soft) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-size: .82rem !important;
  }

  #closePreviewSheetBtn {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: start;
    justify-self: end;
  }

  #basketContainer { display: flex !important; padding: 18px !important; overflow: visible !important; }
  #basketContainer .mobile-basket-close { position: absolute; top: 14px; right: 14px; }
  #basketContainer .basket-controls {
    order: -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100%;
    padding: 0 48px 12px 0 !important;
    border-bottom: 1px solid var(--line);
  }
  #basketLabel { grid-column: 1 / -1 !important; width: auto !important; margin: 0 0 8px !important; }
  #basketContainer #basket {
    width: 100% !important;
    height: auto !important;
    min-height: 132px !important;
    max-height: 40dvh !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    overflow: auto !important;
    flex-wrap: wrap !important;
  }

  .mobile-basket-fab {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1250;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(24,32,31,.24) !important;
  }

  .mobile-basket-fab strong {
    display: grid;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    font-size: .72rem;
  }

  body.mobile-preview-open .mobile-basket-fab,
  body.mobile-basket-open .mobile-basket-fab { visibility: hidden; }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1501;
    display: block;
    background: rgba(10,18,17,.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s,visibility 0s linear .2s;
  }

  body.mobile-preview-open .mobile-sheet-backdrop,
  body.mobile-basket-open .mobile-sheet-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s,visibility 0s;
  }

  #composerTab.active {
    display: block !important;
    width: 100% !important;
    padding: 10px !important;
  }

  #composerTab.active #canvasContainer {
    display: flex !important;
    min-height: calc(100dvh - 186px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #composerControls {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100%;
    margin: 0 0 8px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  #composerControls::-webkit-scrollbar { display: none; }
  #composerControls > * { flex: 0 0 auto !important; }
  .canvas-container { min-height: 420px !important; }
}

@media (max-width: 350px) {
  #emojiGrid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
  .mobile-filter-button span { display: none; }
  .mobile-filter-button { min-width: 44px; padding: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  #previewPanel,
  #basketContainer,
  .mobile-sheet-backdrop { transition: none !important; }
}

@media (max-width: 767px) { body.mobile-sheet-active { overflow: hidden !important; } .mobile-filter-button.is-filtered { border-color: var(--accent) !important; color: var(--accent2) !important; } }

@media (max-width: 767px) {
  .mobile-filter-button { position: relative; overflow: hidden; }
  .mobile-filter-button #categorySelect {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }
}

.menu-dropdown .menu-divider{height:1px;margin:6px 8px;background:var(--ezc-line,#dfe4e1)} .menu-dropdown a{font-family:Inter,system-ui,sans-serif!important;font-weight:600}