:root{
    --green:#38BDF8; --green-dark:#0EA5E9;
    --blue:#1CB0F6; --blue-dark:#1899D6;
    --red:#FF4B4B; --red-dark:#E64444;
    --gold:#FFC800; --gold-dark:#E6B400;
    --purple:#CE82FF; --purple-dark:#B868E0;
    --ink:#3C3C3C; --ink-soft:#777777;
    --bg:#FFFFFF; --bg-soft:#F7F7F7;
    --line:#E5E5E5;
    --face-back-bg:#E3F5FD; --face-back-icon-bg:#CDEBFA;
    --deck-active-bg:#DFF3FD; --cat-active-bg:#E4F3FC; --streak-bg:#FFF3CE;
    --mastered-green:#16A34A; --mastered-green-bg:#DCFCE7; --mastered-green-dark:#15803D;
    color-scheme: light;
  }
  :root[data-theme="dark"]{
    --ink:#ECECEC; --ink-soft:#9A9A9A;
    --bg:#22252B; --bg-soft:#15171B;
    --line:#34383F;
    --face-back-bg:#0F2733; --face-back-icon-bg:#123344;
    --deck-active-bg:#0F2733; --cat-active-bg:#122531; --streak-bg:#2E2710;
    --mastered-green:#4ADE80; --mastered-green-bg:#0F2E1D; --mastered-green-dark:#22C55E;
    color-scheme: dark;
  }
  body{ transition: background-color 0.25s, color 0.25s; }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
  *{ scrollbar-width:thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar{ width:8px; height:8px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  *::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
  html,body{margin:0; padding:0;}

  /* Generic loading placeholder, reused wherever a page shows content that
     only exists after a fetch resolves (deck list, stage card, tables...).
     Kept theme-aware via --line so it works in light and dark automatically. */
  @keyframes skeleton-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:0.45; } }
  .skeleton{ background: var(--line); border-radius:10px; animation: skeleton-pulse 1.3s ease-in-out infinite; }
  .skeleton-pill{ width:70px; height:30px; border-radius:14px; }
  .skeleton-deck-btn{ width:78px; height:64px; border-radius:14px; flex:0 0 auto; }
  .skeleton-card{ position:absolute; inset:0; border-radius:22px; }
  .skeleton-row{ height:14px; border-radius:6px; }
  body{
    font-family:'Nunito', sans-serif;
    background: var(--bg-soft);
    color: var(--ink);
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }
  .ic{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px 8px;
  }
  .logo{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size: 21px;
    color: var(--ink);
    display:flex; align-items:center; gap:6px;
  }
  .logo .a{ color: var(--green); }
  .logo .s{ color: var(--ink-soft); font-weight:600; font-size:16px; }
  .streak-pill{
    display:flex; align-items:center; gap:5px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--streak-bg); color: var(--gold-dark);
    cursor:pointer;
  }
  .streak-pill .ic{ width:17px; height:17px; color: var(--gold-dark); }

  .known-words-clear-btn{
    width:100%;
    margin-bottom: 14px;
  }
  .known-words-list{ display:flex; flex-direction:column; }
  .known-words-deck-header{
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:12.5px;
    text-transform:uppercase; letter-spacing:0.03em;
    color: var(--ink-soft);
    padding: 14px 2px 6px;
  }
  .known-words-deck-header:first-child{ padding-top:2px; }
  .known-word-row{
    display:flex; align-items:center; gap:10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
  }
  .known-word-row:last-child{ border-bottom:none; }
  .known-word-icon{
    width:34px; height:34px; flex:0 0 auto;
    border-radius:50%;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .known-word-icon .ic{ width:16px; height:16px; color: var(--blue); }
  .known-word-icon .face-emoji{ font-size:16px; }
  .known-word-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
  .known-word-main{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; color: var(--ink); }
  .known-word-sub{ font-size:12px; font-weight:600; color: var(--ink-soft); }
  .known-word-remove{
    flex:0 0 auto;
    width:28px; height:28px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .known-word-remove .ic{ width:13px; height:13px; }
  .known-words-empty{ text-align:center; color: var(--ink-soft); font-weight:600; padding: 24px 0; }
  .known-words-load-more{
    display:block;
    width:100%;
    margin-top: 10px;
    padding: 11px;
    border-radius: 12px;
    border: 2px dashed var(--line);
    background: none;
    color: var(--blue-dark);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer;
  }
  #knownWordsBody{
    max-height: min(60vh, 420px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .header-right{ display:flex; align-items:center; gap:8px; }
  .theme-toggle{
    width:36px; height:36px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
  }
  .theme-toggle .ic{ width:17px; height:17px; }
  .theme-toggle:active{ transform: scale(0.92); }
  #randomBtn{ font-size:18px; }
  #typingToggle{ font-size:16px; }
  #logsLink{ font-size:16px; text-decoration:none; }
  #logsLink[hidden]{ display:none; }
  #typingToggle.active{ background: var(--cat-active-bg); border-color: var(--blue); }

  /* Phones only: drop the logo, keep the streak pill on the left and the
     icon buttons grouped on the right. */
  @media (max-width: 640px){
    header{ justify-content:flex-start; }
    .logo{ display:none; }
    .header-right{ display:contents; }
    .streak-pill{ order:1; }
    #randomBtn{ order:2; margin-left:auto; }
    #typingToggle{ order:3; margin-left:8px; }
    #logsLink{ order:4; margin-left:8px; }
    #profileBadge{ order:5; margin-left:8px; }
  }

  .deck-toggle{
    display:flex; gap:7px;
    padding: 6px 18px 10px;
  }
  .deck-btn{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 9px 4px;
    border-radius: 14px;
    background: var(--bg);
    border: 2px solid var(--line);
    border-bottom: 4px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
  }
  .deck-btn .ic{ width:18px; height:18px; }
  .deck-btn.active{
    background: var(--deck-active-bg);
    border-color: var(--green);
    color: var(--green-dark);
  }
  .deck-emoji{ font-size:18px; line-height:1; }
  .deck-btn:active{ transform: translateY(2px); border-bottom-width:2px; }

  .deck-reorder-bar{ display:flex; justify-content:center; padding: 0 18px 8px; }
  .deck-reorder-toggle{
    display:flex; align-items:center; gap:6px;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink-soft);
    cursor:pointer;
  }
  .deck-reorder-toggle .ic{ width:14px; height:14px; }
  .deck-reorder-toggle.active{
    background: var(--deck-active-bg);
    color: var(--green-dark);
  }

  .deck-toggle.reorder-mode .deck-btn{ cursor:default; position:relative; padding-bottom:6px; }
  .deck-move-controls{
    display:flex; gap:4px; margin-top:2px;
  }
  .deck-move-btn{
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink-soft);
    cursor:pointer;
    padding:0;
  }
  .deck-move-btn .ic{ width:12px; height:12px; }
  .deck-move-btn:disabled{ opacity:0.3; cursor:default; }

  .cat-row-wrap{ position:relative; display:flex; align-items:center; }
  .cat-row{
    display:flex; gap:8px;
    padding: 0 18px 10px;
    overflow-x:auto;
    scrollbar-width:none;
    flex:1; min-width:0;
  }
  .cat-row::-webkit-scrollbar{ display:none; }
  .cat-row-arrow{
    display:none;
    flex:0 0 auto;
    width:28px; height:28px;
    margin: 0 4px 10px;
    border-radius:50%;
    border:1px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    font-size:16px; line-height:1;
    cursor:pointer;
  }
  @media (hover:hover) and (pointer:fine){
    .cat-row-arrow{ display:flex; align-items:center; justify-content:center; }
  }
  .cat-chip{
    flex:0 0 auto;
    display:flex; align-items:center; gap:6px;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    padding: 8px 13px;
    border-radius: 13px;
    background: var(--bg);
    border: 2px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
  }
  .cat-chip .ic{ width:15px; height:15px; }
  .cat-chip.active{
    background: var(--cat-active-bg);
    border-color: var(--blue);
    color: var(--blue-dark);
  }

  main{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding: 4px 18px 6px;
    position:relative;
  }

  .info-row{
    width:100%; max-width:380px;
    display:flex; gap:8px; flex-wrap:wrap;
    margin-bottom:8px;
  }
  .info-pill{
    display:flex; align-items:center; gap:5px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 5px 10px;
    border-radius: 12px;
    background: var(--bg-soft);
  }
  .info-pill .ic{ width:15px; height:15px; }
  .info-pill.due{ color: var(--blue-dark); }
  .info-pill.know{ color: var(--green-dark); }
  .info-pill.retry{ color: var(--red-dark); }

  .stage{
    width:100%; max-width: 350px;
    height: 48vh; max-height: 390px;
    min-height: 260px;
    position:relative;
    touch-action: pan-y;
  }
  .combo-popup{
    position:absolute;
    top:12%; left:85%;
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:38px;
    color: var(--gold-dark);
    text-shadow: 0 2px 0 rgba(0,0,0,0.1);
    z-index:5;
    pointer-events:none;
    animation: comboPop 0.9s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes comboPop{
    0%{ transform: translate(-50%, 10px) scale(0.4) rotate(-8deg); opacity:0; }
    22%{ transform: translate(-50%, -14px) scale(1.3) rotate(4deg); opacity:1; }
    40%{ transform: translate(-50%, -18px) scale(1) rotate(0deg); opacity:1; }
    100%{ transform: translate(-50%, -60px) scale(1) rotate(0deg); opacity:0; }
  }
  .combo-popup.milestone{
    font-size:56px;
    color: var(--red-dark);
    text-shadow: 0 3px 0 rgba(0,0,0,0.12);
    animation: comboPopBig 1.15s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes comboPopBig{
    0%{ transform: translate(-50%, 14px) scale(0.3) rotate(-14deg); opacity:0; }
    20%{ transform: translate(-50%, -20px) scale(1.55) rotate(6deg); opacity:1; }
    32%{ transform: translate(-50%, -24px) scale(1.15) rotate(-3deg); opacity:1; }
    45%{ transform: translate(-50%, -26px) scale(1.25) rotate(2deg); opacity:1; }
    60%{ transform: translate(-50%, -28px) scale(1.15) rotate(0deg); opacity:1; }
    100%{ transform: translate(-50%, -80px) scale(1.1) rotate(0deg); opacity:0; }
  }
  .combo-spark{
    position:absolute;
    top:50%; left:50%;
    width:7px; height:7px;
    border-radius:50%;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1);
    animation: comboSpark 0.8s ease-out forwards;
  }
  @keyframes comboSpark{
    0%{ transform: translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1); opacity:1; }
    100%{ transform: translate(-50%,-50%) rotate(var(--angle)) translateX(52px) scale(0); opacity:0; }
  }
  .confetti-layer{
    position:fixed; inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:60;
  }
  .confetti-piece{
    position:absolute;
    top:-20px;
    width:7px; height:13px;
    opacity:0.9;
    animation-name: confettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .confetti-piece.round{ border-radius:50%; }
  @keyframes confettiFall{
    0%{ transform: translate(0,0) rotate(0deg); opacity:1; }
    100%{ transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity:0.85; }
  }

  .card-drag{
    position:absolute; inset:0;
    will-change: transform, opacity;
  }
  .card-drag.behind{
    z-index:1;
    transform: scale(0.94) translateY(10px);
  }
  .card-drag.top{ z-index:2; }
  .card-flip{
    position:relative; width:100%; height:100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
  }
  .card-flip.flipped{ transform: rotateY(180deg); }
  .face{
    position:absolute; inset:0;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    border-radius: 22px;
    background: var(--bg);
    border: 2px solid var(--line);
    box-shadow: 0 6px 0 var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 26px 22px;
    text-align:center;
  }
  .face-back{ transform: rotateY(180deg); background: var(--face-back-bg); border-color: var(--green); box-shadow: 0 6px 0 var(--green); }

  .face-icon{
    width:44px; height:44px;
    flex-shrink:0;
    border-radius:50%;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 14px;
  }
  .face-icon .ic{ width:23px; height:23px; color: var(--blue); }
  .face-back .face-icon{ background: var(--face-back-icon-bg); }
  .face-back .face-icon .ic{ color: var(--green-dark); }

  .eyebrow{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px;
    letter-spacing:0.08em; text-transform:uppercase;
    color: var(--purple-dark);
    margin-bottom: 10px;
  }
  .face-back .eyebrow{ color: var(--green-dark); }

  .word{
    font-family:'Fredoka', sans-serif; font-weight:600;
    font-size: clamp(23px, 7vw, 31px);
    line-height:1.2;
    color: var(--ink);
  }
  .sub{ margin-top:8px; font-size:13.5px; color: var(--ink-soft); font-weight:600; }
  .word.flag-big{ font-size: 84px; line-height:1; }

  .promo-word{
    font-family:'Fredoka', sans-serif; font-weight:600;
    font-size:19px; line-height:1.25;
    color: var(--ink);
  }
  .promo-actions{
    display:flex; flex-direction:column; gap:8px;
    width:100%; margin-top:18px;
  }
  .promo-actions button{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding:11px 18px;
    border-radius:14px;
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff; cursor:pointer;
  }
  .promo-actions button.ghost{
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line); border-bottom:4px solid var(--line);
  }

  .stamp{
    position:absolute; top:22px;
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:16px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 3px solid;
    letter-spacing: 0.04em;
    opacity:0;
    pointer-events:none;
    transform: rotate(-12deg);
  }
  .stamp.right{ right:18px; color: var(--green); border-color: var(--green); }
  .stamp.left{ left:18px; color: var(--red); border-color: var(--red); transform: rotate(12deg); }

  .hint-row{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:10px;
    font-size:12px; color: var(--ink-soft); font-weight:700;
  }
  .hint-row .ic{ width:14px; height:14px; }

  .typing-row{
    display:none;
    width:100%; max-width:380px;
    gap:8px;
    margin-top:10px;
  }
  .typing-input{
    flex:1; min-width:0;
    font-family:'Fredoka', sans-serif; font-size:16px; font-weight:600;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    text-align:center;
  }
  .typing-input:focus{ outline:none; border-color: var(--blue); }
  .typing-input.correct{ border-color: var(--green); color: var(--green-dark); }
  .typing-input.wrong{ border-color: var(--red); color: var(--red-dark); }
  .typing-check-btn{
    flex:0 0 auto;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--blue); border:none; border-bottom:4px solid var(--blue-dark);
    color:#fff; cursor:pointer;
  }
  .typing-check-btn:active{ transform: translateY(2px); border-bottom-width:2px; }
  .typing-feedback{
    display:none;
    align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
    width:100%; max-width:380px;
    margin-top:10px;
    padding: 10px 14px;
    border-radius: 14px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    text-align:center;
  }
  .typing-feedback .ic{ width:17px; height:17px; }
  .typing-feedback.correct{ background: var(--face-back-bg); color: var(--green-dark); }
  .typing-feedback.wrong{ background: var(--bg-soft); color: var(--red-dark); }
  .typing-feedback.wrong .ic{ color: var(--red); }
  .typing-override-btn{
    flex:0 0 auto;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 2px solid var(--green);
    background: var(--bg);
    color: var(--green-dark);
    cursor:pointer;
  }

  .actions{
    width:100%; max-width:380px;
    display:flex; align-items:center; justify-content:center;
    gap: 26px;
    margin-top: 6px;
  }
  .action-btn{
    width:58px; height:58px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border: none;
    cursor:pointer;
    background: var(--bg);
  }
  .action-btn.no{ border:2px solid var(--red); border-bottom:4px solid var(--red); }
  .action-btn.no .ic{ width:25px; height:25px; color: var(--red); }
  .action-btn.yes{ border:2px solid var(--green); border-bottom:4px solid var(--green); }
  .action-btn.yes .ic{ width:25px; height:25px; color: var(--green); }
  .action-btn:active{ transform: translateY(2px); border-bottom-width:2px; }

  .util-row{
    width:100%; max-width:380px;
    display:flex; align-items:center; justify-content:space-between;
    margin-top: 12px;
    padding: 0 6px;
  }
  .util-btn{
    display:flex; align-items:center; gap:5px;
    background:none; border:none;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:11px;
    color: var(--ink-soft);
    padding: 6px;
    cursor:pointer;
  }
  .util-btn .ic{ width:15px; height:15px; }
  .util-btn.center-label{ font-family:'Fredoka'; font-size:12px; color:var(--blue-dark); }

  .progress-wrap{
    width:100%; max-width:380px;
    height: 9px;
    background: var(--line);
    border-radius: 6px;
    overflow:hidden;
    margin-bottom: 12px;
  }
  .progress-bar{ height:100%; background: var(--green); border-radius:6px; transition: width 0.3s; }

  .empty{ text-align:center; padding: 44px 20px; }
  .empty .face-icon{ margin:0 auto 16px; width:64px; height:64px; background: var(--deck-active-bg); }
  .empty .face-icon .ic{ width:32px; height:32px; color: var(--green-dark); }
  .empty .face-icon.face-emoji{ font-size:32px; }
  .empty h2{ font-family:'Fredoka', sans-serif; font-size:20px; margin:0 0 6px; }
  .empty p{ color: var(--ink-soft); font-weight:600; font-size:13.5px; margin:0 0 18px; }
  .empty button{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 12px 22px;
    border-radius:14px;
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff; cursor:pointer;
    margin: 0 6px 8px;
  }
  .empty button.ghost{
    background: var(--bg); color: var(--ink-soft);
    border:2px solid var(--line); border-bottom:4px solid var(--line);
  }

  .deck-toggle{ overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; justify-content:center; justify-content:safe center; }
  .deck-toggle::-webkit-scrollbar{ display:none; }
  .deck-btn{ flex:0 0 auto; min-width:78px; }
  .add-deck-btn{
    border-style: dashed;
    border-width: 2px;
    color: var(--blue-dark);
    border-color: var(--blue);
  }
  .face-emoji{ font-size:22px; line-height:1; }

  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,0.45);
    z-index:50;
    align-items:flex-end;
    justify-content:center;
  }
  .modal-overlay.open{ display:flex; }
  .modal-card{
    width:100%; max-width:420px;
    max-height:88vh;
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
  }
  .modal-header h3{ font-family:'Fredoka', sans-serif; font-size:17px; margin:0; }
  .modal-close{
    width:30px; height:30px; border-radius:50%;
    border:none; background: var(--bg-soft); color: var(--ink-soft);
    font-size:16px; cursor:pointer;
  }
  .modal-close::before{ content:"✕"; }
  .modal-body{
    flex:1; min-height:0;
    padding: 14px 18px;
    overflow-y:auto;
  }
  .modal-label{
    display:block;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--ink-soft);
    margin: 12px 0 6px;
  }
  .modal-input{
    width:100%;
    font-family:'Nunito', sans-serif; font-size:14px; font-weight:600;
    line-height:20px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
  }
  .modal-input-emoji{ width:70px; text-align:center; font-size:20px; cursor:pointer; }

  .modal-field-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
  .modal-field-col{ flex:1; min-width:0; }
  .modal-field-col-emoji{ flex:0 0 auto; }
  .modal-field-col-emoji .modal-input-emoji{ width:44px; padding-left:8px; padding-right:8px; }

  .json-import-block{
    margin-top:10px;
  }
  .json-import-block[open]{
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 2px 13px;
    background: var(--bg-soft);
  }
  .json-import-summary{
    padding: 4px 0;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    color: var(--blue-dark);
    cursor:pointer;
    list-style: none;
    opacity:0.85;
  }
  .json-import-block[open] .json-import-summary{ padding: 11px 0; opacity:1; }
  .json-import-summary:hover{ opacity:1; }
  .json-import-summary::-webkit-details-marker{ display:none; }
  .json-import-body{ padding: 2px 0 14px; display:flex; flex-direction:column; }
  .json-example{
    font-family: monospace; font-size:12px; line-height:1.5;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
    overflow-x:auto;
    color: var(--ink-soft);
    white-space:pre;
  }
  .ai-prompt-box{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
  .ai-prompt-text{
    width:100%;
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:600;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink-soft);
    resize:vertical;
  }
  .copy-prompt-btn{
    align-self:flex-start;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid var(--blue);
    background: none;
    color: var(--blue-dark);
    cursor:pointer;
  }
  .json-import-textarea{
    width:100%;
    font-family: monospace; font-size:12.5px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    resize:vertical;
    margin-top:10px;
  }
  .json-import-btn{ margin-top:10px; }
  .json-import-error{
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:700;
    color: var(--red);
    margin-top:8px;
    min-height:1px;
  }

  .premium-locked:not([hidden]){
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .premium-locked{
    margin-top:10px;
    padding:12px 14px;
    border-radius:14px;
    background: var(--mastered-green-bg);
    border:2px dashed var(--mastered-green);
  }
  .premium-locked-text{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--mastered-green-dark);
  }
  .premium-locked-btn{
    width:auto; flex-shrink:0; padding:9px 14px;
    background: var(--mastered-green); border:none; border-bottom:4px solid var(--mastered-green-dark);
    color:#fff;
  }

  .cards-list{ display:flex; flex-direction:column; gap:8px; }
  .card-row{
    display:flex; align-items:center; gap:6px;
  }
  .card-row input{
    flex:1; min-width:0;
    font-family:'Nunito', sans-serif; font-size:13.5px; font-weight:600;
    padding: 10px 11px;
    border-radius: 10px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
  }
  .card-row .remove-row{
    flex:0 0 auto;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--red);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .card-row .remove-row .ic{ width:15px; height:15px; }
  .add-card-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%;
    margin-top:10px;
    padding: 11px;
    border-radius: 12px;
    border: 2px dashed var(--line);
    background: none;
    color: var(--blue-dark);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px;
    cursor:pointer;
  }
  .add-card-btn::before{ content:"+ Ajouter une carte"; }
  .modal-actions{
    display:flex; gap:10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
  }
  .modal-btn{
    flex:1;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    padding: 12px;
    border-radius: 14px;
    cursor:pointer;
  }
  .modal-btn.primary{
    background: var(--green); border:none; border-bottom:4px solid var(--green-dark);
    color:#fff;
  }
  .modal-btn.danger{
    background: var(--bg); color: var(--red);
    border: 2px solid var(--red); border-bottom:4px solid var(--red);
  }

  #profileBadge{ font-size:16px; }

  .profile-edit-actions{ flex-direction:column; gap:10px; }
  .profile-danger-row{ display:flex; gap:10px; width:100%; }

  .site-footer{
    display:flex; justify-content:center; align-items:center; gap:8px;
    padding:24px 16px 40px;
    font-family:'Nunito', sans-serif; font-size:12px;
    color: var(--ink-soft);
  }
  .site-footer a{ color: var(--ink-soft); text-decoration:underline; }
  .site-footer a:hover{ color: var(--ink); }

  .auth-intro{
    font-family:'Nunito', sans-serif; font-size:13px; color: var(--ink-soft);
    margin:0 0 16px;
    text-align:center;
  }
  .auth-error{
    font-family:'Nunito', sans-serif; font-size:12.5px; font-weight:700;
    color: var(--red);
    margin-top:8px;
    min-height:1px;
  }

  .google-signin-div{ display:flex; justify-content:center; }

  .premium-box{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin:0 0 16px;
    padding:14px 16px;
    border-radius:16px;
    background: linear-gradient(135deg, var(--mastered-green-bg), var(--mastered-green) 400%);
    border:2px solid var(--mastered-green);
  }
  .premium-box-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .premium-box-text strong{ font-family:'Fredoka', sans-serif; font-size:14px; color: var(--mastered-green-dark); }
  .premium-box-text span{ font-family:'Nunito', sans-serif; font-size:11.5px; color: var(--ink-soft); }
  .premium-box #premiumActionBtn{
    width:auto; padding:9px 14px; flex-shrink:0;
    background: var(--mastered-green); border:none; border-bottom:4px solid var(--mastered-green-dark);
  }
  .premium-info-link{
    display:block;
    text-align:center;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--mastered-green-dark);
    text-decoration:none;
    margin:-8px 0 16px;
  }
  .premium-info-link:hover{ text-decoration:underline; }

  .profile-section-title{
    font-family:'Nunito', sans-serif; font-weight:800; font-size:11px;
    text-transform:uppercase; letter-spacing:0.04em;
    color: var(--ink-soft);
    margin: 20px 0 8px;
  }
  .profile-section-title.first{ margin-top:0; }

  .profile-stats-section{ margin:0 0 16px; }

  .profile-chart-card{
    background: var(--mastered-green-bg);
    border-radius:14px;
    padding:12px 14px 10px;
    margin:8px 0 0;
  }
  .profile-chart-title{
    font-family:'Nunito', sans-serif; font-size:11px; font-weight:700;
    color: var(--mastered-green-dark);
    margin-bottom:8px;
  }
  .profile-chart-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
  }
  .profile-chart-nav-btn{
    width:26px; height:26px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--mastered-green-dark);
    font-size:16px;
    cursor:pointer;
  }
  .profile-chart-nav-btn:disabled{ opacity:0.35; cursor:default; }
  .profile-chart-nav-label{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    color: var(--ink);
  }
  .profile-chart{
    display:flex; align-items:flex-end; gap:2px;
  }
  .profile-chart-col{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center;
  }
  .profile-chart-bar-area{
    height:56px; width:100%;
    display:flex; align-items:flex-end; justify-content:center;
    border-bottom:1px solid var(--mastered-green);
  }
  .profile-chart-bar{
    width:70%; max-width:16px; min-height:0;
    border-radius:3px 3px 0 0;
    background: var(--mastered-green);
  }
  .profile-chart-tick{
    margin-top:4px;
    font-family:'Nunito', sans-serif; font-size:10px; font-weight:700; color: var(--ink-soft);
  }
  .profile-chart-caption{
    margin-top:8px;
    font-family:'Nunito', sans-serif; font-size:10.5px; color: var(--ink-soft);
  }
  .profile-chart-empty{
    align-self:center;
    font-family:'Nunito', sans-serif; font-size:12px; color: var(--ink-soft);
  }

  .deck-breakdown{ display:flex; flex-direction:column; gap:10px; }
  .deck-breakdown-row{ display:flex; align-items:center; gap:10px; }
  .deck-breakdown-emoji{ font-size:18px; flex-shrink:0; width:22px; text-align:center; }
  .deck-breakdown-body{ flex:1; min-width:0; }
  .deck-breakdown-name{
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    color: var(--ink);
    margin-bottom:4px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .deck-breakdown-bar-track{
    height:8px;
    border-radius:4px;
    background: var(--bg);
    overflow:hidden;
  }
  .deck-breakdown-bar-fill{
    height:100%;
    border-radius:4px;
    background: var(--mastered-green);
  }
  .deck-breakdown-count{
    flex-shrink:0;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12px;
    color: var(--mastered-green-dark);
  }

  .profile-stats{
    display:flex; gap:8px;
  }
  .profile-stat{
    flex:1; min-width:0;
    background: var(--mastered-green-bg);
    border-radius:12px;
    padding:10px 6px;
    text-align:center;
  }
  .profile-stat-clickable{ border:none; cursor:pointer; font:inherit; text-decoration:none; color:inherit; }
  .profile-stat-num{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:18px; color: var(--mastered-green-dark); }
  .profile-stat-label{ font-family:'Nunito', sans-serif; font-size:10px; color: var(--ink-soft); }

  .profile-settings-grid{
    display:flex; gap:8px;
  }
  .profile-setting-tile{
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background: var(--bg-soft);
    border-radius:14px;
    padding:12px 10px;
  }
  .profile-setting-label{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; color: var(--ink); }

  img.emoji{
    height: 1em; width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
  }
  .deck-emoji img.emoji, .face-emoji img.emoji{ height:1em; width:1em; }
  .word.flag-big img.emoji{ height:1em; width:1em; }

  .emoji-cat-tabs{
    display:flex; gap:6px;
    overflow-x:auto; scrollbar-width:none;
    margin: 12px 0 10px;
  }
  .emoji-cat-tabs::-webkit-scrollbar{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .emoji-cat-tabs{
      scrollbar-width:thin;
      padding-bottom:8px;
    }
    .emoji-cat-tabs::-webkit-scrollbar{ display:block; height:8px; }
    .emoji-cat-tabs::-webkit-scrollbar-track{ background:transparent; }
    .emoji-cat-tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
    .emoji-cat-tabs::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
  }
  .emoji-cat-tab{
    flex:0 0 auto;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12px;
    padding: 7px 12px;
    border-radius: 12px;
    background: var(--bg-soft);
    border: 2px solid var(--line);
    color: var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
  }
  .emoji-cat-tab.active{
    background: var(--cat-active-bg);
    border-color: var(--blue);
    color: var(--blue-dark);
  }
  .emoji-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 64px;
    gap: 6px;
    max-height: 40vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .emoji-choice{
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0;
    overflow: hidden;
    display:flex; align-items:center; justify-content:center;
    font-size: 22px;
    white-space: nowrap;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--bg-soft);
    cursor:pointer;
  }
  .emoji-choice:active{ transform: scale(0.9); }
  .emoji-choice img.emoji{ height:1.1em; width:1.1em; margin:0; }

  .streak-cal-record{
    text-align:center;
    font-family:'Nunito', sans-serif; font-weight:700; font-size:12.5px;
    color: var(--gold-dark);
    background: var(--streak-bg);
    border-radius:12px;
    padding:8px;
    margin-bottom:12px;
  }
  .streak-cal-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 10px;
  }
  .streak-cal-nav-btn{
    width:32px; height:32px;
    border-radius:50%;
    border:none;
    background: var(--bg-soft);
    color: var(--ink-soft);
    font-size:18px;
    cursor:pointer;
  }
  .streak-cal-label{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px;
    color: var(--ink);
    text-transform:capitalize;
  }
  .streak-cal-weekdays{
    display:grid; grid-template-columns:repeat(7, 1fr);
    text-align:center;
    font-size:11px; font-weight:700;
    color: var(--ink-soft);
    margin-bottom:4px;
  }
  .streak-cal-grid{
    display:grid; grid-template-columns:repeat(7, 1fr);
    grid-auto-rows: 40px;
    gap:4px;
  }
  .streak-cal-day{
    min-width:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    font-size:13px; font-weight:600;
    color: var(--ink);
  }
  .streak-cal-day.empty{ visibility:hidden; }
  .streak-cal-day.done{ background: var(--streak-bg); color: var(--gold-dark); }
  .streak-cal-day.today{ border:2px solid #34383F; }