/* Chatterz sign-in page: notebook-paper education look */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Nunito:wght@500;600;700;800&display=swap');

.sc_wrap {
	--paper:#fbf7ec; --line:#cfe0f3; --margin:#f3a9a0; --ink:#1d2b64; --ink2:#3a4a86; --text:#33395a; --muted:#6b7194;
	--hl:#ffd84d; --green:#1f7a5c; --coral:#ef6a4c; --sky:#e8f1ff; --card:#ffffff; --shadow:0 18px 40px rgba(29,43,100,.12);
	width:100%; min-height:100%; color:var(--text);
	font-family:'Nunito','Trebuchet MS',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.55;
	background-color:var(--paper);
	background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--line) 35px, var(--line) 36px);
	position:relative; overflow-x:hidden;
}
.sc_wrap *, .sc_wrap *:before, .sc_wrap *:after { box-sizing:border-box; }
.sc_wrap:before { content:''; position:absolute; top:0; bottom:0; left:72px; width:2px; background:var(--margin); opacity:.7; }
.sc_paper { position:relative; max-width:1180px; margin:0 auto; padding:0 28px 0 28px; }

/* top bar */
.sc_top { display:flex; align-items:center; justify-content:space-between; padding:22px 0 8px; }
.sc_brand { display:flex; align-items:center; gap:12px; }
#login_logo { height:44px; width:44px; display:block; }
.sc_brand_name { font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:22px; color:var(--ink); letter-spacing:-.2px; }
.sc_top_right { display:flex; align-items:center; gap:14px; }
.sc_link_btn { font:700 15px 'Nunito',sans-serif; color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:999px; padding:8px 18px; cursor:pointer; transition:.15s; }
.sc_link_btn:hover { background:var(--ink); color:#fff; }
.sc_wrap #intro_lang { position:static; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid var(--line); border-radius:50%; }

/* hero */
.sc_hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; padding:34px 0 28px; }
.sc_badge { display:inline-block; background:var(--sky); color:var(--ink2); font-weight:800; font-size:13px; letter-spacing:.3px; border-radius:999px; padding:6px 14px; margin-bottom:18px; }
.sc_badge i { margin-right:6px; color:var(--coral); }
.sc_h1 { font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:62px; line-height:1.04; color:var(--ink); margin:0 0 18px; letter-spacing:-1.2px; }
.sc_mark { background:linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding:0 6px; margin:0 -6px; border-radius:4px; }
.sc_lead { font-size:19px; color:var(--text); max-width:520px; margin:0 0 26px; }
.sc_cta { display:flex; flex-wrap:wrap; gap:12px; }
.sc_btn { font:800 16px 'Nunito',sans-serif; border-radius:14px; padding:14px 24px; cursor:pointer; border:2px solid var(--ink); transition:transform .12s, box-shadow .12s, background .12s; }
.sc_btn i { margin-right:8px; }
.sc_btn_main { background:var(--ink); color:#fff; box-shadow:0 5px 0 #0f1a45; }
.sc_btn_main:hover { transform:translateY(-2px); box-shadow:0 7px 0 #0f1a45; }
.sc_btn_main:active { transform:translateY(3px); box-shadow:0 2px 0 #0f1a45; }
.sc_btn_alt { background:var(--hl); color:var(--ink); box-shadow:0 5px 0 #c9a413; }
.sc_btn_alt:hover { transform:translateY(-2px); box-shadow:0 7px 0 #c9a413; }
.sc_btn_alt:active { transform:translateY(3px); box-shadow:0 2px 0 #c9a413; }
.sc_btn_ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.sc_btn_ghost:hover { border-color:var(--ink); }
.sc_small { margin:14px 0 0; font-size:13.5px; color:var(--muted); font-weight:600; }

.sc_subjects { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.sc_subjects li { background:#fff; border:2px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:700; font-size:14px; color:var(--ink2); transition:.15s; }
.sc_subjects li i { margin-right:6px; }
.sc_subjects li:nth-child(4n+1) i { color:var(--coral); }
.sc_subjects li:nth-child(4n+2) i { color:var(--green); }
.sc_subjects li:nth-child(4n+3) i { color:#d49a00; }
.sc_subjects li:nth-child(4n+4) i { color:#3d6bdc; }
.sc_subjects li:hover { transform:translateY(-2px) rotate(-1.5deg); border-color:var(--ink2); }

/* study desk */
.sc_desk { position:relative; padding:66px 14px 52px 22px; min-width:0; }
.sc_chat { background:var(--card); border:2px solid var(--ink); border-radius:18px; box-shadow:10px 10px 0 var(--hl), var(--shadow); padding:0 0 12px; transform:rotate(1.4deg); position:relative; }
.sc_chat_head { display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:2px dashed var(--line); font-size:14px; color:var(--ink); }
.sc_chat_head b { margin-left:8px; font-weight:800; }
.sc_chat_head em { margin-left:auto; font-style:normal; font-size:12px; color:var(--green); font-weight:800; }
.sc_dot { width:10px; height:10px; border-radius:50%; background:var(--coral); }
.sc_dot:nth-child(2) { background:var(--hl); }
.sc_dot:nth-child(3) { background:#5cc59a; }
.sc_msg { display:flex; gap:12px; padding:12px 16px 0; }
.sc_msg b { font-size:14px; color:var(--ink); }
.sc_msg p { margin:2px 0 0; font-size:14.5px; line-height:1.45; color:var(--text); }
.sc_av { flex:0 0 38px; width:38px; height:38px; border-radius:50%; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.sc_av1 { background:#ef6a4c; } .sc_av2 { background:#3d6bdc; } .sc_av3 { background:#1f7a5c; }
.sc_q { display:inline-block; background:var(--hl); color:var(--ink); border-radius:50%; width:20px; height:20px; text-align:center; font-weight:800; font-size:13px; line-height:20px; }
.sc_file { display:inline-block; margin-top:6px; background:var(--sky); color:var(--ink2); border-radius:8px; padding:3px 10px; font-weight:700; font-size:13px; }
.sc_solved { position:absolute; right:-14px; bottom:-16px; background:var(--green); color:#fff; font-weight:800; font-size:14px; border-radius:999px; padding:8px 16px; transform:rotate(-4deg); box-shadow:0 6px 14px rgba(31,122,92,.35); }
.sc_note { position:absolute; z-index:2; background:#fff6a8; color:#5a4b00; font-size:13.5px; line-height:1.4; padding:12px 14px; border-radius:4px 4px 14px 4px; box-shadow:0 8px 18px rgba(0,0,0,.14); font-weight:700; }
.sc_note i { color:var(--coral); margin-right:4px; }
.sc_note_a { top:4px; left:-6px; width:176px; transform:rotate(-4deg); }
.sc_note_b { bottom:4px; left:-4px; background:#d9f0e6; color:#14513d; transform:rotate(4deg); }
.sc_squiggle { position:absolute; top:26px; right:30px; width:92px; height:16px; color:var(--coral); }

/* cards */
.sc_cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; padding:26px 0 10px; }
.sc_card { background:var(--card); border:2px solid var(--line); border-radius:18px; padding:24px 24px 22px; transition:.18s; }
.sc_card:hover { transform:translateY(-4px); border-color:var(--ink2); box-shadow:var(--shadow); }
.sc_card h2 { font-family:'Fraunces',Georgia,serif; font-size:22px; color:var(--ink); margin:14px 0 6px; font-weight:800; }
.sc_card p { margin:0; font-size:15.5px; color:var(--text); }
.sc_ico { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.sc_ico1 { background:#ffe6e0; color:var(--coral); } .sc_ico2 { background:#e1ecff; color:#3d6bdc; } .sc_ico3 { background:#dcf3e9; color:var(--green); }

/* about */
.sc_about { margin:34px 0 20px; background:var(--ink); color:#eaf0ff; border-radius:22px; padding:34px 36px; position:relative; overflow:hidden; }
.sc_about:after { content:'\f19d'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:-10px; bottom:-34px; font-size:170px; color:rgba(255,255,255,.07); }
.sc_about h2 { font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:28px; margin:0 0 10px; color:#fff; }
.sc_about p { margin:0 0 18px; max-width:760px; font-size:16.5px; color:#dbe5ff; }
.sc_values { display:flex; flex-wrap:wrap; gap:10px; }
.sc_values span { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 14px; font-weight:700; font-size:14px; color:#fff; }
.sc_values i { color:var(--hl); margin-right:6px; }

/* footer from the core template, matched to the paper */
.sc_wrap #main_footer { background:transparent; color:var(--muted); }
.sc_wrap #main_footer a { color:var(--ink2); }
.sc_wrap #main_footer .theme_color { color:var(--ink); }

/* tablet + phone */
@media screen and (max-width:980px){
	.sc_hero { grid-template-columns:1fr; gap:30px; }
	.sc_h1 { font-size:50px; }
	.sc_desk { max-width:520px; margin:0 auto; width:100%; }
	.sc_cards { grid-template-columns:minmax(0,1fr); }
	.sc_hero { grid-template-columns:minmax(0,1fr); }
}
@media screen and (max-width:600px){
	.sc_wrap:before { left:14px; }
	.sc_paper { padding:0 18px 0 28px; }
	.sc_brand_name { font-size:18px; }
	#login_logo { height:38px; width:38px; }
	.sc_h1 { font-size:40px; letter-spacing:-.8px; }
	.sc_lead { font-size:17px; }
	.sc_btn { width:100%; }
	.sc_link_btn { display:none; }
	.sc_note_a { left:-8px; width:150px; }
	.sc_desk { padding:56px 6px 50px 10px; }
	.sc_about { padding:26px 22px; }
}
@media (prefers-reduced-motion:no-preference){
	.sc_chat { animation:sc_float 7s ease-in-out infinite; }
	.sc_note_a { animation:sc_float2 6s ease-in-out infinite; }
	@keyframes sc_float { 0%,100% { transform:rotate(1.4deg) translateY(0); } 50% { transform:rotate(1.4deg) translateY(-6px); } }
	@keyframes sc_float2 { 0%,100% { transform:rotate(-5deg) translateY(0); } 50% { transform:rotate(-5deg) translateY(5px); } }
}