/* ============================================================
   汉语课 · Дизайн-система курса китайского
   Фирменная палитра и базовые компоненты (мобайл-first)
   ============================================================ */
:root{
  --deepred:#5E0B14;
  --red:#B5172A;
  --gold:#E0A639;
  --jade:#2E7D6B;
  --paper:#F6F2EC;
  --ink:#2a2320;
  --muted:#8a7d72;
  --line:#e4dbcf;
  --ok:#2E7D6B;
  --bad:#B5172A;
  --shadow:0 6px 24px rgba(94,11,20,.10);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,"Noto Sans SC",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.han{font-family:"Noto Sans SC",Arial,sans-serif}

/* ---------- макет ---------- */
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 64px}
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;
}
.stack>*+*{margin-top:14px}

/* ---------- бренд / печать ---------- */
.brand{display:flex;align-items:center;gap:12px}
.seal{
  width:46px;height:46px;flex:0 0 46px;border-radius:10px;
  background:var(--deepred);color:var(--gold);
  display:grid;place-items:center;font-family:"Noto Sans SC",serif;
  font-size:24px;font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(224,166,57,.5);
}
.brand h1{font-size:19px;margin:0;color:var(--deepred);letter-spacing:.2px}
.brand .sub{font-size:12px;color:var(--muted);margin:0}

/* ---------- шапка приложения ---------- */
.appbar{
  position:sticky;top:0;z-index:20;
  background:var(--deepred);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
}
.appbar .title{display:flex;align-items:center;gap:10px;font-weight:700}
.appbar .title .mini{
  width:30px;height:30px;border-radius:7px;background:var(--gold);color:var(--deepred);
  display:grid;place-items:center;font-family:"Noto Sans SC",serif;font-weight:700
}
.appbar .who{font-size:12.5px;opacity:.9;text-align:right;line-height:1.2}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700;
  cursor:pointer;width:100%;font-family:inherit;transition:transform .05s ease,filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-gold{background:var(--gold);color:var(--deepred)}
.btn-ghost{background:transparent;color:var(--deepred);border:1.5px solid var(--line)}
.btn-sm{width:auto;padding:8px 12px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- формы ---------- */
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:700}
.field{margin-bottom:14px}
input,select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  font-size:16px;font-family:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,166,57,.2)}

/* вкладки вход/регистрация */
.tabs{display:flex;background:var(--paper);border-radius:12px;padding:4px;margin-bottom:18px}
.tabs button{
  flex:1;border:0;background:transparent;padding:10px;border-radius:9px;
  font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;font-family:inherit
}
.tabs button.active{background:#fff;color:var(--deepred);box-shadow:var(--shadow)}

/* ---------- сетка материалов ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--shadow);transition:transform .08s ease;
}
.tile:active{transform:scale(.98)}
.tile.locked{opacity:.5;pointer-events:none}
.tile .emoji{font-size:24px}
.tile .t{font-weight:700;font-size:14px;color:var(--deepred)}
.tile .d{font-size:12px;color:var(--muted)}
.tile .badge{margin-top:auto;font-size:11px;font-weight:700;border-radius:20px;padding:3px 9px;align-self:flex-start}
.badge-done{background:rgba(46,125,107,.14);color:var(--jade)}
.badge-todo{background:rgba(181,23,42,.10);color:var(--red)}
.badge-soon{background:var(--paper);color:var(--muted)}

/* ---------- заголовки секций ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.h-sec{font-size:18px;color:var(--deepred);margin:4px 0 12px}
.divider{height:1px;background:var(--line);margin:22px 0}

/* ---------- таблица табеля ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--deepred);color:#fff;font-size:12px;position:sticky;top:0}
tbody tr:hover{background:var(--paper)}
.pct{font-weight:700}
.pct.hi{color:var(--jade)}
.pct.mid{color:var(--gold)}
.pct.lo{color:var(--red)}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--paper);color:var(--muted)}

/* ---------- прогресс-бар ---------- */
.bar{height:10px;background:var(--paper);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--jade))}

/* ---------- упражнения домашки ---------- */
.q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.q .qhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.q .qnum{font-weight:700;color:var(--gold);font-size:13px}
.q .qtype{font-size:12px;color:var(--muted)}
.q .prompt{font-size:16px;margin:6px 0 12px}
.hanzi-tap{font-family:"Noto Sans SC",serif;color:var(--deepred);cursor:pointer;border-bottom:2px dotted var(--gold)}
.opts{display:grid;gap:8px}
.opt{
  text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;
  padding:12px 14px;font-size:15px;cursor:pointer;font-family:inherit;color:var(--ink);
}
.opt:hover{border-color:var(--gold)}
.opt.sel{border-color:var(--red);background:rgba(181,23,42,.06)}
.opt.correct{border-color:var(--jade);background:rgba(46,125,107,.12)}
.opt.wrong{border-color:var(--red);background:rgba(181,23,42,.12)}
.fill-in{display:inline-block;min-width:90px}

/* ---------- сообщения ---------- */
.msg{border-radius:12px;padding:12px 14px;font-size:14px;margin-top:6px}
.msg-err{background:rgba(181,23,42,.10);color:var(--red);border:1px solid rgba(181,23,42,.25)}
.msg-ok{background:rgba(46,125,107,.12);color:var(--jade);border:1px solid rgba(46,125,107,.3)}
.muted{color:var(--muted);font-size:13px}
.score-big{font-size:40px;font-weight:800;color:var(--deepred)}
.hidden{display:none!important}
.spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- логотип бренда China City Academy ---------- */
.brand-hero{text-align:center}
.hero-logo{width:100%;max-width:230px;height:auto;margin:0 auto 4px;display:block}
.brand-hero .sub{text-align:center;margin:0}
/* знак-дракон в тёмной шапке — на светлом чипе */
.logo-chip{display:inline-grid;place-items:center;background:#fff;border-radius:9px;padding:3px;
  box-shadow:inset 0 0 0 1.5px rgba(224,166,57,.6)}
.appbar .logo-mini{height:26px;width:26px;object-fit:contain;display:block}
.brand h1{white-space:nowrap}
@media (max-width:380px){.brand h1{font-size:17px}}

/* ---------- чат группы ---------- */
.chat-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 56px)}
.chat-head{padding:12px 16px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-head .gname{font-weight:800;color:var(--deepred);font-size:16px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg-row{display:flex;flex-direction:column;max-width:82%}
.msg-row.me{align-self:flex-end;align-items:flex-end}
.msg-row.them{align-self:flex-start}
.msg-bubble{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 12px;box-shadow:var(--shadow);position:relative}
.msg-row.me .msg-bubble{background:#5E0B14;color:#fff;border-color:#5E0B14}
.msg-row.me .msg-bubble a{color:#ffe6a8}
.msg-author{font-size:11px;font-weight:700;color:var(--gold);margin:0 4px 2px}
.msg-row.me .msg-author{color:var(--jade)}
.msg-time{font-size:10px;color:var(--muted);margin:2px 4px 0}
.msg-bubble .del{position:absolute;top:-8px;right:-8px;background:#B5172A;color:#fff;border:0;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;line-height:18px;display:none}
.msg-bubble:hover .del{display:block}
.msg-file img{max-width:220px;border-radius:10px;display:block;margin-top:4px}
.msg-file audio{margin-top:4px;max-width:240px}
.msg-file .doc{display:inline-flex;align-items:center;gap:6px;margin-top:4px;text-decoration:none;font-weight:700}
.chat-bar{border-top:1px solid var(--line);background:#fff;padding:10px 12px;display:flex;gap:8px;align-items:center}
.chat-bar input[type=text]{flex:1}
.chat-bar .attach{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;font-size:18px}
.chat-bar .attach.has{border-color:var(--gold);background:rgba(224,166,57,.15)}
.chat-disabled{padding:10px 12px;text-align:center;color:var(--muted);background:var(--paper);border-top:1px solid var(--line)}

/* ---------- окно оплаты ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(42,33,32,.55);z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:16px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:22px;position:relative}
.modal .close{position:absolute;top:12px;right:12px;border:0;background:var(--paper);border-radius:50%;width:32px;height:32px;font-size:15px;cursor:pointer;color:var(--ink)}
.pay-price{font-size:24px;font-weight:800;color:var(--deepred);text-align:center;margin:6px 0 16px}
.pay-block{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.pay-block h4{margin:0 0 10px;color:var(--gold);font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.pay-qr{display:block;max-width:220px;width:100%;margin:0 auto;border-radius:10px;border:1px solid var(--line)}
.pay-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.pay-card .num{font-weight:700;font-size:16px;letter-spacing:1px;color:var(--deepred)}
.pay-card .bank{font-size:12px;color:var(--muted);margin-top:2px}
.pay-copy{border:0;background:var(--gold);color:var(--deepred);border-radius:8px;padding:9px 11px;font-weight:700;cursor:pointer;font-size:12px;white-space:nowrap}
.pay-note{background:rgba(224,166,57,.14);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--ink)}

/* ---------- верхние вкладки (страница учителя) ---------- */
.tabnav{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;margin-bottom:16px;box-shadow:var(--shadow)}
.tabnav button{flex:1;min-width:96px;border:0;background:transparent;padding:11px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;font-family:inherit;transition:background .12s}
.tabnav button.active{background:var(--deepred);color:#fff}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* ---------- красивый вход (китайский стиль) ---------- */
.center-screen{position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(224,166,57,.20), transparent 62%),
    linear-gradient(160deg,#6b0d16 0%,#5E0B14 42%,#450810 100%)}
.center-screen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 18% 28%, rgba(255,255,255,.05) 0 2px, transparent 3px),
                   radial-gradient(circle at 72% 62%, rgba(255,255,255,.04) 0 2px, transparent 3px);
  background-size:64px 64px}
.lantern{position:absolute;top:0;font-size:40px;line-height:1;z-index:1;pointer-events:none;
  transform-origin:top center;animation:sway 3.8s ease-in-out infinite;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.lantern::before{content:"";position:absolute;left:50%;top:-46px;width:2px;height:46px;
  background:linear-gradient(#e0a639,rgba(224,166,57,.2));transform:translateX(-50%)}
.lantern.l1{left:7%;animation-delay:.0s}
.lantern.l2{left:22%;top:34px;font-size:30px;animation-delay:.5s}
.lantern.l3{right:7%;animation-delay:.25s}
.lantern.l4{right:22%;top:28px;font-size:30px;animation-delay:.7s}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.center-screen .card{position:relative;z-index:3;border-top:5px solid var(--gold);
  animation:rise .5s ease both;box-shadow:0 24px 60px rgba(0,0,0,.35)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.center-screen .hero-logo{animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(224,166,57,0))}50%{filter:drop-shadow(0 4px 14px rgba(224,166,57,.45))}}
@media(max-width:520px){.lantern.l2,.lantern.l4{display:none}.lantern{font-size:32px}}

/* ---------- общий китайский стиль сайта ---------- */
body{background:
  radial-gradient(900px 400px at 100% -5%, rgba(224,166,57,.10), transparent 60%),
  radial-gradient(760px 380px at -10% 8%, rgba(46,125,107,.06), transparent 55%),
  var(--paper)}
.appbar{border-bottom:3px solid var(--gold);background:linear-gradient(100deg,#5E0B14,#7a1220)}
.wrap>*{animation:rise .45s ease both}
.card{transition:box-shadow .18s, transform .18s}
.tile{transition:transform .15s, box-shadow .18s, border-color .18s}
.tile:hover{transform:translateY(-3px)}
.eyebrow{position:relative;padding-left:16px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:2px;background:var(--gold);box-shadow:0 0 0 3px rgba(224,166,57,.20)}
.tabnav button{transition:background .15s, color .15s, transform .1s}
.tabnav button:active{transform:scale(.97)}
#welcome-modal .modal{animation:welcomePop .5s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes welcomePop{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.btn-primary{transition:transform .1s, box-shadow .18s}
.btn-primary:active{transform:scale(.98)}

/* ---------- гроздья фонарей + пагода на входе ---------- */
.lantern-col{position:absolute;top:-14px;display:flex;flex-direction:column;align-items:center;gap:34px;z-index:1;pointer-events:none}
.lantern-col.left{left:5%}
.lantern-col.right{right:5%}
.lantern-col::before{content:"";position:absolute;top:0;bottom:30px;left:50%;transform:translateX(-50%);
  width:2px;background:linear-gradient(#e7b34e,rgba(231,179,78,.08))}
.cn-lantern{position:relative;width:84px;height:132px;
  background:url("../img/lantern.svg") no-repeat center/contain;
  transform-origin:top center;
  animation:sway 4.4s ease-in-out infinite, lanternGlow 3s ease-in-out infinite}
.cn-lantern.big{width:106px;height:168px}
.lantern-col .cn-lantern:nth-child(2){animation-delay:.5s,.4s}
.lantern-col .cn-lantern:nth-child(3){animation-delay:1s,.9s}
@keyframes lanternGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(235,70,45,.55))}
  50%{filter:drop-shadow(0 0 28px rgba(255,120,60,.92))}}
.pagoda-roof{position:absolute;top:-42px;left:50%;transform:translateX(-50%);
  width:440px;max-width:96vw;height:64px;background:url("../img/roof.svg") no-repeat center/contain;
  z-index:5;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.center-screen .card{margin-top:44px}
.center-screen .hero-logo{animation:logoFloat 5s ease-in-out infinite, glow 4s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:560px){
  .lantern-col{gap:18px}.lantern-col.left{left:1%}.lantern-col.right{right:1%}
  .cn-lantern{width:54px;height:86px}.cn-lantern.big{width:64px;height:100px}
  .lantern-col .cn-lantern:nth-child(3){display:none}
  .pagoda-roof{top:-30px;height:44px}
}

/* ---------- китайский стиль ВНУТРИ (кабинет/табель) ---------- */
.cn-banner{position:relative;overflow:hidden;border-radius:18px;padding:20px 22px;color:#fff;
  background:radial-gradient(620px 200px at 50% -30%, rgba(224,166,57,.28), transparent 60%),
            linear-gradient(120deg,#6b0d16,#5E0B14 60%,#450810);
  border:1px solid rgba(224,166,57,.45);box-shadow:0 14px 34px rgba(94,11,20,.28)}
.cn-banner::after{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(circle at 18% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px),
                   radial-gradient(circle at 78% 64%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size:46px 46px}
.cn-banner-inner{position:relative;z-index:2;text-align:center}
.cn-hi{font-family:"Noto Sans SC",Arial;font-size:30px;font-weight:800;color:#f6d585;line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.3)}
.cn-greet{font-size:18px;font-weight:800;margin-top:6px}
.cn-sub{font-size:13px;opacity:.92;margin-top:4px}
.cn-banner-lantern{position:absolute;top:-8px;width:48px;height:78px;z-index:1;
  background:url("../img/lantern.svg") no-repeat center/contain;
  animation:sway 4s ease-in-out infinite, lanternGlow 3s ease-in-out infinite}
.cn-banner-lantern.l{left:16px}
.cn-banner-lantern.r{right:16px;animation-delay:.6s,.4s}
@media(max-width:560px){.cn-banner-lantern{display:none}.cn-hi{font-size:26px}}
.cn-footer{text-align:center;color:var(--muted);font-size:12.5px;padding:18px 0 6px;line-height:1.7}
.cn-footer .zh{color:var(--deepred);font-weight:800;font-family:"Noto Sans SC",Arial;font-size:15px}
.section-zh{color:var(--gold);font-weight:700;font-size:.9em}

/* ---------- живой дракон-логотип ---------- */
.logo-stage{position:relative;display:inline-block;line-height:0}
.center-screen .logo-stage{animation:logoFloat 5s ease-in-out infinite}
.logo-aura{position:absolute;inset:-16%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(224,166,57,.55), rgba(224,166,57,0) 62%);
  animation:auraPulse 4.6s ease-in-out infinite}
@keyframes auraPulse{0%,100%{transform:scale(.82);opacity:.30}50%{transform:scale(1.18);opacity:.80}}
.hero-logo{position:relative;z-index:1}
.center-screen .hero-logo{animation:dragonSurge 6.5s ease-in-out infinite}
@keyframes dragonSurge{
  0%,70%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 4px 10px rgba(224,166,57,.25))}
  80%{transform:scale(1.07) rotate(-1.2deg);filter:drop-shadow(0 8px 24px rgba(224,166,57,.85)) brightness(1.07)}
  90%{transform:scale(1.03) rotate(.4deg);filter:drop-shadow(0 6px 16px rgba(224,166,57,.5))}}
.logo-shine{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:16px;overflow:hidden}
.logo-shine::before{content:"";position:absolute;top:-40%;left:-70%;width:45%;height:180%;
  transform:rotate(12deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shineSweep 6.5s ease-in-out infinite}
@keyframes shineSweep{0%,62%{left:-70%}78%{left:140%}100%{left:140%}}