/* ================================
   GENERAL LAYOUT (1)
   ================================ */
* { box-sizing: border-box; }
html, body 
{	height: 100%;
	background: #0b0f1a;
	font-family: sans-serif;
	text-align: justify;
	overflow-x: hidden;
	overflow-y: scroll;
  	scrollbar-width: none;
  	-ms-overflow-style: none;
	margin: 0;
  	padding: 0;    	
}
canvas#bgCanvas 
{	position: fixed;
  	display: block;
	top: 0;
  	left: 0;
  	width: 100vw;
  	height: 100vh;
  	z-index: 1;	
}

#animToggleBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #00f5ff;
  color: #000;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 30;
}

.company
{	display:block;
	position: fixed;
	float: 	left;
	width:	100%;
	// border: solid cyan 1px;
	// background: rgb(10,50,100,0.7);
	background: tranparent;
	line-height: 1.5;
	color: white;
	text-align: center;
	padding: 0% 0% 0% 0%;
	z-index:20;
}

.links
{	display:block;
	position: relative;
	float: 	left;
	width:	100%;
	//border: solid yellow 2px;
	//background: rgb(255,255,255,1);
	//background: rgb(10,50,100,0.7);
	background: darkorange;
	line-height: 1.5;
	color: navy;
	text-align: center;
	text-shadow:2px 3px 4px gray;
	margin-top:3%;
	padding: 0.5% 0% 0.5% 0%;
	z-index:20;
}

.gl1
{	visibility:	visible;
	color:		white;
	font-size:	1em;
	font-weight:	bold;
	line-height:	1.5;
	text-align:	center;
	text-shadow:	none;	
	text-indent:	0%;
	
	font-style:	normal;
	font-variant:	normal;
	font-stretch:	normal;
	letter-spacing:	normal;
	text-decoration:none;
	text-transform:	none;
	text-shadow:	2px 3px 4px gray;
	white-space:	normal;
	word-spacing:	normal;

	opacity:	1;
	margin:		0px 0px 0px 0px;
	padding: 	6px 3px 6px 3px;
	z-index:	20;
}

.gl1:hover
{	color:		white;
	font-size:	1.1em;
	font-weight:	bold;
	white-space: 	nowrap;
	box-shadow:	2px 2px 2px gray;
	background-color: rgb(10,100,255);
	padding: 	7px 10px 7px 10px;
	z-index:	20;
}

.gl2
{	visibility:	visible;
	color:		navy;
	font-size:	1.2em;
	font-weight:	bold;
	line-height:	1.5;
	text-align:	center;
	text-shadow:	none;	
	text-indent:	0%;
	font-style:	normal;
	font-variant:	normal;
	font-stretch:	normal;
	letter-spacing:	normal;
	text-decoration:none;
	text-transform:	none;
	white-space:	normal;
	word-spacing:	normal;

	opacity:	1;
	margin:		0px 0px 0px 0px;
	padding: 	6px 3px 6px 3px;
	z-index:	20;
}

.gl2:hover
{	color:		white;
	font-size:	1.1em;
	font-weight:	bold;
	white-space: 	nowrap;
	box-shadow:	2px 2px 2px gray;
	background-color: rgb(10,100,255);
	padding: 	7px 10px 7px 10px;
	z-index:	20;
}
.divL
{	display:	block;
	position: 	absolute;
	float: 		left;
	
	left:		0%;
	top:		25%;
	width:		14%;
	//height:	100%;
	//border: 	solid white 1px;
	background:	transparent;
	//box-shadow: 	1px 4px 3px gray;
	text-shadow:	3px 2px 5px gray;

	color:		navy;
	font-Size: 	1em;
	//font-weight:	bold;
	text-align:	center;
	
	margin:		0px 0px 0px 0px;
	padding:	1% 1% 1% 1%;
	z-index:	10;
}

.divR
{	display:	block;
	position: 	absolute;
	float: 		right;
	
	right:		0%;
	top:		40%;
	width:		14%;
	//height:	100%;
	//border: 	solid white 1px;
	background:	transparent;
	//box-shadow: 	1px 4px 3px gray;
	text-shadow:	3px 2px 5px gray;

	color:		navy;
	font-Size: 	1.2em;
	//font-weight:	bold;
	text-align:	center;
	
	margin:		0px 0px 0px 0px;
	padding:	1% 1% 1% 1%;
	z-index:	10;
}

.add2anyL, .add2anyR
{	text-align:center;
	margin-left:20%;
}

#cc 
{	position: relative;
  	display: block;
  	width: 70%;
  	height: auto; //1000%;
	//border: 4px solid white;
	//background: cyan;
	margin: 11.2% auto 0 auto;	
  	//margin-top: 11.2%;
	z-index: 2;
}

#insd 
{	position: relative;
  	display: block;
  	width: 100%;
  	//height: 1000%;
  	//border: 2px solid white;
	//background: rgb(10,50,100); //transparent;
  	overflow-y: scroll;
  	scrollbar-width: none;
  	-ms-overflow-style: none;
	color: white;
	margin: 0 auto;
  	margin-top: 45%;
  	z-index: 3;
}

#insd::-webkit-scrollbar 
{	display: none;
}

#insd1, #insd2, #insd3, #insd4, #insd5
{	display: block;
	position:relative;
	float: 	left;
	width: 	100%;
	//height: 100px;
    	border: solid white 1px;
	//background: white;
	color: black;
	//vertical=align:center;
	margin:	0px 0px 0px 0px;
	padding:1% 1% 1% 1%;
	z-index:20;
}

#insd1
{	background: navy;
	color: white;
	text-align: center;
	fontt-size: 2em
	font-weight:bold;	
}

#insd2
{	background: white;
	color: black;
	text-align: justify;
	fontt-size: 1.2em;
	font-weight:normal;
	line-height: 1.5;
	//text-shadow: 2px 3px 3px gray;
	padding: 1% 3% 1% 3%;	
}

#insd3
{	background:transparent;
	color: black;
	text-align: justify;
	font-size: 1.2em;
	font-weight:normal;
	line-height: 1.5;
	//text-shadow: 2px 3px 3px gray;	
	//padding: 1% 3% 1% 3%;	
}

#insd4
{	background: white;
	color: black;
	text-align: justify;
	font-size: 1em;
	font-weight:normal;
	text-shadow: 2px 3px 3px gray;	
	//padding: 1% 3% 1% 3%;	
}

#insd5
{	background: white;
	color: black;
	text-align: center;
	font-size: 1.2em;
	font-weight:bold;
	//padding: 1% 3% 1% 3%;	
}

#insd7
{margin-bottom:5%;
}
	
.thanks
{	height: ;
	color:	white;
	text-align: center;	
	margin:	0px 0px 0px 0px;
	padding:2px 2px 2px 2px;
}

ul.list1 
{	list-style-position: outside;
 	list-style-type: circle;
	//list-style-image: url('sqpurple.gif');
	font-size:1.2em;
	margin: 1% 3% 1% 3%;
}

ul.list2 
{	list-style-position: outside;
 	list-style-type: square;
	//list-style-image: url('sqpurple.gif');
	font-size:1.2em;
	margin: 1% 3% 1% 3%;
}

.showhide1
{display:block;
 //display:none;
 // For developer tracking block (Error Tracking)
}
.showhide2
{//display:block;
 display:none;
 // For developer tracking block (Program Flow Tracking)
}
.showhide3
{display:block;
 //display:none;
 // For developer tracking block (API Prompt Tracking)
}
.showhide4
{display:block;
 //display:none;
 // For specific area in member page (Info/Facility/Utility 1)
}
.showhide5
{display:block;
 //display:none;
 // For specific area in member page (Info/Facility/Utility 2)
}
.showhide6
{display:block;
 //display:none;
 // For specific area in member page (Message 1)
}
.showhide7
{display:block;
 //display:none;
 // For specific area in member page (Message 2)
}
/* ================================
   GENERAL LAYOUT (2)
   ================================ */
.outer-div {
  width: 100%;
  display: flex;
  //background: #ffa94d;
  justify-content: center;
  padding: 1%;
}

.inner-div {
  width: 86%;
  //background: #ffa94d;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  overflow: hidden;
  box-sizing: border-box;
}

.top-div,
.bottom-div {
  background: ;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  color: navy;
  padding: 3%;
  font-weight: bold;
}

.top-div { border-radius: 20px 20px 0 0; }
.bottom-div { border-radius: 0 0 20px 20px; }

.middle-div {
  display: flex;
  gap: 20px;
  align-items: stretch; /* stretch columns to equal height */
  padding: 3%;
}

.middle-div .column {
  flex: 1;
  position: relative;
}

.middle-div .left img {
  width: 100%;
  border-radius: 10px;
  box-shadow: inset -5px 0 10px rgba(0,0,0,0.5); /* left shadow */
}

/* ================================
   SPIRAL DIVIDER
   ================================ */
.spiral-divider {
  width: 45px;                     /* Width of middle bar */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;           /* Stack symbols vertically */
  justify-content: flex-start;      /* Start from top */
  align-items: center;              /* Center horizontally */
  padding: 5px 0;                   /* Top/Bottom padding */
  //background: linear-gradient(to right, #b30000 40%, #660000 60%); /* Base color gradient */
  border-radius: 6px;
  //box-shadow: 
  //  inset 2px 0 4px rgba(255,255,255,0.3),
  //  inset -2px 0 4px rgba(0,0,0,0.4);
}

/* ------------------------
   SPIRAL SYMBOLS
   ------------------------ */
.spiral-divider span {
  display: block;                   /* Each symbol goes on a new line */
  font-size: 24px;                  /* Symbol size */
  line-height: 2;                 /* Base spacing (used if you want proportional spacing) */
  color: blue;                       /* Symbol color */
  margin-bottom: 10px;              /* ✅ CUSTOMIZABLE vertical gap */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Optional metallic shadow effect */
}

/* Adjust gap by changing margin-bottom:
   Example: smaller gap → 5px
            larger gap → 15px
*/


/* [S]=======================[indexFile] */
#app 
{display: flex; 
 //min-height: 100vh; 
 background: #f7f9fb; 
 flex-direction: column;  
}
#header 
{position: fixed; 
 display:flex; 
 top:0; 
 left:0; 
 right:0; 
 height: 64px; 
 background:navy; 
 color:white; 
 align-items:center; 
 justify-content:space-between; 
 padding: 0 16px; 
 z-index: 1000; 
}
#header-left, #header-center, #header-right 
{display:flex; 
 align-items:center; 
}
#header-center 
{flex:1; 
 justify-content:center; 
 font-weight:700; 
 letter-spacing:0.5px; 
}
.vsdiv
{position:relative;
 float:left; 
 width:100%;
 background:blue; 
 margin:0% 0% 0% 0%;
 padding:0% 0% 0% 0%;
}

#page 
{display:block; 
 position:relative; 
 margin-top:64px; 
 margin-bottom:56px; 
}
#main-content 
{display:block; 
 position:relative; 
 float:left; 
 width:86%; 
 border-radius:16px; 
 box-shadow: 0 6px 20px rgba(0,0,0,0.08); 
 background:#ffffff; 
 font-family: sans-serif; 
 font-size: 1em; 
 margin-left: 7%; 
 padding: 2% 2% 2% 2%; 
 z-index:10; 
}
#tabs 
{display:flex; 
 gap:8px; 
 margin-bottom:16px; 
}
#tab-login, #tab-signup 
{flex:1; 
 border-radius:12px; 
 background:#e2e8f0; 
 cursor:pointer; 
 text-align:center; 
 padding:10px; 
}
#tab-login.active, #tab-signup.active 
{background:#0ea5e9; color:#fff; 
}
#panel 
{border:1px solid #e2e8f0; 
 border-radius:14px; 
 background:#f8fafc; 
 padding:16px; 
}
#flash 
{border-radius:8px; 
 margin-bottom:12px; 
 padding:10px; 
}
#flash-ok 
{background:#d1fae5; 
 color:#065f46; 
}
#flash-err 
{background:#fee2e2; 
 color:#991b1b; 
}
.form-row 
{display:flex; 
 flex-direction:column; 
 margin-bottom:12px; 
}
.form-label 
{font-size:0.95em; 
 margin-bottom:6px; 
}
.form-input 
{border:1px solid #cbd5e1; 
 border-radius:10px; 
 padding:10px; 
}
.form-help 
{font-size:0.85em; 
 color:#475569; 
}
.error 
{display:block; 
 color:red; 
 font-size:0.85em; 
 margin-top:6px; 
}
.error-highlight 
{border-color:red !important; 
}
#btn-submit 
{border:none; 
 border-radius:12px; 
 background:#10b981; 
 color:#fff; 
 cursor:pointer; 
 font-weight:600; 
 padding:10px 16px; 
}
#btn-submit:active 
{transform: scale(0.98); 
}
#footer 
{display:flex; 
 position: fixed; 
 left:0; 
 right:0; 
 bottom:0; 
 width:100%;
 height:56px; 
 background:navy; 
 color:white; 
 align-items:center; 
 justify-content:space-between; 
 padding: 0 16px; 
 z-index: 1000; 
}
#footer-left
{
}
#footer-center 
{text-align:center; 
 flex:1; 
}
#footer-right
{
}
#responsive 
{display:none; 
}
#toggle-btn 
{border:none; 
 border-radius:10px; 
 background:#e2e8f0; 
 cursor:pointer;  
 color:#0f172a; 
 padding:10px 14px; 
}
#toggle-btn:active 
{transform: scale(0.98); 
}

/* [E]=======================[indexFile] */
/* [S]=======================[memberFile] */
/* [S]=====================================[S][For Service Section] */
/* ---------- Service Section Scroll ---------- */
.member-services {
    max-height: 400px;       /* Adjust the height as needed */
    overflow-y: auto;        /* Enable vertical scroll when content exceeds max-height */
    border: 1px solid #ccc;  /* Optional: border for visual separation */
    padding: 10px;           /* Optional: inner spacing */
    background-color: #f9f9f9; /* Optional: background */
}

/* Optional: style the table inside service section */
.member-services table {
    width: 100%;
    border-collapse: collapse;
}

.member-services th, 
.member-services td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

.member-services th {
    background-color: #e0e0e0;
}
/* [E]=====================================[E][For Service Section] */
/* [S]=====================================[S][For Scrollable Billing table:] */
.member-billing {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

.billing-scroll {
    max-height: 350px;   /* adjust as needed */
    overflow-y: auto;
    margin-top: 10px;
}

.billing-scroll table {
    width: 100%;
    border-collapse: collapse;
}

.billing-scroll th, .billing-scroll td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

.billing-scroll th {
    background-color: #e0e0e0;
    position: sticky;
    top: 0;
}

/* [E]=====================================[E][For Scrollable Billing table:] */
/*  ======================================================== */
/* Parent Container */
.grid-container
{	display: grid;
	grid-template-rows: auto; /* Automatically adjust row height */
	//grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
	grid-template-columns: 19% 19% 19% 19% 19%;
	gap: 10px; /* Spacing between grid items */
	
	width: 100%;
	border: solid navy 2px;
	background-color: lightblue;
	//margin-left: 15%;
	padding: 10px;
	//max-width: 100%; /* Prevent overflow */
	box-sizing: border-box; /* Include padding and border in width */
}

.header-row 
{	grid-column: span 5; /* Span all 5 columns */
  	background-color: navy; //#f0f0f0;
  	color: white;
	text-align: center;
  	font-weight: bold;
  	padding: 10px;
}

.grid-container > div 
{	padding: 10px;
  	border: 1px solid #ddd;
  	text-align: center;
}

.hide4big
{	display: none;
}

/*  ======================================================== */
/* Grid Items */
.grid-item 
{	border: solid #ccc 1px;
	padding: 10px;
	text-align: center;
	background-color: #f9f9f9;
	word-wrap: break-word; /* Prevent text overflow */
}

.csn
{	background-color: navy;
}

/*  ======================================================== */

/* [E]=======================[memberFile] */
/* [S]=======================[aiFile] */
/* +++++++++++++++++++++++++++++++[S][for sr1c-email-inc] */
.email-generator 
{     width: 70%; margin: auto; background: #fff; padding: 20px;
      border-radius: 8px; box-shadow: 0 0 10px #ccc; box-sizing: border-box;
}
    
h2 { text-align: center; margin-bottom: 20px; }
    
form 
{     display: grid; grid-template-columns: 1fr 1fr;
      gap: 20px;
}

label { font-weight: bold; margin-bottom: 5px; display: block; }
input, textarea, select 
{      width: 100%; padding: 10px; font-size: 14px; box-sizing: border-box;
}
    
.full-width { grid-column: 1 / 3; }
button 
{     grid-column: 1 / 3; padding: 12px; font-size: 16px;
      background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer;
}
    
button:hover { background: #004d99; }
@media (max-width: 768px) 
{     form { grid-template-columns: 1fr; }
      .full-width { grid-column: 1 / 2; }
}
/* +++++++++++++++++++++++++++++++[E}[for sr1c-email-inc] */

#devPrompt
{	display:block;
	width:100%;
	background:#f9f9f9;
	border:solid red 5px;
	border-radius:6px;
	color: black;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	white-space:pre-wrap; 
	word-wrap:break-word;
	margin-left:2%;	
	padding-left:2%;
	z-index:250;	
}

#srvOutput
{	width:100%;
	background:#f9f9f9;
	border:solid green 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	z-index:25;	
}

#ond
{	display:block;
	width:100%;
	background:#f9f9f9;
	border:solid navy 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	padding-bottom:2%;
	z-index:25;	
}

.ais-generator, .email-generator 
{     width: 100%; margin: auto; background: #fff; padding: 20px;
      border-radius: 8px; box-shadow: 0 0 10px #ccc; box-sizing: border-box;
}

#promptOp
{	white-space: 
	pre-wrap; word-wrap: 
	break-word;
	
	width:90%;
	background:#f9f9f9;
	border:solid brown 1px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	//margin-left:2%;	
	padding:2% 2% 2% 2%;
	z-index:25;	
}

#feedback
{	width:100%;
	background:#f9f9f9;
	border:solid red 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	z-index:25;	
}
h2 { text-align: center; margin-bottom: 20px; }
    
form 
{     display: grid; grid-template-columns: 1fr 1fr;
      gap: 20px;
}

label { font-weight: bold; margin-bottom: 5px; display: block; }
input, textarea, select 
{      width: 100%; padding: 10px; font-size: 14px; box-sizing: border-box;
}
    
.full-width { grid-column: 1 / 3; }
button 
{     grid-column: 1 / 3; padding: 12px; font-size: 16px;
      background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer;
}
    
button:hover { background: #004d99; }

/* [E]=======================[aiFile] */
/* [S]=======================[essentialFile] */

/* [E]=======================[essentialFile] */
/* [S]=======================[etcFile] */

/* [S]=======================[etcFile] */
/* [+]%%%%%%%%%%%%%%%%%%%%%%%[>>] */
/* [*][...][...][...][...][...][...][>>] */
/* ========================================
   UNIVERSAL MOBILE FONT SIZE CONTROL
   ======================================== */
@media (max-width: 768px) 
{ /* Apply to all elements */
  * {
    font-size: clamp(1em, 4vw, 2em) !important;
    line-height: 1.4 !important;
  }

  /* Special handling for headings (if you want them slightly bigger) */
  h1, h2, h3, h4, h5, h6 {
    font-size: clamp(1.2em, 5vw, 2em) !important;
    font-weight: bold;
  }

  /* Buttons and links should also respect this */
  button, a {
    font-size: clamp(1em, 4vw, 1.5em) !important;
  }
}
/* ======================================== */
/* ================================
   RESPONSIVE FOR MOBILE
   ================================ */
@media (max-width: 768px) 
{ .middle-div {
    flex-direction: column;          /* Stack columns vertically */
    gap: 10px;
  }
  .spiral-divider {
    width: 90%;                     /* Full width horizontal spiral */
    flex-direction: row;             /* Stack symbols horizontally */
    justify-content: center;
    padding: 5px 0;
  }
  .spiral-divider span {
    margin-bottom: 0;               /* Remove vertical gap in horizontal layout */
    margin-right: 5px;              /* Horizontal gap between symbols */
    font-size: 18px;                /* Smaller symbols for mobile */
  }
 .links
 { margin-top:0%;
 }

 #app, #header, .company, .links
 {// width:100%;}
}
@media (max-width: 1024px) 
{	.grid-container 
	{	grid-template-columns: 19% 19% 19% 19% 19%; /* Original column sizes */
       	}
}

@media (max-width: 768px) 
{	.links
	{ margin-top:3%;
	}
	#cc 
	{ width: 100%; 
	  //margin: 60% auto 0 auto;
	}
  	#insd 
	{ width: 100%; }
	.divL, .divR
	{ width: 100%;
	}
}

@media (max-width: 768px) 
{	.grid-container 
	{	//grid-template-columns: 1fr 1fr; /* Switch to 2 columns for smaller screens */
		grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
        }

	.header-row 
	{	grid-column: span 2; /* Span all columns in the new layout */
	}

	.grid-container > div
	{	//grid-template-columns: 1fr 1fr; /* Switch to 2 columns for smaller screens */
	}

	.hide4big
	{	display: block;
	}
}

@media (max-width: 480px) 
{	.grid-container 
	{	grid-template-columns: 1fr; /* Single column for very small screens */
        }

	.header-row 
	{	grid-column: span 1; /* Span all columns in the new layout */
	}

	.grid-container > div
	{	//grid-template-columns: 1fr 1fr; /* Switch to 2 columns for smaller screens */
	}
	.hide4big
	{	display: block;
	}
}
/* ========================================
   UNIVERSAL MOBILE RESPONSIVE CONTROL
   ======================================== */
/* ✅ Mobile / Small Screens */
@media (max-width: 768px) 
{/* Remove fixed from the main footer */
 #footer 
 {position: static;        /* Not fixed anymore */
  flex-direction: column;  /* Stack vertically */
  height: auto;
  padding: 10px;
  text-align: center;
 }

 /* Only footer-left stays fixed */
 #footer-left 
 {position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: navy;
  color: white;
  z-index: 1001;
  padding: 8px 0;
 }

 /* Center and Right scroll normally */
 #footer-center,#footer-right 
 {width: 100%;
  margin: 5px 0;
 }

 /* Add bottom padding to page content so fixed part won't overlap */
 body 
 {padding-bottom: 60px; /* adjust if needed */ }
}
@media (max-width: 768px) 
{     form { grid-template-columns: 1fr; }
      .full-width { grid-column: 1 / 2; }
}

/* ======================================== */