body, h1, h2 {
	font-family: 'Noto Sans', sans-serif;
}

body {
    padding: 2em 2em 0 2em;
    max-width: 1024px;
    margin: 0 auto !important;
    background:white;
     min-height:100%;
     min-width:82.5%;
     display: table;

}
html { height:100%}


.content {
  display: table-row-group;
}

#versionb {
    display: table-footer-group;
}

.logocolor {
	color: #56e85d;
}

a {
	color: #369;
}
pre {line-height:15px; font-size:12px; font-family:sans-serif}
#insertcoin {
	margin: 0 auto;
	width: 480px;
	text-align: center;
	margin-bottom: 10px;
}

#status {
	margin: 0 auto;
	width: 480px;
	text-align: center;
	margin-top: 10px;
}
#motd {
	border-radius: 20px;
	width: 480px;
	margin: 0 auto;
	padding: 6px;
	border: 1px solid #ffff4a;
	background: #ffff96;
	background: linear-gradient(0deg, rgba(255,254,210,1) 0%, rgba(255,255,150,1) 100%);
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
}
.motd_hover:hover {
    background: #ffd996 !important;
    border:1px solid #ffd24a !important;
    background: linear-gradient(0deg, rgba(255,210,74,1) 0%, rgba(255,233,167,1) 100%) !important;
}

#motd_premium {
	border-radius: 20px;
	width: 480px;
	margin: 0 auto;
	padding: 6px;
	border: 1px solid #ffff4a;
	background: #ffff96;
	background: linear-gradient(0deg, rgba(255,254,210,1) 0%, rgba(255,255,150,1) 100%);
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
}
.motd_premium_hover:hover {
    background: #ffd996 !important;
    border:1px solid #ffd24a !important;
    background: linear-gradient(0deg, rgba(255,210,74,1) 0%, rgba(255,233,167,1) 100%) !important;
}


#drop-area {
	/* Option 10 of the 2026-09-07 border demo -- a solid green ring that exhales a ripple
	   every few seconds, replacing the 6px dotted one.
	   🔴 The 80% is on the BORDER COLOUR, not on the element. `opacity: .8` here would fade
	   the drag text, the Browse button and the size radios along with it (B, 2026-09-07:
	   the contents stay at 100%). */
	border: 3px solid rgba(86, 232, 93, .8);
	border-radius: 30px;
	width: 480px;
	margin: 0 auto;
	padding: 18px;
	box-shadow: 0 0 0 5px rgba(86, 232, 93, .16), 0 8px 26px -14px rgba(38, 138, 36, .5);
	animation: dropbreathe 3.4s ease-in-out infinite;
}

/* The ripple is a spreading box-shadow, so it costs no layout and cannot scroll the page.
   The second shadow is held constant through both stops or the box appears to lift. */
@keyframes dropbreathe {
	0%, 100% { box-shadow: 0 0 0 0    rgba(86, 232, 93, .34), 0 8px 26px -14px rgba(38, 138, 36, .5); }
	50%      { box-shadow: 0 0 0 11px rgba(86, 232, 93, 0),   0 8px 26px -14px rgba(38, 138, 36, .5); }
}

@keyframes dropbreathe_dark {
	0%, 100% { box-shadow: 0 0 0 0    rgba(86, 232, 93, .26), 0 10px 30px -14px rgba(0, 0, 0, .8); }
	50%      { box-shadow: 0 0 0 11px rgba(86, 232, 93, 0),   0 10px 30px -14px rgba(0, 0, 0, .8); }
}

@media (prefers-reduced-motion: reduce) {
	#drop-area { animation: none; }
}

#drop-area p {
    padding-left: 25px;
    text-indent: -25px;
}    

#drop-area.highlight {
	border-color: rgba(86, 232, 93, 1);
	background: #deffe0;
	animation-duration: 1.1s;
}

p {
	margin-top: 0;
}

.my-form {
	margin-bottom: 10px;
}

#gallery {
	margin-top: 10px;
}

#gallery div {
	margin-top: 12px;
}

#gallery img {
	max-width: 480px;
	max-height: 420px;
	margin-top: 16px;
	margin-bottom: 10px;
	margin-right: 10px;
	vertical-align: middle;
	border: 1px solid #999;
}

.button {
	display: inline-block;
	padding: 10px;
	background: #ccc;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.button:hover {
	background: #ddd;
}

#fileElem {
	display: none;
}

#progress-bar {
	width: 100%;
	display: none;
	margin-top: 12px;
}

#waiting-bar {
	width: 100%;
	display: none;
	;
     margin-top: 12px;
}

#transcode-bar {
	width: 100%;
	display: none;
}

#upload_button {
	border-radius: 12px;
	margin-top: 3em;
	border: none;
	display: inline-block;
	font-weight: bold;
	background-color: #39ba3f;
	color: white;
	font-size: 14px;
	padding: 16px;
	cursor: pointer;
	box-shadow: 0 0 7px 7px #f4faf4;
}

#upload_button:hover {
	background-color: #56e85d;
}

#upload_button.bdisabled {
	background: #dedede !important;
	color: #7c7c7c !important;
	cursor: default;
}

#progress-bar[value]::-webkit-progress-value {
	background-color: green !important;
}

#transcode-bar:not([value])::-webkit-progress-value {
	background-color: yellow !important;
}

#waiting-bar[value]::-webkit-progress-value {
	background-color: orange !important;
}

.bbdisabled {
	cursor: wait;
	color: #888;
}

#aboutline {
    display:inline-block;
	font-size: 14px;
	color: #999;
	margin-top: 8em;
	cursor: pointer;
}

#abouttext {
	width: 480px;
	max-width: 100%;
	font-size: 14px;
	color: #999;
	margin-top: 1em;
}

#notaneasteregg,#beta {
	float: right;
	max-width: 35%;
	margin-right: 2em;
	opacity: .9;
}

.support {
	margin-top: 1.75em;
}

.support img {
	position: relative;
	top: -3px;
}

.vex-content .support {
    font-size:14px;   
}
.modal {
	background: #ccc;
}

.topdrag {
	margin-top: 1em;
	text-align: center;
	margin-bottom: 6px;
}

.bottomdrag {
	text-align: center;
	margin-bottom: 1em;
}

#rockandroll {
	width: 100%;
	border-radius: 12px;
	margin-top: 20px;
	border: none;
	display: inline-block;
	font-weight: bold;
	-webkit-appearance: none;
	background: #39ba3f;
	border:none;
	color: white;
	font-size: 14px;
	padding: 8px;
	cursor: pointer;
	outline: none;
}

xxx#rockandroll:hover {
	background-color: #56e85d;	
}

xxx#rockandroll:disabled:hover {
	background-color: #39ba3f !important;
}

xxx.rockandrolldisabled:hover {
	background-color: #39ba3f !important;	
}
.qfdisabled {
    background-color: #c2c2c2 !important;	
    cursor:default !important;
}

#rockandroll {
	animation: glowing 1300ms infinite;
}

.rockandrolldisabled {
	animation: none !important;
}

.preview {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}

#options_open, #options_closed {
	margin-bottom: 14px;
	color: #555;
	margin-top: 24px;
}

/* Options -> "Let me download it N time(s)" deliberately carries NO styling of its own
   (B, 2026-09-07). #downloads is an ordinary type=text size=3 box exactly like #skipstart
   and #customsize, and every word in the row inherits the same size and colour as the
   checkbox labels above it. The only decorated thing is #maxdownloads, which copies #max200.
*/

.sizeselector {
	margin-left: 0px;
	text-align: center;
	line-height: 1.95;
}

/* 🔴 A radio and its text are ONE unit and must never be split across a line break, at any
   width -- hence nowrap on every label.

   The six presets are a GRID with an explicit column count per breakpoint, not free wrapping.
   Free wrapping is worse than it sounds here: at 375px five labels fit and 100MB is stranded
   alone on a second line. Fixed columns give 6 across on desktop, 3+3 on a phone and 2+2+2
   when it is really tight -- every line balanced and centred, and the break points are a
   decision rather than a side effect of how wide "100MB" happens to render. */
.presets {
	display: grid;
	grid-template-columns: repeat(6, auto);
	justify-content: center;
	justify-items: center;
	align-items: center;
}

.sizeselector label {
	display: inline-block;
	white-space: nowrap;
	margin: 0 .5em;
}
.sizeselector label input[type="radio"] {
	vertical-align: middle;
	margin: 0 .3em 0 0;
}
.sizeselector label span {
	vertical-align: middle;
}
.sizeselector p {
    text-align:center;
}

/* Custom always gets its own line under the presets. */
.customsize_row {
	margin-top: .45em;
	text-align: center;
}
.customsize_row label {
	margin: 0;
}
#customsize {
	margin: 0 .15em;
}
#max200 {
	padding-left: 12px;
	font-size: 85%;
	color: red;
	white-space: nowrap;
	visibility: hidden;
}

#extraline, #extraline a {
	color: #555;
	font-size: 14px;
} 


@keyframes glowing {
	0% {
		background: #39ba3f;
		box-shadow: 0 0 3px #39ba3f;
	}

	50% {
		background: #56e85d;
		box-shadow: 0 0 3px #56e85d;
	}

	100% {
		background: #39ba3f;
		box-shadow: 0 0 3px #39ba3f;
	}
}

.glink {
	text-decoration: none !important;
	color: #999;
}


.browse {
    display: flex;
    margin-bottom:1em;
}
.browse_r {
    padding-left:10px;
    margin:auto 0;
    flex-grow:1;
}    

#djoin {display:inline-block; position:relative; left:0; top:7px; margin-right:2em}

#versionb {display:block; text-align:center; position:relative; left:-18px; top:0; margin:0 auto; color:#999; font-size:13px; margin-bottom:3px; margin-top:8px}
#versionb * {display:inline}
#versionb a {text-decoration:none; color:#999}
#versionb a:hover, #version:hover { color:#39ba3f}

#version {cursor:pointer}

.releasenotes {overflow-x:scroll; max-height:500px }
.releasenotes p, .releasenotes h3 {margin-top:0; margin-bottom:0; font-size:15px}
.releasenotes h2 {margin-top:0; margin-bottom:24px}

.releasenotes::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.releasenotes::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

#url {
    width:85%;
    padding:4px 2px;    
}
#specify_url {margin:24px 0 25px 0}

#url_validation {
    color:red;
}
#cancel_url {
    color:red;
    margin:3px;
    cursor:pointer;
    font-size:10px;
}
.supportlink {
    text-decoration:none;
}
.supportlink:hover {
    text-decoration:underline;
}

.support_icon_t {    
    position:relative;
    top:7px;
    left:3px;
    display:inline-block;
    width:22px;
    height:22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='22' height='22'%3E%3Cpath fill='%2303A9F4' d='M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429'/%3E%3C/svg%3E");
}
.support_icon_d {    
    position:relative;    
    top:3px;
    left:0px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235c6bc0'%3E%3Cpath d='m3.58 21.196h14.259l-.681-2.205c.101.088 5.842 5.009 5.842 5.009v-21.525c-.068-1.338-1.22-2.475-2.648-2.475l-16.767.003c-1.427 0-2.585 1.139-2.585 2.477v16.24c0 1.411 1.156 2.476 2.58 2.476zm10.548-15.513-.033.012.012-.012zm-7.631 1.269c1.833-1.334 3.532-1.27 3.532-1.27l.137.135c-2.243.535-3.26 1.537-3.26 1.537.104-.022 4.633-2.635 10.121.066 0 0-1.019-.937-3.124-1.537l.186-.183c.291.001 1.831.055 3.479 1.26 0 0 1.844 3.15 1.844 7.02-.061-.074-1.144 1.666-3.931 1.726 0 0-.472-.534-.808-1 1.63-.468 2.24-1.404 2.24-1.404-3.173 1.998-5.954 1.686-9.281.336-.031 0-.045-.014-.061-.03v-.006c-.016-.015-.03-.03-.061-.03h-.06c-.204-.134-.34-.2-.34-.2s.609.936 2.174 1.404c-.411.469-.818 1.002-.818 1.002-2.786-.066-3.802-1.806-3.802-1.806 0-3.876 1.833-7.02 1.833-7.02z'/%3E%3Cpath d='m14.308 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.576-1.335-1.29-1.335v.003c-.708 0-1.288.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3Cpath d='m9.69 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.575-1.335-1.286-1.335l-.004.003c-.711 0-1.29.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3C/g%3E%3C/svg%3E");
}
.releaseitem {font-size:15px;}
/*

#f1,#f2 {
    width:18px;
    height:10px;
    opacity:.3;
    display:block;
    margin-bottom:4px;
    margin-top:6px;
}

#f1 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDgwMCA0ODAiPgogIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjE5MiIgZmlsbD0iI2Q2MDI3MCIvPgogICAgPHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI5NiIgeT0iMTkyIiBmaWxsPSIjOWI0Zjk2Ii8+CiAgICA8cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjE5MiIgeT0iMjg4IiBmaWxsPSIjMDAzOGE4Ii8+CiAgPC9nPgo8L3N2Zz4=");
     
}

#f2 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDgwMCA0ODAiPgogIDxwYXRoIGZpbGw9IiM1QkNFRkEiIGQ9Ik0wIDBoODAwdjQ4MEgweiIvPgogIDxwYXRoIGZpbGw9IiNGNUE5QjgiIGQ9Ik0wIDk2aDgwMHYyODhIMHoiLz4KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMCAxOTJoODAwdjk2SDB6Ii8+Cjwvc3ZnPg==");
     
}

*/


/* 
#motd {
	border: 1px solid #b30e13;
	background: #ffffff;
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
	position:relative;
	cursor:pointer;
}

#lookatthisgraph {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    border-bottom-left-radius:19px;
    border-top-left-radius:19px;
	background: linear-gradient(0deg, #ff9284 0%, #fe1c07 100%);
}
#motd span {
    position:relative;
}

#motd a {color:#fe1c07}
*/        
        
.responsive-break {
    display: none;
} 

canvas {display: block; margin:0 auto}

.glow {
  -webkit-animation: glow 13s ease infinite alternate;
  -moz-animation: glow 13s ease infinite alternate;
  animation: glow 13s ease infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 4px #1eb1d4aa;
  }
  50% {
    text-shadow: 0 0 4px #c1ceea;
  }
  to {
    text-shadow: 0 0 4px #2e50ffaa;
  }
}

.brw {width:450px;}

@media only screen and (max-width: 640px) {
    .responsive-break {
        display: block;
    }    
	#drop-area {
		width: 100%;
		padding: 10px;
		border-radius: 0px;
		border-left: none;
		border-right: none;
		border-top: 2px solid rgba(86, 232, 93, .8);
		border-bottom: 2px solid rgba(86, 232, 93, .8);
		/* Full-bleed, so the ripple would run off both edges and read as a stray band. */
		animation: none;
		box-shadow: none;
	}
	#motd_premium,#motd {
		width: 100%;
		font-size: 12px;
		border-radius:8px;
	}

    #lookatthisgraph {
    border-bottom-left-radius:7px;
    border-top-left-radius:7px;
    }
    
	#abouttext, #gallery img, #insertcoin, #status {
		width: 100%;
	}

	h2 {
		margin-bottom: 50px;
	}

	#aboutline {
		margin-top: 4em;
	}

	.dl {
		display: block;
		width: 100%;
		text-align: left;
	}
	.releasenotes {height:300px}
	
    #url {
	    width:75%;
    }

	
}
/* Below 640px #drop-area goes full-bleed, so the presets get the phone layout: 3 + 3. */
@media only screen and (max-width: 640px) {
	.presets { grid-template-columns: repeat(3, auto); }
	.sizeselector label { margin: 0 .4em; }
	.sizeselector { line-height: 1.85; }
}

/* Two per line is the floor -- three "100MB"-width columns stop fitting around here. */
@media only screen and (max-width: 310px) {
	.presets { grid-template-columns: repeat(2, auto); }
	.sizeselector label { margin: 0 .3em; }
	#max200 { padding-left: 6px; }
}

@media only screen and (max-width: 400px) {
    .vex-dialog-button {padding:9px 20px !important}
}
@media only screen and (max-width: 350px) {
    .vex-dialog-button {padding:8px 10px !important}
}

@media only screen and (min-width: 1024px) {
	html {
		background: #eee;
		height: 100%;
		width: 100%;
		
	}

	body {
		background: white;
		border-right: 1px solid #ddd;
		border-left: 2px solid #ddd;
		min-height: 100%;
	}
	.brw {width:560px !important}
}



@media (prefers-color-scheme: dark) {


    html {
        background-color: #181a1b !important;
    }
    html, body, input, textarea, select, button {
        background-color: #282a2b;
    }
    html, body, input, textarea, select, button {
        border-color: #736b5e;
        color: #e8e6e3;
    }
    a {
        color: #3391ff;
    }
    table {
        border-color: #545b5e;
    }
    ::placeholder {
        color: #b2aba1;
    }
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        background-color: #555b00 !important;
        color: #e8e6e3 !important;
    }
    ::selection {
        background-color: #004daa !important;
        color: #e8e6e3 !important;
    }
    ::-moz-selection {
        background-color: #004daa !important;
        color: #e8e6e3 !important;
    }       

    body { background-image: initial; background-color: black !important}
    html { background-color: #131307 !important;}
    h1 {color:#FDFDFE}    
    
    @media only screen and (max-width: 1024px) {
    	html { background-color: black !important;}
    }
    
    .logocolor { color: rgb(92, 233, 99); }
    a { color: rgb(125, 173, 212); }
    #motd_premium,#motd { border-color: #a45d18; background-image: linear-gradient(0deg, #5d2e00 0%, #af650e  100%); background-color: initial; }
    #motd_premium,#motd a {color:#e0842a}    
    
    .motd_hover:hover {
        background: #830e27 !important;
        border:1px solid #a41836 !important;
        background: linear-gradient(0deg, rgba(131,14,39,1) 0%, rgba(67,6,19,1) 100%) !important;
    }    
    
    /*    
    
    #motd {
    	background: black;
    	border:1px solid #a12721;
    }
    
    #lookatthisgraph {
        background-image: linear-gradient(0deg, #5e0b08 0%, #a12721  100%); background-color: initial; 
    }
    #motd a {color:#dd3e37}
    
    */
        

    #drop-area { border-color: rgba(45, 175, 52, .8); box-shadow: 0 0 0 5px rgba(86, 232, 93, .10), 0 10px 30px -14px rgba(0, 0, 0, .8); animation-name: dropbreathe_dark; }
    #drop-area.highlight { border-color: rgba(86, 232, 93, .95); background-image: initial; background-color: rgb(0, 71, 21); }
    #gallery img { border-color: rgb(77, 83, 86); }
    .button { background-image: initial; background-color: rgb(53, 57, 59); border-color: rgb(62, 68, 70); }
    .button:hover { background-image: initial; background-color: rgb(43, 47, 49); }
    #upload_button { border-color: initial; background-color: rgb(46, 149, 50); color: rgb(232, 230, 227); box-shadow: rgb(25, 42, 19) 0px 0px 7px 7px; }
    #upload_button:hover { background-color: rgb(20, 146, 56); }
    #upload_button.bdisabled { background-image: initial !important; background-color: rgb(43, 46, 48) !important; color: rgb(154, 145, 132) !important; }
    #progress-bar[value]::-webkit-progress-value { background-color: rgb(0, 102, 0) !important; }
    #transcode-bar:not([value])::-webkit-progress-value { background-color: rgb(204, 204, 0) !important; }
    #waiting-bar[value]::-webkit-progress-value { background-color: rgb(204, 132, 0) !important; }
    .bbdisabled { color: rgb(157, 148, 136); }
    #aboutline { color: rgb(168, 160, 149); }
    #abouttext { color: rgb(168, 160, 149); }
    .modal { background-image: initial; background-color: rgb(53, 57, 59); }
    #rockandroll { background-image: initial; background-color: rgb(46, 149, 50); border-color: initial; color: rgb(232, 230, 227); outline-color: initial; }
    xxx#rockandroll:hover { background-color: rgb(20, 146, 56); }
    xxx#rockandroll:disabled:hover { background-color: rgb(46, 149, 50) !important; }
    xxx.rockandrolldisabled:hover { background-color: rgb(46, 149, 50) !important; }
    .qfdisabled { background-color: rgb(58, 63, 66) !important; }
    #options_open, #options_closed { color: rgb(178, 172, 162); }
    #extraline, #extraline a { color: rgb(178, 172, 162); }
    .glink { color: rgb(168, 160, 149); text-decoration-color: initial !important; }
    #versionb { color: rgb(168, 160, 149); }
    #versionb a { text-decoration-color: initial; color: rgb(168, 160, 149); }
    #versionb a:hover, #version:hover { color: rgb(86, 203, 91); }
    .releasenotes::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); box-shadow: rgba(24, 26, 27, 0.5) 0px 0px 1px; }
    #url_validation { color: rgb(255, 26, 26); }
    #cancel_url { color: rgb(255, 26, 26); }
    .supportlink { text-decoration-color: initial; }
    .supportlink:hover { text-decoration-color: initial; }
    .support_icon_t { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='22' height='22'%3E%3Cpath fill='%2303A9F4' d='M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429'/%3E%3C/svg%3E"); }
    .support_icon_d { background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235c6bc0'%3E%3Cpath d='m3.58 21.196h14.259l-.681-2.205c.101.088 5.842 5.009 5.842 5.009v-21.525c-.068-1.338-1.22-2.475-2.648-2.475l-16.767.003c-1.427 0-2.585 1.139-2.585 2.477v16.24c0 1.411 1.156 2.476 2.58 2.476zm10.548-15.513-.033.012.012-.012zm-7.631 1.269c1.833-1.334 3.532-1.27 3.532-1.27l.137.135c-2.243.535-3.26 1.537-3.26 1.537.104-.022 4.633-2.635 10.121.066 0 0-1.019-.937-3.124-1.537l.186-.183c.291.001 1.831.055 3.479 1.26 0 0 1.844 3.15 1.844 7.02-.061-.074-1.144 1.666-3.931 1.726 0 0-.472-.534-.808-1 1.63-.468 2.24-1.404 2.24-1.404-3.173 1.998-5.954 1.686-9.281.336-.031 0-.045-.014-.061-.03v-.006c-.016-.015-.03-.03-.061-.03h-.06c-.204-.134-.34-.2-.34-.2s.609.936 2.174 1.404c-.411.469-.818 1.002-.818 1.002-2.786-.066-3.802-1.806-3.802-1.806 0-3.876 1.833-7.02 1.833-7.02z'/%3E%3Cpath d='m14.308 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.576-1.335-1.29-1.335v.003c-.708 0-1.288.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3Cpath d='m9.69 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.575-1.335-1.286-1.335l-.004.003c-.711 0-1.29.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3C/g%3E%3C/svg%3E"); }
 
     @keyframes glowing {
    	0% {
    		background: #268a24;
    		box-shadow: 0 0 3px #39ba3f;
    	}
    
    	50% {
    		background: #5ba75a;
    		box-shadow: 0 0 3px #56e85d;
    	}
    
    	100% {
    		background: #268a24;
    		box-shadow: 0 0 3px #39ba3f;
    	}
    }

 
    @media only screen and (max-width: 640px) {
      /* dark + phone: two bands, no ring, no ripple -- same shape as the light mobile rule */
      #drop-area { border-left-color: initial; border-right-color: initial; border-top-color: rgba(45, 175, 52, .8); border-bottom-color: rgba(45, 175, 52, .8); animation: none; box-shadow: none; }
    }
    @media only screen and (min-width: 1024px) {
      html { background-image: initial; background-color: rgb(34, 36, 38); }
      body { background-image: initial; background-color: rgb(24, 26, 27); border-right-color: rgb(58, 62, 65); border-left-color: rgb(58, 62, 65); }
    }
    @media not all {
      html { background-color: rgb(19, 21, 22) !important; }
      html, body, input, textarea, select, button { background-color: rgb(19, 21, 22); }
      html, body, input, textarea, select, button { border-color: rgb(106, 98, 87); color: rgb(216, 212, 207); }
      a { color: rgb(61, 165, 255); }
      table { border-color: rgb(111, 103, 91); }
      ::placeholder { color: rgb(178, 171, 161); }
      input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(68, 73, 0) !important; color: rgb(216, 212, 207) !important; }
      ::selection { background-color: rgb(0, 62, 136) !important; color: rgb(216, 212, 207) !important; }
      #upload_button { box-shadow: rgb(20, 34, 15) 0px 0px 7px 7px; }
    }
    
}

.sizeselector [data-disabled="true"] + span {
    color: #aaa; /* Gray out the text */
}

.sizeselector [data-disabled="true"] {
    pointer-events: none; /* Prevent interaction */
    opacity: 0.5; /* Visual feedback for being "disabled" */
}

#hold_progress {
    
    position:absolute;
    bottom:0px;
    left:0;
    right:0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background:#e0e0ee;
    border-top:1px solid #077bfb;
    height:14px;
    width:100%;
      
}

#hold_inner {
    border-bottom-left-radius: 5px;
    
    background: #5aa8ff;
    height:100%;    
}


.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #5aa8ff; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #5aa8ff; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #5aa8ff; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #5aa8ff; }
    100% { background-color: transparent; }
}









/* ===== Server Status (compact; rounded; alt rows) ======================= */
.ss-wrap{
  width:528px; margin:20px auto 0; box-sizing:border-box;
  position:relative;
   border: double 3px transparent;
   border-radius: 14px;
   background-image: linear-gradient(white, white), linear-gradient(135deg,#39ba3f,#bdbdbd,#ddd,#bdbdbd,#39ba3f);
   background-origin: border-box;
   background-clip: content-box, border-box;
   
}
.ss-head{
  padding:8px 12px; font-weight:600; /* match Options tone, not extra-bold */
  cursor:pointer; user-select:none;
}
.ss-body{ padding:10px 12px 12px; border-top:1px solid #e8e8e8; }

.ss-queues.one-line{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap; margin-bottom:8px;
}
.ss-queues .q{ font-size:12px; color:#444; white-space:nowrap; }
.ss-queues .q.prem{ color:#a0162d; }
.ss-queues .ss-cta{
  font-size:12px; font-weight:700; text-decoration:none; background:#a0162d; color:#fff;
  padding:6px 10px; border-radius:8px; white-space:nowrap;
}


/* Row: host | bars | badge + meta line under, tight */
.ss-row{
  display:grid; grid-template-columns:160px 1fr auto; gap:0px; align-items:center;
  padding:4px 2px; /* balanced paddings */
}
.ss-row:nth-child(odd){ background:#ffffff; }
.ss-row:nth-child(even){ background:#f7f7f7; }
.ss-row:hover{ background:#eee; }             /* subtle highlight */
.ss-row .ss-host{
  font-size:12px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-row .ss-bars{
  display:grid; grid-template-rows:6px 3px 3px; row-gap:0; align-content:center;
}
.ss-row .ss-meta{
  grid-column:1/-1; margin-top:2px; font-size:9px; color:#aaa;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  display:grid;
  grid-template-columns: 10ch 10ch 11ch 11ch 8ch 7ch; /* score | cpu | memory | disk | run | age */
  column-gap:8px;
}
.ss-row .ss-meta .kv{ white-space:nowrap; }

/* Badge (solid color determined by score) */
.ss-badge{
  display:inline-block; min-width:46px; text-align:center; font-weight:700; font-size:11px;
  padding:2px 8px; border-radius:6px;
}

/* Bars */
.ss-bar{ --pct:0%; position:relative; height:6px; background:#eee; overflow:hidden; }

/* 1) Score gradient track + very light unfilled mask */
.ss-bar.ss-load{
  background:linear-gradient(90deg,#2fb34e 0%, #f6c33b 50%, #d6392f 100%);
}
.ss-bar.ss-load::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:calc(100% - var(--pct));
  background:rgba(255,255,255,0.88);
}

/* 2) Memory (yellow) – FREE MB% */
.ss-bar.ss-mem{ height:3px; background:#eee; }
.ss-bar.ss-mem::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct);
  background:linear-gradient(90deg,#ffe089,#f1b81a);
}

/* 3) Disk (orange) – GB free% */
.ss-bar.ss-disk{ height:3px; background:#eee; }
.ss-bar.ss-disk::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct);
  background:linear-gradient(90deg,#ffb37a,#ff6b1a);
}

/* Premium accent + stale */
.ss-row.prem .ss-host{ color:#7f0f25;  }
.ss-row.stale{ opacity:.45; filter:grayscale(.6); }

.ss-row.prem:nth-child(odd){ background:#fffdfd; }
.ss-row.prem:nth-child(even){ background:#fff5f5; }
.ss-row.prem:hover{ background:#fee; }  


/* --- Server Status tweaks (override) --- */

/* 1) Bars start closer to the hostname */
.ss-row{
  grid-template-columns: 100px 1fr auto;  /* was 160px */
}
.ss-row .ss-host{
  margin-right: 6px;                      /* tiny gap between name and bars */
}

/* 2) A little space before the score % badge */
.ss-badge{
  margin-left: 8px;                       /* space between bars and % */
}

/* 3) Make the score block smaller, softer corners, lighter text */
.ss-badge{
  min-width: 28px;                        /* was 46px */
  padding: 2px 2px;                       /* a bit tighter */
  border-radius: 5px;                     /* was pill */
  font-weight: 600;                       /* slightly lighter than 700 */
}

/* (optional) tighten the meta row a hair more, if you want */
.ss-row .ss-meta{
  margin-top: 1px;
}



/* Make the 3 counters size to content */
.ss-queues.one-line .q { 
  flex: 0 0 auto; 
}

/* Default layout when CTA is present (keeps your current look) */
.ss-queues.one-line { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  flex-wrap: nowrap; 
}

/* If the CTA is hidden or removed, align left and keep a tidy gap */
.ss-queues.one-line:not(:has(.ss-cta)) {
  justify-content: flex-start;
  gap: 14px;
}

/* If you hide the CTA with CSS (display:none) instead of removing it */
.ss-queues.one-line:has(.ss-cta[hidden]),
.ss-queues.one-line:has(.ss-cta.is-hidden),
.ss-queues.one-line:has(.ss-cta[style*="display:none"]) {
  justify-content: flex-start;
  gap: 14px;
}

/* Optional: make labels slightly less shouty when compact */
.ss-queues .q { font-size: 12px; color: #555; }

#refresh_load {position:absolute; top:8px; right:14px; font-size:15px; cursor:pointer; color:#666}
#refresh_load:hover {color:#050}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .ss-wrap{ background:#1e1f21; border-image:linear-gradient(135deg,#1f7a36,#6f6f6f,#1f7a36) 1; }
  .ss-body{ border-top-color:#2f3234; }
  .ss-list{ background:#222; border-color:#35393a; }
  .ss-row:nth-child(odd){ background:#222; }
  .ss-row:nth-child(even){ background:#333; }
  .ss-row:hover{ background:#2b322b; }
  .ss-row .ss-host{ color:#ddd; }
  .ss-row .ss-meta{ color:#a9a9a9; }
  .ss-queues .q{ color:#ccc; }
  .ss-queues .ss-cta{ background:#671222; }
  .ss-bar{ background:#2a2d2f; }
  .ss-bar.ss-load{ background:linear-gradient(90deg,#1f7a36,#8a6f1d 50%,#8a1e1a); }
  .ss-bar.ss-load::after{ background:rgba(30,31,33,.70); }
  .ss-bar.ss-mem,.ss-bar.ss-disk{ background:#2a2d2f; }
  
.ss-row.prem:nth-child(odd){ background:#292222; }
.ss-row.prem:nth-child(even){ background:#362a2a; }
.ss-row.prem:hover{ background:#473030; }  
  
  
}



/* ══════════════════════════════════════════════════════════════════════════════════════
   FEEDBACK WIDGET  --  the replacement for Appzi (see feedback.php, docs/FEEDBACK.md)

   It lives HERE, in the file push_production.php concatenates into v<N>.css, so it costs
   no extra request.  Same reason its glyphs are inline <svg> in app.php rather than an
   icon font or a sprite, and its behaviour is in js/app.js rather than a separate file.

   Deliberately NOT a copy of Appzi's widget.  Appzi is a vertical tab welded to the right
   edge that opens a card of bare emoji faces.  This is a horizontal pill sitting in the
   bottom-right corner that opens upward into a card of three LABELLED chips -- different
   shape, different anchor, different affordance, our own wording and our own palette
   (#39ba3f, the site green, which Appzi does not use).
   ═══════════════════════════════════════════════════════════════════════════════════ */

#fbw {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9000;
	/* 🔴 The container must not eat clicks meant for the page. On a narrow screen the rule
	   at the bottom of this block stretches #fbw across the full width, which turns it into
	   an invisible bar lying over whatever is at the foot of the page -- a Playwright tap at
	   x=20 on a 390px viewport landed on .fbwrap, 440px away from the pill, instead of on
	   the page (measured 2026-09-08). Only the pill and the panel take pointer events; the
	   boxes that position them do not. */
	pointer-events: none;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

#fbw * { box-sizing: border-box; }

#fbtab {
	/* Vertical and flush to the edge. `writing-mode` keeps this a real focusable button with
	   real text inside, rather than a transform:rotate trick that hit-testing and screen
	   readers both have to reason about.
	
	   🔴 THE ROTATION IS vertical-rl PLUS rotate(180deg), AND THE 180 IS NOT OPTIONAL.
	   `vertical-rl` alone reads top-to-bottom with the glyphs turned clockwise, which is the
	   wrong way round for a right-edge tab (B, 2026-09-08). The extra 180 makes it read
	   bottom-to-top, turned anticlockwise, which is what every side tab actually does.
	
	   ⚠️ THE 180 FLIPS FOUR OTHER PROPERTIES, so they are all written back-to-front on
	   purpose. Do not "correct" any of them without taking the rotate off first:
	     border-left: none      -> appears on the RIGHT, i.e. flush against the screen edge
	     border-radius 0 9 9 0  -> appears rounded on the LEFT, away from the edge
	     box-shadow  2px 0      -> falls to the LEFT, over the page
	     flex-direction reverse -> puts the icon back ABOVE the word
	   The hover nudge has the same problem: translateX(2px) inside a rotated frame moves it
	   visually left, toward the page. */
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 7px;
	padding: 16px 7px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	border: 1px solid #d8d8d8;
	border-left: none;
	border-radius: 0 9px 9px 0;
	background: #fff;
	color: #333;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
	/* Tighter than it was: 8px of blur rather than 10, and less of it. B asked for a less
	   wide drop shadow (2026-09-08). */
	box-shadow: 2px 0 8px rgba(0,0,0,.10);
	transition: transform .12s ease, box-shadow .12s ease;
}

#fbtab:hover  { box-shadow: 3px 0 10px rgba(0,0,0,.16); transform: rotate(180deg) translateX(2px); }
#fbtab:focus-visible { outline: 2px solid #39ba3f; outline-offset: 2px; }
/* The bubble is filled, not outlined -- it is the only piece of colour on a tab that is
   otherwise white, and an outline at 16px reads as grey mush. Variant A of the five in
   ~/artifacts/2026-09-08-*-8mb-feedback-tab-bubble.html. */
#fbtab svg          { width: 16px; height: 16px; flex: none; }
#fbtab svg.fbbubble {
	fill: #39ba3f;
	stroke: none;
	/* Turned anticlockwise WITH the word, not left upright (B, 2026-09-08).
	   The arithmetic: the tab is already rotate(180deg), and a child's transform composes
	   on top of its parent's, so 180 + 90 = 270 clockwise = 90 ANTICLOCKWISE from the page.
	   rotate(180deg) here would cancel the tab and stand the bubble up; rotate(-90deg)
	   would turn it the wrong way. It is 90. */
	transform: rotate(90deg);
}
#fbtab.fbnudge svg.fbbubble { fill: #fff; }

/* The once-a-week nudge after a finished file. Sits in the same pill so nothing new
   appears on screen -- it just gets wider and greener for a moment. */
#fbtab.fbnudge {
	background: #39ba3f;
	border-color: #39ba3f;
	color: #fff;
	animation: fbpop .35s ease;
}
/* Keeps the rotate: a bare scale() here would replace the transform and snap the tab
   upright for the length of the animation. */
@keyframes fbpop {
	from { transform: rotate(180deg) scale(.9); opacity: .4 }
	to   { transform: rotate(180deg) scale(1);  opacity: 1 }
}

#fbpanel {
	position: relative;
	width: 320px;
	text-align: left;
	margin-right: 9px;
	padding: 14px;
	border: 1px solid #e2e2e2;
	border-radius: 14px;
	background: #fff;
	color: #222;
	box-shadow: 0 8px 30px rgba(0,0,0,.19);
	animation: fbrise .16s ease-out;
}
@keyframes fbrise { from { transform: translateX(10px); opacity: 0 } to { transform: none; opacity: 1 } }

#fbpanel h3 {
	margin: 0 26px 2px 0;
	font-size: 15px;
	font-weight: bold;
}
#fbpanel p.fbsub { margin: 0 0 11px; font-size: 12px; color: #767676; }

#fbclose {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 26px; height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #999;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
#fbclose:hover { background: #f0f0f0; color: #444; }
.fbwrap {
	display: flex;
	flex-direction: row-reverse;   /* tab welded to the edge, panel opens inward */
	align-items: center;
	pointer-events: none;
}
#fbtab, #fbpanel { pointer-events: auto; }

.fbmoods { display: flex; gap: 7px; }

.fbmood {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 11px 4px;
	border: 1px solid #e0e0e0;
	border-radius: 11px;
	background: #fafafa;
	color: #444;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}
.fbmood svg { width: 21px; height: 21px; }
.fbmood:hover { background: #f2f2f2; }
.fbmood.on    { border-color: #39ba3f; background: #eefaef; color: #17691b; font-weight: bold; }
.fbmood.on svg { color: #39ba3f; }

#fbbody {
	width: 100%;
	height: 84px;
	margin-top: 11px;
	padding: 8px;
	border: 1px solid #cfcfcf;
	border-radius: 9px;
	font: inherit;
	font-size: 13px;
	resize: vertical;
}
#fbemail {
	width: 100%;
	margin-top: 7px;
	padding: 8px;
	border: 1px solid #cfcfcf;
	border-radius: 9px;
	font: inherit;
	font-size: 13px;
}
#fbbody:focus, #fbemail:focus { border-color: #39ba3f; outline: none; }

/* The honeypot. Off-screen rather than display:none -- a bot that skips hidden fields is
   the easy half; this one is in the layout and reachable, just not to a person. */
.fbhp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

#fbsend {
	width: 100%;
	margin-top: 9px;
	padding: 10px;
	border: none;
	border-radius: 11px;
	background: #39ba3f;
	color: #fff;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
	-webkit-appearance: none;
}
#fbsend:hover:enabled { background: #56e85d; }
#fbsend:disabled { background: #c2c2c2; cursor: default; }

.fbnote { margin: 8px 0 0; font-size: 11px; color: #8a8a8a; }
.fberr  { margin: 8px 0 0; font-size: 12px; color: #c22; }
.fbdone { padding: 14px 4px; text-align: center; font-weight: bold; color: #17691b; }
.fbdone span { display: block; margin-top: 4px; font-weight: normal; font-size: 12px; color: #767676; }

/* ⚠️ MEASURE BEFORE YOU WRITE A PHONE BREAKPOINT FOR THIS SITE.
   The first version of this block was `max-width: 520px`, and it was dead code: on a 390px
   phone this page does not lay out at 390px. #drop-area alone is 548px wide, so Chrome
   widens the layout viewport to 592 and scales the page down -- innerWidth reports 592 on a
   390px device, measured 2026-09-08 against production, which has no widget on it at all.
   So a media query below ~592px never fires here no matter how small the handset is.

   It also must not stretch the widget full-width. Doing that put an invisible bar across
   the foot of the page that swallowed taps meant for the page behind it (see the
   pointer-events note at the top of this block, which stays as a second line of defence).
   The panel is 320px and the layout viewport is never narrower than ~592, so it fits with
   room to spare and simply stays where it is. */
/* Touch devices: top right, still vertical (B, 2026-09-08). Bottom-right on a phone is
   where the thumb, the browser chrome and the Upload button all already are.

   🔴 Detected by POINTER TYPE, not by width, and that is not a stylistic choice: a width
   breakpoint cannot find a phone on this site. This page does not lay out at 390px on a
   390px handset -- #drop-area alone is 548px wide, so Chrome widens the layout viewport and
   innerWidth reports 592. Measured 2026-09-08 against production, which carries no widget,
   so the widget is not the cause. A `max-width: 520px` rule was written first and was dead
   code. (hover:none)+(pointer:coarse) is true on a phone whatever it claims its width is. */
@media (hover: none) and (pointer: coarse) {
	#fbw { top: 0; transform: none; }      /* hard to the top right, no margin (B, 2026-09-08) */
	.fbwrap { align-items: flex-start; }
	/* Flush along the TOP and the RIGHT now, so the only corner that should be rounded is
	   the one hanging in free space -- visually bottom-left.
	
	   🔴 Written back-to-front, like everything else on this element, because of the
	   rotate(180deg): 180 degrees maps top<->bottom and left<->right, so
	     visually bottom-left rounded  <-  top-RIGHT in the CSS  ->  0 9px 0 0
	     visually no border on top     <-  border-BOTTOM: none
	     visually no border on right   <-  border-left: none, inherited from the base rule
	   The first version of this rule was `0 0 9px 0` + border-top:none, which put the round
	   corner and the missing border on exactly the wrong sides (B spotted it, 2026-09-08). */
	#fbtab { border-radius: 0 9px 0 0; border-bottom: none; border-top: 1px solid #d8d8d8; }
}

/* Genuinely tiny layout viewports: keep the panel on screen beside the tab. */
@media (max-width: 400px) {
	#fbpanel { width: calc(100vw - 62px); }
}

@media (prefers-color-scheme: dark) {
	#fbtab            { background: #23262b; border-color: #3a3f45; color: #e6e6e6; }
	#fbtab.fbnudge    { background: #39ba3f; border-color: #39ba3f; color: #fff; }
	#fbpanel          { background: #1c1f23; border-color: #34383e; color: #e6e6e6; box-shadow: 0 8px 30px rgba(0,0,0,.55); }
	#fbpanel p.fbsub  { color: #9aa0a6; }
	#fbclose          { color: #8b9196; }
	#fbclose:hover    { background: #2c3036; color: #e6e6e6; }
	.fbmood           { background: #24282d; border-color: #3a3f45; color: #d7dadd; }
	.fbmood:hover     { background: #2b3036; }
	.fbmood.on        { background: #17331a; border-color: #39ba3f; color: #7ee083; }
	#fbbody, #fbemail { background: #24282d; border-color: #3a3f45; color: #e6e6e6; }
	.fbnote           { color: #8b9196; }
	.fbdone           { color: #7ee083; }
	.fbdone span      { color: #9aa0a6; }
}