@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#1c2b45; --ink-2:#3c527a; --paper:#f3efdf; --paper-2:#ece5cf;
  --marigold:#dd9a2e; --marigold-dark:#b97c1e; --forest:#2f6f52; --rule:#cabf9d; --red:#a5402f; --white:#fffdf7;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Work Sans',sans-serif; line-height:1.5;}
h1,h2,h3,.serif{font-family:'Spectral',serif;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

nav{background:var(--ink); color:var(--white); position:sticky; top:0; z-index:50;}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.brand{font-family:'Spectral',serif; font-size:22px; font-weight:600; display:flex; align-items:center; gap:8px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--marigold);display:inline-block;}
.navlinks{display:flex; gap:22px; font-size:15px; align-items:center;}
.navlinks a{color:var(--white); opacity:.85;}
.navlinks a:hover, .navlinks a.active{opacity:1; border-bottom:2px solid var(--marigold); padding-bottom:4px;}
.ghost-btn{background:transparent;border:1px solid rgba(255,255,255,.35); color:var(--white); padding:8px 16px; border-radius:3px; font-size:14px;}

.hero{padding:48px 0 40px;}
.hero h1{font-size:36px; margin:0 0 14px;}
.hero p.lead{color:var(--ink-2); max-width:520px;}

section{padding:36px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{background:var(--white); border:1px solid var(--rule); padding:7px 15px; border-radius:16px; font-size:13.5px; color:var(--ink-2);}
.chip.active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; margin-top:20px;}
.card{background:var(--white); border:1px solid var(--rule); border-radius:6px; display:flex; overflow:hidden;}
.stub{width:34px; background:repeating-linear-gradient(180deg, var(--rule) 0 6px, transparent 6px 12px); border-right:2px dashed var(--rule); display:flex; align-items:center; justify-content:center;}
.stub span{writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; color:var(--ink-2); font-weight:600;}
.card-body{padding:16px; flex:1; display:flex; flex-direction:column; gap:8px;}
.card-body .cat{font-size:11.5px; color:var(--forest); font-weight:600;}
.card-body h3{margin:0; font-size:18px;}
.card-body .meta{font-size:12.5px; color:var(--ink-2);}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px dashed var(--rule);}
.price{font-weight:700; font-size:16px;}
.price .old{font-weight:400; text-decoration:line-through; color:var(--ink-2); font-size:12.5px; margin-right:6px;}

.btn{display:inline-block; background:var(--ink); color:var(--white); border:none; padding:12px 22px; border-radius:4px; font-weight:600; font-size:15px; cursor:pointer;}
.btn.marigold{background:var(--marigold); color:var(--ink);}
.btn.small{padding:7px 14px; font-size:13px;}
.btn-outline{background:transparent; border:1px solid var(--ink); color:var(--ink); padding:11px 21px; border-radius:4px; font-weight:600;}

.card-form, .buybox, .panel{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:20px;}
.card-form label{display:block; font-size:13.5px; font-weight:600; margin:12px 0 5px;}
.card-form input, .card-form textarea, .card-form select{width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:4px; font-size:14.5px; font-family:inherit; background:var(--paper);}
.card-form textarea{min-height:90px;}

.detail-hero{background:var(--ink); color:var(--white); padding:40px 0;}
.detail-hero .cat{color:var(--marigold); font-weight:600; font-size:13px;}
.detail-hero p{color:#d9d4c2; max-width:600px;}
.detail-grid{display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-top:30px;}
@media (max-width:800px){.detail-grid{grid-template-columns:1fr;}}
.buybox .price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;}
.buybox .price-row .now{font-size:26px; font-weight:700;}
.buybox .price-row .was{text-decoration:line-through; color:var(--ink-2);}

.chapter{border:1px solid var(--rule); border-radius:6px; margin-bottom:10px; background:var(--white);}
.chapter-head{padding:14px 16px; font-weight:600;}
.chapter-head .n{color:var(--marigold-dark); margin-right:8px;}
.lec-row{display:flex; gap:8px; padding:6px 16px; font-size:14px; color:var(--ink-2);}

.learn-shell{display:grid; grid-template-columns:280px 1fr; min-height:70vh;}
@media (max-width:820px){.learn-shell{grid-template-columns:1fr;}}
.learn-side{background:var(--white); border-right:1px solid var(--rule); padding:18px 0;}
.side-chapter{padding:10px 18px; font-weight:600; font-size:14.5px;}
.side-lecture{padding:9px 18px 9px 30px; font-size:13.5px; color:var(--ink-2); display:flex; gap:8px; border-left:3px solid transparent;}
.side-lecture:hover{background:var(--paper);}
.side-lecture.active{background:var(--paper-2); color:var(--ink); border-left-color:var(--marigold); font-weight:600;}
.learn-main{padding:26px 30px;}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:22px;}
.tab{padding:10px 18px; font-size:14.5px; font-weight:600; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab.active{color:var(--ink); border-bottom-color:var(--marigold);}
.video-wrap{position:relative; padding-top:56.25%; background:#000; border-radius:6px; overflow:hidden; margin-bottom:18px;}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.notes-box{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:22px; font-size:15px; max-width:680px;}
.qna-item{border-bottom:1px dashed var(--rule); padding:14px 0;}
.qna-item .q{font-weight:600; margin-bottom:6px;}
.qna-item .a{color:var(--ink-2); font-size:14.5px;}

.quiz-card{background:var(--white); border:1px solid var(--rule); border-radius:6px; padding:20px; max-width:600px; margin-bottom:14px;}
.quiz-opt{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--rule); padding:10px 14px; border-radius:4px; margin-bottom:8px; font-size:14.5px; cursor:pointer;}
.quiz-opt.correct{background:#e4f2e9; border-color:var(--forest); color:var(--forest); font-weight:600;}
.quiz-opt.wrong{background:#f7e6e2; border-color:var(--red); color:var(--red); font-weight:600;}

table.admin-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--rule); border-radius:6px; overflow:hidden;}
table.admin-table th, table.admin-table td{padding:10px 14px; border-bottom:1px solid var(--rule); text-align:left; font-size:14px;}
table.admin-table th{background:var(--paper-2); text-align:left;}

.alert{padding:12px 16px; border-radius:4px; margin-bottom:16px; font-size:14px;}
.alert.error{background:#f7e6e2; color:var(--red); border:1px solid var(--red);}
.alert.success{background:#e4f2e9; color:var(--forest); border:1px solid var(--forest);}

.empty{padding:60px 20px; text-align:center; color:var(--ink-2);}
footer{padding:30px 0; text-align:center; color:var(--ink-2); font-size:13px; border-top:1px solid var(--rule); margin-top:30px;}