/* PTE PTE UI system 1.0 — shared presentation only; no learning or billing logic. */
:root{--ui-font:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;--ui-title:#3b3438;--ui-copy:#655761;--ui-border:#eddee4;--ui-shadow:0 5px 24px rgba(99,54,72,.045);--ui-radius:20px;--ui-control:12px;--ui-space:24px}
body{font-family:var(--ui-font);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body :is(button,input,textarea,select){font-family:var(--ui-font)}
body :is(h1,h2,h3){color:var(--ui-title);text-wrap:balance;overflow-wrap:break-word}
body h1{font-size:clamp(28px,3.3vw,42px);font-weight:750;line-height:1.22;letter-spacing:-.035em}
body h2{font-size:clamp(22px,2.4vw,28px);line-height:1.35;letter-spacing:-.025em}
body h3{font-size:19px;line-height:1.4;letter-spacing:-.015em}
body :is(.muted,.lead,.doc-lead,.ch-heading p){color:var(--ui-copy);line-height:1.8}
body :is(.eyebrow,.kicker,.gh-eyebrow,.ch-eyebrow){font-size:11px;font-weight:750;letter-spacing:.13em;color:#944058}
body .content{max-width:1440px;margin-inline:auto;padding:36px clamp(20px,3vw,48px) 56px}
body :is(.topbar,body>header){border-color:var(--ui-border);background:rgba(255,255,255,.96)}
body .topbar{box-shadow:0 2px 14px #ad526904}
body .nav{min-height:44px;padding:10px 12px;font-size:13px;font-weight:550;border-radius:12px;line-height:1.55}
body .nav-label{font-size:10px;letter-spacing:.1em;font-weight:700;color:#8b7781;margin-top:22px}
body .nav.active{box-shadow:inset 3px 0 #ad5269;background:#f8e9ef;color:#944058}
body .practice-submenu button{font-size:12px;min-height:40px}
body .crumb{font-size:12px;line-height:1.6}
body :is(.panel,.auth-card,.template-card,.skill-card,.mock-card,.ch-card,.card,.stat,.faq-item,.settings-panel,.account-popover){border-color:var(--ui-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
body :is(.panel,.ch-card){padding:26px}
body :is(.panel h2,.ch-card h2){margin-top:0;font-size:23px}
body :is(.panel p,.ch-card p){line-height:1.8}
body :is(.btn,.primary,.button,.cta,.gh-template-link,.application-transfer a){border-radius:var(--ui-control);min-height:44px;font-size:14px;font-weight:650;line-height:1.5;letter-spacing:0;text-decoration:none}
body :is(.btn,.primary,.button,.cta){padding:11px 18px}
body :is(.btn.light,.button.secondary){background:#fff;border:1px solid #e5cdd7;color:#944058}
body :is(.btn.lime,.primary,.cta,.button:not(.secondary)){background:#ad5269;color:#fff;box-shadow:0 3px 10px #ad526912}
body :is(.text-btn,.text){font-size:13px;font-weight:650;line-height:1.6}
body :is(.btn,.primary,.button,.cta):disabled{box-shadow:none;cursor:default}
body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=date],input[type=time],input[type=number],select,textarea){border-radius:var(--ui-control);border-color:#dfd0d7;color:#3b3438;background-color:#fff;font-size:16px;line-height:1.5}
body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=date],input[type=time],input[type=number],select){min-height:46px;padding:11px 13px}
body textarea{padding:14px;line-height:1.75;max-width:100%}
body :is(input,textarea,select):focus-visible{outline:2px solid #ad5269;outline-offset:3px}
body input::placeholder,body textarea::placeholder{color:#8a7d85;opacity:1}
body input[type=checkbox],body input[type=radio]{accent-color:#ad5269}
body :is(.skill-tabs,.library-mode,.ch-nav){gap:6px}
body :is(.skill-tabs button,.library-mode button,.ch-nav a,.gh-filters button){min-height:44px;font-size:13px;font-weight:650;border-radius:10px}
body :is(.skill-tabs button,.ch-nav a){padding:10px 14px}
body .template-card{padding:26px;position:relative;background:#fff}
body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox{width:76px;height:76px;min-width:76px;border-radius:18px;background-color:var(--skill-bg);background-repeat:no-repeat;background-position:center;background-size:66px;box-shadow:none;margin-bottom:20px}
body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox svg{display:none}
body :is(.template-card,.skill-card)[data-pte-skill="Speaking"]>.iconbox{background-image:url('/assets/brand/pastel-3d/speaking.webp')}
body :is(.template-card,.skill-card)[data-pte-skill="Writing"]>.iconbox{background-image:url('/assets/brand/pastel-3d/writing.webp')}
body :is(.template-card,.skill-card)[data-pte-skill="Reading"]>.iconbox{background-image:url('/assets/brand/pastel-3d/reading.webp')}
body :is(.template-card,.skill-card)[data-pte-skill="Listening"]>.iconbox{background-image:url('/assets/brand/pastel-3d/listening.webp')}
body :is(.template-card,.skill-card)>.pte-skill-badge .pte-skill-icon{display:none}
body :is(.pte-skill-badge,.course-tag){font-size:12px;line-height:1.5;border-radius:8px}
body .template-card h3{margin:0 0 12px;font-size:21px}
body .template-card p{font-size:14px;line-height:1.85;color:#655761}
body :is(.template-start,.application-source,.application-answer,.application-transfer,.gh-pace,.gh-drill,.gh-example){border-radius:14px;padding:20px}
body .learning-steps li{line-height:1.8}
body .gh-intro{border:1px solid #eddee4;border-radius:22px;padding:28px;margin-bottom:28px}
body .gh-intro h1{max-width:800px;font-size:clamp(28px,3vw,40px)}
body .gh-article-head{padding:28px}
body .gh-section{padding:26px 28px}
body .gh-section p,body .gh-section li{font-size:15px;line-height:1.9}
body .gh-index-item{border-radius:12px;margin-bottom:7px;min-height:58px}
body .gh-jumps{gap:8px;flex-wrap:wrap}
body .gh-jumps a{border:1px solid #eddee4;background:#fff;border-radius:9px;padding:7px 12px;font-size:12px}
body .library-heading h1{font-size:clamp(28px,3vw,38px)}
body .library-search{border-radius:14px;box-shadow:0 2px 8px #ad526905}
body .library-search input{border:0;padding:11px 0;background:transparent}
body .library-results-heading{padding-top:20px;margin-bottom:18px}
body .library-ux .question-row{border:1px solid #eadfe4;border-radius:18px;background:#fff;padding:18px 20px;box-shadow:0 3px 14px #6f425105}
body .library-ux .question-main strong{font-size:16px;line-height:1.55;letter-spacing:-.015em}
body .library-ux .question-main small{font-size:13px;line-height:1.65}
body .library-status button{border-radius:10px;font-size:13px;min-height:44px}
body .library-mode{padding:5px;background:#f5eaf0;border:1px solid #eddee4}
body .library-mode button.selected{box-shadow:0 2px 8px #ad52690d}
body .ch-card{padding:24px;background:#fff}
body .ch-heading h1{font-size:clamp(28px,3vw,40px)}
body .ch-heading{margin-bottom:14px}
body .ch-nav{border:1px solid #eddee4;border-radius:14px;background:#fff;padding:6px}
body .ch-nav a.active{background:#f8e9ef;color:#944058}
body .ch-post p.ch-post-text{font-size:15px;line-height:1.9;color:#443b42}
body .ch-post-head strong{font-size:15px}
body .ch-post-head small{font-size:12px;line-height:1.5}
body :is(.ch-role-badge,.ch-verified){border-radius:7px;font-size:11px;line-height:1.5}
body :is(.ch-post-actions button,.ch-social-btn,.ch-profile-actions button){min-height:44px;border-radius:10px;font-size:13px}
body .ch-message-log{background:#fffafc;border-color:#eddee4;border-radius:14px}
body .ch-thread{border-radius:12px;padding:14px}
body .ch-empty{border:1px dashed #d9bdca;background:#fff8fa;border-radius:16px;padding:28px}
body .document-page{max-width:900px;line-height:1.9}
body .document-page p,body .document-page li{font-size:15px;line-height:1.9}
body .site-footer{background:#fff5f7;border-color:#eddee4}
body .footer-inner{max-width:1320px}
body .footer-column a{font-size:13px;line-height:1.8}
body .footer-disclaimer{font-size:12px;line-height:1.8;color:#786972}
body .admin-metrics .panel{padding:22px}
body .data-table th{background:#faf0f4;color:#6d4656;font-size:12px}
body .data-table td{font-size:13px;line-height:1.7}
/* Standalone learning studios use the same content hierarchy and controls. */
body>main{padding-top:36px;padding-bottom:48px}
body>header{min-height:78px}
body>main :is(article,.index,.daily){border-color:#eddee4;border-radius:20px}
body>main .lead{font-size:16px}
body>main .layout>article{padding:28px}
body>main .layout>nav button{border-radius:12px;min-height:58px;font-size:14px;line-height:1.6}
body>main .lesson-goal{border-radius:0 14px 14px 0}
body>main :is(td,th){font-size:14px;line-height:1.75}
body>main .actions button{min-height:44px;font-size:14px;border-radius:11px;padding:11px 16px}
body :is(button,a){-webkit-tap-highlight-color:transparent}
@media(hover:hover) and (prefers-reduced-motion:no-preference){body :is(.template-card,.skill-card,.question-row){transition:border-color .18s,box-shadow .18s}body :is(.template-card,.skill-card,.question-row):hover{border-color:#d8afbf;box-shadow:0 6px 22px #ad52690b}body :is(.btn,.primary,.cta):hover:not(:disabled){filter:brightness(.97)}}
@media(max-width:950px){body .ch-community-layout{gap:18px}body .gh-intro{padding:22px}body .template-card{padding:22px}}
@media(max-width:680px){body{font-size:15px}body .content{padding:24px 16px 108px}body .nav{font-size:14px}body .topbar{height:68px;padding-inline:16px}body h1{font-size:29px;line-height:1.24}body h2{font-size:23px}body :is(.panel,.ch-card){padding:20px;border-radius:18px}body :is(.btn,.primary,.button,.cta){min-height:46px;font-size:14px;padding:11px 16px}body .mobile-navigation{background:#fffffffa;box-shadow:0 -4px 22px #ad526909;padding-inline:8px}body .mobile-navigation button{font-size:11px;gap:4px;border-radius:12px;min-height:48px}body .mobile-navigation button.active{background:#f8e9ef;color:#944058}body .mobile-navigation svg{width:22px;height:22px}body .library-ux .question-row{padding:17px;border-radius:16px}body .library-primary-filters{gap:12px}body .library-search input{font-size:16px}body .library-status{gap:8px}body .library-mode button{padding:10px 14px}body .gh-intro{padding:20px;border-radius:18px}body .gh-section,body .gh-article-head{padding:20px}body .gh-section p,body .gh-section li{font-size:15px;line-height:1.85}body .ch-heading{gap:12px;padding-bottom:18px}body .ch-card{margin-bottom:16px}body .ch-nav a{font-size:12px;padding:9px 10px}body .ch-post p.ch-post-text{font-size:15px}body .ch-form-row{gap:10px}body .template-card{padding:22px}body .template-card h3{font-size:20px}body .template-card>.pte-skill-badge{right:20px;top:20px}body .template-card>.iconbox{width:68px;height:68px;min-width:68px;background-size:60px}body .site-footer{padding-bottom:20px}body>main{padding-top:26px}body>main .layout>article{padding:20px}body>header{min-height:70px}body .compact-exercise>.heading{padding:10px 12px}body .compact-exercise .exercise{padding:18px}body .compact-exercise>.heading>#examClock{font-size:26px}}
@media(prefers-reduced-motion:reduce){body :is(.template-card,.skill-card,.question-row,.btn){transition:none!important}}
body .auth-card p,body .auth-meta,body .auth-card label{font-size:14px;line-height:1.75}
body .auth-card h1{font-size:30px}
body .public-shell .content{padding-top:32px}
@media(max-width:680px){body .public-shell .content{padding-top:22px}}
/* Transparent 3D icons: preserve the original alpha, remove the colored tile. */
body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox{background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0;background-size:72px;transform-origin:50% 65%}
body .art:is(.speaking,.writing,.reading,.listening,.mocktest,.ai-feedback,.community,.learning-mark){background-color:transparent!important}
@keyframes pte-icon-float{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-6px) rotate(-4deg)}70%{transform:translateY(-2px) rotate(3deg)}}
@keyframes pte-logo-breathe{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3px) rotate(-4deg)}75%{transform:translateY(0) rotate(2deg)}}
@media(prefers-reduced-motion:no-preference){body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox{animation:pte-icon-float 4.5s ease-in-out infinite}body :is(.template-card,.skill-card)[data-pte-skill="Writing"]>.iconbox{animation-delay:-1.5s}body :is(.template-card,.skill-card)[data-pte-skill="Reading"]>.iconbox{animation-delay:-3s}body :is(.template-card,.skill-card)[data-pte-skill="Listening"]>.iconbox{animation-delay:-4.5s}body .pte-logo-lockup>.pte-logo-symbol{animation:pte-logo-breathe 5.5s ease-in-out infinite}body .art>img{animation:pte-icon-float 4.5s ease-in-out infinite}body .tile:nth-child(2n) .art>img{animation-delay:-2s}body .tile:nth-child(3n) .art>img{animation-delay:-4s}}
@media(prefers-reduced-motion:reduce){body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox,body .pte-logo-lockup>.pte-logo-symbol,body .art>img{animation:none!important;transform:none!important;transition:none!important}}
@media(max-width:680px){body :is(.template-card,.skill-card)[data-pte-skill]>.iconbox{background-size:64px}}