@charset "utf-8";
/* CSS Document */

@font-face {font-family:'Alba'; src: url(https://bigwebarticles.com/fonts/Questrial-Regular.ttf);}
@font-face {font-family:'Lobster'; src: url(https://bigwebarticles.com/fonts/Lobster-Regular.ttf);}
@font-face {font-family:'Poppins'; src: url(https://bigwebarticles.com/fonts/Poppins-Light.ttf);}
  
  
h2{ font-family:Arial, Helvetica, sans-serif; font-size:30px; font-weight:700; color:#666;}
h3{color:#333; margin-bottom:10px;}

    :root{--bg:#0f1724;--xcard:#0b1220;--muted:#9aa7bb;--accent:#60a5fa;--glass:rgba(255,255,255,0.04);--danger:#ef4444}
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;xbackground:linear-gradient(180deg,#071026 0%, #071720 100%);xcolor:#e6eef8;margin:0;xpadding:28px;min-height:100vh}
    .wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:20px; background-color:#9F0;}
    header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    h1{font-size:18px;margin:0}
    .card{xbackground:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 20px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    textarea{width:100%;min-height:360px;border-radius:8px;padding:12px;font-size:15px;  xbackground:var(--glass);       xcolor:inherit;border:1px solid rgba(255,255,255,0.03); resize:vertical; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:32px; color:#666;}
    .controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
    button{background:transparent;border:1px solid rgba(255,255,255,0.06);xcolor:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px}
    button.primary{background:linear-gradient(90deg,var(--accent),#7dd3fc);color:#072034;border:0}
    button.warn{background:var(--danger);color:white;border:0}
    .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .stat{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:10px;border-radius:8px}
    .stat h3{margin:0;font-size:12px;color:var(--muted)}
    .stat p{margin:6px 0 0;font-weight:700;font-size:16px}
    .word-list{max-height:420px;overflow:auto;margin-top:10px}
    .word-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:8px;margin-bottom:6px;  background:rgba(255,255,255,0.02)}
    .word-item b{font-size:14px}
    
	.preview{white-space:pre-wrap;padding:12px;border-radius:8px;  xbackground:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));min-height:160px; xborder:1px xdashed rgba(255,255,255,0.03);overflow:auto; line-height:32px; color:#666;}
	.preview:focus{outline:none;}
    .highlight{background:orange; color:#000}
    small.hint{color:var(--muted)}
    .top-actions{display:flex;gap:8px;align-items:center}
    footer{grid-column:1/-1;margin-top:12px; color:var(--muted);font-size:13px;text-align:center}
    @media (max-width:980px){.wrap{grid-template-columns:1fr;}.card{padding:12px}}
	
	#container{max-width:1434px; height:1200px; margin:0px auto; padding:0px auto;  margin-top:60px;}
	#top_frame{width:100%; height:540px; float:left; xbackground-color:#9FC;}
	.top_frame_left{width:72%; height:540px; float:left;}
	.top_frame_left_title{width:100%; height:40px; float:left; color:#777; font-size:26px; margin-top:15px; font-weight:700; background-color:#eee; border:1px solid; border-radius:4px; border-color:#ccc; line-height:34px; margin-bottom:6px; padding-left:20px;}
	.top_frame_right{width:24%; height:540px; float:right;  xbackground-color:#6CF; xmargin-top:14px;}
	#top_frame_right_outer{width:24%; height:620px; float:right;   xbackground-color:#6CF; xmargin-top:14px; }
	.top_frame_right_title{width:100%; height:38px; float:left; xbackground-color:#90F; font-size:24px; border:1px solid; border-color:#465367; border-radius:4px; padding-left:4%; background-color:#6c7e9d; color:#fff;}
	
	.originaltxt{ margin-top:30px; height:480px; border:1px solid; border-color:#ccc; border-radius:12px;  outline: none; padding-top:20px;}
	textarea:focus{ border-color:#444; /* new color when focused */}

	.quickstats_frame{width:100%; height:50px; float:left; xbackground-color:#069; border-bottom:1px solid; border-bottom-color:#ccc; color:#666;}
	.quickstat_label_left{width:auto; height:40px; float:left;   font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300; line-height:50px; xbackground-color:#9F0;}
	.quickstat_label_right{width:auto; height:40px; float:left;  font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:300; line-height:50px; xbackground-color:#F9C; margin-left:6px;}
	#container_mid_separator{width:100%; height:40px; float:left;}
	#container_mid_separator_inner{width:72%; height:40px; float:left;  xbackground-color:#9F0; text-align:center;}
	#container_mid_separator_inner_btn_holder{width: 830px; height:40px; margin:0px auto; padding:0px auto; float:center; xbackground-color:#F09;}
	.btnclass{width:130px; height:28px; float:right; margin-left:10px; color:#666; cursor:pointer;}
	.btnclass:hover{ background-color:#eee; border:none;}
	.btnclass:active{ background-color:#6ddbfb; border:none; color:white;}
	
 	
	#header{width:100%; height:70px; margin:0px auto; padding:0px auto; }
	#site_title{width:74%; min-width:1000px; height:70px; margin:0px auto; padding:0px auto; float:center;}
	#site_title_left{width:400px; height:66px; float:left; font-family:"Alba"; font-size:40px; font-weight:700; color:#09F;  margin-top:12px;}
	#slogan{width:320px; height:17px; float:right; xbackground-color:#63F; font-size:14px; margin-top:-6px; font-family:Arial, Helvetica, sans-serif; color:#f00;}
	
	#site_title_right{width:auto; height:40px; float:right;  margin-top:24px; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:16px; color:#043483;}
	.nav_btns{width:auto; height:30px; float:left; xbackground-color:#F90; cursor:pointer; color:#043483; }
	 .nav_btns a:link{color:#043483;}
	.nav_btns a:hover{color:#043483;}
	.nav_btns a:visited{color:#043483;}
	.nav_btns_separator{width:36px; height:30px; float:left;}
	




#mid_title{width:500px; height:100px; margin:0px auto; padding:0px auto; xbackground-color:#6CF; margin-top:160px;}










.footer{width:100%; height:167px; margin:0px auto; padding:0px auto;  margin-top:50px; border-top:1px solid; border-top-color:#ccc; }
#footer_top{width:684px; height:20px; margin:0px auto; padding:0px auto;  margin-top:40px;}
.footer_top_btns{width:auto; height:20px; float:left;  margin-left:15px; cursor:pointer;font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;   color:#888;}
.footer_top_btns a:link{ text-decoration:none; color:#888;}
.footer_top_btns a:hover{color:#06F; text-decoration:underline;}
.footer_top_btns a:visited{color:#888; text-decoration:none;}


#footer_mid{width:190px; height:40px; margin:0px auto; padding:0px auto;  margin-top:15px; }
.social_media_icons{width:38px; height:38px; float:left; margin-left:12px; cursor:pointer;}
#footer_lower{width:800px; height:auto; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:12px; }
#footer_bottom{width:800px; height:20px; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:2px;}



/*  HOME PAGE  */
#home_page_top{width:100%; height:467px; margin:0px auto; padding:0px auto;  xbackground-color:#F9F;}
#home_page_top_left{width:51%; height:467px; float:left; xbackground-color:#69F;}
#home_page_top_right{width:48%; height:467px; float:right; border-radius:15px;}

#home_page_mid_frame{xmax-width:1100px; width:100%;  height:630px; margin:0px auto; padding:0px auto; float:center; xbackground-color:#0F6;}
#mid_frame_left{width:40%; height:600px; float:left; xbackground-color:#39F;}
#mid_frame_right{width:50%; height:630px; float:right; xbackground-color:#9C0;}
#mid_frame_right_top_separator{width:100%; height:80px; float:left; xbackground-color:#F90;}
.mid_frame_right_content_frame{width:100%; height:auto; float:left; xbackground-color:#0CF; margin-top:24px;}
.mid_frame_right_icon_frame{width:30px; height:30px; float:left;  xbackground-color:#F3F;}
.mid_frame_right_text{width:calc(100% - 70px); height:auto; float:right;  xbackground-color:#FF0; font-family:"Poppins"; font-size:18px; line-height:22px; text-align:left;}