/* ==========================================================
   SHABDBHOOMI DESIGN SYSTEM (SDS) v1.0
   Global Theme
========================================================== */

:root{

    --sb-primary:#A75500;
    --sb-primary-hover:#C46A1A;

    --sb-bg:#F8F4EC;
    --sb-card:#FFFDF8;

    --sb-border:#E4D8C8;

    --sb-heading:#3B2413;
    --sb-text:#5C4633;

    --sb-success:#2E8B57;
    --sb-warning:#C88A00;
    --sb-danger:#C0392B;
    --sb-info:#3478F6;

    --sb-radius:18px;

    --sb-shadow:
        0 8px 28px rgba(0,0,0,.08);

}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

body{

    background:var(--sb-bg);

    font-family:'Inter',sans-serif;

    color:var(--sb-text);

}

/* Page Heading */

.sb-page-title{

    font-family:'Cormorant Garamond',serif;

    font-size:40px;

    color:var(--sb-heading);

    margin-bottom:8px;

}

.sb-page-subtitle{

    font-size:16px;

    color:#7A685A;

    margin-bottom:35px;

}

/* ==========================================================
   DASHBOARD HEADER
==========================================================*/

.sb-dashboard-header{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:40px;

    padding:30px;

    background:#FFFDF8;

    border:1px solid #E5DAC8;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.sb-header-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#FFF2E3;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

}

.sb-header-text{

    flex:1;

}

.sb-page-title{

    margin:0;

    font-size:38px;

    color:#4A2C17;

    font-family:'Cormorant Garamond',serif;

}

.sb-page-subtitle{

    margin-top:8px;

    color:#796555;

    font-size:16px;

    line-height:1.7;

}

/*==========================================================
SPEECH TO TEXT
==========================================================*/

/* Speech Controls */

.gdf-speech-controls{

    display:flex;
    gap:24px;
    align-items:center;
    margin:18px 0;

}

/* Base */

.gdf-speech-controls button{

    background:transparent;
    border:none;
    box-shadow:none;

    font-size:16px;
    font-weight:700;
    color:#222;

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 0;

    cursor:pointer;

    transition:.25s;

}

/* Start */

#startSpeech::before{

    content:"🎤";
    font-size:22px;

}

/* Stop */

#stopSpeech::before{

    content:"";
    font-size:18px;

}

/* Recording */

#startSpeech.recording{

    color:#2E8B57;

}

/* Stop Active */

#stopSpeech.active{

    color:#C0392B;

}

/* Disabled */

.gdf-speech-controls button:disabled{

    opacity:.55;
    cursor:not-allowed;
    color:#222 !important;

}

#stopSpeech:disabled{

    color:#222 !important;

}

#stopSpeech:disabled:hover{

    color:#222 !important;

}

/* Hover */

.gdf-speech-controls button:hover:not(:disabled){

    color:#222 !important;
    background:transparent !important;
    border-color:transparent !important;
    transform:translateY(-1px);

}

.gdf-speech-controls button:hover:not(:disabled)::before{

    opacity:1;

}