/* ==========================================================
   CivilsCentral Typing Master
   Master Stylesheet
   Version 3.0
========================================================== */

/* ==========================
   Imports
========================== */

/* ==========================
   Imports
========================== */

@import url("variables.css");
@import url("reset.css");
@import url("base.css");
@import url("typography.css");
@import url("layout.css");
@import url("utilities.css");
@import url("components.css");
@import url("practice.css");
@import url("animation.css");
@import url("responsive.css");

/* ==========================
   Reset
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   Body
========================== */

body{

    background:var(--cctm-bg);

    font-family:var(--font-family);

    color:var(--cctm-text);

    font-size:var(--text-size);

}

/* ==========================
   Links
========================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ==========================
   Images
========================== */

img{

    max-width:100%;

    display:block;

}

/* ==========================
   Character Styles
========================== */

.cctm-word{

    display:inline-block;

}

.cctm-char{

    position:relative;

    white-space:pre;

    transition:.08s;

}

.cctm-char.correct{

    color:var(--cctm-success);

}

.cctm-char.wrong{

    color:var(--cctm-danger);

    background:#fee2e2;

    border-radius:4px;

}

.cctm-char.missed{

    color:#92400e;

    background:#fef3c7;

    border-radius:4px;

}

.cctm-char.extra{

    color:#7c3aed;

    background:#ede9fe;

    border-radius:4px;

}

.cctm-char.current{

    background:var(--cctm-primary);

    color:#fff;

    border-radius:4px;

}

/* ==========================
   Result Modal
========================== */

.cctm-result-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:rgba(0,0,0,.65);

    z-index:99999;

}

.cctm-result-card{

    width:720px;

    max-width:100%;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow-lg);

    animation:cctmPopup .25s ease;

    padding:35px;

}

/* =====================================================
   Notification UI
===================================================== */

#cctm-notification {

    position: fixed;

    top: 20px;

    right: 20px;

    width: 340px;

    max-width: calc(100% - 40px);

    background: #ffffff;

    border-left: 5px solid #f59e0b;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0,0,0,.15);

    padding: 16px 18px;

    z-index: 999999;

    animation: cctmSlideIn .25s ease;

}

#cctm-notification.cctm-success {

    border-left-color: #22c55e;

}

#cctm-notification.cctm-warning {

    border-left-color: #f59e0b;

}

#cctm-notification.cctm-error {

    border-left-color: #ef4444;

}

#cctm-notification.cctm-info {

    border-left-color: #3b82f6;

}

.cctm-notification-title {

    font-size: 16px;

    font-weight: 700;

    color: #111827;

    margin-bottom: 8px;

}

.cctm-notification-message {

    font-size: 14px;

    color: #4b5563;

    line-height: 1.5;

}

@keyframes cctmSlideIn {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}