/* from index.html <style> */
  :root{
    --bg:#0A0A0A;
    --bg-raised:#161616;
    --line:rgba(255,255,255,0.12);
    --line-soft:rgba(255,255,255,0.07);
    --ink:#F4F4F2;
    --ink-dim:#9A9A94;
    --ink-faint:#8A8A85;
    --accent:#C8FF00;
    /* Unified design tokens (2026-09-25): ONE dark surface stack + lime accent for every panel. Purple stays FOOTOP X only. */
    --surface:#161616;
    --elevated:#1C1C1C;
    --radius-card:20px;
    --lime:#CCFF00;
    --font-display:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
    --font-score:'Anton','Pretendard Variable','Pretendard',sans-serif;
    --font-body:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
    --font-mono:'JetBrains Mono','Pretendard Variable','Pretendard',monospace;
  }
  *{box-sizing:border-box;}
  button, input, textarea{font-family:inherit;}
  html, body{height:100%; margin:0;}
  body{
    background-color:var(--bg);
    background-image:
      radial-gradient(circle at 88% -6%, rgba(255,213,74,.05), transparent 32%),
      radial-gradient(circle at -8% 108%, rgba(40,209,124,.06), transparent 34%),
      radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:auto, auto, 16px 16px;
    background-repeat:no-repeat, no-repeat, repeat;
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }

  .shell{display:flex; height:100vh; overflow:hidden; position:relative;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:264px; flex-shrink:0; height:100vh;
    display:flex; flex-direction:column;
    background:var(--bg-raised);
    border-right:1px solid var(--line);
    padding:24px 14px 14px;
    position:fixed; top:0; left:0; bottom:0;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:40;
  }
  .shell.sidebar-open .sidebar{transform:translateX(0);}
  .sidebar-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:30;
  }
  .shell.sidebar-open .sidebar-overlay{opacity:1; pointer-events:auto;}

  .brand{padding:0 6px 20px; border-bottom:1px solid var(--line); margin-bottom:16px;}
  .brand-mark{font-family:var(--font-score); font-size:26px; letter-spacing:1px; background:linear-gradient(100deg,#ffd54a,#b7ff32 55%,#28d17c); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .brand-sub{margin-top:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.8px; color:var(--ink-faint);}

  /* base .nav-tabs/.nav-tab look superseded by the #dynamicSidebarNav-scoped horizontal-bar
     rules above (2026-09-22) — the element now lives in the top bar, not this aside. */

  .new-chat-btn{
    margin:0 0 16px; padding:11px 14px;
    border:1px solid var(--line); background:transparent;
    color:var(--ink); font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.3px;
    text-align:left; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .new-chat-btn:hover{background:var(--ink); color:var(--bg);}

  .conv-list{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}
  .conv-empty{padding:14px 10px; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--ink-faint);}
  .conv-item{display:flex; align-items:center; gap:8px; padding:10px 9px; cursor:pointer; color:var(--ink-dim);}
  .conv-item:hover{background:rgba(255,255,255,0.05); color:var(--ink);}
  .conv-item.active{background:rgba(255,255,255,0.09); color:var(--ink);}
  .conv-item-title{flex:1; min-width:0; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .conv-item-date{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); flex-shrink:0;}
  .conv-item-del{
    flex-shrink:0; width:18px; height:18px; display:none;
    align-items:center; justify-content:center; border-radius:3px;
    color:var(--ink-faint); font-size:13px; line-height:1;
  }
  .conv-item:hover .conv-item-del{display:flex;}
  .conv-item-del:hover{background:rgba(255,255,255,0.15); color:var(--ink);}

  .tracked-summary{margin-top:auto; padding-top:12px; border-top:1px solid var(--line);}
  .tracked-summary-title{font-family:var(--font-mono); font-size:11px; letter-spacing:0.8px; color:var(--ink-faint); margin-bottom:8px;}
  .tracked-pills{display:flex; flex-wrap:wrap; gap:4px;}
  .tracked-pill{
    font-family:var(--font-mono); font-size:11px; padding:3px 7px;
    border:1px solid var(--line-soft); color:var(--ink-dim);
  }

  /* ---------- Main ---------- */
  .main{flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; margin-left:0;}

  .topbar{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0;}
  .sidebar-toggle{width:34px; height:34px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:15px; cursor:pointer;}
  .topbar-brand{font-family:var(--font-score); font-size:16px; letter-spacing:1px; background:linear-gradient(100deg,#ffd54a,#b7ff32 55%,#28d17c); -webkit-background-clip:text; background-clip:text; color:transparent;}
  /* 2026-09-22: the contextual per-bottom-tab nav (previously #dynamicSidebarNav, living inside
     the left .sidebar — a persistent column at desktop, a hamburger drawer at mobile) moved up
     to sit here, right under the always-visible top bar, as a horizontal underline-tab strip —
     so switching News/Training/Social/etc no longer requires opening the drawer to reach its
     sub-sections. .sidebar keeps its remaining real widgets (API key settings, AI Coach's
     conversation history, Tracking's "MY TRACKING" pill summary) unchanged. */
  :root{ --subnav-h: 46px; }
  #dynamicSidebarNav.nav-tabs{display:flex; flex-direction:row; align-items:stretch; gap:2px; margin-bottom:0; padding:0 10px; border-bottom:1px solid var(--line); background:var(--bg); flex-shrink:0; overflow-x:auto; overflow-y:hidden; white-space:nowrap; min-height:var(--subnav-h); scrollbar-width:none;}
  #dynamicSidebarNav.nav-tabs::-webkit-scrollbar{display:none;}
  #dynamicSidebarNav .nav-tab{flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:6px; padding:0 12px; height:var(--subnav-h); border:none; background:transparent; color:var(--ink-faint); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.3px; text-align:left; cursor:pointer; transition:color .15s ease;}
  #dynamicSidebarNav .nav-tab:hover{color:var(--ink);}

  .scroll-area{padding-bottom:78px;flex:1; min-height:0; overflow-y:auto;}

  .panel{display:none;}
  .panel.active{display:block;}

  /* ---------- News strip (coach) ---------- */
  .news-strip{max-width:760px; margin:0 auto; padding:22px 20px 6px; position:relative; overflow:hidden;}
  .news-strip::before{
    content:"FOOTBALL"; position:absolute; top:-14px; right:-6px;
    font-family:var(--font-display); font-size:80px; letter-spacing:-0.02em;
    color:rgba(255,255,255,0.035); pointer-events:none; white-space:nowrap;font-weight:700}
  .news-strip-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; position:relative;}
  .news-strip-title-group{display:flex; align-items:center; gap:7px;}
  .live-dot{width:6px; height:6px; border-radius:50%; background:var(--ink); animation:blink 1.8s infinite;}
  @keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.2;}}
  .news-strip-title{font-family:var(--font-display); font-size:14px; letter-spacing:-0.02em; color:var(--ink);font-weight:700}
  .news-strip-date{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
  .news-cards{display:flex; gap:10px; overflow-x:auto; padding-bottom:18px; position:relative;}
  .news-card{flex:0 0 226px; background:var(--bg-raised); border:1px solid var(--line); padding:15px 14px; display:flex; flex-direction:column; gap:9px;}
  .news-card-tag{align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--ink-faint); border:1px solid var(--line); padding:2px 7px;}
  .news-card-headline{font-family:var(--font-display); font-size:16px; line-height:1.25; color:var(--ink);font-weight:700;letter-spacing:-0.02em}
  .news-card-summary{font-size:11.5px; line-height:1.55; color:var(--ink-dim); flex:1;}
  .news-card-date{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); border-top:1px solid var(--line-soft); padding-top:8px;}


  /* ---------- Today's Football card-news upgrade ---------- */
  .news-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:18px;position:relative;scroll-snap-type:x mandatory;scrollbar-width:thin;}
  .news-card{position:relative;flex:0 0 226px;height:170px;overflow:hidden;scroll-snap-align:start;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:15px 14px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:#1b211f;isolation:isolate;box-shadow:0 10px 28px rgba(0,0,0,.12);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:footopCardIn .4s ease backwards;}
  .news-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 34px -6px rgba(200,255,0,.18);}
  .news-card::before{content:"";position:absolute;inset:-18px;background-image:var(--news-bg);background-size:cover;background-position:center;filter:blur(10px) saturate(.8);transform:scale(1.08);opacity:.62;z-index:-2;}
  .news-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.78));z-index:-1;}
  .news-card-tag{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.24);padding:3px 7px;backdrop-filter:blur(4px);}
  .news-card-headline{font-family:var(--font-display);font-size:17px;line-height:1.22;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75);font-weight:700;letter-spacing:-0.02em}
  .news-card-summary{display:none;}
  .news-card-date{font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.18);padding-top:7px;}
  .news-detail{max-width:760px;margin:0 auto 24px;padding:0 20px;display:none;}
  .news-detail.show{display:block;animation:rise .2s ease;}
  .news-detail-inner{position:relative;overflow:hidden;border:1px solid var(--line);min-height:390px;padding:26px;background:var(--bg-raised);}
  .news-detail-inner::before{content:"";position:absolute;inset:-30px;background-image:var(--detail-bg);background-size:cover;background-position:center;filter:blur(16px);opacity:.25;transform:scale(1.1);}
  .news-detail-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),var(--bg-raised) 72%);}
  .news-detail-content{position:relative;z-index:1;}
  .news-detail-back{border:1px solid var(--line);background:transparent;color:var(--ink-dim);padding:7px 11px;font-family:var(--font-mono);font-size:11px;cursor:pointer;margin-bottom:24px;}
  .news-detail-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:1.2px;color:var(--ink-faint);margin-bottom:12px;}
  .news-detail-title{font-family:var(--font-display);font-size:30px;line-height:1.25;color:var(--ink);margin-bottom:14px;font-weight:700;letter-spacing:-0.02em}
  .news-detail-lead{font-size:14px;line-height:1.7;color:var(--ink-dim);margin-bottom:18px;}
  .news-detail-body{font-size:13px;line-height:1.8;color:var(--ink-dim);}
  .news-detail-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);margin-top:22px;padding-top:12px;border-top:1px solid var(--line-soft);}

  /* ---------- Topic row ---------- */
  .topic-row{max-width:760px; margin:0 auto; display:flex; gap:8px; padding:6px 20px 16px; overflow-x:auto;}
  .topic-chip{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.3px; white-space:nowrap;
    padding:8px 14px; border:1px solid var(--line); background:transparent; color:var(--ink-dim);
    cursor:pointer; flex-shrink:0; transition:border-color .15s ease, color .15s ease;
  }
  .topic-chip:hover{border-color:var(--ink); color:var(--ink);}

  /* ---------- Chat ---------- */
  .chat{max-width:760px; margin:0 auto; padding:6px 20px 24px; display:flex; flex-direction:column; gap:14px;}
  .intro-card{padding:16px; border:1px dashed var(--line); font-size:13px; color:var(--ink-dim); line-height:1.65;}
  .intro-card b{font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; color:var(--ink);}

  .msg{max-width:82%; display:flex; flex-direction:column; gap:5px; animation:rise .2s ease;}
  @keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  .msg.user{align-self:flex-end; align-items:flex-end;}
  .msg.coach{align-self:flex-start; align-items:flex-start;}
  .tag{font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--ink-faint);}
  .bubble{padding:13px 15px; font-size:14.5px; line-height:1.65;}
  .msg.coach .bubble{background:var(--bg-raised); color:var(--ink); border-left:2px solid var(--accent); box-shadow:-2px 0 12px -4px rgba(200,255,0,.25);}
  .msg.user .bubble{background:var(--ink); color:var(--bg); font-weight:600;}
  .bubble p{margin:0 0 8px;}
  .bubble p:last-child{margin-bottom:0;}
  .bubble ul{margin:4px 0 8px; padding-left:18px;}
  .bubble li{margin-bottom:3px;}
  .bubble strong{color:var(--ink);}
  .msg.user .bubble strong{color:var(--bg);}

  .thinking{align-self:flex-start; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-raised); border-left:2px solid var(--ink);}
  .formation{display:flex; flex-direction:column; gap:3px; width:34px;}
  .formation-row{display:flex; justify-content:center; gap:4px;}
  .formation-dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.14); animation:light-up 1.4s infinite;}
  .formation-row:nth-child(1) .formation-dot{animation-delay:0s;}
  .formation-row:nth-child(2) .formation-dot:nth-child(1){animation-delay:.15s;}
  .formation-row:nth-child(2) .formation-dot:nth-child(2){animation-delay:.3s;}
  .formation-row:nth-child(2) .formation-dot:nth-child(3){animation-delay:.45s;}
  .formation-row:nth-child(3) .formation-dot:nth-child(1){animation-delay:.6s;}
  .formation-row:nth-child(3) .formation-dot:nth-child(2){animation-delay:.75s;}
  .formation-row:nth-child(4) .formation-dot{animation-delay:.9s;}
  @keyframes light-up{0%,100%{background:rgba(255,255,255,0.14);} 40%{background:var(--ink);}}
  .thinking span{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim);}

  .match-example{background:var(--bg-raised);border:1px solid var(--line);margin-top:10px;padding:12px;}
  .match-example-title{font-family:var(--font-display);font-size:13px;letter-spacing:-0.02em;margin-bottom:6px;font-weight:700}
  .match-example-desc{font-size:11.5px;line-height:1.5;color:var(--ink-dim);margin-bottom:10px;}
  .match-video-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-family:var(--font-mono);font-size:11px;}
  .match-video-btn:hover{background:var(--ink);color:var(--bg);}

  .error-note{align-self:flex-start; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim); background:var(--bg-raised); border:1px dashed var(--line); padding:8px 12px;}

  /* ---------- Tracking panel ---------- */
  .tracking-wrap{max-width:760px; margin:0 auto; padding:22px 20px 32px;}
  .tracking-header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px;}
  .tracking-title{font-family:var(--font-display); font-size:22px; letter-spacing:-0.02em;font-weight:700}
  .tracking-sub{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:4px;}
  .tracking-actions{display:flex; gap:8px; flex-shrink:0;}
  .btn-sm{
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.3px;
    padding:8px 12px; border:1px solid var(--line); background:transparent;
    color:var(--ink-dim); cursor:pointer; transition:all .15s ease;
  }
  .btn-sm:hover{border-color:var(--ink); color:var(--ink);}
  .btn-sm.primary{background:var(--ink); color:var(--bg); border-color:var(--ink);}
  .btn-sm.primary:hover{opacity:0.85;}

  .breadcrumb{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
    margin-bottom:18px;
  }
  .breadcrumb span{cursor:pointer; transition:color .15s;}
  .breadcrumb span:hover{color:var(--ink);}
  .breadcrumb span.current{color:var(--ink); cursor:default;}
  .breadcrumb .sep{opacity:0.4; cursor:default;}

  .step-label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px;
    color:var(--ink-faint); margin-bottom:12px;
  }

  .grid-leagues{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px;}
  .league-card{
    background:var(--bg-raised); border:1px solid var(--line); padding:16px 14px;
    cursor:pointer; transition:border-color .15s, transform .12s, box-shadow .15s;
    display:flex; flex-direction:column; gap:10px;
    border-radius:14px; animation:footopCardIn .4s ease backwards;
  }
  .league-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(200,255,0,.2);}
  @keyframes footopCardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  @media(prefers-reduced-motion:reduce){.league-card{animation:none;}}
  .league-card-logo{width:48px; height:48px; object-fit:contain;}
  .league-card-logo{width:48px;height:48px;object-fit:contain;display:block;}
  .league-card-logo-placeholder{
    width:48px; height:48px; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
  }
  .league-card-name{font-family:var(--font-display); font-size:15px; letter-spacing:-0.02em;font-weight:700}
  .league-card-country{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}

  .mode-picker{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .mode-card{
    background:var(--bg-raised); border:1px solid var(--line); padding:18px 14px;
    cursor:pointer; text-align:center; transition:border-color .15s, transform .12s;
    border-radius:14px; animation:footopCardIn .4s ease backwards;
  }
  .mode-card:hover{border-color:var(--accent); transform:translateY(-2px);}
  .mode-card-icon{font-family:var(--font-display); font-size:18px; letter-spacing:-0.02em; margin-bottom:6px;font-weight:700}
  .mode-card-desc{font-size:11.5px; color:var(--ink-dim); line-height:1.5;}

  .league-banner{
    display:flex; align-items:center; gap:12px; margin-bottom:16px;
    padding:12px 14px; background:var(--bg-raised); border:1px solid var(--line);
  }
  .league-banner img{width:40px; height:40px; object-fit:contain;}

  .api-settings{
    margin-bottom:14px; padding:12px; border:1px dashed var(--line);
    display:none;
  }
  .api-settings.open{display:block;}
  .api-settings-title{font-family:var(--font-mono); font-size:11px; letter-spacing:0.8px; color:var(--ink-faint); margin-bottom:8px;}
  .api-settings-row{display:flex; gap:8px;}
  .api-settings-row input{
    flex:1; padding:9px 11px; border:1px solid var(--line);
    background:var(--bg); color:var(--ink); font-size:12px; outline:none;
  }
  .api-settings-row input:focus{border-color:var(--ink);}
  .api-settings-note{font-size:11px; color:var(--ink-faint); line-height:1.55; margin-top:8px;}
  .api-settings-link{font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); margin-top:6px; display:inline-block;}
  .api-toggle-btn{
    margin-bottom:14px; padding:9px 12px; width:100%;
    border:1px solid var(--line); background:transparent;
    color:var(--ink-dim); font-family:var(--font-mono); font-size:11px;
    cursor:pointer; text-align:left;
  }
  .api-toggle-btn:hover{border-color:var(--ink); color:var(--ink);}

  .search-bar{margin-bottom:14px;}
  .search-bar input{
    width:100%; padding:11px 14px; border:1px solid var(--line);
    background:var(--bg-raised); color:var(--ink); font-size:14px; outline:none;
  }
  .search-bar input:focus{border-color:var(--ink);}
  .search-bar input::placeholder{color:var(--ink-faint);}

  .grid-teams{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;}
  .team-card{
    background:var(--bg-raised); border:1px solid var(--line); padding:14px 10px;
    cursor:pointer; text-align:center; transition:border-color .15s, transform .12s;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    border-radius:14px; animation:footopCardIn .4s ease backwards;
  }
  .team-card:hover{border-color:var(--accent); transform:translateY(-2px);}
  .team-card.selected{border-color:var(--accent); background:rgba(200,255,0,0.06);}
  .team-badge{width:44px; height:44px; object-fit:contain;}
  .team-badge-placeholder{
    width:44px; height:44px; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-score); font-size:16px; color:var(--ink-faint);
  }
  .team-name{font-size:12px; line-height:1.3; color:var(--ink-dim);}
  .team-card:hover .team-name, .team-card.selected .team-name{color:var(--ink);}

  .tracking-cta-bar{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .tracking-cta-label{font-family:var(--font-mono); font-size:11px; color:var(--ink-dim);}

  .grid-players{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px;}
  .player-card{
    background:var(--bg-raised); border:1px solid var(--line); padding:12px 8px;
    cursor:pointer; text-align:center; transition:border-color .15s, transform .12s;
    display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
    border-radius:14px; animation:footopCardIn .4s ease backwards;
  }
  .player-card:hover{border-color:var(--accent); transform:translateY(-2px);}
  .player-card.tracked{border-color:var(--accent);}
  .player-photo{
    width:56px; height:56px; border-radius:50%; object-fit:cover;
    background:var(--bg); border:1px solid var(--line-soft);
  }
  .player-photo-placeholder{
    width:56px; height:56px; border-radius:50%; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-score); font-size:18px; color:var(--ink-faint);
  }
  .player-name{font-size:11.5px; line-height:1.25; color:var(--ink);}
  .player-pos{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
  .player-check{
    position:absolute; top:6px; right:6px; width:16px; height:16px;
    border:1px solid var(--line); background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:transparent;
  }
  .player-card.tracked .player-check{background:var(--accent); border-color:var(--accent); color:var(--bg);}

  .feed-list{display:flex; flex-direction:column; gap:10px;}
  .feed-item{
    background:var(--bg-raised); border:1px solid var(--line); padding:16px;
    display:flex; flex-direction:column; gap:8px; animation:rise .2s ease;
  }
  .feed-item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .feed-item-tags{display:flex; flex-wrap:wrap; gap:4px;}
  .feed-tag{
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.5px;
    padding:2px 6px; border:1px solid var(--line); color:var(--ink-faint);
  }
  .feed-tag.hot{border-color:var(--accent); color:var(--accent);}
  .feed-popularity{
    font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); flex-shrink:0;
  }
  .feed-popularity b{color:var(--ink);}
  .feed-title{font-family:var(--font-display); font-size:16px; line-height:1.3; color:var(--ink);font-weight:700;letter-spacing:-0.02em}
  .feed-title a{color:inherit; text-decoration:none;}
  .feed-title a:hover{text-decoration:underline;}
  .feed-summary{font-size:12.5px; line-height:1.55; color:var(--ink-dim);}
  .feed-meta{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); display:flex; gap:10px;}

  .loading-block{
    padding:40px 20px; text-align:center;
    font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  }
  .empty-block{
    padding:32px 20px; border:1px dashed var(--line); text-align:center;
    font-size:13px; color:var(--ink-dim); line-height:1.65;
  }
  .empty-block b{font-family:var(--font-display); font-weight:700; color:var(--ink);letter-spacing:-0.02em}

  .my-tracking-list{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
  .my-track-row{
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:var(--bg-raised); border:1px solid var(--line);
  }
  .my-track-row img{width:32px; height:32px; object-fit:contain; border-radius:4px;}
  .my-track-row .avatar{width:32px; height:32px; border-radius:50%; object-fit:cover;}
  .my-track-info{flex:1; min-width:0;}
  .my-track-name{font-size:13px;}
  .my-track-sub{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}
  .my-track-del{
    width:24px; height:24px; border:none; background:transparent;
    color:var(--ink-faint); cursor:pointer; font-size:16px;
  }
  .my-track-del:hover{color:var(--ink);}

  /* ---------- Composer ---------- */
  .composer-bar{flex-shrink:0; border-top:1px solid var(--line); background:var(--bg); padding:14px 20px calc(16px + env(safe-area-inset-bottom)); display:flex; justify-content:center;}
  .composer-inner{width:100%; max-width:820px; margin:0 auto; display:flex; flex-direction:column;}
  .composer-pill{width:100%; box-sizing:border-box; display:flex; gap:8px; align-items:flex-end; border:1px solid var(--line); background:var(--bg-raised); border-radius:26px; padding:7px 7px 7px 12px;}
  textarea#composer{
    flex:1; resize:none; min-height:32px; max-height:120px; padding:9px 4px;
    border:none; background:transparent; color:var(--ink);
    font-family:var(--font-body); font-size:14.5px; line-height:1.4; outline:none;
  }
  textarea#composer:focus{border-color:var(--ink);}
  textarea#composer::placeholder{color:var(--ink-faint);}
  textarea#composer:disabled{opacity:0.5;}
  #sendBtn{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
    font-size:16px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease;
  }
  #sendBtn:active{transform:scale(0.92);}
  #sendBtn:disabled{opacity:0.35; cursor:not-allowed;}

  @media not all {
    .sidebar{position:sticky; transform:none;}
    .sidebar-overlay{display:none;}
    /* .topbar (brand + the ☰ toggle for .sidebar's remaining widgets — API key settings, AI
       Coach history, Tracking's pill summary) now stays visible at every width, not just
       mobile, since the 2026-09-22 move put the real contextual nav (#dynamicSidebarNav) here
       as a horizontal strip rather than inside the drawer .topbar used to gate. */
    /* .sidebar is a sticky flex sibling of .main at this width, so it already reserves its
       own 264px in the row — an extra margin-left here double-counted that space, leaving a
       ~264px gap of the bare body background between the sidebar and the panel content.
       Invisible on this app's usual dark panels, but visible as a stray black band once a
       panel (Tracking) switched to a light background. */
  }

  ::-webkit-scrollbar{width:6px; height:6px;}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);}

.training-v7-player .visual{height:170px!important;position:relative;overflow:hidden;background:linear-gradient(180deg,#172019,#0b100d);border-bottom:1px solid var(--line);display:grid;place-items:end center}
.training-v7-player .visual img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:saturate(.95) contrast(1.04)}
.training-v7-player .visual:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,8,6,.82));pointer-events:none}
.training-v7-player .visual .placeholder{width:100%;height:100%;place-items:center;font:700 42px var(--font-score);color:#b7ff32}
.training-v7-player{overflow:hidden!important}

/* from index.html <style id="tracking-pro-css"> */
.trk-hero{padding:20px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(45,212,191,.10),rgba(59,130,246,.06));margin-bottom:14px;position:relative;overflow:hidden}.trk-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-80px;background:rgba(45,212,191,.12);filter:blur(10px)}
.trk-kicker{font:11px var(--font-mono);color:#5eead4;letter-spacing:1.6px}.trk-title{font:700 28px var(--font-display);margin:6px 0;letter-spacing:-0.02em}.trk-desc{font:11px var(--font-mono);color:var(--ink-dim);line-height:1.7;max-width:600px}
.trk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.trk-stat{padding:13px;background:var(--bg-raised);border:1px solid var(--line)}.trk-stat b{display:block;font:24px var(--font-score);margin-bottom:3px}.trk-stat span{font:11px var(--font-mono);color:var(--ink-faint)}
.trk-section{border:1px solid var(--line);background:var(--bg-raised);margin-top:10px;padding:14px}.trk-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.trk-section-title{font:700 12px var(--font-display);letter-spacing:-0.02em}.trk-section-sub{font:11px var(--font-mono);color:var(--ink-faint)}
.trk-alert{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);margin-top:7px;background:rgba(255,255,255,.018)}.trk-alert-dot{width:7px;height:7px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 12px #2dd4bf;flex:none}.trk-alert b{font-size:11px}.trk-alert span{display:block;font:11px var(--font-mono);color:var(--ink-faint);margin-top:3px}
.trk-entity-row{display:flex;gap:8px;overflow:auto;padding-bottom:3px}.trk-entity{min-width:150px;padding:12px;border:1px solid var(--line);background:var(--bg);cursor:pointer}.trk-entity:hover{border-color:var(--ink)}.trk-entity img{width:36px;height:36px;object-fit:contain;float:left;margin-right:9px}.trk-entity b{font-size:11px;display:block;padding-top:2px}.trk-entity span{font:11px var(--font-mono);color:var(--ink-faint)}
.trk-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.trk-action{padding:11px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;text-align:left}.trk-action:hover{background:var(--bg-raised);border-color:var(--ink)}.trk-action b{display:block;font-size:11px}.trk-action span{font:11px var(--font-mono);color:var(--ink-faint)}
.trk-feature-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;position:relative;z-index:1}
.trk-feature-chip{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font:11px var(--font-mono);color:#c7d6cf;}
.trk-category-legend{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px;}
.trk-legend-chip{display:inline-flex;align-items:center;gap:5px;font:11px var(--font-mono);letter-spacing:.3px;padding:5px 9px;border-radius:999px;border:1px solid color-mix(in srgb, var(--tag-accent) 45%, transparent);color:var(--tag-accent);background:color-mix(in srgb, var(--tag-accent) 10%, transparent);}
@media all {.trk-grid{grid-template-columns:repeat(2,1fr)}.trk-actions{grid-template-columns:1fr}.trk-title{font-size:23px}}

/* from index.html <style id="footop-radar-v2"> */
.trk-intel-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:12px;margin-top:12px}
.trk-news-list{display:flex;flex-direction:column;gap:9px}
.trk-news-card{background:var(--bg-raised);border:1px solid var(--line);padding:15px;position:relative;animation:footopCardIn .4s ease backwards;}
.trk-news-card:hover{border-color:var(--ink-dim)}
.trk-news-meta{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);margin-bottom:9px}
.trk-source{padding:3px 7px;border:1px solid var(--line);letter-spacing:.5px}
.trk-news-title{font-size:14px;line-height:1.45;color:var(--ink);font-weight:700}
.trk-news-summary{font-size:11px;line-height:1.65;color:var(--ink-dim);margin-top:7px}
.trk-news-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.trk-news-tag{font-family:var(--font-mono);font-size:11px;padding:4px 6px;background:rgba(255,255,255,.04);color:var(--ink-dim)}
.trk-news-confidence{font-family:var(--font-mono);font-size:11px;color:#7dd3fc;margin-left:auto}
.trk-insight{background:var(--bg-raised);border:1px solid var(--line);padding:16px}
.trk-insight h4{margin:0 0 8px;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:-0.02em}
.trk-insight p{margin:0;color:var(--ink-dim);font-size:11px;line-height:1.7}
.trk-player-radar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.trk-player-card{background:var(--bg-raised);border:1px solid var(--line);padding:13px}
.trk-player-top{display:flex;align-items:center;gap:10px}.trk-player-top img{width:46px;height:46px;object-fit:cover;border-radius:50%;background:#111}
.trk-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}
.trk-mini-stat{border-top:1px solid var(--line);padding-top:7px}.trk-mini-stat b{display:block;font-size:13px}.trk-mini-stat span{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.trk-add-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.trk-add-option{padding:14px;background:var(--bg-raised);border:1px solid var(--line);cursor:pointer;text-align:left}
.trk-add-option:hover{border-color:var(--ink-dim)}
.trk-add-option b{display:block;margin-bottom:4px}.trk-add-option span{font-size:11px;color:var(--ink-faint)}
@media all {.trk-intel-grid{grid-template-columns:1fr}.trk-add-menu{grid-template-columns:1fr}}

/* from index.html <style id="footop-feed-v4"> */
/* Footop Feed — re-themed to the "연두" (lime/chartreuse) light background used across the
   Main tab now. .feed-post tiles are untouched: they're real photo cards with their own dark
   scrim + white text baked in for legibility over the image, so they read fine as dark cards
   floating on a light page (same reasoning as the Tracking square news grid). Only the chrome
   sitting directly on the bare page (kicker/title/filters) needed a text-color pass. */
#panelFeed{min-height:calc(100vh - 84px - var(--subnav-h));}
@media all {#panelFeed{min-height:calc(100vh - 74px);}}
.feed-panel{max-width:1180px;margin:0 auto;padding:18px 22px 70px;}
.feed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px;}
.feed-kicker{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:1.4px;background:#12160a;color:#eaffd0;padding:6px 12px;border-radius:999px;margin-bottom:8px;}
.feed-title{font-family:var(--font-display);font-size:32px;line-height:1.25;letter-spacing:-0.02em;background:linear-gradient(100deg,#CCFF00,#CCFF00 55%,#9BCB00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.feed-sub{margin-top:7px;color:#B9C2A0;font-size:11px;}
.feed-back{background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);color:#F2F5E8;padding:9px 12px;border-radius:999px;cursor:pointer;font-size:11px;}
.feed-filters{display:flex;gap:7px;overflow:auto;padding:1px 0 12px;scrollbar-width:none;}
.feed-filters::-webkit-scrollbar{display:none;}
.feed-filter{white-space:nowrap;border:1px solid rgba(255,255,255,0.14);background:#1C1C1C;color:#B9C2A0;border-radius:999px;padding:7px 11px;font-size:11px;cursor:pointer;}
.feed-filter.active{background:#CCFF00;color:#0a0a0a;border-color:transparent;font-weight:700;}
.feed-grid-viewport{height:694px;overflow-y:auto;overflow-x:hidden;padding:2px 3px 20px 1px;scrollbar-width:thin;}
.feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.feed-post{position:relative;height:166px;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;background:#111;cursor:pointer;isolation:isolate;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.feed-post:hover{border-color:rgba(183,255,50,.4);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 1px rgba(183,255,50,.18);}
.feed-post-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.95) contrast(1.04);transform:scale(1.025);z-index:-3;transition:opacity .25s ease;}
.feed-post-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.16) 32%,rgba(0,0,0,.94) 100%),linear-gradient(90deg,rgba(0,0,0,.12),transparent 65%);z-index:-2;}
.feed-post-top{position:absolute;top:9px;left:9px;right:9px;display:flex;justify-content:space-between;align-items:center;z-index:2;}
.feed-post-tag,.feed-post-type{font-family:var(--font-mono);font-size:7px;letter-spacing:.55px;padding:4px 6px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.34);backdrop-filter:blur(8px);color:#fff;}
.feed-post-type{color:#d0d0d0;}
.feed-post-content{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;}
.feed-post-player{font-family:var(--font-mono);font-size:7px;letter-spacing:.7px;color:#b7ff32;margin-bottom:4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-post-title{font-family:var(--font-display);font-size:16px;line-height:1.25;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;letter-spacing:-0.02em}
.feed-post-summary{display:none;}
.feed-post-meta{margin-top:5px;display:flex;gap:6px;color:#aaa;font-family:var(--font-mono);font-size:6.5px;white-space:nowrap;overflow:hidden;}
.feed-media-badge{position:absolute;right:9px;bottom:9px;z-index:3;color:#fff;font-family:var(--font-mono);font-size:7px;padding:4px 6px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(7px);}
.feed-count{font:11px var(--font-mono);color:#5c6b28;margin:0 0 8px 2px;}
/* card-news viewer — a smaller, centered content card floating over a blurred, darkened
   version of the article's own image, per the Footop Cardnews detail-screen redesign (2026-09-11):
   the article's photo fills the whole background at low opacity/high blur so the eye isn't
   overwhelmed by one giant full-bleed image, while the actual card stays a modest, readable size. */
.cardnews-viewer{position:fixed;inset:0;background:#05070a;z-index:1000;display:none;align-items:center;justify-content:center;padding:18px;overflow:hidden;}
.cardnews-viewer.open{display:flex;}
.cardnews-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;object-position:center;filter:blur(34px) saturate(1.15) brightness(.55);transform:scale(1.05);z-index:0;}
.cardnews-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,5,7,.72),rgba(3,5,7,.86) 55%,rgba(3,5,7,.96));}
.cardnews-shell{width:min(400px,92vw);height:min(600px,84vh);position:relative;z-index:2;background:#0d0f12;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65);}
#cardnewsSlides{position:absolute;inset:0;}
.cardnews-slide{position:absolute;inset:0;display:none;flex-direction:column;background:#0d0f12;}
.cardnews-slide.active{display:flex;}
.cardnews-image{position:relative;width:100%;height:38%;min-height:150px;flex:0 0 auto;object-fit:cover;object-position:center;filter:saturate(.95) contrast(1.03);}
.cardnews-gradient{position:absolute;left:0;right:0;top:0;height:38%;min-height:150px;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(13,15,18,.95) 100%);pointer-events:none;}
.cardnews-copy{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;z-index:3;color:#fff;padding:16px 20px 22px;}
.cardnews-kicker{font:11px var(--font-mono);letter-spacing:1px;color:#b7ff32;margin-bottom:8px;}
.cardnews-title{font-family:var(--font-display);font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-0.02em}
.cardnews-body{margin-top:10px;color:#dfe4e0;font-size:13px;line-height:1.62;}
.cardnews-page-label{position:absolute;top:14px;left:14px;z-index:4;font:11px var(--font-mono);letter-spacing:1.2px;color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);padding:6px 8px;border-radius:999px;backdrop-filter:blur(8px);}
.cardnews-top{position:absolute;top:14px;left:14px;right:14px;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:8px;}
.cardnews-close,.cardnews-arrow{border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.5);color:#fff;border-radius:999px;width:34px;height:34px;cursor:pointer;backdrop-filter:blur(8px);}
.cardnews-counter{font:11px var(--font-mono);color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);padding:7px 9px;border-radius:999px;}
.cardnews-controls{position:absolute;inset:0;top:38%;z-index:4;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 8px 0;}
.cardnews-arrow{pointer-events:auto;}
.cardnews-dots{position:absolute;top:calc(38% + 10px);left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:6;}
.cardnews-dot{width:6px;height:6px;border-radius:50%;background:#777}.cardnews-dot.active{background:#b7ff32;width:18px;border-radius:10px;}
@media all {.feed-panel{padding:15px 10px 70px}.feed-title{font-size:28px}.feed-grid-viewport{height:606px}.feed-grid{gap:8px}.feed-post{height:144px;border-radius:13px}.feed-post-title{font-size:13px}.feed-post-content{left:8px;right:8px;bottom:8px}.feed-post-top{top:7px;left:7px;right:7px}.feed-post-meta{font-size:5.5px}.cardnews-shell{height:80vh;width:94vw;}.cardnews-title{font-size:19px}}

/* from index.html <style id="footop-community-v3"> */
.community-panel{max-width:1180px;margin:0 auto;padding:22px 24px 90px;background:radial-gradient(120% 55% at 88% -8%,rgba(255,213,74,.12),transparent 55%),radial-gradient(120% 55% at -8% 108%,rgba(183,255,50,.13),transparent 55%),#070707;min-height:100%;}
.community-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;position:sticky;top:0;z-index:20;background:linear-gradient(#070707 82%,transparent);padding-bottom:14px;}
.community-brand{font-family:var(--font-display);font-size:30px;letter-spacing:-0.02em;color:#fff;font-weight:700}.community-brand small{display:block;font:11px var(--font-mono);letter-spacing:1.5px;color:#8dff2f;margin-bottom:5px}
.community-head-actions{display:flex;gap:8px}.community-icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid #242424;background:#111;color:#fff;cursor:pointer}
.community-tabs{display:flex;gap:6px;overflow:auto;padding:3px 0 14px;scrollbar-width:none}.community-tabs::-webkit-scrollbar{display:none}
.community-tab{border:1px solid #202020;background:#0e0e0e;color:#888;border-radius:999px;padding:9px 14px;font-size:11px;white-space:nowrap;cursor:pointer}.community-tab.active{background:#fff;color:#080808;border-color:#fff;font-weight:700}
.composer-card{background:#101010;border:1px solid #222;border-radius:18px;padding:14px;margin-bottom:14px}.composer-row{display:flex;gap:11px;align-items:flex-start}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#252525,#111);color:#fff;font-weight:700;flex:0 0 auto;position:relative}.avatar::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,#ffd54a,#b7ff32,#28d17c);z-index:-1}.composer-input{flex:1;min-height:42px;border:1px solid #242424;border-radius:14px;background:#0b0b0b;color:#ddd;padding:12px 13px;resize:none;outline:none}.composer-input:focus{border-color:#555}.composer-tools{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-left:49px}.tool-row{display:flex;gap:6px}.tool-btn{border:1px solid #242424;background:#0c0c0c;color:#aaa;border-radius:10px;padding:7px 9px;font-size:11px;cursor:pointer}.post-btn{border:0;background:#8dff2f;color:#071000;border-radius:10px;padding:8px 13px;font-weight:700;cursor:pointer}
.community-feed{display:flex;flex-direction:column;gap:12px}.community-post{border:1px solid #202020;background:#0d0d0d;border-radius:18px;overflow:hidden}.post-head{display:flex;align-items:center;gap:10px;padding:13px 14px}.post-user{min-width:0}.post-user b{color:#fff;font-size:12px}.post-user span{display:block;color:#666;font:11px var(--font-mono);margin-top:3px}.follow-btn{margin-left:auto;border:1px solid #333;background:#151515;color:#bbb;border-radius:999px;padding:6px 9px;font-size:11px;cursor:pointer}.follow-btn.following{color:#8dff2f;border-color:#38561a}.post-text{padding:0 14px 12px;color:#ddd;font-size:13px;line-height:1.6;white-space:pre-wrap}.post-media{position:relative;width:100%;background:#050505;overflow:hidden}.post-media img,.post-media video{width:100%;max-height:620px;display:block;object-fit:cover}.post-media .media-label{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:6px 8px;font:11px var(--font-mono)}
.news-post-media{position:relative;min-height:270px;overflow:hidden}.news-post-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.82));pointer-events:none}.news-post-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(1px) saturate(.92);transform:scale(1.03)}.news-post-content{position:relative;z-index:2;min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}.news-kicker{font:11px var(--font-mono);color:#8dff2f;letter-spacing:1px;margin-bottom:7px}.news-headline{font-family:var(--font-display);font-size:28px;line-height:1.25;color:#fff;text-shadow:0 3px 18px #000;font-weight:700;letter-spacing:-0.02em}.news-summary{font-size:11px;color:#d1d1d1;margin-top:8px;line-height:1.45;max-width:780px}.news-source{margin-top:10px;color:#8d8d8d;font:11px var(--font-mono)}
.post-actions{display:flex;gap:4px;border-top:1px solid #1d1d1d;padding:8px 10px}.post-action{flex:1;border:0;background:transparent;color:#777;padding:8px 5px;border-radius:9px;cursor:pointer;font-size:11px}.post-action:hover{background:#151515;color:#fff}.post-action.liked{color:#ff5b6e}.post-action.saved{color:#8dff2f}.post-action b{color:#aaa;margin-left:3px}.comment-box{display:none;border-top:1px solid #1d1d1d;padding:10px}.comment-box.open{display:block}.comment-list{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.comment{font-size:11px;color:#ccc;background:#141414;border-radius:10px;padding:8px}.comment strong{color:#fff;margin-right:5px}.comment-form{display:flex;gap:6px}.comment-input{flex:1;background:#090909;border:1px solid #242424;color:#ddd;border-radius:10px;padding:8px;font-size:11px}.comment-send{border:0;background:#fff;color:#000;border-radius:10px;padding:8px 10px;font-weight:700}
.community-empty{padding:36px;text-align:center;border:1px dashed #262626;border-radius:16px;color:#666;font-size:12px}.community-note{font:11px var(--font-mono);color:#555;text-align:center;margin-top:18px;line-height:1.6}
@media all {.community-panel{padding:15px 12px 80px}.community-brand{font-size:27px}.news-headline{font-size:25px}.news-post-media,.news-post-content{min-height:300px}.community-head{padding-bottom:12px}.composer-tools{padding-left:0}}

/* from index.html <style id="footop-ui-v6"> */
  /* Bottom destinations are a real footer, never layered over content. */
  .scroll-area{padding-bottom:12px!important;}
  .footop-bottom-nav{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:10!important;width:100%!important;max-width:none!important;flex:0 0 auto!important;margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;background:rgba(7,12,10,.97)!important;backdrop-filter:blur(18px);box-shadow:0 -10px 28px rgba(0,0,0,.25)!important;}
  .footop-bottom-btn{min-height:58px!important;}
  .main-menu-wrap{padding-bottom:24px!important;}
  .tracking-credibility{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px;}
  .tracking-cred-card{padding:11px 12px;background:linear-gradient(145deg,rgba(40,209,124,.09),rgba(255,213,74,.05));border:1px solid rgba(183,255,50,.14);border-radius:12px;}
  .tracking-cred-card b{display:block;font:700 11px var(--font-display);letter-spacing:-0.02em;color:#fff;margin-bottom:4px;}
  .tracking-cred-card span{font:11px var(--font-mono);color:#81918a;line-height:1.45;}
  .trk-news-card{overflow:hidden;border-radius:14px;padding:0!important;background:#101513!important;border-color:rgba(183,255,50,.10)!important;}
  .trk-news-media{position:relative;height:150px;background:#111;overflow:hidden;}
  .trk-news-media img{width:100%;height:100%;display:block;object-fit:cover;}
  .trk-news-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.82));pointer-events:none;}
  .trk-news-media.image-fallback{background:radial-gradient(circle at 50% 20%,color-mix(in srgb, var(--tag-accent,#b7ff32) 30%, transparent),transparent 55%),linear-gradient(135deg,#172019,#0a0f0d)}
  .trk-news-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#eafff0;font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em;text-align:center;padding:0 14px;font-weight:700}
  .trk-news-fallback-icon{font-size:34px;filter:drop-shadow(0 0 14px color-mix(in srgb, var(--tag-accent,#b7ff32) 60%, transparent));}
  .trk-news-tag-pill{position:absolute;top:10px;left:10px;z-index:3;font:600 11px var(--font-mono);letter-spacing:.4px;color:#0a0d0a;background:var(--tag-accent,#b7ff32);padding:4px 8px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.35);}
  .trk-news-card-body{padding:13px 14px 14px;}
  .trk-news-title{font-size:15px!important;line-height:1.34!important;}
  .trk-news-summary{font-size:11px!important;line-height:1.62!important;}
  .trk-news-trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .trk-news-trust span{font:11px var(--font-mono);padding:4px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.10);color:#9fb0aa;background:rgba(255,255,255,.03);}
  .trk-news-trust .verified{color:#07110d;background:linear-gradient(135deg,#b7ff32,#ffd54a);border-color:transparent;}
  .trk-news-trust .reported{color:#c7ffd9;border-color:rgba(40,209,124,.35);background:rgba(40,209,124,.08);}
  .trk-news-source-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);font:11px var(--font-mono);color:#66746e;}
  .trk-news-open{color:#b7ff32!important;}
  .trk-news-comment-toggle{margin-top:10px;background:transparent;border:1px solid rgba(255,255,255,.1);color:#9fb0aa;border-radius:8px;padding:6px 10px;font:11px var(--font-mono);cursor:pointer;}
  .trk-news-comment-toggle:hover{border-color:rgba(183,255,50,.4);color:#b7ff32;}
  .trk-news-comments{margin-top:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px;}
  .trk-news-comment-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
  .trk-news-comment{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:11px;color:#c7d1cb;line-height:1.6;}
  .trk-news-comment b{color:#b7ff32;margin-right:6px;}
  .trk-comment-like-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid rgba(255,255,255,.12);color:#9fb0aa;border-radius:999px;padding:3px 8px;font:600 11px var(--font-mono);cursor:pointer;}
  .trk-comment-like-btn.liked{border-color:rgba(255,107,129,.5);color:#ff6b81;background:rgba(255,107,129,.08);}
  .trk-comment-like-btn:disabled{opacity:.5;cursor:default;}
  .trk-news-comment-sort{display:flex;gap:6px;margin-bottom:8px;}
  .trk-comment-sort-btn{background:transparent;border:1px solid rgba(255,255,255,.12);color:#9fb0aa;border-radius:999px;padding:5px 11px;font:600 11px var(--font-mono);cursor:pointer;}
  .trk-comment-sort-btn.active{background:linear-gradient(135deg,#b7ff32,#28d17c);color:#07110d;border-color:transparent;}
  .trk-trending-widget{margin:12px 0 4px;}
  .trk-trending-head{font:600 11px var(--font-mono);letter-spacing:.6px;color:#ff9a5a;margin-bottom:8px;}
  .trk-trending-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .trk-trending-chip{font:600 11px var(--font-mono);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,154,90,.4);background:rgba(255,154,90,.08);color:#ff9a5a;cursor:pointer;}
  .trk-trending-chip:hover{background:rgba(255,154,90,.18);}
  .trk-trending-empty{font:700 11px var(--font-mono);color:#66746e;}
  /* Main News — period filter, search, refresh + featured card (2026-09-11 redesign) */
  .mn-period-tabs{display:flex;gap:8px;margin:14px 0 12px;border-bottom:1px solid rgba(255,255,255,0.14);}
  .mn-period-tab{flex:1;padding:11px 0;margin-bottom:-1px;border-radius:0;border:none;border-bottom:2px solid transparent;background:transparent;color:#B9C2A0;font:600 12px var(--font-mono);letter-spacing:.4px;cursor:pointer;transition:all .2s ease;}
  .mn-period-tab:hover{border-color:#CCFF00;color:#CCFF00;}
  .mn-period-tab.active{background:transparent;color:#CCFF00;border-color:#CCFF00;box-shadow:none;font-weight:700;}
  .mn-refresh-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:#1C1C1C;color:#CCFF00;cursor:pointer;transition:border-color .2s ease;flex:0 0 auto;}
  .mn-refresh-btn:hover{border-color:#CCFF00;}
  .mn-refresh-icon{display:block;}
  .mn-refresh-btn.spinning .mn-refresh-icon{animation:mnRefreshSpin .8s linear;}
  @keyframes mnRefreshSpin{to{transform:rotate(360deg);}}
  .mn-featured-card{position:relative;display:block;width:100%;aspect-ratio:16/8;border-radius:18px;overflow:hidden;cursor:pointer;background:#111815;border:1px solid rgba(255,255,255,.08);margin-bottom:14px;}
  .mn-featured-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .mn-featured-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px 18px;}
  .mn-featured-headline{font:700 20px/1.28 var(--font-body);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .mn-featured-summary{margin-top:8px;font:12px/1.6 var(--font-body);color:#d7ddd9;text-shadow:0 1px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  @media all {.mn-featured-card{aspect-ratio:16/11;}.mn-featured-headline{font-size:17px;}.mn-period-tab{font-size:11px;padding:10px 0;}}
  .trk-news-comment-form{display:flex;gap:6px;}
  .trk-news-comment-form input{flex:1;background:#0d130f;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;color:#fff;font-size:11px;}
  .trk-news-comment-form button{background:linear-gradient(135deg,#b7ff32,#28d17c);color:#07110d;border:none;border-radius:8px;padding:8px 12px;font:600 11px var(--font-mono);cursor:pointer;}
  .trk-news-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ffd54a,#b7ff32 55%,#28d17c);opacity:.85;}
  .trk-news-load-more{grid-column:1/-1;width:100%;margin-top:2px;padding:13px;border-radius:14px;border:1px solid rgba(183,255,50,.24);background:linear-gradient(135deg,rgba(255,213,74,.08),rgba(183,255,50,.12) 55%,rgba(40,209,124,.08));color:#e7ffcf;font:600 11px var(--font-mono);letter-spacing:.6px;cursor:pointer;transition:.18s ease;}
  .trk-news-load-more:hover{border-color:rgba(183,255,50,.55);transform:translateY(-1px);box-shadow:0 8px 22px rgba(183,255,50,.10);}
  @media all {.tracking-credibility{grid-template-columns:1fr 1fr;}.trk-news-media{height:160px;}.footop-bottom-btn{min-height:54px!important;}.footop-bottom-copy{display:block!important;}.footop-bottom-title{font-size:11px!important;}}

  /* Player/team select tabs — avatar pill row (Instagram-story-tray style) */
  .trk-news-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;margin-top:14px;}
  .trk-news-tabs::-webkit-scrollbar{display:none;}
  .trk-news-tab{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:#9fb0aa;border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;transition:.15s ease;white-space:nowrap;}
  .trk-news-tab:hover{border-color:rgba(183,255,50,.35);color:#e5f8df;}
  .trk-news-tab.active{background:linear-gradient(100deg,rgba(255,213,74,.16),rgba(183,255,50,.20) 60%,rgba(40,209,124,.14));border-color:rgba(183,255,50,.55);color:#fff;box-shadow:0 0 16px rgba(183,255,50,.10);}
  .trk-tab-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#141a16;display:grid;place-items:center;}
  .trk-tab-avatar img{width:100%;height:100%;object-fit:cover;}
  .trk-tab-avatar-fallback{font:600 11px var(--font-mono);color:#b7ff32;}
  .trk-tab-label{font:600 11px var(--font-mono);letter-spacing:.3px;}

  /* Square news-card grid — Instagram/card-news style, headline lives on the photo itself */
  .trk-news-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;gap:10px!important;}
  .trk-news-square{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;cursor:pointer;background:#111815;border:1px solid rgba(255,255,255,.08);transition:transform .15s ease,border-color .15s ease;}
  .trk-news-square:hover{transform:translateY(-2px);border-color:rgba(183,255,50,.4);}
  .trk-news-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .trk-news-square.image-fallback,.trk-square-fallback-icon{background:radial-gradient(circle at 50% 30%,color-mix(in srgb, var(--tag-accent,#b7ff32) 32%, transparent),transparent 60%),linear-gradient(150deg,#182018,#0a0f0c);}
  .trk-square-fallback-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;filter:drop-shadow(0 0 16px color-mix(in srgb, var(--tag-accent,#b7ff32) 55%, transparent));}
  .trk-square-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.92) 100%);pointer-events:none;}
  .trk-square-top{position:absolute;top:8px;left:8px;right:8px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;}
  .trk-square-tag-pill{font:600 11px var(--font-mono);letter-spacing:.3px;color:#0a0d0a;background:var(--tag-accent,#b7ff32);padding:4px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.35);}
  .trk-square-verify{font:600 7px var(--font-mono);letter-spacing:.3px;padding:4px 6px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(6px);}
  .trk-square-verify.confirmed{color:#0a0d0a;background:linear-gradient(135deg,#b7ff32,#ffd54a);}
  .trk-square-verify.reported{color:#dfffe9;background:rgba(40,209,124,.35);border:1px solid rgba(40,209,124,.5);}
  .trk-square-verify.rumour{color:#ffe3c2;background:rgba(255,138,74,.28);border:1px solid rgba(255,138,74,.45);}
  .trk-square-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 10px 9px;}
  .trk-square-headline{font:600 11.5px/1.32 var(--font-body);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .trk-square-meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;font:7px var(--font-mono);color:#c3d1ca;opacity:.85;}
  .trk-square-meta span:not(:last-child)::after{content:"·";margin-left:5px;opacity:.6;}
  .trk-square-comment-count{margin-left:auto!important;}
  .trk-square-comment-count::after{content:none!important;}

  /* Footop News Desk — full article detail overlay, styled like a real sports-news reader */
  .footop-news-desk-overlay{position:fixed;inset:0;z-index:9500;background:rgba(3,5,4,.82);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding:0;overflow-y:auto;}
  .footop-news-desk-overlay.open{display:flex;}
  .fnd-shell{position:relative;width:100%;max-width:640px;min-height:100%;background:#0a0f0c;margin:0 auto;box-shadow:0 30px 90px rgba(0,0,0,.6);}
  .fnd-close{position:absolute;top:14px;right:14px;z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.5);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(8px);}
  .fnd-hero{position:relative;width:100%;aspect-ratio:16/10;background:#111;overflow:hidden;}
  .fnd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .fnd-hero.image-fallback,.fnd-hero-fallback-icon{background:radial-gradient(circle at 50% 25%,color-mix(in srgb, var(--tag-accent,#b7ff32) 30%, transparent),transparent 55%),linear-gradient(150deg,#182018,#0a0f0c);}
  .fnd-hero-fallback-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px;}
  .fnd-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 40%,rgba(10,15,12,1) 100%);}
  .fnd-hero-kicker{position:absolute;left:18px;bottom:18px;z-index:3;font:700 11px var(--font-display);letter-spacing:-0.02em;color:#dfffb1;}
  .fnd-hero-tagpill{position:absolute;top:14px;left:14px;z-index:3;font:600 11px var(--font-mono);letter-spacing:.4px;color:#0a0d0a;background:var(--tag-accent,#b7ff32);padding:5px 9px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.4);}
  .fnd-body{padding:20px 20px 40px;}
  .fnd-meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:11px var(--font-mono);color:#8a9b92;margin-bottom:12px;}
  .fnd-meta-row span:not(:first-child)::before{content:"·";margin-right:8px;opacity:.6;}
  .fnd-verify{font:600 11px var(--font-mono);letter-spacing:.4px;padding:4px 8px;border-radius:999px;}
  .fnd-verify::before{content:none!important;}
  .fnd-verify.confirmed{color:#0a0d0a;background:linear-gradient(135deg,#b7ff32,#ffd54a);}
  .fnd-verify.reported{color:#c7ffd9;background:rgba(40,209,124,.14);border:1px solid rgba(40,209,124,.4);}
  .fnd-verify.rumour{color:#ffd9b8;background:rgba(255,138,74,.14);border:1px solid rgba(255,138,74,.4);}
  .fnd-title{font:700 24px/1.32 var(--font-display);color:#fff;margin:0 0 14px;letter-spacing:-0.02em;}
  .fnd-summary{font-size:14px;line-height:1.85;color:#d7e2dc;margin:0 0 20px;white-space:pre-wrap;}
  .fnd-sources-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font:11px var(--font-mono);color:#7f9088;margin-bottom:22px;}
  .fnd-open-link{color:#b7ff32;font-weight:700;white-space:nowrap;}
  .fnd-comments-head{font:700 12px var(--font-display);letter-spacing:-0.02em;color:#fff;margin-bottom:10px;}

  /* Footop Sports card — the pastel "story card" look used to open a News Desk article:
     black brand pill, two-tone headline, underline accent, summary, related-story list.
     Deliberately a light card floating on the overlay's dark backdrop (not a full light
     theme swap) — the rest of the overlay (meta row/sources/comments) stays in the app's
     existing dark styling. */
  .fnd-card{background:linear-gradient(160deg,#eafbf0,#d9f0e0);border-radius:26px;padding:26px 24px 20px;margin:20px 16px 18px;box-shadow:0 20px 50px rgba(0,0,0,.35);}
  .fnd-card-badge{display:inline-flex;align-items:center;gap:6px;background:#0b1210;color:#f3fff0;font:600 11px var(--font-mono);letter-spacing:1.2px;padding:7px 13px;border-radius:999px;margin-bottom:16px;}
  .fnd-card-headline{font:700 23px/1.34 var(--font-display);letter-spacing:-0.02em;margin:0;}
  .fnd-card-headline .fnd-h-a{color:#0f8a5f;}
  .fnd-card-headline .fnd-h-b{color:#c98f1c;}
  .fnd-card-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0f8a5f;margin-left:5px;vertical-align:middle;}
  .fnd-card-underline{width:42px;height:4px;border-radius:3px;background:linear-gradient(90deg,#1fae86,#8fe0b8);margin:12px 0 16px;}
  .fnd-card-summary{font:14px/1.75 var(--font-body);color:#324a3d;margin:0 0 16px;}
  .fnd-card-related{display:flex;flex-direction:column;}
  .fnd-card-related-row{display:flex;align-items:center;gap:10px;padding:13px 6px;border-top:1px solid rgba(15,60,35,.12);font:13px var(--font-body);color:#233a2c;cursor:pointer;transition:.15s ease;}
  .fnd-card-related-row:hover{color:#0f8a5f;}
  .fnd-card-related-dot{width:6px;height:6px;border-radius:50%;background:#0f8a5f;flex:0 0 auto;}
  .fnd-card-empty{padding:13px 6px 2px;font:12.5px var(--font-body);color:#54685d;}

  /* Reusable Footop Sports light card — same visual language as .fnd-card above (black brand
     pill, two-tone title, teal underline), but for non-overlay contexts. Previously this
     "story card" look only appeared when opening one article in detail; these rules extend
     it to the Tracking 관리 (search/manage) screen and the Tracking 뉴스 list header so the
     branding is visible everywhere in Tracking, not just one click deep. */
  .fs-card{background:linear-gradient(160deg,#161616,#161616);border-radius:22px;padding:20px 20px 18px;box-shadow:0 14px 34px rgba(0,0,0,.28);}
  .fs-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(204,255,0,.12);color:#CCFF00;font:600 11px var(--font-mono);letter-spacing:1.2px;padding:7px 13px;border-radius:999px;margin-bottom:14px;}
  .fs-title{font:700 21px/1.3 var(--font-display);letter-spacing:-0.02em;margin:0;color:#CCFF00;}
  .fs-title .fs-title-b{color:#c98f1c;}
  .fs-underline{width:38px;height:4px;border-radius:3px;background:linear-gradient(90deg,#1fae86,#8fe0b8);margin:10px 0 14px;}
  .fs-sub{font:12.5px/1.7 var(--font-body);color:#B9C2A0;margin:0;}

  /* Tracking 관리 — Universal Search card */
  .fs-card .tracking-universal-search input{background:#1C1C1C!important;border-color:rgba(255,255,255,0.14)!important;color:#F2F5E8!important;box-shadow:none!important;}
  .fs-card .tracking-universal-search input::placeholder{color:#6c8177;}
  .fs-card .tracking-suggestions .suggest-chip{border:1px solid rgba(255,255,255,0.14);background:#1C1C1C;color:#D6DCC8;}
  .fs-card .tracking-suggestions .suggest-chip:hover{border-color:#CCFF00;color:#CCFF00;box-shadow:0 3px 10px rgba(0,0,0,.3);}
  .fs-card .tracking-search-status{color:#B9C2A0;}
  .fs-card .tracking-result{background:#1C1C1C;border-color:rgba(255,255,255,0.12);color:#F2F5E8;}
  .fs-card .tracking-result:hover{border-color:#CCFF00;box-shadow:0 4px 14px rgba(0,0,0,.3);}
  .fs-card .tracking-result-name{color:#F2F5E8;}
  .fs-card .tracking-result-meta{color:#8C8C8C;}
  .fs-card .tracking-result-type{color:#CCFF00;}
  .fs-card .tracking-result.tracked{opacity:.55;}
  .fs-card .trk-browse-row{border-top-color:rgba(255,255,255,0.14);}
  .fs-card .trk-browse-btn{background:#1C1C1C;border-color:rgba(255,255,255,0.14);}
  .fs-card .trk-browse-btn:hover{border-color:#CCFF00;box-shadow:0 6px 16px rgba(0,0,0,.3);}
  .fs-card .trk-browse-btn b{color:#F2F5E8;}
  .fs-card .trk-browse-btn small{color:#8C8C8C;}

  /* Tracking 관리 — MY TRACKING list card */
  .fs-card-list{margin-top:16px;}
  .fs-card-list .step-label{color:#B9C2A0;}
  .fs-card-list .my-track-row{background:#1C1C1C;border:1px solid rgba(255,255,255,0.12);}
  .fs-card-list .my-track-name{color:#F2F5E8;}
  .fs-card-list .my-track-sub{color:#8C8C8C;}
  .fs-card-list .my-track-del{color:#8C8C8C;}
  .fs-card-list .my-track-del:hover{color:#CCFF00;}
  .fs-card-list .empty-block{border-color:rgba(255,255,255,0.14);color:#B9C2A0;background:rgba(255,255,255,.05);}
  .fs-card-list .empty-block b{color:#F2F5E8;}

  /* Tracking 뉴스 — header card (kicker/title/desc + credibility + category legend) */
  .fs-news-head .trk-section-sub{color:#B9C2A0;margin-top:2px;}
  .fs-news-head .tracking-cred-card{background:#1C1C1C;border:1px solid rgba(255,255,255,0.12);}
  .fs-news-head .tracking-cred-card b{color:#CCFF00;}
  .fs-news-head .tracking-cred-card span{color:#B9C2A0;}
  .fs-news-head .trk-category-legend{margin-top:14px;}
  .fs-news-head .trk-legend-chip{background:#1C1C1C!important;border-color:rgba(255,255,255,0.14)!important;color:#F2F5E8!important;}
  .fs-news-head .btn-sm{background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);color:#F2F5E8;}
  .fs-news-head .btn-sm:hover{border-color:#CCFF00;color:#CCFF00;}
  @media all {.fnd-title{font-size:20px;}.fnd-body{padding:16px 16px 32px;}.fnd-card{margin:16px 12px;padding:22px 18px 16px;}.fnd-card-headline{font-size:20px;}}

/* from index.html <style id="footop-five-nav-v1"> */
  .scroll-area{padding-bottom:118px!important;}
  .footop-bottom-nav{position:fixed!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;z-index:120!important;width:100%!important;max-width:980px!important;border-radius:18px 18px 0 0!important;border:1px solid rgba(183,255,50,.16)!important;border-bottom:0!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;background:rgba(7,10,9,.98)!important;box-shadow:0 -14px 34px rgba(0,0,0,.30)!important;backdrop-filter:blur(18px);gap:8px!important;}
  .footop-bottom-btn{min-height:60px!important;flex:1!important;justify-content:center!important;padding:8px 8px!important;border-radius:13px!important;}
  .footop-bottom-btn.active{background:linear-gradient(135deg,rgba(183,255,50,.14),rgba(40,209,124,.09));}
  .footop-bottom-icon{width:34px!important;height:34px!important;border-radius:10px!important;font-size:11px!important;}
  .tracking-news-shell{margin:0 0 14px;padding:16px 20px 0;border-bottom:1px solid rgba(183,255,50,.10);}
  .tracking-news-brand{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;}
  .tracking-news-kicker{font:11px var(--font-mono);letter-spacing:1.4px;color:#8a9b92;text-transform:uppercase;}
  .tracking-news-title{font:700 28px var(--font-display);letter-spacing:-0.02em;color:#fff;}
  .tracking-news-status{font:11px var(--font-mono);letter-spacing:1px;color:#9dc9a7;border:1px solid rgba(183,255,50,.18);padding:7px 9px;border-radius:999px;white-space:nowrap;}
  .status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b7ff32;box-shadow:0 0 10px rgba(183,255,50,.55);margin-right:6px;}
  .tracking-subtabs{display:flex;gap:4px;}
  .tracking-subtab{flex:1;border:0;background:transparent;color:#71807a;padding:11px 10px;font:11px var(--font-mono);cursor:pointer;border-bottom:2px solid transparent;}
  .tracking-subtab.active{color:#dfffb1;border-bottom-color:#b7ff32;background:linear-gradient(180deg,rgba(183,255,50,.08),transparent);}
  .tracking-credibility{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 14px;}
  .tracking-cred-card{background:#0d1310;border:1px solid rgba(183,255,50,.12);border-radius:12px;padding:11px 12px;}
  .tracking-cred-card b{display:block;font:11px var(--font-mono);letter-spacing:.8px;color:#dfffb1;margin-bottom:4px;}
  .tracking-cred-card span{display:block;font-size:11px;line-height:1.45;color:#8d9a95;}
  .footop-placeholder-panel{padding:26px 24px 120px;}
  .placeholder-card{max-width:760px;margin:30px auto;padding:28px;border:1px solid rgba(183,255,50,.14);border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(255,213,74,.12),transparent 24%),radial-gradient(circle at 10% 30%,rgba(40,209,124,.14),transparent 35%),#0d1410;box-shadow:0 20px 50px rgba(0,0,0,.20);}
  .placeholder-kicker{font:11px var(--font-mono);letter-spacing:1.4px;color:#8dff2f;margin-bottom:10px;}
  .placeholder-title{font:34px var(--font-score);color:#fff;}
  .placeholder-card p{color:#8d9a95;line-height:1.6;max-width:560px;}
  .placeholder-badge{display:inline-block;margin-top:8px;padding:6px 9px;border-radius:999px;background:rgba(255,213,74,.12);border:1px solid rgba(255,213,74,.25);color:#ffd54a;font:11px var(--font-mono);letter-spacing:1px;}
  /* Every remaining top-level screen gets the same yellow-green corner glow instead of flat
     black — kept moderate (11-13% opacity) so body text stays easily readable on top of it.
     #panelMatch/#panelTeams get their own deep-green theme instead (see
     footop-match-deep-green-v1-css below). */
  #panelTracking,#panelMainMenu,#panelProfile,#panelFeed,#panelCommunity,#panelTraining,#panelCoach,#panelTeams{background:radial-gradient(120% 50% at 88% -8%,rgba(255,213,74,.12),transparent 55%),radial-gradient(120% 50% at -8% 108%,rgba(183,255,50,.13),transparent 55%),#0a0a0a!important;}
  /* AI Coach — same yellow "Footop Sports" background as Training Home. Deliberately does NOT
     reuse the shared --ink/--ink-dim/--line tokens for text sitting directly on the page (those
     are tuned for a dark backdrop and are used app-wide, so they stay untouched) — only the two
     components that had no solid card background of their own (topic chips, intro card) get a
     scoped dark-on-light treatment here. Chat bubbles/thinking-indicator/match-example already
     have their own solid dark background, so they read fine unchanged on a light page. */
  /* .panel's own min-height:100% doesn't reliably resolve here (its parent .scroll-area gets
     its height from flex:1, which some browsers don't treat as a "definite" percentage basis
     for a plain-flow descendant) — so when chat content is short, #panelCoach's box used to
     stay content-height and the near-black body behind it showed through below the fold. Was
     invisible when everything was dark; became a visible seam once this panel turned yellow.
     Same fix family as the earlier sidebar-gap fix: give it a real absolute min-height instead
     of relying on the percentage. */
  #panelCoach{min-height:calc(100vh - 84px - var(--subnav-h));}
  @media all {#panelCoach{min-height:calc(100vh - 74px);}}
  #panelCoach .topic-chip{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8;}
  #panelCoach .topic-chip:hover{border-color:#B4E600;color:#F2F5E8;}
  #panelCoach .intro-card{background:linear-gradient(155deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.12);border-radius:16px;color:#F2F5E8;}
  #panelCoach .intro-card b{color:#CCFF00;}
  #panelCoach .tag{color:#8C8C8C;}
  #panelCoach .thinking span{color:#8C8C8C;}
  #panelCoach .coach-tagline-strip{color:#6b5a24;}
  .match-badge{font:600 11px var(--font-mono);letter-spacing:1px;color:#4de1ff;border:1px solid rgba(77,225,255,.28);background:rgba(77,225,255,.06);padding:8px 12px;border-radius:999px;white-space:nowrap}
  .match-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .match-card{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;background:linear-gradient(160deg,#101710,#090d0a);overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:360px}
  .match-card::before{content:"";position:absolute;inset:auto -35px -55px;width:150px;height:150px;border-radius:50%;background:var(--match-glow,rgba(183,255,50,.14));filter:blur(12px)}
  .match-card--market{--match-glow:rgba(77,225,255,.18)}
  .match-card--video{--match-glow:rgba(255,213,74,.16)}
  .match-card-top{display:flex;justify-content:space-between;align-items:flex-start}
  .match-num{font:700 42px var(--font-score);color:rgba(183,255,50,.22);line-height:1}
  .match-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:linear-gradient(145deg,#b7ff32,#28d17c);color:#081008;box-shadow:0 0 22px rgba(183,255,50,.18)}
  .match-card--video .match-icon{background:linear-gradient(145deg,#ffd54a,#ff8b5a)}
  .match-label{font:600 11px var(--font-mono);letter-spacing:1.3px;color:#76847b}
  .match-name{font:700 26px var(--font-display);margin:0;line-height:1.25;letter-spacing:-0.02em}
  .match-copy{color:#89968f;font-size:11px;line-height:1.75;margin:0}
  .match-points{margin:6px 0 0;padding:0 0 0 16px;color:#a8b5ae;font-size:11px;line-height:1.7}
  .match-points li+li{margin-top:4px}
  .match-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
  .match-tag{font:600 11px var(--font-mono);color:#dce8df;background:rgba(183,255,50,.06);border:1px solid rgba(183,255,50,.12);padding:5px 8px;border-radius:99px}
  .match-note{margin-top:20px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);border-radius:16px;padding:14px;color:#7f8d85;font-size:11px;line-height:1.6}
  .ft32-expansion{margin-top:14px;border-color:rgba(183,255,50,.22);background:linear-gradient(145deg,#101810,#0a100c)}
  .ft32-expansion-num{font:700 52px var(--font-score);color:rgba(183,255,50,.18);line-height:1;margin:4px 0 8px}
  .ft32-expansion-copy{color:#9aa8a0;font-size:11px;line-height:1.75;margin-top:10px}
  .ft32-expansion-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
  .ft32-expansion-stat{border:1px solid rgba(255,255,255,.07);background:#0c120f;border-radius:14px;padding:12px}
  .ft32-expansion-stat b{display:block;font:700 20px var(--font-score);color:#b7ff32}
  .ft32-expansion-stat span{display:block;margin-top:4px;color:#7f8d85;font:11px var(--font-mono);line-height:1.5}
  .ft32-expansion-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .ft32-expansion-tags span{font:600 11px var(--font-mono);color:#dce8df;background:rgba(183,255,50,.06);border:1px solid rgba(183,255,50,.12);padding:5px 8px;border-radius:99px}
  @media all {.ft32-expansion-stats{grid-template-columns:1fr}}
  @media all {.footop-bottom-copy{display:none!important}.footop-bottom-btn{min-height:54px!important;padding:7px 4px!important}.tracking-news-shell{padding:14px 14px 0}.tracking-news-title{font-size:24px}.tracking-credibility{grid-template-columns:1fr}.footop-placeholder-panel{padding:18px 12px 110px}.placeholder-card{padding:22px;margin-top:14px}.placeholder-title{font-size:30px}}

/* from index.html <style id="footop-hide-legacy-tracking"> */
.nav-tab[data-panel="tracking"]{display:none!important}

/* from index.html <style id="footop-navigation-final-v7"> */
  :root{--footop-lime:#b7ff32;--footop-green:#28d17c;--footop-yellow:#ffd54a;}
  /* 2026-09-22: moved from a vertical .sidebar list to the horizontal top strip — the container
     is #dynamicSidebarNav now (see footop-navigation-final-v7's own top edit), so this repoints
     the same treatment (rounded icon chip, active glow) from a left-accent vertical card to a
     bottom-accent horizontal tab. */
  #dynamicSidebarNav.nav-tabs{gap:6px;}
  #dynamicSidebarNav .nav-tab{background:transparent;position:relative;overflow:visible;}
  .nav-tab-icon{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font:11px var(--font-mono);color:#0b120e;background:linear-gradient(145deg,#b7ff32,#ffd54a);flex:0 0 auto;}
  #dynamicSidebarNav .nav-tab:not(.active) .nav-tab-icon{filter:saturate(.7);opacity:.78;}
  .footop-bottom-nav{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:none!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;margin-top:auto!important;z-index:20!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;background:rgba(7,10,9,.985)!important;box-shadow:0 -12px 30px rgba(0,0,0,.22)!important;}
  .main{min-height:100vh;}
  .scroll-area{padding-bottom:14px!important;overflow-y:auto;}
  .composer-bar{position:relative!important;flex:0 0 auto!important;z-index:15;}
  .tracking-credibility{margin-top:12px;}
  .trk-news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  @media all {.trk-news-list{grid-template-columns:1fr;}.footop-bottom-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;}}

/* from index.html <style id="footop-training-hub-css"> */
.training-hub{padding:28px 28px 120px;max-width:1120px;margin:0 auto;color:var(--ink)}
.training-hub .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.training-hub .brand{font-family:var(--font-display);font-size:56px;letter-spacing:-0.02em;margin-top:4px;font-weight:700}
.training-hub .sub{color:var(--ink-dim);font-size:13px;margin-top:6px}
.training-hero{margin-top:22px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(200,255,0,.09),rgba(255,214,0,.04));padding:26px;display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.training-tag{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid rgba(200,255,0,.35);color:var(--accent);font-family:var(--font-mono);font-size:11px;letter-spacing:1px}
.training-hero h1{font-family:var(--font-display);font-size:44px;line-height:1.25;margin:14px 0 10px;font-weight:700;letter-spacing:-0.02em}
.training-hero p{max-width:680px;color:var(--ink-dim);line-height:1.7;margin:0}
.training-streak{min-width:180px;border:1px solid var(--line);background:#111;padding:18px}
.training-streak span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:1px}
.training-streak strong{display:block;font-size:34px;margin:5px 0;color:var(--accent)}
.training-streak em{font-size:11px;color:#d8e992;font-style:normal}
.training-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.training-btn{border:1px solid var(--accent);background:var(--accent);color:#0a0a0a;padding:11px 15px;font-weight:700;cursor:pointer}
.training-btn.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.training-section{margin-top:26px}
.training-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}
.training-section-head h2{font-family:var(--font-display);font-size:24px;margin:0;font-weight:700;letter-spacing:-0.02em}
.training-section-head span{color:var(--ink-faint);font-family:var(--font-mono);font-size:11px}
.training-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.training-card{border:1px solid var(--line);background:var(--bg-raised);padding:18px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.training-card .mini{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:1px}
.training-card h3{font-size:22px;margin:8px 0 6px}
.training-card p{color:var(--ink-dim);font-size:12px;line-height:1.6;margin:0}
.training-card button{margin-top:14px;align-self:flex-start}
.training-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.training-stat{border:1px solid var(--line);background:var(--bg-raised);padding:14px}
.training-stat b{font-size:22px;display:block}
.training-stat span{display:block;color:var(--ink-faint);font-family:var(--font-mono);font-size:11px;margin-top:5px}
.training-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.training-style{padding:16px;border:1px solid var(--line);background:var(--bg-raised);cursor:pointer;transition:.15s}
.training-style:hover,.training-style.active{border-color:var(--accent);box-shadow:0 0 16px rgba(200,255,0,.12)}
.training-style b{font-family:var(--font-mono);font-size:11px;color:var(--accent)}
.training-style p{font-size:11px;color:var(--ink-dim);line-height:1.5;margin:8px 0 0}
.training-lab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.training-lab .training-card{min-height:150px}
.training-icon{font-size:26px}
.training-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);z-index:99990;padding:24px}
.training-modal.open{display:flex}
.training-modal-box{width:min(560px,100%);background:#0e0e0e;border:1px solid var(--accent);box-shadow:0 0 40px rgba(200,255,0,.14);padding:24px}
.training-modal-head{display:flex;justify-content:space-between;gap:10px;align-items:start}
.training-modal-head h3{font-family:var(--font-display);font-size:30px;margin:0;font-weight:700;letter-spacing:-0.02em}
.training-close{border:1px solid var(--line);background:transparent;color:var(--ink);width:34px;height:34px;cursor:pointer}
.training-list{margin:16px 0 0;padding-left:18px;color:var(--ink-dim);line-height:1.9}
.training-progress{height:8px;background:#191919;border:1px solid var(--line);margin-top:16px}
.training-progress span{display:block;height:100%;width:68%;background:linear-gradient(90deg,var(--accent),#e8e000)}
@media all {.training-hero{flex-direction:column}.training-streak{width:100%}.training-styles{grid-template-columns:repeat(2,1fr)}.training-stats{grid-template-columns:repeat(3,1fr)}}
@media all {.training-hub{padding:20px 14px 110px}.training-hub .brand{font-size:40px}.training-hero h1{font-size:34px}.training-cards,.training-lab{grid-template-columns:1fr}.training-styles{grid-template-columns:1fr}.training-stats{grid-template-columns:repeat(2,1fr)}}

/* from index.html <style id="ft-clean-css"> */
#panelTraining .ft-view{max-width:1120px;margin:0 auto;padding:28px 28px 150px;box-sizing:border-box;color:var(--ink)}#panelTraining .ft-view[hidden]{display:none!important}.ft-kicker,.ft-label{font:11px var(--font-mono);letter-spacing:1.5px;color:#b7ff32}.ft-head h1{font:700 52px var(--font-display);margin:6px 0;letter-spacing:-0.02em}.ft-head p,.ft-card>p{color:var(--ink-dim);line-height:1.7}.ft-card{margin-top:18px;border:1px solid rgba(183,255,50,.16);background:linear-gradient(145deg,#101610,#0b100c);border-radius:18px;padding:22px}.ft-pos{font:700 72px var(--font-display);margin:8px 0 14px;letter-spacing:-0.02em}.ft-actions{display:flex;gap:10px;flex-wrap:wrap}.ft-actions button,#ftAnalyzeBtn{border:1px solid #b7ff32;background:#b7ff32;color:#071006;border-radius:11px;padding:12px 16px;font-weight:700;cursor:pointer}.ft-actions button:nth-child(2),#ftAnalyzeBtn{background:transparent;color:#fff}.ft-actions button:nth-child(3){background:#151c16;color:#b7ff32}.ft-players{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.ft-player{border:1px solid rgba(255,255,255,.08);background:#0d130f;border-radius:15px;padding:14px;min-height:220px}.ft-photo{height:120px;border-radius:12px;background:radial-gradient(circle,#283528,#0a0d0b);display:grid;place-items:center;font:38px var(--font-score);color:#b7ff32;margin-bottom:10px}.ft-player b,.ft-player span,.ft-player strong,.ft-player small{display:block}.ft-player span,.ft-player small{color:#849189;font-size:11px;margin-top:5px}.ft-player strong{color:#b7ff32;font:11px var(--font-mono);margin-top:8px}.ft-clean-card{margin-top:12px}.ft-card input[type=file]{width:100%;margin:12px 0}.ft-card video{width:100%;max-height:360px;background:#000;border-radius:12px}.ft-card textarea{width:100%;box-sizing:border-box;min-height:120px;background:#080d09;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;margin:8px 0 12px}.ft-card #ftStatus{font:11px var(--font-mono);color:#93a098;margin-top:9px}.ft-result{border:1px solid rgba(183,255,50,.14);border-left:3px solid #b7ff32;background:#0d130f;border-radius:12px;padding:15px;line-height:1.8;color:#dce7df;white-space:normal}.ft-result b{color:#b7ff32}@media all {.ft-players{grid-template-columns:repeat(2,1fr)}#panelTraining .ft-view{padding:18px 14px 150px}} 

/* from index.html <style id="coach-media-upload-css"> */
.coach-media-wrap{display:flex;align-items:center;position:relative;flex-shrink:0}
.coach-media-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(183,255,50,.25);background:rgba(183,255,50,.06);color:#dfffb0;font:700 16px var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coach-media-btn:hover{border-color:rgba(183,255,50,.55);box-shadow:0 0 18px rgba(183,255,50,.10)}
.coach-media-chip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.08);background:#111611;color:#cdd7d0;border-radius:999px;padding:6px 12px;font:11px var(--font-mono);margin:8px auto 0;width:max-content}
.coach-tagline-strip{width:100%;margin:8px auto 0;font-size:11px;color:#8a9891;text-align:center;}
.coach-tagline-strip b{color:#b7ff32;font-weight:700;}
@media all {.composer-pill{gap:6px;padding:6px 6px 6px 10px}.coach-media-btn,#sendBtn{width:36px;height:36px}}

/* from index.html <style id="footop-canva-card-unify-v1"> */
/* 2026-09-22: unify card SHAPE (corner radius) across every screen to match the reviewed Canva
   concept's uniformly-rounded card language, without touching any panel's own color theme
   (Training cream/gold, Match+Teams deep-green, Social/Moments light-lime, FOOTOP X purple all
   stay exactly as previously built — user explicitly chose "카드 스타일만 통일" over a full
   color reskin). Loads after every panel's own card rules so this radius wins regardless of
   selector specificity; every other property (background, border color, shadow tint) is left
   untouched so each panel's established palette is unaffected. */
.news-card,.league-card,.mode-card,.team-card,.player-card,.trk-news-card,.trk-player-card,
.tracking-cred-card,.mn-featured-card,.fs-card,.placeholder-card,.match-card,.training-card,
.footop-x-card,.training-player-card,.training-v6-card,.training-v8-profile-card,
.training-v8-routine-card,.training-v8-fun-card,.v10-card,.ft32-card,.ft32-ai-routine-card,
.ft32-more-card,.ft32-hero-card,.dna-intro-card,.dna-hero-card,.dna-position-card,.dna-dev-card,
.dna-detail-card,.dna-public-card,.dna-dex-card,.main-menu-card,.training-motion-card,
.footop-main-card,.training-v7-home-card,.training-v7-analyze-card,.v27-home-card,.v30-card,
.v30-result-card,.footop-auth-card,.footop-card,.footop-athlete-card,.footop-post-card,
.footop-ad-card,.footop-learn-card,.footop-home-todo-card,
.footop-team-card,.footop-mindset-card,
.fsm-beginner-card,.routine-screen-card,.footop-login-hero,.footop-login-features,
.footop-x-locked,.tracking-news-card,.trk-news-square,.footop-main-hero{
  border-radius:20px !important;
}

/* from index.html <style id="footop-skeleton-css"> */
@keyframes footopSkelSheen{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes footopSkelFade{from{opacity:0}to{opacity:1}}
.fskel-page,.fskel-list,.fskel-grid,.fskel-text{animation:footopSkelFade .25s ease both;}
.fskel{position:relative;overflow:hidden;border-radius:10px;background:var(--bg-raised,#161616);border:1px solid var(--line-soft,rgba(255,255,255,.06));}
.fskel::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(183,255,50,.10) 45%,rgba(255,255,255,.10) 50%,rgba(183,255,50,.10) 55%,transparent 70%);background-size:250% 100%;animation:footopSkelSheen 1.6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.fskel::after{animation:none;}}
.fskel-page{display:flex;flex-direction:column;gap:16px;padding:6px 2px 18px;}
.fskel-row-top{display:flex;gap:10px;}
.fskel-row-top .fskel{height:52px;flex:1;border-radius:14px;}
.fskel-bar{height:44px;border-radius:12px;}
.fskel-pairgroup{display:flex;gap:10px;flex:1;}
.fskel-pairs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px;flex:1;}
.fskel-pairs .fskel{height:34px;border-radius:11px;}
.fskel-pairs .fskel-pairs-wide{grid-column:1/-1;height:38px;}
.fskel-list{display:flex;flex-direction:column;gap:14px;}
.fskel-list-row{display:flex;align-items:center;gap:12px;}
.fskel-circle{width:34px;height:34px;border-radius:50%;flex:0 0 auto;}
.fskel-lines{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.fskel-lines .fskel{height:9px;border-radius:5px;}
.fskel-lines .fskel:first-child{width:62%;}
.fskel-lines .fskel:last-child{width:38%;}
.fskel-hero-row{display:flex;gap:10px;align-items:flex-start;}
.fskel-hero-row .fskel-hero{width:104px;height:104px;border-radius:18px;flex:0 0 auto;}
.fskel-thumbs{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start;}
.fskel-thumbs .fskel{width:56px;height:56px;border-radius:10px;flex:0 0 auto;}
.fskel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
.fskel-grid .fskel{aspect-ratio:1/1;border-radius:12px;}
.fskel-text{display:flex;flex-direction:column;gap:8px;padding:6px 2px;}
.fskel-text .fskel{height:10px;border-radius:5px;}
.fskel-mini-wrap{padding:14px 2px;}
.fskel-mini{height:14px;border-radius:6px;width:55%;margin:0 auto;}
.fskel-caption{margin-top:10px;text-align:center;font:11px var(--font-mono,monospace);color:var(--ink-faint,#5C5C57);letter-spacing:.3px;}

/* from index.html <style id="footop-ai-auth-v1-css"> */
/* AI features need a signed-in account (2026-10-09) */
.fai-sheet{position:fixed;left:0;right:0;bottom:0;z-index:2000000;display:flex;justify-content:center;padding:0 12px calc(14px + env(safe-area-inset-bottom));pointer-events:none}
.fai-card{pointer-events:auto;width:100%;max-width:420px;background:#151814;border:1px solid #2c3127;border-radius:18px;padding:16px 16px 14px;box-shadow:0 18px 40px rgba(0,0,0,.55);color:#fff;transform:translateY(12px);opacity:.4;transition:transform .22s ease,opacity .22s ease}
.fai-sheet.in .fai-card{transform:none;opacity:1}
.fai-card h4{margin:0 0 4px;font:700 16px/1.35 var(--font-body)}
.fai-card p{margin:0 0 12px;color:#b7bcb0;font:500 13.5px/1.5 var(--font-body);word-break:keep-all}
.fai-row{display:flex;gap:8px}
.fai-row button{flex:1;height:44px;border-radius:12px;border:1px solid #2c3127;background:#1d211a;color:#fff;font:600 14px var(--font-body);cursor:pointer}
.fai-row .fai-go{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a;font-weight:700}
.fai-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2000000;max-width:min(92vw,380px);padding:10px 14px;border-radius:12px;background:#1d211a;border:1px solid #2c3127;color:#e6e9e1;font:500 13px/1.45 var(--font-body);text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: reduce){.fai-card{transition:none}}

/* from index.html <style id="footop-news-quality-css"> */
/* Fact-check verdict pill (cards) */
.fcx-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font:700 11px/1 var(--font-body);letter-spacing:0;white-space:nowrap;
  background:rgba(10,12,10,.72);border:1px solid var(--fc,#8a8a85);color:var(--fc,#cfcfca);backdrop-filter:blur(6px)}
.fcx-pill .d{width:6px;height:6px;border-radius:50%;background:var(--fc,#8a8a85);flex:none}
.fcx-official,.fcx-verified{--fc:#9BE15D}
.fcx-corroborated{--fc:#5FD3C7}
.fcx-single{--fc:#B9B9B2}
.fcx-rumour{--fc:#FFB547}
/* Fact-check panel (card news last slide, News Desk) */
.fcx-panel{border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--fc,#8a8a85);border-radius:14px;padding:14px 14px 12px;background:rgba(16,18,16,.82);color:#EDEDE8;text-align:left}
.fcx-head{display:flex;align-items:center;gap:8px;font:700 16px/1.3 var(--font-body);color:var(--fc)}
.fcx-head .n{margin-left:auto;font:600 12px/1 var(--font-body);color:#A8A8A2}
.fcx-why{margin:8px 0 10px;font:500 13.5px/1.55 var(--font-body);color:#DADAD4}
.fcx-warn{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(255,181,71,.1);color:#FFCF85;font:500 12.5px/1.45 var(--font-body)}
.fcx-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fcx-list li{display:flex;gap:8px;align-items:baseline;font:500 12.5px/1.4 var(--font-body);color:#C9C9C3}
.fcx-list b{color:#fff;font-weight:700;flex:none}
.fcx-list a{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.fcx-foot{margin-top:10px;font:500 11.5px/1.45 var(--font-body);color:#8F8F89}
.fcx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fcx-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:#CCFF00;color:#0D0D0D;font:600 13px/1 var(--font-body);text-decoration:none;border:0;cursor:pointer}
.fcx-btn.ghost{background:transparent;color:#EDEDE8;border:1px solid rgba(255,255,255,.22)}
.cardnews-body .fcx-panel{margin-top:4px}
/* language chip on news screens */
.fnl-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#DADAD4;font:600 12.5px/1 var(--font-body);cursor:pointer}
.fnl-chip:hover{border-color:#CCFF00}
.fnl-note{font:500 11.5px/1.4 var(--font-body);color:#8F8F89;margin-top:6px}

/* from index.html <style id="footop-safety-v1-css"> */
.footop-safety-menu{position:fixed;z-index:2000002;display:none;min-width:168px;background:#161616;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.5);}
.footop-safety-menu.open{display:block;}
.footop-safety-menu-title{font-size:11px;color:var(--ink-faint);padding:6px 8px 4px;}
.footop-safety-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-size:13px;padding:8px;border-radius:8px;cursor:pointer;}
.footop-safety-menu-item:hover{background:rgba(255,255,255,.08);}
.footop-safety-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,12px);background:#1c1c1c;border:1px solid var(--line);color:var(--ink);font-size:13px;padding:10px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:999990;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.footop-safety-toast.show{opacity:1;transform:translate(-50%,0);}
.footop-report-btn{opacity:.6;}
.footop-blocked-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);}
.footop-blocked-row:last-child{border-bottom:none;}

/* from index.html <style id="footop-topi-v1-css"> */
.topic-chip-gear{border-color:rgba(204,255,0,.55)!important;color:#CCFF00!important;font-weight:700;}
.topic-chip-gear:hover{background:rgba(204,255,0,.1);}
.topi-gear-overlay{position:fixed;inset:0;z-index:1000000;display:none;background:rgba(4,4,4,.88);backdrop-filter:blur(6px);overflow-y:auto;padding:24px 14px 40px;}
.topi-gear-overlay.open{display:block;}
.topi-gear-box{max-width:560px;margin:0 auto;background:#161616;border:1px solid rgba(204,255,0,.28);border-radius:20px;padding:18px 16px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.topi-gear-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;}
.topi-gear-kicker{font:600 11px var(--font-mono);letter-spacing:1px;color:#CCFF00;}
.topi-gear-title{font-size:19px;font-weight:700;color:#fff;margin:2px 0 0;}
.topi-gear-close{background:none;border:1px solid var(--line);color:var(--ink);border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer;flex-shrink:0;}
.topi-gear-note{font-size:12px;color:var(--ink-dim);line-height:1.6;margin:6px 0 14px;}
.topi-gear-label{display:block;font:600 11px var(--font-mono);color:var(--ink-dim);margin:14px 0 7px;letter-spacing:.4px;}
.topi-gear-chips{display:flex;flex-wrap:wrap;gap:7px;}
.topi-gear-chip{background:#1C1C1C;border:1px solid rgba(255,255,255,.16);color:#F2F5E8;border-radius:999px;padding:8px 13px;font-size:12.5px;cursor:pointer;min-height:36px;}
.topi-gear-chip.active{background:#CCFF00;border-color:#CCFF00;color:#0D0D0D;font-weight:700;}
.topi-gear-input,.topi-gear-select{width:100%;box-sizing:border-box;background:#0d0d0d;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:13px;padding:11px;font-family:inherit;}
.topi-gear-go{width:100%;margin-top:18px;background:linear-gradient(135deg,#CCFF00,#28d17c);color:#0D0D0D;border:none;border-radius:14px;padding:14px;font-weight:600;font-size:14px;cursor:pointer;}
.topi-gear-go:disabled{opacity:.55;cursor:default;}
.topi-gear-err{color:#ff8080;font-size:12.5px;margin-top:10px;}
.topi-gear-sum{background:rgba(204,255,0,.07);border:1px solid rgba(204,255,0,.25);border-radius:14px;padding:13px;font-size:13.5px;line-height:1.7;color:#F2F5E8;margin:6px 0 4px;}
.topi-gear-sec{font:600 11px var(--font-mono);color:#CCFF00;letter-spacing:.8px;margin:18px 0 8px;}
.topi-gear-prio{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.topi-gear-prio:last-child{border-bottom:none;}
.topi-gear-prio b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px;}
.topi-gear-prio span{font-size:12.5px;color:var(--ink-dim);line-height:1.6;}
.topi-gear-num{flex:0 0 24px;height:24px;border-radius:50%;background:#CCFF00;color:#0D0D0D;font:600 12px var(--font-mono);display:flex;align-items:center;justify-content:center;}
.topi-gear-rec{background:#1C1C1C;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:13px;margin-bottom:10px;}
.topi-gear-rec h4{margin:0 0 4px;color:#fff;font-size:14px;}
.topi-gear-spec{font-size:12.5px;color:#CCFF00;line-height:1.55;margin-bottom:6px;}
.topi-gear-rec p{margin:0 0 6px;font-size:12.5px;color:var(--ink-dim);line-height:1.6;}
.topi-gear-warn{color:#FFC93C!important;}
.topi-gear-kw{display:inline-block;margin:3px 5px 0 0;background:#0d0d0d;border:1px dashed rgba(255,255,255,.28);color:var(--ink);border-radius:8px;padding:5px 9px;font-size:11.5px;cursor:pointer;}
.topi-gear-list{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-dim);line-height:1.8;}
.topi-gear-disc{font-size:11.5px;color:var(--ink-faint);line-height:1.6;margin-top:14px;}
.topi-gear-actions{display:flex;gap:8px;margin-top:16px;}
.topi-gear-actions button{flex:1;border-radius:12px;padding:12px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--line);background:#1C1C1C;color:var(--ink);}
.topi-gear-actions .primary{background:#CCFF00;border-color:#CCFF00;color:#0D0D0D;}

/* from index.html <style id="footop-3d-css"> */
/* Shared "살짝(subtle) 3D" treatment for Main-tab cards (Footop Feed / Social Feed / Market).
   Two pieces: a fade+rise-with-tilt entrance (pure CSS keyframe, index-staggered via an inline
   animation-delay set by each render function) and a pointer-tracked hover tilt (JS below,
   desktop-only — mobile/touch has no real hover to track, and reduced-motion disables both). */
.footop-3d{transform-style:preserve-3d;will-change:transform;}
.footop-3d-in{animation:footop3dIn .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes footop3dIn{
  from{opacity:0;transform:perspective(900px) rotateX(-10deg) translateY(16px) scale(.98);}
  to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1);}
}
.footop-3d:not(.footop-tilt-live){transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);}
@media(prefers-reduced-motion:reduce){
  .footop-3d-in{animation:none!important;opacity:1!important;transform:none!important;}
  .footop-3d{transition:none!important;}
}

/* from index.html <style id="footop-x-css"> */
/* FOOTOP X — Dark Premium + Purple Neon, a layer on top of the base Footop brand (lime/dark),
   not a separate look. Scoped entirely to .footop-x-* classes so nothing here touches the
   existing --accent/--bg-raised tokens other panels already rely on. */
:root{
  --x-purple:#9D5CFF;
  --x-purple-2:#7B3FE4;
  --x-violet:#B388FF;
  --x-bg-2:#18121F;
}
.footop-x-badge{display:inline-flex;align-items:center;gap:4px;font:600 11px var(--font-mono);letter-spacing:.5px;color:#fff;padding:4px 10px 4px 8px;border-radius:999px;background:linear-gradient(135deg,var(--x-purple-2),var(--x-violet));box-shadow:0 0 12px rgba(157,92,255,.5),inset 0 0 0 1px rgba(255,255,255,.15);position:relative;overflow:hidden;white-space:nowrap;}
.footop-x-badge.sm{font-size:11px;padding:3px 8px 3px 6px;}
.footop-x-badge::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);animation:footopXShimmer 3.4s ease-in-out infinite;}
@keyframes footopXShimmer{0%{left:-60%;}55%{left:130%;}100%{left:130%;}}

.footop-x-border{position:relative;border-radius:18px;background:linear-gradient(160deg,#15101c,#0d0d0f);border:1px solid rgba(157,92,255,.35);box-shadow:inset 0 0 0 1px rgba(157,92,255,.06), 0 10px 34px rgba(123,63,228,.16), 0 0 24px rgba(157,92,255,.10);}
.footop-x-border::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;background:linear-gradient(135deg,rgba(157,92,255,.65),rgba(179,136,255,.12),rgba(157,92,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85;}
.footop-x-corner{position:absolute;width:14px;height:14px;border-color:var(--x-violet);opacity:.85;pointer-events:none;}
.footop-x-corner.tl{top:7px;left:7px;border-top:2px solid;border-left:2px solid;border-radius:4px 0 0 0;}
.footop-x-corner.tr{top:7px;right:7px;border-top:2px solid;border-right:2px solid;border-radius:0 4px 0 0;}
.footop-x-corner.bl{bottom:7px;left:7px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 4px;}
.footop-x-corner.br{bottom:7px;right:7px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 4px 0;}

.footop-x-card{background:linear-gradient(165deg,var(--x-bg-2),#0D0D0D);border:1px solid rgba(157,92,255,.28);border-radius:16px;padding:16px;color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.4),0 0 18px rgba(157,92,255,.08);}

.footop-x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--x-purple-2),var(--x-violet));color:#fff;font:600 13px var(--font-body);letter-spacing:.2px;cursor:pointer;box-shadow:0 6px 20px rgba(123,63,228,.4);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.footop-x-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(123,63,228,.55);filter:brightness(1.08);}
.footop-x-btn:active{transform:translateY(0);}
.footop-x-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
.footop-x-btn.ghost{background:transparent;border:1px solid rgba(157,92,255,.4);color:var(--x-violet);box-shadow:none;}
.footop-x-btn.ghost:hover{background:rgba(157,92,255,.08);transform:none;}

.footop-x-locked{position:relative;border-radius:16px;padding:22px 18px;text-align:center;background:linear-gradient(165deg,var(--x-bg-2),#0D0D0D);border:1px dashed rgba(157,92,255,.4);color:#fff;}
.footop-x-locked-title{font:700 15px var(--font-display);margin:10px 0 6px;letter-spacing:-0.02em}
.footop-x-locked-desc{font-size:12px;color:#BDBDBD;margin-bottom:14px;line-height:1.55;}

.footop-x-glow{animation:footopXPulse 3.6s ease-in-out infinite;}
@keyframes footopXPulse{0%,100%{box-shadow:0 6px 20px rgba(123,63,228,.4);}50%{box-shadow:0 6px 26px rgba(157,92,255,.65);}}
@media(prefers-reduced-motion:reduce){.footop-x-badge::after{animation:none;}.footop-x-glow{animation:none;}}

.footop-x-modal-overlay{position:fixed;inset:0;background:rgba(5,3,8,.82);backdrop-filter:blur(10px);z-index:20000;display:none;align-items:center;justify-content:center;padding:18px;}
.footop-x-modal-overlay.open{display:flex;animation:footopXFadeIn .22s ease;}
@keyframes footopXFadeIn{from{opacity:0;}to{opacity:1;}}
.footop-x-modal{width:min(420px,94vw);max-height:88vh;overflow-y:auto;position:relative;border-radius:22px;padding:28px 24px 24px;background:radial-gradient(120% 60% at 50% -10%,rgba(157,92,255,.16),transparent 60%),linear-gradient(165deg,var(--x-bg-2),#0D0D0D);border:1px solid rgba(157,92,255,.4);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 40px rgba(157,92,255,.15);}
.footop-x-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;}
.footop-x-modal-kicker{display:block;font:700 22px var(--font-display);background:linear-gradient(135deg,var(--x-violet),var(--x-purple-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;letter-spacing:-0.02em}
.footop-x-modal-tagline{font-size:14px;color:#BDBDBD;margin-bottom:18px;}
.footop-x-modal-benefits{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;}
.footop-x-modal-benefits li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#EDEDED;line-height:1.5;}
.footop-x-modal-benefits li b{color:var(--x-violet);flex:0 0 auto;}
.footop-x-modal-price{font:700 26px var(--font-score);color:#fff;margin-bottom:4px;}
.footop-x-modal-price span{font-size:13px;color:#9A9A94;font-weight:600;}
.footop-x-modal-status{font-size:12px;color:#BDBDBD;margin:10px 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.footop-x-modal-status.error{color:#ff8a8a;border-color:rgba(255,80,80,.3);background:rgba(255,80,80,.06);}
.footop-x-modal-status.success{color:#9fffb0;border-color:rgba(80,255,140,.3);background:rgba(80,255,140,.06);}
@media all {.footop-x-modal{padding:24px 18px 20px;}}

#introXBadgeSlot:not(:empty){display:block;margin-bottom:10px;}
#introXPreview:not(:empty){margin-top:14px;}
#introXPreview .footop-x-locked{padding:14px;text-align:left;}
#introXPreview .footop-x-locked-title{font-size:13px;margin:0 0 4px;}
#introXPreview .footop-x-locked-desc{font-size:11.5px;margin-bottom:10px;}
#coachXStrip:not(:empty){margin-top:8px;}
.footop-x-coach-upsell{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--font-mono);color:var(--x-violet);background:rgba(157,92,255,.08);border:1px solid rgba(157,92,255,.3);padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .18s ease,border-color .18s ease;}
.footop-x-coach-upsell:hover{background:rgba(157,92,255,.16);border-color:rgba(157,92,255,.5);}
.footop-x-coach-active{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--font-mono);color:var(--x-violet);}
.intro-card.footop-x-border,#panelCoach .intro-card.footop-x-border{padding:16px 18px;color:#fff;background:linear-gradient(160deg,#15101c,#0d0d0f)!important;border:1px solid rgba(157,92,255,.35)!important;border-radius:18px!important;}

/* from index.html <style id="footop-click-fix-css"> */
.trk-action,.trk-add-option,.league-card,.team-card,.player-card,.btn-sm{cursor:pointer;position:relative;z-index:2}

/* from index.html <style id="footop-training-scroll-fix-v2"> */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#shell{height:100vh;min-height:0}
.main{min-height:0}
.scroll-area{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth;padding-bottom:132px!important}
.panel{min-height:100%;overflow:visible}
#panelTraining{height:auto;min-height:100%;overflow:visible}
.training-hub{min-height:100%;padding-bottom:170px!important}
@media all {.scroll-area{padding-bottom:148px!important}.training-hub{padding-bottom:180px!important}}

/* from index.html <style id="footop-training-analyze-css"> */
.training-onboarding{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);padding:18px}.training-onboarding.open{display:flex}.training-qbox{width:min(760px,100%);max-height:92vh;overflow:auto;background:#0f120f;border:1px solid rgba(200,255,0,.5);box-shadow:0 0 50px rgba(183,255,50,.12);border-radius:20px;padding:26px}.training-qhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.training-qhead h2{font-family:var(--font-display);font-size:34px;margin:0;font-weight:700;letter-spacing:-0.02em}.training-qhead p{color:var(--ink-dim);margin:8px 0 0}.training-progressbar{height:6px;background:#191919;border-radius:20px;margin:18px 0}.training-progressbar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffd54a);border-radius:20px;width:7%}.training-qtext{font-size:23px;font-weight:700;line-height:1.35;margin:18px 0}.training-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.training-opt{border:1px solid var(--line);background:#141814;color:var(--ink);padding:14px 8px;border-radius:12px;cursor:pointer;font-size:12px;min-height:74px}.training-opt:hover{border-color:rgba(200,255,0,.45);transform:translateY(-1px)}.training-opt.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(200,255,0,.17),rgba(200,255,0,.06));box-shadow:0 0 18px rgba(200,255,0,.1)}.training-opt small{display:block;color:var(--ink-faint);margin-top:5px}.training-qfooter{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:18px}.training-qcount{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.training-profile-card{border:1px solid rgba(200,255,0,.28);background:linear-gradient(135deg,rgba(200,255,0,.08),rgba(255,213,74,.03));padding:22px;border-radius:18px;margin:18px 0 8px}.training-profile-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.training-position{font-family:var(--font-display);font-size:42px;line-height:1.25;font-weight:700;letter-spacing:-0.02em}.training-profile-sub{color:var(--ink-dim);margin-top:8px}.training-traits{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:15px}.training-trait{border:1px solid var(--line);padding:9px;background:#111511}.training-trait b{display:block;font-size:16px}.training-trait span{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.training-players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.training-player-card{background:#121512;border:1px solid var(--line);padding:10px;border-radius:14px;cursor:pointer;transition:.15s}.training-player-card:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(200,255,0,.1)}.training-player-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#0c0c0c}.training-player-card b{display:block;font-size:12px;margin-top:8px}.training-player-card span{display:block;color:var(--ink-faint);font-size:11px;margin-top:3px}.training-routine-box{border:1px solid var(--line);background:#111311;padding:18px;border-radius:16px}.training-time-row{display:flex;gap:8px;flex-wrap:wrap}.training-time-btn{border:1px solid var(--line);background:transparent;color:var(--ink);padding:9px 12px;border-radius:10px;cursor:pointer;font-family:var(--font-mono);font-size:11px}.training-time-btn.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px rgba(200,255,0,.08)}.training-routine-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}.training-day-card{border:1px solid var(--line);background:#0e100e;padding:14px;border-radius:12px}.training-day-card .day{font-family:var(--font-mono);font-size:11px;color:var(--accent)}.training-day-card h4{margin:6px 0;font-size:14px}.training-day-card p{color:var(--ink-dim);font-size:11px;line-height:1.6;margin:0}.training-example{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.training-example img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.training-analyze-box{border:1px solid rgba(200,255,0,.22);background:#0f130f;padding:18px;border-radius:16px}.training-upload{border:1px dashed rgba(200,255,0,.45);padding:20px;text-align:center;border-radius:14px;background:rgba(200,255,0,.03);cursor:pointer}.training-upload input{display:none}.training-goal{width:100%;min-height:100px;margin-top:12px;background:#0b0d0b;border:1px solid var(--line);color:var(--ink);padding:12px;border-radius:12px;resize:vertical}.training-analysis-result{margin-top:14px;border-left:3px solid var(--accent);padding:13px;background:#111511;line-height:1.7}.training-clip-modal{position:fixed;inset:0;z-index:100002;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.8);padding:18px}.training-clip-modal.open{display:flex}.training-clip-box{width:min(700px,100%);background:#0e100e;border:1px solid var(--accent);border-radius:18px;padding:20px}.training-clip-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.training-clip-links a{padding:12px;border:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:10px;background:#141814}.training-clip-links a:hover{border-color:var(--accent);color:var(--accent)}
@media all {.training-options{grid-template-columns:1fr 1fr}.training-profile-grid{grid-template-columns:1fr}.training-traits{grid-template-columns:repeat(2,1fr)}.training-players{grid-template-columns:repeat(2,1fr)}.training-routine-days{grid-template-columns:1fr 1fr}.training-example{grid-template-columns:1fr}}

/* from index.html <style id="footop-training-player-cinematic-v3"> */
.training-player-card{position:relative;overflow:hidden;min-height:330px;padding:0!important;text-align:left;background:linear-gradient(160deg,#101510 0%,#0b0e0c 100%);border:1px solid rgba(183,255,50,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 18px 45px rgba(0,0,0,.22);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.training-player-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(183,255,50,.16),transparent 34%),linear-gradient(180deg,transparent 24%,rgba(4,8,6,.95) 74%);pointer-events:none;z-index:1}
.training-player-card:hover{transform:translateY(-6px);border-color:rgba(183,255,50,.7)!important;box-shadow:0 0 0 1px rgba(183,255,50,.18),0 0 28px rgba(183,255,50,.12),0 26px 55px rgba(0,0,0,.35)}
.training-player-card .player-rank{position:absolute;top:10px;left:10px;z-index:4;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(4,8,6,.62);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);font:11px var(--font-mono);color:#e8f6e2;letter-spacing:.7px}
.training-player-card .player-match{position:absolute;top:10px;right:10px;z-index:4;padding:6px 8px;border-radius:999px;background:linear-gradient(135deg,#b7ff32,#e2ff88);color:#0a0f08;font:600 11px var(--font-mono);letter-spacing:.6px;box-shadow:0 0 18px rgba(183,255,50,.18)}
.training-player-card .player-visual{position:relative;height:210px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.training-player-card .player-visual::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(183,255,50,.28),rgba(183,255,50,.03) 55%,transparent 72%);filter:blur(1px)}
.training-player-card .player-monogram{position:relative;z-index:2;width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-score);font-size:44px;font-weight:700;color:#f8fff2;background:linear-gradient(145deg,#1c271d,#0b0f0c);border:1px solid rgba(183,255,50,.32);box-shadow:0 0 30px rgba(183,255,50,.16),inset 0 0 25px rgba(255,255,255,.03)}
.training-player-card .player-meta{position:relative;z-index:2;padding:0 15px 15px}
.training-player-card .player-name{display:block;font-size:17px;font-weight:700;letter-spacing:-.2px;color:#f7fff3}
.training-player-card .player-role{display:flex;justify-content:space-between;align-items:center;margin-top:4px;color:#8f9b91;font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.8px}
.training-player-card .player-why{margin-top:11px;display:flex;gap:5px;flex-wrap:wrap}
.training-player-card .player-chip{padding:5px 7px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:rgba(255,255,255,.025);color:#b7c3ba;font-size:11px}
.training-player-card .player-progress{height:4px;margin-top:13px;border-radius:99px;background:#182018;overflow:hidden}
.training-player-card .player-progress span{display:block;height:100%;background:linear-gradient(90deg,#b7ff32,#ffd54a);box-shadow:0 0 10px rgba(183,255,50,.25)}
.training-style-note{margin-top:8px;color:#6f7e72;font-size:11px;font-family:var(--font-mono)}
.training-profile-injected .training-section-head{align-items:flex-end}
@media all {.training-player-card{min-height:310px}.training-player-card .player-visual{height:190px}}

/* from index.html <style id="footop-training-v6-css"> */
/* Final Training v6: compact home, separate scrollable routines/analyze, no examples */
#panelTraining{overflow:hidden!important;padding:0!important}
#panelTraining > .training-hub{display:none!important}
.footop-training-v6{height:100%;min-height:0;display:flex;flex-direction:column;background:radial-gradient(circle at 15% 0%,rgba(183,255,50,.08),transparent 35%),#070b09;color:#fff}
.training-v6-head{padding:20px 22px 12px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex:none}
.training-v6-kicker{font:11px var(--font-mono);letter-spacing:2px;color:#b7ff32}
.training-v6-title{font:700 34px var(--font-display);letter-spacing:-0.02em;margin-top:4px}
.training-v6-sub{font-size:11px;color:#8f9c96;margin-top:4px}
.training-v6-actions{display:flex;gap:8px;flex-wrap:wrap}
.training-v6-btn{border:1px solid rgba(183,255,50,.32);background:rgba(183,255,50,.08);color:#eaffbf;border-radius:10px;padding:9px 12px;font:600 11px var(--font-mono);cursor:pointer}
.training-v6-btn.primary{background:linear-gradient(145deg,#b7ff32,#28d17c);color:#071009;border-color:#b7ff32;box-shadow:0 0 18px rgba(183,255,50,.14)}
.training-v6-btn:hover{border-color:#b7ff32;box-shadow:0 0 16px rgba(183,255,50,.12)}
.training-v6-main{flex:1;min-height:0;padding:0 22px 18px;display:flex;flex-direction:column}
.training-v6-view{display:none;min-height:0;flex:1}
.training-v6-view.active{display:flex}
.training-v6-home{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:140px}
.training-v6-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;min-height:0;flex:1}
.training-v6-card{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.01));padding:16px;min-width:0;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.training-v6-position{font:700 44px var(--font-display);margin:8px 0 6px;color:#fff;letter-spacing:-0.02em}
.training-v6-note{font-size:11px;color:#89968f;line-height:1.6}
.training-v6-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}.training-v6-mini div{border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px;background:rgba(255,255,255,.02)}.training-v6-mini b{font-size:15px;display:block}.training-v6-mini span{font:11px var(--font-mono);color:#77857d}
.training-v6-players{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.training-v6-player{border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:0;overflow:hidden;background:#0b100d;color:#fff;text-align:left;cursor:pointer;min-width:0}
.training-v6-player:hover{transform:translateY(-2px);border-color:rgba(183,255,50,.35);box-shadow:0 0 18px rgba(183,255,50,.08)}
.training-v6-player-photo{height:132px;background:linear-gradient(180deg,#161d18,#090c0a);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.training-v6-player-photo img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.4))}.training-v6-player-body{padding:9px}.training-v6-player-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.training-v6-player-meta{font:11px var(--font-mono);color:#8e9c94;margin-top:3px}.training-v6-match{margin-top:7px;font:600 11px var(--font-mono);color:#b7ff32}.training-v6-tabs{display:flex;gap:8px;padding-bottom:10px;overflow:auto;flex:none}.training-v6-tab{border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.02);color:#96a39c;padding:8px 12px;font:600 11px var(--font-mono);cursor:pointer;white-space:nowrap}.training-v6-tab.active{color:#061009;background:#b7ff32;border-color:#b7ff32;box-shadow:0 0 15px rgba(183,255,50,.14)}
.training-v6-scroll{min-height:0;overflow:auto;padding-right:4px;padding-bottom:16px}
.training-v6-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.training-day-v6{border:1px solid rgba(255,255,255,.07);border-radius:15px;background:#0a0f0c;padding:14px}.training-day-v6 h4{margin:0;font-size:16px}.training-day-v6 .daymeta{font:11px var(--font-mono);color:#b7ff32;margin-top:4px}.training-ex{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.training-ex:last-child{border-bottom:0}.training-ex b{font-size:11px}.training-ex span{display:block;font-size:11px;color:#7f8c85;margin-top:3px;line-height:1.4}.training-detail-mini{border:1px solid rgba(183,255,50,.25);background:rgba(183,255,50,.06);color:#eaffbf;border-radius:8px;padding:6px 8px;font:600 11px var(--font-mono);cursor:pointer;white-space:nowrap}
.training-v6-analyze{min-height:0;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:140px}.training-drop{border:1px dashed rgba(183,255,50,.4);border-radius:18px;padding:26px;background:rgba(183,255,50,.03);text-align:center}.training-drop input{display:block;margin:16px auto 0;color:#cbd6cf}.training-goal-v6{width:100%;min-height:120px;resize:vertical;margin-top:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0a0e0c;color:#fff;padding:12px;font:12px var(--font-body)}
.training-profile-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.training-choice{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:rgba(255,255,255,.02);color:#fff;cursor:pointer;text-align:left}.training-choice strong{display:block;font-size:15px}.training-choice span{display:block;color:#8f9c96;font-size:11px;margin-top:4px;line-height:1.5}
.training-v6-empty{border:1px dashed rgba(255,255,255,.1);border-radius:16px;padding:20px;text-align:center;color:#7e8c84}
.training-v6-modal{position:fixed;inset:0;z-index:100010;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:16px}.training-v6-modal.open{display:flex}.training-v6-modal-box{width:min(720px,100%);max-height:90vh;overflow:auto;border:1px solid rgba(183,255,50,.4);border-radius:20px;background:#0a0f0c;padding:18px;box-shadow:0 0 35px rgba(183,255,50,.12)}
.training-v6-video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin-top:12px}.training-v6-video iframe{width:100%;height:100%;border:0}
.training-v6-profile-modal{position:fixed;inset:0;z-index:100011;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.8);padding:16px}.training-v6-profile-modal.open{display:flex}.training-v6-profile-box{width:min(520px,100%);border:1px solid rgba(183,255,50,.4);border-radius:20px;background:linear-gradient(160deg,#101610,#080c09);overflow:hidden}.training-v6-profile-cover{height:260px;background:linear-gradient(180deg,rgba(183,255,50,.15),transparent),#0a0f0c;display:flex;justify-content:center;align-items:flex-end}.training-v6-profile-cover img{height:100%;max-width:85%;object-fit:contain}.training-v6-profile-body{padding:16px}.training-v6-profile-body h3{margin:0;font-size:26px}.training-v6-profile-body p{color:#8f9c96;font-size:11px;line-height:1.6}.training-v6-profile-tags{display:flex;gap:7px;flex-wrap:wrap}.training-v6-profile-tags span{padding:6px 8px;border-radius:999px;background:rgba(183,255,50,.08);border:1px solid rgba(183,255,50,.18);font:11px var(--font-mono);color:#dfffad}
@media all {.training-v6-grid{grid-template-columns:1fr}.training-v6-players{grid-template-columns:repeat(5,minmax(115px,1fr));overflow:auto}.training-v6-home{overflow:auto}.training-v6-head{align-items:flex-start;flex-direction:column}}
@media all {.training-v6-head{padding:14px}.training-v6-main{padding:0 14px 12px}.training-v6-title{font-size:28px}.training-v6-grid{gap:8px}.training-v6-card{padding:13px}.training-v6-position{font-size:36px}.training-v6-mini{grid-template-columns:repeat(3,1fr)}.training-v6-days{grid-template-columns:1fr}.training-profile-choice{grid-template-columns:1fr 1fr}}

/* from index.html <style id="footop-training-v8-ui-css"> */
/* V8: stronger dashboard + no nested scroll on home */
#panelTraining .training-v6-view.training-v6-home{overflow:hidden!important}
.training-v8-player .visual{height:175px;position:relative;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 25%,rgba(183,255,50,.24),transparent 38%),linear-gradient(145deg,#131b15,#080b09)!important}
.training-v8-avatar{width:118px;height:132px;position:relative;display:flex;align-items:flex-end;justify-content:center}
.training-v8-avatar .head{position:absolute;top:7px;width:52px;height:58px;border-radius:50% 50% 45% 45%;background:linear-gradient(145deg,#f1c29a,#9e6645);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.training-v8-avatar .hair{position:absolute;top:2px;width:58px;height:26px;border-radius:50% 50% 40% 40%;background:#17110d}
.training-v8-avatar .kit{width:92px;height:84px;border-radius:20px 20px 14px 14px;background:linear-gradient(160deg,#e7f3ff,#e8edf0);border:2px solid rgba(255,255,255,.2);box-shadow:0 12px 26px rgba(0,0,0,.4);position:relative}
.training-v8-avatar .kit:before{content:"FOOTOP";position:absolute;left:50%;top:29px;transform:translateX(-50%);font:600 11px var(--font-mono);letter-spacing:1px;color:#152119}
.training-v8-avatar .kit:after{content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font:600 11px var(--font-mono);color:#152119}
.training-v8-rw .kit{background:linear-gradient(160deg,#ff6b4a,#b10f18)}
.training-v8-st .kit{background:linear-gradient(160deg,#252cdb,#0a0e53)}
.training-v8-cam .kit{background:linear-gradient(160deg,#f5d64d,#a66d00)}
.training-v8-cm .kit{background:linear-gradient(160deg,#1d9d66,#0d4f36)}
.training-v8-cb .kit{background:linear-gradient(160deg,#5e6870,#1b2025)}
.training-v8-player .visual .kit-number{position:absolute;bottom:11px;right:17px;font:600 11px var(--font-mono);color:#e9f6e8}
.training-v8-player .profile-open{margin-top:10px;border:1px solid rgba(183,255,50,.25);background:rgba(183,255,50,.05);color:#dcffab;border-radius:10px;padding:7px 9px;font:600 11px var(--font-mono);cursor:pointer}
.training-v8-player:hover .profile-open{border-color:#b7ff32;box-shadow:0 0 14px rgba(183,255,50,.18)}
.training-v8-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:18px;backdrop-filter:blur(12px)}
.training-v8-modal.open{display:flex}
.training-v8-modal-box{width:min(760px,100%);max-height:90vh;overflow:auto;background:#0b0f0c;border:1px solid rgba(183,255,50,.25);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.65);padding:22px;color:#fff}
.training-v8-modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.training-v8-close{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:#101612;color:#fff;cursor:pointer}
.training-v8-profile{display:grid;grid-template-columns:170px 1fr;gap:18px;margin-top:18px}
.training-v8-profile-card{border:1px solid rgba(183,255,50,.16);border-radius:18px;background:linear-gradient(145deg,#101710,#0b0e0c);padding:14px}
.training-v8-profile-card .big-avatar{height:190px;display:grid;place-items:end center;background:radial-gradient(circle at 50% 25%,rgba(183,255,50,.18),transparent 44%)}
.training-v8-ability{margin-top:12px}
.training-v8-ability .row{display:grid;grid-template-columns:90px 1fr 34px;gap:8px;align-items:center;margin:8px 0;font:11px var(--font-mono)}
.training-v8-ability .bar{height:7px;border-radius:99px;background:#141914;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.training-v8-ability .bar span{display:block;height:100%;background:linear-gradient(90deg,#25d37d,#b7ff32,#ffd54a);border-radius:99px}
.training-v8-routine-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.training-v8-routine-actions{display:flex;gap:8px;flex-wrap:wrap}
.training-v8-routine-big{font-size:15px;padding:14px 18px;border-radius:13px;box-shadow:0 0 22px rgba(183,255,50,.12)}
#trainingV7Routine{font-size:16px;padding:15px 22px;border-radius:14px;font-weight:700;box-shadow:0 0 24px rgba(183,255,50,.18)}
.training-v8-routine-list{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.training-v8-routine-card{flex:0 0 280px;border:1px solid rgba(183,255,50,.14);border-radius:16px;background:#0d120f;padding:15px}
.training-v8-routine-card h4{font-size:18px;margin:6px 0}
.training-v8-routine-card p{font-size:12px;line-height:1.7;color:#9aa89f}
.training-v8-routine-card .detail{font-size:13px;line-height:1.75;color:#dce6df;margin-top:10px}
.training-v8-timer{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid rgba(183,255,50,.16);border-radius:18px;background:linear-gradient(145deg,rgba(183,255,50,.07),rgba(255,255,255,.02));padding:16px;margin-bottom:14px}
.training-v8-timer-time{font:700 42px var(--font-score);letter-spacing:1px;color:#b7ff32}
.training-v8-timer-controls{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.training-v8-timer-controls button{min-width:90px}
.training-v8-analyze-shell{min-height:100%;grid-template-columns:1.15fr .85fr!important}
.training-v8-analyze-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.training-v8-metric{padding:12px;border:1px solid rgba(183,255,50,.12);border-radius:12px;background:#0d120f}
.training-v8-metric b{font-size:20px;color:#b7ff32;display:block}
.training-v8-metric span{font:11px var(--font-mono);color:#79877e}
.training-v8-fun{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.training-v8-fun-card{padding:13px;border-radius:13px;background:linear-gradient(145deg,#111812,#0c0f0d);border:1px solid rgba(183,255,50,.12)}
.training-v8-fun-card b{font-size:13px}.training-v8-fun-card p{font-size:11px;color:#86948c;line-height:1.55;margin:6px 0 0}
@media all {.training-v8-profile{grid-template-columns:1fr}.training-v8-routine-card{flex-basis:240px}.training-v8-timer{grid-template-columns:1fr}.training-v8-timer-controls{justify-content:flex-start}.training-v8-analyze-shell{grid-template-columns:1fr!important}.training-v8-analyze-metrics{grid-template-columns:1fr 1fr}.training-v8-fun{grid-template-columns:1fr}}

/* from index.html <style id="footop-training-v10-fix-css"> */
#panelTraining .training-v6-head,#panelTraining .training-v6-main{min-height:0}
#trainingV6Home.v10-home{height:100%;overflow:hidden!important}
.v10-home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;height:100%;min-height:0}
.v10-card{background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:1px solid rgba(183,255,50,.14);border-radius:22px;padding:18px;box-shadow:0 16px 45px rgba(0,0,0,.23);min-width:0}
.v10-pos{font:700 56px var(--font-score);color:#fff;letter-spacing:-1px;line-height:.95;margin-top:8px}
.v10-sub{color:#91a099;font-size:11px;line-height:1.7;margin-top:8px}
.v10-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.v10-btn{border:1px solid rgba(183,255,50,.28);background:rgba(183,255,50,.05);color:#eaffbf;border-radius:12px;padding:10px 12px;font:600 11px var(--font-mono);cursor:pointer}
.v10-btn.primary{background:linear-gradient(135deg,#b7ff32,#ffd54a);color:#07110d;border:none;box-shadow:0 0 24px rgba(183,255,50,.15)}
.v10-traits{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:16px}
.v10-trait{padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#0d120f;text-align:center}.v10-trait b{display:block;font-size:15px;color:#b7ff32}.v10-trait span{font:7px var(--font-mono);color:#7d8b84}
.v10-players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;height:100%;min-height:0}
.v10-player{border:1px solid rgba(255,255,255,.08);border-radius:17px;background:linear-gradient(160deg,#111811,#080c09);overflow:hidden;text-align:left;color:#fff;cursor:pointer;display:flex;flex-direction:column;min-width:0}
.v10-player:hover{border-color:rgba(183,255,50,.45);box-shadow:0 0 24px rgba(183,255,50,.08);transform:translateY(-2px)}
.v10-player-visual{height:190px;display:flex;justify-content:center;align-items:flex-end;background:radial-gradient(circle at 50% 18%,rgba(183,255,50,.2),transparent 40%),linear-gradient(180deg,#172019,#0a0f0c);overflow:hidden}
.v10-player-visual img{height:100%;width:100%;object-fit:cover;object-position:center 18%;display:block}
.v10-avatar-placeholder{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin-bottom:25px;background:radial-gradient(circle at 50% 35%,#d8a77e 0 30%,#7a4c36 31% 44%,#24201e 45% 55%,#151a16 56%);border:2px solid rgba(183,255,50,.28);color:#eaffbf;font:700 30px var(--font-score)}
.v10-player-body{padding:10px 11px}.v10-player-name{font:600 12px var(--font-score)}.v10-player-meta{font:11px var(--font-mono);color:#7f8d85;margin-top:4px}.v10-match{font:600 11px var(--font-mono);color:#b7ff32;margin-top:8px}.v10-chiprow{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.v10-chip{font:7px var(--font-mono);border:1px solid rgba(255,255,255,.07);padding:4px 6px;border-radius:999px;color:#c2cdc6}
.v10-modal{position:fixed;inset:0;z-index:99950;background:rgba(2,7,4,.78);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:22px}.v10-modal.open{display:flex}.v10-modal-box{width:min(860px,100%);max-height:88vh;overflow:auto;border:1px solid rgba(183,255,50,.28);border-radius:24px;background:#0a0f0c;box-shadow:0 30px 100px rgba(0,0,0,.55);padding:22px}
.v10-qgrid{display:grid;gap:9px;margin-top:15px}.v10-qopt{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px;background:#0d120f;color:#eaf4ec;text-align:left;cursor:pointer;display:flex;justify-content:space-between}.v10-qopt.active{border-color:#b7ff32;background:rgba(183,255,50,.08);box-shadow:0 0 20px rgba(183,255,50,.06)}
.v10-profile{display:grid;grid-template-columns:290px 1fr;gap:18px;margin-top:16px}.v10-profile-img{min-height:390px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#162118,#0d120f);border:1px solid rgba(183,255,50,.12)}.v10-profile-img img{width:100%;height:390px;object-fit:cover;object-position:center 18%;display:block}.v10-profile-info{padding:4px}.v10-skill{margin-bottom:12px}.v10-skill-head{display:flex;justify-content:space-between;font-size:11px}.v10-bar{height:7px;background:#182019;border-radius:999px;overflow:hidden;margin-top:5px}.v10-bar span{display:block;height:100%;background:linear-gradient(90deg,#28d17c,#b7ff32);border-radius:999px}
#trainingV6Routine.v10-routine{height:100%;display:block!important;overflow:hidden}.v10-routine-shell{height:100%;display:flex;flex-direction:column;gap:12px}.v10-routine-top{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap}.v10-day-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;flex:0 0 auto}.v10-day{white-space:nowrap;border:1px solid rgba(255,255,255,.08);background:#0d120f;color:#8f9c96;border-radius:12px;padding:9px 12px;font:600 11px var(--font-mono);cursor:pointer}.v10-day.active{background:rgba(183,255,50,.12);color:#b7ff32;border-color:rgba(183,255,50,.45)}.v10-ex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1;min-height:0}.v10-ex{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;background:linear-gradient(150deg,#101710,#0b0f0c);min-width:0;display:flex;flex-direction:column;justify-content:space-between}.v10-ex-title{font:700 13px var(--font-display);color:#fff;letter-spacing:-0.02em}.v10-ex-copy{font-size:11px;line-height:1.6;color:#8d9a94;margin-top:6px}.v10-ex-meta{font:11px var(--font-mono);color:#b7ff32;margin-top:8px}.v10-routine-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}.v10-time{font:700 22px var(--font-score);color:#fff}.v10-timer-btn{border:1px solid rgba(183,255,50,.3);background:rgba(183,255,50,.06);color:#eaffbf;border-radius:12px;padding:9px 12px;font:600 11px var(--font-mono);cursor:pointer}
@media all {.v10-home-grid{grid-template-columns:1fr}.v10-players{grid-template-columns:repeat(5,150px);overflow-x:auto}.v10-routine{overflow:hidden!important}.v10-ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto}}
@media all {.v10-traits{grid-template-columns:repeat(3,1fr)}.v10-profile{grid-template-columns:1fr}.v10-profile-img{min-height:280px}.v10-profile-img img{height:280px}.v10-home-grid{height:auto;min-height:0}.v10-card{padding:15px}.v10-routine{height:calc(100vh - 160px)!important}.v10-ex-grid{grid-template-columns:1fr;overflow:auto}.v10-player-visual{height:170px}}

/* from index.html <style id="footop-training-v12-final-fix-css"> */
/* V12 FINAL — reliable inline routine + truly separate Analyze view */
#trainingInlineRoutine{
  display:block !important;
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  transform:translateY(-4px) !important;
  margin-top:0 !important;
  padding:0 14px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  background:rgba(183,255,50,.025) !important;
  transition:max-height .28s ease,opacity .2s ease,transform .28s ease,margin .28s ease,padding .28s ease,border-color .28s ease !important;
}
#trainingInlineRoutine.open{
  max-height:360px !important;
  overflow:auto !important;
  opacity:1 !important;
  transform:none !important;
  margin-top:12px !important;
  padding:14px !important;
  border-color:rgba(183,255,50,.20) !important;
}
#trainingInlineRoutine .training-inline-routine-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
#trainingInlineRoutine .training-inline-routine-title{font:700 18px var(--font-display);color:#fff;margin-top:3px;letter-spacing:-0.02em}
#trainingInlineRoutine .training-inline-routine-meta{font:11px var(--font-mono);letter-spacing:1px;color:#b7ff32}
#trainingInlineRoutine .training-inline-routine-close{border:1px solid rgba(183,255,50,.22);background:#0d1510;color:#dfffad;border-radius:8px;padding:6px 9px;font:600 11px var(--font-mono);cursor:pointer}
#trainingInlineRoutine .training-inline-routine-list{display:grid;gap:7px}
#trainingInlineRoutine .training-inline-routine-item{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
#trainingInlineRoutine .training-inline-routine-item:last-child{border-bottom:0}
#trainingInlineRoutine .training-inline-routine-time{font:600 11px var(--font-mono);color:#b7ff32}
#trainingInlineRoutine .training-inline-routine-copy b{display:block;font-size:11px;color:#fff}
#trainingInlineRoutine .training-inline-routine-copy span{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:#89968f}
/* The V12 controller owns which Training view is visible. */
#panelTraining .footop-training-v6.v12-controlled #trainingV6Home{min-height:0 !important;}
#panelTraining .footop-training-v6.v12-controlled #trainingV6Analyze{min-height:0 !important;}

/* from index.html <style id="footop-training-v13-routine-click-fix"> */
#trainingInlineRoutine[aria-hidden="true"]{pointer-events:none}
#trainingInlineRoutine.open{pointer-events:auto}
.training-v7-home-card{overflow:visible!important}
.training-v7-home-grid{overflow:visible!important}

/* from index.html <style id="footop-training-v16-routine-css"> */
#footopRoutineV16{position:fixed;inset:0;z-index:120000;background:rgba(3,7,5,.94);backdrop-filter:blur(18px);display:none;align-items:center;justify-content:center;padding:18px;overflow:auto}
#footopRoutineV16.open{display:flex}
#footopRoutineV16 .v16-box{width:min(980px,100%);max-height:92vh;overflow:auto;background:#0b110d;border:1px solid rgba(183,255,50,.25);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.65);padding:24px}
.v16-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.v16-kicker{font:600 11px var(--font-mono);letter-spacing:1.8px;color:#b7ff32}.v16-title{font:700 34px var(--font-display);margin:6px 0;color:#fff;letter-spacing:-0.02em}.v16-sub{color:#8e9b94;font-size:12px;line-height:1.65}.v16-close{border:1px solid rgba(183,255,50,.22);background:#101811;color:#b7ff32;border-radius:12px;width:42px;height:42px;font-size:22px;cursor:pointer}.v16-controls{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.v16-time{border:1px solid rgba(255,255,255,.1);background:#0e1510;color:#b6c1ba;border-radius:999px;padding:10px 15px;font:600 11px var(--font-mono);cursor:pointer}.v16-time.active{color:#071008;background:#b7ff32;border-color:#b7ff32}.v16-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.v16-stat{background:#0e1510;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px}.v16-stat b{display:block;font:700 20px var(--font-score);color:#fff}.v16-stat span{font-size:11px;color:#7f8d85}.v16-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v16-ex{border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#101811,#0b100d);border-radius:16px;padding:16px;display:flex;gap:13px}.v16-num{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(183,255,50,.1);color:#b7ff32;display:grid;place-items:center;font:600 11px var(--font-mono)}.v16-ex h3{font-size:15px;margin:0;color:#fff}.v16-ex p{font-size:11px;line-height:1.65;color:#9aa69f;margin:7px 0 0}.v16-meta{margin-top:9px;font:600 11px var(--font-mono);color:#b7ff32}.v16-tip{margin-top:18px;padding:14px 16px;border-left:3px solid #b7ff32;background:#101811;color:#aab5ae;font-size:11px;line-height:1.7}
@media all {#footopRoutineV16{padding:8px}.v16-box{padding:16px!important;border-radius:18px!important}.v16-title{font-size:28px}.v16-summary{grid-template-columns:1fr 1fr}.v16-list{grid-template-columns:1fr}.v16-ex{padding:13px}}

/* from index.html <style id="footop-routine-screen-fix"> */
#footopRoutineScreenFix{position:fixed;inset:0;z-index:999999;display:none;background:rgba(3,6,4,.82);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
#footopRoutineScreenFix.open{display:flex}
#footopRoutineScreenFix .routine-screen-card{width:min(760px,96vw);max-height:min(760px,88vh);overflow:auto;background:#0b100d;border:1px solid rgba(183,255,50,.55);box-shadow:0 0 60px rgba(183,255,50,.12),0 20px 80px rgba(0,0,0,.6);border-radius:24px;padding:24px;color:#fff;box-sizing:border-box}
#footopRoutineScreenFix .routine-screen-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
#footopRoutineScreenFix .routine-kicker{font:600 11px var(--font-mono);letter-spacing:2px;color:#b7ff32}
#footopRoutineScreenFix h2{margin:5px 0 0;font:700 34px var(--font-display);letter-spacing:-0.02em}
#footopRoutineScreenFix .routine-pos{margin-top:6px;color:#8f9c96;font-size:11px}
#footopRoutineScreenFix .routine-close{border:1px solid rgba(255,255,255,.16);background:#141914;color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700}
#footopRoutineScreenFix .routine-times{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
#footopRoutineScreenFix .routine-time{border:1px solid rgba(255,255,255,.12);background:#111611;color:#c9d2cc;border-radius:10px;padding:9px 13px;cursor:pointer;font:600 11px var(--font-mono)}
#footopRoutineScreenFix .routine-time.active{border-color:#b7ff32;color:#b7ff32;box-shadow:0 0 16px rgba(183,255,50,.12)}
#footopRoutineScreenFix .routine-list{display:grid;gap:9px}
#footopRoutineScreenFix .routine-row{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center;background:#111612;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px}
#footopRoutineScreenFix .routine-min{font:600 12px var(--font-mono);color:#b7ff32}
#footopRoutineScreenFix .routine-row b{display:block;font-size:15px}
#footopRoutineScreenFix .routine-row span{display:block;margin-top:4px;color:#8f9c96;font-size:11px;line-height:1.55}
#footopRoutineScreenFix .routine-start{width:100%;margin-top:16px;border:0;background:#b7ff32;color:#081007;border-radius:14px;padding:14px;font:600 12px var(--font-mono);cursor:pointer}
@media all {#footopRoutineScreenFix{padding:12px}#footopRoutineScreenFix .routine-screen-card{padding:18px;border-radius:18px}#footopRoutineScreenFix h2{font-size:27px}.routine-row{grid-template-columns:62px 1fr!important}}

/* from index.html <style id="footop-training-v32-clean-css"> */
  :root{--ft-lime:#b7ff32;--ft-green:#28d17c;--ft-yellow:#ffd54a;}
  .footop-bottom-btn[data-bottom-panel="training"]{position:relative!important;pointer-events:auto!important;z-index:100001!important}
  .footop-bottom-btn[data-bottom-panel="training"].active{color:#efffd8!important;border-color:rgba(183,255,50,.78)!important;background:linear-gradient(135deg,rgba(183,255,50,.2),rgba(40,209,124,.11))!important;box-shadow:0 0 22px rgba(183,255,50,.18),inset 0 0 0 1px rgba(183,255,50,.08)!important}
  .footop-bottom-btn[data-bottom-panel="training"].active .icon-training{color:#081007!important;background:linear-gradient(145deg,#b7ff32,#28d17c)!important;box-shadow:0 0 20px rgba(183,255,50,.35)!important}
  .footop-bottom-btn[data-bottom-panel="training"].active::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:24px;height:3px;border-radius:99px;background:#b7ff32;box-shadow:0 0 12px #b7ff32}
  #panelTraining.ft-v32-panel{position:relative;z-index:2;min-height:0!important;background:radial-gradient(120% 50% at 88% -8%,rgba(255,213,74,.11),transparent 55%),radial-gradient(120% 50% at -8% 108%,rgba(183,255,50,.13),transparent 55%),linear-gradient(180deg,#09100c,#060a08)}
  .ft32-wrap{max-width:1180px;margin:0 auto;padding:28px 26px 150px;min-height:calc(100vh - 150px);box-sizing:border-box;color:#f2f7f4}
  .ft32-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}
  .ft32-kicker{font:600 11px var(--font-mono);letter-spacing:2px;color:#b7ff32}
  .ft32-title{font:700 54px var(--font-display);line-height:1.25;margin-top:6px;letter-spacing:-0.02em}
  .ft32-sub{color:#8c9992;font-size:12px;line-height:1.7;max-width:720px;margin-top:9px}
  .ft32-view{display:block}
  .ft32-view[hidden]{display:none!important}
  .ft32-card{border:1px solid rgba(183,255,50,.14);background:linear-gradient(145deg,#101810,#0b100d);border-radius:22px;padding:22px;box-shadow:0 18px 55px rgba(0,0,0,.28);margin-top:14px}
  .ft32-label{font:600 11px var(--font-mono);letter-spacing:1.6px;color:#b7ff32}
  .ft32-position-row{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
  .ft32-pos{font:700 64px var(--font-score);letter-spacing:-1px;color:#fff;margin-top:6px}
  .ft32-muted{color:#8b9890;font-size:11px;line-height:1.7}
  .ft32-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .ft32-btn{border:1px solid rgba(183,255,50,.24);background:#111a15;color:#e5f8df;border-radius:12px;padding:11px 13px;font:600 11px var(--font-mono);letter-spacing:.4px;cursor:pointer}
  .ft32-btn.primary{background:linear-gradient(135deg,#b7ff32,#28d17c);color:#07110d;border:0;box-shadow:0 0 24px rgba(183,255,50,.12)}
  .ft32-btn:hover{transform:translateY(-1px);border-color:rgba(183,255,50,.55)}
  .ft32-time{border:1px solid rgba(255,255,255,.08);background:#0c120f;border-radius:18px;padding:16px}
  .ft32-time strong{font:700 30px var(--font-score);display:block;color:#b7ff32}
  .ft32-time small{display:block;color:#738078;font:11px var(--font-mono);margin-top:6px}
  .ft32-section-title{font:700 28px var(--font-display);margin:30px 0 6px;letter-spacing:-0.02em}
  .ft32-players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .ft32-player{border:1px solid rgba(255,255,255,.08);background:#0a100d;color:#fff;border-radius:18px;overflow:hidden;text-align:left;cursor:pointer;padding:0;transition:.18s;min-width:0}
  .ft32-player:hover{transform:translateY(-3px);border-color:rgba(183,255,50,.45)}
  .ft32-player-photo{height:210px;background:linear-gradient(160deg,#1b2b1f,#090e0a);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .ft32-player-photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
  .ft32-initial{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(183,255,50,.5);color:#b7ff32;background:#121a14;font:700 28px var(--font-score)}
  .ft32-player-body{padding:12px}
  .ft32-player-name{font:700 15px var(--font-score);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ft32-player-meta{font:11px var(--font-mono);color:#84918a;margin-top:4px}
  .ft32-match{font:600 11px var(--font-mono);color:#b7ff32;margin-top:8px}
  .ft32-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}.ft32-tag{font:7px var(--font-mono);color:#dbe8d9;background:rgba(183,255,50,.06);border:1px solid rgba(183,255,50,.12);padding:4px 6px;border-radius:99px}
  .ft32-routine-list{display:grid;gap:8px;margin-top:14px}
  .ft32-routine-item{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:start;border:1px solid rgba(255,255,255,.07);background:#0d140f;border-radius:14px;padding:12px}
  .ft32-min{font:600 11px var(--font-mono);color:#b7ff32}.ft32-routine-item b{font-size:13px}.ft32-routine-item span{display:block;color:#8c9992;font-size:11px;line-height:1.65;margin-top:4px}
  .ft32-analyze-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ft32-upload{border:1px dashed rgba(183,255,50,.35);background:rgba(183,255,50,.03);border-radius:16px;padding:22px;text-align:center;cursor:pointer}.ft32-upload input{display:block;width:100%;margin-top:12px}.ft32-preview{width:100%;max-height:380px;margin-top:12px;border-radius:16px;background:#000}.ft32-goal{width:100%;min-height:130px;box-sizing:border-box;margin-top:12px;padding:13px;border-radius:13px;background:#080e0a;color:#fff;border:1px solid rgba(255,255,255,.08);resize:vertical;font:12px var(--font-body)}.ft32-status{font:11px var(--font-mono);color:#8c9992;margin-top:8px}.ft32-result{display:grid;gap:10px;margin-top:12px}.ft32-result-card{border:1px solid rgba(255,255,255,.07);border-left:3px solid #b7ff32;border-radius:13px;background:#0d130f;padding:14px;color:#dde7e0;font-size:12px;line-height:1.75;white-space:pre-wrap}.ft32-result-card b{display:block;color:#b7ff32;font:600 11px var(--font-mono);letter-spacing:.6px;margin-bottom:6px}
  .ft32-modal{position:fixed;inset:0;z-index:200000;background:rgba(0,0,0,.76);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:18px}.ft32-modal.open{display:flex}.ft32-modal-box{width:min(900px,100%);max-height:90vh;overflow:auto;background:#0b110d;border:1px solid rgba(183,255,50,.22);border-radius:24px;padding:20px;box-shadow:0 35px 110px rgba(0,0,0,.55)}.ft32-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ft32-close{border:1px solid rgba(183,255,50,.2);background:#101812;color:#b7ff32;border-radius:10px;width:38px;height:38px;font-size:20px;cursor:pointer}.ft32-q{font:700 28px var(--font-display);margin:16px 0 14px;letter-spacing:-0.02em}.ft32-options{display:grid;gap:8px}.ft32-option{border:1px solid rgba(255,255,255,.08);background:#0e1511;color:#cfe0d7;border-radius:13px;padding:13px;text-align:left;cursor:pointer;font-size:12px}.ft32-option.active{border-color:rgba(183,255,50,.62);background:rgba(183,255,50,.08);color:#fff}.ft32-option small{float:right;color:#718078;font:11px var(--font-mono)}.ft32-progress{height:5px;background:#172019;border-radius:99px;overflow:hidden}.ft32-progress span{display:block;height:100%;background:linear-gradient(90deg,#b7ff32,#28d17c);width:0}.ft32-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}.ft32-pos-btn{border:1px solid rgba(183,255,50,.16);background:#0d140f;color:#dff4dc;border-radius:14px;padding:15px 10px;cursor:pointer;text-align:center}.ft32-pos-btn strong{display:block;font:700 16px var(--font-score);color:#b7ff32}.ft32-pos-btn span{display:block;font-size:11px;color:#77857e;margin-top:4px}
  @media all {.ft32-position-row,.ft32-analyze-grid{grid-template-columns:1fr}.ft32-players{display:flex;overflow-x:auto;padding-bottom:8px}.ft32-player{min-width:190px}.ft32-picker{grid-template-columns:repeat(2,1fr)}.ft32-wrap{padding:22px 14px 135px}.ft32-title{font-size:42px}.ft32-routine-item{grid-template-columns:64px 1fr}.ft32-routine-item .ft32-btn{grid-column:2;justify-self:start}}
  .ft32-ai-routine-card{border-color:rgba(77,225,255,.25);background:linear-gradient(145deg,#0c1a1a,#0b100d)}
  .ft32-ai-form{display:flex;flex-direction:column;gap:12px;margin-top:14px;max-width:420px}
  .ft32-ai-form label{display:flex;flex-direction:column;gap:6px;font:700 11px var(--font-mono)}
  .ft32-ai-input{background:#080e0a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px;font:13px var(--font-body);box-sizing:border-box;resize:vertical}
  .ft32-ai-reasoning{border:1px solid rgba(77,225,255,.3);background:rgba(77,225,255,.06);border-radius:14px;padding:14px;color:#dff4f4;font-size:12px;line-height:1.7}
  .ft32-ai-reasoning b{display:block;color:#4de1ff;font:600 11px var(--font-mono);letter-spacing:.6px;margin-bottom:6px}
  .ft32-ai-modal-box{background:linear-gradient(165deg,#0a1414,#0b110d 55%);border:1px solid rgba(77,225,255,.28);box-shadow:0 35px 110px rgba(0,0,0,.6),0 0 60px rgba(77,225,255,.07)}
  .ft32-ai-brandrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .ft32-ai-brandchip{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--font-mono);letter-spacing:.4px;color:#06201d;background:linear-gradient(120deg,#4de1ff,#b7ff32);padding:4px 10px;border-radius:999px;white-space:nowrap}
  .ft32-ai-sub{font-size:11px;color:#8fb8b8;margin-top:4px;line-height:1.6;max-width:440px}
  .ft32-ai-section{margin-top:16px}
  .ft32-ai-section-label{font:600 11px var(--font-mono);letter-spacing:1px;color:#6fd6e0;margin-bottom:8px}
  .ft32-ai-section-label small{color:#5a6b68;font-weight:600;letter-spacing:0;text-transform:none;margin-left:4px}
  .ft32-chip-row{display:flex;flex-wrap:wrap;gap:8px}
  .ft32-chip{border:1px solid rgba(255,255,255,.1);background:#0d1512;color:#c7d6d0;border-radius:999px;padding:8px 14px;font:700 11px var(--font-body);cursor:pointer;transition:.15s ease;user-select:none}
  .ft32-chip:hover{border-color:rgba(77,225,255,.4)}
  .ft32-chip.active{border-color:rgba(77,225,255,.6);background:rgba(77,225,255,.14);color:#eafcff;box-shadow:0 0 0 1px rgba(77,225,255,.2) inset}
  .ft32-seg-row{display:flex;gap:6px;background:#080e0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px}
  .ft32-seg-btn{flex:1;border:none;background:transparent;color:#8c9992;border-radius:9px;padding:9px 6px;font:600 11px var(--font-mono);cursor:pointer;text-align:center}
  .ft32-seg-btn.active{background:linear-gradient(120deg,#4de1ff,#28d17c);color:#06120f}
  .ft32-ai-timerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .ft32-ai-time-custom{width:76px;background:#080e0a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px;font:12px var(--font-mono);text-align:center}
  .ft32-ai-generate{width:100%;margin-top:20px;padding:15px;border-radius:14px;border:none;background:linear-gradient(115deg,#4de1ff,#28d17c 55%,#b7ff32);color:#06120f;font:600 12px var(--font-mono);letter-spacing:.6px;cursor:pointer;box-shadow:0 12px 30px rgba(77,225,255,.22)}
  .ft32-ai-generate:disabled{opacity:.6;cursor:default}
  .ft32-ai-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 10px;text-align:center}
  .ft32-ai-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(77,225,255,.18);border-top-color:#4de1ff;animation:ft32AiSpin .8s linear infinite}
  @keyframes ft32AiSpin{to{transform:rotate(360deg)}}
  .ft32-ai-loading-text{font:600 11px var(--font-mono);color:#9fe8ec;letter-spacing:.3px;min-height:16px}
  .ft32-ai-loading-sub{font-size:11px;color:#5a6b68}
  .ft32-ai-error{border:1px solid rgba(255,110,110,.3);background:rgba(255,110,110,.08);border-radius:14px;padding:16px;color:#ffd8d8;font-size:12px;line-height:1.7;text-align:center}
  .ft32-ai-retry{margin-top:12px;border:1px solid rgba(255,110,110,.4);background:rgba(255,110,110,.12);color:#ffe2e2;border-radius:10px;padding:9px 16px;font:600 11px var(--font-mono);cursor:pointer}
  @media(prefers-reduced-motion:reduce){.ft32-ai-spinner{animation:none;border-top-color:rgba(77,225,255,.5)}}
  /* "Footop 맞춤 루틴 생성" inline sidebar tab (replaces the deleted Training Challenges tab) reuses
     every .ft32-ai-* component built for the dark AI-routine modal, but rendered directly inside
     #panelTraining's cream "Footop Training Lab" card instead of a body-appended dark popup — so
     these components need their own light retint, scoped to .ft32-ari-card only (same safe-scoping
     pattern as .ft32-modal-light) so the original dark modal is completely unaffected. */
  .ft32-ari-card .ft32-ai-section-label{color:#CCFF00}
  .ft32-ari-card .ft32-ai-section-label small{color:#8C8C8C}
  .ft32-ari-card .ft32-chip{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8}
  .ft32-ari-card .ft32-chip:hover{border-color:#B4E600}
  .ft32-ari-card .ft32-chip.active{border-color:rgba(204,255,0,0.48);background:rgba(204,255,0,0.11);color:#F2F5E8;box-shadow:0 0 0 1px rgba(0,0,0,.3) inset}
  .ft32-ari-card .ft32-seg-row{background:#1C1C1C;border-color:rgba(255,255,255,0.12)}
  .ft32-ari-card .ft32-seg-btn{color:#8C8C8C}
  .ft32-ari-card .ft32-seg-btn.active{background:linear-gradient(120deg,#CCFF00,#B4E600);color:#0a0a0a}
  .ft32-ari-card .ft32-ai-time-custom{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8}
  .ft32-ari-card .ft32-ai-input{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8}
  .ft32-ari-card .ft32-ai-loading-text{color:#CCFF00}
  .ft32-ari-card .ft32-ai-loading-sub{color:#8C8C8C}
  .ft32-ari-card .ft32-ai-spinner{border-color:rgba(204,255,0,0.16);border-top-color:#B4E600}
  .ft32-ari-card .ft32-ai-reasoning{border-color:rgba(204,255,0,0.28);background:#fff4d8;color:#F2F5E8}
  .ft32-ari-card .ft32-ai-reasoning b{color:#CCFF00}
  .ft32-ari-card .ft32-routine-item{background:#1C1C1C;border-color:rgba(255,255,255,0.1)}
  .ft32-ari-card .ft32-routine-item .ft32-min{color:#CCFF00}
  .ft32-ari-card .ft32-routine-item span{color:#6b5a24}
  .ft32-ari-card .ft32-ai-error{border-color:rgba(181,64,31,.3);background:rgba(181,64,31,.08);color:#8a2f16}
  .ft32-ari-card .ft32-ai-retry{border-color:rgba(181,64,31,.4);background:rgba(181,64,31,.12);color:#8a2f16}
  .ft32-ari-card .ft32-btn:not(.primary):not(.big){background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8}
  .ft32-ari-card .ft32-btn:not(.primary):not(.big):hover{border-color:#B4E600}
  .ft32-coach-banner{display:block;width:100%;text-align:left;margin:14px 0 0;padding:16px 18px;border:1px solid rgba(183,255,50,.3);border-radius:16px;background:linear-gradient(120deg,rgba(183,255,50,.1),rgba(77,225,255,.06));color:#eaffd6;font:600 11px var(--font-mono);letter-spacing:.3px;cursor:pointer;transition:.2s ease}
  .ft32-coach-banner:hover{border-color:rgba(183,255,50,.6);transform:translateY(-1px)}
  #panelTraining #ft32Root{display:block;height:calc(100vh - 84px - var(--subnav-h));overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;}
  @media all {#panelTraining #ft32Root{height:calc(100vh - 74px);}}
  .ft32-scroll-progress{position:sticky;top:0;height:3px;width:100%;background:rgba(255,255,255,.05);z-index:50;}
  .ft32-scroll-progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#b7ff32,#4de1ff);transition:width .08s linear;}
  .ft32-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
  .ft32-reveal.ft32-revealed{opacity:1;transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){.ft32-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* from index.html <style id="footop-training-home-v2-css"> */
/* Training Home upgrade — yellow-toned light background + the same "Footop Sports" card
   language used for Tracking (black brand pill, dark warm text, teal-ish accent underline),
   applied to the Training panel and the new hero/progress/recent/more sections specifically.
   Deliberately scoped to #panelTraining and these new classes only — the existing dark
   .ft32-card/.ft32-btn modals (position test, AI routine, routine list, player profile) are
   left as-is for now so this pass doesn't destabilize screens not in today's scope. */
#panelTraining{}
#panelTraining .ft32-wrap{color:#F2F5E8;}
#panelTraining .ft32-kicker{display:inline-flex;align-items:center;gap:6px;background:rgba(204,255,0,.12);color:#CCFF00;font:600 11px var(--font-mono);letter-spacing:1.2px;padding:6px 12px;border-radius:999px;}
#panelTraining .ft32-title{background:linear-gradient(100deg,#CCFF00,#B4E600 55%,#9BCB00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#panelTraining .ft32-sub{color:#B9C2A0;}
#panelTraining .ft32-time{background:#1C1C1C;border:1px solid rgba(255,255,255,0.12);}
#panelTraining .ft32-time strong{color:#CCFF00;}
#panelTraining .ft32-time small{color:#8C8C8C;}
#panelTraining .ft32-coach-banner{background:linear-gradient(120deg,rgba(204,255,0,0.11),rgba(204,255,0,0.07));border:1px solid rgba(255,255,255,0.14);color:#F2F5E8;}
#panelTraining .ft32-coach-banner:hover{border-color:#B4E600;}
#panelTraining .ft32-section-title{color:#F2F5E8;}

.ft32-hero-card{margin-top:16px;border-radius:24px;padding:24px;background:linear-gradient(160deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.12);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.ft32-hero-kicker{display:inline-flex;align-items:center;background:rgba(204,255,0,.12);color:#CCFF00;font:600 11px var(--font-mono);letter-spacing:1.2px;padding:7px 13px;border-radius:999px;}
.ft32-hero-goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ft32-goal-tag{font:600 11px var(--font-body);color:#7a4e0a;background:#fbe8b8;border:1px solid rgba(201,143,28,.35);padding:6px 12px;border-radius:999px;}
.ft32-hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font:700 11px var(--font-mono);color:#B9C2A0;}
.ft32-hero-note{margin-top:10px;font-size:11.5px;color:#6b5a24;line-height:1.6;}
.ft32-btn.big{margin-top:18px;width:100%;padding:16px;font-size:12px;letter-spacing:.8px;border-radius:14px;background:linear-gradient(115deg,#CCFF00,#B4E600 60%,#CCFF00);color:#0a0a0a;box-shadow:0 10px 26px rgba(0,0,0,.3);}
.ft32-btn.big:hover{transform:translateY(-2px);}

.ft32-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.ft32-more-card{display:flex;align-items:center;gap:16px;text-align:left;padding:20px;border-radius:20px;background:linear-gradient(155deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:.25s cubic-bezier(.25,.8,.35,1);box-shadow:0 8px 20px rgba(0,0,0,.35);}
.ft32-more-card:hover{border-color:#B4E600;transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.35);}
.ft32-more-icon{font-size:26px;flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#CCFF00,#B4E600);box-shadow:0 6px 16px rgba(0,0,0,.3);}
.ft32-more-body{flex:1;min-width:0;}
.ft32-more-card b{display:block;font-size:14.5px;color:#F2F5E8;}
.ft32-more-card small{display:block;margin-top:4px;font-size:11px;color:#8C8C8C;line-height:1.5;}
.ft32-more-arrow{font-size:16px;color:#B4E600;flex:0 0 auto;transition:transform .25s ease;}
.ft32-more-card:hover .ft32-more-arrow{transform:translateX(4px);}
@media all {.ft32-more-grid{grid-template-columns:1fr;}}

/* PLAYSTYLE MATCH section — same yellow "Footop Performance Lab" language as the rest of
   Training Home. #panelTraining scoping is safe here since .ft32-card's only other definition
   site (renderAnalyze) is confirmed dead/unreachable code, and .ft32-player* only ever renders
   inside Training Home. */
#panelTraining .ft32-card{background:linear-gradient(155deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.12);box-shadow:0 16px 40px rgba(0,0,0,.35);}
#panelTraining .ft32-card .ft32-muted{color:#6b5a24;}
#panelTraining .ft32-player{background:linear-gradient(160deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.12);color:#F2F5E8;}
#panelTraining .ft32-player:hover{border-color:#B4E600;}
#panelTraining .ft32-player-photo{background:linear-gradient(160deg,#f3e2b0,#e7cf8e);}
#panelTraining .ft32-initial{border-color:rgba(204,255,0,0.40);color:#CCFF00;background:#1C1C1C;}
#panelTraining .ft32-player-name{color:#F2F5E8;}
#panelTraining .ft32-player-meta{color:#8C8C8C;}
#panelTraining .ft32-match{color:#CCFF00;}
#panelTraining .ft32-tag{color:#7a4e0a;background:#fbe8b8;border:1px solid rgba(201,143,28,.3);}

/* Player-profile detail modal — scoped to .ft32-modal-light only (set on this one modal's root
   in openPlayer()), so the shared .ft32-modal-box/.ft32-label/.ft32-close classes stay dark for
   every other Training modal (position test/picker/routine/AI routine) and for the separate DNA
   assessment modal, both of which live outside #panelTraining in the DOM (appended to <body>)
   and so can't be reached by a #panelTraining-scoped selector anyway. */
.ft32-modal-light .ft32-modal-box{background:linear-gradient(165deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.14);color:#F2F5E8;}
.ft32-modal-light .ft32-modal-box h2{color:#F2F5E8;}
.ft32-modal-light .ft32-label{color:#CCFF00;}
.ft32-modal-light .ft32-close{border-color:rgba(255,255,255,0.14);background:#1C1C1C;color:#CCFF00;}
.ft32-modal-light .ft32-muted{color:#6b5a24;}
.ft32-player-detail-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.ft32-player-detail-photo{width:120px;height:120px;border-radius:20px;flex-shrink:0;background:linear-gradient(160deg,#1C1C1C,#1C1C1C);display:flex;align-items:center;justify-content:center;font:700 34px var(--font-score);color:#CCFF00;overflow:hidden;}
.ft32-player-detail-photo.has-img{background:none;}
.ft32-player-detail-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ft32-player-detail-meta{flex:1;min-width:200px;}
.ft32-match-big{font:700 22px var(--font-display);color:#CCFF00;margin-bottom:6px;letter-spacing:-0.02em}
.ft32-style-list{display:grid;gap:10px;margin-top:12px;}
.ft32-style-row{border:1px solid rgba(255,255,255,0.1);background:linear-gradient(155deg,#1C1C1C,#1C1C1C);border-radius:14px;padding:14px;}
.ft32-style-tag{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.6px;color:#7a4e0a;background:#fbe8b8;border:1px solid rgba(201,143,28,.35);padding:5px 10px;border-radius:999px;margin-bottom:8px;}
.ft32-style-desc{font-size:12.5px;color:#F2F5E8;line-height:1.6;}
.ft32-style-drill{font-size:11px;color:#8C8C8C;margin-top:6px;line-height:1.6;}

/* from index.html <style id="footop-moment-share-v1-css"> */
.footop-moment-offer{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));background:#151515;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;z-index:200100;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:footopMomentOfferIn .3s cubic-bezier(.22,1,.36,1);}
@media(prefers-reduced-motion:reduce){.footop-moment-offer{animation:none;}}
@keyframes footopMomentOfferIn{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.footop-moment-offer-text{flex:1;color:var(--ink,#F4F4F2);font:700 14px var(--font-body,sans-serif);}
.footop-moment-offer-sub{color:var(--ink-dim,#9A9A94);font-size:12px;margin-top:2px;}
.footop-moment-offer-actions{display:flex;gap:8px;flex-shrink:0;}
.footop-moment-offer-btn{border:none;border-radius:10px;padding:9px 14px;font:600 13px var(--font-body,sans-serif);cursor:pointer;}
.footop-moment-offer-btn.primary{background:var(--accent,#C8FF00);color:#0A0A0A;}
.footop-moment-offer-btn.ghost{background:transparent;color:var(--ink-dim,#9A9A94);}
.footop-moment-compose-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200200;display:flex;align-items:flex-end;justify-content:center;}
.footop-moment-compose-box{width:100%;max-width:480px;background:#151515;border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));}
.footop-moment-compose-box textarea{width:100%;min-height:90px;background:#0A0A0A;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#F4F4F2;padding:10px;font:600 14px var(--font-body,sans-serif);resize:vertical;box-sizing:border-box;}
.footop-moment-compose-actions{display:flex;gap:8px;margin-top:12px;}
@media all {.footop-moment-offer{bottom:calc(70px + env(safe-area-inset-bottom));}}

/* from index.html <style id="footop-tab-levels-v1-css"> */
/* Two clearly different tab levels, both with >=44px touch targets:
   MAIN tabs (bottom bar)   = big icon tiles, active tile lit lime with a top indicator bar.
   DETAIL tabs (top strip + in-page tab bars) = filled chips/segments, active chip filled solid.
   All !important because earlier nav blocks in this file already fight over these selectors. */
:root{--subnav-h:70px}
@media not all {:root{--subnav-h:66px}}

/* ---- MAIN tabs (bottom nav) ---- */
.footop-bottom-btn{min-height:62px!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.footop-bottom-btn:not(.active){opacity:.72}
.footop-bottom-btn:not(.active) .footop-bottom-icon{filter:saturate(.35) brightness(.85)}
.footop-bottom-btn.active{opacity:1;background:rgba(204,255,0,.16)!important;border-color:#CCFF00!important}
.footop-bottom-btn.active::before{content:"";position:absolute;left:22%;right:22%;top:0;height:3px;border-radius:0 0 4px 4px;background:#CCFF00;box-shadow:0 0 10px rgba(204,255,0,.6)}
.footop-bottom-btn:active{transform:scale(.96)}
.footop-bottom-title{font-size:11.5px!important;font-weight:700;letter-spacing:0!important}
@media all {.footop-bottom-title{font-size:11px!important}}
.footop-bottom-btn.active .footop-bottom-title{color:#CCFF00!important}

/* ---- DETAIL tabs: top contextual strip ---- */
#dynamicSidebarNav.nav-tabs{gap:10px!important;padding:9px 14px!important;align-items:center!important;background:#0e120f!important;border-bottom:1px solid rgba(255,255,255,.09)!important;scroll-snap-type:x proximity;scroll-padding-left:12px;min-height:var(--subnav-h)!important}
#dynamicSidebarNav .nav-tab{height:52px!important;min-height:52px!important;padding:0 20px 0 10px!important;gap:10px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;color:#d5ddd8!important;font:700 15px var(--font-body,sans-serif)!important;letter-spacing:0!important;scroll-snap-align:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,transform .1s}
#dynamicSidebarNav .nav-tab:active{transform:scale(.96)}
#dynamicSidebarNav .nav-tab.active{background:#CCFF00!important;border-color:#CCFF00!important;color:#0a0a0a!important;box-shadow:none!important}
#dynamicSidebarNav .nav-tab.active::before{display:none!important}
#dynamicSidebarNav .nav-tab.active *{color:#0a0a0a!important}
#dynamicSidebarNav .nav-tab .nav-tab-icon{width:auto!important;height:auto!important;background:transparent!important;box-shadow:none!important;font-size:15px!important;filter:none!important;opacity:1!important;display:inline-flex!important}
#dynamicSidebarNav .nav-tab .tic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);flex:0 0 auto;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
#dynamicSidebarNav .nav-tab .tic svg{width:21px;height:21px}
#dynamicSidebarNav .nav-tab.active .tic{background:rgba(0,0,0,.14)!important;color:#0a0a0a!important;box-shadow:none!important}
#dynamicSidebarNav .nav-tab.active .tic svg{stroke:#0a0a0a!important}
@media not all {
  #dynamicSidebarNav .nav-tab{height:48px!important;min-height:48px!important;font-size:14.5px!important}
  #dynamicSidebarNav .nav-tab .tic{width:32px;height:32px}
}

/* ---- DETAIL tabs: in-page tab bars (My Player, Team Detail, Teams list, News period, Learn, Social) ---- */
.footop-team-tabbar{gap:4px!important;padding:4px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:rgba(255,255,255,.04)!important;margin-bottom:14px}
.footop-team-tabbar{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.footop-team-tabbar::-webkit-scrollbar{display:none}
.footop-team-tab-btn{flex:1 0 auto!important;min-width:54px;scroll-snap-align:center}
.footop-team-tab-btn{min-height:52px!important;justify-content:center;padding:6px 2px!important;margin:0!important;border:0!important;border-radius:12px!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:11px!important}
.footop-team-tab-btn .icon{font-size:18px!important}
.footop-team-tab-btn.active{background:color-mix(in srgb,var(--accent) 24%,transparent)!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1.5px var(--accent)!important}
.footop-team-tab-btn:active{transform:scale(.95)}
.footop-teams-tabs{gap:6px!important;padding:4px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)}
.footop-teams-tab{min-height:46px!important;border:0!important;border-radius:12px!important;font-size:12px!important;touch-action:manipulation}
.footop-teams-tab.active{background:color-mix(in srgb,var(--accent) 24%,transparent)!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1.5px var(--accent)!important}
.mn-period-tabs{gap:4px!important;padding:4px!important;border:1px solid rgba(255,255,255,0.14)!important;border-radius:16px!important;background:rgba(255,255,255,0.08)!important}
.mn-period-tab{min-height:46px!important;padding:0!important;margin:0!important;border:0!important;border-radius:12px!important;font-size:13px!important;touch-action:manipulation}
.mn-period-tab.active{background:#CCFF00!important;color:#0a0a0a!important}
.footop-learn-tabs{gap:6px!important}
.footop-learn-tab{min-height:46px!important;border-radius:12px!important;font-size:14px!important;touch-action:manipulation}
.footop-social-toptabs{max-width:320px!important}
.footop-social-toptab{min-height:44px!important;font-size:13px!important;touch-action:manipulation}

/* from index.html <style id="footop-tab-intro-v1-css"> */
.fti{position:relative;margin:12px 0 16px;padding:0;border-radius:24px;overflow:hidden;color:#fff;text-align:left;background:linear-gradient(175deg,#1c1f14 0%,#101208 45%,#050502 100%);border:1px solid rgba(255,255,255,.08);font-family:var(--font-body,sans-serif)}
.fti::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 15% 0%,rgba(183,255,50,.16),transparent 55%),radial-gradient(120% 60% at 100% 100%,rgba(255,213,74,.12),transparent 55%);pointer-events:none}
.fti>*{position:relative}
.fti-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;background:transparent;border:0;color:#fff;text-align:left;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.fti-tg-ic{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:linear-gradient(145deg,#b7ff32,#ffd54a)}
.fti-tg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fti-tg-txt b{font:600 14px var(--font-body,sans-serif);color:#fff}
.fti-tg-txt small{font:600 11px var(--font-mono,monospace);letter-spacing:1.3px;color:#b7ff32}
.fti-tg-act{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;background:rgba(183,255,50,.14);border:1px solid rgba(183,255,50,.4);color:#d8ff7a;font:600 12.5px var(--font-body,sans-serif)}
.fti-tg-act i{font-style:normal;display:inline-block;transition:transform .3s ease}
.fti.is-collapsed .fti-tg-act i{transform:rotate(180deg)}
.fti-toggle:focus-visible{outline:2px solid #b7ff32;outline-offset:-3px;border-radius:24px}
.fti-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .38s cubic-bezier(.3,.8,.3,1)}
.fti.is-collapsed .fti-collapse{grid-template-rows:0fr}
.fti-collapse>.fti-body{overflow:hidden;min-height:0;padding:6px 18px 22px}
.fti.is-collapsed .fti-collapse>.fti-body{padding-top:0;padding-bottom:0}
.fti-head{text-align:center;max-width:340px;margin:0 auto}
.fti-kicker{font:600 11px var(--font-mono,monospace);letter-spacing:1.6px;color:#b7ff32;margin-bottom:8px}
.fti-title{font:700 24px/1.2 var(--font-display,sans-serif);margin:0;color:#fff}
.fti-sub{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.7);word-break:keep-all}
.fti-phone{width:min(232px,74%);margin:26px auto 0;border-radius:28px;background:#0a0c08;border:3px solid #23281a;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(183,255,50,.06) inset;overflow:hidden;opacity:0;transform:translateY(60px) scale(.94);transition:opacity .9s cubic-bezier(.16,.9,.24,1),transform .9s cubic-bezier(.16,.9,.24,1)}
.fti.in-view .fti-phone{opacity:1;transform:none}
.fti-notch{width:60px;height:16px;background:#0a0c08;border-radius:0 0 12px 12px;margin:0 auto;position:relative;z-index:2}
.fti-screen{margin-top:-16px;height:262px;overflow:hidden;background:linear-gradient(165deg,#101a10,#0a0f08 65%,#050603)}
.fti-scr-in{padding:22px 12px 18px}
.fti.in-view .fti-scr-in{animation:ftiScroll 3.2s cubic-bezier(.45,.05,.3,1) 1.8s forwards}
@keyframes ftiScroll{to{transform:translateY(var(--shift,-60px))}}
.fti-anim{opacity:0;transform:translateY(12px)}
.fti.in-view .fti-anim{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--i,0)*.13s + .55s)}
.fti-hero{border-radius:14px;padding:12px;background:linear-gradient(150deg,#161c0f,#0c0f08);border:1px solid rgba(183,255,50,.18);margin-bottom:8px}
.fti-hero b{display:block;font:600 11px var(--font-mono,monospace);color:#fff;letter-spacing:.4px}
.fti-hero span{display:block;font:700 11px var(--font-mono,monospace);color:rgba(255,255,255,.55);margin-top:3px}
.fti-row{margin-top:8px;border-radius:12px;padding:10px 11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font:600 11px var(--font-mono,monospace);color:rgba(255,255,255,.85)}
.fti-btn{margin-top:8px;border-radius:12px;padding:10px;text-align:center;background:#CCFF00;color:#0a0a0a;font:600 11px var(--font-mono,monospace)}
.fti-bar{margin-top:9px;font:700 11px var(--font-mono,monospace);color:rgba(255,255,255,.7)}
.fti-bar i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:4px;overflow:hidden}
.fti-bar i em{display:block;height:100%;width:0;background:linear-gradient(90deg,#b7ff32,#28d17c);transition:width 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*.13s + .9s)}
.fti.in-view .fti-bar i em{width:var(--w)}
.fti-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-bottom:2px;text-align:center}
.fti-stats b{display:block;font:600 11px var(--font-mono,monospace);color:#fff}
.fti-stats span{font:700 6px var(--font-mono,monospace);color:rgba(255,255,255,.55)}
.fti-chips{display:flex;gap:6px;margin-bottom:8px}
.fti-chips span{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid #b7ff32;display:grid;place-items:center;font-size:7px;color:#fff;text-align:center;line-height:1.1}
.fti-steps{margin-top:26px}
.fti-steps-title{font:600 14px var(--font-display,sans-serif);text-align:center;margin:0 0 10px;color:#fff}
.fti-step{display:flex;gap:13px;align-items:flex-start;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.fti-step:last-child{border-bottom:0}
.fti-num{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:600 12px var(--font-mono,monospace);background:linear-gradient(145deg,#b7ff32,#ffd54a);color:#0a0d0a}
.fti-st{font:600 13.5px var(--font-body,sans-serif);color:#fff}
.fti-sd{margin-top:3px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.66);word-break:keep-all}
.fti-static *{transition:none!important;animation:none!important}
.fti-static .fti-scr-in{transform:translateY(var(--shift,-60px))}
@media(prefers-reduced-motion:reduce){.fti-collapse{transition:none}.fti-phone,.fti-anim{opacity:1;transform:none;transition:none}.fti-bar i em{width:var(--w);transition:none}.fti.in-view .fti-scr-in{animation:none}}

/* from index.html <style id="footop-onboarding-v1-css"> */
.fonb{position:fixed;inset:0;z-index:1000001;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,6,4,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0;font-family:var(--font-body,sans-serif);color:#fff}
.fonb-box{width:min(520px,100%);max-height:94vh;overflow-y:auto;border-radius:26px 26px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px));background:radial-gradient(120% 50% at 90% -10%,rgba(204,255,0,.14),transparent 55%),#111;border:1px solid rgba(255,255,255,.1);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
@media not all {.fonb{align-items:center}.fonb-box{border-radius:26px;border-bottom:1px solid rgba(255,255,255,.1)}}
.fonb-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.fonb-chip{font:600 11px var(--font-mono,monospace);letter-spacing:1.4px;color:#0a0a0a;background:var(--lime,#CCFF00);padding:6px 11px;border-radius:99px}
.fonb-dots{display:flex;gap:6px;flex:1}
.fonb-dots i{flex:1;max-width:34px;height:4px;border-radius:99px;background:rgba(255,255,255,.14)}
.fonb-dots i.on{background:var(--lime,#CCFF00)}
.fonb-skip{background:transparent;border:0;color:#8A8A85;font:700 13px var(--font-body,sans-serif);min-height:44px;padding:0 6px;cursor:pointer}
.fonb-h{font:700 24px/1.25 var(--font-display,sans-serif);margin:0 0 6px}
.fonb-p{font-size:13px;line-height:1.6;color:#B9C2A0;margin:0 0 16px;word-break:keep-all}
.fonb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.fonb-opt{min-height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#1C1C1C;color:#F2F5E8;font:600 14px var(--font-body,sans-serif);text-align:left;padding:8px 14px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:1px;touch-action:manipulation}
.fonb-opt small{font:700 11px var(--font-body,sans-serif);color:#8A8A85}
.fonb-opt.on{border-color:var(--lime,#CCFF00);background:rgba(204,255,0,.12);box-shadow:inset 0 0 0 1px var(--lime,#CCFF00)}
.fonb-opt.on small{color:#D6F26B}
.fonb-actions{display:flex;gap:10px;margin-top:18px}
.fonb-btn{flex:1;min-height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#1C1C1C;color:#fff;font:600 14px var(--font-body,sans-serif);cursor:pointer;touch-action:manipulation}
.fonb-btn.primary{background:var(--lime,#CCFF00);color:#0a0a0a;border-color:transparent}
.fonb-btn:disabled{opacity:.4;cursor:default}
.fonb-sum{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.fonb-sum span{border-radius:99px;padding:6px 12px;background:rgba(204,255,0,.12);border:1px solid rgba(204,255,0,.35);color:#D6F26B;font:600 12px var(--font-body,sans-serif)}
.fonb-alt{display:block;width:100%;margin-top:10px;background:transparent;border:0;color:#B9C2A0;font:700 13px var(--font-body,sans-serif);min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* from index.html <style id="footop-team-polls-css"> */
.footop-poll{background:var(--bg-raised,#161616);border:1px solid var(--line,#292929);border-radius:16px;padding:14px;margin-top:12px}
.footop-poll-q{font:700 16px var(--font-body,sans-serif);color:var(--ink,#fff);line-height:1.35}
.footop-poll-meta{font-size:12px;color:var(--ink-dim,#8C8C8C);margin:4px 0 10px}
.footop-poll-opt{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;overflow:hidden;background:transparent;border:1px solid var(--line,#292929);border-radius:12px;padding:11px 12px;margin-top:8px;color:var(--ink,#fff);font:700 14px var(--font-body,sans-serif);cursor:pointer;text-align:left}
.footop-poll-opt:disabled{cursor:default;opacity:.85}
.footop-poll-opt.mine{border-color:var(--accent,#CCFF00)}
.footop-poll-fill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent,#CCFF00) 22%,transparent);transition:width .5s ease;pointer-events:none}
.footop-poll-label,.footop-poll-count{position:relative}
.footop-poll-count{font-size:12px;color:var(--ink-dim,#8C8C8C);white-space:nowrap}
.footop-important-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim,#9A9A94)}
.footop-announcement-row.important{border-left:3px solid var(--accent,#CCFF00);padding-left:10px}
.footop-pinned-ann{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:color-mix(in srgb,var(--accent,#CCFF00) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent,#CCFF00) 45%,transparent);border-radius:12px;padding:9px 12px;margin-bottom:10px;cursor:pointer;color:var(--ink,#fff)}
.footop-pinned-ann .t{display:flex;flex-direction:column;min-width:0}
.footop-pinned-ann b{font:600 13px var(--font-body,sans-serif)}
.footop-pinned-ann em{font-style:normal;font-size:12px;color:var(--ink-dim,#9A9A94);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* from index.html <style id="footop-training-session-v1-css"> */
.fts-ov{position:fixed;inset:0;z-index:200050;background:#0D0D0D;display:flex;flex-direction:column;color:#F4F4F2;font-family:var(--font-body,sans-serif);animation:ftsIn .25s ease}
@keyframes ftsIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.fts-ov{animation:none}}
body.fts-open #footopBottomNav{display:none!important}
.fts-box{width:100%;max-width:520px;margin:0 auto;flex:1;display:flex;flex-direction:column;min-height:0}
.fts-top{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.fts-step{font:600 14px var(--font-display,sans-serif);color:#CCFF00;letter-spacing:.06em;white-space:nowrap}
.fts-bars{flex:1;display:flex;gap:4px}
.fts-bars i{flex:1;height:4px;border-radius:99px;background:#292929}
.fts-bars i.done{background:#CCFF00}.fts-bars i.skip{background:#5a5a54}.fts-bars i.cur{background:#8C8C8C}
.fts-x{background:none;border:0;color:#8C8C8C;font-size:24px;line-height:1;cursor:pointer;padding:2px 6px}
.fts-scroll{flex:1;overflow-y:auto;padding:8px 18px 16px;min-height:0}
.fts-label{font:600 11px var(--font-body,sans-serif);letter-spacing:.12em;color:#8C8C8C;text-transform:uppercase;margin-top:6px}
.fts-name{font:700 28px/1.15 var(--font-display,sans-serif);margin:6px 0 4px}
.fts-purpose{color:#B9B9B2;font-size:14px;margin:0 0 6px;line-height:1.5}
.fts-timer{font:700 68px/1 var(--font-display,sans-serif);text-align:center;margin:18px 0 10px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fts-timer.run{color:#CCFF00}.fts-timer.over{color:#ff8a5a}
.fts-tbtns{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.fts-tbtn{background:#1C1C1C;border:1px solid #292929;color:#F4F4F2;border-radius:99px;padding:10px 22px;font:600 14px var(--font-body,sans-serif);cursor:pointer}
.fts-tbtn.prim{background:#CCFF00;color:#0A0A0A;border-color:#CCFF00;min-width:110px}
.fts-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fts-chip{background:#1C1C1C;border:1px solid #292929;border-radius:99px;padding:6px 12px;font:700 13px var(--font-body,sans-serif);color:#F4F4F2}
.fts-desc{color:#D8D8D2;font-size:15px;line-height:1.55;margin:0 0 12px}
.fts-info{background:#161616;border:1px solid #292929;border-radius:16px;padding:12px 14px;margin-bottom:10px;font-size:14px;line-height:1.5;color:#D8D8D2}
.fts-info b{display:block;font:600 11px var(--font-body,sans-serif);letter-spacing:.1em;color:#8C8C8C;margin-bottom:3px}
.fts-info.ok b{color:#CCFF00}.fts-info.warn b{color:#ffb35a}
.fts-next{color:#8C8C8C;font-size:13px;margin-top:6px}
.fts-actions{display:flex;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #292929;background:#0D0D0D}
.fts-btn{border:1px solid #292929;background:#1C1C1C;color:#F4F4F2;border-radius:14px;padding:14px 16px;font:700 15px var(--font-body,sans-serif);cursor:pointer}
.fts-btn.primary{flex:1;background:#CCFF00;color:#0A0A0A;border-color:#CCFF00}
.fts-btn:disabled{opacity:.45;cursor:not-allowed}
.fts-done-hero{text-align:center;padding:18px 0 6px}
.fts-done-hero .big{font:700 34px var(--font-display,sans-serif);color:#CCFF00}
.fts-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.fts-stat{background:#161616;border:1px solid #292929;border-radius:16px;padding:12px 8px;text-align:center}
.fts-stat b{display:block;font:700 22px var(--font-display,sans-serif)}
.fts-stat span{font-size:11px;color:#8C8C8C}
.fts-sec{background:#161616;border:1px solid #292929;border-radius:16px;padding:14px;margin-bottom:10px}
.fts-sec h4{margin:0 0 8px;font:600 11px var(--font-body,sans-serif);letter-spacing:.1em;color:#8C8C8C}
.fts-dna-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:15px}
.fts-dna-row em{font-style:normal;font:700 15px var(--font-display,sans-serif);color:#CCFF00}
.fts-dna-row em.neg{color:#8C8C8C}
.fts-fb{font-size:15px;line-height:1.55;color:#EDEDE8}
.fts-skel{height:14px;border-radius:6px;background:linear-gradient(90deg,#1C1C1C,#2a2a2a,#1C1C1C);background-size:200% 100%;animation:ftsSk 1.2s linear infinite;margin:6px 0}
@keyframes ftsSk{to{background-position:-200% 0}}
.fts-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fts-grid2 .fts-btn{padding:12px 8px;font-size:14px}
.fts-muted{color:#8C8C8C;font-size:13px}

/* from index.html <style id="footop-dna-css-v1"> */
.dna-wrap{max-width:900px;margin:0 auto;padding:0 4px 40px;color:#F2F5E8}
.dna-intro-card{margin-top:20px;border-radius:26px;padding:36px 26px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(150deg,#141a10,#0a0f0c);border:1px solid rgba(183,255,50,.22);}
.dna-intro-card::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;background:linear-gradient(120deg,#ffd54a,#b7ff32 45%,#28d17c 80%,#07110d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}
.dna-intro-kicker{font:600 11px var(--font-mono);letter-spacing:2px;color:#b7ff32}
.dna-intro-title{font:700 30px var(--font-display);margin:12px 0 10px;background:linear-gradient(100deg,#ffd54a,#b7ff32 60%,#28d17c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.02em}
.dna-intro-copy{color:#a9b8b0;font-size:13px;line-height:1.8;max-width:520px;margin:0 auto 20px}
.dna-btn{border:1px solid rgba(183,255,50,.28);background:#111a15;color:#e5f8df;border-radius:12px;padding:11px 16px;font:600 11px var(--font-mono);letter-spacing:.4px;cursor:pointer;transition:.3s cubic-bezier(.25,.8,.35,1)}
.dna-btn:hover{border-color:rgba(183,255,50,.6);transform:translateY(-2px);box-shadow:0 8px 20px rgba(183,255,50,.1)}
.dna-btn:active{transform:translateY(0);transition-duration:.1s}
.dna-btn.primary{background:linear-gradient(115deg,#ffd54a,#b7ff32 55%,#28d17c);color:#07110d;border:0;box-shadow:0 0 26px rgba(183,255,50,.16)}
.dna-btn:disabled{opacity:.6;cursor:default;transform:none!important}
.dna-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:20px;flex-wrap:wrap}
.dna-kicker{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--font-mono);letter-spacing:1.4px;background:rgba(204,255,0,.12);color:#CCFF00;padding:6px 12px;border-radius:999px}
.dna-title{font:700 42px var(--font-display);letter-spacing:-0.02em;margin-top:4px;background:linear-gradient(100deg,#CCFF00,#B4E600 55%,#9BCB00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dna-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.dna-hero-card{position:relative;margin-top:18px;border-radius:28px;padding:36px 24px 32px;text-align:center;overflow:hidden;background:radial-gradient(circle at 20% 0%,rgba(255,213,74,.16),transparent 45%),radial-gradient(circle at 85% 100%,rgba(40,209,124,.18),transparent 45%),linear-gradient(165deg,#121810,#080b09);border:1px solid rgba(183,255,50,.24);box-shadow:0 24px 60px rgba(0,0,0,.35);transition:box-shadow .4s ease}
.dna-hero-rank{display:inline-flex;align-items:center;gap:6px;margin:0 auto 16px;padding:6px 16px;border-radius:999px;background:linear-gradient(115deg,#ffd54a,#b7ff32 55%,#28d17c);color:#07110d;font:600 11px var(--font-mono);letter-spacing:1.6px;box-shadow:0 0 22px rgba(183,255,50,.3)}
.dna-hero-icon{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:44px;background:conic-gradient(from 180deg,#ffd54a,#b7ff32,#28d17c,#ffd54a);padding:5px;box-shadow:0 0 46px rgba(183,255,50,.35),0 0 0 6px rgba(183,255,50,.08);animation:dnaIconGlow 3.4s ease-in-out infinite}
.dna-hero-icon::after{content:"";display:none}
.dna-hero-name{font:600 13px var(--font-mono);letter-spacing:2px;color:#dfffb1}
.dna-hero-title{margin-top:5px;font:600 13.5px var(--font-body);font-style:italic;color:#ffd54a;letter-spacing:.2px}
.dna-hero-score{font:700 68px var(--font-score);line-height:1;margin-top:6px;background:linear-gradient(100deg,#ffd54a,#b7ff32 55%,#28d17c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dna-hero-tier{font:600 11px var(--font-mono);letter-spacing:1px;color:#8fa89a;margin-top:4px}
.dna-hero-playstyle{font:700 22px var(--font-display);margin-top:14px;color:#fff;letter-spacing:-0.02em}
.dna-hero-quote{margin-top:8px;color:#a9b8b0;font-size:12.5px;font-style:italic;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.7}
.dna-section-title{font:600 12px var(--font-mono);letter-spacing:1.6px;color:#B9C2A0;margin:28px 0 10px}
.dna-top-list{display:flex;flex-direction:column;gap:8px}
.dna-top-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(155deg,#1C1C1C,#1C1C1C);border-radius:14px;padding:12px 14px;cursor:pointer;transition:.3s cubic-bezier(.25,.8,.35,1);color:#F2F5E8;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.dna-top-row:hover{border-color:#B4E600;transform:translateX(4px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.dna-top-icon{font-size:19px}
.dna-top-label{flex:1;font:600 13px var(--font-body);color:#F2F5E8}
.dna-top-score{font:700 20px var(--font-score);color:#CCFF00}
.dna-cat-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;background:linear-gradient(150deg,#121810,#080b09);border:1px solid rgba(183,255,50,.2);border-radius:20px;padding:20px;}
.dna-cat-bars{display:flex;flex-direction:column;gap:11px}
.dna-cat-row{display:grid;grid-template-columns:120px 1fr 30px;align-items:center;gap:10px}
.dna-cat-label{display:flex;align-items:center;gap:6px;font:600 11px var(--font-mono);letter-spacing:.6px;color:#c3d1ca}
.dna-cat-track{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.dna-cat-fill{height:100%;border-radius:99px;transition:width .9s cubic-bezier(.16,1,.3,1)}
.dna-cat-val{font:600 12px var(--font-score);text-align:right;color:#fff;transition:color .3s ease}
.dna-position-card{border-radius:20px;padding:20px;background:linear-gradient(150deg,#121810,#080b09);border:1px solid rgba(183,255,50,.2);transition:border-color .3s ease}
.dna-position-card:hover{border-color:rgba(183,255,50,.4)}
.dna-position-name{font:700 26px var(--font-display);background:linear-gradient(100deg,#ffd54a,#b7ff32 55%,#28d17c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.02em}
.dna-position-why{margin-top:10px;color:#c3d1ca;font-size:12px}
.dna-position-why ul{margin:6px 0 0;padding-left:18px;line-height:1.8}
.dna-position-note{margin-top:10px;font:600 11px var(--font-mono);color:#71807a}
.dna-position-applied{color:#b7ff32;font:600 11px var(--font-body);padding:10px 0}
.dna-dev-card{border-radius:20px;padding:20px;background:linear-gradient(150deg,rgba(255,213,74,.08),rgba(40,209,124,.06));border:1px solid rgba(255,213,74,.25)}
.dna-dev-focus{font:700 18px var(--font-display);color:#ffd54a;letter-spacing:-0.02em}
.dna-dev-copy{margin-top:6px;color:#c3d1ca;font-size:12px;line-height:1.7}
.dna-dev-card .dna-btn{margin-top:12px}
.dna-hidden-note{margin-top:18px;font-size:11px;color:#6b5a24;line-height:1.7}
.dna-hidden-note b{color:#7a4ea8}
.dna-detail-card{margin-top:16px;border-radius:24px;padding:26px 22px;background:linear-gradient(160deg,#121810,#080b09);border:1px solid rgba(183,255,50,.22);text-align:center}
.dna-detail-icon{font-size:44px}
.dna-detail-name{font:600 14px var(--font-mono);letter-spacing:2px;color:#dfffb1;margin-top:6px}
.dna-detail-title{margin-top:4px;font:600 12.5px var(--font-body);font-style:italic;color:#ffd54a}
.dna-detail-score{font:700 56px var(--font-score);margin-top:4px}
.dna-detail-score small{font-size:20px;color:#71807a}
.dna-detail-tier{display:inline-block;margin-top:6px;padding:5px 12px;border-radius:999px;font:600 11px var(--font-mono);letter-spacing:1px;background:linear-gradient(115deg,#ffd54a,#b7ff32);color:#07110d}
.dna-detail-section{text-align:left;margin-top:20px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.dna-detail-section b{font:600 11px var(--font-mono);letter-spacing:1px;color:#b7ff32}
.dna-detail-section p{margin:8px 0 0;color:#dbe7df;font-size:13px;line-height:1.7}
.dna-detail-section ul{margin:8px 0 0;padding-left:18px;color:#c3d1ca;font-size:12.5px;line-height:1.85}
.dna-detail-why{text-align:left;margin-top:20px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.dna-detail-why b{font:600 11px var(--font-mono);letter-spacing:.6px;color:#ffd54a}
.dna-evidence-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;color:#c3d1ca;font-size:12px}
.dna-confidence-copy{margin-top:12px;color:#8fa89a;font-size:11px;line-height:1.7}
.dna-biggest-growth{text-align:center;border-radius:22px;padding:26px;margin-top:12px;background:linear-gradient(150deg,#121810,#080b09);border:1px solid rgba(183,255,50,.28)}
.dna-growth-num{font:700 44px var(--font-score);margin-top:6px;color:#b7ff32}
.dna-evolution-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.dna-evo-row{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;background:#121810}
.dna-evo-label{font:600 12px var(--font-body);color:#fff}
.dna-evo-track{font:600 11px var(--font-mono);color:#8fa89a}
.dna-evo-delta{font:600 11px var(--font-mono)}
.dna-evo-delta.up{color:#b7ff32}
.dna-evo-delta.down{color:#ff7a5a}
.dna-empty{text-align:center;color:#6b5a24;font-size:12px;padding:30px 10px;line-height:1.7}
.dna-wrap>.ft32-muted{color:#6b5a24}
.ft32-dna-entry-card{background:linear-gradient(135deg,rgba(255,213,74,.10),rgba(183,255,50,.08) 55%,rgba(40,209,124,.10))!important;border-color:rgba(255,213,74,.3)!important}
.dna-hero-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 11px;border-radius:999px;border:1px solid rgba(183,255,50,.32);background:linear-gradient(100deg,rgba(255,213,74,.14),rgba(183,255,50,.16) 60%,rgba(40,209,124,.14));color:#fff;font:600 11px var(--font-body);cursor:pointer;transition:.15s ease}
.dna-hero-badge:hover{border-color:rgba(183,255,50,.6);transform:translateY(-1px)}
.dna-hero-badge b{font-weight:700}
@media all {.dna-cat-grid{grid-template-columns:1fr}.dna-hero-score{font-size:52px}.dna-title{font-size:32px}.dna-evo-row{grid-template-columns:20px 1fr;row-gap:4px}.dna-evo-track,.dna-evo-delta{grid-column:2}}
.dna-public-overlay{position:fixed;inset:0;background:rgba(4,4,4,.92);backdrop-filter:blur(6px);z-index:220;display:none;align-items:flex-start;justify-content:center;padding:20px;box-sizing:border-box;overflow-y:auto;}
.dna-public-overlay.open{display:flex}
.dna-public-card{position:relative;width:100%;max-width:640px;background:#080b09;border:1px solid rgba(183,255,50,.24);border-radius:22px;padding:20px;margin:10px 0 40px;}
.dna-public-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;font-size:18px;cursor:pointer;z-index:2}
.dna-top-list div.dna-top-row{cursor:default}
.dna-top-list div.dna-top-row:hover{transform:none;border-color:rgba(255,255,255,.08)}
.dna-compare-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font:600 11px var(--font-mono);color:#c3d1ca}
.dna-compare-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.dna-cat-compare-bars{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.dna-cat-compare-bars .dna-cat-row{grid-template-columns:80px 1fr 30px}
.dna-dex-progress{font:600 12px var(--font-mono);color:#CCFF00;letter-spacing:.5px;}
.dna-dex-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;}
.dna-dex-chip{border:1px solid rgba(255,255,255,0.14);background:#1C1C1C;color:#B9C2A0;border-radius:999px;padding:7px 12px;font:600 11px var(--font-mono);cursor:pointer;transition:.2s ease;}
.dna-dex-chip:hover{border-color:var(--chip-color,#B4E600);color:#F2F5E8;}
.dna-dex-chip.active{background:var(--chip-color,#B4E600);color:#07110d;border-color:var(--chip-color,#B4E600);}
.dna-dex-cat-block{margin-top:26px;}
.dna-dex-cat-head{display:flex;align-items:center;gap:8px;font:600 12px var(--font-mono);letter-spacing:1.2px;color:#F2F5E8;margin-bottom:12px;}
.dna-dex-cat-count{margin-left:auto;color:#6b5a24;font-size:11px;}
.dna-dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.dna-dex-card{position:relative;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;background:linear-gradient(150deg,color-mix(in srgb, var(--cat-color,#b7ff32) 14%, #0c110d),#0a0d0b);cursor:pointer;transition:.2s ease;color:#fff;}
.dna-dex-card:hover{border-color:var(--cat-color,#b7ff32);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.3);}
.dna-dex-card-top{display:flex;justify-content:space-between;align-items:center;}
.dna-dex-card-icon{font-size:22px;}
.dna-dex-card-score{font:700 16px var(--font-score);color:var(--cat-color,#b7ff32);}
.dna-dex-card-label{margin-top:8px;font:600 12.5px var(--font-body);}
.dna-dex-card-title{margin-top:2px;font:700 11px var(--font-body);font-style:italic;color:#ffd54a;}
.dna-dex-card-tier{margin-top:6px;font:600 11px var(--font-mono);letter-spacing:.6px;color:#8fa89a;}
.dna-dex-card.locked{background:linear-gradient(150deg,#12140f,#0a0d0b);opacity:.72;}
.dna-dex-card.locked .dna-dex-card-icon{filter:grayscale(1) brightness(.8);}
.dna-dex-lock{font-size:14px;opacity:.7;}
.dna-dex-card-hint{margin-top:8px;font:700 11px var(--font-body);color:#7f8d85;line-height:1.5;}
@media all {.dna-dex-grid{grid-template-columns:repeat(2,1fr);}}
@keyframes dnaIconGlow{0%,100%{box-shadow:0 0 34px rgba(183,255,50,.25)}50%{box-shadow:0 0 50px rgba(183,255,50,.48)}}
@keyframes dnaFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.dna-wrap>*{animation:dnaFadeUp .6s cubic-bezier(.16,1,.3,1) both}
.dna-wrap>*:nth-child(1){animation-delay:0s}
.dna-wrap>*:nth-child(2){animation-delay:.05s}
.dna-wrap>*:nth-child(3){animation-delay:.1s}
.dna-wrap>*:nth-child(4){animation-delay:.15s}
.dna-wrap>*:nth-child(5){animation-delay:.2s}
.dna-wrap>*:nth-child(6){animation-delay:.25s}
.dna-wrap>*:nth-child(7){animation-delay:.3s}
.dna-wrap>*:nth-child(n+8){animation-delay:.35s}
@media(prefers-reduced-motion:reduce){.dna-hero-icon{animation:none}.dna-wrap>*{animation:none}}

/* from index.html <style id="footop-training-entry-fix"> */
/* Make Training entry independent of legacy navigation handlers. */
.footop-bottom-btn[data-bottom-panel="training"]{position:relative;z-index:12020;pointer-events:auto!important}
#panelTraining{position:relative;z-index:5}

/* from index.html <style id="footop-main-shell-nav-css"> */
:root{--footop-lime:#b7ff32;--footop-green:#28d17c;--footop-yellow:#ffd54a;--footop-deep:#07110d}
.footop-bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9000;display:flex;align-items:stretch;gap:10px;padding:8px;background:rgba(10,16,13,.88);border:1px solid rgba(183,255,50,.20);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 24px rgba(183,255,50,.07);backdrop-filter:blur(16px);width:min(520px,calc(100vw - 28px));box-sizing:border-box}
.footop-bottom-btn{flex:1;min-width:0;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));color:#9eaca7;border-radius:16px;padding:9px 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:.18s ease;text-align:left}
.footop-bottom-btn:hover{transform:translateY(-1px);border-color:rgba(183,255,50,.35);color:#fff}
.footop-bottom-btn.active{background:linear-gradient(135deg,rgba(183,255,50,.16),rgba(40,209,124,.09));backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-color:rgba(183,255,50,.5);color:#fff;box-shadow:inset 0 0 0 1px rgba(183,255,50,.08),0 0 16px rgba(183,255,50,.07)}
.footop-bottom-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;font:11px var(--font-mono);letter-spacing:.6px;color:#07110d;background:linear-gradient(145deg,var(--footop-lime),var(--footop-yellow));box-shadow:0 0 18px rgba(183,255,50,.15)}
.footop-bottom-btn.tracking .footop-bottom-icon{background:linear-gradient(145deg,var(--footop-green),var(--footop-lime))}
.footop-bottom-copy{min-width:0}.footop-bottom-kicker{display:block;font:11px var(--font-mono);letter-spacing:1.2px;color:#71807a;text-transform:uppercase}.footop-bottom-title{display:block;font:700 12px var(--font-display);letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel.panel-main-menu.active{display:block}
.main-menu-wrap{max-width:900px;margin:0 auto;padding:28px 22px 120px}
.main-menu-hero{padding:24px;border:1px solid rgba(183,255,50,.18);border-radius:24px;background:radial-gradient(circle at 90% 10%,rgba(255,213,74,.13),transparent 22%),radial-gradient(circle at 10% 30%,rgba(40,209,124,.15),transparent 30%),linear-gradient(140deg,#0c1511,#101914);box-shadow:0 20px 60px rgba(0,0,0,.25);margin-bottom:18px;position:relative;overflow:hidden}
.main-menu-hero:after{content:"";position:absolute;right:-50px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(183,255,50,.08);filter:blur(10px)}
.main-menu-kicker{font:11px var(--font-mono);letter-spacing:2px;color:var(--footop-lime)}
.main-menu-title{margin-top:6px;font:700 46px var(--font-display);letter-spacing:-0.02em;color:#fff}
.main-menu-sub{margin-top:7px;color:#9aa7a1;font-size:12px;line-height:1.6;max-width:560px}
.main-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.main-menu-card{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:18px;min-height:150px;color:#fff;cursor:pointer;transition:.18s ease;text-align:left}
.main-menu-card:hover{transform:translateY(-2px);border-color:rgba(183,255,50,.38);box-shadow:0 14px 35px rgba(0,0,0,.28)}
.main-menu-card-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font:11px var(--font-mono);color:#08110d;background:linear-gradient(145deg,var(--footop-lime),var(--footop-yellow));margin-bottom:18px}
.main-menu-card:nth-child(2) .main-menu-card-icon{background:linear-gradient(145deg,#28d17c,var(--footop-lime))}
.main-menu-card:nth-child(3) .main-menu-card-icon{background:linear-gradient(145deg,#ffd54a,#fff18c)}
.main-menu-card:nth-child(4) .main-menu-card-icon{background:linear-gradient(145deg,#99ff7a,#28d17c)}
.main-menu-card-title{font:700 18px var(--font-display);letter-spacing:-0.02em}
.main-menu-card-desc{margin-top:7px;color:#8f9c96;font-size:11px;line-height:1.5}
.footop-bottom-nav{align-items:stretch;gap:6px;padding:8px 10px;}
.footop-bottom-btn{padding:7px 6px 6px;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;border-radius:14px;}
.footop-bottom-copy{display:none!important;}
.footop-bottom-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;}
.footop-bottom-icon svg{width:23px;height:23px;display:block;}
.footop-bottom-title{display:block;font:11px var(--font-mono);letter-spacing:.4px;line-height:1;color:#b7c1bd;}
.footop-bottom-btn.active .footop-bottom-title{color:#fff;}
.footop-bottom-btn:hover .footop-bottom-title{color:#fff;}
.footop-bottom-btn.active .footop-bottom-icon{box-shadow:0 0 22px rgba(183,255,50,.18);}
.icon-news{background:linear-gradient(145deg,#b7ff32,#ffd54a)!important;}
.icon-training{background:linear-gradient(145deg,#28d17c,#b7ff32)!important;}
.icon-social{background:linear-gradient(145deg,#b7ff32,#f8ffb3)!important;}
.icon-match{background:linear-gradient(145deg,#ffd54a,#28d17c)!important;}
.icon-market{background:linear-gradient(145deg,#4de1ff,#28d17c)!important;}
.icon-profile{background:linear-gradient(145deg,#8aff7a,#b7ff32)!important;}
@media all {.footop-bottom-nav{bottom:0;padding:7px 7px calc(7px + env(safe-area-inset-bottom));gap:5px}.footop-bottom-btn{padding:6px 4px 5px;border-radius:12px}.footop-bottom-icon{width:36px;height:36px}.footop-bottom-icon svg{width:22px;height:22px}.footop-bottom-title{font-size:11px}.main-menu-wrap{padding:18px 12px 110px}.main-menu-title{font-size:36px}.main-menu-grid{grid-template-columns:1fr 1fr}.main-menu-card{min-height:138px;padding:15px}}

/* from index.html <style id="footop-neon-nav-fix-v2"> */
/* Top sub-nav (#dynamicSidebarNav): selected screen glows neon-lime while active. Rewritten
   2026-09-22 from a filled-pill/left-accent-bar treatment (built for the old vertical .sidebar
   list) to a bottom-underline treatment matching the horizontal top strip it lives in now, and
   the same underline language already unified elsewhere (Profile/Team tabs, Main News periods).
   This block's own !important rules are what actually win the cascade over every earlier
   .nav-tab rule in this file, so it's the one true source for the active/hover look now. */
.nav-tab.active{
  position:relative;
  color:#efffd7 !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.nav-tab.active::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:#b7ff32;
  box-shadow:0 0 10px #b7ff32,0 0 18px rgba(40,209,124,.7);
}
.nav-tab.active .nav-tab-icon{
  color:#06110b !important;
}
.nav-tab:hover{
  color:#dfffbd !important;
  border-color:transparent !important;
  background:rgba(183,255,50,.06) !important;
}
/* Tracking management/news must be selected only from the dynamic left sidebar. */
.tracking-subtabs,
#trackingManageTab,
#trackingNewsTab{display:none !important;}
.tracking-news-shell{padding-bottom:0 !important;}
/* Content never hides behind the 5-button bottom navigation. */
.scroll-area{
  padding-bottom:124px !important;
}
@media all {
  .scroll-area{padding-bottom:112px !important;}
}

/* from index.html <style id="footop-tracking-search-final"> */
.tracking-search-panel{background:linear-gradient(145deg,rgba(183,255,50,.06),rgba(255,213,74,.025));border:1px solid rgba(183,255,50,.18);border-radius:16px;padding:18px;box-shadow:0 0 30px rgba(183,255,50,.05);}
.tracking-universal-search{margin-top:12px}.tracking-universal-search input{font-size:15px!important;padding:15px 16px!important;border-color:rgba(183,255,50,.28)!important;background:#0d1511!important;box-shadow:0 0 18px rgba(183,255,50,.05) inset;}
.tracking-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.suggest-chip{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);color:#b8c6be;border-radius:999px;padding:7px 10px;font:11px var(--font-mono);cursor:pointer}.suggest-chip:hover{border-color:#b7ff32;color:#e8ffd0;box-shadow:0 0 12px rgba(183,255,50,.15)}
.tracking-search-status{margin-top:10px;font:11px var(--font-mono);color:#788981}.tracking-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.tracking-result{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);color:#fff;border-radius:12px;cursor:pointer}.tracking-result:hover{border-color:rgba(183,255,50,.45);box-shadow:0 0 18px rgba(183,255,50,.08);transform:translateY(-1px)}.tracking-result.tracked{opacity:.5;cursor:default}.tracking-result img,.tracking-result-placeholder{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#111;display:grid;place-items:center;flex:none}.tracking-result[data-type="team"] img,.tracking-result[data-type="team"] .tracking-result-placeholder{border-radius:12px;object-fit:contain}.tracking-result-main{min-width:0;flex:1}.tracking-result-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tracking-result-meta{margin-top:3px;font:11px var(--font-mono);color:#7f9088;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tracking-result-type{font:11px var(--font-mono);color:#b7ff32;white-space:nowrap}.my-tracking-list{display:flex;flex-direction:column;gap:8px}.my-track-row{border-radius:12px}.tracking-actions{gap:7px}
@media all {.tracking-search-results{grid-template-columns:1fr}}
.trk-browse-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
.trk-browse-btn{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border:1px solid rgba(183,255,50,.16);background:linear-gradient(145deg,rgba(183,255,50,.05),rgba(255,213,74,.02));border-radius:12px;cursor:pointer;transition:.15s ease;}
.trk-browse-btn:hover{border-color:rgba(183,255,50,.5);transform:translateY(-1px);box-shadow:0 8px 22px rgba(183,255,50,.08);}
.trk-browse-icon{font-size:20px;flex:0 0 auto;}
.trk-browse-btn b{display:block;font-size:12px;color:#eaffd2;}
.trk-browse-btn small{display:block;margin-top:3px;font:11px var(--font-mono);color:#7f9088;line-height:1.5;}
@media all {.trk-browse-row{grid-template-columns:1fr}}

/* from index.html <style id="footop-training-profile-v5"> */
.training-player-card{min-height:430px!important}
.training-player-card .player-visual{height:245px!important;align-items:flex-end!important}
.training-player-card .player-visual img.player-photo-real{position:relative;z-index:2;height:245px;width:auto;max-width:88%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));}
.training-player-card .player-visual img.player-photo-real[data-error="1"]{display:none}
.training-player-card .player-monogram.fallback{position:absolute;z-index:2}
.training-detail-btn{margin-top:12px!important;width:100%;border:1px solid rgba(183,255,50,.28);background:rgba(183,255,50,.06);color:#dfffad;border-radius:10px;padding:9px 10px;font:700 11px var(--font-mono);cursor:pointer;letter-spacing:.7px}
.training-detail-btn:hover{border-color:#b7ff32;box-shadow:0 0 16px rgba(183,255,50,.12)}
.training-exercise-modal{position:fixed;inset:0;z-index:100004;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);padding:18px;overflow:auto}
.training-exercise-modal.open{display:flex}
.training-exercise-box{width:min(760px,100%);max-height:92vh;overflow:auto;background:linear-gradient(160deg,#0f1511,#0a0d0b);border:1px solid rgba(183,255,50,.45);border-radius:22px;padding:20px;box-shadow:0 0 45px rgba(183,255,50,.12)}
.training-exercise-media{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-top:14px}
.training-exercise-media img{width:100%;height:260px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#0b0b0b}
.training-motion-card{min-height:260px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 20%,rgba(183,255,50,.12),transparent 40%),#0b0f0c;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.training-motion-card svg{width:88%;height:88%}
.training-exercise-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.training-exercise-chip{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font:11px var(--font-mono);color:#b8c4bc}
.training-exercise-copy{color:#9aa89f;font-size:12px;line-height:1.75;margin:12px 0 0}
.training-exercise-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.training-exercise-actions a,.training-exercise-actions button{border:1px solid rgba(183,255,50,.3);background:rgba(183,255,50,.07);color:#dfffad;padding:10px 12px;border-radius:10px;text-decoration:none;font:600 11px var(--font-mono);cursor:pointer}
.training-exercise-actions a:hover,.training-exercise-actions button:hover{border-color:#b7ff32;box-shadow:0 0 14px rgba(183,255,50,.12)}
@media all {.training-exercise-media{grid-template-columns:1fr}.training-exercise-media img,.training-motion-card{height:220px;min-height:220px}.training-player-card{min-height:400px!important}.training-player-card .player-visual{height:220px!important}.training-player-card .player-visual img.player-photo-real{height:220px}}

/* from index.html <style id="footop-global-nav-final-fix"> */
  /* Global 5-tab navigation is independent from every content panel. */
  #footopBottomNav.footop-bottom-nav{
    position:fixed !important;
    left:50% !important;
    bottom:12px !important;
    transform:translateX(-50%) !important;
    z-index:999999 !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    width:min(560px,calc(100vw - 18px)) !important;
    max-width:560px !important;
  }
  .main{padding-bottom:92px !important;box-sizing:border-box;}
  @media all {
    #footopBottomNav.footop-bottom-nav{bottom:0 !important;width:100vw !important;max-width:100vw !important;border-radius:18px 18px 0 0 !important;}
    .main{padding-bottom:82px !important;}
  }
  /* Keep destination panels below the navigation layer. */
  #panelTraining,#panelProfile{position:relative;z-index:1;}

/* from index.html <style id="footop-hscroll-reveal-css"> */
/* 2026-09-22: "hover to preview more" cards, modeled on imweb's template-gallery cards (a
   fixed-height frame clips extra real content; hovering smoothly scrolls the inner content up
   to reveal the rest, like a paused preview starting to play). Desktop/mouse only — there's no
   hover on a touch screen, so on mobile these cards just show their default clipped state,
   identical to before this feature existed. Heaviest use is the Main tab (see
   footop-main-dashboard-v1-js); a lighter second use is Main News' featured card. */
.footop-hscroll{position:relative;overflow:hidden;}
.footop-hscroll-inner{transition:transform 1.05s cubic-bezier(.22,.8,.28,1);}
@media(hover:hover) and (pointer:fine){
  .footop-hscroll-hoverzone:hover .footop-hscroll-inner{transform:translateY(var(--hs-shift,0px));}
}
@media(prefers-reduced-motion:reduce){.footop-hscroll-inner{transition:none !important;}}
.footop-hscroll-more{margin-top:6px;font:600 11px var(--font-mono);color:var(--ink-faint);letter-spacing:.3px;}
.footop-hscroll-hint{display:none;}
@media(hover:hover) and (pointer:fine){.footop-hscroll-hint{display:inline;}}

/* from index.html <style id="footop-main-dashboard-v1-css"> */
.footop-main-root{padding:20px 16px 120px;max-width:920px;margin:0 auto;color:var(--ink);min-height:calc(100vh - 84px - var(--subnav-h));overflow-y:auto;box-sizing:border-box;}
@media all {.footop-main-root{padding:16px 14px 170px;}}
.footop-main-quicknav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
.footop-main-qn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised);color:var(--ink-dim);font-size:18px;cursor:pointer;transition:.2s cubic-bezier(.25,.8,.35,1);}
.footop-main-qn span{font:600 11px var(--font-mono);color:var(--ink-dim);letter-spacing:.3px;}
.footop-main-qn:hover{border-color:var(--accent);transform:translateY(-2px);}
.footop-main-hero{position:relative;border-radius:22px;padding:22px;border:1px solid rgba(183,255,50,.22);background:linear-gradient(155deg,#141a10,#0b0f08 60%,#050603);box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;margin-bottom:16px;}
.footop-main-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 90% -10%,rgba(255,213,74,.14),transparent 55%),radial-gradient(110% 90% at -10% 115%,rgba(183,255,50,.16),transparent 55%);pointer-events:none;}
.footop-main-hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.footop-main-hero-name{font:700 24px var(--font-score);color:#fff;text-transform:uppercase;margin-top:4px;}
.footop-main-hero-pos{font:700 11px var(--font-mono);color:var(--ink-dim);letter-spacing:.4px;margin-top:2px;}
.footop-main-hero-ovr{font:700 44px var(--font-score);color:var(--accent);line-height:.85;text-align:right;text-shadow:0 0 20px rgba(183,255,50,.35);}
.footop-main-hero-ovr span{display:block;font:600 11px var(--font-mono);color:rgba(255,255,255,.6);letter-spacing:1.5px;margin-top:2px;}
.footop-main-xpbar{position:relative;z-index:1;height:7px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:16px;overflow:hidden;}
.footop-main-xpbar span{display:block;height:100%;background:linear-gradient(90deg,#b7ff32,#28d17c);border-radius:99px;}
.footop-main-hero-sub{position:relative;z-index:1;margin-top:8px;font:700 11px var(--font-mono);color:var(--ink-faint);}
.footop-main-dna-badge{position:relative;z-index:1;margin-top:12px;}
.footop-main-hero-guest{text-align:center;padding:34px 22px;}
.footop-main-hero-title{font:700 22px var(--font-display);color:#fff;margin:14px 0 18px;line-height:1.3;letter-spacing:-0.02em}
.footop-main-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media not all {.footop-main-grid{grid-template-columns:1fr 1fr;}}
.footop-main-card{border:1px solid var(--line);border-radius:16px;background:var(--bg-raised);padding:16px;transition:border-color .2s ease;}
.footop-main-card-clickable{cursor:pointer;}
.footop-main-card-clickable:hover{border-color:var(--accent);}
.footop-main-card-label{font:600 11px var(--font-mono);letter-spacing:.4px;color:var(--accent);margin-bottom:8px;}
.footop-main-card-body{font-size:12.5px;line-height:1.7;color:var(--ink);}
.footop-main-card-training{grid-column:1/-1;background:linear-gradient(120deg,rgba(183,255,50,.08),rgba(77,225,255,.05));border-color:rgba(183,255,50,.22);}
.footop-main-mini-row{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12px;}
.footop-main-mini-row:last-child{border-bottom:0;}
.footop-main-muted{color:var(--ink-faint);}
/* "YOUR DAY" data card + Moments preview thumbnails — 2026-09-23 master design spec */
.footop-main-card-yourday{grid-column:1/-1;}
/* Horizontal 3-up stat strip (2026-09-30 bento pass) — a glance-and-go row like Whoop/Strava's
   daily-stat strip, replacing the original vertical list rows so the 3 numbers read at once
   instead of needing to scan top-to-bottom. Same real data underneath, layout only. */
.footop-yourday-strip{display:flex;gap:8px;}
.footop-yourday-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg);border-radius:12px;padding:12px 6px;text-align:center;min-width:0;}
.footop-yourday-icon{font-size:17px;}
.footop-yourday-val{font:600 12.5px var(--font-mono);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.footop-yourday-val.footop-main-muted{color:var(--ink-faint);font-weight:700;}
.footop-yourday-label{font-size:11px;color:var(--ink-dim);}
/* Bento top-accent bars — each secondary card borrows the real accent color its own destination
   tab already uses elsewhere (Match/Teams' deep green, Social's light-lime, News' lime/amber),
   a real color-code rather than a new invented palette, so the grid reads at a glance which
   card leads where before you even read the label. */
.footop-main-card{position:relative;}
.footop-main-card-accent::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;}
.footop-main-card-accent-match::before{background:#1BAE64;}
.footop-main-card-accent-social::before{background:#CCFF00;}
.footop-main-card-accent-news::before{background:#FFC93C;}
.footop-moments-thumbrow{display:flex;gap:8px;overflow-x:auto;}
.footop-moments-thumb{flex:0 0 auto;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--bg);border:1px solid var(--line);}
.footop-moments-thumb img,.footop-moments-thumb video{width:100%;height:100%;object-fit:cover;}
.footop-streak-chip{display:inline-flex;align-items:center;font:600 11px var(--font-mono);letter-spacing:.3px;color:#0a0a0a;background:var(--accent);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.footop-streak-chip-muted{background:transparent;border:1px solid var(--line);color:var(--ink-dim);}
.footop-weekly-recap-row{display:flex;gap:8px;}
.footop-weekly-recap-row>div{flex:1;text-align:center;background:var(--bg);border-radius:12px;padding:10px 4px;}
.footop-weekly-recap-row b{display:block;font:700 20px var(--font-mono);color:var(--accent);}
.footop-weekly-recap-row span{font-size:11px;color:var(--ink-dim);}
/* Main 탭 상단 "대시보드 | 앱 소개" 세그먼트 토글 + 앱 소개(움직이는 애니메이션 포함 랜딩형 소개) (2026-10-01) */
.footop-main-toptabs{display:flex;gap:6px;background:#1C1C1C;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px;margin-bottom:16px;max-width:280px;}
.footop-main-toptab{flex:1;border:0;background:transparent;color:var(--ink-dim);font:600 11px var(--font-mono);letter-spacing:.5px;padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s ease;}
.footop-main-toptab.active{background:linear-gradient(120deg,#b7ff32,var(--accent));color:#0a0d0a;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.footop-intro-hero{position:relative;border-radius:22px;padding:34px 22px;text-align:center;border:1px solid rgba(183,255,50,.22);background:linear-gradient(155deg,#141a10,#0b0f08 60%,#050603);overflow:hidden;margin-bottom:18px;}
.footop-intro-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 90% -10%,rgba(255,213,74,.16),transparent 55%),radial-gradient(110% 90% at -10% 115%,rgba(183,255,50,.18),transparent 55%);pointer-events:none;}
.footop-intro-ball{position:relative;z-index:1;font-size:46px;display:inline-block;filter:drop-shadow(0 0 18px rgba(183,255,50,.55));animation:footopIntroSpin 7s linear infinite;}
@keyframes footopIntroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.footop-intro-title{position:relative;z-index:1;font:700 26px var(--font-display);color:#fff;margin-top:14px;line-height:1.25;background:linear-gradient(90deg,#fff,var(--accent) 60%,#fff);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:footopIntroShine 4.5s linear infinite;letter-spacing:-0.02em}
@keyframes footopIntroShine{to{background-position:220% center}}
.footop-intro-sub{position:relative;z-index:1;font-size:12.5px;color:var(--ink-dim);margin-top:8px;}
.footop-intro-carousel{position:relative;overflow:hidden;border-radius:18px;margin-bottom:12px;}
.footop-intro-track{display:flex;transition:transform .55s cubic-bezier(.65,0,.35,1);}
.footop-intro-slide{flex:0 0 100%;background:var(--bg-raised);border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-align:center;box-sizing:border-box;}
.footop-intro-slide-icon{font-size:34px;}
.footop-intro-slide h3{font:700 16px var(--font-display);color:var(--ink);margin:10px 0 4px;letter-spacing:-0.02em}
.footop-intro-slide p{font-size:12.5px;color:var(--ink-dim);line-height:1.6;max-width:320px;margin:0 auto;}
.footop-intro-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px;}
.footop-intro-dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;cursor:pointer;transition:.2s;}
.footop-intro-dot.active{background:var(--accent);width:18px;border-radius:4px;}
.footop-intro-marquee{overflow:hidden;white-space:nowrap;margin-bottom:18px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.footop-intro-marquee-track{display:inline-flex;gap:10px;animation:footopIntroMarquee 22s linear infinite;}
@keyframes footopIntroMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.footop-intro-pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-raised);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:700 11px var(--font-mono);color:var(--ink-dim);white-space:nowrap;}
.footop-intro-steps{display:flex;flex-direction:column;gap:4px;margin-bottom:18px;}
.footop-intro-step{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.footop-intro-step.in-view{opacity:1;transform:translateY(0);}
.footop-intro-step-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#28d17c);color:#0a0a0a;display:flex;align-items:center;justify-content:center;font:600 12px var(--font-mono);}
.footop-intro-step-body b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px;}
.footop-intro-step-body span{font-size:11.5px;color:var(--ink-dim);}
.footop-intro-cta{display:block;width:100%;text-align:center;padding:16px;border-radius:14px;background:linear-gradient(120deg,#b7ff32,var(--accent));color:#0a0a0a;font:700 14px var(--font-display);border:0;cursor:pointer;letter-spacing:-0.02em;}
@media(prefers-reduced-motion:reduce){.footop-intro-ball,.footop-intro-title,.footop-intro-marquee-track{animation:none!important;}}

/* from index.html <style id="footop-training-v7-final-css"> */
/* Full-screen Training home; only Routine/Analyze pages may scroll. */
#panelTraining .footop-training-v6{height:calc(100vh - 84px - var(--subnav-h));min-height:0;display:flex;flex-direction:column}
#panelTraining .training-v6-head{flex:0 0 auto;padding:26px 34px 16px}
#panelTraining .training-v6-main{flex:1;min-height:0;padding:0 34px 18px;display:flex;overflow:hidden}
#panelTraining .training-v6-view.training-v6-home{display:flex!important;flex-direction:column;min-height:0;overflow:hidden;flex:1}
#trainingV6Home{gap:12px}
.training-v7-home-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;min-height:0;flex:0 0 280px}
.training-v7-home-card{border:1px solid rgba(183,255,50,.14);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:20px;box-shadow:0 16px 44px rgba(0,0,0,.24);min-width:0}
.training-v7-home-card:hover{border-color:rgba(183,255,50,.34);box-shadow:0 0 30px rgba(183,255,50,.06),0 16px 44px rgba(0,0,0,.24)}
.training-v7-streak{display:none!important;display:flex;flex-direction:column;justify-content:space-between;min-height:100%}
.training-v7-streak-num{font:700 58px var(--font-score);color:#b7ff32;line-height:.9;letter-spacing:-1px}
.training-v7-streak-track{height:9px;background:#111712;border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.training-v7-streak-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#28d17c,#b7ff32,#ffd54a);box-shadow:0 0 14px rgba(183,255,50,.2)}
.training-v7-streak-btn{border:1px solid rgba(183,255,50,.28);background:rgba(183,255,50,.05);color:#eaffbf;border-radius:10px;padding:9px 11px;font:600 11px var(--font-mono);cursor:pointer}
.training-v7-streak-btn.done{background:rgba(40,209,124,.12);color:#b7ff32;border-color:rgba(40,209,124,.35)}
.training-v7-players-section{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(183,255,50,.12);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01));padding:16px}
.training-v7-player-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-height:0;flex:1;overflow:hidden}
.training-v7-player{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(160deg,#101610,#080c09);padding:0;color:#fff;text-align:left;cursor:pointer;min-width:0}
.training-v7-player:hover{border-color:rgba(183,255,50,.42);box-shadow:0 0 22px rgba(183,255,50,.09);transform:translateY(-2px)}
.training-v7-player .visual{height:165px;background:radial-gradient(circle at 50% 28%,rgba(183,255,50,.18),transparent 42%),linear-gradient(180deg,#151c16,#0a0f0c);display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.training-v7-player img{height:100%;max-width:95%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.42))}
.training-v7-player .placeholder{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;background:#121913;border:1px solid rgba(183,255,50,.3);font:700 28px var(--font-score);color:#eaffbf}
.training-v7-player .body{padding:10px 12px 12px}
.training-v7-player .name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.training-v7-player .meta{font:11px var(--font-mono);color:#7f8c84;margin-top:3px}
.training-v7-player .match{font:600 11px var(--font-mono);color:#b7ff32;margin-top:8px}
.training-v7-player .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.training-v7-player .chip{font:7px var(--font-mono);padding:4px 6px;border:1px solid rgba(255,255,255,.07);border-radius:999px;color:#c2cec6;background:rgba(255,255,255,.02)}
#trainingV6Home>.training-v6-card,#trainingV6Home>.training-section,#trainingV6Home>.training-v6-players,#trainingV6Home>.training-v6-home-grid{display:none!important}
/* Remove the legacy routine entry from the left menu; Home contains routine launch. */
.training-routine-left-entry{display:none!important}
/* Analyze page fills the available content area. */
#trainingV6Analyze.training-v6-view{min-height:0;flex:1;overflow:auto}
#trainingV6AnalyzePanel{max-width:1100px;margin:0 auto;padding:10px 0 40px}
.training-v7-analyze-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.training-v7-analyze-card{border:1px solid rgba(183,255,50,.16);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:22px;box-shadow:0 16px 44px rgba(0,0,0,.22)}
.training-v7-upload-zone{border:1px dashed rgba(183,255,50,.45);background:rgba(183,255,50,.03);border-radius:16px;padding:26px;text-align:center;cursor:pointer}
.training-v7-upload-zone input{display:block;margin:14px auto 0;max-width:100%}
.training-v7-result{white-space:pre-wrap;border-left:3px solid #b7ff32;background:#0d120f;border-radius:12px;padding:14px;color:#dce7df;line-height:1.8;min-height:180px}
.training-v7-analyze-status{font:11px var(--font-mono);letter-spacing:.8px;color:#9cab9f}
@media all {.training-v7-home-grid,.training-v7-analyze-shell{grid-template-columns:1fr}.training-v7-home-grid{flex-basis:270px}.training-v7-player-strip{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;overflow-y:hidden}.training-v7-player{min-width:150px}}
@media all {#panelTraining .training-v6-head{padding:18px 14px 10px}#panelTraining .training-v6-main{padding:0 14px 12px}.training-v7-home-grid{grid-template-columns:1fr;flex-basis:330px}.training-v7-player-strip{grid-template-columns:repeat(5,145px)}.training-v7-player .visual{height:142px}}

/* from index.html <style id="footop-training-v10-scroll-separation"> */
#panelTraining .training-v6{height:100%;min-height:0;}
#panelTraining .training-v6-main{min-height:0;flex:1;}
#panelTraining .training-v6-view{min-height:0;flex:1;}
#panelTraining .training-v6-home{overflow-y:auto;overflow-x:hidden;}
#panelTraining .training-v6-home .training-v6-grid{min-height:max-content;}
#panelTraining .training-v6-analyze{overflow-y:auto;overflow-x:hidden;}
@media all {#panelTraining .training-v6-home{padding-bottom:170px;}#panelTraining .training-v6-analyze{padding-bottom:170px;}}

/* from index.html <style id="footop-training-v11-visibility-fix"> */
/* V11 — Training Home: real document flow + safe space above fixed 5-tab navigation. */
#panelTraining .training-v6-main{
  overflow:hidden !important;
  padding-bottom:0 !important;
}
#panelTraining .training-v6-view.training-v6-home,
#trainingV6Home.v10-home{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
  padding:0 6px 190px !important;
  scrollbar-gutter:stable;
}
/* Let the Home contents determine their own height instead of squeezing later sections. */
#trainingV6Home .v10-home-grid,
#trainingV6Home .training-v7-home-grid{
  height:auto !important;
  min-height:0 !important;
  flex:none !important;
}
#trainingV6Home .v10-card,
#trainingV6Home .training-v7-home-card{
  min-height:270px;
  box-sizing:border-box;
}
#trainingV6Home .v10-players,
#trainingV6Home .training-v7-players-section{
  height:auto !important;
  min-height:0 !important;
  flex:none !important;
  margin-top:14px;
}
#trainingV6Home .v10-player-strip,
#trainingV6Home .training-v7-player-strip{
  height:300px !important;
  min-height:300px !important;
  flex:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
/* Legacy routine, when present on Home, must never sit underneath the bottom nav. */
#trainingV6Home .training-routine-injected{
  position:relative !important;
  z-index:2 !important;
  margin:16px 0 0 !important;
  padding-bottom:30px !important;
}
#trainingV6Home .training-routine-box,
#trainingV6Home .training-v7-routine-card{
  box-sizing:border-box;
}
#trainingV6Home .training-inline-routine{
  position:relative !important;
  z-index:4 !important;
}
/* Extra end spacer guarantees the last routine cards can be scrolled above the fixed nav. */
#trainingV6Home::after{
  content:"";
  display:block;
  height:40px;
  width:100%;
}
@media all {
  #trainingV6Home .v10-home-grid,
  #trainingV6Home .training-v7-home-grid{grid-template-columns:1fr !important;}
  #trainingV6Home .v10-player-strip,
  #trainingV6Home .training-v7-player-strip{height:280px !important;min-height:280px !important;}
}
@media all {
  #trainingV6Home .training-v6-home,
  #trainingV6Home.v10-home{padding-left:0 !important;padding-right:0 !important;padding-bottom:190px !important;}
  #trainingV6Home .v10-player-strip,
  #trainingV6Home .training-v7-player-strip{height:260px !important;min-height:260px !important;}
}

/* from index.html <style id="footop-training-analyze-v18"> */
.training-v18-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;max-width:1180px;margin:0 auto;padding:18px 0 70px}.training-v18-card{background:linear-gradient(145deg,#121612,#0b0e0b);border:1px solid rgba(183,255,50,.18);border-radius:22px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.28)}.training-v18-title{font:700 38px var(--font-display);margin:7px 0;letter-spacing:-0.02em}.training-v18-sub{color:#87928b;font-size:11px;line-height:1.8}.training-v18-upload{margin-top:18px;display:block;border:1px dashed rgba(183,255,50,.45);border-radius:16px;padding:24px;text-align:center;cursor:pointer;background:rgba(183,255,50,.025)}.training-v18-upload input{display:none}.training-v18-goal{width:100%;min-height:120px;margin-top:14px;box-sizing:border-box;background:#080b08;color:#eef5ef;border:1px solid #263026;border-radius:14px;padding:14px;resize:vertical;outline:none}.training-v18-goal:focus{border-color:#b7ff32;box-shadow:0 0 0 3px rgba(183,255,50,.08)}.training-v18-action{width:100%;margin-top:12px;padding:14px 16px;border:0;border-radius:13px;background:#b7ff32;color:#0a0d0a;font:600 12px var(--font-mono);cursor:pointer}.training-v18-action:disabled{opacity:.5;cursor:wait}.training-v18-preview{display:none;width:100%;max-height:350px;object-fit:contain;background:#000;border-radius:14px;margin-top:14px}.training-v18-status{font:11px var(--font-mono);color:#91a099;margin-top:9px}.training-v18-result{min-height:420px}.training-v18-empty{height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:#6f7c73;border:1px dashed #293129;border-radius:16px;padding:20px}.training-v18-output{display:grid;gap:10px}.training-v18-section{border:1px solid #232b23;border-radius:14px;padding:14px;background:#0d110d}.training-v18-section b{display:block;color:#b7ff32;font:11px var(--font-mono);letter-spacing:.8px;margin-bottom:8px}.training-v18-section div{white-space:pre-wrap;color:#dfe8e1;font-size:12px;line-height:1.75}.training-v18-badge{display:inline-flex;padding:6px 8px;border-radius:999px;border:1px solid rgba(183,255,50,.25);color:#b7ff32;font:11px var(--font-mono)}
@media all {.training-v18-shell{grid-template-columns:1fr}.training-v18-title{font-size:30px}}

/* from index.html <style id="footop-training-v25-final"> */
/* V25: remove streak + stable position/playstyle UI */
#trainingV6Home .training-v7-streak,#trainingV6Home .training-streak,#trainingV6Home [data-streak-complete],#trainingV6Home [class*="streak"]{display:none!important}
.v25-player-strip{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;margin-top:12px}
.v25-player{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#0b100d;color:#fff;overflow:hidden;text-align:left;cursor:pointer;transition:.2s}.v25-player:hover{transform:translateY(-3px);border-color:rgba(183,255,50,.5)}
.v25-photo{height:210px;background:linear-gradient(180deg,#18241b,#090d0a);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.v25-photo img{height:100%;width:100%;object-fit:cover;object-position:center 18%}.v25-fallback{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;margin-bottom:28px;background:#141b16;border:2px solid rgba(183,255,50,.35);color:#b7ff32;font:700 30px var(--font-display);letter-spacing:-0.02em}
.v25-body{padding:12px}.v25-name{font:700 15px var(--font-score)}.v25-meta{font:11px var(--font-mono);color:#87958d;margin-top:4px}.v25-match{font:600 11px var(--font-mono);color:#b7ff32;margin-top:8px}.v25-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.v25-tag{font:7px var(--font-mono);padding:4px 6px;border-radius:99px;background:rgba(183,255,50,.06);border:1px solid rgba(183,255,50,.12);color:#d7e8d8}
@media all {.v25-player-strip{display:flex;overflow-x:auto}.v25-player{min-width:165px}}

/* from index.html <style id="footop-v27-training-fix"> */
#panelTraining .footop-training-v6{display:block!important;min-height:calc(100vh - 150px)!important;height:auto!important;}
#panelTraining .training-v6-main{display:block!important;min-height:0!important;height:auto!important;}
#panelTraining .training-v6-view{display:none!important;}
#panelTraining #trainingV6Home.active,#panelTraining #trainingV6Analyze.active,#panelTraining #trainingV6Routine.active{display:block!important;}
#panelTraining #trainingV6Home{overflow-y:auto!important;overflow-x:hidden!important;padding:0 8px 180px!important;box-sizing:border-box!important;}
#panelTraining #trainingV6Analyze{overflow-y:auto!important;padding:0 8px 180px!important;box-sizing:border-box!important;}
.v27-home-card{background:linear-gradient(145deg,#101a14,#0b110e);border:1px solid rgba(183,255,50,.16);border-radius:22px;padding:20px;margin:12px 0;color:#fff;box-shadow:0 15px 45px rgba(0,0,0,.24)}
.v27-pos{font:700 42px var(--font-score);color:#b7ff32;margin:4px 0}.v27-muted{color:#8d9b94;font-size:11px;line-height:1.7}.v27-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.v27-btn{border:1px solid rgba(183,255,50,.25);background:#111a15;color:#dfffbd;border-radius:12px;padding:10px 13px;font:600 11px var(--font-mono);cursor:pointer}.v27-btn.primary{background:linear-gradient(135deg,#b7ff32,#74d82e);color:#07110d;border:0}.v27-players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}.v27-player{border:1px solid rgba(255,255,255,.08);background:#0a100d;color:#fff;border-radius:16px;overflow:hidden;text-align:left;cursor:pointer;padding:0}.v27-photo{height:190px;background:linear-gradient(160deg,#1b2a1f,#090d0a);display:flex;align-items:center;justify-content:center}.v27-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}.v27-initial{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#141c17;border:1px solid #b7ff32;color:#b7ff32;font:700 24px var(--font-score)}.v27-pbody{padding:11px}.v27-pname{font:600 14px var(--font-score)}.v27-pmeta{font:11px var(--font-mono);color:#89968f;margin-top:4px}.v27-match{font:600 11px var(--font-mono);color:#b7ff32;margin-top:7px}.v27-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.v27-tag{font:7px var(--font-mono);color:#cfe8cf;background:rgba(183,255,50,.06);border:1px solid rgba(183,255,50,.12);padding:4px 6px;border-radius:99px}@media all {.v27-players{display:flex;overflow-x:auto;padding-bottom:6px}.v27-player{min-width:190px}}
.v27-analyze{max-width:900px;margin:0 auto}.v27-drop{border:1px dashed rgba(183,255,50,.35);border-radius:20px;padding:24px;background:linear-gradient(145deg,#101a14,#0a100d)}.v27-file{display:block;width:100%;box-sizing:border-box;margin-top:14px;padding:14px;border-radius:12px;background:#0b120e;color:#dff5df;border:1px solid rgba(255,255,255,.08)}.v27-goal{width:100%;min-height:110px;box-sizing:border-box;margin-top:12px;padding:14px;border-radius:14px;background:#0b120e;color:#fff;border:1px solid rgba(255,255,255,.08);resize:vertical}.v27-result{margin-top:14px;display:grid;gap:10px}.v27-result-card{padding:15px;border-radius:15px;background:#0c1510;border:1px solid rgba(255,255,255,.07);color:#dce7df;line-height:1.7;font-size:11px}.v27-result-card b{display:block;color:#b7ff32;font:600 11px var(--font-mono);margin-bottom:5px}

/* from index.html <style id="footop-training-v30-clean-css"> */
#panelTraining .training-v6-view{box-sizing:border-box}
#trainingV6Analyze .v30-analyze-shell{max-width:1100px;margin:0 auto;padding:18px 0 150px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
#trainingV6Analyze .v30-card{background:linear-gradient(145deg,#101610,#0b100c);border:1px solid rgba(183,255,50,.18);border-radius:20px;padding:22px}
#trainingV6Analyze .v30-card h2{font-size:28px;margin:8px 0 10px}
#trainingV6Analyze .v30-upload{border:1px dashed rgba(183,255,50,.45);border-radius:16px;padding:24px;text-align:center;background:rgba(183,255,50,.03)}
#trainingV6Analyze .v30-upload input{display:block;width:100%;margin-top:14px}
#trainingV6Analyze .v30-goal{width:100%;min-height:120px;box-sizing:border-box;margin-top:12px;padding:13px;border-radius:13px;background:#080d09;color:#fff;border:1px solid rgba(255,255,255,.1);resize:vertical}
#trainingV6Analyze .v30-analyze-btn{margin-top:12px;border:1px solid #b7ff32;background:#b7ff32;color:#081007;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
#trainingV6Analyze .v30-analyze-btn:disabled{opacity:.55;cursor:wait}
#trainingV6Analyze .v30-status{font:11px var(--font-mono);color:#93a098;margin-top:9px}
#trainingV6Analyze .v30-result{display:grid;gap:10px;margin-top:12px;white-space:pre-wrap;line-height:1.75}
#trainingV6Analyze .v30-result-card{border:1px solid rgba(255,255,255,.07);border-left:3px solid #b7ff32;border-radius:13px;background:#0d130f;padding:14px;color:#dce7df;font-size:12px}
#trainingV6Analyze .v30-result-card b{display:block;color:#b7ff32;margin-bottom:5px;font:600 11px var(--font-mono);letter-spacing:.5px}
@media all {#trainingV6Analyze .v30-analyze-shell{grid-template-columns:1fr;padding:12px 0 150px}}

/* from index.html <style id="footop-player-profile-v1-css"> */
.footop-profile-root{padding:20px 16px 120px;max-width:920px;margin:0 auto;color:var(--ink);height:calc(100vh - 84px - var(--subnav-h));overflow-y:auto;overflow-x:hidden;box-sizing:border-box;-webkit-overflow-scrolling:touch;}
@media all {.footop-profile-root{height:calc(100vh - 74px);padding-bottom:170px;}}
.footop-profile-loading,.footop-profile-error,.footop-empty-state{padding:40px 16px;text-align:center;color:var(--ink-dim);font-size:13px;line-height:1.7;}
.footop-profile-error{color:#ff6b6b;}
.footop-auth-kicker{font:600 11px var(--font-mono);letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;}
.footop-auth-card{max-width:420px;margin:0 auto 20px;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--bg-raised);box-shadow:0 18px 44px rgba(0,0,0,.3);}
.footop-auth-title{font:700 20px var(--font-display);margin:0 0 18px;letter-spacing:-0.02em}
.footop-auth-tabs{display:flex;gap:4px;margin-bottom:18px;padding:4px;border-radius:14px;background:#080808;border:1px solid var(--line);}
.footop-auth-tab{flex:1;padding:11px;border:0;background:transparent;color:var(--ink-dim);border-radius:11px;font:600 11px var(--font-mono);letter-spacing:.4px;cursor:pointer;transition:.2s cubic-bezier(.25,.8,.35,1);}
.footop-auth-consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.55;color:#B9C2A0;margin:2px 0 4px}
.footop-auth-consent[hidden]{display:none}
.footop-auth-consent input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:#CCFF00}
.footop-auth-consent a,.footop-auth-legal a{color:#CCFF00;text-underline-offset:3px}
.footop-auth-legal{margin-top:10px;text-align:center;font-size:11.5px;color:#8A8A85}
.footop-auth-tab.active{background:linear-gradient(120deg,#b7ff32,#28d17c);color:#07110d;box-shadow:0 8px 18px rgba(183,255,50,.25);}
.footop-auth-form{display:flex;flex-direction:column;gap:14px;}
.footop-auth-field{display:flex;flex-direction:column;gap:6px;font:700 11px var(--font-mono);color:var(--ink-dim);letter-spacing:.3px;}
.footop-auth-field[hidden]{display:none;}
.footop-auth-field input{background:#0d0d0d;border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--ink);font-size:13.5px;transition:border-color .2s ease,box-shadow .2s ease;}
.footop-auth-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,50,.14);}
.footop-auth-msg{font-size:11px;color:#ff8080;min-height:14px;}
.footop-auth-msg.ok{color:var(--accent);}
.footop-auth-submit{padding:15px;border:0;border-radius:13px;background:linear-gradient(120deg,#b7ff32,#28d17c);color:#07110d;font:600 12px var(--font-mono);letter-spacing:.6px;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px rgba(183,255,50,.22);transition:transform .18s ease,box-shadow .18s ease;}
.footop-auth-submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(183,255,50,.3);}
.footop-auth-submit:disabled{opacity:.5;cursor:wait;transform:none;}
/* Football-hero login screen, built from real references: a Bayview FC-style club hero (bold
   condensed headline over a dramatic athletic action pose, dark scrim for text contrast), the
   sports-app card pattern seen in mobile football-club ads ("TRAIN. PLAY. GROW." style headline
   blocks), and imweb.me's clean segmented-tab/whitespace rhythm for the auth card above. The hero
   figure reuses this app's own existing cinematic silhouette system (SILHOUETTE_POSES/
   renderSilhouette) instead of a real athlete photo — same "no real player likeness" rule this
   app already applies to avatars, Trading listings, and every AI feature. */
.footop-login-hero{position:relative;margin-bottom:16px;border-radius:24px;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.45);}
.footop-login-hero-bg{position:absolute;inset:0;background:radial-gradient(130% 90% at 82% -10%,rgba(255,213,74,.18),transparent 55%),radial-gradient(120% 90% at -10% 115%,rgba(183,255,50,.2),transparent 55%),linear-gradient(175deg,#1c1f14 0%,#101208 45%,#050502 100%);}
.footop-login-hero-ball-wrap{position:absolute;right:6%;bottom:6%;width:150px;height:150px;display:flex;align-items:center;justify-content:center;z-index:1;}
.footop-login-hero-ball-glow{position:absolute;inset:-30%;background:radial-gradient(circle,rgba(183,255,50,.35),transparent 70%);filter:blur(8px);animation:footopHeroBallPulse 3.2s ease-in-out infinite;}
.footop-login-hero-ball{position:relative;font-size:104px;line-height:1;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(183,255,50,.25));transform:rotate(-12deg);}
@keyframes footopHeroBallPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.footop-login-hero-ball-glow{animation:none}}
.footop-login-hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,4,.95) 0%,rgba(5,5,4,.74) 40%,rgba(5,5,4,.2) 70%,transparent 92%);}
.footop-login-hero-content{position:relative;z-index:2;padding:26px 24px 28px;max-width:76%;}
.footop-login-hero-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(120deg,#b7ff32,#ffd54a);color:#0a0d0a;font:600 11px var(--font-mono);letter-spacing:1.4px;padding:6px 13px;border-radius:999px;margin-bottom:14px;}
.footop-login-hero-title{font:700 38px/1.25 var(--font-display);letter-spacing:-0.02em;margin:0;background:linear-gradient(100deg,#ffffff,#e9ffcf 55%,#b7ff32);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.footop-login-hero-sub{margin:14px 0 0;font-size:12px;line-height:1.75;color:rgba(255,255,255,.72);max-width:270px;word-break:keep-all;}
@media all {.footop-login-hero{min-height:220px;}.footop-login-hero-title{font-size:30px;}.footop-login-hero-content{max-width:88%;padding:22px 18px;}.footop-login-hero-ball-wrap{width:104px;height:104px;right:4%;}.footop-login-hero-ball{font-size:72px;}}
.footop-login-features{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px;}
.footop-login-feature{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 6px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised);text-align:center;}
.footop-login-feature span{font-size:18px;}
.footop-login-feature b{font:600 11px var(--font-mono);color:var(--ink-dim);letter-spacing:.2px;}
@media all {.footop-login-features{grid-template-columns:repeat(2,1fr);}}
/* 2026-09-23: two more "landing page" techniques pulled from reference videos the user sent,
   applied to the login/auth screen — the one real marketing-style surface this app has (every
   signed-out gate calls this same renderAuthForm(), so it's shared everywhere the hero above
   already appears). Both sit BELOW the hero+auth card (login itself stays first-viewport,
   uninterrupted) so they only show to someone who scrolls past logging in. */
.footop-login-reveal{position:relative;margin:28px 0 18px;padding:34px 22px 0;border-radius:24px;overflow:hidden;background:linear-gradient(175deg,#1c1f14 0%,#101208 45%,#050502 100%);border:1px solid rgba(255,255,255,.08);min-height:300px;}
.footop-login-reveal-bg{position:absolute;inset:0;background:radial-gradient(120% 70% at 15% 0%,rgba(183,255,50,.16),transparent 55%),radial-gradient(120% 70% at 100% 100%,rgba(255,213,74,.12),transparent 55%);pointer-events:none;}
.footop-login-reveal-text{position:relative;z-index:1;text-align:center;max-width:320px;margin:0 auto;}
.footop-login-reveal-kicker{font:600 11px var(--font-mono);letter-spacing:1.6px;color:#b7ff32;margin-bottom:8px;}
.footop-login-reveal-title{font:700 26px var(--font-display);color:#fff;margin:0;letter-spacing:-0.02em}
.footop-login-reveal-sub{margin:10px 0 0;font-size:12px;line-height:1.7;color:rgba(255,255,255,.68);word-break:keep-all;}
.footop-login-phone{position:relative;z-index:1;width:min(230px,72%);margin:26px auto 0;border-radius:28px;background:#0a0c08;border:3px solid #23281a;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(183,255,50,.06) inset;overflow:hidden;opacity:0;transform:translateY(56px) scale(.94);transition:opacity .9s cubic-bezier(.16,.9,.24,1),transform .9s cubic-bezier(.16,.9,.24,1);}
.footop-login-phone.in-view{opacity:1;transform:translateY(0) scale(1);}
.footop-login-phone-notch{width:60px;height:16px;background:#0a0c08;border-radius:0 0 12px 12px;margin:0 auto;position:relative;z-index:2;}
.footop-login-phone-screen{margin-top:-16px;padding:16px 12px 18px;background:linear-gradient(165deg,#101a10,#0a0f08 65%,#050603);}
.flp-dots{display:flex;gap:5px;justify-content:center;margin-bottom:12px;}
.flp-dots span{width:5px;height:5px;border-radius:50%;background:rgba(183,255,50,.35);}
.flp-dots span:nth-child(2){background:rgba(255,213,74,.4);}
.flp-hero{border-radius:14px;padding:13px;background:linear-gradient(150deg,#161c0f,#0c0f08);border:1px solid rgba(183,255,50,.18);}
.flp-hero-top{display:flex;justify-content:space-between;align-items:flex-start;}
.flp-hero-ovr{font:700 22px var(--font-score);color:#b7ff32;line-height:1;}
.flp-hero-name{font:600 11px var(--font-mono);color:#fff;letter-spacing:.4px;}
.flp-hero-pos{font:700 7.5px var(--font-mono);color:rgba(255,255,255,.5);margin-top:2px;}
.flp-xpbar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:9px;overflow:hidden;}
.flp-xpbar span{display:block;height:100%;width:64%;background:linear-gradient(90deg,#b7ff32,#28d17c);}
.flp-card{margin-top:8px;border-radius:12px;padding:10px 11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font:600 11px var(--font-mono);color:rgba(255,255,255,.82);letter-spacing:.2px;}
@media(prefers-reduced-motion:reduce){.footop-login-phone{transition:none;}}
.footop-login-steps{margin:26px 0 8px;}
.footop-login-steps-title{font:700 15px var(--font-display);color:var(--ink);text-align:center;margin:0 0 16px;letter-spacing:-0.02em}
.footop-login-step{display:flex;gap:13px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid var(--line-soft);}
.footop-login-step:last-child{border-bottom:0;}
.footop-login-step-num{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:600 12px var(--font-mono);background:linear-gradient(145deg,#b7ff32,#ffd54a);color:#0a0d0a;}
.footop-login-step-icon{font-size:15px;margin-right:6px;}
.footop-login-step-title{font:600 13px var(--font-body);color:var(--ink);}
.footop-login-step-desc{margin-top:3px;font-size:11.5px;line-height:1.55;color:var(--ink-dim);word-break:keep-all;}
@media all {.footop-login-reveal{padding:26px 16px 0;}.footop-login-reveal-title{font-size:22px;}}
.footop-myplayer-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
.footop-player-name{font:700 28px var(--font-score);margin:4px 0;text-transform:uppercase;}
.footop-player-meta{color:var(--ink-dim);font:700 11px var(--font-mono);}
.footop-player-meta b{color:var(--accent);}
.footop-myplayer-actions{display:flex;flex-wrap:wrap;gap:8px;}
.footop-player-hero{position:relative;margin-top:10px;border-radius:22px;padding:26px;display:flex;gap:22px;align-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.35);}
.footop-player-hero::before{content:"";position:absolute;inset:0;z-index:0;}
.footop-player-hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.18),transparent 55%);}
.footop-player-hero>*{position:relative;z-index:1;}
.footop-tier-bronze::before{background:linear-gradient(135deg,#9a6a42,#4a2f18);}
.footop-tier-silver::before{background:linear-gradient(135deg,#b7c2ca,#4d5761);}
.footop-tier-gold::before{background:linear-gradient(135deg,#f3d377,#a3791f);}
.footop-tier-special::before{background:linear-gradient(120deg,var(--accent),#28d17c 45%,#4de1ff);}
.footop-hero-ovr{font:700 60px var(--font-score);color:#fff;line-height:.85;text-shadow:0 4px 22px rgba(0,0,0,.45);white-space:nowrap;}
.footop-hero-ovr-label{display:block;font:600 11px var(--font-mono);letter-spacing:2px;color:rgba(255,255,255,.75);margin-top:2px;}
.footop-hero-pos{font:600 11px var(--font-mono);letter-spacing:1.4px;color:rgba(255,255,255,.85);text-transform:uppercase;}
.footop-hero-name{font:700 30px var(--font-score);color:#fff;margin:2px 0 12px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.3);}
.footop-hero-stats-mini{display:flex;gap:16px;flex-wrap:wrap;}
.footop-hero-stats-mini div{text-align:center;min-width:34px;}
.footop-hero-stats-mini b{display:block;font:700 17px var(--font-mono);color:#fff;}
.footop-hero-stats-mini span{font:700 11px var(--font-mono);color:rgba(255,255,255,.72);letter-spacing:.5px;}
@media all {.footop-player-hero{flex-direction:column;align-items:flex-start;padding:20px;gap:14px;}.footop-hero-ovr{font-size:46px;}}
.footop-hero-avatar{width:84px;height:84px;flex-shrink:0;margin-left:auto;position:relative;display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.35);
  background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.95),transparent 60%),radial-gradient(100% 80% at 10% 110%,rgba(183,255,50,.4),transparent 65%),radial-gradient(100% 80% at 90% 110%,rgba(255,213,74,.36),transparent 65%),linear-gradient(180deg,#f4f5ef 0%,#cfd5c6 30%,#586154 62%,#0a0c09 100%);}
.footop-hero-avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,transparent 30%,rgba(0,0,0,.4) 100%);pointer-events:none;}
.footop-hero-avatar:empty{display:none;}
@media all {.footop-hero-avatar{width:60px;height:60px;margin-left:0;align-self:flex-end;}}
.footop-hero-stats-mini{min-height:38px;}
.footop-hero-stats-empty{font:700 11px var(--font-mono);color:rgba(255,255,255,.75);letter-spacing:.3px;align-self:center;}
.footop-hero-avatar.is-jersey{background:rgba(255,255,255,.14);backdrop-filter:blur(2px);border-color:rgba(255,255,255,.3);}
.footop-hero-avatar.is-jersey::after{display:none;}
.footop-hero-avatar .footop-jersey{width:88%;height:88%;position:relative;z-index:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));}
.footop-avatar-option .footop-jersey{width:100%;height:auto;aspect-ratio:1;}
.fje{margin:14px 0;padding-top:14px;border-top:1px solid var(--line)}
.fje-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
@media all {.fje-grid{grid-template-columns:1fr}}
.fje-preview{position:sticky;top:8px}
@media all {.fje-preview{position:static}}
.fje-preview .footop-player-hero{flex-direction:column;align-items:flex-start;padding:18px;gap:12px;margin-top:0}
.fje-preview .footop-hero-avatar{margin-left:0;align-self:center;width:132px;height:132px}
.fje-opts{min-width:0}
.fje-row{display:flex;gap:10px;margin-bottom:12px}
.fje-row label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font:700 11px var(--font-mono);color:var(--ink-dim);letter-spacing:.5px}
.fje-row input[type=number],.fje-row input[type=text]{background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--ink);font-size:14px;width:100%;box-sizing:border-box;text-transform:uppercase}
.fje-label{font:600 11px var(--font-mono);letter-spacing:1px;color:var(--ink-dim);margin:12px 0 6px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.fje-swatches{display:grid;grid-template-columns:repeat(7,minmax(0,34px));gap:6px}
.fje-sw{aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;padding:0;min-width:0}
.fje-sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent,#CCFF00)}
.fje-color{aspect-ratio:1;width:100%;border-radius:50%;border:2px dashed rgba(255,255,255,.35);background:none;padding:0;cursor:pointer;overflow:hidden}
.fje-chip{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:6px 11px;font:700 12px var(--font-body);cursor:pointer}
.fje-chip.on{border-color:var(--accent,#CCFF00);color:var(--accent,#CCFF00)}
.fje-combos,.fje-patterns{display:flex;flex-wrap:wrap;gap:6px}
.fje-combo{display:inline-flex;align-items:center;gap:6px}
.fje-combo i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.35)}
.fje-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fje-actions .footop-auth-submit{flex:1;min-width:110px}
.footop-avatar-picker-label{font:600 11px var(--font-mono);letter-spacing:1.2px;color:rgba(255,255,255,.6);text-transform:uppercase;margin:2px 0 8px;}
.footop-avatar-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.footop-avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0;border-radius:16px;border:2px solid rgba(255,255,255,.10);cursor:pointer;overflow:hidden;aspect-ratio:3/4;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  background:radial-gradient(120% 90% at 50% 8%,rgba(255,255,255,.92),transparent 62%),radial-gradient(95% 70% at 12% 108%,rgba(183,255,50,.38),transparent 65%),radial-gradient(95% 70% at 88% 108%,rgba(255,213,74,.34),transparent 65%),linear-gradient(180deg,#f4f5ef 0%,#cfd5c6 28%,#586154 60%,#0a0c09 100%);}
.footop-avatar-option::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,transparent 32%,rgba(0,0,0,.42) 100%);pointer-events:none;}
.footop-avatar-option:hover{border-color:rgba(183,255,50,.55);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.4);}
.footop-avatar-option:disabled{opacity:.5;cursor:default;transform:none;}
.footop-avatar-option.selected{border-color:#b7ff32;box-shadow:0 0 0 2px rgba(183,255,50,.35),0 14px 32px rgba(183,255,50,.16);}
.footop-avatar-option span{position:relative;z-index:2;font:600 11px var(--font-mono);letter-spacing:.3px;color:#0a0d0a;background:rgba(255,255,255,.82);padding:3px 8px;border-radius:999px;margin-bottom:8%;white-space:nowrap;}
.footop-avatar-option.selected span{background:linear-gradient(115deg,#ffd54a,#b7ff32);color:#07110d;font-weight:700;}
.footop-reveal-fx{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.footop-reveal-fx.footop-revealed{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.footop-reveal-fx{opacity:1!important;transform:none!important;transition:none!important}}
.footop-btn-ghost{padding:9px 13px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);border-radius:10px;font:600 11px var(--font-mono);cursor:pointer;white-space:nowrap;}
.footop-btn-ghost.active{background:var(--accent);color:#0a0d0a;border-color:var(--accent);}
.footop-btn-ghost.danger{color:#ff8080;border-color:rgba(255,107,107,.3);}
.footop-myplayer-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.footop-card{border:1px solid var(--line);border-radius:18px;background:var(--bg-raised);padding:18px;}
.footop-card h3{margin:0 0 12px;font:600 12px var(--font-mono);letter-spacing:.8px;color:var(--ink-dim);}
.footop-card-wide{grid-column:1/-1;}
.footop-scout-card{border-color:rgba(77,225,255,.25);}
.footop-scout-cols{display:grid;grid-template-columns:1fr;gap:14px;margin-top:4px;}
.footop-scout-heading{display:block;font:600 11px var(--font-mono);letter-spacing:.6px;color:var(--accent);margin-bottom:6px;}
.footop-scout-cols ul{margin:0;padding-left:18px;color:var(--ink);font-size:12px;line-height:1.8;}
@media not all {.footop-scout-cols{grid-template-columns:1fr 1fr 1fr;}}
.footop-hex-val{fill:var(--accent);font:600 11px var(--font-mono);}
.footop-edit-form{display:flex;flex-direction:column;gap:12px;font:700 11px var(--font-mono);color:var(--ink-dim);}
.footop-settings-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-dim);}
.footop-settings-row:last-child{border-bottom:0;}
.footop-settings-row b{color:var(--ink);font-weight:700;}
.footop-edit-form select,.footop-edit-form input[type=number],.footop-edit-form textarea{background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--ink);font-size:13px;width:100%;box-sizing:border-box;margin-top:5px;font-family:var(--font-body);}
.footop-stat-sliders{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.footop-slider-row{display:grid;grid-template-columns:70px 1fr 30px;align-items:center;gap:8px;}
.footop-slider-row input[type=range]{accent-color:var(--accent);width:100%;}
.footop-slider-row output{text-align:right;color:var(--accent);font-weight:700;}
.footop-growth-graph{width:100%;display:block;}
.footop-athlete-overlay{position:fixed;inset:0;background:rgba(4,4,4,.92);backdrop-filter:blur(6px);z-index:980;display:none;overflow-y:auto;padding:40px 16px;}
.footop-athlete-overlay.open{display:block;}
.footop-athlete-card{max-width:640px;margin:0 auto;background:var(--bg-raised);border:1px solid var(--line);border-radius:22px;padding:26px 22px;position:relative;}
.footop-athlete-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:18px;cursor:pointer;}
.footop-athlete-bio{color:var(--ink-dim);font-size:13px;line-height:1.7;margin:10px 0;}
.footop-athlete-follow-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px 0 20px;font:700 11px var(--font-mono);color:var(--ink-dim);}
.footop-athlete-follow-row b{color:var(--ink);}
.footop-athlete-hint{color:var(--ink-faint);}
@media not all {
  .footop-myplayer-grid{grid-template-columns:1fr 1fr;}
  .footop-slider-row{grid-template-columns:90px 1fr 34px;}
}

/* from index.html <style id="footop-social-shared-css"> */
/* Rules the Social sub-screens (Moments / 오늘의 축구 / PM), Settings and Teams still share. The Social
   Feed itself (posts, composer, Kudos, ads, comments) was deleted 2026-10-03 — its DB tables stay, unread. */
.footop-social-root{padding:20px 16px 120px;max-width:640px;margin:0 auto;color:var(--ink);height:calc(100vh - 84px - var(--subnav-h));overflow-y:auto;overflow-x:hidden;box-sizing:border-box;-webkit-overflow-scrolling:touch;}
@media all {.footop-social-root{height:calc(100vh - 74px);padding-bottom:170px;}}
.footop-social-head{margin-bottom:16px;}
.footop-social-title{font:700 26px var(--font-display);margin:4px 0;text-transform:uppercase;letter-spacing:-0.02em}
#panelCommunity{min-height:calc(100vh - 84px - var(--subnav-h));}
@media all {#panelCommunity{min-height:calc(100vh - 74px);}}
.footop-social-toptabs{display:flex;gap:6px;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:4px;margin-bottom:14px;max-width:260px;}
.footop-social-toptab{flex:1;border:0;background:transparent;color:#B9C2A0;font:600 11px var(--font-mono);letter-spacing:.6px;padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s ease;}
.footop-social-toptab.active{background:linear-gradient(120deg,#b7ff32,#CCFF00);color:#0a0d0a;box-shadow:0 4px 12px rgba(0,0,0,.3);}
#panelCommunity .footop-empty-state{color:#B9C2A0;}
.footop-tier-chip,.footop-pos-chip{font:600 11px var(--font-mono);letter-spacing:.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--tier-color,var(--line));color:var(--tier-color,var(--ink-dim));background:rgba(255,255,255,.03);cursor:pointer;transition:background .15s,box-shadow .15s;white-space:nowrap;}
.footop-tier-chip:hover,.footop-pos-chip:hover{background:rgba(255,255,255,.08);}
.footop-tier-chip.active,.footop-pos-chip.active{background:var(--tier-color,var(--accent));color:#0a0d0a;font-weight:700;box-shadow:0 0 12px color-mix(in srgb, var(--tier-color,var(--accent)) 55%, transparent);}
.footop-tier-badge{display:inline-block;padding:2px 8px;border-radius:999px;font:600 11px var(--font-mono);letter-spacing:.4px;border:1px solid var(--tier-color,var(--line));color:var(--tier-color,var(--ink-dim));background:color-mix(in srgb, var(--tier-color,transparent) 14%, transparent);vertical-align:middle;margin-left:6px;}
.footop-tier-badge.tier-goat{background:linear-gradient(90deg,#CCFF00,#FFD54A);color:#0a0d0a;border:none;font-weight:700;box-shadow:0 0 10px rgba(200,255,0,.5);}
.footop-composer{border:1px solid var(--line);border-radius:18px;background:var(--bg-raised);padding:16px;margin-bottom:16px;}
.footop-composer textarea{width:100%;box-sizing:border-box;background:#0d0d0d;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);font-family:var(--font-body);font-size:13px;resize:vertical;min-height:64px;}
.footop-composer-row{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.footop-post-card{border:1px solid var(--line);border-radius:18px;background:var(--bg-raised);padding:16px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.35);}
.footop-post-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ffd54a,#b7ff32 55%,#28d17c);opacity:.75;}
.footop-post-card:hover{border-color:rgba(183,255,50,.35);box-shadow:0 16px 34px rgba(0,0,0,.35),0 0 0 1px rgba(183,255,50,.14);}
.footop-preview-card{opacity:.82;}
.footop-preview-card:hover{border-color:var(--line);box-shadow:0 8px 22px rgba(0,0,0,.35);}
.footop-post-time{font:700 11px var(--font-mono);color:var(--ink-faint);}
.footop-post-action{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:10px;padding:7px 12px;font:600 11px var(--font-mono);cursor:pointer;}
.footop-post-action.liked{color:var(--accent);border-color:rgba(200,255,0,.4);}

/* from index.html <style id="footop-moments-v1-css"> */
.footop-moments-screen-head{margin-bottom:14px;}
.footop-moments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 10px;padding:4px 2px;}
.footop-moments-grid-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;}
.footop-moments-grid-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:#b7ff32;background:#1a1f16;border:3px solid rgba(255,255,255,.12);transition:transform .2s ease,border-color .2s ease;}
.footop-moments-grid-item:hover .footop-moments-grid-avatar{transform:translateY(-2px);}
.footop-moments-grid-avatar.unseen{border-color:#b7ff32;box-shadow:0 0 0 2px rgba(183,255,50,.25);}
.footop-moments-grid-avatar.seen{border-color:rgba(255,255,255,.14);}
.footop-moments-grid-avatar.empty{border-style:dashed;color:var(--ink-faint);}
.footop-moments-grid-avatar.add{background:transparent;border:2px dashed rgba(183,255,50,.5);color:#b7ff32;font-size:26px;}
.footop-moments-grid-label{font-size:11px;font-weight:700;color:var(--ink);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.footop-moments-grid-meta{font-size:11px;color:var(--ink-faint);font-family:var(--font-mono);}
.footop-moments-empty{grid-column:1/-1;margin-top:8px;}
.footop-moments-tray{display:flex;gap:14px;overflow-x:auto;padding:14px 16px;-webkit-overflow-scrolling:touch;}
.footop-moment-item{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:62px;cursor:pointer;}
.footop-moment-ring{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:#242a20;}
.footop-moment-ring.unseen{background:linear-gradient(135deg,#b7ff32,#ffe14a,#28d17c);}
.footop-moment-ring.seen{background:rgba(255,255,255,.14);}
.footop-moment-avatar-wrap{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--bg-raised);border:2px solid #0a0d0a;display:flex;align-items:center;justify-content:center;}
.footop-moment-avatar,.footop-moment-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#b7ff32;background:#1a1f16;}
.footop-moment-plus{position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%;background:#b7ff32;color:#0a0d0a;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid #0a0d0a;}
.footop-moment-label{font-size:11px;color:var(--ink-dim);max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.footop-moment-viewer{display:none;position:fixed;inset:0;z-index:960;background:#000;flex-direction:column;}
.footop-moment-viewer.open{display:flex;}
.footop-moment-viewer-bars{display:flex;gap:4px;padding:10px 10px 0;}
.footop-moment-bar{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;}
.footop-moment-bar span{display:block;height:100%;width:0%;background:#fff;}
.footop-moment-viewer-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;}
.footop-moment-viewer-user{display:flex;align-items:center;gap:8px;color:#fff;}
.footop-moment-viewer-user b{font-size:13px;}
.footop-moment-viewer-user span{display:block;font-size:11px;color:rgba(255,255,255,.6);}
.footop-moment-avatar-sm{width:28px;height:28px;border-radius:50%;background:#1a1f16;color:#b7ff32;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;}
.footop-moment-viewer-close{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px;}
.footop-moment-viewer-media{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.footop-moment-viewer-media img,.footop-moment-viewer-media video{max-width:100%;max-height:100%;object-fit:contain;}
.footop-moment-viewer-nav{position:absolute;inset:60px 0 90px;display:flex;}
.footop-moment-viewer-prev{flex:0 0 38%;cursor:pointer;}
.footop-moment-viewer-next{flex:1;cursor:pointer;}
.footop-moment-viewer-foot{padding:12px 16px 20px;display:flex;flex-direction:column;gap:8px;}
.footop-moment-caption{color:#fff;font-size:13px;background:rgba(255,255,255,.1);padding:8px 12px;border-radius:10px;}
.footop-moment-viewers-btn,.footop-moment-del-btn{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:20px;padding:8px 14px;font-size:11px;cursor:pointer;align-self:flex-start;}
.footop-moment-del-btn{background:rgba(255,80,80,.25);}
.footop-moment-composer{display:none;position:fixed;inset:0;z-index:1000100;background:rgba(0,0,0,.7);align-items:center;justify-content:center;padding:20px;}
.footop-moment-composer.open{display:flex;}
.footop-moment-composer-box{background:var(--bg-raised);border-radius:18px;padding:18px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;}
.footop-moment-composer-head{display:flex;align-items:center;justify-content:space-between;color:var(--ink);}
.footop-moment-composer-head button{background:none;border:none;color:var(--ink-dim);font-size:22px;cursor:pointer;}
.footop-moment-composer-drop{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--ink-dim);font-size:12px;cursor:pointer;}
.footop-moment-composer-preview img,.footop-moment-composer-preview video{width:100%;max-height:260px;border-radius:12px;object-fit:contain;background:#000;}
.footop-moment-composer-box input[type="text"]{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:12px;}
.footop-moment-composer-submit{background:var(--accent);color:#0a0d0a;border:none;border-radius:12px;padding:12px;font-weight:600;font-size:12px;cursor:pointer;}
.footop-moment-composer-submit:disabled{opacity:.4;cursor:not-allowed;}
.footop-moment-composer-status{font-size:11px;color:var(--ink-dim);text-align:center;min-height:14px;}
@media all {.footop-moment-item{width:56px;}.footop-moment-ring{width:54px;height:54px;}.footop-moment-avatar-wrap{width:48px;height:48px;}}

/* from index.html <style id="footop-social-learn-v1-css"> */
.footop-learn-head{margin-bottom:14px;}
.footop-learn-sub{margin:8px 0 0;font:700 12px var(--font-body,sans-serif);color:#B9C2A0;}
.footop-learn-search{margin-top:14px;}
.footop-learn-search input{width:100%;box-sizing:border-box;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:13px 14px;font:700 14px var(--font-body,sans-serif);color:#F2F5E8;}
.footop-learn-search input::placeholder{color:#8a9a5a}
.footop-learn-filters{margin:4px 0 12px}
.footop-learn-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.footop-learn-row::-webkit-scrollbar{display:none}
.footop-learn-chip{flex:0 0 auto;min-height:44px;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:20px;padding:0 14px;font:600 13px var(--font-body,sans-serif);color:#B9C2A0;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.footop-learn-chip.active{background:#CCFF00;color:#0a0a0a;border-color:transparent;}
.footop-learn-chip.lv{border-style:dashed}
.footop-learn-chip .n{opacity:.6;font-weight:700;margin-left:4px}
.footop-learn-section-title{font:600 13px var(--font-mono,monospace);letter-spacing:.06em;color:#B9C2A0;margin:6px 0 10px}
.footop-learn-picks{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;margin-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:none}
.footop-learn-picks::-webkit-scrollbar{display:none}
.footop-learn-pick{flex:0 0 min(78%,300px);scroll-snap-align:start;background:linear-gradient(150deg,#2b3d12,#1a2508);color:#fff;border-radius:20px;padding:16px;cursor:pointer;border:0;text-align:left;font-family:inherit}
.footop-learn-pick .k{font:600 11px var(--font-mono,monospace);letter-spacing:.08em;color:#CCFF00;margin-bottom:8px}
.footop-learn-pick .t{font:700 16px/1.35 var(--font-display,sans-serif);margin-bottom:8px}
.footop-learn-pick .b{font:600 12px/1.55 var(--font-body,sans-serif);color:rgba(255,255,255,.75);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.footop-learn-cards{display:flex;flex-direction:column;gap:12px;}
.footop-learn-card{background:linear-gradient(160deg,#1C1C1C,#1C1C1C);border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:16px;scroll-margin-top:12px}
.footop-learn-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.footop-learn-card-kicker{flex:1;min-width:0;font:600 11px var(--font-mono,monospace);color:#7a8a4a;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footop-learn-lv{flex:0 0 auto;font:600 11px var(--font-body,sans-serif);border-radius:99px;padding:3px 8px;background:rgba(204,255,0,0.11);color:#CCFF00}
.footop-learn-save{color:#F2F5E8;flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);background:#1C1C1C;font-size:18px;cursor:pointer;touch-action:manipulation;line-height:1}
.footop-learn-save.on{background:#CCFF00;color:#0a0a0a;border-color:transparent}
.footop-learn-card-title{font:700 17px var(--font-display,sans-serif);color:#F2F5E8;line-height:1.35;margin-bottom:8px;}
.footop-learn-card-body{font:600 13px/1.6 var(--font-body,sans-serif);color:#B9C2A0;margin-bottom:8px;}
.footop-learn-card.collapsed .footop-learn-card-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.footop-learn-more{display:block;width:100%;min-height:44px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,0.14);border-radius:12px;font:600 13px var(--font-body,sans-serif);color:#B9C2A0;cursor:pointer;touch-action:manipulation}
.footop-learn-detail{margin-top:4px}
.footop-learn-points{margin:0 0 10px;padding:0;list-style:none}
.footop-learn-points li{position:relative;padding:8px 10px 8px 30px;margin-bottom:6px;background:rgba(255,255,255,.06);border-radius:10px;font:700 13px/1.5 var(--font-body,sans-serif);color:#F2F5E8}
.footop-learn-points li::before{content:"✓";position:absolute;left:10px;top:8px;color:#CCFF00;font-weight:700}
.footop-learn-card-app{font-size:13px;line-height:1.55;color:#5c6b28;background:rgba(76,122,25,.1);border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.footop-learn-card-app b{color:#F2F5E8;}
.footop-learn-quiz{background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:12px;margin-bottom:10px}
.footop-learn-quiz .q{font:600 13px/1.5 var(--font-body,sans-serif);color:#F2F5E8;margin-bottom:8px}
.footop-learn-quiz .q small{display:block;font:600 11px var(--font-mono,monospace);color:#7a8a4a;letter-spacing:.06em;margin-bottom:4px}
.footop-learn-opt{display:block;width:100%;min-height:44px;text-align:left;margin-bottom:6px;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:10px 12px;font:700 13px var(--font-body,sans-serif);color:#F2F5E8;cursor:pointer;touch-action:manipulation}
.footop-learn-opt.right{background:rgba(204,255,0,.14);border-color:#CCFF00}
.footop-learn-opt.wrong{background:#fde2dc;border-color:#d4553a}
.footop-learn-opt:disabled{cursor:default}
.footop-learn-exp{font:600 12px/1.55 var(--font-body,sans-serif);color:#B9C2A0;margin-top:4px}
.footop-learn-actions{display:flex;gap:8px}
.footop-learn-card-cta{flex:1;min-height:46px;background:#CCFF00;color:#0a0a0a;border:none;border-radius:12px;padding:0 12px;font:600 13px var(--font-body,sans-serif);cursor:pointer;touch-action:manipulation}
.footop-learn-card-cta.ghost{background:rgba(255,255,255,.06);color:#CCFF00;border:1px solid rgba(255,255,255,0.14);flex:0 0 auto}
.footop-learn-card-cta:hover{background:#B4E600;}
.footop-learn-card-cta.ghost:hover{background:#1C1C1C}
.footop-learn-empty{color:#B9C2A0;text-align:center;padding:24px;}
.footop-learn-loadmore{display:block;width:100%;min-height:48px;margin-top:6px;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:14px;font:600 14px var(--font-body,sans-serif);color:#B9C2A0;cursor:pointer}

/* from index.html <style id="footop-todays-football-v2-css"> */
/* 오늘의 축구 v2 (2026-10-03) — "숏폼 대신 하루 5분" daily Football-IQ routine:
   읽기(카드 3장) → 풀기(퀴즈) → 해보기(오늘의 미션 1개). Builds on the v1 library styles above. */
.footop-learn-card-app{color:#d6dec4}
.footop-learn-opt.wrong{background:rgba(255,95,75,.16);border-color:#ff6b57}
.ftf-sub{margin:8px 0 0;font:700 13px/1.55 var(--font-body,sans-serif);color:#dfe6cf}
.ftf-meta{margin:6px 0 0;font:700 11.5px var(--font-body,sans-serif);color:#8f9a80}
.ftf-sec-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12.5px var(--font-mono,monospace);letter-spacing:.06em;color:#cfd8b8;margin:18px 0 10px}
.ftf-sec-title small{font:700 11px var(--font-body,sans-serif);letter-spacing:0;color:#8f9a80}
.ftf-hero{background:linear-gradient(150deg,#1f2d0b,#111807 70%);border:1px solid rgba(204,255,0,.38);border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.ftf-hero.done{border-color:#CCFF00;box-shadow:0 0 0 1px rgba(204,255,0,.25),0 10px 26px rgba(0,0,0,.35)}
.ftf-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ftf-date{font:600 11px var(--font-mono,monospace);letter-spacing:.08em;color:#CCFF00}
.ftf-streak{font:600 12px var(--font-body,sans-serif);color:#ffcf5a;background:rgba(255,190,60,.12);border:1px solid rgba(255,190,60,.35);border-radius:999px;padding:4px 10px;white-space:nowrap}
.ftf-streak.zero{color:#9aa58c;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.ftf-hero-title{font:700 20px/1.3 var(--font-display,sans-serif);color:#fff;margin-bottom:4px}
.ftf-hero-sub{font:600 12.5px/1.55 var(--font-body,sans-serif);color:#c3ccb0;margin-bottom:12px}
.ftf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ftf-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 8px;text-align:center;min-width:0}
.ftf-step .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);color:#cfd8b8;font:600 12px var(--font-mono,monospace);margin-bottom:6px}
.ftf-step .l{display:block;font:600 13px var(--font-body,sans-serif);color:#fff}
.ftf-step .v{display:block;font:700 11.5px var(--font-body,sans-serif);color:#9aa58c;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftf-step.on{border-color:rgba(204,255,0,.55);background:rgba(204,255,0,.08)}
.ftf-step.on .n{background:#CCFF00;color:#0a0a0a}
.ftf-step.on .v{color:#CCFF00}
.ftf-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ftf-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b7ff32,#CCFF00);transition:width .5s cubic-bezier(.22,1,.36,1)}
.ftf-hint{margin-top:12px;font:700 12.5px/1.55 var(--font-body,sans-serif);color:#dfe6cf;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px}
.ftf-mission{margin-top:12px;background:rgba(204,255,0,.08);border:1px solid rgba(204,255,0,.4);border-radius:14px;padding:12px}
.ftf-mission .k{font:600 11px var(--font-mono,monospace);letter-spacing:.08em;color:#CCFF00;margin-bottom:6px}
.ftf-mission .t{font:600 14px/1.55 var(--font-body,sans-serif);color:#fff;margin-bottom:10px}
.ftf-mission-acts{display:flex;gap:8px;flex-wrap:wrap}
.ftf-btn{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eef2e4;font:600 13px var(--font-body,sans-serif);cursor:pointer;touch-action:manipulation}
.ftf-btn.primary{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.ftf-btn.done{background:rgba(204,255,0,.14);border-color:rgba(204,255,0,.5);color:#CCFF00;cursor:default}
.ftf-btn.small{min-height:40px;font-size:12.5px;padding:0 12px}
.ftf-today-cards{display:flex;flex-direction:column;gap:10px}
.ftf-why{flex:0 0 auto;font:600 11px var(--font-body,sans-serif);border-radius:99px;padding:3px 8px;background:rgba(255,190,60,.14);color:#ffcf5a}
.ftf-read{flex:0 0 auto;font:600 11px var(--font-body,sans-serif);border-radius:99px;padding:3px 8px;background:rgba(255,255,255,.08);color:#cfd8b8}
.ftf-mission-pick{display:block;width:100%;min-height:44px;margin:0 0 10px;border-radius:12px;border:1px dashed rgba(204,255,0,.6);background:transparent;color:#CCFF00;font:600 13px var(--font-body,sans-serif);cursor:pointer}
.ftf-mission-pick.on{border-style:solid;background:rgba(204,255,0,.12)}
.ftf-iq{background:#161a14;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px 16px}
.ftf-iq-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.ftf-iq-top .k{font:600 11px var(--font-mono,monospace);letter-spacing:.1em;color:#9aa58c}
.ftf-iq-top .v{font:700 30px/1 var(--font-display,sans-serif);color:#fff}
.ftf-iq-top .v small{font:600 13px var(--font-body,sans-serif);color:#9aa58c;margin-left:4px}
.ftf-iq-lv{font:600 13px var(--font-body,sans-serif);color:#0a0a0a;background:#CCFF00;border-radius:999px;padding:6px 12px;white-space:nowrap}
.ftf-iq-meta{margin-top:8px;font:700 12px/1.6 var(--font-body,sans-serif);color:#b3bca2}
.ftf-weak{display:block;width:100%;text-align:left;margin-top:10px;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,190,60,.4);background:rgba(255,190,60,.08);color:#ffd77a;font:600 12.5px/1.45 var(--font-body,sans-serif);cursor:pointer}
.ftf-iq-toggle{display:block;width:100%;margin-top:10px;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#cfd8b8;font:600 13px var(--font-body,sans-serif);cursor:pointer}
.ftf-cats{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ftf-cat-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#eef2e4;font:600 12.5px var(--font-body,sans-serif);cursor:pointer;text-align:left}
.ftf-cat-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftf-cat-row .n{font:700 11px var(--font-mono,monospace);color:#9aa58c;white-space:nowrap}
.ftf-mini{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ftf-mini span{display:block;height:100%;background:#CCFF00;border-radius:inherit}
.ftf-toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:200100;background:#CCFF00;color:#0a0a0a;border-radius:16px;padding:14px 16px;font:600 14px var(--font-body,sans-serif);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:ftfToastIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes ftfToastIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ftf-toast{animation:none}.ftf-bar span{transition:none}}

/* 오늘의 축구 (2026-10-15): short-form skill-guide format.
   Big plain cards (no gradients, no emoji), one lime accent for progress / the card to open next.
   Viewer slides: 훅 → 흔한 실수 vs 이렇게 → STEP 1~3 → 오늘의 연습 → 퀴즈 → 완료. */
.ftf-head{padding:4px 2px 2px;margin-bottom:18px}
.ftf-h1{font:700 28px/1.15 var(--font-display,sans-serif);color:#f3f5ef;letter-spacing:-.02em;margin-top:6px}
.ftf-head .ftf-sub{margin-top:6px;font:500 14px/1.5 var(--font-body,sans-serif);color:#9ea596}

/* ---- today: a plain section with a swipeable row of big cards ---- */
#ftfRoutine .ftf-hero,#ftfRoutine .ftf-hero.done{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-bottom:8px}
.ftf-hero-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px}
.ftf-hero-title{font:700 20px/1.25 var(--font-display,sans-serif);color:#f3f5ef;letter-spacing:-.02em;margin:0}
.ftf-date{font:500 12.5px var(--font-body,sans-serif);color:#9ea596;letter-spacing:0;white-space:nowrap}
.ftf-hero-sub{margin:-6px 0 12px;font:500 13px/1.5 var(--font-body,sans-serif);color:#9ea596}
.tfk-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px 14px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tfk-row::-webkit-scrollbar{display:none}
.tfk{flex:0 0 min(82%,340px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:300px;padding:18px 18px 16px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:#151715;color:#f3f5ef;font-family:inherit;cursor:pointer;touch-action:manipulation;transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s}
.tfk:active{transform:scale(.98)}
.tfk.next{border-color:rgba(204,255,0,.55)}
.tfk-top{display:flex;align-items:center;gap:8px;min-height:26px}
.tfk-n{font:400 20px/1 var(--font-score,sans-serif);color:#f3f5ef}
.tfk-n i{font:500 12px var(--font-body,sans-serif);font-style:normal;color:#7f8678;margin-left:3px}
.tfk-cat{font:600 13px var(--font-body,sans-serif);color:#9ea596}
.tfk-why{margin-left:auto;font:600 11.5px var(--font-body,sans-serif);color:#d8dfcf;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:4px 9px;white-space:nowrap}
.tfk-hook{margin-top:26px;font:700 25px/1.32 var(--font-display,sans-serif);letter-spacing:-.025em;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tfk-title{margin-top:10px;font:500 13px/1.45 var(--font-body,sans-serif);color:#8d9486;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tfk-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tfk-state{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--font-body,sans-serif);color:#b9c0b1}
.tfk-state svg{width:16px;height:16px;fill:none;stroke:#CCFF00;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tfk.done .tfk-state{color:#CCFF00}
.tfk.done .tfk-hook{color:#a7ad9f}
.tfk-play{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f3f5ef;flex:none}
.tfk-play svg{width:18px;height:18px;fill:#0b0c0b;margin-left:2px}
.tfk.next .tfk-play{background:#CCFF00}
.ftf-prog{margin:2px 0 0}
.ftf-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ftf-bar span{display:block;height:100%;border-radius:inherit;background:#CCFF00;transition:width .5s cubic-bezier(.22,1,.36,1)}
.ftf-track{display:flex;gap:14px;margin:9px 0 0}
.ftf-track span{font:500 12.5px var(--font-body,sans-serif);color:#8d9486;white-space:nowrap}
.ftf-track span.on{color:#f3f5ef;font-weight:600}
.ftf-cta{display:block;width:100%;min-height:54px;margin-top:16px;border:0;border-radius:16px;background:#CCFF00;color:#0a0a0a;font:700 16px var(--font-body,sans-serif);cursor:pointer;box-shadow:none;touch-action:manipulation}
.ftf-cta:active{transform:scale(.98)}
.ftf-mission{margin-top:14px;background:#151715!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px;padding:14px 16px}
.ftf-mission .k{font:600 12.5px var(--font-body,sans-serif);letter-spacing:0;color:#9ea596;margin-bottom:6px}
.ftf-mission .t{font:700 17px/1.4 var(--font-body,sans-serif);color:#f3f5ef;margin-bottom:12px;word-break:keep-all}
.ftf-mission .t em{display:block;font:600 13.5px var(--font-body,sans-serif);font-style:normal;color:#CCFF00;margin-top:3px}

/* ---- IQ: no per-category colours ---- */
.ftf-iq{background:#151715;border:1px solid rgba(255,255,255,.09);border-radius:20px}
.ftf-iq-top .k{font:600 12.5px var(--font-body,sans-serif);letter-spacing:0}
.ftf-mini span{background:#CCFF00}
.ftf-weak{border-color:rgba(255,255,255,.14);background:transparent;color:#f3f5ef}
.ftf-sec-title{font:700 17px var(--font-display,sans-serif);letter-spacing:-.02em;color:#f3f5ef;margin:28px 0 12px}
.ftf-sec-title small{font:500 12.5px var(--font-body,sans-serif)}

/* ---- library: two columns of tall plain cards ---- */
.tfl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tfl{position:relative;border-radius:20px;background:#151715;border:1px solid rgba(255,255,255,.08)}
.tfl-main{display:flex;flex-direction:column;gap:10px;width:100%;min-height:196px;padding:15px 14px 13px;border:0;border-radius:inherit;background:none;color:#f3f5ef;text-align:left;cursor:pointer;font-family:inherit;touch-action:manipulation}
.tfl-cat{font:600 12.5px var(--font-body,sans-serif);color:#9ea596;padding-right:34px}
.tfl-hook{font:700 17px/1.36 var(--font-display,sans-serif);letter-spacing:-.02em;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tfl.read .tfl-hook{color:#a7ad9f}
.tfl-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px;font:500 12px var(--font-body,sans-serif);color:#8d9486}
.tfl-foot>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfl-st{flex:none;font-weight:600;color:#b9c0b1}
.tfl-st.wrong{color:#ff7a66}
.tfl-save{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.tfl-save svg{width:20px;height:20px;fill:none;stroke:#8d9486;stroke-width:1.8;stroke-linejoin:round}
.tfl-save.on svg{fill:#CCFF00;stroke:#CCFF00}
@media (hover:hover){.tfk:hover,.tfl:hover{border-color:rgba(255,255,255,.2)}.tfk.next:hover{border-color:#CCFF00}}

/* ---- full-screen viewer (stays dark in every theme) ---- */
.tfs{position:fixed;inset:0;z-index:1000080;display:flex;flex-direction:column;color:#f3f5ef;background:#0b0c0b;opacity:0;transition:opacity .2s ease;
  padding:calc(10px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;overscroll-behavior:contain;touch-action:pan-y}
.tfs.in{opacity:1}
.tfs-bars{display:flex;gap:4px}
.tfs-bars span{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.tfs-bars span.done{background:#f3f5ef}
.tfs-bars span.now::after{content:"";position:absolute;inset:0;background:#f3f5ef;transform-origin:left;animation:tfsBar .4s ease-out forwards}
@keyframes tfsBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tfs-head{display:flex;align-items:center;gap:10px;margin-top:12px}
.tfs-chip{font:600 13px var(--font-body,sans-serif);color:#b9c0b1}
.tfs-count{font:500 12.5px var(--font-body,sans-serif);color:#7f8678}
.tfs-x{margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer;margin-right:-8px}
.tfs-x svg{width:20px;height:20px;fill:none;stroke:#f3f5ef;stroke-width:2.2;stroke-linecap:round}
.tfs-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.tfs-zone{position:absolute;top:0;bottom:0;border:0;background:transparent;cursor:pointer;z-index:1;-webkit-tap-highlight-color:transparent}
.tfs-zone.prev{left:-20px;width:34%}
.tfs-zone.next{right:-20px;width:66%}
.tfs-slide{position:relative;z-index:2;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;pointer-events:none;animation:tfsIn .26s cubic-bezier(.22,1,.36,1)}
.tfs-slide.back{animation-name:tfsInBack}
.tfs-slide button,.tfs-slide .tfm{pointer-events:auto}
@keyframes tfsIn{from{opacity:.4;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes tfsInBack{from{opacity:.4;transform:translateX(-18px)}to{opacity:1;transform:none}}
.tfs-k{font:600 13.5px var(--font-body,sans-serif);letter-spacing:0;color:#9ea596;margin-bottom:12px}
.tfs-meta{font:500 13px var(--font-body,sans-serif);color:#9ea596;margin-bottom:14px}
/* hook: the one line that makes you keep watching */
.tfs-hook-h{margin:0;font:700 33px/1.24 var(--font-display,sans-serif);letter-spacing:-.03em;word-break:keep-all}
.tfs-hook-h.sm{font-size:24px;margin-bottom:6px}
.tfs-hook-sub{margin:14px 0 0;font:500 15px/1.5 var(--font-body,sans-serif);color:#8d9486;word-break:keep-all}
.tfs-hook .tfm{margin-top:20px}
.tfs-tap{margin-top:30px;font:500 13px var(--font-body,sans-serif);color:#6f766a}
/* mistake vs fix */
.tfs-mistake{display:flex;flex-direction:column;gap:14px}
.tfs-mx{display:flex;gap:14px;align-items:flex-start;padding:18px 16px;border-radius:20px;background:#151715;border:1px solid rgba(255,255,255,.08)}
.tfs-mx-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.tfs-mx-ic svg{width:18px;height:18px;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tfs-mx.no .tfs-mx-ic{background:rgba(255,107,87,.16)}.tfs-mx.no .tfs-mx-ic svg{stroke:#ff7a66}
.tfs-mx.ok{border-color:rgba(204,255,0,.45)}
.tfs-mx.ok .tfs-mx-ic{background:#CCFF00}.tfs-mx.ok .tfs-mx-ic svg{stroke:#0b0c0b}
.tfs-mx small{display:block;font:600 13px var(--font-body,sans-serif);color:#9ea596;margin-bottom:5px}
.tfs-mx p{margin:0;font:700 21px/1.38 var(--font-display,sans-serif);letter-spacing:-.02em;word-break:keep-all}
.tfs-mx.no p{color:#c9ccc4;text-decoration:line-through;text-decoration-color:rgba(255,122,102,.7);text-decoration-thickness:2px}
/* steps */
.tfs-step-n{font:400 46px/1 var(--font-score,sans-serif);color:#CCFF00;letter-spacing:.01em;margin-bottom:22px}
.tfs-step-n span{font:500 15px var(--font-body,sans-serif);color:#7f8678;margin-left:8px;letter-spacing:0}
.tfs-step .tfm{margin-bottom:20px}
.tfs-step-cmd{margin:0;font:700 31px/1.28 var(--font-display,sans-serif);letter-spacing:-.03em;word-break:keep-all}
.tfs-step-why{margin:16px 0 0;font:500 17px/1.55 var(--font-body,sans-serif);color:#a7ad9f;word-break:keep-all}
.tfs-step-dots{display:flex;gap:6px;margin-top:30px}
.tfs-step-dots span{width:22px;height:4px;border-radius:99px;background:rgba(255,255,255,.16)}
.tfs-step-dots span.on{background:#f3f5ef}
/* drill */
.tfs-drill-name{margin:0;font:700 30px/1.28 var(--font-display,sans-serif);letter-spacing:-.03em;word-break:keep-all}
.tfs-drill-reps{margin:12px 0 0;font:700 19px/1.4 var(--font-body,sans-serif);color:#CCFF00;word-break:keep-all}
.tfs-drill-real{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.tfs-drill-real small{display:block;font:600 13px var(--font-body,sans-serif);color:#9ea596;margin-bottom:6px}
.tfs-drill-real p{margin:0;font:500 16px/1.55 var(--font-body,sans-serif);color:#d8dcd2;word-break:keep-all}
.tfs-mission{display:block;width:100%;min-height:54px;margin-top:26px;border-radius:16px;border:1px solid rgba(204,255,0,.6);background:transparent;color:#CCFF00;font:700 15px var(--font-body,sans-serif);cursor:pointer}
.tfs-mission.on{background:#CCFF00;color:#0a0a0a;border-color:#CCFF00}
/* quiz */
.tfs-q{margin:0 0 18px;font:700 23px/1.4 var(--font-display,sans-serif);letter-spacing:-.02em;word-break:keep-all}
.tfs-opts{display:flex;flex-direction:column;gap:9px}
.tfs-opts.shake{animation:tfsShake .4s}
@keyframes tfsShake{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.tfs-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#151715;color:#f3f5ef;font:600 15.5px/1.4 var(--font-body,sans-serif);text-align:left;cursor:pointer}
.tfs-opt:active{transform:scale(.98)}
.tfs-opt b{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);font:600 13px var(--font-body,sans-serif)}
.tfs-opt.right{border-color:#CCFF00}
.tfs-opt.right b{background:#CCFF00;color:#0a0a0a}
.tfs-opt.wrong{border-color:#ff7a66}
.tfs-opt.wrong b{background:#ff7a66;color:#0a0a0a}
.tfs-opt:disabled{cursor:default}
.tfs-exp{margin-top:14px;padding:14px 16px;border-radius:16px;font:500 14.5px/1.6 var(--font-body,sans-serif);background:#151715;color:#d8dcd2}
.tfs-exp b{display:block;font:700 16px var(--font-body,sans-serif);margin-bottom:3px}
.tfs-exp.ok b{color:#CCFF00}
.tfs-exp.no b{color:#ff8a78}
.tfs-hint{margin-top:12px;font:600 13px var(--font-body,sans-serif);color:#f3f5ef;text-align:center}
/* end */
.tfs-gain{display:inline-block;margin:16px 0 4px;font:700 14px var(--font-body,sans-serif);color:#CCFF00}
.tfs-end-acts{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.tfs-btn{min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#f3f5ef;font:600 14.5px var(--font-body,sans-serif);cursor:pointer}
.tfs-btn.primary{background:#f3f5ef;color:#0b0c0b;border-color:#f3f5ef}
.tfs-btn.on{color:#CCFF00;border-color:rgba(204,255,0,.5)}
.tfs-foot{display:flex;gap:8px;padding-top:12px}
.tfs-next{flex:1;min-height:56px;border:0;border-radius:16px;background:#f3f5ef;color:#0a0a0a;font:700 16px var(--font-body,sans-serif);cursor:pointer}
.tfs-next.lime{background:#CCFF00}
.tfs-skip{min-height:56px;padding:0 18px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#c9ccc4;font:600 14px var(--font-body,sans-serif);cursor:pointer}
body.tfs-open #footopBottomNav{visibility:hidden}
.ftf-toast{z-index:1000200}
@media (max-width:360px){.tfs-hook-h{font-size:28px}.tfs-step-cmd,.tfs-drill-name{font-size:26px}.tfs-mx p{font-size:19px}.tfk-hook{font-size:22px}.tfk{min-height:280px}}
@media(prefers-reduced-motion:reduce){.tfs,.tfs-slide,.tfs-bars span.now::after,.tfs-opts.shake,.ftf-bar span{animation:none!important;transition:none!important}.tfs{opacity:1}}

/* from index.html <style id="footop-dm-v1-css"> */
.footop-dm-overlay{position:fixed;inset:0;background:rgba(4,4,4,.92);backdrop-filter:blur(6px);z-index:970;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;}
.footop-dm-overlay.open{display:flex;}
.footop-dm-card{width:100%;max-width:520px;height:min(720px,90vh);background:var(--bg-raised);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;}
.footop-dm-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.footop-dm-head-title{flex:1;font:700 15px var(--font-display);text-transform:uppercase;letter-spacing:-0.02em}
.footop-dm-icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:16px;cursor:pointer;flex:0 0 auto;}
.footop-dm-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch;}
.footop-dm-thread-item{display:block;width:100%;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line-soft);border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer;color:var(--ink);}
.footop-dm-thread-item:hover{border-color:rgba(200,255,0,.3);}
.footop-dm-thread-name{font:700 12px var(--font-display);text-transform:uppercase;letter-spacing:-0.02em}
.footop-dm-thread-preview{font-size:11px;color:var(--ink-dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.footop-dm-msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.6;margin-bottom:8px;word-break:break-word;opacity:0;transform:translateY(8px);animation:footopMsgIn .35s ease forwards;}
@keyframes footopMsgIn{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.footop-dm-msg{animation:none;opacity:1;transform:none;}}
.footop-dm-msg.theirs{background:rgba(255,255,255,.05);color:var(--ink);border-bottom-left-radius:4px;}
.footop-dm-msg.mine{background:var(--accent);color:#0a0d0a;margin-left:auto;border-bottom-right-radius:4px;font-weight:600;}
.footop-dm-msg-training{border:1px solid rgba(200,255,0,.3);background:rgba(200,255,0,.06);color:var(--ink);}
.footop-dm-msg-media{max-width:62%;padding:0;background:transparent!important;}
.footop-dm-msg-image{display:block;width:100%;max-width:220px;border-radius:14px;cursor:pointer;}
.footop-dm-moment-badge{font:600 11px var(--font-mono);color:#b7ff32;letter-spacing:.04em;margin-bottom:4px;}
.footop-dm-moment-caption{font-size:12px;color:var(--ink-dim);margin-top:4px;background:rgba(255,255,255,.04);border-radius:8px;padding:6px 8px;}
.footop-dm-reactions{display:flex;gap:5px;flex-wrap:wrap;margin:-4px 0 8px;}
.footop-dm-reaction-pill{border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--ink-dim);border-radius:20px;padding:3px 8px;font-size:11px;cursor:pointer;}
.footop-dm-reaction-pill.mine{border-color:rgba(200,255,0,.5);background:rgba(200,255,0,.1);color:var(--ink);}
.footop-dm-reaction-picker{display:flex;gap:4px;background:var(--bg-raised);border:1px solid var(--line);border-radius:20px;padding:6px 8px;margin-bottom:8px;width:fit-content;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:footopMsgIn .2s ease forwards;}
.footop-dm-reaction-opt{border:0;background:transparent;font-size:18px;cursor:pointer;padding:2px 4px;border-radius:8px;transition:transform .15s ease,background .15s ease;}
.footop-dm-reaction-opt:hover{transform:scale(1.25);background:rgba(255,255,255,.08);}
.footop-dm-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px;}
.footop-dm-share-panel{display:none;flex-direction:column;gap:6px;margin-bottom:8px;max-height:160px;overflow-y:auto;}
.footop-dm-share-panel.open{display:flex;}
.footop-dm-share-item{background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px;color:var(--ink);font-size:11px;text-align:left;cursor:pointer;}
.footop-dm-input-row{display:flex;gap:8px;align-items:center;}
.footop-dm-input-row input[type=text]{flex:1;background:#0d0d0d;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);font-size:13px;}
.footop-dm-send{border:0;background:var(--accent);color:#0a0d0a;border-radius:12px;padding:10px 14px;font:600 11px var(--font-mono);cursor:pointer;}
.footop-dm-share-toggle{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim);border-radius:12px;padding:9px 10px;font:600 11px var(--font-mono);cursor:pointer;white-space:nowrap;}
.footop-dm-img-btn{flex:0 0 auto;font-size:16px;}
.footop-dm-head-title-link{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .2s ease;}
.footop-dm-head-title-link:hover{text-decoration-color:currentColor;}
.footop-dm-section-label{font:600 11px var(--font-mono);letter-spacing:1px;color:var(--ink-faint);text-transform:uppercase;padding:10px 4px 4px;}
.footop-dm-group-sender{font:600 11px var(--font-mono);color:var(--accent);margin-bottom:3px;}
.footop-dm-group-name-input{width:100%;box-sizing:border-box;background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font-size:14px;}
.footop-dm-group-actions{display:inline-flex;gap:6px;}
.footop-dm-group-add-row{display:flex;gap:8px;}
.footop-dm-group-add-row input{flex:1;background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink);font-size:12px;}
/* PM embedded inside Social (#footopPMScreen, 2026-09-16) — this panel is light-lime themed
   (#panelCommunity doesn't redefine --ink/--line/--bg-raised the way Match/Teams do, same reason
   Social Feed's own post cards hardcode their colors instead of relying on those dark-tuned
   tokens), so the DM card's default dark surface gets a scoped light retone here rather than
   sitting as a dark box on the bright page — the exact "검은 화면" complaint this app has hit
   and fixed for Social Feed/Stock Market before. The floating-overlay entry points (Profile/
   Athlete Page/Moments-share) are untouched — they still render on the fixed dark backdrop.*/
#footopPMScreen{padding:0;}
#footopPMScreen .footop-dm-card{width:100%;max-width:none;height:calc(100vh - 190px);min-height:420px;background:#1C1C1C;border:1px solid rgba(255,255,255,0.14);border-radius:18px;box-shadow:0 4px 18px rgba(0,0,0,.3);}
#footopPMScreen .footop-dm-head{border-bottom-color:rgba(255,255,255,0.12);}
#footopPMScreen .footop-dm-head-title{color:#F2F5E8;}
#footopPMScreen .footop-dm-icon-btn{background:rgba(204,255,0,0.06);border-color:rgba(255,255,255,0.14);color:#F2F5E8;}
#footopPMScreen .footop-dm-section-label{color:#8a9a5a;}
#footopPMScreen .footop-dm-thread-item{background:#1C1C1C;border-color:rgba(255,255,255,0.1);}
#footopPMScreen .footop-dm-thread-item:hover{border-color:rgba(76,122,25,.4);}
#footopPMScreen .footop-dm-thread-name{color:#F2F5E8;}
#footopPMScreen .footop-dm-thread-preview{color:#8C8C8C;}
#footopPMScreen .footop-dm-msg.theirs{background:#1C1C1C;color:#F2F5E8;}
#footopPMScreen .footop-dm-group-sender{color:#CCFF00;}
#footopPMScreen .footop-dm-moment-caption{background:rgba(204,255,0,0.06);color:#B9C2A0;}
#footopPMScreen .footop-dm-reaction-pill{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#B9C2A0;}
#footopPMScreen .footop-dm-reaction-picker{background:#1C1C1C;border-color:rgba(255,255,255,0.14);}
#footopPMScreen .footop-dm-foot{border-top-color:rgba(255,255,255,0.12);}
#footopPMScreen .footop-dm-input-row input[type=text]{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8;}
#footopPMScreen .footop-dm-share-item,
#footopPMScreen .footop-dm-share-toggle{background:#1C1C1C;border-color:rgba(255,255,255,0.12);color:#B9C2A0;}
#footopPMScreen .footop-empty-state{color:#8C8C8C;}
#footopPMScreen .footop-team-member-row{color:#F2F5E8;}
#footopPMScreen .footop-team-member-name{color:#F2F5E8;}
#footopPMScreen .footop-post-time{color:#8C8C8C;}
#footopPMScreen .footop-dm-group-name-input,
#footopPMScreen .footop-dm-group-add-row input{background:#1C1C1C;border-color:rgba(255,255,255,0.14);color:#F2F5E8;}

/* from index.html <style id="footop-match-deep-green-v1-css"> */
/* ============================================================
   Match tab — deep-green "Squady-style" reskin (2026-09-08)
   User asked for a deep/rich green concept with clearly-readable text, referencing the
   Squady team-management app's black+emerald look. Scoped to #panelTeams via CSS custom-
   property redefinition — nearly every existing component in this panel already reads
   var(--accent), so redefining it once cascades to all of them automatically without
   hunting down every class.
   Match Center itself (the separate panelMatch venue-booking/matching module this rule
   used to also scope) was removed 2026-09-15 — the Match bottom-tab now goes straight to
   Teams, so this whole theme lives on #panelTeams alone.
   The handful of rules that pair var(--accent) as a *background* with hardcoded near-black
   text (#0a0d0a — tuned for the app's very bright neon-lime default) get an explicit
   white-text override below, since a deeper green does not contrast well with near-black
   text — directly addresses the "텍스트가 잘 보이게" ask. --ink-dim/--ink-faint are also
   brightened (with a slight green tint) within this scope for the same reason: the app-wide
   defaults were tuned for a very light background overlay, and read as low-contrast on a
   near-black backdrop with no accent glow behind them (e.g. venue/team meta lines). */


/* ---------- Team form (W/D/L) pills + rating chip, in Team Detail's header (references
   Squady's 팀 tab 전적/매칭 평점 cards) ---------- */
.footop-team-form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 16px;}
.footop-team-form-pills{display:flex;gap:4px;}
.footop-form-pill{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 11px var(--font-mono);color:#fff;flex-shrink:0;}
.footop-form-pill.w{background:#1bae64;}
.footop-form-pill.l{background:#e5484d;}
.footop-form-pill.d{background:#71807a;}


/* from index.html <style id="footop-teams-v1-css"> */
.footop-teams-tabs{display:flex;gap:8px;margin-bottom:16px;}
.footop-teams-tab{flex:1;padding:10px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:10px;font:600 11px var(--font-mono);cursor:pointer;}
.footop-teams-tab.active{background:var(--accent);color:#0a0d0a;border-color:var(--accent);}
.footop-team-card{border:1px solid var(--line);border-radius:16px;background:var(--bg-raised);padding:14px;margin-bottom:10px;cursor:pointer;}
.footop-team-card:hover{border-color:rgba(200,255,0,.3);}
.footop-team-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.footop-team-name{font:700 15px var(--font-display);text-transform:uppercase;letter-spacing:-0.02em}
.footop-team-desc{font-size:11px;color:var(--ink-dim);margin-top:5px;}
.footop-team-meta{font:700 11px var(--font-mono);color:var(--ink-faint);margin-top:6px;}
.footop-role-badge{display:inline-block;font:600 11px var(--font-mono);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink-dim);margin-left:6px;}
.footop-role-badge.owner{background:var(--accent);color:#0a0d0a;}
.footop-role-badge.admin{background:rgba(255,213,74,.25);color:#ffd54a;}
.footop-role-badge.captain{background:rgba(77,225,255,.22);color:#4de1ff;}
.footop-role-badge.manager{background:rgba(214,179,255,.22);color:#d6b3ff;}
.footop-team-join-btn{border:1px solid rgba(200,255,0,.4);background:rgba(200,255,0,.08);color:var(--accent);border-radius:10px;padding:7px 12px;font:600 11px var(--font-mono);cursor:pointer;}
.footop-team-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:16px;}
.footop-team-member-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line-soft);}
.footop-team-member-name{font:600 12px var(--font-mono);}
.footop-team-member-actions{display:flex;align-items:center;gap:6px;}
.footop-team-member-actions select{background:#0d0d0d;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:11px;padding:4px 6px;}
.footop-create-team-form{display:flex;flex-direction:column;gap:10px;}
.footop-create-team-form input,.footop-create-team-form textarea{background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--ink);font-size:13px;width:100%;box-sizing:border-box;font-family:var(--font-body);}
.footop-team-tabbar{display:flex;gap:2px;margin-bottom:14px;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;}
.footop-team-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;margin-bottom:-1px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--ink-faint);border-radius:0;cursor:pointer;font:600 11px var(--font-mono);letter-spacing:.2px;transition:color .15s,border-color .15s;}
.footop-team-tab-btn .icon{font-size:16px;line-height:1;}
.footop-team-tab-btn.active{color:var(--accent);background:transparent;border-bottom-color:var(--accent);}
.footop-team-chat-card{padding:10px;}
.footop-team-chat-body{height:min(58vh,480px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 6px;margin-top:0;}
.footop-xp-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin:8px 0;}
.footop-xp-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#28d17c,var(--accent));}
.footop-xp-level-row{display:flex;align-items:center;gap:12px;}
.footop-xp-level-badge{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#28d17c);color:#0a0d0a;font:600 13px var(--font-score);}
.footop-mindset-card{border:1px solid rgba(200,255,0,.3);background:rgba(200,255,0,.05);border-radius:14px;padding:12px;margin-bottom:12px;}
.footop-mindset-card ul{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--ink-dim);line-height:1.7;}
.footop-dues-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);}
.footop-dues-form input,.footop-dues-form select,.footop-dues-form textarea{background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--ink);font-size:13px;width:100%;box-sizing:border-box;font-family:var(--font-body);}
.footop-announcement-row,.footop-event-row,.footop-dues-row{padding:12px 0;border-bottom:1px solid var(--line-soft);}
.footop-announcement-row:last-child,.footop-event-row:last-child,.footop-dues-row:last-child{border-bottom:none;}
.footop-announcement-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.footop-announcement-body{font-size:12px;color:var(--ink-dim);margin-top:6px;line-height:1.6;white-space:pre-wrap;}
.footop-attendance-summary{font:700 11px var(--font-mono);color:var(--ink-dim);margin:6px 0;}
.footop-attendance-buttons{display:flex;gap:6px;}
/* Real attendance comparison bar (2026-09-23 master design spec's Match-tab "possession"-style
   stacked comparison bar), built from the exact same real going/maybe/notGoing counts the plain
   text summary already showed — not a new query, just a real second visualization of it. */
.footop-compare-bar{display:flex;width:100%;height:6px;border-radius:99px;overflow:hidden;background:var(--line-soft);margin-top:8px;}
.footop-compare-bar span{display:block;height:100%;}
.footop-dues-members{display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.footop-dues-member-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;font:700 11px var(--font-mono);color:var(--ink-dim);}
.footop-standings-table{width:100%;border-collapse:collapse;font:700 11px var(--font-mono);white-space:nowrap;}
.footop-standings-table th{color:var(--ink-faint);text-align:center;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.5px;}
.footop-standings-table th:first-child,.footop-standings-table td:first-child{text-align:left;}
.footop-standings-table td{text-align:center;padding:7px 8px;border-bottom:1px solid var(--line-soft);color:var(--ink-dim);}
.footop-standings-table td b{color:var(--accent);}
.footop-pitch{position:relative;width:100%;aspect-ratio:2/3;background:linear-gradient(180deg,#1b4d2e,#194a2b);border:2px solid rgba(255,255,255,.25);border-radius:8px;overflow:hidden;touch-action:none;}
.footop-pitch-line.footop-pitch-center{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.25);}
.footop-pitch-circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border:1px solid rgba(255,255,255,.25);border-radius:50%;transform:translate(-50%,-50%);}
.footop-pitch-token{position:absolute;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0a0d0a;display:flex;align-items:center;justify-content:center;font:600 11px var(--font-mono);transform:translate(-50%,-50%);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.4);user-select:none;touch-action:none;}
.footop-pitch-token.dragging{cursor:grabbing;box-shadow:0 0 0 3px rgba(255,255,255,.6);z-index:5;}
/* Match Day — real self-attested live scoreboard for a team_events(kind='match') row. */
.footop-matchday-open{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:12px;color:var(--ink);cursor:pointer;text-align:left;}
.footop-matchday-open:hover{border-color:var(--accent);}
.footop-matchday-status{font:600 11px var(--font-mono);padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--ink-dim);white-space:nowrap;}
.footop-matchday-status.live{background:rgba(255,80,80,.18);color:#ff6b6b;}
.footop-matchday-status.finished{background:rgba(255,255,255,.1);color:var(--ink-dim);}
.footop-matchday-mini-score{font:600 14px var(--font-mono);color:var(--accent);}
.footop-matchday-open-cta{margin-left:auto;font:700 11px var(--font-mono);color:var(--ink-faint);white-space:nowrap;}
.footop-matchday-overlay{display:none;position:fixed;inset:0;z-index:500;background:#0a0a0a;overflow-y:auto;padding:16px 16px calc(90px + env(safe-area-inset-bottom));box-sizing:border-box;}
.footop-matchday-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footop-matchday-board{background:linear-gradient(165deg,rgba(255,255,255,.05),transparent);border:1px solid var(--line-soft);border-radius:16px;padding:18px;text-align:center;}
.footop-matchday-status-pill{display:inline-block;font:600 11px var(--font-mono);padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--ink-dim);margin-bottom:8px;}
.footop-matchday-status-pill.live{background:rgba(255,80,80,.18);color:#ff6b6b;}
.footop-matchday-status-pill.finished{background:rgba(255,255,255,.1);color:var(--ink-dim);}
.footop-matchday-title{font:700 15px var(--font-display);color:var(--ink);letter-spacing:-0.02em}
.footop-matchday-score-row{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0;}
.footop-matchday-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 11px var(--font-mono);color:var(--ink-dim);max-width:110px;}
.footop-matchday-badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#28d17c);color:#0a0d0a;display:flex;align-items:center;justify-content:center;font:700 18px var(--font-display);letter-spacing:-0.02em}
.footop-matchday-badge.away{background:linear-gradient(135deg,#555,#2a2a2a);color:#fff;}
.footop-matchday-score{font:700 40px var(--font-score);color:var(--ink);letter-spacing:1px;}
.footop-matchday-controls{display:flex;gap:12px;justify-content:center;margin-top:12px;}
.footop-matchday-stepper{display:flex;align-items:center;gap:8px;font:700 11px var(--font-mono);color:var(--ink-dim);}
.footop-matchday-stepper button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#0d0d0d;color:var(--ink);font:700 15px var(--font-mono);cursor:pointer;}
.footop-matchday-status-btns{margin-top:12px;display:flex;justify-content:center;}
.footop-matchday-goal{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-dim);}
.footop-matchday-goal:last-child{border-bottom:none;}
.footop-matchday-goal-min{font:600 11px var(--font-mono);color:var(--accent);min-width:28px;}
.footop-matchday-goal-who{color:var(--ink);}
/* Team crest, 소개(intro) + 인스타(gallery) — team management/identity tabs (2026-10-01). */
.footop-team-crest{border-radius:16px;display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-weight:700;font-family:var(--font-score);flex:0 0 auto;}
.footop-team-detail-head{display:flex;align-items:center;gap:12px;}
.footop-team-motto-inline{font-size:12px;font-style:italic;color:var(--ink-dim);margin-top:2px;}
.footop-team-intro-card{text-align:center;padding:24px 18px;}
.footop-team-intro-card .footop-team-crest{margin:0 auto;}
.footop-team-intro-motto{font-size:13px;font-style:italic;color:var(--accent);margin-top:8px;}
.footop-team-intro-meta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font:700 11px var(--font-mono);color:var(--ink-dim);margin:10px 0;}
.footop-team-crest-picker{display:flex;gap:8px;flex-wrap:wrap;}
.footop-crest-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.footop-crest-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
.footop-team-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.footop-team-gallery-item{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg);cursor:pointer;}
.footop-team-gallery-item img,.footop-team-gallery-item video{width:100%;height:100%;object-fit:cover;}
.footop-gallery-lightbox{display:none;position:fixed;inset:0;z-index:510;background:#000;flex-direction:column;padding:16px;box-sizing:border-box;gap:10px;}
.footop-gallery-lb-media{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.footop-gallery-lb-media img,.footop-gallery-lb-media video{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}
.footop-gallery-lb-meta{color:#fff;font-size:13px;}
.footop-gallery-lb-meta b{color:var(--accent);}
.footop-gallery-lb-meta p{margin:6px 0;color:#ddd;}

/* from index.html <style id="footop-frame-accent-v1"> */
/* 2026-10-02: cards read as flat dark slabs on a phone. Every card/grid "frame" now gets a slightly
   brighter lime-tinted 1px border + a faint top-lit sheen, and lifts its border on press/hover.
   Border/background-image only (never background-color), so each card keeps its own fill; FOOTOP X
   purple cards and cards that use an inline red/yellow warning border are excluded. */
:root{--frame-line:rgba(204,255,0,.26);--frame-line-strong:rgba(204,255,0,.55);--frame-sheen:linear-gradient(180deg,rgba(204,255,0,.075),rgba(204,255,0,0) 46%);}
.news-card,.league-card,.mode-card,.team-card,.player-card,.trk-news-card,.trk-player-card,
.tracking-cred-card,.mn-featured-card,.fs-card,.match-card,.training-card,
.training-player-card,.training-v6-card,.training-v8-profile-card,
.training-v8-routine-card,.training-v8-fun-card,.v10-card,.ft32-card,.ft32-ai-routine-card,
.ft32-more-card,.ft32-hero-card,.dna-intro-card,.dna-hero-card,.dna-position-card,.dna-dev-card,
.dna-detail-card,.dna-public-card,.dna-dex-card,.main-menu-card,
.footop-main-card,.training-v7-home-card,.v27-home-card,.v30-card,
.v30-result-card,.footop-card:not(.footop-x-card):not([style*="border-color"]),.footop-athlete-card,.footop-post-card,
.footop-learn-card,.footop-home-todo-card,.footop-team-card,.footop-mindset-card,
.routine-screen-card,.tracking-news-card,.trk-news-square,.footop-main-hero,.footop-compare-card,.feed-post{
  border:1px solid var(--frame-line)!important;
  background-image:var(--frame-sheen)!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.news-card:active,.team-card:active,.player-card:active,.trk-news-square:active,.footop-main-card:active,
.footop-learn-card:active,.footop-team-card:active,.footop-post-card:active,.ft32-more-card:active{border-color:var(--frame-line-strong)!important;}
@media(hover:hover) and (pointer:fine){
  .news-card:hover,.team-card:hover,.player-card:hover,.trk-news-square:hover,.footop-main-card:hover,
  .footop-learn-card:hover,.footop-team-card:hover,.footop-post-card:hover,.ft32-more-card:hover{border-color:var(--frame-line-strong)!important;}
}
/* grids/lists that hold cards get the same bright frame so the layout reads as a grid, not floating slabs */
.feed-grid-viewport{height:auto!important;max-height:none!important;overflow:visible!important;}
.footop-team-tabbar,.footop-teams-tabs,.footop-social-toptabs,.footop-main-toptabs{border-color:var(--frame-line)!important;}
.footop-settings-row,.footop-blocked-row,.footop-team-member-row{border-bottom-color:rgba(204,255,0,.14)!important;}

/* from index.html <style id="footop-phone-frame-v1"> */
/* One design everywhere (2026-10-02): PC used to get a permanent 264px gray sidebar, 2-column grids,
   different chip/subnav sizes and a wide floating bottom nav, while a phone got the compact layout —
   the two looked like different apps. Now (a) every width-based @media rule in this file was rewritten
   to behave like the phone layout at ALL widths (max-width -> `all`, min-width -> `not all`), and (b) on
   wide screens the whole app is shown as one centered 420px "phone" column. The column is `body` with a
   transform, which makes every position:fixed descendant (bottom nav, composer, drawers, toasts) lay out
   relative to that column instead of the full window, so nothing needs a per-widget width hack. */
html{background:#040504}
@media(min-width:481px){
  body{width:420px;margin:0 auto;position:relative;transform:translateZ(0);box-shadow:0 0 0 1px rgba(204,255,0,.14),0 0 120px rgba(204,255,0,.07);}
}
#footopBottomNav.footop-bottom-nav{left:0!important;right:0!important;width:100%!important;max-width:100%!important;transform:none!important;}

/* from index.html <style id="footop-compact-chrome-v1"> */
/* Compact chrome (2026-10-02): the three fixed bars (brand bar, detail-tab strip, main-tab bar) used to eat ~27% of a phone
   screen. Slimmer versions give the content that room back, which is the real fix for "too much scrolling". */
:root{--subnav-h:54px}
.topbar{padding:8px 14px!important}
#dynamicSidebarNav.nav-tabs{padding:6px 12px!important;gap:8px!important}
#dynamicSidebarNav .nav-tab{height:40px!important;min-height:40px!important;padding:0 14px 0 6px!important;gap:7px!important;font-size:13.5px!important}
#dynamicSidebarNav .nav-tab .tic{width:28px!important;height:28px!important}
#dynamicSidebarNav .nav-tab .tic svg{width:17px!important;height:17px!important}
#footopBottomNav.footop-bottom-nav{padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important;gap:4px!important}
.footop-bottom-btn{min-height:54px!important;padding:4px 2px 3px!important}
.footop-bottom-icon{width:28px!important;height:28px!important}
.footop-bottom-icon svg{width:19px!important;height:19px!important}
.footop-bottom-title{font-size:11px!important}
.feed-more-btn{grid-column:1/-1;height:44px;border-radius:14px;border:1px solid rgba(204,255,0,.45);background:rgba(204,255,0,.1);color:#CCFF00;font:600 13px var(--font-body,sans-serif);cursor:pointer}
.feed-more-btn:active{transform:scale(.98)}

/* from index.html <style id="footop-topi-brain-v1-css"> */
/* Coach Topi "brain" (2026-10-02): skill deck (tool mastery), explanation-level control (adapts to the
   learner), imagination studio (creative mode). Dark card language, lime = action, cyan = imagination. */
.topic-chip.topi-ctl{border-color:rgba(204,255,0,.55)!important;background:rgba(204,255,0,.12)!important;color:#CCFF00!important;font-weight:700;white-space:nowrap;flex:0 0 auto}
.topic-chip.topi-ctl.is-imagine{border-color:rgba(94,225,255,.7)!important;background:rgba(94,225,255,.14)!important;color:#5EE1FF!important}
.topic-chip.topi-ctl.is-deck{background:#CCFF00!important;color:#0a0a0a!important;border-color:#CCFF00!important}
.topi-actions{max-width:760px;margin:2px auto 14px;padding:0 20px;display:flex;flex-direction:column;gap:8px}
.topi-act-row{display:flex;flex-wrap:wrap;gap:7px}
.topi-act-btn{border:1px solid rgba(204,255,0,.5);background:rgba(204,255,0,.12);color:#CCFF00;font:600 12.5px var(--font-body,sans-serif);padding:9px 13px;border-radius:999px;cursor:pointer;min-height:38px}
.topi-act-btn:active{transform:scale(.97)}
.topi-fu-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#e6ebe3;font:700 12px var(--font-body,sans-serif);padding:8px 12px;border-radius:999px;cursor:pointer;min-height:36px}
.topi-actions.imagine .topi-fu-btn{border-color:rgba(94,225,255,.4);color:#bff0ff}
.topi-imagine-badge{display:inline-block;margin-top:8px;font:600 11px var(--font-mono,monospace);color:#5EE1FF;border:1px solid rgba(94,225,255,.4);padding:3px 8px;border-radius:999px;letter-spacing:.3px}
.tbd-overlay{position:fixed;inset:0;z-index:1000001;background:#060806!important;display:none;flex-direction:column;overflow:hidden}
.tbd-overlay.open{display:flex}
.tbd-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.tbd-title{flex:1;font:700 16px var(--font-display,sans-serif);letter-spacing:.5px}
.tbd-title small{display:block;font:600 11px var(--font-body,sans-serif);color:#9aa59d;letter-spacing:0;margin-top:2px}
.tbd-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:20px;cursor:pointer}
.tbd-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 40px;-webkit-overflow-scrolling:touch}
.tbd-sec{font:600 11px var(--font-mono,monospace);letter-spacing:1.4px;color:#CCFF00;margin:18px 0 9px}
.tbd-sec.im{color:#5EE1FF}
.tbd-sec span{display:block;font:600 11.5px var(--font-body,sans-serif);color:#8f9b93;letter-spacing:0;margin-top:3px}
.tbd-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tbd-lv{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#dfe5dc;border-radius:14px;padding:10px 4px;cursor:pointer;font:600 12.5px var(--font-body,sans-serif);display:flex;flex-direction:column;align-items:center;gap:3px;min-height:60px}
.tbd-lv .ic{font-size:18px}
.tbd-lv.on{background:#CCFF00;color:#0a0a0a;border-color:#CCFF00}
.tbd-lvdesc{margin-top:8px;font:600 12px var(--font-body,sans-serif);color:#9aa59d}
.tbd-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tbd-card{text-align:left;border:1px solid rgba(204,255,0,.28);background:linear-gradient(160deg,rgba(204,255,0,.09),rgba(255,255,255,.03));color:#f1f4ee;border-radius:16px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-height:112px}
.tbd-card.im{border-color:rgba(94,225,255,.36);background:linear-gradient(160deg,rgba(94,225,255,.11),rgba(255,255,255,.03))}
.tbd-card:active{transform:scale(.98)}
.tbd-card .ic{font-size:22px}
.tbd-card b{font:600 13.5px var(--font-body,sans-serif)}
.tbd-card p{margin:0;font:600 11.5px/1.45 var(--font-body,sans-serif);color:#a9b3ac}
.tbd-card i{margin-top:auto;font:600 11px var(--font-mono,monospace);font-style:normal;color:#CCFF00;letter-spacing:.4px}
.tbd-card.im i{color:#5EE1FF}
.tbd-note{margin-top:16px;font:600 11.5px/1.55 var(--font-body,sans-serif);color:#8f9b93;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.topi-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:1000002;background:#161a16;border:1px solid rgba(204,255,0,.5);color:#eef3e8;font:700 12.5px var(--font-body,sans-serif);padding:10px 15px;border-radius:14px;max-width:86%;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.topi-toast.show{opacity:1}

/* from index.html <style id="footop-topi-history-v1-css"> */
/* Coach Topi chat history tools (2026-10-02): undo/redo a turn, regenerate, stop, copy, bookmark answers,
   and a real chat list sheet (search / pin / rename / export / delete). */
.topic-chip.topi-ctl.soft{border-color:rgba(255,255,255,.28)!important;background:rgba(255,255,255,.07)!important;color:#e9eee6!important}
.topic-chip.topi-ctl.off{opacity:.45}
.topi-util-row{display:flex;gap:7px;flex-wrap:wrap}
.topi-util-btn{height:36px;min-width:36px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#e6ebe3;font:700 12px var(--font-body,sans-serif);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.topi-util-btn.on{border-color:rgba(204,255,0,.7);color:#CCFF00;background:rgba(204,255,0,.12)}
.topi-util-btn:active{transform:scale(.96)}
.topi-stop{margin-left:14px;border:1px solid rgba(255,120,120,.55);background:rgba(255,90,90,.12);color:#ff9d9d;border-radius:999px;font:600 12px var(--font-body,sans-serif);padding:7px 12px;cursor:pointer}
.topi-chatbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:6px;max-width:760px;margin:0 auto;padding:6px 12px 4px;box-sizing:border-box;background:rgba(10,12,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.tcb-btn{width:40px;height:40px;flex:0 0 40px;border-radius:12px;border:1px solid transparent;background:transparent;color:#dfe5dc;display:grid;place-items:center;cursor:pointer}
.tcb-btn:hover,.tcb-btn:focus-visible{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.tcb-btn[aria-expanded="true"]{color:#CCFF00;background:rgba(204,255,0,.1);border-color:rgba(204,255,0,.4)}
.tcb-title{flex:1;min-width:0;text-align:center;font:600 14px var(--font-body,sans-serif);color:#eef2ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsd-scrim{position:fixed;left:0;right:0;bottom:0;top:0;z-index:1000000;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s ease}
.tsd-scrim.open{opacity:1;pointer-events:auto}
.tsd{position:fixed;left:0;bottom:0;top:0;width:min(300px,84%);z-index:1000001;background:#0b0e0b;border-right:1px solid rgba(204,255,0,.22);box-shadow:12px 0 40px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .26s cubic-bezier(.22,1,.36,1),visibility 0s linear .26s;visibility:hidden}
.tsd.open{transform:translateX(0);visibility:visible;transition:transform .26s cubic-bezier(.22,1,.36,1),visibility 0s}
.tsd-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 4px 16px;flex:0 0 auto}
.tsd-head b{font:700 15px var(--font-display,sans-serif);letter-spacing:.4px;color:#fff}
.tsd-new{display:flex;align-items:center;gap:9px;margin:6px 12px 8px;height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(204,255,0,.55);background:rgba(204,255,0,.12);color:#CCFF00;font:600 14px var(--font-body,sans-serif);cursor:pointer;flex:0 0 auto}
.tsd-new:active{transform:scale(.98)}
.tsd-search{margin:0 12px 8px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;padding:0 12px;font:600 13.5px var(--font-body,sans-serif);outline:none;flex:0 0 auto}
.tsd-search:focus{border-color:rgba(204,255,0,.6)}
.tsd-tabs{display:flex;gap:6px;margin:0 12px 6px;flex:0 0 auto}
.tsd-tab{flex:1;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#bfc8c1;font:600 12.5px var(--font-body,sans-serif);cursor:pointer}
.tsd-tab.on{background:#CCFF00;color:#0a0a0a;border-color:#CCFF00}
.tsd-body{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 16px;-webkit-overflow-scrolling:touch}
.tsd-group{font:600 11px var(--font-mono,monospace);letter-spacing:1px;color:#7f8b83;padding:12px 8px 5px}
.tsd-item{position:relative;display:flex;align-items:center;border-radius:10px;margin-bottom:2px}
.tsd-item:hover,.tsd-item.menu-open{background:rgba(255,255,255,.05)}
.tsd-item.active{background:rgba(204,255,0,.1)}
.tsd-open{flex:1;min-width:0;min-height:42px;text-align:left;background:none;border:0;color:#e9eee6;font:650 13.5px var(--font-body,sans-serif);padding:0 6px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tsd-item.active .tsd-open{color:#CCFF00;font-weight:700}
.tsd-pin{margin-right:4px}
.tsd-more{flex:0 0 34px;width:34px;height:34px;margin-right:4px;border-radius:8px;border:0;background:transparent;color:#9aa59d;font:700 16px var(--font-body,sans-serif);cursor:pointer;opacity:.55}
.tsd-item:hover .tsd-more,.tsd-item.active .tsd-more,.tsd-item.menu-open .tsd-more{opacity:1}
.tsd-more:hover{background:rgba(255,255,255,.08);color:#fff}
@media(hover:none){.tsd-more{opacity:1}}
.tsd-menu{position:absolute;right:6px;top:40px;z-index:3;min-width:150px;background:#161a16;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.tsd-menu button{display:block;width:100%;text-align:left;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#e6ebe3;font:700 13px var(--font-body,sans-serif);cursor:pointer}
.tsd-menu button:hover{background:rgba(255,255,255,.07)}
.tsd-menu button.danger{color:#ff9d9d}
.tsd-rename{flex:1;min-width:0;height:36px;margin:3px 6px 3px 6px;border-radius:8px;border:1px solid rgba(204,255,0,.7);background:#0f130f;color:#fff;padding:0 8px;font:700 13.5px var(--font-body,sans-serif);outline:none}
.tsd-empty{padding:28px 10px;text-align:center;color:#8f9b93;font:600 12.5px/1.6 var(--font-body,sans-serif)}
.tsd-ans{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:12px;padding:10px;margin:6px 4px}
.tsd-ans-q{font:600 11px var(--font-body,sans-serif);color:#CCFF00;margin-bottom:5px}
.tsd-ans-t{margin:0;font:600 12.5px/1.55 var(--font-body,sans-serif);color:#e0e6dd;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.tsd-ans-t.open{display:block;-webkit-line-clamp:unset}
.tsd-ans-acts{display:flex;gap:6px;margin-top:8px}
.tsd-ans-acts button{height:32px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#dfe5dc;font:700 11.5px var(--font-body,sans-serif);cursor:pointer}
.tsd-ans-acts button.danger{color:#ff9d9d;border-color:rgba(255,120,120,.4)}
.tsd-foot{flex:0 0 auto;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);font:600 11px var(--font-body,sans-serif);color:#7f8b83}
@media(prefers-reduced-motion:reduce){.tsd,.tsd-scrim{transition:none}}

/* from index.html <style id="footop-social-skin-v1-css"> */
/* Moments + PM: user-customizable look (2026-10-03). The choices live on <html data-sk-*> so the
   embedded screens and their full-screen overlays (story viewer, floating PM) all follow them. */
:root{--sk:#CCFF00;--sk-ink:#0a0a0a;--sk-r:20px;--sk-tail:6px;--sk-fs:14.5px;
  --sk-scene:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--sk) 16%,transparent),transparent 60%),radial-gradient(90% 50% at 100% 100%,color-mix(in srgb,var(--sk) 9%,transparent),transparent 70%),#0e110d}
html[data-sk-accent=sky]{--sk:#4cc9ff}
html[data-sk-accent=pink]{--sk:#ff5fa2}
html[data-sk-accent=orange]{--sk:#ff9f1c}
html[data-sk-accent=purple]{--sk:#a78bfa}
html[data-sk-accent=mint]{--sk:#2dd4bf}
html[data-sk-accent=gold]{--sk:#ffd23f}
html[data-sk-scene=clean]{--sk-scene:#121512}
html[data-sk-scene=pitch]{--sk-scene:radial-gradient(circle at 50% 42%,transparent 0 58px,rgba(255,255,255,.07) 59px 61px,transparent 62px),linear-gradient(180deg,transparent calc(42% - 1px),rgba(255,255,255,.07) calc(42% - 1px) calc(42% + 1px),transparent calc(42% + 1px)),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35)),repeating-linear-gradient(180deg,#1a4524 0 56px,#153a1e 56px 112px)}
html[data-sk-scene=night]{--sk-scene:radial-gradient(1.5px 1.5px at 20% 18%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 70% 30%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 85% 70%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 35% 80%,rgba(255,255,255,.35),transparent),linear-gradient(170deg,#0c1430,#070a16 70%)}
html[data-sk-bubble=pill]{--sk-r:24px;--sk-tail:24px}
html[data-sk-bubble=square]{--sk-r:8px;--sk-tail:2px}
html[data-sk-text=s]{--sk-fs:13px}
html[data-sk-text=l]{--sk-fs:16.5px}

/* ---------- Moments screen ---------- */
#footopMomentsScreen{background:var(--sk-scene)}
.fsk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:2px 2px 14px}
.fsk-kicker{display:inline-block;font:600 11px var(--font-mono,monospace);letter-spacing:.1em;color:var(--sk-ink);background:var(--sk);border-radius:99px;padding:5px 10px}
.fsk-h1{font:700 28px/1.1 var(--font-display,sans-serif);color:#fff;letter-spacing:-.5px;margin-top:8px}
.fsk-sub{margin:6px 0 0;font:700 13px/1.5 var(--font-body,sans-serif);color:rgba(255,255,255,.7)}
.fsk-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sk) 55%,transparent);background:color-mix(in srgb,var(--sk) 14%,rgba(0,0,0,.3));color:#fff;font:600 13px var(--font-body,sans-serif);cursor:pointer;backdrop-filter:blur(8px)}
#footopMomentsScreen .footop-social-toptab.active,#footopPMScreen .footop-social-toptab.active{background:var(--sk);color:var(--sk-ink)}
.footop-moments-grid{gap:18px 10px}
.footop-moments-grid-avatar{position:relative;width:74px;height:74px;font:700 24px var(--font-display,sans-serif);color:#fff;
  background:linear-gradient(150deg,hsl(var(--h,90) 70% 45%),hsl(calc(var(--h,90) + 40) 70% 25%));border:3px solid #0e110d;box-shadow:0 0 0 2.5px rgba(255,255,255,.16)}
.footop-moments-grid-avatar.unseen{border-color:#0e110d;box-shadow:0 0 0 3px var(--sk),0 0 18px color-mix(in srgb,var(--sk) 45%,transparent)}
.footop-moments-grid-avatar.seen{box-shadow:0 0 0 2.5px rgba(255,255,255,.18);filter:saturate(.6)}
.footop-moments-grid-avatar.empty{background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);border:2px dashed rgba(255,255,255,.25);box-shadow:none}
.footop-moments-grid-avatar.add{background:color-mix(in srgb,var(--sk) 12%,transparent);border:2px dashed var(--sk);color:var(--sk);box-shadow:none}
.footop-moments-grid-label{font:600 12px var(--font-body,sans-serif);color:#fff;max-width:90px}
.footop-moments-grid-meta{font:700 11px var(--font-body,sans-serif);color:rgba(255,255,255,.55)}
/* card layout */
html[data-sk-mview=cards] .footop-moments-grid{grid-template-columns:repeat(2,1fr);gap:10px}
html[data-sk-mview=cards] .footop-moments-grid-item{position:relative;align-items:flex-start;text-align:left;gap:4px;min-height:150px;padding:12px;border-radius:20px;overflow:hidden;
  background:radial-gradient(110% 80% at 0% 0%,color-mix(in srgb,var(--sk) 26%,transparent),transparent 65%),rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
html[data-sk-mview=cards] .footop-moments-grid-avatar{width:52px;height:52px;font-size:19px;border-radius:16px;margin-bottom:auto}
html[data-sk-mview=cards] .footop-moments-grid-avatar.unseen{box-shadow:0 0 0 2.5px var(--sk)}
html[data-sk-mview=cards] .footop-moments-grid-label{font-size:15px;max-width:100%;margin-top:14px}
html[data-sk-mview=cards] .footop-moments-grid-item[data-add]{border:1.5px dashed color-mix(in srgb,var(--sk) 60%,transparent);background:color-mix(in srgb,var(--sk) 7%,transparent)}
html[data-sk-mview=cards] .footop-moments-empty{grid-column:1/-1}
/* story viewer + composer follow the accent */
.footop-moment-viewer{background:radial-gradient(120% 50% at 50% 0%,color-mix(in srgb,var(--sk) 18%,transparent),transparent 60%),#000}
.footop-moment-avatar-sm{background:var(--sk);color:var(--sk-ink)}
.footop-moment-caption{font-size:var(--sk-fs);border-radius:var(--sk-r);background:rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.footop-moment-composer-submit{background:var(--sk);color:var(--sk-ink);border-radius:14px;min-height:48px;font-size:14px}
.footop-moment-composer-box{border-radius:22px;border:1px solid color-mix(in srgb,var(--sk) 35%,transparent)}
.footop-moment-composer-drop{border-color:color-mix(in srgb,var(--sk) 50%,transparent);color:#fff;padding:28px;font-size:14px}

/* ---------- PM ---------- */
html #footopPMScreen .footop-dm-card,.footop-dm-overlay .footop-dm-card{background:var(--sk-scene);border-color:rgba(255,255,255,.12)}
html #footopPMScreen .footop-dm-head,.footop-dm-overlay .footop-dm-head{background:rgba(0,0,0,.28);backdrop-filter:blur(10px);border-bottom-color:rgba(255,255,255,.1)}
html #footopPMScreen .footop-dm-head-title,.footop-dm-overlay .footop-dm-head-title{font:700 17px var(--font-display,sans-serif);text-transform:none;color:#fff}
html #footopPMScreen .footop-dm-icon-btn,.footop-dm-overlay .footop-dm-icon-btn{width:40px;height:40px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.footop-dm-icon-btn.fsk-icon{background:color-mix(in srgb,var(--sk) 20%,transparent)!important;border-color:color-mix(in srgb,var(--sk) 55%,transparent)!important}
html #footopPMScreen .footop-dm-section-label,.footop-dm-overlay .footop-dm-section-label{font:600 11px var(--font-mono,monospace);color:var(--sk);letter-spacing:.12em}
html #footopPMScreen .footop-dm-thread-item,.footop-dm-overlay .footop-dm-thread-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:8px}
html #footopPMScreen .footop-dm-thread-item:hover,.footop-dm-overlay .footop-dm-thread-item:hover{border-color:color-mix(in srgb,var(--sk) 50%,transparent)}
.fsk-ava{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 17px var(--font-display,sans-serif);color:#fff;background:linear-gradient(150deg,hsl(var(--h,90) 70% 45%),hsl(calc(var(--h,90) + 40) 70% 25%))}
.fsk-ava.group{border-radius:15px}
.fsk-thread-text{flex:1;min-width:0}
html #footopPMScreen .footop-dm-thread-name,.footop-dm-overlay .footop-dm-thread-name{font:700 15px var(--font-body,sans-serif);text-transform:none;color:#fff}
html #footopPMScreen .footop-dm-thread-preview,.footop-dm-overlay .footop-dm-thread-preview{font-size:13px;color:rgba(255,255,255,.6)}
html #footopPMScreen .footop-dm-msg,.footop-dm-overlay .footop-dm-msg,.footop-dm-msg{font-size:var(--sk-fs);border-radius:var(--sk-r);padding:10px 14px}
html #footopPMScreen .footop-dm-msg.theirs,.footop-dm-overlay .footop-dm-msg.theirs{background:rgba(255,255,255,.1);color:#fff;border-bottom-left-radius:var(--sk-tail)}
html #footopPMScreen .footop-dm-msg.mine,.footop-dm-overlay .footop-dm-msg.mine{background:var(--sk);color:var(--sk-ink);border-bottom-right-radius:var(--sk-tail)}
html #footopPMScreen .footop-dm-msg-media,.footop-dm-overlay .footop-dm-msg-media{padding:0}
html #footopPMScreen .footop-dm-group-sender,.footop-dm-overlay .footop-dm-group-sender{color:var(--sk)}
html #footopPMScreen .footop-dm-reaction-pill.mine,.footop-dm-overlay .footop-dm-reaction-pill.mine{border-color:var(--sk);background:color-mix(in srgb,var(--sk) 16%,transparent);color:#fff}
html #footopPMScreen .footop-dm-foot,.footop-dm-overlay .footop-dm-foot{background:rgba(0,0,0,.3);backdrop-filter:blur(10px);border-top-color:rgba(255,255,255,.1)}
html #footopPMScreen .footop-dm-input-row input[type=text],.footop-dm-overlay .footop-dm-input-row input[type=text]{min-height:44px;border-radius:999px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;font-size:var(--sk-fs);padding:0 16px}
html #footopPMScreen .footop-dm-send,.footop-dm-overlay .footop-dm-send{min-height:44px;border-radius:999px;background:var(--sk);color:var(--sk-ink);padding:0 16px;font:600 12px var(--font-body,sans-serif)}
html #footopPMScreen .footop-dm-share-toggle,.footop-dm-overlay .footop-dm-share-toggle{min-height:44px;border-radius:999px}
html #footopPMScreen .footop-dm-input-row,.footop-dm-overlay .footop-dm-input-row{gap:6px}
html #footopPMScreen .footop-dm-input-row input[type=text],.footop-dm-overlay .footop-dm-input-row input[type=text]{min-width:0;flex:1 1 auto}
html #footopPMScreen .footop-dm-share-toggle,.footop-dm-overlay .footop-dm-share-toggle{flex:0 0 auto;padding:0 10px}
html #footopPMScreen .footop-dm-img-btn,.footop-dm-overlay .footop-dm-img-btn{width:44px;padding:0;display:grid;place-items:center}
html #footopPMScreen .footop-dm-send,.footop-dm-overlay .footop-dm-send{flex:0 0 auto;padding:0 14px}
/* messages are always visible; the entrance only nudges them in (a stalled animation can't hide text) */
.footop-dm-msg{opacity:1;transform:none;animation:fskMsgIn .3s ease both}
@keyframes fskMsgIn{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.footop-dm-msg{animation:none}}

/* ---------- customize sheet ---------- */
.fsk-sheet-bg{position:fixed;inset:0;z-index:1000090;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;opacity:0;transition:opacity .2s}
.fsk-sheet-bg.in{opacity:1}
.fsk-sheet{width:100%;max-height:88%;overflow-y:auto;background:#12150f;border-radius:24px 24px 0 0;border-top:1px solid rgba(255,255,255,.12);padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;transform:translateY(24px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.fsk-sheet-bg.in .fsk-sheet{transform:none}
.fsk-grab{width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.25);margin:0 auto 12px}
.fsk-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fsk-sheet-top b{font:700 19px var(--font-display,sans-serif);color:#fff}
.fsk-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer}
.fsk-preview{position:sticky;top:-10px;z-index:2;border-radius:20px;padding:12px 14px;background:var(--sk-scene);background-color:#12150f;border:1px solid rgba(255,255,255,.12);margin-bottom:14px;box-shadow:0 10px 20px #12150f}
.fsk-pv-stories{display:flex;gap:10px;margin-bottom:12px}
.fsk-pv-story{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--font-display,sans-serif);color:#fff;border:2.5px solid #0e110d;box-shadow:0 0 0 2.5px var(--sk);background:linear-gradient(150deg,hsl(var(--h) 70% 45%),hsl(calc(var(--h) + 40) 70% 25%))}
html[data-sk-mview=cards] .fsk-pv-story{border-radius:13px}
.fsk-pv-msg{max-width:78%;width:fit-content;padding:9px 13px;border-radius:var(--sk-r);font:600 var(--sk-fs)/1.5 var(--font-body,sans-serif);margin-bottom:6px}
.fsk-pv-msg.t{background:rgba(255,255,255,.1);color:#fff;border-bottom-left-radius:var(--sk-tail)}
.fsk-pv-msg.m{margin-left:auto;background:var(--sk);color:var(--sk-ink);border-bottom-right-radius:var(--sk-tail)}
.fsk-label{font:600 12px var(--font-mono,monospace);letter-spacing:.08em;color:rgba(255,255,255,.6);margin:14px 0 8px}
.fsk-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.fsk-row::-webkit-scrollbar{display:none}
.fsk-opt{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#e8ede0;font:600 13px var(--font-body,sans-serif);cursor:pointer;white-space:nowrap}
.fsk-opt.on{border-color:var(--sk);background:color-mix(in srgb,var(--sk) 18%,transparent);color:#fff}
.fsk-sw{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:3px solid #12150f;box-shadow:0 0 0 2px rgba(255,255,255,.18);cursor:pointer;display:grid;place-items:center;font:700 16px sans-serif;color:#0a0a0a}
.fsk-sw.on{box-shadow:0 0 0 3px #fff}
.fsk-preset{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:112px;padding:10px 12px;border-radius:16px;border:1.5px solid rgba(255,255,255,.12);cursor:pointer;color:#fff;font:600 13px var(--font-body,sans-serif);text-align:left}
.fsk-preset.on{border-color:#fff}
.fsk-preset i{display:flex;gap:4px;font-style:normal}
.fsk-preset i span{width:14px;height:14px;border-radius:50%}
.fsk-actions{display:flex;gap:8px;margin-top:18px}
.fsk-actions button{flex:1;min-height:50px;border-radius:16px;font:600 14px var(--font-body,sans-serif);cursor:pointer}
.fsk-reset{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}
.fsk-done{border:0;background:var(--sk);color:var(--sk-ink)}
.fsk-note{margin:10px 0 0;text-align:center;font:700 11.5px var(--font-body,sans-serif);color:rgba(255,255,255,.45)}
@media(prefers-reduced-motion:reduce){.fsk-sheet-bg,.fsk-sheet{transition:none}}

/* from index.html <style id="footop-quality-v1"> */
/* Type + quality floor (2026-10-03). Korean now has real typefaces (Pretendard for all Korean text;
   Anton only for scores/brand since 2026-10-08) so PC and phone render the same; weights a font doesn't have are no longer faked. */
:root{--ink-dim:#A8A8A2}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;font-synthesis:style}
body{word-break:keep-all;overflow-wrap:break-word;-moz-osx-font-smoothing:grayscale;font-feature-settings:'ss06' on}
:focus{outline:none}
:focus-visible{outline:2.5px solid #CCFF00;outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}
::selection{background:rgba(204,255,0,.35);color:#fff}
/* profile card: the 6 stats sit on one row (was 5 + 1) and read as scoreboard numbers */
.footop-hero-stats-mini{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:6px;row-gap:0;width:100%;max-width:330px}
.footop-hero-stats-mini div{min-width:0;text-align:center;padding:6px 0;border-radius:10px;background:rgba(0,0,0,.14)}
.footop-hero-stats-mini b{font:400 24px/1.05 'Anton',var(--font-score);letter-spacing:.5px}
.footop-hero-stats-mini span{font:600 11px var(--font-mono);letter-spacing:.6px}
/* Korean words in the coding font got wide monospace spaces and fake bold. Buttons, tabs and labels
   that carry Korean now use the body face; the mono face stays for numbers and short English tags. */
:is(.fti-row,.fti-tg-txt,.fti-hero,.fti-kicker,.fti-bar,.api-toggle-btn,.tft-cat,.tfc-cat,.trk-square-tag-pill,.trk-square-meta,.feed-post-meta,.dna-btn,.dna-hero-tier,.dna-position-note,.footop-btn-ghost,.footop-main-card-label,.footop-main-toptab,.footop-main-hero-sub,.footop-hscroll-more,.footop-yourday-val,.footop-streak-chip,.footop-auth-kicker,.footop-auth-submit,.footop-teams-tab,.footop-team-tab-btn,.footop-team-meta,.suggest-chip,.ft32-ai-section-label,.ft32-seg-btn,.ft32-coach-banner,.ft32-hero-kicker,.ft32-hero-meta,.ft32-time,.ft32-btn,.ftf-sec-title,.ftf-date,.trk-trending-head,.trk-trending-empty,.feed-count,.tracking-sub,.tracking-search-status,.btn-sm,.step-label,.footop-card h3),:is(.fti-row,.fti-tg-txt,.fti-hero,.fti-kicker,.fti-bar,.api-toggle-btn,.tft-cat,.tfc-cat,.trk-square-tag-pill,.trk-square-meta,.feed-post-meta,.dna-btn,.dna-hero-tier,.dna-position-note,.footop-btn-ghost,.footop-main-card-label,.footop-main-toptab,.footop-main-hero-sub,.footop-hscroll-more,.footop-yourday-val,.footop-streak-chip,.footop-auth-kicker,.footop-auth-submit,.footop-teams-tab,.footop-team-tab-btn,.footop-team-meta,.suggest-chip,.ft32-ai-section-label,.ft32-seg-btn,.ft32-coach-banner,.ft32-hero-kicker,.ft32-hero-meta,.ft32-time,.ft32-btn,.ftf-sec-title,.ftf-date,.trk-trending-head,.trk-trending-empty,.feed-count,.tracking-sub,.tracking-search-status,.btn-sm,.step-label) *{font-family:var(--font-body)!important;letter-spacing:-.005em!important;font-variant-numeric:tabular-nums}
/* Profile (2026-10-03): identity card → counts → two actions → achievements → 3 tabs */
.footop-myplayer .footop-player-hero{margin-top:4px}
.footop-avatar-picker-label{font:700 13px var(--font-body)!important;letter-spacing:0!important;text-transform:none!important;color:#cfd3c8!important}
.fpr-editbar{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.fpr-editbar b{font:700 22px var(--font-display);color:#fff;letter-spacing:-0.02em}
.fpr-back{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:#1c1f1b;color:#fff;font-size:18px;cursor:pointer}
/* Settings + profile edit forms: text/password fields were unstyled (white browser default) —
   only number/select/textarea had a rule. One field style for all of them; labels in the body face. */
.footop-edit-form{font:700 13px var(--font-body)!important;letter-spacing:0!important;color:#cfd3c8!important}
.footop-edit-form :is(input[type=text],input[type=password],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],select,textarea){display:block;width:100%;min-height:48px;margin-top:6px;padding:12px 14px;background:#0f120e;border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#fff;font:600 15px var(--font-body);box-sizing:border-box;-webkit-appearance:none;appearance:none}
.footop-edit-form select{background-image:linear-gradient(45deg,transparent 50%,#cfd3c8 50%),linear-gradient(135deg,#cfd3c8 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.footop-edit-form textarea{min-height:88px;resize:vertical;line-height:1.5}
.footop-edit-form :is(input,select,textarea):focus{border-color:#CCFF00;outline:none;box-shadow:0 0 0 3px rgba(204,255,0,.18)}
.footop-edit-form ::placeholder{color:#7d8278}
/* Step 1 of the de-template pass: eyebrow labels that only repeated the title/brand are gone,
   and labels no longer force ALL CAPS on names people typed (team names, players). */
.footop-auth-kicker:not([style]),.fs-badge,.ft32-kicker,.feed-kicker,.trk-kicker,.tracking-news-kicker,.tracking-news-status,.dna-kicker,.fsk-kicker,.fti-kicker{display:none!important}
.footop-team-name,.feed-post-player,.footop-dm-thread-name,.footop-post-author,.footop-social-toptab,.footop-teams-tab{text-transform:none!important}
.feed-post-player{letter-spacing:0!important}
#panelTraining .ft32-coach-banner{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
#panelTraining .ft32-coach-banner b{font:700 15px var(--font-body);color:#fff}
#panelTraining .ft32-coach-banner span{font:500 13px var(--font-body);color:#b9bdb3}
/* foldable create forms (Teams) */
.fq-fold{padding:0!important;overflow:hidden}
.fq-fold-sum{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;padding:0 18px;font:700 15px var(--font-body);color:#CCFF00}
.fq-fold-sum::-webkit-details-marker{display:none}
.fq-fold[open] .fq-fold-sum{border-bottom:1px solid rgba(255,255,255,.08)}
.fq-fold form{padding:14px 16px 16px}
/* leftovers from the old cream Training theme */
#panelTraining .ft32-goal-tag,#panelTraining .ft32-tag{background:rgba(204,255,0,.09)!important;color:#E6F7B8!important;border:1px solid rgba(204,255,0,.32)!important}

/* from index.html <style id="footop-segtabs-v1-css"> */
/* Detail tabs (#dynamicSidebarNav), 2026-10-03: every section has 2–4 detail tabs, so they now sit
   side by side as one segmented control (iOS / Toss style) — equal widths, nothing to drag.
   Single-screen sections (Main, Match) show no strip at all. */
#dynamicSidebarNav.nav-tabs{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;margin:6px 12px!important;padding:4px!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;background:#151815!important;overflow:hidden!important;scroll-snap-type:none!important;height:auto!important}
#dynamicSidebarNav .nav-tab{flex:1 1 auto!important;min-width:max-content!important;width:auto!important;height:40px!important;min-height:40px!important;padding:0 6px!important;gap:6px!important;justify-content:center!important;
  border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;color:#b9bdb3!important;font:700 13px var(--font-body)!important;letter-spacing:-.01em!important}
#dynamicSidebarNav .nav-tab > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dynamicSidebarNav .nav-tab .tic{width:24px!important;height:24px!important;flex:0 0 24px}
#dynamicSidebarNav .nav-tab .tic svg{width:15px!important;height:15px!important}
#dynamicSidebarNav .nav-tab:hover{color:#fff!important;background:rgba(255,255,255,.04)!important}
#dynamicSidebarNav .nav-tab.active{background:#CCFF00!important;color:#0a0a0a!important}
#dynamicSidebarNav .nav-tab:focus-visible{outline:2.5px solid #CCFF00;outline-offset:1px}
#dynamicSidebarNav.fsg-single{display:none!important}
body.fsg-nostrip{--subnav-h:0px}
:root{--subnav-h:62px}
@media (max-width:359px){#dynamicSidebarNav .nav-tab .tic{display:none!important}}
#dynamicSidebarNav.fsg-tight .nav-tab .tic{display:none!important}
#dynamicSidebarNav.fsg-tight .nav-tab{padding:0 10px!important}
@media(prefers-reduced-motion:no-preference){#dynamicSidebarNav .nav-tab{transition:background-color .18s ease,color .18s ease}}

/* from index.html <style id="footop-de-emoji-v1-css"> */
.footop-yourday-icon .tic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.footop-yourday-icon .tic svg{width:19px;height:19px}
.footop-team-tab-btn .icon{display:none!important}

/* from index.html <style id="footop-card-system-v1"> */
/* Steps 3+4 of the de-template pass (2026-10-03): one card system instead of a lime glow on everything.
   - Primary (one per screen: player card, today's routine, DNA hero, featured news): keeps its own look,
     and is the only card with a lime edge.
   - Data (default): flat dark surface, faint neutral hairline, no glow, no sheen.
   - Media (photo-led news/card tiles): no frame, the image is the edge.
   - Inset tiles inside a card: a step lighter, no border.
   Lime stays for actions, selected states and the primary card — so it means something again. */
:root{--frame-line:rgba(255,255,255,.08);--frame-line-strong:rgba(255,255,255,.22);--frame-sheen:none;
  --card-bg:#141713;--card-line:rgba(255,255,255,.075);--inset-bg:rgba(255,255,255,.045)}
:is(.footop-main-card,.footop-card:not(.footop-x-card):not([style*="border-color"]),.ft32-card,.ft32-more-card,.ft32-ai-routine-card,.ft32-ari-card,
  .dna-intro-card,.dna-position-card,.dna-dev-card,.dna-detail-card,.dna-dex-card,.fs-card,.footop-team-card,.footop-mindset-card,
  .footop-compare-card,.tracking-cred-card,.footop-learn-card,.ftf-iq,.footop-home-todo-card,.team-card,.league-card,.player-card,
  .news-card,.footop-composer,.fq-fold,.footop-athlete-card){
  background-color:var(--card-bg)!important;background-image:none!important;border:1px solid var(--card-line)!important;box-shadow:none!important;border-radius:20px!important}
@media(hover:hover) and (pointer:fine){
  :is(.footop-main-card,.ft32-more-card,.footop-team-card,.team-card,.league-card,.player-card,.news-card,.footop-learn-card):hover{border-color:var(--frame-line-strong)!important}
}
/* primary cards: their own fill stays; a lime edge marks "the one thing on this screen" */
:is(.ftf-hero,.ft32-hero-card,.dna-hero-card,.mn-featured-card){border:1px solid rgba(204,255,0,.32)!important}
/* media tiles */
:is(.feed-post,.trk-news-square){border:0!important;background-image:none}
/* story covers and library tiles keep their own colour gradient (only the frame goes) */
:is(.tft,.tfc){border:0!important}
.feed-post,.trk-news-square{box-shadow:none!important}
/* inset tiles */
:is(.footop-yourday-stat){background:var(--inset-bg)!important;border:0!important}
/* the Main card colour bars stay (they say which tab a card leads to), slimmer */
.footop-main-card-accent::before{height:2px!important;left:20px!important;right:auto!important;width:36px}
/* card titles: white, not lime (lime = action/selection only) */
.footop-main-card-label{color:#fff!important;font:700 15px var(--font-body)!important;letter-spacing:-.01em!important;text-transform:none!important}
.footop-card > h3{color:#fff!important}
/* list-row icons in Training "더 살펴보기": neutral tiles, so the one lime button stays the primary action */
#panelTraining .ft32-more-icon{background:var(--inset-bg)!important;box-shadow:none!important;border:0!important}
#panelTraining .ft32-more-card :is(.ft32-more-arrow,.ft32-more-go){color:#8a8f85!important}
/* tab bars and list dividers back to neutral */
.footop-team-tabbar,.footop-teams-tabs,.footop-social-toptabs,.footop-main-toptabs{border-color:rgba(255,255,255,.08)!important}
.footop-settings-row,.footop-blocked-row,.footop-team-member-row{border-bottom-color:rgba(255,255,255,.07)!important}

/* from index.html <style id="footop-de-ai-v2-css"> */
/* De-template pass 2 (2026-10-04). No coding (monospace) face anywhere: small labels, chips and tab
   names use the body face; numbers keep column alignment with tabular figures instead. */
:root{--font-mono:'Pretendard Variable','Pretendard',system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-variant-numeric:tabular-nums}
/* Labels are not forced into ALL CAPS or wide tracking (the player-card name keeps its FIFA style) */
[class*="kicker"],[class*="label"],[class*="-tag"],[class*="badge"],[class*="chip"],[class*="-tab"],[class*="pill"],[class*="meta"],
.feed-post-player,.footop-bottom-title,.my-track-sub,.ft32-section-title,.dna-section-title{text-transform:none!important;letter-spacing:0!important}
/* Endless decorative motion off. Loading spinners, skeletons and the live dot stay — they carry information. */
.footop-x-badge::after,.footop-x-glow,.footop-x-btn,.footop-intro-ball,.footop-intro-title,.footop-login-hero-ball-glow,.dna-hero-icon{animation:none!important}
.footop-intro-marquee{white-space:normal!important;overflow:visible!important;mask-image:none!important;-webkit-mask-image:none!important}
.footop-intro-marquee-track{animation:none!important;flex-wrap:wrap;justify-content:center;transform:none!important}
.footop-intro-marquee-track > *:nth-child(n+7){display:none}
.tfs-tap span{animation-iteration-count:3!important}
/* login: name + one line of what it does, no emoji tiles */
.footop-login-feature{gap:3px!important;padding:12px 6px!important}
.footop-login-feature b{font:600 12.5px/1.25 var(--font-body)}
.footop-login-feature small{font:500 11px/1.3 var(--font-body);color:var(--ink-dim)}
.footop-login-hero-title{font-size:30px!important;line-height:1.15!important}
.mts-gap{display:inline-block;width:8px}
/* playstyle: the tags are Korean words now */
#panelTraining .ft32-tag{font:700 11px/1 var(--font-body)}
.fti-tg-ic{display:inline-grid;place-items:center}

/* from index.html <style id="footop-news-head-v1"> */
/* The shared "Tracking News" banner sat above every News sub-tab (even 주요 뉴스); the tab strip already says where you are. */
#panelTracking .tracking-news-shell{display:none!important}
/* login hero: copy stays left of the ball */
.footop-login-hero-sub{max-width:62%}

/* from index.html <style id="footop-news-photo-v1"> */
/* Most-read sports thumbnails frame one person with the face in the upper third (2026-10-04 analysis);
   center-cropping a portrait photo into a square card cut heads off. */
.trk-news-square img,.mn-featured-card img,.feed-post-image,.cardnews-image,#cardnewsBg{object-position:50% 28%}

/* from index.html <style id="footop-feedback-v1-css"> */
/* "의견 보내기" (2026-10-05): a quiet top-bar entry + bottom sheet. Lime only on the send button. */
.topbar .ffb-open{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#C9C9C4;font:600 13px/1 var(--font-body);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.topbar .ffb-open:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.topbar .ffb-open svg{width:15px;height:15px;flex:none}
.ffb-scrim{position:fixed;inset:0;z-index:1000200;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.ffb-scrim.on{opacity:1}
.ffb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1000201;max-height:88dvh;overflow:auto;background:#161616;border-top:1px solid #292929;border-radius:22px 22px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));color:#fff;font-family:var(--font-body);transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.3,1)}
.ffb-sheet.on{transform:none}
.ffb-handle{width:38px;height:4px;border-radius:4px;background:#3a3a3a;margin:0 auto 14px}
.ffb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ffb-title{margin:0;font:700 19px/1.3 var(--font-body);letter-spacing:-.01em;color:#fff}
.ffb-lead{margin:4px 0 0;color:#A8A8A2;font-size:14px;line-height:1.5}
.ffb-x{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#222;color:#A8A8A2;font-size:18px;line-height:1;cursor:pointer}
.ffb-x:hover{color:#fff}
.ffb-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.ffb-kind{height:34px;padding:0 13px;border-radius:999px;border:1px solid #333;background:transparent;color:#C9C9C4;font:500 13.5px/1 var(--font-body);cursor:pointer}
.ffb-kind[aria-pressed="true"]{border-color:#CCFF00;color:#fff;background:rgba(204,255,0,.08)}
.ffb-text{display:block;width:100%;box-sizing:border-box;min-height:118px;resize:vertical;border-radius:14px;border:1px solid #2f2f2f;background:#1C1C1C;color:#fff;padding:13px 14px;font:400 15px/1.55 var(--font-body)}
.ffb-text::placeholder{color:#76766f}
.ffb-text:focus{outline:none;border-color:rgba(204,255,0,.6);box-shadow:0 0 0 3px rgba(204,255,0,.12)}
.ffb-meta{display:flex;justify-content:space-between;gap:10px;margin:8px 2px 0;color:#8A8A85;font-size:12.5px}
.ffb-err{min-height:18px;margin:10px 2px 0;color:#ff9a8a;font-size:13px}
.ffb-send{width:100%;height:50px;margin-top:6px;border:0;border-radius:14px;background:#CCFF00;color:#0D0D0D;font:700 16px/1 var(--font-body);cursor:pointer}
.ffb-send:disabled{background:#2a2a2a;color:#6f6f6a;cursor:default}
.ffb-note{margin:10px 0 0;text-align:center;color:#76766f;font-size:12px}
.ffb-done{text-align:center;padding:18px 0 4px}
.ffb-check{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:rgba(204,255,0,.12);color:#CCFF00}
.ffb-check svg{width:28px;height:28px}
.ffb-done .ffb-title{font-size:20px}
.ffb-again{margin-top:10px;width:100%;height:44px;border:0;background:transparent;color:#C9C9C4;font:600 14px/1 var(--font-body);cursor:pointer}
.ffb-again:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.ffb-sheet,.ffb-scrim{transition:none}}

/* from index.html <style id="footop-profile-v2-css"> */
/* Profile (2026-10-06): Discord-style banner + round avatar, Instagram-style counts, actions,
   story-circle achievements and icon tabs. The banner takes the player's own jersey colour. */
.fpv-head{--fpv-ring:#0a0a0a;position:relative}
.fpv-banner{position:relative;height:112px;border-radius:20px;overflow:hidden;background-color:var(--fpv-a);
  background-image:
    radial-gradient(circle at 50% 50%,transparent 29px,rgba(255,255,255,.2) 30px,rgba(255,255,255,.2) 31.5px,transparent 32.5px),
    linear-gradient(90deg,transparent calc(50% - .75px),rgba(255,255,255,.2) calc(50% - .75px),rgba(255,255,255,.2) calc(50% + .75px),transparent calc(50% + .75px)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 30px,transparent 30px 60px),
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--fpv-b) 42%,transparent),transparent 60%),
    linear-gradient(165deg,rgba(255,255,255,.12),rgba(0,0,0,.45))}
.fpv-bannerbtn{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fpv-bannerbtn:hover{background:rgba(0,0,0,.62)}
.fpv-bannerbtn svg{width:20px;height:20px}
.fpv-idrow{display:flex;align-items:flex-end;gap:12px;margin-top:-46px;padding:0 4px;position:relative}
.fpv-avatar{position:relative;flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--fpv-b) 30%,#2b2f29),#151715 72%);box-shadow:0 0 0 5px var(--fpv-ring)}
.fpv-avatar .footop-jersey{width:76%;height:76%}
.fpv-lv{position:absolute;right:-6px;bottom:0;padding:3px 8px;border-radius:999px;background:#CCFF00;color:#0a0a0a;font:600 11.5px/1.2 var(--font-body);box-shadow:0 0 0 3px var(--fpv-ring);font-variant-numeric:tabular-nums}
.fpv-counts{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:2px}
.fpv-count{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:4px 0;border:0;border-radius:12px;background:none;color:#fff;font-family:inherit}
button.fpv-count{cursor:pointer}
button.fpv-count:hover{background:rgba(255,255,255,.05)}
.fpv-count b{font:700 20px/1.15 var(--font-body);font-variant-numeric:tabular-nums}
.fpv-count span{font:500 12.5px var(--font-body);color:#a8a8a2}
.fpv-name{margin:12px 4px 0;font:700 27px/1.25 var(--font-display);color:#fff;letter-spacing:-0.02em;overflow-wrap:anywhere}
.fpv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:7px 4px 0;font:500 13px var(--font-body);color:#a8a8a2}
.fpv-meta span{display:inline-flex;align-items:center;gap:4px}
.fpv-meta svg{width:14px;height:14px;opacity:.75}
.fpv-meta .fpv-pos{padding:2px 9px;border-radius:999px;border:1px solid rgba(204,255,0,.45);color:#e8ffa6;font-weight:700;font-size:12px}
.fpv-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 4px 0}
.fpv-badges:not(:has(> :not(:empty))){display:none}
.fpv-slot{display:contents}
.fpv-badges .dna-hero-badge{margin:0;padding:5px 11px;font-size:12px}
.fpv-badges .footop-tier-badge{margin:0}
.fpv-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,150,70,.38);background:rgba(255,150,70,.12);color:#ffd6b8;font:700 12px var(--font-body)}
.fpv-bio{margin:10px 4px 0;font:400 14.5px/1.6 var(--font-body);color:#e4e6e0;white-space:pre-line}
.fpv-actions{display:grid;grid-template-columns:1fr 1fr 44px;gap:8px;margin-top:14px}
.fpv-actions:empty{display:none}
.fpv-btn{min-height:42px;border-radius:12px;border:0;background:#23261f;color:#fff;font:700 14px var(--font-body);cursor:pointer}
.fpv-btn:hover{background:#2c3028}
.fpv-btn.primary{background:#CCFF00;color:#0a0a0a}
.fpv-btn.primary:hover{background:#d9ff47}
.fpv-btn.icon{display:grid;place-items:center;padding:0}
.fpv-btn.icon svg{width:20px;height:20px}
.fpv-btn.fpv-wide{grid-column:1/-1}
.fpv-hint{grid-column:1/-1;margin:0;padding:4px 2px;font:500 13.5px var(--font-body);color:#a8a8a2}
.fpv-more{grid-column:1/-1;display:none;gap:8px}
.fpv-more.open{display:flex}
.fpv-more button{flex:1;min-height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#d9ddd2;font:600 13.5px var(--font-body);cursor:pointer}
.fpv-hl-wrap{margin-top:20px}
.fpv-hl-wrap[hidden]{display:none}
.fpv-hl-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px}
.fpv-hl-head b{font:700 15px var(--font-body);color:#fff}
.fpv-hl-head span{font:500 12.5px var(--font-body);color:#a8a8a2}
.fpv-hl{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.fpv-hl::-webkit-scrollbar{display:none}
.fpv-hl-item{flex:0 0 66px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:#fff;font-family:inherit}
button.fpv-hl-item{cursor:pointer}
.fpv-hl-ring{width:64px;height:64px;padding:2.5px;border-radius:50%;background:#2a2d28;display:grid}
.fpv-hl-item.on .fpv-hl-ring{background:conic-gradient(from 210deg,#CCFF00,#58d68d,#CCFF00)}
.fpv-hl-ic{border-radius:50%;background:#151715;box-shadow:inset 0 0 0 2.5px var(--fpv-ring);display:grid;place-items:center;font-size:25px;color:#6f746b}
.fpv-hl-ic svg{width:20px;height:20px}
.fpv-hl-item b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px var(--font-body);color:#e4e6e0}
.fpv-hl-item:not(.on) b{color:#7d8278}
.fpv-tabs{position:sticky;top:-20px;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 14px;background:#0a0a0a;border-bottom:1px solid #292929}
.fpv-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border:0;background:none;color:#8a8f85;font:700 14px var(--font-body);cursor:pointer}
.fpv-tab svg{width:19px;height:19px}
.fpv-tab:hover{color:#d9ddd2}
.fpv-tab.active{color:#fff}
.fpv-tab.active::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;border-radius:2px;background:#CCFF00}
.fpv-statcard .fpv-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.fpv-statcard h3{margin:0}
.fpv-sec-head span{font:500 12px var(--font-body);color:#8a8f85}
.fpv-statcard .footop-hero-stats-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0}
.fpv-statcard .footop-hero-stats-mini div{background:#1d201c;border-radius:12px;padding:10px 0 8px;color:#fff}
.fpv-statcard .footop-hero-stats-mini b{color:#fff}
.fpv-statcard .footop-hero-stats-mini span{color:#a8a8a2}
.fpv-statcard .footop-hero-stats-empty{grid-column:1/-1;font:500 13.5px var(--font-body);color:#a8a8a2}
/* public player page uses the same layout */
.footop-athlete-card.fpv-page{background:#0a0a0a;border-color:#232323;padding:12px 12px 20px;border-radius:24px}
.footop-athlete-card.fpv-page .fpv-head{margin-bottom:16px}
@media (prefers-reduced-motion:no-preference){.fpv-btn,.fpv-count,.fpv-tab{transition:background .15s,color .15s}}

/* from index.html <style id="footop-profile-photos-css"> */
/* Profile photo + background photo from the gallery (2026-10-06) */
.fpv-banner.has-cover{background-size:cover;background-position:center;background-repeat:no-repeat}
.fpv-coverbtn{right:auto;left:10px}
.fpv-avatar{overflow:visible}
.fpv-avatar .fpv-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.fpv-avatar-btn{border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.fpv-avatar-btn:focus-visible{outline:2px solid #CCFF00;outline-offset:4px}
.fpv-cam{position:absolute;left:-2px;bottom:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#23261f;color:#fff;box-shadow:0 0 0 3px var(--fpv-ring)}
.fpv-cam svg{width:15px;height:15px}
.footop-hero-avatar.is-photo{padding:0;background:#151715}
.footop-hero-avatar.is-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fpv-pe h3{margin:0 0 12px}
.fpv-pe-row{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;padding:10px 0}
.fpv-pe-row + .fpv-pe-row{border-top:1px solid rgba(255,255,255,.07)}
.fpv-pe-av{width:56px;height:56px;margin:0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#151715}
.fpv-pe-av .fpv-photo{width:100%;height:100%;object-fit:cover}
.fpv-pe-av .footop-jersey{width:78%;height:78%}
.fpv-pe-cover.fpv-banner{width:72px;height:24px;border-radius:7px}
.fpv-pe-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.fpv-pe-txt b{font:700 14px var(--font-body);color:#fff}
.fpv-pe-txt span{font:500 12.5px var(--font-body);color:#a8a8a2}
.fpv-pe .fpv-btn{min-height:38px;padding:0 14px}
.fps-opts{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.fps-opt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#1c1f1b;color:#fff;font:700 15px var(--font-body);cursor:pointer}
.fps-opt svg{width:19px;height:19px}
.fps-opt.primary{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fps-sheet.busy .fps-opt{opacity:.5;pointer-events:none}
.fps-status{min-height:18px;margin:12px 2px 0;text-align:center;font:500 13px var(--font-body);color:#c9c9c4}
.fps-status.err{color:#ff9a8a}

/* from index.html <style id="footop-player-tags-css"> */
/* Player tags + player finder (2026-10-06): Supercell-ID-style nickname + permanent #tag, a connections list
   that sorts by nickname / tag / newest, and a search that finds anyone by nickname or #tag. */
.fpv-tagrow{display:flex;align-items:center;gap:8px;margin:4px 4px 0}
.fpv-tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#171a16;color:#d9ddd2;font:700 13px var(--font-body);letter-spacing:.6px;cursor:pointer;font-variant-numeric:tabular-nums}
.fpv-tag:hover{background:#1f231d}
.fpv-tag svg{width:14px;height:14px;opacity:.7}
.fpv-tag.copied{border-color:#CCFF00;color:#CCFF00}
.fpf-scrim{position:fixed;inset:0;z-index:1000200;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.fpf-scrim.on{opacity:1}
.fpf{position:fixed;inset:0;z-index:1000210;display:flex;flex-direction:column;background:#0a0b0a;transform:translateY(16px);opacity:0;transition:transform .22s,opacity .22s}
.fpf.on{transform:none;opacity:1}
.fpf-head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
.fpf-head h2{flex:1;min-width:0;margin:0;font:700 18px var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpf-x{width:42px;height:42px;border-radius:50%;border:0;background:#1a1d19;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:20px}
.fpf-search{margin:0 12px;position:relative}
.fpf-search input{width:100%;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#141713;color:#fff;padding:0 14px 0 42px;font:500 15px var(--font-body);outline:none}
.fpf-search input:focus{border-color:#CCFF00;box-shadow:0 0 0 3px rgba(204,255,0,.18)}
.fpf-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#8a8f85}
.fpf-hint{margin:6px 14px 0;font:500 12.5px var(--font-body);color:#8a8f85}
.fpf-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 12px 0;padding:4px;border-radius:14px;background:#141713}
.fpf-seg button{min-height:40px;border:0;border-radius:10px;background:none;color:#a8a8a2;font:700 13.5px var(--font-body);cursor:pointer}
.fpf-seg button.on{background:#262a23;color:#fff}
.fpf-sort{display:flex;align-items:center;gap:6px;margin:10px 12px 4px}
.fpf-sort span{font:600 12.5px var(--font-body);color:#8a8f85;margin-right:2px}
.fpf-sort button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:none;color:#d0d4ca;font:600 13px var(--font-body);cursor:pointer}
.fpf-sort button.on{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fpf-list{flex:1;overflow-y:auto;padding:4px 8px calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.fpf-row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 8px;border:0;border-radius:14px;background:none;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.fpf-row:hover{background:#151814}
.fpf-ava{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 26%);color:#fff;font:700 16px var(--font-body)}
.fpf-ava img{width:100%;height:100%;object-fit:cover}
.fpf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fpf-txt b{font:700 15px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpf-txt span{font:500 12.5px var(--font-body);color:#9a9f94;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.fpf-pill{flex:none;padding:3px 9px;border-radius:999px;border:1px solid rgba(204,255,0,.4);color:#e8ffa6;font:700 11.5px var(--font-body)}
.fpf-empty{padding:36px 18px;text-align:center;font:500 14px/1.6 var(--font-body);color:#a8a8a2}
.fpf-count{margin:6px 14px 2px;font:600 12.5px var(--font-body);color:#8a8f85}

/* from index.html <style id="footop-color-scheme-v1"> */
/* Phones showed Footop in different colours than PC (2026-10-06). Without a declared colour scheme, Samsung Internet's
   dark mode, Chrome's auto-dark and in-app browsers (KakaoTalk etc.) repaint the page themselves — lime turns dull,
   light cards get inverted, and native inputs/selects/checkboxes come out white. Footop is a dark design, so say so. */
:root{color-scheme:dark only}
@media (prefers-color-scheme:dark){:root{color-scheme:dark only}}
@media (prefers-color-scheme:light){:root{color-scheme:dark only}}
*{-webkit-tap-highlight-color:transparent}
input,select,textarea{color-scheme:dark}

/* from index.html <style id="footop-main-profile-card-v1"> */
/* Main tab uses the Profile tab header (2026-10-06) */
#footopMainCard .fmc-wrap{display:flex;flex-direction:column;gap:14px}
#footopMainCard .fpv-avatar{cursor:pointer}
#footopMainCard .fpv-statcard{margin:0}

/* from index.html <style id="footop-bottom-nav-icons-v2"> */
/* Bottom tabs, icons only (2026-10-06): labels removed, so each icon is bigger and has to say what the tab is.
   Training = a growing graph (bars + rising line), Match = pitch with a team crest. Names stay as aria-label/title. */
.footop-bottom-title{display:none!important}
.footop-bottom-btn{min-height:54px!important;padding:6px 2px!important;justify-content:center!important;align-items:center!important}
.footop-bottom-icon{width:38px!important;height:38px!important}
.footop-bottom-icon svg{width:28px!important;height:28px!important}
@media (prefers-reduced-motion:no-preference){
  .footop-bottom-btn.active .icon-training .fbn-bar{transform-box:fill-box;transform-origin:50% 100%;animation:fbnGrow .55s cubic-bezier(.2,.8,.3,1) both}
  .footop-bottom-btn.active .icon-training .fbn-bar:nth-of-type(2){animation-delay:.08s}
  .footop-bottom-btn.active .icon-training .fbn-bar:nth-of-type(3){animation-delay:.16s}
  .footop-bottom-btn.active .icon-training .fbn-line{stroke-dasharray:30;animation:fbnDraw .6s .18s ease-out both}
}
@keyframes fbnGrow{from{transform:scaleY(.35)}to{transform:none}}
@keyframes fbnDraw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes fbnPop{from{transform:scale(.7)}to{transform:none}}

/* from index.html <style id="footop-bottom-nav-motion-v1"> */
/* Each bottom tab plays a short motion when it's opened (2026-10-06), then settles back to its normal icon.
   News: a magnifier wanders over the page. Training: the growth graph (footop-bottom-nav-icons-v2). Social: two people
   take turns talking. Match: two made-up teams line up one player at a time. Profile: a player heads a high ball.
   Extra parts are hidden at rest, so with reduced motion the icons simply stay still. */
.footop-bottom-icon svg{overflow:visible}
.fbn-lens,.fbn-bub,.fbn-dot,.fbn-ball,.fbn-hit{opacity:0}
.fbn-lens{transform:translate(17px,16px)}
.fbn-bub{transform-box:fill-box;transform-origin:50% 100%}
.fbn-dot,.fbn-crest,.fbn-crest-cut,.fbn-hit{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .footop-bottom-btn.active .fbn-lens{animation:fbnLens 1.9s cubic-bezier(.45,.05,.35,1) both}
  .footop-bottom-btn.active .fbn-bub1{animation:fbnTalk 1.7s ease-out both}
  .footop-bottom-btn.active .fbn-bub2{animation:fbnTalk 1.7s ease-out .45s both}
  .footop-bottom-btn.active .fbn-p1{animation:fbnNod 1.7s ease-out both}
  .footop-bottom-btn.active .fbn-p2{animation:fbnNod 1.7s ease-out .45s both}
  .footop-bottom-btn.active .fbn-crest,.footop-bottom-btn.active .fbn-crest-cut{animation:fbnCrest 2.7s ease-in-out both}
  .footop-bottom-btn.active .fbn-dot{animation:fbnDot 1.7s cubic-bezier(.3,1.5,.5,1) both}
  .footop-bottom-btn.active .fbn-dot.d1{animation-delay:.3s}
  .footop-bottom-btn.active .fbn-dot.d2{animation-delay:.45s}
  .footop-bottom-btn.active .fbn-dot.d3{animation-delay:.6s}
  .footop-bottom-btn.active .fbn-dot.d4{animation-delay:.75s}
  .footop-bottom-btn.active .fbn-dot.d5{animation-delay:.9s}
  .footop-bottom-btn.active .fbn-dot.d6{animation-delay:1.05s}
  .footop-bottom-btn.active .fbn-ball{animation:fbnBall 1.5s cubic-bezier(.4,0,.6,1) both}
  .footop-bottom-btn.active .fbn-me{animation:fbnJump 1.5s ease-in-out both}
  .footop-bottom-btn.active .fbn-hit{animation:fbnHit 1.5s ease-out both}
}
@keyframes fbnLens{
  0%{opacity:0;transform:translate(22px,23px) scale(.6)}
  10%{opacity:1;transform:translate(21px,21px)}
  32%{transform:translate(12px,10px)}
  54%{transform:translate(21px,12px)}
  76%{transform:translate(12px,20px)}
  90%{opacity:1;transform:translate(17px,16px)}
  100%{opacity:0;transform:translate(17px,16px) scale(.8)}
}
@keyframes fbnTalk{0%{opacity:0;transform:scale(.2)}12%{opacity:1;transform:scale(1.12)}18%{transform:none}38%{opacity:1;transform:none}48%{opacity:0;transform:scale(.6)}62%{opacity:0;transform:scale(.2)}72%{opacity:1;transform:scale(1.08)}78%{transform:none}90%{opacity:1}100%{opacity:0;transform:scale(.6)}}
@keyframes fbnNod{0%,100%{transform:none}10%,70%{transform:translateY(-1.2px)}20%,80%{transform:none}}
@keyframes fbnCrest{0%{transform:none}10%,86%{transform:scale(0)}100%{transform:none}}
@keyframes fbnDot{0%{opacity:0;transform:scale(0)}14%{opacity:1;transform:scale(1)}74%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(0)}}
@keyframes fbnBall{
  0%{opacity:0;transform:translate(31px,-1px) scale(.7)}
  8%{opacity:1}
  24%{transform:translate(24px,-4px)}
  44%{transform:translate(16.5px,1.5px)}
  66%{transform:translate(9px,-5px)}
  86%{opacity:1;transform:translate(3px,-2px)}
  100%{opacity:0;transform:translate(1px,0) scale(.7)}
}
@keyframes fbnJump{0%,18%{transform:none}30%{transform:translateY(1.2px)}44%{transform:translateY(-2.4px)}62%{transform:translateY(.6px)}74%,100%{transform:none}}
@keyframes fbnHit{0%,40%{opacity:0;transform:scale(.4)}46%{opacity:1;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.3)}}

/* from index.html <style id="footop-connect-v1-css"> */
/* Social → Connect (2026-10-06): Instagram-style profile strip whose three counts are the tabs
   (맞Connect / 받은 Connect / 보낸 Connect) + Discord-style "add friend" search at the top. */
.fcn{padding:14px 14px calc(110px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.fcn-search{position:relative}
.fcn-search input{width:100%;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#141713;color:#fff;padding:0 40px 0 42px;font:500 15px var(--font-body);outline:none}
.fcn-search input:focus{border-color:#CCFF00;box-shadow:0 0 0 3px rgba(204,255,0,.18)}
.fcn-search .ic{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#8a8f85}
.fcn-search .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:none;color:#a8a8a2;font-size:18px;cursor:pointer}
.fcn-search .clr[hidden]{display:none}
.fcn-me{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:20px;background:#141713;border:1px solid rgba(255,255,255,.08)}
.fcn-me-ava{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 26%);color:#fff;font:700 24px var(--font-body);box-shadow:0 0 0 3px #0a0a0a,0 0 0 5px rgba(204,255,0,.55);border:0;padding:0;cursor:pointer}
.fcn-me-ava img{width:100%;height:100%;object-fit:cover}
.fcn-me-txt{flex:1;min-width:0}
.fcn-me-txt b{display:block;font:700 22px/1.25 var(--font-display);color:#fff;overflow-wrap:anywhere;letter-spacing:-0.02em}
.fcn-me-txt .fpv-tag{margin-top:6px}
.fcn-me-txt .fcn-pos{display:block;margin-top:4px;font:500 12.5px var(--font-body);color:#a8a8a2}
.fcn-me-go{flex:none;min-height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:none;color:#e4e6e0;font:700 13px var(--font-body);cursor:pointer}
.fcn-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-bottom:1px solid #292929;position:sticky;top:-14px;z-index:4;background:#0a0a0a}
.fcn-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px;justify-content:center;border:0;background:none;color:#8a8f85;cursor:pointer;font-family:inherit}
.fcn-tab b{font:700 20px/1.1 var(--font-body);color:#d9ddd2;font-variant-numeric:tabular-nums}
.fcn-tab span{font:600 12.5px var(--font-body)}
.fcn-tab.on b,.fcn-tab.on span{color:#fff}
.fcn-tab.on::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;border-radius:2px;background:#CCFF00}
.fcn-tab .dot{position:absolute;top:10px;right:calc(50% - 26px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff5a5a;color:#fff;font:600 11px/18px var(--font-body)}
.fcn-desc{margin:12px 2px 6px;font:500 13px/1.55 var(--font-body);color:#a8a8a2}
.fcn-sort{display:flex;gap:6px;margin:4px 0 6px}
.fcn-sort button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:none;color:#d0d4ca;font:600 12.5px var(--font-body);cursor:pointer}
.fcn-sort button.on{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fcn-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.fcn-who{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;color:#fff;text-align:left;cursor:pointer;padding:0;font-family:inherit}
.fcn-ava{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 26%);color:#fff;font:700 16px var(--font-body)}
.fcn-ava img{width:100%;height:100%;object-fit:cover}
.fcn-who-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.fcn-who-txt b{font:700 15px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcn-who-txt span{font:500 12.5px var(--font-body);color:#9a9f94;font-variant-numeric:tabular-nums;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcn-acts{flex:none;display:flex;gap:6px;align-items:center}
.fcn-btn{min-height:36px;padding:0 12px;border-radius:10px;border:0;background:#23261f;color:#fff;font:700 13px var(--font-body);cursor:pointer;white-space:nowrap}
.fcn-btn:hover{background:#2c3028}
.fcn-btn.primary{background:#CCFF00;color:#0a0a0a}
.fcn-btn.icon{width:36px;padding:0;display:grid;place-items:center}
.fcn-btn.icon svg{width:18px;height:18px}
.fcn-btn[disabled]{opacity:.5;pointer-events:none}
.fcn-empty{padding:30px 12px;text-align:center;font:500 14px/1.6 var(--font-body);color:#a8a8a2}
.fcn-empty .fcn-btn{margin-top:12px}
.fcn-gate{margin-top:14px;padding:22px 16px;border-radius:20px;background:#141713;text-align:center;font:500 14.5px/1.6 var(--font-body);color:#d0d4ca}
.fcn-gate .fcn-btn{margin-top:12px}
.fcn-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000300;max-width:88%;padding:10px 16px;border-radius:999px;background:#f4f4f2;color:#0a0a0a;font:700 13.5px var(--font-body);box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* from index.html <style id="footop-match-room-v1"> */
/* Match tab finish (2026-10-06): team list with my-team hero, Instagram-group-chat team room, ☰ members drawer. */
.ftl-mine{display:flex;align-items:center;gap:14px;width:100%;margin:6px 0 12px;padding:16px;border-radius:20px;border:1px solid rgba(204,255,0,.35);background:linear-gradient(160deg,rgba(204,255,0,.08),rgba(204,255,0,0) 60%),#141713;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.ftl-mine-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ftl-mine-txt b{font:700 22px/1.25 var(--font-display);overflow-wrap:anywhere;letter-spacing:-0.02em}
.ftl-mine-txt span{font:500 13px var(--font-body);color:#a8a8a2}
.ftl-mine-txt i{font:500 13px var(--font-body);color:#d9ddd2;font-style:normal}
.ftl-mine-go{flex:none;min-height:38px;padding:0 14px;border-radius:999px;background:#CCFF00;color:#0a0a0a;font:600 13px/38px var(--font-body)}
.ftl-note{margin:8px 2px 12px;padding:12px 14px;border-radius:14px;background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.3);color:#ffe3a3;font:500 13.5px/1.55 var(--font-body)}
.ftr-bar{position:sticky;top:-14px;z-index:6;display:flex;align-items:center;gap:6px;margin:-4px -4px 0;padding:8px 4px;background:#0a0a0a;border-bottom:1px solid #222}
.ftr-ic{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.ftr-ic:hover{background:#1a1d19}
.ftr-ic svg{width:22px;height:22px}
.ftr-id{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;color:#fff;text-align:left;padding:2px;cursor:pointer;font-family:inherit}
.ftr-id-txt{min-width:0;display:flex;flex-direction:column}
.ftr-id-txt b{font:700 16px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftr-id-txt span{font:500 12.5px var(--font-body);color:#a8a8a2}
.ftr-tabs{margin:10px 0 10px!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px!important;overflow:visible!important;padding:4px!important}
.ftr-tabs .footop-team-tab-btn{min-width:0!important;min-height:44px!important;padding:0 1px!important;font-size:13px!important;white-space:nowrap}
.ftr-tabs .footop-team-tab-btn span{font-size:13px!important;letter-spacing:-.2px}
.ftr .footop-team-chat-card{padding:10px 10px 12px}
.ftr .footop-team-chat-body{height:calc(100dvh - 350px);min-height:260px}
.ftr-row{display:flex;align-items:flex-end;gap:8px;margin:8px 0 2px;max-width:86%}
.ftr-row.ftr-cont{margin-top:2px}
.ftr-ava{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:hsl(var(--h,90) 45% 28%);color:#fff;font:600 12px var(--font-body)}
.ftr-cont .ftr-ava{background:none}
.ftr-col{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ftr-name{font:700 12px var(--font-body);color:#a8a8a2;margin:0 0 3px 4px}
.ftr-row .footop-dm-msg{margin:0;max-width:100%}
.footop-dm-msg.mine.ftr-cont{margin-top:2px}
.ftd-scrim{position:fixed;inset:0;z-index:1000200;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.ftd-scrim.on{opacity:1}
.ftd{position:fixed;top:0;right:0;bottom:0;z-index:1000210;width:min(340px,88%);display:flex;flex-direction:column;background:#0f110e;border-left:1px solid #262a23;transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.ftd.on{transform:none}
.ftd-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px 16px;border-bottom:1px solid #222}
.ftd-head h2{margin:0;font:700 18px var(--font-body);color:#fff}
.ftd-x{width:40px;height:40px;border-radius:50%;border:0;background:#1a1d19;color:#fff;display:grid;place-items:center;cursor:pointer}
.ftd-x svg{width:20px;height:20px}
.ftd-scroll{flex:1;overflow-y:auto;padding:4px 14px calc(24px + env(safe-area-inset-bottom))}
.ftd-sec{padding:14px 0;border-bottom:1px solid #1d201b}
.ftd-sec:last-child{border-bottom:0}
.ftd-sec h3{margin:0 0 10px;font:700 15px var(--font-body);color:#fff}
.ftd-sec h4{margin:14px 0 6px;font:700 13px var(--font-body);color:#d9ddd2}
.ftd-invite{display:flex;gap:6px}
.ftd-invite input{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#141713;color:#fff;padding:0 12px;font:500 14px var(--font-body);outline:none}
.ftd-invite input:focus{border-color:#CCFF00}
.ftd-btn{min-height:38px;padding:0 12px;border-radius:10px;border:0;background:#23261f;color:#fff;font:700 13px var(--font-body);cursor:pointer;white-space:nowrap}
.ftd-btn.primary{background:#CCFF00;color:#0a0a0a}
.ftd-btn.danger{background:rgba(255,90,90,.12);color:#ff9a8a}
.ftd-btn.wide{width:100%;margin-top:8px;min-height:44px}
.ftd-btn[disabled]{opacity:.5}
.ftd-status{min-height:18px;margin:8px 0 0;font:500 13px var(--font-body);color:#CCFF00}
.ftd-row{display:flex;align-items:center;gap:10px;min-height:52px}
.ftd-ava{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 28%);color:#fff;font:600 14px var(--font-body)}
.ftd-ava img{width:100%;height:100%;object-fit:cover}
.ftd-name{flex:1;min-width:0;border:0;background:none;color:#fff;text-align:left;font:700 14.5px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:0}
.ftd-name em{font-style:normal;color:#8a8f85;font-weight:500}
.ftd-row select{height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#141713;color:#fff;padding:0 6px;font:600 12.5px var(--font-body);color-scheme:dark}
.ftd-role{flex:none;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#d9ddd2;font:700 12px var(--font-body)}
.ftd-role.owner{border-color:#CCFF00;color:#CCFF00}
.ftd-muted{margin:6px 0 0;font:500 12.5px/1.5 var(--font-body);color:#8a8f85}
.ftd-row .ftd-muted{margin:0;flex:none}

/* from index.html <style id="footop-chat-picker-v1-css"> */
/* Emoji + football GIF picker for every chat (2026-10-07): FOOTOP PM 1:1, group PM, team chat.
   A GIF message is stored as the text "::gif::<giphy id>" so it needs no schema change and can only point at GIPHY. */
.fcp-btn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.fcp-btn:hover{background:rgba(255,255,255,.08)}
.fcp-btn svg{width:23px;height:23px}
.fcp-btn[aria-expanded="true"]{color:#CCFF00}
.fcp-scrim{position:fixed;inset:0;z-index:1000300;background:rgba(0,0,0,.4);opacity:0;transition:opacity .18s}
.fcp-scrim.on{opacity:1}
.fcp{position:fixed;left:0;right:0;bottom:0;z-index:1000310;height:min(60vh,460px);display:flex;flex-direction:column;background:#111310;border-top:1px solid #262a23;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.3,1);padding-bottom:env(safe-area-inset-bottom)}
.fcp.on{transform:none}
.fcp-handle{width:40px;height:4px;border-radius:2px;background:#3a3e36;margin:8px auto 4px}
.fcp-tabs{display:flex;gap:4px;margin:4px 12px 8px;padding:4px;border-radius:12px;background:#1a1d19}
.fcp-tab{flex:1;min-height:38px;border:0;border-radius:9px;background:none;color:#a8a8a2;font:700 14px var(--font-body);cursor:pointer}
.fcp-tab.on{background:#2a2e27;color:#fff}
.fcp-pane{flex:1;min-height:0;overflow-y:auto;padding:0 10px 12px;-webkit-overflow-scrolling:touch}
.fcp-pane[hidden]{display:none}
.fcp-group{margin:8px 4px 4px;font:700 12.5px var(--font-body);color:#8a8f85}
.fcp-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.fcp-emoji{aspect-ratio:1;border:0;border-radius:10px;background:none;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.fcp-emoji:hover,.fcp-emoji:focus-visible{background:#22261f}
.fcp-search{position:relative;margin:0 2px 8px}
.fcp-search input{width:100%;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#1a1d19;color:#fff;padding:0 12px 0 38px;font:500 14.5px var(--font-body);outline:none;color-scheme:dark}
.fcp-search input:focus{border-color:#CCFF00}
.fcp-search svg{position:absolute;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:#8a8f85}
.fcp-chips{display:flex;gap:6px;overflow-x:auto;padding:0 2px 8px;scrollbar-width:none}
.fcp-chips::-webkit-scrollbar{display:none}
.fcp-chip{flex:none;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:none;color:#d0d4ca;font:600 13px var(--font-body);cursor:pointer;white-space:nowrap}
.fcp-chip.on{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fcp-gifs{columns:2;column-gap:6px}
.fcp-gif{display:block;width:100%;margin:0 0 6px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#1d201b;cursor:pointer;break-inside:avoid}
.fcp-gif img{display:block;width:100%;height:auto}
.fcp-note{padding:24px 10px;text-align:center;font:500 13.5px/1.6 var(--font-body);color:#a8a8a2}
.fcp-more{display:block;width:100%;min-height:40px;margin:4px 0 0;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:none;color:#d9ddd2;font:700 13px var(--font-body);cursor:pointer}
.fcp-credit{margin:8px 2px 0;text-align:right;font:700 11px var(--font-body);color:#6f746b;letter-spacing:.3px}
/* a GIF in a message */
.fcp-msg-gif{display:block;max-width:220px;border-radius:14px;overflow:hidden;background:#1d201b}
.fcp-msg-gif img{display:block;width:100%;height:auto}
.footop-dm-msg.fcp-gif-msg{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.fcp-gif-tag{display:block;margin-top:3px;font:700 11px var(--font-body);color:#6f746b}
.footop-dm-msg.mine .fcp-gif-tag{text-align:right}

/* from index.html <style id="footop-pm-mutual-v1"> */
/* FOOTOP PM 1:1 only between mutual Connect friends (2026-10-07) */
.fpm-lock{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;text-align:center}
.fpm-lock b{font:600 14px var(--font-body);color:#fff}
.fpm-lock span{font:500 12.5px/1.5 var(--font-body);color:#a8a8a2}
.fpm-lock-btn{margin-top:6px;min-height:38px;padding:0 16px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:600 13px var(--font-body);cursor:pointer}
.fpm-lock.center{margin-top:8px}
.fpm-lock-tag{display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font:700 11px var(--font-body);color:#a8a8a2;vertical-align:1px}
.fpm-new-search{padding:8px 12px 4px}
.footop-dm-input-row{gap:4px!important}
.footop-dm-input-row .footop-dm-share-toggle{flex:none;width:38px!important;min-width:38px!important;height:38px;padding:0!important;border-radius:50%!important;font-size:20px!important;line-height:1}
.footop-dm-input-row .footop-dm-img-btn{flex:none;width:38px!important;min-width:38px!important;padding:0!important}
.footop-dm-input-row .fcp-btn{width:36px;height:38px}
.footop-dm-input-row input[type=text]{flex:1 1 auto;min-width:0}
.fpm-new-search input{width:100%;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;padding:0 12px;font:500 14.5px var(--font-body);outline:none;color-scheme:dark}
.fpm-new-search input:focus{border-color:#CCFF00}

/* from index.html <style id="footop-dm-nav-v1"> */
/* the floating PM window covers the whole column; hide the bottom tabs so they never sit on the message input */
body:has(.footop-dm-overlay.open) #footopBottomNav{display:none!important}

/* from index.html <style id="footop-pm-suggest-v1"> */
/* "PM 보낼 만한 친구" row at the top of the FOOTOP PM inbox (2026-10-07) */
.fpm-suggest{margin:2px 0 10px;padding:4px 0 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.fpm-suggest-head{margin:0 4px 10px;font:600 14px var(--font-body);color:#fff}
.fpm-suggest-row{display:flex;gap:10px;overflow-x:auto;padding:0 4px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
.fpm-suggest-row::-webkit-scrollbar{display:none}
.fpm-sg{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:6px;scroll-snap-align:start}
.fpm-sg-open{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:0;border:0;background:none;color:#fff;cursor:pointer;font-family:inherit}
.fpm-sg-ava{width:62px;height:62px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 28%);color:#fff;font:700 22px var(--font-body);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.fpm-sg-ava.ok{box-shadow:0 0 0 2.5px var(--sk,#CCFF00)}
.fpm-sg-ava img{width:100%;height:100%;object-fit:cover}
.fpm-sg-open b{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12.5px var(--font-body)}
.fpm-sg-why{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px var(--font-body);color:#a8a8a2}
.fpm-sg-back{min-height:30px;padding:0 10px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:600 11.5px var(--font-body);cursor:pointer}
.fpm-sg-back[disabled]{opacity:.6}

/* from index.html <style id="footop-type-ko-v1"> */
/* Korean typography (2026-10-08), from measuring Toss, Wanted, Daangn, Kakao corp, Musinsa and 29CM:
   all of them use one sans family for every Korean line (headlines included), headlines at 700 with about
   -2% tracking, labels/buttons 500-600, nothing under ~11px, paragraphs around 1.5-1.6 line height.
   Footop now does the same: Pretendard everywhere, Anton only for numbers/brand (--font-score). */
body{letter-spacing:-0.01em}
h1,h2,h3{letter-spacing:-0.02em}
p{line-height:1.55}

/* from index.html <style id="footop-team-drawer-v2"> */
/* Team room (2026-10-08): no tab row over the chat. Everything lives in the ☰ drawer, laid out like a group-chat drawer:
   team profile with its photos, then a board (next event wide, 공지 + 투표 side by side, 전술 wide), then members. */
.ftr-tabs{display:none!important}
.ftd-hero{padding:16px 0 14px;border-bottom:1px solid #1d201b}
.ftd-hero-id{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.ftd-hero-id>span{min-width:0;display:flex;flex-direction:column;gap:3px}
.ftd-hero-id b{font:700 19px/1.25 var(--font-body);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftd-hero-id em{font:500 13px/1.4 var(--font-body);font-style:normal;color:#d9ddd2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftd-meta{font:500 12.5px var(--font-body);color:#8a8f85}
.ftd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:14px}
.ftd-ph{aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:#161915;cursor:pointer}
.ftd-ph img,.ftd-ph video{width:100%;height:100%;object-fit:cover;display:block}
.ftd-ph-more{display:grid;place-items:center;color:#d9ddd2;font:600 12.5px/1.35 var(--font-body);border:1px dashed rgba(255,255,255,.18);background:none}
.ftd-board{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 0;border-bottom:1px solid #1d201b}
.ftd-tile{min-width:0;min-height:96px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:14px;border:1px solid #232720;background:#151814;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.ftd-tile:hover{border-color:#3a4034}
.ftd-tile.wide{grid-column:1/-1;min-height:0}
.ftd-k{font:600 12px var(--font-body);color:#a8ad9f}
.ftd-none{font:500 13.5px/1.4 var(--font-body);color:#7d8278}
.ftd-clamp{font:700 14px/1.35 var(--font-body);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ftd-foot{margin-top:auto;font:500 12px var(--font-body);color:#8a8f85}
.ftd-ev{background:linear-gradient(135deg,#1b2310,#151814 70%);border-color:#2f3b18}
.ftd-ev-row{display:flex;align-items:center;gap:12px;width:100%}
.ftd-dday{flex:none;min-width:52px;padding:8px 6px;border-radius:12px;background:#CCFF00;color:#0a0a0a;text-align:center;font:700 15px var(--font-body)}
.ftd-ev-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ftd-ev-txt b{font:700 15px/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftd-ev-txt>span:not(.ftd-k){font:500 12.5px var(--font-body);color:#a8ad9f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftd-tac{flex-direction:row;align-items:center;gap:12px}
.ftd-pitch{flex:none;width:58px;height:40px;fill:#1f3a17;stroke:#7fa63a;stroke-width:1.4}
.ftd-ghost{background:#141713!important;border-color:#1d201b!important;min-height:72px;animation:ftdPulse 1.2s ease-in-out infinite alternate}
.ftd-ph.ftd-ghost{min-height:0}
@keyframes ftdPulse{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ftd-ghost{animation:none}}
.ftr-photos h3{display:flex;align-items:center;gap:6px}
#footopGalleryFile{color:#8a8f85;font:500 12.5px var(--font-body)}
#footopGalleryFile::file-selector-button{margin-right:10px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(204,255,0,.5);background:none;color:#CCFF00;font:600 13px var(--font-body);cursor:pointer}
.ftr-count{font:600 13px var(--font-body);color:#8a8f85}
.ftr-edit>summary{cursor:pointer;font:700 15px var(--font-body);color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ftr-edit>summary::after{content:'펼치기';font:600 12.5px var(--font-body);color:#a8ad9f}
.ftr-edit[open]>summary::after{content:'접기'}
.ftr-edit[open]>summary{margin-bottom:10px}
.ftr-edit>summary::-webkit-details-marker{display:none}

/* from index.html <style id="footop-moments-v2-css"> */
/* Moments v2 (2026-10-08): pausable viewer with likes + a full-screen story maker (photo or color background, text, emoji). */
body.fmv-open #footopBottomNav,body.fmk-open #footopBottomNav{display:none!important}
.footop-moment-viewer{z-index:1000050;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.footop-moment-viewer-head{position:relative;z-index:3}
.fmv-head-actions{display:flex;align-items:center;gap:2px}
.fmv-ic{width:40px;height:40px;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:24px;line-height:1}
.fmv-ic svg{width:20px;height:20px;fill:#fff}
.fmv-ic:hover{background:rgba(255,255,255,.1)}
.footop-moment-viewer-nav{inset:64px 0 110px;z-index:2;-webkit-touch-callout:none}
.footop-moment-viewer-foot{position:relative;z-index:3;padding:10px 14px calc(16px + env(safe-area-inset-bottom))}
.footop-moment-viewer-bars,.footop-moment-viewer-head,.footop-moment-viewer-foot{transition:opacity .2s}
.footop-moment-viewer.holding .footop-moment-viewer-bars,.footop-moment-viewer.holding .footop-moment-viewer-head,.footop-moment-viewer.holding .footop-moment-viewer-foot{opacity:0}
.fmv-paused{position:absolute;left:50%;top:76px;z-index:3;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12.5px var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.footop-moment-viewer.paused .fmv-paused{opacity:1}
.fmv-actions{display:flex;align-items:center;gap:8px}
.fmv-grow{flex:1}
.fmv-pill{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:#fff;font:600 13px var(--font-body);cursor:pointer}
.fmv-pill svg{width:17px;height:17px}
.fmv-pill.danger{color:#ffb3a8;border-color:rgba(255,120,100,.35)}
.fmv-like{width:46px;height:46px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.fmv-like svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;transition:transform .18s}
.fmv-like.on svg{fill:#ff3b5c;stroke:#ff3b5c;transform:scale(1.08)}
.fmv-like:active svg{transform:scale(.85)}
.fmv-burst{position:absolute;left:50%;top:45%;z-index:4;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;opacity:0}
.fmv-burst svg{width:100%;height:100%;fill:#ff3b5c;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.fmv-burst.go{animation:fmvBurst .7s ease-out}
@keyframes fmvBurst{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}60%{opacity:1;transform:scale(.95)}100%{opacity:0;transform:scale(1.05)}}
.fmv-sheet-scrim{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
.fmv-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:62%;display:flex;flex-direction:column;background:#141713;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.3,1);padding-bottom:env(safe-area-inset-bottom)}
.footop-moment-viewer.sheet-open .fmv-sheet-scrim{opacity:1;pointer-events:auto}
.footop-moment-viewer.sheet-open .fmv-sheet{transform:none}
.fmv-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 10px 6px 18px;color:#fff;font:700 16px var(--font-body)}
.fmv-sheet-body{overflow-y:auto;padding:0 14px 16px}
.fmv-stats{display:flex;gap:16px;padding:4px 4px 10px;color:#a8ad9f;font:500 13px var(--font-body)}
.fmv-stats b{color:#fff;font-weight:700}
.fmv-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 4px;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.fmv-ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:hsl(var(--h,90) 45% 28%);color:#fff;font:600 14px var(--font-body)}
.fmv-row-name{flex:1;min-width:0;font:600 14.5px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmv-row-like svg{width:18px;height:18px;fill:#ff3b5c}
.fmv-row-time{flex:none;font:500 12px var(--font-body);color:#8a8f85}
.fmv-empty{margin:10px 4px;color:#8a8f85;font:500 13px var(--font-body)}
.fmv-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:1000400;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:#23261f;color:#fff;font:600 13px var(--font-body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.fmv-toast.on{opacity:1;transform:translate(-50%,0)}
/* story maker */
.fmk{display:none;position:fixed;inset:0;z-index:1000100;flex-direction:column;background:#070807;color:#fff}
.fmk.open{display:flex}
.fmk-top{display:flex;align-items:center;gap:8px;padding:8px 10px 6px}
.fmk-top b{font:700 16px var(--font-body)}
.fmk-top-gap{flex:1}
.fmk-x{width:42px;height:42px;border:0;border-radius:50%;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.fmk-stagewrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 16px}
.fmk-stage{position:relative;height:100%;max-height:100%;aspect-ratio:9/16;max-width:100%;border-radius:18px;overflow:hidden;background:#0d0f0c;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.fmk-bg{position:absolute;inset:0}
.fmk-bg img,.fmk-bg video{position:absolute;inset:0;width:100%;height:100%}
.fmk-bg-blur{object-fit:cover;filter:blur(22px) brightness(.65);transform:scale(1.15)}
.fmk-bg-img{object-fit:contain}
.fmk-note{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.6);font:500 12.5px var(--font-body);text-align:center}
.fmk-layer{position:absolute;inset:0;touch-action:none}
.fmk-item{position:absolute;transform:translate(-50%,-50%);cursor:grab;white-space:pre;text-align:center;line-height:1.25;touch-action:none;user-select:none;-webkit-user-select:none}
.fmk-item.text{font-weight:700;font-family:var(--font-body);letter-spacing:0;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.fmk-item.text.box{text-shadow:none;padding:calc(var(--pad)*.6) var(--pad);border-radius:calc(var(--pad)*.95)}
.fmk-item.emoji{line-height:1}
.fmk-item.sel{outline:1.5px dashed rgba(255,255,255,.85);outline-offset:6px}
.fmk-del{display:none;position:absolute;top:-22px;right:-22px;width:26px;height:26px;border-radius:50%;background:#ff4d4f;color:#fff;font:700 16px/26px var(--font-body);text-align:center;text-shadow:none;cursor:pointer}
.fmk-item.sel .fmk-del{display:block}
.fmk-start{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px}
.fmk-start[hidden]{display:none}
.fmk-start-btn{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#151814;color:#fff;text-align:left;cursor:pointer;font-family:inherit}
.fmk-start-btn span{grid-row:1/3;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#20251c;font:700 22px var(--font-body)}
.fmk-start-btn b{font:700 16px var(--font-body)}
.fmk-start-btn small{font:500 12.5px var(--font-body);color:#a8ad9f}
.fmk-start-btn:hover{border-color:#CCFF00}
.fmk-tools{display:flex;justify-content:center;gap:6px;padding:8px 12px 2px}
.fmk-tools[hidden],.fmk-tool[hidden]{display:none}
.fmk-tool{flex:0 1 84px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding:6px 4px;border:0;border-radius:14px;background:none;color:#d9ddd2;cursor:pointer;font-family:inherit}
.fmk-tool b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1b1e19;font:700 15px var(--font-body);color:#fff}
.fmk-tool span{font:500 11.5px var(--font-body)}
.fmk-tool-swatch{border:2px solid rgba(255,255,255,.6)}
.fmk-panel{margin:6px 12px 0;padding:12px;border-radius:16px;background:#141713;border:1px solid #23271f}
.fmk-panel[hidden]{display:none}
.fmk-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font:700 14px var(--font-body)}
.fmk-done{min-height:34px;padding:0 14px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:700 13px var(--font-body);cursor:pointer}
.fmk-text{width:100%;box-sizing:border-box;min-height:58px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0d0f0c;color:#fff;font:600 15px/1.4 var(--font-body);resize:none;outline:none}
.fmk-text:focus{border-color:#CCFF00}
.fmk-colors,.fmk-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.fmk-c{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.fmk-c.on{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #fff}
.fmk-boxbtn{margin-left:auto;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:none;color:#d9ddd2;font:600 12.5px var(--font-body);cursor:pointer}
.fmk-boxbtn.on{background:#fff;color:#0a0a0a;border-color:#fff}
.fmk-sw{width:40px;height:40px;border-radius:12px;border:2px solid transparent;cursor:pointer;padding:0}
.fmk-sw.on{border-color:#fff}
.fmk-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.fmk-emojis button{aspect-ratio:1;border:0;border-radius:10px;background:none;font-size:24px;cursor:pointer;padding:0}
.fmk-emojis button:hover{background:#1f231c}
.fmk-range{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 12.5px var(--font-body);color:#a8ad9f}
.fmk-range input{flex:1;accent-color:#CCFF00}
.fmk-foot{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.fmk-foot input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#111410;color:#fff;font:500 14px var(--font-body);outline:none}
.fmk-foot input:focus{border-color:#CCFF00}
.fmk-post{flex:none;min-width:84px;height:46px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:700 14px var(--font-body);cursor:pointer}
.fmk-post:disabled{opacity:.35;cursor:not-allowed}
.fmk-status{min-height:18px;padding:0 16px 8px;text-align:center;font:500 12.5px var(--font-body);color:#CCFF00}
@media(prefers-reduced-motion:reduce){.fmv-burst.go{animation:none}.fmv-sheet,.fmv-toast{transition:none}}

/* from index.html <style id="footop-moments-comments-v1"> */
/* Moments comments (2026-10-08) */
.fmv-reply{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:rgba(255,255,255,.85);font:500 14px var(--font-body);text-align:left;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmv-cmt{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.fmv-cmt svg{width:26px;height:26px}
.fmv-cmt span{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#CCFF00;color:#0a0a0a;font:700 11px/18px var(--font-body)}
.fmv-sheet.fmv-csheet{max-height:72%}
.fmv-csheet .fmv-sheet-body{flex:1;min-height:90px}
.fmv-c{display:flex;align-items:flex-start;gap:10px;padding:8px 2px}
.fmv-c .fmv-ava{border:0;cursor:pointer;width:34px;height:34px;font-size:13px}
.fmv-c-body{flex:1;min-width:0}
.fmv-c-top{display:flex;align-items:baseline;gap:6px}
.fmv-c-top b{font:700 13.5px var(--font-body);color:#fff}
.fmv-c-top em{font-style:normal;padding:1px 6px;border-radius:999px;background:rgba(204,255,0,.14);color:#CCFF00;font:600 11px var(--font-body)}
.fmv-c-top span{font:500 12px var(--font-body);color:#8a8f85}
.fmv-c-body p{margin:3px 0 0;color:#e6e9e1;font:500 14px/1.45 var(--font-body);word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap}
.fmv-c-del{flex:none;min-height:30px;padding:0 8px;border:0;background:none;color:#8a8f85;font:600 12px var(--font-body);cursor:pointer}
.fmv-c-del:hover{color:#ff9a8a}
.fmv-quick{display:flex;justify-content:space-between;gap:4px;padding:6px 14px 0;border-top:1px solid #23271f}
.fmv-quick button{flex:1;height:40px;border:0;border-radius:10px;background:none;font-size:22px;cursor:pointer}
.fmv-quick button:hover{background:#1f231c}
.fmv-cform{display:flex;gap:8px;padding:6px 14px 4px}
.fmv-cform input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#0d0f0c;color:#fff;font:500 14px var(--font-body);outline:none}
.fmv-cform input:focus{border-color:#CCFF00}
.fmv-cform button{flex:none;height:44px;padding:0 16px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:700 13.5px var(--font-body);cursor:pointer}
.fmv-cform button:disabled{opacity:.35;cursor:default}
.fmv-cmsg{min-height:16px;margin:0;padding:0 18px 10px;color:#ffb3a8;font:500 12.5px var(--font-body)}

/* from index.html <style id="footop-refresh-v1-css"> */
/* Pull down to refresh + "loading too long" rescue (2026-10-08). The app scrolls inside its own boxes, so the
   phone browser's own pull-to-refresh never fires; this gives the same gesture back, inside the app. */
.fpr-pull{position:fixed;left:50%;top:58px;z-index:1000300;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:#1b1e19;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(0,0,0,.45);display:grid;place-items:center;opacity:0;transform:translateY(-60px);pointer-events:none}
.fpr-pull svg{width:20px;height:20px;stroke:#CCFF00;fill:none;stroke-width:2.4;stroke-linecap:round}
.fpr-pull.ready svg{stroke:#fff}
.fpr-pull.spin{transition:transform .2s,opacity .2s}
.fpr-pull.spin svg{animation:fprSpin .8s linear infinite}
@keyframes fprSpin{to{transform:rotate(360deg)}}
.fpr-slow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 12px;border-radius:14px;background:#151814;border:1px solid #2a2f25;color:#d9ddd2;font:500 13px var(--font-body)}
.fpr-slow button{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:#CCFF00;color:#0a0a0a;font:700 13px var(--font-body);cursor:pointer}
@media(prefers-reduced-motion:reduce){.fpr-pull.spin svg{animation-duration:2s}}

/* from index.html <style id="footop-cardnews-links-v1"> */
.cardnews-origin-link,.cardnews-comments-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:12px;padding:0 16px;border-radius:999px;border:1px solid rgba(204,255,0,.5);background:none;color:#CCFF00;font:600 13px var(--font-body);text-decoration:none;cursor:pointer}
.cardnews-comments-btn{margin-left:6px}

/* from index.html <style id="footop-auth-email-v1-css"> */
/* E-mail confirmation + password reset (2026-10-09) */
.footop-auth-extra:empty{display:none}
.footop-auth-extra{margin:-2px 0 10px}
.footop-auth-resend{width:100%;min-height:42px;border-radius:12px;border:1px solid #3a4230;background:#1a1e17;color:#e9eedf;font:600 14px var(--font-body);cursor:pointer}
.footop-auth-resend:disabled{opacity:.55;cursor:default}
.footop-auth-forgot{display:block;margin:10px auto 0;min-height:40px;padding:0 10px;border:0;background:none;color:#b7bcb0;font:500 13.5px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footop-auth-forgot[hidden]{display:none}
.fae-form{display:grid;gap:10px;margin:2px 0 12px}
.fae-form label{display:grid;gap:6px;color:#b7bcb0;font:600 13px var(--font-body)}
.fae-form input{height:46px;padding:0 14px;border-radius:12px;border:1px solid #2c3127;background:#0d0f0c;color:#fff;font:500 15px var(--font-body);outline:none}
.fae-form input:focus{border-color:#CCFF00;box-shadow:0 0 0 3px rgba(204,255,0,.15)}
.fae-msg{min-height:18px;margin:0 0 10px;color:#ffb3a8;font:500 13px/1.45 var(--font-body)}
.fae-msg.ok{color:#CCFF00}

/* from index.html <style id="footop-suggest-v1-css"> */
/* Player suggestions + invite (2026-10-09) */
.fsu{margin:6px 0 14px}
.fsu[hidden]{display:none}
.fsu-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 10px}
.fsu-head h3{margin:0;font:700 15px/1.3 var(--font-body);color:#fff;letter-spacing:-.01em}
.fsu-head span{color:#8a8f85;font:500 12px var(--font-body)}
.fsu-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:none}
.fsu-row::-webkit-scrollbar{display:none}
.fsu-card{position:relative;flex:none;width:142px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 12px;border-radius:16px;background:#141713;border:1px solid #23271f;text-align:center}
.fsu-x{position:absolute;top:4px;right:4px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:#7d8278;display:grid;place-items:center;cursor:pointer;padding:0}
.fsu-x:hover{color:#fff;background:#1f231c}
.fsu-x svg{width:14px;height:14px}
.fsu-who{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;border:0;background:none;color:inherit;cursor:pointer;padding:0}
.fsu-ava{width:62px;height:62px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:hsl(var(--h,90) 45% 26%);color:#fff;font:700 22px var(--font-body)}
.fsu-ava img{width:100%;height:100%;object-fit:cover}
.fsu-who b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 14px var(--font-body);color:#fff}
.fsu-why{min-height:34px;color:#a9aea2;font:500 12px/1.4 var(--font-body);word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fsu-card .fcn-btn{width:100%}
.fsu-card .fcn-btn.done{background:#23261f;color:#cfd4c6}
.fsu-invite{justify-content:center;border-style:dashed;border-color:#3a4230;background:none}
.fsu-invite .fsu-ava{background:#1d211a;color:#CCFF00}
.fsu-invite .fsu-ava svg{width:28px;height:28px}
.footop-main-card[hidden]{display:none!important}
/* Main tab card */
.fsu-list{display:grid;gap:2px;margin:2px 0 10px}
.fsu-li{display:flex;align-items:center;gap:10px;min-height:56px}
.fsu-li .fsu-who{flex-direction:row;align-items:center;gap:10px;flex:1;min-width:0;text-align:left}
.fsu-li .fsu-ava{width:42px;height:42px;font-size:15px;flex:none}
.fsu-li-txt{display:flex;flex-direction:column;min-width:0}
.fsu-li-txt b{font:700 14px var(--font-body);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsu-li-txt span{color:#a9aea2;font:500 12px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsu-foot{display:flex;gap:8px}
.fsu-foot .fcn-btn{flex:1;min-height:40px}
.fsu-empty{margin:0 0 10px;color:#a9aea2;font:500 13px/1.55 var(--font-body);word-break:keep-all}

/* from index.html <style id="footop-admin-v1-css"> */
/* Operator report review (2026-10-09) */
.fsf-report{font:700 12px var(--font-body)!important;color:#ffb3a8!important;padding:0 10px!important;width:auto!important}
.fad{position:fixed;inset:0;z-index:1000060;display:none;flex-direction:column;background:#0b0c0a;color:#fff}
.fad.open{display:flex}
body:has(.fad.open) #footopBottomNav{display:none!important}
.fad-head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;border-bottom:1px solid #1f231c}
.fad-head h2{flex:1;margin:0;font:700 18px var(--font-body);letter-spacing:-.01em}
.fad-x{width:44px;height:44px;border:0;border-radius:12px;background:#171a15;color:#fff;font-size:20px;cursor:pointer}
.fad-tabs{display:flex;gap:6px;padding:10px 12px}
.fad-tabs button{flex:1;height:40px;border-radius:12px;border:1px solid #262b22;background:#121410;color:#cfd4c6;font:600 14px var(--font-body);cursor:pointer}
.fad-tabs button.on{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fad-body{flex:1;overflow-y:auto;padding:4px 12px 28px}
.fad-empty{margin:40px 8px;color:#a9aea2;text-align:center;font:500 14px/1.6 var(--font-body)}
.fad-card{border:1px solid #23271f;background:#131611;border-radius:16px;padding:14px;margin:0 0 12px}
.fad-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fad-type{font:700 14px var(--font-body)}
.fad-count{padding:2px 8px;border-radius:999px;background:rgba(255,120,100,.16);color:#ffb3a8;font:700 12px var(--font-body)}
.fad-time{margin-left:auto;color:#8a8f85;font:500 12px var(--font-body)}
.fad-reasons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fad-reasons span{padding:3px 9px;border-radius:999px;background:#1d211a;color:#dfe4d6;font:600 12px var(--font-body)}
.fad-snap{border-radius:12px;background:#0c0e0b;border:1px solid #20241d;padding:10px 12px;margin:6px 0 10px;color:#eef2e6;font:500 14px/1.55 var(--font-body);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.fad-snap img{display:block;max-width:100%;max-height:220px;border-radius:10px;margin-top:6px;object-fit:contain;background:#000}
.fad-snap small{display:block;color:#8a8f85;font:500 12px var(--font-body);margin-bottom:4px}
.fad-state{font:600 12px var(--font-body);color:#a9aea2;margin-bottom:8px}
.fad-state.gone{color:#8fd18a}
.fad-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font:500 13px var(--font-body);color:#cfd4c6}
.fad-who button{border:0;background:none;color:#fff;font:700 14px var(--font-body);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.fad-who .ban{color:#ffb3a8;font-weight:700}
.fad-by{color:#8a8f85;font:500 12px/1.5 var(--font-body);margin-bottom:10px}
.fad-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fad-acts button{min-height:42px;border-radius:12px;border:1px solid #2c3127;background:#1a1e17;color:#fff;font:600 13.5px var(--font-body);cursor:pointer}
.fad-acts .warn{background:#2a1512;border-color:#5a2a22;color:#ffc2b8}
.fad-acts .ok{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fad-acts button:disabled{opacity:.5}

/* operator: more tabs (server status, usage) — scroll sideways instead of squeezing (2026-10-25) */
.fad-tabs{overflow-x:auto;scrollbar-width:none}
.fad-tabs::-webkit-scrollbar{display:none}
.fad-tabs button{flex:none;padding:0 14px;white-space:nowrap}
.fad-advice{margin:8px 0 2px;padding-left:18px;color:#e6e9e0;font:500 14px/1.6 var(--font-body)}
.fad-advice li{margin:4px 0;word-break:keep-all}
.fad-srow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #222620;font:500 13.5px/1.45 var(--font-body);color:#b9beb0}
.fad-srow:first-of-type{border-top:0}
.fad-srow b{color:#f1f3ec;font-weight:600;text-align:right;word-break:keep-all}
.fad-srow.warn b{color:#ffb38a}
.fad-srow span{min-width:0;overflow-wrap:anywhere}

/* operator: usage statistics (2026-10-26) */
.fad-range{display:flex;gap:6px;margin:0 0 10px}
.fad-range button{height:34px;padding:0 14px;border-radius:999px;border:1px solid #262b22;background:#121410;color:#cfd4c6;font:600 13px var(--font-body);cursor:pointer}
.fad-range button.on{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.fad-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.fad-kpis b{display:block;color:#f1f3ec;font:700 22px var(--font-body)}
.fad-kpis small{color:#9ea596;font:500 12px var(--font-body)}
.fad-days{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:10px}
.fad-days>div{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.fad-days i{display:block;width:100%;max-width:22px;height:calc(var(--h) * 72px);min-height:2px;border-radius:4px 4px 1px 1px;background:#CCFF00}
.fad-days small{color:#8d9486;font:500 10.5px var(--font-body)}
.fad-bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;font:500 13px var(--font-body);color:#cfd4c6}
.fad-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fad-bar i{display:block;height:8px;width:calc(var(--w) * 100%);min-width:3px;border-radius:99px;background:#CCFF00}
.fad-bar b{color:#f1f3ec;font-weight:600;min-width:28px;text-align:right}

/* from index.html <style id="footop-age-gate-v1-css"> */
/* Sign-up date of birth (2026-10-09) */
.footop-auth-consent.fag{display:grid;gap:12px;margin:2px 0 6px}
.footop-auth-consent.fag[hidden]{display:none}
.fag-label{display:block;margin:0 0 6px;color:#cfd4c6;font:600 13px var(--font-body)}
.fag-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.fag-row select{height:46px;padding:0 10px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#0d0f0c;color:#fff;font:500 15px var(--font-body);color-scheme:dark}
.fag-row select:focus{outline:none;border-color:#CCFF00;box-shadow:0 0 0 3px rgba(204,255,0,.15)}
.fag-row select:disabled{opacity:.5}
.fag-note{margin:6px 0 0;color:#9ea394;font:500 12px/1.5 var(--font-body);word-break:keep-all}
.fag-note.blocked{color:#ffb3a8}
.fag-agree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:#B9C2A0}
.fag-agree input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:#CCFF00}
.fag-agree a{color:#CCFF00;text-underline-offset:3px}
.fag-note.kid{color:#ffd54a}
html[data-theme="light"] .fag-note.kid{color:#8a5a00}

/* Notifications: Settings card + Main card (2026-10-09) */
.fpu-actions{display:flex;flex-wrap:wrap;gap:8px}
.fpu-actions:empty{display:none}
.fpu-prefs{display:grid;gap:2px;margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
.fpu-prefs[hidden]{display:none}
.fpu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;color:#e6e9e1;font:500 14px var(--font-body)}
.fpu-row input{width:22px;height:22px;accent-color:#CCFF00;flex:none}
.fpu-row select{height:40px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#0d0f0c;color:#fff;font:500 14px var(--font-body);color-scheme:dark}
.fpu-note{margin:6px 0 0;color:#9ea394;font:500 12px/1.5 var(--font-body);word-break:keep-all}
.fpu-msg{min-height:16px;margin:8px 0 0;color:#CCFF00;font:500 12.5px/1.5 var(--font-body)}
.fpu-msg:empty{display:none}
.fpu-main-text{margin:2px 0 12px;color:#cfd4c6;font:500 13.5px/1.55 var(--font-body);word-break:keep-all}

/* FOOTOP X: payments not open yet (2026-10-09) */
.footop-x-modal-soon{margin:6px 0 4px;color:#cfc6ff;font:500 13px/1.55 var(--font-body);word-break:keep-all;text-align:center}
/* FOOTOP X: Toss payments (2026-10-10) */
.footop-x-test{margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:rgba(204,255,0,.08);border:1px solid rgba(204,255,0,.25);color:#e6ff9a;font:600 12.5px/1.45 var(--font-body);text-align:center}
.footop-x-agree{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#d9d4f2;font:400 12.5px/1.55 var(--font-body);text-align:left;word-break:keep-all;cursor:pointer}
.footop-x-agree input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:#9d5cff}
.footop-x-agree a{color:#cdb6ff;text-decoration:underline}
.footop-x-seller{margin:12px 0 0;color:#8f8a9e;font:400 11px/1.5 var(--font-body);text-align:center;word-break:keep-all}
.footop-x-receipt{display:inline-block;margin-left:8px;color:#cdb6ff;text-decoration:underline}

/* Operator: FOOTOP X tab (2026-10-09) */
.fad-xform{display:grid;gap:8px}
.fad-xform input,.fad-xform select{height:44px;padding:0 12px;border-radius:12px;border:1px solid #2c3127;background:#0c0e0b;color:#fff;font:500 15px var(--font-body);color-scheme:dark}
.fad-xform button{min-height:44px;border-radius:12px;border:0;background:#CCFF00;color:#0a0a0a;font:700 14px var(--font-body);cursor:pointer}
.fad-xmsg{margin:0;min-height:16px;color:#cfd4c6;font:500 13px var(--font-body)}
.fad-xrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fad-xrow b{font:700 15px var(--font-body)}
.fad-xrow span,.fad-xrow small{color:#8a8f85;font:500 12px var(--font-body)}
.fad-xrow button{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid #2c3127;background:#1a1e17;color:#fff;font:600 13px var(--font-body);cursor:pointer}
/* Operator: FOOTOP X payments (2026-10-10) */
.fad-paytitle{margin:18px 0 8px}
.fad-payrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fad-payrow b{font:700 15px var(--font-body)}
.fad-payrow span,.fad-payrow small{color:#8a8f85;font:500 12px var(--font-body)}
.fad-payrow em{font-style:normal;color:#e6ff9a;font:600 11px var(--font-body)}
.fad-payrow.s-succeeded .st{color:#9fffb0}
.fad-payrow.s-refunded .st{color:#ffc93c}
.fad-payrow.s-failed .st{color:#ff9f9f}
.fad-payact{display:flex;align-items:center;gap:10px;flex:none}
.fad-payact a{color:#cfd4c6;font:500 13px var(--font-body)}
.fad-payact button{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid #5a2a2a;background:#241414;color:#ffb3a8;font:600 13px var(--font-body);cursor:pointer}

/* "Topi가 참고한 Footop 자료" chips under Topi's answers (2026-10-09) */
.tkn{margin:8px 0 2px;max-width:100%}
.tkn-head{margin:0 0 6px 2px;color:#9ea394;font:600 12px var(--font-body)}
.tkn-list{display:grid;gap:6px}
.tkn-chip{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid #2a2f25;background:#121510;color:#e6e9e1;text-align:left;font:500 13.5px/1.35 var(--font-body)}
button.tkn-chip{cursor:pointer}
button.tkn-chip:hover{border-color:#4a5a1c;background:#161a12}
.tkn-kind{flex:none;padding:2px 8px;border-radius:999px;background:#1f2519;color:#CCFF00;font:700 11px var(--font-body)}
.tkn-dna .tkn-kind{color:#b78dff;background:#211a2e}
.tkn-app .tkn-kind{color:#7fd4ff;background:#16232b}
.tkn-gear .tkn-kind{color:#ffc93c;background:#2a2412}
.tkn-title{flex:1;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.tkn-go{flex:none;color:#8a8f85;font-size:18px}
.tkn-train .tkn-kind{color:#ff9f6b;background:#2b1b12}
.tkn-match .tkn-kind{color:#6bffc4;background:#122a20}

/* Topi 라이트 (2026-10-10): on-device small model — chip, sheet, answer badge */
.topic-chip.tlt-chip{border-color:#2f3a22}
.topic-chip.tlt-chip.is-on{background:#1d2a0f;border-color:#6f9a1a;color:#dfff7a}

.tlt-overlay{position:fixed;inset:0;z-index:1000200;display:none}
.tlt-overlay.open{display:block}
.tlt-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.tlt-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow-y:auto;background:#121510;border-top:1px solid #2a3022;border-radius:22px 22px 0 0;padding:6px 18px calc(22px + env(safe-area-inset-bottom));animation:tltUp .28s cubic-bezier(.2,.8,.3,1)}
@keyframes tltUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tlt-sheet{animation:none}}
body.tlt-open #footopBottomNav{display:none!important}
.tlt-head{display:flex;align-items:center;gap:10px;padding:12px 0 6px}
.tlt-head h2{margin:0;font:700 21px/1.25 var(--font-display);letter-spacing:-.02em;color:#f2f4ee}
.tlt-tag{padding:3px 9px;border-radius:999px;background:#1f2519;color:#CCFF00;font:600 12px var(--font-body)}
.tlt-x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:#1b1f17;color:#c9cdc2;font-size:22px;line-height:1;cursor:pointer}
.tlt-lead{margin:2px 0 14px;color:#c4c8bd;font:400 14.5px/1.55 var(--font-body)}
.tlt-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.tlt-compare>div{padding:12px;border-radius:14px;background:#171a14;border:1px solid #24291f}
.tlt-compare>div.me{border-color:#4d6a16;background:#161d0e}
.tlt-compare b{display:block;margin-bottom:6px;color:#f2f4ee;font:700 14px var(--font-body)}
.tlt-compare>div.me b{color:#dfff7a}
.tlt-compare ul{margin:0;padding-left:16px;color:#aeb3a6;font:400 12.5px/1.55 var(--font-body)}
.tlt-warn{margin:0 0 12px;padding:10px 12px 10px 28px;border-radius:12px;background:#221d10;color:#f1d58a;font:400 13px/1.5 var(--font-body)}
.tlt-primary{width:100%;min-height:52px;border:0;border-radius:14px;background:#CCFF00;color:#0b0d08;font:700 16px var(--font-body);cursor:pointer}
.tlt-primary:disabled{opacity:.55;cursor:default}
.tlt-ghost{width:100%;min-height:46px;margin-top:10px;border:1px solid #2c3227;border-radius:14px;background:transparent;color:#c4c8bd;font:500 14px var(--font-body);cursor:pointer}
.tlt-progress{height:10px;border-radius:999px;background:#22281b;overflow:hidden}
.tlt-progress i{display:block;height:100%;background:#CCFF00;border-radius:999px;transition:width .3s ease}
.tlt-status{margin:8px 0 2px;color:#e6e9e1;font:600 14px var(--font-body);font-variant-numeric:tabular-nums}
.tlt-note{margin:4px 0 0;color:#9ea394;font:400 13px/1.5 var(--font-body)}
.tlt-err{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#2a1414;color:#ffb3a8;font:500 13.5px/1.5 var(--font-body)}
.tlt-switch{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:14px;border:1px solid #2c3227;background:#171a14;color:inherit;text-align:left;cursor:pointer}
.tlt-switch span{flex:1;min-width:0}
.tlt-switch b{display:block;color:#f2f4ee;font:700 15px var(--font-body)}
.tlt-switch small{display:block;margin-top:3px;color:#9ea394;font:400 12.5px/1.45 var(--font-body)}
.tlt-switch i{flex:none;position:relative;width:48px;height:28px;border-radius:999px;background:#33392c;transition:background .2s}
.tlt-switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#e6e9e1;transition:transform .2s}
.tlt-switch.on{border-color:#4d6a16}
.tlt-switch.on i{background:#8fc21a}
.tlt-switch.on i::after{transform:translateX(20px)}
.tlt-fine{margin:16px 0 0;color:#8a8f85;font:400 12px/1.55 var(--font-body)}

.tlt-badge{margin:6px 0 0 2px;color:#9fbf4a;font:500 12px var(--font-body)}
.tlt-offer{display:block;margin-top:10px;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid #6f9a1a;background:#1d2a0f;color:#dfff7a;font:600 14px var(--font-body);cursor:pointer}
.tlt-models{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.tlt-model{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:14px;border:1px solid #2c3227;background:#171a14;color:inherit;text-align:left;cursor:pointer}
.tlt-model b{color:#f2f4ee;font:700 14px var(--font-body)}
.tlt-model span{color:#CCFF00;font:600 12px var(--font-body)}
.tlt-model small{color:#9ea394;font:400 12px/1.45 var(--font-body);word-break:keep-all}
.tlt-model.on{border-color:#8fc21a;background:#1a230f;box-shadow:inset 0 0 0 1px #8fc21a}
.tlt-model:disabled{opacity:.5;cursor:default}

/* Polish pass after the 2026-10-10 audit — patterns borrowed from popular apps (Strava/Apple Fitness home,
   OneFootball/Naver Sports news, Instagram DM, ChatGPT start screen, Nike Training Club). */

/* 1. "이 탭 사용법" when folded: one quiet line (Toss/Kakao tip-bar style), not a 60px card on every tab */
.fti.is-collapsed{margin:4px 0 12px!important;border-radius:14px!important;background:#121510!important;border-color:rgba(255,255,255,.06)!important}
.fti.is-collapsed::before{display:none}
.fti.is-collapsed .fti-toggle{min-height:40px;padding:4px 8px 4px 10px;gap:8px}
.fti.is-collapsed .fti-tg-ic{width:24px;height:24px;border-radius:8px;background:rgba(204,255,0,.12);color:#CCFF00}
.fti.is-collapsed .fti-tg-ic svg{width:14px;height:14px}
.fti.is-collapsed .fti-tg-txt b{font:500 13px var(--font-body);color:#b8bdb0}
.fti.is-collapsed .fti-tg-act{min-height:32px;padding:0 10px;background:transparent;border:0;color:#a9c76a;font:500 12.5px var(--font-body)}

/* 2. Main: greeting + one-row identity strip, then today's things to do */
.footop-main-greet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.footop-main-greet h2{margin:0;font:700 22px/1.3 var(--font-display);letter-spacing:-.02em;color:#f2f4ee}
.footop-main-mini{margin-bottom:14px}
.fmc-mini{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#141713;color:inherit;text-align:left;cursor:pointer}
.fmc-mini:hover{border-color:rgba(204,255,0,.28)}
.fmc-mini-ava{flex:0 0 56px;width:56px;height:56px}
.fmc-mini-ava .footop-hero-avatar{width:56px!important;height:56px!important;margin:0!important;border-radius:50%;overflow:hidden}
.fmc-mini-ava .footop-hero-avatar img,.fmc-mini-ava .footop-hero-avatar svg{width:100%;height:100%;object-fit:cover}
.fmc-mini-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fmc-mini-name{display:flex;align-items:center;gap:6px;font:700 17px var(--font-body);color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fmc-mini-name em{font-style:normal;padding:1px 7px;border-radius:999px;border:1px solid rgba(204,255,0,.4);color:#dfff7a;font:600 11px var(--font-body)}
.fmc-mini-sub{color:#8c8f86;font:500 12px var(--font-body)}
.fmc-mini-xp{display:flex;align-items:center;gap:8px;margin-top:2px}
.fmc-mini-xp b{font:700 12px var(--font-body);color:#CCFF00}
.fmc-mini-xp i{flex:1;height:6px;border-radius:999px;background:#262a22;overflow:hidden}
.fmc-mini-xp s{display:block;height:100%;background:#CCFF00;border-radius:999px;text-decoration:none}
.fmc-mini-xp small{flex:none;color:#8c8f86;font:500 11px var(--font-body)}
.fmc-mini-go{flex:none;color:#6f736a;font-size:24px;line-height:1}
.footop-main-introlink{display:block;margin:18px auto 6px;padding:10px 14px;min-height:40px;border:0;background:transparent;color:#a9c76a;font:500 13.5px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footop-main-introback{display:inline-flex;align-items:center;min-height:40px;margin:0 0 8px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#141713;color:#e6e9e1;font:600 13.5px var(--font-body);cursor:pointer}

/* 3. Main News: news first, search behind an icon, keywords as one swipeable line */
.mn-search-btn.on{background:#CCFF00;color:#0b0d08;border-color:#CCFF00}
.mn-search{margin-top:10px}
.mn-trending{margin:4px 0 14px}
.mn-trending .trk-trending-head{margin-bottom:8px}
.mn-trending .trk-trending-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.mn-trending .trk-trending-chips::-webkit-scrollbar{display:none}
.mn-trending .trk-trending-chip{flex:none}

/* 4. Training home: title + position chip in one line, today's routine right under it */
#panelTraining .ft32-head-compact{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px}
#panelTraining .ft32-head-compact .ft32-title{font:700 24px/1.25 var(--font-display);letter-spacing:-.02em;margin:0}
#panelTraining .ft32-pos-chip{display:flex;flex-direction:column;align-items:flex-end;gap:1px;max-width:58%;padding:6px 12px;border-radius:14px;border:1px solid rgba(204,255,0,.3);background:#141713;color:#e6e9e1;cursor:pointer;text-align:right}
#panelTraining .ft32-pos-chip small{color:#8c8f86;font:500 11px var(--font-body)}
#panelTraining .ft32-pos-chip strong{color:#CCFF00;font:700 14px var(--font-body);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
#panelTraining .ft32-hero-card + .ft32-coach-banner{margin-top:12px}

/* 5. Cardnews: 2 columns on phones (3 was too cramped for a headline), taller cards */
.feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.feed-post{height:auto!important;aspect-ratio:4/5}
.feed-post-title{font-size:15px!important;line-height:1.35!important}
.feed-post-top{flex-wrap:wrap;gap:4px}
.feed-post-tag,.feed-post-type{font-size:11px!important;padding:3px 8px!important}
.feed-count{color:#9aa18f!important}

/* 6. Comfortable tap targets for chip rows */
.trk-trending-chip,.suggest-chip,.feed-filter{min-height:36px;display:inline-flex;align-items:center}
.trk-trending-chip{font:600 13px var(--font-body)!important;padding:6px 14px!important}

/* 7. PM inbox: search like Instagram DM, real photos in the list */
.fdm-search{display:flex;align-items:center;gap:8px;margin:12px 16px 4px;padding:0 12px;min-height:42px;border-radius:12px;background:rgba(255,255,255,.06);color:#8c8f86}
.fdm-search input{flex:1;min-width:0;height:40px;border:0;background:transparent;color:#f2f4ee;font:500 15px var(--font-body);outline:none}
.fdm-search input::placeholder{color:#8c8f86}
.fsk-ava.has-photo{overflow:hidden;background:#222}
.fsk-ava.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* 8. My team card: next schedule line */
.ftl-mine-txt .ftl-mine-next{font:600 12.5px var(--font-body);color:#CCFF00;font-style:normal}
.ftl-mine-txt .ftl-mine-next:empty{display:none}

/* 9. Coach Topi: controls stay in the top row; topics become start-screen cards (ChatGPT style) */
#panelCoach .topic-row{padding-top:4px;padding-bottom:10px}
#panelCoach .topi-ctl.off{display:none}
#panelCoach [data-brain-intro]{display:none}
#panelCoach .intro-card{border-style:solid}
.topi-hello{display:flex;flex-direction:column;gap:6px;margin:2px 0 14px}
.topi-hello b{font:700 19px/1.35 var(--font-display);letter-spacing:-.02em;color:#f2f4ee}
.topi-hello span{color:#a8ab9f;font:400 13.5px/1.55 var(--font-body)}
.topi-suggest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.topi-suggest{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#171a14;color:inherit;text-align:left;cursor:pointer}
.topi-suggest:hover{border-color:rgba(204,255,0,.35)}
.topi-suggest b{font:600 14px var(--font-body);color:#f2f4ee}
.topi-suggest span{font:400 12px/1.4 var(--font-body);color:#9a9e92}
.topi-suggest[data-topi="gear"]{border-color:rgba(204,255,0,.35);background:#1a2110}
.topi-suggest[data-topi="gear"] b{color:#dfff7a}
.topi-suggest.is-more{display:none}
.topi-suggest-grid.show-all .topi-suggest.is-more{display:flex}
.topi-suggest-more{display:block;margin:10px auto 0;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#c4c8bd;font:500 13px var(--font-body);cursor:pointer}

/* Main News header in one row: title left, language / search / refresh right */
.fs-news-head .tracking-news-controls{display:flex!important;flex-direction:row!important;justify-content:space-between!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important}
.fs-news-head .tracking-news-controls>div:first-child{min-width:0}
.fs-news-head{padding-top:14px!important;padding-bottom:14px!important}
.fs-news-head .fs-underline{display:none}
.fs-news-head .fs-title{margin:0}
.fnl-chip{display:inline-flex!important;align-items:center;gap:5px;min-height:38px}

/* Coach Topi: on short phone screens the slogan under the input box only takes chat space */
@media (max-height:820px){ #composerBar .coach-tagline-strip, .coach-tagline-strip{display:none!important} }

/* very small phones (320px): the three "오늘 한눈에" boxes always fit, XP line keeps the bar */
.footop-yourday-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
.footop-yourday-stat{min-width:0!important;padding-left:6px!important;padding-right:6px!important}
.footop-yourday-val{font-size:clamp(12px,3.6vw,15px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.footop-yourday-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:360px){ .fmc-mini-xp small{display:none} }
.footop-main-grid{grid-template-columns:minmax(0,1fr)!important}
.footop-main-grid>*{min-width:0}

/* news: FOOTOP's own one-line summary label in the card viewer (2026-10-26) */
.cardnews-ours{display:inline-block;margin:0 8px 6px 0;padding:3px 9px;border-radius:999px;background:rgba(204,255,0,.16);color:#CCFF00;font:700 12px var(--font-body);vertical-align:middle}
.cardnews-readnote{margin:0 0 14px;color:#d8dcd2;font:500 15px/1.6 var(--font-body);word-break:keep-all}

/* Main home v3 (2026-10-10): Instagram story row, Apple Fitness rings + Duolingo quests/week,
   Netflix continue shelf, Apple Sports match card, Strava weekly bars, Toss news rows + 홈 편집. */
.footop-main-grid{gap:14px!important}
.fmh-block{min-width:0}
.fmh-block:empty{display:none}
.fmh-card{padding:16px!important}
.fmh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fmh-head h3{margin:0;font:700 17px/1.3 var(--font-body);letter-spacing:-.02em;color:#F2F4EE}
.fmh-head-note{color:#9AA093;font:500 13px var(--font-body);text-align:right}
.fmh-head-out{margin:2px 2px 10px}
.fmh-muted{margin:0 0 12px;color:#9AA093;font:400 14px/1.55 var(--font-body)}
.fmh-sk-line{height:14px;border-radius:7px;background:#1E231B;margin-top:8px}
.fmh-sk-line.short{width:60%}
.fmh-more{min-height:32px;padding:0 4px;border:0;background:none;color:#A9C76A;font:500 13.5px var(--font-body);cursor:pointer}

/* story row */
.fmh-stories{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fmh-stories::-webkit-scrollbar{display:none}
.fmh-story{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;padding:0;border:0;background:none;color:#C9CDC3;cursor:pointer}
.fmh-story small{max-width:66px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12px var(--font-body)}
.fmh-story-ava{width:62px;height:62px;border-radius:50%;padding:3px;background:#2A2F27;display:block}
.fmh-story.new .fmh-story-ava{background:conic-gradient(from 200deg,#CCFF00,#3DD9FF,#B78CFF,#CCFF00)}
.fmh-story.add .fmh-story-ava,.fmh-story.find .fmh-story-ava{background:#2A2F27}
.fmh-story-ava>img,.fmh-story-ava>b{width:100%;height:100%;border-radius:50%;border:3px solid #0A0A0A;display:grid;place-items:center;object-fit:cover}
.fmh-story-ava>b{background:hsl(var(--h,90) 45% 28%);color:#fff;font:700 21px var(--font-body)}
.fmh-story.find .fmh-story-ava>b{background:#161A14;color:#CCFF00;font-size:20px}
.fmh-story-plus{position:absolute;top:44px;left:44px;width:22px;height:22px;border-radius:50%;background:#CCFF00;color:#0B0F06;border:2px solid #0A0A0A;font:800 15px/18px var(--font-body);font-style:normal;text-align:center}
.fmh-story.fmh-sk .fmh-story-ava{background:#1A1E17}
.fmh-story.fmh-sk small{width:44px;height:10px;border-radius:5px;background:#1A1E17}

/* today's goals: rings + quests + week */
.fmh-goals-top{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center}
.fmh-ring-wrap{position:relative;width:112px;height:112px}
.fmh-rings{width:100%;height:100%;transform:rotate(-90deg)}
.fmh-rings circle{fill:none;stroke-width:9;stroke-linecap:round}
.fmh-rings .bg{opacity:.16}
.fmh-rings .fg{stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.fmh-rings.in .fg{stroke-dashoffset:calc(100 - var(--v))}
.fmh-rings.in .fg:nth-of-type(4){transition-delay:.12s}.fmh-rings.in .fg:nth-of-type(6){transition-delay:.24s}
.fmh-ring-num{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:40px}
.fmh-ring-num b{font:400 26px/1 var(--font-score);color:#fff}
.fmh-ring-num small{color:#9AA093;font:500 13px var(--font-body);margin-left:1px}
.fmh-quests{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.fmh-quests li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:9px;align-items:center}
.fmh-quests li>i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.fmh-quests li span{min-width:0;display:flex;flex-direction:column}
.fmh-quests b{font:600 14px/1.3 var(--font-body);color:#F2F4EE}
.fmh-quests small{font:400 12px/1.35 var(--font-body);color:#9AA093;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fmh-quests li.done b{color:#9AA093;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.fmh-q-btn{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#C9CDC3;font:600 13px var(--font-body);cursor:pointer;white-space:nowrap}
.fmh-q-btn.go{background:#CCFF00;border-color:#CCFF00;color:#0B0F06}
.fmh-row-card .fmh-q-btn{min-height:38px}
.fmh-cal{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.fmh-cal-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font:500 13px var(--font-body);color:#9AA093}
.fmh-cal-head b{color:#F2F4EE;font-weight:600}
.fmh-cal ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.fmh-cal li{display:flex;flex-direction:column;align-items:center;gap:5px}
.fmh-cal li small{font:500 11.5px var(--font-body);color:#7D8478}
.fmh-cal li span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1A1E17;color:#9AA093;font:500 12.5px var(--font-body)}
.fmh-cal li.on span{background:#CCFF00;color:#0B0F06}
.fmh-cal li.on span svg{width:15px;height:15px}
.fmh-cal li.today span{box-shadow:inset 0 0 0 2px #CCFF00;color:#F2F4EE}
.fmh-cal li.today small{color:#CCFF00}
.fmh-cal li.future span{opacity:.45}
@media (max-width:350px){ .fmh-goals-top{grid-template-columns:1fr} .fmh-ring-wrap{margin:0 auto} .fmh-cal li span{width:28px;height:28px} }

/* continue shelf */
.fmh-shelf{display:flex;gap:10px;overflow-x:auto;padding:0 2px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.fmh-shelf::-webkit-scrollbar{display:none}
.fmh-cont{flex:none;width:min(62%,220px);min-height:118px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.07);background:#141713;color:inherit;text-align:left;cursor:pointer;position:relative;overflow:hidden}
.fmh-cont::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c)}
.fmh-cont small{font:600 12px var(--font-body);color:var(--c)}
.fmh-cont b{font:700 15px/1.35 var(--font-body);color:#F2F4EE;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmh-cont span{font:400 12.5px var(--font-body);color:#9AA093}
.fmh-cont-bar{margin-top:auto;width:100%;height:5px;border-radius:9px;background:#252A22;overflow:hidden}
.fmh-cont-bar s{display:block;height:100%;background:var(--c);border-radius:9px}
.fmh-cont:hover{border-color:rgba(255,255,255,.18)}

/* match card */
.fmh-match{display:block;width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit}
.fmh-board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:4px 0 2px}
.fmh-side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.fmh-side small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#C9CDC3;font:500 12.5px var(--font-body)}
.fmh-crest{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font:800 16px var(--font-body);font-style:normal;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fmh-center{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:96px}
.fmh-center em{font-style:normal;color:#9AA093;font:500 12px var(--font-body)}
.fmh-center em.fmh-live{color:#FF6B5E;font-weight:700}
.fmh-dday{font:400 34px/1 var(--font-score);color:#CCFF00;letter-spacing:.01em}
.fmh-score{display:flex;align-items:baseline;gap:8px}
.fmh-score b{font:400 36px/1 var(--font-score);color:#fff}
.fmh-score span{color:#6B7266;font-size:22px}
.fmh-match-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);color:#9AA093;font:500 13px var(--font-body)}
.fmh-match-foot span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fmh-match-foot span:last-child{flex:none;color:#CCFF00}

/* weekly bars */
.fmh-week{display:block;width:100%;text-align:left;color:inherit;cursor:pointer;font:inherit}
.fmh-week-sum{display:flex;align-items:baseline;gap:4px;margin:-2px 0 12px}
.fmh-week-sum b{font:400 34px/1 var(--font-score);color:#fff}
.fmh-week-sum span{color:#C9CDC3;font:600 15px var(--font-body)}
.fmh-week-sum small{margin-left:8px;color:#9AA093;font:500 13px var(--font-body)}
.fmh-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:110px;align-items:end}
.fmh-bars>div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.fmh-bars i{flex:1;width:100%;max-width:30px;display:flex;align-items:flex-end;border-radius:8px;background:#1A1E17;overflow:hidden}
.fmh-bars i s{display:block;width:100%;height:calc(var(--h) * 100%);background:#CCFF00;border-radius:8px;text-decoration:none;font:600 10.5px/1.6 var(--font-body);color:#0B0F06;text-align:center;transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fmh-bars.in i s{transform:none}
.fmh-bars small{font:500 11.5px var(--font-body);color:#7D8478}
.fmh-bars .today small{color:#CCFF00}
.fmh-bars .today i{box-shadow:inset 0 0 0 1.5px rgba(204,255,0,.45)}
.fmh-bars .future i{opacity:.5}

/* news rows */
.fmh-news-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 0;border:0;border-top:1px solid rgba(255,255,255,.07);background:none;color:inherit;text-align:left;cursor:pointer}
.fmh-news .fmh-head + .fmh-news-row{border-top:0;padding-top:0}
.fmh-news-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fmh-news-txt b{font:600 14.5px/1.4 var(--font-body);color:#F2F4EE;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmh-news-txt small{font:400 12px var(--font-body);color:#9AA093}
.fmh-news-row img{flex:none;width:72px;height:72px;border-radius:12px;object-fit:cover;object-position:50% 28%;background:#1A1E17}

/* 홈 편집 */
.fmh-edit-btn{display:block;margin:6px auto 0;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#C9CDC3;font:500 13.5px var(--font-body);cursor:pointer}
.fmh-editor{position:fixed;inset:0;z-index:1000200;display:none}
.fmh-editor.open{display:block}
body.fmh-ed-open .bottom-nav,body.fmh-ed-open #bottomNav{visibility:hidden}
.fmh-ed-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.fmh-ed-box{position:absolute;left:0;right:0;bottom:0;max-height:86%;overflow:auto;background:#121511;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));animation:fmhUp .3s cubic-bezier(.2,.8,.2,1)}
@keyframes fmhUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.fmh-ed-head h3{margin:0;font:700 19px var(--font-body);color:#F2F4EE}
.fmh-ed-head p{margin:4px 0 14px;color:#9AA093;font:400 13.5px var(--font-body)}
.fmh-ed-list{list-style:none;margin:0;padding:0}
.fmh-ed-list li{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px 52px;align-items:center;gap:4px;min-height:54px;border-top:1px solid rgba(255,255,255,.07)}
.fmh-ed-list li.off .fmh-ed-name{color:#6B7266}
.fmh-ed-name{font:600 15px var(--font-body);color:#F2F4EE}
.fmh-ed-mv{width:40px;height:40px;border-radius:10px;border:0;background:#1A1E17;color:#C9CDC3;font-size:12px;cursor:pointer}
.fmh-ed-mv:disabled{opacity:.3;cursor:default}
.fmh-ed-sw{position:relative;justify-self:end;width:46px;height:28px;cursor:pointer}
.fmh-ed-sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fmh-ed-sw span{position:absolute;inset:0;border-radius:99px;background:#2A2F27;transition:background .2s}
.fmh-ed-sw span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.fmh-ed-sw input:checked + span{background:#CCFF00}
.fmh-ed-sw input:checked + span::after{transform:translateX(18px);background:#0B0F06}
.fmh-ed-sw input:focus-visible + span{outline:2px solid #CCFF00;outline-offset:2px}
.fmh-ed-sw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fmh-ed-foot{display:flex;gap:8px;margin-top:16px}
.fmh-ed-reset,.fmh-ed-done{flex:1;min-height:48px;border-radius:14px;font:700 15px var(--font-body);cursor:pointer}
.fmh-ed-reset{border:1px solid rgba(255,255,255,.14);background:transparent;color:#C9CDC3}
.fmh-ed-done{border:0;background:#CCFF00;color:#0B0F06}

@media (prefers-reduced-motion:reduce){
  .fmh-rings .fg,.fmh-bars i s{transition:none}
  .fmh-ed-box{animation:none}
}
.fmh-row-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.fmh-row-card .fmh-head{grid-column:1/-1;margin-bottom:6px}
.fmh-row-card .fmh-muted{margin:0;font-size:13.5px}
/* friends card: long reasons used to push the Connect button off small screens */
.fsu-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0}
.fsu-li{min-width:0}
.fsu-li .fcn-btn{flex:none}

/* signed out: today's 3 cards first (2026-10-25) */
.fmh-today-sub{margin:-2px 0 12px;color:#A8ADA2;font:500 13.5px/1.5 var(--font-body);word-break:keep-all}
.fmh-today-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.fmh-today-list button{width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.fmh-today-list small{font:600 12px var(--font-body);color:#9EA596}
.fmh-today-list b{font:700 16px/1.4 var(--font-body);color:#F3F5EF;word-break:keep-all}
.fmh-today-list button.done b{color:#9EA596}
.fmh-today-list button.done small::after{content:" · 봤어요";color:#CCFF00}
.fmh-today-go{width:100%;min-height:48px;font-size:15px}
.fmh-guest-login .fmh-q-btn{margin-top:10px}

/* Theme picker + accent variables (2026-10-10). The theme stylesheets (/css/theme/*.css) replace lime with these. */
:root{--fx-acc:#CCFF00;--fx-acc-soft:#DFFF7A;--fx-acc-muted:#A9C76A;--fx-acc-ink:#4A7300}
/* 잔디 (2026-10-27): the calm default point colour, a muted grass green on matte black */
html[data-acc="grass"]{--fx-acc:#8CCB7E;--fx-acc-soft:#C4E5BA;--fx-acc-muted:#8EAD88;--fx-acc-ink:#2E6B36}
html[data-acc="sky"]{--fx-acc:#4CC9FF;--fx-acc-soft:#A8E6FF;--fx-acc-muted:#7FB3CC;--fx-acc-ink:#0A6A94}
html[data-acc="orange"]{--fx-acc:#FF9A3D;--fx-acc-soft:#FFC48F;--fx-acc-muted:#CC9A6E;--fx-acc-ink:#A84E00}
html[data-acc="pink"]{--fx-acc:#FF6EB0;--fx-acc-soft:#FFB0D4;--fx-acc-muted:#C98AA6;--fx-acc-ink:#B0145E}
html[data-acc="violet"]{--fx-acc:#B49BFF;--fx-acc-soft:#D7CBFF;--fx-acc-muted:#9D90CC;--fx-acc-ink:#5A35D0}

/* top bar button */
.topbar .fth-open-btn{margin-left:auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#C9C9C4;cursor:pointer}
.topbar .fth-open-btn svg{width:18px;height:18px}
.topbar .fth-open-btn + .ffb-open{margin-left:8px}
.topbar .fth-open-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* sheet — always drawn in its own neutral colours so it reads in every theme */
.fth{position:fixed;inset:0;z-index:1000300;display:none}
.fth.open{display:block}
.fth-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.fth-box{position:absolute;left:0;right:0;bottom:0;max-height:90%;overflow:auto;background:#141614;color:#F2F4EE;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:fthUp .28s cubic-bezier(.2,.8,.2,1)}
html[data-theme="light"] .fth-box{background:#FFFFFF;color:#161615}
@keyframes fthUp{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.fth-head{display:flex;align-items:center;justify-content:space-between}
.fth-head h3{margin:0;font:700 19px var(--font-body)}
.fth-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:24px;cursor:pointer;opacity:.7}
.fth-sub{margin:2px 0 6px;font:400 13.5px var(--font-body);opacity:.65}
.fth-box h4{margin:18px 0 10px;font:600 14px var(--font-body)}
.fth-box h4 em{font-style:normal;font-weight:400;opacity:.55;margin-left:6px;font-size:12.5px}
.fth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fth-grid.dim{opacity:.55}
.fth-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 12px;border-radius:16px;border:2px solid rgba(128,128,128,.25);background:transparent;color:inherit;cursor:pointer}
.fth-opt.on{border-color:var(--fx-acc)}
html[data-theme="light"] .fth-opt.on{border-color:var(--fx-acc-ink)}
.fth-opt b{font:600 14px var(--font-body)}
.fth-opt small{font:400 11.5px var(--font-body);opacity:.6}
.fth-prev{display:grid;grid-template-rows:12px 12px;gap:4px;width:100%;max-width:92px;aspect-ratio:4/3;padding:8px;border-radius:10px;background:var(--pb);box-shadow:inset 0 0 0 1px rgba(128,128,128,.3);position:relative;margin-bottom:4px}
.fth-prev i{display:block;border-radius:4px;background:var(--pc)}
.fth-prev i:first-child{width:70%;background:var(--pi);opacity:.85;height:6px;margin-top:3px}
.fth-prev b{position:absolute;right:8px;bottom:8px;width:16px;height:16px;border-radius:50%;background:var(--pa)}
.fth-prev.split{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:0;padding:0;overflow:hidden;background:none}
.fth-prev.split .fth-prev{border-radius:0;box-shadow:none;margin:0;aspect-ratio:auto;height:100%}
.fth-accs{display:flex;gap:10px;flex-wrap:wrap}
.fth-acc{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:52px;padding:4px 2px;border:0;background:transparent;color:inherit;cursor:pointer}
.fth-acc i{width:38px;height:38px;border-radius:50%;background:var(--a);box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.fth-acc.on i{box-shadow:0 0 0 3px #141614,0 0 0 5px var(--a)}
html[data-theme="light"] .fth-acc.on i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--a)}
.fth-acc small{font:500 12px var(--font-body);opacity:.75}
.fth-done{display:block;width:100%;margin-top:20px;min-height:50px;border:0;border-radius:14px;background:var(--fx-acc);color:#0B0F06;font:700 16px var(--font-body);cursor:pointer}
.fth-card-txt{margin:0 0 12px;color:var(--ink-dim);font:400 14px var(--font-body)}
@media (prefers-reduced-motion:reduce){ .fth-box{animation:none} }

/* Light theme: spots whose colour comes from an inline style variable (--c) or a token the
   generated light sheet can't see. Kept tiny on purpose; the generated /css/theme/light.css does the rest. */
html[data-theme="light"] .fmh-cont small{color:color-mix(in srgb,var(--c) 55%,#000)}
html[data-theme="light"] .fmh-cont::before{background:color-mix(in srgb,var(--c) 75%,#000)}
html[data-theme="light"] .fmh-cont-bar s{background:color-mix(in srgb,var(--c) 70%,#000)}
html[data-theme="light"] .footop-x-coach-upsell{color:#5b2fc4}
html[data-theme="light"] .fmh-rings .bg{opacity:.22}

/* 2026-10-11 Simplify pass, from the "믿음이 가는 사이트 디자인의 공통점" note:
   one main thing per screen, one accent colour used only for what you can press or the key number,
   fewer words, no repeated shortcuts. Later files win, so this sits after every screen's own rules. */

/* ---------- tab explainer: shown for the first visits only ---------- */
.fti-never{display:block;margin:14px auto 2px;padding:8px 14px;border:0;background:none;color:#8e938a;font:500 13px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fti-never:hover{color:#f2f4ee}

/* ---------- one lime button per card: suggestion Connect buttons become outlines ---------- */
.fsu-card .fcn-btn.primary,.fsu-li .fcn-btn.primary{background:transparent;color:#CCFF00;box-shadow:inset 0 0 0 1.5px rgba(204,255,0,.6)}
.fsu-card .fcn-btn.primary:hover,.fsu-li .fcn-btn.primary:hover{background:rgba(204,255,0,.1)}

/* ---------- Training: plain titles, the routine card is the only highlight ---------- */
#panelTraining .ft32-title{background:none!important;-webkit-text-fill-color:currentColor!important;color:#f2f4ee!important;font:700 26px/1.25 var(--font-display)!important;letter-spacing:-.02em;margin:0 0 4px}
#panelTraining .ft32-sub{color:#a8a8a2;font:500 14px/1.5 var(--font-body);margin:0}
#panelTraining .ft32-head:not(.ft32-head-compact){margin-bottom:18px}
#panelTraining .ft32-hero-meta{gap:12px;color:#a8a8a2}
.ft32-more-card.ft32-more-row{width:100%;margin:14px 0 4px;padding:14px 16px;border-radius:16px;box-shadow:none;background:#141713;border:1px solid #23271f;gap:10px}
.ft32-more-row .ft32-more-body b{font:600 15px var(--font-body);color:#f2f4ee}
.ft32-more-row .ft32-more-body small{color:#a8a8a2;font:500 13px var(--font-body)}
.ft32-players-card{padding-top:14px!important}
#panelTraining .ft32-ai-section-label{color:#f2f4ee!important}

/* ---------- DNA intro: one question, one button ---------- */
.dna-intro-title{background:none!important;-webkit-text-fill-color:currentColor!important;color:#f2f4ee!important;font:700 26px/1.3 var(--font-display)!important;margin:0 0 10px!important}
.dna-intro-copy{max-width:30em;margin:0 auto 20px!important}
.dna-btn.dna-intro-main{min-width:220px;min-height:50px;font-size:16px}
.dna-intro-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:14px}
.dna-link{border:0;background:none;color:#a8a8a2;font:500 13px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}
.dna-link:hover{color:#f2f4ee}

/* ---------- Coach Topi: quiet control chips, white headings ---------- */
#panelCoach .topic-chip.topi-ctl,#panelCoach .topic-chip.topi-ctl.is-deck,#panelCoach .topic-chip.topi-ctl.soft{background:#1a1d18!important;border-color:#2c3127!important;color:#e6eae1!important;font-weight:600}
#panelCoach .topic-chip.topi-ctl.is-imagine{background:rgba(94,225,255,.12)!important;border-color:rgba(94,225,255,.55)!important;color:#7fe7ff!important}
#panelCoach .topic-chip.tlt-chip.is-on{background:rgba(204,255,0,.1)!important;border-color:rgba(204,255,0,.5)!important;color:#dfff7a!important}
.topi-hello b{color:#f2f4ee!important;-webkit-text-fill-color:currentColor}
.topi-suggest b{color:#f2f4ee!important}
#introXPreview:empty{display:none}

/* ---------- Main News: one slim bar instead of a boxed header ---------- */
.mn-bar{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.mn-bar .mn-period-tabs{flex:1;min-width:0;margin:0!important;padding:3px!important;border-radius:12px!important;background:#151714!important;border:1px solid #262a23!important}
.mn-bar .mn-period-tab{min-height:36px!important;border-radius:9px!important;font:600 13px var(--font-body)!important;color:#a8a8a2!important}
.mn-bar .mn-period-tab.active{background:#2a2e26!important;color:#f2f4ee!important}
.mn-bar-tools{display:flex;align-items:center;gap:6px;flex:none}
.mn-bar-tools .mn-refresh-btn{width:38px;height:38px}
.mn-bar .fnl-chip{min-height:38px}
@media (max-width:379px){.mn-bar .fnl-chip{font-size:0;gap:0;width:38px;justify-content:center;padding:0}.mn-bar .fnl-chip svg{width:17px;height:17px}}
.mn-searchrow .mn-search{margin:0 0 12px}
.mn-trending .trk-trending-head{color:#a8a8a2!important;font:600 13px var(--font-body)!important;letter-spacing:0!important}
.trk-trending-chip{background:#151714!important;border-color:#2a2e26!important;color:#e6eae1!important}
.trk-trending-chip:hover{border-color:#CCFF00!important}

/* ---------- Tracking ---------- */
.tracking-sub{display:none!important}
.tracking-search-panel .tracking-universal-search{margin-top:0!important}
.tracking-search-status:empty{display:none}
.trk-browse-row{grid-template-columns:1fr 1fr!important}
.trk-browse-btn{justify-content:center;text-align:center;min-height:46px;background:#151714!important;border:1px solid #262a23!important}
.trk-browse-btn b{font:600 14px var(--font-body);color:#e6eae1}
.trk-hero.trk-empty{background:#141713;border:1px solid #23271f;border-radius:18px;padding:28px 20px;text-align:center}
.trk-hero.trk-empty:after{display:none}
.trk-empty .trk-title{font:700 20px/1.35 var(--font-display);margin:0 0 8px;color:#f2f4ee}
.trk-empty .trk-desc{font:500 14px/1.55 var(--font-body);color:#a8a8a2;margin:0 auto 18px;max-width:26em}
.trk-empty .btn-sm{min-height:44px;padding:0 20px}
.trk-feed-bar{justify-content:space-between}
.trk-feed-note{color:#a8a8a2;font:500 13px var(--font-body)}

/* ---------- Cardnews: the title says enough; the old "← 오늘" jumped to Topi ---------- */
#panelFeed .feed-sub,#feedBackCoach{display:none!important}

/* ---------- 오늘의 축구 ---------- */
.ftf-hero-sub:empty{display:none}

/* ---------- Settings: grouped ---------- */
.fst-head{margin-bottom:6px}
.fst-group{margin:22px 4px 8px;color:#a8a8a2;font:600 13px var(--font-body);letter-spacing:0}
.fst-group:first-of-type{margin-top:8px}
.fst-card{padding-top:6px!important;padding-bottom:6px!important}
.fst-fold{border-top:1px solid #23271f}
.fst-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:50px;cursor:pointer;color:#f2f4ee;font:600 15px var(--font-body)}
.fst-fold>summary::-webkit-details-marker{display:none}
.fst-fold>summary::after{content:'';width:8px;height:8px;border-right:2px solid #8e938a;border-bottom:2px solid #8e938a;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.fst-fold[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fst-fold .footop-edit-form{padding-bottom:14px}
.fst-note{margin:0;color:#a8a8a2;font:500 13px/1.5 var(--font-body)}
.fst-row-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;padding:0;border:0;border-top:1px solid #23271f;background:none;color:#f2f4ee;font:600 15px var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.fst-card>.fst-row-btn:first-child{border-top:0}
.fst-row-btn::after{content:'';width:8px;height:8px;border-right:2px solid #8e938a;border-top:2px solid #8e938a;transform:rotate(45deg);margin-right:4px}
.fst-signout{display:block;width:100%;margin:22px 0 4px;min-height:48px}
.fst-delete{margin:6px 4px 30px;border-top:0}
.fst-delete>summary{color:#ff8a8a;font-size:14px;min-height:44px}
@media (prefers-reduced-motion:reduce){.fst-fold>summary::after{transition:none}}
#panelTraining .ft32-section-title{font:700 18px/1.3 var(--font-display)!important;letter-spacing:-.02em;margin:26px 2px 10px!important;color:#f2f4ee}
.ft32-ari-card .ft32-ai-input{width:100%;box-sizing:border-box}
#btnMyTracking[hidden]{display:none!important}
.trk-empty .btn-sm.primary{background:#CCFF00!important;color:#0a0a0a!important;border:0!important;font:700 14px var(--font-body)!important;border-radius:12px!important}
.mn-bar .mn-period-tab{white-space:nowrap;padding:0 6px!important}
/* small phones: pull down to refresh does the same, so the refresh icon gives its room to the tabs */
@media (max-width:379px){.mn-bar #trkMainNewsRefresh{display:none}}

/* 2026-10-11 Match tab: in-app confirm sheet, team card actions, sub views (schedule, records), follow, recent results */
.fta{position:fixed;inset:0;z-index:1000200;display:flex;align-items:flex-end;justify-content:center}
.fta-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.fta-box{position:relative;width:100%;max-width:420px;margin:0 auto;background:#151714;border:1px solid #2a2e26;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 40px rgba(0,0,0,.5);animation:ftaUp .22s ease-out}
@keyframes ftaUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.fta-box h3{margin:0 0 8px;font:700 19px/1.35 var(--font-display);color:#f2f4ee;letter-spacing:-.02em}
.fta-box p{margin:0 0 16px;color:#b6bbb0;font:500 14px/1.6 var(--font-body)}
.fta-label{display:block;margin:0 0 16px;color:#b6bbb0;font:500 13px/1.5 var(--font-body)}
.fta-label b{color:#f2f4ee}
.fta-input{display:block;width:100%;box-sizing:border-box;margin-top:8px;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid #33382e;background:#0f110e;color:#f2f4ee;font:600 15px var(--font-body)}
.fta-input:focus{outline:2px solid #ff8a8a;outline-offset:1px}
.fta-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fta-btn{min-height:50px;border-radius:14px;border:1px solid #2f342b;background:#1f221d;color:#f2f4ee;font:700 15px var(--font-body);cursor:pointer}
.fta-btn.danger{background:#e5484d;border-color:#e5484d;color:#fff}
.fta-btn[disabled]{opacity:.4;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.fta-box{animation:none}}
.ftl-wrap{display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
.ftl-h{margin:14px 2px 2px;font:700 16px/1.3 var(--font-display);color:#f2f4ee;letter-spacing:-.02em}
.ftl-muted{margin:0;color:#a8a8a2;font:500 14px/1.6 var(--font-body)}
.ftl-sub{color:#a8a8a2;font:500 13px/1.45 var(--font-body)}
.ftl-foot{margin:4px 2px 0;color:#8e938a;font:500 12px/1.5 var(--font-body)}
.ftl-link{border:0;background:none;padding:0;color:#CCFF00;font:600 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ftl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #2f342b;background:#1c1f1a;color:#f2f4ee;font:700 14px var(--font-body);cursor:pointer;white-space:nowrap}
.ftl-btn svg{width:18px;height:18px;flex:none}
.ftl-btn.primary{background:#CCFF00;border-color:#CCFF00;color:#0a0a0a}
.ftl-btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.ftl-btn.wide{width:100%}
.ftl-btn:active{transform:scale(.98)}
.ftl-mine{border:1px solid #2a2e26;background:#141713;border-radius:20px;padding:14px;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;cursor:default}
.ftl-mine-id{display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer;min-width:0}
.ftl-mine-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ftl-mine-txt b{font:700 18px/1.3 var(--font-display);color:#f2f4ee;letter-spacing:-.02em}
.ftl-mine-txt span{color:#a8a8a2;font:500 13px var(--font-body)}
.ftl-mine-next{font-style:normal;color:#dfff7a;font:600 13px var(--font-body)}
.ftl-mine-next:empty{display:none}
.ftl-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ftl-empty{text-align:center;padding:28px 18px;border:1px dashed #33382e;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ftl-empty b{font:700 17px/1.35 var(--font-display);color:#f2f4ee}
.ftl-empty p{margin:0 0 6px;color:#a8a8a2;font:500 14px/1.55 var(--font-body);max-width:26em}
.ftl-search input{width:100%;box-sizing:border-box;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid #2a2e26;background:#121411;color:#f2f4ee;font:500 15px var(--font-body)}
.ftl-sort{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ftl-chip{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #2a2e26;background:#151714;color:#c9cdc3;font:600 13px var(--font-body);cursor:pointer}
.ftl-chip.on{background:#2a2e26;color:#f2f4ee;border-color:#3a4034}
.ftl-list{display:flex;flex-direction:column;gap:8px}
.ftl-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#141713;border:1px solid #23271f}
.ftl-row-id{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer}
.ftl-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ftl-row-txt b{font:700 15px/1.3 var(--font-body);color:#f2f4ee}
.ftl-desc{color:#8e938a;font:500 13px/1.45 var(--font-body);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ftl-form:empty{display:none}
.ftl-row-acts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ftl-tag{font:600 12px var(--font-body);color:#dfff7a}
.ftl-follow{min-height:36px;min-width:72px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(204,255,0,.6);background:transparent;color:#CCFF00;font:700 13px var(--font-body);cursor:pointer}
.ftl-follow.on{border-color:#3a4034;background:#22261f;color:#e6eae1}
.ftl-follow[disabled]{opacity:.5}
.ftl-invites h3{margin:0 0 6px}
.ftr-pills{display:inline-flex;gap:4px;margin-left:auto}
.ftr-pills .footop-form-pill{width:22px;height:22px;font-size:11px}
.ftr-card{border:1px solid #23271f;background:#141713;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px}
.ftr-card-head{display:flex;align-items:center;gap:10px;border:0;background:none;color:inherit;text-align:left;padding:0;cursor:pointer}
.ftr-card-head>span:not(.ftr-pills){display:flex;flex-direction:column;gap:2px;min-width:0}
.ftr-card-head b{font:700 16px var(--font-body);color:#f2f4ee}
.ftr-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;text-align:center}
.ftr-stats div{background:#1b1e19;border-radius:10px;padding:8px 2px}
.ftr-stats b{display:block;font:700 18px var(--font-score);color:#f2f4ee}
.ftr-stats b.pos{color:#7cffb2}.ftr-stats b.neg{color:#ff8a8a}
.ftr-stats span{color:#a8a8a2;font:500 12px var(--font-body)}
.ftr-follow-slot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.ftr-follow-slot:empty{display:none}
.ftr-followers{color:#a8a8a2;font:600 13px var(--font-body)}
.ftr-recent-card h3{margin:0 0 10px}
.ftr-record{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.ftr-record span{background:#1b1e19;border-radius:10px;padding:8px 4px;text-align:center;color:#a8a8a2;font:500 12px var(--font-body)}
.ftr-record b{display:block;font:700 19px var(--font-score);color:#f2f4ee}
.ftr-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ftr-recent li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:46px;border-top:1px solid #23271f}
.ftr-recent li:first-child{border-top:0}
.ftr-res{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:700 13px var(--font-score);color:#0a0a0a}
.ftr-res.w{background:#3ddc84}.ftr-res.d{background:#c9cdc3}.ftr-res.l{background:#ff6b6b}
.ftr-opp{color:#f2f4ee;font:600 14px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftr-opp em{font-style:normal;color:#8e938a;font-size:12px;margin-left:4px}
.ftr-score{font:700 15px var(--font-score);color:#f2f4ee}
.ftr-date{color:#8e938a;font:500 12px var(--font-body);min-width:52px;text-align:right}
.ftr-recent-empty{color:#a8a8a2;font:500 14px/1.6 var(--font-body)}
.fts-day h3{margin:6px 2px 8px;font:700 14px var(--font-body);color:#c9cdc3}
.fts-ev{width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border-radius:14px;border:1px solid #23271f;background:#141713;color:inherit;text-align:left;cursor:pointer}
.fts-kind{flex:none;min-width:40px;padding:5px 0;border-radius:8px;text-align:center;background:#22261f;color:#c9cdc3;font:700 12px var(--font-body)}
.fts-kind.match{background:rgba(204,255,0,.14);color:#dfff7a}
.fts-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fts-txt b{font:700 15px var(--font-body);color:#f2f4ee}
.fts-txt span{color:#a8a8a2;font:500 13px var(--font-body)}
.fts-att{flex:none;font:600 12px var(--font-body);color:#8e938a}
.fts-att.going{color:#7cffb2}.fts-att.not_going{color:#ff8a8a}.fts-att.maybe{color:#ffd54a}

/* 2026-10-11 DNA: insight skeleton, detail fold, action cards, radar */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dna-hero-quote.is-ai{font-style:normal;color:#e9ede4;line-height:1.6}
.dna-insight-skel{display:grid;gap:7px;width:min(100%,300px);margin:4px auto}
.dna-insight-skel i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,#22261f 0%,#2f3529 50%,#22261f 100%);background-size:200% 100%;animation:dnaSkel 1.1s linear infinite}
.dna-insight-skel i:nth-child(2){width:88%}.dna-insight-skel i:nth-child(3){width:62%}
@keyframes dnaSkel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dna-insight-skel i{animation:none}}
/* 더 자세히 */
.dna-more-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f2f4ee;font:700 14px var(--font-body);cursor:pointer}
.dna-more-btn i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.dna-more-btn[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
.dna-more-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.dna-more-wrap.open{grid-template-rows:1fr}
.dna-more-body{overflow:hidden;min-height:0}
.dnm{text-align:left;padding-top:14px;display:flex;flex-direction:column;gap:14px}
.dnm h4{margin:0 0 6px;color:#a8a8a2;font:700 13px var(--font-body);letter-spacing:0}
.dnm p,.dnm li{margin:0;color:#e6eae1;font:500 14px/1.6 var(--font-body)}
.dnm ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.dnm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dnm-two ul{padding-left:0;list-style:none}
.dnm-tags{display:flex;flex-wrap:wrap;gap:6px}
.dnm-tags span{padding:6px 12px;border-radius:999px;background:#1f241b;color:#dfff7a;font:600 13px var(--font-body)}
.dnm-note{color:#a8a8a2!important;font-size:13px!important}
/* action cards: 도감 / 재진단 / 성장 */
.dna-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 4px}
.dna-act{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:118px;padding:14px 12px;border-radius:18px;border:1px solid transparent;color:#f2f4ee;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.dna-act i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:6px;background:rgba(0,0,0,.28)}
.dna-act i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dna-act b{font:700 15px var(--font-body)}
.dna-act span{color:rgba(242,244,238,.78);font:500 12px/1.4 var(--font-body)}
.dna-act.dex{background:linear-gradient(150deg,#3b2a66,#1b1430);border-color:#4b3a7a}
.dna-act.dex i{color:#c9b4ff}
.dna-act.retake{background:linear-gradient(150deg,#5a2e12,#22140a);border-color:#6e3b18}
.dna-act.retake i{color:#ffb27a}
.dna-act.evo{background:linear-gradient(150deg,#2f4a0c,#141d08);border-color:#43610f}
.dna-act.evo i{color:#d4ff6a}
@media (hover:hover){.dna-act:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}}
.dna-act:active{transform:scale(.97)}
/* radar */
.dna-radar-card{border:1px solid #23271f;background:#141713;border-radius:20px;padding:10px 10px 14px;text-align:center}
.dna-radar-card p{margin:2px 0 0;color:#8e938a;font:500 12px var(--font-body)}
.dnr{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.dnr-ring{fill:none;stroke:#2a2f25;stroke-width:1}
.dnr-axis{stroke:#2a2f25;stroke-width:1}
.dnr-fill{fill:rgba(204,255,0,.22);stroke:#CCFF00;stroke-width:2;stroke-linejoin:round}
.dnr-dot{fill:#CCFF00}
.dnr-lb{fill:#c9cdc3;font:600 12px var(--font-body)}
.dnr-v{fill:#f2f4ee;font:700 14px var(--font-score)}
.dnr-shape{animation:dnrGrow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes dnrGrow{from{transform:scale(.15);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dnr-shape{animation:none}.dna-more-wrap,.dna-more-btn i,.dna-act{transition:none}}

/* 2026-10-11 맞춤 루틴: start screen + one-question-per-screen wizard */
.ari .ari-start{width:100%;margin:6px 0 16px}
.ari-last{border:1px solid #23271f;background:#141713;border-radius:18px;overflow:hidden}
.ari-last-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.ari-last-head>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ari-last-head small{color:#a8a8a2;font:600 12px var(--font-body)}
.ari-last-head b{color:#f2f4ee;font:700 16px/1.35 var(--font-body)}
.ari-last-head em{font-style:normal;color:#a8a8a2;font:500 13px var(--font-body)}
.ari-last-head i{flex:none;width:9px;height:9px;border-right:2px solid #8e938a;border-bottom:2px solid #8e938a;transform:rotate(45deg);transition:transform .2s}
.ari-last-head.open i{transform:rotate(-135deg)}
.ari-last-body{padding:0 16px 16px}
.ari-ex{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column}
.ari-ex li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid #23271f}
.ari-ex span{flex:none;min-width:40px;color:#dfff7a;font:700 13px var(--font-score)}
.ari-ex b{color:#e6eae1;font:600 14px/1.45 var(--font-body)}
.ari-row2{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.ari-row2 .ft32-btn{width:100%}
.ari-top{display:flex;align-items:center;gap:12px;margin:2px 0 22px}
.ari-back{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid #2a2e26;background:#151714;color:#f2f4ee;display:grid;place-items:center;cursor:pointer}
.ari-back svg{width:20px;height:20px}
.ari-prog{flex:1;height:6px;border-radius:99px;background:#22261f;overflow:hidden}
.ari-prog i{display:block;height:100%;border-radius:inherit;background:#CCFF00;transition:width .3s ease}
.ari-count{flex:none;min-width:34px;text-align:right;color:#a8a8a2;font:700 13px var(--font-score)}
.ari-q{margin:0 0 6px;color:#f2f4ee;font:700 23px/1.35 var(--font-display);letter-spacing:-.02em;outline:none}
.ari-q span{color:#8e938a;font:500 15px var(--font-body)}
.ari-sub{margin:0 0 20px;color:#a8a8a2;font:500 14px/1.5 var(--font-body)}
.ari-opts{display:flex;flex-direction:column;gap:10px}
.ari-opts.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ari-opt{min-height:60px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 16px;border-radius:16px;border:1.5px solid #2a2e26;background:#141713;color:#f2f4ee;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.ari-opt b{font:700 16px var(--font-body)}
.ari-opt small{color:#a8a8a2;font:500 13px var(--font-body)}
.ari-opt:active{transform:scale(.98)}
.ari-opt.on{border-color:#CCFF00;background:rgba(204,255,0,.08)}
.ari-opt.on small{color:#cfe39a}
.ari-hint{min-height:20px;margin:10px 2px 0;color:#ffd54a;font:600 13px var(--font-body)}
.ari-text{width:100%;box-sizing:border-box;min-height:120px;padding:14px;border-radius:16px;border:1.5px solid #2a2e26;background:#121411;color:#f2f4ee;font:500 15px/1.55 var(--font-body);resize:vertical}
.ari-text:focus{outline:none;border-color:#CCFF00}
.ari-sum{margin:0;display:flex;flex-direction:column;border:1px solid #23271f;border-radius:16px;overflow:hidden}
.ari-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 16px;border:0;border-top:1px solid #23271f;background:#141713;color:inherit;text-align:left;cursor:pointer}
.ari-sum-row:first-child{border-top:0}
.ari-sum dt{flex:none;color:#a8a8a2;font:600 14px var(--font-body)}
.ari-sum dd{margin:0;color:#f2f4ee;font:600 15px var(--font-body);text-align:right;word-break:keep-all}
.ari-nav{margin-top:22px}
.ari-nav .ft32-btn{width:100%}
.ari-nav .ft32-btn[disabled]{opacity:.35;cursor:not-allowed}
.ari-textbtn{display:block;margin:12px auto 0;border:0;background:none;color:#a8a8a2;font:600 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
.ari-step.in-next{animation:ariNext .26s ease-out}
.ari-step.in-prev{animation:ariPrev .26s ease-out}
@keyframes ariNext{from{transform:translateX(26px);opacity:.35}to{transform:none;opacity:1}}
@keyframes ariPrev{from{transform:translateX(-26px);opacity:.35}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ari-step{animation:none!important}.ari-prog i,.ari-last-head i{transition:none}}

/* 2026-10-11 Coach Topi: first-visit introduction + skill cards on the start screen */
.tpi{position:relative;margin:0 0 16px;padding:18px 16px 16px;border-radius:18px;background:#141a10;border:1px solid rgba(204,255,0,.35)}
.tpi-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#CCFF00;color:#0a0a0a;font:700 20px var(--font-score);margin-bottom:10px}
.tpi h3{margin:0 0 12px;color:#f2f4ee;font:700 19px/1.35 var(--font-display);letter-spacing:-.02em}
.tpi-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.tpi-list li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid #3a4230}
.tpi-list b{color:#f2f4ee;font:700 14px var(--font-body)}
.tpi-list span{color:#a8a8a2;font:500 13px/1.5 var(--font-body)}
.tpi-try{margin:0 0 8px;color:#a8a8a2;font:600 13px var(--font-body)}
.tpi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
#introCard .tpi-chip{display:inline-flex;align-items:center;min-height:38px;width:auto;padding:0 14px;border-radius:999px;border:1px solid #33392c;background:#1a1f16;color:#e6eae1;font:600 13px var(--font-body);text-align:left}
#introCard .tpi-chip:hover{border-color:#CCFF00}
.tpi-ok{width:100%;min-height:46px;border-radius:12px;border:0;background:#CCFF00;color:#0a0a0a;font:700 15px var(--font-body);cursor:pointer}
.tpi-again{display:block;margin:10px auto 0;padding:8px;border:0;background:none;color:#a8a8a2;font:600 13px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tpi-again[hidden]{display:none}
/* skill cards: icon on top, name, what it does, an example question */
.topi-skills .topi-suggest{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 12px!important}
.topi-skills .tsk-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);margin-bottom:4px}
.topi-skills .tsk-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topi-skills .topi-suggest span{color:#a8a8a2;font:500 12.5px/1.45 var(--font-body)}
.topi-skills .topi-suggest em{margin-top:auto;padding-top:6px;font-style:normal;color:#cfe39a;font:500 12px/1.4 var(--font-body)}
#introCard .tpi h3,#introCard .tpi-list b{color:#f2f4ee!important;-webkit-text-fill-color:currentColor}

/* 2026-10-11 오늘의 축구: pictures, videos and the mini pitch diagram inside the story viewer */
.tfm{position:relative;z-index:3;pointer-events:auto;margin:16px 0 0;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.25)}
.tfm.sm{margin:0 0 14px}
.tfm img,.tfm video,.tfm-frame{display:block;width:100%;max-height:34vh;object-fit:cover;border:0}
.tfm-frame{aspect-ratio:16/9;max-height:none;height:auto}
.tfm figcaption{padding:8px 12px;color:rgba(255,255,255,.85);font:500 13px/1.45 var(--font-body);background:rgba(0,0,0,.35)}
.tfm-yt{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.tfm-yt img{aspect-ratio:16/9;max-height:none}
.tfm-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(0,0,0,.6);border:2px solid #fff}
.tfm-play::after{content:'';position:absolute;left:23px;top:17px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.tfs-diagram{display:flex;flex-direction:column;gap:12px}
.tfs-diagram .tfs-k{margin-bottom:2px}
.tfs-cap{margin:0;color:#f2f4ee;font:600 16px/1.55 var(--font-body);word-break:keep-all}
.tfd{width:100%;height:auto;display:block;border-radius:14px}
.tfd-pitch{fill:#1c5c33;stroke:rgba(255,255,255,.75);stroke-width:.5}
.tfd-m{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.4}
.tfd-goal{fill:#fff}
.tfd-z rect{fill:rgba(255,213,74,.22);stroke:rgba(255,213,74,.85);stroke-width:.35;stroke-dasharray:1.2 .8}
.tfd-z text{fill:#ffe9a3;font:700 2.7px var(--font-body)}
.tfd-l{stroke:rgba(255,255,255,.6);stroke-width:.35;stroke-dasharray:1 .7}
.tfd-off{stroke:#ff6b6b;stroke-width:.45;stroke-dasharray:1.4 1}
.tfd-a{fill:none;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tfdDraw .6s ease-out forwards;animation-delay:calc(.25s + var(--d,0s))}
.tfd-a.pass{stroke:#CCFF00}
.tfd-a.run{stroke:#fff;stroke-dasharray:.035 .03;stroke-dashoffset:0;animation:tfdFade .5s ease-out both;animation-delay:calc(.25s + var(--d,0s))}
.tfd-a.drib{stroke:#ffd54a}
@keyframes tfdDraw{to{stroke-dashoffset:0}}
@keyframes tfdFade{from{opacity:0}to{opacity:1}}
.tfd-p circle{stroke:#0a0a0a;stroke-width:.5}
.tfd-p.us circle{fill:#CCFF00}
.tfd-p.them circle{fill:#ff6b6b}
.tfd-p text{fill:#fff;font:700 2.6px var(--font-body);paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:.6px}
.tfd-ball{fill:#fff;stroke:#0a0a0a;stroke-width:.35}
.tfd-legend{display:flex;flex-wrap:wrap;gap:6px 12px;color:rgba(255,255,255,.8);font:600 12px var(--font-body)}
.tfd-legend span{display:inline-flex;align-items:center;gap:6px}
.tfd-legend span::before{content:'';display:inline-block}
.tfd-legend .pass::before{width:16px;height:2px;background:#CCFF00}
.tfd-legend .run::before{width:16px;height:0;border-top:2px dashed #fff}
.tfd-legend .drib::before{width:16px;height:2px;background:#ffd54a}
.tfd-legend .us::before{width:10px;height:10px;border-radius:50%;background:#CCFF00}
.tfd-legend .them::before{width:10px;height:10px;border-radius:50%;background:#ff6b6b}
.tfd-legend .off::before{width:0;height:12px;border-left:2px dashed #ff6b6b}
.tfs-point.is-step .tfs-k{color:#dfff7a}
@media (prefers-reduced-motion:reduce){.tfd-a{animation:none;stroke-dashoffset:0}.tfd-a.run{opacity:1}}
/* training session: drill description split into numbered steps */
.fts-steps{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.fts-steps li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.fts-steps b{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#CCFF00;color:#0a0a0a;font:700 13px var(--font-score)}
.fts-steps span{color:#e6eae1;font:500 14px/1.55 var(--font-body)}

/* 2026-10-12 DNA: 도감 + 31문항 진단 as the two solid, easy-to-spot cards; 성장 as a quiet row; result screen.
   Colours are mid-tone and opaque so the light theme keeps them as they are (white text on colour). */
.dna-wrap .dna-acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 6px}
.dna-wrap .dna-acts .dna-act{position:relative;min-height:142px;padding:16px 14px 14px;border:0;border-radius:20px;color:#fff;gap:3px;overflow:hidden}
.dna-wrap .dna-acts .dna-act i{width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.18);color:#fff;margin-bottom:8px}
.dna-wrap .dna-acts .dna-act i svg{width:22px;height:22px}
.dna-wrap .dna-acts .dna-act b{font:700 17px/1.25 var(--font-body);color:#fff;letter-spacing:-.01em}
.dna-wrap .dna-acts .dna-act span{font:500 12.5px/1.4 var(--font-body);color:#f4f1ff}
.dna-act-pill{position:absolute;top:14px;right:12px;font:600 11px/1 var(--font-body);font-style:normal;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.18);color:#fff}
.dna-act-go{position:absolute;right:10px;bottom:12px;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.dna-wrap .dna-acts .dna-act.dex{background:linear-gradient(145deg,#7950f2,#5f3dc4);box-shadow:0 8px 22px rgba(95,61,196,.32)}
.dna-wrap .dna-acts .dna-act.retake{background:linear-gradient(145deg,#e8590c,#c2410c);box-shadow:0 8px 22px rgba(194,65,12,.3)}
.dna-wrap .dna-acts .dna-act.retake span{color:#fff2e8}
/* 성장: one quiet full-width row */
.dna-wrap .dna-acts .dna-act.evo{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:12px;padding:12px 40px 12px 12px;background:var(--surface,#161616);color:var(--ink,#f2f4ee);border:1px solid rgba(255,255,255,.09);box-shadow:none}
.dna-wrap .dna-acts .dna-act.evo i{margin:0;width:36px;height:36px;background:rgba(204,255,0,.12);color:var(--accent)}
.dna-wrap .dna-acts .dna-act.evo b{font-size:15px;color:var(--ink,#f2f4ee)}
.dna-wrap .dna-acts .dna-act.evo span{color:var(--ink-dim,#a8a8a2);margin-left:auto}
.dna-wrap .dna-acts .dna-act.evo .dna-act-go{stroke:var(--ink-dim,#a8a8a2);top:50%;bottom:auto;margin-top:-10px}
@media (hover:hover){.dna-wrap .dna-acts .dna-act:hover{transform:translateY(-2px)}}
@media (max-width:340px){.dna-act-pill{position:static;align-self:flex-start;margin-bottom:6px}.dna-wrap .dna-acts .dna-act{min-height:0}}
/* intro: the cards sit under the intro card */
.dna-intro-card + .dna-acts{margin-top:12px}

/* assessment sheet: back button + result screen */
.dna-assess-modal #dnaAssessPrev{min-width:72px}
.dna-res-wait{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 0 40px;text-align:center}
.dna-res-wait b{font:700 17px var(--font-body)}
.dna-res-wait span:last-child{color:var(--ink-dim,#a8a8a2);font-size:13px}
.dna-res-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(204,255,0,.25);border-top-color:var(--accent);animation:dnaResSpin .8s linear infinite}
@keyframes dnaResSpin{to{transform:rotate(360deg)}}
.dna-res{padding:6px 0 4px}
.dna-res-warn{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.4);margin-bottom:16px}
.dna-res-warn b{font:700 15px var(--font-body);color:#ff8f8f}
.dna-res-warn span{font-size:13px;line-height:1.5;color:var(--ink,#f2f4ee)}
.dna-res-warn-row{margin-top:4px}
.dna-res-kicker{font:600 13px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.dna-res-type{font:700 26px/1.25 var(--font-display);letter-spacing:-.02em;margin:4px 0 14px}
.dna-res-top{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.dna-res-top li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.dna-res-top li:first-child{background:rgba(204,255,0,.1);box-shadow:inset 0 0 0 1px rgba(204,255,0,.35)}
.dna-res-rank{width:22px;font:700 15px var(--font-score);color:var(--ink-dim,#a8a8a2);text-align:center}
.dna-res-ic{font-size:22px}
.dna-res-name{flex:1;min-width:0;display:flex;flex-direction:column}
.dna-res-name b{font:700 15px var(--font-body)}
.dna-res-name small{font-size:12px;color:var(--ink-dim,#a8a8a2)}
.dna-res-score{font:400 24px var(--font-score)}
.dna-res-cats{margin-bottom:12px}
.dna-res-note{font-size:12.5px;color:var(--ink-dim,#a8a8a2);margin:0 0 14px}
.dna-res-go{width:100%;min-height:50px}
@media (prefers-reduced-motion:reduce){.dna-res-spin{animation-duration:2s}}
/* the colour cards keep white text in every theme (the light theme would otherwise darken it) */
html[data-theme] .dna-wrap .dna-acts .dna-act:not(.evo) :is(b,i,.dna-act-pill){color:#fff!important}
html[data-theme] .dna-wrap .dna-acts .dna-act.dex span{color:#f4f1ff!important}
html[data-theme] .dna-wrap .dna-acts .dna-act.retake span{color:#fff!important}
html[data-theme] .dna-wrap .dna-acts .dna-act:not(.evo) .dna-act-go{stroke:#fff!important}
html[data-theme="light"] .dna-wrap .dna-acts .dna-act:not(.evo) :is(i,.dna-act-pill){background:rgba(0,0,0,.16)!important}
html[data-theme="light"] .dna-wrap .dna-acts .dna-act.evo{background:#fff!important;border-color:rgba(0,0,0,.08)!important}
/* signed-out DNA screen (2026-10-29) */
.dna-login-gate{text-align:left}
.dna-login-sub{margin:10px 0 16px;color:var(--ink-dim,#a8a8a2);font:400 14.5px/1.55 var(--font-body);word-break:keep-all}
.dna-login-gate .dna-btn{width:100%;min-height:48px}

/* 오늘의 마인드셋 (2026-10-15): a photo card on the Main tab + a full-screen view.
   Without a photo the card falls back to a dark pitch (lines drawn in CSS), so it never looks broken. */
.fmd-card{position:relative;min-height:240px;border-radius:22px;overflow:hidden;isolation:isolate;color:#f3f5ef;
  background:#0f1410 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Ccircle cx='200' cy='300' r='70'/%3E%3Cpath d='M0 300h400M110 300v-90h180v90'/%3E%3C/svg%3E") center bottom/cover no-repeat;
  border:1px solid rgba(255,255,255,.08)}
.fmd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;filter:grayscale(1) contrast(1.12) brightness(.72)}
/* legibility only: darkens the lower part where the words sit */
.fmd-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.78) 100%)}
.fmd-open{position:absolute;inset:0;z-index:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fmd-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;padding:16px 16px 14px;pointer-events:none}
.fmd-body button{pointer-events:auto}
.fmd-k{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:500 12px var(--font-body);color:rgba(243,245,239,.78);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fmd-tag,.fmd-why{font:600 12px var(--font-body);padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.22);color:#f3f5ef}
.fmd-why{border-color:rgba(204,255,0,.5);color:#e9ffa0}
.fmd-cap{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 8px}
.fmd-en{margin:0;font:600 18px/1.35 var(--font-body);letter-spacing:-.01em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.55)}
.fmd-text{margin:8px 0 0;font:500 13.5px/1.5 var(--font-body);color:rgba(243,245,239,.86);word-break:keep-all;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.5)}
.fmd-cap .fmd-text:first-child{margin-top:0;font-size:17px;font-weight:600;color:#fff}
.fmd-foot{display:flex;align-items:flex-end;gap:10px}
.fmd-act{flex:1 1 auto;min-width:0;margin:0;font:500 13px/1.45 var(--font-body);color:#dfe3da;word-break:keep-all}
.fmd-act span{font-weight:700;color:#CCFF00;margin-right:6px}
.fmd-acts{display:flex;gap:8px;flex:none}
.fmd-ic{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer}
.fmd-ic svg,.fmd-btn svg{width:18px;height:18px;fill:none;stroke:#f3f5ef;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* full screen */
.fmd-full{position:fixed;inset:0;z-index:1000090;display:flex;flex-direction:column;background:#0b0c0b;color:#f3f5ef;opacity:0;transition:opacity .2s ease;
  padding:calc(12px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));box-sizing:border-box;overflow-y:auto}
.fmd-full.in{opacity:1}
.fmd-full-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;filter:grayscale(1) contrast(1.12) brightness(.7)}
.fmd-full::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.9) 100%)}
.fmd-full-top{display:flex;align-items:center;justify-content:space-between;font:600 13.5px var(--font-body);color:#e4e7df}
.fmd-x{width:44px;height:44px;margin-right:-8px;border-radius:50%;border:0;background:rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer}
.fmd-x svg{width:20px;height:20px;fill:none;stroke:#f3f5ef;stroke-width:2.2;stroke-linecap:round}
.fmd-full-cap{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 4px}
.fmd-full-en{margin:0;font:600 25px/1.32 var(--font-body);letter-spacing:-.015em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.55)}
.fmd-full-body{padding-top:8px}
.fmd-why.lg{display:inline-block;margin-bottom:16px}
.fmd-full-text{margin:12px 0 0;font:500 16px/1.55 var(--font-body);color:rgba(243,245,239,.88);word-break:keep-all;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.fmd-full-cap .fmd-full-text:first-child{margin-top:0;font-size:24px;font-weight:600;color:#fff}
.fmd-full-act,.fmd-full-advice{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.fmd-full-act small,.fmd-full-advice small{display:block;font:600 13px var(--font-body);color:#CCFF00;margin-bottom:6px}
.fmd-full-advice small{color:#c9ccc4}
.fmd-full-act p{margin:0;font:600 18px/1.5 var(--font-body);word-break:keep-all}
.fmd-full-advice p{margin:0;font:500 15px/1.6 var(--font-body);color:#e4e7df;word-break:keep-all}
.fmd-link{display:block;margin-top:20px;padding:0;border:0;background:none;color:#e9ffa0;font:600 14px var(--font-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;text-align:left}
.fmd-full-acts{display:flex;gap:10px;margin-top:22px}
.fmd-btn{flex:1;min-height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.26);background:rgba(0,0,0,.4);color:#f3f5ef;font:600 15px var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
body.fmd-open #footopBottomNav{visibility:hidden}
.fmd-toast{position:fixed;left:16px;right:16px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:1000200;background:#f3f5ef;color:#0b0c0b;border-radius:14px;padding:13px 16px;font:600 14px var(--font-body);text-align:center}
@media (max-width:360px){.fmd-en{font-size:16.5px}.fmd-full-en{font-size:22px}}
@media(prefers-reduced-motion:reduce){.fmd-full{transition:none;opacity:1}}
/* photo cards stay dark in every theme (white text on a photo) */
html[data-theme="light"] :is(.fmd-card,.fmd-full){color:#f3f5ef!important}

/* Shared UI icons (js/002-footop-icons.js): one size, one stroke, colour follows the text. */
.fi{display:inline-block;width:1.1em;height:1.1em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
button > .fi:only-child{vertical-align:middle}
.fi{margin-right:.3em}
[aria-label] > .fi:only-child,[aria-hidden] > .fi:only-child,.fi.fi-solo{margin-right:0}
/* Developer-only: the personal Gemini key panel shows only with ?dev=1 (see js/002-footop-icons.js). */
html:not(.fdev) :is(#apiToggleBtn,#apiSettings){display:none!important}
.fi.fi-heart.is-on{fill:currentColor;color:#ff5a6e}
.fi.is-live{color:#ff5a5a}
.fi.is-live circle:last-child{fill:#ff5a5a}

/* "예시 화면" tag on the tab-explainer phone mock-ups: its numbers are illustrations, not the user's data. */
.fti-phone{position:relative}
.fti-sample{position:absolute;top:8px;right:8px;z-index:3;font-size:10.5px;line-height:1;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#c9cdc2;border:1px solid rgba(255,255,255,.14);pointer-events:none}
/* Empty state that replaced the old hard-coded training stats */
.training-empty{margin:6px 0 0;font-size:13px;color:var(--ink-dim,#a8a8a2);line-height:1.5}

/* Google / Kakao buttons on the login card + the "가입 마무리" step (185-footop-social-login.js) */
.fsl-wrap{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.fsl-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border-radius:12px;font:600 15px/1 var(--font-body);cursor:pointer;border:1px solid transparent}
.fsl-btn svg{width:20px;height:20px;flex:none}
.fsl-btn:disabled{opacity:.6;cursor:default}
.fsl-google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.fsl-kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.fsl-msg{color:#ff8a80;font:500 13px/1.45 var(--font-body);min-height:0}
.fsl-msg:empty{display:none}
.fsl-or{display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--ink-dim,#a8a8a2);font:500 12.5px var(--font-body)}
.fsl-or::before,.fsl-or::after{content:"";flex:1;height:1px;background:var(--line,#2a2a2a)}

body.fsl-finish-open{overflow:hidden}
.fsl-finish{position:fixed;inset:0;z-index:2000100;background:#0a0a0a;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:calc(28px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.fsl-finish-card{width:100%;max-width:420px}
.fsl-finish-card h2{margin:12px 0 8px;color:#fff;font:700 24px/1.3 var(--font-body);letter-spacing:-0.02em}
.fsl-finish-sub{margin:0 0 22px;color:#b7bcb0;font:500 14px/1.6 var(--font-body);word-break:keep-all}
.fsl-finish-form{display:flex;flex-direction:column;gap:10px}
.fsl-label{color:#e6e8e1;font:600 13.5px var(--font-body);margin-top:6px}
.fsl-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.fsl-finish-form select,.fsl-finish-form input[type=text]{height:48px;border-radius:12px;border:1px solid #2c3127;background:#151814;color:#fff;padding:0 12px;font:500 15px var(--font-body);min-width:0}
.fsl-finish-form select:focus,.fsl-finish-form input:focus{outline:2px solid var(--lime,#CCFF00);outline-offset:1px}
.fsl-agree{display:flex;gap:10px;align-items:flex-start;margin-top:8px;color:#d6d9d0;font:500 13.5px/1.5 var(--font-body)}
.fsl-agree input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:#CCFF00}
.fsl-agree a{color:#fff;text-decoration:underline}
.fsl-finish-msg{min-height:20px;color:#ff8a80;font:500 13px/1.45 var(--font-body)}
.fsl-finish-go{height:52px;border-radius:14px;border:0;background:#CCFF00;color:#0a0a0a;font:700 16px var(--font-body);cursor:pointer}
.fsl-finish-go:disabled{opacity:.6}
.fsl-finish-out{height:44px;border:0;background:none;color:#a8a8a2;font:500 14px var(--font-body);text-decoration:underline;cursor:pointer}
html[data-theme="light"] .fsl-finish{background:#f6f7f4}
html[data-theme="light"] .fsl-finish-card h2{color:#111}
html[data-theme="light"] .fsl-finish-sub,html[data-theme="light"] .fsl-agree{color:#3c4037}
html[data-theme="light"] .fsl-label{color:#1d2019}
html[data-theme="light"] .fsl-agree a{color:#111}
html[data-theme="light"] .fsl-finish-form select,html[data-theme="light"] .fsl-finish-form input[type=text]{background:#fff;border-color:#cfd3c8;color:#111}
html[data-theme="light"] .fsl-finish-out{color:#555}
/* Kakao's button colour is set by Kakao's brand rules: keep it in every theme / point colour
   (the theme generator would otherwise treat this yellow as the lime accent). */
html[data-theme] .fsl-kakao,html[data-acc] .fsl-kakao{background:#FEE500!important;color:rgba(0,0,0,.85)!important;border-color:transparent!important}
html[data-theme] .fsl-google,html[data-acc] .fsl-google{background:#fff!important;color:#1f1f1f!important;border-color:#dadce0!important}

/* under 14: waiting for a guardian (2026-10-25) */
.fgd-facts{margin:-8px 0 20px;padding:14px 16px 14px 32px;border-radius:14px;background:#151814;border:1px solid #2c3127;color:#d8dcd2;font:500 14px/1.6 var(--font-body)}
.fgd-facts li{margin:2px 0;word-break:keep-all}
.fgd-facts b{color:#fff}
.fgd-sent{margin:0 0 6px;padding:14px 16px;border-radius:14px;border:1px solid rgba(204,255,0,.45);color:#e8ebe3;font:500 14.5px/1.6 var(--font-body);word-break:keep-all}
.fgd-sent b{color:#CCFF00}
.fsl-guardian .fsl-finish-msg.ok{color:#CCFF00}
.fsl-guardian .fsl-finish-go{width:100%;margin-top:6px}
.fgd-sec{width:100%;height:48px;margin-top:8px;border-radius:14px;border:1px solid #2c3127;background:transparent;color:#e8ebe3;font:600 15px var(--font-body);cursor:pointer}
.fgd-sec:disabled{opacity:.5}
.fgd-foot{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}
html[data-theme="light"] .fgd-facts{background:#fff;border-color:#d9ddd2;color:#3c4037}
html[data-theme="light"] .fgd-facts b,html[data-theme="light"] .fgd-sent{color:#111}
html[data-theme="light"] .fgd-sent b{color:#3d6b00}
html[data-theme="light"] .fgd-sec{border-color:#cfd3c8;color:#111}
html[data-theme="light"] .fsl-guardian .fsl-finish-msg.ok{color:#3d6b00}

/* App shell: one steady screen (2026-10-18). See js/186-footop-app-shell.js.
   Old height rules counted "100vh − 84px" from before the top bar existed, so screens were taller than the
   space they get: Social / Match scrolled through ~245px of empty space, 오늘의 축구 had a scroll box inside the
   scroll box, Training and Profile scrolled past the bottom of the screen. Now:
   - the shell uses the real visible height (100dvh, not the phone's "address bar hidden" height),
   - screens that live in .scroll-area grow with their content and the scroll area is the only scroller,
   - Training and Profile keep their own scroller, sized by the script to end exactly at the screen bottom,
   - the chat-like PM screen fills the space instead of scrolling the page. */
.shell,.main{height:100vh;height:100dvh}
.main{min-height:0}

/* single scroller for the screens inside .scroll-area */
html body .footop-social-root:not(#footopPMScreen),
html body .footop-main-root{height:auto!important;min-height:0!important;overflow:visible!important;padding-bottom:24px!important}
html body #panelCommunity,html body #panelTeams,html body #panelMainMenu{min-height:0!important;height:auto!important}

/* PM: a full-height screen (list or chat) with nothing extra to scroll */
html body.fsh-fill .scroll-area{padding-bottom:0!important;overflow:hidden!important}
html body.fsh-fill #panelCommunity{height:100%!important}
html body #footopPMScreen{height:auto!important;overflow:visible!important;padding-bottom:0!important}
html body.fsh-fill #footopPMScreen{height:100%!important}
html body.fsh-fill #footopPMScreen .footop-dm-card{height:calc(100% - 12px)!important;min-height:0!important}

/* team chat room: header, messages, input in one screen; the input sits just above the bottom bar */
html body.fsh-fill-team #panelTeams{height:100%!important}
html body.fsh-fill-team #footopTeamsRoot{height:100%!important;padding-bottom:0!important;display:flex!important;flex-direction:column}
html body.fsh-fill-team #footopTeamsRoot > .ftr{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body.fsh-fill-team .ftr > .footop-team-chat-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:12px!important}
html body.fsh-fill-team #footopTeamChatBody{flex:1 1 auto;height:auto!important;min-height:0!important}

/* Training / Profile: their own scroller ends at the screen bottom; content clears the bottom bar */
html body #panelTraining #ft32Root{padding-bottom:0!important}
html body #panelTraining #ft32Root > .ft32-wrap{padding-bottom:calc(var(--fsh-nav,65px) + 24px)!important}
html body .footop-profile-root{padding-bottom:calc(var(--fsh-nav,65px) + 24px)!important}
/* .scroll-area already ends above the bottom bar (main keeps that space): old rules stacked ~112px more */
html body .scroll-area{padding-bottom:24px!important}
html body.fsh-fill .scroll-area{padding-bottom:0!important}

/* switching tabs: a short fade instead of a hard cut (opacity only, so fixed children don't move) */
@media (prefers-reduced-motion: no-preference){
  .panel.active{animation:fsh-in .17s ease-out}
}
@keyframes fsh-in{from{opacity:.55}to{opacity:1}}

/* touch: no double-tap zoom delay, instant press feedback, no text selection on controls */
html{touch-action:manipulation}
:is(button,[role="button"],[role="tab"],.footop-bottom-nav a,label.fag-agree){-webkit-user-select:none;user-select:none}
#footopBottomNav,#dynamicSidebarNav,.topbar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (hover:none){
  :is(button,[role="button"],[role="tab"]):not(:disabled):active{opacity:.72}
}

/* App-like navigation (2026-10-20). See js/187-footop-app-nav.js. */

/* top bar: the section name instead of the brand everywhere except Main */
.topbar .topbar-brand.fnav-title{font:700 20px/1.2 var(--font-body)!important;letter-spacing:-.02em!important;color:var(--ink,#fff)!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:currentColor!important;text-transform:none!important}
/* the side menu only holds developer tools now (Topi has its own chat list) */
html:not(.fdev) #sidebarToggle{display:none!important}
html:not(.fdev) .topbar .topbar-brand{margin-left:4px}

/* top bar + sub-tab strip slide away while scrolling down a list */
.topbar{transition:margin-top .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
html.fnav-top-off .topbar{opacity:0}
html.fnav-top-off #dynamicSidebarNav{opacity:0;transition:opacity .2s ease}
html:not(.fnav-top-off) #dynamicSidebarNav{transition:opacity .2s ease}

/* a full screen opened over the app slides in from the right */
@media (prefers-reduced-motion:no-preference){
  .fnav-push{animation:fnav-push .26s cubic-bezier(.2,.8,.2,1)}
  .panel.fnav-in-r{animation:fnav-in-r .24s cubic-bezier(.2,.8,.2,1)}
  .panel.fnav-in-l{animation:fnav-in-l .22s cubic-bezier(.2,.8,.2,1)}
}
@keyframes fnav-push{from{transform:translateX(36px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fnav-in-r{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@keyframes fnav-in-l{from{transform:translateX(-22px);opacity:.5}to{transform:none;opacity:1}}

/* no web-page tells: scrollbars, image drag ghosts, long-press image menus, tap flashes */
.scroll-area,#ft32Root,#footopProfileRoot,.footop-dm-overlay,.footop-athlete-overlay,.dna-public-overlay{scrollbar-width:none}
.scroll-area::-webkit-scrollbar,#ft32Root::-webkit-scrollbar,#footopProfileRoot::-webkit-scrollbar,.footop-dm-overlay ::-webkit-scrollbar,.footop-athlete-overlay::-webkit-scrollbar,.dna-public-overlay::-webkit-scrollbar{width:0;height:0;display:none}
#shell img,#shell svg{-webkit-user-drag:none;user-select:none}
#shell img{-webkit-touch-callout:none}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}

/* running as an installed app: no browser bar above, so leave room for the status bar */
@media (display-mode: standalone){
  .topbar{padding-top:max(env(safe-area-inset-top),0px)}
}

/* the top bar names the section and the strip names the screen: a third copy of the same name is noise */
#panelFeed .feed-title,#panelTracking .tracking-title{display:none!important}

/* "앱처럼 쓰기" — install FOOTOP to the home screen (2026-10-20). See js/188-footop-install.js. */
.fin-main{display:flex;gap:12px;align-items:flex-start}
.fin-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(204,255,0,.12);color:var(--accent,#CCFF00)}
.fin-ic svg{width:19px;height:19px}
.fin-main-body{min-width:0}
.fin-main-text{margin:4px 0 0;font:500 14px/1.5 var(--font-body);color:var(--ink-dim,#A8A8A2)}
#footopMainInstallCard .fsu-foot{margin-top:12px}
.fin-set-title{margin:0 0 6px;font:700 16px/1.3 var(--font-body)}
.fin-set-text{margin:0;font:500 14px/1.55 var(--font-body);color:var(--ink-dim,#A8A8A2)}
.fin-set-btn{margin-top:12px}
.fin-sheet{position:fixed;inset:0;z-index:2000050;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0);transition:background .2s ease}
.fin-sheet.open{background:rgba(0,0,0,.55)}
.fin-panel{width:100%;max-width:480px;background:#141713;color:#f3f5ef;border-radius:20px 20px 0 0;padding:8px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.fin-sheet.open .fin-panel{transform:none}
.fin-grab{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);margin:4px auto 10px}
.fin-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fin-head h3{margin:0;font:700 18px/1.3 var(--font-body)}
.fin-close{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;cursor:pointer}
.fin-close svg{width:18px;height:18px}
.fin-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.fin-steps li{display:flex;gap:12px;align-items:flex-start;font:500 15px/1.5 var(--font-body)}
.fin-steps li svg{width:16px;height:16px;vertical-align:-3px}
.fin-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#CCFF00;color:#0a0a0a;font:700 13px/1 var(--font-body)}
.fin-note{margin:14px 0 0;font:500 13px/1.5 var(--font-body);color:#A8A8A2}
.fin-done{margin-top:16px;width:100%;min-height:48px;border:0;border-radius:12px;background:#CCFF00;color:#0a0a0a;font:700 15px var(--font-body);cursor:pointer}
.fin-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2000060;max-width:min(92vw,360px);padding:10px 14px;border-radius:12px;background:#1d211a;border:1px solid #2c3127;color:#e6e9e1;font:500 13px/1.45 var(--font-body);text-align:center}

/* 오늘의 축구 움직이는 그림 (2026-10-20). See js/096-footop-tf-reel.js. Lives inside the story viewer (.tfs), which stays dark in every theme. */
.tfs .tfs-reel{display:flex;flex-direction:column;gap:10px}
.tfs .tfs-reel .tfs-k{margin-bottom:0}
.tfs .frl{position:relative;pointer-events:auto;display:flex;flex-direction:column;gap:10px;-webkit-user-select:none;user-select:none}
.tfs .frl-svg{display:block;width:100%;height:auto;border-radius:14px;cursor:pointer}
.tfs .frl-snap *{transition:none!important}

/* pitch */
.tfs .frl-pitch{fill:#1c5c33;stroke:rgba(255,255,255,.75);stroke-width:.5}
.tfs .frl-m{fill:none;stroke:rgba(255,255,255,.5);stroke-width:.4}
.tfs .frl-spot{fill:rgba(255,255,255,.6)}
.tfs .frl-goal{fill:#fff}
.tfs .frl-z rect{fill:rgba(255,213,74,.2);stroke:rgba(255,213,74,.85);stroke-width:calc(.4px * var(--kz,1));stroke-dasharray:1.2 .8}
.tfs .frl-z text{fill:#ffe9a3;font:700 calc(2.7px * var(--kz,1)) var(--font-body)}
.tfs .frl-z,.tfs .frl-ln{opacity:0;transition:opacity .45s ease}
.tfs .frl-z.on,.tfs .frl-ln.on{opacity:1}
.tfs .frl-ln{stroke:rgba(255,255,255,.85);stroke-width:calc(.5px * var(--kz,1));stroke-dasharray:1.4 .9}
.tfs .frl-off{stroke:#ff6b6b;stroke-width:calc(.55px * var(--kz,1));stroke-dasharray:1.4 1;opacity:0;transition:transform var(--mv,.9s) cubic-bezier(.45,.05,.3,1),opacity .3s}
.tfs .frl-t{fill:none;stroke-width:calc(.7px * var(--kz,1));stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset var(--mv,.9s) cubic-bezier(.45,.05,.3,1),opacity .25s}
.tfs .frl-t.pass{stroke:#CCFF00}
.tfs .frl-t.drib{stroke:#ffd54a}
.tfs .frl-t.run{stroke:#fff;stroke-dasharray:calc(1.3px * var(--kz,1)) calc(1px * var(--kz,1));stroke-dashoffset:0;transition:opacity var(--mv,.9s) ease}
.tfs .frl-t.now,.tfs .frl-t.past{opacity:1;stroke-dashoffset:0}
.tfs .frl-t.past{opacity:.4}
.tfs .frl-t.hint.past,.tfs .frl-t.gone{opacity:0!important}
.tfs .frl-p,.tfs .frl-b{transition:transform var(--mv,.9s) cubic-bezier(.45,.05,.3,1),opacity .3s}
.tfs .frl-p circle{stroke:#0a0a0a;stroke-width:.5}
.tfs .frl-p.us circle{fill:#CCFF00}
.tfs .frl-p.them circle{fill:#ff6b6b}
.tfs .frl-p.gk circle{fill:#ffb347}
.tfs .frl-p.ref circle{fill:#1b1d1b;stroke:#f3f5ef}
.tfs .frl-p .frl-ring{fill:none!important;stroke:#fff!important;stroke-width:.45!important;opacity:0;transition:opacity .3s}
.tfs .frl-p.hi .frl-ring{opacity:.95}
.tfs .frl-p text{fill:#fff;font:700 2.6px var(--font-body);paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:.6px}
.tfs .frl-b circle{fill:#fff;stroke:#0a0a0a;stroke-width:.35}
.tfs .frl-mk{opacity:0;transition:opacity .3s ease .45s}
.tfs .frl-mk.on{opacity:1}
/* marks are dark badges with a coloured ring, so they never look like a player */
.tfs .frl-mk circle{fill:#0b0c0b;stroke:#ffd54a;stroke-width:.55}
.tfs .frl-mk.x circle{stroke:#ff6b6b}
.tfs .frl-mk.ok circle{stroke:#CCFF00}
.tfs .frl-mk text{fill:#ffd54a;font:800 3px var(--font-body)}
.tfs .frl-mk.x text{fill:#ff6b6b}
.tfs .frl-mk.ok text{fill:#CCFF00}
.tfs .frl-mk text.frl-mk-l{fill:#fff;font:700 2.7px var(--font-body);paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:.6px}
.tfs .frl-figwrap .frl-mk text{font-size:3.6px}
.tfs .frl-figwrap .frl-mk text.frl-mk-l{font-size:3.4px}

/* line-drawn player */
.tfs .frl-fbg{fill:#121512}
.tfs .frl-ground{stroke:rgba(255,255,255,.28);stroke-width:.5}
.tfs .frl-fig path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tfs .frl-fig .body{stroke-width:2.7}
.tfs .frl-fig .to{stroke-width:3.8}
.tfs .frl-fig .far{stroke-width:2.4}
.tfs .frl-fig.us .body,.tfs .frl-fig.us .hd{stroke:#CCFF00}
.tfs .frl-fig.us .far{stroke:#6f8a14}
.tfs .frl-fig.us .hd{fill:#CCFF00}
.tfs .frl-fig.them .body,.tfs .frl-fig.them .hd{stroke:#ff6b6b}
.tfs .frl-fig.them .far{stroke:#8f3c3c}
.tfs .frl-fig.them .hd{fill:#ff6b6b}
.tfs .frl-fig.gk .body,.tfs .frl-fig.gk .hd{stroke:#ffb347}
.tfs .frl-fig.gk .far{stroke:#8a5f22}
.tfs .frl-fig.gk .hd{fill:#ffb347}
.tfs .frl-fig.ref .body,.tfs .frl-fig.ref .hd{stroke:#f3f5ef}
.tfs .frl-fig.ref .far{stroke:#7c8079}
.tfs .frl-fig.ref .hd{fill:#f3f5ef}
.tfs .frl-fig .hd{stroke-width:.4}
.tfs .frl-card{opacity:0;fill:#ffd54a;stroke:#0a0a0a;stroke-width:.3}
.tfs .frl-card.on{opacity:1}
.tfs .frl-card.red{fill:#ff4d4d}
.tfs .frl-fb circle{fill:#fff;stroke:#0a0a0a;stroke-width:.4}
.tfs .frl-fb-s{fill:#0a0a0a;stroke:none;opacity:.8}
.tfs .frl-fgoal{fill:none;stroke:#fff;stroke-width:.9}
.tfs .frl-fnet{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.4;stroke-dasharray:1 .8}
.tfs .frl-cone{fill:#ff9f43}
.tfs .frl-fline{stroke:#fff;stroke-width:.8}
.tfs .frl-flbl{fill:rgba(255,255,255,.7);font:600 2.8px var(--font-body)}
.tfs .frl-wall{fill:rgba(255,255,255,.18)}
.tfs .frl-bed{fill:#2c3a54}
.tfs .frl-co{opacity:0;transition:opacity .3s ease}
.tfs .frl-co.on{opacity:1}
.tfs .frl-co-dot{fill:#fff}
.tfs .frl-co-ln{stroke:rgba(255,255,255,.7);stroke-width:.35;fill:none}
.tfs .frl-co-t{fill:#fff;font:700 3.6px var(--font-body);paint-order:stroke;stroke:#121512;stroke-width:1px}

/* caption + controls (shared) */
.tfs .frl-cap{min-height:3.1em;display:flex;flex-direction:column;gap:2px}
.tfs .frl-cap-n{font:600 12.5px var(--font-body);color:#CCFF00}
.tfs .frl-cap-t{font:600 17px/1.45 var(--font-body);color:#f3f5ef;word-break:keep-all}
.tfs .frl-ctl{display:flex;align-items:center;gap:10px}
.tfs .frl-play,.tfs .frl-replay{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f3f5ef;display:grid;place-items:center;cursor:pointer;padding:0}
.tfs .frl-play .fi,.tfs .frl-replay .fi{width:18px;height:18px;margin:0}
.tfs .frl-dots{flex:1;display:flex;gap:4px;min-width:0}
.tfs .frl-dot{flex:1;min-width:0;height:40px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center}
.tfs .frl-dot span{display:block;width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.16);transition:background .3s}
.tfs .frl-dot.done span{background:rgba(243,245,239,.55)}
.tfs .frl-dot.on span{background:#CCFF00}
.tfs .frl-legend{display:flex;flex-wrap:wrap;gap:4px 12px;color:rgba(255,255,255,.75);font:600 12px var(--font-body)}
.tfs .frl-legend span{display:inline-flex;align-items:center;gap:6px}
.tfs .frl-legend span::before{content:'';display:inline-block}
.tfs .frl-legend .pass::before{width:16px;height:2px;background:#CCFF00}
.tfs .frl-legend .run::before{width:16px;height:0;border-top:2px dashed #fff}
.tfs .frl-legend .drib::before{width:16px;height:2px;background:#ffd54a}
.tfs .frl-legend .us::before{width:10px;height:10px;border-radius:50%;background:#CCFF00}
.tfs .frl-legend .them::before{width:10px;height:10px;border-radius:50%;background:#ff6b6b}
.tfs .frl-legend .off::before{width:0;height:12px;border-left:2px dashed #ff6b6b}

/* breathing guide */
.tfs .frl-br-stage{position:relative;height:min(44vh,300px);display:grid;place-items:center;cursor:pointer}
.tfs .frl-br-ring{position:absolute;left:50%;top:50%;width:min(56%,210px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(204,255,0,.26),rgba(204,255,0,.06) 70%);border:2px solid rgba(204,255,0,.75);transform:translate(-50%,-50%) scale(.6);transition:transform 4s cubic-bezier(.45,.05,.3,1)}
.tfs .frl-br-ring.big{transform:translate(-50%,-50%) scale(1.15)}
.tfs .frl-br-txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.tfs .frl-br-w{font:700 22px var(--font-body);color:#f3f5ef}
.tfs .frl-br-n{font:400 34px/1 var(--font-score);color:#CCFF00;min-height:34px}
.tfs .frl-br-cap{margin:0;font:600 16px/1.5 var(--font-body);color:#d8dcd2;word-break:keep-all;text-align:center}
.tfs .frl-br-meta{text-align:center;font:500 13px var(--font-body);color:#9ea596}
.tfs .frl-br-hint{flex:1;text-align:center;font:500 13px var(--font-body);color:#9ea596}

/* steps in order */
.tfs .frl-sq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.tfs .frl-sq-i{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px 14px;border-radius:16px;background:#151715;border:1px solid rgba(255,255,255,.07);overflow:hidden;transition:opacity .35s,border-color .35s,background .35s}
.tfs .frl-sq-i.fut{opacity:.45}
.tfs .frl-sq-i.now{border-color:rgba(204,255,0,.6);background:#1a1e15}
.tfs .frl-sq-side{flex:0 0 64px;font:600 12.5px/1.3 var(--font-body);color:#9ea596}
.tfs .frl-sq-i.now .frl-sq-side{color:#CCFF00}
.tfs .frl-sq-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#d8dcd2}
.tfs .frl-sq-ic .fi{width:17px;height:17px;margin:0}
.tfs .frl-sq-i.now .frl-sq-ic{background:#CCFF00;color:#0b0c0b}
.tfs .frl-sq-i.done .frl-sq-ic{color:#CCFF00}
.tfs .frl-sq-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.tfs .frl-sq-tx b{font:700 15.5px/1.35 var(--font-body);color:#f3f5ef;word-break:keep-all}
.tfs .frl-sq-tx small{font:500 13px/1.45 var(--font-body);color:#a7ad9f;word-break:keep-all}
.tfs .frl-sq-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.tfs .frl-sq-bar i{display:block;height:100%;width:0;background:#CCFF00}
.tfs .frl-sq-i.now .frl-sq-bar i{width:100%;transition:width var(--sq,0s) linear}
.tfs .frl-sq-i.done .frl-sq-bar i{width:0}
.tfs .frl-seq .frl-cap.empty{display:none}

/* bars */
.tfs .frl-bars{cursor:pointer}
.tfs .frl-br-row{opacity:.35;transition:opacity .35s}
.tfs .frl-br-row.on{opacity:1}
.tfs .frl-br-l{font:600 13.5px var(--font-body);color:#d8dcd2;margin-bottom:6px}
.tfs .frl-br-track{display:flex;align-items:flex-end;gap:3px;height:72px;padding:18px 0 2px;border-bottom:1px solid rgba(255,255,255,.2)}
.tfs .frl-br-seg{position:relative;height:100%;display:flex;align-items:flex-end}
.tfs .frl-br-seg i{display:block;width:100%;height:calc(var(--v) * 100%);border-radius:5px 5px 2px 2px;background:#CCFF00;transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.3,.9,.3,1) calc(var(--j) * .08s)}
.tfs .frl-br-seg.cool i{background:#5b7a2a}
.tfs .frl-br-seg.bad i{background:#ff6b6b}
.tfs .frl-br-seg.rest i{background:rgba(255,255,255,.2)}
.tfs .frl-br-row.on .frl-br-seg i{transform:none}
.tfs .frl-br-seg em{position:absolute;left:0;right:0;bottom:calc(var(--v) * 100% + 3px);text-align:center;font:600 11px var(--font-body);font-style:normal;color:#c9ccc4;white-space:nowrap;opacity:0;transition:opacity .3s .4s}
.tfs .frl-br-row.on .frl-br-seg em{opacity:1}
.tfs .frl-br-foot{margin-top:5px;font:500 12px var(--font-body);color:#9ea596}
.tfs .frl-bars>.frl-br-row+.frl-br-row{margin-top:14px}
.tfs .frl-br-note{margin:0;font:500 12px var(--font-body);color:#7f8678}

/* paused: a small badge so it's clear the scene stopped on purpose */
.tfs .frl.paused .frl-play{border-color:#CCFF00;color:#CCFF00}

/* drill slide: the reel's real ending */
.tfs .tfs-drill-go{margin:20px 0 0;font:600 14.5px/1.5 var(--font-body);color:#9ea596}

/* hook slide: says a moving picture is coming */
.tfs .tfs-meta .frl-has{color:#CCFF00}
.tfl-foot .frl-has,.tfk .frl-has{color:#CCFF00}

@media (max-width:360px){.tfs .frl-cap-t{font-size:15.5px}.tfs .frl-sq-tx b{font-size:14.5px}.tfs .frl-sq-side{flex-basis:52px}}
@media (prefers-reduced-motion:reduce){.tfs .frl *{transition:none!important}}

/* Notices sheet (2026-10-26) and the 이용 통계 switch in Settings */
.fnt{position:fixed;inset:0;z-index:1000150;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.fnt.open{opacity:1}
.fnt-panel{width:100%;max-width:520px;max-height:86vh;overflow-y:auto;background:#141713;border-radius:22px 22px 0 0;padding:10px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(24px);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.fnt.open .fnt-panel{transform:none}
.fnt-grab{width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.2);margin:0 auto 14px}
.fnt-h{margin:0 0 6px;color:#f3f5ef;font:700 20px var(--font-body)}
.fnt-kicker{margin:0 0 4px;color:#CCFF00;font:600 13px var(--font-body)}
.fnt-item{padding:12px 0 6px;border-top:1px solid rgba(255,255,255,.08)}
.fnt-item:first-of-type,.fnt-kicker+.fnt-item{border-top:0;padding-top:0}
.fnt-item small{color:#8d9486;font:500 12.5px var(--font-body)}
.fnt-item h3{margin:4px 0 10px;color:#f3f5ef;font:700 18px/1.4 var(--font-body);word-break:keep-all}
.fnt-item ul{margin:0;padding-left:18px;color:#d8dcd2;font:500 14.5px/1.65 var(--font-body)}
.fnt-item li{margin:6px 0;word-break:keep-all}
.fnt-links{display:flex;gap:14px;margin:12px 0 0}
.fnt-links a{color:#CCFF00;font:600 14px var(--font-body)}
.fnt-empty{color:#9ea596;font:500 14px var(--font-body)}
.fnt-ok{display:block;width:100%;min-height:52px;margin-top:18px;border:0;border-radius:14px;background:#CCFF00;color:#0a0a0a;font:700 16px var(--font-body);cursor:pointer}
html[data-theme="light"] .fnt-panel{background:#fff}
html[data-theme="light"] .fnt-h,html[data-theme="light"] .fnt-item h3{color:#111}
html[data-theme="light"] .fnt-item ul{color:#333}
html[data-theme="light"] .fnt-links a,html[data-theme="light"] .fnt-kicker{color:#3d6b00}
html[data-theme="light"] .fnt-grab{background:rgba(0,0,0,.15)}
.fst-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:600 15px var(--font-body)}
.fst-switch input{width:22px;height:22px;accent-color:#CCFF00}
.fst-stats-note{margin:8px 0 0}

/* Bottom tabs without the neon highlight (2026-10-27, user request).
   The selected tab no longer gets a lime tint, a lime border, a glowing bar or an icon glow.
   Selectors start with #footopBottomNav so they also beat the Training tab's own rules (053: [data-bottom-panel="training"].active).
   Which tab is open still shows: the selected icon is full colour, the others stay dimmed (058). */
#footopBottomNav .footop-bottom-btn,
#footopBottomNav .footop-bottom-btn.active,
#footopBottomNav .footop-bottom-btn[data-bottom-panel].active{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#footopBottomNav .footop-bottom-btn.active::before,
#footopBottomNav .footop-bottom-btn.active::after,
#footopBottomNav .footop-bottom-btn[data-bottom-panel].active::before,
#footopBottomNav .footop-bottom-btn[data-bottom-panel].active::after{content:none!important;display:none!important}
#footopBottomNav .footop-bottom-btn .footop-bottom-icon,
#footopBottomNav .footop-bottom-btn[data-bottom-panel].active .footop-bottom-icon{box-shadow:none!important}

/* Free-licence news photo credit (2026-10-27). Selectors start with photo-card classes so light mode keeps them as is. */
.feed-post .news-credit-mini,
.trk-news-square .news-credit-mini,
.mn-featured-card .news-credit-mini{
  margin-top:4px;font:500 11px/1.3 var(--font-body,sans-serif);color:rgba(255,255,255,.66);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.cardnews-viewer .cardnews-credit{
  margin-top:14px;font:500 12px/1.45 var(--font-body,sans-serif);color:rgba(255,255,255,.7);word-break:keep-all
}
.cardnews-viewer .cardnews-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 공개 범위 card (Settings) and the locked notice on someone's player page (2026-10-27) */
.fprv-sub{margin:6px 0 12px;color:var(--ink-dim,#a8a8a2);font:400 13.5px/1.5 var(--font-body)}
.fprv-opts{display:grid;gap:8px}
.fprv-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 14px;border:1px solid var(--line,#292929);border-radius:14px;background:transparent;color:var(--ink,#f2f4ee);text-align:left;cursor:pointer;min-height:48px}
.fprv-opt.on{border-color:var(--fx-acc,#CCFF00);background:color-mix(in srgb,var(--fx-acc,#CCFF00) 7%,transparent)}
.fprv-dot{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--ink-faint,#8a8a85)}
.fprv-opt.on .fprv-dot{border-color:var(--fx-acc,#CCFF00);box-shadow:inset 0 0 0 4px var(--bg-raised,#141713);background:var(--fx-acc,#CCFF00)}
.fprv-txt{display:flex;flex-direction:column;gap:2px}
.fprv-txt b{font:600 15px var(--font-body)}
.fprv-txt small{font:400 12.5px/1.45 var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fprv-search{margin-top:16px}
.fprv-note{margin:6px 0 0}
.fprv-status{min-height:18px;margin:10px 0 0;font:500 13px var(--font-body);color:var(--fx-acc,#CCFF00)}
.fprv-status.bad{color:#ff8a7a}
.fprv-locked{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;text-align:center}
.fprv-locked .fi{width:26px;height:26px;margin:0 0 4px;color:var(--ink-dim,#a8a8a2)}
.fprv-locked h3{margin:0}
.fprv-locked p{margin:0;max-width:300px;color:var(--ink-dim,#a8a8a2);font:400 14px/1.55 var(--font-body);word-break:keep-all}

/* 내 라커 entrance (2026-10-27). Matte, dim dressing room; one locker; the door swings open onto the app.
   Always dark (every theme), sits above everything inside the phone column. */
html.flk-on body{overflow:hidden}
.flk{position:fixed;inset:0;z-index:1000600;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#0b0c0b;color:#e9ebe5;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .4s ease .05s}
.flk.flk-gone{opacity:0;pointer-events:none}
.flk-room{position:absolute;inset:0;overflow:hidden}
/* one ceiling light, falling on the locker */
.flk-light{position:absolute;left:50%;top:-30%;width:150%;height:95%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(236,240,226,.13),rgba(236,240,226,.04) 55%,transparent)}
/* wooden bench along the floor */
.flk-bench{position:absolute;left:8%;right:8%;bottom:15%;height:12px;border-radius:3px;background:#2a2219;box-shadow:0 14px 0 -6px #120f0b}
.flk-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.flk-locker{position:relative;width:min(56vw,210px);aspect-ratio:3/5.6;perspective:900px;border-radius:6px;
  background:#060706;box-shadow:0 0 0 6px #171a17,0 30px 60px rgba(0,0,0,.55)}
.flk-inside{position:absolute;inset:0;border-radius:6px;background:linear-gradient(#141814,#0d100d)}
.flk-hook{position:absolute;left:50%;top:12%;width:16px;height:16px;margin-left:-8px;border:3px solid #3a3f38;border-top-color:transparent;border-radius:50%}
.flk-shirt{position:absolute;left:22%;right:22%;top:17%;height:42%;border-radius:12px 12px 6px 6px;background:var(--flk-kit);opacity:.85}
.flk-door{position:absolute;inset:0;border-radius:6px;transform-origin:left center;transition:transform .9s cubic-bezier(.55,.05,.3,1);
  background:linear-gradient(90deg,#272b27,#30352f 45%,#262a26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset -10px 0 18px rgba(0,0,0,.25)}
.flk.flk-open .flk-door{transform:rotateY(-104deg)}
.flk-vents{position:absolute;left:24%;right:24%;top:7%;display:grid;gap:6px}
.flk-vents i{display:block;height:5px;border-radius:3px;background:#121512;box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04)}
.flk-plate{position:absolute;left:14%;right:14%;top:34%;padding:12px 8px 10px;border-radius:4px;background:#e4e2d8;color:#151612;
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.flk-num{font:400 46px/1 var(--font-score,sans-serif);letter-spacing:.02em}
.flk-num:empty{display:none}
.flk-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px var(--font-body,sans-serif);letter-spacing:.08em;text-transform:uppercase}
.flk-kit{position:absolute;left:0;right:0;top:56%;height:7px;background:var(--flk-kit);opacity:.9}
.flk-handle{position:absolute;right:9%;top:62%;width:6px;height:34px;border-radius:3px;background:#55594f}
.flk-hello{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:opacity .3s ease}
.flk-hello b{font:600 17px var(--font-body,sans-serif)}
.flk-hello span{font:400 13.5px var(--font-body,sans-serif);color:#9a9e95}
.flk.flk-open .flk-hello{opacity:.4}
.flk-skip{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-height:40px;padding:0 16px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:#c9ccc3;font:500 13.5px var(--font-body,sans-serif);cursor:pointer}
@media (prefers-reduced-motion:reduce){ .flk-door{transition:none} .flk.flk-open .flk-door{transform:none;opacity:.0} }
/* the plate, vents, stripe and handle belong to the front of the door: hide them when it swings past 90° */
.flk-door{transform-style:preserve-3d}
.flk-door > *{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* Matte look for the calm default point colour (잔디, 2026-10-27).
   The theme generator already swaps lime for grass and drops lime glows; these are the bright bits it can't see:
   the yellow-lime-green logo gradient and the gradient icon tiles in the bottom bar. Neon lime (picked in 테마) keeps them. */
html[data-acc="grass"] .brand-mark{background:none;-webkit-text-fill-color:currentColor;color:#dfe5d6}
html[data-acc="grass"] .footop-bottom-icon{filter:saturate(.45) brightness(.9)}
html[data-acc="grass"] .footop-bottom-btn.active .footop-bottom-icon{filter:saturate(.75)}
html[data-acc="grass"][data-theme="light"] .brand-mark{color:#1d241c}
/* photo cards keep their dark look in light mode, so the generator leaves them alone: give their labels the calm colour by hand */
html[data-acc="grass"] .fmd-act span,html[data-acc="grass"] .fmd-full-act small,html[data-acc="grass"] .fmd-full-advice small{color:var(--fx-acc)}

/* Main News in FotMob's shape (2026-10-27): the photo sits inside a dark card with the headline and
   "outlet · 2시간 전" underneath (no text on the photo), then numbered "주요 소식" and plain "최신 소식" rows
   with a rounded thumbnail on the right. */
#mnFeatured{margin:4px 0 14px}
.fmn-hero{display:block;padding:14px;border-radius:20px;background:var(--surface,#161616);border:1px solid rgba(255,255,255,.06);cursor:pointer;color:var(--ink,#f2f4ee)}
.fmn-hero-img{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0f110f}
.fmn-hero-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.fmn-hero-body{padding:14px 4px 2px}
.fmn-hero-title{margin:0 0 10px;font:700 20px/1.35 var(--font-body);letter-spacing:-.01em;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.fmn-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.fmn-box,.fmn-hero{min-width:0}
.fmn-box{padding:16px 16px 6px;border-radius:20px;background:var(--surface,#161616);border:1px solid rgba(255,255,255,.06)}
.fmn-box-title{margin:0 0 4px;font:700 16px var(--font-body);color:var(--ink,#f2f4ee)}
.fmn-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.07);cursor:pointer;color:var(--ink,#f2f4ee)}
.fmn-box-title + .fmn-row{border-top:0}
.fmn-num{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  background:var(--fx-acc,#CCFF00);color:#0b0f08;font:700 12px var(--font-body)}
.fmn-row-text{flex:1 1 auto;min-width:0}
.fmn-row-title{margin:0 0 8px;font:600 15.5px/1.4 var(--font-body);word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fmn-thumb{flex:0 0 auto;width:104px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0f110f}
.fmn-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

.fmn-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;font:500 12.5px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fmn-src{font-weight:600;color:var(--ink,#e9ebe5);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmn-ago{flex:0 0 auto;white-space:nowrap}
.fmn-tags{margin-top:8px}
.fmn-ago::before{content:"·";margin-right:8px;color:var(--ink-faint,#8a8a85)}
.fmn-credit{margin-top:6px;font:400 11px/1.3 var(--font-body);color:var(--ink-faint,#8a8a85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmn-more{margin:6px 0 10px;width:100%}
.fmn-hero:focus-visible,.fmn-row:focus-visible{outline:2px solid var(--fx-acc,#CCFF00);outline-offset:3px;border-radius:14px}
@media (max-width:340px){ .fmn-thumb{width:92px} .fmn-hero-title{font-size:18px} }

/* Cardnews tiles and Tracking rows in the same shape as Main News (FotMob, 2026-10-29):
   photo first, words underneath on the card, never text laid over the photo. */
#trkNewsList.trk-news-list{display:block!important}
#trkNewsList .trk-box{margin-top:4px}
.fcn-kicker{margin:0 0 5px;font:600 12px/1.3 var(--font-body);color:var(--fx-acc-muted,#a9c76a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-row-cmt{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;color:var(--ink-faint,#8a8a85)}
.trk-row-cmt .fi{width:13px;height:13px;margin:0}
.trk-row-cmt::before{content:"·";margin-right:5px}

/* Cardnews: two columns of cards */
#footopFeedGrid.feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.fcn-card{display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--surface,#161616);border:1px solid rgba(255,255,255,.06);color:var(--ink,#f2f4ee)}
.fcn-img{aspect-ratio:4/3;background:#0f110f;overflow:hidden}
.fcn-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.fcn-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:10px 11px 12px}
.fcn-title{margin:0 0 8px;font:600 14.5px/1.4 var(--font-body);word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fcn-body .fmn-meta{margin-top:auto;font-size:11.5px}
.fcn-body .fmn-credit{margin-top:5px}
.fcn-card:focus-visible{outline:2px solid var(--fx-acc,#CCFF00);outline-offset:2px}

/* Screen flow (2026-10-29): up-next countdowns, "다 봤어요" markers, the 쉬어 가기 sheet. */

/* 오늘의 축구: the countdown on "다음 카드" */
.tfs .tfs-upn{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:999px;
  background:rgba(0,0,0,.22);font:700 12.5px var(--font-body);font-variant-numeric:tabular-nums}
.tfs .tfs-upcap{margin:8px 0 0;text-align:center;font:500 12.5px var(--font-body);color:#9ea596}

/* news viewer: next story */
.cardnews-viewer .cnx-next{margin-top:18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:grid;gap:6px}
.cardnews-viewer .cnx-next small{font:600 12px var(--font-body);color:#a8b0a6}
.cardnews-viewer .cnx-next b{font:600 15px/1.4 var(--font-body);color:#f2f4ee;word-break:keep-all}
.cardnews-viewer .cnx-next p{margin:0;font:400 13px/1.5 var(--font-body);color:#a8b0a6}
.cardnews-viewer .cnx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:4px;border:0;border-radius:12px;
  background:var(--fx-acc,#CCFF00);color:#0b0f08;font:700 15px var(--font-body);cursor:pointer}
.cardnews-viewer .cnx-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.18);font:700 12.5px var(--font-body);font-variant-numeric:tabular-nums}
.cardnews-viewer .cnx-cap:empty{display:none}

/* Main News: end of the list */
.fmn-caught{display:grid;gap:6px;justify-items:center;text-align:center;padding:22px 16px 8px}
.fmn-caught b{font:700 16px var(--font-body);color:var(--ink,#f2f4ee)}
.fmn-caught p{margin:0;max-width:32ch;font:400 14px/1.55 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all}
.fmn-caught-btn{margin-top:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line,#292929);background:transparent;color:var(--ink,#f2f4ee);font:600 14px var(--font-body);cursor:pointer}

/* 쉬어 가기 sheet */
.fbk{position:fixed;inset:0;z-index:1000400;display:flex;align-items:flex-end;background:rgba(0,0,0,0);transition:background .2s ease}
.fbk.open{background:rgba(0,0,0,.5)}
.fbk-panel{width:100%;padding:10px 20px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--surface,#161616);color:var(--ink,#f2f4ee);
  transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1);display:grid;gap:10px}
.fbk.open .fbk-panel{transform:none}
.fbk-grab{justify-self:center;width:40px;height:4px;border-radius:2px;background:rgba(128,128,128,.4);margin-bottom:6px}
.fbk-panel h3{margin:0;font:700 19px/1.35 var(--font-body)}
.fbk-panel p{margin:0;font:400 14.5px/1.55 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all}
.fbk-mission{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--fx-acc,#CCFF00) 10%,transparent);display:grid;gap:3px}
.fbk-mission small{font:600 12.5px var(--font-body);color:var(--fx-acc,#CCFF00)}
.fbk-mission b{font:600 15px/1.45 var(--font-body);word-break:keep-all}
.fbk-acts{display:grid;gap:8px;margin-top:4px}
.fbk-ok,.fbk-later{min-height:48px;border-radius:14px;font:700 15.5px var(--font-body);cursor:pointer}
.fbk-ok{border:0;background:var(--fx-acc,#CCFF00);color:#0b0f08}
.fbk-later{border:1px solid var(--line,#292929);background:transparent;color:var(--ink,#f2f4ee)}
.fbk-note{font-size:12.5px!important;text-align:center}
.fbk-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fbk-seg button{min-height:42px;border-radius:12px;border:1px solid var(--line,#292929);background:transparent;color:var(--ink,#f2f4ee);font:600 14px var(--font-body);cursor:pointer}
.fbk-seg button.on{border-color:var(--fx-acc,#CCFF00);background:color-mix(in srgb,var(--fx-acc,#CCFF00) 10%,transparent)}
@media (prefers-reduced-motion:reduce){ .fbk,.fbk-panel{transition:none} }

/* Training Home: the sheet behind 훈련 시작하기 (2026-10-31) */
.fst{position:fixed;inset:0;z-index:1000300;display:flex;align-items:flex-end;background:rgba(0,0,0,0);transition:background .18s ease}
.fst.open{background:rgba(0,0,0,.5)}
.fst-panel{width:100%;padding:10px 16px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--surface,#161616);color:var(--ink,#f2f4ee);
  transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);display:grid;gap:10px}
.fst.open .fst-panel{transform:none}
.fst-grab{justify-self:center;width:40px;height:4px;border-radius:2px;background:rgba(128,128,128,.4)}
.fst-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.fst-head h3{margin:0;font:700 19px/1.35 var(--font-body)}
.fst-close{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-dim,#a8a8a2);cursor:pointer}
.fst-close .fi{margin:0}
.fst-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 14px;text-align:left;border-radius:16px;border:1px solid var(--line,#292929);background:transparent;color:var(--ink,#f2f4ee);cursor:pointer}
.fst-primary{background:var(--fx-acc,#CCFF00);border-color:transparent;color:#0b0f08}
.fst-ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(128,128,128,.14);font-size:20px}
.fst-primary .fst-ic{background:rgba(0,0,0,.12)}
.fst-ic .fi{margin:0}
.fst-txt{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.fst-txt b{font:700 16px/1.3 var(--font-body)}
.fst-txt small{font:400 13.5px/1.4 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all}
.fst-primary .fst-txt small{color:rgba(11,15,8,.74)}
.fst-arrow{flex:0 0 auto;opacity:.6}
.fst-basic{justify-self:center;min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--ink-dim,#a8a8a2);font:500 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (prefers-reduced-motion:reduce){ .fst,.fst-panel{transition:none} }
/* the small line on the coloured button stays dark in every theme */
.fst-primary .fst-txt small{color:#1f2a1a!important}

/* Photos of the player or manager a story names (2026-10-31): these are portraits, so keep the top of the photo in the crop. */
img[src$="#person"]{object-position:50% 18%!important}
/* Photos taken during a match (2026-11-07): the play is usually in the upper middle of a wide shot, so keep a little above centre. */
img[src$="#match"]{object-position:50% 38%!important}

/* 주간 측정 (2026-10-31) */
.fwk-card{margin:14px 0;padding:16px;border-radius:20px;background:var(--surface,#161616);border:1px solid var(--line,#292929);color:var(--ink,#f2f4ee);display:grid;gap:12px}
.fwk-card h3{margin:0;font:700 17px/1.3 var(--font-body);color:var(--ink,#f2f4ee)}
.fwk-card p{margin:0;font:400 14px/1.55 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all}
.fwk-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fwk-card-head span{font:600 13px var(--font-body);color:var(--ink-dim,#a8a8a2);font-variant-numeric:tabular-nums}
.fwk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fwk-tile{min-width:0;padding:10px;border-radius:14px;background:rgba(128,128,128,.1);display:grid;gap:3px}
.fwk-tile small{font:500 12px/1.3 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all;min-height:31px}
.fwk-tile b{font:700 24px/1.1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink,#f2f4ee)}
.fwk-tile b i{font:500 12px var(--font-body);margin-left:2px;color:var(--ink-dim,#a8a8a2)}
.fwk-tile span{font:500 12px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-tile span.up{color:var(--fx-acc,#CCFF00);font-weight:700}
.fwk-tile.old b{opacity:.55}
.fwk-btn,.fwk-btn-line{width:100%;min-height:48px;border-radius:14px;font:700 15.5px var(--font-body);cursor:pointer}
.fwk-btn{border:0;background:var(--fx-acc,#CCFF00);color:#0b0f08}
.fwk-btn:disabled{opacity:.6}
.fwk-btn-line{border:1px solid var(--line,#292929);background:transparent;color:var(--ink,#f2f4ee);font-weight:600}

/* the measuring screen sits over everything, bottom bar included */
.fwk{position:fixed;inset:0;z-index:1000310;display:flex;flex-direction:column;background:var(--bg,#0a0a0a);color:var(--ink,#f2f4ee)}
.fwk-bar{flex:0 0 auto;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;height:56px;padding:0 6px;border-bottom:1px solid var(--line,#292929)}
.fwk-bar b{text-align:center;font:700 16px var(--font-body)}
.fwk-step{text-align:right;padding-right:8px;font:500 13px var(--font-body);color:var(--ink-dim,#a8a8a2);font-variant-numeric:tabular-nums}
.fwk-x{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink,#f2f4ee);cursor:pointer}
.fwk-x .fi{margin:0}
.fwk-body{flex:1 1 auto;overflow-y:auto;padding:18px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.fwk-body h2{margin:0;font:700 25px/1.25 var(--font-body);letter-spacing:-.02em}
.fwk-wait{color:var(--ink-dim,#a8a8a2)}
.fwk-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fwk-prog i{height:4px;border-radius:2px;background:rgba(128,128,128,.28)}
.fwk-prog i.on{background:var(--fx-acc,#CCFF00)}
.fwk-need,.fwk-sub,.fwk-note{margin:0;font:400 14px/1.5 var(--font-body);color:var(--ink-dim,#a8a8a2);word-break:keep-all}
.fwk-how{margin:0;padding-left:20px;display:grid;gap:7px;font:400 15px/1.5 var(--font-body);word-break:keep-all}
.fwk-last{margin:0;font:400 14px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-last b{color:var(--ink,#f2f4ee);font-weight:700}
.fwk-timer-slot{display:grid;gap:8px}
.fwk-timer-slot:empty{display:none}
.fwk-go{min-height:56px;border:0;border-radius:14px;background:var(--fx-acc,#CCFF00);color:#0b0f08;font:700 16px var(--font-body);cursor:pointer}
.fwk-notimer,.fwk-stop,.fwk-skip{align-self:center;justify-self:center;min-height:44px;border:0;background:transparent;color:var(--ink-dim,#a8a8a2);font:500 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fwk-clock{display:grid;justify-items:center;gap:2px;padding:14px 0}
.fwk-clock b{font:700 92px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--fx-acc,#CCFF00)}
.fwk-clock small{font:500 15px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-done{margin:0;font:700 17px var(--font-body);color:var(--fx-acc,#CCFF00)}
.fwk-enter{display:grid;gap:10px}
.fwk-enter:empty{display:none}
.fwk-label{font:600 14px var(--font-body)}
.fwk-stepper{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;gap:8px;align-items:stretch}
.fwk-stepper button{min-height:64px;border:1px solid var(--line,#292929);border-radius:14px;background:transparent;color:var(--ink,#f2f4ee);display:grid;place-items:center;font-size:20px;cursor:pointer}
.fwk-stepper button .fi{margin:0}
.fwk-num{display:flex;align-items:baseline;justify-content:center;gap:4px;border:1px solid var(--line,#292929);border-radius:14px;padding:6px 10px}
.fwk-num input{width:100%;min-width:0;border:0;background:transparent;color:var(--ink,#f2f4ee);text-align:right;font:700 40px/1.2 var(--font-body);font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield;appearance:textfield}
.fwk-num input::-webkit-outer-spin-button,.fwk-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fwk-num span{font:500 15px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-num:focus-within{border-color:var(--fx-acc,#CCFF00)}
.fwk-err{margin:0;font:500 13.5px var(--font-body);color:#ff8f7a}
.fwk-err:empty{display:none}
.fwk-res{padding:14px;border-radius:16px;background:var(--surface,#161616);border:1px solid var(--line,#292929);display:grid;gap:6px}
.fwk-res-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fwk-res-top b{font:600 15px var(--font-body)}
.fwk-res-top span{font:500 13px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-res-top strong{font:700 26px var(--font-body);color:var(--ink,#f2f4ee);font-variant-numeric:tabular-nums;margin-right:2px}
.fwk-res p{margin:0;font:400 13.5px var(--font-body);color:var(--ink-dim,#a8a8a2)}
.fwk-res p.up{color:var(--fx-acc,#CCFF00);font-weight:600}
.fwk-graph{width:100%;height:auto;display:block}
.fwk-g-v{font:700 13px var(--font-body);fill:var(--ink,#f2f4ee)}
.fwk-g-d{font:500 11px var(--font-body);fill:var(--ink-dim,#a8a8a2)}
.fwk-toast{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:1000320;padding:12px 14px;border-radius:12px;background:#22261f;color:#f2f4ee;font:500 14px/1.45 var(--font-body);text-align:center}

.footop-intro-home{display:block;margin:14px auto 0;text-align:center;font-size:14px;font-weight:600;color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px}

/* what shows on Main while the scripts are still coming */
.fboot{display:grid;gap:14px;padding:18px 16px}
.fboot i{display:block;height:150px;border-radius:20px;background:var(--bg-raised,#161616)}
.fboot i:first-child{height:64px}
/* until the scripts have run, nothing that only belongs to another screen shows */
.fbooting #composerBar,.fbooting #coachTaglineStrip,.fbooting #dynamicSidebarNav{display:none!important}

/* 성장 리포트 card + screen (uses the weekly test's .fwk shell) */
.fgr-card{margin:12px 0;padding:18px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:20px;background:var(--card-bg,#141713)}
.fgr-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fgr-card h3{margin:0;font-size:17px;font-weight:700;color:var(--ink,#fff)}
.fgr-card p{margin:8px 0 14px;font-size:14px;line-height:1.55;color:var(--ink-dim,#a8a8a2)}
.fgr h2{margin:26px 0 8px;font-size:20px;font-weight:700;color:var(--ink,#fff)}
.fgr-when{margin:4px 0 0;font-size:13px;color:var(--ink-dim,#a8a8a2)}
.fgr-summary,.fgr-focus{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink,#fff)}
.fgr-wins{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.fgr-wins li{display:flex;gap:8px;font-size:14.5px;line-height:1.5;color:var(--ink,#fff)}
.fgr-wins .fi{flex:none;margin-top:3px;color:var(--fx-acc,#8CCB7E)}
.fgr .fwk-body>*{flex:none}
.fgr-week{margin:10px 0;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:16px;background:var(--card-bg,#141713);overflow:hidden}
.fgr-week summary{display:block;cursor:pointer;padding:14px 16px;list-style:none}
.fgr-week summary::-webkit-details-marker{display:none}
.fgr-week summary b{display:block;font-size:15.5px;font-weight:700;color:var(--ink,#fff)}
.fgr-week summary span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-dim,#a8a8a2)}
.fgr-week ul{list-style:none;margin:0;padding:0 16px}
.fgr-week li{padding:10px 0;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.fgr-week li b{font-size:14.5px;font-weight:600;color:var(--ink,#fff)}
.fgr-week li p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-dim,#a8a8a2)}
.fgr-start{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 16px 16px;width:calc(100% - 32px)}
.fgr-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px 12px;text-align:center}
.fgr-wait p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink,#fff)}
.fgr-wait small{font-size:13px;color:var(--ink-dim,#a8a8a2)}
.fgr-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line,rgba(255,255,255,.15));border-top-color:var(--fx-acc,#8CCB7E);animation:fgrSpin .9s linear infinite}
@keyframes fgrSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fgr-spin{animation:none}}
/* 첫 주 체크리스트 on Main */
.fw1-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.fw1-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px;background:transparent;color:var(--ink,#fff);text-align:left;font:inherit;cursor:pointer}
.fw1-row[disabled]{cursor:default;opacity:.62}
.fw1-mark{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line,rgba(255,255,255,.25));color:transparent}
.fw1-row.done .fw1-mark{background:var(--fx-acc,#8CCB7E);border-color:var(--fx-acc,#8CCB7E);color:#0b0c0b}
.fw1-row b{display:block;font-size:14.5px;font-weight:600}
.fw1-row small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-dim,#a8a8a2)}
.fw1-why{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-dim,#a8a8a2)}
/* FOOTOP X sheet: ask a parent to pay */
.footop-x-parent{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid var(--x-purple,#a970ff);border-radius:14px;background:transparent;color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.footop-x-parent-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#BDBDBD}
/* 팀 요금제 의향 in the team menu */
.ftp-ask{margin:14px 0;padding:14px;border:1px dashed var(--line,rgba(255,255,255,.2));border-radius:14px}
.ftp-ask p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink,#fff)}
.ftp-ask-row{display:flex;flex-wrap:wrap;gap:6px}
.ftp-ask-row button{min-height:38px;padding:0 12px;border:1px solid var(--line,rgba(255,255,255,.2));border-radius:999px;background:transparent;color:var(--ink,#fff);font:inherit;font-size:13px;cursor:pointer}

/* The app icon in front of the FOOTOP name (top bar on Main, and the drawer's brand). Section titles keep no icon. */
.topbar .topbar-brand:not(.fnav-title),.sidebar .brand-mark{display:inline-flex;align-items:center;gap:8px}
.topbar .topbar-brand:not(.fnav-title)::before,.sidebar .brand-mark::before{content:"";flex:none;width:24px;height:24px;border-radius:7px;
  background:url(/icons/icon.svg) center/cover no-repeat;-webkit-text-fill-color:initial}
.sidebar .brand-mark::before{width:30px;height:30px;border-radius:9px}

/* Bottom tabs: no tile behind the icons, just the line icon itself (2026-11-06).
   The icon used to be dark on a coloured tile; with the tile gone it takes the text colour,
   and the selected tab takes the point colour (unselected buttons are already at .72 opacity from 058). */
#footopBottomNav .footop-bottom-icon{background:none!important;box-shadow:none!important;border-color:transparent!important;
  filter:none!important;color:var(--ink,#F4F4F2)!important;opacity:.85}
#footopBottomNav .footop-bottom-btn.active .footop-bottom-icon{color:var(--fx-acc,var(--accent,#8CCB7E))!important;opacity:1}
html[data-theme="light"] #footopBottomNav.footop-bottom-nav .footop-bottom-icon{color:#1C211D!important;opacity:.9}
html[data-theme="light"] #footopBottomNav.footop-bottom-nav .footop-bottom-btn.active .footop-bottom-icon{color:var(--fx-acc-ink,#2E6B36)!important;opacity:1}
/* the news magnifier's lens was white glass on the tile; on the dark bar it reads as a solid dot, so keep it see-through */
#footopBottomNav .fbn-lens circle{fill-opacity:.12!important}

/* Story ring (2026-11-08): green→blue ring around anyone with a live Moment, like Instagram. See js/204-footop-story-ring.js. */
:root{--story-ring:conic-gradient(from 210deg,#25e07c,#16c9a3,#1aa9ff,#3d72ff,#25e07c);--story-seen:rgba(170,178,168,.5)}
.fsr-rel{position:relative}
/* outside the picture, with a small gap (pictures that don't clip their children) */
.fsr-on::after,.fsr-seen::after{content:'';position:absolute;inset:-5px;border-radius:50%;padding:3px;background:var(--story-ring);pointer-events:none;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fsr-seen::after{background:var(--story-seen);padding:2px}
/* pictures that clip (overflow:hidden): ring drawn just inside the edge, with a dark gap ring */
.fsr-in::after{inset:0}
.fsr-in::before{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid var(--bg,#0A0A0A);pointer-events:none;z-index:2}
.fsr-in.fsr-seen::before{display:none}
.fsr-on,.fsr-seen{cursor:pointer}
/* the two story rows that already had a ring: same green→blue */
.fmh-story.new .fmh-story-ava{background:var(--story-ring)!important}
.fmh-story.seen .fmh-story-ava{background:var(--story-seen)!important}
.footop-moment-ring.unseen{background:var(--story-ring)!important}
.footop-moments-grid-avatar.unseen{box-shadow:none!important}
.footop-moments-grid-avatar.unseen::after{content:'';position:absolute;inset:-6px;border-radius:inherit;padding:3px;background:var(--story-ring);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html[data-theme="light"] .fsr-in::before{border-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .fsr-on::after,.footop-moments-grid-avatar.unseen::after{animation:fsrIn .5s ease-out both}
  @keyframes fsrIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
}

/* PM + Moments, softer and friendlier (2026-11-08): rounder shapes, gentler colours, roomier rows, warmer empty states.
   Reactions (js/205-footop-pm-react.js): floating picker next to the bubble, pills under it, a ☺ button on hover. */

/* ---------- bubbles ---------- */
html #footopPMScreen .footop-dm-msg,.footop-dm-overlay .footop-dm-msg{position:relative;border-radius:22px;padding:10px 15px;line-height:1.5;margin-bottom:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 16px rgba(0,0,0,.18)}
html #footopPMScreen .footop-dm-msg.theirs,.footop-dm-overlay .footop-dm-msg.theirs{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.09));border-bottom-left-radius:8px}
html #footopPMScreen .footop-dm-msg.mine,.footop-dm-overlay .footop-dm-msg.mine{background:linear-gradient(160deg,color-mix(in srgb,var(--sk) 92%,white),var(--sk));border-bottom-right-radius:8px;font-weight:500}
html #footopPMScreen .footop-dm-msg-media,.footop-dm-overlay .footop-dm-msg-media{box-shadow:none;border-radius:22px}
.footop-dm-msg-image{border-radius:20px!important}
.footop-dm-group-sender{font:600 12px var(--font-body);margin-bottom:2px;opacity:.9}
/* long-press must not select text or open the browser's image menu (복사 is in the reaction menu) */
.fpr-msg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.fpr-msg img{-webkit-user-drag:none;pointer-events:none}
.fpr-msg video{pointer-events:auto}
/* double-tap ❤️ */
.fpr-msg.fpr-heart::before{content:'❤️';position:absolute;left:50%;top:50%;font-size:34px;transform:translate(-50%,-50%);pointer-events:none;animation:fprHeart .7s ease-out forwards;z-index:3}
@keyframes fprHeart{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-55%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}

/* ☺ button beside the bubble — computer (hover) only */
.fpr-hover{display:none}
@media (hover:hover) and (pointer:fine){
  .fpr-hover{display:grid;place-items:center;position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#d8ddd2;cursor:pointer;opacity:0;transition:opacity .15s}
  .fpr-hover .fi{width:17px;height:17px;margin:0}
  .footop-dm-msg.mine .fpr-hover{left:-38px}
  .footop-dm-msg.theirs .fpr-hover{right:-38px}
  .fpr-msg:hover .fpr-hover,.fpr-hover:focus-visible{opacity:1}
  .fpr-hover:hover{background:rgba(255,255,255,.18);color:#fff}
}

/* ---------- reaction pills under a bubble ---------- */
.fpr-bar{display:flex;gap:4px;flex-wrap:wrap;margin:-12px 0 8px 10px;position:relative;z-index:1}
.fpr-bar.mine{justify-content:flex-end;margin-right:10px}
.fpr-bar .footop-dm-reaction-pill{display:inline-flex;align-items:center;gap:3px;min-height:26px;padding:2px 8px;border-radius:999px;font-size:14px;line-height:1;
  background:#1e231c;border:2px solid var(--bg,#0A0A0A);color:#e8ede0;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}
.fpr-bar .footop-dm-reaction-pill b{font:600 11.5px var(--font-body);color:#cfd5c7}
.fpr-bar .footop-dm-reaction-pill.mine{background:color-mix(in srgb,var(--sk,#8CCB7E) 30%,#1e231c)}
.fpr-bar .footop-dm-reaction-pill.pop{animation:fprPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes fprPop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* ---------- floating picker ---------- */
.fpr-layer{position:fixed;inset:0;z-index:1000150}
.fpr-scrim{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .15s}
.fpr-pop{position:absolute;max-width:calc(100% - 16px);box-sizing:border-box;padding:6px;border-radius:26px;background:#1b1f1a;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.5);transform:scale(.85);opacity:0;transition:transform .2s cubic-bezier(.3,1.5,.5,1),opacity .15s}
.fpr-layer.on .fpr-scrim{opacity:1}
.fpr-layer.on .fpr-pop{transform:none;opacity:1}
.fpr-row{display:flex;align-items:center;gap:2px}
.fpr-e{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;cursor:pointer;transition:transform .12s}
.fpr-e:hover,.fpr-e:focus-visible{transform:scale(1.22);background:rgba(255,255,255,.08)}
.fpr-e:active{transform:scale(.92)}
.fpr-e.on{background:color-mix(in srgb,var(--sk,#8CCB7E) 30%,transparent)}
.fpr-more{width:40px;height:40px;margin-left:2px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#e8ede0;display:grid;place-items:center;cursor:pointer}
.fpr-more .fi{margin:0;width:20px;height:20px}
.fpr-more[aria-expanded="true"]{transform:rotate(45deg)}
.fpr-all[hidden]{display:none!important}
.fpr-all{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:8px 2px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.fpr-all .fpr-e{width:auto;height:auto;border-radius:16px;padding:6px 2px;gap:2px;font-size:24px}
.fpr-all .fpr-e small{font:500 10.5px var(--font-body);color:#b9c0b1}
.fpr-acts{display:flex;gap:6px;padding:8px 4px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.fpr-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border-radius:14px;border:0;background:rgba(255,255,255,.07);color:#e8ede0;font:600 13px var(--font-body);cursor:pointer}
.fpr-act .fi{margin:0}
.fpr-act.danger{color:#ff9a9a}
.fpr-note{margin:6px 6px 2px;font:500 11.5px var(--font-body);color:#9aa293;text-align:center}
.fpr-toast{position:fixed;left:50%;bottom:calc(var(--fsh-nav,65px) + 76px);z-index:1000200;transform:translate(-50%,10px);max-width:calc(100% - 40px);padding:10px 16px;border-radius:999px;background:#2a3027;color:#f1f4ec;
  font:600 13px/1.4 var(--font-body);box-shadow:0 10px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
.fpr-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- PM lists: roomier, softer ---------- */
html #footopPMScreen .footop-dm-thread-item,.footop-dm-overlay .footop-dm-thread-item{padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.05);border-color:transparent;transition:background .15s,transform .15s}
html #footopPMScreen .footop-dm-thread-item:hover,.footop-dm-overlay .footop-dm-thread-item:hover{background:rgba(255,255,255,.08);border-color:transparent}
html #footopPMScreen .footop-dm-thread-item:active,.footop-dm-overlay .footop-dm-thread-item:active{transform:scale(.985)}
.fsk-ava{flex-basis:50px;width:50px;height:50px;font-size:18px}
html #footopPMScreen .footop-dm-section-label,.footop-dm-overlay .footop-dm-section-label{font:600 12.5px var(--font-body);letter-spacing:0;color:rgba(255,255,255,.62);text-transform:none}
html #footopPMScreen .footop-dm-input-row input[type=text],.footop-dm-overlay .footop-dm-input-row input[type=text]{background:rgba(255,255,255,.1);border-color:transparent}
html #footopPMScreen .footop-dm-send,.footop-dm-overlay .footop-dm-send{font-size:13.5px;font-weight:700}
#footopPMScreen .footop-empty-state,.footop-dm-overlay .footop-empty-state,#footopMomentsScreen .footop-empty-state{padding:34px 20px;border-radius:24px;background:rgba(255,255,255,.04);color:#c3c9bb;font-size:14px;line-height:1.6}
.fsoft-empty-ic{display:block;font-size:34px;margin-bottom:8px}

/* ---------- Moments: softer tiles ---------- */
.footop-moments-grid-avatar{transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.footop-moments-grid-item:active .footop-moments-grid-avatar{transform:scale(.94)}
.footop-moments-grid-label{font-weight:600}
html[data-sk-mview=cards] .footop-moments-grid-item{border-radius:26px}
.fsk-head .fsk-h1{letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.fpr-pop,.fpr-scrim,.fpr-toast{transition:none}.fpr-msg.fpr-heart::before,.fpr-bar .footop-dm-reaction-pill.pop{animation:none}}

/* Coach Topi like the AI chat apps (2026-11-08) — see js/206-footop-topi-layout.js.
   One header, tools behind "+", modes as chips in the input: the conversation gets the screen. */
body.topi-full .topbar,body.topi-full #dynamicSidebarNav{display:none!important}
body.topi-full #topiChatbar{padding:calc(6px + env(safe-area-inset-top)) 8px 6px;max-width:none;background:rgba(10,12,10,.96)}
body.topi-full #topiChatbar .tcb-title{font-size:15px}
.tcb-back .fi{width:22px;height:22px;margin:0}
body.topi-full .scroll-area{padding-bottom:12px!important}
body.topi-full #composerBar{padding:8px 12px 10px;border-top:0;background:linear-gradient(transparent,var(--bg,#0A0A0A) 30%)}
body.topi-full #composerBar .coach-tagline-strip{display:none!important}
/* the old chip row now lives in the + sheet */
#topicRow{display:none}
.ttl-body #topicRow{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:0;margin:0;overflow:visible;border:0;background:none;position:static;height:auto}
.ttl-body #topicRow .topic-chip{display:flex!important;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:16px;font-size:14.5px;justify-content:flex-start;white-space:normal;width:auto}
.ttl-body #topicRow .topic-chip.off{display:none!important}
.ttl-body #topicRow [data-brain-box]{display:contents}

/* "+" sheet */
.ttl-layer{position:fixed;inset:0;z-index:1000120;display:flex;align-items:flex-end}
.ttl-layer[hidden]{display:none}
.ttl-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .18s}
.ttl-sheet{position:relative;width:100%;max-height:82%;overflow-y:auto;box-sizing:border-box;padding:8px 14px calc(16px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#141813;border-top:1px solid rgba(255,255,255,.1);transform:translateY(30px);opacity:0;transition:transform .24s cubic-bezier(.2,.9,.3,1),opacity .18s}
.ttl-layer.on .ttl-scrim{opacity:1}
.ttl-layer.on .ttl-sheet{transform:none;opacity:1}
.ttl-grab{width:40px;height:4px;border-radius:9px;background:rgba(255,255,255,.22);margin:2px auto 10px}
.ttl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ttl-head b{font:700 18px var(--font-body);color:#f2f5ee}
.ttl-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#e7ece2;display:grid;place-items:center;cursor:pointer}
.ttl-x .fi{margin:0}
.ttl-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:6px;border:0;border-radius:18px;background:rgba(255,255,255,.05);color:#eef2ea;text-align:left;cursor:pointer}
.ttl-item:active{transform:scale(.99)}
.ttl-item>i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fx-acc,#8CCB7E) 18%,transparent);color:var(--fx-acc,#8CCB7E)}
.ttl-item>i .fi{margin:0;width:20px;height:20px}
.ttl-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ttl-item b{font:600 15px var(--font-body)}
.ttl-item small{font:500 12.5px var(--font-body);color:#a6ad9e}
.ttl-sec{margin:14px 4px 8px;font:600 12.5px var(--font-body);color:#9aa293}
.ttl-x-slot #coachXStrip{margin-top:12px}

/* modes that are on: chips above the input */
.ttl-modes{display:flex;flex-wrap:wrap;gap:6px;width:100%;max-width:760px;margin:0 auto 6px}
.ttl-modes[hidden]{display:none}
.ttl-mode{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 6px 0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fx-acc,#8CCB7E) 50%,transparent);background:color-mix(in srgb,var(--fx-acc,#8CCB7E) 14%,transparent);color:#eef2ea;font:600 12.5px var(--font-body);cursor:pointer}
.ttl-mode .fi{width:14px;height:14px;margin:0}
.ttl-mode>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1)}
html[data-theme="light"] .ttl-sheet{background:#fff;border-top-color:rgba(0,0,0,.08)}
html[data-theme="light"] .ttl-head b,html[data-theme="light"] .ttl-item{color:#1c211d}
html[data-theme="light"] .ttl-item{background:rgba(0,0,0,.04)}
html[data-theme="light"] .ttl-item small,html[data-theme="light"] .ttl-sec{color:#5d6559}
html[data-theme="light"] .ttl-x{background:rgba(0,0,0,.06);color:#1c211d}
html[data-theme="light"] .ttl-mode{color:#1c211d}
html[data-theme="light"] body.topi-full #topiChatbar,html[data-theme="light"] .topi-full #topiChatbar{background:rgba(255,255,255,.96)}
@media (prefers-reduced-motion:reduce){.ttl-sheet,.ttl-scrim{transition:none}}
/* chips inside the sheet: one calm row style; a mode that's on gets the accent edge */
.ttl-body #topicRow .topic-chip{background:rgba(255,255,255,.05)!important;border:1px solid transparent!important;color:#eef2ea!important;box-shadow:none!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
.ttl-body #topicRow .topic-chip .fi{width:20px;height:20px;margin:0;color:var(--fx-acc,#8CCB7E)}
.ttl-body #topicRow .topic-chip.is-imagine,.ttl-body #topicRow .topic-chip.is-on{border-color:color-mix(in srgb,var(--fx-acc,#8CCB7E) 60%,transparent)!important;background:color-mix(in srgb,var(--fx-acc,#8CCB7E) 12%,transparent)!important}
html[data-theme="light"] .ttl-body #topicRow .topic-chip{background:rgba(0,0,0,.04)!important;color:#1c211d!important}

/* "함께 해 보기" (2026-11-08): next steps into other tabs at the end of each main screen. See js/207-footop-links.js. */
.fnet{margin:22px 16px 8px;padding:16px 14px 14px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
#ft32Root .fnet,#footopProfileRoot .fnet{margin-left:0;margin-right:0}
.fnet-h{margin:0 0 10px 2px;font:700 15px var(--font-body);color:#eef2ea}
.fnet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fnet-a{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px;border:0;border-radius:18px;background:rgba(255,255,255,.05);color:#eef2ea;text-align:left;cursor:pointer;transition:background .15s,transform .12s}
.fnet-a:hover{background:rgba(255,255,255,.08)}
.fnet-a:active{transform:scale(.98)}
.fnet-a>i{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fx-acc,#8CCB7E) 16%,transparent);color:var(--fx-acc,#8CCB7E)}
.fnet-a>i .fi{margin:0;width:19px;height:19px}
.fnet-a span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fnet-a b{font:600 14px/1.3 var(--font-body);word-break:keep-all}
.fnet-a small{font:500 11.5px/1.35 var(--font-body);color:#9fa697;word-break:keep-all}
.fnet-grid .fnet-a:only-child,.fnet-grid .fnet-a:last-child:nth-child(odd){grid-column:1/-1}
html[data-theme="light"] .fnet{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .fnet-h,html[data-theme="light"] .fnet-a{color:#1c211d}
html[data-theme="light"] .fnet-a{background:rgba(0,0,0,.04)}
html[data-theme="light"] .fnet-a small{color:#5d6559}
html[data-theme="light"] .fnet-a>i{color:var(--fx-acc-ink,#2E6B36)}

/* 오늘의 축구 cards with a photo first (2026-11-08), like an Instagram feed: picture on top, the line below.
   Photos are free-licence (Wikimedia Commons), kept on our own server, with the credit on the picture. */
.tfp-credit{position:absolute;right:8px;bottom:7px;max-width:calc(100% - 16px);padding:2px 7px;border-radius:99px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.85);
  font:500 10px/1.4 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* today's 3: photo across the top of the card */
.tfk.has-pic{padding-top:0;overflow:hidden;min-height:0}
.tfk-pic{position:relative;display:block;margin:0 -18px 14px;aspect-ratio:4/3;background:#0e110d;overflow:hidden}
.tfk-pic img{width:100%;height:100%;object-fit:cover;display:block}
.tfk-pic::after{content:'';position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(21,23,21,.55));pointer-events:none}
.tfk.has-pic .tfk-hook{margin-top:12px;font-size:21px;-webkit-line-clamp:3}
.tfk.has-pic .tfk-title{display:none}
.tfk.has-pic .tfk-foot{padding-top:14px}
.tfk.done .tfk-pic img{filter:saturate(.55) brightness(.8)}

/* library: one column of posts, photo first */
.tfl-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
.tfl.has-pic .tfl-main{padding:0 0 14px;gap:8px;min-height:0}
.tfl-pic{position:relative;display:block;aspect-ratio:4/3;border-radius:20px 20px 0 0;overflow:hidden;background:#0e110d}
.tfl-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.tfl.has-pic .tfl-cat{padding:4px 52px 0 16px}
.tfl.has-pic .tfl-hook{padding:0 16px;font-size:19px;-webkit-line-clamp:3}
.tfl.has-pic .tfl-foot{padding:4px 16px 0}
.tfl.has-pic .tfl-save{top:8px;right:8px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.tfl.has-pic .tfl-save svg{stroke:#fff}
.tfl.read .tfl-pic img{filter:saturate(.7)}
@media (hover:hover){.tfl.has-pic:hover .tfl-pic img{transform:scale(1.03)}}

/* viewer: the photo opens the card */
.tfs .tfs-cover{position:relative;margin:0 0 18px;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#0e110d}
.tfs .tfs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tfs .tfs-cover figcaption{position:absolute;left:8px;right:8px;bottom:7px;font:500 10.5px/1.4 var(--font-body);color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tfs .tfs-cover figcaption a{color:inherit;text-decoration:underline;pointer-events:auto}
@media (max-height:700px){.tfs .tfs-cover{aspect-ratio:16/9}}
html[data-theme="light"] .tfk-pic::after{background:linear-gradient(transparent,rgba(255,255,255,.4))}