/* --- reset & base --- */
* { margin:0; padding:0; box-sizing:border-box; }

:root { --font-scale: 1;



  --sym-bg: #ffffff;          /* neutral card, not blue */
  --sym-bg-dark: #0f1726;     /* dark card */
  --sym-border: #e6ebf5;      /* subtle border */
  --sym-border-dark: #24314f;

}

/* Stop iOS Safari zooming inputs on focus */
@supports (-webkit-touch-callout: none) { /* effectively iOS-only */
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  textarea,
  select,
  /* your specific fields */
  #tt-inline-text,
  #tt-inline-search,
  #custom-input {
    font-size: 16px !important;
    line-height: 1.3;
    min-height: 44px;          /* nicer tap target */
  }
}

/* Optional: keep Safari from “helpfully” resizing text */
html { -webkit-text-size-adjust: 100%; }

/* SYMBOL buttons – big, chunky cards */
.tt-symbol {
  display: grid;
  grid-template-rows: 1fr auto;         /* icon grows, label sits below */
  justify-items: center;
  align-items: center;
  gap: 16px;

  padding: 16px 12px;                   /* chunkier */
  min-height: 50px;                    /* tall for easy tap */
  border-radius: 22px;                  /* softly rounded */

  background: var(--sym-bg);
  border: 2px solid var(--sym-border);
  box-shadow: 0 10px 16px rgba(2, 10, 32, 0.08);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .06s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.tt-symbol:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2, 10, 32, 0.12);
}

.tt-symbol:active {
  transform: translateY(0) scale(.995);
  box-shadow: 0 8px 20px rgba(2, 10, 32, 0.10);
}

.tt-symbol:focus-visible {
  outline: 3px solid transparent;
  box-shadow:
    0 0 0 6px var(--ring),
    0 14px 28px rgba(2, 10, 32, 0.12);
}

/* Huge emoji */
.tt-symbol__icon {
    font-size: clamp(50px, 12vw, 72px);
    line-height: 1;
}

/* Bold label, very legible */
.tt-symbol__label {
  text-align: center;
  color: var(--fg);
  font: 800 clamp(10px, 3vw, 1.1rem)/1.1 Roboto, system-ui, sans-serif;
  letter-spacing: .2px;
	color: BLACK;
}



html { font-size: calc(16px * var(--font-scale)); } /* root for scaling */
body {
  font-family:'Roboto',sans-serif;
  background-color:#f5f5f5;
  color:#333;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:background-color .3s, color .3s;
  text-align:center;
  height:100%;
  font-size:1.1rem; /* base text size (scales with html) */
}
h1,h2,h3,p { font-family:'Roboto',sans-serif; }
body.dark-theme { background:#000; color:#fff; }


body.dark-theme .tt-controls .slide {
    background: white!important;
	color: #000000!important;
    border-color: rgb(51, 51, 51);
	font-weight: bold;
}


body.dark-theme .intro-box {
	color:white;
}

body.dark-theme .tt-controls button {
    border: none;
    background:blue !important;
    color: white !important;
	font-weight: bold;
    font-size: 1rem;
}

.text-toggle-wrapper 

body.dark-theme .manager{
	    background: white!important;
	color: #000000!important;
	font-weight: bold;
}

body.dark-theme .manager button {
     border: none;
    background:blue ;
    color: white !important;
	font-weight: bold;
    font-size: 1rem;
}

body.dark-theme .manager .tt-emoji-grid button {

    background:WHITE !important;
    font-size: 2rem;
}

body.dark-theme .intro-box button {
    border: none;
   background:blue ;
    color: white !important;
	font-weight: bold;
}

body.dark-theme .intro-box  {

	font-weight: bold;
}

/* Base sizing via a variable so we can scale the whole UI */
:root { --tt-font-scale: 1; }

html { font-size: calc(16px * var(--tt-font-scale)); }

/* Optional: scale headings too (if you set explicit sizes elsewhere) */
h1 { font-size: calc(2rem * var(--tt-font-scale)); }
h2 { font-size: calc(1.5rem * var(--tt-font-scale)); }
/* etc... */

/* When “large text” is enabled */
html.tt-text-lg { --tt-font-scale: 1.125; }  /* ~12.5% larger; tweak to taste */

/* --- header --- */
.header{
  position: relative; /* needed for absolute home-btn */
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-bottom:20px;
  padding:20px;
  background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.logo{ height:120px; }
.tt.dark-theme {color: white;}
/* --- THEME TOGGLE (scoped) --- */
.theme-toggle-wrapper{
  position:absolute; top:20px; right:20px; display:flex; align-items:center;
}
.theme-toggle{ position:relative; width:60px; height:34px; }
.theme-toggle input{ opacity:0; width:0; height:0; }
.theme-toggle .slider{
  position:absolute; inset:0; cursor:pointer; background:#ccc; transition:.4s; border-radius:34px;
}
.theme-toggle .slider:before{
  content:""; position:absolute; height:26px; width:26px; border-radius:50%;
  left:4px; bottom:4px; background:#fff; transition:.4s; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.theme-toggle input:checked + .slider:before{ transform:translateX(26px); }
.theme-toggle .slider .fa-sun, .theme-toggle .slider .fa-moon{
  position:absolute; top:50%; transform:translateY(-50%); font-size:18px;
}
.theme-toggle .fa-sun{ left:8px; } .theme-toggle .fa-moon{ right:8px; }
/* gradients & icon colors */
.theme-toggle input:checked + .slider{ background:linear-gradient(45deg,#4c2f92,#0c1b36); }
.theme-toggle input:not(:checked) + .slider{ background:linear-gradient(45deg,#FF7E5F,#feb47b); }
.theme-toggle input:checked + .slider .fa-sun{ color:#fff; }
.theme-toggle input:not(:checked) + .slider .fa-moon{ color:#fff; }
.theme-toggle input:checked + .slider .fa-moon{ color:#000; }

/* --- TEXT SIZE TOGGLE (match theme toggle) --- */
.text-toggle-wrapper{
  position:absolute; top:70px; right:20px; display:flex;   /* place it under theme toggle */
}
.text-toggle{ position:relative; width:60px; height:34px; cursor:pointer; }
.text-toggle input{ opacity:0; width:0; height:0; }

/* Track with the two A letters inside */
.text-toggle .slider{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; border-radius:34px; transition:.4s; background:linear-gradient(45deg,#FF7E5F,#feb47b);
  overflow:hidden;
}

/* A letters (sit above the thumb so they never get covered) */
.text-toggle .a{
  font-weight:800; line-height:1; user-select:none; position:relative; z-index:2; pointer-events:none;
}
.text-toggle .a-small{ font-size:0.8125rem; color:#000000; opacity:.85; }
.text-toggle .a-large{ font-size:1.125rem; color:#000000 !important; }

/* Thumb UNDER the letters */
.text-toggle .slider:before{
  content:""; position:absolute; left:4px; bottom:4px;
  width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:.4s; z-index:1;
}

/* ON state: purple bg, white letters, thumb slides right */
.text-toggle input:checked + .slider{ background:linear-gradient(45deg,#4c2f92,#0c1b36); }
.text-toggle input:checked + .slider:before{ transform:translateX(26px); }
.text-toggle input:checked + .slider .a-small,
.text-toggle input:checked + .slider .a-large{ color:#fff; opacity:1; }



/* --- Home button (top-left) with red glow shadow --- */
.home-btn {
  position:absolute;
  top:10px;
  left:10px;
}
.home-btn a{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e53935;            /* red button */
  border-radius:50%;
  width:40px; height:40px;
  font-size:18px;
  color:#fff;                     /* white icon */
  transition:background .3s, box-shadow .3s, transform .1s;
}
.home-btn a:hover{
  background:#c62828;            /* darker red */
}
.home-btn a:active{ transform:translateY(1px); }

/* --- card --- */
.content{
  padding:20px; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,.1);
  border-radius:10px; width:90%; max-width:800px;
}
.intro-text{ font-size:2.1rem; margin-bottom:10px; color:#000; font-weight:bold; } /* 38px */
.subtext{ font-size:1.25rem; color:#595959; } /* 20px */

.dark-theme .action-btn, .dark-theme .action-btn .subtext   { color:#000000 !important; } /* fixed 'colour' -> 'color' */

.dark-theme .content {
    padding: 20px;
    background: black;
	border: 2px solid #595959;



}


.dark-theme .subtext, .dark-theme .intro-text  {

    color: #ffffff;
}



/* --- buttons --- */
.button-container{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px; width:100%; text-align:center; } /* mobile-first */
.action-btn{
  color:#fff; border:none; font-size:1.375rem; padding:25px; border-radius:8px; cursor:pointer;
  transition:background-color .3s; width:100%; min-height:100px; justify-content:center; align-items:center;
}
.action-btn:nth-child(1){ background:#B40404; }
.action-btn:nth-child(2){ background:#1D5C87!important; }
.action-btn:hover{ opacity:.9; }
.action-btn .title{ font-weight:bold; font-size:2.25rem; margin-bottom:5px; } /* 36px */
.action-btn .subtext{ font-size:1.25rem; color:#fff; } /* 20px */

#start-btn {margin-top: 20px;}

.content button{
  border:none; background:#B40404; color:white!important; font-size:1.25rem; padding:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.1); border-radius:8px; margin-top:15px; margin: auto;
}

/* Wiggles briefly, then stays still for the rest of the 10s cycle */
.wiggle-10s { transform-origin:center; animation:wiggle-burst 10s ease-in-out infinite; }
@keyframes wiggle-burst{
  0%{ transform:rotate(0deg); } 1%{ transform:rotate(3deg); } 2%{ transform:rotate(-3deg); }
  3%{ transform:rotate(3deg); } 4%{ transform:rotate(-3deg); } 5%{ transform:rotate(0deg); }
  100%{ transform:rotate(0deg); }
}
.wiggle-10s.delay-start { animation-delay:10s; }
.wiggle-10s:hover, .wiggle-10s:focus { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .wiggle-10s{ animation:none; } }

body.dark-theme .action-btn:nth-child(1),
body.dark-theme .action-btn:nth-child(2){ background:#000; }
body.dark-theme .cls-1{ fill:black; stroke-width:0; }

body.dark-theme .button-container button{ background-color: yellow!important; }

/* --- footer --- */
.footer{
     width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    color: #555;
	border-top: 1px solid #cccccc;
}

/* --- flag buttons --- */
.lang-switcher{
  bottom:20px; width:100%; display:flex; justify-content:center; gap:10px; margin-bottom:20px; pointer-events:none;
}
.lang-switcher .lang-btn{
  pointer-events:auto; font-size:1.25rem; line-height:1; width:48px; height:48px; border-radius:999px;
  border:1px solid #d0d0d0; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.lang-switcher .lang-btn:hover{ transform:translateY(-2px); }
.lang-switcher .lang-btn:focus-visible{ outline:3px solid #7aaaff; outline-offset:2px; }
.lang-switcher .lang-btn[aria-pressed="true"]{ border-color:#4c2f92; box-shadow:0 4px 10px rgba(76,47,146,.25); }
body.dark-theme .lang-switcher .lang-btn{ background:#111; border-color:#333; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); }
body.dark-theme .lang-switcher .lang-btn[aria-pressed="true"]{ background:#1a1a1a; border-color:#7d62d6; box-shadow:0 4px 12px rgba(125,98,214,.35); }

/* --- SVG size in buttons --- */
.action-btn svg{ width:70%; margin-bottom:10px; }

/* TrackTalker page */
.tt-main { padding:24px 16px; }

.section { margin:48px auto; max-width:960px; }
.section__header { margin-bottom:16px; }
.section__header h2 { font-size:1.75rem; margin-bottom:6px; } /* 28px */
.section__kicker { font-size:0.875rem; opacity:.75; }        /* 14px */

.hero { max-width:960px; margin:32px auto; text-align:center; }
.hero__title { font-size:2.25rem; line-height:1.2; margin-bottom:12px; } /* 36px */
.hero__subtitle { font-size:1.125rem; color:#595959; margin:0 auto 1.125rem; max-width:760px; }
.hero__actions { display:flex; gap:12px; justify-content:center; margin-bottom:10px; }
.hero__meta { font-size:0.875rem; opacity:.75; } /* 14px */

.btn { display:inline-block; padding:12px 1.125rem; border-radius:8px; font-weight:600; text-decoration:none; }
.btn--primary { background:#4c2f92; color:#fff; }
.btn--ghost { border:1px solid #ccc; color:inherit; background:transparent; }

.features .grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { padding:16px; border:1px solid #e8e8e8; border-radius:10px; text-align:left; background:#fff; }
.card__icon { font-size:1.5rem; margin-bottom:8px; } /* 24px */
.card__title { font-size:1.125rem; margin-bottom:6px; } /* 18px */
.card__text { font-size:1rem; color:#555; } /* 16px */

.steps { list-style:none; padding:0; max-width:720px; margin:0 auto; }
.step { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:10px 0; align-items:start; }
.step__num { width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#4c2f92; color:#fff; font-weight:700; }

.bullets { max-width:760px; margin:0 auto; padding-left:1.125rem; }
.bullets li { margin:8px 0; }

.faq__item { border:1px solid #e8e8e8; border-radius:10px; padding:12px 14px; background:#fff; margin-bottom:10px; }
.faq__item > summary { cursor:pointer; font-weight:600; }
.faq__item > p { margin-top:8px; color:#555; }

.center { text-align:center; }
.section.cta { text-align:center; }

/* Dark theme adjustments */
body.dark-theme .card,
body.dark-theme .faq__item { background:#0f0f0f; border-color:#2a2a2a; }
body.dark-theme .hero__subtitle,
body.dark-theme .card__text,
body.dark-theme .section__kicker,
body.dark-theme .hero__meta { color:#cfcfcf; }
body.dark-theme .btn--ghost { border-color:#3a3a3a; }

/* ——— APP PAGE ——— */
/* top controls */
.tt-controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:center;
  margin:15px auto;
  max-width:1000px;
  margin-top:20px;
}
.tt-controls .control{
  padding:10px 12px; box-shadow:0 4px 8px rgba(0,0,0,.1); border-radius:8px; background:#fff;
}
body.dark-theme .tt-controls .control{ background:#121212; border-color:#333; }
.tt-controls button { border:none; background:#106520!important; color:white!important; font-size:1rem; } /* 16px */

/* phrases grid (mobile-first) */
.tt-buttons{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px;                /* mobile default */
  max-width:1200px; margin:16px auto;
}
.tt-btn{
  background:#1D5C87; color:#fff; border-radius:12px; padding:1.125rem 16px;
  min-width:200px; max-width:260px; font-size:1.375rem; cursor:pointer; border:none;
}
.tt-btn:hover, .tt-btn.is-hot{ background:#000000; }

.dark-theme .tt-btn{ background:yellow; color:#000; font-weight:bold; }
.dark-theme .tt-btn:hover{ background:#ffffff; }

/* pointer */
.tt-pointer{
  position:fixed; width:38px; height:38px; background:#ff0000; border-radius:50%;
  pointer-events:none; z-index:1000; mix-blend-mode:normal;
  box-shadow:0 6px 1.125rem rgba(229, 57, 53, 0.8); /* red shadow */
  transition: background 0.3s, box-shadow 0.3s;
}

/* calibration overlay */
.tt-calib{
  position:fixed; inset:0; background:rgba(0,0,0,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; z-index:1200;
}
.tt-calib__dot{ width:40px; height:40px; background:#ff0000; border-radius:50%; margin-bottom:16px; }
.tt-calib__text{ font-size:1.625rem; text-align:center; } /* 26px */
.tt-calib__logo{ width:460px; margin-bottom:20px; }

/* manage phrases */
.manager{
  max-width:1000px; margin:0 1.125rem; padding:14px; border-radius:12px; background:#fff;
  box-shadow:0 6px 1.125rem rgba(0,0,0,.07);
}
body.dark-theme .manager{ background:#111; }
.manager h3{ margin-bottom:8px; }
.manager__row{ display:flex; gap:8px; flex-wrap:wrap; margin: auto;
    display: block; }
.manager input[type="text"]{ flex:1; min-width:220px; padding:10px; border:1px solid #ccc; border-radius:8px; }
.manager button{ padding:10px 14px;  border-radius:10px; cursor:pointer;     border: none;
    background: #106520 ;
    color: white !important;
    font-size: 1rem; }
.manager__list{ display: flex
;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    align-content: space-around;
    justify-content: space-around;
 }
.manager__chip{ display:flex; gap:6px; align-items:center; padding:8px 10px; border-radius:999px; background:#eef; border:1px solid #ccd; }
.manager__chip button{ border:none; background:transparent; cursor:pointer; }

/* --- hover bounce --- */
.box{ display:inline-block; transition:transform .4s ease; }
.box:hover{ animation:bounce .6s ease; }
@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@media (prefers-reduced-motion: reduce){ .box, .box:hover{ animation:none; transition:none; } }

/* Smooth fade + slight lift */
.intro-box { transition: opacity 2s ease, transform 2s ease, filter 2s ease; }
.intro-box.is-vanishing { opacity:0; transform:translateY(-6px) scale(0.98); filter:blur(2px); pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .intro-box{ transition:none; } }

/* ---------------- RESPONSIVE ---------------- */

/* ≥ 600px */
@media (min-width:600px){
  .logo{ height:130px; }
  .intro-text{ font-size:1.875rem; }
  .subtext{ font-size:1.125rem; padding: 0px 20px 10px 20px; }
  .action-btn .title{ font-size:1.875rem; }
  .action-btn{ padding:20px; }
  .button-container{ grid-template-columns:1fr 1fr; } /* go to two columns */
  .tt-buttons{ gap:20px; } /* override safely (appears after base) */

}

/* ≥ 768px */
@media (min-width:768px){
  .intro-text{ font-size:2rem; }
  .action-btn .title{ font-size:2rem; }
  .action-btn svg{ width:60%; }
  .tt-buttons{ gap:25px; }
}

/* ≥ 1080px */
@media (min-width:1080px){
  .logo{ height:130px; }
  .intro-text{ font-size:2rem; }
  .subtext{ font-size:1.1875rem;  padding: 0px 20px 10px 20px; }
  .action-btn .title{ font-size:2rem; }
  .action-btn .subtext{ font-size:1rem; }
  .tt-buttons{ gap:20px; } /* desktop gap */
}

/* small phone tweaks */
@media (max-width:700px){
  .logo{ height:80px; }
  .tt-btn{ min-width:46%; max-width:46%; font-size:1.125rem; padding: 0.8rem 16px; }
  .tt-calib__logo{ width:260px; }
}




/* === Emoji Editor Modal =============================================== */
.tt-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(9,16,32,.55);
  display: none;
}
.tt-modal[open] { display: block; }

.tt-dialog {
  position: absolute; inset: 0;
  margin: auto; max-width: 720px; width: calc(100% - 28px);
  max-height: min(80vh, 720px);
  background: var(--card, #fff);
  color: var(--fg, #0b1220);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2,10,32,.25);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
}
body.dark-theme .tt-dialog { background: #0f1726; color: #ebf1ff; }


.symbols .manager {
    max-width: 1000px;
    margin: 0 1.125rem;
    padding: 14px;
    /* margin: 10%; */
    width: 80%;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 1.125rem rgba(0, 0, 0, .07);
}

.symbols .manager .tt-emoji-grid button {
	font-size: 2rem;
}

.tt-dialog__header {
  padding: 14px 16px; font: 700 18px/1.2 Roboto, system-ui, sans-serif;
  border-bottom: 1px solid rgba(128,145,181,.25);
  display: flex; align-items: center; gap: 10px;
}
.tt-dialog__body {
  padding: 12px 16px; display: grid; gap: 12px; overflow: auto;
}
.tt-dialog__row { display: grid; gap: 8px; }
.tt-dialog__row--pick { grid-template-columns: 110px 1fr; align-items: start; }

.tt-emoji-preview {
  font-size: 64px; line-height: 1; width: 100%; height: 110px;
  display: grid; place-items: center;
  border-radius: 14px; border: 2px dashed rgba(128,145,181,.45);
  background: rgba(128,145,181,.06);
}
.tt-emoji-preview[data-empty="1"] { opacity: .6; }

.tt-emoji-search {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sym-border,#e6ebf5);
  background: var(--sym-bg,#fff); color: inherit;
}

/* Inline editor layout helpers */
.tt-inline-textwrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Make the inline editor a touch wider and breathe */
.tt-inline-body {
/*  width: min(760px, 100%);*/
  padding: 12px 0;
}

/* Grid: white tiles, tidy spacing */
.tt-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.tt-emoji-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  font-size: 28px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;                /* <-- white boxes */
  cursor: pointer;
  user-select: none;
  transition: box-shadow .15s ease, transform .02s ease, border-color .15s ease;
}

.tt-emoji-grid button {background: white!important;  box-shadow: 0 1px 6px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08);}

.tt-emoji-cell:hover {
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

.tt-emoji-cell[aria-selected="true"] {
  border-color: #9aa4b2;           /* subtle, not green */
}

/* Text row with preview on the LEFT */
.tt-inline-textrow { margin-top: 10px; }

.tt-inline-label {
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.tt-inline-textwrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Small preview badge (white, left of input) */
.tt-emoji-preview--sm {
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;                /* <-- white */
  user-select: none;
  flex: 0 0 auto;
}

.tt-emoji-preview[data-empty="1"] {
  opacity: .6;
}

/* Input appearance reuse */
.tt-emoji-search {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  outline: none;
}
.tt-emoji-search:focus {
  border-color: #9aa4b2;
  box-shadow: 0 0 0 2px rgba(154,164,178,.15);
}

/* Footer spacing */
.tt-inline-actions {
  padding: 12px 0;
  gap: 8px;
  display: flex;
}

/* Small preview badge near the text input */
.tt-emoji-preview--sm {
  width: 40px;
  height: 40px;
  font-size: 28px;          /* emoji size */
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--border, #d6d6d6);
  background: var(--card, #fff);
  user-select: none;
  flex: 0 0 auto;
}

/* Optional: dim when empty */
.tt-emoji-preview[data-empty="1"] {
  opacity: 0.6;
}

.tt-emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px; padding-bottom: 6px;
}
.tt-emoji-cell {
  font-size: 22px; line-height: 1; padding: 10px 0;
  border-radius: 12px; border: 1px solid var(--sym-border,#e6ebf5);
  background: var(--sym-bg,#fff); cursor: pointer; user-select: none;
  display: grid; place-items: center;
}
.tt-emoji-cell:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,10,32,.12); }
.tt-emoji-cell[aria-selected="true"] { outline: 3px solid var(--ring,#7aa2ff); }

.tt-dialog__footer {
  display: flex; justify-content: space-evenly; align-items: center;
  gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(128,145,181,.25);
}
.tt-btn-ghost, .tt-btn-primary {
  padding: 10px 14px; border-radius: 12px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
}
.tt-btn-ghost { background: red!important;  }
.tt-btn-primary { background:#106520 !important; }


/* Hide inline add row in Symbols UI */
body[data-tt-style="symbols"] #custom-input,
body[data-tt-style="symbols"] #add-custom {
  display: none !important;
}

/* (Optional) tighten row gap when inputs are hidden */
body[data-tt-style="symbols"] .manager__row {
  gap: 8px;
}


@media (max-width:700px){
/* SYMBOL buttons – big, chunky cards */
.tt-symbol {
  display: grid;
  grid-template-rows: 1fr auto;         /* icon grows, label sits below */
  justify-items: center;
  align-items: center;
  gap: 16px;

  padding: 16px 12px;                   /* chunkier */
  min-height: 50px;                    /* tall for easy tap */
  border-radius: 22px;                  /* softly rounded */

  background: var(--sym-bg);
  border: 2px solid var(--sym-border);
  box-shadow: 0 10px 16px rgba(2, 10, 32, 0.08);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .06s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.tt-symbol:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2, 10, 32, 0.12);
}

.tt-symbol:active {
  transform: translateY(0) scale(.995);
  box-shadow: 0 8px 20px rgba(2, 10, 32, 0.10);
}

.tt-symbol:focus-visible {
  outline: 3px solid transparent;
  box-shadow:
    0 0 0 6px var(--ring),
    0 14px 28px rgba(2, 10, 32, 0.12);
}

/* Huge emoji */
.tt-symbol__icon {
  font-size: clamp(40px, 12vw, 10px);  /* was ~72px */
  line-height: 1;
}

/* Bold label, very legible */
.tt-symbol__label {
  text-align: center;
  color: var(--fg);
  font: 800 clamp(10px, 3vw, 22px)/1.1 Roboto, system-ui, sans-serif;
  letter-spacing: .2px;
	color: BLACK;
}
}

/* Make the manager panel use the full page width on desktop */
@media (min-width: 900px) {
  .manager {
    max-width: none !important;   /* override any earlier constraint */
    width: 80%;
    margin: 0;                    /* remove auto-centering if present */
    padding-inline: 16px;         /* keep a small gutter */
  }
}

/* If a wrapper is constraining width, relax it too */
.manager .content, .manager .tt-dialog__body {
  max-width: none !important;
}

/* Emoji grid that fills the row and stays centered */
.tt-emoji-grid {
  display: grid;
  /* Stretch columns to fill the row, auto-fit how many will fit */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 12px;
  align-items: center;
}

/* Make each cell fill its grid track and remain square */
.tt-emoji-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* optional: center the glyph inside */
  display: grid;
  place-items: center;
}

/* If you prefer fixed-size squares but centered (alternate option):
.tt-emoji-grid { grid-template-columns: repeat(auto-fit, 64px); justify-content: center; }
.tt-emoji-cell { width: 64px; height: 64px; }
*/


@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {
  .tt-symbol {
    min-width: 175px;
	  }
	  
.content button {

    min-height: 390px;
}

}



@media only screen and (max-width: 800px)  {
  
 .tt-symbol {
    min-width: 175px;
	  }
}

@media only screen and (max-width: 640px)  {
  
 .tt-symbol {
    min-width: 105px;
	  }
}



/* Large devices: desktops and wide laptops */
@media only screen and (min-width: 1025px) {
  /* Your desktop-specific styles */
  .tt-symbol {
    min-width: 175px;
	  }
}

.footer .feedback-btn {
  display: inline-block;
  margin-bottom: 15px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1.5px solid #007BFF;
  color: #007BFF;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  background: transparent;
}

.footer .feedback-btn:hover {
  background: #007BFF;
  color: #fff;
}
.visually-hidden { 
  position: absolute; 
  left: -9999px; 
}




/* Light default */
body.symbols {
  background-image: linear-gradient(29deg, rgba(219, 87, 205, 1), rgba(47, 237, 167, 1));
}

/* Dark whenever ANY .dark-theme exists in the document */
html:has(.dark-theme) .symbols,
body:has(.dark-theme) .symbols {
  background-image: linear-gradient(29deg,
    rgba(36, 55, 111, 1) 10%,
    rgba(101, 90, 167, 1) 44%,
    rgba(133, 76, 185, 1) 67%,
    rgba(56, 144, 170, 1) 85%,
    rgba(18, 178, 138, 1)
  );
}