@import url("base.css");

body {
min-height: 100vh;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top left, rgba(255, 213, 0, 0.35), transparent 60%), linear-gradient(135deg, #000000, #1a1a1a)}

main {
width: 100%;
max-width: 500px;
padding: 40px 24px;
text-align: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25)}

.logo {width: 120px;margin-bottom:10px}

h1 {
margin:20px auto;
font-size: 22px;
font-weight: 600;
color: var(--white2)}

p {
margin: 20px auto 30px auto;
text-align: justify;
line-height: 1.7;
color: var(--white)}

.box_textarea {position: relative;width: 100%}

textarea {
width: 100%;
min-height: 140px;
padding: 12px 70px 12px 12px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
color: var(--white)}

textarea::placeholder {color: rgba(255, 255, 255, 0.9)}

button.paste {
top: 10px;
right: 10px;
padding: 6px 10px;
position: absolute;
font-size: 12px;
border-radius: 8px;
cursor: pointer;
background-color:var(--blue);
color:  var(--white);
border: none}

button.login {
width: 100%;
margin-top: 16px;
padding: 12px;
border-radius: 12px;
cursor: pointer;
color: var(--white);
background-color: var(--green);
border: none}

button.logout {
width: 40%;
margin-top: 16px;
padding: 12px;
border-radius: 12px;
cursor: pointer;
color: var(--white);
background-color: var(--red);
border: none}

@media (max-width: 480px) {
main {padding: 32px 18px}
h1 {font-size: 20px}}


/******************** noti toast ********************/
.noti_toast {
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 8px 10px;
position: fixed;
background-color: var(--orange);
color: var(--white);
border-radius: 12px;
opacity: 0;
pointer-events: none;
animation: toastInOut 3s ease-out forwards}

@keyframes toastInOut {
0% {opacity: 0; transform: translate(-50%, -20px)}
10% {opacity: 1; transform: translate(-50%, 0)}
90% {opacity: 1}
100% {opacity: 0; transform: translate(-50%, -20px)}}
/******************** noti toast ********************/


/******************** noti ********************/
.box_notification {
max-width: 360px;
top: 20px;
left: 20px;
margin: 0;
padding: 15px 20px 15px 20px;
display: flex;
align-items: center;
position: fixed;
z-index: 1000;
gap: 12px;
border-radius: 12px;
color: var(--white);
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
animation: slideIn 0.5s ease-out forwards, fadeOut 0.5s ease-in 4.5s forwards}

.box_notification::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
z-index: 0}

.box_notification.success {background-color: var(--green)}
.box_notification.success::before {background-color: rgba(255,255,255,0.4)}
.box_notification.error {background-color: var(--red)}
.box_notification.error::before {background-color: rgba(255,255,255,0.4)}

.box_notification p {
margin: 0;
z-index: 2;
line-height: 1.6;
flex: 1}

@keyframes slideIn {
from {opacity: 0; transform: translateY(-20px)}
to {opacity: 1; transform: translateY(0)}}

@keyframes fadeOut {
from {opacity: 1; transform: translateY(0)}
to {opacity: 0; transform: translateY(-20px)}}
/******************** noti ********************/

#timer {color: var(--white2);font-size: 34px;margin-bottom: 20px}

.progress-wrapper {
width: 320px;
height: 20px;
background: var(--silver);
border-radius: 10px;
margin: 0 auto;
overflow: hidden}

.progress-bar {
height: 100%;
width: 100%;
background: #2ecc71;
transition: width 1s linear, background-color 0.5s}

.blink {animation: blink 1s infinite}

@keyframes blink {
0% {opacity: 1}
50% {opacity: 0.4}
100% {opacity: 1}}