/**========================================================================
* ?                                ABOUT
* @product        :  Harvest (theme)
* @version        :  1.0  — autumn palette, SaaS-grade elevation & motion
*========================================================================**/

/* custom font */
@import url('./font/Roboto.css');

/* ============================================================
   DESIGN TOKENS
   Warm autumn palette: burnt orange / rust / amber over deep
   espresso-brown. Flat, no background texture or imagery —
   depth comes from elevation shadows and border, not gradients
   on the canvas itself.
   ============================================================ */
:root {
	/* surfaces */
	--fall-bg: #16110c;
	--fall-bg-elevated: #1f1810;
	--fall-bg-panel: #221a12;
	--fall-bg-panel2: #2a2015;
	--fall-border: rgba(255,186,120,0.10);
	--fall-border-strong: rgba(255,186,120,0.20);

	/* text */
	--fall-text: #f3e9dc;
	--fall-text-dim: #b8a690;

	/* brand */
	--fall-accent: #e2712b;     /* pumpkin — primary */
	--fall-accent2: #c1440e;    /* rust — secondary */
	--fall-gold: #e0a94e;       /* amber highlight */

	/* state */
	--fall-success: #8a9a4e;
	--fall-warn: #d98c2b;
	--fall-error: #c1443a;
	--fall-notify: #c1443a;

	/* motion */
	--fall-ease: cubic-bezier(.4,0,.2,1);
	--fall-ease-out: cubic-bezier(0,0,.2,1);

	/* elevation — warm-tinted shadows instead of pure black */
	--fall-shadow-sm: 0 1px 2px rgba(20,10,4,0.35);
	--fall-shadow-md: 0 6px 16px rgba(20,10,4,0.45);
	--fall-shadow-lg: 0 14px 32px rgba(20,10,4,0.55);

	/* radius scale */
	--fall-r-sm: 6px;
	--fall-r-md: 10px;
	--fall-r-lg: 14px;
}

/* ============================================================
   BASE — flat, no texture
   ============================================================ */
body{
	font-family:'Roboto',sans-serif;
	color: var(--fall-text);
	background: var(--fall-bg);
}
a {color: var(--fall-gold); transition: color .15s var(--fall-ease);}
a:hover { color: var(--fall-accent); }
button { background:transparent; color:var(--fall-text); }
input,textarea,.post_input_container{
	font-family:'Roboto',sans-serif,'FontAwesome';
	background: var(--fall-bg-elevated);
	color:var(--fall-text);
	border:1px solid var(--fall-border) !important;
	border-radius: var(--fall-r-sm);
	transition:border-color .15s var(--fall-ease), box-shadow .15s var(--fall-ease);
}
input:focus,textarea:focus,.post_input_container:focus-within{
	border-color: color-mix(in srgb, var(--fall-accent) 65%, #333) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fall-accent) 22%, transparent);
}
.setdef { color:var(--fall-text); }

.bback { background: rgba(255,186,120,0.04); }
.bbackb { background: rgba(255,186,120,0.03); border:1px solid var(--fall-border); }
.bhover, .bhoverr { transition: background .15s var(--fall-ease); }
.bhover:hover, .bhoverr:hover { background: rgba(226,113,43,0.08); }
.bbackhover { background: rgba(255,186,120,0.03); transition: background .15s var(--fall-ease), transform .15s var(--fall-ease); }
.bbackhover:hover { background: rgba(226,113,43,0.10); }
.bbackhoverb { background: rgba(255,186,120,0.02); transition: background .15s var(--fall-ease), border-color .15s var(--fall-ease); }
.bbackhoverb:hover { background: rgba(226,113,43,0.05); border:1px solid var(--fall-border); }
.blisting { border-bottom: 1px solid var(--fall-border); transition: background .15s var(--fall-ease); }
.blisting:hover { background: rgba(226,113,43,0.07); }
.blist { border-bottom: 1px solid var(--fall-border); }

/* private panel top */
.back_ptop {
	background: var(--fall-bg-panel2);
	color: var(--fall-text);
	border-bottom: 1px solid var(--fall-border);
}

.bpmenu { transition: background .15s var(--fall-ease); border-radius: var(--fall-r-sm); }
.bpmenu:hover { background: rgba(226,113,43,0.09); }
.bsub { background: rgba(255,186,120,0.03); transition: background .15s var(--fall-ease); }
.bsub:hover { background: rgba(226,113,43,0.10); }
.bmenu, .submenu { border-bottom:1px solid var(--fall-border); transition: background .15s var(--fall-ease); }
.bmenu:hover, .submenu:hover { background: rgba(226,113,43,0.07); }
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { box-shadow: var(--fall-shadow-sm); }
.bselected { background: rgba(226,113,43,0.14); }
.rselected { background: rgba(226,113,43,0.14); }
.pselected { color: var(--fall-accent); }
.cselected, .liked { background: rgba(226,113,43,0.08); }
.pag_btn{ background: rgba(255,186,120,0.05); color: var(--fall-text-dim); border-radius: var(--fall-r-sm); transition: background .15s var(--fall-ease), color .15s var(--fall-ease); }
.pagselected,.pag_btn:hover{ background: rgba(226,113,43,0.18); color: var(--fall-text); }

.gtag{
	background: linear-gradient(135deg, var(--fall-accent2), var(--fall-accent));
	border:1px solid rgba(255,255,255,.10);
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.15), var(--fall-shadow-sm);
}

.bborder { border-bottom:1px solid var(--fall-border); }
.tborder { border-top:1px solid var(--fall-border); }
.lborder, .ppanel { border-left:1px solid var(--fall-border); }
.rborder { border-right:1px solid var(--fall-border); }
.fborder { border:1px solid var(--fall-border); }

.float_top,.float_ctop {
	border-bottom:1px solid var(--fall-border);
	background: var(--fall-bg);
	box-shadow: var(--fall-shadow-sm);
}

.bhead{
	background: var(--fall-bg-panel2);
	color: var(--fall-text);
	box-shadow: var(--fall-shadow-sm);
	border-bottom: 1px solid var(--fall-border);
}
.bsidebar{ background: var(--fall-bg-panel); color: var(--fall-text); border-right: 1px solid var(--fall-border); }
.modal_top,.pro_top{ background: var(--fall-bg-panel2); color: var(--fall-text); }
.bfoot{ background: var(--fall-bg-panel2); color: var(--fall-text); }
.foot{ background: var(--fall-bg-panel); color: var(--fall-text); }

.backglob{ background: var(--fall-bg-panel); }
.back_chat{ background: var(--fall-bg); }
.back_priv,.back_panel,.back_modal,.page_element{ background: var(--fall-bg-panel); }
.back_menu{ background: var(--fall-bg-panel2); }
.back_pmenu{ background: var(--fall-bg-panel); color: var(--fall-text); }
.back_box{ background: var(--fall-bg-panel2); }
.back_input{ background: var(--fall-bg-elevated); }
.back_quote{ background: var(--fall-bg-panel2); }

.theme_color{ color: var(--fall-accent); }
.default_color { color:#333; }
.error  { color: var(--fall-error); }
.success { color: var(--fall-success); }
.warn { color: var(--fall-warn); }

/* ============================================================
   BUTTONS — SaaS-style: flat gradient, crisp elevation on hover,
   snappy press state, no glow-spam
   ============================================================ */
.theme_btn,.back_theme{
	position: relative;
	background: linear-gradient(135deg, var(--fall-accent), var(--fall-accent2));
	color:#fff;
	border-radius: var(--fall-r-sm);
	box-shadow: var(--fall-shadow-sm);
	transition: transform .12s var(--fall-ease), box-shadow .15s var(--fall-ease), filter .15s var(--fall-ease);
}
.theme_btn:hover,.back_theme:hover{ box-shadow: var(--fall-shadow-md); filter: brightness(1.06); }
.theme_btn:active,.back_theme:active{ transform: scale(.97); box-shadow: var(--fall-shadow-sm); }

.default_btn,.defaultd_btn,.back_default { background: var(--fall-bg-panel2); color: var(--fall-text); border-radius: var(--fall-r-sm); transition: filter .15s var(--fall-ease), transform .12s var(--fall-ease); }
.default_btn:hover,.defaultd_btn:hover,.back_default:hover{ filter: brightness(1.2); }
.default_btn:active,.defaultd_btn:active,.back_default:active{ transform: scale(.97); }

.ok_btn { background: var(--fall-success); color:#0c1405; border-radius: var(--fall-r-sm); transition: filter .15s var(--fall-ease), transform .12s var(--fall-ease); }
.ok_btn:hover{ filter:brightness(1.1); }
.ok_btn:active{ transform: scale(.97); }

.warn_btn { background: var(--fall-warn); color:#231400; border-radius: var(--fall-r-sm); transition: filter .15s var(--fall-ease), transform .12s var(--fall-ease); }
.warn_btn:hover{ filter:brightness(1.1); }
.warn_btn:active{ transform: scale(.97); }

.delete_btn { background: var(--fall-error); color:#fff; border-radius: var(--fall-r-sm); transition: filter .15s var(--fall-ease), transform .12s var(--fall-ease); }
.delete_btn:hover{ filter:brightness(1.1); }
.delete_btn:active{ transform: scale(.97); }

.send_btn { color:#fff; position: relative; overflow: hidden; }

.user { color: var(--fall-text); }
.chat_system { color: var(--fall-text-dim); }
.offline { opacity:0.45; filter: grayscale(60%) brightness(0.9); transition: opacity .15s var(--fall-ease), filter .15s var(--fall-ease); }
.menui,.subi { color: var(--fall-accent); }

.reply_item {
	background: var(--fall-bg-panel2);
	border-radius: var(--fall-r-md);
	border: 1px solid var(--fall-border);
}
.main_post_item { color: var(--fall-text-dim); }
.input_item { color: var(--fall-text-dim); }
.target_private, .hunt_quote {color:#fff; background: var(--fall-bg-panel2); border: 1px solid var(--fall-border); border-radius: var(--fall-r-md);}
.hunter_private, .targ_quote {color:#fff; background: linear-gradient(135deg, var(--fall-accent2), #8a3208); border-radius: var(--fall-r-md);}
.cquote { background: rgba(255,186,120,0.12); color: var(--fall-text); }

.tab_menu { background: var(--fall-bg-panel); box-shadow: var(--fall-shadow-sm); }
.tab_menu_item { position: relative; transition: color .15s var(--fall-ease); }
.tab_menu_item::after {
	content:'';
	position:absolute; left:0; right:0; bottom:-1px;
	height:2px;
	background: var(--fall-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s var(--fall-ease);
}
.tab_menu_item:hover::after, .tab_selected::after { transform: scaleX(1); }
.tab_selected { background: rgba(226,113,43,0.10); color: var(--fall-accent); }

.modal_mback { background: rgba(255,186,120,0.05); }
.modal_mborder { border-bottom: 1px solid var(--fall-border); }
.modal_selected { background: rgba(226,113,43,0.14); }
.modal_back { background-color: rgba(10,6,3,0.6); }

/* chat logs — entrance animation on new bubble */
.mbubble {
	background: var(--fall-bg-elevated);
	border: 1px solid var(--fall-border);
	border-radius: var(--fall-r-md);
	animation: fall-in-up .24s var(--fall-ease-out);
}
.sys_log { }
.topic_log{ background: var(--fall-bg-panel2); color: var(--fall-text); border-radius: var(--fall-r-sm); }

.bprogress { background: linear-gradient(90deg, var(--fall-accent2), var(--fall-accent)); color:#fff; border-radius: 999px; overflow:hidden; }

.bnotify {
	background: var(--fall-notify);
	color:#fff;
	border-radius: 999px;
	box-shadow: var(--fall-shadow-sm);
	animation: fall-toast-in .25s var(--fall-ease-out);
}
.foot_notify, .head_notify { border:1px solid var(--fall-border-strong); }

.sub_date { color:#a08e77; }
.sub_chat, .sub_priv { color:#c9b8a3; }
.sub_text,.list_mood{ color: var(--fall-text-dim); }
.list_mood{ font-weight:300; }
.plikes { background-color: rgba(226,113,43,0.14); color: var(--fall-text); border-radius: 999px; }
.bspin { color: color-mix(in srgb, var(--fall-accent) 55%, transparent); }

.my_notice {
	color:#fff;
	background: linear-gradient(135deg, var(--fall-accent), var(--fall-accent2));
	border-radius: var(--fall-r-md);
}
.system_text { background:#efe3d3; color:#4a3a26; border-radius: var(--fall-r-sm); }
.back_page { background: var(--fall-bg); color: var(--fall-text); }
.post_video { background:#000; }

/* jQuery-UI slider — restyled */
.boom_slider .ui-widget-content { background: var(--fall-bg-panel2); }
.boom_slider .ui-state-default { background: var(--fall-accent) !important; }
.boom_slider .ui-state-active { background: var(--fall-accent) !important; }
.boom_slider .ui-slider-range { background: linear-gradient(90deg, var(--fall-accent2), var(--fall-accent)); }

.selectboxit-list, .selectboxit-btn { background-color: var(--fall-bg-elevated); color: var(--fall-text-dim); border:1px solid var(--fall-border) !important; border-radius: var(--fall-r-sm); transition: border-color .15s var(--fall-ease); }
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: var(--fall-bg-panel2); color: var(--fall-text); }
.selectboxit-default-arrow { border-top: 4px solid var(--fall-accent2); }
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { background: var(--fall-bg-panel2); color: var(--fall-text); }
.selectboxit-options { background: var(--fall-bg-elevated); }
.selectboxit-list .selectboxit-option-anchor { color: var(--fall-text-dim); }

/* ============================================================
   CARD LIFT — opt-in. class="fall-card"
   ============================================================ */
.fall-card {
	border: 1px solid var(--fall-border);
	border-radius: var(--fall-r-md);
	box-shadow: var(--fall-shadow-sm);
	transition: transform .15s var(--fall-ease), box-shadow .15s var(--fall-ease), border-color .15s var(--fall-ease);
}
.fall-card:hover {
	transform: translateY(-2px);
	border-color: var(--fall-border-strong);
	box-shadow: var(--fall-shadow-md);
}

.fall-live-dot {
	position: relative;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--fall-notify);
	display: inline-block;
}
.fall-live-dot::before {
	content:'';
	position:absolute; inset:-4px;
	border-radius:50%;
	border: 1px solid var(--fall-notify);
	animation: fall-ring 1.6s var(--fall-ease-out) infinite;
}
.fall-glow-icon { animation: fall-glow 1.8s ease-in-out infinite; }

/* ============================================================
   CUSTOM RANGE SLIDERS
   JS sets style="--fall-fill: 40%" to drive the fill position.
   ============================================================ */
input[type="range"].fall-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fall-accent) 0%, var(--fall-accent) var(--fall-fill, 50%), var(--fall-bg-panel2) var(--fall-fill, 50%), var(--fall-bg-panel2) 100%);
	outline: none;
	cursor: pointer;
	transition: box-shadow .15s var(--fall-ease);
}
input[type="range"].fall-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--fall-gold);
	border: 2px solid var(--fall-accent2);
	box-shadow: var(--fall-shadow-sm);
	cursor: pointer;
	transition: transform .12s var(--fall-ease), box-shadow .15s var(--fall-ease);
}
input[type="range"].fall-slider::-webkit-slider-thumb:hover,
input[type="range"].fall-slider:active::-webkit-slider-thumb {
	transform: scale(1.15);
	box-shadow: var(--fall-shadow-md);
}
input[type="range"].fall-slider::-moz-range-track {
	height: 6px; border-radius: 999px; background: var(--fall-bg-panel2);
}
input[type="range"].fall-slider::-moz-range-progress {
	height: 6px; border-radius: 999px; background: var(--fall-accent);
}
input[type="range"].fall-slider::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--fall-gold); border: 2px solid var(--fall-accent2);
	box-shadow: var(--fall-shadow-sm);
	cursor: pointer;
	transition: transform .12s var(--fall-ease), box-shadow .15s var(--fall-ease);
}
input[type="range"].fall-slider::-moz-range-thumb:hover { transform: scale(1.15); }

/* ============================================================
   MESSAGE-SENT ANIMATION
     el.classList.add('fall-just-sent');
     setTimeout(() => el.classList.remove('fall-just-sent'), 500);
   ============================================================ */
.fall-just-sent {
	position: relative;
	overflow: hidden;
}
.fall-just-sent::after {
	content:'';
	position:absolute;
	top:0; left:-30%;
	width:30%; height:100%;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fall-gold) 85%, #fff), transparent);
	animation: fall-send-sweep .5s var(--fall-ease-out);
}
.send_btn.fall-just-sent {
	animation: fall-press-pop .3s var(--fall-ease-out);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* entrance for cards / message bubbles */
@keyframes fall-in-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* toast / notification slide-fade-in */
@keyframes fall-toast-in {
	from { opacity: 0; transform: translateY(-6px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* expanding status ring — replaces flat opacity pulse */
@keyframes fall-ring {
	0%   { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* soft icon glow, used sparingly (top-tier ranks, featured items) */
@keyframes fall-glow {
	0%, 100% { filter: drop-shadow(0 0 2px var(--fall-gold)); }
	50%      { filter: drop-shadow(0 0 6px var(--fall-gold)); }
}

/* send sweep across an element right after submit */
@keyframes fall-send-sweep {
	from { left: -30%; }
	to   { left: 100%; }
}

/* snappy press-pop for the send button */
@keyframes fall-press-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(.92); }
	100% { transform: scale(1); }
}

/* skeleton loading shimmer — attach to any .fall-skeleton block */
.fall-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--fall-bg-panel2);
	border-radius: var(--fall-r-sm);
}
.fall-skeleton::after {
	content:'';
	position:absolute; inset:0;
	background: linear-gradient(100deg, transparent 35%, rgba(255,186,120,0.10) 50%, transparent 65%);
	background-size: 200% 100%;
	animation: fall-skeleton-sweep 1.4s linear infinite;
}
@keyframes fall-skeleton-sweep {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}