@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');
:root{--ink:#203c35;--forest:#1f5a3e;--sage:#a9c3b0;--cream:#f7f8f2;--paper:#fffefa;--muted:#71847e;--line:#e4eae2;--gold:#d5af72;--shadow:0 18px 55px #173b2d11}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--cream);font:14px/1.6 'DM Sans',sans-serif}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.24;margin:.12em 0 .55em}h1{font-size:clamp(31px,3vw,43px)}h2{font-size:26px}h3{font-size:19px}p{margin:.4em 0 1em}.muted{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#6d9382;text-transform:uppercase}.hidden{display:none!important}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}label{display:block;font-weight:700;font-size:12px;line-height:2}label input,label select,label textarea{display:block;width:100%;margin-top:4px}input,textarea,select{border:1px solid #dfe6df;padding:11px 12px;color:var(--ink);border-radius:10px;background:#fff;outline:none;max-width:100%}input:focus,textarea:focus,select:focus{border-color:#84ad99;box-shadow:0 0 0 3px #98bfa438}textarea{resize:vertical}button.primary,.primary{border:1px solid #204d3e;background:var(--forest);color:#fff;border-radius:9px;padding:11px 16px;font-weight:700}button.primary:hover{background:#376657}.secondary{border:1px solid #d4dfd5;background:white;color:var(--forest);padding:10px 13px;border-radius:9px;font-weight:700}.secondary:hover{background:#ecf3eb}.primary.small{padding:9px 15px;font-size:12px}.full{width:100%}.icon-btn{border:0;background:transparent;color:var(--ink);font-size:20px;padding:4px 8px}.mark{height:61px;width:61px;background:#e0b87d;color:#244d43;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:38px;border-radius:14px;box-shadow:6px 6px 0 #658571}.mark.small{width:39px;height:39px;font-size:25px;border-radius:10px;box-shadow:3px 3px 0 #628573}.center-page{min-height:100vh;display:grid;place-content:center;text-align:center;padding:25px}.loader{margin:auto;border:3px solid #d9e7dd;border-top-color:#3a745d;border-radius:100%;width:34px;height:34px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-layout{max-width:980px;margin:auto;display:grid;grid-template-columns:1fr 430px;text-align:left;background:var(--paper);border-radius:23px;box-shadow:var(--shadow);overflow:hidden}.auth-aside{background:#254f43;color:#f5f3e7;padding:55px 55px;min-height:540px;display:flex;flex-direction:column;align-items:start}.auth-aside h1{font-size:44px;margin:34px 0 15px}.auth-aside p{color:#bbd3c4}.auth-aside .quote{margin-top:auto;font-family:Georgia,serif;font-style:italic;color:#f7e3c1}.auth-card{padding:62px 43px}.auth-card h2{font-size:27px;margin:0}.auth-card label{margin:18px 0}.auth-card input{height:47px}.auth-card .primary{margin-top:9px}.auth-card small{display:block;text-align:center;color:var(--muted)}.error{color:#a8403e;font-weight:600;font-size:12px;margin:10px 0}.shell{display:flex;min-height:100vh}.sidebar{width:247px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:100vh;position:sticky;top:0;height:100vh;padding:27px 15px 15px}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 32px}.brand strong{font-family:'Playfair Display',serif;font-size:17px;display:block;line-height:1.05}.brand small{font-size:8px;letter-spacing:1.2px;color:#7d9188}.side-label{font-size:10px;color:#a0aaa5;font-weight:700;letter-spacing:1.5px;margin:14px 11px 9px;display:flex;align-items:center;justify-content:space-between}.sidebar nav{display:grid;gap:5px}.nav,.folder-item{background:transparent;border:0;text-align:left;color:#667e71;border-radius:9px;padding:12px 16px;display:flex;align-items:center;gap:13px;font-size:15px}.nav span{font-size:13px;font-weight:700}.nav:hover,.folder-item:hover{background:#edf5ed}.nav.active{background:#e8f1e8;color:#285a46}.folders{display:grid;gap:4px;max-height:30vh;overflow:auto}.folder-item{font-size:12px;padding:8px 16px}.sidebar-bottom{display:flex;align-items:center;border-top:1px solid var(--line);gap:9px;padding:20px 5px 4px;margin-top:auto}.mini-avatar{width:37px;height:37px;flex-shrink:0;background:#dce9dc;border-radius:11px;display:grid;place-items:center;font-weight:700}.user-mini{flex:1;min-width:0}.user-mini strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-mini small{font-size:10px;color:var(--muted)}.main{flex:1;min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--line);height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 34px}.topbar .eyebrow{margin:0}.topdate{font-weight:700}.topdate span{color:#a1b4a7;font-weight:500;margin-left:12px;font-size:12px}.top-actions{display:flex;align-items:center;gap:10px;color:#83948a;font-size:11px}.online-dot{width:7px;height:7px;border-radius:100%;background:#49a06f}.view{max-width:1320px;margin:auto;padding:34px 39px 75px}.hero{display:flex;justify-content:space-between;background:#244d42;color:#fff;border-radius:15px;min-height:276px;overflow:hidden;margin-bottom:21px}.hero>div:first-child{padding:37px 43px;z-index:1}.hero h1{font-size:40px;margin:11px 0 11px}.hero h1 em{color:#d8b889}.hero p{max-width:520px;color:#bdd4c7;font-size:12px}.hero .eyebrow{color:#d5bc8f}.light-btn{background:#e9d3ab;border:0;border-radius:7px;color:#1d4a3f;padding:10px 19px;font-weight:700;font-size:12px}.hero-art{font-family:Georgia,serif;font-size:130px;color:#396959;position:relative;min-width:220px;padding:30px}.hero-book{position:absolute;right:35px;top:70px;width:128px;height:185px;background:#dfbd89;color:#325348;transform:rotate(12deg);box-shadow:-13px 9px 0 #d5a56c,15px 20px 18px #09291c50;font-size:80px;line-height:1.1;padding:16px;text-align:center}.hero-book small{display:block;font-size:10px;letter-spacing:3px;line-height:1.5}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.stat{background:#fff;border:1px solid #eef1ea;border-radius:12px;padding:16px 20px;box-shadow:0 3px 20px #243b2d05}.stat small{color:var(--muted);font-weight:700;font-size:11px}.stat strong{display:block;font-size:27px;line-height:1.5;font-weight:700}.section-head{display:flex;align-items:end;justify-content:space-between;margin:31px 0 17px}.section-head h2{font-size:25px;margin:0}.section-head .eyebrow{margin:0 0 7px}.text-button{color:#638873;background:none;border:0;font-weight:700}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:16px}.book{border:1px solid #e8eee5;background:white;border-radius:13px;padding:13px;min-height:257px;display:flex;flex-direction:column;text-align:left;gap:8px;box-shadow:0 4px 16px #243b2d07}.book:hover{transform:translateY(-2px);box-shadow:var(--shadow);transition:.2s}.book-cover{border-radius:9px;background:linear-gradient(125deg,#315648,#6c9b86);height:138px;display:flex;align-items:center;justify-content:center;color:#f5f2e6;font-size:55px;font-family:Georgia,serif;position:relative}.book-cover.pdf{background:linear-gradient(140deg,#698b78,#2d5549)}.book-cover.epub{background:linear-gradient(140deg,#b39166,#6e7658)}.book-cover small{font:700 9px 'DM Sans',sans-serif;position:absolute;top:12px;left:13px;letter-spacing:1px}.book-title{font-size:13px;font-weight:700;line-height:1.35}.book-author{color:var(--muted);font-size:11px}.book-foot{display:flex;align-items:center;justify-content:space-between;color:#8da197;font-size:10px;margin-top:auto}.empty{padding:25px;background:white;border-radius:12px;border:1px dashed #cbdacb;color:var(--muted);grid-column:1/-1}.page-head{margin-bottom:27px}.page-head h1{margin:4px 0;font-size:40px}.filters{display:flex;gap:12px;margin-bottom:20px}.filters input{flex:1}.filters select{max-width:190px}.search-results{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;margin-bottom:19px}.result-item{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:11px;color:var(--ink)}.result-item:hover{background:#f1f5ef}.result-item:last-child{border:0}.result-item strong{display:block}.result-item small{color:var(--muted)}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px}.note-card{background:#fff;border:1px solid var(--line);border-left:4px solid #8cae92;border-radius:10px;padding:17px;white-space:pre-wrap}.note-card.gold{border-left-color:#e0b476}.note-card.rose{border-left-color:#d4949a}.note-card blockquote{margin:9px 0;border-left:2px solid #b5cbbb;padding-left:10px;color:#637f6a;font-style:italic}.note-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.note-card button{margin-top:9px}.panel,.research-card{background:white;border:1px solid var(--line);border-radius:12px;padding:24px;margin:15px 0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:16px}.inline-input{display:flex;gap:5px}.inline-input input{flex:1;min-width:0}.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.research-card label{margin:12px 0}.research-card #research-answer{padding:13px 0;white-space:pre-wrap}.source{display:block;background:#f2f6f0;border:1px solid #e4eadf;margin:9px 0;padding:12px;text-align:left;width:100%;border-radius:9px;color:#365848}.source:hover{background:#e2eddf}.member-row{padding:12px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);align-items:center}.member-row small{display:block;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#132f29b0;display:grid;place-items:center;z-index:50;padding:15px}.modal{background:white;border-radius:15px;width:min(640px,100%);max-height:94vh;overflow:auto;padding:23px;box-shadow:var(--shadow)}.modal-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:20px}.modal-top h2{margin:0 0 15px}.modal-form{display:grid;gap:11px}.reader-shell{position:fixed;inset:0;background:#edf0e8;z-index:40;display:flex;flex-direction:column}.reader-top{display:flex;gap:15px;align-items:center;background:white;padding:10px 22px;border-bottom:1px solid var(--line)}.reader-meta{flex:1;min-width:0;text-align:center}.reader-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-meta small{display:block;color:var(--muted)}.reader-content{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0}.reading-pane{min-width:0;overflow:auto;display:flex;flex-direction:column;align-items:center}.reader-controls{position:sticky;top:0;z-index:3;background:#fffcf4;padding:11px;border-bottom:1px solid #e5e9df;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-size:12px}.reader-controls input{width:62px;padding:7px}.reader-controls select{max-width:160px;padding:9px}.reader-pane canvas,#reader-content canvas{max-width:100%;height:auto!important;display:block;margin:20px auto;box-shadow:0 5px 35px #1b362d26}.reader-text{background:white;max-width:790px;white-space:pre-wrap;line-height:1.85;font-family:Georgia,serif;font-size:17px;padding:35px;margin:20px;border-radius:9px}.reader-notes{overflow:auto;background:#fff;padding:17px;border-left:1px solid var(--line)}.reader-notes h3{margin:0}.note-head p{font-size:11px}.reader-notes form{display:grid;gap:9px;margin:14px 0}.text-quote{max-height:140px;overflow:auto;background:#f6f8f3;border:1px solid var(--line);font-size:12px;white-space:pre-wrap;padding:11px;border-radius:9px;margin-top:12px}.reader-notes-list{margin-top:10px}.note-footer{margin-top:14px}.mobile-only{display:none}.accent{color:#bf9b60}#toast{position:fixed;z-index:100;bottom:26px;right:24px;color:white;background:#234f3e;padding:13px 18px;max-width:420px;border-radius:9px;box-shadow:var(--shadow);display:none}#toast.error{background:#9d4b46}body.mobile-menu-open .sidebar{transform:translateX(0)}@media(max-width:950px){.sidebar{width:205px}.view{padding:25px}.topbar{padding:0 20px}.hero-art{min-width:140px}.hero-book{right:0}.stats{grid-template-columns:repeat(2,1fr)}.reader-content{grid-template-columns:minmax(0,1fr) 300px}}@media(max-width:730px){.sidebar{position:fixed;z-index:30;left:0;transform:translateX(-100%);transition:.2s;width:260px;box-shadow:var(--shadow)}.mobile-only{display:inline-flex}.hide-mobile,.topdate span{display:none}.topbar{height:66px;padding:0 13px;gap:8px}.topbar .topdate{font-size:12px}.top-actions{margin-left:auto}.view{padding:19px 14px 55px}.hero{min-height:255px}.hero>div:first-child{padding:25px}.hero h1{font-size:32px}.hero-art{display:none}.stats{gap:9px}.stat{padding:14px}.filters{display:grid;grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.filters select{width:100%;max-width:none}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.book{min-height:225px}.book-cover{height:110px}.auth-layout{display:block}.auth-aside{min-height:190px;padding:24px}.auth-aside h1{font-size:29px;margin:9px 0}.auth-aside .quote{display:none}.auth-card{padding:30px 22px}.form-grid{grid-template-columns:1fr}.reader-content{display:flex;flex-direction:column}.reader-notes{max-height:43vh;border-left:0;border-top:1px solid var(--line)}.reader-top{padding:7px;gap:6px}.reader-top button{font-size:11px;padding:7px}.reader-meta{font-size:11px}.reader-controls{gap:4px;flex-wrap:wrap;padding:7px}.reader-controls select{max-width:130px}.reader-text{margin:9px;padding:16px;font-size:15px}.page-head h1{font-size:32px}}

/* Perpustakaan Eka V5.2 — academic references */
.reference-list{display:grid;gap:14px;margin-bottom:32px}
.ref-toolbar{margin-bottom:18px;display:grid;gap:9px}
.ref-toolbar>input{width:100%;max-width:650px}
.ref-entry{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px 22px;box-shadow:0 4px 22px #173b2d08}
.ref-head{display:flex;align-items:flex-start;gap:14px}
.ref-choice{padding-top:8px;line-height:1;flex-shrink:0}
.ref-choice input{width:18px;height:18px;accent-color:#244d43}
.ref-details{min-width:0;flex:1}
.ref-details h3{margin:4px 0 4px;font-size:19px;overflow-wrap:anywhere}
.ref-details p{margin:3px 0 9px;overflow-wrap:anywhere}
.ref-label{color:#59816e;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.ref-doi{color:#456e6a;font-size:12px;font-weight:600}
.ref-citation{border-left:3px solid #b9cbbb;padding:8px 13px;background:#f8faf5;color:#405950;font-size:13px}
.ref-actions{margin:12px 0 0 32px;flex-wrap:wrap;gap:7px}
.ref-actions .secondary{padding:8px 11px;font-size:12px}
#meta-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#meta-form .muted{font-weight:400}
@media(max-width:650px){.ref-entry{padding:14px}.ref-actions{margin-left:0}#meta-form .form-grid{grid-template-columns:1fr}.ref-toolbar .action-row{flex-wrap:wrap}}

/* EKA V5.3 — online members, personal shelves, activity goals & quote cards */
.online-glance{display:flex;align-items:center;gap:17px;padding:20px 24px;background:#ecf4e9;border:1px solid #d4e4d5;border-radius:15px;margin:17px 0 22px}
.online-glance .glance-icon{font-size:31px;color:#2d8c61}.online-glance strong{color:#244d40;font-size:18px}.online-glance p{font-size:12px;color:#6a8575;margin:5px 0 0}.online-glance button{margin-left:auto;white-space:nowrap}
.online-summary{background:#f5f8f2;border:1px solid #d8e5d8;border-radius:13px;padding:16px;margin:12px 0 13px}.presence-heading{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.presence-heading strong{font-size:19px;color:#214e3d}.presence-heading>span,.presence-heading>small{color:#6d8574;font-size:12px}.presence-green{color:#35a776}.presence-people{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.presence-pill{border-radius:999px;background:#e0efe2;border:1px solid #c8e0c9;color:#28694b;padding:7px 12px;font-size:12px}.presence-tag{display:inline-block;font-size:11px;white-space:nowrap;border-radius:50px;padding:2px 7px;margin-left:8px;vertical-align:middle}.presence-tag.present{background:#e0f2e4;color:#26734a}.presence-tag.away{background:#eff0ec;color:#77827b}.member-row{flex-wrap:wrap;gap:14px}.member-row small{font-size:11px;overflow-wrap:anywhere}.tiny{font-size:11px!important}
.challenge-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:21px 24px;margin:10px 0 29px;box-shadow:0 4px 30px #21453608}.challenge-main{display:flex;align-items:center;justify-content:space-between;gap:14px}.challenge-main h3{font:normal 25px Georgia,serif;color:#234b3c;margin:7px 0}.challenge-main p{font-size:12px;color:#748578;line-height:1.7}.challenge-main .secondary{margin-top:7px}.challenge-ring{height:130px;width:130px;min-width:130px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#76a68d var(--progress),#e5eee3 0)}.challenge-ring>span{width:106px;height:106px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.challenge-ring strong{font-size:25px;color:#244d3d}.challenge-ring small{font-size:10px;color:#748779}.streak-row{border-top:1px solid var(--line);margin-top:17px;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.streak-row strong{color:#365d48;font-size:13px}.week-dots{display:flex;gap:5px}.week-dot{width:38px;height:29px;display:grid;place-items:center;border-radius:7px;background:#f2f4ef;color:#91a092;font-size:10px}.week-dot.lit{background:#dcefe0;color:#2a6a4a;font-weight:700}.feature-warning{background:#fff4dc;border:1px solid #ecd9a5;border-radius:10px;padding:15px;color:#745e31}
.shelf-area{display:grid;gap:17px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));margin-top:25px}.shelf-card{border-radius:15px;border:1px solid #d9e4d7;background:linear-gradient(140deg,#fff,#f6faf5);padding:19px}.shelf-heading{display:flex;gap:15px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #dfebe0;padding-bottom:12px}.shelf-heading h3{font:normal 25px Georgia,serif;margin:5px 0;color:#214b3d;overflow-wrap:anywhere}.shelf-heading small{font-size:11px;color:var(--muted)}.shelf-heading button{font-size:11px;padding:8px 10px;flex-shrink:0}.shelf-book-list{display:grid;gap:7px;margin:14px 0}.shelf-book{display:flex;align-items:center;gap:4px;justify-content:space-between;border:1px solid #e2e9dd;border-radius:8px;background:white}.shelf-book button:first-child{text-align:left;padding:10px;flex:1;background:transparent;border:0;color:#315a46;font-size:12px}.shelf-book button:first-child:hover{text-decoration:underline}.shelf-book .icon-btn{border:0;background:transparent;color:#9a4d4d}
.quote-preview{background:#214c40;border-radius:15px;color:#fff8e9;padding:28px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between}.quote-preview .eyebrow,.quote-preview .muted{color:#d2e7d8}.preview-quote{font:italic 24px/1.55 Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere;padding:15px 0}
@media(max-width:730px){.online-glance{padding:13px;gap:10px;flex-wrap:wrap}.online-glance button{margin-left:0;width:100%}.challenge-wrap{padding:16px}.challenge-main h3{font-size:21px}.challenge-ring{height:92px;width:92px;min-width:92px}.challenge-ring>span{width:73px;height:73px}.challenge-ring strong{font-size:17px}.challenge-ring small{font-size:8px}.shelf-area{grid-template-columns:1fr}.week-dot{width:32px}.reader-top{flex-wrap:wrap}#reader-to-shelf{font-size:11px}}
.login-privacy{display:block;margin-top:16px;color:#72867c;line-height:1.6}
/* V5.4 Latihan & kartu belajar */
.practice-glance{margin-top:18px}
#practice-summary{margin:18px 0}
.practice-note{grid-column:1/-1;margin:0}
#practice-filter{width:100%;margin-bottom:14px}
.practice-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.study-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.study-card.is-suspended{opacity:.6;border-left-color:#c9cfc8}
.study-front{font-family:Georgia,serif;font-size:17px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.study-back{color:#3c4a45;white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px dashed var(--line);padding-top:9px}
.study-card .action-row{display:flex;flex-wrap:wrap;gap:6px}
.danger-text{color:#a33b2f}
.cloze-gap{display:inline-block;padding:0 6px;border-radius:6px;background:#eef3ec;color:var(--forest);font-weight:700}
.review-card{display:flex;flex-direction:column;gap:14px}
.review-front{font-family:Georgia,serif;font-size:clamp(19px,3.4vw,25px);line-height:1.45;color:var(--ink);padding:18px 4px;overflow-wrap:anywhere}
.review-front mark{background:#f4e3bf;color:var(--ink);padding:0 4px;border-radius:4px}
.review-back{font-size:16px;line-height:1.55;background:var(--cream);border-radius:10px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rate{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;cursor:pointer}
.rate small{color:var(--muted);font-size:12px}
.rate.again{border-color:#e6b8b0;color:#a33b2f}.rate.hard{border-color:#ead6a8;color:#8a6417}.rate.good{border-color:#a9c3b0;color:var(--forest)}.rate.easy{border-color:#9fc0d6;color:#28597a}
.primary.wide{width:100%;padding:14px}
.primary:disabled{opacity:.55;cursor:default}
.card-form label,.draft label{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.card-form textarea,.draft textarea{width:100%;resize:vertical}
.inline-check{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:7px}
.draft-list{display:flex;flex-direction:column;gap:12px;max-height:58vh;overflow:auto;margin:10px 0}
.draft{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.draft.unverified{border-color:#ead6a8;background:#fffaf0}
.draft small{color:var(--muted);overflow-wrap:anywhere}
.review-done{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
@media(max-width:650px){.rating-row{grid-template-columns:repeat(2,1fr)}.practice-list{grid-template-columns:1fr}}
/* V5.5 Fokus: tampilan lebih lapang, fitur lama yang tidak inti disembunyikan (data & kode tetap ada) */
#dashboard-view #stats,#dashboard-view #online-glance,#dashboard-view #reading-challenge{display:none!important}
.today-head h1{font-size:36px}
.view{padding:44px 48px 90px}
.page-head{margin-bottom:34px}
.page-head .muted{max-width:640px;line-height:1.6}
.section-head{margin:44px 0 20px}
.book-grid{gap:22px}
.notes-grid{gap:22px;margin-top:24px}
.note-card{padding:22px;line-height:1.6}
.note-card blockquote{margin:12px 0}
.note-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);white-space:normal}
.note-actions button{margin:0}
.text-button.danger-text{color:#a33b2f;background:none;border:0;padding:6px 4px}
.practice-list{gap:22px}
.study-card{padding:22px;gap:12px}
.study-card .action-row{gap:8px;margin-top:4px}
.online-glance{padding:24px 28px}
.filters{gap:14px;margin-bottom:26px}
@media(max-width:650px){.view{padding:24px 18px 80px}.today-head h1{font-size:28px}.page-head h1{font-size:30px}.section-head{margin:34px 0 16px}.notes-grid,.practice-list,.book-grid{gap:16px}}
.study-card .action-row{gap:2px 14px;padding-top:10px;border-top:1px solid var(--line)}
.study-card .action-row .secondary{border:0;background:none;padding:6px 0;margin:0;font-size:13px}
.study-card .action-row .secondary:hover{text-decoration:underline;background:none}
/* V5.6 Tanya AI (tutor) */
.tutor{display:flex;flex-direction:column;gap:18px;max-width:860px}
.mode-row{display:flex;flex-wrap:wrap;gap:8px}
.mode-chip{border:1px solid var(--line);background:#fff;color:var(--forest);border-radius:999px;padding:8px 16px;margin:0;font-size:14px}
.mode-chip.active{background:var(--forest);border-color:var(--forest);color:#fff}
#tutor-mode-hint{margin:8px 2px 0}
.tutor-thread{display:flex;flex-direction:column;gap:22px}
.tutor-empty{background:#fff;border:1px dashed #cbdacb;border-radius:14px;padding:26px}
.tutor-empty p{margin:8px 0 0;line-height:1.6}
.turn{display:flex;flex-direction:column;gap:10px}
.bubble{border-radius:14px;padding:16px 18px;line-height:1.65;overflow-wrap:anywhere}
.bubble small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.bubble.user{align-self:flex-end;max-width:85%;background:var(--forest);color:#fff;white-space:pre-wrap}
.bubble.ai{background:#fff;border:1px solid var(--line)}
.answer{font-size:15.5px;color:var(--ink)}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin:0 2px;border-radius:6px;border:0;background:#f1e6cf;color:#6b4e16;font-size:11px;vertical-align:2px}
.cite:hover{background:#e7d3a8}
.tutor-sources{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.tutor-sources summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600}
.tutor-sources .source{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;margin:8px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--ink)}
.tutor-sources .source small{color:var(--muted);font-weight:400}
.turn-actions{display:flex;gap:18px;margin-top:10px}
.turn-actions .text-button{padding:4px 0;margin:0;font-size:13px}
.typing{display:flex;gap:5px;margin-bottom:6px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--sage);animation:blink 1.2s infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.tutor-form{position:sticky;bottom:0;background:var(--cream);padding:14px 0 6px;display:flex;flex-direction:column;gap:10px}
.tutor-form textarea{width:100%;resize:vertical;min-height:62px;border-radius:12px;padding:12px 14px;font-size:15px}
.tutor-scope{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.tutor-scope select{flex:1;max-width:360px}
.tutor-send-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tutor-send-row .primary{margin:0}
.context-chip{display:inline-flex;align-items:center;gap:8px;background:#ecf4e9;border:1px solid #d4e4d5;color:var(--forest);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;font-weight:600}
.context-chip button{margin:0;padding:2px 6px;font-size:12px}
@media(max-width:650px){.bubble.user{max-width:100%}.mode-chip{padding:7px 12px;font-size:13px}}
.turn{scroll-margin-bottom:240px}.tutor-form{box-shadow:0 -12px 18px -12px #173b2d22}
/* V5.7 Riset web + pilihan penyedia AI */
.tutor-bar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ai-provider{max-width:280px;font-size:13px}
.web-form,.web-url-form{display:flex;gap:10px;max-width:860px}
.web-form input{flex:1;font-size:16px;padding:14px 16px;border-radius:12px}
.web-form .primary,.web-url-form .secondary{margin:0}
.web-url-form{margin-top:14px}.web-url-form input{flex:1}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;margin:0;font-size:12px;color:var(--forest)}
.web-results{max-width:860px;margin-top:22px;display:flex;flex-direction:column;gap:16px}
.web-sub{margin:10px 0 0;font-size:18px}
.web-list{display:flex;flex-direction:column;gap:12px;max-width:860px}
.web-item{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.web-item>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.web-item strong{overflow-wrap:anywhere}.web-item small{color:var(--muted)}
.web-item-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.web-item-actions .secondary,.web-item-actions .text-button{margin:0;font-size:13px}
.web-suggest{margin-top:10px}
.web-reader{max-width:780px}
.web-reader-bar{position:sticky;top:0;z-index:2;background:var(--cream);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0 12px;border-bottom:1px solid var(--line)}
.web-reader-bar .action-row{margin:0;gap:8px}.web-reader-bar .primary,.web-reader-bar .secondary{margin:0}
.web-article{font-family:Georgia,serif;font-size:18px;line-height:1.75;color:var(--ink);padding:18px 0 40px}
.web-article h1{font-size:32px;line-height:1.25;margin:6px 0 8px}
.web-article p{margin:0 0 1.05em;overflow-wrap:anywhere}
.web-article .muted{font-family:inherit;font-size:14px}
.web-saved-wrap{margin-top:30px}
a.cite{text-decoration:none}
@media(max-width:650px){.web-item{flex-direction:column;align-items:flex-start}.web-item-actions{justify-content:flex-start}.web-form,.web-url-form{flex-direction:column}.web-article{font-size:17px}.web-article h1{font-size:26px}}
/* ===== V6.0 — Peramban, buku tulis, kuis, konsep, media, modul, kemajuan ===== */
.hidden{display:none!important}
.small{font-size:12px;padding:7px 11px}
.chip.active{background:var(--forest);color:#fff;border-color:var(--forest)}
.pad{padding:18px}.center-row{justify-content:center}
.notice{background:#fff8e8;border:1px solid #f0dcae;color:#6b4e12;border-radius:10px;padding:10px 14px;font-size:13px}
.badge{display:inline-block;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.badge.ok{background:#e3f1e5;color:#24603f}.badge.warn{background:#fdeee0;color:#8a4b12}
label.inline{display:flex;align-items:center;gap:6px;font-weight:600;margin:4px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Peramban */
.browser-view{padding-top:12px}
.browser{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - 120px)}
.br-tabs{display:flex;gap:4px;align-items:flex-end;background:#eef2ec;padding:8px 8px 0;overflow-x:auto;scrollbar-width:thin}
.br-tab{display:flex;align-items:center;gap:6px;max-width:220px;min-width:110px;background:#dfe7de;border-radius:10px 10px 0 0;padding:7px 8px 7px 12px;font-size:12px;cursor:pointer;color:var(--ink);flex-shrink:0}
.br-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.br-tab.active{background:#fff;font-weight:700}
.br-tab button{border:0;background:none;font-size:15px;line-height:1;color:var(--muted);padding:0 2px;margin:0}
.br-tab-new{border:0;background:none;font-size:17px;padding:4px 10px;margin:0 0 4px;color:var(--forest)}
.br-bar{display:flex;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.br-bar input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:#f6f8f4;margin:0}
.br-bar .primary{margin:0;padding:8px 14px;border-radius:999px}
.br-btn{border:0;background:none;width:34px;height:34px;border-radius:50%;font-size:16px;color:var(--forest);margin:0;flex-shrink:0}
.br-btn:hover:not(:disabled){background:#eef2ec}.br-btn:disabled{opacity:.35}
.br-page{flex:1;overflow:auto;padding:18px 22px 40px}
.br-msg{max-width:640px;margin:40px auto;text-align:center}
.br-home{max-width:720px;margin:6vh auto 0}
.br-logo{text-align:center;font:700 46px/1 Georgia,serif;letter-spacing:-1px;margin-bottom:18px}
.br-logo span:nth-child(1),.br-logo span:nth-child(4){color:#4285f4}.br-logo span:nth-child(2),.br-logo span:nth-child(6){color:#ea4335}.br-logo span:nth-child(3){color:#fbbc05}.br-logo span:nth-child(5){color:#34a853}
.br-home-form{display:flex;gap:8px}.br-home-form input{flex:1;border:1px solid #d8e0d8;border-radius:999px;padding:13px 20px;font-size:16px;margin:0;box-shadow:0 2px 10px #0000000d}.br-home-form .primary{border-radius:999px;margin:0}
.br-results{max-width:820px}
.br-hit{align-items:center}.br-hit-main{border:0;background:none;text-align:left;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.br-hit-main strong{color:#1a4fb5;font-size:15px}.br-hit-main small{color:#3c6e4f}
.br-link{color:#1a4fb5;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.web-article figure{margin:16px 0}.web-article img{max-width:100%;height:auto;border-radius:8px;background:#f3f5f1}.web-article figcaption{font-size:12px;color:var(--muted)}
.web-article h2{font-size:21px;margin:22px 0 8px}.web-article pre{white-space:pre-wrap;background:#f4f6f2;padding:12px;border-radius:8px}
/* Buku tulis */
.nb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0}
.nb-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}.nb-card.active{border-color:var(--forest);box-shadow:0 0 0 2px #24504322}
.nb-open{border:0;background:none;text-align:left;width:100%;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.nb-cover{height:96px;border-radius:8px;border:1px solid #e3e8e0;background:#fffdf8;margin-bottom:6px}
.paper-lined{background:repeating-linear-gradient(#fffdf8 0 11px,#cfdbe6 11px 12px)}.paper-grid{background:#fffdf8 linear-gradient(#dde6ee 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,#dde6ee 1px,transparent 1px) 0 0/12px 12px}.paper-dots{background:#fffdf8 radial-gradient(#b9c6d2 1px,transparent 1.5px) 0 0/12px 12px}
.nb-hit{color:var(--forest);font-style:italic}
.ink-editor{display:flex;flex-direction:column;gap:6px;min-height:0}
.ink-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 8px;position:sticky;top:0;z-index:3}
.ink-group{display:flex;gap:2px;align-items:center;padding-right:6px;border-right:1px solid var(--line)}
.ink-group button{border:0;background:none;min-width:34px;height:34px;border-radius:8px;font-size:16px;color:var(--ink);margin:0;padding:0 6px}
.ink-group button.active{background:#e6efe6;color:var(--forest);box-shadow:inset 0 0 0 1px #c5d8c7}
.ink-group button:disabled{opacity:.35}
.ink-pages{font-size:12px;font-weight:700;min-width:34px;text-align:center}
.swatch{width:26px!important;min-width:26px!important;height:26px!important;border-radius:50%!important;background:var(--c)!important;border:3px solid #fff!important;box-shadow:0 0 0 1px #d4dcd4}
.swatch.active{box-shadow:0 0 0 2px var(--forest)!important}
[data-size] i{display:inline-block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}
.ink-pen-only{font-size:12px;font-weight:700;white-space:nowrap;display:flex;gap:4px;align-items:center;margin:0}
.ink-more{position:relative}.ink-more summary{list-style:none;cursor:pointer;font-size:20px;padding:0 8px;border-radius:8px}.ink-more summary::-webkit-details-marker{display:none}
.ink-menu{position:absolute;right:0;top:36px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px;min-width:270px;z-index:5}
.ink-menu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;margin:0;font-size:13px}.ink-menu button:hover{background:#f1f5f0}.ink-menu label{font-size:13px;padding:6px 10px;display:flex;gap:8px;align-items:center}
.ink-status{font-size:12px;color:var(--muted);margin-left:auto}
.ink-scroll{overflow:auto;border-radius:10px;background:#e9ede6;padding:0}
.ink-wrap{position:relative;margin:0 auto;box-shadow:0 2px 14px #1b33291a}
.ink-wrap canvas{position:absolute;inset:0;display:block}
.ink-live{touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ink-ocr textarea{width:100%;font-family:inherit}
.nb-stage .ink-scroll{max-height:none}
.ink-dock{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:#f7f8f3;border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;box-shadow:-14px 0 40px #173b2d22}
.ink-dock-head{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#fff}
.ink-dock-head select{flex:1;min-width:0;margin:0;padding:6px}
.ink-dock-body{flex:1;overflow:auto;padding:8px}.ink-dock-body .ink-scroll{max-height:none}
body.ink-docked .shell{margin-right:min(460px,100vw)}
body.ink-docked .reader-shell{right:min(460px,100vw)}
.ink-fab{position:fixed;right:20px;bottom:20px;z-index:45;border:0;background:var(--forest);color:#fff;font-weight:700;border-radius:999px;padding:12px 18px;box-shadow:0 10px 30px #173b2d40}
body.ink-docked .ink-fab{display:none}
.print-area{display:none}
@media print{body.printing-ink>*:not(.print-area),body.printing-mod>*:not(.print-area){display:none!important}body.printing-ink .print-area,body.printing-mod .print-area{display:block!important}.print-area figure{margin:0;page-break-after:always}.print-area img{width:100%}.print-module{font:12pt/1.55 Georgia,serif;color:#000}.print-module h2{margin-top:18pt}.print-foot{font-size:9pt;color:#555}}
/* Kuis */
.qz-progress{height:6px;background:#e8eee7;border-radius:999px;overflow:hidden;margin:4px 0 10px}.qz-progress i{display:block;height:100%;background:var(--forest)}
.qz-q{font-size:18px;line-height:1.45}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;margin:0;font-size:14px}.qz-opt b{color:var(--muted);margin-right:6px}
.qz-opt.right{border-color:#5aa36f;background:#eaf6ec}.qz-opt.wrong{border-color:#d0786b;background:#fcefed}
.qz-feedback{margin-top:12px;border-radius:10px;padding:12px 14px;background:#f3f6f1}.qz-feedback.benar{background:#eaf6ec}.qz-feedback.salah{background:#fcefed}.qz-feedback blockquote{margin:8px 0;padding-left:10px;border-left:3px solid var(--sage);font-size:13px}
.qz-score{text-align:center;padding:10px}.qz-score strong{display:block;font-size:44px;color:var(--forest)}
.quiz-chips{display:flex;flex-wrap:wrap;gap:8px}.quiz-chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px}.quiz-chip b{color:var(--forest)}
.sp-list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;margin:10px 0}
.sp-item{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-weight:500}
/* Peta konsep */
.cm-wrap{display:grid;grid-template-columns:1fr 300px;gap:14px;margin-top:14px}
.cm-map{background:#fff;border:1px solid var(--line);border-radius:14px;min-height:420px;overflow:hidden}
.cm-map svg{width:100%;height:auto;display:block;touch-action:none}
.cm-node circle{fill:#e7f0e7;stroke:var(--forest);stroke-width:2}.cm-node text{font-size:13px;text-anchor:middle;fill:var(--ink);font-weight:600}.cm-node{cursor:grab}
.cm-node.sel circle{fill:var(--gold);stroke:#8a6522}
.cm-edge line{stroke:#a9bcae;stroke-width:1.6}.cm-edge text{font-size:11px;fill:var(--muted);text-anchor:middle}.cm-edge.hot line{stroke:var(--forest);stroke-width:2.4}
#cm-arrow path{fill:#a9bcae}
.cm-side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;max-height:620px;overflow:auto}
.cm-list,.cm-rel{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:4px}
.cm-list button{border:0;background:none;text-align:left;width:100%;padding:8px;border-radius:8px;margin:0;display:flex;flex-direction:column}.cm-list button:hover{background:#f2f6f1}
.cm-side textarea{width:100%}
/* Media */
.md-player{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0}
.md-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}.md-head h2{margin:0;font-size:19px}
.md-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-top:10px}
.md-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}.md-frame iframe,.md-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.md-player audio{width:100%}
.md-note-form{display:flex;gap:6px;align-items:center}.md-note-form input{flex:1;min-width:0;margin:0}
.md-note-list{list-style:none;padding:0;margin:10px 0;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:14px}
.md-ts{border:0;background:#e9f1e9;color:var(--forest);border-radius:6px;padding:1px 6px;margin:0 2px;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.md-tr-view{max-height:360px;overflow:auto;line-height:1.7;font-size:14px;background:#fafbf7;border-radius:10px;padding:12px}
.md-transcript textarea{width:100%}
.web-item.active{border-color:var(--forest)}
/* Modul */
.mod-form{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:10px}
.mod-form textarea,.mod-form input{width:100%}
.mod-sec{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}.mod-sec legend{font-size:12px;color:var(--muted);font-weight:700}
.mod-review{margin:0}
/* Kemajuan & saran */
.reco{margin:6px 0 18px}.reco-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.reco-item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.reco-item div{flex:1;min-width:0;display:flex;flex-direction:column}.reco-item small{color:var(--muted)}
.reco-icon{width:34px;height:34px;border-radius:50%;background:#e9f1e9;color:var(--forest);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.pg-level{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}.pg-level>div:last-child{flex:1}
.pg-badge{width:64px;height:64px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0}
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pg-stats .stat strong{display:block;font-size:26px;color:var(--forest)}.pg-stats .stat span,.pg-stats .stat small{font-size:12px;color:var(--muted)}
.pg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}.pg-card h2{font-size:16px;margin:0 0 10px}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pg-bars{display:flex;gap:6px;align-items:flex-end;height:130px}.pg-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}.pg-bar i{display:block;width:100%;max-width:26px;background:var(--sage);border-radius:4px 4px 0 0;min-height:2px}.pg-bar small{font-size:10px;color:var(--muted)}
.pg-row{display:grid;grid-template-columns:120px 1fr 28px;gap:8px;align-items:center;font-size:13px;margin:6px 0}.pg-meter{height:8px;background:#eef2ec;border-radius:999px;overflow:hidden}.pg-meter i{display:block;height:100%;background:#d0786b}
.pg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px}.pg-list small{display:block;color:var(--muted)}
@media(max-width:950px){.cm-wrap,.md-grid{grid-template-columns:1fr}.pg-grid{grid-template-columns:1fr}.pg-stats{grid-template-columns:repeat(2,1fr)}body.ink-docked .shell{margin-right:0}body.ink-docked .reader-shell{right:0}.ink-dock{top:auto;height:62vh;width:100vw;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0}body.ink-docked .shell,body.ink-docked .reader-shell{padding-bottom:62vh}}
@media(max-width:650px){.br-page{padding:12px}.br-bar{flex-wrap:wrap}.br-bar input{order:5;flex-basis:100%}.br-bar .primary{order:6}.two-col{grid-template-columns:1fr}.br-logo{font-size:36px}.br-home{margin-top:3vh}.ink-group{border-right:0}.ink-status{flex-basis:100%;margin:0}.ink-fab{right:12px;bottom:12px}}
/* ===== V6.1 — Ruang belajar & suara "Halo bro" ===== */
.studio-view{padding-top:14px}
.studio-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}.studio-bar h1{margin:0;font-size:28px}
.st-panes{display:grid;gap:10px;height:calc(100vh - 150px);min-height:480px}
.st-panes.cols-1{grid-template-columns:1fr}.st-panes.cols-2{grid-template-columns:1fr 1fr}.st-panes.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.st-panes.cols-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.st-pane{background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.st-pane.max{grid-column:1/-1;grid-row:1/-1;z-index:2}.st-pane.dim{display:none}
.st-pane-head{display:flex;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);background:#f6f8f3}.st-pane-head select{flex:1;margin:0;padding:5px 8px;font-weight:700;border-radius:8px}.st-pane-head .text-button{margin:0;padding:2px 8px;font-size:16px}
.st-pane-body{flex:1;min-height:0;overflow:auto;padding:8px;position:relative}
.st-pane-body .browser{min-height:100%;height:100%;box-shadow:none;border:0;border-radius:0}
.st-pane-body .br-page{padding:12px 14px 30px}
.st-pane-body .md-grid{grid-template-columns:1fr}
.st-pane-body .tutor{height:100%}
#reader-shell.in-pane{position:relative;inset:auto;z-index:1;height:100%;min-height:420px;border-radius:10px}
#reader-shell.in-pane .reader-top{flex-wrap:wrap;gap:6px;padding:8px}
#reader-shell.in-pane .reader-top .secondary{padding:6px 9px;font-size:12px}
.st-book-picker{display:none}#reader-shell.hidden+.st-book-picker{display:block}
.st-book-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}.st-book-list button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;text-align:left;margin:0;display:flex;flex-direction:column}.st-book-list small{color:var(--muted)}
.st-book-q{width:100%}
.voice-fab{position:fixed;right:20px;bottom:80px;z-index:46;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:var(--forest);font-size:22px;box-shadow:0 10px 30px #173b2d33}
.voice-fab[data-state=wake]{box-shadow:0 0 0 3px #a9c3b0,0 10px 30px #173b2d33}
.voice-fab[data-state=listen],.voice-fab[data-state=speak]{background:var(--forest);color:#fff;animation:vpulse 1.2s infinite}
@keyframes vpulse{50%{box-shadow:0 0 0 10px #24504322}}
.voice-panel{position:fixed;right:20px;bottom:140px;z-index:61;width:min(380px,calc(100vw - 32px));max-height:min(560px,70vh);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.voice-head{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.voice-head div{flex:1;display:flex;flex-direction:column}.voice-head small{color:var(--muted)}
.voice-orb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d5e6d6,#5f8f76);flex-shrink:0}
.voice-orb[data-state=listen]{animation:vpulse 1s infinite}.voice-orb[data-state=think]{opacity:.6;animation:vpulse 2s infinite}.voice-orb[data-state=speak]{background:radial-gradient(circle at 35% 35%,#f1dfb8,#c08b33);animation:vpulse .8s infinite}
.voice-wake{padding:8px 14px;font-size:13px;margin:0;border-bottom:1px solid var(--line)}
.voice-log{flex:1;overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.vl{margin:0;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.45;max-width:92%}.vl b{display:block;font-size:11px;color:var(--muted)}
.vl.me{align-self:flex-end;background:#e9f1e9}.vl.bro{align-self:flex-start;background:#f6f3ea}.vl.interim{opacity:.6;font-style:italic}
.voice-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);align-items:center}.voice-form input{flex:1;min-width:0;margin:0}.voice-form .primary,.voice-form .secondary{margin:0;padding:9px 12px;white-space:nowrap}
@media(max-width:950px){.st-panes.cols-3{grid-template-columns:1fr 1fr}.st-panes.cols-4{grid-template-columns:1fr}}
@media(max-width:720px){.st-panes{height:auto;display:flex;flex-direction:column}.st-pane{height:78vh}.voice-fab{right:12px;bottom:66px}.voice-panel{right:16px;bottom:126px}}
.voice-wake{display:flex!important;align-items:center;gap:8px;padding:8px 16px;font-weight:600}.voice-wake input{display:inline-block;width:auto;margin:0}
.st-pane .br-bar{flex-wrap:wrap}.st-pane .br-bar input{order:5;flex-basis:100%}.st-pane .br-bar .primary{order:6}
/* ===== V6.2 — Ruang belajar ala tablet ===== */
body.in-studio #studio-view{max-width:none;padding:16px 22px 22px}
.studio-bar .chip.active{background:var(--forest);color:#fff;border-color:var(--forest)}
.st-focus-btn{margin:0}
.st-panes{background:#1d2824;padding:10px;border-radius:26px;box-shadow:0 22px 60px #0f201a40,inset 0 0 0 1px #2f3d38;gap:0;height:calc(100vh - 150px)}
.st-panes.lay-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-panes.lay-1{grid-template-columns:1fr}
.st-panes.lay-2{grid-template-columns:1fr 12px 1fr}
.st-panes.lay-2>.st-pane:nth-child(1){grid-column:1}.st-panes.lay-2>.st-pane:nth-child(2){grid-column:3}
.st-panes.lay-tablet,.st-panes.lay-4{grid-template-columns:1fr 12px 1fr;grid-template-rows:1fr 12px 1fr}
.st-panes.lay-tablet>.st-pane:nth-child(1){grid-column:1;grid-row:1}
.st-panes.lay-tablet>.st-pane:nth-child(2){grid-column:1;grid-row:3}
.st-panes.lay-tablet>.st-pane:nth-child(3){grid-column:3;grid-row:1/4}
.st-panes.lay-4>.st-pane:nth-child(1){grid-column:1;grid-row:1}.st-panes.lay-4>.st-pane:nth-child(2){grid-column:3;grid-row:1}
.st-panes.lay-4>.st-pane:nth-child(3){grid-column:1;grid-row:3}.st-panes.lay-4>.st-pane:nth-child(4){grid-column:3;grid-row:3}
.st-pane{border:0;border-radius:16px;background:#fbfbf8;box-shadow:0 1px 0 #ffffff10}
.st-pane-head{position:relative;background:transparent;border-bottom:1px solid #eef0ea;padding:4px 6px 4px 8px;min-height:36px}
.st-pane-head select{flex:0 1 auto;max-width:190px;border:0;background:transparent;font-size:12px;color:#5d7368;padding:4px 6px;box-shadow:none}
.st-pane-head select:hover{background:#eef3ec}
.st-grip{position:absolute;left:50%;top:6px;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:#d6dcd5;pointer-events:none}
.st-pane-head .text-button{margin-left:auto}
.st-split{position:relative;cursor:col-resize;touch-action:none;outline:none;z-index:3}
.st-split::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:46px;margin:-23px 0 0 -2px;border-radius:9px;background:#5f7169;transition:.15s}
.st-split:hover::after,.st-split:focus-visible::after,.st-panes.dragging .st-split::after{background:#c9dccf;height:64px;margin-top:-32px}
.st-split-v{grid-column:2;grid-row:1/-1}
.st-split-h{grid-column:1;grid-row:2;cursor:row-resize}.lay-4 .st-split-h{grid-column:1/-1}
.st-split-h::after{width:46px;height:4px;margin:-2px 0 0 -23px}
.st-split-h:hover::after,.st-split-h:focus-visible::after,.st-panes.dragging .st-split-h::after{width:64px;height:4px;margin:-2px 0 0 -32px}
.st-panes.dragging{cursor:grabbing;user-select:none}.st-panes.dragging iframe,.st-panes.dragging canvas,.st-panes.dragging video{pointer-events:none}
.st-panes.has-max .st-split{display:none}.st-panes.has-max>.st-pane.max{grid-column:1/-1!important;grid-row:1/-1!important}
.st-pane[data-kind=ink] .st-pane-body{overflow:hidden;padding:0;display:flex;flex-direction:column}
.st-pane[data-kind=ink] .ink-editor{flex:1;min-height:0;padding:6px}
.st-pane[data-kind=media] .st-pane-body{padding:10px}
body.st-focus .sidebar,body.st-focus .topbar,body.st-focus .studio-bar>div:first-child,body.st-focus #st-layouts{display:none!important}
body.st-focus #studio-view{padding:8px}body.st-focus .st-panes{height:calc(100vh - 16px);border-radius:22px}
body.st-focus .studio-bar{position:fixed;left:16px;bottom:16px;z-index:70;margin:0}
body.st-focus .st-focus-btn{box-shadow:var(--shadow)}
@media(max-width:720px){.st-panes{background:transparent;padding:0;box-shadow:none;gap:10px}.st-split{display:none}.st-pane{box-shadow:0 0 0 1px var(--line)}body.in-studio #studio-view{padding:12px}}
/* Cari video YouTube */
.md-yt-form{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dfe6df;border-radius:999px;padding:5px 5px 5px 8px;margin-bottom:10px;box-shadow:0 4px 18px #173b2d0a}
.md-yt-form:focus-within{border-color:#84ad99;box-shadow:0 0 0 3px #98bfa438}
.md-yt-form input{flex:1;min-width:0;border:0;box-shadow:none!important;background:transparent;padding:8px 6px}
.md-yt-form .primary{border-radius:999px;padding:9px 18px;margin:0}
.yt-logo{display:grid;place-items:center;width:30px;height:22px;border-radius:7px;background:#e62117;color:#fff;font-size:11px;flex-shrink:0}
#md-yt-toggle{margin:0 0 10px}
.yt-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 12px;margin:4px 0 16px}
.yt-card{display:flex;flex-direction:column;gap:7px;text-align:left;border:0;background:transparent;padding:0;margin:0;color:var(--ink);border-radius:12px}
.yt-card:hover .yt-thumb img{transform:scale(1.04)}.yt-card:disabled{opacity:.6}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#dfe5de}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.yt-thumb em{position:absolute;right:6px;bottom:6px;background:#000c;color:#fff;font:600 11px/1 'DM Sans',sans-serif;padding:3px 5px;border-radius:5px;font-style:normal}
.yt-meta strong{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.st-pane .yt-results{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.md-add-more{margin:0 0 10px}.md-add-more summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:700;padding:2px 4px}.md-add-more form{margin-top:8px}
.st-pane .md-player{margin-top:0;border:0;padding:0;background:transparent}
/* Buku tulis V6.2 */
.ink-editor{height:100%}
.ink-dock-body{display:flex;flex-direction:column}.ink-dock-body .ink-editor{flex:1;min-height:0}
.ink-editor .ink-scroll{flex:1;min-height:0;overscroll-behavior:contain;background:#e8ebe4;border-radius:14px}
.nb-stage .ink-scroll{height:calc(100vh - 230px);min-height:420px;max-height:none;flex:none}
.ink-wrap{border-radius:3px;box-shadow:0 1px 2px #1b332914,0 10px 30px #1b33291c}
.ink-bar{border-radius:16px;box-shadow:0 6px 22px #173b2d12;border-color:#e8ece6;gap:4px}
.ink-group{padding-right:4px}
.ink-zoom .ink-zlabel{font-size:12px!important;font-weight:700;min-width:48px!important}
.swatch.custom{display:inline-block;position:relative;overflow:hidden;background:conic-gradient(#e74c3c,#f1c40f,#2ecc71,#3498db,#9b59b6,#e74c3c)!important;cursor:pointer;margin:0 2px}
.swatch.custom input{position:absolute;inset:-8px;opacity:0;cursor:pointer;width:auto;height:auto;padding:0}
.ink-deco summary{font-size:13px!important;font-weight:700;color:var(--forest);padding:6px 10px!important;background:#fdf3e6;border-radius:999px!important}
.ink-deco-menu{left:0;right:auto;width:min(330px,86vw);gap:4px;padding:12px}
.ink-mh{margin:6px 0 2px;font-size:10px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:#8a9b92}
.ink-row{display:flex;flex-wrap:wrap;gap:6px}
.ink-menu .ink-row button{padding:0;margin:0}
.ink-note-btn{width:38px;height:34px;border-radius:3px!important;background:var(--c)!important;box-shadow:0 3px 8px #0000001f;transform:rotate(-2deg)}
.ink-stk button{font-size:22px!important;width:38px;height:38px;border-radius:10px!important;text-align:center!important}
.ink-tape-btn{width:66px;height:22px;background:var(--c)!important;opacity:.85;clip-path:polygon(0 0,4% 25%,0 50%,4% 75%,0 100%,100% 100%,96% 75%,100% 50%,96% 25%,100% 0)}
.ink-tape-btn.tape-stripe{background:repeating-linear-gradient(135deg,var(--c) 0 7px,#ffffff90 7px 11px)!important}
.ink-tape-btn.tape-dots{background:radial-gradient(#ffffffaa 2px,transparent 2.5px) 0 0/10px 10px,var(--c)!important}
.ink-tape-btn.tape-grid{background:linear-gradient(#ffffff80 1px,transparent 1px) 0 0/8px 8px,linear-gradient(90deg,#ffffff80 1px,transparent 1px) 0 0/8px 8px,var(--c)!important}
.ink-menu .chip{padding:5px 10px!important;border:1px solid var(--line)!important;border-radius:999px!important;font-size:12px!important}
.ink-menu .chip.active{background:var(--forest)!important;color:#fff!important}
.ink-tint{width:30px;height:30px;border-radius:50%!important;background:var(--c)!important;border:1px solid #d5ddd5!important}
.ink-items{position:absolute;left:0;top:0;width:1000px;height:1414px;transform-origin:0 0;pointer-events:none}
.ink-it{position:absolute;pointer-events:auto;touch-action:none;cursor:move;outline:3px dashed transparent;outline-offset:4px;border-radius:4px}
.ink-it:hover{outline-color:#7fb09780}.ink-it.sel{outline-color:#2f7a5c;z-index:3}
.ink-it textarea{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;resize:none;font-family:'Caveat','Segoe Print',cursive;line-height:1.18;background:transparent;box-shadow:none!important;padding:4px 0;color:#3a3a32;overflow:hidden;cursor:text}
.ink-it-bar{position:absolute;left:0;bottom:calc(100% + 12px);transform-origin:0 100%;display:flex;gap:2px;background:#fff;border-radius:12px;box-shadow:0 8px 24px #173b2d2e;padding:4px;white-space:nowrap;z-index:2}
.ink-it-bar button{border:0;background:none;min-width:34px;height:34px;border-radius:8px;font-size:15px;margin:0;padding:0 6px}.ink-it-bar button:hover{background:#eef3ec}
.ink-it-rs{position:absolute;right:-12px;bottom:-12px;width:22px;height:22px;border-radius:50%;background:#2f7a5c;border:3px solid #fff;box-shadow:0 2px 6px #0003;cursor:nwse-resize}
.ink-editor[data-mode=select] .ink-live{cursor:grab}
.ink-editor[data-mode=shape] .ink-live{cursor:crosshair}
/* V6.2 — ringkas di panel sempit */
body.in-studio .ink-fab{display:none}
.st-pane .md-yt-form{position:sticky;top:-10px;z-index:4;margin:-10px -10px 10px;border-radius:0 0 16px 16px;border-width:0 0 1px;box-shadow:none;padding:8px 10px}
.st-pane .md-head{gap:6px}.st-pane .md-head h2{font-size:15px;font-family:'DM Sans',sans-serif;font-weight:700;flex-basis:100%}
.st-pane .md-head .secondary,.st-pane .md-head .text-button{padding:5px 9px;font-size:12px}
.ink-editor{container-type:inline-size;position:relative}
.ink-editor .ink-status{position:absolute;left:14px;bottom:12px;z-index:4;background:#ffffffd9;border-radius:999px;padding:2px 10px;font-size:11px;pointer-events:none;margin:0}
.ink-editor .ink-status:empty{display:none}
@container (max-width:820px){
 .ink-bar{gap:2px;padding:4px 6px}
 .ink-group{padding-right:2px}
 .ink-group button{min-width:30px;height:30px;font-size:15px;padding:0 4px}
 .ink-colors,.ink-sizes{display:none!important}.ink-pal{display:block!important}
 .swatch{width:22px!important;min-width:22px!important;height:22px!important}
 .ink-pen-only span{font-size:0}.ink-pen-only span::first-letter{font-size:15px}
 .ink-bar .primary.small{font-size:0;padding:7px 10px}.ink-bar .primary.small::before{content:"✦ Kenali";font-size:12px}
 .ink-zoom .ink-zlabel{min-width:42px!important}
 .ink-deco summary{padding:5px 8px!important}
}
/* V7.1: warna & ketebalan dipindah ke satu tombol pada layar sempit (bukan disembunyikan) */
.ink-pal{display:none}.ink-pal>summary{list-style:none;display:grid;place-items:center;min-width:34px;height:32px;border-radius:9px;cursor:pointer}.ink-pal>summary::-webkit-details-marker{display:none}
.ink-pal-dot{display:block;width:var(--d,8px);height:var(--d,8px);min-width:8px;min-height:8px;border-radius:50%;background:var(--c,#1d2b24);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--c,#1d2b24)}
.ink-pal-menu{width:min(300px,92vw);padding:12px;gap:6px}.ink-pal-menu .ink-row{display:flex;flex-wrap:wrap;gap:8px}.ink-pal-menu .swatch{width:30px!important;height:30px!important;min-width:30px!important}.ink-pal-menu [data-size]{width:38px;height:34px}
.ink-menu{overscroll-behavior:contain}
/* V6.3 — suara */
.voice-set{border-bottom:1px solid var(--line);padding:6px 14px;font-size:13px}.voice-set summary{cursor:pointer;font-weight:700;color:var(--forest);font-size:12px}
.voice-set label{margin:6px 0;font-size:12px}.voice-set select{padding:7px 9px;font-size:12px}.voice-set button{margin:4px 0}.voice-set small{display:block;font-size:11px}
.tutor-send-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tutor-send-row #tutor-send{margin-left:auto}
.tutor-mic{border-radius:999px!important;padding:9px 14px!important;margin:0}
.tutor-mic[data-state=listen],.tutor-mic[data-state=speak]{background:var(--forest);color:#fff;animation:vpulse 1.2s infinite}
.tutor-speak{display:flex;align-items:center;gap:6px;font-size:12px;margin:0;line-height:1.2}.tutor-speak input{width:auto;margin:0}
.tutor-talk-hint{margin:6px 0 0;font-size:12px;color:var(--forest);font-weight:600}
/* V6.4 — buku penuh + zoom */
#reader-content{width:100%}
#reader-content canvas.rz{max-width:none;height:auto;margin:14px auto}
.reader-controls{left:0}
.rz-group{display:inline-flex;gap:2px;margin-left:6px}.rz-group .secondary{padding:6px 10px;min-width:34px}#rz-fit{min-width:58px;font-variant-numeric:tabular-nums}
.reading-pane{touch-action:pan-x pan-y}
#reader-shell.in-pane{min-height:0;border-radius:0;background:#e9ece6}
#reader-shell.in-pane .reader-top{padding:4px 6px;gap:4px;flex-wrap:nowrap;border-bottom:1px solid #e3e8e1}
#reader-shell.in-pane .reader-top>*:not(#reader-back):not(.reader-meta){display:none!important}
#reader-shell.in-pane #reader-back{font-size:0;padding:4px 10px}#reader-shell.in-pane #reader-back::before{content:"← Buku lain";font-size:12px}
#reader-shell.in-pane .reader-meta{text-align:left}#reader-shell.in-pane .reader-meta small{display:none}#reader-shell.in-pane .reader-meta strong{font-size:13px}
#reader-shell.in-pane .reader-content{display:block;height:100%;min-height:0}
#reader-shell.in-pane .reader-notes,#reader-shell.in-pane #reading-status{display:none!important}
#reader-shell.in-pane .reading-pane{height:100%}
#reader-shell.in-pane .reader-controls{padding:5px;gap:6px;background:#ffffffe6;backdrop-filter:blur(6px)}
#reader-shell.in-pane .reader-controls .secondary{padding:5px 9px}
.st-pane[data-kind=book] .st-pane-body{padding:0;overflow:hidden}
.st-pane[data-kind=book] .st-book-picker{padding:10px;overflow:auto;height:100%}
/* V6.4 — zoom per panel, tangkap & rekam layar */
.st-zoom{display:inline-flex;align-items:center;gap:1px;margin-left:auto;background:#f0f3ee;border-radius:999px;padding:2px}
.st-zoom button{border:0;background:transparent;min-width:26px;height:24px;border-radius:999px;font-size:14px;color:var(--forest);padding:0 6px;margin:0}
.st-zoom button:hover{background:#fff}.st-zoom .st-zl{font-size:11px;font-weight:700;min-width:44px;font-variant-numeric:tabular-nums}
.st-pane-head .st-zoom~.text-button{margin-left:0}
.st-shot{font-size:14px!important}
.st-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.st-tools .secondary.small,.cap-rec summary{padding:7px 12px;font-size:12px;margin:0}
.cap-rec{position:relative}.cap-rec summary{list-style:none;cursor:pointer;display:inline-block}.cap-rec summary::-webkit-details-marker{display:none}
.cap-rec-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:6px}
body.st-focus .cap-rec-pop{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.cap-rec-pop label{display:flex;gap:6px;align-items:center;font-size:12px;margin:0}.cap-rec-pop input{width:auto;margin:0}
.tiny{font-size:11px}
.cap-recbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:90;background:#1d2824;color:#fff;border-radius:999px;padding:6px 8px 6px 14px;display:flex;gap:10px;align-items:center;font-size:13px;box-shadow:0 10px 30px #0004}
.cap-recbar b{font-variant-numeric:tabular-nums}.cap-recbar .primary{background:#c0392b;border-color:#c0392b;border-radius:999px;margin:0}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#ff4d4d;animation:vpulse 1s infinite}
.cap-box{width:min(900px,96vw)}.cap-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cap-img{background:#eef1ec;border-radius:12px;padding:10px;max-height:62vh;overflow:auto;text-align:center}.cap-img img{max-width:100%;height:auto;box-shadow:0 4px 20px #0002;border-radius:4px}
.cap-actions{justify-content:flex-end}
body.capturing .cap-recbar,body.capturing #cap-modal{visibility:hidden}
/* V6.5 — buku bersih */
.rf-tools,.rf-close{display:none}
#reader-shell.clean .reader-top,#reader-shell.clean .reader-notes{display:none!important}
#reader-shell.clean .reader-content{display:block;flex:1;min-height:0;position:relative}
#reader-shell.clean .reading-pane{height:100%;background:#e4e8e1}
#reader-shell.clean .reader-controls{order:2;position:sticky;top:auto;bottom:14px;margin-top:auto;align-self:center;width:auto;max-width:calc(100% - 20px);border:0;border-radius:999px;background:#1f2b27e6;color:#fff;box-shadow:0 10px 30px #0003;padding:6px 10px;gap:6px;flex-wrap:nowrap;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s;backdrop-filter:blur(6px);z-index:5}
#reader-shell.clean.show-ctl .reader-controls{opacity:1;pointer-events:auto;transform:none}
#reader-shell.clean .reader-controls .secondary{background:transparent;color:#fff;border-color:#ffffff40;padding:5px 9px}
#reader-shell.clean .reader-controls input{width:52px;padding:4px 6px;background:#ffffff1a;color:#fff;border-color:#ffffff40}
#reader-shell.clean #reading-status{display:none}
#reader-shell.clean #reader-content canvas{margin:10px auto;box-shadow:0 2px 18px #1b362d22}
#reader-shell.clean .reader-text{margin:10px auto}
.rf-other{display:none}.reader-shell.in-pane .rf-other{display:inline-block}
#reader-shell.clean:not(.in-pane) .rf-tools,#reader-shell.clean:not(.in-pane) .rf-close{display:block;position:absolute;top:12px;z-index:6;border:0;border-radius:999px;background:#1f2b27cc;color:#fff;padding:7px 13px;font-size:12px;font-weight:700;opacity:0;transition:opacity .25s}
#reader-shell.clean:not(.in-pane).show-ctl .rf-tools,#reader-shell.clean:not(.in-pane).show-ctl .rf-close{opacity:1}
.rf-tools{left:14px}.rf-close{right:14px}
#reader-shell:not(.clean):not(.in-pane) .rf-tools{display:block;position:absolute;right:14px;bottom:14px;z-index:6;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--forest)}
#reader-shell.in-pane.clean .reader-top{display:none!important}
/* V6.5 — Bahas soal */
.drill{max-width:860px;margin:0 auto}
.dr-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed #c9d8cb;border-radius:20px;padding:34px 20px;background:#fff;cursor:pointer;transition:.15s;font-weight:400;line-height:1.5}
.dr-drop:hover,.dr-drop.over{border-color:var(--forest);background:#f3f8f2}
.dr-drop-ic{font-size:34px;color:var(--forest)}.dr-drop strong{font-size:17px}.dr-drop small{color:var(--muted);max-width:460px}
.dr-files{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.dr-files .chip{display:inline-flex;gap:4px;align-items:center}.dr-files .text-button{padding:0 2px}
.dr-setup textarea{width:100%;margin:6px 0 10px}
.dr-start-row{display:flex;gap:8px}.dr-start-row input{flex:1;min-width:0}
.dr-progress{margin:12px 0;color:var(--forest);font-weight:700}
.dr-sets{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.dr-set{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 8px 4px 4px}
.dr-set>button:first-child{flex:1;text-align:left;border:0;background:none;padding:10px 12px;display:flex;flex-direction:column}.dr-set small{color:var(--muted)}
.dr-top{display:flex;align-items:center;gap:10px}.dr-top strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.dr-dots{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 14px}
.dr-dot{width:30px;height:30px;border-radius:50%;border:1px solid #d6e0d6;background:#fff;font-size:11px;font-weight:700;color:#6b7f75;padding:0}
.dr-dot.on{border-color:#9fbfac;background:#eef5ef}.dr-dot.ok{background:#2e8b57;border-color:#2e8b57;color:#fff}.dr-dot.mid{background:#e0a536;border-color:#e0a536;color:#fff}.dr-dot.bad{background:#fbe9e7;border-color:#e0a59d;color:#a8403e}
.dr-dot.cur{box-shadow:0 0 0 3px #24504333}
.dr-q{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 6px 24px #173b2d0a}
.dr-vig{background:#f6f8f3;border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:14px}.dr-vig summary{cursor:pointer;font-weight:700;font-size:12px;color:var(--forest)}
.dr-stem{font-size:16px;line-height:1.65;margin:0 0 12px}.dr-n{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:8px;background:var(--forest);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:1px}
.dr-opts{display:flex;flex-direction:column;gap:7px}
.dr-opt{text-align:left;border:1px solid #dfe7df;background:#fbfcf9;border-radius:12px;padding:11px 14px;font-size:15px;color:var(--ink);margin:0;transition:.12s}.dr-opt:hover{border-color:var(--forest);background:#f0f6f0}
.dr-thread{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px;max-height:46vh;overflow:auto;padding:2px}
.dr-msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.55}.dr-msg b{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.dr-msg.ai{align-self:flex-start;background:#f6f3ea}.dr-msg.me{align-self:flex-end;background:#e6f0e7}
.dr-verdict{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}.v-benar{background:#d9f0e1;color:#1e7046}.v-sebagian{background:#fbefd5;color:#93650b}.v-salah{background:#fbe2df;color:#a8403e}
.dr-msg.typing{display:flex;gap:4px}.dr-msg.typing span{width:7px;height:7px;border-radius:50%;background:#b5a98a;animation:vpulse 1s infinite}
.dr-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.dr-voice{display:flex;gap:6px;align-items:center;font-size:12px;margin:0 0 0 auto}.dr-voice input{width:auto;margin:0}
.dr-form{display:flex;gap:6px;align-items:center}.dr-form input{flex:1;min-width:0;margin:0}.dr-form .primary,.dr-form .secondary{margin:0;white-space:nowrap}
.dr-talk{border-radius:999px!important}.dr-talk[data-state=listen],.dr-talk[data-state=speak]{background:var(--forest);color:#fff;animation:vpulse 1.2s infinite}
.dr-hint{margin:6px 0 0;font-size:12px;color:var(--forest);font-weight:600}
.dr-nav{display:flex;justify-content:space-between;margin-top:16px}
.st-pane .dr-head{display:none}.st-pane[data-kind=drill] .st-pane-body{padding:12px}.st-pane .dr-thread{max-height:none}
@media(max-width:650px){.dr-form{flex-wrap:wrap}.dr-form input{order:-1;flex-basis:100%}.dr-voice{margin:0}}
/* ===== V6.6: diskusi suara mode fokus + Ruang belajar lebih lega ===== */
.voice-pill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:62;display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 32px));padding:6px 6px 6px 8px;border-radius:999px;background:#1d2824e6;color:#eef3ee;box-shadow:0 10px 30px #0f201a40;backdrop-filter:blur(8px);font-size:13px}
.voice-pill.hidden{display:none}
.vp-orb{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 35%,#d5e6d6,#5f8f76)}
.voice-pill[data-state=listen] .vp-orb{animation:vpulse 1s infinite}.voice-pill[data-state=think] .vp-orb{opacity:.6;animation:vpulse 2s infinite}
.voice-pill[data-state=speak] .vp-orb{background:radial-gradient(circle at 35% 35%,#fbe7c4,#d5af72);animation:vpulse .8s infinite}
.vp-cap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.vp-cap[data-who=me]{font-style:italic;color:#c9dacd}.vp-cap[data-who=err]{color:#ffd6c9}
.vp-btn{margin:0;width:32px;height:32px;padding:0;border-radius:50%;border:0;background:#ffffff1a;color:#fff;font-size:13px;flex-shrink:0;cursor:pointer}.vp-btn:hover{background:#ffffff33}
body.voice-live .voice-fab{opacity:.0;pointer-events:none}
@media(min-width:721px){
 body.in-studio .topbar{display:none}
 body.in-studio #studio-view{padding:10px 14px 12px}
 body.in-studio .studio-bar{align-items:center;margin-bottom:8px;gap:10px;flex-wrap:nowrap}
 body.in-studio .studio-bar>div:first-child .eyebrow{display:none}body.in-studio .studio-bar h1{font-size:19px;white-space:nowrap}
 body.in-studio #st-layouts{margin-right:auto;flex-wrap:nowrap}
 body.in-studio .st-panes{height:calc(100vh - 66px);padding:6px;border-radius:20px}
 body.in-studio .st-pane{border-radius:14px}
 body.in-studio .st-pane-head{min-height:30px;padding:2px 4px 2px 6px}
 body.in-studio .st-pane-head select{padding:3px 6px;font-size:12px}
 body.in-studio .st-pane-head .st-zoom,body.in-studio .st-pane-head [data-st-shot],body.in-studio .st-pane-head [data-st-max]{opacity:.45;transition:opacity .15s}
 body.in-studio .st-pane:hover .st-pane-head .st-zoom,body.in-studio .st-pane:hover .st-pane-head [data-st-shot],body.in-studio .st-pane:hover .st-pane-head [data-st-max],body.in-studio .st-pane-head :focus-visible{opacity:1}
 body.in-studio .voice-fab{width:42px;height:42px;font-size:18px;right:14px;bottom:14px;opacity:.8}
 body.in-studio .voice-panel{bottom:66px;right:14px}
}
body.in-studio .ink-bar button,body.in-studio .ink-bar select{min-height:28px}
body.in-studio .ink-bar{padding:3px 4px;row-gap:0}
body.in-studio #md-root .md-yt-form{padding:4px}
body.voice-live .voice-fab{opacity:0!important;pointer-events:none}
@media(min-width:721px){body.in-studio .voice-pill{top:12px;bottom:auto;max-width:340px}}
@media(min-width:721px){body.in-studio.voice-live #st-layouts{visibility:hidden}}
body.in-studio .st-pane .md-yt-form{position:static;padding:4px 6px}body.in-studio .st-pane .md-yt-form .primary{padding:6px 14px;font-size:12px}body.in-studio .st-pane .md-yt-form input{padding:5px 6px}

/* ===== V6.7: Ruang belajar imersif — panel memenuhi layar, garis tipis, bilah & menu dipanggil ===== */
body.in-studio .topbar{display:none!important}
body.in-studio #studio-view{padding:0!important;max-width:none}
body.in-studio .st-panes{position:fixed;inset:0;height:auto!important;min-height:0;z-index:5;padding:0!important;border-radius:0!important;background:#d5ddd6;gap:0!important;box-shadow:none!important;display:grid!important}
body.in-studio .st-pane{border-radius:0!important;position:relative;height:auto!important;background:#fdfdfb;box-shadow:none!important;border:0}
body.in-studio .st-pane-body{padding:0}
body.in-studio .st-pane[data-kind=media] .st-pane-body,body.in-studio .st-pane[data-kind=drill] .st-pane-body,body.in-studio .st-pane[data-kind=modules] .st-pane-body,body.in-studio .st-pane[data-kind=tutor] .st-pane-body{padding:6px}
body.in-studio .st-pane[data-kind=ink] .ink-editor{padding:4px}
body.in-studio .st-pane[data-kind=ink] .ink-scroller,body.in-studio .st-pane[data-kind=ink] [data-ink-scroll]{border-radius:8px}
/* pegangan geser: tak terlihat, muncul saat didekati; area sentuh tetap lebar */
body.in-studio .st-split{background:transparent;z-index:6;display:block}
body.in-studio .st-split-v::before{content:"";position:absolute;top:0;bottom:0;left:-9px;right:-9px}
body.in-studio .st-split-h::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
body.in-studio .st-split::after{opacity:0;background:#5f7f70;transition:opacity .2s,height .15s,width .15s}
body.in-studio .st-split:hover::after,body.in-studio .st-split:focus-visible::after,body.in-studio .st-panes.dragging .st-split::after{opacity:1}
@media(hover:none){body.in-studio .st-split::after{opacity:.35}}
/* kepala panel: melayang & sembunyi sendiri */
body.in-studio .st-pane-head{position:absolute;top:0;left:0;right:0;z-index:8;min-height:34px;background:#fbfbf8f0;backdrop-filter:blur(8px);border-bottom:1px solid #e3e9e2;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s}
body.in-studio .st-pane.show-head .st-pane-head,body.in-studio .st-pane-head:focus-within{transform:none;opacity:1;pointer-events:auto}
body.in-studio .st-pane-head .st-zoom,body.in-studio .st-pane-head [data-st-shot],body.in-studio .st-pane-head [data-st-max]{opacity:1}
.st-tab-grip{display:none}
body.in-studio .st-tab-grip{display:block;position:absolute;top:0;left:50%;width:64px;height:16px;margin:0 0 0 -32px;z-index:7;border:0;background:transparent;padding:0;cursor:pointer;min-height:0;box-shadow:none}
body.in-studio .st-tab-grip::after{content:"";position:absolute;left:16px;right:16px;top:5px;height:4px;border-radius:9px;background:#b9c6bc;opacity:0;transition:opacity .2s}
body.in-studio .st-pane:hover .st-tab-grip::after{opacity:1}@media(hover:none){body.in-studio .st-tab-grip::after{opacity:.65}}
body.in-studio .st-pane.show-head .st-tab-grip{display:none}
/* bilah atas melayang: dipanggil dari tepi atas / tombol kecil, sembunyi sendiri (📌 untuk menyematkan) */
body.in-studio .studio-bar,body.in-studio.st-focus .studio-bar{position:fixed;top:8px;left:50%;right:auto;bottom:auto;transform:translate(-50%,-150%);opacity:0;z-index:70;margin:0;background:#fffffff5;backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px #0f201a2b;padding:5px 8px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:max-content;max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none;transition:transform .22s ease,opacity .2s}
body.in-studio.st-bar-show .studio-bar{transform:translate(-50%,0);opacity:1}
body.in-studio .studio-bar>div:first-child{display:block!important}body.in-studio .studio-bar .eyebrow{display:none}
body.in-studio .studio-bar h1{font-size:16px!important;white-space:nowrap;margin:0}
body.in-studio #st-layouts,body.in-studio.st-focus #st-layouts{display:flex!important;flex-wrap:nowrap;margin:0;visibility:visible!important}
body.in-studio .st-tools{flex-wrap:nowrap}
.st-menu{margin:0;width:34px;height:34px;flex-shrink:0}
.st-pin{margin:0;padding:4px 6px!important;opacity:.45}.st-pin[aria-pressed=true]{opacity:1;background:#eef3ec;border-radius:8px}
.st-reveal,.st-scrim{display:none}
body.in-studio .st-reveal{display:block;position:fixed;top:0;left:50%;width:84px;height:16px;margin:0 0 0 -42px;z-index:69;border:0;background:transparent;padding:0;min-height:0;cursor:pointer;box-shadow:none}
body.in-studio .st-reveal::after{content:"";position:absolute;left:24px;right:24px;top:4px;height:5px;border-radius:9px;background:#8fa598;opacity:.55;transition:opacity .2s}
body.in-studio .st-reveal:hover::after{opacity:1}body.in-studio.st-bar-show .st-reveal{display:none}
/* menu aplikasi = laci dari kiri */
body.in-studio .sidebar{position:fixed!important;z-index:80;left:0;top:0;height:100vh;height:100dvh;width:252px!important;transform:translateX(-104%);transition:transform .22s ease;box-shadow:none;overflow:auto;display:flex;flex-direction:column}
body.in-studio.mobile-menu-open .sidebar{transform:none}
body.in-studio.mobile-menu-open .st-scrim{display:block;position:fixed;inset:0;z-index:79;background:#0f201a33}
/* ponsel: satu panel penuh + tab bawah */
.st-tabs{position:fixed;left:0;right:0;bottom:0;height:52px;z-index:60;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.st-tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--muted);margin:0;padding:3px 0;gap:0;min-width:0;box-shadow:none;border-radius:0}
.st-tabs b{font-size:17px;line-height:1.15}.st-tabs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.st-tabs .active{color:var(--forest);font-weight:700;background:#f1f5f0}
body.in-studio .st-panes.lay-tabs{bottom:52px}
body.in-studio .st-panes.lay-tabs~*{}
/* tombol suara di Ruang belajar: pojok kanan bawah, kecil */
body.in-studio .voice-fab{width:40px;height:40px;font-size:17px;right:10px;bottom:10px;opacity:.75}
body.in-studio .voice-pill{top:auto!important;bottom:10px;left:auto;right:10px;transform:none;max-width:min(340px,calc(100vw - 20px))}
body.in-studio .voice-panel{bottom:60px;right:10px}
@media(max-width:719px){body.in-studio .voice-fab{bottom:62px}body.in-studio .voice-pill{bottom:62px;right:8px}body.in-studio .voice-panel{bottom:110px}}
body.in-studio .cap-recbar{z-index:72}
body.in-studio.mobile-menu-open .sidebar{box-shadow:0 20px 60px #0f201a33}
body.in-studio #reader-shell.in-pane .reading-pane{padding:0}body.in-studio #reader-shell.in-pane{background:#e4e8e2}
body.in-studio #reader-shell.in-pane #reader-content canvas{margin:2px auto 4px;box-shadow:0 1px 6px #1b362d1f}
/* V6.7: panel video ringkas — cari (1 baris) → judul+aksi (1 baris) → video 16:9 penuh lebar → catatan */
body.in-studio .st-pane #md-root{display:flex;flex-direction:column;gap:6px}
body.in-studio .st-pane #md-root .md-yt-form{order:0;margin:0}body.in-studio .st-pane #md-yt-toggle,body.in-studio .st-pane #md-yt-results{order:1}
body.in-studio .st-pane #md-root .md-player{order:2;margin:0}body.in-studio .st-pane #md-root .md-add-more{order:3;margin:0}body.in-studio .st-pane #md-root>*:not(.md-yt-form):not(#md-yt-toggle):not(#md-yt-results):not(.md-player):not(.md-add-more){order:4}
body.in-studio .st-pane .md-head{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0 0 4px}
body.in-studio .st-pane .md-head h2{flex:1 1 auto!important;min-width:0;font-size:13px!important;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.in-studio .st-pane .md-head .action-row{flex-wrap:nowrap;gap:3px;margin:0;flex-shrink:0}
body.in-studio .st-pane .md-head .secondary,body.in-studio .st-pane .md-head .text-button{padding:3px 7px!important;font-size:11px!important;margin:0;min-height:0}
body.in-studio .st-pane .md-player .md-grid{gap:6px}
body.in-studio .st-pane .ink-bar{gap:0!important}body.in-studio .st-pane .ink-bar button{min-width:28px;padding:0 3px}
body.in-studio .st-pane{container-type:size}
body.in-studio .st-pane .md-frame{width:min(100%,calc((100cqh - 96px)*16/9));margin:0 auto;min-width:200px}
/* V6.7: AI membahas tangkapan/rekaman */
.cap-ai{margin:10px 0 4px;padding:12px 14px;background:#f4f8f3;border:1px solid #dfe9de;border-radius:12px;max-height:34vh;overflow:auto;font-size:14px}
.cap-ai .cap-spoken{margin:0 0 8px;font-size:15px;color:var(--ink)}
.cap-points{display:grid;gap:6px;margin:6px 0}.cap-points>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}.cap-points span{color:#4d6158;font-size:13px}
.cap-h{margin:8px 0 2px;font-weight:700;font-size:12px;color:var(--forest);text-transform:uppercase;letter-spacing:.06em}.cap-ai ul{margin:0;padding-left:18px}.cap-quiz{margin:8px 0 0;font-weight:600}
body.in-studio .studio-bar{flex-wrap:wrap!important;overflow:visible!important;justify-content:center;row-gap:6px}
body.in-studio .cap-rec-pop{top:calc(100% + 6px)!important;bottom:auto!important;right:0!important;left:auto!important}
.vp-btn[aria-pressed=true]{background:#d5af72;color:#1d2824}
body.in-studio .st-reveal.hint::after{animation:stHint 1s ease-in-out 3}
@keyframes stHint{0%,100%{opacity:.55;transform:none}50%{opacity:1;transform:scaleX(1.5) translateY(2px);background:var(--forest)}}
body.in-studio .st-pane-head:hover{opacity:1}
body.in-studio:not(.st-bar-show) .studio-bar{pointer-events:none;visibility:hidden;transition:transform .22s ease,opacity .2s,visibility 0s .22s}
body.in-studio.st-bar-show .studio-bar{visibility:visible;transition:transform .22s ease,opacity .2s}
body.in-studio .st-tab-grip{z-index:20}body.in-studio .st-pane-head{z-index:21}
#reader-shell.st-parked{display:none!important}
body.in-studio .st-split-v::before{left:-6px;right:-6px}body.in-studio .st-split-h::before{top:-6px;bottom:-6px}
body.in-studio .st-tab-grip{top:6px;height:16px}body.in-studio .st-tab-grip::after{top:0}
body.in-studio .st-pane{overflow:clip}
.cap-box:has(.cap-ai:not(.hidden)) .cap-img{max-height:26vh}.cap-box:has(.cap-ai:not(.hidden)) .cap-ai{max-height:44vh}
.cap-box{max-height:94vh;display:flex;flex-direction:column}.cap-box .cap-img{flex-shrink:1;min-height:0}

/* ================= V7.1 — sistem desain: kontras tinggi, tombol berbingkai, tombol utama disorot ================= */
:root{--ink:#132f28;--forest:#1f4a3f;--forest-2:#2b6553;--sage:#9cbcab;--cream:#f2f5ee;--paper:#fffefa;--muted:#4c645c;--line:#d2ddd3;--line-2:#b9cbbd;--gold:#d4a24c;--gold-2:#f1d39b;--ring:0 0 0 3px #f1c97a99;--shadow:0 18px 50px #12352b1f;--lift:0 1px 0 #ffffff inset,0 2px 0 #c4d3c7,0 4px 14px #12352b14}
body{background:radial-gradient(1200px 600px at 100% -10%,#e4eee3 0,transparent 60%),var(--cream);color:var(--ink)}
.muted,.book-author,.user-mini small,.note-meta{color:var(--muted)}
h1,h2,h3{color:#102b24}
.eyebrow{color:#3f7a62;letter-spacing:2.4px}
/* logo */
img.mark.logo{background:none;box-shadow:0 8px 22px #0f2c2540;border-radius:16px;padding:0;object-fit:contain;width:64px;height:64px}
img.mark.small.logo{width:42px;height:42px;border-radius:11px;box-shadow:0 4px 12px #0f2c2533}
.boot-logo{display:block;margin:0 auto 18px;border-radius:20px;box-shadow:0 12px 30px #0f2c2540;animation:bootPulse 1.6s ease-in-out infinite}
@keyframes bootPulse{50%{transform:scale(1.04)}}
/* fokus keyboard jelas */
:where(button,a,summary,select,input,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring)!important}
/* tombol utama: hijau tegas + bayangan tebal */
button.primary,.primary{background:linear-gradient(180deg,#2d6a57,#1d4a3e);border:1px solid #123a2f;color:#fff;box-shadow:0 1px 0 #ffffff33 inset,0 2px 0 #0e2d25,0 6px 16px #1f4a3f40;text-shadow:0 1px 0 #0b241d66;transition:transform .12s,box-shadow .12s,filter .12s}
button.primary:hover,.primary:hover{background:linear-gradient(180deg,#347660,#205244);transform:translateY(-1px);box-shadow:0 1px 0 #ffffff33 inset,0 3px 0 #0e2d25,0 10px 22px #1f4a3f4d}
button.primary:active,.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #0e2d25,0 3px 8px #1f4a3f40}
/* tombol kedua: putih berbingkai jelas */
.secondary,button.secondary{background:#fff;border:1.5px solid var(--line-2);color:#173f34;box-shadow:var(--lift);transition:transform .12s,border-color .12s,background .12s}
.secondary:hover,button.secondary:hover{background:#f1f7f1;border-color:#2b6553;transform:translateY(-1px)}
.secondary:active{transform:translateY(1px);box-shadow:none}
/* tombol teks kini berupa kotak kecil yang jelas bisa ditekan */
.text-button{border:1.5px solid #c8d7cb;background:#fbfdfb;color:#1f5a47;border-radius:9px;padding:6px 11px;box-shadow:0 1px 0 #d5e1d7;transition:background .12s,border-color .12s}
.text-button:hover{background:#eaf3ec;border-color:#2b6553;color:#163f34}
.icon-btn{border:1.5px solid transparent;border-radius:10px;transition:background .12s,border-color .12s}
.icon-btn:hover{background:#eef4ee;border-color:var(--line-2)}
.chip,.mode-chip,.quiz-chip{border:1.5px solid #c3d3c6!important;background:#fff;box-shadow:0 1px 0 #d4e0d6;font-weight:700;color:#1d4d40}
.chip:hover,.mode-chip:hover,.quiz-chip:hover{border-color:#2b6553!important;background:#eef6f0}
.chip.active,.mode-chip.active,.quiz-chip.active{background:#1f4a3f!important;color:#fff!important;border-color:#123a2f!important}
.light-btn{background:linear-gradient(180deg,#f6dfb0,#e3bd77);border:1px solid #b88a3c;color:#1b3f35;box-shadow:0 2px 0 #a97a2f,0 6px 14px #b88a3c40}
/* tombol yang paling sering dipakai: emas menyala supaya mata langsung tertuju */
#upload-trigger,#practice-start,.ink-bar [data-ink="ocr"],#voice-talk,#tutor-form button[type="submit"],#dr-form button[type="submit"],#dr-start,.cta{background:linear-gradient(180deg,#f3cf86,#dca44a)!important;color:#1b3a30!important;border:1px solid #a87526!important;text-shadow:none!important;box-shadow:0 1px 0 #fff6 inset,0 2px 0 #9b6a1f,0 8px 20px #d4a24c55!important}
#upload-trigger:hover,#practice-start:hover,.ink-bar [data-ink="ocr"]:hover,#voice-talk:hover,#tutor-form button[type="submit"]:hover,#dr-form button[type="submit"]:hover,#dr-start:hover,.cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.voice-fab{background:linear-gradient(180deg,#2d6a57,#1d4a3e)!important;color:#fff!important;border:2px solid #f1d39b!important;box-shadow:0 0 0 4px #f1d39b40,0 10px 26px #12352b55!important}
.voice-fab[data-state="listen"],.voice-fab[data-state="speak"]{animation:fabRing 1.4s ease-out infinite}
@keyframes fabRing{0%{box-shadow:0 0 0 0 #f1c97acc,0 10px 26px #12352b55}100%{box-shadow:0 0 0 16px #f1c97a00,0 10px 26px #12352b55}}
.ink-fab{background:linear-gradient(180deg,#f3cf86,#dca44a)!important;color:#1b3a30!important;border:1px solid #a87526!important;box-shadow:0 2px 0 #9b6a1f,0 10px 24px #d4a24c66!important}
/* menu samping: aktif = blok hijau dengan garis emas */
.sidebar{background:#fff;border-right:1px solid var(--line)}
.nav{color:#36574c;border:1.5px solid transparent;position:relative}
.nav:hover{background:#eef5ef;border-color:#d3e0d5;color:#173f34}
.nav.active{background:linear-gradient(180deg,#2b6553,#1f4a3f);color:#fff;border-color:#163f34;box-shadow:0 6px 16px #1f4a3f33}
.nav.active::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:4px;border-radius:4px;background:#f1c97a}
.side-label{color:#5f786f}
.topbar{background:#fffffff2;border-bottom:1px solid var(--line);box-shadow:0 2px 14px #12352b0a}
/* kartu & panel: tepi lebih jelas */
.panel,.research-card,.stat,.book,.ref-entry,.study-card,.challenge-wrap,.note-card,.empty,.search-results{border-color:var(--line)!important}
.stat,.book,.panel,.research-card{box-shadow:0 1px 0 #fff inset,0 6px 22px #12352b0d}
.book:hover{border-color:#9cbcab!important}
input,textarea,select{border:1.5px solid #c6d4c9;color:var(--ink)}
input:hover,textarea:hover,select:hover{border-color:#9cbcab}
input:focus,textarea:focus,select:focus{border-color:#2b6553;box-shadow:0 0 0 3px #2b655333}
input[type=checkbox],input[type=radio]{accent-color:#1f4a3f;width:17px;height:17px}
.hero{background:linear-gradient(135deg,#1f4a3f,#2b6553 60%,#21503f);box-shadow:0 18px 40px #12352b33}
/* alat buku tulis: tombol berbingkai, yang aktif hijau penuh */
.ink-bar{border:1.5px solid var(--line)!important;box-shadow:0 8px 26px #12352b14!important}
.ink-bar button:not(.swatch):not(.primary){border:1.5px solid transparent;border-radius:9px;color:#173f34}
.ink-bar button:not(.swatch):not(.primary):hover{background:#eef5ef;border-color:#c3d3c6}
.ink-bar button.active:not(.swatch){background:#1f4a3f!important;color:#fff!important;border-color:#123a2f!important}
.ink-bar summary{border:1.5px solid #c3d3c6;border-radius:9px;background:#fff}
.ink-pen-only{border:1.5px solid #c3d3c6;border-radius:9px;padding:3px 8px;background:#fff;cursor:pointer}
.ink-pen-only:has(input:checked){background:#e6f1e9;border-color:#2b6553}
.ink-menu{border:1.5px solid var(--line)!important;box-shadow:0 18px 44px #12352b33!important}
.ink-menu>button{border:1.5px solid transparent;border-radius:9px;text-align:left}
.ink-menu>button:hover{background:#eef5ef;border-color:#c3d3c6}
/* panel suara */
.voice-panel{border:1.5px solid var(--line)!important;box-shadow:0 24px 60px #12352b38!important}
.voice-form textarea{flex:1;min-width:0;resize:none;max-height:160px;line-height:1.45;padding:10px 12px;border-radius:12px}
.vl.vl-ai{display:block}.vl.vl-ai>b{display:block;margin-bottom:4px}
.voice-pill{border:1.5px solid #f1d39b!important}

/* ================= V7.1 — markdown setara dokumen ================= */
.md{line-height:1.7;color:#16302a;overflow-wrap:anywhere;font-size:14px}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:.45em 0 .8em}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font-family:'DM Sans',sans-serif;color:#0f2a23;line-height:1.3;margin:1.1em 0 .45em;font-weight:800}
.md h1{font-size:1.55em;border-bottom:2px solid #d6e2d8;padding-bottom:.2em}.md h2{font-size:1.32em;border-bottom:1px solid #e0e8e1;padding-bottom:.15em}.md h3{font-size:1.15em}.md h4{font-size:1.04em}.md h5,.md h6{font-size:.95em;color:#3c5a50}
.md ul,.md ol{padding-left:1.6em;margin:.35em 0 .8em}.md li{margin:.22em 0}.md li>ul,.md li>ol{margin:.15em 0}
.md ol{list-style:decimal}.md ol ol{list-style:lower-alpha}.md ol ol ol{list-style:lower-roman}
.md ul{list-style:disc}.md ul ul{list-style:circle}.md ul ul ul{list-style:square}
.md li::marker{color:#2b6553;font-weight:700}
.md .task-list-item{list-style:none;margin-left:-1.4em}.md .task-list-item input{margin:0 .45em 0 0;vertical-align:-2px;width:15px;height:15px}
.md strong{color:#0f2a23;font-weight:800}.md em{color:#1c3d34}
.md mark{background:linear-gradient(180deg,transparent 35%,#ffe28a 35%);padding:0 .1em;color:inherit}
.md ins{text-decoration:underline 2px #2b6553;text-underline-offset:2px}.md del,.md s{color:#7a8a85}
.md a{color:#1d6b8a;text-decoration:underline;text-underline-offset:2px}
.md blockquote{margin:.8em 0;padding:.5em 1em;border-left:4px solid #9cbcab;background:#f3f8f3;border-radius:0 10px 10px 0;color:#2c4a41}
.md hr{border:0;border-top:2px dashed #d0dcd2;margin:1.2em 0}
.md code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#eef3ee;border:1px solid #dbe5dc;border-radius:6px;padding:.08em .38em}
.md pre.md-code{position:relative;margin:.8em 0;background:#f7f9fb;border:1.5px solid #d6dee6;border-radius:12px;overflow:hidden}
.md pre.md-code code{display:block;padding:12px 14px;overflow:auto;background:none;border:0;font-size:12.5px;line-height:1.55;white-space:pre}
.md .md-code-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 4px 12px;background:#eaf0f5;border-bottom:1px solid #d6dee6;font:700 11px 'DM Sans',sans-serif;color:#4a5d6b;text-transform:uppercase;letter-spacing:.6px}
.md .md-copy{border:1.5px solid #c2ceda;background:#fff;border-radius:7px;padding:2px 9px;font-size:11px;font-weight:700;color:#28465a;text-transform:none;letter-spacing:0}
.md .md-table{overflow:auto;margin:.8em 0;border:1.5px solid #cfdad1;border-radius:10px;max-width:100%}
.md table{border-collapse:collapse;width:100%;font-size:.95em;min-width:max-content}
.md th,.md td{border:1px solid #dbe4dc;padding:7px 11px;text-align:left;vertical-align:top}
.md th{background:#1f4a3f;color:#fff;font-weight:700;border-color:#1f4a3f}
.md tr:nth-child(even) td{background:#f5f9f5}
.md .math-display{display:block;overflow-x:auto;overflow-y:hidden;margin:.7em 0;padding:.5em .2em;text-align:center}
.md .katex{font-size:1.08em}.md .katex-display{margin:0}
.md .math-err{color:#a8403e}
.md dl{margin:.6em 0}.md dt{font-weight:800;color:#0f2a23}.md dd{margin:0 0 .5em 1.2em;color:#2c4a41}
.md sup,.md sub{font-size:.75em}
.md .footnotes{margin-top:1.2em;font-size:.88em;color:#4c645c}.md .footnotes-sep{border-top:1px solid #d0dcd2}.md .footnote-ref a{text-decoration:none;font-weight:700}
.md .md-box{margin:.85em 0;border:1.5px solid;border-radius:12px;padding:.55em 1em .65em;background:#f6faf6}
.md .md-box-title{font-weight:800;font-size:.86em;letter-spacing:.3px;margin-bottom:.25em;text-transform:uppercase}
.md .md-info,.md .md-note{border-color:#9cc3d9;background:#f2f8fc}.md .md-info .md-box-title,.md .md-note .md-box-title{color:#1d6b8a}
.md .md-tip,.md .md-contoh,.md .md-ringkasan{border-color:#9cc9ad;background:#f1f9f3}.md .md-tip .md-box-title,.md .md-contoh .md-box-title,.md .md-ringkasan .md-box-title{color:#21704b}
.md .md-warning{border-color:#e6c37a;background:#fffaf0}.md .md-warning .md-box-title{color:#9a6a12}
.md .md-danger{border-color:#e3a3a0;background:#fff5f4}.md .md-danger .md-box-title{color:#a8403e}
.md .md-rumus{border-color:#b9a8e0;background:#f8f6ff}.md .md-rumus .md-box-title{color:#5a43a3}
.md .md-mermaid{margin:.8em 0;padding:10px;border:1.5px solid #d8e2da;border-radius:12px;background:#fff;overflow:auto;text-align:center}.md .md-mermaid pre{text-align:left;font-size:12px;color:#4c645c}
.md img{max-width:100%;border-radius:8px}
.voice-log .md{font-size:13.5px}
@media print{.md pre.md-code .md-code-head{display:none}}

.md .task-list-item label,.md .task-list-item{display:list-item;font-weight:400;font-size:inherit;line-height:inherit}.md .task-list-item label{display:inline}.md .task-list-item input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;display:inline-block;width:15px;height:15px;padding:0;margin:0 .5em 0 0;border:0;box-shadow:none;vertical-align:-2px}
/* V7.1 audit: di pembaca layar penuh, tombol melayang naik supaya tidak menutupi bilah halaman/zoom & "Sembunyikan alat" */
body:has(#reader-shell:not(.hidden):not(.in-pane)) .ink-fab{bottom:84px!important}
body:has(#reader-shell:not(.hidden):not(.in-pane)) .voice-fab{bottom:146px!important}
@media(max-width:730px){
 .reader-top{flex-wrap:wrap}
 .reader-top .reader-meta{order:-1;flex:1 1 100%;text-align:left;padding:2px 4px 0}
 .reader-top .reader-meta strong{white-space:normal;font-size:14px}
 .reader-top .reader-meta small{display:inline}
}
/* V7.1 audit: notifikasi pindah ke atas-tengah supaya tidak menutupi tombol melayang (✎ Tulis, 🎙) */
#toast{top:18px!important;bottom:auto!important;right:auto!important;left:50%!important;transform:translateX(-50%);max-width:min(520px,calc(100vw - 24px))!important;border:1.5px solid #ffffff33;box-shadow:0 14px 40px #0f2c2559!important;z-index:200!important;text-align:center}
/* V7.1: panel ngobrol lebih lega untuk jawaban panjang bermarkdown (rumus, tabel) */
.voice-panel{width:min(560px,calc(100vw - 24px))!important;max-height:min(820px,calc(100vh - 150px))!important;height:min(680px,calc(100vh - 150px))}
.voice-log{gap:10px;padding:12px 14px}
.vl.vl-ai{max-width:100%!important;width:100%;background:#fbfcfa!important;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px}
@media(max-width:730px){.voice-panel{left:8px!important;right:8px!important;width:auto!important;top:72px;bottom:118px!important;height:auto;max-height:none!important}}
/* V7.3 — Akun saya, Panduan, akun percobaan */
.guide-tip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff7e6;border:1.5px solid var(--gold);border-radius:14px;padding:10px 14px;margin:0 0 18px}
.guide-tip .chip-row{margin:0}
.acc-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.acc-head>div:nth-child(2){flex:1;min-width:180px}.acc-head h2{margin:0}.acc-head p{margin:2px 0 0;word-break:break-word}
.acc-avatar{width:56px;height:56px;border-radius:16px;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700;flex-shrink:0}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.acc-row h3{margin:0}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.acc-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;border:1.5px solid var(--line-2,var(--line));border-radius:12px;background:var(--paper);cursor:pointer;color:var(--ink)}
.acc-stat:hover{border-color:var(--forest)}.acc-stat strong{font-size:22px}.acc-stat span{font-size:13px;color:var(--muted)}
.acc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}.acc-two .panel{margin:0}.acc-two label{display:block;margin:8px 0}.acc-two input{width:100%}
.acc-cred{display:grid;gap:8px;margin:12px 0}.acc-cred div{border:1.5px solid var(--line-2,var(--line));border-radius:10px;padding:8px 12px}.acc-cred small{display:block;color:var(--muted)}.acc-cred code{font-size:15px;word-break:break-all;user-select:all}
.guide-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.guide-toc{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 40px);overflow:auto;margin:0}
.guide-toc a{padding:6px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}.guide-toc a:hover{background:var(--cream)}
.guide-body{margin:0;min-width:0}.guide-body h2{scroll-margin-top:16px;margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}.guide-body h2:first-child{margin-top:0;border-top:0;padding-top:0}
.pd-go{margin:4px 0}
@media (max-width:820px){.guide-wrap{grid-template-columns:1fr}.guide-toc{position:static;flex-direction:row;flex-wrap:wrap;max-height:none}.guide-toc a{border:1.5px solid var(--line);font-size:13px}}
/* V7.3 — bilah samping: menu lebih ringkas & bisa digulir, profil + tombol keluar selalu terlihat di bawah */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.sidebar .brand{padding-bottom:18px}
.sidebar nav{gap:2px}
.sidebar .nav{padding:8px 14px;gap:11px}
.sidebar .side-label{margin:10px 11px 6px}
.sidebar-bottom{position:sticky;bottom:-15px;background:#fff;z-index:2;margin-top:auto;padding-bottom:12px}
.sidebar-bottom .user-mini{min-width:0;flex:1}.sidebar-bottom .user-mini strong,.sidebar-bottom .user-mini small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.acc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.acc-stat{padding:10px 12px}.acc-stat strong{font-size:19px}.acc-head .secondary{margin-left:auto}}
/* V7.3 — PDF hasil Tanya AI (dirender di luar layar, lalu dijadikan A4) */
#pdf-stage{position:fixed;left:-12000px;top:0;width:710px;pointer-events:none;z-index:-1}
.pdf-doc{width:710px;box-sizing:border-box;background:#fff;color:#1d2b27;font:14.5px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.pdf-doc section{padding:4px 6px 10px}
.pdf-cover .pdf-band{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#1f4a3f,#2b6553);color:#fff;border-radius:16px;padding:16px 20px}
.pdf-band small{display:block;font-size:10px;letter-spacing:2px;opacity:.8}.pdf-band b{font-size:18px;font-family:Georgia,"Times New Roman",serif}
.pdf-band img{background:#fff;border-radius:12px;padding:4px}
.pdf-cover h1{font-family:Georgia,"Times New Roman",serif;font-size:30px;line-height:1.2;margin:26px 0 6px;color:#132f28}
.pdf-meta{color:#4c645c;margin:0 0 18px;font-size:13px}
.pdf-box{border:1.5px solid #d2ddd3;border-radius:14px;padding:12px 18px;margin:14px 0;background:#fbfcf9}
.pdf-box h3{margin:0 0 8px;font-size:16px;color:#1f4a3f}
.pdf-sum{background:#fff7e6;border-color:#d4a24c}.pdf-sum p{margin:.3em 0}
.pdf-kp{margin:0;padding-left:0;list-style:none;counter-reset:kp}.pdf-kp li{counter-increment:kp;position:relative;padding:6px 0 6px 38px;border-bottom:1px dashed #d2ddd3}.pdf-kp li:last-child{border:0}
.pdf-kp li::before{content:counter(kp);position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:8px;background:#1f4a3f;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.pdf-toc ol{margin:0;padding-left:22px}.pdf-toc li{margin:3px 0}
.pdf-q{display:flex;gap:12px;align-items:flex-start;background:#eef5f0;border-left:5px solid #2b6553;border-radius:12px;padding:12px 16px;margin:4px 0 14px}
.pdf-qn{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:#2b6553;color:#fff;display:grid;place-items:center;font-weight:800}
.pdf-q small{display:block;font-size:10px;letter-spacing:1.6px;color:#2b6553;font-weight:700}.pdf-q p{margin:2px 0 0;font-weight:600;font-size:15.5px}
.pdf-a{font-size:14.5px}.pdf-a h1,.pdf-a h2,.pdf-a h3{color:#1f4a3f;font-family:Georgia,"Times New Roman",serif}
.pdf-a table{border-collapse:collapse;width:100%}.pdf-a th,.pdf-a td{border:1px solid #c9d6cc;padding:6px 8px;vertical-align:top}.pdf-a th{background:#1f4a3f!important;color:#fff!important}
.pdf-a pre{white-space:pre-wrap;word-break:break-word}.pdf-a .md-copy,.pdf-doc button{display:none!important}
.pdf-cite{color:#b07a1c;font-weight:700;font-size:.72em;margin-left:1px}
.pdf-src{margin-top:16px;border-top:1px solid #d2ddd3;padding-top:8px;font-size:12.5px}.pdf-src h4{margin:0 0 4px;font-size:12px;letter-spacing:1.5px;color:#4c645c;text-transform:uppercase}
.pdf-src ol{margin:0;padding-left:22px}.pdf-src li{margin:2px 0;color:#4c645c}.pdf-src li.used{color:#1d2b27}.pdf-src li span{color:#71847e;word-break:break-all}
.pdf-terms{width:100%;border-collapse:collapse}.pdf-terms th{width:30%;text-align:left;vertical-align:top;padding:7px 10px 7px 0;color:#1f4a3f}.pdf-terms td{padding:7px 0;border-bottom:1px dashed #d2ddd3}.pdf-terms tr:last-child td{border:0}.pdf-terms p{margin:0}
.pdf-quiz li{margin:8px 0}.pdf-line{border-bottom:1px solid #c9d6cc;height:26px;margin-top:4px}
.pdf-key{background:#f4f7fb;border-color:#c5d3e4}.pdf-key li{margin:4px 0}.pdf-next{background:#eef5f0}
.pdf-form fieldset{border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 10px}.pdf-form label{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.pdf-note{min-height:1.4em;color:var(--forest);font-weight:600}
.tutor-send-row{flex-wrap:wrap;gap:8px}
body.pdf-print{background:#fff}body.pdf-print .pdf-doc{width:auto;margin:0 auto}
@media print{.pdf-turn,.pdf-tail,.pdf-cont{break-before:page}}
/* ===== V7.5 — maskot "Bro" & ikon status AI ===== */
.mascot{display:inline-block;line-height:0;flex-shrink:0}.mascot .m-svg{width:100%;height:100%;overflow:visible}
.m-ln{fill:none;stroke:#3a2d2b;stroke-linecap:round;stroke-linejoin:round}
.mascot .m-head{transform-origin:60px 92px;animation:m-breathe 3.6s ease-in-out infinite}
.mascot .m-tail{transform-origin:100px 112px;animation:m-tail 2.8s ease-in-out infinite}
.mascot .m-tassel{transform-origin:88px 27px;animation:m-tassel 3.2s ease-in-out infinite}
.mascot .m-ear-l{transform-origin:33px 44px}.mascot .m-ear-r{transform-origin:87px 44px}
.mascot .m-blink{transform-box:fill-box;transform-origin:center}
.mascot svg.m-blinking .m-blink{animation:m-blink .17s ease-in-out}
.mascot svg.m-pop-in .m-eyes,.mascot svg.m-pop-in .m-mouth{animation:m-pop .32s cubic-bezier(.3,1.6,.5,1)}
.mascot .m-eyes,.mascot .m-mouth{transform-box:fill-box;transform-origin:center}
.mascot .m-twinkle{transform-box:fill-box;transform-origin:center;animation:m-twinkle 1.6s ease-in-out infinite}
.mascot .m-float{animation:m-float 2.2s ease-in-out infinite}.mascot .m-bob{animation:m-float 1.8s ease-in-out infinite}
.mascot .m-pop{transform-box:fill-box;transform-origin:center bottom;animation:m-pop .5s cubic-bezier(.3,1.6,.5,1)}
.mascot .m-dots circle{animation:m-dot 1.2s ease-in-out infinite}.mascot .m-dots circle:nth-child(2){animation-delay:.2s}.mascot .m-dots circle:nth-child(3){animation-delay:.4s}
.mascot .m-zzz text{animation:m-z 2.4s ease-in-out infinite}.mascot .m-zzz text:nth-child(2){animation-delay:.4s}.mascot .m-zzz text:nth-child(3){animation-delay:.8s}
.mascot .m-talk{transform-box:fill-box;transform-origin:center top;animation:m-talk .26s ease-in-out infinite alternate}
.mascot .m-scan{animation:m-scan 1.6s ease-in-out infinite}
.mascot[data-state=listen] .m-ear{animation:m-ear .9s ease-in-out infinite alternate}
.mascot[data-state=listen] .m-head{animation:m-tilt 2.4s ease-in-out infinite}
.mascot[data-state=think] .m-head{animation:m-think 2.2s ease-in-out infinite}
.mascot[data-state=speak] .m-head{animation:m-nod .9s ease-in-out infinite}
.mascot[data-state=focus] .m-head{animation:m-perk .5s cubic-bezier(.3,1.6,.5,1)}
.mascot[data-expr=mengantuk] .m-head{animation:m-sleepy 4s ease-in-out infinite}
.mascot[data-expr=tertawa] .m-head,.mascot[data-expr=semangat] .m-head{animation:m-hop .8s ease-in-out 3}
@keyframes m-breathe{50%{transform:translateY(1.4px) scale(1.006)}}
@keyframes m-tail{50%{transform:rotate(-11deg)}}
@keyframes m-tassel{50%{transform:rotate(7deg)}}
@keyframes m-blink{50%{transform:scaleY(.08)}}
@keyframes m-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes m-twinkle{50%{transform:scale(.55) rotate(25deg);opacity:.5}}
@keyframes m-float{50%{transform:translateY(-4px)}}
@keyframes m-dot{50%{transform:translateY(-3px);opacity:.4}}
@keyframes m-z{0%{opacity:0;transform:translate(0,4px)}40%{opacity:1}100%{opacity:0;transform:translate(4px,-6px)}}
@keyframes m-talk{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
@keyframes m-scan{0%,100%{transform:translateX(-2.6px)}50%{transform:translateX(3.6px)}}
@keyframes m-ear{to{transform:rotate(-6deg) translateY(-1.5px)}}
@keyframes m-tilt{50%{transform:rotate(-4deg)}}
@keyframes m-think{50%{transform:rotate(3deg) translateY(-1px)}}
@keyframes m-nod{50%{transform:translateY(1.6px) rotate(-1deg)}}
@keyframes m-perk{0%{transform:translateY(3px) scale(.96)}100%{transform:none}}
@keyframes m-sleepy{50%{transform:rotate(5deg) translateY(2px)}}
@keyframes m-hop{50%{transform:translateY(-4px)}}
.vp-mascot{width:66px;height:66px;margin:-6px 2px -4px -4px}
.vp-mini{width:34px;height:34px;margin:-4px 0}
.guide-mascot{position:absolute;right:0;top:0;width:96px;height:96px}#guide-view .page-head{position:relative;padding-right:110px}
.voice-fab .mascot{width:52px;height:52px;margin:-4px}
.voice-fab{position:fixed;overflow:visible}
.fab-badge{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--forest,#1f4a3f);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.fab-badge .st-svg{width:15px;height:15px}
/* ikon status */
.ai-st{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--forest,#1f4a3f);background:transparent;flex-shrink:0;transition:color .25s,background .25s}
.ai-st .st-svg{width:22px;height:22px;overflow:visible}.ai-st .st-g{display:none}
.ai-st[data-state=off] .st-idle,.ai-st[data-state=wake] .st-idle,.ai-st[data-state=idle] .st-idle,.ai-st[data-state=listen] .st-listen,.ai-st[data-state=focus] .st-listen,.ai-st[data-state=look] .st-look,.ai-st[data-state=think] .st-think,.ai-st[data-state=speak] .st-speak{display:inline}
.ai-st[data-state=listen],.ai-st[data-state=focus]{color:#1f7a55;background:#e3f4ea}
.ai-st[data-state=look]{color:#2a64b8;background:#e6effc}
.ai-st[data-state=think]{color:#8a5bc7;background:#f0e9fb}
.ai-st[data-state=speak]{color:#b8742a;background:#fbf0e0}
.st-ring{transform-box:fill-box;transform-origin:center;animation:st-ring 1.6s ease-out infinite}.st-ring.r2{animation-delay:.8s}
.st-scan{animation:st-scan 1.5s ease-in-out infinite}
.st-think circle{transform-box:view-box;transform-origin:16px 16px}.st-think{transform-origin:16px 16px;animation:st-spin 1.8s linear infinite}
.st-think .d1{animation:st-dot 1.8s ease-in-out infinite}.st-think .d2{animation:st-dot 1.8s ease-in-out .3s infinite}.st-think .d3{animation:st-dot 1.8s ease-in-out .6s infinite}
.st-speak rect{transform-box:fill-box;transform-origin:center;animation:st-bar .9s ease-in-out infinite}.st-speak .b2{animation-delay:.15s}.st-speak .b3{animation-delay:.3s}.st-speak .b4{animation-delay:.45s}
@keyframes st-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2);opacity:0}}
@keyframes st-scan{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-dot{50%{opacity:.35}}
@keyframes st-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.voice-head .ai-st{width:24px;height:24px;margin-right:6px;vertical-align:middle}.voice-head .ai-st .st-svg{width:18px;height:18px}
.voice-head>div{display:flex;flex-wrap:wrap;align-items:center;column-gap:0}.voice-head>div strong{flex-basis:100%}
.voice-pill .ai-st{width:26px;height:26px}
.focus-cue{animation:focus-cue .6s ease-out}
@keyframes focus-cue{0%{box-shadow:0 0 0 0 #2fa36b88}100%{box-shadow:0 0 0 14px #2fa36b00}}
@media (prefers-reduced-motion:reduce){.mascot *,.ai-st *{animation:none!important}}
.trial-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:#fbf0e0;color:#8a5a1c;font-size:.72rem;font-weight:700;vertical-align:middle}
/* ===== V7.5 sampul pratinjau ===== */
.book-cover[data-cover]{height:178px;overflow:hidden;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:14px 14px 13px;gap:4px;
 background:linear-gradient(150deg,hsl(var(--cv-h,150) 32% 38%),hsl(calc(var(--cv-h,150) + 28) 38% 24%));box-shadow:inset 7px 0 0 #00000022,inset 9px 0 0 #ffffff1c}
.book-cover[data-cover]::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
 background-image:radial-gradient(circle at 80% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 80% 18%,transparent 0 30px,#fff 31px 32px,transparent 33px 46px,#fff 47px 48px,transparent 49px);background-size:auto}
.book-cover[style*="--cv-p:1"]::before{background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 12px)}
.book-cover[style*="--cv-p:2"]::before{background-image:radial-gradient(#fff 1.2px,transparent 1.6px);background-size:14px 14px}
.book-cover[style*="--cv-p:3"]::before{background-image:linear-gradient(#fff 1px,transparent 1px);background-size:100% 16px}
.book-cover[data-cover] .cv-letter{position:absolute;right:12px;top:6px;font-size:54px;opacity:.28;line-height:1}
.book-cover[data-cover] .cv-title{position:relative;font:700 15px/1.25 Georgia,'Times New Roman',serif;color:#fffdf6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px #0003;max-width:92%}
.book-cover[data-cover] small{z-index:2;background:#0000002e;padding:3px 7px;border-radius:6px;top:10px;left:10px}
.book-cover .cv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;animation:cv-in .45s ease both;z-index:1}
.book-cover.has-img{background:#f1efe8;box-shadow:inset 0 0 0 1px #0000000f}
.book-cover.has-img::before,.book-cover.has-img .cv-letter,.book-cover.has-img .cv-title{display:none}
.book-cover.has-img small{background:#1b2f29cc;color:#fff}
@keyframes cv-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (max-width:700px){.book-cover[data-cover]{height:150px}.book-cover[data-cover] .cv-title{font-size:13.5px}}
/* V7.5 tombol Segarkan */
.top-refresh{display:inline-flex;align-items:center;gap:6px}
.top-refresh.spinning svg{animation:spin-r .8s linear infinite}
@keyframes spin-r{to{transform:rotate(360deg)}}
/* ===== V7.5 buku catatan ala GoodNotes ===== */
.ink-mode{background:#eef3ef;border-radius:11px;padding:3px;gap:2px}
.ink-mode button{border-radius:8px!important;padding:5px 10px!important;font-weight:700;font-size:12.5px;white-space:nowrap}
.ink-mode button.active{background:#1f4a3f!important;color:#fff!important;box-shadow:0 2px 6px #1f4a3f40}
.ink-pages{min-width:46px;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:8px}
.ink-check{display:flex!important;align-items:center;gap:8px;font-size:13px;padding:5px 2px;cursor:pointer;white-space:normal}
.ink-check input{width:16px;height:16px;accent-color:#2f7a5c}
.ink-opts>summary{min-width:26px}
.ink-aicard.active{background:#e9f3ee;border-color:#2f7a5c;color:#1f4a3f}
.ink-ocr .section-head{display:flex;align-items:center;gap:10px}
.ink-ocr-x{margin-left:auto;width:30px;height:30px;border-radius:8px}
.ink-it textarea.typed{font-family:'DM Sans','Inter','Segoe UI',system-ui,sans-serif!important;line-height:1.2}
.ink-editor[data-mode=type] .ink-live{cursor:text}
.ink-editor[data-mode=lasso] .ink-live{cursor:crosshair}
.ink-editor[data-mode=laser] .ink-live{cursor:pointer}
.ink-lasso{position:absolute;left:0;top:0;width:1000px;height:1414px;transform-origin:0 0;pointer-events:none}
.ink-lbox{position:absolute;pointer-events:auto;touch-action:none;cursor:move;border:2px dashed #2f7a5c;border-radius:6px;background:#2f7a5c0d}
.ink-lbox .ink-it-bar{align-items:center}
.ink-lbox .ink-it-bar button{min-width:32px;height:32px;border-radius:8px;border:0;background:transparent;font-size:15px;cursor:pointer}
.ink-lbox .ink-it-bar button:hover{background:#eef3ef}
.ink-lcount{font-size:12px;font-weight:700;color:#4b6159;padding:0 8px}
.ink-ov{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-height:62vh;overflow:auto;padding:4px}
.ink-ov-p{margin:0;border:1px solid #dfe7e1;border-radius:12px;padding:8px;background:#fff}
.ink-ov-p.cur{border-color:#2f7a5c;box-shadow:0 0 0 3px #2f7a5c26}
.ink-ov-img{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.ink-ov-img canvas{width:100%;height:auto;border-radius:6px;box-shadow:0 2px 8px #0001;display:block}
.ink-ov-p figcaption{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:4px}
.ink-ov-p figcaption span{display:flex;gap:2px}
.ink-ov-p figcaption button{width:26px;height:26px;border-radius:7px;border:1px solid #e1e8e3;background:#f8faf8;cursor:pointer;font-size:12px;padding:0}
.ink-ov-p figcaption button:disabled{opacity:.35;cursor:default}

/* ===== V7.5 bilah samping: ikon berwarna per fitur, dikelompokkan ===== */
.nav-group{margin:16px 14px 5px;font:800 10.5px/1 'DM Sans',sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:#6a7d76}
nav .nav-group:first-child{margin-top:2px}
.nav{--nh:#2f7a5c;padding:6px 12px!important;gap:10px!important;color:#24443a;border-radius:11px}
.nav[data-view=studio]{--nh:#3768a8}.nav[data-view=catalog]{--nh:#9a6431}.nav[data-view=web]{--nh:#1f8796}.nav[data-view=media]{--nh:#c4512f}
.nav[data-view=notes]{--nh:#b07f12}.nav[data-view=notebook]{--nh:#6c55c2}.nav[data-view=research]{--nh:#c2407a}.nav[data-view=concepts]{--nh:#3f72d6}
.nav[data-view=drill]{--nh:#d0701e}.nav[data-view=practice]{--nh:#2f9467}.nav[data-view=modules]{--nh:#7b6b3a}.nav[data-view=progress]{--nh:#c94848}
.nav[data-view=account]{--nh:#55687a}.nav[data-view=members]{--nh:#7a52b3}
.nv-ic{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;font-style:normal;font-size:14.5px;line-height:1;flex-shrink:0;
 background:color-mix(in srgb,var(--nh) 13%,#fff);color:var(--nh);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nh) 22%,transparent);transition:background .18s,color .18s,transform .18s}
.nav:hover .nv-ic{background:color-mix(in srgb,var(--nh) 22%,#fff);transform:scale(1.06)}
.nav.active .nv-ic{background:#ffffff2b;color:#fff;box-shadow:inset 0 0 0 1px #ffffff40}
.nav span{font-size:13.5px!important;font-weight:700;letter-spacing:.1px}
.nav:focus-visible{outline:3px solid #f1c97a;outline-offset:2px}
/* ===== V7.5 latar kertas jurnal (halus, tidak mengganggu fokus) ===== */
html[data-bg=lines] body{background-image:repeating-linear-gradient(180deg,transparent 0 31px,#7c9cb51a 31px 32px);background-attachment:fixed}
html[data-bg=dots] body{background-image:radial-gradient(circle,#6f8a8a2e 1.1px,transparent 1.5px);background-size:22px 22px;background-attachment:fixed}
html[data-bg=linen] body{background-color:#f5f1e6;background-image:repeating-linear-gradient(0deg,#8a74500a 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#8a74500a 0 1px,transparent 1px 4px),radial-gradient(ellipse at 20% 0%,#fffaf0 0,transparent 60%);background-attachment:fixed}
/* pengaturan Tampilan */
.look-label{margin:14px 0 8px;font-weight:800;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:#5d7068}
.look-theme{display:flex;flex-wrap:wrap;gap:8px}
.look-opt{border:1.5px solid #d6e0d9;background:#fff;border-radius:11px;padding:9px 14px;font-weight:700;cursor:pointer;color:#24443a}
.look-opt.on{border-color:#1f4a3f;background:#1f4a3f;color:#fff}
.bg-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bg-tile{display:flex;flex-direction:column;gap:4px;text-align:left;border:1.5px solid #d6e0d9;background:#fff;border-radius:13px;padding:8px 8px 10px;cursor:pointer;color:#24443a}
.bg-tile small{color:#6a7d76;font-size:11.5px;line-height:1.3}
.bg-tile.on{border-color:#1f4a3f;box-shadow:0 0 0 3px #1f4a3f22}
.bg-sw{height:62px;border-radius:9px;border:1px solid #0000000f;background-color:#f7f8f2}
.bg-sw.bg-lines{background-image:repeating-linear-gradient(180deg,transparent 0 11px,#7c9cb540 11px 12px)}
.bg-sw.bg-dots{background-image:radial-gradient(circle,#6f8a8a66 1px,transparent 1.4px);background-size:10px 10px}
.bg-sw.bg-linen{background-color:#f5f1e6;background-image:repeating-linear-gradient(0deg,#8a745018 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#8a745018 0 1px,transparent 1px 4px)}
.top-theme{width:36px;padding:0!important;display:inline-grid;place-items:center}
.top-theme .tt-moon{display:none}
/* ===== V7.5 kontras & keterbacaan ===== */
.muted{color:#5e716a}
.eyebrow{color:#2f6a55}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e2b36f;outline-offset:2px}
@media (min-width:701px){.voice-fab{bottom:92px}}

/* ===================== Cognitify V8 ===================== */
:root{--cg:#1f5a3e;--cg2:#2f8a55;--cg-gold:#e3a63a;--ease-b:cubic-bezier(.34,1.56,.64,1);--ease-s:cubic-bezier(.22,1,.36,1)}
/* merek */
.brand-word{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:700;margin:6px 0 0;letter-spacing:.3px;background:linear-gradient(100deg,#fff 0%,#e9f6d8 40%,#f3d38e 50%,#e9f6d8 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cg-sheen 6s ease-in-out infinite}
.sidebar .brand strong{font-family:'Playfair Display',Georgia,serif;font-size:21px;letter-spacing:.2px}
.sidebar .brand small{letter-spacing:1.6px;font-size:9px}
.login-promo{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-weight:700;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:7px 14px;opacity:.92}
.login-promo:hover{opacity:1;transform:translateY(-1px)}

/* ---------- tombol melayang: satu kolom vertikal, tidak menumpuk ---------- */
.fab-stack{position:fixed;right:14px;bottom:14px;z-index:46;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.fab-stack>*{pointer-events:auto;position:static!important;right:auto!important;bottom:auto!important;margin:0!important}
.fab-stack .voice-fab{width:78px!important;height:78px!important;border-radius:26px!important;display:grid;place-items:center;padding:0;overflow:visible;transition:transform .35s var(--ease-b),box-shadow .3s}
.fab-stack .voice-fab .mascot{width:84px;height:84px;margin:-6px 0 0}
.fab-stack .voice-fab:hover{transform:translateY(-3px) scale(1.04)}
.fab-stack .voice-fab:active{transform:scale(.94)}
.fab-status{width:34px!important;height:34px!important;border-radius:12px!important;background:#fff!important;box-shadow:0 4px 14px #12352b26,inset 0 0 0 1.5px #d9e6dc;transition:transform .3s var(--ease-b)}
.fab-status[data-state=off],.fab-status[data-state=idle]{opacity:.85}
.fab-status:not([data-state=off]):not([data-state=idle]):not([data-state=wake]){animation:cg-pulse 1.6s ease-in-out infinite}
.fab-stack .ink-fab{min-width:78px;text-align:center}
.fab-badge{display:none!important}
body.voice-live .fab-stack .voice-fab{opacity:0!important;pointer-events:none}
body:has(#reader-shell:not(.hidden):not(.in-pane)) .fab-stack{bottom:84px}
body.in-studio .fab-stack{right:10px;bottom:10px;gap:8px}
body.in-studio .fab-stack .voice-fab{width:58px!important;height:58px!important;border-radius:20px!important}
body.in-studio .fab-stack .voice-fab .mascot{width:62px;height:62px}
body:has(#call-ui:not(.hidden)) .fab-stack,body:has(#chat-box:not(.hidden)) .fab-stack{display:none}
@media(max-width:719px){.fab-stack{right:10px;bottom:10px}.fab-stack .voice-fab{width:66px!important;height:66px!important}.fab-stack .voice-fab .mascot{width:72px;height:72px}}
/* panel suara: maskot lebih besar, tanpa transkrip (kecuali dinyalakan di pengaturan) */
.vp-mascot{width:104px!important;height:104px!important;margin:-14px 4px -8px -6px!important}
.vp-mini{width:52px!important;height:52px!important;margin:-10px 0 -8px!important}
body:not(.voice-text) #voice-log,body:not(.voice-text) .vp-cap,body:not(.voice-text) #voice-interim{display:none!important}
body:not(.voice-text) .voice-panel{max-height:none}
.voice-pill .ai-st{width:30px;height:30px}
/* maskot V8: bayangan, pantulan saat ganti status, persona */
.mascot .m-shadow{transform-box:fill-box;transform-origin:center;animation:m-shadow 3.6s ease-in-out infinite}
.mascot .m-bow{display:none;transform-box:fill-box;transform-origin:center;animation:m-bow 3s ease-in-out infinite}
body[data-persona=bestie] .mascot .m-bow{display:inline}
body[data-persona=bestie] .mascot .m-cap{display:none}
.mascot.m-bounce .m-svg{animation:m-bounce .55s var(--ease-b)}
.mascot .m-look{transition:transform .25s ease-out}
.mascot[data-state=speak] .m-svg{animation:m-speakbob .5s ease-in-out infinite alternate}
.mascot[data-state=listen] .m-shadow{animation:m-shadow 1.2s ease-in-out infinite}
.st-idle .st-spark{transform-box:fill-box;transform-origin:center;animation:st-spark 3.2s ease-in-out infinite}
.st-idle .st-spark2{animation:st-dot 2.4s ease-in-out infinite}
@keyframes m-shadow{50%{transform:scaleX(.9);opacity:.12}}
@keyframes m-bow{50%{transform:rotate(-4deg) scale(1.03)}}
@keyframes m-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.04,.97)}70%{transform:translateY(1px) scale(.98,1.02)}100%{transform:none}}
@keyframes m-speakbob{to{transform:translateY(-1.5px)}}
@keyframes st-spark{0%,100%{transform:scale(.86) rotate(0)}50%{transform:scale(1.06) rotate(45deg)}}

/* ---------- animasi elegan di seluruh aplikasi ---------- */
@keyframes cg-in{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes cg-back{from{opacity:0;transform:translateX(-22px) scale(.99)}to{opacity:1;transform:none}}
@keyframes cg-pop{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.015)}100%{transform:none}}
@keyframes cg-morph{0%{opacity:0;transform:scale(.9) translateY(18px);border-radius:40px;filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes cg-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes cg-sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes cg-shine{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes cg-glow{0%,100%{box-shadow:0 0 0 0 #2f8a5533}50%{box-shadow:0 0 0 6px #2f8a5500}}
@keyframes cg-fade{from{opacity:0}to{opacity:1}}
@keyframes cg-slide-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* halaman: hanya opacity pada <main> (transform di <main> akan mengganggu panel tetap di Ruang belajar); gerak pada isinya */
main.view:not(.hidden){animation:cg-fade .35s ease both}
body.nav-back main.view:not(.hidden)>.page-head{animation:cg-back .42s var(--ease-s) both}
main.view:not(.hidden) .page-head{animation:cg-in .55s var(--ease-s) .04s both}
main.view:not(.hidden):not(#studio-view) .panel,main.view:not(.hidden) .stats>*,main.view:not(.hidden) .book-grid>.book{animation:cg-pop .5s var(--ease-s) both}
main.view:not(.hidden) .book-grid>.book:nth-child(2),main.view:not(.hidden) .stats>*:nth-child(2){animation-delay:.04s}
main.view:not(.hidden) .book-grid>.book:nth-child(3),main.view:not(.hidden) .stats>*:nth-child(3){animation-delay:.08s}
main.view:not(.hidden) .book-grid>.book:nth-child(4),main.view:not(.hidden) .stats>*:nth-child(4){animation-delay:.12s}
main.view:not(.hidden) .book-grid>.book:nth-child(n+5){animation-delay:.16s}
button,.btn-link{transition:transform .22s var(--ease-b),box-shadow .25s,background-color .25s,color .2s,border-color .2s}
button:not(:disabled):hover{transform:translateY(-1px)}
button:not(:disabled):active{transform:scale(.96)}
button.primary,.btn-link.primary{position:relative;overflow:hidden;isolation:isolate}
button.primary::after,.btn-link.primary::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;z-index:1}
button.primary:hover::after,.btn-link.primary:hover::after{animation:cg-shine 1.1s ease-out}
#upload-trigger::after{animation:cg-shine 4.5s ease-in-out 2s infinite}
.nav{transition:background-color .25s,color .2s,transform .25s var(--ease-b)}
.nav:hover{transform:translateX(3px)}
.nav.active .nv-ic{animation:cg-pulse .5s var(--ease-b)}
.book{transition:transform .35s var(--ease-b),box-shadow .3s}
.book:hover{transform:translateY(-5px) rotate(-.4deg)}
.book .book-cover{transition:transform .45s var(--ease-s),box-shadow .35s;transform-origin:left center}
.book:hover .book-cover{transform:perspective(700px) rotateY(-9deg);box-shadow:8px 10px 24px #1d2a2233}
.modal-backdrop:not(.hidden){animation:cg-fade .25s ease both}
.modal-backdrop:not(.hidden) .modal{animation:cg-morph .42s var(--ease-s) both}
.voice-panel:not(.hidden){animation:cg-morph .4s var(--ease-s) both;transform-origin:bottom right}
.voice-pill:not(.hidden){animation:cg-slide-up .4s var(--ease-b) both}
.ink-dock:not(.hidden){animation:cg-slide-up .4s var(--ease-s) both}
.sidebar .brand img{transition:transform .6s var(--ease-b)}
.sidebar .brand:hover img{transform:rotate(-8deg) scale(1.06)}
.boot-logo{animation:cg-pulse 1.6s ease-in-out infinite}
.loader{animation-timing-function:cubic-bezier(.6,.1,.4,.9)!important}
.chip,.chip-row button{transition:transform .2s var(--ease-b)}
.panel{transition:box-shadow .3s,transform .3s var(--ease-s)}
/* kilau lembut saat memuat */
.skeleton,.cv-loading{background:linear-gradient(100deg,#ece6d8 30%,#f8f3ea 50%,#ece6d8 70%);background-size:300% 100%;animation:cg-sheen 1.4s linear infinite}
/* membalik halaman: buku & buku tulis */
#reader-content.flip-next>canvas,#reader-content.flip-next>.reader-text{animation:flip-next .5s var(--ease-s) both;transform-origin:left center}
#reader-content.flip-prev>canvas,#reader-content.flip-prev>.reader-text{animation:flip-prev .5s var(--ease-s) both;transform-origin:right center}
/* buku tulis: lembar bayangan yang berbalik di atas halaman; halaman aslinya diam, jadi pena langsung tepat posisinya */
.ink-wrap{perspective:2000px}
.ink-wrap.flip-next::after,.ink-wrap.flip-prev::after,.ink-wrap.flip-open::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,#f3ead8,#fffdf6 18%,#fbf5e8 82%,#e9dcc2);box-shadow:0 10px 40px #0002;backface-visibility:hidden}
.ink-wrap.flip-next::after{transform-origin:left center;animation:ink-turn-next .55s var(--ease-s) both}
.ink-wrap.flip-prev::after{transform-origin:left center;animation:ink-turn-prev .55s var(--ease-s) both}
.ink-wrap.flip-open::after{transform-origin:left center;animation:ink-turn-open .85s var(--ease-s) both;background:linear-gradient(135deg,#2a7a50,#1a5c3a)}
@keyframes ink-turn-next{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-110deg);opacity:0}}
@keyframes ink-turn-prev{0%{transform:rotateY(-110deg);opacity:0}100%{transform:rotateY(0);opacity:0}}
@keyframes ink-turn-open{0%{transform:rotateY(0);opacity:1}70%{opacity:1}100%{transform:rotateY(-120deg);opacity:0}}
@keyframes flip-next{0%{transform:perspective(1600px) rotateY(28deg) translateX(30px);opacity:.25;filter:brightness(.9)}100%{transform:none;opacity:1;filter:none}}
@keyframes flip-prev{0%{transform:perspective(1600px) rotateY(-28deg) translateX(-30px);opacity:.25;filter:brightness(.9)}100%{transform:none;opacity:1;filter:none}}
@keyframes flip-open{0%{transform:perspective(1800px) rotateY(-75deg);opacity:0}55%{opacity:1}100%{transform:none}}
.book-flip{position:absolute;inset:0;z-index:30;pointer-events:none;perspective:2200px;display:grid;place-items:center;animation:cg-fade .2s ease both}
.book-flip .bf-page{position:absolute;width:min(520px,70vw);aspect-ratio:3/4;background:linear-gradient(90deg,#efe6d4,#fffdf7 12%);border-radius:4px 10px 10px 4px;box-shadow:0 20px 60px #0003;animation:bf-page 1.25s ease both}
.book-flip .bf-cover{position:absolute;width:min(520px,70vw);aspect-ratio:3/4;border-radius:4px 12px 12px 4px;background:hsl(var(--cv-h,150) 32% 34%) center/cover;transform-origin:left center;box-shadow:0 24px 70px #0005;display:grid;place-items:center;padding:30px;color:#fff;font:700 24px/1.3 'Playfair Display',serif;text-align:center;animation:bf-open 1.2s cubic-bezier(.6,.05,.3,1) both;backface-visibility:hidden;z-index:2}
@keyframes bf-open{0%{transform:rotateY(0)}15%{transform:rotateY(-8deg)}100%{transform:rotateY(-165deg);opacity:0}}
@keyframes bf-page{0%{transform:scale(.98)}70%{opacity:1}100%{opacity:0;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.book-flip{display:none}}

/* ---------- mode gulir ---------- */
#reader-content.scroll-mode{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:40vh}
.sp-page{position:relative;background:#fff;box-shadow:0 4px 18px #1d2a2214;border-radius:4px;max-width:100%}
.sp-page canvas{display:block;max-width:100%;height:auto!important}
.sp-page:not(:has(canvas))::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#f1ece2 30%,#faf7f1 50%,#f1ece2 70%);background-size:300% 100%;animation:cg-sheen 1.4s linear infinite;border-radius:4px}
.sp-page .sp-no{position:absolute;right:8px;bottom:6px;z-index:2;font-size:11px;color:#8a978f;background:#ffffffcc;border-radius:8px;padding:1px 7px}
.sp-text{background:transparent;box-shadow:none;width:100%}
#read-mode[aria-pressed=true],[data-ink-scrollmode].on{background:var(--forest)!important;color:#fff!important}
.ns-before,.ns-after{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0}
.ns-page{position:relative;background:#fffdf8;box-shadow:0 3px 14px #1d2a221a;border-radius:6px;overflow:hidden;cursor:pointer;flex-shrink:0}
.ns-page canvas{width:100%;height:100%;display:block}
.ns-page .ns-no{position:absolute;right:10px;bottom:8px;font-size:12px;color:#8a978f;background:#ffffffcc;border-radius:8px;padding:1px 8px;z-index:2}
.ns-add{margin:6px 0 28vh;border:2px dashed #b9cbbf;background:transparent;border-radius:14px;padding:16px 26px;font-weight:700;color:var(--forest)}
.ink-scrollmode .ink-wrap{box-shadow:0 0 0 3px #2f8a5533,0 6px 22px #1d2a2226}

/* ---------- kepemilikan buku ---------- */
.vis-tag{position:absolute;left:8px;top:8px;z-index:3;font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:999px;background:#ffffffe0;color:#5d4a3a;box-shadow:0 1px 4px #0002}
.vis-tag.shared{background:#e3f4ea;color:#1f6b43}
.upload-share-row{background:#f2f8f3;border:1px solid #d4e6d9;border-radius:12px;padding:10px 12px}
.nav-badge[hidden]{display:none!important}.so-main{flex:1 1 150px;min-width:0}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e0573c;color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;animation:cg-pop .4s var(--ease-b)}
.nav-pill{margin-left:auto;font-size:10px;font-weight:700;padding:1px 8px;border-radius:999px;background:#f3d38e;color:#5a3d12}
body.is-sub .nav-pill{background:#d8efdf;color:#1f6b43}

/* ---------- langganan ---------- */
.plan-status{display:flex;gap:14px;align-items:center;border-left:5px solid #d5af72}
.plan-status.ok{border-left-color:#2f8a55}
.ps-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#f4ead6;color:#8a5a1e;flex-shrink:0}
.plan-status.ok .ps-ic{background:#e3f4ea;color:#1f6b43;animation:cg-glow 2.4s infinite}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:18px 0}
.price-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:4px;transition:transform .35s var(--ease-b),box-shadow .3s}
.price-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #173b2d1f}
.price-card.hot{border-color:#2f8a55;box-shadow:0 0 0 3px #2f8a5522,0 14px 34px #173b2d1a;background:linear-gradient(180deg,#f3faf5,#fff)}
.pc-ribbon{position:absolute;top:-11px;right:16px;background:linear-gradient(90deg,#e3a63a,#f3d38e);color:#3e2a0a;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px #c8902e55}
.pc-price{font:700 30px/1.1 'Playfair Display',serif;color:var(--forest)}
.pc-price small{font:500 13px 'DM Sans',sans-serif;color:var(--muted)}
.price-card .full{margin-top:auto}
.bank-box{background:linear-gradient(135deg,#123d28,#1f5a3e);color:#fff;border-radius:18px;padding:16px 18px;margin-bottom:12px;box-shadow:0 12px 30px #12352b40}
.bank-box .eyebrow{color:#bfe3c8}
.bank-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0}
.bank-no{font:700 22px/1.2 ui-monospace,Menlo,monospace;letter-spacing:1px}
.bank-amt{font:700 20px 'Playfair Display',serif;color:#f3d38e}
.bank-box .secondary{background:#ffffff1f;color:#fff;border-color:#ffffff55}
.pay-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pay-row:last-child{border-bottom:0}
.pay-row.adm>div{flex:1;min-width:200px}
.pay-st{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:#f4ead6;color:#8a5a1e}
.pay-st.approved{background:#e3f4ea;color:#1f6b43}.pay-st.rejected{background:#fbe4e0;color:#a8392a}
.pay-proof{width:64px;height:64px;object-fit:cover;border-radius:10px;cursor:zoom-in;border:1px solid var(--line)}
.btn-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-radius:12px;padding:9px 14px;font-weight:700;border:1.5px solid var(--line);color:var(--ink);background:#fff}
.space-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:18px;align-items:start}
.space-lock{display:flex;gap:16px;align-items:center}
.book-grid.compact{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
@media(max-width:900px){.space-grid{grid-template-columns:1fr}}

/* ---------- teman, chat, panggilan ---------- */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;align-items:start}
.code-big{font:700 30px/1.2 ui-monospace,Menlo,monospace;letter-spacing:3px;color:var(--forest);background:linear-gradient(135deg,#f2f8f3,#fff8e9);border:2px dashed #b9cbbf;border-radius:16px;padding:14px;text-align:center;margin:6px 0 12px}
.inline-input{display:flex;gap:8px;margin-top:10px}.inline-input input,.inline-input select{flex:1;min-width:0}
.so-list{display:grid;gap:4px;margin-top:8px}
.so-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px;border-radius:14px;width:100%;text-align:left;background:transparent;border:0;color:inherit;font:inherit}
.so-row:hover{background:#f3f6f1}
.so-row.req{background:#fff8e9;border:1px solid #f0dcb4}
.so-main{flex:1;min-width:0;display:flex;flex-direction:column}.so-main small{color:var(--muted)}
.so-av{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#2f8a55,#1f5a3e);flex-shrink:0;position:relative}
.so-av.on::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#33c26b;box-shadow:0 0 0 2px #fff;animation:cg-glow 2s infinite}
.so-av.meet{background:linear-gradient(135deg,#c8902e,#e3a63a)}.so-av.big{width:52px;height:52px;font-size:22px}
.so-act{font-size:17px}
.so-badge{min-width:22px;height:22px;border-radius:999px;background:#e0573c;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 6px}
.so-toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:95;max-width:min(440px,calc(100vw - 24px));background:#1f2d27;color:#fff;border:0;border-radius:14px;padding:12px 16px;box-shadow:0 14px 34px #0004;animation:cg-slide-up .35s var(--ease-b);text-align:left;font:inherit}
.so-toast.out{opacity:0;transform:translate(-50%,-10px);transition:.4s}
.so-ring{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:96;display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:12px 14px;box-shadow:0 20px 50px #0003;animation:cg-morph .4s var(--ease-b);width:min(440px,calc(100vw - 24px))}
.so-ring>div{flex:1;display:flex;flex-direction:column}.so-ring small{color:var(--muted)}
.so-ring .so-av{animation:cg-pulse 1s ease-in-out infinite}
button.danger,.danger{color:#b3392a}
.chat-box{position:fixed;right:16px;bottom:16px;top:16px;width:min(420px,calc(100vw - 32px));z-index:72;background:var(--paper,#fff);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 70px #12352b33;display:flex;flex-direction:column;overflow:hidden;animation:cg-morph .38s var(--ease-s)}
.chat-box.hidden{display:none}
.cb-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f3f8f4,transparent)}
.cb-who{flex:1;display:flex;flex-direction:column;min-width:0}.cb-who small{color:var(--muted)}
.cb-host,.cb-inline,.cs-chat{flex:1;min-height:0;display:flex;flex-direction:column}
.cb-inline{height:min(560px,70vh);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.cb-list{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:radial-gradient(circle at 20% 10%,#f3f8f4,transparent 60%)}
.cb-msg{max-width:82%;display:flex;flex-direction:column;align-self:flex-start;animation:cg-pop .3s var(--ease-b)}
.cb-msg.mine{align-self:flex-end;align-items:flex-end}
.cb-msg.sys{align-self:center;max-width:95%}
.cb-bubble{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:8px 12px;word-break:break-word;box-shadow:0 2px 6px #1d2a2210}
.cb-msg.mine .cb-bubble{background:linear-gradient(135deg,#2f8a55,#1f5a3e);color:#fff;border-color:transparent;border-radius:16px 16px 4px 16px}
.cb-msg.mine .cb-bubble a{color:#fff}
.cb-msg.sys .cb-bubble{background:#fff8e9;border-color:#f0dcb4;border-radius:12px;font-size:13px}
.cb-name{font-size:11px;color:var(--muted);margin:0 0 2px 6px}
.cb-time{font-size:10px;color:var(--muted);margin:2px 6px 0}
.cb-img{max-width:240px;max-height:260px;border-radius:12px;display:block;cursor:zoom-in}
.cb-form{display:flex;gap:6px;align-items:flex-end;padding:8px;border-top:1px solid var(--line);background:#fff}
.cb-form textarea{flex:1;resize:none;min-height:40px;max-height:140px;margin:0}
.cb-form .primary{margin:0}
.cb-photo{cursor:pointer;display:grid;place-items:center;width:40px;height:40px;font-size:18px}
@media(max-width:719px){.chat-box{inset:0;width:auto;border-radius:0}}
.call-ui{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 30% 0%,#1f4a36,#0f1f18 70%);color:#f2f7f3;display:flex;flex-direction:column;animation:cg-morph .4s var(--ease-s)}
.call-ui.hidden{display:none}
.call-top{display:flex;align-items:center;gap:10px;padding:10px 14px}
.call-top .icon-btn,.call-top .secondary{color:#fff;background:#ffffff14;border-color:#ffffff33}
.call-who{flex:1;display:flex;flex-direction:column;min-width:0}.call-who small{opacity:.75}
.call-clock{font-variant-numeric:tabular-nums;opacity:.85;font-size:13px}
.call-body{flex:1;min-height:0;display:flex;gap:10px;padding:0 12px}
.call-grid{flex:1;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}
.ct{position:relative;background:#1b2b23;border-radius:18px;overflow:hidden;min-height:120px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,transform .3s var(--ease-b);cursor:pointer;animation:cg-pop .45s var(--ease-b)}
.ct video{width:100%;height:100%;object-fit:cover;background:#111}
.ct.me video{transform:scaleX(-1)}.ct.me.sharing video{transform:none;object-fit:contain}
.ct.talking{box-shadow:inset 0 0 0 3px #4fd18b,0 0 24px #4fd18b55}
.ct-av{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:28px;display:none;place-items:center;font:800 34px 'Playfair Display',serif;background:linear-gradient(135deg,#2f8a55,#c8902e);color:#fff}
.ct.novideo video{opacity:0}.ct.novideo .ct-av{display:grid}
.ct.talking .ct-av{animation:cg-pulse .9s ease-in-out infinite}
.ct-name{position:absolute;left:10px;bottom:10px;background:#0008;padding:3px 10px;border-radius:999px;font-size:12px;backdrop-filter:blur(6px)}
.ct-flags{position:absolute;right:10px;top:10px;display:flex;gap:4px}.ct-flags i{font-style:normal;background:#0008;border-radius:999px;padding:2px 6px}
.ct-flags .hand{animation:cg-pulse .8s ease-in-out infinite;background:#e3a63a}
.ct[data-conn=connecting]::after,.ct[data-conn=new]::after{content:"Menghubungkan…";position:absolute;left:10px;top:10px;font-size:11px;background:#0008;padding:2px 8px;border-radius:999px}
.call-grid.has-pin{grid-template-columns:1fr;grid-auto-rows:auto}
.call-grid.has-pin .ct:not(.pin){display:none}.call-grid.has-pin .ct.pin{height:100%}
.call-ui[data-layout=speaker] .call-grid{grid-template-columns:1fr;grid-template-rows:1fr auto;grid-auto-flow:row}
.call-ui[data-layout=speaker] .call-grid .ct.talking{grid-row:1}
.call-side{width:min(360px,40vw);background:#fff;color:var(--ink);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.call-side.hidden{display:none}.cs-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.call-bar{display:flex;justify-content:center;gap:8px;padding:12px;flex-wrap:wrap}
.cb-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px;padding:8px 10px;border-radius:16px;border:1.5px solid #ffffff33;background:#ffffff12;color:#fff;font:inherit}
.cb-btn span{font-size:20px}.cb-btn small{font-size:11px;opacity:.9}
.cb-btn.on{background:#ffffff2a;border-color:#ffffffaa}
.cb-btn[data-call=mic]:not(.on),.cb-btn[data-call=cam]:not(.on){background:#b3392a55;border-color:#e0573c}
.cb-btn.leave{background:#c0392b;border-color:#c0392b}
.call-mini{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:89;display:flex;gap:10px;align-items:center;background:#1f2d27;color:#fff;border:0;border-radius:999px;padding:10px 16px;box-shadow:0 14px 34px #0004;font:inherit;animation:cg-slide-up .35s var(--ease-b)}
.call-mini.hidden{display:none}.cm-dot{width:10px;height:10px;border-radius:50%;background:#33c26b;animation:cg-glow 1.6s infinite}
@media(max-width:719px){.call-body{flex-direction:column;padding:0 6px}.call-side{width:auto;height:45vh}.cb-btn{min-width:56px;padding:6px}.cb-btn small{display:none}.call-grid[data-n="2"]{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr)}}

/* ---------- tema sepia: latar kertas ---------- */
html[data-theme=sepia][data-bg=lines] body{background-image:repeating-linear-gradient(180deg,transparent 0 31px,#b0896826 31px 32px)}
html[data-theme=sepia][data-bg=dots] body{background-image:radial-gradient(circle,#9c785a33 1.1px,transparent 1.5px)}
html[data-theme=sepia][data-bg=linen] body{background-image:repeating-linear-gradient(0deg,#8a643f0d 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#8a643f0d 0 1px,transparent 1px 4px)}
html[data-theme=sepia] body .nv-ic{background:color-mix(in srgb,var(--nh) 18%,#f6ecd9);color:color-mix(in srgb,var(--nh) 60%,#5a3e2a)}
html[data-theme=sepia] body .nav.active .nv-ic{background:#ffffff40;color:#fff}
html[data-theme=sepia] .top-theme .tt-moon{display:inline}html[data-theme=sepia] .top-theme .tt-sun{display:none}
html[data-theme=sepia] .call-ui{background:radial-gradient(circle at 30% 0%,#5a3e2a,#2a1d14 70%)}
/* ==== SEPIA-START (otomatis, gen_sepia.py) ==== */
html[data-theme=sepia]{color-scheme:light;--ink:#3b2a1e;--forest:#7a5a42;--sage:#c9ad8d;--cream:#efe2c9;--paper:#f6ecd9;--muted:#7d6450;--line:#dcc6a5;--gold:#c08a4a;--shadow:0 18px 50px #5a3e2a26}
html[data-theme=sepia] body{background-color:#efe2c9;color:#3b2a1e}
html[data-theme=sepia] input,html[data-theme=sepia] select,html[data-theme=sepia] textarea{background-color:#fbf4e6;color:#3b2a1e;border-color:#d6bf9c}
html[data-theme=sepia] ::placeholder{color:#a08467}
html[data-theme=sepia] a{color:#8a5a2e}
html[data-theme=sepia] #reader-content canvas,html[data-theme=sepia] .reader-text,html[data-theme=sepia] .nb-canvas-wrap canvas,html[data-theme=sepia] .book-cover img{filter:sepia(.32) brightness(.97) saturate(.92)}
html[data-theme=sepia] input,html[data-theme=sepia] textarea,html[data-theme=sepia] select{border:1px solid #ddccb9;background:#f6efe1}html[data-theme=sepia] button.primary,html[data-theme=sepia] .primary{border:1px solid #856047}html[data-theme=sepia] button.primary:hover{background:#815b45}html[data-theme=sepia] .secondary{border:1px solid #dccab6;background:#f6efe1}html[data-theme=sepia] .secondary:hover{background:#f0e6db}html[data-theme=sepia] .mark{color:#5c3c29}html[data-theme=sepia] .loader{border:3px solid #ddccb8;border-top-color:#856047}html[data-theme=sepia] .auth-aside{background:#664837}html[data-theme=sepia] .sidebar{background:#f6efe1}html[data-theme=sepia] .nav,html[data-theme=sepia] .folder-item{color:#784e36}html[data-theme=sepia] .nav:hover,html[data-theme=sepia] .folder-item:hover{background:#f1e7dc}html[data-theme=sepia] .nav.active{background:#f0e6da;color:#68442f}html[data-theme=sepia] .mini-avatar{background:#eee2d5}html[data-theme=sepia] .topbar{background:#f6efe1}html[data-theme=sepia] .online-dot{background:#8b634b}html[data-theme=sepia] .hero{background:#644736}html[data-theme=sepia] .light-btn{color:#553726}html[data-theme=sepia] .hero-art{color:#784e36}html[data-theme=sepia] .hero-book{color:#6a4530}html[data-theme=sepia] .stat{background:#f6efe1;border:1px solid #dfcfbd}html[data-theme=sepia] .text-button{color:#784e36}html[data-theme=sepia] .book{border:1px solid #decebc;background:#f6efe1}html[data-theme=sepia] .book-cover{background:linear-gradient(125deg,#72513e,#8b634b)}html[data-theme=sepia] .book-cover.pdf{background:linear-gradient(140deg,#8b634b,#6f4f3c)}html[data-theme=sepia] .empty{background:#f6efe1;border:1px dashed #dbc9b4}html[data-theme=sepia] .search-results{background:#f6efe1}html[data-theme=sepia] .result-item:hover{background:#f1e7dd}html[data-theme=sepia] .note-card{background:#f6efe1}html[data-theme=sepia] .note-card.rose{border-left-color:#d6c1a9}html[data-theme=sepia] .note-card blockquote{border-left:2px solid #d8c4ad;color:#784e36}html[data-theme=sepia] .panel,html[data-theme=sepia] .research-card{background:#f6efe1}html[data-theme=sepia] .source{background:#f1e8dd;border:1px solid #decdba;color:#704932}html[data-theme=sepia] .source:hover{background:#efe3d7}html[data-theme=sepia] .modal-backdrop{background:#634636b0}html[data-theme=sepia] .modal{background:#f6efe1}html[data-theme=sepia] .reader-shell{background:#f0e5da}html[data-theme=sepia] .reader-top{background:#f6efe1}html[data-theme=sepia] .reader-controls{background:#f8f5ec;border-bottom:1px solid #decdba}html[data-theme=sepia] .reader-text{background:#f6efe1}html[data-theme=sepia] .reader-notes{background:#f6efe1}html[data-theme=sepia] .text-quote{background:#f2e9de}html[data-theme=sepia] #toast{background:#654736}html[data-theme=sepia] .ref-entry{background:#f6efe1}html[data-theme=sepia] .ref-label{color:#784e36}html[data-theme=sepia] .ref-doi{color:#784e36}html[data-theme=sepia] .ref-citation{border-left:3px solid #d8c5ae;background:#f2e9df;color:#784e36}html[data-theme=sepia] .online-glance{background:#f0e6db;border:1px solid #dccbb7}html[data-theme=sepia] .online-glance .glance-icon{color:#784e36}html[data-theme=sepia] .online-glance strong{color:#5c3c29}html[data-theme=sepia] .online-glance p{color:#784e36}html[data-theme=sepia] .online-summary{background:#f2e9de;border:1px solid #ddcbb8}html[data-theme=sepia] .presence-heading strong{color:#5b3b29}html[data-theme=sepia] .presence-heading>span,html[data-theme=sepia] .presence-heading>small{color:#423024}html[data-theme=sepia] .presence-green{color:#784e36}html[data-theme=sepia] .presence-pill{background:#efe4d7;border:1px solid #dbc9b4;color:#724a33}html[data-theme=sepia] .presence-tag.present{background:#efe4d8;color:#784e36}html[data-theme=sepia] .presence-tag.away{background:#f0e6db;color:#423024}html[data-theme=sepia] .challenge-wrap{background:#f6efe1}html[data-theme=sepia] .challenge-main h3{color:#5a3b28}html[data-theme=sepia] .challenge-main p{color:#423024}html[data-theme=sepia] .challenge-ring{background:conic-gradient(#ab7f5c var(--progress),#efe4d8 0)}html[data-theme=sepia] .challenge-ring>span{background:#f6efe1}html[data-theme=sepia] .challenge-ring strong{color:#5c3c29}html[data-theme=sepia] .challenge-ring small{color:#423024}html[data-theme=sepia] .streak-row strong{color:#744b34}html[data-theme=sepia] .week-dot{background:#f1e7dc}html[data-theme=sepia] .week-dot.lit{background:#eee3d6;color:#744c34}html[data-theme=sepia] .feature-warning{background:#f1eadb;border:1px solid #d9c6b0}html[data-theme=sepia] .shelf-card{border:1px solid #ddcbb7;background:linear-gradient(140deg,#f6efe1,#f2e9df)}html[data-theme=sepia] .shelf-heading{border-bottom:1px solid #decdba}html[data-theme=sepia] .shelf-heading h3{color:#593a28}html[data-theme=sepia] .shelf-book{border:1px solid #ddcdb9;background:#f6efe1}html[data-theme=sepia] .shelf-book button:first-child{color:#6e4831}html[data-theme=sepia] .quote-preview{background:#634636}html[data-theme=sepia] .login-privacy{color:#423024}html[data-theme=sepia] .study-card{background:#f6efe1}html[data-theme=sepia] .study-card.is-suspended{border-left-color:#dac7b1}html[data-theme=sepia] .study-back{color:#6b4530}html[data-theme=sepia] .cloze-gap{background:#f0e7db}html[data-theme=sepia] .review-front mark{background:#e6d9be}html[data-theme=sepia] .rate{background:#f6efe1}html[data-theme=sepia] .rate.again{border-color:#dac7b1}html[data-theme=sepia] .rate.hard{border-color:#d9c6b1}html[data-theme=sepia] .rate.good{border-color:#d6c2aa}html[data-theme=sepia] .rate.easy{border-color:#d7c3ac}html[data-theme=sepia] .draft{background:#f6efe1}html[data-theme=sepia] .draft.unverified{border-color:#d9c6b1;background:#f7f2e9}html[data-theme=sepia] .mode-chip{background:#f6efe1}html[data-theme=sepia] .tutor-empty{background:#f6efe1;border:1px dashed #dbc9b4}html[data-theme=sepia] .bubble.ai{background:#f6efe1}html[data-theme=sepia] .cite{background:#eadec7}html[data-theme=sepia] .context-chip{background:#f0e6db;border:1px solid #dccbb7}html[data-theme=sepia] .chip{background:#f6efe1}html[data-theme=sepia] .web-item{background:#f6efe1}html[data-theme=sepia] .notice{background:#f4efe3;border:1px solid #dac8b3}html[data-theme=sepia] .badge.ok{background:#efe5d9;color:#69442f}html[data-theme=sepia] .badge.warn{background:#f2e6dc}html[data-theme=sepia] .browser{background:#f6efe1}html[data-theme=sepia] .br-tabs{background:#f0e6db}html[data-theme=sepia] .br-tab{background:#eee2d5}html[data-theme=sepia] .br-tab.active{background:#f6efe1}html[data-theme=sepia] .br-bar input{background:#f2e9df}html[data-theme=sepia] .br-btn:hover:not(:disabled){background:#f0e6db}html[data-theme=sepia] .br-logo span:nth-child(5){color:#784e36}html[data-theme=sepia] .br-home-form input{border:1px solid #dccbb7}html[data-theme=sepia] .br-hit-main small{color:#784e36}html[data-theme=sepia] .web-article img{background:#f1e8dd}html[data-theme=sepia] .web-article pre{background:#f1e8de}html[data-theme=sepia] .nb-card{background:#f6efe1}html[data-theme=sepia] .nb-cover{border:1px solid #decdba;background:#f6efe1}html[data-theme=sepia] .paper-lined{background:repeating-linear-gradient(#f6efe1 0 11px,#ecdfd1 11px 12px)}html[data-theme=sepia] .paper-grid{background:#f6efe1 linear-gradient(#eee3d6 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,#eee3d6 1px,transparent 1px) 0 0/12px 12px}html[data-theme=sepia] .paper-dots{background:#f6efe1 radial-gradient(#b9c6d2 1px,transparent 1.5px) 0 0/12px 12px}html[data-theme=sepia] .ink-bar{background:#f6efe1}html[data-theme=sepia] .ink-group button.active{background:#efe5d9}html[data-theme=sepia] .swatch{border:3px solid #e2d3c3!important}html[data-theme=sepia] .ink-menu{background:#f6efe1}html[data-theme=sepia] .ink-menu button:hover{background:#f1e8dd}html[data-theme=sepia] .ink-scroll{background:#efe5d8}html[data-theme=sepia] .ink-dock{background:#f2e9de}html[data-theme=sepia] .ink-dock-head{background:#f6efe1}@media print{html[data-theme=sepia] .print-module{color:#000000}html[data-theme=sepia] .print-foot{color:#423024}}html[data-theme=sepia] .qz-progress{background:#efe5d9}html[data-theme=sepia] .qz-opt{background:#f6efe1}html[data-theme=sepia] .qz-opt.right{border-color:#856047;background:#f1e7dc}html[data-theme=sepia] .qz-opt.wrong{background:#f5e7e5}html[data-theme=sepia] .qz-feedback{background:#f1e8dd}html[data-theme=sepia] .qz-feedback.benar{background:#f1e7dc}html[data-theme=sepia] .qz-feedback.salah{background:#f5e7e5}html[data-theme=sepia] .quiz-chip{background:#f6efe1}html[data-theme=sepia] .sp-item{background:#f6efe1}html[data-theme=sepia] .cm-map{background:#f6efe1}html[data-theme=sepia] .cm-node circle{fill:#f0e5d9}html[data-theme=sepia] #cm-arrow path{fill:#c4a58d}html[data-theme=sepia] .cm-side{background:#f6efe1}html[data-theme=sepia] .cm-list button:hover{background:#f1e8dd}html[data-theme=sepia] .md-player{background:#f6efe1}html[data-theme=sepia] .md-ts{background:#f0e6da}html[data-theme=sepia] .md-tr-view{background:#f2eae0}html[data-theme=sepia] .mod-form{background:#f6efe1}html[data-theme=sepia] .reco-item{background:#f6efe1}html[data-theme=sepia] .reco-icon{background:#f0e6da}html[data-theme=sepia] .pg-level{background:#f6efe1}html[data-theme=sepia] .pg-card{background:#f6efe1}html[data-theme=sepia] .pg-meter{background:#f0e6db}html[data-theme=sepia] .st-pane{background:#f6efe1}html[data-theme=sepia] .st-pane-head{background:#f2e9de}html[data-theme=sepia] .st-book-list button{background:#f6efe1}html[data-theme=sepia] .voice-fab{background:#f6efe1}html[data-theme=sepia] .voice-panel{background:#f6efe1}html[data-theme=sepia] .voice-orb{background:radial-gradient(circle at 35% 35%,#ede1d2,#8b634b)}html[data-theme=sepia] .voice-orb[data-state=speak]{background:radial-gradient(circle at 35% 35%,#e3d5b6,#c08b33)}html[data-theme=sepia] .vl.me{background:#f0e6da}html[data-theme=sepia] .vl.bro{background:#f1eddf}html[data-theme=sepia] .st-panes{background:#634636}html[data-theme=sepia] .st-pane{background:#f2eae0}html[data-theme=sepia] .st-pane-head{border-bottom:1px solid #dfcfbd}html[data-theme=sepia] .st-pane-head select{color:#784e36}html[data-theme=sepia] .st-pane-head select:hover{background:#f0e7db}html[data-theme=sepia] .st-grip{background:#ecdfd0}html[data-theme=sepia] .st-split:hover::after,html[data-theme=sepia] .st-split:focus-visible::after,html[data-theme=sepia] .st-panes.dragging .st-split::after{background:#ebddcd}html[data-theme=sepia] .md-yt-form{background:#f6efe1;border:1px solid #ddccb9}html[data-theme=sepia] .yt-thumb{background:#eee2d4}html[data-theme=sepia] .ink-editor .ink-scroll{background:#efe4d7}html[data-theme=sepia] .ink-bar{border-color:#decebb}html[data-theme=sepia] .swatch.custom{background:conic-gradient(#e74c3c,#f1c40f,#8b634b,#3498db,#9b59b6,#e74c3c)!important}html[data-theme=sepia] .ink-deco summary{background:#f3ebe0}html[data-theme=sepia] .ink-tape-btn.tape-stripe{background:repeating-linear-gradient(135deg,var(--c) 0 7px,#f6efe190 7px 11px)!important}html[data-theme=sepia] .ink-tape-btn.tape-dots{background:radial-gradient(#f6efe1aa 2px,transparent 2.5px) 0 0/10px 10px,var(--c)!important}html[data-theme=sepia] .ink-tape-btn.tape-grid{background:linear-gradient(#f6efe180 1px,transparent 1px) 0 0/8px 8px,linear-gradient(90deg,#f6efe180 1px,transparent 1px) 0 0/8px 8px,var(--c)!important}html[data-theme=sepia] .ink-tint{border:1px solid #dccab6!important}html[data-theme=sepia] .ink-it.sel{outline-color:#856047}html[data-theme=sepia] .ink-it textarea{color:#423024}html[data-theme=sepia] .ink-it-bar{background:#f6efe1}html[data-theme=sepia] .ink-it-bar button:hover{background:#f0e7db}html[data-theme=sepia] .ink-it-rs{background:#886149;border:3px solid #e2d3c3}html[data-theme=sepia] .ink-editor .ink-status{background:#f6efe1d9}html[data-theme=sepia] .ink-pal-dot{background:var(--c,#634636)}html[data-theme=sepia] #reader-shell.in-pane{background:#efe4d8}html[data-theme=sepia] #reader-shell.in-pane .reader-top{border-bottom:1px solid #decdba}html[data-theme=sepia] #reader-shell.in-pane .reader-controls{background:#f6efe1e6}html[data-theme=sepia] .st-zoom{background:#f1e7dc}html[data-theme=sepia] .st-zoom button:hover{background:#f6efe1}html[data-theme=sepia] .cap-rec-pop{background:#f6efe1}html[data-theme=sepia] .cap-recbar{background:#634636}html[data-theme=sepia] .cap-img{background:#f0e6db}html[data-theme=sepia] #reader-shell.clean .reading-pane{background:#eee3d6}html[data-theme=sepia] #reader-shell.clean .reader-controls{background:#634636e6}html[data-theme=sepia] #reader-shell.clean .reader-controls .secondary{border-color:#e2d3c340}html[data-theme=sepia] #reader-shell.clean .reader-controls input{background:#f6efe11a;border-color:#e2d3c340}html[data-theme=sepia] #reader-shell.clean:not(.in-pane) .rf-tools,html[data-theme=sepia] #reader-shell.clean:not(.in-pane) .rf-close{background:#634636cc}html[data-theme=sepia] #reader-shell:not(.clean):not(.in-pane) .rf-tools{background:#f6efe1}html[data-theme=sepia] .dr-drop{border:2px dashed #dac8b3;background:#f6efe1}html[data-theme=sepia] .dr-drop:hover,html[data-theme=sepia] .dr-drop.over{background:#f2e9de}html[data-theme=sepia] .dr-set{background:#f6efe1}html[data-theme=sepia] .dr-dot{border:1px solid #dccbb7;background:#f6efe1;color:#423024}html[data-theme=sepia] .dr-dot.on{background:#f1e7dc}html[data-theme=sepia] .dr-dot.ok{background:#8b634b;border-color:#856047}html[data-theme=sepia] .dr-dot.bad{background:#f3e2e0;border-color:#d8c4ad}html[data-theme=sepia] .dr-q{background:#f6efe1}html[data-theme=sepia] .dr-vig{background:#f2e9de}html[data-theme=sepia] .dr-opt{border:1px solid #ddcdb9;background:#f3eae1}html[data-theme=sepia] .dr-opt:hover{background:#f1e8dd}html[data-theme=sepia] .dr-msg.ai{background:#f1eddf}html[data-theme=sepia] .dr-msg.me{background:#f0e5d9}html[data-theme=sepia] .v-benar{background:#eee3d6;color:#704932}html[data-theme=sepia] .v-sebagian{background:#eee5d3}html[data-theme=sepia] .v-salah{background:#f1dcda}html[data-theme=sepia] .voice-pill{background:#634636e6}html[data-theme=sepia] .vp-orb{background:radial-gradient(circle at 35% 35%,#ede1d2,#8b634b)}html[data-theme=sepia] .voice-pill[data-state=speak] .vp-orb{background:radial-gradient(circle at 35% 35%,#e9ddc6,#d5af72)}html[data-theme=sepia] .vp-btn{background:#f6efe11a}html[data-theme=sepia] .vp-btn:hover{background:#f6efe133}html[data-theme=sepia] body.in-studio .st-panes{background:#ecdfd0}html[data-theme=sepia] body.in-studio .st-pane{background:#f6efe1}html[data-theme=sepia] body.in-studio .st-split::after{background:#8b634b}html[data-theme=sepia] body.in-studio .st-pane-head{background:#f2eae0f0;border-bottom:1px solid #decdba}html[data-theme=sepia] body.in-studio .st-tab-grip::after{background:#cdb29e}html[data-theme=sepia] body.in-studio .studio-bar,html[data-theme=sepia] body.in-studio.st-focus .studio-bar{background:#f6efe1f5}html[data-theme=sepia] .st-pin[aria-pressed=true]{background:#f0e7db}html[data-theme=sepia] body.in-studio .st-reveal::after{background:#b38b6c}html[data-theme=sepia] body.in-studio.mobile-menu-open .st-scrim{background:#63463633}html[data-theme=sepia] .st-tabs{background:#f6efe1}html[data-theme=sepia] .st-tabs .active{background:#f1e8dd}html[data-theme=sepia] body.in-studio #reader-shell.in-pane{background:#eee3d6}html[data-theme=sepia] .cap-ai{background:#f2e9de;border:1px solid #decdb9}html[data-theme=sepia] .cap-points>div{background:#f6efe1}html[data-theme=sepia] .cap-points span{color:#784e36}html[data-theme=sepia] .vp-btn[aria-pressed=true]{color:#3e281c}html[data-theme=sepia] body{background:radial-gradient(1200px 600px at 100% -10%,#efe4d8 0,transparent 60%),var(--cream)}html[data-theme=sepia] h1,html[data-theme=sepia] h2,html[data-theme=sepia] h3{color:#372419}html[data-theme=sepia] .eyebrow{color:#784e36}html[data-theme=sepia] button.primary,html[data-theme=sepia] .primary{background:linear-gradient(180deg,#7d5843,#634636);border:1px solid #856047}html[data-theme=sepia] button.primary:hover,html[data-theme=sepia] .primary:hover{background:linear-gradient(180deg,#89614a,#654736)}html[data-theme=sepia] .secondary,html[data-theme=sepia] button.secondary{background:#f6efe1;color:#493021}html[data-theme=sepia] .secondary:hover,html[data-theme=sepia] button.secondary:hover{background:#f1e8de;border-color:#856047}html[data-theme=sepia] .text-button{border:1.5px solid #dac8b3;background:#f6efe1;color:#62402c}html[data-theme=sepia] .text-button:hover{background:#f0e6db;border-color:#856047;color:#492f21}html[data-theme=sepia] .icon-btn:hover{background:#f1e7dc}html[data-theme=sepia] .chip,html[data-theme=sepia] .mode-chip,html[data-theme=sepia] .quiz-chip{border:1.5px solid #dac7b1!important;background:#f6efe1;color:#573927}html[data-theme=sepia] .chip:hover,html[data-theme=sepia] .mode-chip:hover,html[data-theme=sepia] .quiz-chip:hover{border-color:#856047!important;background:#f1e7dd}html[data-theme=sepia] .chip.active,html[data-theme=sepia] .mode-chip.active,html[data-theme=sepia] .quiz-chip.active{background:#634636!important;border-color:#856047!important}html[data-theme=sepia] .light-btn{background:linear-gradient(180deg,#e3d3b4,#e3bd77);color:#4c3222}html[data-theme=sepia] #upload-trigger,html[data-theme=sepia] #practice-start,html[data-theme=sepia] .ink-bar [data-ink="ocr"],html[data-theme=sepia] #voice-talk,html[data-theme=sepia] #tutor-form button[type="submit"],html[data-theme=sepia] #dr-form button[type="submit"],html[data-theme=sepia] #dr-start,html[data-theme=sepia] .cta{color:#492f21!important}html[data-theme=sepia] .voice-fab{background:linear-gradient(180deg,#7d5843,#634636)!important;border:2px solid #d9c5b0!important}html[data-theme=sepia] .ink-fab{color:#492f21!important}html[data-theme=sepia] .sidebar{background:#f6efe1}html[data-theme=sepia] .nav{color:#6f4932}html[data-theme=sepia] .nav:hover{background:#f1e7dc;border-color:#dccab6;color:#493021}html[data-theme=sepia] .nav.active{background:linear-gradient(180deg,#785541,#634636);border-color:#856047}html[data-theme=sepia] .side-label{color:#784e36}html[data-theme=sepia] .topbar{background:#f6efe1f2}html[data-theme=sepia] input,html[data-theme=sepia] textarea,html[data-theme=sepia] select{border:1.5px solid #dac7b2}html[data-theme=sepia] input:focus,html[data-theme=sepia] textarea:focus,html[data-theme=sepia] select:focus{border-color:#856047}html[data-theme=sepia] .hero{background:linear-gradient(135deg,#634636,#785541 60%,#644736)}html[data-theme=sepia] .ink-bar button:not(.swatch):not(.primary){color:#493021}html[data-theme=sepia] .ink-bar button:not(.swatch):not(.primary):hover{background:#f1e7dc;border-color:#dac7b1}html[data-theme=sepia] .ink-bar button.active:not(.swatch){background:#634636!important;border-color:#856047!important}html[data-theme=sepia] .ink-bar summary{border:1.5px solid #dac7b1;background:#f6efe1}html[data-theme=sepia] .ink-pen-only{border:1.5px solid #dac7b1;background:#f6efe1}html[data-theme=sepia] .ink-pen-only:has(input:checked){background:#f0e5d9;border-color:#856047}html[data-theme=sepia] .ink-menu>button:hover{background:#f1e7dc;border-color:#dac7b1}html[data-theme=sepia] .voice-pill{border:1.5px solid #d9c5b0!important}html[data-theme=sepia] .md{color:#3e291c}html[data-theme=sepia] .md h1,html[data-theme=sepia] .md h2,html[data-theme=sepia] .md h3,html[data-theme=sepia] .md h4,html[data-theme=sepia] .md h5,html[data-theme=sepia] .md h6{color:#352318}html[data-theme=sepia] .md h1{border-bottom:2px solid #dccbb7}html[data-theme=sepia] .md h2{border-bottom:1px solid #decdba}html[data-theme=sepia] .md h5,html[data-theme=sepia] .md h6{color:#764d35}html[data-theme=sepia] .md li::marker{color:#714a33}html[data-theme=sepia] .md strong{color:#352318}html[data-theme=sepia] .md em{color:#4b3122}html[data-theme=sepia] .md a{color:#784e36}html[data-theme=sepia] .md blockquote{background:#f2e9de;color:#5f3e2b}html[data-theme=sepia] .md hr{border-top:2px dashed #dbc9b5}html[data-theme=sepia] .md code{background:#f1e7dc;border:1px solid #ddccb8}html[data-theme=sepia] .md pre.md-code{background:#f2eae0;border:1.5px solid #ddcbb8}html[data-theme=sepia] .md .md-code-head{background:#e0e9f0;border-bottom:1px solid #ddcbb8;color:#423024}html[data-theme=sepia] .md .md-copy{border:1.5px solid #dac7b2;background:#f6efe1}html[data-theme=sepia] .md .md-table{border:1.5px solid #dbc9b4}html[data-theme=sepia] .md th,html[data-theme=sepia] .md td{border:1px solid #ddccb8}html[data-theme=sepia] .md th{background:#634636;border-color:#856047}html[data-theme=sepia] .md tr:nth-child(even) td{background:#f2e9df}html[data-theme=sepia] .md dt{color:#352318}html[data-theme=sepia] .md dd{color:#5f3e2b}html[data-theme=sepia] .md .footnotes{color:#784e36}html[data-theme=sepia] .md .footnotes-sep{border-top:1px solid #dbc9b5}html[data-theme=sepia] .md .md-box{background:#f2eae0}html[data-theme=sepia] .md .md-info,html[data-theme=sepia] .md .md-note{border-color:#d7c3ac;background:#e8f1f6}html[data-theme=sepia] .md .md-info .md-box-title,html[data-theme=sepia] .md .md-note .md-box-title{color:#784e36}html[data-theme=sepia] .md .md-tip,html[data-theme=sepia] .md .md-contoh,html[data-theme=sepia] .md .md-ringkasan{background:#f2e9de}html[data-theme=sepia] .md .md-tip .md-box-title,html[data-theme=sepia] .md .md-contoh .md-box-title,html[data-theme=sepia] .md .md-ringkasan .md-box-title{color:#724a33}html[data-theme=sepia] .md .md-warning{background:#f7f2e9}html[data-theme=sepia] .md .md-danger{border-color:#d8c4ae;background:#f8edec}html[data-theme=sepia] .md .md-rumus{border-color:#d8c5af;background:#f0edf8}html[data-theme=sepia] .md .md-mermaid{border:1.5px solid #dccbb7;background:#f6efe1}html[data-theme=sepia] .md .md-mermaid pre{color:#784e36}html[data-theme=sepia] #toast{border:1.5px solid #e2d3c333}html[data-theme=sepia] .vl.vl-ai{background:#f3ebe1!important}html[data-theme=sepia] .guide-tip{background:#f4eee2}html[data-theme=sepia] .sidebar-bottom{background:#f6efe1}html[data-theme=sepia] .pdf-doc{background:#f6efe1;color:#402a1d}html[data-theme=sepia] .pdf-cover .pdf-band{background:linear-gradient(120deg,#634636,#785541)}html[data-theme=sepia] .pdf-band img{background:#f6efe1}html[data-theme=sepia] .pdf-cover h1{color:#3c271b}html[data-theme=sepia] .pdf-meta{color:#784e36}html[data-theme=sepia] .pdf-box{border:1.5px solid #dccab5;background:#f3eae1}html[data-theme=sepia] .pdf-box h3{color:#573827}html[data-theme=sepia] .pdf-sum{background:#f4eee2}html[data-theme=sepia] .pdf-kp li{border-bottom:1px dashed #dccab5}html[data-theme=sepia] .pdf-kp li::before{background:#634636}html[data-theme=sepia] .pdf-q{background:#f1e7dc;border-left:5px solid #856047}html[data-theme=sepia] .pdf-qn{background:#785541}html[data-theme=sepia] .pdf-q small{color:#714a33}html[data-theme=sepia] .pdf-a h1,html[data-theme=sepia] .pdf-a h2,html[data-theme=sepia] .pdf-a h3{color:#573827}html[data-theme=sepia] .pdf-a th,html[data-theme=sepia] .pdf-a td{border:1px solid #dac8b3}html[data-theme=sepia] .pdf-a th{background:#634636!important}html[data-theme=sepia] .pdf-src{border-top:1px solid #dccab5}html[data-theme=sepia] .pdf-src h4{color:#784e36}html[data-theme=sepia] .pdf-src li{color:#784e36}html[data-theme=sepia] .pdf-src li.used{color:#402a1d}html[data-theme=sepia] .pdf-src li span{color:#423024}html[data-theme=sepia] .pdf-terms th{color:#573827}html[data-theme=sepia] .pdf-terms td{border-bottom:1px dashed #dccab5}html[data-theme=sepia] .pdf-line{border-bottom:1px solid #dac8b3}html[data-theme=sepia] .pdf-key{background:#e9eff7;border-color:#dbc9b4}html[data-theme=sepia] .pdf-next{background:#f1e7dc}html[data-theme=sepia] body.pdf-print{background:#f6efe1}html[data-theme=sepia] .m-ln{stroke:#422f23}html[data-theme=sepia] .fab-badge{background:var(--forest,#634636)}html[data-theme=sepia] .ai-st{color:var(--forest,#573827)}html[data-theme=sepia] .ai-st[data-state=listen],html[data-theme=sepia] .ai-st[data-state=focus]{color:#784e36;background:#f0e5d9}html[data-theme=sepia] .ai-st[data-state=look]{background:#e0e8f3}html[data-theme=sepia] .ai-st[data-state=think]{background:#e8e1f4}html[data-theme=sepia] .ai-st[data-state=speak]{background:#f1e8db}html[data-theme=sepia] .trial-tag{background:#f1e8db}html[data-theme=sepia] .book-cover[data-cover]::before{background-image:radial-gradient(circle at 80% 18%,#f6efe1 0 2px,transparent 3px),radial-gradient(circle at 80% 18%,transparent 0 30px,#f6efe1 31px 32px,transparent 33px 46px,#f6efe1 47px 48px,transparent 49px)}html[data-theme=sepia] .book-cover[style*="--cv-p:1"]::before{background-image:repeating-linear-gradient(45deg,#f6efe1 0 1px,transparent 1px 12px)}html[data-theme=sepia] .book-cover[style*="--cv-p:2"]::before{background-image:radial-gradient(#f6efe1 1.2px,transparent 1.6px)}html[data-theme=sepia] .book-cover[style*="--cv-p:3"]::before{background-image:linear-gradient(#f6efe1 1px,transparent 1px)}html[data-theme=sepia] .book-cover.has-img{background:#f0e6da}html[data-theme=sepia] .book-cover.has-img small{background:#634636cc}html[data-theme=sepia] .ink-mode{background:#f1e7dc}html[data-theme=sepia] .ink-mode button.active{background:#634636!important}html[data-theme=sepia] .ink-aicard.active{background:#f0e6db;border-color:#856047;color:#573827}html[data-theme=sepia] .ink-lbox{border:2px dashed #856047;background:#8861490d}html[data-theme=sepia] .ink-lbox .ink-it-bar button:hover{background:#f1e7dc}html[data-theme=sepia] .ink-lcount{color:#784e36}html[data-theme=sepia] .ink-ov-p{border:1px solid #ddcdb9;background:#f6efe1}html[data-theme=sepia] .ink-ov-p.cur{border-color:#856047}html[data-theme=sepia] .ink-ov-p figcaption button{border:1px solid #decdba;background:#f2eae0}html[data-theme=sepia] .nav-group{color:#423024}html[data-theme=sepia] .nav{color:#563827}html[data-theme=sepia] .nv-ic{background:color-mix(in srgb,var(--nh) 13%,#f6efe1)}html[data-theme=sepia] .nav:hover .nv-ic{background:color-mix(in srgb,var(--nh) 22%,#f6efe1)}html[data-theme=sepia] .nav.active .nv-ic{background:#f6efe12b}html[data-theme=sepia] .nav:focus-visible{outline:3px solid #d6c1aa}html[data-theme=sepia][data-bg=dots] body{background-image:radial-gradient(circle,#8b634b2e 1.1px,transparent 1.5px)}html[data-theme=sepia][data-bg=linen] body{background-color:#f1ebdb;background-image:repeating-linear-gradient(0deg,#8a74500a 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#8a74500a 0 1px,transparent 1px 4px),radial-gradient(ellipse at 20% 0%,#f7f2e9 0,transparent 60%)}html[data-theme=sepia] .look-label{color:#423024}html[data-theme=sepia] .look-opt{border:1.5px solid #dccbb7;background:#f6efe1;color:#563827}html[data-theme=sepia] .look-opt.on{border-color:#856047;background:#634636}html[data-theme=sepia] .bg-tile{border:1.5px solid #dccbb7;background:#f6efe1;color:#563827}html[data-theme=sepia] .bg-tile small{color:#423024}html[data-theme=sepia] .bg-tile.on{border-color:#856047}html[data-theme=sepia] .bg-sw{background-color:#f2e9de}html[data-theme=sepia] .bg-sw.bg-dots{background-image:radial-gradient(circle,#8b634b66 1px,transparent 1.4px)}html[data-theme=sepia] .bg-sw.bg-linen{background-color:#f1ebdb}html[data-theme=sepia] .muted{color:#423024}html[data-theme=sepia] .eyebrow{color:#784e36}html[data-theme=sepia] .brand-word{background:linear-gradient(100deg,#f6efe1 0%,#e1eed1 40%,#f3d38e 50%,#e1eed1 60%,#f6efe1 100%)}html[data-theme=sepia] .fab-status{background:#f6efe1!important}html[data-theme=sepia] button.primary::after,html[data-theme=sepia] .btn-link.primary::after{background:linear-gradient(90deg,transparent,#f6efe155,transparent)}html[data-theme=sepia] .skeleton,html[data-theme=sepia] .cv-loading{background:linear-gradient(100deg,#eee2d5 30%,#f3ece0 50%,#eee2d5 70%)}html[data-theme=sepia] .ink-wrap.flip-next::after,html[data-theme=sepia] .ink-wrap.flip-prev::after,html[data-theme=sepia] .ink-wrap.flip-open::after{background:linear-gradient(90deg,#ede3cf,#f8f6ed 18%,#f3ede0 82%,#e4d5b8)}html[data-theme=sepia] .ink-wrap.flip-open::after{background:linear-gradient(135deg,#855e48,#674938)}html[data-theme=sepia] .book-flip .bf-page{background:linear-gradient(90deg,#ebdfc9,#f9f6ee 12%)}html[data-theme=sepia] .sp-page{background:#f6efe1}html[data-theme=sepia] .sp-page:not(:has(canvas))::before{background:linear-gradient(100deg,#efe5d8 30%,#f6f0e6 50%,#efe5d8 70%)}html[data-theme=sepia] .sp-page .sp-no{background:#f6efe1cc}html[data-theme=sepia] .ns-page{background:#f6efe1}html[data-theme=sepia] .ns-page .ns-no{background:#f6efe1cc}html[data-theme=sepia] .ns-add{border:2px dashed #d8c5ae}html[data-theme=sepia] .vis-tag{background:#f6efe1e0;color:#423024}html[data-theme=sepia] .vis-tag.shared{background:#f0e5d9;color:#6d4731}html[data-theme=sepia] .upload-share-row{background:#f2e9de;border:1px solid #dccbb7}html[data-theme=sepia] body.is-sub .nav-pill{background:#eee3d5;color:#6d4731}html[data-theme=sepia] .plan-status.ok{border-left-color:#856047}html[data-theme=sepia] .ps-ic{background:#ece2ce}html[data-theme=sepia] .plan-status.ok .ps-ic{background:#f0e5d9;color:#6d4731}html[data-theme=sepia] .price-card{background:#f6efe1}html[data-theme=sepia] .price-card.hot{border-color:#856047;background:linear-gradient(180deg,#f2e9df,#f6efe1)}html[data-theme=sepia] .bank-box{background:linear-gradient(135deg,#634636,#694a39)}html[data-theme=sepia] .bank-box .secondary{background:#f6efe11f;border-color:#e2d3c355}html[data-theme=sepia] .pay-st{background:#ece2ce}html[data-theme=sepia] .pay-st.approved{background:#f0e5d9;color:#6d4731}html[data-theme=sepia] .pay-st.rejected{background:#f1dedb}html[data-theme=sepia] .btn-link{background:#f6efe1}html[data-theme=sepia] .code-big{background:linear-gradient(135deg,#f2e9de,#f5efe4);border:2px dashed #d8c5ae}html[data-theme=sepia] .so-row:hover{background:#f1e8dd}html[data-theme=sepia] .so-row.req{background:#f5efe4;border:1px solid #dbc8b4}html[data-theme=sepia] .so-av{background:linear-gradient(135deg,#8b634b,#694a39)}html[data-theme=sepia] .so-av.on::after{background:#8b634b}html[data-theme=sepia] .so-toast{background:#634636}html[data-theme=sepia] .so-ring{background:#f6efe1}html[data-theme=sepia] .chat-box{background:var(--paper,#f6efe1)}html[data-theme=sepia] .cb-head{background:linear-gradient(180deg,#f2e9de,transparent)}html[data-theme=sepia] .cb-inline{background:#f6efe1}html[data-theme=sepia] .cb-list{background:radial-gradient(circle at 20% 10%,#f2e9de,transparent 60%)}html[data-theme=sepia] .cb-bubble{background:#f6efe1}html[data-theme=sepia] .cb-msg.mine .cb-bubble{background:linear-gradient(135deg,#8b634b,#694a39)}html[data-theme=sepia] .cb-msg.sys .cb-bubble{background:#f5efe4;border-color:#dbc8b4}html[data-theme=sepia] .cb-form{background:#f6efe1}html[data-theme=sepia] .call-ui{background:radial-gradient(circle at 30% 0%,#634636,#634636 70%)}html[data-theme=sepia] .call-top .icon-btn,html[data-theme=sepia] .call-top .secondary{background:#f6efe114;border-color:#e2d3c333}html[data-theme=sepia] .ct{background:#634636}html[data-theme=sepia] .ct-av{background:linear-gradient(135deg,#8b634b,#c8902e)}html[data-theme=sepia] .call-side{background:#f6efe1}html[data-theme=sepia] .cb-btn{border:1.5px solid #e2d3c333;background:#f6efe112}html[data-theme=sepia] .cb-btn.on{background:#f6efe12a;border-color:#e2d3c3aa}html[data-theme=sepia] .call-mini{background:#634636}html[data-theme=sepia] .cm-dot{background:#8b634b}html[data-theme=sepia][data-theme=sepia] body .nv-ic{background:color-mix(in srgb,var(--nh) 18%,#eee4d2)}html[data-theme=sepia][data-theme=sepia] body .nav.active .nv-ic{background:#f6efe140}
/* ==== SEPIA-END ==== */